suta/pagesWode/wode-personal/idnex.vue

<template>
	<!-- 个人资料 -->
	<view class="flex-col page">
		<view class="flex-col flex-1 section">
			<view class="image-box-t">
				<button class="img-t" open-type="chooseAvatar" @chooseavatar="chooseavatar" style="background-color: #efefef;">
					<!-- <button > -->
						<image  v-if="userImage" class="shrink-0 image_6" :src="userImage"/>
					<!-- </button> -->
					<!-- <image v-else class="self-center image_5" src="https://api.ccttiot.com/smartmeter/img/static/usaBta7T92keDZwpiqjM"/> -->
				</button>
				<view class="text_3-box" >
					<!-- <button open-type="chooseAvatar" @chooseavatar="chooseavatar"
					class="font text_3">更换头像</button> -->
					<button open-type="chooseAvatar" @chooseavatar="chooseavatar" class="font text_3" style="padding-top: 30rpx;">更换头像</button>
				</view>
			</view>

			<view @click="popupDon('请填写姓名', userlist.username)"
				class="flex-row justify-between items-center self-stretch group_3 flex-box-list">
				<text class="font_2 text_4">姓名</text>
				<view class="flex-row items-center jiantou-d">
					<text class="font">{{userlist.username}}</text>
					<image class="shrink-0 image_5 ml-19" src="../../static/wode-youjianto.png" />
				</view>
			</view>

			<view @click="sexselect('请选择性别', userlist.sex)"
				class="flex-row justify-between items-center self-stretch group_4 flex-box-list">
				<text class="font_2 text_5">性别</text>
				<view class="flex-row items-center jiantou-d">
					<text class="font text_6">{{userlist.sex === 1 ? '男' : '女'}}</text>
					<image class="shrink-0 image_5 ml-21" src="../../static/wode-youjianto.png" />
				</view>
			</view>
			<view @click="popupDon('请填写年龄',userlist.age)"
				class="flex-row justify-between items-center self-stretch group_5 flex-box-list">
				<text class="font_2 text_7">年龄</text>
				<view class="flex-row items-center jiantou-d">
					<text class="font_3">{{userlist.age}}</text>
					<image class="shrink-0 image_5 ml-19" src="../../static/wode-youjianto.png" />
				</view>
			</view>
			<view @click="popupDon('请填写蜂龄',userlist.beehive_age)"
				class="flex-row justify-between items-center self-stretch group_5 flex-box-list">
				<text class="font_2 text_8">蜂龄</text>
				<view class="flex-row items-center jiantou-d">
					<text class="font_3">{{userlist.beehive_age}}</text>
					<image class="shrink-0 image_5 ml-19" src="../../static/wode-youjianto.png" />
				</view>
			</view>
			<view @click="alterDon('请选择地区', userlist.area)"
				class="flex-row justify-between items-center self-stretch group_5 flex-box-list">
				<text class="font_2 text_9">地区</text>
				<view class="flex-row items-center jiantou-d">
					<text class="font">{{userlist.area}}</text>
					<!-- <text class="font text_10">宁德</text> -->
					<image class="shrink-0 image_5 image_7" src="../../static/wode-youjianto.png" />
				</view>
			</view>
			<view class="flex-row justify-between items-center self-stretch group_5 flex-box-list">
				<text class="font_2">手机号</text>
				<view class="flex-row items-center jiantou-d">
					<text class="font_3">{{userlist.mobile}}</text>
					<image class="ml-16 shrink-0 image_5" src="../../static/wode-youjianto.png" />
				</view>
			</view>
			<view @click="popupDon('请填写紧急联系手机号', userlist.urgency_mobile)"
				class="flex-row justify-between items-center self-stretch group_5 flex-box-list">
				<text class="font_2 text_11">紧急联系手机号</text>
				<view class="flex-row items-center jiantou-d">
					<text class="font_3">{{userlist.urgency_mobile}}</text>
					<image class="ml-16 shrink-0 image_5" src="../../static/wode-youjianto.png" />
				</view>
			</view>
		<!-- 	<view @click="userout" class="flex-col justify-start items-center self-stretch text-wrapper">
				<text class="text_12">注销登录</text>
			</view> -->
		</view>
		<!-- 弹出层 -->
		<view>
			<u-popup :closeOnClickOverlay="false" :round="30" :show="show" mode="bottom" :safeAreaInsetBottom="true" :negative-top='300'>
				<view class="popup-box">
					<view class="popup-top-text popup-boder-m">
						<view>{{title}}</view>
						<view @click="closeend">X</view>
					</view>
					<view class="popup-boder-m">
						<u--input shape="circle" placeholder="请输入内容" border="surround" v-model="inputvalue" :cursorSpacing='150'  :adjustPosition='true'></u--input>
					</view>
					<view class="popup-button-b"  style="margin-bottom: 200rpx;">
						<u-button @click="putval" color="#23693f" shape="circle" type="primary" text="确 定"></u-button>
					</view>
				</view>
			</u-popup>
		</view>
		<u-picker @cancel="showfengzhong=false" @confirm="confirmfengzhong" :show="showfengzhong"
			:columns="fengzhongcolumns"></u-picker>
		<address-picker @cancel="showst=false" :address-data="addressData" :show="showst" :columns="columns"
			@confirm="confirm"></address-picker>
	</view>
