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.
383 lines
8.5 KiB
383 lines
8.5 KiB
<template>
|
|
<view class="cart">
|
|
<u-navbar :title="$t('page.cart.shoppingCart')" placeholder
|
|
@leftClick="toHome()"></u-navbar>
|
|
<!-- <u-checkbox-group v-if="productList.length > 0" @change="slectProductChange" v-model="selectProduct" -->
|
|
<!-- activeColor="#ED762F" placement="column" shape="circle"> -->
|
|
<u-radio-group v-if="productList.length > 0" v-model="selectProduct" activeColor="#ED762F" placement="column" @change="groupChange">
|
|
<u-swipe-action autoClose>
|
|
<u-swipe-action-item v-for="(item,index) in productList" :key="index" @click="deleteCart(item.id)"
|
|
:show="item.show" :options="cartOptions" ref="item">
|
|
<view @click.stop="toProductDetail(item.shopId)" class="cart-item">
|
|
<view class="cart-item-body">
|
|
<!-- <u-checkbox :name="item.id"></u-checkbox> -->
|
|
<u-radio :key="index" @change="radioChange" :name="item.id">
|
|
</u-radio>
|
|
<view class="img-box">
|
|
<image mode="aspectFill" :src="item.image" alt="" />
|
|
</view>
|
|
<view class="product-info">
|
|
<view class="product-name">{{ item.shopName }}</view>
|
|
<view class="product-price">
|
|
<text></text>
|
|
<text class="integer">{{ item.price }}</text>
|
|
<!-- <text class="point">.</text> -->
|
|
<!-- <text class="decimals">99</text> -->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="prodict-num">
|
|
<u-number-box v-model="item.num" :min="1" style="transform: scale(0.8);"
|
|
@change="(num) => {editNum(item,num.value)}"></u-number-box>
|
|
</view>
|
|
</view>
|
|
</u-swipe-action-item>
|
|
</u-swipe-action>
|
|
<!-- </u-checkbox-group> -->
|
|
</u-radio-group>
|
|
|
|
<view v-else class="no-product">
|
|
<view class="box">
|
|
<view class="no-product-title">{{ $t('page.cart.none-product') }}</view>
|
|
<view @click="toHome()" class="to-home">{{ $t('page.cart.stroll')}}</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="cart-bottom">
|
|
<u-checkbox-group @change="SelectAllChange" v-model="selectAll" activeColor="#ED762F" placement="column"
|
|
shape="circle">
|
|
<u-checkbox v-for="(item,index) in selectAllList" :disabled="forbiddenSelectAll" :key="index" :label="item.name"
|
|
:name="item.name"></u-checkbox>
|
|
</u-checkbox-group>
|
|
<view class="total-price">
|
|
{{ $t('page.cart.total') }}:
|
|
<text class="total">{{ total }}</text>
|
|
</view>
|
|
<view @click="createOrder()" class="buy">
|
|
{{ $t('page.cart.buy') }}
|
|
<!-- <text class="num">({{ selectProduct.length }})</text> -->
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
productList: [],
|
|
// selectProduct: [],
|
|
selectProduct: '',
|
|
cartNum: 1,
|
|
selectAllList: [{
|
|
name: this.$t('page.cart.selectAll')
|
|
}],
|
|
selectAll: [],
|
|
total: 0, //总价
|
|
cartOptions: [{
|
|
text: this.$t('page.collect.detele')
|
|
}],
|
|
show: true,
|
|
forbiddenSelectAll : false, //是否禁用全选按钮
|
|
}
|
|
},
|
|
onShow() {
|
|
this.getCartProductList();
|
|
},
|
|
methods: {
|
|
|
|
toHome() {
|
|
uni.switchTab({
|
|
url: '/pages/home/home'
|
|
})
|
|
},
|
|
|
|
toProductDetail(shop_id) {
|
|
uni.navigateTo({
|
|
url: '/pages/productDetail/productDetail?id=' + shop_id
|
|
})
|
|
},
|
|
|
|
SelectAllChange(selectArr) { //全选按钮状态发生改变
|
|
// if (selectArr.length > 0) {
|
|
// this.productList.forEach(item => {
|
|
// this.total += item.price;
|
|
// this.selectProduct.push(item.id);
|
|
// })
|
|
// } else {
|
|
// this.selectProduct = [];
|
|
// this.total = 0;
|
|
// }
|
|
|
|
if (selectArr.length > 0) {
|
|
this.total = this.productList[0].price;
|
|
this.selectProduct = this.productList[0].id;
|
|
} else {
|
|
this.selectProduct = '';
|
|
this.total = 0;
|
|
}
|
|
},
|
|
|
|
slectProductChange(selectProductArr) {
|
|
this.total = 0;
|
|
if (selectProductArr.length == this.productList.length) {
|
|
this.selectAll.push(this.$t('page.home.all'));
|
|
} else {
|
|
this.selectAll = [];
|
|
}
|
|
this.productList.forEach(item => {
|
|
selectProductArr.forEach(pro => {
|
|
if (item.id == pro) {
|
|
this.total += item.price;
|
|
}
|
|
})
|
|
})
|
|
},
|
|
|
|
getCartProductList() { //获取购物车商品列表
|
|
this.request('getCartList', {}, {
|
|
"pageSize": 999,
|
|
"currentPage": 0
|
|
}).then(res => {
|
|
if (res.code == 200) {
|
|
this.forbiddenSelectAll = false;
|
|
this.productList = parseList(res.result.records)
|
|
if(this.productList && this.productList.length ==0){
|
|
this.forbiddenSelectAll = true;
|
|
}
|
|
this.cloeseAllSwiper();
|
|
//
|
|
this.selectProduct = ''
|
|
}
|
|
})
|
|
},
|
|
|
|
deleteCart(id) { //删除购物车
|
|
this.request("delCartNum", {
|
|
id,
|
|
}).then(res => {
|
|
if (res.code === 200) {
|
|
uni.$u.toast(this.$t('success-operation'));
|
|
this.getCartProductList();
|
|
}
|
|
})
|
|
},
|
|
|
|
editNum(currentProduct, num) { //修改购物车数量
|
|
this.request('editCartNum', {
|
|
id: currentProduct.id,
|
|
shopId : currentProduct.shopId,
|
|
num
|
|
}).then(res => {
|
|
if (res.code === 200) {
|
|
uni.$u.toast(this.$t('success-operation'));
|
|
this.getCartProductList();
|
|
}
|
|
})
|
|
},
|
|
|
|
cloeseAllSwiper() {
|
|
if (this.$refs.item) {
|
|
this.$refs.item.forEach(item => item.closeHandler(true))
|
|
}
|
|
},
|
|
createOrder() { //创建订单
|
|
if(!this.selectProduct){
|
|
return uni.$u.toast(this.$t('page.cart.Please_select_product'))
|
|
}
|
|
let item = {};
|
|
this.productList.forEach(n=>{
|
|
if(n.id == this.selectProduct){
|
|
item = n;
|
|
}
|
|
})
|
|
this.request("createOrder", {
|
|
shopId: item.shopId,
|
|
num: item.num,
|
|
price: item.price,
|
|
image: item.image,
|
|
title: item.shopName,
|
|
subTitle: item.shopName
|
|
}).then(res => {
|
|
if (res.code === 200) {
|
|
|
|
this.request('delCartNum', {
|
|
id : this.selectProduct
|
|
})
|
|
|
|
return uni.navigateTo({
|
|
url: '/pages/payOrder/payOrder?id=' + res.result.id + '&quantity=' + item.num
|
|
})
|
|
}
|
|
})
|
|
},
|
|
radioChange(item){
|
|
this.productList.forEach(n=>{
|
|
if(n.id == item){
|
|
this.total = n.price;
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.cart {
|
|
padding-bottom: 50px;
|
|
|
|
.cart-item {
|
|
background: white;
|
|
|
|
.cart-item-body {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
padding: 20px 10px;
|
|
|
|
.u-checkbox {
|
|
width: 80rpx;
|
|
}
|
|
|
|
.img-box {
|
|
width: 160rpx;
|
|
height: 160rpx;
|
|
border-radius: 12rpx;
|
|
overflow: hidden;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.product-info {
|
|
box-sizing: border-box;
|
|
width: calc(100% - 240rpx);
|
|
padding-left: 20rpx;
|
|
font-size: 26rpx;
|
|
|
|
.product-name {
|
|
overflow: hidden;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.product-price {
|
|
color: #E01717;
|
|
margin-top: 5px;
|
|
|
|
.integer {
|
|
font-size: 36rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.prodict-num {
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
padding: 10px;
|
|
}
|
|
}
|
|
|
|
.no-product {
|
|
height: calc(100vh - 144px);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
.box {
|
|
font-size: 26rpx;
|
|
text-align: center;
|
|
|
|
.to-home {
|
|
padding: 20rpx 140rpx;
|
|
border: 1px solid #ccc;
|
|
border-radius: 5px;
|
|
text-align: center;
|
|
margin: 20rpx 0px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.cart-bottom {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
position: fixed;
|
|
left: 0;
|
|
bottom: 50px;
|
|
height: 100rpx;
|
|
width: 100%;
|
|
background: white;
|
|
z-index: 100;
|
|
box-shadow: -1px -1px 2px rgba(0, 0, 0, .1);
|
|
|
|
.u-checkbox-group {
|
|
box-sizing: border-box;
|
|
width: 130rpx;
|
|
padding-left: 10px;
|
|
}
|
|
|
|
.total-price {
|
|
font-size: 28rpx;
|
|
|
|
.total {
|
|
font-size: 36rpx;
|
|
color: #ED7A2F;
|
|
}
|
|
}
|
|
|
|
.buy {
|
|
height: 100%;
|
|
line-height: 100rpx;
|
|
width: 240rpx;
|
|
background: #ED7A2F;
|
|
color: white;
|
|
text-align: center;
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
|
|
//修改组件样式
|
|
.u-page {
|
|
padding: 0;
|
|
}
|
|
|
|
.u-demo-block__title {
|
|
padding: 10px 0 2px 15px;
|
|
}
|
|
|
|
.swipe-action {
|
|
&__content {
|
|
padding: 25rpx 0;
|
|
|
|
&__text {
|
|
font-size: 15px;
|
|
color: $u-main-color;
|
|
padding-left: 30rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
&::v-deep .u-swipe-action-item__right__button__wrapper {
|
|
background-color: red !important;
|
|
width: 60rpx;
|
|
}
|
|
|
|
&::v-deep .u-swipe-action-item__right__button__wrapper__text {
|
|
span {
|
|
font-size: 26rpx !important;
|
|
}
|
|
}
|
|
|
|
&::v-deep .u-swipe-action-item {
|
|
margin-top: 10px;
|
|
}
|
|
}
|
|
</style>
|