gx

queenwuli

2021-01-28 b83ba3cc4687f21d744e9866e10e30e91229e8a4

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

@@ -1,96 +1,133 @@
<template>
   <!-- 购物车 -->
   <view class="popup-content">
      <view class="popup-header flex justify-between">
         <text class="blue">已选商品</text>
         <view class="flex align-center">
            <view class="popup-header-icon iconfont iconlajixiang_huaban1 gray"></view>
            <text class="gray font-14">清空</text>
         </view>
      </view>
      <view class="popup-row flex align-center"v-for="item in 3">
         <image class="popup-row-img" mode="aspectFill" src="../../../static/images/product.jpg"></image>
         <view class="popup-row-right">
            <text class="flex justify-start font-12">肽妍氨基酸平衡基础洁面乳</text>
            <view class="flex justify-between align-center">
               <text class="flex justify-start font-12 red">￥400.00</text>
               <view class="flex align-center justify-end">
                  <text class="iconfont iconjian blue-outline-btn-circle mr-10 center"></text>
                  <text>1</text>
                  <text class="iconfont iconjia blue-btn-circle ml-10 center"></text>
               </view>
   <uni-popup ref="popup" type="bottom">
      <view class="popup-content">
         <view class="popup-header">
            <text class="blue">已选商品</text>
            <view class="flex align-center">
               <text class="iconfont iconlajixiang_huaban1 gray"></text>
               <text class="gray font-14" @click="_reset">清空</text>
            </view>
         </view>
      </view>
      <view class="popup-end 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>
         <scroll-view scroll-y="true" class="popup-row-wrap">
            <view class="popup-row" v-for="(item, index) in list">
               <view class="flex">
                  <image class="popup-row-img" mode="aspectFill" :src="item.img?item.img:'../../../static/images/no-img.png'"></image>
                  <view>
                     <text>{{item.name}}</text>
                     <text class="price">￥{{item.price}}</text>
                  </view>
               </view>
               <view v-if="item.isPresent == 1" @click="freeChange(item, index)">
                  <checkbox value="true" :checked="item.isFree" />赠
               </view>
               <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>
            <text class="font-14 blue ml-10">¥110.00</text>
         </view>
         <button class="blue-btn btn mr-0" @click="linkTo('./confirmOrder')">提交订单</button>
         </scroll-view>
      </view>
   </view>
   </uni-popup>
</template>

<script>
   import uniPopup from '@/components/uni-popup/uni-popup.vue'
   export default{
      components:{
         uniPopup
      },
      props:{
         list: {
            default: []
         }
      },
      data(){
         return{
            isShow: false
         }
      },
      methods:{
         toggle(){
            if(!this.list.length){
               return;
            }
            this.isShow = !this.isShow;
            if(this.isShow){
               this.$refs.popup.open();
            }else{
               this.hide();
            }
         },
         hide(){
            this.$refs.popup.close();
         },
         freeChange(item, index){
            this.$emit('freeChange', {
               goods: item,
               index
            });
         },
         _addGoods(item){
            this.$emit('addGoods', item);
         },
         _decreaseGoods(item){
            this.$emit('decreaseGoods', item);
            if(!this.list.length){
               this.hide()
            }
         },
         _reset(){
            this.$emit('reset');
            this.hide()
         }
      }
   }
</script>

<style>
   .shopping{
      padding: 10px 10px;
      box-shadow:0 6px 100px rgba(237,234,244,1);
   }
   .shopping-icon{
      font-size: 28px;
      position: relative;
   }
   .shopping-icon-num{
      width: 20px;
      height: 20px;
      background: #518EFF;
      border-radius: 50%;
      color: #FFFFFF;
      position: absolute;
      right: -10px;
      top: -10px;
   }
   .btn{
      border-radius: 20px;
      line-height: 34px;
      padding: 0 24px;
      font-size: 14px;
   }
	
   .popup-content{
      background: #FFFFFF;
      border-top-left-radius: 8px;
      border-top-right-radius: 8px;
      padding: 0 10px;
      padding-bottom: 54px;
   }
   .popup-header{
      padding: 10px 0;
      display: flex;
      justify-content: space-between;
      padding: 10px;
      border-bottom: 1px solid #EDEAF4;
      font-size: 16px;
   }
   .popup-header-icon{
   .popup-header .iconfont{
      font-size: 22px;
      vertical-align: middle;
   }
   .popup-row-wrap{
      max-height: 330px;
      padding: 7px 0;
   }
   .popup-row{
      padding: 10px 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 7px 10px;
      font-size: 12px;
   }
   .popup-row-img{
      width: 40px;
      height: 40px;
      width: 42px;
      height: 42px;
      margin-right: 10px;
   }
   .popup-row-right{
      width: 100%;
   }
   .popup-end{
      padding: 10px 0;
   .popup-row .price{
      display: block;
      color: #FA5151;
      font-size: 14px;
      margin-top: 5px;
   }
</style>