deming/pageC/cart/index.vue

409 lines
10 KiB
Vue
Raw Normal View History

2020-06-09 17:33:12 +08:00
<template>
<view class="cart">
<u-checkbox-group class="cart-main" @change="storeChange">
<view v-for="(store, s_index) in list" :key="s_index" class="cart-item">
<view class="store">
<u-checkbox v-model="store.checked" shape="circle" active-color="#FF780F" icon-size="35" :name="s_index" @change="storeaAloneChange"></u-checkbox>
<view class="name">
2020-06-29 08:47:37 +08:00
<image :src="store.store_avatar"></image>
<view>{{ store.store_name }}</view>
2020-06-09 17:33:12 +08:00
</view>
</view>
<view class="goods">
<u-checkbox-group @change="goodsChange($event, s_index)">
<view v-for="(goods, g_index) in store.goods" :key="g_index" class="goods-item">
<u-checkbox v-model="goods.checked" shape="circle" active-color="#FF780F" icon-size="35" :name="g_index" ></u-checkbox>
2020-06-29 08:47:37 +08:00
<image :src="goods.goods_image"></image>
2020-06-09 17:33:12 +08:00
<view class="info">
2020-06-29 08:47:37 +08:00
<view class="name u-line-2">{{ goods.goods_name }}</view>
2020-06-09 17:33:12 +08:00
<view class="cart-info">
2020-06-29 08:47:37 +08:00
<view class="price">{{ goods.goods_price }}</view>
2020-06-30 18:06:50 +08:00
<u-number-box :input-width="38" :input-height="39" :size="22" bg-color="#FFFFFF" :disabled-input=true color="#FF780F" :index="goods.cart_id" @minus="reduce" @plus="plus" v-model="goods.goods_num"></u-number-box>
2020-06-09 17:33:12 +08:00
</view>
</view>
</view>
</u-checkbox-group>
</view>
</view>
</u-checkbox-group>
2020-07-14 17:43:15 +08:00
<view class="empty-view">
<u-empty mode="car" v-if="!list.length" :margin-top="240"></u-empty>
</view>
2020-06-09 17:33:12 +08:00
<view class="balance">
<u-checkbox-group>
<u-checkbox v-model="checkedAll" shape="circle" active-color="#FF780F" icon-size="35" label-size="30" @change="totalChange">
全选
</u-checkbox>
</u-checkbox-group>
<view class="total-price" v-if="status == '编辑'">
<view class="title">合计</view>
2020-06-29 08:47:37 +08:00
<view class="value">{{ totalPrice }}</view>
2020-06-09 17:33:12 +08:00
</view>
2020-06-30 18:06:50 +08:00
<view class="cart-btn" v-if="status == '编辑'" @click="settlementOrder">结算</view>
2020-06-29 08:47:37 +08:00
<view class="delete-btn" v-if="status == '完成'" @click="deleteGoods">删除</view>
2020-06-29 17:24:57 +08:00
<u-toast ref="uToast" />
2020-06-09 17:33:12 +08:00
</view>
</view>
</template>
<script>
export default {
data() {
return {
status: '编辑',
2020-06-29 08:47:37 +08:00
list: [],
checkedAll: false,
checkedGoods: [],
totalPrice: '0.00',
2020-08-03 14:34:56 +08:00
debounce: true,
2020-06-29 08:47:37 +08:00
}
},
watch: {
list: {
handler(cart){
let checkedGoods = [];
cart.forEach(store => {
let temp = store.goods.filter(goods => {
return goods.checked;
})
checkedGoods = checkedGoods.concat(temp);
})
2020-06-30 18:06:50 +08:00
// console.log(checkedGoods);
2020-06-29 08:47:37 +08:00
this.checkedGoods = checkedGoods;
2020-06-30 18:06:50 +08:00
this.calculatePrice();
2020-06-29 08:47:37 +08:00
},
deep: true
2020-06-09 17:33:12 +08:00
}
},
2020-08-01 16:36:48 +08:00
onPullDownRefresh() {
2020-08-03 14:34:56 +08:00
this.debounce = true;
2020-08-01 16:36:48 +08:00
this.getCartList();
},
2020-06-29 08:47:37 +08:00
onShow() {
2020-08-03 14:34:56 +08:00
this.debounce = true;
2020-06-29 08:47:37 +08:00
this.getCartList();
2020-06-19 18:07:11 +08:00
},
2020-06-09 17:33:12 +08:00
methods: {
2020-06-30 18:06:50 +08:00
// 计算价格
calculatePrice() {
// console.log(this.checkedGoods);
let temp = 0;
this.checkedGoods.forEach(item => {
temp += item.goods_num * (item.goods_price * 100) / 100;
})
this.totalPrice = temp.toFixed(2);
},
// 结算
settlementOrder() {
2020-08-03 14:34:56 +08:00
if(!this.debounce) return;
this.debounce = false;
2020-07-14 17:43:15 +08:00
if(!this.checkedGoods.length) return false;
2020-07-03 17:44:58 +08:00
// 拼接后端需要的数据形式
2020-06-30 18:06:50 +08:00
let id = [], temp = '';
this.checkedGoods.forEach(item => {
temp = item.cart_id + '|' + item.goods_num;
id.push(temp);
temp = '';
})
// console.log(id);
2020-07-14 09:15:51 +08:00
// ifcart 结算方式 1:购物车 0:直接结算(立即购买/拼团/秒杀)
this.$u.api.settlementOrder({ ifcart: 1, cart_id: id }).then(res => {
2020-06-30 18:06:50 +08:00
if(res.errCode == 0) {
2020-07-23 14:56:20 +08:00
this.$store.commit('setOrderType', 5);
2020-07-21 21:02:28 +08:00
this.$store.commit('updateOrderInfo', res.data);
2020-06-30 18:06:50 +08:00
this.$u.route({
2020-07-16 17:39:06 +08:00
url: '/pageC/cart/ConfirmOrder'
2020-06-30 18:06:50 +08:00
})
2020-08-03 14:34:56 +08:00
} else {
this.$u.toast(res.message);
this.debounce = true;
2020-06-30 18:06:50 +08:00
}
})
},
2020-06-19 18:07:11 +08:00
getCartList() {
2020-06-30 18:06:50 +08:00
this.$u.api.getCartTreeList().then(res => {
2020-06-19 18:07:11 +08:00
if (res.errCode == 0) {
2020-08-01 16:36:48 +08:00
uni.stopPullDownRefresh();
2020-06-29 08:47:37 +08:00
let list = res.data.store_cart_list;
2020-06-30 18:06:50 +08:00
list.forEach((item, l_index) => {
// 判断有无 checked 属性,如果有取值再赋值, 没有给默认值 false
Object.assign(item, { checked: this.list.length ? this.list[l_index].checked : false });
item.goods.forEach((goods, g_index) => {
Object.assign(goods, { checked: this.list.length ? this.list[l_index].goods[g_index].checked : false });
2020-06-24 16:39:31 +08:00
})
})
2020-06-29 08:47:37 +08:00
// console.log(list);
this.list = list;
}
})
},
deleteGoods() {
2020-06-29 17:24:57 +08:00
if(!this.checkedGoods.length) return false;
2020-06-29 08:47:37 +08:00
let id = [];
2020-06-29 17:24:57 +08:00
this.checkedGoods.forEach(item => {
id.push(item.cart_id);
})
// console.log(id);
2020-06-29 08:47:37 +08:00
this.$u.api.deleteCart({ id }).then(res => {
if (res.errCode == 0) {
2020-06-29 17:24:57 +08:00
if(!res.data.msg) {
this.getCartList();
} else {
this.$refs.uToast.show({
title: res.data.msg,
type: 'error',
})
}
2020-06-19 18:07:11 +08:00
}
})
},
2020-06-30 18:06:50 +08:00
reduce(e) {
this.cartUpdateNumber(e.index, e.value);
2020-06-10 16:06:01 +08:00
},
2020-06-30 18:06:50 +08:00
plus(e) {
this.cartUpdateNumber(e.index, e.value);
2020-06-10 16:06:01 +08:00
},
2020-06-30 18:06:50 +08:00
async cartUpdateNumber(id, number) {
2020-07-03 17:44:58 +08:00
await this.$u.api.cartUpdateNumber({
cart_id: id,
quantity: number,
}).then(res => {
2020-06-30 18:06:50 +08:00
this.getCartList();
2020-07-03 17:44:58 +08:00
}).catch(() => {
this.geCartList();
})
2020-06-10 16:06:01 +08:00
},
2020-06-09 17:33:12 +08:00
totalChange(e) {
// 切换所有商品的状态
this.list.forEach(store => {
store.checked = e.value;
store.goods.forEach(goods => {
goods.checked = store.checked;
})
})
},
storeChange() {
// 判断所有商家状态
let checked = true;
this.list.forEach(item => {
if(!item.checked) checked = false;
})
this.checkedAll = checked;
},
storeaAloneChange(e) {
// 切换当前商家的商品状态
this.list[e.name].goods.forEach(goods => {
goods.checked = e.value;
})
},
goodsChange(...value) {
// console.log(value)
// 判断商品是否全选
let checked = true;
this.list[value[1]].goods.forEach(item => {
if(!item.checked) checked = false;
})
this.list[value[1]].checked = checked;
this.storeChange();
}
},
onNavigationBarButtonTap(btn) {
2020-07-03 17:44:58 +08:00
// console.log(btn);
2020-07-14 10:13:27 +08:00
// #ifdef H5
if(this.status == '编辑'){
this.status = "完成";
}else{
this.status = "编辑";
}
// #endif
2020-06-09 17:33:12 +08:00
if(btn.index == 0){
let pages = getCurrentPages();
let page = pages[pages.length - 1];
// #ifdef APP-PLUS
let currentWebview = page.$getAppWebview();
let titleObj = currentWebview.getStyle().titleNView;
console.log(JSON.stringify(titleObj.buttons[0]));
if (!titleObj.buttons) {
return;
}
if(titleObj.buttons[0].text == '编辑'){
titleObj.buttons[0].text = "完成";
}else{
titleObj.buttons[0].text = "编辑";
}
currentWebview.setStyle({
titleNView: titleObj
});
2020-06-29 08:47:37 +08:00
this.status = titleObj.buttons[0].text;
2020-06-09 17:33:12 +08:00
// #endif
}
}
};
</script>
<style lang="scss" scoped>
.cart {
2020-07-14 17:43:15 +08:00
min-height: calc(100vh - var(--window-top));
position: relative;
2020-06-09 17:33:12 +08:00
padding-bottom: 100rpx;
.cart-main {
display: block;
.cart-item {
padding: 40rpx 30rpx;
.store {
display: flex;
align-items: center;
margin-bottom: 20rpx;
.u-checkbox {
margin-right: 20rpx;
}
.name {
display: flex;
align-items: center;
> image {
width: 60rpx;
height: 60rpx;
border-radius: 50%;
2020-06-29 08:47:37 +08:00
// border: 1rpx solid #000;
2020-06-09 17:33:12 +08:00
margin-right: 15rpx;
}
> view {
font-size: 28rpx;
color: rgba(51,51,51,1);
}
}
}
.goods {
.u-checkbox-group {
display: flex;
flex-direction: column;
.goods-item {
display: flex;
align-items: center;
&:not(:last-child) {
margin-bottom: 20rpx;
}
> image {
margin: 0 30rpx 0 20rpx;
width: 180rpx;
height: 160rpx;
border-radius: 10rpx;
background-color: aqua;
flex-shrink: 0;
}
.info {
width: 418rpx;
height: 160rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
.name {
font-size: 30rpx;
color: rgba(51,51,51,1);
}
.cart-info {
display: flex;
align-items: center;
justify-content: space-between;
.price {
font-size: 30rpx;
font-weight: 500;
color: rgba(255,49,49,1);
}
2020-06-10 16:06:01 +08:00
.u-numberbox {
2020-06-09 17:33:12 +08:00
border: 1rpx solid rgba(217,215,215,1);
border-radius:4px;
2020-06-10 16:06:01 +08:00
/deep/ .u-number-input {
margin: 0;
color: #333 !important;
2020-06-09 17:33:12 +08:00
border: 1rpx #D9D7D7 solid {
top: 0px;
bottom: 0px;
}
}
}
2020-06-10 16:06:01 +08:00
// .num {
// display: flex;
// width: 118rpx;
// height: 39rpx;
// border: 1rpx solid rgba(217,215,215,1);
// border-radius:4px;
// .reduce, .increase {
// flex: 1;
// font-size: 11rpx;
// color: #FF780F;
// line-height: 39rpx;
// text-align: center;
// }
// .value {
// flex: 1;
// font-size: 22rpx;
// color:rgba(51,51,51,1);
// line-height: 39rpx;
// text-align: center;
// border: 1rpx #D9D7D7 solid {
// top: 0px;
// bottom: 0px;
// }
// }
// }
2020-06-09 17:33:12 +08:00
}
}
}
}
}
}
}
2020-07-14 17:43:15 +08:00
.empty-view {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -100%);
}
2020-06-09 17:33:12 +08:00
.balance {
position: fixed;
bottom: 0;
left: 0;
z-index: 9;
width: 100%;
height: 98rpx;
background: rgba(255,255,255,1);
display: flex;
align-items: center;
padding: 30rpx;
.total-price {
margin-left: auto;
font-size: 30rpx;
display: flex;
align-items: center;
.title {
color: #333333;
}
.value {
color: #FF3131;
}
}
.cart-btn {
margin-left: 50rpx;
justify-items: flex-end;
width: 160rpx;
height: 60rpx;
background: rgba(255,120,15,1);
border-radius: 30rpx;
font-size: 30rpx;
color: rgba(255,255,255,1);
line-height: 60rpx;
text-align: center;
}
.delete-btn {
margin-left: auto;
width: 160rpx;
height: 60rpx;
background: rgba(255,49,49,1);
border-radius: 30rpx;
font-size: 30rpx;
color: rgba(255,255,255,1);
line-height: 60rpx;
text-align: center;
}
}
}
</style>