530 lines
13 KiB
Vue
530 lines
13 KiB
Vue
<template>
|
||
<view :animation="anidataauth" class="auth">
|
||
<view class="swiper" :style="{transform: 'translateX(' + pg + 'vw)',height:height}">
|
||
<!-- 注册页面 -->
|
||
<view class="content">
|
||
<view class="title">
|
||
<ciy-gesture @toleft="gopg(1)" class="mid" style="letter-spacing: 1em;">{{lang('login.tabreg')}}</ciy-gesture>
|
||
<view class="itm" @tap="gopg(1)">{{lang('login.tablogin')}}</view>
|
||
<view class="itm" @tap="gopg(2)">{{lang('login.tabforget')}}</view>
|
||
</view>
|
||
<form @submit="submitreg">
|
||
<view style="width:600rpx;margin:0.5em auto;">
|
||
<view class="ciy-form">
|
||
<label>{{lang('login.form_mobile')}}</label>
|
||
<view>
|
||
<ciy-input type="number" name="user" placeholder="请输入手机号"></ciy-input>
|
||
</view>
|
||
</view>
|
||
<view class="ciy-form">
|
||
<label>{{lang('login.form_setpass')}}</label>
|
||
<view>
|
||
<ciy-input name="pass" type="password" placeholder="请输入登录密码"></ciy-input>
|
||
</view>
|
||
</view>
|
||
<view class="ciy-form">
|
||
<label>{{lang('login.form_repass')}}</label>
|
||
<view>
|
||
<ciy-input name="pass2" type="password" placeholder="再次输入登录密码"></ciy-input>
|
||
</view>
|
||
</view>
|
||
<view style="margin:1em 0;">
|
||
<ciy-checkitem sq v-model="xieyi">
|
||
已阅读并同意《
|
||
<text @tap="gourl" :data-url="lang('login.xieyi')" style="color:#0000FF;">
|
||
用户协议
|
||
</text>》。
|
||
</ciy-checkitem>
|
||
</view>
|
||
<view style="text-align: center;padding-top:1em;">
|
||
<button class="btn lg cc" form-type="submit">{{lang('login.btn_reg')}}</button>
|
||
</view>
|
||
</view>
|
||
</form>
|
||
</view>
|
||
|
||
<!-- 登录页面 -->
|
||
<view class="content">
|
||
<view class="title">
|
||
<view @tap="gopg(0)" style="padding-right:2em;">{{lang('login.tabreg')}}</view>
|
||
<ciy-gesture @todown="close" class="mid" style="letter-spacing: 1em;padding-left: 0.5em;" @toright="gopg(0)" @toleft="gopg(2)">{{lang('login.tablogin')}}</ciy-gesture>
|
||
<view @tap="gopg(2)">{{lang('login.tabforget')}}</view>
|
||
</view>
|
||
<form @submit="submitlogin">
|
||
<view style="width:600rpx;margin:0.5em auto;">
|
||
<view class="ciy-form">
|
||
<label @tap="showver">{{lang('login.form_mobile')}}</label>
|
||
<view>
|
||
<ciy-input :value="user" type="number" name="user" placeholder="请输入手机号"></ciy-input>
|
||
</view>
|
||
</view>
|
||
<view class="ciy-form">
|
||
<label>{{lang('login.form_pass')}}</label>
|
||
<view>
|
||
<ciy-input :value="pass" name="pass" type="password" placeholder="请输入密码"></ciy-input>
|
||
</view>
|
||
</view>
|
||
<view style="margin:1em 0;">
|
||
<ciy-checkitem sq v-model="xieyi">
|
||
已阅读并同意《
|
||
<text @tap="gourl" :data-url="lang('login.xieyi')" style="color:#0000FF;">
|
||
用户协议
|
||
</text>》。
|
||
</ciy-checkitem>
|
||
</view>
|
||
<view style="text-align: center;padding-top:1em;">
|
||
<button class="btn lg cc" style="width: 100%;" form-type="submit">{{lang('login.btn_login')}}</button>
|
||
</view>
|
||
<view style="display:inline-block;min-width:2em;min-height:2em;">
|
||
<view v-if="tusers.length > 0" class="cuser">
|
||
<view class="itm code" @tap="setdbg(index)" v-for="(item,index) in tusers" :key="index">
|
||
{{item.name}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view v-if="ver<-6" style="text-align: center;color:var(--txt1)">众产(杭州)科技有限公司</view>
|
||
</view>
|
||
</form>
|
||
</view>
|
||
|
||
<!-- 忘记密码页面 -->
|
||
<view class="content">
|
||
<view class="title">
|
||
<view @tap="gopg(0)">{{lang('login.tabreg')}}</view>
|
||
<view @tap="gopg(1)">{{lang('login.tablogin')}}</view>
|
||
<ciy-gesture @toright="gopg(1)" class="mid">{{lang('login.tabforget')}}</ciy-gesture>
|
||
</view>
|
||
<form @submit="submitforget">
|
||
<view style="width:600rpx;margin:0.5em auto;">
|
||
<view class="ciy-form">
|
||
<label>{{lang('login.form_mobile')}}</label>
|
||
<view>
|
||
<ciy-input v-model="forgetmobile" name="user" type="number" placeholder="请输入手机号"></ciy-input>
|
||
</view>
|
||
</view>
|
||
<view class="ciy-form">
|
||
<label>验证码</label>
|
||
<view>
|
||
<ciy-capcode hasmore name="captcha" btntxt="发送短信" :account="forgetmobile" :func="smsfunc" placeholder="请输入验证码"></ciy-capcode>
|
||
</view>
|
||
</view>
|
||
<view class="ciy-form">
|
||
<label>新密码</label>
|
||
<view>
|
||
<ciy-input name="pass" type="password" placeholder="请输入新密码"></ciy-input>
|
||
</view>
|
||
</view>
|
||
<view class="ciy-form">
|
||
<label>再次输入</label>
|
||
<view>
|
||
<ciy-input name="pass2" type="password" placeholder="再次输入新密码"></ciy-input>
|
||
</view>
|
||
</view>
|
||
<view style="text-align: center;padding-top:1em;">
|
||
<button class="btn lg cc" form-type="submit">{{lang('login.btn_forget')}}</button>
|
||
</view>
|
||
</view>
|
||
</form>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view :animation="anidatabg" class="authbg" @tap="close"></view>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.cuser {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
padding-bottom: 2em;
|
||
}
|
||
|
||
.cuser>.itm {
|
||
margin: 0.5em;
|
||
}
|
||
|
||
.title {
|
||
display: flex;
|
||
text-align: center;
|
||
font-size: 1em;
|
||
margin: 1em;
|
||
align-items: flex-end;
|
||
}
|
||
|
||
.title>.itm {
|
||
text-decoration: underline;
|
||
padding: 0 1em;
|
||
min-width: 4em;
|
||
}
|
||
|
||
.title .mid {
|
||
text-decoration: none;
|
||
font-weight: bolder;
|
||
font-size: 1.6em;
|
||
padding: 0;
|
||
flex: 1;
|
||
background: linear-gradient(30deg, var(--man5), var(--man7));
|
||
background-clip: text;
|
||
-webkit-background-clip: text;
|
||
color: transparent;
|
||
}
|
||
|
||
.auth {
|
||
position: fixed;
|
||
z-index: 50002;
|
||
bottom: -2em;
|
||
left: 0;
|
||
right: 0;
|
||
transform: translateY(28em)
|
||
}
|
||
|
||
.authbg {
|
||
position: fixed;
|
||
z-index: 50001;
|
||
top: 0;
|
||
bottom: 0;
|
||
left: -0.5em;
|
||
right: -0.5em;
|
||
touch-action: none;
|
||
background: linear-gradient(0deg, var(--bg2), transparent);
|
||
transform: translateY(100vh);
|
||
}
|
||
|
||
.auth .swiper {
|
||
display: flex;
|
||
width: 300vw;
|
||
flex-wrap: nowrap;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.auth .content {
|
||
width: 100vw;
|
||
margin: 0 0.5em;
|
||
border-radius: 1em 1em 0 0;
|
||
background: radial-gradient(at center 5em, var(--bg1), var(--bg3));
|
||
overflow: auto;
|
||
box-shadow: 2px 2px 20px -10px var(--bg9);
|
||
}
|
||
</style>
|
||
|
||
<script>
|
||
import md5 from '@/util/md5.js';
|
||
export default {
|
||
props: {},
|
||
data() {
|
||
return {
|
||
forgetmobile: '',
|
||
smsfunc: '',
|
||
user: '',
|
||
pass: '',
|
||
xieyi: false,
|
||
pg: -100,
|
||
ver: 6,
|
||
height: '28em',
|
||
tusers: [],
|
||
anidataauth: {},
|
||
anidatabg: {},
|
||
};
|
||
},
|
||
options: {
|
||
virtualHost: true
|
||
},
|
||
mounted() {},
|
||
methods: {
|
||
// 打开登录弹窗
|
||
async Open(authcb, must) {
|
||
this.authcb = authcb;
|
||
if (!must) {
|
||
var me = this.getme();
|
||
if (me.id > 0) {
|
||
authcb({
|
||
me: me
|
||
});
|
||
this.authcb = null;
|
||
return;
|
||
}
|
||
//#ifdef MP-WEIXIN
|
||
var upid = this.toint(this.getstorage('upid'));
|
||
var res = await uni.login({
|
||
provider: 'weixin',
|
||
scopes: 'auth_base',
|
||
onlyAuthorize: true
|
||
});
|
||
var retjson = await this.callfunc({
|
||
func: 'login.json_wx_autouser',
|
||
loadhide: true,
|
||
data: {
|
||
code: res.code,
|
||
upid: upid
|
||
}
|
||
});
|
||
if (retjson.code != 1)
|
||
return;
|
||
this.tologin(retjson);
|
||
return;
|
||
//#endif
|
||
}
|
||
// 动画显示
|
||
var animation = uni.createAnimation({
|
||
timingFunction: 'ease'
|
||
});
|
||
animation.translateY(0);
|
||
animation.step({
|
||
duration: 700
|
||
});
|
||
this.anidataauth = animation.export();
|
||
|
||
var animation = uni.createAnimation({
|
||
timingFunction: 'ease'
|
||
});
|
||
animation.translateY(0);
|
||
animation.step({
|
||
duration: 400
|
||
});
|
||
this.anidatabg = animation.export();
|
||
|
||
this.user = this.getstorage('login_mb');
|
||
this.smsfunc = 'login.json_sendsms';
|
||
},
|
||
|
||
// 登录提交
|
||
async submitlogin(e) {
|
||
var app = getApp();
|
||
var post = e.detail.value;
|
||
|
||
if (post.user.length > 0)
|
||
this.setstorage('login_mb', post.user);
|
||
if (post.user == '')
|
||
return this.toast('请填写手机号');
|
||
if (post.pass == '')
|
||
return this.toast('请填写密码');
|
||
if (!this.xieyi && await this.askmsg('是否阅读并同意协议？', '同意') != 'ok')
|
||
return;
|
||
|
||
// 时间戳（毫秒级）
|
||
post.auth = (new Date()).getTime();
|
||
post.appcid = app.globalData._appcid;
|
||
|
||
// 密码加密：md5(用户输入密码MD5 + auth时间戳)
|
||
var userPassMd5 = md5.md5(post.pass);
|
||
post.pass = md5.md5(userPassMd5 + post.auth);
|
||
|
||
// 调用登录接口
|
||
var retjson = await this.callfunc({
|
||
func: 'login.json_login_mobile',
|
||
data: post
|
||
});
|
||
|
||
if (retjson.code != 1)
|
||
return this.toast(retjson.errmsg);
|
||
|
||
this.setstorage('_dbgs', retjson.dbgs);
|
||
this.tologin(retjson);
|
||
},
|
||
|
||
// 注册提交
|
||
async submitreg(e) {
|
||
var app = getApp();
|
||
var post = e.detail.value;
|
||
|
||
if (post.user == '')
|
||
return this.toast('请填写手机号');
|
||
if (post.pass == '')
|
||
return this.toast('请填写密码');
|
||
if (post.pass != post.pass2)
|
||
return this.toast('两次密码输入不同');
|
||
if (!this.xieyi && await this.askmsg('是否阅读并同意协议？', '同意') != 'ok')
|
||
return;
|
||
|
||
post.upid = app.getstorage('upid');
|
||
post.appcid = app.globalData._appcid;
|
||
// 密码加密：MD5(用户输入密码)
|
||
post.pass = md5.md5(post.pass);
|
||
post.pass2 = '';
|
||
|
||
// 调用注册接口
|
||
var retjson = await this.callfunc({
|
||
func: 'login.json_reg_mobile',
|
||
data: post
|
||
});
|
||
|
||
if (retjson.code != 1)
|
||
return this.toast(retjson.errmsg);
|
||
|
||
this.setstorage('login_mb', post.user);
|
||
this.tologin(retjson);
|
||
this.toast('注册成功，已自动登录');
|
||
},
|
||
|
||
// 忘记密码提交
|
||
async submitforget(e) {
|
||
var app = getApp();
|
||
var post = e.detail.value;
|
||
|
||
if (post.user == '')
|
||
return this.toast('请填写手机号');
|
||
if (post.captcha == '')
|
||
return this.toast('请填写验证码');
|
||
if (post.pass == '')
|
||
return this.toast('请填写密码');
|
||
if (post.pass != post.pass2)
|
||
return this.toast('两次密码输入不同');
|
||
|
||
// 密码加密：MD5(用户输入密码)
|
||
post.pass = md5.md5(post.pass);
|
||
|
||
// 调用忘记密码接口
|
||
var retjson = await this.callfunc({
|
||
func: 'login.json_forgetpass',
|
||
data: post
|
||
});
|
||
|
||
if (retjson.code != 1)
|
||
return this.toast(retjson.errmsg);
|
||
|
||
this.tologin(retjson);
|
||
this.toast('密码找回成功，已自动登录');
|
||
},
|
||
|
||
// 登录成功处理
|
||
tologin(json) {
|
||
var app = getApp();
|
||
var auth = app.setuserstorage(json);
|
||
if (this.authcb != null)
|
||
this.authcb(auth);
|
||
this.authcb = null;
|
||
this.close();
|
||
},
|
||
|
||
// 切换页面
|
||
gopg(idx) {
|
||
this.pg = idx * -100;
|
||
},
|
||
|
||
// 关闭登录弹窗
|
||
close() {
|
||
if (this.authcb != null)
|
||
this.authcb({
|
||
me: {
|
||
id: 0
|
||
}
|
||
});
|
||
this.authcb = null;
|
||
|
||
var animation = uni.createAnimation({
|
||
timingFunction: 'ease'
|
||
});
|
||
animation.translateY(this.height);
|
||
animation.step({
|
||
duration: 1000
|
||
});
|
||
this.anidataauth = animation.export();
|
||
|
||
var animation = uni.createAnimation({
|
||
timingFunction: 'ease'
|
||
});
|
||
animation.translateY('100vh');
|
||
animation.step({
|
||
duration: 1000
|
||
});
|
||
this.anidatabg = animation.export();
|
||
},
|
||
|
||
// 显示调试用户
|
||
async showver(e) {
|
||
this.ver--;
|
||
if (this.ver !== 0)
|
||
return;
|
||
var app = getApp();
|
||
if (app.globalData._wxenv == 'release')
|
||
return;
|
||
|
||
var retjson = await this.callfunc({
|
||
func: 'login.json_debug_list',
|
||
data: {}
|
||
});
|
||
this.tusers = retjson.list;
|
||
},
|
||
|
||
// 设置调试用户
|
||
setdbg(idx) {
|
||
this.xieyi = true;
|
||
this.user = this.tusers[idx].user;
|
||
this.pass = this.tusers[idx].pass;
|
||
},
|
||
|
||
// 获取用户信息
|
||
getme() {
|
||
return uni.getStorageSync('me') || {id: 0};
|
||
},
|
||
|
||
// 获取本地存储
|
||
getstorage(key) {
|
||
return uni.getStorageSync(key) || '';
|
||
},
|
||
|
||
// 设置本地存储
|
||
setstorage(key, value) {
|
||
uni.setStorageSync(key, value);
|
||
},
|
||
|
||
// 转整数
|
||
toint(val) {
|
||
return parseInt(val) || 0;
|
||
},
|
||
|
||
// 提示框
|
||
toast(msg) {
|
||
uni.showToast({
|
||
title: msg,
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
},
|
||
|
||
// 确认弹窗
|
||
askmsg(content, confirmText = '确定') {
|
||
return new Promise((resolve) => {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: content,
|
||
confirmText: confirmText,
|
||
success: (res) => {
|
||
resolve(res.confirm ? 'ok' : 'cancel');
|
||
}
|
||
});
|
||
});
|
||
},
|
||
|
||
// 接口调用封装
|
||
async callfunc(options) {
|
||
return new Promise((resolve) => {
|
||
uni.request({
|
||
url: 'http://localhost:5173/ambap/login.php', // 根据实际接口地址调整
|
||
method: 'POST',
|
||
data: {
|
||
act: options.func,
|
||
...options.data
|
||
},
|
||
success: (res) => {
|
||
resolve(res.data || {code: 0, errmsg: '接口返回异常'});
|
||
},
|
||
fail: (err) => {
|
||
this.toast('网络请求失败');
|
||
resolve({code: 0, errmsg: '网络错误'});
|
||
}
|
||
});
|
||
});
|
||
},
|
||
|
||
// 跳转链接（用户协议）
|
||
gourl(e) {
|
||
var url = e.currentTarget.dataset.url;
|
||
if (url) {
|
||
uni.navigateTo({
|
||
url: url
|
||
});
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script> |