From 40207f11a1862464255141e1c783173d77534301 Mon Sep 17 00:00:00 2001
From: lifizer <913626195@qq.com>
Date: Thu, 20 Feb 2025 13:40:17 +0800
Subject: [PATCH] =?UTF-8?q?Feat(=E6=88=91=E7=9A=84=E7=A4=BC=E5=93=81?=
 =?UTF-8?q?=E5=8D=A1):=E6=8E=A5=E5=8F=A3=E5=AF=B9=E6=8E=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 api/giftList.js                             |  22 ++
 pkg_user/views/gift/components/giftTips.vue |   2 +-
 pkg_user/views/giftList.vue                 | 358 ++++++++++++++------
 3 files changed, 268 insertions(+), 114 deletions(-)
 create mode 100644 api/giftList.js

diff --git a/api/giftList.js b/api/giftList.js
new file mode 100644
index 0000000..ade0a4f
--- /dev/null
+++ b/api/giftList.js
@@ -0,0 +1,22 @@
+import request from '@/utils/request'
+
+/**
+ * 收到的礼品卡列表
+ * */
+export function giftCardReceiveList(param) {
+    return request.get('/giftCard/receiveList', param)
+}
+
+/**
+ * 送出的礼品卡列表
+ * */
+export function giftCardSendList(param) {
+    return request.get('/giftCard/sendList', param)
+}
+
+/**
+ * 赠礼须知
+ * */
+export function giftNotice(param) {
+    return request.get('/giftCard/giftNotice', param)
+}
diff --git a/pkg_user/views/gift/components/giftTips.vue b/pkg_user/views/gift/components/giftTips.vue
index 1793bcd..df90409 100644
--- a/pkg_user/views/gift/components/giftTips.vue
+++ b/pkg_user/views/gift/components/giftTips.vue
@@ -10,7 +10,7 @@
     >
       <view class="popup-content">
         <!-- 标题 -->
-        <view class="title">购买须知</view>
+        <view class="title">赠礼须知</view>
         <!-- 富文本内容 -->
         <u-parse :content="richText" />
       </view>
diff --git a/pkg_user/views/giftList.vue b/pkg_user/views/giftList.vue
index ded0179..f3c11c9 100644
--- a/pkg_user/views/giftList.vue
+++ b/pkg_user/views/giftList.vue
@@ -14,82 +14,186 @@
       </view>
     </view>
     <view class="list-wrap">
-      <view v-if="isLoad" class="list-body">
-        <view
-          v-for="(item, index) in list"
-          :key="index"
-          class="gift-item"
-        >
-          <view
-            class="gift-body"
-            @click="giftItemClickHanlde(item)"
-          >
-            <view class="gift-img">
-              <image
-                :src="item.imgage"
-                class="img"
-                mode="widthFix"
-              />
-            </view>
-            <view class="gift-good-info">
-              <view class="name more-t">
-                {{ item.goodName }}
+      <block v-if="isLoad">
+        <view v-if="cateIndex === 0" class="list-body">
+          <block v-if="sendList.length > 0">
+            <view
+              v-for="(item, index) in sendList"
+              :key="index"
+              class="gift-item"
+            >
+              <view
+                v-for="(cart, cartIndex) in item.giftInfo"
+                :key="cartIndex"
+                class="gift-body"
+                @click="giftItemClickHanlde(item)"
+              >
+                <view class="gift-img">
+                  <image
+                    :src="cart.productInfo.image"
+                    class="img"
+                    mode="widthFix"
+                  />
+                </view>
+                <view class="gift-good-info">
+                  <view class="name more-t">
+                    {{ cart.productInfo.storeName }}
+                  </view>
+                  <view v-if="cart.productInfo.attrInfo" class="attr-txt">
+                    <view class="txt">{{ cart.productInfo.attrInfo.sku }}</view>
+                  </view>
+                  <view class="price-wrap">
+                    <view class="price">
+                      <text class="prefix">￥</text>{{ item.payPrice }}
+                    </view>
+                    <view class="num">数量&nbsp;X&nbsp;{{ cart.cartNum }}</view>
+                  </view>
+                </view>
               </view>
-              <view class="attr-txt">
-                <view class="txt">{{ item.attrName }}</view>
-              </view>
-              <view class="price-wrap">
-                <view class="price">
-                  <text class="prefix">￥</text>{{ item.price }}
+              <view class="gift-bottom">
+                <view class="gift-txt">
+                  赠言：{{ item.message }}
+                </view>
+                <!-- 状态 0-待领取 1-已全部领取 2-已失效 -->
+                <view
+                  v-if="item.status === 0"
+                  class="btn"
+                >
+                  送给朋友
+                  <image
+                    :src="webUrl + '/icon/icon-gift-share.png'"
+                    class="icon"
+                    mode="widthFix"
+                  />
+                </view>
+                <view
+                  v-if="item.status === 1"
+                  class="btn"
+                >
+                  已全部领取
+                </view>
+                <view
+                  v-if="item.status === 2"
+                  class="btn btn-grey"
+                >
+                  已过期
                 </view>
