gx

queenwuli

2021-01-28 b83ba3cc4687f21d744e9866e10e30e91229e8a4

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

@@ -4,15 +4,21 @@
      <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" :open="item.id==cateId" :title="item.name" :isShowIcon="isShowIcon(item)" class="list-left-row"
                  v-if="item.parentId===0" v-for="(item, index) 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">
         <scroll-view class="list-right" scroll-y="true" @scrolltolower="scrolltolower()">
            <navigator :url="'../productDetail/index?goodsType='+item.goodsType+'&id='+item.id" hover-class="none" v-for="item in goodsList">
               <view class="list-right-row">
                  <image class="product-img" :src="item.img?item.img:'../../../static/images/no-img.png'"></image>
@@ -33,6 +39,10 @@
                  </view>
               </view>
            </navigator>
            <view v-if="goodsList.length">
               <uni-load-more :status="loadStatus" color="#a5abaf"></uni-load-more>
            </view>
            <no-record :isShow="!goodsList.length" txt="暂无产品/项目"></no-record>
         </scroll-view>
      </view>
      <view class="footer">
@@ -45,27 +55,35 @@
         </view>
         <button class="blue-btn btn mr-0" @click="submit" :disabled="isEnableSumbit">提交订单</button>
      </view>
      <shopping-cart ref="shopCart" :list="selectItems" @addGoods="addGoods" @decreaseGoods="decreaseGoods" @reset="clearShopCart"></shopping-cart>
      <shopping-cart ref="shopCart" :list="selectItems" @freeChange="freeChange" @addGoods="addGoods" @decreaseGoods="decreaseGoods" @reset="clearShopCart"></shopping-cart>
   </view>