</template>

<script>
	import request from '../../utils/request'
	export default {
		components: {},
		props: {},
		data() {
			return {
				fengzhongcolumns: [
					// '中华蜂','意大利蜂','东北黑蜂'
					[{
						text: '男',
						id: 1
					}, {
						text: '女',
						id: 2
					}]
				],
				showfengzhong: false,
				columns: [],
				showst: false,
				addressData: ['北京市', '北京市', '东城区'],
				uplistData: {
					username: '',
					sex: '',
					age: '',
					beehive_age: '',
					urgency_mobile: '',
					area: '',
					receiver: '',
					shipping_mobile: '',
					shipping_area: '',
					shipping_address: '',
					shipping_floor: ''
				},
				fileList1: [], // 图片上传
				title: '', // 弹出层
				inputvalue: '', // 弹-输入框
				list: [{
						name: '男'
					},
					{
						name: '女'
					},
					{
						name: '未知'
					}
				],
				show: false, // 弹出层控制变量
				userlist: {}, // 个人信息数据
				columns: [
					['中国', '美国'],
					['深圳', '厦门', '上海', '拉萨']
				],
				columnData: [
					['深圳', '厦门', '上海', '拉萨'],
					['得州', '华盛顿', '纽约', '阿拉斯加']
				],
				userImage: 'a'
			};
		},
		onShow() {
			this.setuser()
		},
		methods: {
			confirmfengzhong(e) {
				// console.log(e.value[0].id,'11111111');
				this.update({
					sex: e.value[0].id
				})
				this.showfengzhong = false
				this.setuser()
			},
			sexselect() {
				this.showfengzhong = true
			},
			confirm(e) {
				// console.log('confirm', e.value)
				this.update({
					area: `${e.value[0]}${e.value[1]}${e.value[2]}`
				})
				this.showst = false
				this.setuser()
			},
			alterDon() {
				this.showst = true
			},
			userout() {
				// console.log('退出登录')
				wx.removeStorageSync('userToken');
				uni.reLaunch({
					url: '/pages/login/index',
				});
			},
			chooseavatar(e) {
				console.log(this.userImage)
				console.log(e,'eeeeeeeeeeeeeeeeeeeee');
				let token = wx.getStorageSync('userToken')
				// this.avatarUrl=e.detail
				let _this=this
				// 上传图片到七牛云
				console.log(e.detail.avatarUrl,'e.url')
				let math=uni.getStorageSync('isid')+'/'+_this.$u.guid(20)
				wx.uploadFile({
					url: 'https://wx.beishaoyuan.com/api/index/upload', 
					name: 'file',
					filePath: e.detail.avatarUrl,
					formData: {
						token: token, //后端返回的token
						
					},
					success: function(res) {
					// console.log(res,'resres');
						let str = JSON.parse(res.data)
						console.log(str)
						_this.userImage =str.data.url
						_this.update({
							avatar: _this.userImage
						})
						// _this.userImg = 'https://file.langsi.online/' + str.key
						// 将上传的图片push到 数组中
					}
				});
				
			},

			// 图片上传
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					// let a = request.put('',{})
					let a = uni.uploadFile({
						url: '/api/user/update', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							setTimeout(() => {
								resolve(res.data.data)
							}, 1000)
						}
					});
				})
			},
			// 地区
			changeHandler(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
					// picker为选择器this实例，变化第二列对应的选项
					picker.setColumnValues(1, this.columnData[index])
				}
			},
			putval() {
				// 判断用户有没有输入内容
				if (this.inputvalue) {
					// 发请求修改数据，关闭弹窗，提示用户，清空弹窗里的输入框
					// this.popupDon(this.title)
					
					
						if (this.title == '请填写姓名') {
							this.update({
								username: this.inputvalue
							})
						} else if (this.title == '请填写年龄') {
							this.update({
								age: this.inputvalue
							})
						} else if (this.title == '请填写蜂龄') {
							this.update({
								beehive_age: this.inputvalue
							})
						} else if (this.title == '请填写紧急联系手机号') {
							this.update({
								urgency_mobile: this.inputvalue
							})
						}
						this.setuser()
						this.closeend()
					
				} else {
					uni.showToast({
						title: '请输入内容',
						icon: 'none',
						duration: 2000
					})
				}
			},
			async update(item) {
				await request.put('/api/user/update', item).then(res => {
					uni.showToast({
						icon: "none",
						title: res.data.msg,
					})
					this.setuser()
				}).catch(e => {})
			},
			popupDon(title) {
				this.title = title
				if (this.title == '请填写姓名') {
					this.inputvalue = this.userlist.username
				} else if (this.title == '请填写年龄') {
					this.inputvalue = this.userlist.age
				} else if (this.title == '请填写蜂龄') {
					this.inputvalue = this.userlist.beehive_age
				} else if (this.title == '请填写紧急联系手机号') {
					this.inputvalue = this.userlist.urgency_mobile
				}else{
					this.inputvalue = this.userlist.mobile
				}
				

					// if (this.inputvalue) {
					// 	if (this.title == '请填写姓名') {
					// 		this.update({
					// 			username: this.inputvalue
					// 		})
					// 	} else if (this.title == '请填写年龄') {
					// 		this.update({
					// 			age: this.inputvalue
					// 		})
					// 	} else if (this.title == '请填写蜂龄') {
					// 		this.update({
					// 			beehive_age: this.inputvalue
					// 		})
					// 	} else if (this.title == '请填写紧急联系手机号') {
					// 		this.update({
					// 			urgency_mobile: this.inputvalue
					// 		})
					// 	}
					// }
				this.show = true
			},
			// 开启弹层
			close() {
				this.show = true
				// console.log(this.close)
			},
			// 关闭弹层
			closeend() {
				this.show = false
				this.inputvalue = ''
			},
			async setuser() {
				const res = await request.get('/api/user/info')
				// console.log(res.data.data, '111')
				this.userlist = {
					...res.data.data
				}
				this.userImage = res.data.data.avatar
			}
		},
	};
