390 lines
8.4 KiB
Vue
390 lines
8.4 KiB
Vue
<template>
|
||
<uni-popup ref="loginRef" type="bottom" :safe-area="false" @maskClick="close">
|
||
<view v-if="!showPhoneLogin" class="container">
|
||
<text class="title">登录并认证后体验完整功能</text>
|
||
<button class="cu-btn wx-btn text-white" @click="toLogin">
|
||
<image src="/static/icons/wechat-white.png" mode="aspectFit" class="wx-icon"></image>
|
||
微信一键登录</button>
|
||
<button class="cu-btn phone-btn" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">
|
||
手机号快捷登录</button>
|
||
|
||
<!-- <button class="cu-btn phone-btn" @click="toPhoneLogin">
|
||
其他手机号登录</button> -->
|
||
<view class="agreement-box">
|
||
<checkbox-group @change="checkboxChange" class="checkbox-group">
|
||
<checkbox value="1" :checked="isAgree" color="#19367A" class="checkbox" />
|
||
<text class="agreement-text">我已阅读并同意</text>
|
||
<text class="link" @click="toAgreement">《软件使用协议》</text>
|
||
</checkbox-group>
|
||
</view>
|
||
</view>
|
||
<view v-else class="page-content padding">
|
||
<view class="flex-col">
|
||
<view class="label">手机号码</view>
|
||
<input v-model="form.username" maxlength="11" placeholder="手机号码" class="zd-input"></input>
|
||
</view>
|
||
<view class="flex-col">
|
||
<view class="label">密码</view>
|
||
<view class="zd-input flex align-center justify-between">
|
||
<input v-model="form.password" placeholder="密码" maxlength="8" :password="!showPassword">
|
||
|
||
</input>
|
||
<text style="font-size: 40rpx;" :class="[showPassword ? 'cuIcon-unlock' : 'cuIcon-lock']"
|
||
@click="changePassword"></text>
|
||
</view>
|
||
|
||
|
||
</view>
|
||
<button class="cu-btn bg-zd btn" @click="submitForm">登录</button>
|
||
</view>
|
||
</uni-popup>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
getOpenId,
|
||
getUserInfo,
|
||
barLogin,
|
||
phoneCodeLoginApi
|
||
} from '@/api/login.js'
|
||
import {
|
||
getBarInfo
|
||
} from '@/api/bar.js'
|
||
export default {
|
||
name: "loginPopup",
|
||
data() {
|
||
return {
|
||
showPhoneLogin: false,
|
||
form: {
|
||
username: '',
|
||
password: ''
|
||
},
|
||
showPassword: false,
|
||
isAgree: false
|
||
};
|
||
},
|
||
methods: {
|
||
open() {
|
||
// uni.hideTabBar({
|
||
// fail() {
|
||
// }
|
||
// })
|
||
this.$refs.loginRef.open()
|
||
},
|
||
close() {
|
||
this.$refs.loginRef.close()
|
||
this.showPhoneLogin = false
|
||
this.form = {
|
||
username: '',
|
||
password: ''
|
||
}
|
||
this.showPassword = false
|
||
// uni.showTabBar()
|
||
},
|
||
|
||
// 微信登录
|
||
toLogin() {
|
||
if (!this.isAgree) {
|
||
uni.showToast({
|
||
title: '请先同意商家入驻协议',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
uni.login({
|
||
provider: 'weixin', //使用微信登录
|
||
success: (loginRes) => {
|
||
console.log(loginRes.code);
|
||
if (loginRes.code) {
|
||
uni.showLoading({
|
||
mask: true
|
||
})
|
||
getOpenId(loginRes.code).then(res => {
|
||
console.log(res.token)
|
||
this.openId = res.openId
|
||
if (res.token) {
|
||
uni.setStorageSync('token', res.token)
|
||
// 获取用户信息
|
||
this.getUserInfoFun()
|
||
this.getBarInfoFun()
|
||
// 登录成功后立即关闭弹窗
|
||
this.close()
|
||
}
|
||
})
|
||
}
|
||
}
|
||
})
|
||
},
|
||
decryptPhoneNumber(e) {
|
||
if (!this.isAgree) {
|
||
uni.showToast({
|
||
title: '请先同意商家入驻协议',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
|
||
if (!e.detail.code) {
|
||
uni.showToast({
|
||
title: '获取手机号失败，请重试',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
|
||
const data = {
|
||
code: e.detail.code
|
||
}
|
||
uni.showLoading()
|
||
phoneCodeLoginApi(data).then(res=>{
|
||
console.log(res,'22222')
|
||
if (res.token) {
|
||
uni.setStorageSync('token', res.token)
|
||
// 获取用户信息
|
||
this.getUserInfoFun()
|
||
this.getBarInfoFun()
|
||
// 登录成功后立即关闭弹窗
|
||
this.close()
|
||
}
|
||
})
|
||
},
|
||
// 获取用户信息
|
||
getUserInfoFun() {
|
||
getUserInfo().then(res => {
|
||
if (res.user) {
|
||
this.userInfo = res.user
|
||
uni.setStorageSync('userInfo', res.user)
|
||
this.$emit('loginSuccess')
|
||
|
||
// 如果没有barId，提示去认证
|
||
if (!res.user.barId) {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '您还未认证门店，请先认证',
|
||
showCancel: true,
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
console.log('确定')
|
||
uni.navigateTo({
|
||
url: '/pages/index/registration?openId=' + this.openId
|
||
})
|
||
}
|
||
}
|
||
})
|
||
}
|
||
}
|
||
uni.hideLoading()
|
||
})
|
||
},
|
||
toPhoneLogin() {
|
||
this.showPhoneLogin = true
|
||
},
|
||
changePassword: function() {
|
||
this.showPassword = !this.showPassword;
|
||
},
|
||
submitForm() {
|
||
if (!this.form.username) {
|
||
uni.showToast({
|
||
title: '请输入手机号码',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
let reg = /^1[3456789]\d{9}$/
|
||
if (!reg.test(this.form.username)) {
|
||
uni.showToast({
|
||
title: '请输入正确的手机号码',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
if (!this.form.password) {
|
||
uni.showToast({
|
||
title: '请输入密码',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
uni.showLoading({
|
||
title: '登录中'
|
||
})
|
||
barLogin(this.form).then(res => {
|
||
if (res.code == 200) {
|
||
uni.setStorageSync('token', res.token)
|
||
this.getUserInfoFun()
|
||
this.getBarInfoFun()
|
||
}
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err,
|
||
icon: 'none'
|
||
})
|
||
})
|
||
},
|
||
// 获取酒吧信息
|
||
getBarInfoFun() {
|
||
getBarInfo().then(res => {
|
||
uni.setStorageSync('barInfo', res.data)
|
||
})
|
||
},
|
||
// 协议勾选
|
||
checkboxChange(e) {
|
||
this.isAgree = e.detail.value.length > 0
|
||
},
|
||
// 跳转到协议页面
|
||
toAgreement() {
|
||
uni.navigateTo({
|
||
url: '/pages/index/userAgreement'
|
||
})
|
||
},
|
||
async handleLogin() {
|
||
try {
|
||
const result = await this.$http.post('/api/login', {
|
||
code: this.code,
|
||
userInfo: this.userInfo
|
||
})
|
||
|
||
// 保存登录信息，替换临时token
|
||
uni.setStorageSync('token', result.data.token)
|
||
uni.setStorageSync('userInfo', result.data.userInfo)
|
||
|
||
this.$emit('login-success', result.data)
|
||
this.close()
|
||
} catch (error) {
|
||
console.error('登录失败：', error)
|
||
uni.showToast({
|
||
title: '登录失败，请重试',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.container {
|
||
width: 100%;
|
||
// height: 500rpx;
|
||
background-color: #fff;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
padding: 80rpx 32rpx;
|
||
border-radius: 24rpx 24rpx 0rpx 0rpx;
|
||
|
||
.title {
|
||
font-family: Roboto;
|
||
font-size: 28rpx;
|
||
font-weight: 500;
|
||
color: #030303;
|
||
margin-bottom: 92rpx;
|
||
}
|
||
|
||
.wx-btn {
|
||
width: 100%;
|
||
height: 88rpx;
|
||
background-color: #4E63E0;
|
||
border-radius: 12rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
color: #fff;
|
||
font-size: 28rpx;
|
||
font-weight: 500;
|
||
margin-bottom: 46rpx;
|
||
|
||
.wx-icon {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
margin-right: 16rpx;
|
||
}
|
||
}
|
||
|
||
.phone-btn {
|
||
width: 100%;
|
||
height: 88rpx;
|
||
background: #F2F2F2;
|
||
border-radius: 12rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
color: #030303;
|
||
font-size: 28rpx;
|
||
font-weight: 500;
|
||
margin-bottom: 64rpx;
|
||
}
|
||
|
||
.sub-title {
|
||
font-family: Roboto;
|
||
font-size: 24rpx;
|
||
font-weight: 500;
|
||
color: #979797;
|
||
}
|
||
|
||
.agreement-box {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-top: 20rpx;
|
||
|
||
.checkbox-group {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.checkbox {
|
||
transform: scale(0.8);
|
||
margin-right: 8rpx;
|
||
}
|
||
|
||
.agreement-text {
|
||
font-size: 24rpx;
|
||
color: #666666;
|
||
margin-right: 4rpx;
|
||
}
|
||
|
||
.link {
|
||
font-size: 24rpx;
|
||
color: #19367A;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.page-content {
|
||
padding: 48rpx 32rpx;
|
||
background-color: #ffffff;
|
||
width: 100%;
|
||
|
||
.label {
|
||
color: #000;
|
||
margin-bottom: 26rpx;
|
||
font-size: 24rpx;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.zd-input {
|
||
// width: 654rpx;
|
||
height: 96rpx;
|
||
border-radius: 16rpx;
|
||
background-color: #FFF;
|
||
padding: 0 30rpx;
|
||
box-sizing: border-box;
|
||
color: #000;
|
||
margin-bottom: 56rpx;
|
||
border: 1px solid #C8C8C8;
|
||
}
|
||
|
||
.btn {
|
||
// width: 654rpx;
|
||
width: 100%;
|
||
height: 88rpx;
|
||
border-radius: 12rpx;
|
||
margin: 30rpx auto;
|
||
color: #0B0E26;
|
||
font-size: 28rpx;
|
||
// box-shadow: 0px 10px 24px 0px rgba(43, 45, 51, 0.2);
|
||
}
|
||
}
|
||
</style> |