activitys-uniapp/pages/address/add.vue

<!-- 添加修改地址 -->
<template>
	<view class="address-wrap" :style="vuex_skin">
		<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
			<!-- 地址定位 -->
			<view class="location-item u-flex u-row-between u-p-20 u-m-b-20" @tap="chooseLocation">
				<view class="u-flex">
					<u-icon name="map-fill" :color="vuex_theme.bgColor"></u-icon>
					<text class="text-base">{{ chooseAddress }}</text>
				</view>
				<text class="u-iconfont uicon-arrow-right" style="color: #666"></text>
			</view>

			<view class="address-box">
				<!-- 地址表单 -->
				<u-form-item :labelStyle="labelStyle" 　 label-width="150" label-position="left" label="收货人:"
					prop="consignee">
					<u-input placeholder="请填写收货人姓名" v-model="model.consignee" type="text"></u-input>
				</u-form-item>
				<u-form-item :labelStyle="labelStyle" 　 label-width="150" label-position="left" label="手机号:"
					prop="phone">
					<u-input placeholder="请输入收货人手机号" v-model="model.phone" type="number"></u-input>
				</u-form-item>
				<u-form-item :labelStyle="labelStyle" label-width="150" label-position="left" label="所在地区:"
					prop="area_text">
					<u-input type="select" v-model="model.area_text" :select-open="showSelect" placeholder="请选择地区"
						@click="showSelect = true"></u-input>
				</u-form-item>
				<u-form-item :labelStyle="labelStyle" label-position="top" label-width="150" label="详细地址:"
					prop="address">
					<u-input border borderColor="#eee" height="150" type="textarea" v-model="model.address"
						placeholder="如道路、门牌号、小区、楼栋号、单元室等" />
				</u-form-item>
			</view>

			<!-- 设置默认 -->
			<view class="default-box u-flex u-row-between">
				<text class="title">设为默认地址</text>
				<u-switch v-model="model.isDefault" :activeColor="vuex_theme.bgColor" size="40"></u-switch>
			</view>

		</u-form>

		<block v-if="!showSelect">
			<view class="" style="height: 90rpx;"></view>
			<view :style="{paddingBottom:safeAreaBottom}" class="footer-fixed center" style="bottom: 10%;">
				<view @click="submit" class="cu-btn df bg-base  round " style="width: 90%;height: 80rpx;">
					<text>保存收货地址</text>
				</view>
			</view>
		</block>

		<!-- 省市区选择器 -->
		<toast ref="toast"></toast>
		<city-select v-model="showSelect" @city-change="getRegion"></city-select>
	</view>
</template>

