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.
386 lines
9.9 KiB
386 lines
9.9 KiB
3 weeks ago
|
<template>
|
||
|
|
<view>
|
||
|
|
<!-- 导航条 -->
|
||
|
|
<view class="cu-custom" :style="{ height: $wanlshop.wanlsys().height + 'px' }">
|
||
|
|
<view
|
||
|
|
class="cu-bar fixed bg-bgcolor"
|
||
|
|
:style="{
|
||
|
|
height: $wanlshop.wanlsys().height + 'px',
|
||
|
|
paddingTop: $wanlshop.wanlsys().top + 'px',
|
||
|
|
backgroundColor: common.appStyle.cart_nav_color ? common.appStyle.cart_nav_color : '#f7f7f7',
|
||
|
|
backgroundImage: 'url(' + $wanlshop.oss( common.appStyle.cart_nav_image, 0, 50, 1, 'transparent', 'png' ) + ')',
|
||
|
|
color: common.appStyle.cart_font_color == 'light' ? '#ffffff' : '#333333'
|
||
|
|
}"
|
||
|
|
>
|
||
|
|
<view class="action" @tap="operate()">
|
||
|
|
<text v-if="cart.operate">完成</text>
|
||
|
|
<text v-else>管理</text>
|
||
|
|
</view>
|
||
|
|
<view class="content" :style="{ top: $wanlshop.wanlsys().top + 'px' }">
|
||
|
|
购物车
|
||
|
|
<text class="text-sm">（共{{ cart.cartnum }}件宝贝）</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<block v-if="cart.list.length > 0">
|
||
|
|
<view
|
||
|
|
class="wanl-cart-shop radius-bock margin-bj padding-bj"
|
||
|
|
v-for="(item, index) in cart.list"
|
||
|
|
:key="index"
|
||
|
|
>
|
||
|
|
<view class="shop margin-bottom" @tap="onShop(item.shop_id)">
|
||
|
|
<!-- 店铺选择 -->
|
||
|
|
<view class="text-xxl margin-right-sm" @tap.stop="shopchoose(item)">
|
||
|
|
<text v-if="item.check" class="wlIcon-xuanze-danxuan wanl-orange"></text>
|
||
|
|
<text v-else class="wlIcon-xuanze wanl-gray-light"></text>
|
||
|
|
</view>
|
||
|
|
<view class="shopname">
|
||
|
|
<text class="wlIcon-dianpu1 margin-right-xs"></text>
|
||
|
|
<text class="text-30">{{ item.shop_name }}</text>
|
||
|
|
</view>
|
||
|
|
<view class="info"><text class="wlIcon-fanhui2 margin-left-xs"></text></view>
|
||
|
|
</view>
|
||
|
|
<view class="wanl-cart-goods" v-for="(goods, keys) in item.products" :key="keys">
|
||
|
|
<!-- 商品选择 -->
|
||
|
|
<view
|
||
|
|
class="text-xxl margin-right-sm"
|
||
|
|
@tap="choose({ index: index, keys: keys })"
|
||
|
|
>
|
||
|
|
<text v-if="goods.checked" class="wlIcon-xuanze-danxuan wanl-orange"></text>
|
||
|
|
<text v-else class="wlIcon-xuanze wanl-gray-light"></text>
|
||
|
|
</view>
|
||
|
|
<view class="picture" @tap="onGoods(goods.goods_id)">
|
||
|
|
<image
|
||
|
|
:src="$wanlshop.oss(goods.image, 100, 100, 1)"
|
||
|
|
mode="aspectFill"
|
||
|
|
></image>
|
||
|
|
</view>
|
||
|
|
<view class="content">
|
||
|
|
<view class="text-cut-2 wanl-gray-dark" @tap="onGoods(goods.goods_id)">
|
||
|
|
{{ goods.title }}
|
||
|
|
</view>
|
||
|
|
<view class="cu-tag wanl-gray opt">
|
||
|
|
规格：{{ goods.sku.difference.join(' ') }}
|
||
|
|
</view>
|
||
|
|
<view class="flex justify-between align-center">
|
||
|
|
<view class="text-price wanl-orange text-lg">
|
||
|
|
{{ goods.sku.price }}
|
||
|
|
</view>
|
||
|
|
<view class="wanl-numberBox solid">
|
||
|
|
<view @tap="bcsub(goods)">
|
||
|
|
<text class="wlIcon-jian round text-gray"></text>
|
||
|
|
</view>
|
||
|
|
<view>{{ goods.number }}</view>
|
||
|
|
<view @tap="bcadd(goods)">
|
||
|
|
<text class="wlIcon-tianjia round"></text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</block>
|
||
|
|
<block class="margin-bj padding-bj" v-else>
|
||
|
|
<wanl-empty src="cart_default3x" text="哎呀，购物车空空如也！" />
|
||
|
|
<wanl-product :dataList="likeData" />
|
||
|
|
</block>
|
||
|
|
<uni-load-more :status="status" :content-text="contentText" />
|
||
|
|
<!-- #ifdef APP-PLUS -->
|
||
|
|
<view style="height: 100rpx;"></view>
|
||
|
|
<!-- #endif -->
|
||
|
|
<view class="safeAreaBottom"></view>
|
||
|
|
<!-- 操作栏 -->
|
||
|
|
<view class="wanl-cart-foot fixedView solid-top edit" v-if="cart.operate">
|
||
|
|
<view class="flex align-center" @tap="toCartchoose()">
|
||
|
|
<view class="text-xxl">
|
||
|
|
<text v-if="cart.status" class="wlIcon-xuanze-danxuan wanl-orange"></text>
|
||
|
|
<text v-else class="wlIcon-xuanze wanl-gray-light"></text>
|
||
|
|
</view>
|
||
|
|
<view class="margin-left-sm">
|
||
|
|
<text>{{ cart.status ? '取消' : '全选' }}</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="flex">
|
||
|
|
<button v-if="cart.allnum == 0" class="cu-btn round line-gray">移动关注</button>
|
||
|
|
<button v-else class="cu-btn round line-orange" @tap="move()">移动关注</button>
|
||
|
|
<button class="cu-btn round line-orange" @tap="toEmpty()">快速清理</button>
|
||
|
|
<button v-if="cart.allnum == 0" class="cu-btn round line-gray">删除</button>
|
||
|
|
<button v-else class="cu-btn round bg-gradual-orange" @tap="del()">删除</button>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="wanl-cart-foot fixedView solid-top account" v-else>
|
||
|
|
<view class="flex align-center" @tap="toCartchoose()">
|
||
|
|
<view class="text-xxl">
|
||
|
|
<text v-if="cart.status" class="wlIcon-xuanze-danxuan wanl-orange"></text>
|
||
|
|
<text v-else class="wlIcon-xuanze wanl-gray-light"></text>
|
||
|
|
</view>
|
||
|
|
<view class="margin-left-sm">
|
||
|
|
<text>{{ cart.status ? '取消' : '全选' }}</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="flex">
|
||
|
|
<view class="text-sm text-right">
|
||
|
|
<view>
|
||
|
|
合计：
|
||
|
|
<text class="text-price wanl-orange text-lg">{{ cart.allsum }}</text>
|
||
|
|
</view>
|
||
|
|
<view>不含运费</view>
|
||
|
|
</view>
|
||
|
|
<button v-if="cart.allnum == 0" class="cu-btn round line-gray">去结算</button>
|
||
|
|
<button v-else class="cu-btn round bg-gradual-orange" @tap="settlement()">
|
||
|
|
去结算 ({{ cart.allnum }})
|
||
|
|
</button>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { mapState, mapActions } from 'vuex';
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
reload: true,
|
||
|
|
likeData: [],
|
||
|
|
current_page: 1, //当前页码
|
||
|
|
last_page: 1, //总页码
|
||
|
|
status: 'loading',
|
||
|
|
contentText: {
|
||
|
|
contentdown: '',
|
||
|
|
contentrefresh: '正在加载...',
|
||
|
|
contentnomore: ''
|
||
|
|
}
|
||
|
|
};
|
||
|
|
},
|
||
|
|
onReachBottom() {
|
||
|
|
//判断是否最后一页
|
||
|
|
if (this.current_page >= this.last_page) {
|
||
|
|
this.status = 'noMore';
|
||
|
|
} else {
|
||
|
|
this.reload = false;
|
||
|
|
this.current_page = this.current_page + 1; //页码+1
|
||
|
|
this.status = 'loading';
|
||
|
|
this.loadlikeData();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
...mapState(['cart', 'common'])
|
||
|
|
},
|
||
|
|
onShow() {
|
||
|
|
setTimeout(() => {
|
||
|
|
uni.setNavigationBarColor({
|
||
|
|
frontColor:
|
||
|
|
this.$store.state.common.appStyle.cart_font_color == 'light'
|
||
|
|
? '#ffffff'
|
||
|
|
: '#000000',
|
||
|
|
backgroundColor: this.$store.state.common.appStyle.cart_nav_color
|
||
|
|
});
|
||
|
|
}, 200);
|
||
|
|
},
|
||
|
|
onLoad() {
|
||
|
|
// 加载猜你喜欢
|
||
|
|
this.loadlikeData();
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
...mapActions({
|
||
|
|
operate: 'cart/operate', // 管理购物车
|
||
|
|
choose: 'cart/choose', // 选择商品
|
||
|
|
shopchoose: 'cart/shopchoose', // 选择店铺
|
||
|
|
bcadd: 'cart/bcadd', // 添加数量
|
||
|
|
bcsub: 'cart/bcsub', // 减少数量
|
||
|
|
move: 'cart/move', // 移动购物车
|
||
|
|
settlement: 'cart/settlement', // 结算购物车
|
||
|
|
del: 'cart/del' // 删除选中购物车
|
||
|
|
}),
|
||
|
|
async loadlikeData() {
|
||
|
|
await uni.request({
|
||
|
|
url: '/wanlshop/product/likes?pages=cart',
|
||
|
|
data: {
|
||
|
|
page: this.current_page
|
||
|
|
},
|
||
|
|
success: res => {
|
||
|
|
this.likeData = this.reload ? res.data.data : this.likeData.concat(res.data.data); //评论数据 追加
|
||
|
|
this.current_page = res.data.current_page; //当前页码
|
||
|
|
this.last_page = res.data.last_page; //总页码
|
||
|
|
this.status = 'more';
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
// 禁止空购物车点击全选
|
||
|
|
toCartchoose() {
|
||
|
|
if (this.$store.state.cart.list.length == 0) {
|
||
|
|
uni.showModal({
|
||
|
|
content: '购物车没有任何宝贝，马上去选一个心仪的宝贝吧~',
|
||
|
|
success: res => {
|
||
|
|
if (res.confirm) {
|
||
|
|
this.$wanlshop.on('/pages/category');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
this.$store.dispatch('cart/cartchoose');
|
||
|
|
}
|
||
|
|
},
|
||
|
|
toEmpty() {
|
||
|
|
uni.showModal({
|
||
|
|
content: '确定清空购物车？',
|
||
|
|
success: res => {
|
||
|
|
if (res.confirm) {
|
||
|
|
this.$store.dispatch('cart/empty');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.wanl-gray-light {
|
||
|
|
color: #eee;
|
||
|
|
}
|
||
|
|
|
||
|
|
.wanl-cart-shop {
|
||
|
|
background-color: #ffffff;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* #ifndef MP-ALIPAY */
|
||
|
|
.wanl-cart-shop radio::before,
|
||
|
|
.wanl-cart-shop checkbox::before {
|
||
|
|
margin-top: -7px;
|
||
|
|
right: 1px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.wanl-cart-shop radio .wx-radio-input,
|
||
|
|
.wanl-cart-shop checkbox .wx-checkbox-input,
|
||
|
|
.wanl-cart-shop radio .uni-radio-input,
|
||
|
|
.wanl-cart-shop checkbox .uni-checkbox-input {
|
||
|
|
margin: 0;
|
||
|
|
width: 16px;
|
||
|
|
height: 16px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* #endif */
|
||
|
|
.wanl-cart-shop checkbox-group {
|
||
|
|
margin-right: 25rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.wanl-cart-shop .shop {
|
||
|
|
position: relative;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.wanl-cart-shop .shop .shopname {
|
||
|
|
position: absolute;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
left: 60rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.wanl-cart-shop .shop uni-checkbox .uni-checkbox-input {
|
||
|
|
border: 1px solid #cccccc;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 商品 */
|
||
|
|
.wanl-cart-goods {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
margin-bottom: 30rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.wanl-cart-goods:last-child {
|
||
|
|
margin-bottom: 18rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.wanl-cart-goods .picture {
|
||
|
|
width: 180rpx;
|
||
|
|
height: 180rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.wanl-cart-goods .picture image {
|
||
|
|
width: 180rpx;
|
||
|
|
height: 180rpx;
|
||
|
|
overflow: hidden;
|
||
|
|
border-radius: 20rpx;
|
||
|
|
}
|
||
|
|
/* 1.0.6升级 */
|
||
|
|
.wanl-cart-goods .content {
|
||
|
|
padding-left: 25rpx;
|
||
|
|
width: 100%;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.wanl-cart-goods .content .opt {
|
||
|
|
font-size: 24rpx;
|
||
|
|
padding: 0;
|
||
|
|
color: #000000;
|
||
|
|
height: 32rpx;
|
||
|
|
background-color: #f6f6f6;
|
||
|
|
font-weight: 300;
|
||
|
|
margin-top: 10rpx;
|
||
|
|
margin-bottom: 25rpx;
|
||
|
|
border-radius: 4rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.wanl-cart-goods .content .opt text {
|
||
|
|
padding-right: 6rpx;
|
||
|
|
padding-left: 10rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 操作条 */
|
||
|
|
.wanl-cart-foot {
|
||
|
|
width: 100%;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
z-index: 997;
|
||
|
|
min-height: 52px;
|
||
|
|
background-color: #ffffff;
|
||
|
|
padding: 0 25rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.wanl-cart-foot.solid:after {
|
||
|
|
}
|
||
|
|
|
||
|
|
/* #ifndef MP-ALIPAY */
|
||
|
|
.wanl-cart-foot radio:before,
|
||
|
|
.wanl-cart-foot checkbox:before {
|
||
|
|
margin-top: -7px;
|
||
|
|
right: 1px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.wanl-cart-foot radio .wx-radio-input,
|
||
|
|
.wanl-cart-foot checkbox .wx-checkbox-input,
|
||
|
|
.wanl-cart-foot radio .uni-radio-input,
|
||
|
|
.wanl-cart-foot checkbox .uni-checkbox-input {
|
||
|
|
margin: 0;
|
||
|
|
width: 16px;
|
||
|
|
height: 16px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* #endif */
|
||
|
|
.wanl-cart-foot.account button {
|
||
|
|
margin-left: 25rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.wanl-cart-foot.edit button {
|
||
|
|
margin-left: 20rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.wanl-cart-foot.account .cu-btn {
|
||
|
|
padding: 0 25rpx;
|
||
|
|
font-size: 32rpx;
|
||
|
|
height: 72rpx;
|
||
|
|
margin-top: 6rpx;
|
||
|
|
/* border-radius: 20rpx; */
|
||
|
|
}
|
||
|
|
|
||
|
|
.wanl-cart-foot.edit .cu-btn {
|
||
|
|
padding: 0 30rpx;
|
||
|
|
font-size: 24rpx;
|
||
|
|
height: 56rpx;
|
||
|
|
}
|
||
|
|
</style>
|