NN2025081602/addons/min-exam/pages/mine/modify.vue

<template>
	<!-- 注册 -->
	<view class="app" :style="'width: '+boxWidth+'px;height: '+boxHeight+'px'">
		<navbar title="修改信息" leftUrl="/pages/mine/index" :showLeft="true" :bgColor="'transparent'" :place="false">
		</navbar>
		<view class="main" v-if="userInfo.id">
			<view class="form-box">
				<view class="form">
					<uv-form class="login-form" labelPosition="left" :errorType="'toast'" :model="formData"
						:rules="rules" ref="form" label-width="2.25rem">
						<view class="form-item">
							<uv-image class="avatar"
								:src="userInfo.avatar? userInfo.avatar:'/static/images/icon-avatar.png'"
								mode="aspectFill" width="6rem" circle height="6rem" shape="circle"
								errorIcon="/static/images/icon-avatar.png">
							</uv-image>
						</view>
						<view class="form-item">
							<uv-form-item prop="realname" clearable label="昵称" label-width="3.25rem">
								<uv-input v-model="formData.nickname" type="text" border="none" placeholder="请输入昵称"
									inputAlign="right" clearable maxlength="30">
								</uv-input>
							</uv-form-item>
						</view>

						<view class="upload-box">
							<uv-form-item prop="formData.avatar" labelWidth="0">
								<uv-upload class="upload" :action="uploadConfig.url" :header="uploadConfig.header"
									:accept="'image'" @afterRead="afterRead" imageMode="aspectFit" :width="90"
									:height="90" :file-list="fileList" name="avatar" :maxCount="1" :deletable="false"
									:sizeType="['compressed']">
									<image class="img" :src="formData.avatar||'/static/images/icon-upload.png'"
										mode="aspectFill">
									</image>
									<view class="text">
										仅支持JPG、JPEG头像
									</view>
								</uv-upload>
							</uv-form-item>
						</view>
						<view class="form-submit">
							<uv-button class="register" throttleTime="1200" size="normal" shape="circle"
								:customStyle="{height:'3.25rem',fontWeight: '500',marginBottom: '.75rem'}"
								color="linear-gradient(to right, var(--button-color), var(--button-color1))"
								:loading="submitLoading" loadingText="保存中..." @click="submit">保存
							</uv-button>
						</view>
					</uv-form>
				</view>
			</view>
		</view>

		<showModal ref="uvModal"></showModal>
		<uv-loading-icon class="loading" :show="loading" textSize="30rpx" color="var(--color)"
			:customStyle="{position:'absolute',top:'50%',left:0,right:0}"></uv-loading-icon>
	</view>

</template>

