<template>
|
<view class="wrap">
|
<u-toast ref="uToast" /><u-no-network></u-no-network>
|
<u-navbar leftIcon="search" title="购物车" safeAreaInsetTop fixed placeholder @leftClick="goSearch"></u-navbar>
|
|
<!-- 购物车主结构 -->
|
<view v-if="shoppingCard.list && shoppingCard.list.length > 0">
|
<u-checkbox-group placement="column" v-model="cartIds" @change="itemChange">
|
<view class="cart-shoppingcard" v-for="(item, index) in shoppingCard.list" :key="index">
|
<view class="coreshop-flex coreshop-flex-direction-row coreshop-justify-between coreshop-align-center">
|
<view class="cart-shopp-name">
|
<text class="coreshop-font-15 coreshop-text-bold">{{item.products.name}}</text>
|
</view>
|
<view class="coreshop-flex coreshop-flex-direction-row coreshop-justify-between">
|
<u-button :plain="true" size="mini" @click="goGoodsDetail(item.products.goodsId)">浏览</u-button>
|
</view>
|
</view>
|
<view style="height: 12.5px;"></view>
|
<view class="cart-shoppingcard-goods">
|
<view class="cart-shoppingcard-goods-checkbtn">
|
<u-checkbox active-color="red" :name="item.id"></u-checkbox>
|
</view>
|
<image class="cart-shoppingcard-goods-image" :src="item.products.images" mode="widthFix"></image>
|
<view class="cart-shoppingcard-goods-body">
|
<view class="cart-shoppingcard-goods-title" v-if="item.products.spesDesc">{{ item.products.spesDesc }}</view>
|
<view class="cart-shoppingcard-goods-title" v-if="item.products.promotionList">
|
<text class="cart-badge cart-bg-gray" v-for="(v, k) in item.products.promotionList" :key="k" :class="v.type !== 2 ? 'bg-gray' : ''"> {{ v.name }}</text>
|
</view>
|
|
<view class="coreshop-flex coreshop-flex-direction-row coreshop-justify-between coreshop-margin-top-10">
|
<view class="coreshop-flex coreshop-flex-direction-row coreshop-align-center">
|
<text class="cart-shoppingcard-goods-price">￥{{item.products.price}}</text>
|
<text class="coreshop-font-10 coreshop-margin-left-5" v-if="pointSwitch==1 && pointGetModel==2 && pointShowPoint==1 && item.products.points > 0">
|
(送 {{item.products.points}}{{ pointShowName}})
|
</text>
|
</view>
|
<view class="cart-shoppingcard-goods-number">
|
<u-number-box buttonSize="24" integer :name="index" :value="item.nums" ref="index" @change="toNumberChange" :step="1" :min="1" :max="item.products.stock"></u-number-box>
|
</view>
|
</view>
|
|
<view class="coreshop-flex coreshop-flex-direction-row coreshop-justify-between coreshop-margin-top-10">
|
<text class="cart-shoppingcard-remove coreshop-text-green" v-if="item.stockNo">库存不足</text>
|
<text class="cart-shoppingcard-remove coreshop-text-green" v-else-if="item.stockTension">库存紧张</text>
|
<text class="cart-shoppingcard-remove " v-else=""></text>
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="coreshop-flex coreshop-flex-direction-row coreshop-justify-between coreshop-margin-top-10">
|
<view class="coreshop-flex coreshop-flex-direction-row coreshop-font-13" v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.products.pointsDeduction > 0">
|
<view>
|
{{ pointShowName}}兑换价：
|
</view>
|
<view class="coreshop-text-red">
|
{{pointDiscountedProportion * item.products.pointsDeduction }}{{ pointShowName}}+{{ parseFloat(item.products.price - item.products.pointsDeduction).toFixed(2)}}元
|
</view>
|
</view>
|
<view v-else></view>
|
<u-icon name="trash" size="14" @click="removeGoods" :index="index" label="删除" labelSize="12"></u-icon>
|
</view>
|
|
</view>
|
</u-checkbox-group>
|
|
</view>
|
|
<!-- 购物车为空 -->
|
<view v-else>
|
<view class="coreshop-emptybox">
|
<u-empty :icon="$globalConstVars.apiFilesUrl+'/static/images/empty/cart.png'" icon-size="150" text="您的购物车空空如也" mode="list"></u-empty>
|
<navigator class="coreshop-btn" url="/pages/category/index/index" open-type="switchTab">随便逛逛</navigator>
|
</view>
|
</view>
|
|
<view class="coreshop-flex coreshop-flex-direction-row coreshop-justify-between coreshop-align-center cart-footer" v-if="shoppingCard.list && shoppingCard.list.length >= 1">
|
<view class="cart-shoppingcard-checkbtn coreshop-flex coreshop-flex-direction-row coreshop-justify-between coreshop-align-center">
|
<u-checkbox-group v-model="selectAll" @change="itemChangeAll">
|
<u-checkbox name="全选" label="全选" active-color="red"></u-checkbox>
|
</u-checkbox-group>
|
</view>
|
<view class="cart-shoppingcard-count coreshop-flex coreshop-flex-direction-column coreshop-justify-between coreshop-align-left coreshop-margin-right-5" v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && pointShowMoney>0">
|
<view>
|
<text class="cart-text">合计 :</text>
|
<text class="coreshop-font-18 coreshop-text-red">￥{{totalprice}}</text>
|
</view>
|
<view>
|
<text class="coreshop-font-12">{{ pointShowName}}兑换价：</text>
|
<text class="coreshop-font-12 coreshop-text-red">{{pointShowText}}</text>
|
</view>
|
</view>
|
<view class="cart-shoppingcard-count coreshop-flex coreshop-flex-direction-row coreshop-justify-between coreshop-align-center coreshop-margin-right-5" v-else>
|
<text class="cart-text">合计 :</text>
|
<text class="coreshop-font-18 coreshop-text-red">￥{{totalprice}}</text>
|
</view>
|
<view class="cart-shoppingcard-checkout coreshop-bg-red" @tap="checkout">立即结算</view>
|
</view>
|
|
<!-- 登录提示 -->
|
<coreshop-login-modal></coreshop-login-modal>
|
</view>
|
|
</template>
|
<script>
|
export default {
|
data() {
|
return {
|
// 总价
|
totalprice: '0.00',
|
// 选择文本
|
// 购物车数据 可以来自 api 请求或本地数据
|
shoppingCard: {},
|
cartIds: [], //选中ids
|
goSettlement: false, //去结算按钮
|
selectAll: ['全选'],
|
pointShowText: "",
|
pointShowMoney: 0,
|
}
|
},
|
//页面加载
|
onShow() {
|
let userToken = this.$db.get('userToken');
|
if (userToken) {
|
this.cartIds = [];
|
this.getCartData(); //获取购物车数据
|
// 初始化时候计算总价，如果使用api 获取购物车项目在 api 请求完成后执行此函数
|
//this.countTotoal();
|
}
|
},
|
computed: {
|
// 从vuex中获取店铺名称
|
shopName() {
|
return this.$store.state.config.shopName;
|
},
|
GoodsStocksWarn() {
|
return this.$store.state.config.goodsStocksWarn;
|
},
|
pointSwitch() { return this.$store.state.config.pointSwitch },
|
pointShowExchangePrice() { return this.$store.state.config.pointShowExchangePrice },
|
pointDiscountedProportion() { return this.$store.state.config.pointDiscountedProportion },
|
pointExchangeModel() { return this.$store.state.config.pointExchangeModel },
|
pointShowName() { return this.$store.state.config.pointShowName },
|
pointGetModel() { return this.$store.state.config.pointGetModel },
|
pointShowPoint() { return this.$store.state.config.pointShowPoint },
|
},
|
methods: {
|
//数组转字符串
|
arrayToStr: function (array) {
|
return array.toString();
|
},
|
//获取购物车数据
|
getCartData: function () {
|
let _this = this;
|
let cartIds = _this.arrayToStr(_this.cartIds);
|
let data = {
|
ids: cartIds,
|
display: 'all'
|
};
|
this.$u.api.cartList(data).then(res => {
|
if (res.status) {
|
_this.shoppingCard = res.data;
|
_this.showHandle(_this.shoppingCard); //数量设置
|
//console.log(_this.shoppingCard);
|
}
|
});
|
},
|
//渲染前配置数据
|
showHandle: function (data, flag = true) {
|
let _this = this;
|
let goSettlement = false;
|
for (let i in data.list) {
|
//不可能购买0件
|
if (data.list[i].nums < 1) {
|
data.list[i].nums = 1;
|
}
|
//不能买大于库存的数量(库存不足)
|
let stockNo = false;
|
let maxStock = data.list[i].products.stock;
|
if (data.list[i].nums > data.list[i].products.stock) {
|
stockNo = true;
|
maxStock = data.list[i].nums;
|
}
|
data.list[i].maxStock = maxStock;
|
data.list[i].stockNo = stockNo;
|
|
//库存紧张
|
let stockTension = false;
|
if (_this.GoodsStocksWarn >= data.list[i].products.stock) {
|
stockTension = true;
|
}
|
data.list[i].stockTension = stockTension;
|
|
//设置样式
|
data.list[i].minStatus = 'normal';
|
data.list[i].maxStatus = 'normal';
|
if (data.list[i].nums == 1) {
|
data.list[i].minStatus = 'disabled';
|
}
|
if (data.list[i].nums == data.list[i].products.stock) {
|
data.list[i].maxStatus = 'disabled';
|
}
|
|
//设置规格参数
|
data.list[i].spes = [];
|
if (data.list[i].products.spesDesc != null) {
|
let spesArray = data.list[i].products.spesDesc.split(',');
|
for (let key in spesArray) {
|
let spesOne = spesArray[key].split(':');
|
data.list[i].spes.push(spesOne[1]);
|
}
|
}
|
//添加左滑效果
|
data.list[i].isTouchMove = false;
|
//是否可以去支付
|
if (data.list[i].isSelect) {
|
goSettlement = true;
|
}
|
//id转换为字符串
|
data.list[i].id = _this.arrayToStr(data.list[i].id);
|
//选中状态
|
if (flag) {
|
data.list[i].isSelect = true;
|
if (data.list[i].isSelect) {
|
if (_this.cartIds.indexOf(data.list[i].id) < 0) {
|
_this.cartIds.push(data.list[i].id);
|
}
|
}
|
}
|
}
|
data.goodsPromotionMoney = _this.$common.formatMoney(data.goodsPromotionMoney, 2, '');
|
data.orderPromotionMoney = _this.$common.formatMoney(data.orderPromotionMoney, 2, '');
|
data.amount = _this.$common.formatMoney(data.amount, 2, '');
|
let isLoad = false;
|
if (data.list.length < 1) {
|
isLoad = true;
|
}
|
let n = 0;
|
for (let i in data.promotionList) {
|
n++;
|
}
|
|
_this.goSettlement = goSettlement;
|
_this.isLoad = isLoad;
|
_this.cartNums = n;
|
|
if (flag) {
|
_this.shoppingCard = data;
|
} else {
|
_this.getCartData();
|
}
|
_this.countTotoal();
|
},
|
//计算总计函数
|
countTotoal: function () {
|
let _that = this;
|
var total = 0;
|
var pointsMoneySum = 0;
|
var pointsSum = 0;
|
|
for (let i in _that.shoppingCard.list) {
|
if (_that.shoppingCard.list[i].isSelect) {
|
total += Number(_that.shoppingCard.list[i].products.price) * Number(_that.shoppingCard.list[i].nums);
|
_that.pointShowMoney += Number(_that.shoppingCard.list[i].products.pointsDeduction) * Number(_that.shoppingCard.list[i].nums);
|
pointsSum += _that.pointDiscountedProportion * Number(_that.shoppingCard.list[i].products.pointsDeduction) * Number(_that.shoppingCard.list[i].nums);
|
pointsMoneySum += Number(_that.shoppingCard.list[i].products.price - _that.shoppingCard.list[i].products.pointsDeduction) * Number(_that.shoppingCard.list[i].nums);
|
}
|
}
|
_that.pointShowText = pointsSum + _that.pointShowName + '+' + _that.$common.formatMoney(pointsMoneySum, 2, '');
|
_that.totalprice = _that.$common.formatMoney(total, 2, '');
|
},
|
toNumberChange: function (e) {
|
this.$u.throttle(this.numberChange(e), 500)
|
},
|
numberChange(e) {
|
uni.showLoading({
|
title: '加载中',
|
mask: true
|
});
|
let _this = this;
|
let data = {
|
id: this.shoppingCard.list[e.name].productId,
|
nums: e.value
|
};
|
_this.$u.api.setCartNum(data).then(res => {
|
if (res.status) {
|
_this.shoppingCard.list[e.name].nums = e.value;
|
//重新计算总价
|
this.countTotoal();
|
setTimeout(function () {
|
uni.hideLoading();
|
}, 300);
|
} else {
|
_this.$u.toast(res.msg);
|
setTimeout(function () {
|
uni.hideLoading();
|
}, 300);
|
}
|
});
|
|
},
|
removeGoods: function (index) {
|
let _this = this;
|
var index = index;
|
uni.showModal({
|
title: '确认提醒',
|
content: '您确定要移除此商品吗？',
|
success: (e) => {
|
if (e.confirm) {
|
//移除数据库
|
let data = {
|
id: _this.shoppingCard.list[index].id
|
};
|
_this.$u.api.removeCart(data).then(res => {
|
if (res.status) {
|
//清除已经勾选的商品和购物车数据
|
var idIndex = _this.cartIds.indexOf(_this.shoppingCard.list[index].id);
|
if (idIndex > -1) {
|
_this.cartIds.splice(index, 1);
|
}
|
_this.shoppingCard.list.splice(index, 1);
|
//计算总价
|
_this.countTotoal();
|
_this.$refs.uToast.show({ message: res.msg, type: 'success', back: false });
|
}
|
});
|
|
}
|
}
|
})
|
},
|
checkout: function () {
|
let _this = this;
|
let cartData = _this.shoppingCard.list;
|
let newData = '';
|
for (let key in cartData) {
|
if (cartData[key].isSelect == true) {
|
newData += ',' + cartData[key].id;
|
_this.goSettlement = true;
|
}
|
}
|
if (newData.substr(0, 1) == ',') {
|
newData = newData.substr(1);
|
}
|
if (newData.length > 0) {
|
_this.$u.route('/pages/placeOrder/index/index?orderType=1&cartIds=' + JSON.stringify(newData));
|
return true;
|
} else {
|
//没有选择不跳转
|
_this.$refs.uToast.show({ message: "请选择要下单的商品", type: 'error', back: false });
|
}
|
|
},
|
// 商品选中
|
itemChange: function (e) {
|
var _this = this;
|
_this.cartIds = e;
|
var list = _this.shoppingCard.list;
|
for (var i = 0; i < list.length; i++) {
|
var bl = _this.cartIds.indexOf(list[i].id) != -1;
|
if (bl) {
|
list[i].isSelect = true;
|
} else {
|
list[i].isSelect = false;
|
}
|
}
|
_this.shoppingCard.list = list;
|
if (_this.cartIds.length == _this.shoppingCard.list.length) {
|
this.selectAll = ['全选'];
|
} else {
|
this.selectAll = [];
|
}
|
this.countTotoal();
|
},
|
itemChangeAll: function (e) {
|
let _this = this;
|
if (e.length > 0) {
|
var ids = [];
|
for (var i = 0; i < _this.shoppingCard.list.length; i++) {
|
_this.shoppingCard.list[i].isSelect = true;
|
ids.push(_this.shoppingCard.list[i].id);
|
}
|
_this.cartIds = ids;
|
} else {
|
for (var i = 0; i < _this.shoppingCard.list.length; i++) {
|
_this.shoppingCard.list[i].isSelect = false;
|
}
|
_this.cartIds = [];
|
}
|
this.countTotoal();
|
},
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
@import "cart.scss";
|
</style>
|
