vue+vant中购物车页面

<template>
  <div class="cart-box">
    <van-nav-bar>
      <template #title>
        <span class="title">购物车</span>
      </template>
    </van-nav-bar>
    <van-cell-group inset>
      <van-cell
        :title="list.name + list.tel"
        :label="list.address"
        @click="onEdit"
        style="margin-top: 50px"
      >
        <template #right-icon>
          <van-icon name="edit" size="0.7rem" />
        </template>
      </van-cell>
    </van-cell-group>
    <!--  -->
    <van-action-sheet v-model="show" title="修改地址">
      <van-address-edit
        show-deletail
        :show-area="false"
        show-search-result
        :search-result="searchResult"
        @save="onSave"
        @change-detail="onChangeDetail"
      />
    </van-action-sheet>
    <div
      v-for="item in cartList"
      :key="item.id"
      class="cart-item"
      style="margin-top: 20px"
    >
      <!-- 每个商品前的按钮 -->
      <van-checkbox
        :name="item"
        @click="onchxClickFn(item)"
        class="checkbox-btn"
        v-model="item.checked"
      ></van-checkbox>

      <!-- 商品信息 -->
      <van-card :price="item.price" :thumb="item.img">
        <template #num>
          <van-stepper
            v-model="item.number"
            @change="onChange(item.number, item.id)"
          />
        </template>

        <!-- 自定义标题，删除按钮 -->
        <template #title>
          <span>{{ item.goods_name }}</span>
          <van-icon
            name="delete-o"
            class="delete-icon"
            @click="onDelete(item)"
          />
        </template>
      </van-card>
    </div>
    <!-- 按钮 -->

    <!-- 下方结算 -->
    <!-- vant显示的数字不对，9999元会显示成99.99元，所以需要乘以100 -->
    <van-submit-bar
      :price="checkedGoodsAmount * 100"
      button-text="提交订单"
      @submit="onSubmit"
    >
      <van-checkbox @click="onClickCheckAll" v-model="checkedAll"
        >全选</van-checkbox
      >
      <!-- <template #tip>
        你的收货地址不支持同城送,
        <span @click="onClickEditAddress">修改地址</span>
      </template> -->
    </van-submit-bar>
  </div>
</template>

