Task：礼品赠送/送礼、分享。收礼

pkg_user/views/gift/gift.vue

@@ -1,13 +1,13 @@
 <template>
   <view class="gift-page">
-    <view class="top-card">
+    <view class="top-card" v-if="!isPayOk">
       <view class="v12-justify-between v12-pa-2">
         <view>
           <view></view>
           <view class="v12-font-28 v12-secondary-dark-text">送礼寄语</view>
         </view>
         <view class="v12-primary-text v12-font-26">
-          <view  @click="showCoverPicker = true">默认封面</view>
+          <view  @click="showCoverPicker = true">{{ cover }}封面</view>
           <view>
           </view>
         </view>
@@ -24,58 +24,75 @@
           rows="10"></textarea>
       </view>
     </view>
-    <view class="gift-good-card">
-      <view>
-        <image :src="goodsInfo.productInfo.image" mode="scaleToFill" class="cover-image"></image>
+    <view  class="gift-good-card">
+      <view class="v12-align-center v12-justify-start">
+        <view>
+          <image :src="goodsInfo.productInfo.image" mode="scaleToFill" class="cover-image"></image>
+        </view>
+        <view class="v12-ml-2 info-wrap">
+          <view class="v12-dark-text v12-font-bold v12-font-28 t-more">
+            {{ goodsInfo.productInfo.storeName }}
+          </view>
+          <view class="gift-sku">
+            {{ goodsInfo.productInfo.attrInfo.sku }}
+          </view>
+          <view class="v12-justify-between">
+            <view>
+              <text class="v12-primary-text v12-font-bold v12-font-22">￥</text>
+              <text class="v12-primary-text v12-font-bold v12-font-30">{{ goodsInfo.productInfo.otPrice }}</text>
+            </view>
+            <view>
+              <u-number-box
+                v-if="!isPayOk"
+                v-model="goodsInfo.cartNum"
+                :max="goodsInfo['productInfo']['attrInfo']['stock']"
+                integer
+                disabledInput
+                iconStyle="color: #fff"
+                class="num-step"
+              >
+                <template v-slot:minus>
+                  <view class="v12-minus-btn v12-font-bold flex jc-center ai-center">
+                    <u-icon name="minus" size="12" color="#FFFFFF"/>
+                  </view>
+                </template>
+                <template v-slot:input>
+                  <view class="num-input tc v12-num-input">{{ goodsInfo['cartNum'] }}</view>
+                </template>
+                <template v-slot:plus>
+                  <view class="v12-plus-btn v12-font-bold flex jc-center ai-center v12-primary">
+                    <u-icon name="plus" size="12" color="#FFFFFF"/>
+                  </view>
+                </template>
+              </u-number-box>
+            </view>
+          </view>
+        </view>
       </view>
-      <view class="v12-ml-2 info-wrap">
-        <view class="v12-dark-text v12-font-bold v12-font-28 t-more">
-          {{ goodsInfo.productInfo.storeName }}
-        </view>
-        <view class="gift-sku">
-          {{ goodsInfo.productInfo.attrInfo.sku }}
-        </view>
-        <view class="v12-justify-between">
-          <view>
-            <text class="v12-primary-text v12-font-bold v12-font-22">￥</text>
-            <text class="v12-primary-text v12-font-bold v12-font-30">{{ goodsInfo.productInfo.otPrice }}</text>
-          </view>
-          <view>
-            <u-number-box
-              v-model="goodsInfo.cartNum"
-              :max="goodsInfo['productInfo']['attrInfo']['stock']"
-              integer
-              disabledInput
-              iconStyle="color: #fff"
-              class="num-step"
-            >
-              <template v-slot:minus>
-                <view class="v12-minus-btn v12-font-bold flex jc-center ai-center">
-                  <u-icon name="minus" size="12" color="#FFFFFF"/>
-                </view>
-              </template>
-              <template v-slot:input>
-                <view class="num-input tc v12-num-input">{{ goodsInfo['cartNum'] }}</view>
-              </template>
-              <template v-slot:plus>
-                <view class="v12-plus-btn v12-font-bold flex jc-center ai-center v12-primary">
-                  <u-icon name="plus" size="12" color="#FFFFFF"/>
-                </view>
-              </template>
-            </u-number-box>
-          </view>
-        </view>
+      <u-divider v-if="isPayOk"></u-divider>
+      <view class="v12-font-26 v12-secondary-dark-text" v-if="isPayOk">
+        赠言：{{  message }}
       </view>
     </view>
