<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="layui-v2.2.5/layui-v2.2.5/layui/css/layui.css">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div id="warp">
<p id="aler" :class="{con1:flag}"fla><span>{{imfor}}</span></p>
<ul class="cont">
<li v-for="(item,index) in arr">
<img :src="item.img_url" alt="">
<p>{{item.des}}</p>
<span>{{"¥"+item.money}}</span>
<button class="layui-btn" @click="add_car(index)">
<i class="layui-icon"></i> 添加购物车
</button>
</li>
</ul>
<div id="car" :class="{con2:car_flag}">
<p class="kk" v-if="kk">购物车里什么也没有,快去逛逛吧!!!</p>
<div class="qd_del" v-if="qd_flag">
<div>
<p>确定删除该商品?</p>
<button class="layui-btn" @click="c_yes">确定</button>
<button class="layui-btn" @click="c_no">取消</button>
</div>
</div>
<span class="t" @click="look_car">{{cheak_car}}<i class="layui-icon"></i>
<span class="layui-badge dtnum">{{sps}}</span>
</span>
<ul class="list">
<li v-for="(item,index) in arr_car">
<input type="checkbox" class="xz" :checked="item.flag_a" @click="seles(index)">
<img :src="item.img_url" alt="">
<div class="cunt">
<p class="tit">{{item.des}}</p>
<p><span class="m">{{"¥"+item.money}}</span><span><button @click="jian(index)">-</button><input type="text" v-model="item.s_num"><button @click="add(index)">+</button></span></p>
</div>
</li>
</ul>
<div class="sele">
<p>
<span class="qx">
<input type="checkbox" :checked="qx_flag" @click="quanx" >
<span>全选</span>
</span>
<span class="mon">
<span>共计:</span><span style="color: red;font-size: 20px;">{{total}}</span><span>元</span>
</span>
</p>
<p>
<button class="layui-btn layui-btn-sm del" @click="del_goods">
<i class="layui-icon"></i>删除
</button>
</p>
<p>
<button class="layui-btn layui-btn-sm" style="width: 200px;" @click="go">
<i class="layui-icon"></i>去买单
</button>
</p>
</div>
</div>
<div class="settle" v-if="tot_flag">
<div class="set_pag">
<button class="layui-btn layui-btn-sm close" @click="q_qd">
<i class="layui-icon">ဆ</i>
</button>
<h1>结算清单</h1>
<div class="set_tit">
<p>
<i class="layui-icon" style="font-size: 30px;color: red"></i>结算成功
</p>
<p>本次共花费了<span style="color: red;font-size: 30px;">{{total}}</span>元,得到了<span style="color: red;font-size: 30px;">{{nums}}</span>件装备</p>
</div>
<h2>花费详情</h2>
<ul class="goods_list">
<li>
<span>商品</span>
<span>件数</span>
<span>价钱</span>
</li>
<li v-for="(item,index) in arr_t">
<span class="txt">{{item.des}}</span>
<span>{{item.s_num+"件"}}</span>
<span>{{item.ztot+"元"}}</span>
</li>
</ul>
</div>
</div>
</div>
</body>
<script src="js/vue.min.js"></script>
<script src="js/index.js"></script>
</html>
附js部分
var app=new Vue({
el:"#warp",
data:{
arr:[
{
img_url:"images/01.jpg",
des:"【新年货】小米 红米5 全面屏手机 全网通版 2GB+16GB 黑色 移动联通电信4G手机 双卡双待",
money:699,
s_num:1,
flag_a:false,
},
{
img_url:"images/02.jpg",
des:"AGM X2 4G全网通 户外三防智能手机 防水防摔长待机 双卡双待 轻奢小牛皮 黑色鳄鱼纹皮质版 6G+64G",
money:700,
s_num:1,
flag_a:false,
},
{
img_url:"images/03.jpg",
des:"【新年货】荣耀 V9 全网通 高配版 6GB+64GB 极光蓝 移动联通电信4G手机 双卡双待",
money:800,
s_num:1,
flag_a:false,
},
{
img_url:"images/04.jpg",
des:"【送水晶项链】vivo X20 全面屏双摄拍照手机 4GB+64GB 玫瑰金 移动联通电信全网通4G手机 双卡双待",
money:850,
s_num:1,
flag_a:false,
},
{
img_url:"images/05.jpg",
des:"【新年货】华为 HUAWEI Mate 10 Pro 全网通 6GB+128GB 摩卡金 移动联通电信4G手机 双卡双待",
money:900,
s_num:1,
flag_a:false,
},
{
img_url:"images/06.jpg",
des:"【狗年JOY纪念版】华为（HUAWEI）nova 2S 全面屏四摄 6+64G全网通 曜石黑",
money:1000,
s_num:1,
flag_a:false,
},
{
img_url:"images/07.jpg",
des:"【新年货】华为 HUAWEI nova 2S 全面屏四摄 4GB +64GB 曜石黑 移动联通电信4G手机 双卡双待",
money:1100,
s_num:1,
flag_a:false,
},
{
img_url:"images/08.jpg",
des:"【新年货】华为畅享7 3GB+32GB 黑色 移动联通电信4G手机 双卡双待",
money:1200,
s_num:1,
flag_a:false,
},
{
img_url:"images/09.jpg",
des:"【新年货】华为 HUAWEI P10 Plus 6GB+64GB 钻雕金 移动联通电信4G手机 双卡双待",
money:1300,
s_num:1,
flag_a:false,
},
{
img_url:"images/10.jpg",
des:"Apple iPhone X (A1865) 256GB 深空灰色 移动联通电信4G手机",
money:1400,
s_num:1,
flag_a:false,
},
{
img_url:"images/11.jpg",
des:"【新年货】锤子 坚果Pro 64GB 细红线特别版 全网通 移动联通电信4G手机 双卡双待",
money:1500,
s_num:1,
flag_a:false,
},
{
img_url:"images/12.jpg",
des:"【新年货】锤子 坚果 Pro 2 酒红色 全面屏双摄 4+64GB 全网通 移动联通电信4G手机 双卡双待",
money:1600,
s_num:1,
flag_a:false,
},
],
arr_car:[],
imfor:"已添到加购物车",
flag:false,
time:"timer",
flag_add:true,
qx_flag:false,
car_flag:true,
cheak_car:'查看购物车',
arr_t:[],
tot_flag:false,
qd_flag:false,
kk:true,
},
methods:{
add_car:function(index){
this.kk=false;
this.flag_add=true;
for(var i=0;i<this.arr_car.length;i++){
if (this.arr[index].img_url==this.arr_car[i].img_url) {
this.imfor="购物车中已有该商品";
this.flag_add=false;
}
}
if (this.flag_add) {
this.imfor="已添到加购物车";
this.arr_car.push(this.arr[index]);
}
clearTimeout(this.time);
this.flag=true;
this.time=setTimeout(function(){
this.flag=false
}.bind(this),2000)
},
jian:function(index){
this.arr_car[index].s_num--;
if (this.arr_car[index].s_num<1) {
this.arr_car[index].s_num=1
}
},
add:function(index){
this.arr_car[index].s_num++;
},
seles:function(index){
this.arr_car[index].flag_a=!this.arr_car[index].flag_a;
var bl=this.arr_car.some(function(val){
if(val.flag_a==false){return true}
});
if (!bl) {
this.qx_flag=true;
}else{
this.qx_flag=false;
}
},
quanx:function(){
this.qx_flag=!this.qx_flag;
if (this.qx_flag) {
this.arr_car.forEach(function(val){
val.flag_a=true;
})
}else{
this.arr_car.forEach(function(val){
val.flag_a=false;
})
}
},
look_car:function(){
this.car_flag=!this.car_flag;
this.cheak_car=this.car_flag?"查看购物车":'收起购物车';
},
del_goods:function(){
this.qd_flag=true;
},
c_yes:function(){
for(var i=this.arr_car.length-1;i>=0;i--){
if (this.arr_car[i].flag_a) {
this.arr_car[i].flag_a=false;
this.arr_car.splice(i,1);
}
}
if (this.arr_car.length==0) {
this.qx_flag=false;
this.kk=true;
}
this.qd_flag=false;
},
c_no:function(){
this.qd_flag=false;
},
go:function(){
this.arr_car.forEach(function(val){
if (val.flag_a) {
val.ztot=val.s_num*val.money
this.arr_t.push(val);
}
},this)
this.tot_flag=true;
},
q_qd:function(){
this.tot_flag=false;
for(var x=this.arr_car.length-1;x>=0;x--){
if (this.arr_car[x].flag_a) {
this.arr_car[x].flag_a=false;
this.arr_car.splice(x,1);
}
}
if (this.arr_car.length==0) {
this.qx_flag=false;
this.kk=true;
}
this.arr_t=[];
}
},
computed:{
total:function(){
var totals=0;
this.arr_car.forEach(function(val){
if (val.flag_a) {
totals+=val.s_num*val.money
}
},this)
return totals
},
nums:function(){
var numss=0;
this.arr_t.forEach(function(val){
numss+=val.s_num;
},this)
return numss
},
sps:function(){
return this.arr_car.length;
}
}
})
网友评论