car_net_wxapp/wx/pages/login/index.vue

<template>
	<!-- wx9bf5de3fd1a15538 -->
	<!-- wx99bd3af055be9f6d -->
	<view class="login">
		<!-- 头部功能组件 -->
		<cu-loadding :show="showloading" />
		<!-- header -->
		<view @click="userfunc" class="header">
			<cu-custom bgColor="header-blue"><view v-if="show" slot="content">设置</view></cu-custom>
			<cu-login-userinfo :userImage="userinfo.face" :userName="userinfo.name" />
		</view>
		<!-- section -->
		<view class="bg-white">
			<view class="cu-list menu card-menu shadow-lg radius">
				<view @click="navfunc('/pages/information/index', true)" class="cu-item arrow">
					<view class="content flex align-center">
						<van-icon name="info-o" />
						<text class="margin-left-sm">设备信息</text>
					</view>
				</view>
				<view @click="navfunc('/pages/status/index', true)" class="cu-item arrow">
					<view class="content flex align-center">
						<van-icon name="hotel-o" />
						<text class="margin-left-sm">设备状态</text>
					</view>
				</view>
			</view>
		</view>
		<view class="bg-white margin-top">
			<view class="cu-list menu card-menu  shadow-lg radius">
				<view @click="navfunc('/pages/privacy/index')" class="cu-item arrow ">
					<view class="content flex align-center">
						<van-icon name="shield-o" />
						<text class="margin-left-sm">隐私声明</text>
					</view>
				</view>
				<view @click="show = true" class="cu-item arrow ">
					<view class="content flex align-center">
						<van-icon name="setting-o" />
						<text class="margin-left-sm">设置</text>
					</view>
				</view>
			</view>
		</view>
		<!-- footer -->
		<!-- 功能栏 -->
		<van-action-sheet :show="show" :actions="actions" @close="show = false" @select="onSelect" @getphonenumber="onGetUserInfo" />
	</view>
</template>

<script>
export default {
	data() {
		return {
			showloading: true, //加载
			show: false, //设置
			actions: [],
			userinfo: {
				face: '',
				name: ''
			}
		};
	},
	onLoad() {
		this.initRequest();
	},
	methods: {
		// 报错
		showErr(content) {
			content = JSON.stringify(content) === '{}' ? '未知错误' : content;
			uni.showModal({
				content,
				showCancel: false,
				success: res => console.log(res)
			});
		},
		// 进入页面请求
		async initRequest() {
			try {
				var { appid, code } = await this.codeAppid();
				// codeSession
				var res = await this.$global.request({
					url: '/customer/code2Session/',
					method: 'post',
					data: {
						code,
						appid
					}
				});
				if (res.data.token) uni.setStorageSync('token', 'JWT ' + res.data.token);
				this.$store.commit('userInfo', { appid, code, ...res.data });
				// 设置
				this.changeUser();
			} catch (err) {
				console.log(err);
				this.showErr(err);
			} finally {
				this.showloading = false;
			}
		},
		// 获取 code appid
		codeAppid() {
			return new Promise((resolve, reject) => {
				const appid = uni.getAccountInfoSync().miniProgram.appId;
				uni.login({ success, fail: err => reject(err) });
				function success(res) {
					var { code } = res;
					resolve({ code, appid });
				}
			});
		},
		// 头像点击事件
		userfunc() {
			if (!uni.getStorageSync('token')) this.show = true;
		},
		// 更新用户显示资料
		changeUser() {
			this.userinfo = {
				face: this.$store.state.userInfo.face || 'https://img.yzcdn.cn/vant/cat.jpeg',
				name: this.$store.state.userInfo.name || '昵称'
			};
			this.actions = [
				{ name: '微信快捷登录', color: uni.getStorageSync('token') ? '#666666' : '#39b54a', disabled: uni.getStorageSync('token'), openType: 'getPhoneNumber' },
				{ name: '更新资料', disabled: !uni.getStorageSync('token') }
			];
		},
		// 微信快捷登录
		async onGetUserInfo(e) {
			try {
				var { encryptedData, iv } = e.detail;
				var { openid, appid } = this.$store.state.userInfo;
				var res = await this.$global.request({ url: '/customer/wxbind/', method: 'post', data: { openid, appid, encryptedData, iv } });
				if (res.data.token) uni.setStorageSync('token', 'JWT ' + res.data.token);
				this.$store.commit('userInfo', res.data);
				this.changeUser();
				uni.showToast({
					icon: 'none',
					title: '登录成功'
				});
			} catch (err) {
				this.showErr(err);
			} finally {
				this.show = false;
			}
		},
		// 获取用户信息权限
		getUserInfoRoot() {
			return new Promise((resolve, reject) => {
				uni.getUserProfile({
					desc: '用于完善会员资料',
					success: res => resolve(res),
					fail: err => reject(err)
				});
			});
		},
		// 跳转
		navfunc(url, status = false) {
			if (status && !uni.getStorageSync('token')) {
				this.show = true;
				return false;
			}
			uni.navigateTo({ url });
		},
		// 更新资料
		async updateUserInfo() {
			// customer/setUserInfo/
			try {
				var res = await this.getUserInfoRoot();
				var { iv, encryptedData } = res;
				res = await this.$global.request({
					url: '/customer/setinfo/',
					data: {
						iv,
						encryptedData,
						appid: this.$store.state.userInfo.appid,
						openid: this.$store.state.userInfo.openid
					},
					method: 'post',
					header: {
						'Content-Type': 'application/x-www-form-urlencoded',
						Authorization: uni.getStorageSync('token')
					}
				});
				this.$store.commit('userInfo', res.data);
				this.changeUser();
				uni.showToast({
					icon: 'none',
					title: '更新成功'
				});
			} catch (err) {
				this.showErr(err);
			}
		},
		// 选中
		onSelect(event) {
			switch (event.detail.name) {
				case '更新资料':
					this.updateUserInfo();
					break;
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.login {
}
</style>