|
|
|
@ -8,29 +8,48 @@ |
|
|
|
|
|
|
|
<!-- 商品信息 --> |
|
|
|
<view class="content-wrapper"> |
|
|
|
<view class="section-wrapper"> |
|
|
|
<view class="section-title"> |
|
|
|
<view class="title-bar"></view> |
|
|
|
<text>商品信息</text> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="product-card"> |
|
|
|
<image class="product-image" :src="productInfo.image && |
|
|
|
productInfo.image.split(',')[0]" mode="aspectFit"></image> |
|
|
|
<view class="product-details"> |
|
|
|
<view class="product-name">{{productInfo.name || ''}}</view> |
|
|
|
<view class="product-tags"> |
|
|
|
<text class="tag">{{productInfo.categoryName || ''}}</text> |
|
|
|
<text class="tag">快速下单</text> |
|
|
|
</view> |
|
|
|
<view class="product-price"> |
|
|
|
<text class="price-value">¥{{productInfo.price || ''}}</text> |
|
|
|
<text class="price-unit">元/{{productInfo.unit || ''}}</text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<uv-checkbox-group |
|
|
|
shape="circle" |
|
|
|
v-model="checkboxValue"> |
|
|
|
|
|
|
|
<view class="section-wrapper"> |
|
|
|
<view class="section-title"> |
|
|
|
<view class="title-bar"></view> |
|
|
|
<text>商品信息</text> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="product-card" v-for="(info, index) in productInfo.commonShop"> |
|
|
|
|
|
|
|
<view class="checkbox"> |
|
|
|
<uv-checkbox |
|
|
|
:name="info.id" |
|
|
|
activeColor="#eb3300" |
|
|
|
size="40rpx" |
|
|
|
icon-size="35rpx" |
|
|
|
></uv-checkbox> |
|
|
|
</view> |
|
|
|
|
|
|
|
<image class="product-image" :src="info.image && |
|
|
|
info.image.split(',')[0]" mode="aspectFill"></image> |
|
|
|
<view class="product-details"> |
|
|
|
<view class="product-name">{{info.name || ''}}</view> |
|
|
|
<view class="product-tags"> |
|
|
|
<text class="tag">快速下单</text> |
|
|
|
</view> |
|
|
|
<view class="product-price"> |
|
|
|
<text class="price-value">¥{{info.price || ''}}</text> |
|
|
|
<text class="price-unit">元/{{info.unit || ''}}</text> |
|
|
|
</view> |
|
|
|
<view class="selectNum"> |
|
|
|
<uv-number-box v-model="info.selectNum"></uv-number-box> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
</uv-checkbox-group> |
|
|
|
|
|
|
|
<!-- 个人信息 --> |
|
|
|
<view class="section-wrapper"> |
|
|
|
<view class="section-title"> |
|
|
|
@ -49,7 +68,7 @@ |
|
|
|
{{address.address}} {{address.addressDetails}} |
|
|
|
</view> |
|
|
|
<view class="address-action"> |
|
|
|
<text class="address-tip">已添加过的地址</text> |
|
|
|
<text class="address-tip">选择其他已添加过的地址</text> |
|
|
|
<view class="arrow-right"></view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
@ -71,7 +90,8 @@ |
|
|
|
|
|
|
|
<!-- 底部按钮 --> |
|
|
|
<view class="order-submit"> |
|
|
|
<button class="submit-btn" @click="submitOrder">快捷下单</button> |
|
|
|
<button class="submit-btn-close" @click="cancelOrderFast">取消</button> |
|
|
|
<button class="submit-btn" @click="submitOrder">快捷下单（￥{{ totalPrice }}）</button> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 地址选择弹窗 --> |
|
|
|
@ -96,7 +116,10 @@ |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
productInfo: {}, // 商品信息 |
|
|
|
checkboxValue : [], |
|
|
|
productInfo: { |
|
|
|
commonShop : [], |
|
|
|
}, // 信息 |
|
|
|
orderId: '', // 订单ID |
|
|
|
address: { |
|
|
|
name: '请选择地址', |
|
|
|
@ -109,6 +132,20 @@ |
|
|
|
shouldSubmitOrder: false // 标记是否应该在获取地址后自动提交订单 |
|
|
|
}; |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
totalPrice(){ |
|
|
|
if (!this.checkboxValue.length || !this.productInfo.commonShop) { |
|
|
|
return 0 |
|
|
|
} |
|
|
|
let price = 0 |
|
|
|
this.productInfo.commonShop.forEach(n => { |
|
|
|
if(this.checkboxValue.includes(n.id)){ |
|
|
|
price += n.price * (n.selectNum || 1) |
|
|
|
} |
|
|
|
}) |
|
|
|
return Number(price).toFixed(2) |
|
|
|
}, |
|
|
|
}, |
|
|
|
onLoad(options) { |
|
|
|
// 获取订单ID |
|
|
|
if (options.orderId) { |
|
|
|
@ -125,10 +162,12 @@ |
|
|
|
getOrderInfo() { |
|
|
|
this.$api('getOrderInfo', res => { |
|
|
|
if (res.code === 200 && res.result[0]) { |
|
|
|
// 如果返回商品信息，则设置商品信息 |
|
|
|
if (res.result[0].commonShop) { |
|
|
|
this.productInfo = res.result[0].commonShop; |
|
|
|
} |
|
|
|
// 如果返回商品信息，则设置商品信息 commonShop |
|
|
|
this.productInfo = res.result[0]; |
|
|
|
|
|
|
|
this.productInfo.commonShop.forEach(n => { |
|
|
|
this.checkboxValue.push(n.id) |
|
|
|
}) |
|
|
|
} |
|
|
|
}); |
|
|
|
}, |
|
|
|
@ -234,28 +273,52 @@ |
|
|
|
uni.showLoading({ |
|
|
|
title: '提交订单中...' |
|
|
|
}); |
|
|
|
|
|
|
|
// 创建订单 |
|
|
|
this.$api('createOrder', { |
|
|
|
|
|
|
|
let list = [] |
|
|
|
|
|
|
|
this.productInfo.commonShop.forEach(n => { |
|
|
|
if(this.checkboxValue.includes(n.id)){ |
|
|
|
list.push({ |
|
|
|
num: n.selectNum || 1, |
|
|
|
shopId: n.id, |
|
|
|
}) |
|
|
|
} |
|
|
|
}) |
|
|
|
|
|
|
|
let data = { |
|
|
|
addressId: this.address.id, |
|
|
|
productId: this.productInfo.id, |
|
|
|
num : 1, |
|
|
|
payType: 1, // 默认微信支付 |
|
|
|
orderId: this.orderId |
|
|
|
}, res => { |
|
|
|
orderId: this.orderId, |
|
|
|
list: JSON.stringify(list), |
|
|
|
} |
|
|
|
|
|
|
|
/* |
|
|
|
{ |
|
|
|
addressId: this.address.id, |
|
|
|
productId: this.productInfo.id, |
|
|
|
num : 1, |
|
|
|
payType: 1, // 默认微信支付 |
|
|
|
orderId: this.orderId |
|
|
|
} |
|
|
|
*/ |
|
|
|
|
|
|
|
// 创建订单 |
|
|
|
this.$api('createSumOrder', data, res => { |
|
|
|
uni.hideLoading(); |
|
|
|
if (res.code === 200) { |
|
|
|
uni.showToast({ |
|
|
|
title: '下单成功', |
|
|
|
icon: 'success', |
|
|
|
duration: 1500, |
|
|
|
success: () => { |
|
|
|
setTimeout(() => { |
|
|
|
// 跳转到订单列表页 |
|
|
|
this.$utils.redirectTo('/pages_order/order/orderList'); |
|
|
|
}, 1500); |
|
|
|
} |
|
|
|
}); |
|
|
|
uni.requestPaymentWxPay(res) |
|
|
|
.then(e => { |
|
|
|
uni.showToast({ |
|
|
|
title: '下单成功', |
|
|
|
icon: 'none' |
|
|
|
}) |
|
|
|
|
|
|
|
this.paySuccess(res) |
|
|
|
}).catch(n => { |
|
|
|
setTimeout(uni.redirectTo, 700, { |
|
|
|
url: '/pages/index/order' |
|
|
|
}) |
|
|
|
}) |
|
|
|
} else { |
|
|
|
uni.showToast({ |
|
|
|
title: res.message || '下单失败', |
|
|
|
@ -263,7 +326,32 @@ |
|
|
|
}); |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
}, |
|
|
|
paySuccess(res){ |
|
|
|
setTimeout(uni.redirectTo, 700, { |
|
|
|
url: '/pages/index/order' |
|
|
|
}) |
|
|
|
}, |
|
|
|
cancelOrderFast(){ |
|
|
|
uni.showModal({ |
|
|
|
title: '确认取消吗？', |
|
|
|
success : res => { |
|
|
|
if(res.confirm){ |
|
|
|
this.$api('cancelOrderFast', { |
|
|
|
orderId : this.orderId |
|
|
|
}).then(res => { |
|
|
|
uni.showToast({ |
|
|
|
title: '取消成功', |
|
|
|
icon: 'none', |
|
|
|
success() { |
|
|
|
uni.navigateBack(-1) |
|
|
|
} |
|
|
|
}) |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
@ -282,6 +370,7 @@ |
|
|
|
margin-bottom: 20rpx; |
|
|
|
border-radius: 12rpx; |
|
|
|
overflow: hidden; |
|
|
|
width: 100%; |
|
|
|
background-color: #fff; |
|
|
|
} |
|
|
|
|
|
|
|
@ -309,10 +398,16 @@ |
|
|
|
.product-card { |
|
|
|
display: flex; |
|
|
|
padding: 30rpx; |
|
|
|
|
|
|
|
.checkbox{ |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
|
|
|
|
.product-image { |
|
|
|
width: 180rpx; |
|
|
|
height: 180rpx; |
|
|
|
width: 200rpx; |
|
|
|
height: 200rpx; |
|
|
|
margin-right: 30rpx; |
|
|
|
background-color: #f9f9f9; |
|
|
|
border-radius: 8rpx; |
|
|
|
@ -323,34 +418,33 @@ |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
justify-content: space-between; |
|
|
|
gap: 6rpx; |
|
|
|
|
|
|
|
.product-name { |
|
|
|
font-size: 32rpx; |
|
|
|
font-size: 28rpx; |
|
|
|
font-weight: 500; |
|
|
|
color: #333; |
|
|
|
margin-bottom: 15rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.product-tags { |
|
|
|
display: flex; |
|
|
|
margin-bottom: 20rpx; |
|
|
|
|
|
|
|
.tag { |
|
|
|
font-size: 24rpx; |
|
|
|
color: #D03F25; |
|
|
|
padding: 4rpx 12rpx; |
|
|
|
background-color: rgba(208, 63, 37, 0.1); |
|
|
|
border-radius: 4rpx; |
|
|
|
border-radius: 14rpx; |
|
|
|
margin-right: 15rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.product-price { |
|
|
|
font-size: 28rpx; |
|
|
|
font-size: 26rpx; |
|
|
|
color: #666; |
|
|
|
|
|
|
|
.price-value { |
|
|
|
font-size: 40rpx; |
|
|
|
font-size: 30rpx; |
|
|
|
font-weight: 600; |
|
|
|
color: #D03F25; |
|
|
|
} |
|
|
|
@ -428,24 +522,33 @@ |
|
|
|
} |
|
|
|
|
|
|
|
.order-submit { |
|
|
|
position: fixed; |
|
|
|
bottom: 0; |
|
|
|
left: 0; |
|
|
|
right: 0; |
|
|
|
display: flex; |
|
|
|
padding: 20rpx 30rpx; |
|
|
|
background-color: #fff; |
|
|
|
box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05); |
|
|
|
|
|
|
|
gap: 20rpx; |
|
|
|
.submit-btn-close{ |
|
|
|
height: 90rpx; |
|
|
|
line-height: 90rpx; |
|
|
|
text-align: center; |
|
|
|
background-color: rgba($uni-color, 0.2); |
|
|
|
border: 1rpx solid $uni-color; |
|
|
|
color: $uni-color; |
|
|
|
font-size: 32rpx; |
|
|
|
border-radius: 45rpx; |
|
|
|
border: none; |
|
|
|
flex: 1; |
|
|
|
} |
|
|
|
.submit-btn { |
|
|
|
width: 100%; |
|
|
|
height: 90rpx; |
|
|
|
line-height: 90rpx; |
|
|
|
text-align: center; |
|
|
|
background-color: #D03F25; |
|
|
|
background-color: $uni-color; |
|
|
|
color: #fff; |
|
|
|
font-size: 32rpx; |
|
|
|
border-radius: 45rpx; |
|
|
|
border: none; |
|
|
|
flex: 4; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
