wangluohuoyun-huozhuapp/pages/release/selectAddress.vue

<template>
	<view class="content">
		<view class="content1">
			<u-search placeholder="可按地址、联系人和电话查找" v-model="searchKeyWord" :showAction='false' @search="getList()">
			</u-search>
		</view>
		<view class="content2" v-for="(item,index) in dataList" :key='index' @click="configAddress(item)">
			<view class="row flex row1">
				<view class="name">
					{{item.contacts}}
				</view>
				<view class="phone">
					{{item.contactPhone}}
				</view>
			</view>
			<view class="row flex row2">
				{{item.province}}{{item.city}}{{item.area}}{{item.detailedAddress}}
			</view>
			<view class="row flex row3">
				<u-radio-group placement="row" class="select-type" v-model="item.radiovalue">
					<u-radio :customStyle="radioCustomStyle" v-for="(item1, index) in radiolist1" :key="index"
						:label="item1.name" :name="item1.name" @change="radioChange($event,item)" labelSize='12px'
						:iconSize='4'>
					</u-radio>
				</u-radio-group>
				<view class="flex">
					<view class="mr20 icon-img" @click.stop="toTop(item)">
						<u-icon name="arrow-upward" color="#999999" size="18"></u-icon>置顶
					</view>
					<view class="mr20 icon-img" @click.stop="edit(item)">
						<u-icon name="edit-pen-fill" color="#999999" size="18"></u-icon>编辑
					</view>
					<view class="mr20 icon-img" @click.stop="del(item)">
						<u-icon name="trash-fill" color="#999999" size="18"></u-icon>删除
					</view>
				</view>
			</view>
		</view>
		<view class="bottom-btn">
			<view class="btn-left" @click="selectAddress(0)">选择临时地址</view>
			<view class="btn-right" @click="selectAddress(1)">新增地址</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	let that;
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				temporaryAddress: {
					latitude: '',
					longitude: '',
					detailedAddress: '',
					province: '',
					city: '',
					area: '',
					commonId: '',
				},
				radioCustomStyle: {
					margin: '0 20rpx 0 0',
				},
				type: '',
				radiovalue: '',
				dataList: [],
				searchKeyWord: '',
				radiolist1: [
					
					{
						name: '默认装货',
						disabled: false
					},
					{
						name: '默认卸货',
						disabled: false
					},

				],
			}
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		onLoad(options) {
			console.log(options)
			this.type = options.type
			that = this
			this.getList()
		},
		methods: {
			configAddress(val) {
				if (this.type == 0) {
					uni.setStorageSync('storage_faddress', val);
				} else {
					uni.setStorageSync('storage_saddress', val);
				}
				uni.$u.route('/pages/release/release');
			},
			getList() {
				uni.showLoading({
					mask: true,
					title: '加载中...'
				})
				this.$request.baseRequest('get', '/cargoOwnerAddressInfo/selectCargoOwnerAddress', {
						commonId: this.userInfo.id,
						searchKeyWord: this.searchKeyWord,
						pageSize: 100,
						currentPage: 1
					}).then(res => {
						if (res.code == 200) {
							this.dataList = res.data.records
							for (let i = 0; i < this.dataList.length; i++) {
								if (this.dataList[i].defaultShipment == 1) {
									this.dataList[i].radiovalue = '默认装货'
								}
								if (this.dataList[i].defaultReceipt == 1) {
									this.dataList[i].radiovalue = '默认卸货'
								}
							}
							uni.hideLoading()
						}

					})
					.catch(res => {
						uni.showToast({
							title: res.message,
							icon: 'none',
							duration: 2000
						})
					});
			},
			radioChange(n, val) {
				console.log('radioChange', n);
				console.log('radioChange', val);
				let _flag;
				if (n == '默认卸货') {
					_flag = 2
				} else {
					_flag = 1
				}
				this.$request.baseRequest('post', '/cargoOwnerAddressInfo/api/setDefault', {
						commonId: this.userInfo.id,
						id: val.id,
						defaultFlag: _flag
					}).then(res => {
						if (res.code == 200) {
							this.$refs.uToast.show({
								type: 'success',
								message: "设置成功",
								complete() {
									that.getList()
								}
							})
						}
					})
					.catch(res => {
						uni.showToast({
							title: res.message,
							icon: 'none',
							duration: 2000
						})
					});
			},
			toTop(val) {
				this.$request.baseRequest('post', '/cargoOwnerAddressInfo/api/setDefault', {
						commonId: this.userInfo.id,
						id: val.id,
					}).then(res => {
						if (res.code == 200) {
							this.$refs.uToast.show({
								type: 'success',
								message: "置顶成功",
								complete() {
									that.getList()
								}
							})
						}
					})
					.catch(res => {
						uni.showToast({
							title: res.message,
							icon: 'none',
							duration: 2000
						})
					});
			},
			edit(val) {
				uni.$u.route('/pages/release/editAddress', val);
			},
			del(val) {
				this.$request.baseRequest('post', '/cargoOwnerAddressInfo/api/deleteCargoOwnerAddress', {
						id: val.id,
					}).then(res => {
						if (res.code == 200) {
							this.$refs.uToast.show({
								type: 'success',
								message: "删除成功",
								complete() {
									that.getList()
								}
							})
						}
					})
					.catch(res => {
						uni.showToast({
							title: res.message,
							icon: 'none',
							duration: 2000
						})
					});
			},
			selectAddress(type) {
				// 0临时地址 1 新增地址
				if (type == 0) {
					let that = this
					uni.chooseLocation({
						success: function(res) {
							console.log(res);
							console.log('位置名称：' + res.name);
							console.log('详细地址：' + res.address);
							console.log('纬度：' + res.latitude);
							console.log('经度：' + res.longitude);
							var locationObj = that.$helper.formatLocation(res);
							console.log(locationObj)
							that.temporaryAddress.latitude = res.latitude
							that.temporaryAddress.longitude = res.longitude
							that.temporaryAddress.detailedAddress = locationObj.ADDRESS
							that.temporaryAddress.province = locationObj.REGION_PROVINCE
							that.temporaryAddress.city = locationObj.REGION_CITY
							that.temporaryAddress.area = locationObj.REGION_COUNTRY
							that.temporaryAddress.commonId = that.userInfo.id
							that.configAddress(that.temporaryAddress)
						},
						fail: function() {
							uni.getSetting({
								success: function(res) {
									var statu = res.authSetting;
									if (!statu['scope.userLocation']) {
										uni.showModal({
											title: '是否授权当前位置',
											content: '需要获取您的地理位置，请确认授权，否则地图功能将无法使用',
											success: function(tip) {
												if (tip.confirm) {
													uni.openSetting({
														success: function(
															data) {
															if (data
																.authSetting[
																	"scope.userLocation"
																] === true
															) {
																uni.showToast({
																	title: '授权成功',
																	icon: 'success',
																	duration: 1000
																})
																//授权成功之后，再调用chooseLocation选择地方
																uni.chooseLocation({
																	success: function(
																		res
																	) {
																		console
																			.log(
																				res
																			);
																		console
																			.log(
																				'位置名称：' +
																				res
																				.name
																			);
																		console
																			.log(
																				'详细地址：' +
																				res
																				.address
																			);
																		console
																			.log(
																				'纬度：' +
																				res
																				.latitude
																			);
																		console
																			.log(
																				'经度：' +
																				res
																				.longitude
																			);
																		var locationObj =
																			that
																			.$helper
																			.formatLocation(
																				res
																			);
																		console
																			.log(
																				locationObj
																			)
																		that.temporaryAddress
																			.latitude =
																			res
																			.latitude
																		that.temporaryAddress
																			.longitude =
																			res
																			.longitude
																		that.temporaryAddress
																			.detailedAddress =
																			locationObj
																			.ADDRESS
																		that.temporaryAddress
																			.province =
																			locationObj
																			.REGION_PROVINCE
																		that.temporaryAddress
																			.city =
																			locationObj
																			.REGION_CITY
																		that.temporaryAddress
																			.area =
																			locationObj
																			.REGION_COUNTRY
																		that.temporaryAddress
																			.commonId =
																			that
																			.userInfo
																			.id
																		that.configAddress(
																			that
																			.temporaryAddress
																		)
																	},
																})
															} else {
																uni.showToast({
																	title: '授权失败',
																	icon: 'none',
																	duration: 1000
																})
															}
														}
													})
												}
											}
										})
									}
								},
								fail: function(res) {
									uni.showToast({
										title: '调用授权窗口失败',
										icon: 'none',
										duration: 1000
									})
								}
							})
						}
					})
					// that.$helper.getLocation(that.temporaryAddress)
					// console.log('1111111111111111111111111111111111')
					// console.log(that.temporaryAddress)
					// let that = this
					// // this.isShowMap = true
					// uni.chooseLocation({
					// 	success: function(res) {
					// 		console.log(res);
					// 		console.log('位置名称：' + res.name);
					// 		console.log('详细地址：' + res.address);
					// 		console.log('纬度：' + res.latitude);
					// 		console.log('经度：' + res.longitude);
					// 		// let _address = that.$helper.getAddress(res.address)
					// 		let _address = that.$helper.getLocation(res.address)
					// 		console.log(_address)
					// 		// that.temporaryAddress.latitude = res.latitude
					// 		// that.temporaryAddress.longitude = res.longitude
					// 		// that.temporaryAddress.detailedAddress = _address.village
					// 		// that.temporaryAddress.province = _address.province
					// 		// that.temporaryAddress.city = _address.city
					// 		// that.temporaryAddress.area = _address.county
					// 		// that.temporaryAddress.commonId = that.userInfo.id
					// 		// that.configAddress(that.temporaryAddress)
					// 	}
					// });
					// // console.log(123)
					// // uni.$u.route('/pages/release/map', {
					// // 	id: 1,
					// // });
				} else {
					uni.$u.route('/pages/release/addAddress', {
						type: type,
					});
				}

			},
		}
	}
</script>

<style scoped lang="scss">
	.content1 {
		background: white;
		padding: 20rpx;
	}

	.content2 {
		border-radius: 20rpx;
		background: white;
		margin: 20rpx;
		padding: 20rpx;

		.row {
			margin-top: 20rpx;
		}

		.row1 {
			font-weight: 700;
			color: #333333;

			.name {
				margin-right: 20rpx;
			}
		}

		.row2 {
			color: #7D7D7D;
		}

		.row3 {
			font-size: 24rpx;
		}


	}

	.bottom-btn {
		position: fixed;
		bottom: 50rpx;
		width: 100%;
		display: flex;
		justify-content: space-around;

		.btn-left {
			text-align: center;
			width: 30%;
			font-size: 32rpx;
			font-weight: 500;
			color: #2772FB;
			background-color: #EEF4FF;
			padding: 20rpx 40rpx;
			border-radius: 40rpx;
		}

		.btn-right {
			text-align: center;
			width: 30%;
			font-size: 32rpx;
			font-weight: 500;
			color: white;
			background-color: #2772FB;
			padding: 20rpx 40rpx;
			border-radius: 50rpx;
		}
	}

	.icon-img {
		display: flex;
		align-items: center;
		color: #999999;
	}
</style>