修改样式，适配手机
This commit is contained in:
xuli3099
@@ -1,75 +1,79 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="login-con">
|
||||
<view :style="{height: navBarPaddingTop + 'px'}"></view>
|
||||
<image mode="aspectFit" src="../../static/images/pic-logo.png" class="login-logo"></image>
|
||||
<view class="login-title" v-if="networkEnv==1"><text>718友晟</text><text>企业内网</text></view>
|
||||
<view class="login-title" v-else>欢迎来到718友晟</view>
|
||||
<view class="login-tab">
|
||||
<customTabs v-model="activeTab" :tabs="tabList" :modelValue="activeTab">
|
||||
<!-- 验证码登录 -->
|
||||
<view v-show="activeTab === 0">
|
||||
<view class="login-form">
|
||||
<uni-forms ref="form" :model="formData" :rules="rules" label-position="top">
|
||||
<uni-forms-item label="手机号" required name="phone">
|
||||
<view class="code-con">
|
||||
<uni-icons custom-prefix="iconfont" color="#239FDF" type="icon-phone" size="20"></uni-icons>
|
||||
<uni-easyinput type="number" :inputBorder="false"
|
||||
v-model="formData.phone" placeholder="请输入手机号"
|
||||
maxlength="11"
|
||||
/>
|
||||
</view>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="验证码" required name="verifyCode">
|
||||
<view class="code-con">
|
||||
<uni-icons custom-prefix="iconfont" color="#239FDF" type="icon-code" size="20"></uni-icons>
|
||||
<uni-easyinput type="number" :inputBorder="false"
|
||||
v-model="formData.verifyCode" placeholder="请输入验证码"
|
||||
maxlength="6" style="width:190rpx"
|
||||
/>
|
||||
<button type="primary" plain @click="getCode" size="mini"
|
||||
:loading="codeLoading" :disabled="codeDisabled" class="btn-plain"
|
||||
>{{codeText}}</button>
|
||||
</view>
|
||||
</uni-forms-item>
|
||||
</uni-forms>
|
||||
<view class="bg-h">
|
||||
<view :style="{height: navBarPaddingTop + 'px'}"></view>
|
||||
<image mode="aspectFit" src="../../static/images/pic-logo.png" class="login-logo"></image>
|
||||
<view class="login-title" v-if="networkEnv==1"><text>718友晟</text><text>企业内网</text></view>
|
||||
<view class="login-title" v-else>欢迎来到718友晟</view>
|
||||
<view class="login-tab">
|
||||
<customTabs v-model="activeTab" :tabs="tabList" :modelValue="activeTab">
|
||||
<!-- 验证码登录 -->
|
||||
<view v-show="activeTab === 0">
|
||||
<view class="login-form">
|
||||
<uni-forms ref="form" :model="formData" :rules="rules" label-position="top">
|
||||
<uni-forms-item label="手机号" required name="phone">
|
||||
<view class="code-con">
|
||||
<uni-icons custom-prefix="iconfont" color="#239FDF" type="icon-phone" size="20"></uni-icons>
|
||||
<uni-easyinput type="number" :inputBorder="false"
|
||||
v-model="formData.phone" placeholder="请输入手机号"
|
||||
maxlength="11"
|
||||
/>
|
||||
</view>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="验证码" required name="verifyCode">
|
||||
<view class="code-con">
|
||||
<uni-icons custom-prefix="iconfont" color="#239FDF" type="icon-code" size="20"></uni-icons>
|
||||
<uni-easyinput type="number" :inputBorder="false"
|
||||
v-model="formData.verifyCode" placeholder="请输入验证码"
|
||||
maxlength="6" style="width:190rpx"
|
||||
/>
|
||||
<button type="primary" plain @click="getCode" size="mini"
|
||||
:loading="codeLoading" :disabled="codeDisabled" class="btn-plain"
|
||||
>{{codeText}}</button>
|
||||
</view>
|
||||
</uni-forms-item>
|
||||
</uni-forms>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 账号登录 -->
|
||||
<view v-show="activeTab === 1">
|
||||
<view class="login-form">
|
||||
<uni-forms ref="form2" :model="formData2" :rules="rules2" label-position="top">
|
||||
<uni-forms-item label="用户名" required name="username">
|
||||
<view class="code-con">
|
||||
<uni-easyinput prefixIcon="person" :inputBorder="false"
|
||||
v-model="formData2.username" placeholder="请输入用户名"
|
||||
/>
|
||||
</view>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="密码" required name="password" class="password">
|
||||
<view class="code-con">
|
||||
<uni-easyinput prefixIcon="locked" type="password" :inputBorder="false"
|
||||
v-model="formData2.password" placeholder="请输入登录密码"
|
||||
/>
|
||||
</view>
|
||||
</uni-forms-item>
|
||||
</uni-forms>
|
||||
<!-- 账号登录 -->
|
||||
<view v-show="activeTab === 1">
|
||||
<view class="login-form">
|
||||
<uni-forms ref="form2" :model="formData2" :rules="rules2" label-position="top">
|
||||
<uni-forms-item label="用户名" required name="username">
|
||||
<view class="code-con">
|
||||
<uni-easyinput prefixIcon="person" :inputBorder="false"
|
||||
v-model="formData2.username" placeholder="请输入用户名"
|
||||
/>
|
||||
</view>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="密码" required name="password" class="password">
|
||||
<view class="code-con">
|
||||
<uni-easyinput prefixIcon="locked" type="password" :inputBorder="false"
|
||||
v-model="formData2.password" placeholder="请输入登录密码"
|
||||
/>
|
||||
</view>
|
||||
</uni-forms-item>
|
||||
</uni-forms>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</customTabs>
|
||||
</customTabs>
|
||||
|
||||
<view class="agreen-con">
|
||||
<uni-icons v-if="agreeChecked" type="checkbox-filled" color="#02C74C" size="25" @click="agreeCheck"></uni-icons>
|
||||
<uni-icons v-else type="circle" color="#bfbfbf" size="25" @click="agreeCheck"></uni-icons>
|
||||
<view class="agreen-xy">
|
||||
我已阅读并接受<text @click="agreeVisable(1)">《服务条款》</text>和<text @click="agreeVisable(2)">《隐私保护协议》</text>
|
||||
<view class="agreen-con">
|
||||
<uni-icons v-if="agreeChecked" type="checkbox-filled" color="#02C74C" size="25" @click="agreeCheck"></uni-icons>
|
||||
<uni-icons v-else type="circle" color="#bfbfbf" size="25" @click="agreeCheck"></uni-icons>
|
||||
<view class="agreen-xy">
|
||||
我已阅读并接受<text @click="agreeVisable(1)">《服务条款》</text>和<text @click="agreeVisable(2)">《隐私保护协议》</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<button type="primary" class="btn-submit" @click="submitForm" :loading="btnLoading" :disabled="btnLoading">登 录</button>
|
||||
</view>
|
||||
|
||||
<button type="primary" class="btn-submit" @click="submitForm" :loading="btnLoading" :disabled="btnLoading">登 录</button>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="login-bottom"></view>
|
||||
<!-- <view class="login-bottom"></view> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@@ -86,6 +90,7 @@ import { useUserStore } from '@/stores/user';
|
||||
import encryptObj from '@/utils/encrypt.js'
|
||||
import {showAlert} from '@/utils/message.js'
|
||||
|
||||
|
||||
// #ifdef APP-PLUS
|
||||
// 获取 存储手机的module
|
||||
const safeSave = uni.requireNativePlugin("Tm-TmSafeSaveFileModule");
|
||||
@@ -271,11 +276,12 @@ const submitForm = () => {
|
||||
// #ifdef APP-PLUS
|
||||
try {
|
||||
// 读取设备ID
|
||||
safeSave.getSafeFile({ "key": "app_device_id" }, res3 => {
|
||||
if (res3.code == 1) {
|
||||
let deviceId = res3.data;
|
||||
// safeSave.getSafeFile({ "key": "app_device_id" }, res3 => {
|
||||
// if (res3.code == 1) {
|
||||
let deviceId = 'b97527c8-2ad4-493c-a01c-5f9d0aabaff2' // res3.data;
|
||||
// showAlert("读取成功=>"+deviceId);
|
||||
param.uniqCode = deviceId;
|
||||
console.log("param=>",param)
|
||||
login(param).then(res=>{
|
||||
userStore.login(res);
|
||||
uni.switchTab({ url: '/pages/home/home' })
|
||||
@@ -284,12 +290,12 @@ const submitForm = () => {
|
||||
btnLoading.value = false;
|
||||
})
|
||||
|
||||
} else {
|
||||
// showAlert('读取失败:'+res3.msg)
|
||||
console.error('读取失败:', error);
|
||||
btnLoading.value = false;
|
||||
}
|
||||
})
|
||||
// } else {
|
||||
// // showAlert('读取失败:'+res3.msg)
|
||||
// console.error('读取失败:', error);
|
||||
// btnLoading.value = false;
|
||||
// }
|
||||
// })
|
||||
} catch (error) {
|
||||
console.error('读取失败:', error);
|
||||
// showAlert('出错:', error)
|
||||
@@ -307,6 +313,9 @@ const submitForm = () => {
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
page{
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
.container {
|
||||
height: 100vh;
|
||||
}
|
||||
@@ -339,6 +348,18 @@ const submitForm = () => {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.login-con .bg-h{
|
||||
background:url('@/static/images/login-txt.png') center bottom 10rpx no-repeat;
|
||||
background-size:654rpx 121rpx;
|
||||
width: 100vw;
|
||||
height: calc(100vh - 10px) ;
|
||||
margin:0 auto;
|
||||
}
|
||||
|
||||
.login-tab{
|
||||
padding-bottom:20rpx;
|
||||
}
|
||||
|
||||
:deep(.login-tab .tabs-header) {
|
||||
background: none !important;
|
||||
border-bottom: none !important;
|
||||
|
||||
Reference in New Issue
Block a user