You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
545 lines
15 KiB
545 lines
15 KiB
<template>
|
|
<!-- 购物车 -->
|
|
<div class="shoppingCart wrapper_1200">
|
|
<div class="title wrapper_1200">
|
|
<nuxt-link class="home" to="/">首页 > </nuxt-link>购物车
|
|
</div>
|
|
<div class="cartList" v-if="cartValid.length">
|
|
<div class="header acea-row row-middle">
|
|
<div class="allSelect acea-row row-center-wrapper" @click="allChecked">
|
|
<div class="checkbox-wrapper">
|
|
<label class="well-check">
|
|
<input
|
|
type="checkbox"
|
|
name=""
|
|
value=""
|
|
:checked="isAllSelect"
|
|
@click="allChecked"
|
|
/>
|
|
<i class="icon"></i>
|
|
<span class="checkAll">全选</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="info acea-row row-center-wrapper">商品信息</div>
|
|
<div class="price acea-row row-center-wrapper">单价</div>
|
|
<div class="num acea-row row-center-wrapper">数量</div>
|
|
<div class="money acea-row row-center-wrapper">金额</div>
|
|
<div class="operate acea-row row-center-wrapper">操作</div>
|
|
</div>
|
|
<div class="body">
|
|
<div
|
|
class="item acea-row row-middle"
|
|
v-for="(item, index) in cartValid"
|
|
:key="index"
|
|
>
|
|
<div class="allSelect acea-row row-center-wrapper">
|
|
<div class="checkbox-wrapper">
|
|
<label class="well-check">
|
|
<input
|
|
type="checkbox"
|
|
name=""
|
|
value=""
|
|
:checked="item.checked"
|
|
@click="switchSelect(index)"
|
|
/>
|
|
<i class="icon"></i>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="info acea-row row-middle">
|
|
<div class="pictrue">
|
|
<img
|
|
v-if="item.productInfo.attrInfo"
|
|
:src="item.productInfo.attrInfo.image"
|
|
/>
|
|
<img v-else :src="item.productInfo.image" />
|
|
</div>
|
|
<div class="text">
|
|
<div class="name line2">{{ item.productInfo.store_name }}</div>
|
|
<div class="infor" v-if="item.productInfo.attrInfo">
|
|
属性：{{ item.productInfo.attrInfo.suk }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="price acea-row row-center-wrapper">¥{{ item.truePrice }}</div>
|
|
<div class="num acea-row row-center-wrapper">
|
|
<div
|
|
class="iconfont icon-shangpinshuliang-jian"
|
|
:class="item.cart_num <= 1 ? 'grey' : ''"
|
|
@click.prevent="reduce(index)"
|
|
></div>
|
|
<!--<div class="numCon">{{item.cart_num}}</div>-->
|
|
<input class="numCon" v-model="item.cart_num" @input="inputNum(item)" />
|
|
<button
|
|
:disabled="item.cart_num >= item.trueStock"
|
|
class="iconfont icon-shangpinshuliang-jia"
|
|
:class="item.cart_num >= item.trueStock ? 'grey' : ''"
|
|
@click.prevent="plus(index)"
|
|
></button>
|
|
</div>
|
|
<div class="money acea-row row-center-wrapper font-color">
|
|
¥{{ comsys.Mul(item.truePrice, item.cart_num) }}
|
|
</div>
|
|
<div class="operate acea-row row-center-wrapper" @click="delgoods(item)">
|
|
<span class="iconfont icon-shanchu"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="cartList invalid" v-if="cartInvalid.length">
|
|
<div class="body">
|
|
<div
|
|
class="item acea-row row-middle"
|
|
v-for="(item, index) in cartInvalid"
|
|
:key="index"
|
|
>
|
|
<div class="allSelect"></div>
|
|
<div class="info acea-row row-center-wrapper">
|
|
<div class="pictrue">
|
|
<img
|
|
:src="item.productInfo.attrInfo.image"
|
|
v-if="item.productInfo.attrInfo"
|
|
/>
|
|
<img :src="item.productInfo.image" v-else />
|
|
</div>
|
|
<div class="text">
|
|
<div class="name line2 grey">{{ item.productInfo.store_name }}</div>
|
|
<div class="infor" v-if="item.productInfo.attrInfo">
|
|
属性：{{ item.productInfo.attrInfo.suk }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="price acea-row row-center-wrapper grey">¥{{ item.truePrice }}</div>
|
|
<div class="num acea-row row-center-wrapper">
|
|
<div class="iconfont icon-shangpinshuliang-jian grey"></div>
|
|
<div class="numCon grey">{{ item.cart_num }}</div>
|
|
<div class="iconfont icon-shangpinshuliang-jia grey"></div>
|
|
</div>
|
|
<div class="money acea-row row-center-wrapper font-color grey">
|
|
¥{{ comsys.Mul(item.truePrice, item.cart_num) }}
|
|
</div>
|
|
<div class="operate acea-row row-center-wrapper" @click="delgoods(item)">
|
|
<span class="iconfont icon-shanchu"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="footer acea-row row-between-wrapper"
|
|
v-if="cartValid.length || cartInvalid.length"
|
|
>
|
|
<div class="num">已选 {{ refundNum }} 件商品</div>
|
|
<div class="acea-row row-middle">
|
|
<div class="total">
|
|
合计：<span class="font-color">¥{{ countmoney }}</span>
|
|
</div>
|
|
<div class="bnt bg-color" @click="subOrder">去结算</div>
|
|
</div>
|
|
</div>
|
|
<div class="noCart" v-if="!cartValid.length && !cartInvalid.length">
|
|
<div class="pictrue"><img src="../assets/images/noCart1.png" /></div>
|
|
<div class="tip">亲，购物车还是空的哟~</div>
|
|
<nuxt-link to="/" class="goIndex">继续逛</nuxt-link>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
const CHECKED_IDS = "cart_checked";
|
|
export default {
|
|
name: "shoppingCart",
|
|
auth: "guest",
|
|
data() {
|
|
return {
|
|
cartValid: [],
|
|
cartInvalid: [],
|
|
isAllSelect: false,
|
|
checkedIds: [],
|
|
countmoney: 0, //购物车产品总价；
|
|
refundNum: 0,
|
|
};
|
|
},
|
|
async asyncData({ app }) {},
|
|
fetch({ store }) {
|
|
store.commit("isHeader", true);
|
|
store.commit("isFooter", true);
|
|
},
|
|
head() {
|
|
return {
|
|
title: "购物车-" + this.$store.state.titleCon,
|
|
};
|
|
},
|
|
created() {
|
|
this.getCartList();
|
|
},
|
|
mounted() {
|
|
document.body.setAttribute("style", "background:#ffffff");
|
|
},
|
|
beforeDestroy() {
|
|
document.body.removeAttribute("style");
|
|
},
|
|
methods: {
|
|
inputNum(item) {
|
|
let that = this;
|
|
item.cart_num =
|
|
parseInt(item.cart_num) >= item.trueStock ? item.trueStock : item.cart_num;
|
|
item.cart_num =
|
|
parseInt(item.cart_num) <= 1 || isNaN(parseInt(item.cart_num))
|
|
? 1
|
|
: item.cart_num;
|
|
that.countMoney();
|
|
let conNum = 0,
|
|
num = 0;
|
|
that.cartValid.forEach((i) => {
|
|
conNum += parseInt(i.cart_num);
|
|
if (i.checked) {
|
|
num = num + parseInt(i.cart_num);
|
|
}
|
|
});
|
|
that.cartInvalid.forEach((i) => {
|
|
conNum += parseInt(i.cart_num);
|
|
});
|
|
that.refundNum = num;
|
|
that.$store.commit("cartNum", conNum);
|
|
that.syncCartNum(item);
|
|
},
|
|
//立即下单；
|
|
subOrder: function () {
|
|
let that = this,
|
|
list = that.cartValid,
|
|
id = [];
|
|
list.forEach(function (val) {
|
|
if (val.checked === true) {
|
|
id.push(val.id);
|
|
}
|
|
});
|
|
if (id.length === 0) {
|
|
that.$message.error("请选择产品");
|
|
return;
|
|
}
|
|
// let checkedIds = that.$cookies.get(CHECKED_IDS) || [];
|
|
// id.forEach(item=>{
|
|
// let index = checkedIds.indexOf(item);
|
|
// if(index>-1){
|
|
// checkedIds.splice(index, 1);
|
|
// }
|
|
// });
|
|
// that.$cookies.set(CHECKED_IDS, checkedIds);
|
|
|
|
// if(!checkedIds.length){
|
|
// that.$store.commit("cartNum", 0);
|
|
// }
|
|
this.$router.push({
|
|
path: "/order_confirm",
|
|
query: { cartId: id.join(","), refundNum: this.refundNum },
|
|
});
|
|
},
|
|
//删除商品；
|
|
delgoods: function (item) {
|
|
let that = this;
|
|
let checkedIds = that.$cookies.get(CHECKED_IDS) || [];
|
|
let index = checkedIds.indexOf(item.id);
|
|
if (index > -1) {
|
|
checkedIds.splice(index, 1);
|
|
}
|
|
that.$cookies.set(CHECKED_IDS, checkedIds);
|
|
that.$axios.post("/cart/del", { ids: item.id.toString() }).then((res) => {
|
|
that.$message.success("删除成功");
|
|
that.$store.commit("cartNum", that.$store.state.cartnumber - item.cart_num);
|
|
that.getCartList();
|
|
that.countMoney();
|
|
});
|
|
},
|
|
getCartList() {
|
|
let that = this;
|
|
that.$axios.get("/pc/get_cart_list").then((res) => {
|
|
that.cartValid = res.data.valid;
|
|
that.cartInvalid = res.data.invalid;
|
|
let checkedIds = that.$cookies.get(CHECKED_IDS) || [];
|
|
if (!Array.isArray(checkedIds)) checkedIds = [];
|
|
let num = 0;
|
|
that.cartValid.forEach((cart) => {
|
|
cart.checked = true;
|
|
num = num + parseInt(cart.cart_num);
|
|
that.checkedIds.push(cart.id);
|
|
});
|
|
that.refundNum = num;
|
|
that.isAllSelect = that.checkedIds.length === that.cartValid.length;
|
|
that.countMoney();
|
|
});
|
|
},
|
|
//加
|
|
plus: function (index) {
|
|
let that = this;
|
|
let list = that.cartValid[index];
|
|
list.cart_num++;
|
|
if (list.cart_num >= list.trueStock) {
|
|
that.$set(list, "cart_num", list.trueStock);
|
|
}
|
|
that.$store.commit("cartNum", that.$store.state.cartnumber + 1);
|
|
if (list.checked) {
|
|
that.refundNum = that.refundNum + 1;
|
|
}
|
|
that.countMoney();
|
|
that.syncCartNum(list);
|
|
},
|
|
//减
|
|
reduce: function (index) {
|
|
let that = this;
|
|
let list = that.cartValid[index];
|
|
list.cart_num--;
|
|
if (list.cart_num < 1) {
|
|
that.$set(list, "cart_num", 1);
|
|
} else {
|
|
that.$store.commit("cartNum", that.$store.state.cartnumber - 1);
|
|
if (list.checked) {
|
|
that.refundNum = that.refundNum - 1;
|
|
}
|
|
}
|
|
that.countMoney();
|
|
that.syncCartNum(list);
|
|
},
|
|
syncCartNum(cart) {
|
|
if (!cart.sync)
|
|
cart.sync = window.debounce(() => {
|
|
this.$axios.post("/cart/num", {
|
|
id: cart.id,
|
|
number: Math.max(cart.cart_num, 1) || 1,
|
|
});
|
|
}, 500);
|
|
cart.sync();
|
|
},
|
|
//单选
|
|
switchSelect: function (index) {
|
|
let that = this,
|
|
cart = that.cartValid[index],
|
|
i = this.checkedIds.indexOf(cart.id);
|
|
cart.checked = !cart.checked;
|
|
|
|
if (i !== -1) this.checkedIds.splice(i, 1);
|
|
if (cart.checked) {
|
|
this.checkedIds.push(cart.id);
|
|
}
|
|
let len = that.cartValid.length;
|
|
let selectnum = [],
|
|
num = 0;
|
|
for (let i = 0; i < len; i++) {
|
|
if (that.cartValid[i].checked === true) {
|
|
selectnum.push(true);
|
|
num = num + parseInt(that.cartValid[i].cart_num);
|
|
}
|
|
}
|
|
that.refundNum = num;
|
|
that.isAllSelect = selectnum.length === len;
|
|
that.$set(that, "cartValid", that.cartValid);
|
|
that.$set(that, "isAllSelect", that.isAllSelect);
|
|
that.$cookies.set(CHECKED_IDS, that.checkedIds);
|
|
that.countMoney();
|
|
},
|
|
//全选
|
|
allChecked: function () {
|
|
let that = this;
|
|
let selectAllStatus = that.isAllSelect;
|
|
selectAllStatus = !selectAllStatus;
|
|
let checkedIds = [];
|
|
that.cartValid.forEach((cart) => {
|
|
cart.checked = selectAllStatus;
|
|
if (selectAllStatus) checkedIds.push(cart.id);
|
|
});
|
|
that.$set(that, "cartValid", that.cartValid);
|
|
that.$set(that, "isAllSelect", selectAllStatus);
|
|
that.checkedIds = checkedIds;
|
|
that.$cookies.set(CHECKED_IDS, checkedIds);
|
|
that.countMoney();
|
|
if (that.isAllSelect) {
|
|
let num = 0;
|
|
that.cartValid.forEach((item) => {
|
|
num = num + parseInt(item.cart_num);
|
|
});
|
|
this.refundNum = num;
|
|
} else {
|
|
this.refundNum = 0;
|
|
}
|
|
},
|
|
//总共价钱；
|
|
countMoney: function () {
|
|
let that = this;
|
|
let carmoney = 0;
|
|
let array = that.cartValid;
|
|
for (let i = 0; i < array.length; i++) {
|
|
if (array[i].checked === true) {
|
|
carmoney = this.comsys.Add(
|
|
carmoney,
|
|
this.comsys.Mul(array[i].cart_num, array[i].truePrice)
|
|
);
|
|
}
|
|
}
|
|
that.countmoney = carmoney;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.grey {
|
|
color: #d0d0d0 !important;
|
|
}
|
|
.shoppingCart {
|
|
cursor: pointer;
|
|
.noCart {
|
|
text-align: center;
|
|
.pictrue {
|
|
width: 274px;
|
|
height: 174px;
|
|
margin: 111px auto 0 auto;
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.tip {
|
|
font-size: 14px;
|
|
color: #969696;
|
|
margin-top: 20px;
|
|
}
|
|
.goIndex {
|
|
width: 90px;
|
|
height: 35px;
|
|
border: 1px solid #282828;
|
|
border-radius: 6px;
|
|
text-align: center;
|
|
line-height: 35px;
|
|
font-size: 14px;
|
|
color: #282828;
|
|
margin: 24px auto 100px auto;
|
|
display: block;
|
|
}
|
|
}
|
|
.title {
|
|
height: 59px;
|
|
line-height: 59px;
|
|
color: #999999;
|
|
.home {
|
|
color: #282828;
|
|
}
|
|
}
|
|
.cartList {
|
|
.header {
|
|
height: 54px;
|
|
background: #f9f9f9;
|
|
}
|
|
.allSelect {
|
|
width: 100px;
|
|
position: relative;
|
|
.checkAll {
|
|
margin-left: 30px;
|
|
}
|
|
}
|
|
.info {
|
|
width: 400px;
|
|
padding-left: 30px;
|
|
}
|
|
.price {
|
|
width: 215px;
|
|
}
|
|
.num {
|
|
width: 150px;
|
|
}
|
|
.money {
|
|
width: 270px;
|
|
}
|
|
.body {
|
|
border: 1px solid #efefef;
|
|
border-top: 0;
|
|
.item {
|
|
& ~ .item {
|
|
border-top: 1px dotted #e2e2e2;
|
|
}
|
|
height: 170px;
|
|
.info {
|
|
.pictrue {
|
|
width: 90px;
|
|
height: 90px;
|
|
margin-right: 14px;
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.text {
|
|
width: 264px;
|
|
.infor {
|
|
margin-top: 10px;
|
|
font-size: 12px;
|
|
color: #d0d0d0;
|
|
}
|
|
}
|
|
}
|
|
.price {
|
|
font-size: 16px;
|
|
}
|
|
.num {
|
|
.iconfont {
|
|
width: 40px;
|
|
height: 36px;
|
|
line-height: 36px;
|
|
border: 1px solid #d3d3d3;
|
|
text-align: center;
|
|
color: #707070;
|
|
background-color: #fff;
|
|
}
|
|
.numCon {
|
|
width: 54px;
|
|
height: 36px;
|
|
border: 0;
|
|
border-top: 1px solid #d3d3d3;
|
|
border-bottom: 1px solid #d3d3d3;
|
|
font-size: 15px;
|
|
color: #5a5a5a;
|
|
text-align: center;
|
|
line-height: 36px;
|
|
outline: none;
|
|
}
|
|
}
|
|
.money {
|
|
font-size: 16px;
|
|
}
|
|
.operate {
|
|
color: #d0d0d0;
|
|
.iconfont {
|
|
font-size: 20px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.invalid {
|
|
margin-top: 20px;
|
|
border-top: 1px solid #efefef;
|
|
}
|
|
.footer {
|
|
height: 82px;
|
|
background: #f9f9f9;
|
|
margin-top: 60px;
|
|
padding-left: 30px;
|
|
margin-bottom: 30px;
|
|
.total {
|
|
font-size: 16px;
|
|
.font-color {
|
|
font-size: 22px;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
.bnt {
|
|
width: 160px;
|
|
height: 82px;
|
|
text-align: center;
|
|
line-height: 82px;
|
|
font-size: 18px;
|
|
color: #fff;
|
|
margin-left: 30px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|