mdapp/pages/user/setting/setting.vue

<template>
	<view class="page">
		<!-- 菜单 -->
		<view class="menu-list-wrap box-shadow">
			<!-- #ifdef MP-WEIXIN -->
			<view class="menu-item" @click="bindWeixin">
				<view class="menu-title-wrap">
					<view class="title">
						<u-icon class="u-m-r-10" name="weixin-fill" color="#07c160" size="40"></u-icon>
						绑定微信
					</view>
				</view>
				<u-icon name="arrow-right" size="24" :label="vk.vuex.get('$user.userInfo.wx_openid') ? '已绑定' : ''" labelPos="left"></u-icon>
			</view>
			<!-- #endif -->
			<view class="menu-item" @click="vk.navigateTo('/pages/user/setting/profile')">
				<view class="menu-title-wrap">
					<view class="title">
						<u-icon class="u-m-r-10" name="/static/icon/notebook.png" size="36"></u-icon>
						补全个人信息
					</view>
				</view>
				<u-icon name="arrow-right" size="24" :label="vk.vuex.get('$user.agentInfo.verify_status') == 0 ? '审核中' : '已认证'" labelPos="left"></u-icon>
			</view>
			<view class="menu-item" @click="vk.navigateTo('/pages/user/setting/bank')">
				<view class="menu-title-wrap">
					<view class="title">
						<u-icon class="u-m-r-10" name="/static/icon/bank-card.png" size="36"></u-icon>
						补全银行卡信息
					</view>
				</view>
				<u-icon name="arrow-right" size="24" :label="vk.vuex.get('$user.agentInfo.verify_status') == 0 ? '审核中' : '已认证'" labelPos="left"></u-icon>
			</view>
			<!-- <view class="menu-item">
				<view class="menu-title-wrap">
					<view class="title">
						<u-icon class="u-m-r-10" name="/static/icon/bell.png" size="36"></u-icon>
						接收推送
					</view>
				</view>
				<button class="u-reset-button" open-type="openSetting" size="mini" style="margin: 0;padding: 0;color: #424242;">
					<u-icon name="arrow-right" size="24"></u-icon>
				</button>
			</view> -->
			<!-- #ifdef MP-WEIXIN -->
			<view class="menu-item" @click="checkUpdate()">
				<view class="menu-title-wrap">
					<view class="title">
						<u-icon class="u-m-r-10" name="/static/icon/balloon.png" size="36"></u-icon>
						检查最新版本
					</view>
				</view>
				<u-icon name="arrow-right" size="24"></u-icon>
			</view>
			<!-- #endif -->
			
		</view>
		<view class="menu-list-wrap box-shadow">
			<view class="menu-item" @click="vk.navigateTo('/pages/user/help/help')">
				<view class="menu-title-wrap">
					<view class="title">
						<u-icon class="u-m-r-10 u-m-t-6" name="/static/icon/handshake.png" size="36"></u-icon>
						帮助中心
					</view>
				</view>
				<u-icon name="arrow-right" size="24"></u-icon>
			</view>
			<view class="menu-item" @click="vk.navigateTo('/pages/user/help/suggest')">
				<view class="menu-title-wrap">
					<view class="title">
						<u-icon class="u-m-r-10" name="/static/icon/mail-box.png" size="36"></u-icon>
						意见建议
					</view>
				</view>
				<u-icon name="arrow-right" size="24"></u-icon>
			</view>
			<view class="menu-item" @click="vk.navigateTo('/pages/agreement/agreement?type=user_agreement')">
				<view class="menu-title-wrap">
					<view class="title">
						<u-icon class="u-m-r-10" name="/static/icon/agreement.png" size="36"></u-icon>
						用户协议
					</view>
				</view>
				<u-icon name="arrow-right" size="24"></u-icon>
			</view>
			<view class="menu-item" @click="vk.navigateTo('/pages/agreement/agreement?type=privacy_agreement')">
				<view class="menu-title-wrap">
					<view class="title">
						<u-icon class="u-m-r-10" name="/static/icon/agreement.png" size="36"></u-icon>
						隐私协议
					</view>
				</view>
				<u-icon name="arrow-right" size="24"></u-icon>
			</view>
			<view class="menu-item" @click="logoffModalShow = true">
				<view class="menu-title-wrap">
					<view class="title">
						<u-icon class="u-m-r-10" name="/static/icon/lock.png" size="36"></u-icon>
						注销账号
					</view>
				</view>
				<u-icon name="arrow-right" size="24"></u-icon>
			</view>
		</view>
		<u-button type="primary" v-show="vk.checkToken()" @click="logout">注销登录</u-button>

		<!-- 授权微信资料弹窗 -->
		<!-- 平台佣金政策弹窗 -->
		<u-popup v-model="editWeixinUserInfoPopupShow" mode="center" width="80%" height="440rpx" border-radius="20">
			<view class="bwin-popup">
				<view class="popup-header">同步微信资料</view>
				<view class="popup-body">
					<view class="choose-avatar u-m-b-20">
						<u-avatar :src="form.avatarUrl" size="128" showLevel levelIcon="edit-pen" levelBgColor="#2979ff"></u-avatar>
						<button
							class="u-reset-button"
							style="width: 128rpx;height: 128rpx;position: absolute;left: 0;top: 0;"
							open-type="chooseAvatar"
							@chooseavatar="bindWeixinAvatar"
						></button>
					</view>
					<u-input border placeholder="点击可使用微信昵称填充" v-model="form.nickname" style="width: 100%;" type="nickname"></u-input>
				</view>
				<view class="popup-footer" style="position: absolute;">
					<u-button size="medium" @click="editWeixinUserInfoPopupShow = false">取消</u-button>
					<u-button size="medium" type="primary" @click="updateUserInfoByWeixin()">保存</u-button>
				</view>
			</view>
		</u-popup>

		<!-- 注销账号modal -->
		<u-modal
			v-model="logoffModalShow"
			title="重要提示"
			content="提交后，您的账号将被彻底删除，包括但不限于您的推荐记录、佣金结算记录等均将被同步删除。请确认是否仍要注销您的账号？"
			showCancelButton
			@cancel="logoffModalShow = false"
			@confirm="vk.toast('已提交注销申请')"
		></u-modal>
	</view>
