Feat(我的礼品卡):接口对接

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)
+}

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>

pkg_user/views/giftList.vue

@@ -14,82 +14,186 @@
       </view>
     </view>
     <view class="list-wrap">
-      <view v-if="isLoad" class="list-body">
+      <block v-if="isLoad">
-        <view
+        <view v-if="cateIndex === 0" class="list-body">
-          v-for="(item, index) in list"
+          <block v-if="sendList.length > 0">
-          :key="index"
+            <view
-          class="gift-item"
+              v-for="(item, index) in sendList"
-        >
+              :key="index"
-          <view
+              class="gift-item"
-            class="gift-body"
+            >
-            @click="giftItemClickHanlde(item)"
+              <view
-          >
+                v-for="(cart, cartIndex) in item.giftInfo"
-            <view class="gift-img">
+                :key="cartIndex"
-              <image
+                class="gift-body"
-                :src="item.imgage"
+                @click="giftItemClickHanlde(item)"
-                class="img"
+              >
-                mode="widthFix"
+                <view class="gift-img">
-              />
+                  <image
-            </view>
+                    :src="cart.productInfo.image"
-            <view class="gift-good-info">
+                    class="img"
-              <view class="name more-t">
+                    mode="widthFix"
-                {{ item.goodName }}
+                  />
+                </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="gift-bottom">
-                <view class="txt">{{ item.attrName }}</view>
+                <view class="gift-txt">
-              </view>
+                  赠言：{{ item.message }}
-              <view class="price-wrap">
+                </view>
-                <view class="price">
+                <!-- 状态 0-待领取 1-已全部领取 2-已失效 -->
-                  <text class="prefix">￥</text>{{ item.price }}
+                <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>
+          </block>
-          <view class="gift-bottom">
+          <view v-if="sendList.length === 0" class="noCart">
-            <view class="gift-txt">
+            <view class="pictrue">
-              赠言：{{ item.txt }}
+              <image :src="webUrl + '/20240102232734472795.png'"/>
-            </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>
+        <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,
+      isLoad: false,
-      list: [
+      sendList: [],
-        {
+      receiveList: []
-          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(() => {
+    giftNotice().then(res => {
-      this.isLoad = true
+      this.giftNotice = res.data
-    }, 2000)
+    })
+    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)
+      if (this.cateIndex === 0) return
-      // todo:跳转到订单详情
+      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>