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-pc/pages/order/submit/index.vue

147 lines
3.6 KiB

<!--
* @Author: ch
* @Date: 2022-05-04 17:30:58
* @LastEditors: ch
* @LastEditTime: 2022-05-12 09:58:47
* @Description: file content
-->
<template>
<div class="main">
<h3 class="title">收货地址</h3>
<BsAddress v-model="address"/>
<!-- <h3 class="title">支付方式</h3>
<div class="pay-type">
<el-radio label="微信支付" />
<el-radio label="支付宝支付" />
</div> -->
<h3 class="title">确认商品信息</h3>
<OrderInfo :products="orderInfo.products" />
<Message :orderInfo="orderInfo" :message.sync="userMessage"/>
<Amount :amount="orderInfo.payAmount"/>
<div class="pay">
<UiButton radius type="red_panel" @click="submit"></UiButton>
</div>
<BsPay :visible.sync="payVisible" :orderId="payOrder.orderId"
@cancel="cancelPay" @finish="finishPay" />
</div>
</template>
<script>
import {ApiPostSubmitOrder, ApiGetBeforeOrder, ApiGetBeforeCartOrder} from '@/plugins/api/order';
import BsPay from '../../../components/BsPay.vue';
import UIGoodsInfo from '../../../components/UIGoodsInfo.vue';
import OrderInfo from './module/OrderInfo.vue';
import Message from './module/Message.vue';
import Amount from './module/Amount.vue';
import UiButton from '../../../components/UiButton.vue';
import BsAddress from '../../../components/BsAddress.vue';
export default {
components: { BsPay, UIGoodsInfo, OrderInfo, Message, Amount, UiButton, BsAddress },
data(){
return {
address : {},
orderInfo : {},
userMessage : '',
payOrder : {},
payVisible : false,
payTimerTxt : '',
payTimerStop : null
}
},
mounted(){
this.getBeforeOrder();
},
methods : {
/**
* 获取预订单信息,将要提交的订单信息
*/
async getBeforeOrder(){
const query = this.$route.query;
let res = {};
// 购物车结算
if(query.mode === 'cart'){
res = await ApiGetBeforeCartOrder({
cartIds: query.ids,
recipientAddressId : this.address.id
})
}
// 立即购买
if(query.mode === 'buyNow'){
res = await ApiGetBeforeOrder({
productSkuId : query.skuId,
quantity : query.num,
activityId : query.activityId,
activityTimeId : query.activityTimeId,
// 1正常购买 2活动购买
activityType : query.activityType,
recipientAddressId : this.address.id
});
}
if(res.error){
this.$message.error(res.error.message);
return false;
}
this.orderInfo = res.result;
},
/**
* 提交订单
*/
async submit(){
const {query} = this.$route;
if(!this.address.id){
this.$message.error('请选择收货地址');
return false;
}
const {error, result} = await ApiPostSubmitOrder({
orderSource : 4,
recipientAddressId : this.address.id,
shoppingCartIds : query.ids ? query.ids.split(',') : [],
products : this.orderInfo.products.map(i => ({
activityId : query.activityId,
activityTimeId : query.activityTimeId,
productId : i.productId,
productSkuId : i.productSkuId,
quantity : i.quantity,
activityType : query.activityType
})),
userMessage : this.userMessage
});
if(error){
this.$message.error(error.message);
return false;
}
this.payVisible = true;
this.payOrder = result;
},
cancelPay(){
this.$router.replace(`/account/order/detail?id=${this.payOrder.orderId}`)
},
finishPay(){
this.$router.replace(`/order/payResult?id=${this.payOrder.orderId}`)
}
}
}
</script>
<style lang="scss" scoped>
.main{
@include layout-box;
padding: 30px 0;
}
.title{
margin: 24px 0 13px;
}
.pay-type{
border: 1px solid #DDDDDD;
padding: 30px 70px;
}
.pay{
text-align: right;
padding-bottom: 50px;
margin-top: 10px;
}
</style>