Feat(特色礼品):接口对接

api/product.js

@@ -16,9 +16,17 @@ export function wellnessPlaceList(param) {
 
 /**
  * 特色礼品首页
- * */
+ */
 export function customizedGift() {
-    return request.get("/customizedGift/index", {}, {login: true})
+    return request.get("/customizedGift/index", {}, {login: false})
+}
+
+/**
+ * 特色礼品省份专题页
+ *
+ */
+export function customizedGiftContent(param) {
+    return request.get("/customizedGift/cityContent", param, {login: false})
 }
 
 /**

pages.json

@@ -632,9 +632,16 @@
         },
         {
           "path": "views/giftList",
+          "style": {
+            "navigationBarTitleText": "特色礼品"
+          }
+        },
+        {
+          "path": "views/giftContent",
           "style": {
             "navigationBarTitleText": "特色礼品",
-            "onReachBottomDistance": 100
+            "navigationBarTextStyle": "black",
+            "navigationStyle": "custom"
           }
         },
         {

pkg_product/views/giftContent.vue

@@ -0,0 +1,148 @@
+<template>
+  <view class="gift-page">
+    <view class="page1-wrap">
+      <image :src="data.mainImage" class="bg" />
+    </view>
+    <view class="page2-wrap">
+      <view class="bg-cont">
+        <rich-text :nodes="data.backgroundImage1Html" />
+        <!-- <image :src="data.backgroundImage1" class="bg" /> -->
+      </view>
+      <view class="good-list">
+        <view
+          v-for="(item, index) in data.productList1"
+          :key="index"
+          class="good-item"
+          @click="goodItemClick(item)"
+        >
+          <image :src="item.productImage" class="img" />
+        </view>
+      </view>
+    </view>
+    <view class="page3-wrap">
+      <view class="bg-cont">
+        <rich-text :nodes="data.backgroundImage2Html" />
+        <!-- <image :src="data.backgroundImage2" class="bg" /> -->
+      </view>
+      <view class="good-list">
+        <view
+          v-for="(item, index) in data.productList2"
+          :key="index"
+          class="good-item"
+          @click="goodItemClick(item)"
+        >
+          <image :src="item.productImage" class="img" />
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import {
+  customizedGiftContent
+} from '@/api/product'
+export default {
+  name: 'GiftContent',
+  data() {
+    return {
+      data: {
+        backgroundImage1: '',
+        backgroundImage2: '',
+        backgroundImage1Html: '',
+        backgroundImage2Html: '',
+        mainImage: '',
+        productList1: [],
+        productList2: [],
+      }
+    }
+  },
+  onLoad(options) {
+    uni.setNavigationBarTitle({
+      title: options.name + '-' + '特色礼品'
+    })
+    this.getPageDataReq(options.id)
+  },
+  methods: {
+    getPageDataReq(id) {
+      uni.showLoading({
+        title: '数据加载中...'
+      })
+      customizedGiftContent({ id }).then(res => {
+        const { success, data } = res
+        if (success) {
+          this.data = {
+            ...data,
+            backgroundImage1Html: `<img src="${data.backgroundImage1}" style="display: block;max-width: 100%;">`,
+            backgroundImage2Html: `<img src="${data.backgroundImage2}" style="display: block;max-width: 100%;">`
+          }
+        }
+        uni.hideLoading()
+      }).catch(() => {
+        uni.hideLoading()
+      })
+    },
+    goodItemClick(good) {
+      const productId = good.productId
+      if (!productId) {
+        return
+      }
+      uni.navigateTo({
+        url: `/pages/shop/GoodsCon/index?id=${productId}`
+      })
+    }
+  }
+}
+</script>
+<style scoped lang="less">
+.page1-wrap {
+  .bg {
+    display: block;
+    width: 100%;
+    height: 100vh;
+  }
+}
+.good-list {
+  position: absolute;
+  z-index: 5;
+  width: 100%;
+}
+.page2-wrap {
+  position: relative;
+  .bg-cont {
+    position: relative;
+    z-index: 2;
+  }
+  .good-list {
+    top: 196px;
+    .good-item + .good-item {
+      margin: 25px 0 0 0;
+    }
+    .good-item {
+      .img {
+        display: block;
+        width: 325px;
+        height: 358px;
+        margin: 0 auto;
+      }
+    }
+  }
+}
+.page3-wrap {
+  position: relative;
+  .good-list {
+    top: 0;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    padding: 12px 0 0 0;
+    .good-item {
+      margin: 0 0 20px 0;
+      .img {
+        width: 166px;
+        height: 262px;
+      }
+    }
+  }
+}
+</style>

pkg_product/views/giftList.vue

@@ -1,270 +1,221 @@
 <template>
-  <view class="pkg-product-list">
+  <view class="gift-page">
-    <view class="fixed-header">
+    <view class="banner" @click="linkTo">
-      <swiper class="swiper-box" indicator-dots indicator-color="rgba(255,255,255,.3)" indicator-active-color="#fff"
+      <rich-text :nodes="topBannerHtml" />
-              autoplay circular v-if="bannerList.length>0">
+    </view>
-        <swiper-item v-for="(item,index) in bannerList" :key="index">
+    <view class="province-enter-wrap">
-          <image :src="item.pic" mode="scaleToFill" @click="$global.commonJump(item.uniappUrl)"/>
+      <view class="scroll-x-wrap">
-        </swiper-item>
+        <view class="list-cont">
-      </swiper>
+          <view
-
+            v-for="(item, index) in provinceList"
-      <view class="search-box flex jc-between ai-center">
+            :key="index"
-        <input type="text" v-model="keyword" placeholder="搜索商品" placeholder-style="color:#949494" @confirm="search">
+            class="item"
-        <image class="icon" :src="webUrl+'/20220903142935869059.png'" mode="scaleToFill" @click="search"></image>
+            @click="provinceItemClick(item)"
+          >
+            <image :src="item.icon" class="img" />
+            <view class="name">{{ item.provinceMergerName }}</view>
+          </view>
+        </view>
       </view>
     </view>
-
+    <view class="province-bg-list">
-    <view class="fixed-aside flex-0">
+      <view
-      <view class="item flex jc-center ai-center" :class="index === asideIndex ? 'active' : ''"
+        v-for="(item, index) in provinceList"
-            v-for="(item, index) in asideList" :key="index" @click="asideTap(index)">
+        :key="index"
-        <text class="one-t">{{ item.label }}</text>
+        class="item"
-      </view>
+      >
-    </view>
+        <view class="bg" @click="provinceItemClick(item)">
-
+          <rich-text :nodes="item.bgHtml" />
-    <view class="conter">
+        </view>
-      <mescroll-body ref="mescrollRef" top="0" bottom="0" class='cotent-scroll' :up="upOption" :down="downOption"
+        <view class="good-list">
-                     @up="upCallback" @down="downCallback" @init="mescrollInit" @emptyclick="emptyClick">
+          <view
-
+            v-for="(goodItem, goodIndex) in item.productList"
-        <view class="list flex flex-wrap">
+            :key="goodIndex"
-          <view v-for="(item, index) in dataList" :key="index">
+            class="good-item"
-            <view class="item" @click="goGoods(item.id)">
+            @click.stop="goodItemClick(goodItem)"
-              <image class="cover" :src="item.image" mode="scaleToFill"/>
+          >
-              <view class="name more-t">{{ item.storeName }}</view>
+            <view class="good-img">
-              <view class="price">￥{{ item.price }}</view>
+              <image :src="goodItem.productImage" class="img" />
+            </view>
+            <view class="name">
+              {{ goodItem.productName }}
+            </view>
+            <view class="price">
+              <text class="txt">￥</text>
+              {{ goodItem.productPrice }}
             </view>
           </view>
         </view>
-      </mescroll-body>
+      </view>
     </view>
-
-    <!--      <view class="article-box">-->
-    <!--        <mescroll-body ref="mescrollRef" top="16rpx" bottom="0" class='cotent-scroll' :up="upOption" :down="downOption"-->
-    <!--                       @up="upCallback" @down="downCallback" @init="mescrollInit" @emptyclick="emptyClick">-->
-    <!--          <view class="list flex flex-wrap">-->
-    <!--            <view v-for="(item, index) in dataList" :key="index">-->
-    <!--              <view class="item" @click="goGoods(item.id)">-->
-    <!--                <image class="cover" :src="item.image" mode="scaleToFill"/>-->
-    <!--                <view class="name more-t">{{ item.storeName }}</view>-->
-    <!--                <view class="price">￥{{ item.price }}</view>-->
-    <!--              </view>-->
-    <!--            </view>-->
-    <!--          </view>-->
-    <!--        </mescroll-body>-->
-    <!--      </view>-->
-    <!--    </view>-->
   </view>
 </template>
 
 <script>
-import MescrollMixins from "@/mixins/mescroll-mixins.js";
+import {
-import MescrollBody from "@/components/mescroll-uni/mescroll-body.vue";
+  customizedGift
-import {customizedGift} from "@/api/product";
+} from '@/api/product'
-import {fetchCity} from "@/api/wenwan";
-import {getProducts} from "@/api/store";
-
 export default {
-  name: "giftList",
+  name: 'GiftList',
-  components: {
-    MescrollBody
-  },
   data() {
     return {
-      webUrl: this.$VUE_APP_RESOURCES_URL,
+      provinceList: [],
-      keyword: "",
+      topBannerHtml: '',
-      bannerList: [],
+      topBannerUrl: ''
-      asideList: [],
-      asideIndex: 0,
-      dataList: [], // 列表数据
-
-      upOption: {
-        noMoreSize: 10, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
-        auto: true,
-        empty: {
-          tip: '', // 提示
-          icon:this.$VUE_APP_RESOURCES_URL+'/20240102232724024787.png',
-          width:381,
-          height:348
-        }
-      },
-      downOption: {
-        auto: false
-      }
     }
   },
-  mixins: [
-    MescrollMixins({
-      getPageData(mescroll) {
-        let that = this;
-        // 此时mescroll会携带page的参数:
-        let pageNum = mescroll.num; // 页码, 默认从1开始
-
-        let timer = setInterval(() => {
-          if (that.asideList.length > 0) {
-            clearInterval(timer);
-
-            let param = {
-              isCustomizedGift: 1,
-              page: pageNum,
-              limit: 10,
-              keyword: that.keyword,
-              provinceId: that.asideList.length > 0 ? that.asideList[that.asideIndex].provinceId : ""
-            }
-            getProducts(param).then(({data}) => {
-              if (mescroll.num === 1) {
-                that.dataList = [];
-              }
-              that.dataList = that.dataList.concat(data);
-              mescroll.endSuccess(data.length);
-            }).catch(err => {
-              mescroll.endErr();
-              uni.showToast({
-                title: err + '',
-                icon: 'none',
-                mask: false,
-                duration: 1500
-              });
-            });
-          }
-        }, 500)
-      }
-    })
-  ],
   onLoad() {
-    customizedGift().then(({data}) => this.bannerList = data.banner);
+    this.getPageDataReq()
-    fetchCity(3).then(({data}) => this.asideList = data.group);
   },
   methods: {
-    search() {
+    getPageDataReq() {
-      //触发加载请求
+      customizedGift().then(res => {
-      this.mescroll.scrollTo(0, 0);
+        const { success, data } = res
-      this.mescroll && this.mescroll.resetUpScroll(false);
+        if (success) {
+          this.topBannerHtml = `<img src="${data.topBanner.image}" style="display: block;max-width: 100%;">`
+          this.topBannerUrl = data.topBanner.appUrl || ''
+          const list = data.cities || []
+          if (list.length > 0) {
+            list.map(item => {
+              const backgroundImage = item.backgroundImage || ''
+              if (backgroundImage && item.productList.length > 0) {
+                this.provinceList.push({
+                  ...item,
+                  bgHtml: `<img src="${item.backgroundImage}" style="display: block;max-width: 100%;">`
+                })
+              }
+            })
+          }
+        }
+      })
     },
-    asideTap(index) {
+    linkTo() {
-      this.asideIndex = index;
+      if (!this.topBannerUrl) {
-      this.search();
+        return
-    },
+      }
-    goGoods(id) {
       uni.navigateTo({
-        url: "/pages/shop/GoodsCon/index?id=" + id
+        url: this.topBannerUrl
+      })
+    },
+    provinceItemClick(item) {
+      const id = item.id
+      if (!id) {
+        return
+      }
+      uni.navigateTo({
+        url: `/pkg_product/views/giftContent?id=${id}&name=${item.provinceMergerName}`
+      })
+    },
+    goodItemClick(good) {
+      const productId = good.productId
+      if (!productId) {
+        return
+      }
+      uni.navigateTo({
+        url: `/pages/shop/GoodsCon/index?id=${productId}`
       })
     }
   }
 }
 </script>
-
 <style scoped lang="less">
-@import "@/assets/css/product.less";
+.banner {
-
+  position: relative;
-.pkg-product-list {
+  z-index: 1;
-  min-height: 100vh;
+}
-  box-sizing: border-box;
+.province-enter-wrap {
-  background: #fff;
+  position: relative;
-
+  z-index: 5;
-  .fixed-header {
+  margin-top: -80rpx;
-    position: fixed;
+  padding: 30rpx 30rpx 0 30rpx;
-    top: 0;
+  .scroll-x-wrap {
-    left: 0;
+    padding: 24rpx 60rpx 16rpx 24rpx;
-    width: 100%;
+    border-radius: 24rpx;
-    padding: 18rpx 0;
-    background: #fff;
-    z-index: 9;
-  }
-
-  .search-box {
-    margin-top: 14rpx;
-  }
-
-  .body-box {
-    position: fixed;
-    top: 472rpx;
-    height: calc(100vh - 472rpx);
-  }
-
-  .fixed-aside {
-    position: fixed;
-    width: 194rpx;
-    left: 0;
-    top: 472rpx;
-    bottom: 0 !important;
-    box-sizing: border-box;
-    border-top: 2rpx solid #D2D2D2;
-    border-right: 2rpx solid #DADCE0;
     background-color: #fff;
-    overflow-y: auto;
+    box-shadow: 0px 1px 4px rgba(0,0,0,0.16);
-    overflow-x: hidden;
+    .list-cont {
-    overflow-scrolling: touch;
+      display: flex;
-
+      flex-wrap: nowrap;
-    .item {
+      overflow-x: auto;
-      height: 94rpx;
+      .item + .item {
-      box-sizing: border-box;
+        margin: 0 0 0 24rpx;
-      border-bottom: 2rpx solid #D2D2D2;
+      }
-      color: #033333;
+      .item {
-
+        .img {
-      text {
+          width: 45px;
-        font-size: 28rpx;
+          height: 45px;
+          border-radius: 4px;
+        }
+        .name {
+          margin: 12rpx 0 0 0;
+          font-size: 12px;
+          color: #333;
+          text-align: center;
+        }
       }
-    }
-
-    .active {
-      border-left: 6rpx solid #FD574B;
-      color: #FD574B;
-      font-weight: bold;
     }
   }
-
+}
-  .conter {
+.province-bg-list {
-    margin-left: 194rpx;
+  padding: 30rpx;
-    margin-top: 472rpx;
+  .item + .item {
-    border-top: 2rpx solid #D2D2D2;
+    margin: 30rpx 0 0 0;
-
+  }
-    .empty {
+  .item {
-      position: absolute;
+    position: relative;
-      top: 50%;
+    .bg {
-      left: 50%;
-      transform: translate(-50%, -50%);
-
-      image {
-        width: 280rpx;
-        height: 280rpx;
-      }
-
-      view {
-        color: gray;
-        font-size: 24rpx;
-      }
-    }
-
-    .item {
       position: relative;
-      width: 242rpx;
+      z-index: 2;
-      height: 376rpx;
-      box-sizing: border-box;
-      margin: 20rpx 0 0 20rpx;
-
-      .cover {
-        width: 242rpx;
-        height: 242rpx;
-        margin-bottom: 8rpx;
-        border-radius: 8rpx;
-      }
-
-      .name {
-        color: #333;
-        font-size: 26rpx;
-        line-height: 36rpx;
-      }
-
-      .price {
-        position: absolute;
-        bottom: 4rpx;
-        color: #DA0000;
-        font-size: 28rpx;
-        line-height: 36rpx;
-      }
     }
-
+    .good-list {
-    .item-store {
+      position: absolute;
-      height: 336rpx;
+      bottom: 12rpx;
+      left: 30rpx;
+      right: 30rpx;
+      z-index: 5;
+      display: flex;
+      flex-wrap: nowrap;
+      overflow-x: auto;
+      .good-item {
+        margin: 0 24rpx 0 0;
+        text-align: center;
+        font-size: 12px;
+        color: #fff;
+        .good-img {
+          width: 96px;
+          height: 96px;
+          .img {
+            width: 100%;
+            height: 100%;
+            border-radius: 12rpx;
+          }
+        }
+        .name {
+          height: 28px;
+          padding: 5rpx 0;
+          line-height: 14px;
+          display: -webkit-box;
+          overflow: hidden;
+          white-space: normal !important;
+          text-overflow: ellipsis;
+          -o-text-overflow: ellipsis;
+          word-wrap: break-word;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
+        }
+        .price {
+          display: inline-block;
+          height: 18px;
+          padding: 0 20rpx;
+          border-radius: 11px;
+          border: 1px solid #fff;
+          line-height: 18px;
+          background-color: rgba(0, 0, 0, .5);
+          .txt {
+            font-size: 10px;
+          }
+        }
+      }
     }
   }
 }

pkg_product/views/giftList_bak20240313.vue

@@ -0,0 +1,271 @@
+<template>
+  <view class="pkg-product-list">
+    <view class="fixed-header">
+      <swiper class="swiper-box" indicator-dots indicator-color="rgba(255,255,255,.3)" indicator-active-color="#fff"
+              autoplay circular v-if="bannerList.length>0">
+        <swiper-item v-for="(item,index) in bannerList" :key="index">
+          <image :src="item.pic" mode="scaleToFill" @click="$global.commonJump(item.uniappUrl)"/>
+        </swiper-item>
+      </swiper>
+
+      <view class="search-box flex jc-between ai-center">
+        <input type="text" v-model="keyword" placeholder="搜索商品" placeholder-style="color:#949494" @confirm="search">
+        <image class="icon" :src="webUrl+'/20220903142935869059.png'" mode="scaleToFill" @click="search"></image>
+      </view>
+    </view>
+
+    <view class="fixed-aside flex-0">
+      <view class="item flex jc-center ai-center" :class="index === asideIndex ? 'active' : ''"
+            v-for="(item, index) in asideList" :key="index" @click="asideTap(index)">
+        <text class="one-t">{{ item.label }}</text>
+      </view>
+    </view>
+
+    <view class="conter">
+      <mescroll-body ref="mescrollRef" top="0" bottom="0" class='cotent-scroll' :up="upOption" :down="downOption"
+                     @up="upCallback" @down="downCallback" @init="mescrollInit" @emptyclick="emptyClick">
+
+        <view class="list flex flex-wrap">
+          <view v-for="(item, index) in dataList" :key="index">
+            <view class="item" @click="goGoods(item.id)">
+              <image class="cover" :src="item.image" mode="scaleToFill"/>
+              <view class="name more-t">{{ item.storeName }}</view>
+              <view class="price">￥{{ item.price }}</view>
+            </view>
+          </view>
+        </view>
+      </mescroll-body>
+    </view>
+
+    <!--      <view class="article-box">-->
+    <!--        <mescroll-body ref="mescrollRef" top="16rpx" bottom="0" class='cotent-scroll' :up="upOption" :down="downOption"-->
+    <!--                       @up="upCallback" @down="downCallback" @init="mescrollInit" @emptyclick="emptyClick">-->
+    <!--          <view class="list flex flex-wrap">-->
+    <!--            <view v-for="(item, index) in dataList" :key="index">-->
+    <!--              <view class="item" @click="goGoods(item.id)">-->
+    <!--                <image class="cover" :src="item.image" mode="scaleToFill"/>-->
+    <!--                <view class="name more-t">{{ item.storeName }}</view>-->
+    <!--                <view class="price">￥{{ item.price }}</view>-->
+    <!--              </view>-->
+    <!--            </view>-->
+    <!--          </view>-->
+    <!--        </mescroll-body>-->
+    <!--      </view>-->
+    <!--    </view>-->
+  </view>
+</template>
+
+<script>
+import MescrollMixins from "@/mixins/mescroll-mixins.js";
+import MescrollBody from "@/components/mescroll-uni/mescroll-body.vue";
+import {customizedGift} from "@/api/product";
+import {fetchCity} from "@/api/wenwan";
+import {getProducts} from "@/api/store";
+
+export default {
+  name: "giftList",
+  components: {
+    MescrollBody
+  },
+  data() {
+    return {
+      webUrl: this.$VUE_APP_RESOURCES_URL,
+      keyword: "",
+      bannerList: [],
+      asideList: [],
+      asideIndex: 0,
+      dataList: [], // 列表数据
+
+      upOption: {
+        noMoreSize: 10, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
+        auto: true,
+        empty: {
+          tip: '', // 提示
+          icon:this.$VUE_APP_RESOURCES_URL+'/20240102232724024787.png',
+          width:381,
+          height:348
+        }
+      },
+      downOption: {
+        auto: false
+      }
+    }
+  },
+  mixins: [
+    MescrollMixins({
+      getPageData(mescroll) {
+        let that = this;
+        // 此时mescroll会携带page的参数:
+        let pageNum = mescroll.num; // 页码, 默认从1开始
+
+        let timer = setInterval(() => {
+          if (that.asideList.length > 0) {
+            clearInterval(timer);
+
+            let param = {
+              isCustomizedGift: 1,
+              page: pageNum,
+              limit: 10,
+              keyword: that.keyword,
+              provinceId: that.asideList.length > 0 ? that.asideList[that.asideIndex].provinceId : ""
+            }
+            getProducts(param).then(({data}) => {
+              if (mescroll.num === 1) {
+                that.dataList = [];
+              }
+              that.dataList = that.dataList.concat(data);
+              mescroll.endSuccess(data.length);
+            }).catch(err => {
+              mescroll.endErr();
+              uni.showToast({
+                title: err + '',
+                icon: 'none',
+                mask: false,
+                duration: 1500
+              });
+            });
+          }
+        }, 500)
+      }
+    })
+  ],
+  onLoad() {
+    customizedGift().then(({data}) => this.bannerList = data.banner);
+    fetchCity(3).then(({data}) => this.asideList = data.group);
+  },
+  methods: {
+    search() {
+      //触发加载请求
+      this.mescroll.scrollTo(0, 0);
+      this.mescroll && this.mescroll.resetUpScroll(false);
+    },
+    asideTap(index) {
+      this.asideIndex = index;
+      this.search();
+    },
+    goGoods(id) {
+      uni.navigateTo({
+        url: "/pages/shop/GoodsCon/index?id=" + id
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import "@/assets/css/product.less";
+
+.pkg-product-list {
+  min-height: 100vh;
+  box-sizing: border-box;
+  background: #fff;
+
+  .fixed-header {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    padding: 18rpx 0;
+    background: #fff;
+    z-index: 9;
+  }
+
+  .search-box {
+    margin-top: 14rpx;
+  }
+
+  .body-box {
+    position: fixed;
+    top: 472rpx;
+    height: calc(100vh - 472rpx);
+  }
+
+  .fixed-aside {
+    position: fixed;
+    width: 194rpx;
+    left: 0;
+    top: 472rpx;
+    bottom: 0 !important;
+    box-sizing: border-box;
+    border-top: 2rpx solid #D2D2D2;
+    border-right: 2rpx solid #DADCE0;
+    background-color: #fff;
+    overflow-y: auto;
+    overflow-x: hidden;
+    overflow-scrolling: touch;
+
+    .item {
+      height: 94rpx;
+      box-sizing: border-box;
+      border-bottom: 2rpx solid #D2D2D2;
+      color: #033333;
+
+      text {
+        font-size: 28rpx;
+      }
+    }
+
+    .active {
+      border-left: 6rpx solid #FD574B;
+      color: #FD574B;
+      font-weight: bold;
+    }
+  }
+
+  .conter {
+    margin-left: 194rpx;
+    margin-top: 472rpx;
+    border-top: 2rpx solid #D2D2D2;
+
+    .empty {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+
+      image {
+        width: 280rpx;
+        height: 280rpx;
+      }
+
+      view {
+        color: gray;
+        font-size: 24rpx;
+      }
+    }
+
+    .item {
+      position: relative;
+      width: 242rpx;
+      height: 376rpx;
+      box-sizing: border-box;
+      margin: 20rpx 0 0 20rpx;
+
+      .cover {
+        width: 242rpx;
+        height: 242rpx;
+        margin-bottom: 8rpx;
+        border-radius: 8rpx;
+      }
+
+      .name {
+        color: #333;
+        font-size: 26rpx;
+        line-height: 36rpx;
+      }
+
+      .price {
+        position: absolute;
+        bottom: 4rpx;
+        color: #DA0000;
+        font-size: 28rpx;
+        line-height: 36rpx;
+      }
+    }
+
+    .item-store {
+      height: 336rpx;
+    }
+  }
+}
+</style>