HTFX-CRM-APP/pages/activity/shop/editAddress.vue

<template>
	<NavBar />
	<view class="container">
		<view class="title">
			<PageTitle :title="$t('activity.addressInfo')" />
		</view>
		<Spin v-show="loading" />
		<uni-forms ref="addrForm" :modelValue="addrFormData">
			<uni-forms-item>
				<text class="uni-subtitle">{{ $t('activity.recipients') }}</text>
				<uni-easyinput :maxlength="64" trim="all" primaryColor="#29BBE4" v-model="addrFormData.recipients"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item>
				<text class="uni-subtitle">{{ $t('activity.phone') }}</text>
				<uni-easyinput :maxlength="32" trim="all" primaryColor="#29BBE4" v-model="addrFormData.phone"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item>
				<text class="uni-subtitle">{{ $t('activity.country') }}</text>
				<uni-easyinput :maxlength="255" trim="all" primaryColor="#29BBE4" v-model="addrFormData.country"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item>
				<text class="uni-subtitle">{{ $t('activity.userCity') }}</text>
				<uni-easyinput :maxlength="255" trim="all" primaryColor="#29BBE4" v-model="addrFormData.city"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item>
				<text class="uni-subtitle">{{ $t('activity.addr') }}</text>
				<uni-easyinput :maxlength="255" trim="all" primaryColor="#29BBE4" v-model="addrFormData.delivery_address"></uni-easyinput>
			</uni-forms-item>
		</uni-forms>
		<button class="primaryButton" type="button" :disabled="saveBtnLoading" @click="saveAddress">
			<image v-show="saveBtnLoading" src="/static/loadingCircle.svg" mode="aspectFit" style="width: 16px; height: 16px"></image>
			{{ $t('activity.use') }}
		</button>
	</view>
</template>

<script>
import { addrById, saveAddr } from '@/services/activity/shop';
export default {
	data() {
		return {
			id: undefined,
			loading: false,
			addrFormData: {
				id: undefined,
				country: undefined,
				city: undefined,
				delivery_address: undefined,
				phone: undefined,
				recipients: undefined
			},
			saveBtnLoading: false
		};
	},
	methods: {
		async loadData(id) {
			this.loading = true;
			const res = await addrById({ id });
			if (res.code == 0 && res.data) {
				const data = res.data;
				this.addrFormData.id = data.id;
				this.addrFormData.country = data.country;
				this.addrFormData.city = data.city;
				this.addrFormData.delivery_address = data.delivery_address;
				this.addrFormData.phone = data.phone;
				this.addrFormData.recipients = data.recipients;
			}
			this.loading = false;
		},
		async saveAddress() {
			this.saveBtnLoading = true;
			const resp = await saveAddr(this.addrFormData);
			this.saveBtnLoading = false;
			if (resp.code == 0) {
				this.$cusModal.showModal({
					type: 'message',
					status: 'success',
					contentText: this.$t('common.success.action'),
					onClose() {
						uni.navigateBack({ delta: 2 });
					}
				});
				uni.$emit('updateAddr');
				uni.$emit('changeAddr', this.addrFormData);
			} else {
				this.$cusModal.showModal({
					type: 'message',
					status: 'warning',
					contentText: resp.msg ?? this.$t('common.error.sysError')
				});
			}
		}
	},
	onLoad(options) {
		const { id } = options;
		this.id = id;
		if (id) {
			this.loadData(id);
		}
	}
};
</script>

<style lang="scss" scoped>
.container {
	padding: 0 40upx 16px;
	.title {
		margin: 14px 0 15px;
	}
	.content {
		display: flex;
		flex-direction: column;
		row-gap: 40upx;
		margin-top: 40upx;
	}
}

.detailModal {
	position: relative;
	width: calc(100vw - 50px);
	max-width: 363px;
	padding: 32px 29px 42px;
	background-color: #fff;
	box-sizing: border-box;
	.closeIcon {
		position: absolute;
		top: 18px;
		right: 21px;
		width: 17px;
		height: 17px;
	}
	.titleWrapper {
		display: flex;
		flex-direction: column;
		align-items: center;
		row-gap: 12px;
		color: #333333;
		padding: 12px;
		margin: 24px 0;
		box-shadow: -1px 0 5px 1px rgba(0, 0, 0, 0.1);
		.title {
			margin: 0;
			font-size: 24px;
			font-weight: 700;
			line-height: 34px;
		}
		.value {
			font-size: 36px;
			font-weight: 700;
			color: #29bbe4;
			line-height: 52px;
		}
	}
}
</style>