yicangzongtai_app_240321/pages/index/list.vue

<template>
  <view class="container">
    <navbar :config="config" backColor="#666666"></navbar>
    <view class="topsearch u-p30 u-flex-center-sb" style="paddingTop:20rpx" @click="gosearch()">
      <view class="u-flex1 u-flex-center leftbox">
        <text class="iconfont u-font30 u-666 u-ml30">&#xe7a6;</text>
        <text class="u-font22 u-CCC u-ml20">请输入搜索关键字</text>
        <text class="search-btn">搜索</text>
      </view>
      <!-- <text class="u-font28 u-1A1A1A u-ml30">搜索</text> -->
    </view>
    <view class="" style="height: 13rpx;background-color: rgba(230, 230, 230, 0.4);"></view>
    <!-- :style="{ top: top + 'px' }" -->
    <view class="goodsbox" @touchmove.stop.prevent="moveHandle">
      <scroll-view scroll-y="true" class="leftList">
        <view class="row u-font24 u-text1" v-for="(item, index) in categoryList" :key="item.id"
          :class="[index === showCategoryIndex ? 'on' : '']" @click="showCategory(index,item.id)">
          {{item.name}}
        </view>
      </scroll-view>
      <view class="rightlist">
        <view class="secoundList u-flex-center" v-if="categoryTwo.length >0">
          <scroll-view scroll-x="true" class="list-cell ">
            <view class="sList u-mr45" v-for="(item, index) in categoryTwo" :key="item.id"
              @click="twoChildren(index,item.id)" :class="[index == twoIndex ? 'on' : '']">{{item.name}}
            </view>
          </scroll-view>
        </view>
        <div style="height: 40rpx;" v-if="categoryTwo.length >0"></div>
        <scroll-view scroll-y="true" class="scorll" :class="{Listbox, istop: categoryTwo.length >0}"
          refresher-enabled="true" :refresher-triggered="triggered" @refresherrefresh="onRefresh"
          @scrolltolower="tolower">
          <view class="u-plr30" style="paddingBottom:240rpx">
            <view class="itemList u-flex-center-sb" style="align-items: flex-start" v-for="(item,index) in goodsList"
              :key="item.id">
              <image class="u-goods160" :src="item.cover" mode=""
                @click="goProductDetails(item.id,item.authorize_shop_id)"></image>
              <view class="u-flex-column-start u-ml30 u-flex1 goods-info"
                @click="goProductDetails(item.id,item.authorize_shop_id)">
                <view class="u-text2" style="font-size: 28rpx;">{{item.title}}</view>
                <view class="u-font32 u-bold viewWidth u-FF0000" style="margin-top: 34rpx;">
                  <rich-text :nodes="$mUtil.priceBigSmall(item.min_sale_price)"></rich-text>
                </view>
              </view>
              <!-- <view @click="addCart(item.id,item.shop_id)" class="addShopCard bgc iconfont2">&#xe600;</view> -->
            </view>
            <nodata v-if="noData" :config="{top:15,content:'暂无商品~'}"></nodata>
            <loadMore v-if="goodsList.length>0" :status="status"></loadMore>
          </view>
        </scroll-view>
      </view>
    </view>

    <!--规格-->
    <uniPopup type="bottom" ref="specOpen">
      <view class="u-bg-fff spec">
        <view class="u-plr30 flex-sb u-border pb30">
          <view class="u-flex-center">
            <image class="u-goods200" :src="choseConfig.cover?choseConfig.cover:cover"></image>
            <view class="u-ml20">
              <view class="u-999 u-font24 u-flex-center">
                <view class="u-FF0000 u-font36">
                  <rich-text :nodes="$mUtil.priceBigSmall(choseConfig.sale_price?choseConfig.sale_price:moPrice)">
                  </rich-text>
                </view>
                <text class="u-del u-ml15">￥{{choseConfig.market_price?choseConfig.market_price:moDelPrice}}
                </text>
                <!-- <text class="u-ml10">7.5折</text> -->
              </view>
              <view class="u-font22 u-999 u-mt5">库存 {{stock}} 件</view>
              <view class="u-1A1A1A u-mt25">{{choseConfig.sku_set_name?choseConfig.sku_set_name:'请选择'}}
              </view>
            </view>
          </view>
          <view class="iconfont u-999 closeIcon" @click="specOpenClose">&#xe603;</view>
        </view>

        <view>
          <view class="overHeight">
            <view class="u-mt30" v-for="(item,index) in skuTab" :key="item.head.id">
              <view class="u-plr30">{{item.head.name}}</view>
              <view class="u-mt20 u-border pb30">
                <view class="u-plr30 u-flex u-flex-warp">
                  <view class="spec-item " :class="childrenItem.flag?'activeColor':''"
                    @click="chonseSku(index,childrenItem.id)" v-for="childrenItem in item.values"
                    :key="childrenItem.id">{{childrenItem.name}}</view>
                </view>
              </view>
            </view>
          </view>


          <view class="u-plr30 u-mt30">
            <view class="u-flex-center-sb">
              <view>购买数量</view>
              <view class="u-flex-center">
                <view class="iconfont minus" @click="resNum">&#xe60b;</view>
                <view class="num">{{add_num}}</view>
                <view class="iconfont plus-sign " @click="addNum">&#xe81a;</view>
              </view>
            </view>
            <view class="specOpen-btn">
              <view>
                <button class="u-btn-two" @click="btnBuy()">加入购物车</button>
              </view>
            </view>
          </view>

        </view>
      </view>
    </uniPopup>
    <!--页面加载动画-->
    <ldLoading isFullScreen :active="loading"></ldLoading>
    
    <entrepreneurship-zone-tabbar :current="1"></entrepreneurship-zone-tabbar>
  </view>