-                <view class="num">数量&nbsp;X&nbsp;{{ item.num }}</view>
               </view>
             </view>
-          </view>
-          <view class="gift-bottom">
-            <view class="gift-txt">
-              赠言：{{ item.txt }}
-            </view>
-            <view
-              v-if="item.status === 1"
-              class="btn"
-            >
-              送给朋友
-              <image
-                :src="webUrl + '/icon/icon-gift-share.png'"
-                class="icon"
-                mode="widthFix"
-              />
-            </view>
-            <view
-              v-if="item.status === 2"
-              class="btn"
-            >
-              已全部领取
-            </view>
-            <view
-              v-if="item.status > 2"
-              class="btn btn-grey"
-            >
-              灰色按钮
+          </block>
+          <view v-if="sendList.length === 0" class="noCart">
+            <view class="pictrue">
+              <image :src="webUrl + '/20240102232734472795.png'"/>
             </view>
           </view>
         </view>
-      </view>
+        <view v-if="cateIndex === 1" class="list-body">
+          <block v-if="receiveList.length > 0">
+            <view
+              v-for="(item, index) in receiveList"
+              :key="index"
+              class="gift-item"
+            >
+              <view
+                v-for="(cart, cartIndex) in item.giftInfo"
+                :key="cartIndex"
+                class="gift-body"
+                @click="giftItemClickHanlde(item)"
+              >
+                <view class="gift-img">
+                  <image
+                    :src="cart.productInfo.image"
+                    class="img"
+                    mode="widthFix"
+                  />
+                </view>
+                <view class="gift-good-info">
+                  <view class="name more-t">
+                    {{ cart.productInfo.storeName }}
+                  </view>
+                  <view v-if="cart.productInfo.attrInfo" class="attr-txt">
+                    <view class="txt">{{ cart.productInfo.attrInfo.sku }}</view>
+                  </view>
+                  <view class="price-wrap">
+                    <view class="price">
+                      <text class="prefix">￥</text>{{ item.payPrice }}
+                    </view>
+                  </view>
+                </view>
+              </view>
+              <view class="gift-bottom">
+                <view class="gift-txt">
+                  赠言：{{ item.message }}
+                </view>
+                <view
+                  v-if="item.status === 1"
+                  class="btn"
+                >
+                  送给朋友
+                  <image
+                    :src="webUrl + '/icon/icon-gift-share.png'"
+                    class="icon"
+                    mode="widthFix"
+                  />
+                </view>
+                <view
+                  v-if="item.status === 2"
+                  class="btn"
+                >
+                  已全部领取
+                </view>
+                <view
+                  v-if="item.status > 2"
+                  class="btn btn-grey"
+                >
+                  灰色按钮
+                </view>
+              </view>
+            </view>
+          </block>
+          <view v-if="receiveList.length === 0" class="noCart">
+            <view class="pictrue">
+              <image :src="webUrl + '/20240102232734472795.png'"/>
+            </view>
+          </view>
+        </view>
+      </block>
       <goo-skeleton
         v-else
         :show-avatar="false"
       />
     </view>
+    <view class="page-bottom">
+      <image
+        :src="webUrl + '/icon/icon-send-gift-notice-btn.png'"
+        class="icon"
+        mode="widthFix"
+        @click="showTips"
+      />
+    </view>
+    <gift-tips
+      ref="giftTips"
+      :richText="giftNotice"
+    />
   </view>
 </template>
 
 <script>
