企业网站建设意义_初中生怎么升大专学历_桂林seo_苏州网站制作

对商品进行展示

  <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([]);// 选中商品后购物车listconst 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));
}