cashier_shop_client/pages/index/index.vue

<template>
	<view>
		<view class="header">
			<text class="name">{{ userInfo.account }}</text>
			<view class="state-wrap">
				<view class="state" :class="[`s${userInfo.status}`]">
					<view class="dot"></view>
					<text>{{ userInfo.status == 1 ? '正在营业' : '休息中' }}</text>
				</view>
			</view>
		</view>
		<!-- 今日收入 -->
		<view class="earnings-wrap">
			<view class="content">
				<view class="item">
					<text>今日预计收入/元</text>
					<text>--</text>
				</view>
				<view class="item">
					<text>有效订单</text>
					<text>--</text>
				</view>
			</view>
		</view>
		<view class="menu-wrap">
			<navigator url="/pages/bind_table/bind_table" hover-class="none" class="item">
				<image src="/static/icon_menu1.jpg" mode="aspectFit" class="icon"></image>
				<text>绑定桌码</text>
			</navigator>
			<view class="item" @click="messageHandle">
				<image src="/static/icon_menu_notice.png" mode="aspectFit" class="icon"></image>
				<text>订阅通知</text>
			</view>
			<view class="item" @click="logout">
				<image src="/static/icon_menu_logout.png" mode="aspectFit" class="icon"></image>
				<text>退出登录</text>
			</view>
		</view>
	</view>
</template>

<script>
import { wxlogin, subQrCode } from '@/api/index.js';
import { log } from 'util';
export default {
	data() {
		return {
			userInfo: this.useStorage.get('userInfo'),
			code: ''
		};
	},
	onLoad() {
		if (!this.useStorage.get('token')) {
			uni.redirectTo({
				url: '/pages/login/login'
			});
		}
		// wx.login({
		// 	success: (res) => {
		// 		console.log(res);
		// 		this.code = res.code;
		// 	}
		// });
	},
	onShow() {
		if (this.useStorage.get('token') && !this.useStorage.get('openid')) {
			uni.login({
				provider: 'weixin',
				success: (res) => {
					console.log(res);
					this.code = res.code;
					this.loginHandle();
				}
			});
		}
	},
	methods: {
		// 登录
		async loginHandle() {
			try {
				const res = await wxlogin({
					code: this.code,
					shopId: this.useStorage.get('userInfo').shopId
				});
				this.useStorage.set('openid', res.data.openId);
			} catch (e) {
				console.log(e);
			}
		},
		// 订阅消息通知
		async messageHandle() {
			try {
				uni.showLoading({
					title: '加载中...'
				});
				const { data } = await subQrCode();
				uni.hideLoading();
				uni.showModal({
					title: '注意',
					content: '即将打开二维码图片，请长按识别并关注公众号订阅通知',
					showCancel: false,
					confirmText: '知道了',
					success: (res) => {
						if (res.confirm) {
							uni.previewImage({
								urls: [data]
							});
						}
					}
				});
			} catch (e) {
				console.log(e);
			}
			return;
			let msgId = 'IZ-l9p9yBgcvhRR0uN6cBQPkWJ5i05zyWMkfeCPaAmY';
			uni.getSetting({
				withSubscriptions: true,
				success(res) {
					console.log(res, '订阅信息', res.subscriptionsSetting);
					if (!res.subscriptionsSetting.mainSwitch) {
						uni.openSetting({
							success(res) {
								console.log('打开设置页', res.authSetting);
							}
						});
					} else {
						uni.requestSubscribeMessage({
							tmplIds: [msgId],
							success(res) {
								console.log('requestSubscribeMessage 订阅信息', res);
								if (res[msgId] == 'accept') {
									// 用户点击确定后
									console.log('用户订阅点击确定按钮');
									uni.showToast({
										title: '订阅成功',
										icon: 'none'
									});
								} else {
									console.log('拒绝，不会再弹出弹框 只能去设置页膝盖');
									uni.showModal({
										title: '您未开启消息订阅',
										content: '为了给您提供更好的服务，请您授权消息订阅',
										success: (res2) => {
											if (res2.confirm) {
												uni.openSetting({
													success(res) {
														console.log('打开设置页', res.authSetting);
													}
												});
											} else {
												console.log('决绝');
											}
										}
									});
								}
							},
							fail(errMessage) {
								console.log('订阅消息 失败 ', errMessage);
							}
						});
					}
				}
			});
		},
		// 退出登录
		logout() {
			uni.showModal({
				title: '注意',
				content: '确定要退出登录吗？',
				success: (res) => {
					if (res.confirm) {
						this.useStorage.clear();
						uni.redirectTo({
							url: '/pages/login/login'
						});
					}
				}
			});
		}
	}
};
</script>

<style scoped lang="scss">
.header {
	display: flex;
	align-items: center;
	padding: 20upx $paddingSize;
	background-color: #fff;
	.name {
		font-size: 32upx;
		font-weight: bold;
		color: #000;
	}
	.state-wrap {
		.state {
			display: flex;
			align-items: center;
			padding: 8upx 26upx;
			margin-left: $paddingSize;
			border-radius: 100upx;
			&.s1 {
				background-color: #e6f9f3;
				.dot {
					background-color: #00be7e;
				}
			}
			&.s0 {
				background-color: #f5f5f5;
				.dot {
					background-color: #999;
				}
			}
			.dot {
				$size: 20upx;
				width: $size;
				height: $size;
				border-radius: 50%;
				margin-right: 20upx;
			}
		}
	}
}
.earnings-wrap {
	padding: $paddingSize;
	background-color: #fff;
	.content {
		border-radius: $paddingSize;
		padding: $paddingSize;
		display: flex;
		background-color: #f5f6fa;
		.item {
			flex: 1;
			display: flex;
			align-items: center;
			flex-direction: column;
			gap: $paddingSize;
		}
	}
}
.menu-wrap {
	padding: $paddingSize;
	display: flex;
	background-color: #fff;
	.item {
		width: 25%;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 20upx;
		.icon {
			$size: 100upx;
			width: $size;
			height: $size;
		}
	}
}
.code-wrap {
	.img {
		width: 100%;
	}
}
</style>