<template>
|
<div class="mycart">
|
<van-nav-bar
|
class="navBar"
|
title="我的购物车"
|
@click-left="onClickLeft"
|
left-arrow
|
>
|
<template #right>
|
<span v-if="cartList.length > 0" @click="showDel">{{
|
isDel ? "完成" : "管理"
|
}}</span>
|
</template>
|
</van-nav-bar>
|
<div class="recordBox">
|
<div class="orderListBox">
|
<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
|
<van-list
|
v-model="loading"
|
:finished="finished"
|
finished-text="没有更多了"
|
@load="onLoad"
|
>
|
<template slot="finished" name="finished">
|
<div v-if="pictureList.length == 0">
|
<van-empty description="暂无数据" />
|
</div>
|
<div v-else>
|
没有更多了
|
</div>
|
</template>
|
<div
|
class="orderList"
|
v-for="(item, index) in pictureList"
|
:key="'p' + index"
|
>
|
<div class="orderContent">
|
<div class="contentItem">
|
<van-checkbox
|
class="itemCheck"
|
v-model="item.isChecked"
|
isChecked-color="#ee0a24"
|
@click="initPrice"
|
></van-checkbox>
|
<div class="imgBox">
|
<img class="bookImg" :src="item.icon" alt="" />
|
</div>
|
<div class="txtBox">
|
<div class="title">{{ item.title }}</div>
|
<div class="priceBox">
|
<div class="price">
|
¥
|
{{
|
item.price
|
? tool.toDecimal2(item.price)
|
: tool.toDecimal2(0)
|
}}
|
</div>
|
<span class="num">x1</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</van-list>
|
</van-pull-refresh>
|
</div>
|
</div>
|
<div class="payWrap">
|
<div class="spline" style="height: 8px"></div>
|
<div class="payBtnBox">
|
<div class="readBtnBox">
|
<div class="checkBox">
|
<van-checkbox
|
v-model="allChecked"
|
isChecked-color="#ee0a24"
|
@click="checkAll"
|
>全选</van-checkbox
|
>
|
</div>
|
<div class="totalPriecBox" v-if="!isDel">
|
<div>已选数量： {{ selectedNum }}</div>
|
<div>
|
<span>合计:</span>
|
<span class="totalPrice"
|
>¥ {{ tool.toDecimal2(totalPrice) }}</span
|
>
|
</div>
|
</div>
|
</div>
|
<div class="buyBtn" v-if="!isDel" @click="toPay">去结算</div>
|
<div class="buyBtn" v-if="isDel" @click="delCart">
|
删除
|
</div>
|
</div>
|
</div>
|
<!-- 购买按钮占位 -->
|
<div class="emptypayBox"></div>
|
</div>
|
</template>
|
|
<script>
|
import Vue from "vue";
|
import { mapState } from "vuex";
|
import {
|
List,
|
PullRefresh,
|
Checkbox,
|
NavBar,
|
Toast,
|
Dialog,
|
Empty
|
} from "vant";
|
Vue.use(List);
|
Vue.use(PullRefresh);
|
Vue.use(Checkbox);
|
Vue.use(NavBar);
|
Vue.use(Toast);
|
Vue.use(Dialog);
|
Vue.use(Empty);
|
export default {
|
data() {
|
return {
|
// 订单列表
|
cartList: [],
|
// 商品
|
pictureList: [],
|
// 全选
|
allChecked: false,
|
// 总价格
|
totalPrice: 0,
|
// 管理删除按钮
|
isDel: false,
|
// 选中商品的数量
|
selectedNum: 0,
|
paginationData: {
|
page: 1,
|
limit: 6,
|
totalCount: 0,
|
totalPage: 0
|
},
|
//分页
|
loading: false,
|
finished: false,
|
refreshing: false
|
};
|
},
|
computed: {
|
...mapState(["userInfo"])
|
},
|
created() {
|
this.getUserCartList();
|
},
|
methods: {
|
//获取用户购物车
|
getUserCartList() {
|
this.loading = true;
|
|
let data = {
|
size: 999,
|
start: 0
|
};
|
this.MG.store.getShoppingCartProductList(data).then(res => {
|
// 判断是否已加载完数据
|
let list = [];
|
res.datas.forEach(element => {
|
if (
|
element.productMonWithLinkDto.links[0].storeRefCode ==
|
"tourism_digitalTextbooks"
|
) {
|
list.push(element);
|
}
|
});
|
|
this.finished = true;
|
var courseList = list.map(item => {
|
return {
|
id: item.productMonWithLinkDto.product.id,
|
title: item.productMonWithLinkDto.product.name,
|
icon: this.tool.getPublicImage(
|
item.productMonWithLinkDto.product.icon,
|
"800"
|
),
|
price: item.saleMethod.price,
|
type: item.saleMethod.type,
|
isChecked: false,
|
linkId: item.id,
|
name: item.saleMethod.name,
|
description: item.saleMethod.description,
|
saleMethodId: item.saleMethod.id
|
};
|
});
|
|
this.cartList = courseList;
|
this.pictureList = courseList;
|
this.finished = true;
|
this.loading = false;
|
this.refreshing = false;
|
// 重新计算总价
|
this.initPrice();
|
});
|
},
|
// 计算总价
|
initPrice() {
|
this.selectedNum = 0;
|
let price = 0;
|
for (let i = 0; i < this.cartList.length; i++) {
|
if (this.cartList[i].isChecked) {
|
this.selectedNum += 1;
|
price = price + (this.cartList[i].price - 0);
|
}
|
}
|
this.totalPrice = price;
|
if (this.cartList.length == this.selectedNum && this.selectedNum != 0) {
|
this.allChecked = true;
|
} else {
|
this.allChecked = false;
|
}
|
},
|
// 点击全选
|
checkAll() {
|
let price = 0;
|
if (!this.allChecked) {
|
for (let item of this.cartList) {
|
item.isChecked = false;
|
}
|
this.selectedNum = 0;
|
price = 0;
|
} else {
|
for (let item of this.cartList) {
|
item.isChecked = true;
|
if (item.price) {
|
price += item.price - 0;
|
}
|
this.selectedNum = this.cartList.length;
|
}
|
}
|
this.totalPrice = price;
|
},
|
// 删除购物车
|
delCart() {
|
Dialog.confirm({
|
title: "温馨提示",
|
message: "确定从购物车移除所选商品吗？"
|
})
|
.then(() => {
|
let listdata = [];
|
this.cartList.map(item => {
|
if (item.isChecked) {
|
listdata.push(item.linkId);
|
}
|
});
|
const data = {
|
ids: listdata
|
};
|
this.MG.store
|
.delShoppingCart(data)
|
.then(res => {
|
if (res) {
|
Toast.success("移除成功");
|
this.showDel();
|
this.onRefresh();
|
} else {
|
Toast.fail("移除失败，请稍后重试");
|
}
|
})
|
.catch(function(error) {
|
console.log(error);
|
});
|
})
|
.catch(() => {
|
Toast.fail("已取消操作");
|
});
|
},
|
showDel() {
|
this.isDel = !this.isDel;
|
},
|
onClickLeft() {
|
this.$router.go(-1);
|
},
|
//到购买页面
|
toPay() {
|
let selectId = [];
|
if (this.cartList.filter(item => item.isChecked).length > 0) {
|
for (let item of this.cartList.filter(item => item.isChecked)) {
|
selectId.push(item.linkId);
|
}
|
let data = {
|
linkIds: [...selectId]
|
};
|
this.MG.store.shoppingCartCreateOrder(data).then(res => {
|
this.$router.push({
|
path: "/pay",
|
query: {
|
orderNum: res.orderNumber
|
}
|
});
|
});
|
} else {
|
Toast.fail("请选择要购买的商品");
|
}
|
},
|
// 上拉加载
|
onLoad() {
|
this.getUserCartList();
|
},
|
// 下拉刷新
|
onRefresh() {
|
this.getUserCartList();
|
this.finished = true;
|
}
|
}
|
};
|
</script>
|
|
<style scoped>
|
.sortTitle {
|
padding: 20px 35px;
|
background: #eee;
|
font-size: 26px;
|
color: #999;
|
}
|
.orderContent {
|
padding: 20px;
|
border-bottom: 1px solid #ddd;
|
}
|
.contentItem {
|
display: flex;
|
}
|
.txtBox {
|
display: flex;
|
flex: 1;
|
flex-direction: column;
|
justify-content: space-between;
|
margin-left: 15px;
|
}
|
.imgBox {
|
width: 105px;
|
height: 140px;
|
margin: 0 auto;
|
overflow: hidden;
|
border-radius: 5px;
|
box-shadow: 0 3px 6px 1px #00000029;
|
}
|
.imgBox img {
|
width: auto;
|
height: auto;
|
max-width: 100%;
|
max-height: 100%;
|
display: inline-block;
|
}
|
.txtBox .title {
|
font-size: 16px;
|
color: #333333;
|
font-weight: bold;
|
}
|
.priceBox {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
}
|
.priceBox .price {
|
font-size: 18px;
|
font-weight: bold;
|
color: #f24b3b;
|
}
|
.priceBox .num {
|
color: #999;
|
font-size: 16px;
|
}
|
/* 购买相关按钮 */
|
.payWrap {
|
position: fixed;
|
left: 0;
|
bottom: 0;
|
width: 100%;
|
background: #fff;
|
z-index: 3;
|
}
|
.payBtnBox {
|
height: 50px;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
z-index: 3;
|
padding-bottom: env(safe-area-inset-bottom);
|
}
|
.payBtnBox .readBtnBox {
|
display: flex;
|
align-items: center;
|
width: 60%;
|
padding: 0 20px;
|
box-sizing: border-box;
|
}
|
.checkBox {
|
display: flex;
|
align-items: center;
|
width: 120px;
|
}
|
|
.itemCheck {
|
margin-right: 15px;
|
}
|
.totalPriecBox > div {
|
display: inline-block;
|
}
|
.totalPrice {
|
color: #f24b3b;
|
margin-left: 30px;
|
}
|
.payBtnBox .buyBtn {
|
width: 40%;
|
text-align: center;
|
line-height: 50px;
|
color: #ffffff;
|
font-size: 18px;
|
background: #f24b3b;
|
}
|
.paypayBtnBoxBox .redBtn {
|
background: #3c85ff;
|
}
|
|
.payBtnBox .addBtn {
|
color: #333;
|
background: #fff;
|
border-top: 1px solid #ddd;
|
}
|
.emptypayBox {
|
position: relative;
|
width: 100%;
|
height: 98px;
|
}
|
</style>
|
<style>
|
.mycart .van-nav-bar__right span {
|
font-size: 16px;
|
color: #2b68cd;
|
}
|
</style>
|
