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" @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 in radiolist1"
							: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-modal :show="isShowAlert" :title="alertTitle" :content='alertContent' :closeOnClickOverlay='true'
			:showCancelButton='showCancelButton' confirmColor='#2772FB' @confirm="$u.throttle(confirmClick, 5000)" @close="cancelClick"
			@cancel="cancelClick"></u-modal>
		<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
					},

				],
				delId: "",
				isShowAlert: false,
				alertTitle: "",
				alertContent: "",
			}
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		onLoad(options) {
			console.log(options)
			this.type = options.type
			that = this

		},
		onShow() {
			this.getList()
		},
		methods: {
			confirmClick() {
				this.isShowAlert = false
				this.$request.baseRequest('post', '/cargoOwnerAddressInfo/api/deleteCargoOwnerAddress', {
						id: this.delId,
					}).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
						})
					});
			},
			cancelClick() {
				this.isShowAlert = false
			},
			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.delId = val.id
				this.isShowAlert = true
				this.alertTitle = "确定将要删除该常用地址？"
			},
			selectAddress(type) {
				// 0临时地址 1 新增地址
				if (type == 0) {
					console.log(111111111)
					let that = this
					uni.getLocation({
						type: 'gcj02',
						geocode:true,
						altitude:true,
						isHighAccuracy:true,
						success: function(res) {
							console.log('当前位置的经度：' + res.longitude);
							console.log('当前位置的纬度：' + res.latitude);
							uni.chooseLocation({
								success: function(res) {
									// var locationObj = that.$helper.formatLocation(res);
									// console.log(locationObj)
									console.log(res);
									console.log('位置名称：' + res.name);
									console.log('详细地址：' + res.address);
									console.log('纬度：' + res.latitude);
									console.log('经度：' + res.longitude);
									let _address = that.$helper.formatLocation(res.address)
									console.log('----------------------------')
									console.log(_address, that.type)
									var data = {}
									data.latitude = res.latitude
									data.longitude = res.longitude
									data.detailedAddress = _address.Village
									data.province = _address.Province
									data.city = _address.City
									data.area = _address.Country
									data.commonId = that.userInfo.id
									if (that.type == 0) {
										uni.setStorageSync('storage_faddress', data)
									} else {
										uni.setStorageSync('storage_saddress', data)
									}

									uni.navigateBack({
										delta: 1
									})
									// uni.$u.route('/pages/release/release');
									// 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)
									// that.$forceUpdate()
								},

								fail(err) {
									console.log(err)
								},
								complete(res1) {
									console.log(res1)
								}
							});
						}
					})
				} else {
					uni.$u.route('/pages/release/addAddress', {
						type: type,
					});
				}

			},
		}
	}
</script>

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

	.content {
		height: 100vh;
	}

	.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>