-    <view class="swich-btn">
+    <view class="swich-btn" v-if="!isPayOk">
       <view class="v12-font-28 v12-dark-text">是否支持好友转赠</view>
       <view>
         <u-switch v-model="canTransfe" ></u-switch>
       </view>
     </view>
-    
-    <view class="btn-wrap v12-mt-16 v12-justify-center">
-      <view class="gift-submit" @click="submitGift">付款并赠送</view>
+    <button v-if="isPayOk" open-type="share" class="share-btn" @click="shareToFriend">
+      <view class="v12-font-28 v12-primary-text v12-align-center">
+        <u-icon :name="webUrl + '/icon/gift-primary.png'" size="18"></u-icon>
+        点击送给朋友</view>
+      <view class="share-icon" >
+        <u-icon :name="webUrl + '/icon/share.png'" ></u-icon>
+      </view>
+    </button>
+    <view class="btn-wrap v12-mt-16 v12-justify-center" v-if="!isPayOk">
+      <view class="gift-submit" @click="showPayPicker = true">付款并赠送</view>
+    </view>
+    <view class="btn-wrap v12-mt-16 v12-justify-center" v-if="isPayOk">
+      <view class="gift-submit">再送一份</view>
     </view>
     <view class="tip-wrap v12-justify-center">
       <view class="tip-text v12-mr-1">好友未收下礼包，将于24小时后自动退款</view>
@@ -87,20 +104,39 @@
       :list="coverList"
       @confirm="onCoverConfirm"
     />
+    <passkeyborad
+      ref='payPwdPop'
+      showMoney
+      :money="goodsInfo.productInfo.otPrice"
+      :show="isShowPayPwdPop"
+      @close="isShowPayPwdPop = false"
+      @finish="pwdPopFinish"
+    />
+    <PayPicker
+      ref="payPicker"
+      :show.sync="showPayPicker"
+      @confirm="onPayConfirm"
+    />
   </view>
 </template>
 
 <script>
-import { getGiftCardSendOrderConfirm } from '@/api/gift'
+import passkeyborad from '@/components/yzc-paykeyboard/yzc-paykeyboard'
+import { getGiftCardSendOrderConfirm, getGiftCardSendOrder } from '@/api/gift'
+import {mapGetters} from "vuex";
 import giftTips from './components/giftTips.vue'
 import CoverPicker from './components/CoverPicker.vue'
