cxc-szcx-uniapp/pages/useredit/useredit.vue

<template>
	<view :class="['content',{'gray':store.isgray==1}]">
		<view class="box">
			<view>头像</view>
			<view style="display: flex;align-items: center;">
				<button class="head-btn" @click="chooseAvatar">
					<image class="head-img" v-if="!form.avatar" :src="imgUrl(store.userinfo.avatar)" mode="">
					</image>
					<image class="head-img" v-else :src="imgUrl(form.avatar)"></image>
				</button>
				<uni-icons type="right" size="24"></uni-icons>
			</view>
		</view>
		<view class="box" style="padding-top: 30rpx;padding-bottom: 30rpx;">
			<view>姓名</view>
			<input disabled style="text-align: right;" type="nickname"
				placeholder-style="font-size: 32rpx;color: #999999;" v-model="store.userinfo.realname"
				placeholder="请输入姓名" />
		</view>
		<!-- 		<picker @change="bindSex" disabled :value="sexIndex" :range="sexArr">
			<view class="box" style="padding-top: 30rpx;padding-bottom: 30rpx;">
				<view>性别</view>
				<view :class="[{'choose':sexIndex==null},{'choosed':sexIndex!=null},'f-row','aic']">
					<text>{{sexIndex==null?'请选择':sexArr[sexIndex]}}</text>
					<uni-icons type="right" size="24"></uni-icons>
				</view>
			</view>
		</picker> -->
		<view class="box" style="padding-top: 30rpx;padding-bottom: 30rpx;">
			<view>手机号</view>
			<input disabled style="text-align: right;" type="nickname" v-model="store.userinfo.phone"
				placeholder="请输入手机号" placeholder-style="font-size: 32rpx;color: #999999;" />
		</view>
		<view class="box" style="padding-top: 30rpx;padding-bottom: 30rpx;">
			<view>劳动合同号</view>
			<input style="text-align: right;" type="nickname" disabled v-model="store.userinfo.workNo"
				placeholder="请输入劳动合同号" placeholder-style="font-size: 32rpx;color: #999999;" />
		</view>
		<!-- <view class="box" style="padding-top: 30rpx;padding-bottom: 30rpx;" @click="jump('/pages/useredit/address')">
			<view>我的地址</view>
			<view class="">
				<uni-icons type="right" size="24"></uni-icons>
			</view>
		</view> -->

	</view>
	<view class="line">

	</view>
	<view class="btn" @click="loginout">
		退出登录
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from "vue";
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		userEditApi,
		userProfileApi
	} from '@/network/api.js';
	import {
		beforeJump,
		imgUrl
	} from '@/utils/index.js';
	import {
		useStore
	} from '@/store';
	const store = useStore()

	const sexIndex = ref(null)
	const bindSex = (e) => {
		sexIndex.value = e.detail.value
	}
	const sexArr = ['男', '女']

	const toast = (title) => {
		uni.showToast({
			title,
			icon: 'none',
			duration: 2000
		})
	}
	const jump = (url) => {
		beforeJump(url, () => {
			uni.navigateTo({
				url
			})
		})
	}
	const chooseAvatar = () => {
		
		uni.chooseImage({
			count: 1,
			success: (chooseImageRes) => {
				const tempFilePaths = chooseImageRes.tempFilePaths;
				uni.uploadFile({
					url: 'https://36.112.48.190/jeecg-boot/sys/common/upload', //仅为示例，非真实的接口地址
					filePath: tempFilePaths[0],
					name: 'file',
					header: {
						"X-Access-Token": store.token
					},
					success: (uploadFileRes) => {
						uni.showLoading({
							title: '上传中...'
						})
						form.avatar = JSON.parse(uploadFileRes.data).message
						userEditApi({
							avatar: form.avatar,
							id:store.userinfo.id
						}).then((res) => {
							if (res.success) {
								userProfile()
							}
						}).catch((err) => {
							console.log(err);
						})
					},
					fail(err) {
						console.log('图片上传出错', err);
					}
				});
			}
		});

	}

	const userEdit = () => {
		userEditApi({
			...form,
			sex: sexArr[sexIndex.value] ? sexArr[sexIndex.value] : null
		}).then((res) => {
			if (res.success) {
				userProfile()
			}
		}).catch((err) => {
			console.log(err);
		})
	}
	const form = reactive({
		avatar: '',
		realname: '',
		phone: ''
	})
	const userProfile = () => {
		userProfileApi({
			username: store.userinfo.username
		}).then((res) => {
			if (res.success) {
				uni.setStorageSync('user', JSON.stringify(res.result.records[0]))
				store.setUserInfo(res.result.records[0])
			}
		}).catch((err) => {
			console.log(err);
		})
	}
	
	const loginout = () => {
		uni.showModal({
			title: '退出登录',
			content: '您确认要退出登录吗？',
			success(res) {
				if (res.confirm) {
					uni.removeStorageSync('token')
					uni.removeStorageSync('user')
					uni.removeStorageSync('role')
					uni.removeStorageSync('logintime')
					uni.reLaunch({
						url: '/pages/login/login'
					})
				}
			}
		})
	}
	onLoad(()=>{
		uni.setNavigationBarColor({
			frontColor:"#ffffff",
			backgroundColor:'#bebebe'
		})
		
	})
</script>

<style scoped lang="scss">
	.choose {
		font-size: 32rpx;
		color: #999999;
	}

	.choosed {
		font-size: 32rpx;
		color: #333333;
	}

	button::after {
		display: none;
	}

	.content {
		padding: 30rpx 30rpx 0 30rpx;

		.box:not(:last-child) {
			border-bottom: 1rpx solid #EFEFEF;
		}

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

			font-size: 32rpx;
			color: #333333;

			button {
				background-color: #fff;
				margin: 0;
				padding: 0;
				border: none;

				image {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
					background-color: #f8f8f8;
				}
			}

			.value {
				color: #999999;
			}
		}

		.out_login {
			color: #ED361D;
			font-size: 32rpx;
			font-weight: bold;
			margin-top: 60rpx;
			text-align: center;
		}
	}

	.line {
		height: 10rpx;
		background: #F8F8F8;
	}

	.btn {
		margin-top: 40rpx;
		text-align: center;
		font-size: 32rpx;
		color: #DB4B31;
	}
</style>