<script>
	import {
		getToken,
	} from '../../config/cache';
	import navbar from "../../components/navbar.vue"
	import showModal from "../../components/showModal.vue"
	export default {
		components: {
			navbar,
			showModal
		},
		data() {
			return {
				id: 0,
				loading: false,
				submitLoading: false,
				type: '',
				boxHeight: 800,
				boxWidth: 360,
				showLang: false,
				lang: 'zh-cn',
				leftIconStyle: {
					width: '1.5rem',
					height: '1.5rem'
				},
				userInfo: {
					id: 0,
				},
				formData: {
					nickname: '',
					avatar: '',
				},
				rules: {
					nickname: [{
						required: true,
						message: '请填写昵称',
						// blur和change事件触发检验
						trigger: ['blur', 'change'],
					}],
				},
				fileList: [],
				uploadConfig: {
					url: this.baseUrl + '/api/v1/upload/image',
					header: {
						Authorization: "Bearer " + getToken()
					}
				},
			}
		},
		onLoad(e) {
			const windowInfo = uni.getWindowInfo();
			this.boxHeight = windowInfo.windowHeight
			this.boxWidth = windowInfo.windowWidth
			this.getInfo();
		},
		onHide() {
			this.$refs.uvModal.close();
		},
		onPullDownRefresh() {
			uni.stopPullDownRefresh()
			this.getInfo(true)

		},
		methods: {
			loadImage(eve) {
				console.log(666)
				eve.target.src = '/static/images/icon-avatar.png'
			},
			// 用户信息
			async getInfo(refresh = false) {
				this.loading = true;
				this.userInfo = await this.$request.apiGetUserInfo(this, refresh);
				this.loading = false;
				if (this.userInfo.id > 0) {
					this.formData = {
						nickname: this.userInfo.nickname,
						avatar: '',
					}
				}
			},
			// 提交
			submit() {
				this.$refs.form.validate().then(res => {
					this._submit();
				}).catch(errors => {

				})
			},
			// 提交处理
			async _submit() {
				let _this = this

				if (!this.formData.nickname) {
					uni.showToast({
						title: '请填写昵称',
						icon: 'none'
					})
					return false;
				}

				_this.loading = true
				_this.submitLoading = true
				const res = await this.$request.api('/user/modify', this.formData);
				_this.loading = false
				_this.submitLoading = false
				if (res.success == true) {
					this.userInfo.avatar = this.formData.avatar;
					this.formData.avatar = '';
					this.fileList = [];
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				} else {
					let msg = typeof(res.msg) != 'undefined' ? res.msg : '请求失败'
					uni.showToast({
						title: msg,
						icon: 'none'
					})
				}
			},
			// 预读图片
			async afterRead(event) {
				console.log(event);
				let lists = [].concat(event.file)
				const result = await this.uploadFilePromise(event.name, lists[0].url)
			},
			uploadFilePromise(name, url) {
				let _this = this
				_this.loading = true

				return new Promise((resolve, reject) => {
					let system = {
						uuid: uni.getSystemInfoSync().deviceId,
						sys_time: (Date.parse(new Date()) / 1000),
					};
					let a = uni.uploadFile({
						url: _this.uploadConfig.url,
						filePath: url,
						header: _this.uploadConfig.header,
						name: 'file',
						formData: {
							group: 'avatar',
							system: system,
						},
						success: (res) => {
							_this.loading = false
							let result = JSON.parse(res.data)
							if (result.success == true) {
								_this.formData[name] = result.data.url
								_this.fileList[0] = {
									url: result.data.url,
									success: 'success',
								}
								resolve(result.data)
							} else {
								uni.showToast({
									title: result.msg,
									icon: 'none'
								})
							}

						},
					});
				})
			},

		}
	}
</script>
<style lang="scss" scoped>
	page {
		height: 100%;
		width: 100%;
	}

	.app {
		height: 100%;
	}

	.main {
		margin: 4rem .5rem;

		.form-box {
			position: relative;
			z-index: 2;
			height: 100%;

			.form {
				position: relative;
				z-index: 2;
				padding: 1rem 1rem 1rem;

				::v-deep .uv-form-item {
					background-color: #fff;
					padding: .3125rem 1.25rem;
					border-radius: 10rem;
					margin-bottom: 1.5rem;
					border-width: 0;
				}

				.uv-border-bottom::after {
					border-width: 0;
				}

				.uv-form-item--left__content__label {
					color: #060518;
				}

				.form-item {
					margin: .75rem 0;
					border-radius: 1rem;
					justify-content: center;
					// margin-bottom: 1.25rem;

					.avatar {
						width: 6rem;
						height: 6rem;
						margin: .75rem auto;
						border-radius: 10rem;
						display: block;
						border: .025rem solid #86cdff;
					}

					::v-deep .uv-form-item {
						padding: 0.3125rem .75rem;
					}
				}

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

					.uv-form-item {
						background: none;
						padding: 0rem;
						margin-bottom: 0rem;
						border: none;


						::v-deep .uv-form-item__body {
							padding: 0;
							width: 100%;

							* {
								width: 100%;
								flex-direction: column;
							}

							.upload {
								.img {
									width: 6.5rem;
									height: 6.5rem;
									border-radius: .5rem;
								}

								.text {
									width: auto;
									margin: .5rem 0;
									text-align: center;
									font-size: .625rem;
									color: var(--text-color);
								}
							}
						}


					}

					.uv-form-item:first-child {
						margin-right: 1rem;
					}

				}

				.form-submit {
					margin: 1.25rem 2rem 1.25rem;
				}

			}
		}
	}
</style>