front-end/mallApp/src/pages/user/edit.vue

<!--
  商城「我的」资料编辑：改昵称、看/改生日、退出登录。
  改昵称成功后必须写入 vuex loginInfo，否则返回「我的」仍显示旧名字。
-->
<template>
	<div class="app-content">
		<form @submit="formSubmit">
			<div class="module-com input-line-wrap">
				<tui-list-cell class="line-cell" :hover="false">
					<div class="tui-title">昵称</div>
					<input v-model="form.name" placeholder-class="phcolor" class="tui-input" name="name" placeholder="请填写" type="nickname" />
				</tui-list-cell>
				<tui-list-cell class="line-cell" :hover="false">
					<div class="tui-title">生日</div>

					<div class="birthday-display" v-if="Number(userInfo.birthdayMonth)>0">
					{{ userInfo.lunar==1?"农历 ":"" }}{{ userInfo.birthdayMonth }}月{{ userInfo.birthdayDate }}日
					<text @click="goToBirthday()" style="color:#007aff;margin-left:20upx;">修改</text>
					</div>
					<div class="birthday-display" v-else>
						<text @click="goToBirthday()" style="color:#007aff;">去设置</text>
					</div>

				</tui-list-cell>
				<div class="btn-wrap">
					<button class="button-com red big" formType="submit">确认</button>
				</div>
				<div class="btn-wrap">
					<button class="button-com default big" @click="logout">退出登录</button>
				</div>
			</div>
		</form>
	</div>
</template>
<script>
import TuiListCell from '@/components/plugin/list-cell'
const form = require('@/utils/formValidation.js')
import { currentInfo,updateInfo,clearLogin } from "@/api/user";
export default {
	name: 'edit',
	components: {
		TuiListCell
	},
	data() {
		return {
			form: {
				name: ''
			},
			userInfo:{}
		}
	},
	onLoad() {
      //返回上一页时刷新
      let pages = getCurrentPages();
      let prevPage = pages[ pages.length - 2 ];
      prevPage.$vm.pageAction = {refresh:1}
	},
	onShow(){
		this.getLoginInfo();
	},
	methods: {
		logout(){
			let that = this
			that.$util.confirmModal({content:'确认退出？'},() => {
				// #ifdef APP-PLUS
				uni.clearStorage()
				that.$store.commit("setLoginInfo", {})
				plus.runtime.restart()
				// #endif
				// #ifdef MP-WEIXIN
				clearLogin().then(res=>{
					if(res.code == 1){
						uni.clearStorage()
						that.$store.commit("setLoginInfo", {})
						uni.reLaunch({url:'/pages/home/recent'})
					}
				})
				// #endif
			})
		},
		init(){
			//this.getLoginInfo();
		},
		/**
		 * 拉取当前登录用户信息：回填生日展示，并把已有昵称写入 form.name 供输入框渲染
		 */
		getLoginInfo(){
			currentInfo().then(res=>{
				if(res.code == 1){
					const info = res.data && res.data.info ? res.data.info : {}
					this.userInfo = info
					// 昵称绑定在 form.name，未赋值时输入框一直空白
					this.form.name = info.name != null ? String(info.name) : ''
				}
			})
		},
		goToBirthday() {
			this.pageTo({ url: '/pages/user/birthday'})
		},
		/**
		 * 提交昵称：校验后调 /user/update，并把新名字写入 loginInfo（含本地缓存）。
		 * 「我的」页读的是 loginInfo.name，只改接口不写 vuex 会看起来没更新。
		 */
		formSubmit(e) {
			let rules = [
				{
					name: 'name',
					rule: ['required'],
					msg: ['请输入昵称']
				}
			]
			let formData = (e && e.detail && e.detail.value) ? e.detail.value : this.form
			let checkRes = form.validation(formData, rules)
			if (checkRes) {
				this.$msg(checkRes)
				return
			}
			const name = String(formData.name != null ? formData.name : this.form.name).trim()
			updateInfo({ name }).then(res => {
				if (res.code == 1) {
					const loginInfo = Object.assign({}, this.$store.getters.getLoginInfo || {}, { name })
					this.$store.commit('setLoginInfo', loginInfo)
					this.$msg('已修改')
					setTimeout(() => {
						uni.navigateBack({})
					}, 1000)
				}
			})
		}
	}
}
</script>
<style lang="scss" scoped>
	// 公共
	.line-cell {
		.tui-title {
			width: 210upx;
			color: $fontColor2;
			line-height: 80upx;
		}
		.tui-input {
			width: calc(100% - 210upx);
			font-size: 28upx;
			min-height: 80upx;
			padding: 20upx;
		}
		.tui-placeholder {
			color: #ccc;
		}
		.phcolor {
			color: #ccc;
		}
		.birthday-display {
			min-height: 80upx;
			padding: 20upx;
			display: flex;
			align-items: center;
			font-size: 28upx;
		}
	}
	.btn-wrap {
		width: 90%;
		margin: 60upx auto;
		.button-com {
			width: 100%;
			margin: 0 auto;
			min-height: 100upx;
			padding: 30upx;
			font-size: 32upx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
	.code-wrap {
		.tui-input {
			width: calc(100% - 410upx);
			font-size: 28upx;
		}
		.tui-code {
			width: 200upx;
			text-align: center;
			border-left: 1upx solid $borderColor;
			color: $mainColor;
		}
	}
</style>