Vue购物车项目
实现效果图如下：
购物车项目主要实现的功能有：添加购买商品、删除已选购商品、改变已选购商品的数量、随机打乱推荐商品顺序、响应式计算出商品金额总计、响应式计算节省金额、响应式计算总积分。
在实现中对响应式数据用三种方式编写：
①深度监听：
如果 要监听一个对象中的属性，属性最高也是第二层了，watch可能监听不到，监听数组对象中的属性，所有要使用深度监听。代码如下：
watch: {
//深度监听
buy: {
handler() {
this.jiesuan();
},
deep: true
}
},
运用深度监听来监听buy数组对象中的属性发生改变时及input框改变时，就调用jiesuan()结算方法，对总个以选购列表进行计算。深度监听是将input的值传到buy数组对象中的属性number
②input框中的数据使用一个数组接收，在监听数组发生变化及input框改变时，调用结算jiesuan()结算方法，与上面的深度监听不同，input的值是传到数组arr中。
watch: {
arr(n,m){
this.jiesuan();
}
},
③使用计算属性computed来监听已勾选商品中数据发生改变，就会重新计算。与上面的第二种方法不同的是，是将三个计算出的结果放在一个数组中。
computed: {
//结算函数
arrs:function() {
var arrs=[];
var m=0,n=0,x=0;
for (var j of this.buy) {
this.nums = 0;
for (var i in this.buy) {
if (j == this.buy[i]) {
this.nums = i;
}
}
m = m + j.jifen * this.arr[this.nums];
n = n + j.ddjia * this.arr[this.nums];
x = x + (j.scjia - j.ddjia) * this.arr[this.nums];
}
arrs.push(x,m,n)
return arrs;
},
},
当已选购商品中input框数据发生改变时，这个计算属性就会计算，通过循环遍历出arr数组中的数据和buy数组中各个属性遍历出，计算出总值。
以深度监听为例：
数据：
data: {
//已选商品数组
buy: [
{ name: "私募（首部披露资本博弈秘密的金融...", jifen: 189, scjia: 32, ddjia: 18.90, number: 1 },
{ name: "小团圆（张爱玲最神秘小说遗稿）", jifen: 173, scjia: 28, ddjia: 17.30, number: 1 },
{ name: "不抱怨的世界（畅销全球80国的世界...", jifen: 154, scjia: 24.80, ddjia: 15.40, number: 1 },
{ name: "福玛特双桶洗衣机XPB20-78S", jifen: 3580, scjia: 458, ddjia: 358.00, number: 1 },
{ name: "PHP和MySQL Web开发（原书第4版）", jifen: 712, scjia: 95, ddjia: 71.20, number: 1 },
{ name: "法布尔昆虫记", jifen: 1307, scjia: 198, ddjia: 130.70, number: 1 },
],
//推荐商品数组
tuij: [
{ bookname: "Javascript DOM编程艺术", booksc: 39.00, bookdd: 29.30 },
{ bookname: "解禁（当当网独家首发）", booksc: 28.00, bookdd: 19.40 },
{ bookname: "地王之王（金融危机下房地产行...", booksc: 32.80, bookdd: 25.10 },
{ bookname: "逃庄", booksc: 36.00, bookdd: 27.70 },
{ bookname: "深入浅出MySQL数据库开发、优...", booksc: 59.00, bookdd: 47.20 },
{ bookname: "大玩家（马未都、王刚推荐！央...", booksc: 34.80, bookdd: 20.60 },
{ bookname: "都市风水师--官场风水小说：-...", booksc: 38.80, bookdd: 30.50 },
{ bookname: "国戏（以麻将术语解读宦海沉浮...", booksc: 25.00, bookdd: 17.30 },
],
jies: 224.3,//节省金额
zongjf: 6115,//总积分
sjie: 611.5,//商品金额
},
功能：
①添加函数
//添加函数
goumai(itme) {
var cou = 0;
var str;
for (var i of this.buy) {
if (itme.bookname == i.name) {
str = i;
cou++;
}
}
if (cou > 0) {
str.number = parseInt(str.number) + 1;
this.jiesuan();
} else {
this.buy.push({ "name": itme.bookname, "jifen": itme.bookdd * 10, "scjia": itme.booksc, "ddjia": itme.bookdd, "number": 1 });
this.jiesuan();
}
},
通过在html中点击方法传了一个对应的对象参数，循环遍历已购数组查找在已购数组中是否存在，如果存在就在input的值+1，如果没有存在就在已购数组中添加一个新的对象。
②结算函数
//结算函数
jiesuan() {
this.zongjf = 0;
this.sjie = 0;
this.jies = 0;
for (var j of this.buy) {
this.zongjf = this.zongjf + j.jifen * j.number;
this.sjie = this.sjie + j.ddjia * j.number;
this.jies = this.jies + (j.scjia - j.ddjia) * j.number;
}
},
通过循环遍历出已购数组对其中的各个值得累加。
③删除函数
//删除函数
dele(inx) {
this.buy.splice(inx, 1);
this.jiesuan();
},
通过点击删除事件传过来的下标参数来输出已购数组中对应下标的对象。
④减号函数
//减号函数
jian(obj) {
if (parseInt(obj.number) <= 0) {
obj.number = 0;
} else {
obj.number = parseInt(obj.number) - 1;
}
},
通过点击减号事件传对应对象参数来对对应的对象中的number值减1.
⑤加号函数
//加号函数
add(obj) {
obj.number = parseInt(obj.number) + 1;
},
通过点击加号事件传的对应对象参数来给对应对象的number属性加1.
⑥打乱推荐数组（洗牌算法）
//洗牌算法
xipai(){
var len=this.tuij.length;
var t,i;
while(len){
i=Math.floor(Math.random()*len--);
t=this.tuij[len];
this.tuij[len]=this.tuij[i];
this.tuij[i]=t;
}
}
//数据渲染前调用洗牌算法
beforeMount(){
this.xipai();
},
洗牌算法是从数组的最后一个与前面的随机的一个互换位置，从最后到第一个。循环互换。洗牌算法要在数据渲染前就调用。在界面加载出来的时候就已经完成打乱。
实现各个功能和界面的代码如下：
深度监听实现代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>购物车</title>
<link rel="stylesheet" type="text/css" href="./css/shopping.css" />
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<div class="subject">
<!--我的购物车-->
<div class="center_logo">
<img style="margin-right: 5px;" src="img/shopping_myshopping.gif" />全场免运费活动中
</div>
<div class="center">
<div class="center_menu">根据您挑选的商品，当当为您推荐</div>
<div class="center_centen" style="position: relative;">
<table cellpadding="0" cellspacing="0">
<tbody>
<tr v-for="(itme,index) in tuij" style="width: 45%; height:38px;;float: left; margin-left: 35px;line-height: 38px">
<td class="shu" width="220px">{{itme.bookname}}</td>
<td class="qian_no" width="80px">￥{{itme.booksc.toFixed(2)}}</td>
<td class="qian" width="80px">￥{{itme.bookdd.toFixed(2) }}</td>
<td class="dian">
<a @click="goumai(itme)">购买</a>
</td>
</tr>
</tbody>
</table>
<div class="zhongxian"> </div>
</div>
</div>
<!--选择的商品-->
<div class="shping">您已选购一下商品</div>
<div class="xuangou">
<table id="xuanz" cellpadding="0" cellspacing="0" style=" text-align: center;">
<thead>
<tr style="background-color: #D7E4C6;">
<th width="380px" style="text-align: left; padding-left: 20px;">商品名</th>
<th width="100px">单品积分</th>
<th width="100px">市场价</th>
<th width="120px">当当价</th>
<th width="140px">数量</th>
<th width="100px">删除</th>
</tr>
</thead>
<tbody>
<tr v-for="(itmes,index) in buy">
<td style="text-align: left; color: #23669A; padding-left: 20px;">{{itmes.name}}</td>
<td>{{itmes.jifen}}</td>
<td>￥{{itmes.scjia.toFixed(2)}}</td>
<td>￥{{itmes.ddjia.toFixed(2)}}（{{parseInt(itmes.ddjia/itmes.scjia*100)}}折）</td>
<td>
<button @click="jian(itmes)">-</button>
<input name="shuliang" class="shul" type="text" v-model="itmes.number" @blur="shiz(itmes)">
<button @click="add(itmes)">+</button>
</td>
<td>
<a class="shuchu" @click="dele(index)">删除</a>
</td>
</tr>
</tbody>
</table>
<!--总计-->
<div class="zongji">
<div class="zong">
<div class="zongji_lf">
<p>您共节省：￥
<span id="jies" style="color: #B54112;">{{jies.toFixed(2)}}</span>
</p>
<p>可获得商品积分：
<span id="zjifen" style="color: #B54112;">{{zongjf.toFixed(2)}}</span>
</p>
</div>
<div class="last_logo">
<img src="img/register_cont.gif" />
</div>
<div class="zongji_ri">
<p style="font-size: 16px; display: inline-block; margin-left: 10px; font-weight: 700;">商品金额总计：￥
<span id="jinez" style="color: #B54112; font-size: 14px;">{{sjie.toFixed(2)}}</span>
</p>
<button class="tijiao" @click="butt()"></button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data: {
//已选商品数组
buy: [
{ name: "私募（首部披露资本博弈秘密的金融...", jifen: 189, scjia: 32, ddjia: 18.90, number: 1 },
{ name: "小团圆（张爱玲最神秘小说遗稿）", jifen: 173, scjia: 28, ddjia: 17.30, number: 1 },
{ name: "不抱怨的世界（畅销全球80国的世界...", jifen: 154, scjia: 24.80, ddjia: 15.40, number: 1 },
{ name: "福玛特双桶洗衣机XPB20-78S", jifen: 3580, scjia: 458, ddjia: 358.00, number: 1 },
{ name: "PHP和MySQL Web开发（原书第4版）", jifen: 712, scjia: 95, ddjia: 71.20, number: 1 },
{ name: "法布尔昆虫记", jifen: 1307, scjia: 198, ddjia: 130.70, number: 1 },
],
//推荐商品数组
tuij: [
{ bookname: "Javascript DOM编程艺术", booksc: 39.00, bookdd: 29.30 },
{ bookname: "解禁（当当网独家首发）", booksc: 28.00, bookdd: 19.40 },
{ bookname: "地王之王（金融危机下房地产行...", booksc: 32.80, bookdd: 25.10 },
{ bookname: "逃庄", booksc: 36.00, bookdd: 27.70 },
{ bookname: "深入浅出MySQL数据库开发、优...", booksc: 59.00, bookdd: 47.20 },
{ bookname: "大玩家（马未都、王刚推荐！央...", booksc: 34.80, bookdd: 20.60 },
{ bookname: "都市风水师--官场风水小说：-...", booksc: 38.80, bookdd: 30.50 },
{ bookname: "国戏（以麻将术语解读宦海沉浮...", booksc: 25.00, bookdd: 17.30 },
],
jies: 224.3,//节省金额
zongjf: 6115,//总积分
sjie: 611.5,//商品金额
},
watch: {
//深度监听
buy: {
handler() {
this.jiesuan();
},
deep: true
}
},
methods: {
//添加函数
goumai(itme) {
var cou = 0;
var str;
for (var i of this.buy) {
if (itme.bookname == i.name) {
str = i;
cou++;
}
}
if (cou > 0) {
str.number = parseInt(str.number) + 1;
this.jiesuan();
} else {
this.buy.push({ "name": itme.bookname, "jifen": itme.bookdd * 10, "scjia": itme.booksc, "ddjia": itme.bookdd, "number": 1 });
this.jiesuan();
}
},
//结算函数
jiesuan() {
this.zongjf = 0;
this.sjie = 0;
this.jies = 0;
for (var j of this.buy) {
this.zongjf = this.zongjf + j.jifen * j.number;
this.sjie = this.sjie + j.ddjia * j.number;
this.jies = this.jies + (j.scjia - j.ddjia) * j.number;
}
},
//删除函数
dele(inx) {
this.buy.splice(inx, 1);
this.jiesuan();
},
//减号函数
jian(obj) {
if (parseInt(obj.number) <= 0) {
obj.number = 0;
} else {
obj.number = parseInt(obj.number) - 1;
}
},
//加号函数
add(obj) {
obj.number = parseInt(obj.number) + 1;
},
//结算按钮
butt() {
this.jiesuan();
alert("您是要去结算吗？您要支付的金额为："+this.sjie+"元");
},
//里面为空时变为0
shiz(itmes){
if (itmes.number==""||itmes.number==null) {
itmes.number = 0;
}
},
//洗牌算法
xipai(){
var len=this.tuij.length;
var t,i;
while(len){
i=Math.floor(Math.random()*len--);
t=this.tuij[len];
this.tuij[len]=this.tuij[i];
this.tuij[i]=t;
}
}
},
//数据渲染前调用洗牌算法
beforeMount(){
this.xipai();
},
})
</script>
</html>
监听input数组值实现代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>购物车</title>
<link rel="stylesheet" type="text/css" href="./css/shopping.css" />
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<div class="subject">
<!--我的购物车-->
<div class="center_logo">
<img style="margin-right: 5px;" src="img/shopping_myshopping.gif" />全场免运费活动中
</div>
<div class="center">
<div class="center_menu">根据您挑选的商品，当当为您推荐</div>
<div class="center_centen" style="position: relative;">
<table cellpadding="0" cellspacing="0">
<tbody>
<tr v-for="(itme,index) in tuij" style="width: 45%; height:38px;;float: left; margin-left: 35px;line-height: 38px">
<td class="shu" width="220px">{{itme.bookname}}</td>
<td class="qian_no" width="80px">￥{{itme.booksc.toFixed(2)}}</td>
<td class="qian" width="80px">￥{{itme.bookdd.toFixed(2) }}</td>
<td class="dian">
<a @click="goumai(itme)">购买</a>
</td>
</tr>
</tbody>
</table>
<div class="zhongxian"> </div>
</div>
</div>
<!--选择的商品-->
<div class="shping">您已选购一下商品</div>
<div class="xuangou">
<table id="xuanz" cellpadding="0" cellspacing="0" style=" text-align: center;">
<thead>
<tr style="background-color: #D7E4C6;">
<th width="380px" style="text-align: left; padding-left: 20px;">商品名</th>
<th width="100px">单品积分</th>
<th width="100px">市场价</th>
<th width="120px">当当价</th>
<th width="140px">数量</th>
<th width="100px">删除</th>
</tr>
</thead>
<tbody>
<tr v-for="(itmes,index) in buy">
<td style="text-align: left; color: #23669A; padding-left: 20px;">{{itmes.name}}</td>
<td>{{itmes.jifen}}</td>
<td>￥{{itmes.scjia.toFixed(2)}}</td>
<td>￥{{itmes.ddjia.toFixed(2)}}（{{parseInt(itmes.ddjia/itmes.scjia*100)}}折）</td>
<td>
<button @click="jian(index)">-</button>
<input name="shuliang" class="shul" type="text" v-model="arr[index]" @blur="shiz(index)">
<button @click="add(index)">+</button>
</td>
<td>
<a class="shuchu" @click="dele(index)">删除</a>
</td>
</tr>
</tbody>
</table>
<!--总计-->
<div class="zongji">
<div class="zong">
<div class="zongji_lf">
<p>您共节省：￥
<span id="jies" style="color: #B54112;">{{jies.toFixed(2)}}</span>
</p>
<p>可获得商品积分：
<span id="zjifen" style="color: #B54112;">{{zongjf.toFixed(2)}}</span>
</p>
</div>
<div class="last_logo">
<img src="img/register_cont.gif" />
</div>
<div class="zongji_ri">
<p style="font-size: 16px; display: inline-block; margin-left: 10px; font-weight: 700;">商品金额总计：￥
<span id="jinez" style="color: #B54112; font-size: 14px;">{{sjie.toFixed(2)}}</span>
</p>
<button class="tijiao" @click="butt()"></button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data: {
//已选商品数组
buy: [
{ name: "私募（首部披露资本博弈秘密的金融...", jifen: 189, scjia: 32, ddjia: 18.90, number: 1 },
{ name: "小团圆（张爱玲最神秘小说遗稿）", jifen: 173, scjia: 28, ddjia: 17.30, number: 1 },
{ name: "不抱怨的世界（畅销全球80国的世界...", jifen: 154, scjia: 24.80, ddjia: 15.40, number: 1 },
{ name: "福玛特双桶洗衣机XPB20-78S", jifen: 3580, scjia: 458, ddjia: 358.00, number: 1 },
{ name: "PHP和MySQL Web开发（原书第4版）", jifen: 712, scjia: 95, ddjia: 71.20, number: 1 },
{ name: "法布尔昆虫记", jifen: 1307, scjia: 198, ddjia: 130.70, number: 1 },
],
//推荐商品数组
tuij: [
{ bookname: "Javascript DOM编程艺术", booksc: 39.00, bookdd: 29.30 },
{ bookname: "解禁（当当网独家首发）", booksc: 28.00, bookdd: 19.40 },
{ bookname: "地王之王（金融危机下房地产行...", booksc: 32.80, bookdd: 25.10 },
{ bookname: "逃庄", booksc: 36.00, bookdd: 27.70 },
{ bookname: "深入浅出MySQL数据库开发、优...", booksc: 59.00, bookdd: 47.20 },
{ bookname: "大玩家（马未都、王刚推荐！央...", booksc: 34.80, bookdd: 20.60 },
{ bookname: "都市风水师--官场风水小说：-...", booksc: 38.80, bookdd: 30.50 },
{ bookname: "国戏（以麻将术语解读宦海沉浮...", booksc: 25.00, bookdd: 17.30 },
],
arr: [1, 1, 1, 1, 1, 1],
jies: 224.3,//节省金额
zongjf: 6115,//总积分
sjie: 611.5,//商品金额
nums: 0,
},
watch: {
arr(n,m){
this.jiesuan();
}
},
methods: {
//添加函数
goumai(itme) {
var cou = 0;
var str;
for (var i of this.buy) {
this.nums = 0
for (var k in this.buy) {
if (itme.bookname== this.buy[k].name) {
this.nums =k;
}
}
if (itme.bookname == i.name) {
str = i;
cou++;
}
}
if (cou > 0) {
this.arr[this.nums] = parseInt(this.arr[this.nums]) + 1;
this.jiesuan();
} else {
vm.$set(this.arr,this.arr.length,1);
this.buy.push({ "name": itme.bookname, "jifen": itme.bookdd * 10, "scjia": itme.booksc, "ddjia": itme.bookdd, "number": 1 });
this.jiesuan();
}
},
//结算函数
jiesuan() {
this.zongjf = 0;
this.sjie = 0;
this.jies = 0;
for (var j of this.buy) {
this.nums = 0;
for (var i in this.buy) {
if (j == this.buy[i]) {
this.nums = i;
}
}
console.log(this.nums);
this.zongjf = this.zongjf + j.jifen * this.arr[this.nums];
this.sjie = this.sjie + j.ddjia * this.arr[this.nums];
this.jies = this.jies + (j.scjia - j.ddjia) * this.arr[this.nums];
}
},
//删除函数
dele(inx) {
this.buy.splice(inx, 1);
this.arr.splice(inx,1)
this.jiesuan();
},
//减号函数
jian(index) {
if (parseInt(this.arr[index]) <= 0) {
vm.$set(this.arr,index,0)
} else {
var ex= parseInt(this.arr[index]) - 1;
vm.$set(this.arr,index,ex)
}
},
//加号函数
add(index) {
if (parseInt(this.arr[index]) <= 0) {
vm.$set(this.arr,index,0)
}
var adds = parseInt(this.arr[index]) + 1;
vm.$set(this.arr,index,adds);
},
//结算按钮
butt() {
this.jiesuan();
alert("您是要去结算吗？您要支付的金额为：" + this.sjie.toFixed(2) + "元");
},
shiz(index){
if (this.arr[index]==""||this.arr[index]==null) {
vm.$set(this.arr,index,0)
}
},
//洗牌算法
xipai() {
var len = this.tuij.length;
var t, i;
while (len) {
i = Math.floor(Math.random() * len--);
t = this.tuij[len];
this.tuij[len] = this.tuij[i];
this.tuij[i] = t;
}
}
},
//数据渲染前调用洗牌算法
beforeMount() {
this.xipai();
},
})
</script>
</html>
计算属性computed监听实现代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>购物车</title>
<link rel="stylesheet" type="text/css" href="./css/shopping.css" />
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<div class="subject">
<!--我的购物车-->
<div class="center_logo">
<img style="margin-right: 5px;" src="img/shopping_myshopping.gif" />全场免运费活动中
</div>
<div class="center">
<div class="center_menu">根据您挑选的商品，当当为您推荐</div>
<div class="center_centen" style="position: relative;">
<table cellpadding="0" cellspacing="0">
<tbody>
<tr v-for="(itme,index) in tuij" style="width: 45%; height:38px;;float: left; margin-left: 35px;line-height: 38px">
<td class="shu" width="220px">{{itme.bookname}}</td>
<td class="qian_no" width="80px">￥{{itme.booksc.toFixed(2)}}</td>
<td class="qian" width="80px">￥{{itme.bookdd.toFixed(2) }}</td>
<td class="dian">
<a @click="goumai(itme)">购买</a>
</td>
</tr>
</tbody>
</table>
<div class="zhongxian"> </div>
</div>
</div>
<!--选择的商品-->
<div class="shping">您已选购一下商品</div>
<div class="xuangou">
<table id="xuanz" cellpadding="0" cellspacing="0" style=" text-align: center;">
<thead>
<tr style="background-color: #D7E4C6;">
<th width="380px" style="text-align: left; padding-left: 20px;">商品名</th>
<th width="100px">单品积分</th>
<th width="100px">市场价</th>
<th width="120px">当当价</th>
<th width="140px">数量</th>
<th width="100px">删除</th>
</tr>
</thead>
<tbody>
<tr v-for="(itmes,index) in buy">
<td style="text-align: left; color: #23669A; padding-left: 20px;">{{itmes.name}}</td>
<td>{{itmes.jifen}}</td>
<td>￥{{itmes.scjia.toFixed(2)}}</td>
<td>￥{{itmes.ddjia.toFixed(2)}}（{{parseInt(itmes.ddjia/itmes.scjia*100)}}折）</td>
<td>
<button @click="jian(index)">-</button>
<input name="shuliang" class="shul" type="text" v-model="arr[index]" @blur="shiz(index)">
<button @click="add(index)">+</button>
</td>
<td>
<a class="shuchu" @click="dele(index)">删除</a>
</td>
</tr>
</tbody>
</table>
<!--总计-->
<div class="zongji">
<div class="zong">
<div class="zongji_lf">
<p>您共节省：￥
<span id="jies" style="color: #B54112;">{{arrs[0].toFixed(2)}}</span>
</p>
<p>可获得商品积分：
<span id="zjifen" style="color: #B54112;">{{arrs[1].toFixed(2)}}</span>
</p>
</div>
<div class="last_logo">
<img src="img/register_cont.gif" />
</div>
<div class="zongji_ri">
<p style="font-size: 16px; display: inline-block; margin-left: 10px; font-weight: 700;">商品金额总计：￥
<span id="jinez" style="color: #B54112; font-size: 14px;">{{arrs[2].toFixed(2)}}</span>
</p>
<button class="tijiao" @click="butt()"></button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data: {
//已选商品数组
buy: [
{ name: "私募（首部披露资本博弈秘密的金融...", jifen: 189, scjia: 32, ddjia: 18.90, number: 1 },
{ name: "小团圆（张爱玲最神秘小说遗稿）", jifen: 173, scjia: 28, ddjia: 17.30, number: 1 },
{ name: "不抱怨的世界（畅销全球80国的世界...", jifen: 154, scjia: 24.80, ddjia: 15.40, number: 1 },
{ name: "福玛特双桶洗衣机XPB20-78S", jifen: 3580, scjia: 458, ddjia: 358.00, number: 1 },
{ name: "PHP和MySQL Web开发（原书第4版）", jifen: 712, scjia: 95, ddjia: 71.20, number: 1 },
{ name: "法布尔昆虫记", jifen: 1307, scjia: 198, ddjia: 130.70, number: 1 },
],
//推荐商品数组
tuij: [
{ bookname: "Javascript DOM编程艺术", booksc: 39.00, bookdd: 29.30 },
{ bookname: "解禁（当当网独家首发）", booksc: 28.00, bookdd: 19.40 },
{ bookname: "地王之王（金融危机下房地产行...", booksc: 32.80, bookdd: 25.10 },
{ bookname: "逃庄", booksc: 36.00, bookdd: 27.70 },
{ bookname: "深入浅出MySQL数据库开发、优...", booksc: 59.00, bookdd: 47.20 },
{ bookname: "大玩家（马未都、王刚推荐！央...", booksc: 34.80, bookdd: 20.60 },
{ bookname: "都市风水师--官场风水小说：-...", booksc: 38.80, bookdd: 30.50 },
{ bookname: "国戏（以麻将术语解读宦海沉浮...", booksc: 25.00, bookdd: 17.30 },
],
arr: [1, 1, 1, 1, 1, 1],
nums: 0,
},
computed: {
//结算函数
arrs:function() {
var arrs=[];
var m=0,n=0,x=0;
for (var j of this.buy) {
this.nums = 0;
for (var i in this.buy) {
if (j == this.buy[i]) {
this.nums = i;
}
}
m = m + j.jifen * this.arr[this.nums];
n = n + j.ddjia * this.arr[this.nums];
x = x + (j.scjia - j.ddjia) * this.arr[this.nums];
}
arrs.push(x,m,n)
return arrs;
},
},
methods: {
//添加函数
goumai(itme) {
var cou = 0;
var str;
for (var i of this.buy) {
this.nums = 0
for (var k in this.buy) {
if (itme.bookname == this.buy[k].name) {
this.nums = k;
}
}
if (itme.bookname == i.name) {
str = i;
cou++;
}
}
if (cou > 0) {
this.arr[this.nums] = parseInt(this.arr[this.nums]) + 1;
this.jiesuan();
} else {
vm.$set(this.arr, this.arr.length, 1);
this.buy.push({ "name": itme.bookname, "jifen": itme.bookdd * 10, "scjia": itme.booksc, "ddjia": itme.bookdd, "number": 1 });
this.jiesuan();
}
},
//删除函数
dele(inx) {
this.buy.splice(inx, 1);
this.arr.splice(inx, 1)
this.jiesuan();
},
//减号函数
jian(index) {
if (parseInt(this.arr[index]) <= 0) {
vm.$set(this.arr, index, 0)
} else {
var ex = parseInt(this.arr[index]) - 1;
vm.$set(this.arr, index, ex)
}
},
//加号函数
add(index) {
if (parseInt(this.arr[index]) <= 0) {
vm.$set(this.arr, index, 0)
}
var adds = parseInt(this.arr[index]) + 1;
vm.$set(this.arr, index, adds);
},
//结算按钮
butt() {
alert("您是要去结算吗？您要支付的金额为：" + this.arrs[2] + "元");
},
shiz(index) {
if (this.arr[index] == "" || this.arr[index] == null) {
vm.$set(this.arr, index, 0)
}
},
//洗牌算法
xipai() {
var len = this.tuij.length;
var t, i;
while (len) {
i = Math.floor(Math.random() * len--);
t = this.tuij[len];
this.tuij[len] = this.tuij[i];
this.tuij[i] = t;
}
},
},
//数据渲染前调用洗牌算法
beforeMount() {
this.xipai();
},
})
</script>
</html>