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.
737 lines
16 KiB
737 lines
16 KiB
<template>
|
|
<view class="container" :style="appThemeStyle">
|
|
<!-- 页面顶部 -->
|
|
<view v-if="list.length" class="head-info">
|
|
<view class="cart-total">
|
|
<text>共</text>
|
|
<text class="active">{{ total }}</text>
|
|
<text>件商品</text>
|
|
</view>
|
|
<view class="cart-edit" @click="handleToggleMode()">
|
|
<view v-if="mode == 'normal'" class="normal">
|
|
<text class="icon iconfont icon-bianji"></text>
|
|
<text>编辑</text>
|
|
</view>
|
|
<view v-if="mode == 'edit'" class="edit">
|
|
<text>完成</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 购物车商品列表 -->
|
|
<view v-if="list.length" class="cart-list">
|
|
<view class="cart-item" v-for="(item, index) in list" :key="index">
|
|
<view class="item-radio" @click="handleCheckItem(item.id)">
|
|
<u-checkbox :modelValue="inArray(item.id, checkedIds)" shape="circle"
|
|
:activeColor="appTheme.mainBg" />
|
|
</view>
|
|
<view class="goods-image" @click="onTargetGoods(item.goods_id)">
|
|
<image class="image" :src="item.goods.goods_image" mode="scaleToFill"></image>
|
|
</view>
|
|
<view class="item-content">
|
|
<view class="goods-title" @click="onTargetGoods(item.goods_id)">
|
|
<text class="twoline-hide">{{ item.goods.goods_name }}</text>
|
|
</view>
|
|
<view class="goods-props clearfix">
|
|
<view class="goods-props-item" v-for="(props, idx) in item.goods.skuInfo.goods_props"
|
|
:key="idx">
|
|
<text>{{ props.value.name }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="item-foot">
|
|
<view class="goods-price">
|
|
<text class="unit">￥</text>
|
|
<text class="value">{{ item.goods.skuInfo.goods_price }}</text>
|
|
</view>
|
|
<view class="stepper">
|
|
<u-number-box :min="1" class='countNumber' :modelValue="item.goods_num" :step="1" @change="onChangeStepper($event, item)" />
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 购物车数据为空 -->
|
|
<empty v-if="!list.length" :isLoading="isLoading" :custom-style="{ padding: '180rpx 50rpx' }"
|
|
tips="您的购物车是空的, 快去逛逛吧">
|
|
<template v-slot:slot>
|
|
<view class="empty-ipt" @click="onTargetIndex()">
|
|
<text>去逛逛</text>
|
|
</view>
|
|
</template>
|
|
</empty>
|
|
|
|
<!-- 商品推荐 -->
|
|
<view class="goodsRecommend-title">
|
|
<image :src="$picUrl+'/static/user/left.png'"></image>为您推荐<image :src="$picUrl+'/static/user/right.png'"></image>
|
|
</view>
|
|
<view class="goodsRecommend">
|
|
<view class="goodsItem" v-for="(item,index) in goodsRecommend" @click="onTargetGoods(item.goods_id)" :key="index">
|
|
<view class="pic">
|
|
<image :src="item.goods_image" mode=""></image>
|
|
</view>
|
|
<view class="goodsInfo">
|
|
<view class="title">
|
|
<text v-if="item.selling_point" class="ziying">{{item.selling_point}}</text>
|
|
<text class="name">{{item.goods_name}}</text>
|
|
</view>
|
|
<view class="isExpress">
|
|
<text>包邮</text>
|
|
</view>
|
|
<view class="price">
|
|
<text style="font-size: 20rpx;">￥</text>
|
|
<text style="font-weight: bold;font-size: 36rpx;">{{item.goods_price_max}}</text>
|
|
<text style="font-size: 20rpx;margin-left:10rpx;">到手价</text>
|
|
<text style="color: #949494;font-size: 22rpx;text-decoration: line-through;">￥{{item.line_price_max}}</text>
|
|
</view>
|
|
<view class="comment">
|
|
<text>{{item.goods_sales}}条评论</text>
|
|
<text style="margin-left:20rpx;">{{item.remaizhishu}}%好评率</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 底部操作栏 -->
|
|
<view v-if="list.length" class="footer-fixed">
|
|
<view class="all-radio">
|
|
<u-checkbox :modelValue="checkedIds.length > 0 && checkedIds.length === list.length" shape="circle"
|
|
:activeColor="appTheme.mainBg" @change="handleCheckAll()">全选</u-checkbox>
|
|
</view>
|
|
<view class="total-info">
|
|
<text>合计：</text>
|
|
<view class="goods-price">
|
|
<text class="unit">￥</text>
|
|
<text class="value">{{ totalPrice }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="cart-action">
|
|
<view class="btn-wrapper">
|
|
<!-- dev:下面的disabled条件使用checkedIds.join方式判断 -->
|
|
<!-- dev:通常情况下vue项目使用checkedIds.length更合理, 但是length属性在微信小程序中不起作用 -->
|
|
<view v-if="mode == 'normal'" class="btn-item btn-main"
|
|
:class="{ disabled: checkedIds.join() == '' }" @click="handleOrder()">
|
|
<text>去结算 {{ checkedIds.length > 0 ? `(${total})` : '' }}</text>
|
|
</view>
|
|
<view v-if="mode == 'edit'" class="btn-item btn-main" :class="{ disabled: !checkedIds.length }"
|
|
@click="handleDelete()">
|
|
<text>删除</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import Empty from '@/components/empty'
|
|
// import Recommended from '@/components/recommended'
|
|
import {
|
|
inArray,
|
|
arrayIntersect,
|
|
debounce
|
|
} from '@/utils/util'
|
|
import {
|
|
checkLogin,
|
|
setCartTotalNum,
|
|
setCartTabBadge
|
|
} from '@/core/app'
|
|
import * as CartApi from '@/api/cart'
|
|
import * as Api from '@/api/goods'
|
|
const CartIdsIndex = 'CartIds'
|
|
|
|
export default {
|
|
components: {
|
|
Empty
|
|
},
|
|
data() {
|
|
return {
|
|
goodsRecommend:[],
|
|
inArray,
|
|
// 正在加载
|
|
isLoading: true,
|
|
// 当前模式: normal正常 edit编辑
|
|
mode: 'normal',
|
|
// 购物车商品列表
|
|
list: [],
|
|
// 购物车商品总数量
|
|
total: null,
|
|
// 选中的商品ID记录
|
|
checkedIds: [],
|
|
// 选中的商品总金额
|
|
totalPrice: '0.00'
|
|
}
|
|
},
|
|
watch: {
|
|
// 监听选中的商品
|
|
checkedIds: {
|
|
handler(val) {
|
|
// 计算合计金额
|
|
this.onCalcTotalPrice()
|
|
// 记录到缓存中
|
|
uni.setStorageSync(CartIdsIndex, val)
|
|
},
|
|
deep: true,
|
|
immediate: false
|
|
},
|
|
// 监听购物车商品总数量
|
|
total(val) {
|
|
// 缓存并设置角标
|
|
setCartTotalNum(val)
|
|
setCartTabBadge()
|
|
}
|
|
},
|
|
onReady() {
|
|
this.getSuggest();
|
|
},
|
|
/**
|
|
* 生命周期函数--监听页面显示
|
|
*/
|
|
onShow(options) {
|
|
// 获取缓存中的选中记录
|
|
this.checkedIds = uni.getStorageSync(CartIdsIndex)
|
|
// 获取购物车商品列表
|
|
checkLogin() ? this.getCartList() : this.isLoading = false
|
|
},
|
|
|
|
methods: {
|
|
getSuggest() {
|
|
// 获取推荐商品
|
|
Api.recommended().then(res => {
|
|
let arr = res.data.goodsList
|
|
if(arr && arr.length > 0){
|
|
arr.map(a=>{
|
|
a.goods_price_min = Number(a.goods_price_min)
|
|
a.goods_price_max = Number(a.goods_price_max)
|
|
a.line_price_min = Number(a.line_price_min)
|
|
a.line_price_max = Number(a.line_price_max)
|
|
})
|
|
}
|
|
this.goodsRecommend = arr
|
|
})
|
|
|
|
},
|
|
// 计算合计金额 (根据选中的商品)
|
|
onCalcTotalPrice() {
|
|
const app = this
|
|
// 选中的商品记录
|
|
const checkedList = app.list.filter(item => inArray(item.id, app.checkedIds))
|
|
// 计算总金额
|
|
let tempPrice = 0;
|
|
checkedList.forEach(item => {
|
|
// 商品单价, 为了方便计算先转换单位为分 (整数)
|
|
const unitPrice = item.goods.skuInfo.goods_price * 100
|
|
tempPrice += unitPrice * item.goods_num
|
|
})
|
|
app.totalPrice = (tempPrice / 100).toFixed(2)
|
|
},
|
|
|
|
// 获取购物车商品列表
|
|
getCartList() {
|
|
const app = this
|
|
app.isLoading = true
|
|
CartApi.list()
|
|
.then(result => {
|
|
app.list = result.data.list
|
|
app.total = result.data.cartTotal
|
|
// 清除checkedIds中无效的ID
|
|
app.onClearInvalidId()
|
|
})
|
|
.finally(() => app.isLoading = false)
|
|
},
|
|
|
|
// 清除checkedIds中无效的ID
|
|
onClearInvalidId() {
|
|
const app = this
|
|
const listIds = app.list.map(item => item.id)
|
|
app.checkedIds = arrayIntersect(listIds, app.checkedIds)
|
|
},
|
|
|
|
// 切换当前模式
|
|
handleToggleMode() {
|
|
this.mode = this.mode == 'normal' ? 'edit' : 'normal'
|
|
},
|
|
|
|
// 监听步进器更改事件
|
|
onChangeStepper({
|
|
value
|
|
}, item) {
|
|
// 这里是组织首次启动时的执行
|
|
if (item.goods_num == value) return
|
|
// 记录一个节流函数句柄
|
|
if (!item.debounceHandle) {
|
|
item.oldValue = item.goods_num
|
|
item.debounceHandle = debounce(this.onUpdateCartNum, 500)
|
|
}
|
|
// 更新商品数量
|
|
item.goods_num = value
|
|
// 提交更新购物车数量 (节流)
|
|
item.debounceHandle(item, item.oldValue, value)
|
|
},
|
|
|
|
// 提交更新购物车数量
|
|
onUpdateCartNum(item, oldValue, newValue) {
|
|
const app = this
|
|
CartApi.update(item.goods_id, item.goods_sku_id, newValue)
|
|
.then(result => {
|
|
// 更新商品数量
|
|
app.total = result.data.cartTotal
|
|
// 重新计算合计金额
|
|
app.onCalcTotalPrice()
|
|
// 清除节流函数句柄
|
|
item.debounceHandle = null
|
|
})
|
|
.catch(err => {
|
|
// 还原商品数量
|
|
item.goods_num = oldValue
|
|
setTimeout(() => app.$toast(err.errMsg), 10)
|
|
})
|
|
},
|
|
|
|
// 跳转到商品详情页
|
|
onTargetGoods(goodsId) {
|
|
this.$navTo('pages/goods/detail', {
|
|
goodsId
|
|
})
|
|
},
|
|
|
|
// 点击去逛逛按钮, 跳转到首页
|
|
onTargetIndex() {
|
|
this.$navTo('pages/index/index')
|
|
},
|
|
|
|
// 选中商品
|
|
handleCheckItem(cartId) {
|
|
const {
|
|
checkedIds
|
|
} = this
|
|
const index = checkedIds.findIndex(id => id === cartId)
|
|
index < 0 ? checkedIds.push(cartId) : checkedIds.splice(index, 1)
|
|
},
|
|
|
|
// 全选事件
|
|
handleCheckAll() {
|
|
const {
|
|
checkedIds,
|
|
list
|
|
} = this
|
|
this.checkedIds = checkedIds.length === list.length ? [] : list.map(item => item.id)
|
|
},
|
|
|
|
// 结算选中的商品
|
|
handleOrder() {
|
|
const app = this
|
|
if (app.checkedIds.length) {
|
|
const cartIds = app.checkedIds.join()
|
|
// app.$navTo('pages/checkout/index', {
|
|
// mode: 'cart',
|
|
// cartIds
|
|
// })
|
|
app.$navTo('pages/sureOrder/index', {
|
|
mode: 'cart',
|
|
cartIds
|
|
})
|
|
}
|
|
},
|
|
|
|
// 删除选中的商品弹窗事件
|
|
handleDelete() {
|
|
const app = this
|
|
if (!app.checkedIds.length) {
|
|
return false
|
|
}
|
|
uni.showModal({
|
|
title: '友情提示',
|
|
content: '您确定要删除该商品吗？',
|
|
showCancel: true,
|
|
success({
|
|
confirm
|
|
}) {
|
|
// 确认删除
|
|
confirm && app.onClearCart()
|
|
}
|
|
})
|
|
},
|
|
|
|
// 确认删除商品
|
|
onClearCart() {
|
|
const app = this
|
|
CartApi.clear(app.checkedIds)
|
|
.then(result => {
|
|
app.getCartList()
|
|
app.handleToggleMode()
|
|
})
|
|
}
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
page {
|
|
background: #f5f5f5;
|
|
}
|
|
</style>
|
|
<style lang="scss" scoped>
|
|
.container {
|
|
padding-bottom: 120rpx;
|
|
}
|
|
.goodsRecommend-title{
|
|
padding: 20rpx 25rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
color: #3B3B3B;
|
|
justify-content: center;
|
|
image{
|
|
width: 30rpx;
|
|
height: 30rpx;
|
|
margin: 0 10rpx;
|
|
}
|
|
}
|
|
.goodsRecommend{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
padding:10rpx 25rpx 25rpx;
|
|
.goodsItem{
|
|
width: 340rpx;
|
|
border-radius: 8rpx;
|
|
overflow: hidden;
|
|
background-color: #ffffff;
|
|
margin-bottom:24rpx;
|
|
padding: 20rpx;
|
|
box-sizing: border-box;
|
|
.pic{
|
|
width: 100%;
|
|
text-align: center;
|
|
image{
|
|
// width:100%;
|
|
width:256rpx;
|
|
height:256rpx;
|
|
|
|
}
|
|
}
|
|
.goodsInfo{
|
|
.title{
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top:14rpx;
|
|
.ziying{
|
|
padding:4rpx 10rpx;
|
|
background: #FF4438;
|
|
border-radius: 2px 2px 2px 2px;
|
|
opacity: 1;
|
|
font-size: 24rpx;
|
|
font-weight: 400;
|
|
color: #FFFFFF;
|
|
|
|
}
|
|
.name{
|
|
margin-left:6rpx;
|
|
font-size: 24rpx;
|
|
font-weight: 400;
|
|
color: #1E1E1E;
|
|
flex:1;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
|
|
}
|
|
}
|
|
.isExpress{
|
|
height: 30rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
margin:10rpx 0;
|
|
text{
|
|
display:inline-block;
|
|
width: 44rpx;
|
|
height:30rpx;
|
|
line-height: 28rpx;
|
|
border: 1px solid #F21A1C;
|
|
border-radius: 2px 2px 2px 2px;
|
|
background: #FFFFFF;
|
|
text-align: center;
|
|
font-size: 16rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #F21A1C;
|
|
}
|
|
|
|
}
|
|
.price{
|
|
color: #F21A1C;
|
|
display: flex;
|
|
align-items: baseline;
|
|
}
|
|
.comment{
|
|
margin-top: 6rpx;
|
|
font-size: 22rpx;
|
|
font-weight: 400;
|
|
color: #949494;
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// 页面顶部
|
|
.head-info {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 4rpx 30rpx;
|
|
// background-color: #fff;
|
|
height: 80rpx;
|
|
|
|
.cart-total {
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
|
|
.active {
|
|
color: $main-bg;
|
|
margin: 0 2rpx;
|
|
}
|
|
}
|
|
|
|
.cart-edit {
|
|
padding-left: 20rpx;
|
|
|
|
.icon {
|
|
margin-right: 12rpx;
|
|
}
|
|
|
|
.edit {
|
|
color: $main-bg;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
// 购物车列表
|
|
.cart-list {
|
|
padding: 0 16rpx 0 16rpx;
|
|
}
|
|
|
|
.cart-item {
|
|
background: #fff;
|
|
border-radius: 12rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 30rpx 16rpx;
|
|
margin-bottom: 24rpx;
|
|
|
|
.item-radio {
|
|
width: 56rpx;
|
|
height: 80rpx;
|
|
margin-right: 10rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
}
|
|
|
|
.goods-image {
|
|
width: 200rpx;
|
|
height: 200rpx;
|
|
|
|
.image {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 8rpx;
|
|
}
|
|
}
|
|
|
|
.item-content {
|
|
flex: 1;
|
|
padding-left: 24rpx;
|
|
|
|
.goods-title {
|
|
font-size: 28rpx;
|
|
max-height: 76rpx;
|
|
}
|
|
|
|
.goods-props {
|
|
margin-top: 14rpx;
|
|
height: 40rpx;
|
|
color: #ababab;
|
|
font-size: 24rpx;
|
|
overflow: hidden;
|
|
|
|
.goods-props-item {
|
|
display: inline-block;
|
|
margin-right: 14rpx;
|
|
padding: 4rpx 16rpx;
|
|
border-radius: 12rpx;
|
|
background-color: #F5F5F5;
|
|
width: auto;
|
|
}
|
|
}
|
|
|
|
.item-foot {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-top: 20rpx;
|
|
|
|
.goods-price {
|
|
vertical-align: bottom;
|
|
color: $main-bg;
|
|
flex: 1;
|
|
.unit {
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.value {
|
|
font-size: 32rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.stepper {
|
|
flex: 1;
|
|
display: flex;
|
|
// width: 154rpx;
|
|
height: 56rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 76rpx 76rpx 76rpx 76rpx;
|
|
opacity: 1;
|
|
margin-right: 20rpx;
|
|
// border: 2rpx solid #E6E6E6;
|
|
|
|
.del {
|
|
width: 50rpx;
|
|
height: 56rpx;
|
|
color: #C2C2C2;
|
|
opacity: 1;
|
|
text-align: center;
|
|
line-height: 56rpx;
|
|
border-right: 2rpx solid #E6E6E6;
|
|
}
|
|
|
|
.allNum {
|
|
width: 54rpx;
|
|
height: 56rpx;
|
|
opacity: 1;
|
|
text-align: center;
|
|
line-height: 56rpx;
|
|
}
|
|
|
|
.add {
|
|
width: 50rpx;
|
|
height: 56rpx;
|
|
color: #C2C2C2;
|
|
opacity: 1;
|
|
text-align: center;
|
|
line-height: 56rpx;
|
|
border-left: 2rpx solid #E6E6E6;
|
|
}
|
|
|
|
.countNumber {
|
|
width: 170rpx;
|
|
background: none;
|
|
}
|
|
}
|
|
|
|
// 空数据按钮
|
|
.empty-ipt {
|
|
margin: 0 auto;
|
|
width: 250rpx;
|
|
height: 70rpx;
|
|
font-size: 32rpx;
|
|
text-align: center;
|
|
color: #fff;
|
|
border-radius: 50rpx;
|
|
background: linear-gradient(to right, $main-bg, $main-bg2);
|
|
color: $main-text;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
// 底部操作栏
|
|
.footer-fixed {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 96rpx;
|
|
background: #fff;
|
|
padding: 0 30rpx;
|
|
position: fixed;
|
|
bottom: var(--window-bottom);
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 11;
|
|
|
|
.all-radio {
|
|
width: 140rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.radio {
|
|
margin-bottom: -4rpx;
|
|
transform: scale(0.76)
|
|
}
|
|
}
|
|
|
|
.total-info {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
padding-right: 30rpx;
|
|
|
|
.goods-price {
|
|
flex: 1;
|
|
vertical-align: bottom;
|
|
color: $main-bg;
|
|
|
|
.unit {
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.value {
|
|
font-size: 32rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.cart-action {
|
|
width: 200rpx;
|
|
|
|
.btn-wrapper {
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.btn-item {
|
|
flex: 1;
|
|
font-size: 28rpx;
|
|
height: 72rpx;
|
|
color: #fff;
|
|
border-radius: 50rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
// 去结算按钮
|
|
.btn-main {
|
|
background: linear-gradient(to right, $main-bg, $main-bg2);
|
|
color: $main-text;
|
|
|
|
// 禁用按钮
|
|
&.disabled {
|
|
opacity: 0.6;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
</style>
|
|
|