初次提交
This commit is contained in:
546
pages/login/index.vue
Normal file
546
pages/login/index.vue
Normal file
@ -0,0 +1,546 @@
|
||||
<template>
|
||||
<view class="wrap">
|
||||
<!-- 首页背景图片 -->
|
||||
<!-- <image src="/static/aidex/login/login-bg.png" class="logo"></image> -->
|
||||
<view class="logo">
|
||||
|
||||
</view>
|
||||
<image src="/static/aidex/login/bg-logo.png" class="center-logo"></image>
|
||||
|
||||
<!--首页用户密码输入框 -->
|
||||
|
||||
<view class="EnglishFont">
|
||||
Welcome to Hoenergy！
|
||||
</view>
|
||||
|
||||
<u-select v-model="langShow" :list="Langlist" @confirm="changeLanguage"></u-select>
|
||||
|
||||
<u-radio-group v-model="StationValue" @change="radioGroupChange" active-color="#009C77">
|
||||
<u-radio @change="radioChange" v-for="(item, index) in $t('homePage.home.stationType')" :key="index" :name="item.name">
|
||||
{{ item.name }}
|
||||
</u-radio>
|
||||
</u-radio-group>
|
||||
|
||||
<view class="user-card">
|
||||
<view class="list">
|
||||
|
||||
<view class="zhanghao">
|
||||
{{ $t('homePage.home.account') }}
|
||||
</view>
|
||||
<view class="list-call-user">
|
||||
<input class="u-input" type="text" v-model="username" maxlength="32" :placeholder="$t('homePage.home.placeAccount')" />
|
||||
<image class="u-icon-delete" src="/static/aidex/login/user-delete.png" @click="clearUser" style="z-index: 0;">
|
||||
</image>
|
||||
</view>
|
||||
|
||||
<view class="zhanghao">
|
||||
{{ $t('homePage.home.password') }}
|
||||
</view>
|
||||
<view class="list-call-password">
|
||||
|
||||
<input class="u-input" type="text" v-model="password" maxlength="32" :placeholder="$t('homePage.home.placePassword')" :password="!showPassword" />
|
||||
<image class="u-icon-right" :src="'/static/aidex/login/eye_' +
|
||||
(showPassword ? 'open' : 'close') +
|
||||
'.png'" style="z-index: infinity;" @click="showPass()"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 登录按钮 -->
|
||||
|
||||
<view class="button" @click="submit('app')"><text>{{ $t('homePage.home.login') }}</text></view>
|
||||
|
||||
|
||||
<view class="shouquan">
|
||||
<u-checkbox v-model="checked" shape="circle" active-color="#009C77"></u-checkbox>
|
||||
<view class="yonghuxieyi">
|
||||
{{ $t('homePage.home.ydty') }}
|
||||
<span class="xieyi" @click="openMsg">《{{ $t('homePage.home.yhxy') }}》</span>
|
||||
{{ $t('homePage.home.and') }}
|
||||
<span class="xieyi" @click="openMsg">《{{ $t('homePage.home.yszc') }}》</span>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view style="margin-top: 60rpx;display: flex;align-items: center;">
|
||||
<view class="Line">
|
||||
|
||||
</view>
|
||||
<view style="margin-left:10rpx;margin-right: 10rpx;color: grey;">
|
||||
{{ $t('homePage.home.lang') }}
|
||||
</view>
|
||||
<view class="Line2">
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view style="margin-top: 10rpx;display: flex;align-items: center;" @click="langShow = true">
|
||||
<u-icon name="/static/aidex/images/lang.png" size="50" color="#ffaa00" style="margin-right: 10rpx;"></u-icon>
|
||||
<view style="color: #6AC5AF">{{ langValue === 'zh_CN' ? 'ZH' : 'EN' }}</view>
|
||||
</view>
|
||||
<!-- 新增游客登录按钮 -->
|
||||
<view class="guest-button" @click="guestLogin">
|
||||
<text>{{ $t('homePage.home.guestLogin') }}</text>
|
||||
</view>
|
||||
|
||||
<messageModel v-if="showMsg" @submit="agree" @quit="quit" />
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
encryptPsd,
|
||||
JSEncryptData
|
||||
} from "@/common/common.js"
|
||||
import messageModel from './components/dialog.vue'
|
||||
import config from '@/common/config.js'
|
||||
export default {
|
||||
components: { messageModel },
|
||||
data () {
|
||||
return {
|
||||
Langlist: [{
|
||||
value: 'zh_CN',
|
||||
label: '中文'
|
||||
},
|
||||
{
|
||||
value: 'en_US',
|
||||
label: 'English'
|
||||
}
|
||||
],
|
||||
phoneNo: "",
|
||||
username: "",
|
||||
password: "",
|
||||
loginType: "app",
|
||||
langShow: false,
|
||||
showPassword: false,
|
||||
remember: true,
|
||||
isValidCodeLogin: false,
|
||||
validCode: "",
|
||||
imgValidCodeSrc: null,
|
||||
list: [{
|
||||
name: "用户名",
|
||||
},
|
||||
{
|
||||
name: "手机号",
|
||||
},
|
||||
],
|
||||
current: 0,
|
||||
activeColor: "#007aff",
|
||||
show: false,
|
||||
showDialog: false,
|
||||
newFileData: {},
|
||||
newVersion: null,
|
||||
isShowProgress: false,
|
||||
progress: 0,
|
||||
innerVer: null,
|
||||
versionCode: null,
|
||||
message: '',
|
||||
checked: false,
|
||||
showMsg: false,
|
||||
Stationlist: this.$t('homePage.home.stationType'),
|
||||
// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
|
||||
StationValue: '',
|
||||
}
|
||||
},
|
||||
onLoad () {
|
||||
this.username = uni.getStorageSync('username')
|
||||
this.password = uni.getStorageSync('password')
|
||||
},
|
||||
computed: {
|
||||
userName () {
|
||||
return this.vuex_username
|
||||
},
|
||||
userPassword () {
|
||||
return this.vuex_password
|
||||
},
|
||||
langValue () {
|
||||
return this.vuex_language
|
||||
},
|
||||
language () {
|
||||
return this.vuex_language
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
language: {
|
||||
immediate: true,
|
||||
deep: true,
|
||||
handler (val) {
|
||||
if (val === 'zh_CN') {
|
||||
if (this.StationValue === 'China Station' || this.StationValue === '') {
|
||||
this.StationValue = '中国站'
|
||||
} else if (this.StationValue === 'Overseas Station') {
|
||||
this.StationValue = '海外站'
|
||||
}
|
||||
}else{
|
||||
if (this.StationValue === '中国站' || this.StationValue === '') {
|
||||
this.StationValue = 'China Station'
|
||||
} else if (this.StationValue === '海外站') {
|
||||
this.StationValue = 'Overseas Station'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
StationValue: {
|
||||
immediate: true,
|
||||
deep: true,
|
||||
async handler (val) {
|
||||
// console.log(123,this.vuex_stationValue)
|
||||
this.StationValue = this.vuex_stationValue
|
||||
// this.$u.vuex("vuex_stationValue", val);
|
||||
if (val === '海外站' || val === 'Overseas Station') {
|
||||
this.$u.http.setConfig({
|
||||
baseUrl: 'http://47.84.35.144:8000/api'
|
||||
});
|
||||
} else if (val === '中国站' || val === 'China Station') {
|
||||
this.$u.http.setConfig({
|
||||
baseUrl: 'https://ecloud.hoenergypower.cn/api'
|
||||
});
|
||||
}
|
||||
const res = await this.$u.api.GetLanguageConfig('zh')
|
||||
const res2 = await this.$u.api.GetLanguageConfig('en')
|
||||
const result = JSON.parse(res.data[0].content)
|
||||
const result2 = JSON.parse(res2.data[0].content)
|
||||
this.$i18n.mergeLocaleMessage('en_US', result2) //添加英文
|
||||
this.$i18n.mergeLocaleMessage('zh_CN', result) //添加中文
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
radioGroupChange () {
|
||||
|
||||
},
|
||||
// 新增游客登录方法
|
||||
guestLogin() {
|
||||
const encryptData = encryptPsd('666666')
|
||||
const publicData = JSEncryptData(
|
||||
encryptData.iv,
|
||||
encryptData.key
|
||||
)
|
||||
const params = {
|
||||
username: 'hzdemo',
|
||||
password: encryptData.password,
|
||||
type: "app",
|
||||
aesKey: publicData.keyData,
|
||||
iv: publicData.ivData,
|
||||
}
|
||||
|
||||
this.$u.api
|
||||
.login(params)
|
||||
.then((res) => {
|
||||
this.$u.vuex("vuex_token", res.data.accessToken)
|
||||
this.getMenuList()
|
||||
this.$u.vuex("vuex_iv", encryptData.iv)
|
||||
this.$u.vuex("vuex_psdkey", encryptData.key)
|
||||
this.getAllDict()
|
||||
this.getStationByUser()
|
||||
this.getProvinceStation()
|
||||
uni.setStorageSync('username', this.username)
|
||||
uni.setStorageSync('password', this.password)
|
||||
const timer = setTimeout(() => {
|
||||
uni.reLaunch({
|
||||
url: "/pages/tabbar/dashboard"
|
||||
})
|
||||
clearTimeout(timer)
|
||||
}, 500)
|
||||
if (res.isValidCodeLogin) {
|
||||
this.isValidCodeLogin = true
|
||||
this.refreshImgValidCode()
|
||||
}
|
||||
})
|
||||
},
|
||||
openMsg () {
|
||||
this.showMsg = true
|
||||
},
|
||||
agree () {
|
||||
this.checked = true
|
||||
this.showMsg = false
|
||||
},
|
||||
quit () {
|
||||
this.showMsg = false
|
||||
this.checked = false
|
||||
},
|
||||
changeLanguage (val) {
|
||||
this.$u.vuex("vuex_language", val[0].value);
|
||||
this.$i18n.locale = val[0].value
|
||||
},
|
||||
uploadFile () {
|
||||
this.isShowProgress = true;
|
||||
const downloadTask = uni.downloadFile({
|
||||
|
||||
url: this.newFileData.url,
|
||||
success: (downloadResult) => {
|
||||
if (downloadResult.statusCode === 200) {
|
||||
plus.runtime.openFile(downloadResult.tempFilePath);
|
||||
|
||||
}
|
||||
}
|
||||
});
|
||||
downloadTask.onProgressUpdate((res) => {
|
||||
if (res.progress > 0) {
|
||||
this.isShowProgress = true;
|
||||
}
|
||||
|
||||
this.progress = res.progress;
|
||||
if (res.totalBytesWritten === res.totalBytesExpectedToWrite) {
|
||||
this.isShowProgress = false;
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
showPass () {
|
||||
this.showPassword = !this.showPassword
|
||||
},
|
||||
zfbLogin () {
|
||||
this.loginType = "currentPhone"
|
||||
},
|
||||
qiehuanLogin () {
|
||||
this.loginType = "other"
|
||||
},
|
||||
onClickItem (index) {
|
||||
this.current = index
|
||||
},
|
||||
refreshImgValidCode (e) {
|
||||
if (this.vuex_token == "") {
|
||||
this.$u.api.index().then((res) => {
|
||||
this.imgValidCodeSrc =
|
||||
this.vuex_config.baseUrl +
|
||||
"/validCode?__sid=" +
|
||||
res.sessionid +
|
||||
"&t=" +
|
||||
new Date().getTime()
|
||||
})
|
||||
} else {
|
||||
this.imgValidCodeSrc =
|
||||
this.vuex_config.baseUrl +
|
||||
"/validCode?__sid=" +
|
||||
this.vuex_token +
|
||||
"&t=" +
|
||||
new Date().getTime()
|
||||
}
|
||||
this.validCode = ""
|
||||
},
|
||||
nextStep () {
|
||||
//验证码登录下一步
|
||||
uni.showLoading({
|
||||
title: "正在获取验证码",
|
||||
mask: true,
|
||||
})
|
||||
this.$u.api
|
||||
.sendCode({
|
||||
phoneNo: this.phoneNo,
|
||||
validCodeType: "2",
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.code == "200") {
|
||||
setTimeout(() => {
|
||||
uni.hideLoading()
|
||||
uni.navigateTo({
|
||||
url: "/pages/sys/login/code?phoneNo=" + this.phoneNo,
|
||||
})
|
||||
}, 500)
|
||||
} else {
|
||||
this.$u.toast(res.msg)
|
||||
uni.hideLoading()
|
||||
setTimeout(() => {
|
||||
uni.navigateTo({
|
||||
url: "/pages/sys/login/code?phoneNo=" + this.phoneNo,
|
||||
})
|
||||
}, 500)
|
||||
}
|
||||
})
|
||||
},
|
||||
submit (loginType) {
|
||||
if (this.checked) {
|
||||
this.$u.vuex("vuex_username", this.username)
|
||||
this.$u.vuex("vuex_password", this.password)
|
||||
if (this.username.length == 0) {
|
||||
this.$u.toast(this.$t('homePage.home.placeAccount'))
|
||||
return
|
||||
}
|
||||
if (this.password.length == 0) {
|
||||
this.$u.toast(this.$t('homePage.home.placePassword'))
|
||||
return
|
||||
}
|
||||
const encryptData = encryptPsd(this.password)
|
||||
const publicData = JSEncryptData(
|
||||
encryptData.iv,
|
||||
encryptData.key
|
||||
)
|
||||
const params = {
|
||||
username: this.username.trim(),
|
||||
password: encryptData.password,
|
||||
type: "app",
|
||||
aesKey: publicData.keyData,
|
||||
iv: publicData.ivData,
|
||||
}
|
||||
|
||||
this.$u.api
|
||||
.login(params)
|
||||
.then((res) => {
|
||||
this.$u.vuex("vuex_token", res.data.accessToken)
|
||||
this.getMenuList()
|
||||
this.$u.vuex("vuex_iv", encryptData.iv)
|
||||
this.$u.vuex("vuex_psdkey", encryptData.key)
|
||||
this.getAllDict()
|
||||
this.getStationByUser()
|
||||
this.getProvinceStation()
|
||||
uni.setStorageSync('username', this.username)
|
||||
uni.setStorageSync('password', this.password)
|
||||
const timer = setTimeout(() => {
|
||||
uni.reLaunch({
|
||||
url: "/pages/tabbar/dashboard"
|
||||
})
|
||||
clearTimeout(timer)
|
||||
}, 500)
|
||||
if (res.isValidCodeLogin) {
|
||||
this.isValidCodeLogin = true
|
||||
this.refreshImgValidCode()
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.$u.toast(this.$t('homePage.home.checkFirst'))
|
||||
}
|
||||
|
||||
},
|
||||
getAllDict () {
|
||||
this.$u.api.getAllDict().then((res) => {
|
||||
const {
|
||||
data
|
||||
} = res
|
||||
const dicts = {}
|
||||
data.forEach((element) => {
|
||||
dicts[element.type] = element.list
|
||||
})
|
||||
this.$u.vuex("vuex_dicts", dicts)
|
||||
})
|
||||
},
|
||||
getMenuList () {
|
||||
this.$u.api.getMenuList().then((res) => {
|
||||
this.$u.vuex("vuex_menu", res.data.menuList)
|
||||
this.$u.vuex("vuex_user", res.data)
|
||||
this.$u.vuex("vuex_permissions", res.data.powerList)
|
||||
})
|
||||
},
|
||||
getStationByUser () {
|
||||
this.$u.api.getStationByUser().then((res) => {
|
||||
this.$u.vuex("vuex_station", res.data)
|
||||
})
|
||||
},
|
||||
getProvinceStation () {
|
||||
this.$u.api.alarm.GetNewStationlist().then((res) => {
|
||||
this.$u.vuex("vuex_provinceStation", res.data.list)
|
||||
this.$u.vuex("vuex_currentStation", res.data.list[0].list[0].list[0])
|
||||
})
|
||||
},
|
||||
wxLogin (res) {
|
||||
this.$u.toast(this.$t('homePage.home.noLogin'))
|
||||
},
|
||||
qqLogin () {
|
||||
this.$u.toast("QQ 登录")
|
||||
},
|
||||
// 清空用户输入框
|
||||
clearUser () {
|
||||
this.username = ""
|
||||
},
|
||||
// 打开模态框
|
||||
mobileReg () {
|
||||
this.show = true
|
||||
},
|
||||
// 关闭模态框
|
||||
closeCard () {
|
||||
this.show = false
|
||||
},
|
||||
async radioChange (val) {
|
||||
this.$u.vuex("vuex_stationValue", val)
|
||||
console.log(val);
|
||||
// if (val === '海外站' || )
|
||||
// this.stationType = this.$t('homePage.home.stationType')[0].name
|
||||
|
||||
// config.baseUrl = 'http://192.168.100.244/api'
|
||||
// 更新请求拦截器中的baseUrl配置
|
||||
// this.$u.http.setConfig({
|
||||
// baseUrl: 'http://192.168.100.244/api'
|
||||
// });
|
||||
// console.log(val, config);
|
||||
// const res = await this.$u.api.GetLanguageConfig('zh')
|
||||
// const res2 = await this.$u.api.GetLanguageConfig('en')
|
||||
// const result = JSON.parse(res.data[0].content)
|
||||
// const result2 = JSON.parse(res2.data[0].content)
|
||||
// this.$i18n.mergeLocaleMessage('en_US', result2) //添加英文
|
||||
// this.$i18n.mergeLocaleMessage('zh_CN', result) //添加中文
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
@import "index.scss";
|
||||
|
||||
.progress-container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 99;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
width: 750rpx;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.progress-box {
|
||||
background: #ffffff;
|
||||
border-radius: 20rpx;
|
||||
padding: 30rpx;
|
||||
|
||||
.text {
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.Line {
|
||||
width: 80rpx;
|
||||
height: 1px;
|
||||
background: linear-gradient(
|
||||
-244deg,
|
||||
rgba(165, 165, 165, 0) 0%,
|
||||
rgba(165, 165, 165, 1) 50%
|
||||
);
|
||||
}
|
||||
|
||||
.Line2 {
|
||||
width: 80rpx;
|
||||
height: 1px;
|
||||
background: linear-gradient(
|
||||
244deg,
|
||||
rgba(165, 165, 165, 0) 0%,
|
||||
rgba(165, 165, 165, 1) 50%
|
||||
);
|
||||
}
|
||||
|
||||
.shouquan {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 10rpx;
|
||||
padding: 0rpx 75rpx 0px 75rpx;
|
||||
|
||||
.yonghuxieyi {
|
||||
font-size: 28rpx;
|
||||
color: #383f43;
|
||||
|
||||
.xieyi {
|
||||
color: #009c77;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 新增游客登录按钮样式 */
|
||||
.guest-button {
|
||||
width: 600rpx;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
text-align: center;
|
||||
margin: 30rpx auto 0;
|
||||
color: #009C77;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user