qidian/pages/userzhiliao/userzhiliao.vue

<template>
	<view class="setlist">
		<view>
			<view>头像</view>
			<view @click="xuanze">
				<!-- <view>123</view> -->
				<image class="touxiang" :src="tupianurl==''?users.headPhoto:tupianurl"></image>
				<image class="you" src="../../static/youshou.png"></image>
			</view>
		</view>
		<view>
			<view>昵称</view>
			<view>
				<!-- <view>巴啦啦小魔仙</view> -->
				<input placeholder="请输入昵称" v-model="texts" />
				<!-- <image class="you" src="../../static/youshou.png"></image> -->
			</view>
		</view>
		<view>
			<view>手机号</view>
			<view>
				<view>{{users.account}}</view>
				<!-- <image class="you" src="../../static/youshou.png"></image> -->
			</view>
		</view>
		<view>
			<view>实名认证</view>
			<view @click="goshimin">
				<view v-if="users.realNameState">已实名</view>
				<view v-if="!users.realNameState">未实名</view>
				<image class="you" src="../../static/youshou.png"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import {criticismmaterial} from '@/api/user.js'
	import {
		host
	} from '@/api/config.js'
	import {
		ref
	} from 'vue'
	export default {
		onUnload() {
			console.log('页面隐藏', this.users);
			console.log(this.tupianurl==''?this.users.headPhoto:this.tupianurl);
			if(this.tupianurl==''&&this.texts==this.users.nickname){
				return
			}
			criticismmaterial({
				nickName:this.texts,
				avatarUrl:this.tupianurl==''?this.users.headPhoto:this.tupianurl
			}).then(res=>{
				console.log(res);
				if(res.code==200){
					uni.setStorageSync('users',res.data)
					uni.showToast({
						title:'修改成功'
					})
				}
			})
		},
		setup() {
			let texts = ref('巴啦啦小魔仙')
			let users = ref('')
			users.value = uni.getStorageSync('users')
			texts.value = users.value.nickname
			console.log(users.value);
			let tupianurl = ref('')

			function xuanze() {
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						let token = uni.getStorageSync('token');
						let createToken = uni.getStorageSync('createToken');
						uni.uploadFile({
							url: `${host}/api/criticism/upload`, //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							header: {
								token: token,
								Authorization: createToken
							},
							success: (uploadFileRes) => {
								console.log(JSON.parse(uploadFileRes.data).data.indexOf('http')==-1||JSON.parse(uploadFileRes.data).data.indexOf('https')==-1);
								if (JSON.parse(uploadFileRes.data).data.indexOf('http')==-1||JSON.parse(uploadFileRes.data).data.indexOf('https')==-1) {
									tupianurl.value = 'http://' + JSON.parse(uploadFileRes.data).data
								} else {
									tupianurl.value = JSON.parse(uploadFileRes.data).data
								}
							}
						});
					}
				});
			}

			function goshimin() {
				if (users.value.realNameState) {
					uni.navigateTo({
						url: '../realname/realname?issm=true'
					})
				} else {
					uni.navigateTo({
						url: '../realname/realname?issm=false'
					})
				}
			}
			return {
				xuanze,
				texts,
				users,
				tupianurl,
				goshimin
			}
		}
	}
</script>

<style lang="scss">
	.setlist {
		width: 686upx;
		// height: 772upx;
		background: #23262F;
		border-radius: 12upx;
		padding: 32upx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
		// justify-content: space-between;
		margin: auto;

		>view {
			width: 618upx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: #ffffff;
			font-size: 28upx;
			font-weight: 400;
			color: #FFFFFF;
			padding-top: 44upx;
			padding-bottom: 44upx;
			border-bottom: 1upx solid #373737;

			&:nth-of-type(1) {
				padding-top: 12upx;
			}

			&:nth-last-child(1) {
				border-bottom: none;
				padding-bottom: 24upx;
			}

			>view {
				display: flex;
				align-items: center;
				box-sizing: border-box;

				>input {
					font-size: 24upx;
					color: #ffffff;
					text-align: right;
				}

				>.touxiang {
					width: 56upx;
					height: 56upx;
					border-radius: 50%;
				}

				>.you {
					width: 36upx;
					height: 36upx;
					margin-left: 8upx;
				}

				>view {
					font-size: 24upx !important;
				}
			}
		}
	}

	page {
		padding-top: 50upx;
	}
</style>