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.
375 lines
8.9 KiB
375 lines
8.9 KiB
<!-- 购物车 -->
|
|
<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">
|
|
<!-- 列表 -->
|
|
<u-checkbox-group @change="checkboxGroupChange" activeColor="#F45F77" 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 :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">￥{{ 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="#F45F77" shape="circle" :value="allSelected">
|
|
全选（{{ totalCount.totalNum }}）</u-checkbox>
|
|
<view class="u-flex">
|
|
<view class="price font-OPPOSANS" v-show="!isTool">合计：￥{{ totalCount.totalPrice.toFixed(2) }}</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: '#F45F77',
|
|
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: #ffffff;
|
|
|
|
.count-box {
|
|
font-size: 30rpx;
|
|
color: #333333;
|
|
|
|
.all-num {
|
|
color: #F45F77;
|
|
}
|
|
}
|
|
|
|
.set-btn {
|
|
background: none;
|
|
font-size: 30rpx;
|
|
color: #333333;
|
|
font-weight:bold;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 空白页
|
|
.empty-box {
|
|
flex: 1;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
// 购物车项
|
|
.collect-list {
|
|
background: #fff;
|
|
// width: 750rpx;
|
|
margin: 20rpx 24rpx;
|
|
padding: 40rpx 25rpx;
|
|
border-radius: 20rpx;
|
|
|
|
// 商品卡片包裹
|
|
.goods-wrap {
|
|
position: relative;
|
|
width:100%;
|
|
.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: 26rpx;
|
|
font-weight: 600;
|
|
color: #ff0000;
|
|
}
|
|
}
|
|
|
|
.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: #333333;
|
|
font-size: 500;
|
|
margin-right: 28rpx;
|
|
}
|
|
|
|
.pay-btn {
|
|
width: 186rpx;
|
|
line-height: 75rpx;
|
|
background: #F45F77;
|
|
// 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: 38rpx;
|
|
padding: 0;
|
|
color: rgba(#fff, 1);
|
|
font-size: 30rpx;
|
|
}
|
|
|
|
.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>
|
|
|