gx

queenwuli

2021-01-09 79f11f34546a394ab1c16ba427c31e9b59d05523

 hive-app/pages/workbench/selectProduct/index.vue

@@ -4,13 +4,19 @@
      <search-bar @confirm="search" placeholder="商品名称、编号、拼音" class="search-bar"></search-bar>
      <view class="list">
         <scroll-view class="list-left" scroll-y="true">
            <view class="list-left-row" 
               v-for="(item,index) in goodsTypeList" 
               v-if="item.parentId===0"
               :class="index==selectIndex?'active':''"
               @click="changeGoodsType(item.id, index)">
                  <text>{{item.name}}</text>
            </view>
            <uni-collapse accordion="true" @change="toggleCollapse">
                <uni-collapse-item :showAnimation="true" :title="item.name" class="list-left-row"
                  v-if="item.parentId===0" v-for="item in goodsTypeList">
                    <view class="list-row-wrap">
                     <view class="list-row" :class="op.id==cateId?'blue':''"
                        v-for="op in goodsTypeList" 
                        v-if="op.parentId===item.id" 
                        @click="changeGoodsType(op.id)">
                         {{op.name}}
                     </view>
                  </view>
                </uni-collapse-item>
            </uni-collapse>
         </scroll-view>
         <scroll-view class="list-right" scroll-y="true">
            <navigator :url="'../productDetail/index?goodsType='+item.goodsType+'&id='+item.id" hover-class="none" v-for="item in goodsList">
@@ -50,10 +56,14 @@
</template>

<script>
   import uniCollapse from '../../../components/uni-collapse/uni-collapse.vue'
   import uniCollapseItem from '../../../components/uni-collapse-item/uni-collapse-item.vue'
   import searchBar from '../../../components/searchBar/index.vue';
   import shoppingCart from './shoppingCart.vue'
   export default {
      components:{
         uniCollapse,
         uniCollapseItem,
         searchBar,
         shoppingCart
      },
@@ -62,7 +72,6 @@
            id: '',
            goodsTypeList: [], 
            goodsList: [],
            selectIndex: 0,
            cateId: null,//当前产品类别id
            selectItems: [],
            queryKey: ''
@@ -98,7 +107,7 @@
      },
      methods:{
         openShoppingCart(){
            this.$refs.shopCart.show()
            this.$refs.shopCart.toggle()
         },
         loadGoodsTypeList(){
            this.$httpUtils.request('/api/order/findShoppingGoodsType').then((res) => {
@@ -131,9 +140,30 @@
            this.queryKey = val;
            this.loadGoodsList();
         },
         getParentId(){
            let arr = this.goodsTypeList.filter((item) => {
               return item.id===this.cateId
            })
            return arr.length?arr[0].parentId:'';
         },
         // 打开关闭面板
         toggleCollapse(arr){
            if(!arr.length){
               let parentId = this.getParentId();
               if(parentId){
                  this.changeGoodsType();
               }
               return;
            }
            let index = arr[0];
            let result = this.goodsTypeList.filter((item) => {
               return item.parentId===0
            })
            this.changeGoodsType(result[index].id);
            console.log(result)
         },
         // 切换商品类型
         changeGoodsType(id, index){
            this.selectIndex = index;
         changeGoodsType(id){
            this.cateId = id;
            this.loadGoodsList();
         },
@@ -194,7 +224,7 @@
      overflow: hidden;
   }
   .list-left{
      width: 170rpx;
      width: 200rpx;
      background: #F6F6F8;
      border-radius: 4px;
   }
@@ -202,13 +232,25 @@
      flex: 1;
   }
   .list-left-row{
      padding: 10px;
      color: #8c9fad;
      font-size: 13px;
      border-bottom: 0;
   }
   .list-left-row.active{
      background: #FFFFFF;
      color: #000000;
   .uni-collapse{
      background: transparent;
   }
	
   .uni-collapse-cell__title:active, .uni-collapse-cell--hover, .uni-collapse-cell--open, .uni-collapse-cell--disabled{
      background-color: #FFFFFF!important;
   }
	
   .list-row-wrap{
      padding: 0 15px;
      margin-top: -8px;
   }
   .list-row{
      font-size: 13px;
      margin: 8px 0;
   }
   .list-right-row{
      display: flex;