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.
shengxian/pages/index/cart.vue

374 lines
9.2 KiB

2 years ago
<!-- 购物车 -->
<template>
<view class="page_box">
<!-- 总数 -->
<view class="head_box" v-show="!isEmpty">
<view class="tool-box u-flex u-row-between">
<view class="count-box">
<text class="all-num">{{ cartList.length }}</text>
件商品
</view>
<button class="u-reset-button set-btn" @tap="isTool = !isTool">{{ isTool ? '完成' : '编辑' }}</button>
</view>
</view>
<view class="content_box" style="margin-top:-20rpx;">
<!-- 列表 -->
<u-checkbox-group @change="checkboxGroupChange" activeColor="#17C161" v-if="!isEmpty">
<view class="collect-list u-flex u-row-left u-col-center" v-for="(g, index) in cartList" :key="index">
<u-checkbox class="u-p-l-10" :name="g.goods_id" shape="circle" v-model="g.checked">
<view style="height: 160rpx"></view>
</u-checkbox>
<view class="goods-wrap">
<view class="lose-box"
v-if="g.cart_type === 'invalid' || (g.cart_type === 'activity' && !isActivityPay)">
<text v-if="g.cart_type === 'invalid'" class="iconfont icon-yishixiao"></text>
<view v-if="g.cart_type === 'activity' && !isActivityPay"
class="invalid-tips u-flex u-row-center u-col-center">活动商品,仅支持单独购买</view>
</view>
<shopro-mini-card :image="g.goods.image" :title="g.goods.title"
@click="$Router.push({ path: '/pages/goods/detail', query: { id: g.goods.id } })">
<!-- <template #describe>
<view class="order-sku u-ellipsis-1">
<text
class="order-num">{{ g.sku_price && g.sku_price.goods_sku_text ? g.sku_price.goods_sku_text : '' }}</text>
</view>
</template> -->
<template #cardBottom>
<view class="order-price-box u-flex u-row-between" @tap.stop>
<text
class="order-price font-OPPOSANS"><text style="color:#FE1B26;font-size:26rpx"></text>{{ g.sku_price ? g.sku_price.price : 0 }}</text>
<u-number-box :value="g.goods_num" :long-press="false" :min="0" :step="1"
:index="index" :max="!g.sku_price ? 0: (g.sku_price.stock > 999 ? 999 : g.sku_price.stock)" @min="onMin(g)"
@minus="changeNum($event, g)" @plus="changeNum($event, g)"
@change="changeNum($event, g)">
</u-number-box>
</view>
</template>
</shopro-mini-card>
</view>
</view>
</u-checkbox-group>
<!-- 数据为空 -->
<shopro-empty v-if="isEmpty" :image="$IMG_URL + '/imgs/empty/empty_cart.png'" tipText="购物车空空如也,快去逛逛吧~">
</shopro-empty>
</view>
<!-- 底部按钮 -->
<view class="foot_box " v-show="!isEmpty">
<view class="tools-box u-flex u-row-between">
<u-checkbox @change="onAllSel" activeColor="#17C161" shape="circle" :value="allSelected">
<text style="color: #999999;font-size:28rpx">全选{{ totalCount.totalNum }}</text></u-checkbox>
<view class="u-flex">
<view class="price font-OPPOSANS" v-show="!isTool"><text style="color:#333333;font-size:28rpx">合计</text><text style="color:#FE1B26;font-size 26rpx;"></text><text style="color:#FE1B26;font-size:36rpx">{{ totalCount.totalPrice.toFixed(2) }}</text></view>
<button class="u-reset-button pay-btn" :disabled="!isSel" v-show="!isTool" @tap="onPay">结算</button>
<button class="u-reset-button del-btn" v-show="isTool" @tap="goodsDelete">删除</button>
</view>
</view>
</view>
<!-- <shopro-tabbar></shopro-tabbar> -->
</view>
</template>
<script>
import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
let timer = null;
export default {
components: {},
data() {
return {
maxStep: 999,
isTool: false
};
},
computed: {
...mapGetters(['totalCount', 'isSel', 'isActivityPay', 'cartList', 'allSelected', 'authType', 'isLogin']),
isEmpty() {
return !this.cartList.length;
}
},
onShow() {
this.isLogin && this.getCartList();
},
onHide() {
this.isTool = false;
},
methods: {
...mapActions(['getCartList', 'changeCartList']),
// 到达最小值
onMin(g) {
uni.showModal({
title: '删除提示',
confirmColor: '#f0c785',
content: `是否确认从购物车中删除此商品?`,
success: res => {
res.confirm && this.changeCartList({ ids: [g.id], art: 'delete' });
}
});
},
// 更改商品数
async changeNum(e, g) {
uni.showLoading({
mask: true
});
e.value > 0 && this.changeCartList({ ids: [g.id], goodsNum: e.value, art: 'change' });
uni.hideLoading();
await this.getCartList();
},
// 单选
checkboxGroupChange(e) {
this.$store.commit('checkCartList');
},
// 路由跳转
jump(path, parmas) {
this.$Router.push({
path: path,
query: parmas
});
},
// 全选
onAllSel() {
let that = this;
that.$store.commit('changeAllSellect'); //按钮切换全选。
that.$store.commit('getAllSellectCartList', that.allSelected); //列表全选
},
// 结算
onPay() {
let that = this;
let { cartList } = this;
if (this.isSel) {
let confirmcartList = [];
let isActivity = false;
for (let item of this.cartList) {
if (item.checked) {
if (item.cart_type === 'invalid') {
this.$u.toast('商品已失效');
return false;
}
if (item.cart_type === 'activity') {
isActivity = true;
}
confirmcartList.push({
goods_id: item.goods_id,
sku_price_id: item.sku_price_id,
goods_price: item.sku_price ? item.sku_price.price : 0,
goods_num: item.goods_num
});
}
}
if (confirmcartList.length > 1 && isActivity) {
this.$u.toast('活动商品只能单独购买');
return false;
}
that.jump('/pages/order/confirm', { goodsList: confirmcartList, from: 'cart' });
}
},
// 删除
goodsDelete() {
let that = this;
let { cartList } = this;
let selectedIdsArray = [];
cartList.map(item => {
if (item.checked) {
selectedIdsArray.push(item.id);
}
});
this.changeCartList({ ids: selectedIdsArray, art: 'delete' });
}
}
};
</script>
<style lang="scss">
// 总计商品
.head_box {
.tool-box {
height: 90rpx;
padding: 0 30rpx;
background: #f7f5f6;
.count-box {
font-size: 26rpx;
color: #999;
.all-num {
color: #17C161;
}
}
.set-btn {
background: none;
font-size: 30rpx;
font-weight: 500;
color: #333333;
}
}
}
// 空白页
.empty-box {
flex: 1;
width: 100%;
height: 100%;
}
// 购物车项
.collect-list {
background: #fff;
margin-bottom: 20rpx;
padding: 40rpx 25rpx;
margin: 20rpx 24rpx;
border-radius: 20rpx;
// 商品卡片包裹
.goods-wrap {
position: relative;
width: calc(100% - 80rpx);
.order-sku {
font-size: 24rpx;
font-weight: 400;
color: rgba(153, 153, 153, 1);
width: 440rpx;
margin-bottom: 20rpx;
.order-num {
margin-right: 10rpx;
}
}
.order-price-box {
.status-btn {
height: 32rpx;
border: 1rpx solid rgba(207, 169, 114, 1);
border-radius: 15rpx;
font-size: 20rpx;
font-weight: 400;
color: rgba(168, 112, 13, 1);
padding: 0 10rpx;
margin-left: 20rpx;
background: rgba(233, 183, 102, 0.16);
}
.order-price {
font-size: 36rpx;
font-weight: 600;
color: #FE1B26;
}
}
.lose-box {
position: absolute;
z-index: 10;
width: 100%;
height: 100%;
background-color: rgba(#fff, 0.8);
.icon-yishixiao {
position: absolute;
bottom: 0rpx;
right: 80rpx;
font-size: 140rpx;
line-height: 140rpx;
color: #dbdbdb;
transform: rotate(-30deg);
}
.invalid-tips {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;
width: 400rpx;
height: 60rpx;
border-radius: 30rpx;
color: #fff;
background-color: rgba(#000, 0.35);
}
}
}
.tag-box {
.tag1 {
line-height: 36rpx;
padding: 0 8rpx;
font-size: 18rpx;
color: rgba(#fff, 0.9);
background: #f39800;
display: inline-block;
box-sizing: border-box;
}
.tag2 {
line-height: 34rpx;
padding: 0 8rpx;
font-size: 18rpx;
color: rgba(#f39800, 0.9);
background: #fff;
border-top: 1rpx solid #f39800;
border-right: 1rpx solid #f39800;
border-bottom: 1rpx solid #f39800;
display: inline-block;
box-sizing: border-box;
}
}
.price-box {
width: 420rpx;
.price {
color: #e1212b;
}
}
}
.tools-box {
height: 100rpx;
width: 750rpx;
padding: 0 20rpx;
background: #fff;
.check-all {
font-size: 26rpx;
.check-all-radio {
transform: scale(0.7);
color: #e9b564;
}
}
.price {
color: #ff0000;
font-size: 500;
margin-right: 30rpx;
}
.pay-btn {
width: 200rpx;
line-height: 70rpx;
background-color: #17C161;
// background: linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1));
// box-shadow: 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22);
border-radius: 35rpx;
padding: 0;
color: rgba(#fff, 1);
}
.del-btn {
width: 200rpx;
line-height: 70rpx;
background: linear-gradient(90deg, rgba(244, 71, 57, 1) 0%, rgba(255, 102, 0, 1) 100%);
border-radius: 35rpx;
padding: 0;
color: rgba(#fff, 0.9);
}
}
</style>