+import {
+  giftCardReceiveList,
+  giftCardSendList,
+  giftNotice
+} from '@/api/giftList'
+import giftTips from '@/pkg_user/views/gift/components/giftTips.vue'
 export default {
   name: 'GiftLisPage',
+  components: {
+    giftTips
+  },
   data() {
     return {
       webUrl: this.$VUE_APP_RESOURCES_URL,
+      giftNotice: '',
       cateIndex: 0,
       cateList: [
         {
@@ -101,74 +205,71 @@ export default {
           status: 2
         }
       ],
-      isLoad: true,
-      list: [
-        {
-          imgage: 'http://resource.xdd618.com/O1CN01prG02J1Li6URrihe0_!!2217506541332-20240321102748.jpg',
-          goodName: '云南特产禄劝撒坝火腿土猪肉火腿云南特产禄劝撒坝火腿土猪肉火腿',
-          attrName: '卤味干拌米线 360g/盒*4',
-          price: 19.00,
-          num: 1,
-          txt: '礼笺轻启，礼藏心意',
-          status: 1
-        },
-        {
-          imgage: 'http://resource.xdd618.com/O1CN01prG02J1Li6URrihe0_!!2217506541332-20240321102748.jpg',
-          goodName: '云南特产禄劝撒坝火腿土猪肉火腿云南特产禄劝撒坝火腿土猪肉火腿',
-          attrName: '卤味干拌米线 360g/盒*4',
-          price: 19.00,
-          num: 1,
-          txt: '礼笺轻启，礼藏心意礼笺轻启，礼藏心意礼笺轻启，礼藏心意',
-          status: 2
-        },
-        {
-          imgage: 'http://resource.xdd618.com/O1CN01prG02J1Li6URrihe0_!!2217506541332-20240321102748.jpg',
-          goodName: '云南特产禄劝撒坝火腿土猪肉火腿云南特产禄劝撒坝火腿土猪肉火腿',
-          attrName: '卤味干拌米线 360g/盒*4',
-          price: 19.00,
-          num: 1,
-          txt: '礼笺轻启，礼藏心意',
-          status: 3
-        },
-        {
-          imgage: 'http://resource.xdd618.com/O1CN01prG02J1Li6URrihe0_!!2217506541332-20240321102748.jpg',
-          goodName: '云南特产禄劝撒坝火腿土猪肉火腿云南特产禄劝撒坝火腿土猪肉火腿',
-          attrName: '卤味干拌米线 360g/盒*4',
-          price: 19.00,
-          num: 1,
-          txt: '礼笺轻启，礼藏心意',
-          status: 4
-        },
-        {
-          imgage: 'http://resource.xdd618.com/O1CN01prG02J1Li6URrihe0_!!2217506541332-20240321102748.jpg',
-          goodName: '云南特产禄劝撒坝火腿土猪肉火腿云南特产禄劝撒坝火腿土猪肉火腿',
-          attrName: '卤味干拌米线 360g/盒*4',
-          price: 19.00,
-          num: 1,
-          txt: '礼笺轻启，礼藏心意',
-          status: 5
-        }
-      ]
+      isLoad: false,
+      sendList: [],
+      receiveList: []
     }
   },
   created() {
-    setTimeout(() => {
-      this.isLoad = true
-    }, 2000)
+    giftNotice().then(res => {
+      this.giftNotice = res.data
+    })
+    this.getGiftCardSendList()
   },
   methods: {
     cateItemClickHanlde(item, index) {
       if (this.cateIndex === index || !this.isLoad) return
       this.cateIndex = index
-      // todo:列表数据请求加载
+      if (this.cateIndex === 0) {
+        this.getGiftCardSendList()
+      }
+      if (this.cateIndex === 1) {
+        this.getGiftCardReceiveList()
+      }
+    },
+    getGiftCardReceiveList() {
       this.isLoad = false
-      setTimeout(() => {
+      giftCardReceiveList({
+        page: 1,
+        limit: 999
+      }).then(res => {
+        const { success, data } = res
+        if (success) {
+          this.receiveList = data || []
+        }
+      }).catch(err => {
+        console.log(err)
+      }).finally(() => {
         this.isLoad = true
-      }, 2000)
+      })
+    },
+    getGiftCardSendList() {
+      this.isLoad = false
+      giftCardSendList({
+        page: 1,
+        limit: 999
+      }).then(res => {
+        const { success, data } = res
+        if (success) {
+          this.sendList = data || []
+        }
+      }).catch(err => {
+        console.log(err)
+      }).finally(() => {
+        this.isLoad = true
+      })
+    },
+    showTips() {
+      this.$refs.giftTips.showTips = true
     },
     giftItemClickHanlde(item) {
-      console.log(item)
-      // todo:跳转到订单详情
+      if (this.cateIndex === 0) return
+      this.$yrouter.push({
+        path: '/pages/order/OrderDetails/index',
+        query: {
+          id: item.orderId
+        }
+      })
     }
   }
 }
@@ -178,7 +279,7 @@ export default {
 .gift-page {
   position: relative;
   min-height: 100vh;
-  padding: 20rpx;
+  padding: 20rpx 20rpx 0 20rpx;
   box-sizing: border-box;
   background-color: #F6F6F6;
   .cate-wrap {
@@ -215,7 +316,7 @@ export default {
   .list-wrap {
     position: relative;
     z-index: 2;
-    padding: 84rpx 0 0 0;
+    padding: 84rpx 0 80rpx 0;
     .gift-item {
       padding: 16rpx;
       margin: 0 0 24rpx;
@@ -313,5 +414,36 @@ export default {
       }
     }
   }
+  .page-bottom {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 9;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 80rpx;
+    background-color: #F6F6F6;
+    .icon {
+      display: block;
+      width: 140rpx;
+    }
+  }
+}
+.noCart {
+  margin-top: 0.17 * 100rpx;
+  padding-top: 0.1 * 100rpx;
+  .pictrue {
+    width: 408rpx;
+    height: 414rpx;
+    overflow: hidden;
+    margin: 0.7 * 100rpx auto 0.5 * 100rpx auto;
+    image {
+      display: block;
+      width: 408rpx;
+      height: 414rpx;
+    }
+  }
 }
 </style>
\ No newline at end of file