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

233 lines
7.4 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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>