dyqc_hdapp/packageA/my/person-detail.vue

<template>
	<view class="content">
		<!-- <image src="../../static/my/backImage.png" mode="" class="backImg"></image> -->
		<view class="container">
			<view class="card">
				<view class="list">
					<view class="list-item">
						<view class="left">
							<u-avatar :src="avatar" shape="circle" size="59"></u-avatar>
						</view>
						<view class="right" @click="upload">
							更换头像
							<u-icon name="arrow-right" color="#babdc7"></u-icon>
						</view>
					</view>
					<view class="list-item">
						<view class="left">
							昵称
						</view>
						<view class="right">
							<u--input v-model="niName" placeholder="请输入昵称" border="none" inputAlign="right"></u--input>
						</view>
					</view>
					<view class="list-item">
						<view class="left">
							银行卡
						</view>
						<view class="right">
							<u-icon name="arrow-right" color="#babdc7"></u-icon>
						</view>
					</view>


				</view>
			</view>
		</view>
		<view class="bottom">
			<u-button v-if="typeop == 2" :customStyle="style" @click="out">退出账号</u-button>
			<u-button v-else  :customStyle="style" @click="submit">保存</u-button>
		</view>
		<!-- <u-picker :show="show" :columns="columns" keyName='name' @confirm="confirm" @cancel="cancel"></u-picker>
		<u-picker :show="show1" :columns="columns1" keyName='name' @confirm="confirm1" @cancel="cancel"></u-picker>
		<u-picker :show="show2" :columns="columns2" keyName='name' @confirm="confirm2" @cancel="cancel"></u-picker>
		<u-datetime-picker ref="datetimePicker" :show="show3" v-model="value" mode="date" :formatter="formatter"
			@confirm="confirm3" @cancel="cancel" min-date="1970"></u-datetime-picker>
		<u-picker :show="show4" ref="uPicker" :loading="loading" :columns="columns3" @change="changeHandler"
			@cancel="cancel" @confirm="confirm4"></u-picker> -->

		<u-popup :show="show5" @close="close" :closeOnClickOverlay="false" closeable :customStyle="avatarStyle">
			<view class="avatar_choose">
				<view class="cards" @click="clickAvatar(0)">
					<img src="https://naweigetetest2.hschool.com.cn/dyqc/img1.png" alt="" />
					<view class="choose_btn" >
						更换
					</view>
				</view>
				<view class="cards" @click="clickAvatar(1)">
					<img src="https://naweigetetest2.hschool.com.cn/dyqc/img2.png" alt="" />
					<view class="choose_btn" >
						更换
					</view>
				</view>
				<view class="cards" @click="clickAvatar(2)">
					<img src="https://naweigetetest2.hschool.com.cn/dyqc/img3.png" alt="" />
					<view class="choose_btn">
						更换
					</view>
				</view>
				<view class="cards" @click="clickAvatar(3)">
					<img src="https://naweigetetest2.hschool.com.cn/dyqc/img4.png" alt="" />
					<view class="choose_btn">
						更换
					</view>
				</view>
			</view>
		</u-popup>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		dateFormat,
		dateFormats
	} from '../../utils/dateFormat'
	// import {
	// 	address
	// } from '../../static/address'
	export default {
		data() {
			return {
				typeop: '',
				avatarStyle: {
					display: 'flex',
					alignItems: 'center',
					justifyContent: 'space-between'
				},
				// origiData: address,
				origiData: [],
				value: Number(new Date()),
				area: '',
				birthday: '',
				show: false,
				show1: false,
				show2: false,
				show3: false,
				show4: false,
				show5: false,
				loading: false,
				columns3: [],
				avatar: "https://cdn.uviewui.com/uview/album/1.jpg",
				upAvatar:'',
				titleStyle: {
					fontSize: '34rpx',
					fontWeight: 600
				},
				imageStyles: {
					width: 59,
					height: 59,
					border: {
						radius: '50%'
					}
				},
				style: {
					width: '690rpx',
					height: '90rpx',
					borderRadius: '148rpx',
					background: '#323232',
					fontSize: '36rpx',
					color: '#BBFC5B',
					lineHeight: '90rpx',
					border: 'none',
					fontFamily: "YouSheBiaoTiHei"
				},
				niName: '',
				realname: '',
				gender: '',
				// ages: '',
				zhiYe: '',
				phoneNumber: '',
				columns: [
					[{
							name: '男'
						},
						{
							name: '女'
						}
					]
				],
				columns1: [
					[{
							name: '18~28'
						},
						{
							name: '28~38'
						},
						{
							name: '38~48'
						}
					]
				],
				columns2: [
					[{
						name: '销售 / 客服',
					}, {
						name: '技术'
					}, {
						name: '产品 / 设计 / 运营'
					}, {
						name: '项目管理 / 项目质量'
					}, {
						name: '人力行政'
					}, {
						name: '财务 / 审计 / 税务'
					}, {
						name: '广告 / 设计 / 传媒 / 编辑'
					}, {
						name: '市场 / 公关'
					}, {
						name: '金融'
					}, {
						name: '生产制造'
					}, {
						name: '房地产 / 建筑 / 物业'
					}, {
						name: '采购 / 贸易 / 交通 / 物流'
					}, {
						name: '咨询 / 法律 / 教育 / 翻译'
					}, {
						name: '医疗 / 护理 / 生活服务'
					}, {
						name: '能源 / 矿产 / 环保'
					}, {
						name: '公务员 / 农林牧渔 / 其他'
					}, {
						name: '综合管理'
					}]
				]
			}
		},
		onLoad(options) {
			if (options) {
				this.typeop = options.type;
			}
			const userInfo = uni.getStorageSync('userInfo')
			this.phoneNumber = userInfo.mobile
			this.niName = userInfo.nickname
			this.realname = userInfo.username
			this.avatar = uni.getStorageSync('userInfo').avatar
			this.$refs.datetimePicker.setFormatter(this.formatter)
			// this.handelData()
			this.getDetail()
		},
		methods: {
			out(){
				uni.clearStorageSync()
				uni.reLaunch({
					url: '/pages/my/index'
				})
			},
			submit() {
				console.log(this.avatar,'this.avatar')
				uni.$u.http.post('/api/user/profile', {
					avatar: this.avatar,
					nickname: this.niName,
					// work: this.zhiYe,
					// birthday: this.birthday,
					// realname: this.realname,
					// gender: this.gender == '男' ? '1' : '0',
					update_fields: ['nickname', 'birthday', 'realname', 'gender', 'work','avatar']
				}).then(res => {
					if (res.code == 1) {
						this.getDetail()
						this.$refs.uToast.show({
							type: 'success',
							message: '保存成功',
							duration:'1000',
							complete: function() {
								setTimeout(function() {
									uni.navigateBack(1)
								}, 1000);
							}
						})
					} else if (res.code == 0) {
						this.$refs.uToast.show({
							type: 'error',
							message: res.msg + ',' + '请完善全部信息'
						})
						this.getDetail()
					}
				})
			},
			getDetail() {
				uni.$u.http.post('/api/user/index').then(res => {
					if (res.code == 1) {
						const userinfo = res.data.user_info
						uni.setStorageSync('userInfo',res.data.user_info)
						uni.setStorageSync("niName",res.data.user_info.nickname)
						if (userinfo.birthday !== null) {
							this.birthday = userinfo.birthday
						}
						if (userinfo.work !== null) {
							this.zhiYe = userinfo.work
						}
						if (userinfo.diqu !== null) {
							this.area = userinfo.diqu
						}
						if (userinfo.avatar !== null) {
							this.avatar = userinfo.avatar
							uni.setStorageSync('avatar', this.avatar)
						}
						if (userinfo.nickname !== null) {
							this.nickname = userinfo.nickname
							uni.setStorageSync('niName',this.nickname)
						}
						if (userinfo.gender !== null) {
							this.gender = userinfo.gender == '1' ? '男' : '女'
						}
						if (userinfo.realname !== null) {
							this.realname = userinfo.realname
						}
					}
				})
			},
			//初始化开始数据
			handelData() {
				// console.log(this.origiData.value))
				let sheng = [];
				let shi = [];
				let qu = [];
				this.origiData.forEach(item => {
					sheng.push(item.value);
					// 设置出初始化的数据
					if (item.value == '北京市') {
						item.children.forEach(child => {
							shi.push(child.value);

							if (child.value == '北京市') {
								child.children.forEach(el => {
									qu.push(el.value);
								});
							}
						});
					}
				});
				this.columns3.push(
					JSON.parse(JSON.stringify(sheng)),
					JSON.parse(JSON.stringify(shi)),
					JSON.parse(JSON.stringify(qu))
				);
			},
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value
			},
			clickLeft() {
				uni.navigateBack(-1)
			},
			upload() {
				// 示例代码
				// uni.chooseImage({
				// 	success: (chooseImageRes) => {
				// 		const tempFilePaths = chooseImageRes.tempFilePaths;
				// 		const that = this
				// 		uni.uploadFile({
				// 			url: 'https://testy.hschool.com.cn//api/common/upload', //仅为示例，非真实的接口地址
				// 			filePath: tempFilePaths[0],
				// 			name: 'file',
				// 			header: {
				// 				"token": uni.getStorageSync("token")
				// 			},
				// 			formData: {
				// 				'user': 'test'
				// 			},
				// 			success: (res) => {
				// 				let group =  JSON.parse(res.data) 
				// 				that.upAvatar = group.data.url
				// 				that.avatar = group.data.fullurl
				// 				console.log(group.data)
				// 				console.log(that.avata)
				// 			}
				// 		});
				// 	}
				// });
				this.show5 = true
			},
			close() {
				this.show5 = false
			},
			clickAvatar(index) {
				let avatar = ''
				if (index == 0) {
					avatar = 'https://naweigetetest2.hschool.com.cn/dyqc/img1.png'
				} else if (index == 1) {
						avatar = 'https://naweigetetest2.hschool.com.cn/dyqc/img2.png'
				} else if (index == 2) {
						avatar = 'https://naweigetetest2.hschool.com.cn/dyqc/img3.png'
				} else if (index == 3) {
						avatar = 'https://naweigetetest2.hschool.com.cn/dyqc/img4.png'
				} 
				this.avatar = avatar
				console.log(this.avatar,'this.avatar')
				uni.$u.http.post('/api/user/profile', {
					update_fields:['avatar'],
					avatar: avatar
				}).then(res => {
					console.log(res);
					if (res.code == 1) {
						this.$refs.uToast.show({
							type: 'success',
							message: '修改成功'
						})
						uni.setStorageSync('userInfo', { ...uni.getStorageSync('userInfo'), avatar: avatar });
						this.show5 = false
						this.getDetail()
					}
				})
			},
			confirm(e) {
				console.log(e)
				this.gender = e.value[0].name
				this.show = false
			},
			confirm1(e) {
				this.ages = e.value[0].name
				this.show1 = false
			},
			confirm2(e) {
				this.zhiYe = e.value[0].name
				this.show2 = false
			},
			confirm3(e) {
				this.birthday = dateFormats(e.value)
				this.show3 = false
			},
			confirm4(e) {
				console.log(e);
				this.area = e.value[0] + e.value[1] + e.value[2]
				this.show4 = false
			},
			cancel() {
				this.show = false
				this.show1 = false
				this.show2 = false
				this.show3 = false
				this.show4 = false
			},
			changeHandler(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e;
				// console.log('测试数据', e);
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
					// console.log(value)
					// picker为选择器this实例，变化第二列对应的选项
					this.origiData.forEach(item => {
						if (value[0] == item.value) {
							let shi = [];
							let flag = item.children[0].value;
							item.children.forEach((val, ol) => {
								shi.push(val.value);
								if (shi[0] == flag) { //设置默认开关（选择省份后设置默认城市）
									flag = '';
									let qu = [];
									val.children.forEach(vol => {
										qu.push(vol.value);
									});
									picker.setColumnValues(2, qu);
								}
							});
							picker.setColumnValues(1, shi);
						}
					});
				}
				//当第二列变化时，第三列对应变化
				if (columnIndex === 1) {
					this.origiData.forEach(item => {
						if (value[0] == item.value) {
							let shi = [];
							item.children.forEach((val, ol) => {
								shi.push(val.value);
								if (value[1] == val.value) {
									let qu = [];
									val.children.forEach(vol => {
										qu.push(vol.value);
									});
									picker.setColumnValues(2, qu);
								}
							});
						}
					});
				}
			},
		}
	}
