商品分享功能 — review by 李其昌

@@ -56,6 +56,7 @@ const config = {
     patterns: [
     patterns: [
       { from: 'src/assets/', to: 'dist/assets/' },
       { from: 'src/assets/', to: 'dist/assets/' },
       { from: 'src/libs/', to: 'dist/libs/' },
       { from: 'src/libs/', to: 'dist/libs/' },
+      { from: 'src/components/shareSheet', to: 'dist/components/shareSheet' },
     ],
     ],
     options: {
     options: {
     }
     }

 import {
 import {
-    SHOWSIZEBOX
+    SHOWSIZEBOX,
+    SHOWSHARESHEET
 } from '../constants/productDetail'
 } from '../constants/productDetail'
   
   
 export const showSizeBox = (isShow) => {
 export const showSizeBox = (isShow) => {
@@ -8,4 +9,11 @@ export const showSizeBox = (isShow) => {
         type: SHOWSIZEBOX
         type: SHOWSIZEBOX
     }
     }
 }
 }
+
+export const showSharesheet = (isShow) => {
+    return {
+        isShow,
+        type: SHOWSHARESHEET
+    }
+}

+import event from '../../utils/event.js'
+
+const CANCEL_SHARE = 'user-canel-share';
+
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    isShow: {
+      type: Boolean,
+      value: false,
+    }
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    
+    onShare: function(event) {
+      let index = event.currentTarget.dataset.index;
+      if (index == 1) {//微信好友
+        
+      } else if (index == 2) {//朋友圈
+        
+      }
+      console.log('====================================');
+      console.log(index);
+      console.log('====================================');
+    },
+
+    onCancel: function() {
+      console.log('====================================');
+      console.log(22);
+      console.log('====================================');
+      
+      event.on(CANCEL_SHARE, () => {
+        
+      });
+
+      let prePage = getCurrentPages();
+      console.log(prePage);
+      if (prePage.length > 0 && prePage[prePage.length - 1].onCancel != undefined) {
+        prePage[prePage.length - 1].onCancel();
+      }
+    }
+  }
+})

+{
+  "component": true,
+  "usingComponents": {}
+}

+<view class='container'>
+  <view class='cover-view' bindtap='onCancel'></view>
+  <view class='main-view'>
+    <view class='share-view'>
+      <view class='item' bindtap='onShare' data-index="1">
+        <image class='icon' src='../../assets/images/wechat_friend@3x.png'></image>
+        <text class='title'>微信好友</text>
+      </view>
+      <view class='item' bindtap='onShare' data-index="2">
+        <image class='icon' src='../../assets/images/wechat@3x.png'></image>
+        <text class='title'>朋友圈</text>
+      </view>
+    </view>
+    <view class='line'></view>
+    <view class='cancel' bindtap='onCancel'>取消</view>
+  </view>
+</view>

+.container {
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  z-index: 1000;
+}
+.cover-view {
+  background-color: black;
+  opacity: 0.4;
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  z-index: 1000;
+}
+
+.main-view {
+  bottom: 0;
+  width: 100%;
+  height: 374rpx;
+  background-color: white;
+  position: fixed;
+  z-index: 1200;
+}
+.main-view .share-view {
+  height: 262rpx;
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+}
+.main-view .line {
+  height: 2rpx;
+  margin-left: 40rpx;
+  margin-right: 40rpx;
+  background-color: #dddddd;
+}
+.main-view .cancel {
+  height: 110rpx;
+  font-family: PingFang-SC-Regular;
+  font-size: 34rpx;
+  color: #000000;
+  letter-spacing: -0.23px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.main-view .share-view .item {
+  width: 100rpx;
+  height: 100%;
+}
+.main-view .share-view .item .icon {
+  width: 90rpx;
+  height: 90rpx;
+  margin-top: 62rpx;
+}
+.main-view .share-view .item .title {
+  margin-top: 16rpx;
+  font-family: PingFang-SC-Regular;
+  font-size: 24rpx;
+  color: #000000;
+  letter-spacing: -0.16px;
+}

-export const SHOWSIZEBOX = 'SHOWSIZEBOX'
+export const SHOWSIZEBOX = 'SHOWSIZEBOX'
+export const SHOWSHARESHEET = 'SHOWSHARESHEET'

@@ -4,7 +4,8 @@ import {productDetail as productDetailModel} from '../../models';
 import {getImgUrl} from '../../utils';
 import {getImgUrl} from '../../utils';
 import {ProductList, SelectSize} from '../../components';
 import {ProductList, SelectSize} from '../../components';
 import { connect } from '@tarojs/redux';
 import { connect } from '@tarojs/redux';
-import { showSizeBox } from '../../actions/productDetail'
+import { showSizeBox, showSharesheet } from '../../actions/productDetail'
+
 
 
 import share from '../../static/images/share.png';
 import share from '../../static/images/share.png';
 import collect from '../../static/images/collect.png';
 import collect from '../../static/images/collect.png';
@@ -17,6 +18,9 @@ import event from '../../utils/event'
 }), (dispatch) => ({
 }), (dispatch) => ({
     showSizeBox (isShow) {
     showSizeBox (isShow) {
         dispatch(showSizeBox(isShow))
         dispatch(showSizeBox(isShow))
+    },
+    showSharesheet (isShow) {
+        dispatch(showSharesheet(isShow))
     }
     }
 }))
 }))
 
 
