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.
280 lines
6.0 KiB
280 lines
6.0 KiB
<template>
|
|
<view class="page">
|
|
<navbar title="购物车" leftClick @leftClick="$utils.navigateBack" />
|
|
|
|
<view class="user">
|
|
<!-- <uv-checkbox-group
|
|
shape="circle"
|
|
v-model="cartCheckboxValue"> -->
|
|
<uv-radio-group v-model="radiovalue">
|
|
|
|
<uv-swipe-action>
|
|
<view
|
|
v-for="(item, index) in cartList"
|
|
:key="index">
|
|
<view style="margin-top: 20rpx;"></view>
|
|
<uv-swipe-action-item
|
|
:options="options"
|
|
@click="delCart(item, index)">
|
|
<view class="item">
|
|
<view class="checkbox">
|
|
<!-- <uv-checkbox
|
|
:name="item.shopcar.id"
|
|
activeColor="#FA5A0A"
|
|
size="40rpx"
|
|
icon-size="35rpx"
|
|
></uv-checkbox> -->
|
|
|
|
<uv-radio
|
|
:name="item.shopcar.id"
|
|
activeColor="#FA5A0A"
|
|
size="40rpx"
|
|
icon-size="35rpx">
|
|
</uv-radio>
|
|
</view>
|
|
|
|
<image
|
|
class="image"
|
|
:src="item.wares.waresImage"
|
|
mode=""></image>
|
|
|
|
<view class="info">
|
|
<view class="title">
|
|
<view class="">
|
|
{{ item.wares.waresTitle }}
|
|
</view>
|
|
<view class="">
|
|
<uv-number-box v-model="item.shopcar.shopcarNumber"
|
|
@change="e => valChange(item, e)"></uv-number-box>
|
|
</view>
|
|
</view>
|
|
<!-- <view class="unit">
|
|
规格：{{ item.unit }}
|
|
<uv-icon name="arrow-down"></uv-icon>
|
|
</view> -->
|
|
<view class="price">
|
|
￥<text>{{ item.wares.waresPrice }}</text>元
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</uv-swipe-action-item>
|
|
</view>
|
|
</uv-swipe-action>
|
|
<!-- </uv-checkbox-group> -->
|
|
</uv-radio-group>
|
|
|
|
<cartAction
|
|
:price="totalPrice"
|
|
:num="num"
|
|
@submit="$refs.addressPopup.open('bottom')"/>
|
|
</view>
|
|
|
|
<!-- 地址弹框 -->
|
|
<uv-popup ref="addressPopup" :round="30">
|
|
<addressList ref="addressList" height="60vh" @select="selectAddress" />
|
|
</uv-popup>
|
|
|
|
<tabber select="3" />
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import cartAction from '../components/product/cartAction.vue'
|
|
import { mapState } from 'vuex'
|
|
import addressList from '../components/address/addressList.vue'
|
|
export default {
|
|
components: {
|
|
cartAction,
|
|
addressList,
|
|
},
|
|
data() {
|
|
return {
|
|
radiovalue : 0,
|
|
options: [
|
|
{
|
|
text: '删除',
|
|
style: {
|
|
backgroundColor: '#FA5A0A'
|
|
}
|
|
},
|
|
],
|
|
addressTotal: 0,
|
|
address: {
|
|
name: '请选择联系人',
|
|
addressDetail: ''
|
|
},
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState(['cartList', 'cartCheckboxValue']),
|
|
totalPrice() {
|
|
if (!this.radiovalue) {
|
|
return '0'
|
|
}
|
|
let price = 0
|
|
this.cartList.forEach(n => {
|
|
if (this.radiovalue == n.shopcar.id) {
|
|
price += n.wares.waresPrice * (n.shopcar.shopcarNumber || 1)
|
|
}
|
|
})
|
|
return price
|
|
},
|
|
num(){
|
|
if (!this.radiovalue) {
|
|
return '0'
|
|
}
|
|
let num = 0
|
|
this.cartList.forEach(n => {
|
|
if (this.radiovalue == n.shopcar.id) {
|
|
num += (n.shopcar.shopcarNumber || 1)
|
|
}
|
|
})
|
|
return num
|
|
},
|
|
},
|
|
onShow() {
|
|
this.$store.commit('getCartList')
|
|
this.getAddressListA()
|
|
},
|
|
methods: {
|
|
// 选择地址
|
|
selectAddress(e) {
|
|
this.address = e
|
|
this.$refs.addressPopup.close()
|
|
this.submit()
|
|
},
|
|
// 获取地址列表
|
|
getAddressListA() {
|
|
this.$refs.addressList.getAddressList().then(res => {
|
|
this.addressTotal = res.total
|
|
if (this.addressTotal != 0) {
|
|
this.address = res.records[0]
|
|
}
|
|
})
|
|
},
|
|
valChange(item, e){
|
|
this.$api('updateShopcar', {
|
|
id : item.shopcar.id,
|
|
shopcarNumber : e.value,
|
|
})
|
|
},
|
|
// 删除购物车
|
|
delCart(item, index){
|
|
this.$api('deleteShopcar', {
|
|
shopcarId : item.shopcar.id
|
|
}, res => {
|
|
if(res.code == 200){
|
|
this.$store.commit('getCartList')
|
|
uni.showToast({
|
|
title: '删除成功',
|
|
});
|
|
}
|
|
})
|
|
},
|
|
submit(){
|
|
|
|
let data = {}
|
|
|
|
this.cartList.forEach(n => {
|
|
if (this.radiovalue == n.shopcar.id) {
|
|
data.waresId = n.shopcar.waresId
|
|
data.number = n.shopcar.shopcarNumber
|
|
data.addressId = this.address.id
|
|
}
|
|
})
|
|
|
|
if(this.$utils.verificationAll(data, {
|
|
addressId : '请选择地址',
|
|
waresId : '请选择商品',
|
|
number : '请选择数量',
|
|
})){
|
|
return
|
|
}
|
|
|
|
this.$api('addWaresOrder', data, res => {
|
|
if(res.code == 200){
|
|
|
|
uni.redirectTo({
|
|
url: '/pages_order/order/order'
|
|
})
|
|
|
|
// uni.requestPayment({
|
|
// provider: 'wxpay', // 服务提提供商
|
|
// timeStamp: res.result.timeStamp, // 时间戳
|
|
// nonceStr: res.result.nonceStr, // 随机字符串
|
|
// package: res.result.packageValue,
|
|
// signType: res.result.signType, // 签名算法
|
|
// paySign: res.result.paySign, // 签名
|
|
// success: function (res) {
|
|
// console.log('支付成功',res);
|
|
// uni.redirectTo({
|
|
// url: '/pages/index/order'
|
|
// })
|
|
// },
|
|
// fail: function (err) {
|
|
// console.log('支付失败',err);
|
|
// uni.showToast({
|
|
// icon:'none',
|
|
// title:"支付失败"
|
|
// })
|
|
// }
|
|
// });
|
|
}
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.page {
|
|
padding-bottom: 200rpx;
|
|
/deep/ .uv-swipe-action{
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.user {
|
|
.item{
|
|
background-color: #fff;
|
|
display: flex;
|
|
padding: 30rpx;
|
|
.checkbox{
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.image{
|
|
width: 200rpx;
|
|
height: 200rpx;
|
|
border-radius: 20rpx;
|
|
}
|
|
.info{
|
|
flex: 1;
|
|
.title{
|
|
display: flex;
|
|
padding: 10rpx 20rpx;
|
|
justify-content: space-between;
|
|
|
|
}
|
|
.unit{
|
|
font-size: 24rpx;
|
|
padding: 10rpx 20rpx;
|
|
color: #717171;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.price{
|
|
color: $uni-color;
|
|
font-size: 28rpx;
|
|
padding: 10rpx 20rpx;
|
|
text{
|
|
font-size: 36rpx;
|
|
font-weight: 900;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
</style>
|