</template>

<script>
  import {
    mapGetters,
    mapMutations
  } from 'vuex';
  let app = getApp()
  import uniPopup from "../../components/uni-popup/uni-popup.vue"
  export default {
    components: {
      uniPopup
    },
    data() {
      return {
        showHidden: false,
        twoIndex: null,
        price: 100,
        Listbox: false,
        categoryTwo: [],
        goodsList: [],
        showCategoryIndex: 0,
        categoryList: [

        ],
        config: {
          back: true, //false是tolbar页面 是则不写
          title: '商品分类',
          color: '#1A1A1A',
          //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
          backgroundColor: [1, '#fff'],
          // statusBarFontColor: '#ffffff'
        },
        loading: true,
        checkId: null,
        status: 'more', //more|loading|noMore
        triggered: false,
        skuTab: [], //sku二位数组
        goodsSkuList: [], //sku组合值
        choseConfig: {},
        moPrice: '',
        moDelPrice: '',
        noData: false,
        cover: '',
        add_num: 1,
        hasId: '',
        stock: 0,
        goods_id: null,
        limit_buy_num: 0,
        shopid: '',
        params: {
          category_id: null,
          limit: 10,
          page: 1
        },
        top: 0,
        cateId: 0 // 一级分类id
      }
    },
    onLoad() {
      this.top = app.globalData.barHeight + 110
    },
    onShow() {
      this.cateId = this.$store.state.cateId;
      // this.cateId = 108;
      if (this.cateId != 0) {
        let index = this.categoryList.findIndex(item => {
          if (item.id == this.cateId) return true
          // if(item.children&&item.children.length>0){
          // 	let arr=item.children;
          // 	for(let i=0; i<arr.length;i++){
          // 		if(arr[i].id==this.cateId){
          // 			this.twoIndex=i
          // 			return true
          // 		}
          // 	}
          // }
        })
        this.showCategoryIndex = index
      } else {
        this.showCategoryIndex = 0
      }
      this.rest()
      this.getAllNav();
    },
    onPullDownRefresh() {
      this.cateId = this.$store.state.cateId;
      if (this.cateId != 0) {
        let index = this.categoryList.findIndex(item => {
          return item.id == this.cateId
        })
        this.showCategoryIndex = index
      } else {
        this.showCategoryIndex = 0
      }
      this.rest()
      this.getAllNav();
      uni.stopPullDownRefresh();
    },
    methods: {
      goProductDetails(id, shopid) {
        // debugger
        uni.navigateTo({
          url: "/pages/product/goods/goods?id=" + id + "&shopid=" + shopid
        })
      },
      // 减数量
      resNum() {
        if (this.add_num > 1) {
          this.add_num--
        }
      },
      //加数量
      addNum() {
        this.add_num++
      },
      chonseSku(index, id) {
        this.skuTab[index].values.forEach(res => {
          res.flag = false
          if (res.id == id) {
            res.flag = true
          }
        })
        let choseId = []
        this.skuTab.forEach(res => {
          res.values.forEach(Key => {
            if (Key.flag) {
              choseId.push(Key.id)
            }
          })
        })
        let totalId = choseId.join('|')
        this.hasId = totalId
        this.goodsSkuList.forEach(res => {
          if (res.sku_hash_code == totalId) {
            this.choseConfig = res
            this.stock = res.able_stock
            this.able_stock = res.able_stock
          }
        })

      },
      //加入购物车
      btnBuy() {
        let data = {
          goods_id: this.goods_id,
          sku_hash_code: this.hasId,
          add_num: this.add_num,
          source_shop_id: this.shopid
        }

        // 判断是否选中sku
        if (this.skuTab.length > 0 && this.hasId == "") {
          this.$mUtil.toast('请选中sku')
          return false
        }

        // 判断限购
        if (this.add_num > this.limit_buy_num && this.limit_buy_num != 0) {
          this.$mUtil.toast('商品限购' + this.limit_buy_num + '件')
          return false
        }
        //判断库存
        if (this.goodsSkuList.length > 0 && this.able_stock < this.add_num) {
          this.$mUtil.toast('商品库存只有' + this.able_stock + '件')
          return false
        }
        this.$http.post(`/cart/add`, data)
          .then(res => {

            if (res && res.code == 200) {
              this.$mUtil.toast('添加成功')
              this.$refs.specOpen.close()
              this.choseConfig = {}
              this.add_num = 1
            }
          })
      },
      addCart(id, shopid) {
        this.shopid = shopid
        if (id) {
          this.checkSku(id, shopid)
        }
        // if(flag){
        // 	this.$mUtil.toast('代理商品不能加入购物车')
        // }else{
        // 	//加入购物车
        // 	if(id){
        // 		this.checkSku(id)
        // 	}
        // }
      },
      //关闭规格弹窗
      specOpenClose() {
        this.choseConfig = {}
        this.add_num = 1
        this.$refs.specOpen.close()
      },
      rest() {
        this.noData = false
        this.params.page = 1
        this.goodsList = []
      },
      onRefresh(e) {
        this.triggered = true
        this.rest()
        this.getShopList()

      },
      //滚动
      tolower(e) {
        this.status = 'loading'
        this.params.page++
        this.getShopList()
      },
      //查询sku
      checkSku(id, shopid) {
        this.$http.get(`/goods/skus/${shopid}/${id}`)
          .then(res => {
            if (res && res.code == 200) {
              res.data.goods.sku_table.forEach(keys => {
                keys.values.forEach(val => {
                  val.flag = false
                })
              })
              this.limit_buy_num = res.data.goods.limit_buy_num
              this.goods_id = res.data.goods.id
              this.skuTab = res.data.goods.sku_table
              this.goodsSkuList = res.data.goods_sku_list
              this.moPrice = res.data.goods.min_sale_price
              this.moDelPrice = res.data.goods.max_sale_price
              this.cover = res.data.goods.cover
              this.stock = res.data.total_stock
              if (res.data.goods.sku_table.length > 0) {
                if (res.data.goods_auth) {
                  if (res.data.goods_auth.added) {
                    this.$refs.specOpen.open()
                  } else {
                    this.$mUtil.toast('该商品已经下架')
                  }
                } else {
                  this.$mUtil.toast('没有经营权限')
                }

              } else {
                this.hasId = ''
                this.btnBuy()
              }
            }
          })
      },
      getShopList() {
        this.$http.get(`/goods/all/pages`, this.params)
          .then(res => {

            this.loading = false;
            this.triggered = false
            if (res && res.code == 200) {
              this.goodsList = this.goodsList.concat(res.page.list)
              if (this.goodsList.length == 0) {
                this.noData = true
              } else {
                this.noData = false
              }

              if (res.page.totalPage <= res.page.currPage) {
                this.status = 'noMore'
              } else {
                this.status = 'more'
              }
            }
          })
      },
      getAllNav() {

        //let shop = uni.getStorageSync('shop')
        //let shopid = shop.id ? shop.id : ''
        this.loading = false;
        this.$http.get(`/category/all`)
          .then(res => {
            if (res && res.code == 200) {
              this.categoryList = res.list
              if (this.cateId != 0) {
                console.log(this.categoryList)
                let index = this.categoryList.findIndex(item => {
                  if (item.id == this.cateId) return true
                  if (item.children && item.children.length > 0) {
                    let arr = item.children;
                    for (let i = 0; i < arr.length; i++) {
                      if (arr[i].id == this.cateId) {
                        this.twoIndex = i
                        return true
                      }
                    }
                  }
                })
                if (index != -1) {
                  this.showCategoryIndex = index
                  this.params.category_id = this.cateId
                  this.categoryTwo = res.list[index].children
                }
              } else {
                this.params.category_id = this.params.category_id || res.list[0].id
                this.categoryTwo = res.list[0].children
              }




              if (res.list.length > 0) {
                this.checkId = res.list[0].id
              }

              // this.categoryTwo = this.categoryList[index].children
              this.getShopList()
            }
          })
      },
      moveHandle() {},
      //搜索页
      gosearch() {
        // uni.navigateTo({
        //   url: "../product/search/search?category_id=" + this.params.category_id
        // })
		uni.navigateTo({
		  url: '/pages/product/search/productList?category_id=' + this.params.category_id
		});
      },
      // 二级分类切换显示
      twoChildren(index, id) {
        console.log(index)
        this.twoIndex = index
        this.params.category_id = id
        this.rest()
        this.getShopList()
        console.log('category_id:' + this.params.category_id)
      },
      // 分类切换显示
      showCategory(index, id) {
        console.log(index, id, 222222)
        this.showCategoryIndex = index
        this.twoIndex = null
        this.params.category_id = id
        this.categoryTwo = this.categoryList[index].children
        this.rest()
        this.getShopList()
        if (this.cateId != 0) {
          this.$store.commit('changeCateId', 0)
        }
      },
    }
  }
