1、目录结构:
2、Index
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<meta name="format-detection" content="telephone=no"/>
<title>商城购物车</title>
<link rel="stylesheet" type="text/css" href="css/shopcar.css">
<script type="text/javascript" src="js/auto-size.js"></script>
</head>
<body>
<div id="app">
<div class="fix_head">
<a href="javascript:history.go(-1);" class="back">
<img src="images/back.jpg">
</a>
<p>购物车</p>
<a href="home.html" class="home">
<img src="images/home.jpg">
</a>
</div>
<div class="sc_h"></div>
<div class="lb"
v-for="(lb,index) in waresList"
:key="index"
>
<div class="check" @click="checkWare(index)">
<div class="xz":class="[lb.isChecked?'checkOn':' ']"></div>
<!-- 给上方div加上checkOn class则可以变成选中效果 -->
<!-- <div class="xz checkOn"></div> -->
</div>
<img :src="lb.wareImg" class="spt">
<div class="mid">
<p class="name">{{lb.wareName}}</p>
<p class="color">{{lb.wareNums}}</p>
<div class="jj">
<span @click="btn(false,index)" class="jia">-</span>
<input class="num" v-model="lb.wareNums">
<span @click="btn(true,index)" class="jian">+</span>
</div>
</div>
<div class="jgq">
<div class="price"><p>¥<span class="pri">{{lb.warePrice | saveTwoZero}}</span></p></div>
<div class="price_de">
<p>
<del>{{lb.warePrimeCost | saveTwoZero}}</del>
</p>
</div>
<img @click="del(index)" src="images/del.jpg" class="del">
</div>
</div>
<div class="fix_bottom ">
<div class="qx" id="qx" data="0" :class="[isAllChecked ?'checkOn' : '']"@click="allCheckBtn"></div>
<span style="float:left;line-height:0.8rem;">全选</span>
<div class="zjq">
<p class="p1">合计:¥
<span id="zj">{{totalPrice}}</span>
</p>
<p>含运费</p>
</div>
<a id="js">结算(<span id="zsl">{{totalPrice}}</span>)</a>
</div>
</div>
</body>
</html>
<script src="./js/vue.js"></script>
<script>
new Vue({
el: "#app",
filters:{
saveTwoZero(value){
return value.toFixed(2)
}
},
data: {
totalPrice: 0,
waresList: [
{
wareImg: "./images/ware1.jpg", // 商品图片
wareName: "【直营】华硕猛禽RTX3060/3070Ti台式机电脑游戏吃鸡独立显卡2060", // 商品名称
wareNorms: "显示内存:12GB", // 商品规格
wareNums: 1, // 商品数量
warePrimeCost: 7999, // 商品原价
warePrice: 2799 ,// 商品现价
},
{
wareImg: "./images/ware2.jpg",
wareName: "【天猫V榜推荐】Dell/戴尔4K台式机电脑显示器27英寸U2720QM台式电脑护眼液晶显示屏HDR设计高清IPS电竞游戏", // 商品名称
wareNorms: "屏幕材质:IPS",
wareNums: 1,
warePrimeCost: 4299,
warePrice: 3899,
},
{
wareImg: "./images/ware3.jpg",
wareName: "【24期免息】ALIENWARE外星人AW510K游戏机械键盘全键无冲Cherry红轴单键RGB炫彩灯光男士办公游戏礼物送礼", // 商品名称
wareNorms: "键盘类型:青轴",
wareNums: 1,
warePrimeCost: 1999,
warePrice: 1479,
},
{
wareImg: "./images/ware4.jpg",
wareName: "【官方旗舰店】罗技G PRO X SUPERLIGHT无线鼠标GPW二代双模电竞游戏可充电脑笔记本专吃鸡魔兽世界狗屁王", // 商品名称
wareNorms: "赠品:胖虎帆布包",
wareNums: 1,
warePrimeCost: 999,
warePrice: 899,
},
{
wareImg: "./images/ware5.jpg",
wareName: "【直营】SONY/索尼WF-1000XM4 降噪耳机入耳式通话真无线蓝牙耳机", // 商品名称
wareNorms: "类型:蓝牙连接",
wareNums: 1,
warePrimeCost: 1699,
warePrice: 1499,
}
]
},
computed:{
//这个商品属性是否为ture,由所有的商品的ischecked属性控制
isAllChecked(){
for(let i=0;i<this.waresList.length;i++){
if (!this.waresList[i].isChecked){
return false
}
}
return true
}
},
methods: {
allCheckBtn(){
let status=this.isAllChecked?false:true
this.waresList.forEach(n=>{
this.$set(
n,"isChecked",status
)
})
this.getTotalPrice()
},
getTotalPrice() {
// 总计
let price = 0;
this.waresList.forEach((lb, index) => {
if (lb.isChecked){
price += lb.wareNums * lb.warePrice
}
})
console.log(price)
this.totalPrice = price
},
btn(bool, index) {
//按钮
let shopIndex=this.waresList[index]
if (bool) {
//加
shopIndex.wareNums++;
} else {
//减
if (shopIndex.wareNums<=1){
return;
}
shopIndex.wareNums--;
}
this.getTotalPrice();
},
del(index){ //删除
if (confirm("请问是否要删除"+this.waresList[index].wareName+"吗?"))
this.waresList.splice(index,1);
this.getTotalPrice()
},
checkWare(index){
//$set方法用于修改对象或者数组的值,这个方法可以实现视图的实时更新
//this.waresList[index],"isChecked", !this.waresList[index].isChecked
this.$set(
this.waresList[index],
"isChecked",
!this.waresList[index].isChecked
)
this.getTotalPrice()
}
},
mounted() {
this.getTotalPrice()
},
})
</script>
3、CSS代码:
@media only screen and (min-device-width : 320px) and (max-device-width : 1024px) { select:focus, textarea:focus, input:focus { font-size: 16px !important; } }
body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,input,legend,li,ol,p,select,table,td,textarea,th,ul {
margin: 0;
padding: 0;
font-family: '微软雅黑';
}
a{
text-decoration: none;
color: #a3a3a3;
}
ul{
list-style: none;
}
input{
display:block;
-webkit-user-modify: read-write-plaintext-only;
cursor:pointer;
-webkit-appearance:none;
border: 0;
outline: none;
}
body{
background: #f2f2f2;
}
.fix_head{
position: fixed;
width: 100%;
height: 0.9rem;
border-bottom: 1px solid #ccc;
background: #fafafa;
}
.fix_head .back{
display: block;
width: 0.65rem;
height: 0.9rem;
float: left;
}
.fix_head .back img{
display: block;
width: 0.65rem;
height: 0.9rem;
}
.fix_head p{
float: left;
margin-left: 2.12rem;
font-size: 0.28rem;
color: #1a1a1a;
line-height: 0.9rem;
}
.fix_head .home{
display: block;
width: 0.65rem;
height: 0.9rem;
float: right;
}
.fix_head .home img{
display: block;
width: 0.65rem;
height: 0.9rem;
}
.sc_h{
width: 100%;
height: 0.9rem;
}
.lb{
display: block;
width: 100%;
height: 2rem;
margin-top: 0.1rem;
border-bottom: 1px solid #ccc;
background: #fafafa;
}
.lb .check{
width: 0.7rem;
height: 2rem;
float: left;
}
.lb .check .xz{
width: 0.4rem;
height: 0.4rem;
margin-top: 0.8rem;
margin-left: 0.2rem;
display: block;
background-image: url(../images/check.jpg);
background-size: 0.4rem 0.4rem;
}
.lb .spt{
display: block;
width: 1.36rem;
height: 1.4rem;
float: left;
margin-top: 0.26rem;
}
.lb .mid{
width: 2.52rem;
height: 1.7rem;
float: left;
margin-left: 0.18rem;
margin-top: 0.16rem;
}
.lb .mid .name{
font-size: 0.22rem;
color: #333;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
padding-top: 0.1rem;
}
.lb .mid .color{
font-size: 0.22rem;
color: #8a8a8a;
display: block;
margin-top: 0.16rem;
}
.lb .mid .jj{
width: 1.5rem;
height: 0.4rem;
border: 1px solid #dcdcdc;
border-radius: 2px;
margin-top: 0.1rem;
}
.lb .mid .jj .jia{
display: block;
font-size: 0.4rem;
text-align: center;
line-height: 0.4rem;
width: 0.49rem;
height: 0.4rem;
float: left;
}
.lb .mid .jj .num{
display: block;
float: left;
text-align: center;
line-height: 0.4rem;
width: 0.48rem;
height: 0.4rem;
font-size: 0.24rem;
border-left: 1px solid #dcdcdc;
border-right: 1px solid #dcdcdc;
}
.lb .mid .jj .jian{
display: block;
font-size: 0.28rem;
text-align: center;
line-height: 0.4rem;
width: 0.49rem;
height: 0.4rem;
float: right;
}
.lb .jgq{
float: right;
margin-right: 0.18rem;
width: 1.34rem;
height: 2rem;
position: relative;
}
.lb .jgq .price{
width: 100%;
height: 0.34rem;
font-size: 0.24rem;
font-weight: bold;
color: #e90327;
display: block;
float: right;
margin-top: 0.26rem;
}
.lb .jgq .price p{
float: right;
}
.lb .jgq .price_de p{
float: right;
}
.lb .jgq .price_de{
width: 100%;
height: 0.24rem;
font-size: 0.2rem;
font-weight: bold;
color: #999;
display: block;
float: right;
margin-top: 0.1rem;
}
.lb .jgq .del{
display: block;
width: 0.45rem;
height: 0.46rem;
float: right;
margin-bottom: 0.4rem;
position: absolute;
bottom: -0.2rem;
/* left: 0.8rem; */
right: 0;
}
#qx{
width: 0.4rem;
height: 0.4rem;
margin-top: 0.8rem;
margin-left: 0.2rem;
display: block;
background-image: url(../images/check.jpg);
background-size: 0.4rem 0.4rem;
float: left;
margin-left: 0.2rem;
margin-top: 0.2rem;
line-height: 0.8rem;
}
.fix_bottom{
position: fixed;
width: 100%;
height: 0.8rem;
background: #fafafa;
bottom: 0;
font-size: 0.24rem;
color: #333;
}
.fix_bottom .zjq{
float: left;
width: 1.96rem;
height: 0.8rem;
margin-left: 0.7rem;
}
#zj{
color: #e90327;
}
.fix_bottom .zjq .p1{
font-size: 0.26rem;
line-height: 0.4rem;
font-weight: bold;
}
#js{
display: block;
width: 2.5rem;
height:0.8rem;
background: #e90327;
color: #fff;
font-size: 0.28rem;
font-weight: bold;
text-align: center;
line-height: 0.8rem;
float: right;
}
.checkOn{
background-image: url("../images/check_on.jpg") !important;
}
4、auto-size
/**
* Created by lovo_bdk on 15-12-17.
*/
!(function(win, doc){
function setFontSize() {
// 获取window 宽度
// zepto实现 $(window).width()就是这么干的
var winWidth = window.innerWidth;
doc.documentElement.style.fontSize = (winWidth / 640) * 100 + 'px' ;
}
var evt = 'onorientationchange' in win ? 'orientationchange' : 'resize';
var timer = null;
win.addEventListener(evt, function () {
clearTimeout(timer);
timer = setTimeout(setFontSize, 300);
}, false);
win.addEventListener("pageshow", function(e) {
if (e.persisted) {
clearTimeout(timer);
timer = setTimeout(setFontSize, 300);
}
}, false);
//初始化
setFontSize();
}(window, document));
5、效果: