【提交评论、制作购物车加购总计页面】

制作一个评论提交功能

购物车加购总计页面的制作

代码如下：

<template>
  <div>

    <header>我的购物车</header>


    <div class="container">
      <div class="item" v-for="(item,index) in shopCar" :key="index">
        <div class="logo">
          <img :src="item.businessLogo"/>
          <span>{{ item.businessName }}</span>
        </div>
        <div class="details">
          <img :src="item.commodityImg"/>
          <div class="details-right">
          <div class="details-list">
            <span>{{ item.commodityName }}</span>
          </div>
          <div class="details-more">
            <span>颜色值：{{ item.commodityColor }}</span>
            <span>尺码：{{ item.commoditySize }}</span>
          </div>
          <div class="details-price">
            ￥{{ item.commodityPrice }}/件
          </div>
        </div>
        </div>
        <div class="num">
          <span class="num-span">购买数量</span>
          <div class="num-btn">
            <button class="num-btn-btn" @click="btn(false,index)">-</button>
            <p class="num-btn-btn">{{item.num}}</p>
            <button class="num-btn-btn" type="text" @click="btn(true,index)">+</button>
          </div>
        </div>
      </div>
    </div>

    <footer>
      <div class="footer-left">
        实际付款：
        <span>￥{{ totalPrice }} 免运费</span>
      </div>
      <div class="footer-right">立即付款</div>
    </footer>

  </div>
</template>

<script>
export default {
  data(){
    return {
      totalPrice:0,//总价
      shopCar:[
        {
          id:"001",
          businessName:"商家名称1",
          businessLogo:"https://app.kuaiyingyong.vip/chicken/background/229.jpg",
          commodityImg:"https://s10.mogucdn.com/mlcdn/c45406/180917_18l981g6clk33fbl3833ja357aaa0_750x390.jpg",
          commodityName:"夏季短袖女妈妈装宽松韩版",
          commodityColor:"墨绿色",
          commoditySize:"XL",
          commodityPrice:"10",
          num:1
        },
        {
          id:"002",
          businessName:"商家名称2",
          businessLogo:"https://app.kuaiyingyong.vip/chicken/background/229.jpg",
          commodityImg:"https://s10.mogucdn.com/mlcdn/c45406/180917_18l981g6clk33fbl3833ja357aaa0_750x390.jpg",
          commodityName:"夏季短袖女妈妈装宽松韩版",
          commodityColor:"墨绿色",
          commoditySize:"XL",
          commodityPrice:"20",
          num:1
        },
        {
          id:"003",
          businessName:"商家名称3",
          businessLogo:"https://app.kuaiyingyong.vip/chicken/background/229.jpg",
          commodityImg:"https://s10.mogucdn.com/mlcdn/c45406/180917_18l981g6clk33fbl3833ja357aaa0_750x390.jpg",
          commodityName:"夏季短袖女妈妈装宽松韩版",
          commodityColor:"墨绿色",
          commoditySize:"XL",
          commodityPrice:"30",
          num:1
        },
        {
          id:"004",
          businessName:"商家名称4",
          businessLogo:"https://app.kuaiyingyong.vip/chicken/background/229.jpg",
          commodityImg:"https://s10.mogucdn.com/mlcdn/c45406/180917_18l981g6clk33fbl3833ja357aaa0_750x390.jpg",
          commodityName:"夏季短袖女妈妈装宽松韩版",
          commodityColor:"墨绿色",
          commoditySize:"XL",
          commodityPrice:"40",
          num:1
        }
      ]
    }
  },
  methods:{
    //总计
    getTotalPrice(){  // 在此处创建该方法（每个单价*数量 相加起来 就是总和）
    //先循环这个数组，循环结束后定义一个变量price，它所对应的值就是所有加购的商品价格*数量的总和，总价之和要求保留两位小数
      let price = 0;
      // eslint-disable-next-line no-unused-vars
      this.shopCar.forEach((item,index)=>{
        price += item.num * item.commodityPrice
      })
      this.totalPrice = price.toFixed(2);
    },
    //减 加
    btn(bool,index){
      let shopIndex = this.shopCar[index]; //定义一个变量shopIndex，根据下标shopCar[index]锁定是哪个商品 然后赋值给shopIndex
      if(bool){
        //加
        shopIndex.num++;
      }else{
        //减
        if (shopIndex.num<=0){  //如果当前数量为0时 就直接return 不能继续再减
          return;
        }
        shopIndex.num--;
      }
      this.getTotalPrice();
    }
  },
  mounted(){
    this.getTotalPrice();  //在此处调用该方法
  },
  components: {
    // HelloWorld
  }
}
</script>

<style>
*{
  margin:0;
  padding:0;
  background-color: #f5f5f5;
}
header{
  height:50px;
  width:100%;
  left:0;
  top:0;
  position: fixed;
  background-color: #fff;
  z-index: 999;
  text-align: center;
  line-height: 50px;
}
.container{
  background-color: #fff;
  padding:5px 0;
  margin-top: 50px;
  margin-bottom: 40px;
}
.item{
  padding:10px;
  border-bottom: 3px solid #fff;
}
.container>.item + .item{
  bord-top:1px solid #ccc;
}
.logo{
  height:30px;
  width:100%;
  align-items: center;
}
.logo img{
  height:10px;
  width:10px;
}
.logo span{
  color:#888;
  font-size:12px;
  margin-left: 20px;
}
.details{
  background-color: #f5f5f5;
  padding:15px;
  font-size: 12px;
  display: flex;
}
.details img{
  width:30%;
  height:90px;
}
.details-right{
  width:70%;
  height:90px;
  margin-left: 15px;
  line-height: 20px;
}
.details-list{
  color: #888;
}
.details-more span{
  display: block;
  color: #ccc;
}
.details-price{
  font-size: 14px;
  line-height: 40px;
}
.num{
  width:100%;
  height:30px;
  display: flex;
}
.num-span{
  width:75%;
  font-size: 16px;
  line-height: 30px;
  text-algin:left;
  padding-left:10px;
}
.num-btn{
  width:25%;
  height:30px;
  display: flex;
}
.num-btn-btn{
  width:7%;
  height:20px;
  display: flex;
  font-size: 20px;
  padding:10px;
  border: 0;
}
footer{
  height:50px;
  width:100%;
  position: fixed;
  left:0;
  bottom:0;
  background-color: #fff;
  z-index: 999;
  border-top: 1px solid #ccc;
  text-align: center;
  line-height: 50px;
  display: flex;
  justify-content: center;
}
.footer-left{
  flex:1;
  font-size: 16px;
  line-height: 50px;
  text-algin:right;
  padding-right:6px;
}
.footer-left span{
  color:red;
}

.footer-right{
  background-color: red;
  color:#fff;
  width:150px;
  height:50px;
  line-height: 50px;
  text-algin:center;
}
</style>