Task：礼品赠送/送礼

pkg_user/views/gift/components/CoverPicker.vue

@@ -13,8 +13,8 @@
         :circular="true"
         :indicator-dots="false"
         @change="onChange"
-        previous-margin="120rpx"
+        previous-margin="160rpx"
-        next-margin="120rpx"
+        next-margin="160rpx"
         class="cover-swiper"
       >
         <swiper-item v-for="(item, index) in list" :key="index" >
@@ -29,6 +29,7 @@
           确定
         </view>
       </view>
+      <view class="tips">红包封面在对方领取时展示</view>
     </view>
   </u-popup>
 </template>
@@ -66,12 +67,18 @@ export default {
 </script>
 
 <style lang="less" scoped>
+.tips{
+  font-size: 24rpx;
+  color: #999;
+  text-align: center;
+  margin-top: 20rpx;
+}
 .cover-swiper{
   height: 540rpx;
 }
 .cover-picker {
-  padding: 30rpx;
   .cover-title {
+    padding: 30rpx;
     font-size: 32rpx;
     font-weight: bold;
     text-align: center;

pkg_user/views/gift/gift.vue

@@ -16,10 +16,57 @@
         <view class="line"></view>
       </view>
       <view class="v12-pa-2 ">
-        <textarea class="v12-font-28  v12-secondary-dark-text" placeholder="礼笺轻启，礼藏心意" name="" id="" cols="30" rows="10"></textarea>
+        <textarea 
+          v-model="message"
+          class="v12-font-28  v12-secondary-dark-text" 
+          placeholder="礼笺轻启，礼藏心意" 
+          cols="30" 
+          rows="10"></textarea>
+      </view>
+    </view>
+    <view class="gift-good-card">
+      <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-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="gift-good-card"></view>
     <view class="swich-btn">
       <view class="v12-font-28 v12-dark-text">是否支持好友转赠</view>
       <view>
@@ -55,6 +102,7 @@ export default {
   data() {
     return {
       canTransfe: false,
+      message: '',
       cartId: '',
       couponId: '',
       coverList: [],
@@ -97,12 +145,76 @@ export default {
         this.orderKey = res.data.orderKey
         this.goodsInfo = res.data.cartInfo[0]
       })
+    },
+    /**
+     * 确认赠送
+     * @param {*} 
+     */
+    confirmGift() {
+      const params = {
+        orderKey: this.orderKey,
+        cartId: this.cartId,
+        couponId: this.couponId,
+        cover: this.selectedCover,
+        canTransfe: this.canTransfe
+      }
     }
   }
 }
 </script>
 
 <style lang="less" scoped>
+.info-wrap{
+  width: 100%;
+  height: 200rpx;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+.v12-num-input{
+  height: 40rpx;
+  width: 40rpx;
+  border: 1px solid #E6E6E6;
+  line-height: 40rpx;
+  font-weight: bold;
+  font-size: 28rpx;
+  color: #333;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.v12-minus-btn{
+  border-radius: 28rpx 0rpx 0rpx 28rpx;
+  border: 1px solid #E6E6E6;
+  background-color: rgba(208,208,208,0.39);
+  height: 40rpx;
+  width: 40rpx;
+  font-weight: bold;
+}
+.v12-plus-btn{
+  border-radius: 0rpx 28rpx 28rpx 0rpx;
+  border: 1px solid #C52733;
+  background-color: #C52733;
+  height: 40rpx;
+  width: 40rpx;
+  font-weight: bold;
+}
+.gift-sku{
+  font-size: 24rpx;
+  color: #333333;
+  border-radius: 124rpx;
+  border: 1px solid #999999;
+  padding: 5rpx 10rpx;
+  text-align: center;
+  margin-top: 20rpx;
+  width: fit-content;
+}
+.cover-image{
+  width: 200rpx;
+  height: 200rpx;
+  background: rgba(139,33,33,0.39);
+  border-radius: 16rpx;
+}
 .tip-wrap{
   position: absolute;
   bottom: 100rpx;
@@ -143,9 +255,12 @@ export default {
   background: #d2d2d2;
 }
 .gift-good-card{
-  height: 240rpx;
   background: #fff;
   border-radius: 16rpx;
+  padding: 30rpx;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
   margin-top: 30rpx;
 }
 .swich-btn{