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.
shop-app/pages/order/submit.vue

341 lines
7.8 KiB

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<!--
* @Author: ch
* @Date: 2022-03-20 14:14:53
* @LastEditors: ch
* @LastEditTime: 2022-04-22 19:51:14
* @Description: file content
-->
<template>
<view>
<u-cell class="address" :border="false" isLink
@click="selectAddress">
<view slot="title" class="address--title">
{{address.province ? address.province + address.city + address.area : '请选择收货地址'}}
</view>
<image class="address--icon" slot="icon" src="@/static/order/dw.png" />
<view slot="label" class="address--label" v-if="address.province">
<text>收货人:{{address.name}}</text>
<text>{{address.phone}}</text>
</view>
</u-cell>
<view class="goods-group">
<view class="goods-group--item" v-for="item in orderInfo.products" :key="item.productId">
<image class="goods-group--item-image" mode="widthFix" :src="item.productImageUrl" />
<view >
<view class="goods-group--item-con">
<text class="goods-group--item-title">{{item.productName}}</text>
<text class="goods-group--item-pirce">¥{{item.productPrice}}</text>
</view>
<view class="goods-group--item-desc">
<text>{{item.skuDescribe}}</text>
<text class="goods-group--item-num">x{{item.quantity}}</text>
</view>
</view>
</view>
</view>
<view class="service">
<UiCell class="service--cell" title="配送方式" value="快递配送" :rightIcon="false"></UiCell>
<UiCell class="service--cell service--cell__last" title="买家留言" value="快递配送" :rightIcon="false">
<textarea slot="value" class="service--remark" auto-height v-model="userMessage"
maxlength="50" placeholder="填写您想要备注的信息50字以内" />
</UiCell>
</view>
<view class="play">
<text class="play--title">支付方式</text>
<radio-group>
<u-cell title="微信支付" :border="false" @click="payType = 'wxpay'">
<image class="play--icon" slot="icon" src="@/static/order/wx.png"/>
<radio class="play--radio" slot="right-icon" color="#FF875B"
:checked="payType == 'wxpay'" ></radio>
</u-cell>
<u-cell title="支付宝支付" :border="false" @click="payType = 'alipay'">
<image class="play--icon" slot="icon" src="@/static/order/zfb.png"/>
<radio class="play--radio" slot="right-icon" color="#FF875B"
:checked="payType == 'alipay'"></radio>
</u-cell>
</radio-group>
</view>
<view class="amount">
<u-cell title="商品总额" :value="`¥${orderInfo.totalAmount}`" :border="false"></u-cell>
<u-cell title="运费" :value="`¥${orderInfo.shippingAmount}`" :border="false"></u-cell>
</view>
<view class="footer">
<view class="footer--total">
<text>合计</text>
<text class="footer--amount">{{orderInfo.payAmount}}</text>
</view>
<UiButton class="footer--btn" type="solid" @click="submit"></UiButton>
</view>
</view>
</template>
<script>
import UiCell from '@/components/UiCell';
import {ApiPostSubmitOrder, ApiPostWxPay, ApiGetBeforeOrder, ApiGetBeforeCartOrder} from '@/common/api/order';
import UiButton from '@/components/UiButton.vue';
export default {
components : {UiCell, UiButton },
data(){
return {
address : {},
userMessage : '',
orderInfo : {},
payType : 'wxpay'
}
},
onLoad(){
// 从地址列表页改变了收货地址
uni.$on('changeAddress',(item, type)=>{
if(type == 'submitOrder'){
this.address = item;
}
});
// 默认选择设为默认的地址
this.address = this.$store.state.address.find(i => i.isDefault) || {};
},
onShow(){
this.getBeforeOrder();
},
methods:{
/**
* 获取预订单信息,将要提交的订单信息
*/
async getBeforeOrder(addressId){
const query = this.$Route.query;
let res = {};
// 购物车结算
if(query.mode === 'cart'){
res = await ApiGetBeforeCartOrder({
cartIds: query.ids,
recipientAddressId : addressId
})
}
// 立即购买
if(query.mode === 'buyNow'){
res = await ApiGetBeforeOrder({
productSkuId : query.skuId,
quantity : query.num,
// 1正常购买 2活动购买
activityType : query.activityType,
recipientAddressId : addressId
});
}
if(res.error){
uni.$u.toast(res.error.message);
return false;
}
this.orderInfo = res.result;
},
selectAddress(){
const selectedId = this.address.id;
const selectedPar = selectedId ? `&id=${selectedId}` : '&status=created';
this.$Router.push(`/addressList?source=submitOrder${selectedPar}`);
},
/**
* 提交订单
*/
async submit(){
const {query} = this.$Route;
if(!this.address.id){
uni.$u.toast('请选择收货地址');
return false;
}
const {error, result} = await ApiPostSubmitOrder({
orderSource : 2,
recipientAddressId : this.address.id,
shoppingCartIds : query.ids ? query.ids.split(',') : [],
products : this.orderInfo.products.map(i => ({
productId : i.productId,
productSkuId : i.productSkuId,
quantity : i.quantity,
activityType : query.activityType
})),
userMessage : this.userMessage
});
if(error){
uni.$u.toast(error.message);
return false;
}
this.wxpay(result.orderId);
},
wxpay(orderId){
this.$msb.confirm({
content : '您确定要支付吗?',
cancelText : '暂不支付',
confirmText : '立即支付',
confirm : async () => {
const {error, result} = await ApiPostWxPay({orderId,payTypeEnum:'WXPAY'});
if(error){
this.$Router.replace(`/payFail?ordId=${orderId}`)
}else{
this.$Router.replace(`/paySuccess?ordId=${orderId}`)
}
},
cancel : ()=>{
this.$Router.replace(`/orderDetail?id=${orderId}`)
}
})
}
}
}
</script>
<style lang="scss" scoped>
page{
background: $color-grey1;
padding-bottom: 140rpx;
}
.address{
background: $color-grey0;
/deep/.u-cell__body__content{
padding: 10rpx 0;
}
&--title{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 500rpx;
&__grey{
color: $color-grey4;
}
}
&--icon{
width: 28rpx;
height: 34rpx;
margin-right: 30rpx;
}
&--label{
margin-top: 26rpx;
text{
font-size: $font-size-sm;
color: $color-grey4;
margin-right: 40rpx;
}
}
}
.goods-group{
background: $color-grey0;
margin: 20rpx 0;
&--item{
display: flex;
justify-content: space-between;
padding: 30rpx;
border-bottom: 1px solid $color-grey2;
&-image{
width: 180rpx;
height: 180rpx;
margin-right: 30rpx;
}
&-con{
width: 510rpx;
display: flex;
justify-content: space-between;
font-size: $font-size-base;
color: $color-grey6;
line-height: 39rpx;
}
&-title{
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
}
&-pirce{
font-size: 22rpx;
margin-left: 60rpx;
}
&-desc{
width: 510rpx;
font-size: $font-size-sm;
color: $color-grey4;
margin-top: 20rpx;
line-height: 39rpx;
display: flex;
justify-content: space-between;
}
&-num{
font-size: $font-size-base;
margin-left: 60rpx;
}
}
}
.service{
background: $color-grey0;
margin: 20rpx 0;
&--cell{
padding: 0 30rpx;
&__last{
border: 0;
}
}
&--remark{
font-size: $font-size-base;
width: 500rpx;
text-align: right;
}
}
.play{
background: $color-grey0;
margin: 20rpx 0;
&--title{
font-size: $font-size-base;
padding: 30rpx;
display: block;
}
&--icon{
width: 39rpx;
height: 39rpx;
margin-right: 20rpx;
}
&--radio{
transform: scale(70%);
}
}
.amount{
background: $color-grey0;
}
.footer{
display: flex;
align-items: center;
justify-content: space-between;
height: 120rpx;
background: $color-grey0;
padding: 0 30rpx;
position: fixed;
bottom: 0;
right: 0;
left: 0;
&--total{
color: $color-grey5;
font-size: $font-size-sm;
display: flex;
align-items: center;
}
&--amount{
font-size: $font-size-lg;
color: $color-yellow4;
margin-left: 10rpx;
}
&--btn{
margin: 0;
}
}
</style>