120 lines
2.3 KiB
Vue
120 lines
2.3 KiB
Vue
<template>
|
||
<view class='content'>
|
||
<view class='title'>
|
||
欢迎登录VIP顾客中心
|
||
</view>
|
||
|
||
<image class='logo' :src='assetsUrl("ic_logo.jpeg")' />
|
||
|
||
<button class='login-btn' @tap='wechatLogin'>
|
||
微信登录
|
||
</button>
|
||
<view class='hint'>
|
||
<image @click.stop='bindCheck'
|
||
:src='isAgreePrivacy?("/static/images/ic_checked_green.png"):("/static/images/ic_checked_gray.png")' />
|
||
|
||
<text @click.stop='bindCheck'>请先阅读并同意
|
||
<text class='link' @click.stop='openPrivacy'>
|
||
《小程序隐私保护协议》
|
||
</text>
|
||
并授权使用您的账号信息（如昵称、头像、收获地址）以便您统一管理
|
||
</text>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang='ts'>
|
||
import { useUserStore } from '@/store';
|
||
import { assetsUrl } from '@/utils/assets';
|
||
import { showToast } from '@/utils';
|
||
|
||
const userStore = useUserStore();
|
||
const isAgreePrivacy = ref(false);
|
||
|
||
function wechatLogin() {
|
||
if(!isAgreePrivacy.value) {
|
||
showToast('请先阅读并同意小程序隐私保护协议');
|
||
return;
|
||
}
|
||
|
||
uni.showLoading();
|
||
userStore.login().then(() => {
|
||
uni.hideLoading();
|
||
uni.reLaunch({ url: '/pages/home/index' });
|
||
});
|
||
}
|
||
|
||
const bindCheck = () => {
|
||
isAgreePrivacy.value = !isAgreePrivacy.value;
|
||
};
|
||
|
||
const openPrivacy = () => {
|
||
wx.openPrivacyContract({
|
||
success: () => {
|
||
}, // 打开成功
|
||
fail: () => {
|
||
}, // 打开失败
|
||
complete: () => {
|
||
}
|
||
});
|
||
};
|
||
|
||
</script>
|
||
|
||
<style lang='scss' scoped>
|
||
.content {
|
||
background: #FFFFFF;
|
||
height: 100vh;
|
||
}
|
||
|
||
.title {
|
||
font-size: 60rpx;
|
||
text-align: left;
|
||
font-weight: 500;
|
||
margin: 50rpx;
|
||
}
|
||
|
||
.logo {
|
||
width: 300rpx;
|
||
height: 300rpx;
|
||
align-self: center;
|
||
margin: 30rpx;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.login-btn {
|
||
padding: 12rpx 0;
|
||
font-size: 30rpx;
|
||
color: #FFFFFF;
|
||
background-color: #1cbf1e;
|
||
border: none;
|
||
border-radius: 45rpx;
|
||
margin: 100rpx 45rpx 0 45rpx;
|
||
|
||
&::after {
|
||
border: none;
|
||
}
|
||
}
|
||
|
||
.hint {
|
||
display: inline-block;
|
||
padding: 20rpx 50rpx;
|
||
font-size: 25rpx;
|
||
color: $u-tips-color;
|
||
position: absolute;
|
||
align-items: center;
|
||
bottom: 50rpx;
|
||
|
||
.link {
|
||
color: $u-warning;
|
||
}
|
||
|
||
image {
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
margin-right: 10rpx;
|
||
margin-bottom: -5rpx;
|
||
}
|
||
}
|
||
</style>
|