vue实现单页面仿照购物车案例——基于mint-ui和vue2.0

利用mint-UI 和vue2.0实现仿购物车案例。巩固vue基础

---

运行效果

能够实现如下功能：

• 利用v-for实现商品增加
• 利用mint-ui实现了右滑动删除该商品
• 利用数据绑定，能够做到实时计算商品总价

实现思路

该案例仅仅是vue单页面，因此不涉及组件通信。
实现步骤如下：

• 首先实现头部header。
• 中间内容container。
• 最下面的footer。

新建工程

基于vue2.0搭建

vue init webpack shopCarDemo

package,json文件内容如下：

{
  "name": "shopcar",
  "version": "1.0.0",
  "description": "A Vue.js project",
  "author": "macwust <2810215151@qq.com>",
  "private": true,
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js"
  },
  "dependencies": {
    "mint-ui": "^2.2.13",
    "vue": "^2.5.2"
  },
  "devDependencies": {
    "autoprefixer": "^7.1.2",
    "babel-core": "^6.22.1",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-loader": "^7.1.1",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-plugin-transform-vue-jsx": "^3.5.0",
    "babel-preset-env": "^1.3.2",
    "babel-preset-stage-2": "^6.22.0",
    "chalk": "^2.0.1",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.28.0",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^1.1.4",
    "friendly-errors-webpack-plugin": "^1.6.1",
    "html-webpack-plugin": "^2.30.1",
    "node-notifier": "^5.1.2",
    "optimize-css-assets-webpack-plugin": "^3.2.0",
    "ora": "^1.2.0",
    "portfinder": "^1.0.13",
    "postcss-import": "^11.0.0",
    "postcss-loader": "^2.0.8",
    "postcss-url": "^7.2.1",
    "rimraf": "^2.6.0",
    "semver": "^5.3.0",
    "shelljs": "^0.7.6",
    "uglifyjs-webpack-plugin": "^1.1.1",
    "url-loader": "^0.5.8",
    "vue-loader": "^13.3.0",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.5.2",
    "webpack": "^3.6.0",
    "webpack-bundle-analyzer": "^2.9.0",
    "webpack-dev-server": "^2.9.1",
    "webpack-merge": "^4.1.0"
  },
  "engines": {
    "node": ">= 6.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

项目文件目录结构

项目整体代码

App.vue

<template>
  <div>
    <header>购物车</header>

    <div class="container">

      <div v-if="shopcar.length > 0">
        <!-- <mt-cell-swipe title="标题文字" :right="[
              {
                content: 'Delete',
                style: { background: 'red', color: '#fff' },
                handler: () => this.$messagebox('delete')
              }
            ]"></mt-cell-swipe> -->

        <div class="item" v-for="(item, index) in shopcar" :key="index">
          <mt-cell-swipe :right="[
            {
              content: 'Delete',
              style: { background: 'red', color: '#fff' },
              handler: () => del(index)
            }
          ]">
            <div>
              <div class="logo">
                <img :src="item.businessLogo">
                <span>{{item.businessName}}</span>
              </div>
              <div class="details">
                <img :src="item.commodityImg">
                <div class="details_list">
                  <span>{{item.commodityName}}</span>
                  <div class="list-more">
                    <span>颜色值：{{item.commodityColor}}</span>
                    <span>尺码：{{item.commoditySize}}</span>
                  </div>
                  <div class="list-price">
                    {{item.commodityPrice}}
                  </div>
                </div>
              </div>
              <div class="num">
                <span>购买数量</span>
                <div>
                  <button @click="btn(false, index)">-</button>
                  <input type="" name="" :value="item.num">
                  <button @click="btn(true, index)">+</button>
                </div>
              </div>
            </div>
          </mt-cell-swipe>
        </div>
      </div>
      <div v-else>暂无数据...</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",
          businessLogo: "https://tse1-mm.cn.bing.net/th/id/OIP-C.UXRyY_8fjPHn0OC5BG9pUQHaEK?w=305&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7",
          businessName: "商家名称1",
          commodityImg: "https://tse1-mm.cn.bing.net/th/id/OIP-C.XafedcovLmEwipq5bdbw0gHaFi?w=264&h=197&c=7&r=0&o=5&dpr=1.3&pid=1.7",
          commodityName: "夏季短袖T恤女妈妈夏装宽松大码2019新款蝙蝠袖上衣韩版条纹T恤女",
          commodityColor: "墨绿色",
          commoditySize: "L105-115",
          commodityPrice: "235.9",
          num: 1
        },
        {
          id: "002",
          businessLogo: "https://tse2-mm.cn.bing.net/th/id/OIP-C.XTR_V6RlJM4K9F1HSfKHjQHaE5?w=269&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7",
          businessName: "商家名称2",
          commodityImg: "https://tse3-mm.cn.bing.net/th/id/OIP-C.tBrzBonWbfxgtmi-KvrOigHaEl?w=315&h=195&c=7&r=0&o=5&dpr=1.3&pid=1.7",
          commodityName: "夏季短袖T恤女妈妈夏装宽松大码2019新款蝙蝠袖上衣韩版条纹T恤女",
          commodityColor: "墨绿色",
          commoditySize: "L105-115",
          commodityPrice: "65.9",
          num: 1
        },
        {
          id: "003",
          businessLogo: "https://tse2-mm.cn.bing.net/th/id/OIP-C.JAXBrVGLYGfnYWgE5TS-JgHaE-?w=255&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7",
          businessName: "商家名称3",
          commodityImg: "https://tse2-mm.cn.bing.net/th/id/OIP-C.ZXukhE-3LvwqLsKA-vr82wHaEy?w=303&h=197&c=7&r=0&o=5&dpr=1.3&pid=1.7",
          commodityName: "夏季短袖T恤女妈妈夏装宽松大码2019新款蝙蝠袖上衣韩版条纹T恤女",
          commodityColor: "墨绿色",
          commoditySize: "L105-115",
          commodityPrice: "2.9",
          num: 1
        },
        {
          id: "004",
          businessLogo: "https://tse1-mm.cn.bing.net/th/id/OIP-C.gg1NSgs5KwP71Nh0qlvflQHaFL?w=245&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7",
          businessName: "商家名称4",
          commodityImg: "https://tse3-mm.cn.bing.net/th/id/OIP-C.c_aJ_eo9jchn5gF4sVANKAHaE8?w=233&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7",
          commodityName: "夏季短袖T恤女妈妈夏装宽松大码2019新款蝙蝠袖上衣韩版条纹T恤女",
          commodityColor: "墨绿色",
          commoditySize: "L105-115",
          commodityPrice: "445.9",
          num: 1
        }
      ],
    }
  },
  methods: {
    getTotalPrice: function () {
      let price = 0
      this.shopcar.forEach((item, index) => {
        price += item.num * item.commodityPrice
      })
      this.totalPrice = price.toFixed(2)
    },
    btn(bool, index) {
      let shopIndex = this.shopcar[index];
      if (bool) {
        //+
        shopIndex.num++;
      } else {
        if (shopIndex.num <= 1) {
          return;
        }
        shopIndex.num--;
      }
      this.getTotalPrice()
    },
    del(index) {
      this.shopcar.splice(index, 1);
      this.getTotalPrice();
    }
  },
  mounted() {
    this.getTotalPrice()
  }
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;
  background: #f5f5f5;
}

