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.
141 lines
3.3 KiB
141 lines
3.3 KiB
<!--
|
|
* @Author: ch
|
|
* @Date: 2022-05-04 17:30:58
|
|
* @LastEditors: ch
|
|
* @LastEditTime: 2022-05-08 16:25:39
|
|
* @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">
|
|
<button class="btn" @click="submit">立即支付</button>
|
|
</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';
|
|
export default {
|
|
components: { BsPay, UIGoodsInfo, OrderInfo, Message, Amount },
|
|
data(){
|
|
return {
|
|
address : {id:3},
|
|
orderInfo : {},
|
|
orderId : '',
|
|
userMessage : '',
|
|
payVisible : true
|
|
}
|
|
},
|
|
created(){
|
|
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;
|
|
.btn{
|
|
background: #FF512B;
|
|
color: #fff;
|
|
font-size: 18px;
|
|
border: none;
|
|
height: 50px;
|
|
width: 163px;
|
|
margin-top: 10px;
|
|
}
|
|
}
|
|
|
|
</style> |