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

<!--
 * @Author: ch
 * @Date: 2022-05-04 17:30:58
 * @LastEditors: ch
 * @LastEditTime: 2022-05-10 12:22:53
 * @Description: file content
-->

<template>
	<div class="main">
		<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" :timer="payTimerTxt"
			@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';
export default {
	components: { BsPay, UIGoodsInfo, OrderInfo, Message, Amount, UiButton },
	data(){
		return {
			address : {id:3},
			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;
			// 待支付 开始倒计时
			if(this.payTimerStop){
				clearTimeout(this.payTimerStop);
			}
			this.calcTimerStartSecondNum();

		},
		/**
		 * 计算倒计时开始秒数
		 */
		calcTimerStartSecondNum(){
			let expireTime = (new Date(this.payOrder.expireTime.replace(/-/g,'/'))).getTime(),
				curTime = (new Date(this.payOrder.serverTime.replace(/-/g,'/'))).getTime(),
				second = Math.floor((expireTime - curTime) / 1000);
			this.payStartSecondNum = second > 0 ? second : 0;
			this.timer();
		},
		/**
		 * 待付款的倒计时
		 */
		timer(){
			if(this.payStartSecondNum == 0){
				this.$emit('close');
				return;
			}
			this.payStartSecondNum--;
			let minute = parseInt(this.payStartSecondNum / 60);
			let second = parseInt(this.payStartSecondNum % 60);
			this.payTimerTxt = `剩余${minute > 0 ? `${minute}分` : ''} ${second}秒`;
			this.payTimerStop = setTimeout(()=>this.timer(),1000)
		},
		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
}
.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>