palletApp/pages/me/index.vue

<template>
	<view class="page">
		<div class="back"></div>
		<view class="wrap">
			<view class="titleImg">
				<view class="user">
					<uni-icons type="person-filled" size="28" color="#fff"></uni-icons> 
					<view class="username">
						<p class="p1">{{loginName}}—{{deptName}} {{lxdh?'—'+lxdh:''}}</p>
					</view>
				</view>
				<view class="user" v-if="psdz">
					<uni-icons type="location-filled" size="28" color="#fff"></uni-icons> 
					<view class="username">
						<p class="p1">{{psdz}}</p>
					</view>
				</view>
			</view>
			
			<view class="adrcon">
				<view class="topcon">
					<view class="tleft">常用地址</view>
					<view class="tright" @click="gotoadd">
						<uni-icons type="plusempty" size="14" color="#FFF"></uni-icons>添加地址
					</view>
				</view>
				<view class="skcon" v-if="myaddresslist.length==0">
					暂无常用地址，请添加~~
				</view>
				<view class="scroll" v-else>
					<view class="scell">
						<view v-for="(item, index) in myaddresslist" :key="index" class="sitem">
							<view class="lcon">
								<view class="sname">
									<text>{{item.userName}}({{item.userCode}})</text>
									<text>{{ item.departCode?retType(item.departCode,1):''}}</text>
								</view>
								<view class="sinfo">
									{{item.workshop+item.location+item.address}}
								</view>
							</view>
							<view class="opecon">
								<uni-icons type="trash-filled" size="25" color="#999999" @click="delDo(item.id)"></uni-icons>
							</view>
						</view>
						<uni-load-more v-if="loadStatus!=='noMore'" iconType="circle" :status="loadStatus" />
					</view>
				</view>
				
			</view>
			
		</view>
		
		<u-toast ref="uToast" />
		
		<!-- 添加 -->
		<!-- 弹框 -->
		<uni-popup ref="share" type="share">
			<view class="allcon">
				<view class="xcon">
					<view class="xcell cur" @click="saveClick()">添加选中地址</view>
					<view class="rclose" @tap="_cancel">关闭</view>
				</view>
				<view class="hcon">
					<view class="htitle">
						<u-search class="searchinput" v-model="searchKey" @change="searchchange" @custom="searchcustom" placeholder="请输入地址查询"
						shape="square" bg-color="#EFF4F9" :clearabled="true" :show-action="showAction" input-align="left" @clear="clear"></u-search>
					</view>
				</view>
				<view class="selcon">
					<radio-group class="checklist-group" @change="chagne">
						<view class="sitem" v-for="(item,index) in clistnow" :key="index"> 
							<view class="conright">
								<view class="adress">
									{{index+1}}
								</view>
								<view class="sname">
									 {{retType(item.departCode,1)}}
								</view>
								<view class="adress">
									{{item.workshop}}
								</view>
								<view class="adress">
									{{item.location}}
								</view>
								<view class="adress">
									{{item.address}}
								</view>
							</view>
							<view class="selbtn">
								<radio :value="item.id" :checked="item.isChecked" />
							</view> 
						</view>
					</radio-group>
					<view class="lineb"></view>
				</view>
			</view>
		</uni-popup>
		
	</view>
</template>

