From 044c1a0863817640d4880fc1c94b3c7208faf0bb Mon Sep 17 00:00:00 2001
From: lifizer <913626195@qq.com>
Date: Mon, 17 Feb 2025 21:43:48 +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):=E7=95=8C=E9=9D=A2=E5=88=9D=E5=A7=8B=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages.json                  |   6 +
 pages/user/User/index.vue   |   2 +-
 pkg_user/views/giftList.vue | 312 +++++++++++++++++++++++++++++++++++-
 3 files changed, 314 insertions(+), 6 deletions(-)

diff --git a/pages.json b/pages.json
index 24bbfa4..3d6c0c8 100644
--- a/pages.json
+++ b/pages.json
@@ -765,6 +765,12 @@
     {
       "root": "pkg_user",
       "pages": [
+        {
+          "path": "views/giftList",
+          "style": {
+            "navigationBarTitleText": "我的礼品卡"
+          }
+        },
         {
           "path": "views/myFavorite",
           "style": {
diff --git a/pages/user/User/index.vue b/pages/user/User/index.vue
index 8022798..485baf3 100644
--- a/pages/user/User/index.vue
+++ b/pages/user/User/index.vue
@@ -301,7 +301,7 @@ export default {
       toolList: [
         {
           text: '我的礼包卡',
-          url: '/pkg_user/views/personalData',
+          url: '/pkg_user/views/giftList',
           icon: '/icon/gift.png',
           allowEnter: true
         },
diff --git a/pkg_user/views/giftList.vue b/pkg_user/views/giftList.vue
index e7948a1..ded0179 100644
--- a/pkg_user/views/giftList.vue
+++ b/pkg_user/views/giftList.vue
@@ -1,15 +1,317 @@
 <template>
-  <view class="">
-    礼品卡
+  <view class="gift-page">
+    <view class="cate-wrap">
+      <view class="cate-list">
+        <view
+          v-for="(item, index) in cateList"
+          :key="index"
+          :class="cateIndex === index ? 'curr' : ''"
+          class="cate-item"
+          @click="cateItemClickHanlde(item, index)"
+        >
+          {{ item.name }}
+        </view>
+      </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 }}
+              </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>
+                <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"
+            >
+              灰色按钮
+            </view>
+          </view>
+        </view>
+      </view>
+      <goo-skeleton
+        v-else
+        :show-avatar="false"
+      />
+    </view>
   </view>
 </template>
 
 <script>
 export default {
-
+  name: 'GiftLisPage',
+  data() {
+    return {
+      webUrl: this.$VUE_APP_RESOURCES_URL,
+      cateIndex: 0,
+      cateList: [
+        {
+          name: '送出的',
+          status: 1
+        },
+        {
+          name: '收到的',
+          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
+        }
+      ]
+    }
+  },
+  created() {
+    setTimeout(() => {
+      this.isLoad = true
+    }, 2000)
+  },
+  methods: {
+    cateItemClickHanlde(item, index) {
+      if (this.cateIndex === index || !this.isLoad) return
+      this.cateIndex = index
+      // todo:列表数据请求加载
+      this.isLoad = false
+      setTimeout(() => {
+        this.isLoad = true
+      }, 2000)
+    },
+    giftItemClickHanlde(item) {
+      console.log(item)
+      // todo:跳转到订单详情
+    }
+  }
 }
 </script>
 
-<style>
-
+<style lang="less" scoped>
+.gift-page {
+  position: relative;
+  min-height: 100vh;
+  padding: 20rpx;
+  box-sizing: border-box;
+  background-color: #F6F6F6;
+  .cate-wrap {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 9;
+    padding: 20rpx 32rpx;
+    background-color: #F6F6F6;
+    .cate-list {
+      display: flex;
+      align-items: center;
+      height: 64rpx;
+      border-radius: 32rpx;
+      background-color: #fff;
+      .cate-item {
+        flex: 1;
+        height: 64rpx;
+        border-radius: 32rpx;
+        line-height: 64rpx;
+        text-align: center;
+        font-size: 30rpx;
+        color: #333;
+        background-color: #fff;
+        &.curr {
+          font-weight: bold;
+          color: #fff;
+          background-color: #C41617;
+        }
+      }
+    }
+  }
+  .list-wrap {
+    position: relative;
+    z-index: 2;
+    padding: 84rpx 0 0 0;
+    .gift-item {
+      padding: 16rpx;
+      margin: 0 0 24rpx;
+      border-radius: 16rpx;
+      background-color: #ffff;
+      .gift-body {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        .gift-img {
+          .img {
+            display: block;
+            width: 200rpx;
+            height: 200rpx;
+            border-radius: 16rpx;
+          }
+        }
+        .gift-good-info {
+          display: flex;
+          flex-direction: column;
+          justify-content: space-between;
+          width: calc(100% - 212rpx);
+          height: 200rpx;
+          .name {
+            font-weight: bold;
+            font-size: 28rpx;
+            color: #333;
+            line-height: 44rpx;
+          }
+          .attr-txt {
+            display: flex;
+            .txt {
+              height: 42rpx;
+              padding: 0 12rpx;
+              border-radius: 24rpx;
+              border: 1px solid #999;
+              line-height: 42rpx;
+              color: #333;
+              font-size: 24rpx;
+            }
+          }
+          .price-wrap {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            .price {
+              color: #C52733;
+              font-size: 30rpx;
+              font-weight: bold;
+              .prefix {
+                font-weight: normal;
+                font-size: 22rpx;
+              }
+            }
+            .num {
+              font-size: 24rpx;
+              color: #666;
+            }
+          }
+        }
+      }
+      .gift-bottom {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 24rpx 0 0 0;
+        margin: 24rpx 0 0 0;
+        border-top: 1rpx solid #D2D2D2;
+        .gift-txt {
+          flex: 1;
+          font-size: 26rpx;
+          color: #666;
+        }
+        .btn {
+          display: flex;
+          align-items: center;
+          height: 46rpx;
+          padding: 0 12rpx;
+          margin: 0 0 0 24rpx;
+          border-radius: 8rpx;
+          color: #fff;
+          line-height: 46rpx;
+          font-size: 26rpx;
+          background-color: #C52733;
+          .icon {
+            display: block;
+            width: 20rpx;
+            height: 20rpx;
+          }
+          &.btn-grey {
+            color: #fff;
+            background-color: #C7C7C7;
+          }
+        }
+      }
+    }
+  }
+}
 </style>
\ No newline at end of file