+import PayPicker from './components/PayPicker.vue';
 export default {
   components: {
     giftTips,
-    CoverPicker
+    CoverPicker,
+    PayPicker,
+    passkeyborad
   },
   data() {
     return {
+      webUrl: this.$VUE_APP_RESOURCES_URL,
       canTransfe: false,
       message: '',
       cartId: '',
@@ -108,9 +144,19 @@ export default {
       coverList: [],
       giftNotice: '',
       showCoverPicker: false,
+      showPayPicker: false,
       selectedCover: '',
       orderKey: '',
-      goodsInfo: {}
+      goodsInfo: {},
+      cover: '默认',
+      orderGroupInfo: {
+        priceGroup: {}
+      },
+      templateId: '',
+      isShowPayPwdPop: false,
+      payPassword: '',
+      payType: '',
+      isPayOk: false,
     }
   },
   onLoad(opts) {
@@ -119,17 +165,20 @@ export default {
     this.couponId = opts.couponId
     this.getGift()
   },
+  computed: mapGetters(["userInfo"]),
   methods: {
-    // 付款并赠送
-    submitGift() {
-      const params = {
-        cartId: this.cartId,
-        couponId: this.couponId,
-        cover: this.selectedCover,
-        canTransfe: this.canTransfe
-      }  
+    pwdPopFinish(payPwd) {
+      this.payPassword = payPwd;
+      this.confirmGift(true);
+    },
+    onPayConfirm(e) {
+      this.payType = e
+      this.confirmGift(false)
     },
     onCoverConfirm(cover) {
+      console.log(cover);
+      this.cover = cover.name
+      this.templateId = cover.id
       this.selectedCover = cover.image
     },
     showTips() {
@@ -150,14 +199,129 @@ export default {
      * 确认赠送
      * @param {*} 
      */
-    confirmGift() {
+    confirmGift(isPay) {
+      if(!isPay && this.payType === 'yue') {
+        //先判断用户是否绑定过手机
+        if (this.userInfo.phone) {
+          //再判断用户是否设置过支付密码
+          if (this.userInfo.hasPwdPay) {
+            //显示输入支付密码
+            this.isShowPayPwdPop = true;
+          } else {
+            //设置支付密码
+            this.$yrouter.push("/pkg_user/views/payPassword?isSetMode=true");
+          }
+        } else {
+          //跳转到绑定手机
+          this.$yrouter.push("/pkg_user/views/bindPhone");
+        }
+        return
+      }
+
+      uni.showLoading({
+        title: "生成订单中"
+      });
       const params = {
         orderKey: this.orderKey,
         cartId: this.cartId,
-        couponId: this.couponId,
+        templateId: this.templateId,
+        message : this.message,
         cover: this.selectedCover,
-        canTransfe: this.canTransfe
+        canTransfe: this.canTransfe,
+        payType: this.payType,
+        seckillId: this.orderGroupInfo.seckill_id,
+        combinationId: this.orderGroupInfo.combination_id,
+        bargainId: this.orderGroupInfo.bargain_id,
       }
+      if (this.payType == 'yue') {
+        params.passwordPay = this.payPassword;
+      }
+      getGiftCardSendOrder(this.orderKey, params).then(res => {
+        uni.hideLoading();
+        const data = res.data;
+        switch (data.status) {
+          case "ORDER_EXIST":
+          case "EXTEND_ORDER":
+            uni.showToast({
+              title: res.msg,
+              icon: "none",
+              duration: 2000
+            });
+            
+            break;
+          case "PAY_DEFICIENCY":
+            break;
+
+          case "PAY_ERROR":
+            uni.showToast({
+              title: res.msg,
+              icon: "none",
+              duration: 2000
+            });
+            
+            break;
+          case "SUCCESS":
+            uni.showToast({
+              title: res.msg,
+              icon: "none",
+              duration: 2000
+            });
+            this.isPayOk = true;
+            break;
+          case "WECHAT_H5_PAY":
+            // H5支付
+            
+            setTimeout(() => {
+              // location.href = data.result.jsConfig.mweb_url;
+            }, 100);
+            break;
+          case "WECHAT_PAY":
+            // 小程序支付
+            weappPay(data.result.jsConfig).finally(() => {
+              
+            });
+            break;
+
+          case "WECHAT_APP_PAY":
+            // APP支付
+            weappPay(data.result.jsConfig).finally(() => {
+              
+            });
+            break;
+        }
+      }) .catch(err => {
+            uni.hideLoading();
+            uni.showToast({
+              title:
+                  err.msg ||
+                  err.response.data.msg ||
+                  err.response.data.message ||
+                  "创建订单失败",
+              icon: "none",
+              duration: 2000
+            });
+          }).finally(() => {
+            this.isShowPayPwdPop = false;
+            this.$refs.payPwdPop.clear();//清空支付密码
+            this.$refs.payPwdPop.close();//关闭支付密码弹窗
+          });
+    },
+    shareToFriend() {
+      uni.share({
+        provider: 'weixin',
+        scene: 'WXSceneSession', // 分享到好友
+        type: 0, // 0:文字 1:图片 2:音乐 3:视频 4:小程序
+        title: '送你一份礼物', // 分享标题
+        summary: '我精心挑选了一份礼物送给你，快来领取吧！', // 分享描述
+        href: 'https://your-domain.com/gift', // 分享链接
+        imageUrl: this.goodsInfo.productInfo.image, // 分享图片
+        success: (res) => {
+          console.log('分享成功', res);
+        },
+        fail: (err) => {
+          console.log('分享失败', err);
+        }
+      });
     }
   }
 }
@@ -258,9 +422,7 @@ export default {
   background: #fff;
   border-radius: 16rpx;
   padding: 30rpx;
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
+  
   margin-top: 30rpx;
 }
 .swich-btn{
@@ -273,4 +435,17 @@ export default {
   padding: 5rpx 20rpx;
   margin-top: 30rpx;
 }
+.share-btn{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: #fff;
+  border-radius: 30rpx;
+  padding: 5rpx 20rpx;
+  margin-top: 30rpx;
+  border: none;
+}
+.share-btn::after {
+  border: none;
+}
 </style>