233 lines
7.4 KiB
Vue
233 lines
7.4 KiB
Vue
<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">
|
||
<u-checkbox :name="getMultiCheckedIds(index)" :value="getMultiCheckCart(index)"
|
||
active-color="red" shape="circle" @change="changeMultiChecked"></u-checkbox>
|
||
<text>{{ cartInfoListItem.activityRule.ruleDesc }}</text>
|
||
</view>
|
||
<view slot="body">
|
||
<view v-for="(cartInfoItem, idx) in cartInfoListItem.cartInfoList" :key="idx">
|
||
<!-- 动态class绑定是为了确保最后一条底部线条不显示 -->
|
||
<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>
|
||
<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>
|
||
<AddToCart :shopDetail="cartInfoItem" :skuId="cartInfoItem.skuId">
|
||
</AddToCart>
|
||
</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>
|
||
<text
|
||
class="u-font-xs u-type-info">￥{{ getCartPriceInfo.originalTotalAmount }}
|
||
</text>
|
||
</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>
|
||
|
||
<CouponInfoList :couponInfoList="getCartCouponInfoList" :showCouponInfoList.sync="showCouponInfoList">
|
||
</CouponInfoList>
|
||
</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: {
|
||
...mapActions('cartModule', ['getActivityCartListAction', 'changeCheckCartAction',
|
||
'changeMultiCheckedCartAction', 'changeAllCheckCartAction'
|
||
]),
|
||
...mapActions('cartModule', ['getCartListAction']),
|
||
// 到分类页购买商品
|
||
gotoCategory() {
|
||
uni.switchTab({
|
||
url: '/pages/categories/categories'
|
||
});
|
||
},
|
||
// 修改单个商品选中状态
|
||
changeChecked(detail) {
|
||
let isChecked = 1;
|
||
const {
|
||
name: skuId,
|
||
value
|
||
} = detail;
|
||
if (!value) isChecked = 0;
|
||
this.changeCheckCartAction({
|
||
skuId,
|
||
isChecked
|
||
});
|
||
},
|
||
// 修改多个商品的选中状态
|
||
changeMultiChecked(detail) {
|
||
let skuIdList = [];
|
||
skuIdList = detail.name.split(',');
|
||
const isChecked = detail.value === true ? 1 : 0;
|
||
this.changeMultiCheckedCartAction({
|
||
skuIdList,
|
||
isChecked
|
||
});
|
||
},
|
||
// 全部选中/返选
|
||
changeAllSelected(detail) {
|
||
this.changeAllCheckCartAction({
|
||
isChecked: detail.value === true ? 1 : 0
|
||
});
|
||
},
|
||
// 跳转至确认订单
|
||
gotoConfirmOrder() {
|
||
this.$u.route('/pagesOrder/confirmOrder/confirmOrder')
|
||
}
|
||
},
|
||
// 思考：为什么需要将请求放置于onShow钩子函数中，
|
||
// 主要考虑tabs切换后需要进行实时数据的获取
|
||
onShow() {
|
||
this.getActivityCartListAction({
|
||
showLoading: true
|
||
});
|
||
},
|
||
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>
|