AiSkinMeasurementMp/pages/index/index.vue

<template>
	<view class="content" :style="{
		backgroundImage: 'url(' + src + ')',
		backgroundSize: 'cover',
		backgroundPosition: 'top'
	}">
		<view class="main">
			<view class="action-box">
				<view class="btn-box">
					<u-button @click="onSubmit()" :color="bgthemeColor" type="info" size="large" shape="circle">
						<text :style="{color: themeColor, fontSize: '32rpx', fontWeight: 'bold'}">拍照测评</text>
					</u-button>
				</view>
			</view>
			<view class="agree-box">
				<u-checkbox-group v-model="checked" @change="onChange">
					<u-checkbox   size="20" inactiveColor="#333" activeColor="#fff" iconSize="25" iconColor="#333" name="1">
					</u-checkbox>
				</u-checkbox-group>
				<view class="agree-text">
					<text class="blue" @click="onUserAgreement">用户服务协议</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			checked: [],
			title: '',
		}
	},
	computed: {
		src() {
			return this.$urls.loginBanner
		},
		bgthemeColor() {
			return this.checked ?  '#000': '#000'
		},
		themeColor() {
			return this.$themeColor
		},
	},
	onShow() {
	},
	onLoad() {
		this.checked = [this.$store.state.user.agreementState];
		console.log("todo",this.$store.state.user);
	},
	methods: {
		onUserAgreement() {
			if (uni.canIUse('openPrivacyContract')) {
				// 打开隐私协议页面
				uni.openPrivacyContract({
					success: (res) => {
						console.log('打开隐私协议成功', res);
					},
					fail: (err) => {
						console.error('打开隐私协议失败', err);
					}
				});
			} else {
				uni.showToast({
					title: "当前微信版本不支持隐私协议功能",
					icon: 'none'
				});
				console.error('当前微信版本不支持隐私协议功能');
			}
		},
		onAgreeChange() { },
		openPrivacyPolicy() { },
		onSubmit() {
			if(!this.checked[0]) {
				return uni.showToast({
					title: "请勾选用户服务协议",
					icon: 'none'
				});
			}
			if (!this.$store.state.user.userInfo) {
				return uni.showModal({
					title: '提示',
					content: '您未创建用户，是否前往创建用户？',
					success(res) {
						if (res.confirm) {
							uni.reLaunch({
								url: '/pages/user/info',
							})
						}
					}
				});
			}
			uni.navigateTo({
				url: '/pages/skin-assessment/photograph',
			})
		},
		onChange(n) {
			if(n.length > 0) {
				this.checked = n[0];
				this.$store.commit('setAgreementState', n[0]);
				this.$store.commit('saveAll');
			} else {
				this.$store.commit('setAgreementState', '');
				this.$store.commit('saveAll');
			}
			
		},
		getphonenumber(e) {
			console.log("快速登录", e);
			if (!e.detail.errno) {
				console.log(e.detail.code) // 动态令牌

			} else {
				this.$u.toast('快速登录失败：' + e.detail.errMsg)
			}
		},

	}
}
</script>

<style lang="scss">
.content {
	position: relative;
	height: 100vh;
	width: 100vw;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-size: contain;
	background-repeat: no-repeat;
	z-index: 99;

	.main {
		position: fixed;
		bottom: 0;
		width: 100vw;
		padding: 30rpx 0;
		padding-bottom: 30rpx;
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
		z-index: 999;

		.action-box {
			padding: 0 30rpx;
			.btn-box {
				margin-top: 20rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				text {
					font-size: 36rpx;
				}

				.black {
					color: $uni-text-color;
				}

				.gray {
					color: $uni-text-color-grey;
				}
			}
		}

		.agree-box {
			padding: 40rpx 30rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			.agree-text {
				margin-left: 10rpx;

				.blue {
					color: $uni-text-color;
					text-decoration: underline;
				}
			}
		}
	}
}

.logo {
	height: 200rpx;
	width: 200rpx;
	margin-top: 200rpx;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 50rpx;
}

.text-area {
	display: flex;
	justify-content: center;
}

.title {
	font-size: 36rpx;
	color: #8f8f94;
}
</style>