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

2025-02-20 13:40:17 +08:00
parent 1fbbbed4f0
commit 40207f11a1
3 changed files with 268 additions and 114 deletions
@@ -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)
+}
@@ -10,7 +10,7 @@
    >
      <view class="popup-content">
        <!-- 标题 -->
-        <view class="title">购买须知</view>
+        <view class="title">赠礼须知</view>
        <!-- 富文本内容 -->
        <u-parse :content="richText" />
      </view>
@@ -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>