vist_go_uniApp/pages/order/update-address.vue

<template>
	<view>
		<CustomToast ref="customToast" />
		<view class="region mar-t-10 pad-24">
			<view class="font36 font-bold mar-b-20">
				原地址
			</view>
			<view>
				<view class="font-bold">
					{{order.province}}{{order.city}}{{order.area}}{{order.address}}
				</view>
				<view class="mar-t-10 ">
					{{order.name}} {{order.mobile}}
				</view>
			</view>
		</view>
		<view class="region mar-t-10 pad-24 height-vh">
			<view class="font36 font-bold mar-b-20">
				选择新的收货地址
			</view>
			<view>
				<view class="mar-t-30">
					<view v-if="list.length>0">
						<view v-for="(item,index) in list" :key="index" class=" mar-b-50 ">
							<view class="flex-items flex-sp-between" @tap="customRadioChange(item)">
								<view class="width90 flex-items flex-sp-between">
									<view>
										<view>
											<text class="font28">
												{{item.province}}{{item.city}}{{item.area}}{{item.address}}</text>
										</view>
										<view>
											<text class="font28">{{item.name}} {{item.mobile}}</text>
										</view>
									</view>
								</view>
								<view class="width10">
									<radio-group>
										<radio :value="item.id" :checked="templateSelect === item.id" />
									</radio-group>
								</view>
							</view>
							<view class="line"></view>
						</view>
					</view>
					<view v-else>
						<view class="flex-items-plus">
							<image src="../../static/images/empty.png" class="empty "></image>
						</view>
						<view class="font28 font-gray flex-items-plus">
							暂无数据
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 提交按钮 -->
		<button class="submit-button" @click="submit()">确认修改</button>
	</view>
</template>

<script>
	import {
		addressList,
		orderDetail,
		updateAddress
	} from '../../config/api.js';
	import CustomToast from '../../components/CustomToast.vue';
	export default {
		components: {
			CustomToast,
		},
		data() {
			return {
				templateSelect: "",
				orderId: "",
				order: {},
				list: []
			}
		},
		methods: {
			submit() {
				updateAddress(this.order).then((res) => {
					if (res.code == 200) {
						this.$refs.customToast.showToast('操作成功');
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 1000)
					}
				})
			},
			getOrderDetail() {
				orderDetail({
					id: this.orderId
				}).then((res) => {
					this.order = res.data;
				});
			},
			getAddressList() {
				addressList().then((res) => {
					this.list = res.data
				})
			},
			customRadioChange(item) {
				this.templateSelect = item.id;
				this.order.province = item.province
				this.order.city = item.city
				this.order.area = item.area
				this.order.address = item.address
				this.order.name = item.name
				this.order.mobile = item.mobile
			},
		},
		onLoad(op) {
			this.orderId = op.orderId;
			this.getOrderDetail();
			this.getAddressList()
		},
	}
</script>

<style>
	.navigation {

		border: solid 2rpx #f2f2f2;
		background-color: #ffffff;
		padding: 16rpx 0;
	}

	.submit-button {
		position: fixed;
		bottom: 0;
		width: 100%;
		background-color: #F95B5B;
		color: #fff;
		font-size: 32rpx;
		padding: 5rpx;
		border-radius: 10rpx;
		margin-right: 30rpx;
		text-align: center;
		margin-top: 30rpx;
	}
</style>