</script>

<style scoped lang="css">
	.popup-button-b {
		margin-bottom: 20rpx;
	}

	.popup-box {
		padding: 30rpx 60rpx;
		border-radius: 50rpx;
	}

	.popupStyle {
		border-radius: 50%;
	}

	.popup-boder-m {
		margin-bottom: 90rpx;
	}

	.popup-top-text {
		display: flex;
		justify-content: space-between;
	}

	.jiantou-d {
		display: flex;
		align-items: center;
	}

	.flex-box-list {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.img-t {
		width: 144rpx;
		height: 144rpx;
		border-radius: 50%;
		overflow: hidden;
		position: relative;
	}

	.image-box-t {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.ml-19 {
		margin-left: 38rpx;
	}

	.ml-21 {
		margin-left: 42rpx;
	}

	.page {
		background-color: #ffffff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.image_5 {
		width: 25rpx;
		height: 32rpx;
	}

	.section {
		padding: 30rpx 46rpx 40rpx 56rpx;
		background-color: #ffffff;
		overflow-y: auto;
	}

	.image_6 {
		width: 144rpx;
		height: 144rpx;
		position: absolute;
		left: 0;
	}

	.font {
		font-size: 30rpx;
		font-family: 微软雅黑;
		line-height: 27.6rpx;
		color: #000000;
	}

	.text_3::after {
		border: none;
		height: 90rpx;
	}

	.text_3 {
		background-color: #ffffff;
		border: 0px solid red;
		margin-top: 24rpx;
		font-size: 28rpx;
		line-height: 25.84rpx;
		height: 90rpx;
	}

	.text_3-box {
		width: 300rpx;
		height: 50rpx;
	}


	.group_3 {
		margin-top: 92rpx;
		padding: 0 28rpx;
	}

	.font_2 {
		font-size: 30rpx;
		font-family: 微软雅黑;
		line-height: 27.6rpx;
		color: #888888;
	}

	.text_4 {
		line-height: 27.66rpx;
	}

	.group_4 {
		margin-top: 36rpx;
		padding: 44rpx 24rpx 36rpx;
		border-top: solid 2rpx #8888881a;
		border-bottom: solid 2rpx #8888881a;
	}

	.text_5 {
		line-height: 27.72rpx;
	}

	.text_6 {
		line-height: 26.02rpx;
	}

	.group_5 {
		padding: 40rpx 28rpx;
		border-bottom: solid 2rpx #8888881a;
	}

	.text_7 {
		line-height: 27.76rpx;
	}

	.font_3 {
		font-size: 30rpx;
		font-family: 微软雅黑;
		margin-right: 20rpx;
		/* line-height: 21.92rpx; */
		color: #000000;
	}

	.text_8 {
		line-height: 27.7rpx;
	}

	.text_9 {
		line-height: 26.92rpx;
	}

	.text_10 {
		margin-left: 16rpx;
	}

	.image_7 {
		margin-left: 40rpx;
	}

	.text_11 {
		line-height: 27.92rpx;
	}

	.text-wrapper {
		text-align: center;
		margin: 70rpx 12rpx 0;
		padding: 28rpx 0;
		background-color: #88888880;
		border-radius: 40rpx;
	}

	.text_12 {
		color: #ffffff;
		font-size: 32rpx;
		font-family: SourceHanSansCN;
		line-height: 29.64rpx;
	}
</style>