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

vue2.0和mint-ui实现仿购物车增删

• 运行效果
• 实现思路
• 新建工程
• 项目文件目录结构
• 项目整体代码

运行效果

能够实现如下功能：

• 利用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"><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 = 0this.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: ''
})

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！