2021-06-04

vue 实现购物车 简版

1.methods中函数

1. 上架商品函数

    addProduct() {  //上架商品函数
      let nowproducts = [...this.products];
      let arr = [];
      nowproducts.forEach((val, i) => {
        arr.push(val.name);
      });
      let v = arr.indexOf(this.newprname);
      if (v == -1 && !isNaN(this.newprostk * 1) && !isNaN(this.newpropce * 1)&&this.newprname!='')
        this.products.push({
          name: this.newprname,
          stock: this.newprostk * 1,
          price: this.newpropce * 1,
          ky: this.newky++,
        });
      else {
        if (v != -1&&!isNaN(this.newprostk * 1) && !isNaN(this.newpropce * 1)) {
          this.products[v].stock =
            this.products[v].stock * 1 - 0 + this.newprostk * 1;
          this.products[v].price = this.newpropce * 1;
        }else{
          alert('格式错误')
          this.newprostk=''
          this.newpropce=''
          this.newprname=''
        }
      }
    },

2. 添加到购物车

    addcart(item) {//添加到购物车
      let cartlist = [...this.Cart];
      let arr = [];
      cartlist.forEach((val, i) => {
        arr.push(val.name);
      });
      let v = arr.indexOf(item.name);
      if (v == -1) {
        let nowproducts = [...this.products];
        let arrr = [];
        nowproducts.forEach((val, i) => {
          arrr.push(val.name);
        });
        let vv = arrr.indexOf(item.name);
        this.products[vv].stock--;
        item.num = 1;
        this.Cart.push({
          name: item.name,
          num: item.num,
          price: item.price,
        });
      } else {
        let nowproducts = [...this.products];
        let arr = [];
        nowproducts.forEach((val, i) => {
          arr.push(val.name);
        });
        let vv = arr.indexOf(this.Cart[v].name);
        if (this.products[vv].stock > 0) {
          this.products[vv].stock--;
          this.Cart[v].num++;
          this.Cart[v].price += this.products[vv].price * 1;
        }
      }
    },

3. 删除购物车中内容

    removecart(i) {  //删除购物车中内容
      let cartlist = [...this.products];
      let arr = [];
      cartlist.forEach((val, i) => {
        arr.push(val.name);
      });
      let v = arr.indexOf(this.Cart[i].name);
      this.products[v].stock += this.Cart[i].num;
      this.Cart.splice(i, 1);
    },

4. 修改库存函数

    changeStock(item, newstock) {//修改库存函数
      if (newstock <= 0) {
        newstock = 0;
      }
      item.stock = newstock;
    },

5. 购物车中数量加减函数

    changeNum(item, newnum) {  //购物车中数量加减函数
      if (newnum <= 1) {
        newnum = 1;
      }
      let cartlist = [...this.products];
      let arr = [];
      cartlist.forEach((val, i) => {
        arr.push(val.name);
      });
      let v = arr.indexOf(item.name);
      const tempstock = this.products[v].stock;
      if (tempstock > 0) {
        if (item.num - newnum < 0) {
          item.price = item.price + this.products[v].price;
        } else {
          if (item.num > 1) {
            item.price = item.price - this.products[v].price;
          }
        }
        this.products[v].stock += item.num + 0 - newnum + 0;
        item.num = newnum;
      } else {
        if (item.num > newnum) {
          item.price = item.price - this.products[v].price;
          this.products[v].stock += item.num + 0 - newnum + 0;
          item.num = newnum;
        }
      }
    },

2.数据更新前函数

  beforeUpdate() {
    this.total = "0";
    let cartlist = [...this.Cart];
    cartlist.forEach((val, i) => {
      this.total = this.total * 1 + val.price * 1;
    });
  },

3.data中数据

  data() {
    return {
     products: [
        { name: "华为P40", stock: 20, price: 4999, ky: 1 },
        { name: "一加9Pro", stock: 25, price: 6999, ky: 2 },
        { name: "小米11Pro", stock: 15, price: 3999, ky: 3 },
        { name: "IPhone12", stock: 5, price: 12999, ky: 4 },
      ],
      newprname: "",
      newprostk: "",
      newpropce: "",
      newky: 5,
      Cart: [],
      total: 0,
    };
  },

