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

api/gift.js

@@ -12,7 +12,7 @@ export function getGiftCardSendOrderConfirm(data) {
  * 礼品卡送礼订单创建
  * @param {*} data
  */
-export function getGiftCardSendOrder(key) {
-  return request.post("/giftCard/create/" + key);
+export function getGiftCardSendOrder(key, data) {
+  return request.post("/giftCard/create/" + key, data);
 
 }

pkg_user/views/gift/components/GiftCard.vue

@@ -0,0 +1,68 @@
+<template>
+  <view class="mask">
+    <view class="gift-card-modal" :style="{backgroundColor: '#C52733'}">
+      <!-- 弹窗内容 -->
+      <view class="address-btn v12-white v12-primary-text">
+        填写地址并收下
+      </view>
+      <view class="share-btn v12-white v12-primary-text">
+        点击转增给好友
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'GiftCard',
+  data() {
+    return {
+      // 组件数据
+    }
+  }
+}
+</script>
+
+<style scoped>
+.share-btn{
+  width: fit-content;
+  padding: 15rpx 30rpx;
+  border-radius: 100rpx;
+  font-size: 24rpx;
+  margin-top: 30rpx;
+}
+.address-btn{
+  width: fit-content;
+  padding: 20rpx 30rpx;
+  border-radius: 100rpx;
+  font-size: 32rpx;
+  font-weight: bold;
+  margin-top: 30rpx;
+}
+.gift-card-modal {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 586rpx;
+    height: 704rpx;
+    background-color: #C52733;
+    justify-content: center;
+    z-index: 999;
+    margin: auto;
+    border-radius: 16rpx;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: start;
+}
+
+.gift-card-content {
+  background-color: #fff;
+  padding: 20px;
+  border-radius: 10px;
+  width: 80%;
+  max-width: 300px;
+}
+</style>

pkg_user/views/gift/components/PayPicker.vue

@@ -0,0 +1,106 @@
+<template>
+  <u-popup
+    :show="show"
+    mode="bottom"
+    round="20rpx"
+    @close="close"
+    :customStyle="{height: '400rpx', padding: '30rpx'}"
+    closeable
+    safeAreaInsetBottom
+  >
+    <view class="pay-picker">
+      <view class="title">选择支付方式</view>
+      
+      <view class="pay-item" :class="{ active: activeType === 'weixin' }" @click="handleSelect('weixin')">
+        <text class="label">微信支付</text>
+        <radio :checked="activeType === 'weixin'" color="#09BB07"></radio>
+      </view>
+      
+      <view class="pay-item" :class="{ active: activeType === 'yue' }" @click="handleSelect('yue')">
+        <text class="label">余额支付</text>
+        <radio :checked="activeType === 'yue'" color="#09BB07"></radio>
+      </view>
+      
+      <view class="confirm-btn" @click="confirm">确定</view>
+    </view>
+  </u-popup>
+</template>
+
+<script>
+export default {
+  props: {
+    show: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      activeType: 'weixin' // 默认选中微信支付
+    }
+  },
+  methods: {
+    close() {
+      this.$emit('update:show', false)
+    },
+    handleSelect(type) {
+      this.activeType = type
+    },
+    confirm() {
+      this.$emit('confirm', this.activeType)
+      this.close()
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.pay-picker {
+  .title {
+    font-size: 32rpx;
+    font-weight: bold;
+    text-align: center;
+    margin-bottom: 40rpx;
+  }
+  
+  .pay-item {
+    display: flex;
+    align-items: center;
+    padding: 20rpx;
+    margin-bottom: 20rpx;
+    border-radius: 10rpx;
+    background-color: #f5f5f5;
+    
+    &.active {
+      background-color: #e8f5e9;
+    }
+    
+    .icon {
+      width: 40rpx;
+      height: 40rpx;
+      margin-right: 20rpx;
+    }
+    
+    .label {
+      flex: 1;
+      font-size: 28rpx;
+      color: #333;
+    }
+    
+    radio {
+      transform: scale(0.8);
+    }
+  }
+  
+  .confirm-btn {
+    margin-top: 40rpx;
+    height: 80rpx;
+    line-height: 80rpx;
+    text-align: center;
+    background-color: #C52733;
+    color: #fff;
+    border-radius: 40rpx;
+    font-size: 32rpx;
+  }
+}
+</style>

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>

pkg_user/views/gift/receive.vue

@@ -1,12 +1,15 @@
 <template>
   <view>
-    <view class="top-card"></view>
+    <GiftCard/>
   </view>
 </template>
 
 <script>
+import GiftCard from './components/GiftCard.vue'
 export default {
-
+  components: {
+    GiftCard 
+  }
 }
 </script>