商品订单联调

queenwuli

2020-12-24 c6bac585288a7841b1d1f5fd774b7c765955815b

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

@@ -4,64 +4,51 @@
      <!-- #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>
      <search-bar 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>
         </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">
            <navigator url="../productDetail/index" 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>
         </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 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-16 blue">¥{{totalAmount}}</text>
            </view>
            <text class="font-14 blue ml-10">¥110.00</text>
         <button class="blue-btn btn mr-0" @click="submit" :disabled="isEnableSumbit">提交订单</button>
         </view>
         <navigator url="../confirmOrder">
            <button class="blue-btn btn mr-0">提交订单</button>
         </navigator>
      </view>
      <uni-popup ref="popup" type="bottom">
         <shopping-cart></shopping-cart>
      </uni-popup>
      <shopping-cart ref="shopCart" :list="selectItems" @addGoods="addGoods" @decreaseGoods="decreaseGoods" @reset="clearShopCart"></shopping-cart>
   </view>
</template>

@@ -77,17 +64,111 @@
      },
      data(){
         return{
            placeholder:'商品名称、编号、拼音',
            list:['院装产品','美容套餐','美容客装','美容试装','头皮院装'],
            select:'0'
            id: '',
            goodsTypeList: [], 
            goodsList: [],
            selectIndex: 0,
            cateId: null,//当前产品类别id
            selectItems: []
         }
      },
      methods:{
         active(index){
            this.select=index
      computed:{
         // 购物车总数量
         totalCount(){
            let count = 0;
            this.selectItems.forEach((item) => {
               count += item.num;
            })
            return count;
         },
         // 购物车总金额
         totalAmount(){
            let amount = 0;
            this.selectItems.forEach((item) => {
               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()
      },
      methods:{
         openShoppingCart(){
            this.$refs.popup.open()
            if(!this.selectItems.length){
               return;
            }
            this.$refs.shopCart.show()
         },
         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(){
            this.$httpUtils.request('/api/order/findShoppingGoods',{
               cateId: this.cateId,
               pageNum: 1,
               pageSize: 100,
               queryKey: ''
            },'POST').then((res) => {
               if(res.status == 200){
                  this.goodsList = res.rows.map((item) => {
                     return Object.assign(item, {num: 0});
                  });
               }
            })
         },
         // 切换商品类型
         changeGoodsType(id, index){
            this.selectIndex = index;
            this.cateId = id;
            this.loadGoodsList();
         },
         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);
            }
         },
         decreaseGoods(goods){
            let index = this.selectItems.indexOf(goods);
            goods.num = goods.num <= 0 ? 0 : goods.num - 1;
            // 该商品若已在购物车，则购物车数量上-1,否则从购物车删除
            if(index > -1 && this.selectItems[index].num >= 1){
               this.selectItems[index].num = goods.num;
            }else{
               this.selectItems.splice(index, 1);
            }
         },
         clearShopCart(){
            this.selectItems = [];
            this.goodsList.forEach((item) => {
               item.num = 0;
            });
         },
         submit(){
            uni.navigateTo({
               url: '../confirmOrder?id='+this.id+'&list='+encodeURIComponent(JSON.stringify(this.selectItems))
            });
         }
      }
   }
@@ -104,61 +185,82 @@
      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: 170rpx;
      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;
   }
   .active{
   .list-left-row.active{
      background: #FFFFFF;
      color: #000000;
   }
   .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 .product-img{
      width: 66px;
      height: 66px;
      margin-right: 5px;
   }
   .product-img{
      width: 81px;
      height: 81px;
   .list-right-row .price{
      display: block;
      color: #FA5151;
      font-size: 15px;
   }
   .shopping{
   .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{
      font-size: 28px;
   .footer .icon-car-wrap{
      position: relative;
      margin-right: 15px;
   }
   .shopping-icon-num{
      width: 20px;
      height: 20px;
      background: #518EFF;
      border-radius: 50%;
      color: #FFFFFF;
   .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;