八 order/confirmOrder.vue

<template>
	<view class='confirm-order'>
		<view class='order-path' v-if='path.id'>
			<image src="../static/images/address.png" mode=""></image>
			<view @click='selectAddress'>
				<view>{{ address }}</view>
				<view>{{ path.name }} {{ path.mobile }}</view>
			</view>
		</view>
		<view class='order-path' v-else>
			<image src="../static/images/address.png" mode=""></image>
			<view>请填写收获地址</view>
			<button @click='selectAddress'>填写地址</button>
		</view>
		<view class='goods'>
			<view>
				<image :src='goods.img'></image>
			</view>
			<view>
				<view>{{goods.title}}</view>
				<view>
					<text>{{ goods.currentPrice }}</text>
					<u-number-box :min="1" :max="goods.stock" v-model='goods.number'></u-number-box>
				</view>
			</view>
		</view>
		<u--textarea v-model="textarea" placeholder="请输入内容" ></u--textarea>
		<view class='confirm'>
			<view>合计: {{  goods.currentPrice * goods.number }}</view>
			<button @tap="$u.throttle(confirmOrder, 500)">提交订单</button>
		</view>
	</view>
</template>

<script>
import { paymentTrade } from '@/utils/api/order.js'
import { addressList } from '@/utils/api/address.js'

export default{
	data () {
		return {
			goods:{}, //商品详情
			textarea:'',//备注信息
			path:{}, //默认收货地址
		}
	},
	onLoad( e ){
		//接收下单时的参数
		if( e.goods ){
			this.goods = JSON.parse(e.goods);
		}
		//收货地址
		this.getAddress();
	},
	computed:{
		address(){
			return this.path.province + this.path.city +  this.path.county +  this.path.address;
		}
	},
	methods:{
		//获取默认收货地址
		async getAddress(){
			let res = await addressList();
			this.path = res.data.find(v=>{
				return v.defaulted == 1;
			})
		},
		async confirmOrder(){
			let that = this;
			//用户id
			let userId =  this.$store.state.userInfo.id;
			//时间戳
			let time = new Date().getTime();
			//商品信息
			let { id , spuId ,  number }  = this.goods;
			let res = await paymentTrade({
				"key": time,
				"uid": userId,//当前登录用户ID
				"addressId": this.path.id,//地址ID
				"goods": [{
					"spuId": spuId,
					"skuId": id,
					"counter": number
				}],
				"remark": this.textarea,//备注
			})
			//去支付 ==> 以上下单参数没问题
			if( res.code =='200'){
				let { orderNumber } = res.data;
				let params = res.data.params;
				 uni.requestPayment({
					nonceStr:params.nonceStr,
					package:params.package,
					paySign:params.paySign,
					signType:params.signType,
					timeStamp:params.timeStamp,
					success( e ){
						that.paymentEnd(2);
					},
					fail( e ){
						that.paymentEnd(1);
					}
				 })
			}
		},
		//支付成功 或 失败
		paymentEnd( msg ){
			uni.navigateTo({
				url:`/order/order-list?id=${ msg }`
			})
		},
		//选择收货地址
		selectAddress(){
			uni.navigateTo({
				url:'/address/address-list?type=1'
			})
		}
	}
}
</script>

<style>
.confirm-order{
	width:100vw;
	height:100vh;
	overflow: hidden;
	padding:0 11rpx;
	background: #F2F2F2;
}
.order-path{
	display: flex;
	justify-content: center;
	align-items: center;
	
	margin-top:22rpx;
	width: 727rpx;
	height: 148rpx;
	background: #FFFFFF;
	border-radius: 21rpx;
}
.order-path image{
	width: 45rpx;
	height: 45rpx;
	background: #FF4949;
}
.order-path view{
	flex:1;
	font-size: 25rpx;
	font-weight: bold;
	color: #FF4949;
}
.order-path button{
	width: 146rpx;
	height: 50rpx;
	line-height: 50rpx;
	font-size:25rpx;
	background: #FFFFFF;
	border-radius: 7rpx;
	border: 1px solid #707070;
}
.goods{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.goods image{
	width: 236rpx;
	height: 236rpx;
	background: #FFFFFF;
	border-radius: 7rpx;
	border: 1px solid #707070;
}
.confirm{
	position: absolute;
	bottom:0;
	left:0;
	
	width: 100%;
	height: 192rpx;
	background: #FFFFFF;
}
.confirm button{
	width: 222rpx;
	height: 85rpx;
	color:#fff;
	background: linear-gradient(128deg, #525252 0%, #000000 100%);
	border-radius: 43rpx;
}
</style>