CommunityApp/pagesM/pages/category.vue

<template>
  <view style="height:100vh;overflow: hidden;background-color: #FFFFFF;">
    <view class="head">
      <view class="search" @tap="tapSearch">
        <image class="search_icon" src="http://139.9.103.171:1888/img/image/search_icon.png"></image>
        <input class="search_input" placeholder="请输入搜索的商品" placeholder-style="color:#ccc;" disabled />
      </view>
	  <ScrollMenu></ScrollMenu>
    </view>
    <view class="category">
      <scroll-view scroll-y class="left_scroll_view" :style="calcLeftHeight" show-scrollbar="false">
        <view :class="['tab-item',index==current?'active':'']" v-for="(item,index) in tabList" :key="index" @tap="tapTabItem(index)" style="display: flex;justify-content: center;align-items: center;">
			<view v-if="index==0||index==1||index==2" style="margin-right: 5upx;width:24upx;height: 24upx;font-size: 18upx;color: #fff;text-align: center;line-height: 24upx;border-radius: 4upx;background-color: #DB4444;">荐</view>
			<view>{{item.name}}</view>
		</view>
        <view class="seize"></view>
      </scroll-view>
        <view style="width: 100%;">
			
			 <DtCateGoryGoodsListNew ref="goodList" :adsList="adsList" :menuList="childrenCategorys"></DtCateGoryGoodsListNew>
          <!-- <DtCateGorySeries :dataList="childrenCategorys" @tapitem="onTapItem"/> -->
        </view>
      <!-- <view class="right_box" :style="calcLeftHeight">
        <view class="top" v-if="current==0 ||current==1">
          <view class="tip">
            <view>促销商品不享受现金券以外其他任何优惠！</view>
          </view>
          <view class="condition">
            <view class="item">
              <view>销量</view>
            </view>
            <view class="item">
              <view>价格</view>
            </view>
            <view class="item" @tap="switchShowStyle">
              <view>{{showStyle?'大图':'列表'}}</view>
            </view>
          </view>
        </view>
        <scroll-view scroll-y class="right_scroll_view" :style="calcRightHeight" show-scrollbar="false">
          <view class="center">
            <DtCateGoryGoodsList :showStyle="showStyle" v-if="current==0 || current==1" />
            <DtCateGorySeries v-else />
          </view>
        </scroll-view>
      </view> -->
    </view>
  </view>
