系统优化

queenwuli

2021-01-13 6e54af776db885ad1a22ec582bdc97d7e1273c6c

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

@@ -1,93 +1,279 @@
<template>
   <!-- 当前客户 -->
   <view class="container">
      <!-- #ifndef H5 -->
      <view class="status_bar"></view>
      <!-- #endif -->
      <search-bar :placeholder="placeholder" class="ml-10 mr-10"></search-bar>
      <view class="list flex">
         <scroll-view class="list-left" scroll-y>
            <view v-for="(item,index) in list" class="list-left-row" @click="active(index)" :class="select==index?'active':''">
               <text class="font-14">{{item}}</text>
            </view>
      <search-bar @confirm="search" placeholder="商品名称、编号、拼音" class="search-bar"></search-bar>
      <view class="list">
         <scroll-view class="list-left" scroll-y="true">
            <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>
            <navigator url="../productDetail/index">
               <view class="flex align-center list-right-row">
                  <image class="product-img mr-5" mode="aspectFill" src="../../../static/images/product.jpg"></image>
                  <view>
                     <text class="flex justify-start font-12">肽妍氨基酸平衡基础洁面乳</text>
                     <text class="font-10 gray flex justify-start">物品描述</text>
                     <view class="flex justify-between align-center mt-15">
                        <text class="flex justify-start font-12 red mt-10">￥400.00</text>
                        <view class="flex align-center justify-end mt-10">
                           <text class="iconfont iconjian blue-outline-btn-circle mr-10"></text>
                           <text>1</text>
                           <text class="iconfont iconjia blue-btn-circle ml-10"></text>
         <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>
                  <view class="flex-1">
                     <text>{{item.name}}</text>
                     <view class="flex justify-between mt-15">
                        <text class="price">￥{{item.price}}</text>
                        <view class="right">
                           <template v-if="item.num">
                              <text class="iconfont iconjian blue-outline-btn-circle mr-10" 
                                 @click.stop="decreaseGoods(item)"></text>
                                 <text>{{item.num}}</text>
                           </template>
                           <text class="iconfont iconjia blue-btn-circle ml-10" 
                              @click.stop="addGoods(item)"></text>
                        </view>
                     </view>
                  </view>
               </view>
            </navigator>
            <view class="flex align-center list-right-row">
               <image class="product-img mr-5" mode="aspectFill" src="../../../static/images/product.jpg"></image>
               <view>
                  <text class="flex justify-start font-12">肽妍氨基酸平衡基础洁面乳</text>
                  <text class="font-10 gray flex justify-start">物品描述</text>
                  <view class="flex justify-between align-center mt-15">
                     <text class="flex justify-start font-12 red mt-10">￥400.00</text>
                     <view class="flex align-center justify-end mt-10">
                        <text class="iconfont iconjian blue-outline-btn-circle mr-10"></text>
                        <text>1</text>
                        <text class="iconfont iconjia blue-btn-circle ml-10"></text>
                     </view>
                  </view>
               </view>
            <view v-if="goodsList.length">
               <uni-load-more :status="loadStatus" color="#a5abaf"></uni-load-more>
            </view>
         </scroll-view>
      </view>
      <view class="shopping flex align-center justify-between">
         <view class="flex align-center">
            <view class="shopping-icon iconfont iconicongouwuche gray" @click="openShoppingCart">
               <view class="shopping-icon-num flex align-center justify-center">
                  <text class="font-10">19</text>
               </view>
      <view class="footer">
         <view class="flex align-center" @click="openShoppingCart">
            <view class="icon-car-wrap">
               <text class="iconfont iconicongouwuche icon-car gray"></text>
               <text class="count" v-if="totalCount">{{totalCount}}</text>
            </view>
            <text class="font-14 blue ml-10">¥110.00</text>
            <text class="font-16 blue">¥{{totalAmount}}</text>
         </view>
         <navigator url="../confirmOrder">
            <button class="blue-btn btn mr-0">提交订单</button>
         </navigator>
         <button class="blue-btn btn mr-0" @click="submit" :disabled="isEnableSumbit">提交订单</button>
      </view>
      <uni-popup ref="popup" type="bottom">
         <shopping-cart></shopping-cart>
      </uni-popup>
      <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 uniPopup from '@/components/uni-popup/uni-popup.vue'
   import shoppingCart from './shoppingCart.vue'
   import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
   export default {
      components:{
         uniCollapse,
         uniCollapseItem,
         searchBar,
         uniPopup,
         shoppingCart
         shoppingCart,
         uniLoadMore
      },
      data(){
         return{
            placeholder:'商品名称、编号、拼音',
            list:['院装产品','美容套餐','美容客装','美容试装','头皮院装'],
            select:'0'
            id: '',
            goodsTypeList: [], 
            goodsList: [],
            cateId: null,//当前产品类别id
            selectItems: [],
            queryKey: '',
            loadStatus: 'more',
            pageNum: 1
         }
      },
      computed:{
         // 购物车总数量
         totalCount(){
            let count = 0;
            this.selectItems.forEach((item) => {
               count += item.num;
            })
            return count;
         },
         // 购物车总金额
         totalAmount(){
            let amount = 0;
            this.selectItems.forEach((item) => {
               if(!item.isFree){
                  amount += item.price * item.num;
               }
            })
            return amount;
         },
         isEnableSumbit(){
            return !this.selectItems.length
         }
      },
      onLoad(options) {
         this.id = options.id;
         uni.setNavigationBarTitle({
            title: '当前客户：' + options.vipName
         });
         this.loadGoodsTypeList()
      },
      onPullDownRefresh(){
         this.reloadData();
         let timer = setTimeout(function () {
            uni.startPullDownRefresh();
            clearTimeout(timer);
            timer = null;
         }, 800);
      },
      methods:{
         active(index){
            this.select=index
         reloadData(){
            this.goodsList = [];
            this.pageNum = 1;
            this.loadStatus = 'more';
            this.loadGoodsList();
         },
         scrolltolower(){
            this.loadGoodsList()
         },
         openShoppingCart(){
            this.$refs.popup.open()
            this.$refs.shopCart.toggle()
         },
         loadGoodsTypeList(){
            this.$httpUtils.request('/api/order/findShoppingGoodsType').then((res) => {
               if(res.status == 200){
                  let result = res.rows;
                  this.goodsTypeList = result;
                  if(result.length){
                     this.cateId = result[0].id;
                     this.loadGoodsList();
                  }
               }
            })
         },
         loadGoodsList(){
            if(this.loadStatus!=='more'){
               return;
            }
            this.$httpUtils.request('/api/order/findShoppingGoods',{
               cateId: this.cateId,
               pageNum: this.pageNum,
               pageSize: 10,
               queryKey: this.queryKey
            },'POST').then((res) => {
               if(res.status == 200){
                  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;
                        }
                     })
                  });
               }
            })
         },
         // 搜索
         search(val){
            this.queryKey = val;
            this.reloadData();
         },
         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);
         },
         // 切换商品类型
         changeGoodsType(id){
            this.cateId = id;
            this.reloadData();
         },
         freeChange(data){
            data.goods.isFree = !data.goods.isFree;
            this.$set(this.selectItems, data.index, data.goods)
         },
         // 添加商品
         addGoods(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){
            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(goods.num >= 1){
               this.selectItems[selectIndex].num = goods.num;
            }else{
               this.selectItems.splice(selectIndex, 1);
            }
         },
         clearShopCart(){
            this.selectItems = [];
            this.goodsList.forEach((item) => {
               item.num = 0;
            });
         },
         submit(){
            let str = (encodeURIComponent(JSON.stringify(this.selectItems))).replace(/%/g, '%25');
            uni.navigateTo({
               url: '../confirmOrder?id='+this.id+'&list='+str
            });
         }
      }
   }
