vue+uniapp 购物车结算

对商品进行展示

  <view class="dcmk"  v-for="item of foodList" :key="item" >
             <view class="tit">食堂窗口</view>
             <view class="cen">
             <image :src='item.dishUrl'></image>
             <view class="n1"> <view class="h1">{{item.dishName}}</view>
              <view class="h2"><span>￥</span>{{item.dishPrice}}</view></view>
              <view class="n1"> <view class="h3"></view></view>
               <view class="n1">
               <view class="h1"><view class="dcmk_bj1">{{item.dishDesc}}</view></view>
               </view>
              <view class="zj ">
                <image :src="zj"  @click="contro(item,'add')"></image>
              <view class="p">{{item.num}}</view>
              <image :src="zj_" v-if="item.num>0" @click="contro(item,'reduce')"></image></view>

             </view>
       </view>

总价和商品数量显示

<div class="foot">
           <div class="dc_gwc_xi">{{countTotal}}</div>
            <div class="dc_gwc"></div>
            <div class="dc_foot_js"><span>￥</span>{{sumTotal.toFixed(2)}}</div>
            <div class="dc_foot_btn" @click="goPay()">去结算</div>
           </div>

创建模拟商品

 

const countTotal = ref(0);//总数量
  const sumTotal = ref(0);//总价
   const gecList = ref([]);// 选中商品后购物车list

  const foodList = [
        { dishName: '鸡蛋', id:1,dishDesc:'jidanmiao',dishPrice:11.13,num:0,dishUrl:''},
        { dishName: '玉米', id:2,dishDesc:'yumimiao',dishPrice:13.00,num:0,dishUrl:''},
        { dishName: '酸奶', id:3,dishDesc:'suannaimiao',dishPrice:2.00,num:0,dishUrl:''},
        { dishName: '鸡蛋', id:4,dishDesc:'jidanmiao',dishPrice:1.30,num:0,dishUrl:''},
        { dishName: '鸡蛋', id:5,dishDesc:'jidanmiao',dishPrice:1.13,num:0,dishUrl:''},
        { dishName: '玉米', id:6,dishDesc:'yumimiao',dishPrice:3,num:0,dishUrl:''},
        { dishName: '酸奶', id:7,dishDesc:'suannaimiao',dishPrice:2,num:0,dishUrl:''},
        { dishName: '鸡蛋', id:8,dishDesc:'jidanmiao',dishPrice:1.3,num:0,dishUrl:''},
      ]


// 点击加减商品 进行统计
const contro = (item,active) => {
  console.log("==="+active);
  if(active==='reduce'){
    if(item.num===0){
      Toast("商品数量已经是0了，不能再减了")
       const existingItem = gecList.value.findIndex(gwcitem => gwcitem.id === item.dishCode);
       if (existingItem > -1) {
         gecList.value.splice(existingItem, 1);
       }
      return;
    }
    item.num -= 1;
    sumTotal.value = sumTotal.value-item.dishPrice;
    countTotal.value -= 1;
  }else{
    item.num += 1;
    sumTotal.value = item.dishPrice+sumTotal.value;
    countTotal.value += 1;
  }
  //更新购物车数组
  const existingItem = gecList.value.find(gwcitem => gwcitem.id === item.dishCode);
   if (existingItem) {
      existingItem.num=item.num; // 更新数量而不是重复添加新项。
   } else {
     gecList.value.push(item); // 添加新商品到购物车。
   }
   if(item.num===0){
      const existingItem = gecList.value.findIndex(gwcitem => gwcitem.id === item.dishCode);
      if (existingItem > -1) {
        gecList.value.splice(existingItem, 1);
      }
   }
    gecList.value.find(gwcitem => console.log(gwcitem));
}