<script> 
	export default { 
		data() {
			return {
				loginName:"",
				deptName:"",
				lxdh:"",
				psdz:"",
				depts:[],
				loadStatus:'more',
				myaddresslist:[],
				address:[],
				clistnow:[],
				clistall:[],
				searchKey:"",
				showAction:false,
				seladr:null
			}
		},
		onLoad() {
			var user= JSON.parse(uni.getStorageSync("user"));
			var yhms=user.yhms?user.yhms:"";
			this.loginName=yhms;
			var bmmc= uni.getStorageSync("bmmc");
			this.deptName=bmmc?bmmc:"";
			this.lxdh=user.lxdh?user.lxdh:"";
			this.psdz=user.psdz?user.psdz:"";
			this.$forceUpdate();
			this.getTypes();
		},
		onShow() {
			if (!uni.getStorageSync("token")) {
				uni.showToast({
					title: '登录已失效！请您重新登录！',
					duration: 2000,
					icon: "none"
				});
				setTimeout(function() {
					uni.redirectTo({
						url: '/pages/login/index'
					});
				}, 2000);
			}
			try{
				this.getList();
			}
			catch(e){
				this.myaddresslist=[];
				console.log(e);
			}
		},
		methods: {
			handleImageError(e,index){
				console.log(e,index);
				this.icon= require("@/static/images/icon.png");
				this.$forceUpdate();
			},
			async delDo(id){
				var _this=this;
				try{
					uni.showModal({
						title: '提示',
						content: '确定要删除此常用地址吗？',
						cancelText: '取消',
						confirmText: '确定',
						success: ress => {
							if (ress.confirm) {
								_this.delDoDo(id);
							}
						}
					});
					
				}
				catch{
					uni.showToast({
						title: '收件地址删除失败！',
						icon: 'error',
						duration: 2000
					});
				}
			},
			async delDoDo(id) {
				uni.showLoading({
					title: '数据删除中...'
				});
				const {data: res} = await uni.$http.get('/userAddr/removeById', {id:id});
				if(res&&res.success){
					uni.showToast({
						title: '此地址已删除！',
						icon: 'success',
						duration: 2000
					});
					this.myaddresslist=[];
					this.loadStatus="more";
					this.getList();
				}
				else{
					uni.showToast({
						title: '此地址删除失败！请重试',
						icon: 'error',
						duration: 2000
					}) 
				}
			},
			gotoadd(){
				this.clistall=[];
				this.$forceUpdate();
				this.address.forEach(cell=>{
					var ifadd=0;
					this.myaddresslist.forEach(item=>{
						if(item.id==cell.id){
							ifadd=1
						}
					});
					if(ifadd==0){
						this.clistall.push(cell);
						this.$forceUpdate();
					}
				});
				this._show();
			},
			async getList() {
				const {data: res} = await uni.$http.get('/userAddr/myAddr');
				if(res.data&&res.data.length>0){
					this.myaddresslist=res.data;
					this.$forceUpdate();
					this.loadStatus="noMore";
				}
				else{
					this.myaddresslist=[];
					this.$forceUpdate();
					this.loadStatus="noMore";
					// 测试数据
					// this.myaddresslist=[{address :  "八区2",
					// departCode : "02",
					// id : "91CABDDF00314651BDBC47B389F3981D",
					// location : "八区2",
					// workshop :"二工场",
					// userName:"管系集配",
					// userCode:"tuopan"}]
				}
			},
			getTypes() {
				//获取数据字典
				this.depts=[];
				var commondata = uni.getStorageSync("commondata");
				if(commondata){
					var data = JSON.parse(commondata);
					if(data){
						this.depts=data.depts;
						this.$forceUpdate();
						// 地址
						if(data.address&&data.address.length>0){
							var user = JSON.parse(uni.getStorageSync("user"));
							var bmbm = user.bmbm?user.bmbm:''; //  '02'; // 
							var workshop = user.workshop?user.workshop:''; 
							data.address.forEach(cell=>{
								if(bmbm==cell.departCode){
									if(workshop){
										if(workshop==cell.workshop){
											this.address.push(cell);
											this.$forceUpdate();
										}
									}
									else{
										this.address.push(cell);
										this.$forceUpdate();
									}
								}
							});
						}
						console.log("address",this.address);
					}
				}
				else{
					this.depts=[];
					this.address=[];
				}
			},
			retType(type,str) {
				var rets = '';
				if(str==1){
					// 部门
					this.depts.forEach((cell,idx)=>{
						if(type==cell.departCode){
							rets=cell.departName;
							return;
						}
					});
				}
				if(!rets){
					rets=type
				}
				return rets;
			},
			
			// 添加地址
			saveClick(){
				if(this.seladr){
					this.addDo();
				}
				else{
					uni.showModal({
						title: '提示',
						content: '请选择需要添加的地址！',
						cancelText: '取消',
						confirmText: '确定',
						success: ress => {
						}
					});
				}
			},
			async addDo() {
				uni.showLoading({
					title: '数据提交中...'
				});
				const {data: res} = await uni.$http.post('/userAddr/save', {
					departCode:this.seladr.departCode,
					workshop:this.seladr.workshop,
					location:this.seladr.location,
					address:this.seladr.address,
				});
				if(res&&res.success){
					this._hide();
					uni.showToast({
						title: '此地址已添加！',
						icon: 'success',
						duration: 2000
					});
					this.myaddresslist=[];
					this.loadStatus="more";
					this.getList();
				}
				else{
					uni.showModal({
						title: '提示',
						content: res.message?res.message:'此地址添加失败！请重试！',
						cancelText: '取消',
						confirmText: '确定',
						success: ress => {
						}
					});
				}
			},
			searchchange(value) {
				// 搜索框内容变化时，会触发此事件，value值为输入框的内容
				if(value){
					this.showAction=true;
					this.$forceUpdate();
				}
			},
			searchcustom(value) {
				if (this.searchKey) {
					this.clistall.forEach((v, i) => {
					  this.clistall[i].isChecked = false;
					});
					this.clistnow = this.clistall.filter((p) => {
					   //filter过滤的意思，这个是过滤函数，将每一项符合结果的值返回到personList
					   return ( p.address.indexOf(this.searchKey) !== -1 );
					});
					this.$forceUpdate();
				}
			},
			clear() {
				this.showAction=false;
				this.clistnow=[];
				this.clistall.forEach((v, i) => {
				  this.clistall[i].isChecked = false;
				  this.clistnow.push(this.clistall[i]);
				});
			},
			_initTree(){
				this.clistnow=[];
				this.clistall.forEach((v, i) => { 
					this.clistall[i].isChecked = false;
					this.clistnow.push(this.clistall[i]);
				});
				this.$forceUpdate();
			},
			chagne(e){
				var rt= null;
				if(e.detail.value){
					this.seladr=null;
					this.$forceUpdate();
					this.clistnow.forEach(cell=>{
						if(cell.id==e.detail.value){
							this.seladr=cell;
							this.$forceUpdate();
						}
					});
				}
			},
			_show() {
				this._initTree();
				this.$refs.share.open();
				this.$forceUpdate();
			},
			_hide() {
				this.$refs.share.close();
			},
			_cancel() {
				this._hide();
			},
			
		}
	}
