318 lines
7.0 KiB
Vue
318 lines
7.0 KiB
Vue
<template>
|
|
<view class="content">
|
|
<view class="bg"></view>
|
|
|
|
<view class="top">
|
|
<view class="language">
|
|
<picker mode="selector" @change="changeClickLanguage" :range="languageList" range-key="name"
|
|
:value="levelInd">
|
|
<view>
|
|
{{$t('titleLanguage')}}
|
|
<icon class="iconfont icon-arrow-down"></icon>
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
<view class="logo">
|
|
<image></image>
|
|
<text>Wendu</text>
|
|
</view>
|
|
</view>
|
|
<view class="login box_shadow">
|
|
<view class="title">{{$t("titleLogin")}}</view>
|
|
<view class="toggle cblue" @click="handleToggle">
|
|
{{$t("titleToggleLogin")}}
|
|
</view>
|
|
<view class="editem">
|
|
<view class="item">
|
|
<view class="text">{{$t("infoEmail")}}</view>
|
|
<view class="input">
|
|
<input v-model="phone" />
|
|
</view>
|
|
</view>
|
|
<!-- 验证码登录 -->
|
|
<view class="item " v-if="isCode">
|
|
<view class="text">{{$t("titleCode")}}</view>
|
|
<view class="input yanzhengma">
|
|
<input class="uni-input" v-model="code" />
|
|
<button class="code" type="none" @click="handleCode" v-model="code"
|
|
:disabled="disabled">{{second<60 ? second+$t("titleSendCodeRetry"):$t("titleSendCode")}}
|
|
</button>
|
|
</view>
|
|
</view>
|
|
<!-- 密码登录 -->
|
|
<view class="item " v-else>
|
|
<view class="text">{{$t("titlePassword")}}</view>
|
|
<view class="input">
|
|
<input class="uni-input" v-model="password" />
|
|
</view>
|
|
</view>
|
|
<view class="forget " v-if="!isCode">
|
|
<text @click="handlePassword('forgetPassword')">{{$t("titleForgotPassword")}}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="xieyi">
|
|
<checkbox-group @change="checkboxChange" class="group">
|
|
<label>
|
|
<checkbox :value="1" style="transform:scale(0.7)" />{{$t("titleAgreementText")}}
|
|
<!-- <text @click.stop @click="handleUserXieyi" class="blue">《用户协议》</text>和 -->
|
|
<text @click.stop @click="handlexieyi" class="blue">《{{$t("titleAgreementContntText")}}》</text>
|
|
</label>
|
|
</checkbox-group>
|
|
</view>
|
|
<view class="btnlogin" @click="handleTelLogin">{{$t("titleLogin")}}</view>
|
|
<view class="btngroup" @click="handlePassword('register')">
|
|
<text>{{$t("titleRegister")}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
mapState
|
|
} from "vuex";
|
|
export default {
|
|
data() {
|
|
return {
|
|
phone: "",
|
|
code: "",
|
|
password: "",
|
|
disabled: false,
|
|
second: 60,
|
|
value: 0,
|
|
isCode: true,
|
|
loginCode: "",
|
|
levelInd: 0,
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState(["user", 'configInfo', "setLocale"]),
|
|
languageList() {
|
|
let that = this
|
|
let languageList = this.configInfo.language_arr
|
|
that.levelInd = languageList.findIndex(ite => ite.key == this.setLocale)
|
|
return languageList
|
|
}
|
|
},
|
|
onLoad() {
|
|
let that = this
|
|
uni.setNavigationBarTitle({
|
|
title: that.$t('titleLogin')
|
|
})
|
|
},
|
|
methods: {
|
|
checkboxChange(e) {
|
|
this.value = e.detail.value.length ? e.detail.value[0] : "0"
|
|
},
|
|
// 语言切换
|
|
changeClickLanguage(e) {
|
|
let that = this
|
|
let key = that.languageList[e.target.value].key
|
|
let val = that.languageList[e.target.value].val
|
|
that.levelInd = e.target.value
|
|
that.$model.getSetLanguage({
|
|
language: val,
|
|
}).then(res => {
|
|
that.$i18n.locale = key
|
|
uni.setStorageSync('language', key)
|
|
that.$store.commit('changeLocale', key)
|
|
that.$store.dispatch("getHomeConfig")
|
|
that.handleTabBarItem()
|
|
})
|
|
},
|
|
handleTabBarItem() {
|
|
let that = this
|
|
uni.setTabBarItem({
|
|
index: 0,
|
|
text: that.$t('titleHome')
|
|
})
|
|
uni.setTabBarItem({
|
|
index: 1,
|
|
text: that.$t('titleCount')
|
|
})
|
|
uni.setTabBarItem({
|
|
index: 2,
|
|
text: that.$t('titleMe')
|
|
})
|
|
},
|
|
// 登录、
|
|
handleTelLogin() {
|
|
let that = this
|
|
if (that.value == 0) {
|
|
that.$tools.msg(that.$t("verifyAgreement"))
|
|
return
|
|
}
|
|
if (!(/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(that.phone))) {
|
|
that.$tools.msg(that.$t("verifyEmailCorrect"))
|
|
return
|
|
}
|
|
if (that.isCode && !that.code) {
|
|
that.$tools.msg(that.$t("verifyCode"))
|
|
return
|
|
}
|
|
if (!that.isCode && !that.password) {
|
|
that.$tools.msg(that.$t("verifyPassword"))
|
|
return
|
|
}
|
|
let val = that.languageList[that.levelInd].val
|
|
this.$model.getonlogin({
|
|
data: that.phone,
|
|
validate_data: that.isCode ? that.code : that.password,
|
|
validate_type: that.isCode ? 'code' : 'password',
|
|
language: val
|
|
}).then(res => {
|
|
console.log("data", res.data)
|
|
that.$tools.msg(res.msg)
|
|
if (res.code != 0) return
|
|
that.$tools.msg(that.$t("msgLoginSuccess"))
|
|
uni.setStorageSync('token', res.data.token)
|
|
that.$store.dispatch("getUserInfo")
|
|
setTimeout(function() {
|
|
uni.reLaunch({
|
|
url: "/pages/index/index"
|
|
})
|
|
}, 2000)
|
|
}).catch(err => {})
|
|
},
|
|
// 获取验证码
|
|
handleCode() {
|
|
let that = this
|
|
if (!(/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(that.phone))) {
|
|
that.$tools.msg(that.$t("verifyEmailCorrect"))
|
|
return
|
|
}
|
|
//
|
|
that.$model.getSendCode({
|
|
data: that.phone,
|
|
}).then(res => {
|
|
console.log(res)
|
|
if (res.code != 0) {
|
|
that.$tools.msg(res.msg)
|
|
return
|
|
}
|
|
that.disabled = true
|
|
let interval = setInterval(() => {
|
|
--that.second
|
|
}, 1000)
|
|
setTimeout(() => {
|
|
clearInterval(interval)
|
|
that.disabled = false
|
|
that.second = 60
|
|
}, 60000)
|
|
}).catch(err => {})
|
|
},
|
|
handleIsTel() {
|
|
if (this.value == 0) {
|
|
this.$tools.msg(that.$t("verifyAgreement"))
|
|
return
|
|
}
|
|
},
|
|
// 切换登录
|
|
handleToggle() {
|
|
this.phone = ""
|
|
this.isCode = !this.isCode
|
|
},
|
|
handlePassword(text) {
|
|
uni.navigateTo({
|
|
url: "/pageTwo/login/forgetPassword?type=" + text
|
|
})
|
|
},
|
|
handlexieyi() {
|
|
let that = this
|
|
uni.navigateTo({
|
|
url: "/pageTwo/webview/webview?url=https://tc.pcxbc.com/kitchenscale_all/privacy_index.html"
|
|
})
|
|
},
|
|
handleUserXieyi() {
|
|
let that = this
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "@/assets/login.scss";
|
|
|
|
.content {
|
|
width: 100%;
|
|
height: 100vh;
|
|
}
|
|
|
|
.xieyi {
|
|
font-size: 28rpx;
|
|
color: #999;
|
|
margin-left: 20rpx;
|
|
|
|
text {
|
|
color: $maincolor;
|
|
}
|
|
}
|
|
|
|
.href {
|
|
width: auto;
|
|
}
|
|
|
|
.language {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 15px;
|
|
background: #fff;
|
|
padding: 5px 20px;
|
|
border-radius: 10px;
|
|
|
|
picker {
|
|
width: 100%;
|
|
|
|
view {
|
|
display: flex;
|
|
}
|
|
}
|
|
}
|
|
|
|
.wxbtn {
|
|
width: 100%;
|
|
position: absolute;
|
|
margin-top: 60rpx;
|
|
top: 80%;
|
|
|
|
icon {
|
|
font-size: 50rpx;
|
|
color: #28c445;
|
|
}
|
|
|
|
|
|
text {
|
|
display: block;
|
|
// width: 100%;
|
|
margin-top: 5px;
|
|
font-size: 24rpx;
|
|
// color: #666;
|
|
text-align: center;
|
|
border-bottom: 1px solid blue;
|
|
color: blue;
|
|
}
|
|
|
|
button {
|
|
line-height: initial;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
padding: 0;
|
|
justify-content: center;
|
|
}
|
|
|
|
button::after {
|
|
display: none;
|
|
}
|
|
|
|
view {
|
|
width: 100%;
|
|
}
|
|
|
|
image {
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
</style> |