</script>

<style lang="scss">
	.content {
		.backImg {
			position: fixed;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			z-index: -1;
		}

		.container {
			box-sizing: border-box;
			padding: 20rpx 30rpx;
			// background: #F1F2F8;
			min-height: calc(100vh - 166rpx - 88rpx - 44rpx);

			.card {
				width: 690rpx;
				background: #fff;
				border-radius: 30rpx;
				box-sizing: border-box;
				padding: 40rpx 30rpx;

				.list {
					.list-item {
						display: flex;
						align-items: center;
						justify-content: space-between;
						font-size: 30rpx;
						color: #181818;
						height: 91rpx;
						line-height: 91rpx;
						border-bottom: 1rpx solid #f5f6fa;

						&:nth-child(1) {
							height: 148rpx;
							line-height: 148rpx;

							.right {
								display: flex;
								align-items: center;
								font-size: 30rpx;
								color: #babdc7;
							}
						}

						&:nth-child(4) {
							.right {
								display: flex;
								align-items: center;
							}
						}

						&:nth-child(5) {
							.right {
								display: flex;
								align-items: center;
							}
						}

						&:nth-child(6) {
							.right {
								display: flex;
								align-items: center;
							}
						}

						&:nth-child(7) {
							.right {
								display: flex;
								align-items: center;
							}
						}

						&:last-child {
							border-bottom: none;
						}
					}
				}
			}
		}

		.bottom {
			position: fixed;
			left: 0;
			bottom: 0;
			padding-bottom: constant(safe-area-inset-bottom);
			/*兼容 IOS<11.2*/
			padding-bottom: env(safe-area-inset-bottom);
			/*兼容 IOS>11.2*/
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 166rpx;
			background: #FFFFFF;
			box-shadow: 0rpx -2rpx 4rpx 0rpx rgba(186, 189, 199, 0.2);
			
		}

		.avatar_choose {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 100rpx;
			margin-bottom: 100rpx;

			.cards {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				img {
					width: 150rpx;
					height: 150rpx;
					margin-bottom: 20rpx;
					border-radius: 50%;
				}

				.choose_btn {
					width: 100rpx;
					height: 50rpx;
					border-radius: 10rpx;
					background-color: #009379;
					color: #FFFFFF;
					text-align: center;
					line-height: 50rpx;
				}
			}
		}
	}
</style>