remember-word/pages/mine/setting/setting.vue

<template>
	<view class="main">
		<navBar navTitle="" :hasLogo="true" :hasRight="true" :backToUrl="'/pages/mine/index'" :isSwitchTab="true"
			@clickRight="clickRight" :color="'#000000'" :backBackGroundColor="'rgb(105, 154, 112)'" />
		<view class="avtor">
			<image :src="userInfo.avatar + '?x-oss-process=image/resize,w_158,h_158'"></image>
			<view>
				<u-button :text="$t('avatar.def')" shape="circle" class="size" style="background-color: #000000;"
					@click="backDafult"></u-button>
				<u-upload :fileList="fileList" name="1" accept="image" @afterRead="upLoaded">
					<u-button :text="$t('avatar.update')" shape="circle" class="size"></u-button>
				</u-upload>
			</view>
		</view>
		<view class="info">
			<view class="item">
				<view class="title">{{ $t('userInfo.name') }}</view>
				<view class="gray" style="display:flex;justify-content: center;align-items: center;">
					<view>{{ userInfo.nickName }}</view>
					<text class="rz" @click="showName = true">{{ $t('userInfo.updateName') }}</text>
				</view>
			</view>
			<u-divider></u-divider>
			<view class="item">
				<view class="title">{{ $t('userInfo.createTime') }}</view>
				<view class="gray">{{ userInfo.createdAt }}</view>
			</view>
			<u-divider></u-divider>
			<view class="item">
				<view class="title">{{ $t('userInfo.idNum') }}</view>
				<view class="gray">{{ userInfo.ID }}</view>
			</view>
		</view>
		<view class="info">
			<view class="item">
				<view class="title">{{ $t('userInfo.phone') }}</view>
				<view class="gray" style="display: flex;">
					<u--text mode="phone" :text="userInfo.telNum" format="encrypt"></u--text>
					<view class="rz" style="background-color:#676767;" @click="goChangeNum">{{ $t('phone.update') }}</view>
				</view>
			</view>
		</view>
		<view style="width: 100%; text-align: right;color: #656565;margin-top: 20upx;font-size:20rpx">
			*{{ $t('phone.verInfo') }}</view>
		<view v-if="!userInfo.realName" class="info" style="margin-top: 20upx;">
			<view class="item">
				<view class="title">{{ $t('user.realName') }}</view>
				<view class="gray"><text class="rz" @click="goRealName">{{ $t('user.verfy') }}</text></view>
			</view>
		</view>
		<view v-if="userInfo.realName" class="info" style="margin-top: 20upx;">
			<view class="item">
				<view class="title" style="display: flex;
			align-items: center;
			justify-content: center;">
					{{ $t('user.username') }}
					<view
						style="background-color:#699A70 ;border-radius: 40rpx;font-size: 20rpx;padding: 0 15rpx 0 15rpx;color:#FFFFFF;margin-left:10rpx">
						{{ $t('user.verDone') }}
					</view>
				</view>
				<view class="gray">
					{{ userInfo.realName }}
				</view>
			</view>
			<u-divider></u-divider>
			<view class="item">
				<view class="title">{{ $t('user.idNum') }}</view>
				<view class="gray">{{ userInfo.idNum }}</view>
			</view>
		</view>
		<view class="btn">
			<u-button :text="$t('account.logout')" shape="circle" class="size"
				style=" background-color:#ED6666;color: #fff;border: 0;margin-right: 20upx;"
				@click="showDestory = true"></u-button>
			<u-button @click="showLogout = true" :text="$t('account.signOut')" shape="circle" class="size"
				style="background-color: #3E3E3E;color: #fff;border: 0;"></u-button>
		</view>
		<u-popup :show="showName" mode="center" @close="showName = false" bgColor="transparent">
			<view class="popupLocale-box">
				<view class="title" style="color:#FFFFFF;font-size:40rpx">{{ $t('set.name') }}</view>
				<view class="item">
					<u--input :placeholder="$t('set.input')" shape="circle" v-model="changeName"
						style="background-color: rgba(255, 255, 255, 0.5);border: 0;margin-left: 50upx;"
						class="setName"></u--input>
				</view>
			</view>
			<view style="display: flex;">
				<u-button :text="$t('navbar.back')" color="#EDC466" @click="showName = false"
					style="width: 260rpx;height: 56rpx;border-radius: 40rpx;margin-top: 30rpx;"></u-button>
				<u-button :text="$t('comfrim')" color="#699A70" @click="updateName"
					style="width: 260rpx;height: 56rpx;border-radius: 40rpx;margin-top: 30rpx;"></u-button>
			</view>
		</u-popup>
		<feedback :showQa="showQa" @closeFeed='closeFeed' />
		<u-popup :show="showDestory" mode="center" @close="showDestory = false" bgColor="transparent">
			<view class="popupLocale-box">
				<view class="title" style="margin-bottom: 0;">
					<image style="width: 76upx;height: 76upx;" src="../../../static/image/mine/warning.png"></image>
				</view>
				<view class="item" style="font-size: 32upx;">{{ $t('logout.info') }}</view>
			</view>
			<view style="display: flex;">
				<u-button :text="$t('navbar.back')" color="#EDC466" @click="showDestory = false"
					style="width: 260rpx;height: 56rpx;border-radius: 40rpx;margin-top: 30rpx;"></u-button>
				<u-button :text="$t('comfrim')" color="#ED6666" @click="goConfirm"
					style="width: 260rpx;height: 56rpx;border-radius: 40rpx;margin-top: 30rpx;"></u-button>
			</view>
		</u-popup>
		<u-popup :show="confirmDestory" mode="center" @close="confirmDestory = false" bgColor="transparent">
			<view class="popupLocale-box">
				<view class="title" style="margin-bottom: 0;">
					<image style="width: 76upx;height: 76upx;" src="../../../static/image/mine/confim-warning.png"></image>
				</view>
				<view class="item">
					<view class="sec">
						<view>{{ $t('sendCode.send') }}{{ userInfo.telNum }}</view>
						<view class="resend" @tap="getCode">{{ tips }}</view>
					</view>
					<view class="code-box">
						<u-code-input v-model="Code" :focus="focus"></u-code-input>
					</view>
				</view>
				<view class="action-box">
					<view class="confirm-input">
						<view style="margin-bottom: 15upx;color: rgba(255, 255, 255, 0.6);">{{ $t('password.input') }}：
						</view>
						<u-code-input v-model="actCode"></u-code-input>
					</view>
				</view>
				<view class="tips">*注意：此操作将彻底删除该账号所有信息</view>

			</view>
			<view style="display: flex;">
				<u-button :text="$t('navbar.back')" color="#ECC366" @click="confirmDestory = false"
					style="width: 260rpx;height: 56rpx;border-radius: 40rpx;margin-top: 30rpx;"></u-button>
				<u-button :text="$t('logout.btn')" color="#ED6666" @click="destoryAccount"
					style="width: 260rpx;height: 56rpx;border-radius: 40rpx;margin-top: 30rpx;"></u-button>
			</view>
		</u-popup>
		<u-popup :show="showLogout" mode="center" @close="showLogout = false" bgColor="transparent">
			<view class="popupLocale-box">
				<view class="title" style="margin-bottom: 0;">
					<image style="width: 80upx;height: 80upx;" src="../../../static/image/mine/warning.png"></image>
				</view>
				<view class="item" style="font-size: 30upx;">{{ $t('signout.info') }}</view>
			</view>
			<view style="display: flex;">
				<u-button :text="$t('navbar.back')" color="#ECC366" @click="showLogout = false"
					style="width: 260rpx;height: 56rpx;border-radius: 40rpx;margin-top: 30rpx;"></u-button>
				<u-button :text="$t('comfrim')" color="#ED6666" @click="logout"
					style="width: 260rpx;height: 56rpx;border-radius: 40rpx;margin-top: 30rpx;"></u-button>
			</view>
		</u-popup>
		<u-code :seconds="seconds" @start="start" ref="uCode" @change="codeChange"></u-code>
	</view>