</template>
<script>
var that;
var vk;
export default {
	data() {
		return {
			logoffModalShow: false, // 注销提示
			editWeixinUserInfoPopupShow: false, // 补全微信资料
			form: {
				avatarUrl: null,
				nickname: ''
			}
		};
	},
	onLoad() {
		that = this;
		vk = that.vk;

		that.form.avatarUrl = vk.vuex.get('$user.userInfo.avatar');
	},
	onReady() {},
	methods: {
		// 绑定微信号
		bindWeixin() {
			if (vk.vuex.get('$user.userInfo.wx_openid')) {
				let currentTime = Date.parse(new Date()) / 1000; // 秒级
				if (currentTime - vk.vuex.get('$user.history.lastEditUserInfoTime') <= 86400) {
					vk.alert('已绑定微信，用户资料在每7天内仅允许修改一次', '提示', '确定');
				} else {
					that.editWeixinUserInfoPopupShow = true;
				}
				return;
			}
			vk.userCenter.bindWeixin({
				success: data => {
					// 成功后的逻辑
					vk.alert('绑定成功，请继续设置头像、昵称', '提示', '确定', function() {
						that.editWeixinUserInfoPopupShow = true;
					});
					console.log(data);
				}
			});
		},
		// 获取用户微信头像
		bindWeixinAvatar(e) {
			let { avatarUrl } = e.detail;
			that.form.avatarUrl = avatarUrl; // 临时渲染
		},
		// 通过微信资料修改个人资料
		updateUserInfoByWeixin() {
			// 上传头像
			vk.callFunctionUtil.uploadFile({
				title: '上传头像中...',
				filePath: that.form.avatarUrl,
				suffix: 'png', // 不传suffix会自动获取，但H5环境下获取不到后缀，但可以通过file.name 获取
				provider: 'unicloud',
				success(res) {
					// 上传成功
					vk.userCenter.updateUser({
						data: {
							avatar: res.url,
							nickname: that.form.nickname
						},
						success: data => {
							// 成功后的逻辑
							that.editWeixinUserInfoPopupShow = false;
							// 写入本次修改时间
							let currentTime = Date.parse(new Date()) / 1000; // 秒级
							vk.vuex.set('$user.history.lastEditUserInfoTime', currentTime);
							vk.alert('保存成功');
						}
					});
				}
			});
		},
		// 检测版本更新
		checkUpdate() {
			const updateManager = uni.getUpdateManager();

			updateManager.onCheckForUpdate(function(res) {
				// 请求完新版本信息的回调
				console.log(res.hasUpdate);
				if (!res.hasUpdate) {
					vk.toast('当前已是最新版本');
				}
			});

			updateManager.onUpdateReady(function(res) {
				uni.showModal({
					title: '更新提示',
					content: '新版本已经准备好，是否重启应用？',
					success(res) {
						if (res.confirm) {
							// 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
							updateManager.applyUpdate();
						}
					}
				});
			});

			updateManager.onUpdateFailed(function(res) {
				// 新的版本下载失败
			});
		},
		// 退出登录
		logout() {
			vk.userCenter.logout({
				success: function(data) {
					vk.vuex.set('$user.agentInfo', {});
					vk.vuex.set('$user.dataInfo', {
						recommendNum: 0,
						visitedNum: 0,
						buyNum: 0,
						totalCommission: 0,
						unreadMsgNum: 0
					});
					vk.toast('注销登录成功', 'success', 1500, true, function() {
						vk.navigateToHome();
					});
				}
			});
		}
	}
};
</script>
<style lang="scss">
.page {
	min-height: calc(100vh - 45px);
}
.popup-body {
	display: flex;
	flex-direction: column;
	align-items: center;

	.choose-avatar {
		position: relative;
	}
}
// 菜单列表
.menu-list-wrap {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	background-color: #fff;
	padding: 32rpx;
	width: 100%;
	margin-bottom: 20rpx;
	border-radius: 10rpx;
	position: relative;

	.menu-item {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 0;

		.menu-title-wrap {
			display: flex;
			align-items: center;

			.title {
				display: flex;
				align-items: center;
				font-size: $u-p;
			}
		}
	}
}
</style>