xlcs/xlcs-user/pages/cart/cart.vue

233 lines
7.4 KiB
Vue
Raw Normal View History

2023-09-22 15:41:37 +08:00
<template>
<view class="gg">
<u-navbar :border-bottom="false" :is-back="false">
<view class="u-flex u-m-l-20 u-m-r-20">
<view class="u-font-xl u-m-r-20">购物车</view>
<view class="u-font-xs u-light-color u-p-t-10">{{ getSelectedCount }}件商品</view>
</view>
</u-navbar>
<view class="gg-content">
<scroll-view v-if="getCartInfoList" class="gg-cart-sv-container" scroll-y="true">
<u-checkbox-group>
<view v-for="(cartInfoListItem, index) in getCartInfoList" :key="index">
<u-card :border="false" :padding="10" :show-head="showMultiCheckbox(index)">
<view slot="head" class="u-m-10">
2024-03-21 10:29:45 +08:00
<u-checkbox :name="getMultiCheckedIds(index)" :value="getMultiCheckCart(index)"
active-color="red" shape="circle" @change="changeMultiChecked"></u-checkbox>
2023-09-22 15:41:37 +08:00
<text>{{ cartInfoListItem.activityRule.ruleDesc }}</text>
</view>
<view slot="body">
<view v-for="(cartInfoItem, idx) in cartInfoListItem.cartInfoList" :key="idx">
<!-- 动态class绑定是为了确保最后一条底部线条不显示 -->
2024-03-21 10:29:45 +08:00
<view
:class="{ 'u-border-bottom': idx !== cartInfoListItem.cartInfoList.length - 1 }"
class="u-body-item u-flex u-col-between u-p-10">
<u-checkbox v-model="cartInfoItem.isChecked" :name="cartInfoItem.skuId"
active-color="red" shape="circle" @change="changeChecked"></u-checkbox>
<ListImgItem :lazyLoad="false"
:showBottom="cartInfoItem.skuType === 0 && cartInfoItem.isNewPerson === 1"
:showLeft="cartInfoItem.skuType === 1" :showRight="false"
:src="cartInfoItem.imgUrl" height="200rpx" width="200rpx"></ListImgItem>
2023-09-22 15:41:37 +08:00
<view class="u-p-b-20 u-m-l-20" style="flex:1">
<view class="u-font-lg">{{ cartInfoItem.skuName }}</view>
<view class="u-flex u-row-between">
<view class="u-type-error">
<text></text>
<text>{{ cartInfoItem.cartPrice }}</text>
</view>
2024-03-21 10:29:45 +08:00
<AddToCart :shopDetail="cartInfoItem" :skuId="cartInfoItem.skuId">
</AddToCart>
2023-09-22 15:41:37 +08:00
</view>
</view>
</view>
</view>
</view>
</u-card>
</view>
</u-checkbox-group>
</scroll-view>
<u-empty v-else :margin-top="300" mode="car">
<u-button slot="bottom" type="error" @click="gotoCategory">点击购买商品</u-button>
</u-empty>
<view class="gg-navigation">
<view class="navigation">
<view class="left">
<view class="item u-m-t-20">
<u-checkbox :value="isAllSelected" active-color="red" shape="circle"
@change="changeAllSelected"></u-checkbox>
</view>
<view class="item">
<view class="u-font-sm u-line-1">
<view class="u-type-error">现价:{{ getCartPriceInfo.totalAmount }}</view>
<view class="u-font-xs u-type-info">
优惠券优惠:{{ getCartPriceInfo.couponReduceAmount }}
<text class="u-font-xs u-m-l-20 u-type-info">原价:</text>
2024-03-21 10:29:45 +08:00
<text
class="u-font-xs u-type-info">{{ getCartPriceInfo.originalTotalAmount }}
</text>
2023-09-22 15:41:37 +08:00
</view>
</view>
</view>
<!-- <view class="item car u-type-info" v-if="getCartCouponInfoList.length > 0" @click="showCouponInfoList = true">
<u-icon name="gift-fill" :size="40" :color="$u.color['contentColor']"></u-icon>
<view class="text u-line-1">优惠券</view>
</view> -->
</view>
<view class="right">
<view class="buy btn u-line-1" @click="gotoConfirmOrder">立即购买</view>
</view>
</view>
</view>
</view>
2024-03-21 10:29:45 +08:00
<CouponInfoList :couponInfoList="getCartCouponInfoList" :showCouponInfoList.sync="showCouponInfoList">
</CouponInfoList>
2023-09-22 15:41:37 +08:00
</view>
</template>
<script>
import {mapActions, mapGetters} from 'vuex';
export default {
data() {
return {
showCouponInfoList: false
};
},
computed: {
...mapGetters('cartModule', [
'getCartInfoList',
'showMultiCheckbox',
'getMultiCheckCart',
'getMultiCheckedIds',
'isAllSelected',
'getCartPriceInfo',
'getSelectedCount',
'getCartCouponInfoList'
])
},
methods: {
2024-03-21 10:29:45 +08:00
...mapActions('cartModule', ['getActivityCartListAction', 'changeCheckCartAction',
'changeMultiCheckedCartAction', 'changeAllCheckCartAction'
]),
2023-09-22 15:41:37 +08:00
...mapActions('cartModule', ['getCartListAction']),
// 到分类页购买商品
gotoCategory() {
uni.switchTab({
url: '/pages/categories/categories'
});
},
// 修改单个商品选中状态
changeChecked(detail) {
let isChecked = 1;
2024-03-21 10:29:45 +08:00
const {
name: skuId,
value
} = detail;
2023-09-22 15:41:37 +08:00
if (!value) isChecked = 0;
2024-03-21 10:29:45 +08:00
this.changeCheckCartAction({
skuId,
isChecked
});
2023-09-22 15:41:37 +08:00
},
// 修改多个商品的选中状态
changeMultiChecked(detail) {
let skuIdList = [];
skuIdList = detail.name.split(',');
const isChecked = detail.value === true ? 1 : 0;
2024-03-21 10:29:45 +08:00
this.changeMultiCheckedCartAction({
skuIdList,
isChecked
});
2023-09-22 15:41:37 +08:00
},
// 全部选中/返选
changeAllSelected(detail) {
2024-03-21 10:29:45 +08:00
this.changeAllCheckCartAction({
isChecked: detail.value === true ? 1 : 0
});
2023-09-22 15:41:37 +08:00
},
// 跳转至确认订单
gotoConfirmOrder() {
this.$u.route('/pagesOrder/confirmOrder/confirmOrder')
}
},
// 思考为什么需要将请求放置于onShow钩子函数中
// 主要考虑tabs切换后需要进行实时数据的获取
onShow() {
2024-03-21 10:29:45 +08:00
this.getActivityCartListAction({
showLoading: true
});
2023-09-22 15:41:37 +08:00
},
mounted() {
// 需要获取购物车数据列表,将最新获取的数据渲染到页面
this.getCartListAction();
}
};
</script>
<style lang="scss">
.gg {
height: 100%;
background-color: $u-bg-color;
// scrollView的固定高度设置
// 底部导航与顶部自定义导航高度需要减去
&-cart-sv-container {
height: calc(100vh - 90rpx - 136rpx);
}
// 底部导航
&-navigation {
width: 100%;
height: 90rpx;
position: fixed;
bottom: 0;
.navigation {
height: 100%;
display: flex;
border: solid 2rpx #f2f2f2;
background-color: #ffffff;
padding: 12rpx 0;
.left {
display: flex;
flex: 1;
font-size: 20rpx;
.item {
margin: 0 10rpx;
&.car {
text-align: center;
position: relative;
}
}
}
.right {
display: flex;
font-size: 28rpx;
align-items: center;
.btn {
line-height: 66rpx;
padding: 0 30rpx;
border-radius: 36rpx;
color: #ffffff;
}
.buy {
background-color: #ff7900;
margin: 0 30rpx;
}
}
}
}
}
</style>