<script>
	import citySelect from '@/components/u-city-select.vue';
	export default {
		components: {
			citySelect
		},
		data() {
			return {
				showSelect: false, //省市区
				addressAreaList: [],
				addressId: 0, //收货地址ID
				labelStyle: {
					'font-size': '28rpx',
					'font-weight': '600',
					color: '#595959'
				},
				model: {
					id: '',
					userId: '',
					consignee: '',
					phone: '',
					area_text: '',
					address: '',
					isDefault: false,
					latitude: '',
					longitude: ''
				},
				rules: {
					phone: [{
							required: true,
							message: '请输入收货人手机号',
							trigger: ['change', 'blur']
						},
						{
							validator: (rule, value, callback) => {
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							trigger: ['change', 'blur']
						}
					],
					consignee: [{
						required: true,
						message: '请填写收货人姓名',
						trigger: ['change', 'blur']
					}],
					area_text: [{
						required: true,
						message: '请选择地区',
						trigger: ['change', 'blur']
					}],
					address: [{
						required: true,
						message: '请输入详细地址',
						trigger: ['change', 'blur']
					}]
				},
				errorType: ['message'],
				chooseAddress: '点击选择地理位置'
			};
		},
		computed: {},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad(options) {
			this.addressId = options.addressId
			this.model.phone = this.vuex_phone
			this.model.userId = this.vuex_userId
			uni.setNavigationBarTitle({
				title: this.addressId ? '编辑收货地址' : '添加收货地址'
			});

			if (this.$isNotEmpty(this.addressId)) {
				//编辑
				this.fetchAddress()
				return
			}
			console.log("1111");
			//新增
			if (options.wxAddress) {
				// 微信导入
				this.wxAddressInit(options)
			} else {
				//定位获取
				this.getLocation()
			}
		},
		methods: {
			fetchAddress() {
				this.$api.address.detail({
					id: this.addressId
				}).then(res => {
					let data=res.data.data
					if (this.$isNotEmpty(data)) {
						this.chooseAddress = data.address
						this.model = data
						this.model.area_text = data.provinceName + '-' + data.cityName + '-' + data
							.areaName
					}
				})
			},
			async analyseLocation(data, type = 0) {
				let params = {
					longitude: data.longitude,
					latitude: data.latitude
				}
				let res = await this.$api.address.getLocation(params)
				let result = res.data.data.result
				this.model.area_text = result.address_component.province + '-' +
					result.address_component.city + '-' +
					result.address_component.district
				if (type == 1) {
					this.chooseAddress = result.formatted_addresses.recommend
					this.model.address = result.formatted_addresses.recommend
				} else {
					this.chooseAddress = data.name
					this.model.address = data.name
				}
			},
			async chooseLocation() {
				let res = await this.$mpi.chooseLocation()
				if (res.errMsg != 'chooseLocation:ok') {
					this.$refs.toast.error('选择地址失败')
					return
				}
				this.analyseLocation(res)
			},
			async getLocation() {
				let res = await this.$mpi.getLocation()
				if (res.errMsg != 'getLocation:ok') {
					return
				}
				this.analyseLocation(res, 1)
			},
			getRegion(data) {
				this.model.area_text = data.location
			},
			// 微信导入数据格式
			wxAddressInit(options) {
				let wxAddress = JSON.parse(options.wxAddress); //微信导入
				console.log(wxAddress);
				this.model.consignee = wxAddress.userName;
				this.model.phone = wxAddress.telNumber;
				this.model.area_text = `${wxAddress.provinceName}-${wxAddress.cityName}-${wxAddress.countyName}`;
				this.model.address = wxAddress.detailInfo.replace(/%20/g, '');
				this.model.isDefault = false;

				this.chooseAddress = this.model.address
			},

			// 提交
			submit() {
				this.$refs.uForm.validate(valid => {
					valid ? this.editAddress() : console.log('验证失败');
				});
			},
			// 编辑添加地址
			editAddress() {
				let that = this;
				let area = this.model.area_text.split("-")
				let data = this.$u.deepClone(this.model)
				data.provinceName = area[0]
				data.cityName = area[1]
				data.areaName = area[2]
				this.$api.address.submit(data).then(res => {
					if (res.data.success) {
						this.$dialog.showModalAndBack('操作成功',this.vuex_theme.bgColor)
					}
				})
			},

		}
	};
</script>

<style lang="scss">
	// 点击定位
	.location-item {
		font-size: 28rpx;
		font-weight: 500;
		background-color: #fff;
		color: rgba(167, 111, 13, 1);
	}

	// 表单
	.address-box {
		background-color: #fff;
		padding: 0 30rpx;
	}

	.address-item {
		height: 96rpx;
		background: #fff;
		border-bottom: 1rpx solid rgba(#dfdfdf, 0.5);
		padding: 0 25rpx;

		.item-title {
			color: #333;
			font-size: 28rpx;
			white-space: nowrap;
		}

		.inp {
			color: #333;
			font-size: 28rpx;
		}
	}

	.area-box {
		min-height: 120rpx;
		padding-bottom: 60rpx;
		background: #fff;
		padding: 30rpx 25rpx;

		.item-title {
			font-size: 28rpx;
			line-height: 28rpx;
			vertical-align: middle;
			white-space: nowrap;
		}

		.area-inp {
			color: #333;
			font-size: 28rpx;
			vertical-align: middle;
			margin-top: 8rpx;
			width: 550rpx;
		}
	}

	.default-box {
		height: 100rpx;
		padding: 0 25rpx;
		background: #fff;
		margin-top: 20rpx;

		.title {
			font-size: 28rpx;
		}

		.switch {
			transform: scale(0.8);
		}
	}

	// 底部按钮
	.foot_box {
		.delete-btn {
			line-height: 70rpx;
			background: linear-gradient(93deg, rgba(208, 19, 37, 1), rgba(237, 60, 48, 1));
			box-shadow: 0px 7rpx 6rpx 0px rgba(#ed3c30, 0.22);
			font-size: 28rpx;

			font-weight: 500;
			color: rgba(255, 255, 255, 1);
			border-radius: 35rpx;
			padding: 0;
			margin-right: 20rpx;
		}

		.save-btn {
			line-height: 70rpx;
			background: linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1));
			border: 1rpx solid rgba(238, 238, 238, 1);
			border-radius: 40rpx;
			color: rgba(#fff, 0.9);
		}
	}
</style>