@@ -104,61 +290,99 @@
      padding: 10px 0 0;
      box-sizing: border-box;
   }
   .search-bar{
      margin-left: 10px;
      margin-right: 10px;
   }
   .list{
      flex: 1;
      display: flex;
      overflow: hidden;
   }
   .list-left{
      width: 25%;
      height: 100%;
      text-align: center;
      width: 200rpx;
      background: #F6F6F8;
      border-radius: 4px;
   }
   .list-right{
      width: 75%;
      text-align: center;
      padding: 0px 10px;
      flex: 1;
   }
   .list-left-row{
      padding: 10px;
      color: #8c9fad;
      font-size: 13px;
      border-bottom: 0;
   }
   .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;
      align-items: center;
      padding: 10px;
      margin: 0 10px 10px;
      border: 1px solid #EDEAF4;
      box-shadow:0 6px 6px rgba(237,234,244,0.5);
      border-radius: 4px;
      padding: 10px;
      font-size: 13px;
   }
   .list-right-row:not(:first-child){
      margin-top: 10px;
   .list-right-row:nth-last-of-type(1){
      margin-bottom: 0;
   }
   .product-img{
      width: 81px;
      height: 81px;
   .list-right-row .product-img{
      width: 66px;
      height: 66px;
      margin-right: 5px;
   }
   .shopping{
      padding: 10px 10px;
      box-shadow:0 6px 100px rgba(237,234,244,1);
   .list-right-row .price{
      display: block;
      color: #FA5151;
      font-size: 15px;
   }
   .shopping-icon{
      font-size: 28px;
   .footer{
      position: relative;
      z-index: 999;
      display: flex;
      justify-content: space-between;
      background: #FFFFFF;
      padding: 10px 10px;
      box-shadow: 0 6px 100px rgba(237,234,244,1);
   }
   .shopping-icon-num{
      width: 20px;
      height: 20px;
      background: #518EFF;
      border-radius: 50%;
      color: #FFFFFF;
   .footer .icon-car-wrap{
      position: relative;
      margin-right: 15px;
   }
   .footer .icon-car{
      font-size: 28px;
   }
   .footer .count{
      position: absolute;
      right: -10px;
      top: -10px;
      width: 20px;
      height: 20px;
      line-height: 20px;
      background: #518EFF;
      border-radius: 50%;
      color: #FFFFFF;
      font-size: 12px;
      text-align: center;
   }
   .btn{
   .footer .btn{
      border-radius: 20px;
      line-height: 34px;
      padding: 0 24px;