Vue中购物车

Vue中购物车是用axios进行调接口，然后放在store中，就可以随时调用！

示例：

Show.vue:

 

<template>
  <div class="header0">
    <table>
      <caption>
        商品界面
      </caption>
      <thead>
        <tr>
          <th>编号</th>
          <th>名称</th>
          <th>生产时间</th>
          <th>失效时间</th>
          <th>图片</th>
          <th>价格</th>
          <th>折扣</th>
          <th>购买</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(v, i) in ps" :key="i + 'link'">
          <td>{{ v.id_coach }}</td>
          <td>{{ v.name_coach }}</td>
          <td>{{ v.dage_coach }}</td>
          <td>{{ v.tage_coach }}</td>
          <td><img :src="baseurl + v.path_coach" alt="" class="img1" /></td>
          <td>{{ v.type_coach }}</td>
          <td>{{ v.honor_coach }}</td>
          <td><input type="button" value="购买" @click="buy2(i)" /></td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import axios from "axios";
import qs from "qs";

export default {
  name: "Show",
  data() {
    return {
      ps: [],
      baseurl: "http://www.qhdlink-student.top/",
    };
  },
  computed: {
    // ps: function () {
    //   return this.$store.state.pss;
    // },
  },

  mounted() {
    axios({
      url: "http://www.qhdlink-student.top/student/coacha.php",
      method: "POST",
      data: { username: "cty", userpwd: 12345678, userclass: 67, type: 2 },
      transformRequest: [
        function (data) {
          return qs.stringify(data);
        },
      ],
      headers: { "Content-Type": "application/x-www-form-urlencoded" },
    }).then((value) => {
      for (let i in value.data) {
        this.ps.push(value.data[i]);
      }
      this.setpss(value.data);
    });
  },
  methods: {
    buy2: function (a) {
      this.$store.commit("buy1", a);
    },
    setpss(a) {
      this.$store.commit("changepss", a);
    },
  },
};
</script>

<style>
.header0 {
  width: 50%;
  height: 750px;
  float: left;
  background: rgb(241, 240, 181);
}
.img1 {
  width: 100px;
  height: auto;
}
</style>

vuex.js:

 

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);

export var store = new Vuex.Store(
    {
        state: {
            buypss: [],
            pss: [],
            psss: []
        },
        mutations: {
            changepss(state, a) {
                for (let i in a) {
                    state.pss.push(a[i]);
                }
            },
            changepsss(state, a) {
                for (let i in a) {
                    state.psss.push(a[i]);

                }
            },
            addbuy(state, a) {
                state.buypss[a].num += 1;
                let b = state.buypss[a];
                state.buypss.splice(a, 1, b);
            },
            delbuy(state, a) {
                if (state.buypss[a].num == 1) {
                    state.buypss[a].disabled = true;
                } else {
                    state.buypss[a].num -= 1;
                    let c = state.buypss[a];
                    state.buypss.splice(a, 1, c);
                }
            },
            del(state, a) {
                state.buypss.splice(a, 1);
            },
            buy1: function (state, a) {
                let true_false = true;
                state.buypss.map((v, i) => {
                    if (v.id_coach == state.pss[a].id_coach) {
                        true_false = false;
                        v.num += 1;
                        state.buypss.splice(i, 1, v);
                    }
                })
                if (true_false) {
                    state.pss[a].num = 1;
                    state.buypss.push(state.pss[a]);
                }

            },
        },
    }
)

buy.vue:

 

<template>
  <div class="buy">
    <table>
      <caption>
        购物车界面
      </caption>
      <thead>
        <tr>
          <th>编号</th>
          <th>名称</th>
          <th>生产时间</th>
          <th>失效时间</th>
          <th>图片</th>
          <th>价格</th>
          <th>折扣</th>
          <th>购买</th>
          <th>移除</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(v, i) in buypss" :key="i + 'link'">
          <td>{{ v.id_coach }}</td>
          <td>{{ v.name_coach }}</td>
          <td>{{ v.dage_coach }}</td>
          <td>{{ v.tage_coach }}</td>
          <td><img :src="baseurl + v.path_coach" alt="" class="img1" /></td>
          <td>{{ v.type_coach }}</td>
          <td>{{ v.honor_coach }}</td>
          <td>
            <input type="button" value=" + " @click="changeadd(i)" />
            {{ v.num }}
            <input
              type="button"
              value=" - "
              v-if="v.num == 1"
              disabled
              @click="changedel(i)"
            />
            <input type="button" v-else value=" - " @click="changedel(i)" />
          </td>
          <td><input type="button" value="移除" v-on:click="del(i)" /></td>
        </tr>
      </tbody>
    </table>
    <h4>总价格：{{ price }}</h4>
    <input type="button" value="点击结算" />
  </div>
</template>
<script>
export default {
  name: "Buy",
  data() {
    return {
      baseurl: "http://www.qhdlink-student.top/",
    };
  },
  computed: {
    buypss() {
      return this.$store.state.buypss;
    },
    price() {
      let d = 0;
      this.$store.state.buypss.map((v, i) => {
        d += v.num * v.type_coach;
      });
      return d;
    },
  },
  methods: {
    changeadd(a) {
      this.$store.commit("addbuy", a);
    },
    changedel(a) {
      this.$store.commit("delbuy", a);
    },
    del(a) {
      this.$store.commit("del", a);
    },
  },
};
</script>
<style scoped>
.buy {
  width: 50%;
  height: 750px;
  float: left;
  background: rgb(120, 119, 221);
}
</style>

最终效果图：