Task：送礼相关接口

api/gift.js

@@ -0,0 +1,18 @@
+import request from "@/utils/request";
+
+/**
+ * 礼品卡送礼订单确认
+ * @param {*} data
+ */
+export function getGiftCardSendOrderConfirm(data) {
+  return request.post("/giftCard/confirm", data); 
+}
+
+/**
+ * 礼品卡送礼订单创建
+ * @param {*} data
+ */
+export function getGiftCardSendOrder(key) {
+  return request.post("/giftCard/create/" + key);
+
+}

components/ProductWindow.vue

@@ -67,6 +67,14 @@
           :disabled="(attr.productSelect.stock === 0 && attr.cartAttr)"
         >加入购物车</u-button>
       </view>
+      <view class="v12-px-2 v12-mt-3" v-if="isGift">
+        <u-button 
+          shape="circle" 
+          color="#C52733" 
+          @click="$emit('gift')"
+          :disabled="(attr.productSelect.stock === 0 && attr.cartAttr)"
+        >送给朋友</u-button>
+      </view>
     </view>
     <view class="mask" @touchmove.prevent :hidden="attr.cartAttr === false" @click="closeAttr"></view>
   </view>
@@ -75,6 +83,10 @@
 export default {
   name: "ProductWindow",
   props: {
+    isGift: {
+      type: Boolean,
+      default: false
+    },
     paddingBottom: {
       type: String,
       default: '140rpx'

pages.json

@@ -778,7 +778,7 @@
           }
         },
         {
-          "path": "views/giftList/receive",
+          "path": "views/gift/receive",
           "style": {
             "navigationBarTitleText": "好友赠送的礼包"
           }

pages/shop/GoodsCon/index.vue

@@ -63,7 +63,7 @@
             </view>
           </view>
           <view class="introduce bold">{{ storeInfo.storeName }}</view>
-          <view class="v12-primary v12-white-text v12-px-2 v12-py-1 v12-mt-2 v12-radius-20 v12-font-bold v12-justify-between v12-align-center">
+          <view v-if="storeInfo.isGiftCard === 1" class="v12-primary v12-white-text v12-px-2 v12-py-1 v12-mt-2 v12-radius-20 v12-font-bold v12-justify-between v12-align-center">
             <view class="v12-font-28 v12-align-center">
               <img class="gift-img" :src="webUrl + '/orderIcon/gift.png'" mode="widthFix">
               支持礼包赠送
@@ -473,6 +473,8 @@
           :attr="attr"
           :cartNum="cart_num"
           @changeFun="changeFun"
+          @gift="gift"
+          :isGift="isGift"
         />
         <ServiceWin ref="serviceWin" :info="storeInfo.guarantee" />
         <StorePoster v-on:setPosterImageStatus="setPosterImageStatus" :posterImageStatus="posterImageStatus"
@@ -554,6 +556,7 @@ export default {
   mixins: [pageListenMixins],
   data: function () {
     return {
+      isGift: false,
       // 商品信息是否展开
       isProductInfoExpand: true,
       shareInfoStatus: false,
@@ -772,10 +775,19 @@ export default {
     }
   },
   methods: {
+    gift() {
+      this.goCat(2)
+    },
     toGift() {
-      uni.navigateTo({
+      if ((this.attr.productSelect.stock === 0 && this.attr.cartAttr) || this.storeInfo.stock === 0) {
-        url: '/pkg_user/views/gift/gift'
+        return
-      })
+      }
+      this.isGift = true
+      // 2=送给朋友
+      this.goCat(2)
+      // uni.navigateTo({
+      //   url: '/pkg_user/views/gift/gift'
+      // })
     },
     showService() {
       this.$refs.serviceWin.show = true
@@ -1335,6 +1347,7 @@ export default {
         return
       }
       // 0=加入购物车
+      this.isGift = false
       this.goCat(0)
     },
     // 立即购买
@@ -1343,6 +1356,7 @@ export default {
         return
       }
       // 1=直接购买
+      this.isGift = false
       this.goCat(1)
     },
     // 加入购物车
@@ -1379,7 +1393,7 @@ export default {
       const q = {
         productId: that.id,
         cartNum: that.attr.productSelect.cart_num,
-        new: news,
+        new: news === 2 ? 1 : news,
         uniqueId: that.attr.productSelect !== undefined ?
             that.attr.productSelect.unique : ""
       }
@@ -1398,16 +1412,22 @@ export default {
       postCartAdd(q).then(function (res) {
         that.isOpen = false
         that.attr.cartAttr = false
-        console.log( that.couponId)
+        if (news === 1) {
-        if (news) {
           that.$yrouter.push({
             path: "/pages/order/OrderSubmission/index",
             query: {
               id: res.data.cartId,
-              couponId: that.couponId
+              couponId: that.couponId // 优惠券ID
             }
           })
-        } else {
+          return
+        } 
+        if(news === 2) {
+          uni.navigateTo({
+            url: '/pkg_user/views/gift/gift?cartId=' + res.data.cartId + '&couponId=' + that.couponId
+          })
+        }
+        if(news === 0) {
           uni.showToast({
             title: "添加购物车成功",
             icon: "success",
@@ -1416,6 +1436,7 @@ export default {
               that.getCartCount(true)
             }
           })
+          return
         }
       }).catch(error => {
         that.isOpen = false;

pkg_user/views/gift/components/CoverPicker.vue

@@ -0,0 +1,109 @@
+<template>
+  <u-popup 
+    :show="show" 
+    mode="bottom" 
+    round="40rpx" 
+    @close="close"
+    :customStyle="{height: '600rpx'}"
+    closeable>
+    <view class="cover-picker">
+      <view class="cover-title">选择封面</view>
+      <swiper
+        :autoplay="false"
+        :circular="true"
+        :indicator-dots="false"
+        @change="onChange"
+        previous-margin="120rpx"
+        next-margin="120rpx"
+        class="cover-swiper"
+      >
+        <swiper-item v-for="(item, index) in list" :key="index" >
+          <view class="cover-item">
+            <image :src="item.image" :class="{ 'v12-mt-3': currentIndex === index }" class="cover-image" mode="widthFix|heightFix" />
+            <view class="cover-name">{{ item.name }} </view>
+          </view>
+        </swiper-item>
+      </swiper>
+      <view class="v12-justify-center">
+        <view class="cover-confirm" @click="confirm">
+          确定
+        </view>
+      </view>
+    </view>
+  </u-popup>
+</template>
+
+<script>
+export default {
+  props: {
+    show: {
+      type: Boolean,
+      default: true
+    },
+    list: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      currentIndex: 0
+    }
+  },
+  methods: {
+    close() {
+      this.$emit('update:show', false)
+    },
+    onChange(e) {
+      this.currentIndex = e.detail.current
+    },
+    confirm() {
+      this.$emit('confirm', this.list[this.currentIndex])
+      this.$emit('update:show', false)
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.cover-swiper{
+  height: 540rpx;
+}
+.cover-picker {
+  padding: 30rpx;
+  .cover-title {
+    font-size: 32rpx;
+    font-weight: bold;
+    text-align: center;
+    margin-bottom: 30rpx;
+  }
+  
+  .cover-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .cover-image {
+      width: 380rpx;
+      height: 460rpx;
+      border-radius: 16rpx;
+      transition: all .2s ease-in-out;
+    }
+    .cover-name {
+      margin-top: 20rpx;
+      font-size: 28rpx;
+      color: #333;
+    }
+  }
+  .cover-confirm {
+    margin-top: 40rpx;
+    width: 240rpx;
+    height: 80rpx;
+    border-radius: 16rpx;
+    font-size: 32rpx;
+    background-color: #C52733 !important;
+    color: #fff !important;
+    text-align: center;
+    line-height: 80rpx;
+  }
+}
+</style>

pkg_user/views/gift/components/giftTips.vue

@@ -0,0 +1,59 @@
+<template>
+  <view>
+    <!-- 弹窗组件 -->
+    <u-popup 
+      :show="showTips" 
+      mode="center" 
+      closeable 
+      round="16rpx"
+      @close="showTips = false"
+    >
+      <view class="popup-content">
+        <!-- 标题 -->
+        <view class="title">购买须知</view>
+        <!-- 富文本内容 -->
+        <u-parse :content="richText" />
+      </view>
+    </u-popup>
+  </view>
+</template>
+
+<script>
+export default {
+  props: {
+    // 接收传递的参数
+    richText: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      showTips: false,
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.popup-content {
+  width: 600rpx;
+  padding: 40rpx;
+  box-sizing: border-box;
+  .title {
+    font-size: 36rpx;
+    font-weight: bold;
+    text-align: center;
+    margin-bottom: 30rpx;
+  }
+  
+  .close-btn {
+    margin-top: 40rpx;
+  }
+  
+  /deep/ .u-parse {
+    max-height: 800rpx;
+    overflow-y: auto;
+  }
+}
+</style>

pkg_user/views/gift/gift.vue

@@ -7,7 +7,7 @@
           <view class="v12-font-28 v12-secondary-dark-text">送礼寄语</view>
         </view>
         <view class="v12-primary-text v12-font-26">
-          <view>默认封面</view>
+          <view  @click="showCoverPicker = true">默认封面</view>
           <view>
           </view>
         </view>
@@ -23,23 +23,82 @@
     <view class="swich-btn">
       <view class="v12-font-28 v12-dark-text">是否支持好友转赠</view>
       <view>
-        <u-switch v-model="value3" ></u-switch>
+        <u-switch v-model="canTransfe" ></u-switch>
       </view>
     </view>
     
     <view class="btn-wrap v12-mt-16 v12-justify-center">
-      <view class="gift-submit">付款并赠送</view>
+      <view class="gift-submit" @click="submitGift">付款并赠送</view>
     </view>
     <view class="tip-wrap v12-justify-center">
       <view class="tip-text v12-mr-1">好友未收下礼包，将于24小时后自动退款</view>
-      <u-icon name="error-circle" color="#666" size="28rpx"></u-icon>
+      <u-icon @click="showTips" name="error-circle" color="#666" size="28rpx"></u-icon>
     </view>
+    <giftTips ref="giftTips" :richText="giftNotice"></giftTips>
+    <CoverPicker 
+      :show.sync="showCoverPicker" 
+      :list="coverList"
+      @confirm="onCoverConfirm"
+    />
   </view>
 </template>
 
 <script>
+import { getGiftCardSendOrderConfirm } from '@/api/gift'
+import giftTips from './components/giftTips.vue'
+import CoverPicker from './components/CoverPicker.vue'
 export default {
-
+  components: {
+    giftTips,
+    CoverPicker
+  },
+  data() {
+    return {
+      canTransfe: false,
+      cartId: '',
+      couponId: '',
+      coverList: [],
+      giftNotice: '',
+      showCoverPicker: false,
+      selectedCover: '',
+      orderKey: '',
+      goodsInfo: {}
+    }
+  },
+  onLoad(opts) {
+    console.log(opts, 'gift');
+    this.cartId = opts.cartId
+    this.couponId = opts.couponId
+    this.getGift()
+  },
+  methods: {
+    // 付款并赠送
+    submitGift() {
+      const params = {
+        cartId: this.cartId,
+        couponId: this.couponId,
+        cover: this.selectedCover,
+        canTransfe: this.canTransfe
+      }  
+    },
+    onCoverConfirm(cover) {
+      this.selectedCover = cover.image
+    },
+    showTips() {
+      this.$refs.giftTips.showTips = true
+    },
+    getGift() {
+      const params = {
+        cartId: this.cartId,
+      }
+      getGiftCardSendOrderConfirm(params).then(res => {
+        this.coverList = res.data.giftCardTemplates
+        this.giftNotice = res.data.giftCardGiftNotice
+        this.orderKey = res.data.orderKey
+        this.goodsInfo = res.data.cartInfo[0]
+      })
+    }
+  }
 }
 </script>