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-wrap">
			<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.contactPhone1}}
				</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='10'>
					</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> -->
						<image class="jt-icon" src="@/static/images/release/zhiding.png" mode='widthFix'>
						</image>
						置顶
					</view>
					<view class="mr20 icon-img" @click.stop="edit(item)">
						<!-- <u-icon name="edit-pen-fill" color="#999999" size="18"></u-icon> -->
						<image class="jt-icon" src="@/static/images/release/bianji.png" mode='widthFix'>
						</image>
						编辑
					</view>
					<view class="mr20 icon-img" @click.stop="del(item)">
						<!-- <u-icon name="trash-fill" color="#999999" size="18"></u-icon> -->
						<image class="jt-icon" src="@/static/images/release/shanchu.png" mode='widthFix'>
						</image>
						删除
					</view>
				</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

		},
		onShow() {
			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');
				uni.navigateBack({
					delta: 1
				})
			},
			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) {
							if(res.data.records.length){
								for (var i = 0; i < res.data.records.length; i++) {
									res.data.records[i].contactPhone1=res.data.records[i].contactPhone.replace(/(\d{3})(\d{4})(\d{4})/, "$1****$3")
								}
							}
							console.log(res.data.records)
							this.dataList = res.data.records
							this.$forceUpdate()
							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);
				for (var i = 0; i < this.dataList.length; i++) {
					if (this.dataList[i].defaultShipment == 1&&n=='默认装货') {
						this.dataList[i].radiovalue = ''
					}
					if (this.dataList[i].defaultReceipt == 1&&n=='默认卸货') {
						this.dataList[i].radiovalue = ''
					}
				}
				this.$set(val,'radioChange',n)
				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) {
					console.log(111111111)
					let that = this
					uni.getLocation({
						type: 'wgs84',
						success: function(res) {
							console.log('当前位置的经度：' + res.longitude);
							console.log('当前位置的纬度：' + res.latitude);
							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() {
									console.log(2222222)
								// 	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
								// 			})
								// 		}
								// 	})
								
								}
							});
						}
					})
				} else {
					uni.$u.route('/pages/release/addAddress', {
						type: type,
					});
				}

			},
		}
	}
</script>

<style scoped lang="scss">
	.content1 {
		background: white;
		padding: 20rpx;
	}
	.content2-wrap{
		margin-bottom:200rpx;
	}
	.jt-icon {
		position: relative;
		top: 4rpx;
		width: 24rpx;
		margin: 0 10rpx;
	
	}
	.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: 0rpx;
		padding:50rpx 0;
		width: 100%;
		background-color: #fff;
		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>