<script>
import {
  GetCartData,
  UpdateCartData,
  DeleteCartData,
  ToggleCartCheckedData,
  DeleteCartData2,
} from "@/https/http";
import { Toast } from "vant";
export default {
  name: "cart",
  data() {
    return {
      // cartList: [], //商品总列表
      cartList: [
        {
          id: 45680,
          user_id: "0",
          goods_id: 1135058,
          goods_name: "日式多功能手卷午睡枕坐垫",
          price: 79,
          goods_specifition_name_value: "",
          number: 1,
          img: "http://yanxuan.nosdn.127.net/37bc0fa3524a904ac740340fa92bd515.png",
          product_id: 213,
          session_id: 1,
          checked: 0,
          goods_sn: "1135058",
          goods_specifition_ids: "",
        },
        {
          id: 45681,
          user_id: "0",
          goods_id: 1130049,
          goods_name: "柔软凉爽天丝麻蚕丝填充夏凉被",
          price: 429,
          goods_specifition_name_value: "",
          number: 1,
          img: "http://yanxuan.nosdn.127.net/d88513f85b3617d734bde93af2c766c9.png",
          product_id: 194,
          session_id: 1,
          checked: 0,
          goods_sn: "1130049",
          goods_specifition_ids: "",
        },
      ], //商品总列表
      // cartTotal: {}, //购物车数据
      cartTotal: {
        goodsCount: 16,
        goodsAmount: 4269,
        checkedGoodsCount: 5,
        checkedGoodsAmount: 3505,
      },
      // price: 0,
      goodsId: "",
      number: "",
      productId: "",
      id_: "",
      isChecked: "1",
      // productIdsList:[],
      productIds: "",
      checkedGoodsAmount: 0, //选中的商品的总金额
      checkedAll: 0,
      chosenAddressId: "1",
      list: {
        id: "1",
        name: "张三",
        tel: "13000000000",
        address: "浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室",
        isDefault: true,
      },
      show: false,
      searchResult: [],
    };
  },

  methods: {
    count() {
      var totalPrice = 0;
      this.cartList.forEach((val) => {
        if (val.checked == 1) {
          totalPrice += val.number * val.price; //累计总价
        }
      });
      console.log("商品总价", totalPrice);
      this.checkedGoodsAmount = totalPrice;
    },
    // 获取数据
    getData() {
      // 发送请求，获取当前购物车的数据
      GetCartData().then((res) => {
        console.log(11111, res);
        this.cartList = res.data.cartList; //商品总列表
        this.cartTotal = res.data.cartTotal; //购物车数据
        //选中的商品的总金额
        this.checkedGoodsAmount = res.data.cartTotal.checkedGoodsAmount;
        // 如果有选中的商品
        if (this.cartTotal.checkedGoodsCount > 0) {
          // 选中的商品数量===购物车内的所有商品总数量 时候，全选按钮就会被选中
          if (this.cartTotal.checkedGoodsCount == this.cartTotal.goodsCount) {
            this.checkedAll = true;
          } else {
            //不相等的时候，全选按钮就不会被选中
            this.checkedAll = false;
          }
        } else {
          // 如果没有选中的商品，全选按钮就不会被选中
          this.checkedAll = false;
        }
      });
    },
    // 删除单个商品的时候，发送删除商品的请求
    onDelete(item) {
      DeleteCartData2({ productIds: item.product_id.toString() }).then(
        (res) => {
          if (res.errno === 0) {
            this.getData(); //重新请求购物车商品数据，渲染
          }
        }
      );
    },
    //  按下商品+1或者-1按钮， 购物车商品数量变化 ,onChange会接收变化的商品id
    onChange(value, id_) {
      this.cartList.forEach((item) => {
        // 找出对应的goods_id,number
        if (item.id === id_) {
          this.id_ = id_;
          this.goodsId = item.goods_id;
          this.number = item.number;
          this.productId = item.product_id;
        }
      });
      console.log(this.cartList);
      // 发请求
      this.count();
    },
    // 购物车商品步进器功能接口  按下商品+1或者-1按钮，
    updateCartData() {
      // 直接发送更新数据请求，将当前的商品数量带着
      UpdateCartData({
        goodsId: this.goodsId,
        id: this.id_,
        number: this.number,
        productId: this.productId,
      }).then((res) => {
        console.log(999, res);
        if (res.errno === 0) {
          this.getData(); //重新请求购物车商品数据，渲染
        }
      });
    },

    // 点击商品单选按钮，切换购物车商品选中状态，发送请求
    onchxClickFn(item) {
      this.isChecked = item.checked ? "1" : "0";
      this.productIds = item.product_id.toString();
      console.log(this.productIds);
      this.toggleCartCheckedData();
    },

    // 切换购物车商品选中状态，发送请求
    toggleCartCheckedData() {
      console.log(this.isChecked, "切换购物车商品选中状态");
      this.count();
    },
    // 点击全选，切换购物车商品选中状态，发送请求
    onClickCheckAll() {
      this.isChecked = this.checkedAll ? "1" : "0";
      console.log(this.isChecked, this.checkedAll, "点击全选");
      this.cartList.forEach((item) => {
        this.$nextTick(() => {
          item.checked = Number(this.isChecked);
          this.count();
        });
      });
      
    },

    // 提交
    onSubmit() {},
    // 编辑地址
    onClickEditAddress() {},
    onEdit(item, index) {
      Toast("编辑地址:" + index);
      this.show = true;
    },
    onSave(data) {
      Toast("save");
      console.log("地址", data);
    },
    onChangeDetail(val) {
      if (val) {
        console.log(val);
      } else {
      }
    },
  },
  created() {
    this.getData();
  },
};
</script>

<style scoped lang="less">
/deep/.van-checkbox__label {
  flex: 1;
}
/deep/.van-checkbox {
  margin-bottom: 2px;
}
/deep/.van-submit-bar {
  bottom: 50px;
}
.cart-box {
  padding-bottom: 150px;
  box-sizing: border-box;
  .van-card {
    position: relative;
  }
  .delete-icon {
    position: absolute;
    top: 5px;
    right: 5px;
  }
  .cart-item {
    position: relative;
    padding-left: 40px;
    .checkbox-btn {
      position: absolute;
      left: 20px;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }
}
.van-nav-bar {
  background-color: #27bbe0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;
}
.title {
  color: #fff;
  font-size: 20px;
}
.content {
  padding: 16px 16px 160px;
}
</style>