gxd-uni-library-editx 1.0.0

package/src/components/XdStoreProductType/XdStoreProductType.vue

@@ -0,0 +1,307 @@
+<template>
+  <view class="xd-product-type" v-if="selectNav">
+    <view class="xd-product-type__left">
+      <scroll-view
+        class="xd-product-type__left-scroll"
+        scroll-y
+        :scroll-with-animation="true"
+        :scroll-into-view="intoID"
+      >
+        <view>
+          <view
+            class="xd-product-type__left-item"
+            :class="{active: nav.id===selectNav.id}"
+            :id="getNavID(nav)"
+            v-for="(nav,navIndex) in navList"
+            :key="navIndex"
+            @click="handleSelectNav(nav)"
+          >{{nav.name}}
+          </view>
+        </view>
+      </scroll-view>
+    </view>
+    <view class="xd-product-type__right">
+      <view class="xd-product-type__right-ads" v-if="ads">
+        <image :src="ads['img_url']"></image>
+      </view>
+      <view class="xd-product-type__right-list">
+        <view class="xd-product-type__right-title">{{selectNav['name']}}</view>
+        <view class="xd-product-type__right-content" v-if="productTypeList.length > 0">
+          <view
+            class="xd-product-type__right-item"
+            @click="toProductDetail(subNav)"
+            v-for="subNav in productTypeList"
+            :key="subNav.id"
+          >
+            <view>
+              <image :src="subNav.image_url"></image>
+            </view>
+            <view>{{subNav.name}}</view>
+          </view>
+        </view>
+        <xd-no-data v-else-if="productTypeList.length ===0 && productTypeListCount > 0" height="300rpx">{{noData}}</xd-no-data>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  /**
+   * XdStoreProductType 商城商品分类列表显示
+   * @description 商城商品分类列表显示
+   * @tutorial
+   * @property {Object|null} defaultIndex 左侧菜单显示第N个
+   * @property {String} noData 无产品分类显示文案 默认：商品分类正在上架中
+   *
+   * @event {Function} onNavList  获取一级菜单列表 数据格式: testNavList
+   * @event {Function} onSubNavList  获取二级菜单数据列表 数据格式见: testSubList
+   * @event {Function} onAdsList  获取广告数据 数据格式：testAds
+   * @event {Function} onToDetail 点击二级分类事件 参数:  item（分类对象数据）
+   *
+   */
+
+
+  import XdNoData from "@/components/XdNoData/XdNoData";
+
+  export default {
+    name: "XdStoreProductType",
+    components:{
+      XdNoData,
+    },
+    props:{
+      defaultIndex: {
+        type:Number,
+        default: 0,
+      },
+      noData:{
+        type: String,
+        default: '商品分类正在上架中',
+      }
+    },
+    data(){
+      return {
+        selectNav: null, //已选中一级分类
+        intoID: null, //当前进入导航ID
+        navList: [], //一级分类列表
+        productTypeList: [], //二级分类列表数据
+        ads: null, //广告地址
+        productTypeListCount: 0,
+
+        //测试数据格式
+        testNavList: [
+          {
+            "id": "4015",
+            "name": "\u203b\u9001\u793c\u9996\u9009",
+            "top_id": "0",
+            "image_url": "https:\/\/jfb-public-images.oss-cn-qingdao.aliyuncs.com\/20200813162706681.png",
+            "sub": []
+          }, {
+            "id": "4016",
+            "name": "\u203b\u7cae\u6cb9\u98df\u54c1",
+            "top_id": "0",
+            "image_url": "https:\/\/jfb-public-images.oss-cn-qingdao.aliyuncs.com\/20200620114926428.jpg",
+            "sub": []
+          }, {
+            "id": "4017",
+            "name": "\u203b\u8336\u6c34\u996e\u6599",
+            "top_id": "0",
+            "image_url": "https:\/\/jfb-public-images.oss-cn-qingdao.aliyuncs.com\/20200901163252819.jpg",
+            "sub": []
+          }
+        ],
+        testAds: {
+          img_url: "https://jfb-public-images.oss-cn-qingdao.aliyuncs.com/admin-upload/202106160938501771.jpg",
+          name: "清凉一夏",
+          redirect_url: "https://store.jufubao.cn/pages/productList/productList?type=2951&topId=2945",
+        },
+        testSubList: [
+          {
+            "id": "4084",
+            "name": "\u203b\u6625\u8282\u793c\u54c1",
+            "top_id": "4015",
+            "image_url": "https:\/\/jfb-public-images.oss-cn-qingdao.aliyuncs.com\/admin-upload\/202102241113116442.jpg",
+            "sub": []
+          }, {
+            "id": "5142",
+            "name": "\u203b\u4e09\u516b\u8282\u793c\u54c1",
+            "top_id": "4015",
+            "image_url": "https:\/\/jfb-public-images.oss-cn-qingdao.aliyuncs.com\/admin-upload\/202102241103565571.jpg",
+            "sub": []
+          },
+          {
+            id: "4085",
+            image_url: "https://jfb-public-images.oss-cn-qingdao.aliyuncs.com/admin-upload/202102241108517040.jpg",
+            name: "※端午礼品",
+            sub: [],
+            top_id: "4015",
+          }
+        ],
+      }
+    },
+    created() {
+      this.getNavList();
+    },
+    methods: {
+      getNavID(item) {
+        return `xd-product-type__${item.id}`;
+      },
+
+      handleSelectNav(item){
+        if(this.selectNav.id === item.id) return;
+        this.selectNav = item;
+        setTimeout(()=>{
+          this.intoID = this.getNavID(item);
+          this.getSubNavList(this.selectNav);
+          this.getAdsList(this.selectNav)
+        }, 100)
+
+      },
+
+      getNavList(){
+        this.$emit('onNavList', (res)=>{
+          if(res === null) {
+            this.navList = this.$xdUniHelper.cloneDeep(this.testNavList);
+          }else{
+            this.navList = res;
+          }
+          if(this.navList.length > 0) {
+            this.selectNav = this.navList[this.defaultIndex];
+            setTimeout(() => {
+              this.intoID = this.getNavID(this.selectNav);
+              this.getSubNavList(this.selectNav);
+              this.getAdsList(this.selectNav);
+            }, 200)
+          }
+        })
+      },
+
+      getAdsList(item){
+        this.$emit('onAdsList', {item}, (res) => {
+          if (res === null) {
+            this.ads = this.$xdUniHelper.cloneDeep(this.testAds);
+          }
+          else {
+            if(!this.$xdUniHelper.isEmpty(res) && res['img_url']) {
+              this.ads = res;
+            }
+          }
+        })
+      },
+
+      getSubNavList(item){
+        this.$emit('onSubNavList', {item}, (res) => {
+          if (res === null) {
+            this.productTypeList = this.$xdUniHelper.cloneDeep(this.testSubList);
+          } else {
+            this.productTypeList = res;
+          }
+          this.productTypeListCount++;
+          console.log('getSubNavList', item, res, this.productTypeList);
+        });
+      },
+
+      toProductDetail(item){
+        this.$emit('onToDetail', item)
+      }
+    }
+  }
+</script>
+
+<style scoped lang="less">
+  .xd-product-type{
+    height: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+
+    &__left {
+      height: 100%;
+      width: unit(220,rpx);
+      background: #f8f8f8;
+      flex-shrink: 0;
+
+      &-scroll{
+        height: 100%;
+      }
+
+      &-item {
+        height: unit(110,rpx);
+        line-height: unit(110,rpx);
+        text-align: center;
+        font-size: @xd-font-size-base;
+
+        &.active {
+          background: #fff;
+          font-size: @xd-font-size-base + 2;
+          transition: font-size .5s;
+          font-weight: bold;
+        }
+      }
+    }
+
+    &__right {
+      height: 100%;
+      padding: unit(20,rpx);
+      box-sizing: border-box;
+      overflow-y: auto;
+      overflow-x: hidden;
+      flex: 1;
+      width: 0;
+      background: #fff;
+
+      &-ads {
+        width: 100%;
+        height: unit(200,rpx);
+
+        & > image {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      &-title {
+        height: unit(140,rpx);
+        line-height: unit(140,rpx);
+        text-align: center;
+        font-size: @xd-font-size-lg;
+      }
+
+      &-content {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        font-size: @xd-font-size-sm;
+        flex-wrap: wrap;
+      }
+
+      &-item {
+        margin:0 unit(20,rpx) unit(20, rpx) 0;
+        width: unit(150, rpx);
+
+        &:nth-child(3n) {
+          margin-right: 0;
+        }
+
+        & > view:first-child {
+          width: unit(150,rpx);
+          height: unit(150,rpx);
+          display: flex;
+          justify-content: center;
+          align-items: center;
+
+          & > image {
+            max-width: unit(150, rpx);
+            max-height: unit(150, rpx);
+          }
+        }
+
+        & > view:last-child {
+          .uni-max-cut(1, 40);
+          line-height: unit(40,rpx);
+          text-align: center;
+          margin-top: unit(10,rpx);
+        }
+      }
+    }
+  }
+</style>