dati/pages/my/setting/index.vue

<template>
	<view>
		<!--#ifdef APP-PLUS-->
		<view class="lz-status_bar">
			<view class="lz-top_view"></view>
		</view>
		<!--#endif-->
		<!-- #ifndef MP-WEIXIN -->
		<view class="kaoshi-head">
			<view class="kaoshi-head-top">
				<view class="kaoshi-head-left" @tap="$navigateBack">
					<view class="iconfont icon-zuojiantou"></view>
				</view>
				<view class="kaoshi-head-m">个人设置</view>
			</view>
		</view>
		<!--#endif-->
		<!-- #ifndef MP-WEIXIN -->
		<uni-list>
			<view class="setting-tx">
				<uni-list-item title="头像" :showArrow="false"></uni-list-item>
				<view><img :src="userinfo.user_id  ? user_info.avatar  : static_media.img01" @tap="getFaceimg" /></view>
			</view>
			<view class="setting-nc">
				<uni-list-item title="昵称" show-badge="true" :badge-text="user_info.nickname" @tap="show_modal = true">
				</uni-list-item>
			</view>
			<view @tap="show_changepwd = true" hover-class="none">
				<uni-list-item title="修改密码"></uni-list-item>
			</view>
		</uni-list>
		<view class="tuichu" @tap="logout">退出登录</view>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<view class="seting_touxiang">
			<view class="t01">设置头像</view>
			<view class="t02">
				<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
					<image class="avatar" :src="avatar? avatar:'../../../static/img/txk.png'"></image>
				</button>
			</view>
		</view>
		<view class="seting_nc">
			<view class="n01">设置昵称</view>
			<view class="n02"><input type="nickname" v-model="nickname" @blur="changeName" placeholder="暂未设置"></view>
		</view>
		<view class="seting_button">
			<button :loading="isSubmit" type="primary" class="primary" form-type="submit" @tap="submit">提交修改</button>
		</view>
		<!-- #endif -->
		<view class="lz-modal" :class="{ 'lz-modal-show': show_modal }">
			<view class="lz-modal-dialog">
				<view class="lz-list">
					<view class="lz-list-header">
						<view>修改昵称</view>
						<view class="iconfont icon-cuo1" @tap="show_modal = false"></view>
					</view>
					<view class="lz-list-body">
						<view class="lz-list-item lz-list-item-middle">
							<view class="lz-list-line">
								<view class="lz-list-content lz-text__align--l">
									<input type="text" v-model="nickname" placeholder="请输入您的昵称" />
								</view>
							</view>
						</view>
						<button type="primary" class="primary" @tap="editUserInfo('nickname')">提交</button>
					</view>
				</view>
				<view class="lz-margin--b-md"></view>
			</view>
		</view>
		<view class="lz-modal" :class="{ 'lz-modal-show': show_changepwd }">
			<view class="lz-modal-dialog">
				<view class="lz-list">
					<view class="lz-list-header">
						<view>修改密码</view>
						<view class="iconfont icon-cuo1" @tap="show_changepwd = false"></view>
					</view>
					<view class="lz-list-body">
						<view class="lz-list-item lz-list-item-middle">
							<view class="lz-list-line">
								<view class="lz-list-content lz-text__align--l">
									<input type="text" password="true" v-model="password" placeholder="请输入您的密码，至少六位" />
								</view>
							</view>
						</view>
						<button type="primary" class="primary" @tap="changePwd('nickname')">提交</button>
					</view>
				</view>
				<view class="lz-margin--b-md"></view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import uniList from '@/components/uni-list/uni-list.vue';
	import uniListItem from '@/components/uni-list-item/uni-list-item.vue';
	export default {
		data() {
			return {
				user_info: [],
				show_modal: false,
				show_changepwd: false,
				nickname: '',
				avatar: '',
				password: '',

			};
		},
		onLoad() {
			this.get_user_info();
		},
		onShow() {},
		computed: {
			...mapState(['subject', 'userinfo']),
			static_media() {
				return {
					img01: this.$myConfig.localMedia + '/static/img/logo.png',
				}
			}
		},
		components: {
			uniList,
			uniListItem
		},
		methods: {
			async submit() {
				let str = this.nickname.trim();
				if (str.length == 0) {
					uni.showToast({
						title: '请输入合法的昵称',
						icon: 'none'
					})
					return
				}
				// if ((/[^/a-zA-Z0-9\u4E00-\u9FA5]/g).test(str)) {
				// 	uni.showToast({
				// 		title: '请输入中英文和数字',
				// 		icon: 'none'
				// 	})
				// 	return
				// }
				if (this.isSubmit) return
				this.isSubmit = true
				let res = await this.$myHttp.post({
					url: this.$myHttp.urlMap.userProfile,
					data: {
						nickname: this.nickname,
						avatar: this.avatar
					},
					needLogin: true
				})
				if (res.code == 1) {
					this.isSubmit = false
					uni.navigateBack()
				} else {
					this.isSubmit = false
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
			},
			changeName(e) {
				this.nickname = e.detail.value;
				// console.log('this.nick_name.length',this.nickname.length);
			},
			onChooseAvatar(e) {
				let that = this
				this.avatar = e.detail.avatarUrl
				uni.uploadFile({
					url: that.$myConfig.api + 'api/common/upload?token=' + that.userinfo.token, //仅为示例，非真实的接口地址
					filePath: that.avatar,
					header: {
						token: that.userinfo.token
					},
					name: 'file',
					formData: {
						'user': 'test'
					},
					success: (uploadFileRes) => {
						if (uploadFileRes) {
							let res = JSON.parse(uploadFileRes.data);
							that.avatar = res.data.fullurl
							// that.editUserInfo('avatar');
						}
					}
				});
			},
			async get_user_info() {
				let res = await this.$myHttp.post({
					url: this.$myHttp.urlMap.userInfo,
					needLogin: true
				})
				if (res.code === 1) {
					this.user_info = res.data
					this.nickname = res.data.nickname
					this.avatar = res.data.avatar
				}
				//
			},
			async logout() {
				const valid = await this.$myUserLogin.logout();
				if (valid) {
					uni.navigateTo({
						url: '/pages/auth/login/index'
					});
				} else {
					uni.showToast({
						icon: 'none',
						title: '退出登录失败'
					});
				}
			},
			getFaceimg() {
				let that = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(chooseImageRes) {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: that.$myConfig.api + 'api/common/upload?token=' + that.userinfo
								.token, //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							header: {
								token: that.userinfo.token
							},
							name: 'file',
							formData: {
								'user': 'test'
							},
							success: (uploadFileRes) => {
								if (uploadFileRes) {
									let res = JSON.parse(uploadFileRes.data);
									that.avatar = res.data.url
									that.editUserInfo('avatar');
								}
							}
						});
					}
				});
			},
			//
			async changePwd() {
				if (this.password != '' && this.password != undefined && this.password.length >= 6) {

				} else {
					this.$myUtils.$prompt.showToast({
						icon: 'none',
						title: '密码不符合要求'
					});
					return
				}
				let res = await this.$myHttp.post({
					url: this.$myHttp.urlMap.resetpwd,
					data: {
						newpassword: this.password
					},
					needLogin: true
				});
				if (res.code == 1) {
					uni.showToast({
						icon: 'success',
						title: '密码修改成功'
					})
					setTimeout(function() {
						uni.reLaunch({
							url: '/pages/auth/login/index?form_type=0'
						});
					}, 1000)

				}
			},
			async bindLogin() {
				/**
				 * 下面简单模拟下服务端的处理
				 * 检测用户账号密码是否在已注册的用户列表中
				 * 实际开发中，使用 uni.request 将账号信息发送至服务端，客户端在回调函数中获取结果信息。
				 */
				const data = {
					account: this.nickname,
					password: this.password
				};
				const valid = await this.$myUserLogin.login(data);
			},
			async editUserInfo(type) {
				let data = {}
				if (type == 'nickname') {
					if (this.nickname != '' && this.nickname != undefined) {
						data['nickname'] = this.nickname
					} else {
						this.$myUtils.$prompt.showToast({
							icon: 'none',
							title: '昵称不能为空'
						});
						return
					}
				} else if (type == 'avatar') {
					data['avatar'] = this.avatar
				}
				let res = await this.$myHttp.post({
					url: this.$myHttp.urlMap.editUserInfo,
					data: data,
					needLogin: true
				});
				if (res.code == 1) {
					if (type == 'nickname') {
						this.user_info.nickname = this.nickname
						this.$store.commit('setUserInfo', {
							userinfo: {
								...this.userinfo,
								nickname: this.nickname
							}
						});
						uni.showToast({
							icon: 'none',
							title: '修改成功'
						});
					} else if (type == 'avatar') {
						this.get_user_info();
						this.$store.commit('setUserInfo', {
							userinfo: {
								...this.userinfo,
								avatar: this.user_info.avatar
							}
						});
						uni.showToast({
							icon: 'success',
							title: '头像上传成功'
						})
					}

				}
				this.show_modal = false
			}
		}
	};
