mdapp/pages/user/setting/setting.vue

<template>
	<view class="page">
		<!-- 菜单 -->
		<view class="menu-list-wrap box-shadow">
			<!-- #ifdef MP-WEIXIN -->
			<view v-if="userInfo2.bind_wechat === '1'" class="menu-item">
				<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="userInfo2.bind_wechat === '1' ? '已绑定' : '未绑定'" labelPos="left"></u-icon>
			</view>
			<button v-else open-type="getPhoneNumber" @getphonenumber="getphonenumber" class="menu-item scoped-btn-to-div">
				<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="userInfo2.bind_wechat === '1' ? '已绑定' : '未绑定'" labelPos="left"></u-icon>
			</button>
			<!-- #endif -->
			<view class="menu-item" @click="pageTo('/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" labelPos="left"></u-icon>
			</view>
			<view class="menu-item" @click="pageTo('/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="userInfo ? '审核中' : '已认证'" labelPos="left"></u-icon>
			</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="pageTo('/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="pageTo('/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="pageTo('/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="pageTo('/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" @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="uni.toast('已提交注销申请')"
		></u-modal>
	</view>
</template>
<script>
var that;
export default {
	data() {
		return {
			userInfo: {},
			userInfo2: {},
			logoffModalShow: false, // 注销提示
			editWeixinUserInfoPopupShow: false, // 补全微信资料
			form: {
				avatarUrl: null,
				nickname: ''
			}
		};
	},
	onLoad() {
	},
	onShow() {
		this.getUserInfo()
	},
	onReady() {},
	methods: {
		getUserInfo () {
			uni.api.base.apiuserinfo().then(res => {
				uni.setStorageSync('MD_userInfo2', res)
				this.userInfo2 = res || {}
			})
		},
		pageTo(path) {
			if (path === 'dev') {
				uni.$msg('开发中~')
				return
			}
			uni.navigateTo({
				url: path
			})
		},
		// 绑定微信号
		getphonenumber(e) {
			const dtlObj = e.detail || {}
			let that = this
			uni.login({
				success: function (res) {
					if (res.code) {
						uni.api.base.apiuserbindwechat({
							code: res.code,
							phone_code: dtlObj.code,
						}).then(cData => {
							that.getUserInfo()
						}).catch(err => {
							console.log(err)
						})
					} else {
						console.log('登录失败！' + res.errMsg)
					}
				}
			})
			// 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) {
					uni.toast('当前已是最新版本');
				}
			});

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

			updateManager.onUpdateFailed(function(res) {
				// 新的版本下载失败
			});
		},
		// 退出登录
		logout() {
			uni.showModal({
				title: '提示',
				content: '确定退出登录？',
				success(res) {
					if (res.confirm) {
						uni.removeStorageSync('MD_userInfo')
						uni.removeStorageSync('MD_token')
						uni.reLaunch({
							url: '/pages/index/index'
						})
					}
				}
			})
		}
	}
};
</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;
			}
		}
	}
}


.scoped-btn-to-div {
	background: transparent;
	border: 0;
	outline:0px;
	-webkit-appearance: none;
	&::after {
		display: none;
	}
}
</style>