372 lines
10 KiB
Vue
372 lines
10 KiB
Vue
<template>
|
||
<view class="container">
|
||
<image src="/static/banner_c.png" mode="widthFix" style="width:100%"></image>
|
||
<uni-segmented-control :current="current" :values="items" styleType="button" @clickItem="onClickItem">
|
||
</uni-segmented-control>
|
||
<view style="height: 8rpx;"></view>
|
||
<uni-section>
|
||
<view v-if="current==0" style="background-color;:white">
|
||
<uni-forms ref="form1" :modelValue="formData" label-position="left" border :rules="rules1">
|
||
<uni-forms-item required label="用户名" name="username">
|
||
<uni-easyinput type="text" v-model="formData.username" placeholder="请输入用户名" />
|
||
</uni-forms-item>
|
||
<uni-forms-item required label="密码" name="password">
|
||
<uni-easyinput type="password" v-model="formData.password" placeholder="请输入密码" />
|
||
</uni-forms-item>
|
||
</uni-forms>
|
||
</view>
|
||
<view v-if="current==1" style="background-color;:white">
|
||
<uni-forms ref="form2" :modelValue="formData2" label-position="left" border :rules="rules2">
|
||
<uni-forms-item label="手机号" name="phone" required>
|
||
<uni-easyinput type="number" v-model="formData2.phone" placeholder="请输入手机号" />
|
||
</uni-forms-item>
|
||
<uni-forms-item label="验证码" name="code" required>
|
||
<view style="display: flex;">
|
||
<view style="width: 60%;">
|
||
<uni-easyinput type="number" v-model="formData2.code" placeholder="请输入验证码" />
|
||
</view>
|
||
<view style="width: 40%;display: flex;justify-content: center;align-items: center;">
|
||
<span @click="getCode">{{content}}</span>
|
||
</view>
|
||
</view>
|
||
</uni-forms-item>
|
||
</uni-forms>
|
||
</view>
|
||
</uni-section>
|
||
<button style="background-color:#2979ff;color:white" @click="login(current)">登录</button>
|
||
<!-- <view style="text-align: center;margin-top: 20rpx;">
|
||
<uni-icons type="weixin" size="36" color="green" @click="wxmpLogin"></uni-icons>
|
||
<view style="text-align: center;font-size: 32rpx;">微信登陆</view>
|
||
</view> -->
|
||
<view v-show="dShow" style="position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, .5);z-index: 999;">
|
||
<view style="position: absolute;padding: 50rpx;background: #ffffff;display: inline-block;margin: auto;top: 40%;left: 50%;transform: translateX(-50%);">
|
||
下载中 请勿退出 {{percentVal}}%
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import config from '/utils/config';
|
||
export default {
|
||
data() {
|
||
return {
|
||
current: 0,
|
||
items: ['密码登录', '验证码登录'],
|
||
content: '获取验证码',
|
||
formData: {},
|
||
formData2: {},
|
||
timer: null,
|
||
time: 30,
|
||
rules1: {
|
||
username: {
|
||
rules: [{
|
||
required: true,
|
||
errorMessage: '请填写',
|
||
}]
|
||
},
|
||
password: {
|
||
rules: [{
|
||
required: true,
|
||
errorMessage: '请填写',
|
||
}]
|
||
}
|
||
},
|
||
rules2: {
|
||
phone: {
|
||
rules: [{
|
||
required: true,
|
||
errorMessage: '请填写',
|
||
}]
|
||
},
|
||
code: {
|
||
rules: [{
|
||
required: true,
|
||
errorMessage: '请填写',
|
||
}]
|
||
}
|
||
},
|
||
wxmp_openid: null,
|
||
dShow: false,
|
||
percentVal: 0
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
var that = this
|
||
var autoLoading = options.autoLoading;
|
||
that.checkVersion();
|
||
if (autoLoading != 'no') {
|
||
// #ifdef APP-PLUS || H5
|
||
that.appLogin()
|
||
// #endif
|
||
// #ifdef MP-WEIXIN
|
||
that.wxmpLogin()
|
||
// #endif
|
||
}
|
||
},
|
||
onUnload() {
|
||
if (this.timer) {
|
||
clearInterval(this.timer);
|
||
this.timer = null;
|
||
}
|
||
},
|
||
onShow() {
|
||
// #ifdef MP-WEIXIN
|
||
uni.hideHomeButton()
|
||
// #endif
|
||
},
|
||
methods: {
|
||
checkVersion() {
|
||
let that = this;
|
||
uni.getSystemInfo({
|
||
success(res) {
|
||
uni.setStorageSync("vuex_version", res.appVersion)
|
||
// #ifdef APP-PLUS
|
||
if (res.platform == 'android') {
|
||
that.$api.apkCheck().then(res1 => {
|
||
if (res.appWgtVersion != res1.version) {
|
||
uni.showModal({
|
||
title: "版本更新",
|
||
content: '有新的版本发布, 请下载新版本',
|
||
confirmText: '立即更新',
|
||
cancelText: '稍后进行',
|
||
success: function(res2) {
|
||
if (res2.confirm) {
|
||
let fullurl = res1.file
|
||
if (res1.file.indexOf("http") == -1) {
|
||
fullurl = config.baseUrl + res1.file
|
||
}
|
||
that.dShow =
|
||
true // show变量控制一个下载进度弹框（这个UI样式自己写即可）
|
||
uni.hideTabBar()
|
||
// 创建一个下载任务，并根据后端返回的apk静态资源地址filePath进行下载
|
||
var dtask = plus.downloader.createDownload(
|
||
fullurl, {},
|
||
function(d, status) {
|
||
// 下载完成
|
||
if (status == 200) {
|
||
that.dShow =
|
||
false // 下载完成再把下载进度弹框关闭即可
|
||
uni.showTabBar();
|
||
plus.runtime.install(plus.io
|
||
.convertLocalFileSystemURL(
|
||
d
|
||
.filename), {}, {},
|
||
function(error) {
|
||
uni.showToast({
|
||
title: '安装失败',
|
||
duration: 1500
|
||
});
|
||
})
|
||
} else {
|
||
uni.showToast({
|
||
title: '更新失败',
|
||
duration: 1500
|
||
});
|
||
}
|
||
});
|
||
|
||
function onStateChanged(download, status) {
|
||
|
||
if (status == 200) {
|
||
const totalSize = download.totalSize
|
||
let nowSize = download.downloadedSize
|
||
that.percentVal = nowSize / 17700000 *
|
||
100 > 99 ? 99 : (nowSize /
|
||
17700000 * 100).toFixed(0)
|
||
}
|
||
|
||
}
|
||
dtask.addEventListener("statechanged",
|
||
onStateChanged, false);
|
||
dtask.start();
|
||
} else {
|
||
|
||
}
|
||
}
|
||
});
|
||
}
|
||
})
|
||
}
|
||
// #endif
|
||
}
|
||
})
|
||
},
|
||
wxmpLogin() {
|
||
var that = this;
|
||
uni.showLoading({
|
||
title: '自动登录中...',
|
||
mask: true
|
||
})
|
||
uni.login({
|
||
provider: 'weixin',
|
||
success: (loginRes) => {
|
||
that.$api.wxmpLogin({
|
||
code: loginRes.code
|
||
}).then(res => {
|
||
uni.setStorageSync('access', res.access)
|
||
that.$api.getUserInfo().then(res => {
|
||
uni.setStorageSync('userInfo', res)
|
||
uni.reLaunch({
|
||
url: '/pages/index/index'
|
||
})
|
||
|
||
})
|
||
}).catch(e => {
|
||
this.wxmp_openid = e.data.wxmp_openid
|
||
})
|
||
},
|
||
complete: function() {
|
||
uni.hideLoading();
|
||
},
|
||
})
|
||
},
|
||
appLogin() {
|
||
var that = this;
|
||
// App自动登录
|
||
uni.showLoading({
|
||
title: '自动登录中...',
|
||
mask: true
|
||
})
|
||
uni.getStorage({
|
||
key: 'mySecret',
|
||
success: function(res) {
|
||
let secret = res.data
|
||
if (secret) {
|
||
that.$api.loginSecret(JSON.parse(secret)).then(res => {
|
||
uni.setStorageSync('access', res.access)
|
||
that.$api.getUserInfo().then(res => {
|
||
uni.setStorageSync('userInfo', res)
|
||
uni.reLaunch({
|
||
url: '/pages/index/index'
|
||
})
|
||
})
|
||
})
|
||
}
|
||
},
|
||
complete: function() {
|
||
uni.hideLoading();
|
||
},
|
||
|
||
});
|
||
},
|
||
onClickItem(e) {
|
||
if (this.current !== e.currentIndex) {
|
||
this.current = e.currentIndex
|
||
}
|
||
},
|
||
countDown() {
|
||
var that = this;
|
||
if (that.time >= 0) {
|
||
that.content = that.time.toString() + '秒';
|
||
--that.time
|
||
} else {
|
||
clearInterval(that.timer)
|
||
that.timer = null
|
||
that.content = '获取验证码'
|
||
}
|
||
},
|
||
getCode() {
|
||
var that = this
|
||
if (that.content == '获取验证码') {
|
||
if (that.$check.mobile(that.formData2.phone)) {
|
||
that.$api.getCode({
|
||
phone: that.formData2.phone
|
||
}).then(res => {
|
||
uni.showToast({
|
||
icon: "none",
|
||
title: '验证码已发送'
|
||
})
|
||
setInterval(that.countDown, 1000)
|
||
})
|
||
} else {
|
||
uni.showToast({
|
||
icon: "none",
|
||
title: '手机号格式有误'
|
||
})
|
||
}
|
||
}
|
||
},
|
||
login() {
|
||
var that = this;
|
||
if (that.current == 1) {
|
||
that.$refs.form2.validate().then(res0 => {
|
||
that.$api.codeLogin(res0).then(res => {
|
||
uni.setStorageSync('access', res.access)
|
||
that.$api.getUserInfo().then(res => {
|
||
uni.setStorageSync('userInfo', res)
|
||
that.bindXX()
|
||
uni.reLaunch({
|
||
url: '/pages/index/index'
|
||
})
|
||
})
|
||
})
|
||
}).catch(err => {
|
||
console.log('表单错误信息：', err);
|
||
})
|
||
} else if (that.current == 0) {
|
||
that.$refs.form1.validate().then(res0 => {
|
||
that.$api.login(res0).then(res => {
|
||
uni.setStorageSync('access', res.access)
|
||
that.bindXX()
|
||
that.$api.getUserInfo().then(res => {
|
||
uni.setStorageSync('userInfo', res)
|
||
uni.reLaunch({
|
||
url: '/pages/index/index'
|
||
})
|
||
})
|
||
})
|
||
}).catch(err => {
|
||
console.log('表单错误信息：', err);
|
||
})
|
||
}
|
||
},
|
||
ranStr(e) {
|
||
//形参e,需要产生随机字符串的长度
|
||
//如果没有传参，默认生成32位长度随机字符串
|
||
e = e || 32;
|
||
//模拟随机字符串库
|
||
var t = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz0123456789",
|
||
a = t.length, //字符串t的长度，随机数生成最大值
|
||
n = "";
|
||
for (let i = 0; i < e; i++) {
|
||
//随机生成长度为e的随机字符串拼接
|
||
n += t.charAt(Math.floor(Math.random() * a));
|
||
}
|
||
//返回随机组合字符串
|
||
return n
|
||
},
|
||
bindXX() {
|
||
let that = this;
|
||
// #ifdef APP-PLUS || H5
|
||
let userInfo = uni.getStorageSync("userInfo")
|
||
let secret = that.ranStr(12)
|
||
let mySecret = {
|
||
'username': userInfo.username,
|
||
'secret': secret
|
||
}
|
||
this.$api.bindSecret({
|
||
secret: secret
|
||
}).then(res => {
|
||
uni.setStorageSync('mySecret', JSON.stringify(mySecret))
|
||
}).catch(e => {})
|
||
// #endif
|
||
// #ifdef MP-WEIXIN
|
||
if (this.wxmp_openid != null) {
|
||
this.$api.bindWxmp({
|
||
"openid": this.wxmp_openid
|
||
}).then(res => {
|
||
|
||
})
|
||
}
|
||
// #endif
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.uni-section-header {
|
||
padding: 0px 0px !important;
|
||
}
|
||
</style> |