You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
228 lines
6.4 KiB
228 lines
6.4 KiB
<template>
|
|
<view class="login">
|
|
<view class="login-logo">
|
|
<image class="logo" src="https://img.teyizhao.com/2025-08-07/f5cd742f-fef4-4d9b-84d9-131f0cba716f.png" mode="aspectFill"></image>
|
|
</view>
|
|
<view class="login-submit">
|
|
|
|
<up-button class="mt24" type="primary" text="手机号登录"
|
|
v-if="checkboxValue.length == 0"
|
|
@click="loginWx"
|
|
shape="circle" color="#FFBF60" style="margin-top: 20rpx;"></up-button>
|
|
|
|
|
|
<up-button class="mt24" type="primary" text="手机号登录"
|
|
v-else
|
|
open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber"
|
|
shape="circle" color="#FFBF60" style="margin-top: 20rpx;"></up-button>
|
|
</view>
|
|
<view class="flex-rowc">
|
|
<view>
|
|
<up-checkbox-group v-model="checkboxValue">
|
|
<up-checkbox v-model="isAgree" size="29rpx" icon-size="29rpx" name="agree"
|
|
shape="circle" activeColor="#FFBF60">
|
|
</up-checkbox>
|
|
</up-checkbox-group>
|
|
</view>
|
|
<view class="size-26 agreement">
|
|
<text>我已阅读并同意猫爸狗妈</text>
|
|
<text @click="privacyPolicy('login_xy')" class="main-color">《注册协议》</text>
|
|
<text>与</text>
|
|
<text @click="privacyPolicy('login_ys')" class="main-color">《隐私政策》</text>
|
|
</view>
|
|
</view>
|
|
<view class="login-footer flex-rowc">
|
|
<button @click="cancelLogin" class="btn-cancel" plain>暂不登录</button>
|
|
</view>
|
|
|
|
<up-popup :show="show" @close="close" :round="10">
|
|
<view style="padding: 10rpx 20rpx;height: 50vh;overflow-y: scroll;" v-html="content"></view>
|
|
</up-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
getOpenIdKey,
|
|
getToken,
|
|
setOpenIdKey,
|
|
setStorage,
|
|
setToken
|
|
} from "../../utils/auth";
|
|
import {
|
|
getOpenId,
|
|
getPersonalInfo,
|
|
getPhoneNumber
|
|
} from "../../api/system/user";
|
|
import { mapGetters } from 'vuex';
|
|
|
|
export default {
|
|
name: 'AuthIndex',
|
|
data() {
|
|
return {
|
|
value: false,
|
|
show: false,
|
|
content: '',
|
|
checkboxValue: [],
|
|
url : '',
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters(['configList'])
|
|
},
|
|
onLoad(options) {
|
|
this.url = options.url || ''
|
|
},
|
|
methods: {
|
|
// 微信授权登陆
|
|
loginWx() {
|
|
if (this.checkboxValue.length == 0) {
|
|
return uni.showToast({
|
|
title: '请先同意隐私协议',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
},
|
|
|
|
login() {
|
|
uni.login({
|
|
provider: 'weixin',
|
|
success: (loginRes) => {
|
|
this.getOpenId(loginRes.code)
|
|
},
|
|
fail: function(error) {
|
|
// 授权失败处理
|
|
uni.showToast('授权失败，请授权后再试')
|
|
}
|
|
});
|
|
},
|
|
|
|
getOpenId(code) {
|
|
getOpenId(code).then(res => {
|
|
if (res.code == 200 && res.data) {
|
|
let resData = JSON.parse(res.data)
|
|
let token = resData.token;
|
|
let openId = resData.openId;
|
|
setOpenIdKey(openId)
|
|
if(token){
|
|
setToken(token)
|
|
this.$store.commit('getUserInfo')
|
|
}else{
|
|
// 如果没有token，可能需要获取手机号
|
|
uni.showToast({
|
|
title: '请授权手机号登录',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
}
|
|
})
|
|
},
|
|
|
|
// 获取token
|
|
onGetPhoneNumber(e) {
|
|
if(e.detail.errMsg=="getPhoneNumber:fail user deny"){ //用户拒绝授权
|
|
//拒绝授权后弹出一些提示
|
|
}else{ //允许授权
|
|
if(getOpenIdKey()){
|
|
this.getPhoneNumber({"openId":getOpenIdKey(),"code":e.detail.code})
|
|
}
|
|
}
|
|
},
|
|
|
|
getPhoneNumber(data){
|
|
getPhoneNumber(data).then(res=>{
|
|
if(res&&res.code==200){
|
|
let token = res.data.token
|
|
setToken(token)
|
|
this.$store.commit('getUserInfo')
|
|
|
|
if(this.url){
|
|
uni.redirectTo({
|
|
url: this.url
|
|
})
|
|
}
|
|
} else{
|
|
uni.showToast({
|
|
icon:'error',
|
|
title:'获取手机号失败'
|
|
})
|
|
}
|
|
})
|
|
},
|
|
|
|
|
|
cancelLogin() {
|
|
uni.switchTab({
|
|
url: "/pages/workbenchManage/index"
|
|
})
|
|
},
|
|
|
|
close() {
|
|
this.show = false
|
|
},
|
|
|
|
privacyPolicy(key) {
|
|
this.content = this.configList && this.configList[key] ? this.configList[key].paramValueArea || "" : "";
|
|
this.show = true;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.login {
|
|
height: 100vh;
|
|
background: #ffffff;
|
|
|
|
&-logo {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 504rpx;
|
|
background: linear-gradient(360deg, #FFFFFF 0%, #FFBF60 99%);
|
|
|
|
.logo {
|
|
width: 220rpx;
|
|
height: 220rpx;
|
|
}
|
|
|
|
.d {
|
|
width: 200rpx;
|
|
height: 80rpx;
|
|
margin-top: 20rpx;
|
|
}
|
|
}
|
|
|
|
&-submit {
|
|
padding: 0 76rpx;
|
|
margin: 150rpx 0 40rpx 0;
|
|
}
|
|
}
|
|
.flex-rowc{
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.agreement {
|
|
color: #C7C7C7;
|
|
font-size: 22rpx;
|
|
line-height: 29rpx;
|
|
}
|
|
|
|
.login-footer {
|
|
width: 100vw;
|
|
position: fixed;
|
|
bottom: 127rpx;
|
|
text-align: center;
|
|
|
|
.btn-cancel {
|
|
color: #C7C7C7;
|
|
font-size: 30rpx;
|
|
line-height: 40rpx;
|
|
border: none;
|
|
display: inline-block;
|
|
padding: 0;
|
|
}
|
|
}
|
|
</style>
|