shop-pc/pages/order/submit/index.vue

<!--
 * @Author: ch
 * @Date: 2022-05-04 17:30:58
 * @LastEditors: ch
 * @LastEditTime: 2022-05-09 14:13:53
 * @Description: file content
-->

<template>
	<div style="padding-top:350px">
		<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="orderId" @cancel="cancelPay"/>
	</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';
export default {
	components: { BsPay, UIGoodsInfo, OrderInfo, Message, Amount, UiButton },
	data(){
		return {
			address : {id:3},
			orderInfo : {},
			orderId : '',
			userMessage : '',
			payVisible : false
		}
	},
	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.orderId = result.orderId;

		},
		cancelPay(){
			this.$router.replace('/order/detail')
		}
	}
}
</script>
<style lang="scss" scoped>
.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>