<template>
	<view class='confirm-order'>
		<!--收获地址选择-->
		<view>
			<!--有收货地址-->
			<view class="address-info no-address" @click="address(1)" v-if='path.id'>
				<view class="add-address">
					{{ path.province }} - {{ path.city }} - {{ path.county }}
				</view>
				<view class="add-address-btn">
					{{ path.name }}
					{{ path.mobile }}
				</view>
			</view>
			<!-- 无地址信息时显示的内容 -->
			<view class="address-info no-address" @click="address(2)" v-else>
				<view class="add-address">
					请先填写地址，用于商品配送
				</view>
				<view class="add-address-btn">
					填写地址
				</view>
			</view>
		</view>
		<!--商品信息-->
		<view class='goods'>
			<view class='goods-img'>
				<image :src='goods.img'></image>
			</view>
			<view class='goods-main'>
				<view>{{goods.title}}</view>
				<view class='goods-price'>
					<view>{{ goods.price }}</view>
					<u-number-box :min="1" :max="100" v-model='goods.number'></u-number-box>
				</view>
			</view>
		</view>
		<!--备注-->
		<view>
			<u--textarea v-model="textarea" placeholder="请输入内容"></u--textarea>
		</view>
		<!--提交订单-->
		<view class='payment'>
			<view>合计：{{ totalPrice }}</view>
			<button @click='payment'>提交订单</button>
		</view>
	</view>
</template>

<script>
	import {
		addressList
	} from '@/untils/api/address.js'
	import {
		tradePayment
	} from '@/untils/api/order.js'
	export default {
		data() {
			return {
				goods: {}, //商品详情
				textarea: '', //备注
				path: {}, //默认收获地址
			}
		},
		onLoad(e) {
			this.goods = JSON.parse(e.query.goods);
			//获取收获地址
			this.getAddress();
		},
		computed: {
			totalPrice() {
				return this.goods.number * this.goods.price;
			}
		},
		methods: {
			//获取收获地址
			async getAddress() {
				let res = await addressList();
				this.path = res.data.find(v => {
					return v.defaulted == 1;
				})
			},
			/*
				选择收获地址
				@params 1:有 | 2:没有
			*/
			address(type) {
				uni.navigateTo({
					url: `/address/address-list?type=${type}`
				})
			},
			//提交订单
			async payment() {
				//1. 判断用户是否选择了收获地址
				if (!this.path?.id) {
					console.log('请选择收获地址');
					return;
				}
				//2. 构建参数
				let key = new Date().getTime();
				let uid = this?.$store?.state?.user?.info?.id;
				let {
					spuId,
					skuId,
					counter
				} = this.goods;
				let goods = [{
					spuId,
					skuId,
					counter
				}];
				let remark = this.textarea;
				let addressId = this.path.id;

				let res = await tradePayment({
					key,
					uid,
					goods,
					remark,
					addressId
				})

				this.orderNumber = res.data.orderNumber;
				let that = this;
				//3. 提交订单成功，调用api：唤醒支付
				if (res.code == '200') {
					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() {
							that.paymentEnd(1);
						}
					})
				}
			},
			/*
				支付完成
				e.errMsg :  "requestPayment:ok"
				e.errMsg : "requestPayment:fail cancel"
			*/
			paymentEnd(msg) {
				//跳转到订单页，把type传递过去
				uni.navigateTo({
					url: `/order/order-list?type=${msg}`
				})
			},
		}
	}
</script>