</script>

<style>
	page {
		background: #f6f7f9;
	}

	.kaoshi-head {
		border-bottom: none
	}

	.nc {
		position: relative;
		margin-right: 36px;
		margin-top: 12px;
	}

	.setting-tx {
		position: relative;
	}

	.setting-tx img {
		position: absolute;
		width: 32px;
		height: 32px;
		right: 21px;
		top: 7px;
		border-radius: 50%;
	}

	.lz-list-header {
		justify-content: space-between;
	}

	.tuichu {
		text-align: center;
		font-size: 16px;
		padding: 14px 0;
		color: #000;
		background: #fff;
		border-top: 12px solid #f6f7f9;
	}

	.lz-list-body {
		padding-bottom: 12px;
	}

	.lz-list-item .lz-list-line .lz-list-content {
		flex: 1;
		color: #000;
		font-size: 17px;
		line-height: 1.5;
		text-align: left;
		width: auto;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		padding-top: 7px;
		padding-bottom: 7px;
		margin: 0 18px 12px;
	}

	.lz-list-body::before {
		border-bottom: none;
	}

	.lz-list-body::before {
		border-top: none;
	}

	.lz-modal {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 999;
		opacity: 0;
		outline: 0;
		text-align: center;
		transform: scale(1.185);
		backface-visibility: hidden;
		perspective: 1000px;
		background: rgba(0, 0, 0, .4);
		transition: all .3s ease-in-out 0s;
		pointer-events: none;
	}

	.lz-modal .lz-modal-dialog {
		position: relative;
		display: inline-block;
		vertical-align: middle;
		margin-left: auto;
		margin-right: auto;
		width: 340px;
		max-width: 100%;
		background-color: #fff;
		border-radius: 10px;
		overflow: hidden;
	}

	.lz-modal::before {
		content: "\200B";
		display: inline-block;
		height: 100%;
		vertical-align: middle;
	}

	.lz-list-header {
		display: flex;
		flex-direction: row;
		width: 90%;
		margin: 0 auto;
		padding: 17px;
		align-items: center;
	}


	.lz-list-header .icon-cuo1 {
		font-size: 17px;
		color: #9e9e9e;
	}

	.lz-modal.lz-modal-show {
		opacity: 1;
		transition-duration: .3s;
		transform: scale(1);
		overflow-x: hidden;
		overflow-y: auto;
		pointer-events: auto;
	}

	/*个人设置样式  小程序2.27.1新增*/
	.seting_touxiang {
		width: 90%;
		padding: 0 5%;
		background: #fff;
		display: flex;
		align-items: center;
		border-bottom: #f2f2f2 solid 1px;
		height: 60px;
	}

	.seting_touxiang .t01 {
		flex: 1;
		font-size: 14px;
	}

	.seting_touxiang .t02 button::after {
		border: none;
	}

	.seting_touxiang .t02 button {
		padding-left: 0;
		padding-right: 0;
		line-height: 0;
		border-radius: 100px;
		overflow: hidden;
	}

	.seting_touxiang .t02 button image {
		width: 40px;
		height: 40px;
		display: block;
	}

	.seting_nc {
		width: 90%;
		padding: 0 5%;
		background: #fff;
		display: flex;
		align-items: center;
		height: 60px;
	}

	.seting_nc .n01 {
		flex: 1;
		font-size: 14px;
	}

	.seting_nc .n02 {
		flex: 1;

	}

	.seting_nc .n02 input {
		text-align: right;
		font-size: 14px;
	}



	.seting_button {
		width: 100%;
		margin-top: 18px;
		color: #fff;
	}

	.seting_button button::after {
		border: none;
		color: #fff;
	}

	.seting_button button {
		background: #3c7bfc !important;
		font-size: 16px;
	}
</style>