</template>
<script>
import ScrollMenu from "../comps/scroll_menu.vue"
import DtCateGoryGoodsList from '../comps/dt_category_goods_list'
import DtCateGorySeries from '../comps/dt_category_series'
import DtCateGoryGoodsListNew from '../comps/dt_category_goods_list_new.vue'
export default {
  components: {
	  ScrollMenu,
    DtCateGoryGoodsList,
    DtCateGorySeries,
	DtCateGoryGoodsListNew
  },
  data() {
    return {
      winLeftHeight: 0,
      winRightHeight: 0,
      current: 0,
      tabList: [],
      showStyle: true,
      childrenCategorys: [],
	  adsList:[],
	  adsobj:null,
    }
  },
  computed: {
    calcLeftHeight() {
      return "height:" + this.winLeftHeight + "px;";
    },
    calcRightHeight() {
      return "height:" + this.winLeftHeight + "px;";
    }
  },
  onLoad() {
  	wx.showShareMenu({
  	  withShareTicket: true
  	})
  },
  onShareAppMessage(res) {
  		let pages = getCurrentPages(); //获取加载的页面
  		let currentPage = pages[pages.length - 1]; //获取当前页面的对象
  		let inviteCode = null;
  		let resp = this.$auth.getMemberInfo();
  		if(this.$auth.isPromoter(true)){
  			inviteCode = this.$auth.getMemberId();
  		}
  		let path = `/pages/index/index?type=share&path=${currentPage.route}&inviteCode=${inviteCode}`;
  		console.error('path = ' + path);
  		return {
  			path: path,
  			success(res) {
  				console.log('转发成功');
  			},
  			fail(res) {
  				console.log('转发失败');
  			}
  		};
  },
  methods: {
	  
    onTapItem({item,index}){
      console.log(75,item,index)
      let params=[{
        k: 'productCategory.id',
        t: 1,
        v: item.id
      }]
      uni.navigateTo({
        url: "/pagesM/pages/goods_list?params="+JSON.stringify(params)
      })
    },
    autoHeight() {
      let res = uni.getSystemInfoSync();
      let clientHeight = res.windowHeight;
      let clientWidth = res.windowWidth;
      let upxR = 750 / clientWidth;
      let left = clientHeight * upxR - 105;
      let leftHeight = uni.upx2px(left);
      let right = clientHeight * upxR - 215;
      let rightHeight = uni.upx2px(right)
      this.winLeftHeight = leftHeight;
      this.winRightHeight = rightHeight;
    },

    tapSearch(){
      uni.navigateTo({
        url:'/pagesM/pages/search'
      })
    },
    
    tapTabItem(index) {
      if(this.current == index) return 
      this.current = index;
      if(this.tabList[index] && this.tabList[index].childrens && this.tabList[index].childrens.children){
        let list = this.tabList[index].childrens.children
        this.childrenCategorys = Array.isArray(list) ? list : [];
		this.$refs.goodList.tapActive(0,this.childrenCategorys[0]);
      }
      // this.getProductChildrenCategorys();
	  this.getAdList(index)
	 
    },
	getAdList(index){
		if(this.adsobj==null||this.adsobj=="{}"){return}
		this.adsList.length = 0;
		Object.keys(this.adsobj).forEach((key)=>{
		  if(this.tabList[index].id==key){
			  this.adsList = this.adsobj[key].slice(0)
		  }
		})
		 this.$refs.goodList.getswipHeight(this.adsList)
	},
    // switchShowStyle() {
    //   this.showStyle = !this.showStyle
    // },
    

    // 查找子分类
    // async getProductChildrenCategorys(id) {
    //   let data = {};
    //   data.id = this.tabList[this.current].id;
    //   let childrenCategorys = await this.$api.getProductChildrenCategorys(data);
    //   this.childrenCategorys = childrenCategorys;
    // },
    //查找店铺商品分类
    // async getStoreProductCategorys() {
    //   let productCategoryList = await this.$api.getStoreProductCategorys();
    //   this.tabList = productCategoryList;
    //   this.getProductChildrenCategorys();
    // },
    async queryDataList() {
      let resp = await this.$api.getProductCategorys({
        _isShowLoading:true
      });
	  resp.map((item,index)=>{
	  	let allObj = {
	  		icon:'',
	  		id:item.id,
	  		name:item.name
	  	}
	  	resp[index].childrens.children.unshift(allObj)
	  })
      this.tabList = resp;
      if(resp[0] && resp[0].childrens && resp[0].childrens.children){
        let list = resp[0].childrens.children
        this.childrenCategorys = Array.isArray(list) ? list : []
      }
	  this.$refs.goodList.tapActive(0,this.childrenCategorys[0]);
    },
	async queryAdList() {
	  let resp = await this.$api.getProductCategorysAd({
	    _isShowLoading:true
	  });
	  this.adsobj = resp
	},
    onLoadPage(options) {
	  // wx.hideShareMenu();
      this.autoHeight();
      // this.getStoreProductCategorys();
	  let list = [];
	  let queryDataList = this.queryDataList();
	  let queryAdList = this.queryAdList();
	  list.push(queryDataList);
      list.push(queryAdList);
	  let that = this;
	  Promise.all(list).then(()=>{
		  this.getAdList(0);
		  this.categoryPosition();//第一次加载需在列表数据出来之后执行
	  }).catch((err)=>{
		  console.log(err)
	  })
    },
	categoryPosition(){
		let id = uni.getStorageSync("categoryId");
		if(this.tabList.length>0&&id){
			  this.tabList.forEach((item,index)=>{
				  if(item.id==id){
					this.tapTabItem(index)
					return;
				  }
			  })
			  uni.removeStorage({
				key: 'categoryId'
			  })
		}
		
	}
  },
  onShow() {
	  this.categoryPosition()
  }
}
</script>

<style lang="scss" scoped>
.head {
  padding: 20upx 30upx 5upx;
  background-color: $dt-color-primary;
  .search {
    height: 60upx;
    border-radius: 25px;
    display: flex;
    flex-direction: row;
    align-items: center;
    background: #fff;
    font-size: 30upx;
    .search_icon {
      width: 26upx;
      height: 26upx;
      padding: 20upx;
    }
    .search_input {
      flex: 1;
      height: 60upx;
      padding-right: 20upx;
    }
  }
}
.category {
  display: flex;
  flex-direction: row;
  .left_scroll_view {
    width: 200upx;
    text-align: center;
    font-size: 24upx;
	background-color: $dt-bg-color-grey;
    .tab-item {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 100%;
      padding: 20upx 0;
      height: 50upx;
      line-height: 50upx;
      display: inline-block;
      color: #3A3A3A;
	  font-weight: bold;
      text-align: center;
    }
    .tab-item.active {
      color: $dt-color-primary;
      position: relative;
	  background-color: #fff;
    }

    .tab-item.active:after {
      content: "";
      display: block;
      height: 50upx;
      width: 8upx;
      background: $dt-color-primary;
      position: absolute;
      top: 20upx;
      right: 1upx;
      border-radius: 16upx;
    }
  }
  .right_box {
    width: 600upx;
    .top {
      position: relative;
      top: 0;
      left: 0;
      .tip {
        background: #f2f2f2;
        display: flex;
        flex-direction: row;
        font-size: 20upx;
        align-items: center;
        color: #666666;
        height: 50upx;
      }
      .condition {
        display: flex;
        flex-direction: row;
        align-items: center;
        height: 60upx;
        justify-content: space-around;
        border-bottom: 1upx solid rgb(238, 238, 238);
        .item {
          font-size: 24upx;
          color: #333333;
          display: flex;
          flex-direction: row;
          align-items: center;
          image {
            width: 20upx;
            height: 20upx;
          }
        }
      }
    }
    .right_scroll_view {
      width: 100%;
    }
  }
}

.seize {
  // padding: 20upx 0;
  height: 140upx;
}

</style>