</template>

<script>
import feedback from '../feedback/feedback.vue';
export default {
	components: {
		feedback
	},
	data() {
		return {
			showName: false,
			showQa: false,
			showDestory: false,
			showLogout: false,
			confirmDestory: false,
			fileList: [],
			tips: '',
			seconds: 60,
			wathTime: 10,
			changeName: '',
			focus: false,
			Code: '',
			actCode: '',
			userInfo: {},
			// content: ''
		};
	},
	onShow() {
		this.getInfo()
	},
	methods: {
		// 获取信息
		async getInfo() {
			let res = await this.$api.mine.getInfo();
			if (res.status === 0) {
				this.userInfo = res.data;
			} else {
				this.$common.msgToast(res.msg, null, 'error');
			}
		},
		// 获取头像
		uploadFilePromise(url) {
			return new Promise((resolve, reject) => {
				const Authorization = uni.getStorageSync('token');
				const userId = uni.getStorageSync('mall-user-info').ID
				let a = uni.uploadFile({
					url: this.$baseUrl + '/mall/upload/file',
					filePath: url,
					name: 'file',
					formData: {
						type: 'image',
						source: 'user',
						mask: userId
					},
					header: {
						Authorization
					},
					success: res => {
						resolve(res.data);

						this.updateInfo({
							avatar: JSON.parse(res.data).data.ori_url
						})
					}
				});
			});
		},
		// 上传头像
		async upLoaded(file, lists, name) {
			this.uploadFilePromise(file.file.url);
		},
		// 发送验证码
		start() {
			uni.$u.toast(this.$t('sendCode'));
		},
		// 改变提示
		codeChange(text) {
			this.tips = text;
		},
		async destoryAccount() {
			if (!this.Code || !this.actCode) {
				this.$common.msgToast(this.$t('code.actPass'), null, 'error');
				return;
			}
			const data = {
				password: this.actCode,
				code: this.Code
			}
			const res = await this.$api.mine.logout(data)
			if (res.status === 0) {
				console.log(res)
				this.confirmDestory = false;
				this.logout()
			} else {
				uni.$u.toast(res.msg);
			}
		},
		// 获取验证码
		async getCode() {
			if (this.$refs.uCode.canGetCode) {
				uni.showLoading({
					title: this.$t('sendCode.loading')
				});

				let res = await this.$api.mine.mineCode({
					TelNum: this.userInfo.telNum
				});
				if (res.status === 0) {
					uni.hideLoading();
					// 这里此提示会被this.start()方法中的提示覆盖
					this.focus = true;
					this.$refs.uCode.start();
					// 通知验证码组件内部开始倒计时
				} else {
					uni.hideLoading();
					uni.$u.toast(res.msg);
				}
			} else {
				uni.$u.toast(this.$t('sendCode.toast'));
			}
		},
		// 退出登录
		logout() {
			// uni.removeStorageSync("mall-user-info");
			// uni.removeStorageSync("token");
			uni.clearStorageSync();
			uni.switchTab({
				url: '/pages/index/index'
			});
		},
		// 确认销毁
		goConfirm() {
			this.showDestory = false;
			this.confirmDestory = true;
		},
		// 修改电话
		goChangeNum() {
			if (!this.userInfo.realName) {
				return
			}
			uni.navigateTo({
				url: '/pages/mine/changePhone/changePhone?telNum=' + this.userInfo.telNum
			});
		},
		// 实名认证
		goRealName() {
			uni.navigateTo({
				url: '/pages/mine/realName/realName'
			});
		},
		// 更新昵称
		async updateName() {
			await this.updateInfo({
				nickName: this.changeName
			})
			this.showName = false
		},
		// 更新信息
		async updateInfo(data) {
			let res = await this.$api.mine.update(data);
			if (res.status === 0) {
				uni.$u.toast(this.$t('update.succes'));
				this.getInfo()
				uni.setStorageSync('mall-user-info', this.userInfo);

			} else {
				uni.$u.toast(res.msg);
			}
		},
		// ，默认头像
		backDafult() {
			this.updateInfo({
				avatar: 'https://dci-file.bj.bcebos.com/shop-main/prod/image/0/user/6ae57adf-7d05-4f84-9053-d39967870327.jpg'
			})

		},
		// 反馈
		clickRight() {
			this.showQa = true;
		},
		closeFeed(isShow) {
			this.showQa = isShow
		}
	}
};
</script>