@@ -30,6 +34,7 @@ export default class ProductDetail extends Component {
             recommendList: [],
             recommendList: [],
             collectTitle: '收藏',
             collectTitle: '收藏',
             isFavorite: false,
             isFavorite: false,
+            isShare: false,
             productDec: {
             productDec: {
                 color: {
                 color: {
                     text: '颜色',
                     text: '颜色',
@@ -55,6 +60,11 @@ export default class ProductDetail extends Component {
         };
         };
     }
     }
 
 
+    config = {
+        usingComponents: {
+            'share-sheet' : '../../components/shareSheet/shareSheet'
+        }
+    }
     componentDidMount() {
     componentDidMount() {
         let id = this.$router.params.id;
         let id = this.$router.params.id;
 
 
@@ -164,6 +174,16 @@ export default class ProductDetail extends Component {
         }
         }
     }
     }
 
 
+    onClickShare(id, e) {
+        let {showSharesheet} = this.props;
+        showSharesheet(true);
+    }
+
+    onCancel() {
+        let {showSharesheet} = this.props;
+        showSharesheet(false);
+    }
+
     onClickBuy() {
     onClickBuy() {
         let {showSizeBox} = this.props;
         let {showSizeBox} = this.props;
 
 
@@ -198,7 +218,7 @@ export default class ProductDetail extends Component {
                         <Image src={isFavorite ? collect : collectOff} className="collect-icon"/>
                         <Image src={isFavorite ? collect : collectOff} className="collect-icon"/>
                         <Text className="text">{collectTitle}</Text>
                         <Text className="text">{collectTitle}</Text>
                     </View>
                     </View>
-                    <View className="share">
+                    <View className="share" onClick={this.onClickShare.bind(this, id)}>
                         <Image src={share} className="share-icon"/>
                         <Image src={share} className="share-icon"/>
                         <Text className="text">分享</Text>
                         <Text className="text">分享</Text>
                     </View>
                     </View>
@@ -234,6 +254,11 @@ export default class ProductDetail extends Component {
                 </View>
                 </View>
 
 
                 {
                 {
+                    this.props.productDetail.showSharesheet &&
+                    <share-sheet></share-sheet>
+                }
+
+                {
                     this.props.productDetail.showSizeBox &&
                     this.props.productDetail.showSizeBox &&
                     <SelectSize sizeList={goodsList.size_list} product_id={id}></SelectSize>
                     <SelectSize sizeList={goodsList.size_list} product_id={id}></SelectSize>
                 }
                 }

-import { SHOWSIZEBOX } from '../constants/productDetail'
+import { SHOWSIZEBOX, SHOWSHARESHEET } from '../constants/productDetail'
 
 
 const INITIAL_STATE = {
 const INITIAL_STATE = {
-  showSizeBox: false
+  showSizeBox: false,
+  showSharesheet: false
 }
 }
 
 
 export default function productDetail (state = INITIAL_STATE, action) {
 export default function productDetail (state = INITIAL_STATE, action) {
@@ -11,6 +12,11 @@ export default function productDetail (state = INITIAL_STATE, action) {
         ...state,
         ...state,
         showSizeBox: action.isShow
         showSizeBox: action.isShow
       }
       }
+    case SHOWSHARESHEET:
+    return {
+      ...state,
+      showSharesheet: action.isShow
+      }
     default:
     default:
        return state
        return state
   }
   }