</script>

<style lang="scss">
	.titleImg {
		padding:30rpx;
		color: #fff;
		width: 100%;
		background-size: 100%;
		position: relative;
		background-image: url(@/static/images/mebackimg.jpg);
		.user {
			position: relative;
			display: flex;
			flex-direction: row;
			.username {
				line-height: 60rpx;
				margin-left: 10rpx;
				.p1 {
					font-size: 32rpx;
				}
				.p2 {
					font-size: 22rpx;
					opacity: 0.7;
					margin-top: 10rpx;
				}
			}
		}
		
	}
	
	.adrcon{
		display: flex;
		flex-direction: column;
		background: #F5F5F5;
		padding: 20rpx;
		margin: 0;
	}
	.topcon{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 10rpx;
		.tleft{
			font-weight: 400;
			font-size: 28rpx;
			color: #23262F;
		}
		.tright{
			width: 160rpx;
			height: 50rpx;
			font-weight: 400;
			font-size: 24rpx;
			color: #FFFFFF;
			background: #3690ff;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
		}
	}
	.skcon{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		color: #23262F;
		width: 100%;
		padding: 20rpx;
		border-top: 1rpx dotted #f0f0f0;
	}
	.submitcon{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 150rpx;
	}
	.btn{
		margin: 30rpx auto;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FCFCFD;
		width: 560rpx;
		height: 76rpx;
		line-height: 76rpx;
		background: #3690ff;
		box-shadow: 0rpx 12rpx 64rpx 2rpx rgba(54,144,255,0.4);
		border-radius: 10rpx;
		opacity: 1;
		&::after{
			border:none;
		}
	}
	.scroll{
		width: 100%;
		position: relative;
		display: block;
		margin-bottom: 30rpx;
		margin-top: 20rpx;
	}
	.scell{
		display: flex;
		background-color: #F5F5F5;
		padding: 0 10rpx;
		flex-direction: column;
		.sitem {
			position: relative;
			display: flex;
			flex-direction: row;
			align-items: center;
			background-color: #FFFFFF;
			margin-bottom: 20rpx;
			border-radius: 16rpx;
			.lcon{
				display: flex;
				flex: 1;
				flex-direction: column;
			}
			.opecon{
				position: absolute;
				right: 20rpx;
				bottom: 20rpx;
			}
			.sname{
				font-size: 30rpx;
				font-weight: 600;
				color: rgb(29, 29, 29);
				padding: 24rpx;
				justify-content:space-between;
				align-items: center;
				display: flex;
				.tip{
					font-weight: 400;
					font-size: 24rpx;
					color: #FFFFFF;
					width: 80rpx;
					height: 48rpx;
					text-align: center;
					line-height: 50rpx;
					background: #3690ff;
					border-radius: 24rpx;
					margin-left: 10rpx;
				}
			}
			.sinfo{
				padding: 0 24rpx 24rpx;
				font-size: 26rpx;
				color:rgb(116, 116, 116);
				line-height: 40rpx;
			}
		}
	}
	
	
	::v-deep.uni-radio-input-checked::before{
		display: none!important;
	}
	.allcon{
		height: calc((0.8*100vh));
		min-height: 300rpx;
		overflow: hidden;
		background-color: #FFFFFF;
	}
	.xcon{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-end;
		padding: 20rpx 20rpx 0 20rpx;
		.xcell{
			border: 1rpx solid #ddd;
			color: #949494;
			margin-right: 20rpx;
			padding: 10rpx 20rpx;
			border-radius: 10rpx;
		}
		.xcell.cur{
			color: #fff;
			background-color: #007aff;
			border: 1rpx solid #007aff;
		}
	}
	.hcon{
		display: flex;
		flex-direction: row;
		padding: 20rpx;
		.htitle{
			flex:1;
			justify-content: flex-start;
			font-size: 32rpx;
			font-weight: 600;
			letter-spacing: 5rpx;
			padding-right: 20rpx;
		}
		.rclose{
			width: 70rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			font-size: 28rpx;
			color:#949494;
		}
	}
	.checklist-group{
		width: 100%;
	}
	.selcon{
		padding: 20rpx;
		position: relative;
		display: block;
		overflow-y: auto;
		height: calc((100vh*0.9 - 280rpx));
		.lineb{
			height: 50rpx;
		}
		.sitem {
			display: flex;
			flex-direction: row;
			flex: 1;
			background-color: #FFFFFF;
			border-bottom: 1rpx solid #eeeeee;
			padding: 10rpx 0;
			.conright{
				flex: 1;
				display: flex;
				flex-direction: row;
				width: 100%;
				justify-content:flex-start;
			}
			.selbtn{
				width: 80rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.sname{
				display: flex;
				justify-content: flex-start;
				align-items: center;
				font-size: 28rpx;
				font-weight: 600;
				color: rgb(29, 29, 29);
				padding: 10rpx 10rpx 10rpx 0;
			}
			.adress{
				display: flex;
				justify-content: flex-start;
				align-items: center;
				padding: 10rpx 10rpx 10rpx 10rpx;
				font-size: 26rpx;
				color:#949494;
			}
		}
	}
	
	
	
</style>