Task：收礼相关接口

pkg_user/views/gift/components/GiftCard.vue

@@ -1,35 +1,127 @@
 <template>
   <view class="mask">
-    <view class="gift-card-modal" :style="{backgroundColor: '#C52733'}">
+    <view class="gift-card-modal" >
+      <image class="bg-image" :src="card.cover" mode="aspectFit|aspectFill|widthFix" lazy-load="false"></image>
+      <view class="image-wrap">
+        <image class="pro-image" :src="card.giftProducts[0].productImage" mode="aspectFit|aspectFill|widthFix" lazy-load="false" @error="" @load="">
+          
+        </image>
+      </view>
+      <view class="wrap-box">
+        
+      </view>
+      <view class="auto-text-color">
+        {{ card.message || '礼笺轻启，礼藏心意' }}
+      </view>
       <!-- 弹窗内容 -->
-      <view class="address-btn v12-white v12-primary-text">
+      <view class="address-btn v12-white v12-primary-text" @click="setAddress">
         填写地址并收下
       </view>
-      <view class="share-btn v12-white v12-primary-text">
+      <view class="share-btn v12-white v12-primary-text" v-if="card.canTransfer !== 0">
         点击转增给好友
       </view>
+      <view class="tips">
+        <view class="tip-text v12-mr-1">
+          未领取礼包，将于24小时后自动
+        </view>
+        <u-icon @click="showTips" name="error-circle" color="#fff" size="28rpx"></u-icon>
+      </view>
     </view>
+    <giftTips ref="giftTips" :richText="giftNotice"></giftTips>
+    <AddressDialog ref="addressDialog" ></AddressDialog>
   </view>
 </template>
 
 <script>
+import { getGiftCardSendNotice } from '@/api/gift'
+import giftTips from './giftTips.vue'
+import AddressDialog from './AddressDialog.vue'
 export default {
   name: 'GiftCard',
+  components: {
+    giftTips,
+    AddressDialog
+  },
+  props: {
+    // 组件属性
+    card: {
+      type: Object,
+      default: () => {}
+    }
+  },
   data() {
     return {
       // 组件数据
+      giftNotice: ''
     }
+  },
+  methods: {
+    setAddress() {
+      this.$refs.addressDialog.open()
+    },
+    async showTips() {
+      // 获取发礼提示
+      getGiftCardSendNotice().then(res => {
+        this.$refs.giftTips.showTips = true
+        this.giftNotice = res.data
+      })
+      
+    },
   }
 }
 </script>
 
 <style scoped>
+.bg-image{
+  width: 586rpx;
+  height: 704rpx;
+  position: absolute;
+  top: 0;
+}
+.tips{
+  display: flex;
+  align-items: center;
+  margin-top: 40rpx;
+  position: absolute;
+  bottom: 50rpx;
+}
+.tip-text{
+  font-family: Source Han Sans SC;
+  font-weight: 500;
+  font-size: 28rpx;
+  color: #fff;
+  opacity: 0.6;
+  line-height: 36rpx;
+}
+.wrap-box{
+  width: 296rpx;
+  height: 296rpx;
+}
+.image-wrap{
+  width: 296rpx;
+  height: 296rpx;
+  border: 10rpx solid #FDF0D3;
+  border-radius: 30rpx;
+  position: absolute;
+  top: -60px;
+}
+.pro-image{
+  width: 296rpx;
+  height: 296rpx;
+  border-radius: 30rpx;
+}
+.auto-text-color {
+  color: #fff;
+  font-size: 24rpx;
+  opacity: 0.9;
+}
 .share-btn{
   width: fit-content;
   padding: 15rpx 30rpx;
   border-radius: 100rpx;
   font-size: 24rpx;
-  margin-top: 30rpx;
+  margin-top: 40rpx;
+  z-index: 999;
 }
 .address-btn{
   width: fit-content;
@@ -37,7 +129,8 @@ export default {
   border-radius: 100rpx;
   font-size: 32rpx;
   font-weight: bold;
-  margin-top: 30rpx;
+  margin-top: 40rpx;
+  z-index: 999;
 }
 .gift-card-modal {
     position: absolute;