371 lines
11 KiB
Vue
371 lines
11 KiB
Vue
<template>
|
||
<view v-if="isLoaded" class="content" :class="{ 'disable-content-bck': isMobileLogin}">
|
||
<!-- 登录按钮 -->
|
||
<view v-if="!isMobileLogin" class="buttons center">
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" class="btn1 center">
|
||
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/index/mobile-icon.png" mode="widthFix"></image>手机号登录
|
||
</button>
|
||
<!-- #endif -->
|
||
<!-- #ifdef H5 -->
|
||
<button @click="goMobileLogin()" class="btn1 center">
|
||
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/index/mobile-icon.png" mode="widthFix"></image>手机号登录
|
||
</button>
|
||
<!-- #endif -->
|
||
</view>
|
||
<popup-agreement ref="pAgreementUser" :agreementMode="0"></popup-agreement>
|
||
<popup-agreement ref="pAgreementPrivate" :agreementMode="1"></popup-agreement>
|
||
|
||
<!-- 手机号登录弹窗 -->
|
||
<uni-popup ref="pMobile" type="center" mask-background-color="rgba(0,0,0,.65)">
|
||
<view class="mobile-container">
|
||
<view class="mobile-card-group" >
|
||
<view class="mobile-card">
|
||
<view class="center">
|
||
<view class="flex pr-5">
|
||
<image class="mobile-icon" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/index/mobile-icon-black.png"
|
||
mode="widthFix">
|
||
</image>
|
||
</view>
|
||
<view>手机号{{isWechatLogin ? '绑定' : '登录'}}</view>
|
||
</view>
|
||
<view class="mobile-input">
|
||
<view class="mobile-input-text center">
|
||
+<text>86</text>
|
||
</view>
|
||
<view class="mobile-input-input">
|
||
<input type="number" v-model="userMoblie" placeholder="请输入手机号" maxlength="11" />
|
||
</view>
|
||
</view>
|
||
<view class="mobile-input">
|
||
<view class="mobile-input-input" style="padding: 0 20px;">
|
||
<input type="number" v-model="smscode" maxlength="6"
|
||
placeholder-style="font-family: Alfa Slab One;font-size: 10px;font-weight: 400;" placeholder="请输入验证码" />
|
||
</view>
|
||
<view @click="doSendSms" class="smscode center">
|
||
<text v-if="smscodeTime === 0" style="color: #83FF23;">获取验证码</text>
|
||
<text v-else style="color: #939393;font-size: 14px;">{{smscodeTime}}秒再次发送</text>
|
||
</view>
|
||
</view>
|
||
<view>
|
||
<button @click="doLogin" class="mobile-login-btn center">{{isWechatLogin ? '绑定' : '登录'}}</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="terms safari_only">
|
||
<view class="" @click="isTermsCheck = !isTermsCheck">
|
||
<image style="width: 10px;" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/index/radio-icon.png" mode="widthFix"></image>
|
||
<image v-if="isTermsCheck" class="terms-check" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/index/check.png" mode="widthFix"></image>
|
||
</view>
|
||
<view>
|
||
<text style="margin-left: 5px;">
|
||
登录即表明同意
|
||
<text @click="openAgreement(0)" class="terms-color">用户协议</text>、
|
||
<text @click="openAgreement(1)" class="terms-color">隐私协议</text>
|
||
</text>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
const app = getApp()
|
||
export default {
|
||
name: 'index',
|
||
data() {
|
||
return {
|
||
isMobileLogin: false, // 开启手机号登录弹窗
|
||
isWechatLogin: false, // 微信登录成功，绑定手机号模式
|
||
isLoaded: false, // 页面静态资源加载完毕再展示页面
|
||
userMoblie: '', // 手机号
|
||
smscode: '', // 验证码
|
||
smscodeTime: 0, // 是否已发送验证码，倒计时，0可以发送
|
||
isTermsCheck: false,
|
||
}
|
||
},
|
||
async onLoad() {
|
||
// 查看缓存jinxiangguo_login_token
|
||
if (app.globalData.token) {
|
||
uni.redirectTo({
|
||
url: '/pages/game/game'
|
||
})
|
||
return
|
||
}
|
||
|
||
// #ifdef H5
|
||
// 判断是否在微信客户端
|
||
if (this.$wx && app.isWechat()) {
|
||
let openid = app.getQueryString('openid')
|
||
if (!openid) {
|
||
location.href = app.globalData.requestUrl + '/api/user/wxsnsapi?url=' + (location.origin + location.pathname + (location.search ? location.search : '?1=1'))
|
||
return
|
||
}
|
||
// 拿openid到后台换取token，拿不到就引导用户绑定手机号
|
||
let that = this
|
||
uni.request({
|
||
url: app.globalData.requestUrl + '/api/user/getWxLoginToken',
|
||
method: 'GET',
|
||
data: {
|
||
openid: openid
|
||
},
|
||
success: (res) => {
|
||
console.log(res.data.data)
|
||
if (!res.data.data.token) {
|
||
this.isWechatLogin = true
|
||
this.isMobileLogin = true
|
||
this.$refs.pMobile.open()
|
||
open
|
||
} else {
|
||
uni.setStorage({
|
||
key: 'jinxiangguo_login_token',
|
||
data: res.data.data.token,
|
||
success: function () {
|
||
location.reload()
|
||
}
|
||
})
|
||
}
|
||
},
|
||
complete() {
|
||
that.pageInit() // 加载页面静态资源
|
||
}
|
||
})
|
||
}
|
||
if (!this.isLoaded) {
|
||
await this.pageInit()
|
||
}
|
||
// #endif
|
||
// #ifdef MP-WEIXIN
|
||
this.isLoaded = true
|
||
// #endif
|
||
},
|
||
methods: {
|
||
// #ifdef MP-WEIXIN
|
||
getPhoneNumber (e) {
|
||
console.log(e)
|
||
if (!e.detail.cloudID) {
|
||
wx.showToast({
|
||
title: '登录失败',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
let that = this
|
||
wx.cloud.callFunction({ //连接云函数
|
||
name:'getPhoneNumber', // 云函数名称
|
||
data:{
|
||
weRunData: wx.cloud.CloudID(e.detail.cloudID) // 这个 CloudID 值到云函数端会被替换
|
||
}
|
||
}).then(res => {
|
||
if (!app.globalData.unionid) res.result.unionid
|
||
uni.request({
|
||
url: app.globalData.requestUrl + '/api/user/wechat/register',
|
||
data: {
|
||
unionid: res.result.unionid,
|
||
mobile: res.result.moblie,
|
||
openid: res.result.openid,
|
||
},
|
||
method: 'POST',
|
||
success: function (res2) {
|
||
let toast = ''
|
||
console.log(res2.data)
|
||
app.globalData.token = res2.data.data.token
|
||
if (res2.data.code === 200) {
|
||
uni.showToast({
|
||
title: '登录成功！',
|
||
icon: 'none'
|
||
})
|
||
uni.setStorage({
|
||
key: 'jinxiangguo_login_token',
|
||
data: res2.data.data.token,
|
||
success: function () {
|
||
uni.reLaunch({
|
||
url: '/pages/game/game'
|
||
})
|
||
}
|
||
})
|
||
} else {
|
||
uni.showToast({
|
||
title: res2.data.msg,
|
||
icon: 'none'
|
||
})
|
||
}
|
||
},
|
||
fail: function (res) {
|
||
wx.showToast({
|
||
title: '登录失败',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
})
|
||
|
||
}).catch(err=>{
|
||
console.log(err)
|
||
})
|
||
},
|
||
// #endif
|
||
// #ifdef H5
|
||
async pageInit() {
|
||
await app.preloadImages([
|
||
'https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/index/TreasureHunter.png',
|
||
'https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/index/TreasureHunter-white.png',
|
||
'https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/index/icon.png',
|
||
'https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/index/star1.png',
|
||
'https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/index/findjoy.png',
|
||
'https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/index/bck.png',
|
||
'https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/index/star2.png',
|
||
'https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/index/star3.png',
|
||
'https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/index/star4.png',
|
||
'https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/index/star5.png',
|
||
'https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/index/circle.png',
|
||
'https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/index/logo.png',
|
||
'https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/index/mobile-icon.png'
|
||
])
|
||
this.isLoaded = true
|
||
return true
|
||
},
|
||
// #endif
|
||
// 打开用户协议
|
||
openAgreement(mode) {
|
||
app.playAudio()
|
||
if (mode == 0) {
|
||
this.$refs.pAgreementUser.open()
|
||
} else {
|
||
this.$refs.pAgreementPrivate.open()
|
||
}
|
||
|
||
},
|
||
/**
|
||
* 打开手机号登录弹窗
|
||
*/
|
||
goMobileLogin() {
|
||
app.playAudio() // 点击音效
|
||
this.isMobileLogin = true
|
||
this.$refs.pMobile.open()
|
||
},
|
||
/**
|
||
* 执行登录
|
||
*/
|
||
doLogin() {
|
||
app.playAudio() // 点击音效
|
||
if (!this.checkMobile()) return
|
||
if (!this.isTermsCheck) {
|
||
uni.showToast({
|
||
title: '请勾选用户协议',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
// #ifdef H5
|
||
let path = '/api/user/login',
|
||
data = {
|
||
mobile: this.userMoblie,
|
||
code: this.smscode
|
||
}
|
||
// 微信登录后绑定手机号
|
||
if (this.isWechatLogin) {
|
||
data.openid = app.getQueryString('openid')
|
||
path = '/api/user/wxRegister'
|
||
}
|
||
uni.showLoading({
|
||
title: '正在登录'
|
||
})
|
||
uni.request({
|
||
url: app.globalData.requestUrl + path,
|
||
method: 'POST',
|
||
data: data,
|
||
success: (res) => {
|
||
let toast = ''
|
||
console.log(res.data)
|
||
app.globalData.token = res.data.data.token
|
||
if (res.data.code === 200) {
|
||
uni.showToast({
|
||
title: '登录成功！',
|
||
icon: 'none'
|
||
})
|
||
uni.setStorage({
|
||
key: 'jinxiangguo_login_token',
|
||
data: res.data.data.token,
|
||
success: function () {
|
||
location.reload()
|
||
}
|
||
})
|
||
} else {
|
||
uni.showToast({
|
||
title: res.data.msg,
|
||
icon: 'none'
|
||
})
|
||
}
|
||
},
|
||
complete() {
|
||
uni.hideLoading()
|
||
}
|
||
})
|
||
// #endif
|
||
},
|
||
/**
|
||
* 发送验证码
|
||
*/
|
||
doSendSms() {
|
||
app.playAudio() // 点击音效
|
||
if (!this.checkMobile()) return
|
||
if (this.smscodeTime > 0) return
|
||
uni.request({
|
||
url: app.globalData.requestUrl + '/api/user/sms', //仅为示例，并非真实接口地址。
|
||
method: 'POST',
|
||
data: {
|
||
mobile: this.userMoblie
|
||
},
|
||
success: (res) => {
|
||
let toast = ''
|
||
console.log(res.data)
|
||
if (res.data.code === 200) {
|
||
toast = '验证码发送成功'
|
||
this.smscodeTime = 59
|
||
let time = setInterval(() => {
|
||
this.smscodeTime--
|
||
if (this.smscodeTime <= 0) {
|
||
clearInterval(time)
|
||
}
|
||
}, 1000)
|
||
} else {
|
||
toast = '验证码发送失败，请重试'
|
||
}
|
||
uni.showToast({
|
||
title: toast,
|
||
icon: 'none'
|
||
})
|
||
|
||
}
|
||
})
|
||
},
|
||
/**
|
||
* 验证手机号
|
||
*/
|
||
checkMobile() {
|
||
let reg = /^[1][3,4,5,7,8,9][0-9]{9}$/
|
||
if (!this.userMoblie) { //判断如果手机号为空，提示用户输入手机号
|
||
uni.showToast({
|
||
title: '请输入手机号',
|
||
icon: 'none'
|
||
})
|
||
return false
|
||
} else if (!reg.test(this.userMoblie)) { //判断手机号格式时候正确
|
||
uni.showToast({
|
||
title: '请输入正确的手机号',
|
||
icon: 'none'
|
||
})
|
||
return false
|
||
}
|
||
return true
|
||
}
|
||
},
|
||
watch: {}
|
||
}
|
||
</script>
|
||
<!--这里引入分离的界面样式代码-->
|
||
<style scoped>
|
||
@import './index.css';
|
||
</style> |