</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'
   import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
   export default {
      components:{
         uniCollapse,
         uniCollapseItem,
         searchBar,
         shoppingCart
         shoppingCart,
         uniLoadMore
      },
      data(){
         return{
            id: '',
            tabIndex: '0',
            goodsTypeList: [], 
            goodsList: [],
            selectIndex: 0,
            cateId: null,//当前产品类别id
            selectItems: [],
            queryKey: ''
            queryKey: '',
            loadStatus: 'more',
            pageNum: 1
         }
      },
      computed:{
@@ -81,7 +99,9 @@
         totalAmount(){
            let amount = 0;
            this.selectItems.forEach((item) => {
               amount += item.price * item.num;
               if(!item.isFree){
                  amount += item.price * item.num;
               }
            })
            return amount;
         },
@@ -96,9 +116,35 @@
         });
         this.loadGoodsTypeList()
      },
      onPullDownRefresh(){
         this.reloadData();
         let timer = setTimeout(function () {
            uni.stopPullDownRefresh();
            clearTimeout(timer);
            timer = null;
         }, 800);
      },
      methods:{
         reloadData(){
            this.goodsList = [];
            this.pageNum = 1;
            this.loadStatus = 'more';
            this.loadGoodsList();
         },
         scrolltolower(){
            this.loadGoodsList()
         },
         isShowIcon(item){
            let count = 0;
            this.goodsTypeList.forEach((op) => {
               if(op.parentId==item.id){
                  count ++ 
               }
            });
            return count?true:false;
         },
         openShoppingCart(){
            this.$refs.shopCart.show()
            this.$refs.shopCart.toggle()
         },
         loadGoodsTypeList(){
            this.$httpUtils.request('/api/order/findShoppingGoodsType').then((res) => {
@@ -113,15 +159,32 @@
            })
         },
         loadGoodsList(){
            if(this.loadStatus!=='more'){
               return;
            }
            this.$httpUtils.request('/api/order/findShoppingGoods',{
               cateId: this.cateId,
               pageNum: 1,
               pageSize: 100,
               pageNum: this.pageNum,
               pageSize: 10,
               queryKey: this.queryKey
            },'POST').then((res) => {
               if(res.status == 200){
                  this.goodsList = res.rows.map((item) => {
                  let result = res.rows.map((item) => {
                     return Object.assign(item, {num: 0});
                  });
                  if(result.length < 10){
                     this.loadStatus = 'noMore';
                  } else {
                     this.pageNum ++ ;
                     this.loadStatus = 'more';
                  }
                  this.goodsList = this.goodsList.concat(result);
                  this.goodsList.forEach((item) => {
                     this.selectItems.forEach((op) => {
                        if(item.id == op.id){
                           item.num = op.num;
                        }
                     })
                  });
               }
            })
@@ -129,32 +192,89 @@
         // 搜索
         search(val){
            this.queryKey = val;
            this.loadGoodsList();
            this.reloadData();
         },
         getParentId(){
            let arr = this.goodsTypeList.filter((item) => {
               return item.id===this.cateId
            })
            return arr.length?arr[0].parentId:'';
         },
         toggleAll(arr){
            this.changeGoodsType('');
         },
         // 打开关闭面板
         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);
         },
         // 切换商品类型
         changeGoodsType(id, index){
            this.selectIndex = index;
         changeGoodsType(id){
            this.cateId = id;
            this.loadGoodsList();
            this.reloadData();
         },
         freeChange(data){
            data.goods.isFree = !data.goods.isFree;
            this.$set(this.selectItems, data.index, data.goods)
         },
         // 添加商品
         addGoods(goods){
            let index = this.selectItems.indexOf(goods);
            goods.num++;
            // 该商品若已在购物车，则购物车数量上+1,否则加入购物车
            if(index > -1){
               this.selectItems[index].num = goods.num;
            }else{
               this.selectItems.push(goods);
            goods.num ++ 
            // 所有商品列表的下标
            let ids = this.goodsList.map((item) => {
               return item.id;
            })
            let index = ids.indexOf(goods.id);
            if(index>-1){
               this.goodsList[index].num = goods.num;
            }
				
            // 选中商品的下标
            let selectIds = this.selectItems.map((item) => {
               return item.id;
            })
            let selectIndex = selectIds.indexOf(goods.id);
				
            // 该商品若已在购物车，则购物车数量上+1,否则加入购物车
            if(selectIndex > -1){
               this.selectItems[selectIndex].num = goods.num;
            }else{
               this.selectItems.push(Object.assign(goods, {isFree: false}));
            }
				
         },
         decreaseGoods(goods){
            let index = this.selectItems.indexOf(goods);
            goods.num = goods.num <= 0 ? 0 : goods.num - 1;
            // 所有商品列表的下标
            let ids = this.goodsList.map((item) => {
               return item.id;
            })
            let index = ids.indexOf(goods.id);
            if(index>-1){
               this.goodsList[index].num = goods.num;
            }
				
            // 选中商品的下标
            let selectIds = this.selectItems.map((item) => {
               return item.id;
            })
            let selectIndex = selectIds.indexOf(goods.id);
				
            // 该商品若已在购物车，则购物车数量上-1,否则从购物车删除
            if(index > -1 && this.selectItems[index].num >= 1){
               this.selectItems[index].num = goods.num;
            if(goods.num >= 1){
               this.selectItems[selectIndex].num = goods.num;
            }else{
               this.selectItems.splice(index, 1);
               this.selectItems.splice(selectIndex, 1);
            }
         },
         clearShopCart(){
@@ -181,7 +301,7 @@
      display: flex;
      flex-direction: column;
      height: 100%;
      padding: 10px 0 0;
      padding-top: 10px;
      box-sizing: border-box;
   }
   .search-bar{
@@ -194,7 +314,7 @@
      overflow: hidden;
   }
   .list-left{
      width: 170rpx;
      width: 200rpx;
      background: #F6F6F8;
      border-radius: 4px;
   }
@@ -202,13 +322,27 @@
      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-color: #F6F6F8!important;
   }
   .uni-collapse-cell{
      border-color: #F6F6F8!important;
   }
   .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;
@@ -216,9 +350,12 @@
      padding: 10px;
      margin: 0 10px 10px;
      border: 1px solid #EDEAF4;
      box-shadow:0 6px 6px rgba(237,234,244,0.5);
      box-shadow:0 6px 6px rgba(237,234,244,0.4);
      border-radius: 4px;
      font-size: 13px;
   }
   .list-row .list-right-row:nth-last-of-type(1){
      margin-bottom: 0;
   }
   .list-right-row .product-img{
      width: 66px;
@@ -236,8 +373,11 @@
      display: flex;
      justify-content: space-between;
      background: #FFFFFF;
      padding: 10px 10px;
      box-shadow: 0 6px 100px rgba(237,234,244,1);
      padding: 10px;
      padding-bottom: 10px;
      padding-bottom: calc(10px + constant(safe-area-inset-bottom));  
      padding-bottom: calc(10px + env(safe-area-inset-bottom)); 
      box-shadow: 0 -6px 6px rgba(237,234,244,0.2);
   }
   .footer .icon-car-wrap{
      position: relative;
@@ -261,8 +401,8 @@
   }
   .footer .btn{
      border-radius: 20px;
      line-height: 34px;
      padding: 0 24px;
      line-height: 36px;
      padding: 0 26px;
      font-size: 14px;
   }
</style>