526 lines
12 KiB
Vue
526 lines
12 KiB
Vue
<template>
|
|
<!-- 登录页 -->
|
|
<view class=" page">
|
|
<!-- <view id="guide-2" class="preview" data-guide-text="请求结果">{{ result }}</view> -->
|
|
|
|
<view class=" flex-auto group_2 space-y-19">
|
|
<view class=" group_3 space-y-50">
|
|
<view class="center-t">
|
|
<image class="self-center image_6" src="../../static/login-头像.png" />
|
|
</view>
|
|
<view class=" space-y-26">
|
|
<view class="space-y-12" id="text-br">
|
|
<text class="text_2">快速授权登录</text>
|
|
<text class="text_3">创建一个帐户成为认证的蜂农</text>
|
|
</view>
|
|
<!-- 输入框 -->
|
|
<view class="space-y-16" v-if="false">
|
|
<view class="flex-row items-center section space-x-10 input-text" >
|
|
<image class="image_5" src="../../static/login-手机.png" />
|
|
<view>
|
|
<input v-model="registerForm.mobile" placeholder="输入手机" />
|
|
</view>
|
|
|
|
<!-- <text class="text_4">15588881111</text> -->
|
|
</view>
|
|
<view class="flex-row items-center section_2 space-x-10 input-text" >
|
|
<image class="image_5" src="../../static/login-密码.png" />
|
|
<view>
|
|
<input v-model="registerForm.nicheng" placeholder="输入昵称" />
|
|
</view>
|
|
<!-- <text class="font_1 text_5">输入昵称</text> -->
|
|
</view>
|
|
<view class="flex-row justify-between items-center section_2 yzm-text" >
|
|
<view class="flex-row items-center space-x-10 input-text">
|
|
<image class="shrink-0 image_5" src="../../static/login-验证码.png" />
|
|
<view>
|
|
<input class="input-text-t" v-model="registerForm.captcha" placeholder="输入验证码" />
|
|
</view>
|
|
<!-- <text class="font_1">请输入验证码</text> -->
|
|
</view>
|
|
<!-- 获取验证码 -->
|
|
<text v-if="anniukongjian" @click="huoquyanzheng" class="huoquyanzheng-class">获取验证码</text>
|
|
<text v-else class="huoquyanzheng-class">{{count}}秒后重发</text>
|
|
</view>
|
|
</view>
|
|
<!-- 按钮 -->
|
|
<view @click="login" class="justify-start items-center text-wrapper text-go" v-if="false"><text
|
|
class="text_6">同意并登录</text></view>
|
|
<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" class="justify-start items-center text-wrapper text-go" style="height:100rpx ;margin-top: 100rpx;"><text
|
|
class="text_6">同意授权并登录</text></button>
|
|
</view>
|
|
</view>
|
|
<view class="flex-row items-center group_5 space-x-6 xieyi-text" v-if="false">
|
|
<image @click="flageFn" class="shrink-0 image_8"
|
|
:src="flage ? '../../static/gouzi1.png' : '../../static/gouzi2.png'" />
|
|
<view class="group_6" >
|
|
<text class="font_2">已阅读并同意苏他AI云智慧蜂箱</text>
|
|
<text class="font_3 text_7">使用条款</text>
|
|
<text class="font_2">和</text>
|
|
<text class="font_3 text_7">隐私声明</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<u-toast ref="uToast"></u-toast>
|
|
<!-- <u-cell-group title-bg-color="rgb(243, 244, 246)">
|
|
<u-cell :titleStyle="{fontWeight: 500}" :title="item.title" v-for="(item, index) in list" :key="index" v-show="false"
|
|
isLink :icon="item.iconUrl" @click="showToast(item)">
|
|
</u-cell>
|
|
</u-cell-group> -->
|
|
|
|
</view>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import request from '../../utils/request'
|
|
export default {
|
|
data() {
|
|
return {
|
|
flage: true,
|
|
title: '蜂箱项目！！！！！',
|
|
registerForm: {
|
|
mobile: '',
|
|
nicheng: '',
|
|
captcha: ''
|
|
},
|
|
count: 60,
|
|
anniukongjian: true,
|
|
show: false,
|
|
list: [
|
|
{
|
|
type: 'error',
|
|
icon: false,
|
|
title: '失败主题',
|
|
message: "一弦一柱思华年",
|
|
iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png'
|
|
},
|
|
|
|
],
|
|
}
|
|
},
|
|
async onLoad() {
|
|
this.cheshi()
|
|
// this.autoGetPhoneNumber();
|
|
|
|
// console.log(code, 'codecode');
|
|
console.log('页面加载了')
|
|
// 遵循 err-first 规范 错误先行
|
|
// const [err,res] = await uni.request({url:''})
|
|
// 正常 propmise 规范
|
|
// const res = await uni.request({url:''})
|
|
},
|
|
onShow() {
|
|
console.log('页面显示')
|
|
},
|
|
|
|
methods: {
|
|
showToast() {
|
|
this.$refs.uToast.show({
|
|
type:'error',
|
|
duration:2000,
|
|
position:'center',
|
|
message:'暂未登录，请点击快速登录'
|
|
})
|
|
},
|
|
getPhoneNumber(e) {
|
|
console.log(this.flage,'that.flage');
|
|
uni.showLoading({
|
|
title: '加载中...',
|
|
})
|
|
let that = this;
|
|
if(that.flage==false){
|
|
console.log('没确认');
|
|
}else{
|
|
console.log("eeeeeeee", e);
|
|
const wxLoginAsync = () => {
|
|
return new Promise((resolve, reject) => {
|
|
wx.login({
|
|
success(res) {
|
|
console.log(res,'codecode');
|
|
if (res.code) {
|
|
console.log('登录！', res);
|
|
let data = {
|
|
code: res.code,
|
|
mobile_code: e.detail.code,
|
|
};
|
|
|
|
resolve(data);
|
|
} else {
|
|
reject(res.errMsg);
|
|
}
|
|
},
|
|
fail(err) {
|
|
reject(err);
|
|
}
|
|
});
|
|
});
|
|
};
|
|
|
|
wxLoginAsync()
|
|
.then(async (data) => {
|
|
try {
|
|
const res = await request.post('/api/user/wxlogin', data);
|
|
wx.setStorageSync('userToken', res.data.data.userinfo.token);
|
|
|
|
that.cheshi()
|
|
} catch (error) {
|
|
console.error(error);
|
|
}
|
|
})
|
|
.catch((err) => {
|
|
console.error(err);
|
|
});
|
|
}
|
|
|
|
},
|
|
async cheshi() {
|
|
try {
|
|
const res = await request.get('/api/index') // 基本数据
|
|
// console.log(res)
|
|
// console.log(eres,'图')
|
|
console.log(res.data, 'resres');
|
|
if(res.data.code==0){
|
|
console.log('进入跳转');
|
|
uni.hideLoading()
|
|
uni.switchTab({
|
|
url: '/pages/index/index'
|
|
})
|
|
}
|
|
// console.log(this.formData
|
|
} catch (error) {
|
|
uni.hideLoading()
|
|
console.log(error, 'aaa')
|
|
if (error.data.code == 401) {
|
|
// this.userlogin()
|
|
// this.showToast()
|
|
} else {
|
|
|
|
}
|
|
}
|
|
},
|
|
async userlogin(){
|
|
let code = await this.wxLogin();
|
|
try {
|
|
let data = {
|
|
code: code.js_code,
|
|
// mobile_code: e.detail.code,
|
|
};
|
|
const res = await request.post('/api/user/wxlogin', data);
|
|
console.log(res,'resres');
|
|
if(res.data.code==0){
|
|
wx.setStorageSync('userToken', res.data.data.userinfo.token);
|
|
console.log('进入跳转');
|
|
uni.switchTab({
|
|
url: '/pages/index/index'
|
|
})
|
|
}
|
|
// that.cheshi()
|
|
} catch (error) {
|
|
console.error(error);
|
|
}
|
|
},
|
|
// 点击登录
|
|
async login() {
|
|
try {
|
|
if (this.registerForm.mobile && this.registerForm.nicheng && this.registerForm.captcha) {
|
|
if (this.flage) {
|
|
// 发请求登录
|
|
const res = await request.post('/api/user/mobilelogin', {
|
|
mobile: this.registerForm.mobile,
|
|
captcha: this.registerForm.captcha
|
|
})
|
|
// 提示用户
|
|
uni.showToast({
|
|
title: res.data.msg,
|
|
icon: 'none',
|
|
duration: 2000
|
|
})
|
|
// console.log(res.data.data.userinfo.token)
|
|
// 判断 code 的值 1 失败 0 成功
|
|
if (res.data.code === 0) {
|
|
// 存储token
|
|
wx.setStorageSync('userToken', res.data.data.userinfo.token);
|
|
// 成功后跳转到首页
|
|
uni.switchTab({
|
|
url: '/pages/index/index'
|
|
})
|
|
}
|
|
} else {
|
|
uni.showToast({
|
|
title: '请勾选用户协议',
|
|
icon: 'none',
|
|
duration: 2000
|
|
})
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.log(error)
|
|
}
|
|
},
|
|
// 获取验证码
|
|
huoquyanzheng() {
|
|
const reg = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/
|
|
// 节流处理
|
|
if (this.anniukongjian) {
|
|
// 判断手机号是否正确
|
|
if (reg.test(this.registerForm.mobile)) {
|
|
this.anniukongjian = false
|
|
this.toCount()
|
|
} else {
|
|
// 提示用户
|
|
uni.showToast({
|
|
title: '手机号填写不正确',
|
|
icon: 'none',
|
|
duration: 2000
|
|
})
|
|
}
|
|
}
|
|
},
|
|
// 倒计时函数
|
|
toCount() {
|
|
const setintId = setInterval(() => {
|
|
if (this.count !== 1) {
|
|
this.count--
|
|
} else {
|
|
this.anniukongjian = true
|
|
this.count = 60
|
|
clearInterval(setintId)
|
|
}
|
|
}, 1000);
|
|
},
|
|
flageFn() {
|
|
this.flage = !this.flage
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.input-text-t {
|
|
width: 250rpx;
|
|
}
|
|
|
|
.xieyi-text {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.text-go {
|
|
text-align: center;
|
|
}
|
|
|
|
.yzm-text {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.input-text {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
#text-br {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.center-t {
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
.huoquyanzheng-class {
|
|
color: #23693f;
|
|
}
|
|
|
|
.page {
|
|
background-color: #ffffff;
|
|
filter: drop-shadow(0px 4rpx 4rpx #00000040);
|
|
width: 100%;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
height: 100vh;
|
|
}
|
|
|
|
.space-y-16>view:not(:first-child),
|
|
.space-y-16>text:not(:first-child),
|
|
.space-y-16>image:not(:first-child) {
|
|
margin-top: 32rpx;
|
|
}
|
|
|
|
.image_5 {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
}
|
|
|
|
.group_2 {
|
|
padding-top: 120rpx;
|
|
padding-bottom: 314rpx;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.space-y-19>view:not(:first-child),
|
|
.space-y-19>text:not(:first-child),
|
|
.space-y-19>image:not(:first-child) {
|
|
margin-top: 38rpx;
|
|
}
|
|
|
|
.group_3 {
|
|
padding: 50rpx 50rpx;
|
|
}
|
|
|
|
.space-y-50>view:not(:first-child),
|
|
.space-y-50>text:not(:first-child),
|
|
.space-y-50>image:not(:first-child) {
|
|
margin-top: 100rpx;
|
|
}
|
|
|
|
.image_6 {
|
|
width: 168rpx;
|
|
height: 206rpx;
|
|
}
|
|
|
|
.space-y-26>view:not(:first-child),
|
|
.space-y-26>text:not(:first-child),
|
|
.space-y-26>image:not(:first-child) {
|
|
margin-top: 52rpx;
|
|
}
|
|
|
|
.space-y-12>view:not(:first-child),
|
|
.space-y-12>text:not(:first-child),
|
|
.space-y-12>image:not(:first-child) {
|
|
margin-top: 24rpx;
|
|
}
|
|
|
|
.text_2 {
|
|
color: #23693f;
|
|
font-size: 50rpx;
|
|
font-family: Poppins;
|
|
font-weight: 600;
|
|
line-height: 46rpx;
|
|
}
|
|
|
|
.text_3 {
|
|
color: #888888;
|
|
font-size: 30rpx;
|
|
font-family: Poppins;
|
|
font-weight: 600;
|
|
line-height: 28rpx;
|
|
}
|
|
|
|
.section {
|
|
padding: 32rpx 20rpx;
|
|
background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/654c3cbd5a7e3f03102425f9/654c44a487ca550011b12cc1/16994974148140804523.png');
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.text_4 {
|
|
color: #000000;
|
|
font-size: 30rpx;
|
|
font-family: 微软雅黑;
|
|
line-height: 22rpx;
|
|
}
|
|
|
|
.section_2 {
|
|
padding: 32rpx 20rpx;
|
|
background-color: #f7f7f7;
|
|
border-radius: 50rpx;
|
|
}
|
|
|
|
.space-x-10>view:not(:first-child),
|
|
.space-x-10>text:not(:first-child),
|
|
.space-x-10>image:not(:first-child) {
|
|
margin-left: 20rpx;
|
|
}
|
|
|
|
.font_1 {
|
|
font-size: 30rpx;
|
|
font-family: 微软雅黑;
|
|
line-height: 28rpx;
|
|
color: #888888;
|
|
}
|
|
|
|
.text_5 {
|
|
color: #000000;
|
|
}
|
|
|
|
.group_4 {
|
|
margin-right: 12rpx;
|
|
}
|
|
|
|
.image_7 {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
}
|
|
|
|
.text-wrapper {
|
|
padding: 10rpx 0;
|
|
background-color: #23693f;
|
|
border-radius: 50rpx;
|
|
}
|
|
|
|
.text_6 {
|
|
color: #ffffff;
|
|
font-size: 36rpx;
|
|
font-family: Poppins;
|
|
font-weight: 600;
|
|
line-height: 34rpx;
|
|
}
|
|
|
|
.group_5 {
|
|
padding: 0 40rpx;
|
|
}
|
|
|
|
.space-x-6>view:not(:first-child),
|
|
.space-x-6>text:not(:first-child),
|
|
.space-x-6>image:not(:first-child) {
|
|
margin-left: 12rpx;
|
|
}
|
|
|
|
.image_8 {
|
|
border-radius: 50%;
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
}
|
|
|
|
.group_6 {
|
|
line-height: 24rpx;
|
|
opacity: 0.99;
|
|
height: 24rpx;
|
|
}
|
|
|
|
.font_2 {
|
|
font-size: 24rpx;
|
|
font-family: Poppins;
|
|
line-height: 24rpx;
|
|
color: #888888;
|
|
}
|
|
|
|
.font_3 {
|
|
font-size: 24rpx;
|
|
font-family: Poppins;
|
|
line-height: 24rpx;
|
|
font-weight: 600;
|
|
color: #23693f;
|
|
}
|
|
|
|
.text_7 {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
|
|
.preview {
|
|
border-radius: 10rpx;
|
|
margin: 0 30rpx;
|
|
min-height: 16em;
|
|
padding: 20rpx;
|
|
background-color: #f5f5f5;
|
|
color: #666666;
|
|
font-size: 24rpx;
|
|
white-space: break-spaces;
|
|
line-height: 1.6;
|
|
}
|
|
</style> |