123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280 |
- <template>
- <view class="login_warp">
- <view class="infowarp">
- <image :src="info.user_logo" class="logoimg" mode=""></image>
- <view class="cusname">{{info.user_name}}</view>
- </view>
- <view class="loginForm">
- <view class="loginli">
- <view class="logli" style="border-bottom:0;padding:0;">
- <view class="label">{{i18n['账号']}}</view>
- <input type="number" v-model="account" :placeholder="i18n['请输入手机号']" class="selfinput">
- </view>
- <image src="/static/img/close.png" @click="clearPhone" v-if="phone" class="closeimg" mode=""></image>
- </view>
- <view class="loginli">
- <view class="logli" style="border-bottom:0;padding:0;">
- <view class="label">密码</view>
- <input type="number" v-model="password" placeholder="请输入密码" class="selfinput">
- </view>
- <!-- <image src="/static/img/close.png" @click="clearPhone" v-if="phone" class="closeimg" mode=""></image>
- --> </view>
- <!-- <view class="loginli">
- <view class="logli">
- <view class="label">{{i18n['验证码']}}</view>
- <input type="number" v-model="code" :placeholder="i18n['请输入验证码']" class="passinput">
- </view>
- <view class="code" v-if="!showTime" @click="sendCode">{{i18n['发送验证码']}}</view>
- <view class="code" v-else>{{time}}s{{i18n['重试']}}</view>
- </view> -->
- </view>
- <view class="loginbtn" @click="toLogin">{{i18n['登录']}}</view>
- <!-- <view class="freelogin" @click="freeLogin">暂不登录,进行演示</view>
- --> </view>
- </template>
- <script>
- import { checkPhone } from '@/util/common.js'
- import { netLogin, netsendText, netInfo, login_text } from '@/api/api.js'
-
- let T;
- export default{
- data() {
- return{
- phone:'',
- remember:false,
- account:uni.getStorageSync('account'),
- password:'',
- isChinese:false,
- info:{},
- code:'', //验证码
- showTime:false,
- time:60
- }
- },
- computed:{
- i18n() {
- return this.$t("login")
- }
- },
- onLoad() {
- this.getInfo()
- },
- onShow() {
- console.log(uni.getStorageSync('locale') == 'zh')
- this.isChinese = !uni.getStorageSync('locale') || uni.getStorageSync('locale') == 'zh' ? true : false
- },
- methods:{
- getInfo() {
- netInfo().then(res=>{
- this.info = res.data
- })
- },
- changeLan(item) {
- this.isChinese = !this.isChinese
- this.$i18n.locale = item
- uni.setStorageSync('locale', item)
- },
- clearPhone() {
- this.phone = ''
- },
- changeRmem() {
- this.remember = !this.remember
- if(this.remember){
- uni.setStorageSync('account',this.account)
- }else{
- uni.removeStorageSync('account')
- }
- },
- sendCode() {
- if(!checkPhone(this.account)){
- uni.showToast({
- title:'请输入正确的手机号',
- icon:'none'
- })
- return
- }
- netsendText({mobile:this.account,_ajax:1}).then(res=>{
- this.time = 60
- this.showTime = true
- T = setInterval(()=>{
- this.time --
- if(this.time <= 0){
- this.showTime = false
- clearInterval(T)
- }
- },1000)
- })
- },
- toLogin() {
- if(!checkPhone(this.account)){
- uni.showToast({
- title:'请输入正确的手机号',
- icon:'none'
- })
- return
- }
- let params = {
- account:this.account,
- code:this.code,
- password:this.password
- }
- netLogin(params).then(res=>{
- this.jumpPage(res)
- })
- },
- //暂不登录 进行演示
- freeLogin() {
- login_text().then(res=>{
- this.jumpPage(res)
- })
- },
- jumpPage(res){
- uni.setStorageSync('token',res.data.token)
- uni.redirectTo({
- url:'/pages/index/index'
- })
- },
- toRegister() {
- uni.redirectTo({
- url:'/pages/login/register'
- })
- },
- }
- }
- </script>
- <style lang="scss" scoped>
- .freelogin{
- text-align: center;
- font-size:24rpx;
- color:red;
- margin-top:50rpx;
- }
- .login_warp{
- position: relative;
- background: linear-gradient(180deg, #DFF0FF 0%, #F4F4F4 100%);
- padding-top:80rpx;
- .langbox{
- position: absolute;
- right:30rpx;
- top:30rpx;
- .lanimg{
- width:44rpx;
- height:44rpx;
- }
- }
- }
-
- .infowarp{
- width:200rpx;
- margin:0 auto;
- text-align: center;
- .logoimg{
- width:145rpx;
- height:145rpx;
- border-radius: 50%;
- border:1rpx solid #f5f5f5;
- margin:0 auto 15rpx;
- }
- .cusname{
- font-size:30rpx;
- color:#333;
- font-weight: bold;
- text-align: center;
- }
- }
- .loginForm{
- width:700rpx;
- padding:0 30rpx;
- margin:100rpx auto 0;
- .loginli{
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding:20rpx 10rpx;
- border-bottom:1rpx solid #CACACA;
- .selfinput{
- width:400rpx;
- height: 50px;
- font-size:26rpx;
- color:#333;
- }
- .closeimg{
- width:30rpx;
- height:30rpx;
- }
- .logli{
- display: flex;
- justify-content: flex-start;
- align-items: center;
- flex:1;
- border-bottom:1rpx solid #f5f5f5;
- padding:20rpx 0;
- .label{
- width:120rpx;
- font-size:26rpx;
- color:#333;
- margin-right:24rpx;
- flex-shrink: 0;
- }
- .passinput{
- width:300rpx;
- font-size:26rpx;
- height: 50px;
- color:#333;
- }
- }
- .code{
- flex-shrink: 0;
- width:150rpx;
- // height:55rpx;
- font-size:26rpx;
- color:#0287FF;
- // border:1rpx solid #0287FF;
- border-radius: 10rpx;
- text-align: center;
- line-height: 52rpx;
- }
- }
- }
- .loginbtn{
- width:620rpx;
- height:88rpx;
- background:#7FC2FF;
- border-radius: 44rpx;
- color:#fff;
- font-size:32rpx;
- text-align: center;
- line-height: 88rpx;
- margin:80rpx auto 0;
- }
- .textlog{
- font-size:26rpx;
- color:#000;
- text-align: center;
- margin-top:15rpx;
- }
- .botbox{
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding:0 30rpx;
- .remember{
- display: flex;
- justify-content: flex-start;
- align-items: center;
- margin-top:30rpx;
- font-size:24rpx;
- color:#666;
- radio{
- transform: scale(0.7);
- }
- .rem_label{
- font-size:24rpx;
- color:#666;
- }
- }
- }
-
- </style>
|