</script>

<style lang="scss">
  .leftbox {
    height: 70rpx;
    line-height: 70rpx;
    background-color: rgba($color: #E6E6E6, $alpha: .4);
    border-radius: 35rpx;
    
    .search-btn {
      margin-left: auto;
      width: 124rpx;
      background: linear-gradient(98deg,#fa6339 5%, #fdae6a 94%);
      border-radius: 35rpx;
      text-align: center;
      line-height: 70rpx;
      color: #fff;
    }
  }

  .addShopCard {
    position: absolute;
    width: 54rpx;
    height: 54rpx;
    border-radius: 50%;

    color: #FFFFFF;
    line-height: 54rpx;
    text-align: center;
    font-size: 32rpx;
    right: 0;
    bottom: 30rpx;
  }

  .bgc {
    background-color: #0B844A;
  }

  .bga {
    background-color: #ccc;
  }

  .showHidden {
    position: absolute;
    bottom: 0;
    top: 92rpx;
    width: 570rpx;
    z-index: 2;
    background-color: rgba($color: #000000, $alpha: .5);

    .contCase {
      background-color: #fff;
      padding: 30rpx 0 30rpx 30rpx;

      .caseitem {
        background-color: #F5F5F5;
        border-radius: 46rpx;
        width: 145rpx;
        height: 68rpx;
        line-height: 68rpx;
        text-align: center;
        margin-right: 30rpx;
        margin-bottom: 30rpx;
        box-sizing: border-box;
      }

      .caseitem.active {
        background: #abc5b5;
        border: 2rpx solid #284534;
        color: #0B844A;

      }
    }
  }

  .goodsbox {
    width: 100%;
    height: calc(100% - 110rpx);
    background-color: #fff;
    display: flex;
    // margin-top: 30rpx;

    .leftList {
      background-color: rgba($color: #E6E6E6, $alpha: .4);
      width: 180rpx;
      // left: 0upx;

      .row {
        width: 176rpx;
        height: 100rpx;
        text-align: center;
        color: #808080;
        line-height: 100rpx;
        position: relative;
      }

      .row.on {
        background-color: #fff;
        color: #FA6137;
        font-size: 24rpx;
        font-weight: bold;
        border-radius: 0rpx 20rpx 20rpx 0rpx;
      }

      .row.on:after {
        width: 8rpx;
        height: 40rpx;
        background: linear-gradient(180deg,#fa6239, #feaf6b);
        position: absolute;
        left: 0;
        top: 50%;
        content: '';
        border-radius: 0 8rpx 8rpx 0;
        transform: translateY(-50%);
      }
    }

    .leftList,
    .rightlist {
      // position: absolute;
      // top: calc(260upx + var(--status-bar-height));
      // top: 260upx;
      // /*  #ifdef  APP-PLUS  */
      // top: calc(200upx + var(--status-bar-height));
      // /*  #endif  */
      // bottom: 0upx;
    }

    .rightlist {
      right: 0rpx;
      width: 570rpx;

      .Listbox {
        position: absolute;
        // top: 90rpx;
        bottom: 0upx;
        right: 0;

        .listcont {
          padding: 30rpx;
        }
      }

      .istop {
        top: 130rpx
      }

      .itemList {
        margin-top: 30rpx;
        position: relative;
        
        .goods-info {
          padding-bottom: 25rpx;
          border-bottom: 1px solid #E7E7E7;
        }
      }

      .itemList:first-child {
        // margin-top: 0;
      }

      .secoundList {
        width: 510rpx;
        left: 30rpx;
        position: relative;
        height: 90rpx;
        line-height: 90rpx;
        border-bottom: 1px solid #E7E7E7;

        .list-cell {
          white-space: nowrap;
          padding: 0 20rpx;
          box-sizing: border-box;
        }

        .sList {
          display: inline-block;
        }

        .sList.on {
          color: #FA6138;
          font-weight: bold;
        }

        .rightIcons {
          width: 45rpx;
          height: 90rpx;
          line-height: 90rpx;
          background-color: #fff;
          position: absolute;
          right: 0;
          text-align: right;
          top: 0rpx;

          .tes {
            display: block;
            transform: rotate(90deg);
          }
        }
      }
    }
  }

  //弹窗
  .spec {
    .pb30 {
      padding-bottom: 30rpx;
    }

    .closeIcon {
      position: absolute;
      right: 0;
      top: 30rpx;
    }

    border-radius: 18rpx 18rpx 0rpx 0rpx;
    padding-top: 30rpx;
    max-height: 900rpx;
    overflow-y: auto;

    .spec-item {
      background-color: #F6F6F6;
      border: 1px solid #F6F6F6;
      padding: 12rpx 30rpx;
      font-size: 24rpx;
      color: #1A1A1A;
      border-radius: 4px;
    }

    .activeColor {
      background-color: #E1E6E3;
      border: 1px solid #01321D;
      color: #01321D;
      border-radius: 4px;
    }

    .spec-item:not(:last-child) {
      margin-right: 24rpx;
    }



    //减号
    .minus {
      width: 50rpx;
      height: 50rpx;
      line-height: 50rpx;
      text-align: center;
      background: #dedede;
      border-radius: 8rpx 0rpx 0rpx 8rpx;
    }

    .num {
      width: 74rpx;
      height: 46rpx;
      line-height: 46rpx;
      text-align: center;
      border: 1px solid #dedede;
    }

    //加号
    .plus-sign {
      width: 50rpx;
      height: 50rpx;
      line-height: 50rpx;
      text-align: center;
      background: #dedede;
      border-radius: 0rpx 8rpx 8rpx 0rpx;
    }

    .specOpen-btn {
      margin-top: 68rpx;
      padding-bottom: 34rpx;

      button {
        background-color: #0B844A;
        color: #FFFFFF;
      }
    }


  }

  .scorll {
    height: calc(100vh - 210rpx - var(--status-bar-height));
  }
  .container{
	  height: calc(100vh - 110rpx);
	  overflow: hidden;
  }
</style>