4.商户端template代码

 <section class="table_one">
      <table border="1" cellspacing="0" width="500" class="commodity">
        <thead>
          <tr>
            <th colspan="4">商家端</th>
          </tr>
          <tr>
            <td>商品名称</td>
            <td>商品库存</td>
            <td>商品单价</td>
            <td>操作</td>
          </tr>
        </thead>
        <tbody>
          <Son_2
            v-for="(product, i) in products"
            :key="product.ky"
            :name="product.name"
            :stock="product.stock"
            :price="product.price"
            @dispose="products.splice(i, 1)"
            @changestockadd="changeStock(product, product.stock + 1)"
            @changestockreduce="changeStock(product, product.stock - 1)"
          >
          </Son_2>
        </tbody>
      </table>
      <form @submit.prevent="addProduct">
        <label for="newname">商品名称:</label>
        <input
          type="text"
          v-model="newprname"
          id="newname"
          placeholder="商品名称/不可为空"
        /><br />
        <label for="newstock">商品数量:</label>
        <input
          type="text"
          v-model="newprostk"
          id="newstock"
          placeholder="商品数量/仅为数字"
        /><br />
        <label for="newprice">商品价格:</label>
        <input
          type="text"
          v-model="newpropce"
          id="newprice"
          placeholder="商品价格"
        /><br />
        <button>添加商品</button>
      </form>
    </section>

5.客户端template代码

    <section>
      <table border="1" cellspacing="0" width="500" class="commodity table_two">
        <thead>
          <th colspan="5">客户端</th>
        </thead>
        <tbody>
          <tr>
            <td>商品名称</td>
            <td>商品价格</td>
            <td>商品库存</td>
            <td>操作</td>
          </tr>
          <Son_1
            v-for="product in products"
            :key="product.ky"
            :name="product.name"
            :price="product.price"
            :stock="product.stock"
            @addCart="addcart(product)"
          ></Son_1>
        </tbody>
      </table>
      <table
        border="1"
        cellspacing="0"
        width="500"
        class="commodity table_three"
      >
        <thead>
          <tr>
            <th colspan="4">购物车</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>商品名称</td>
            <td>商品个数</td>
            <td>商品价格</td>
            <td>操作</td>
          </tr>
          <Son_5
            v-for="(item, i) in Cart"
            :key="item.ky"
            :name="item.name"
            :num="item.num"
            :price="item.price"
            @removeCart="removecart(i)"
            @addnum="changeNum(item, item.num + 1)"
            @productnum="changeNum(item, item.num - 1)"
          ></Son_5>
        </tbody>
        <tfoot>
          <tr>
            <th colspan="2">总价</th>
            <th>{{ total }}</th>
            <th><button>结算</button></th>
          </tr>
        </tfoot>
      </table>
    </section>

6.子组件代码

1. 子组件1

<template>
  <tr>
    <td>{{ name }}</td>
    <td>
      <button @click="$emit('changestockreduce')">-</button>
      <span>{{ stock > 0 ? stock : "无货" }}</span>
      <button @click="$emit('changestockadd')">+</button>
    </td>
    <td>￥{{ price }}</td>
    <td><button @click="$emit('dispose')">删除商品</button></td>
  </tr>
</template>

需配置的props

  props: ["name", "stock", "price"],

2. 子组件2

<template>
  <tr>
    <td>{{ name }}</td>
    <td>
      <button @click="$emit('productnum')">-</button>
      {{ num }}
      <button @click="$emit('addnum')">+</button>
    </td>
    <td>￥{{ price }}</td>
    <td>
      <button @click="$emit('removeCart')">删除</button>
    </td>
  </tr>
</template>

需配置的props

  props: ["name", "price", "num"],

3. 子组件3

<template>
  <tr>
    <td>{{ name }}</td>
    <td>￥{{ price }}</td>
    <td>
      {{ stock }}
    </td>
    <td>
      <button @click="$emit('addCart')">添加到购物车</button>
    </td>
  </tr>
</template>

需配置的props

  props: ["name", "price", "stock"],

7 需要引入子组件

import Son_1 from "./son_vue/01son";
import Son_2 from "./son_vue/02son";
import Son_3 from "./son_vue/03son";

8 配置components

  components: {
    Son_1,
    Son_2,
    Son_3,
   }

这样，一个简单的vue购物车就写好了，还有许多bug ，希望各路大神帮忙提出