<style>
	.confirm-order {
		overflow: hidden;
		background: #F2F2F2;
	}

	.address-info {
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin: 22rpx 0;
		height: 148rpx;
		background: #FFFFFF;
		border-radius: 21px 21px 21px 21px;
	}

	.goods {
		display: flex;
		margin-top: 22rpx;
	}

	.goods-img {
		width: 236rpx;
		height: 236rpx;
		background: #FFFFFF;
		border-radius: 7rpx;
	}

	.goods-img image {
		width: 236rpx;
		height: 236rpx;
	}

	.goods-price {
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.payment {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 120rpx;
		background: #FFFFFF;
	}

	.payment button {
		width: 222rpx;
		height: 85rpx;
		font-size: 30rpx;
		line-height: 85rpx;
		color: #fff;
		background: linear-gradient(128deg, #525252 0%, #000000 100%);
		border-radius: 43px 43px 43px 43px;
	}
</style>

在没有收货地址的时候，那这个时候可点击选择收货地址，具体逻辑

<template>
	<view class='path'>
		<view v-if='addressData.length == 0'>
			<view>暂无收货地址</view>
		</view>
		<view v-else>
			<view class='path-item' v-for='(item,index) in addressData' :key='item.id' @click="selectAddress(item)">
				<view class='path-name'>
					<view>
						<view>{{ item.name }} {{item.mobile}}</view>
						<view>{{item.province}} - {{ item.city }} - {{ item.county }} - {{ item.address }}</view>
					</view>
					<view class="" @click.shop="update(item)">
						修改
					</view>
				</view>
				<view class='path-default'>
					<u-radio-group v-model='item.defaulted' v-if="item.defaulted">
						<u-radio :name='item.defaulted'></u-radio>
					</u-radio-group>
					<view @click='delAddress({id:item.id,index})'>删除</view>
				</view>
			</view>
		</view>
		<button class='add-path' @click='addAddress'>添加收货地址</button>
	</view>
</template>

<script>
	import {
		address,
		addressList,
		deleteAddress
	} from '@/untils/api/address.js'
	export default {
		data() {
			return {
				type: 0, //收货地址类型
				list: ['1', '2', '3'],
				addressData: [], //收货地址列表
			}
		},
		onLoad(e) {
			this.type = e.type;
		},
		async onShow() {
			let res = await addressList();
			this.addressData = res.data;
		},
		methods: {
			//添加收货地址
			addAddress() {
				uni.showModal({
					title: '提示',
					content: '是否使用微信地址?',
					success: (res) => {
						if (res.confirm) {
							uni.chooseAddress({
								success(params) {
									let data = {
										name: params.userName,
										mobile: params.telNumber,
										province: params.provinceName,
										city: params.cityName,
										county: params.countyName,
										address: params.detailInfo,
										defaulted: 0
									}
									address(data).then(res => {
										console.log(res)
									})
								}
							})
						} else {
							//用户采用自定义地址
							uni.navigateTo({
								url: '/address/add-address'
							})
						}
					}
				})
			},
			//删除收货地址
			delAddress(params) {
				let {
					id,
					index
				} = params;
				let that = this;
				uni.showModal({
					title: '提示',
					content: '删除收货地址?',
					success(res) {
						if (res.confirm) {
							deleteAddress(id).then(res => {
								if (res.code == '200') {
									that.addressData.splice(index, 1);
								}
							})
						}
					}
				})
			},
			selectAddress(item) {
				if (!this.type) return;
				// 获取当前页面的栈实例
				let currentPage = getCurrentPages()
				// 获取上一个页面
				let parent = currentPage[currentPage.length - 2]
				// 当前页面直接修改上一个页面的数据
				parent.$vm.path = item;
				uni.navigateBack();
			},
			update(item) {
				let obj = JSON.stringify(item)
				uni.navigateTo({
					url: `/address/add-address?params=${obj}`
				})
			},
		}
	}
</script>

<style>
	.path {
		background: #F4F4F4;
	}

	.path-item {
		height: 264rpx;
		background: #FFFFFF;
		border-radius: 28rpx;
	}

	.path-name {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.path-name image {
		width: 64rpx;
		height: 64rpx;
		background: #fff;
	}

	.path-default {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.path-default image {
		width: 64rpx;
		height: 64rpx;
		background: #fff;
	}

	.add-path {
		position: absolute;
		bottom: 20rpx;
		left: 50%;
		width: 634rpx;
		height: 85rpx;
		line-height: 85rpx;
		color: #fff;
		background: linear-gradient(128deg, #525252 0%, #000000 100%);
		border-radius: 43rpx;
		transform: translateX(-50%);
	}
</style>