header {
  height: 50px;
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
  background: #fff;
  z-index: 999;
  border-bottom: 1px solid #ccc;
  text-align: center;
  line-height: 50px;
}

.container {
  width: 100%;
  background: #fff;
  padding: 40px 0;
}

.container>.item+.item {
  border-top: 1px solid #ccc;
}

.logo {
  height: 40px;
  display: flex;
  align-items: center;
}

.logo img {
  width: 20px;
  height: 20px;
}

.logo span {
  color: #888;
  font-size: 12px;
  margin-left: 20px;
}

.details {
  background: #f5f5f5;
  width: 100%;
  padding: 15px;
  display: flex;
  font-size: 12px;
}

.details img {
  width: 90px;
  height: 90px;
}

.details_list {
  margin-left: 15px;
  color: #888;
}

.list-more span {
  display: block;
  color: #ccc;
}

.list-price {
  font-size: 14px;
}

.num {
  color: #888;
  padding: 15px;
  display: flex;
  justify-content: space-between;
}

.num button {
  width: 31px;
  height: 25px;
  background: #e0e0e0;
  color: #58595b;
  outline: none;
}

.num input {
  width: 37px;
  height: 25px;
  border: none;
  text-align: center;
  background: #fff;
}

footer {
  width: 100%;
  height: 50px;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 997;
  border-top: 1px solid #ccc;
  background: #fff;
  display: flex;
  justify-content: space-between;
}

.footer-left {
  flex: 1;
  text-align: right;
  line-height: 50px;
  font-size: 16px;
  padding-right: 10px;
}

.footer-left span {
  color: red;
}

.footer-right {
  background: red;
  color: #fff;
  width: 150px;
  height: 50px;
  line-height: 50px;
  text-align: center;
}

.mint-cell-swipe-button {
  line-height: 12px;
}
</style>

main.js：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'

import Mint from 'mint-ui'
import 'mint-ui/lib/style.css'

Vue.use(Mint)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})