<style lang="scss">
page {
	background: url('@/static/image/home/new_bg.png') no-repeat;
	background-size: 100% 100%;
	background-attachment: fixed;
	height: 100vh;
	box-sizing: border-box;
}

.title {
	color: #434343;
}

.sec {
	color: #ffffff;
	position: absolute;
	display: flex;
	top: 120upx;

	.resend {
		margin-left: 100upx;
		color: #fcb462;
	}
}

.code-box {
	margin-top: 70upx;

}

/deep/ .u-code-input__item {
	border: 0;
	border-radius: 20upx;
	background-color: rgba(255, 255, 255, 0.65);
}

.main {
	display: grid;

	justify-content: center;

	.avtor {
		margin-top: 40upx;
		display: flex;
		width: 100%;
		justify-content: space-around;

		image {
			width: 160upx;
			height: 160upx;
			border-radius: 40upx;
		}

		.size {
			color: #fff;
			border: 0;
			background-color: #699A70;
			margin-bottom: 20upx;
			width: 348upx;
			height: 64upx;
		}
	}

	.action-box {

		margin-top: 50upx;
		position: relative;
		height: 250upx;
		background-color: rgba(255, 255, 255, 0.3);

		.confirm-input {
			position: absolute;
			top: 30%;
			left: 4%;
		}
	}

	.info {
		width: 600upx;
		background: #FFFFFF;
		margin-top: 65upx;
		padding: 34rpx 40upx;

		.item {
			font-size: 30upx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.rz {
				box-sizing: border-box;
				margin-left: 10upx;
				font-size: 20rpx;
				background-color: #699A70;
				color: #FFFFFF;
				border-radius: 40upx;
				padding: 6rpx 34rpx;
				text-align: center;
			}
		}

		.gray {
			color: #878787;
		}
	}

	.btn {
		margin-top: 100upx;
		width: 100%;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.popupLocale-box {
		background: rgba(0, 0, 0, 0.8);
		width: 582rpx;
		overflow: hidden;
		padding: 30rpx 42rpx;

		.title {
			font-size: 40rpx;
			text-align: center;
			margin-bottom: 40rpx;
		}

		.u-button {
			width: 260rpx;
			height: 56rpx;
			border-radius: 40rpx;
		}

		.item {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 34rpx 0 38rpx 0;
		}

		.tips {
			color: #DC0023;
			font-size: 20rpx;
			text-align: center;
			margin-top: 80rpx;
		}
	}
}

.setName {
	/deep/ .uni-input-placeholder {
		padding: 0 20rpx;
	}

	/deep/ .uni-input-input {
		color: #ffffff;
		padding: 0 20rpx;
	}
}</style>