tqApp-webView/pages/login/login.vue

<template>
<view>
	<template v-if="hasPlat(['sanitation'])">
		<view class="page-container-sanitation">
			<image :src="$getImages(configList.h5_login_bg.configValue||'/assetsMobile/images/loginBg2.png')" class="background-image-new"></image>
			<!-- <image :src="$getImages('/assetsMobile/images/loginBg2.png')" class="background-image"></image> -->
			<!-- <image :src="$getImages('/assetsMobile/images/logo.png')" class="logo-image"></image> -->

			<view class="login-content" style="background-color: transparent; z-index: 99; overflow: hidden;">

				<view class="welcome-copywriting">
          <!-- <image :src="$getImages('/assetsMobile/images/hi.png')" class="hi-img"></image> -->
					<text class="h5_login_title"
						v-if="configList.h5_login_title">{{ configList.h5_login_title.configValue || '欢迎登录！' }}</text>
					<text class="h5_login_subtitle" v-if="configList.h5_login_subtitle&&configList.h5_login_subtitle.isShow===1">{{configList.h5_login_subtitle.configValue || '智慧环卫管理系统'}}</text>
				</view>

				<view class="user-info">

					<view class="verification">
						<u--form :model="model" :rules="rules" ref="uForm" label-width="0">

							<u-form-item label=" " prop="loginForm.username">
								<view class="user-input">
                  <image :src="$getImages('/assetsMobile/images/user.png')" class="img"></image>
									<u-input
										v-model="model.loginForm.username"
										placeholder-style="color:#CCCCCC;font-size: 30rpx"
										border="none"
										type="text"
										color="#333"
										:clearable="true"
										placeholder="请输入账号">
                  </u-input>
								</view>
							</u-form-item>
							<u-form-item label=" " prop="loginForm.password">
								<view class="user-input">
									<image :src="$getImages('/assetsMobile/images/psw.png')" class="img"></image>
									<u-input
										v-model="model.loginForm.password"
										placeholder-style="color:#CCCCCC;font-size: 30rpx"
										border="none"
										:type="showPassword?'text':'password'"
										color="#333"
										:clearable="true"
										placeholder="请输入密码" />
									<image @click="showPassword=!showPassword" :src="showPassword?$getImages('/assetsMobile/images/enterprises/login/visiabled.png'):$getImages('/assetsMobile/images/enterprises/login/unVisiabled.png')" class="img-append"></image>
								</view>
							</u-form-item>

							<u-form-item label=" " prop="loginForm.code" v-if="captchaEnabled">
								<view class="user-input" style="width: 40%;">
									<u-input
										v-model="model.loginForm.code"
										placeholder-style="color:#CCCCCC;font-size: 30rpx"
										border="none"
										type="text"
										:clearable="true"
										placeholder="验证码" />
								</view>
								<view class="login-code">
									<image :src="codeUrl" @click="getCode" class="login-code-img"></image>
								</view>
							</u-form-item>

							<!-- 记住密码 -->
							<view class="login-remember">
								<u-checkbox-group>
									<u-checkbox size="16" activeColor="#2693FB" :checked="checked" inactiveColor="#39B2FC" labelColor="#ffffff"
										@change="checkboxChange" v-model="checked"
										label="记住密码"></u-checkbox>
								</u-checkbox-group>
							</view>


							<u-button type="primary" shape="circle" :custom-style="{
                width: '100%',
                border:'none'
              }" class="login-btn" @click="handleLogin">登录
							</u-button>

						</u--form>
					</view>
				</view>
			</view>
		</view>
	</template>
	
	<template v-else-if="hasPlat(['enterprises'])">
		<view class="page-container-enterprises">
			
	
			<view class="login-content" style="background-color: transparent; z-index: 99; overflow: hidden;">
				
				<template v-if="configList.h5_login_title">
					<view class="welcome-copywriting" >
			  
						<text class="h5_login_title"
							v-if="configList.h5_login_title">{{ configList.h5_login_title.configValue || '欢迎登录' }}</text>
						<text class="h5_login_subtitle" v-if="configList.h5_login_subtitle&&configList.h5_login_subtitle.isShow===1">{{configList.h5_login_subtitle.configValue || '企事业车辆管理系统'}}</text>
					</view>
					
					<view class="bg-img">
						<image :src="$getImages(configList.h5_login_bg.configValue || '/assetsMobile/images/enterprises/login/loginBg.png')" class="background-image"></image>
					</view>
				</template>
				
	
				<view class="user-info">
	
					<view class="verification">
						<u--form :model="model" :rules="rules" ref="uForm" label-width="0">
	
							<u-form-item label=" " prop="loginForm.username">
								<view class="user-input">
									<image :src="$getImages('/assetsMobile/images/enterprises/login/acount.png')" class="img"></image>
									<u-input
										v-model="model.loginForm.username"
										placeholder-style="color:#CCCCCC;font-size: 32rpx"
										border="none"
										type="text"
										color="#333"
										:clearable="true"
										placeholder="请输入账号">
									</u-input>
								</view>
							</u-form-item>
							<u-form-item label=" " prop="loginForm.password">
								<view class="user-input">
									<image :src="$getImages('/assetsMobile/images/enterprises/login/password.png')" class="img"></image>
									<u-input
										v-model="model.loginForm.password"
										placeholder-style="color:#DDDDDD;font-size: 32rpx"
										border="none"
										:type="showPassword?'text':'password'"
										color="#333"
										:clearable="true"
										placeholder="请输入密码" />
									<image @click="showPassword=!showPassword" :src="showPassword?$getImages('/assetsMobile/images/enterprises/login/visiabled.png'):$getImages('/assetsMobile/images/enterprises/login/unVisiabled.png')" class="img-append"></image>
								</view>
							</u-form-item>
	
							<u-form-item label=" " prop="loginForm.code" v-if="captchaEnabled">
								<view class="user-input" style="width: 40%;">
									<u-input
										v-model="model.loginForm.code"
										placeholder-style="color:#DDDDDD;font-size: 32rpx"
										border="none"
										type="text"
										:clearable="true"
										placeholder="验证码" />
								</view>
								<view class="login-code">
									<image :src="codeUrl" @click="getCode" class="login-code-img"></image>
								</view>
							</u-form-item>
	
							<!-- 记住密码 -->
							<view class="login-remember">
								<u-checkbox-group>
									<u-checkbox size="16" activeColor="#4573FC" :checked="checked" inactiveColor="##4573FC" labelColor="#4573FC"
										@change="checkboxChange" v-model="checked"  shape="circle"
										label="记住密码"></u-checkbox>
								</u-checkbox-group>
							</view>
						
	
							<u-button type="primary" shape="circle" :custom-style="{
								width: '100%',
								border:'none'
							  }" class="login-btn" @click="handleLogin">登录
							</u-button>
	
						</u--form>
					</view>
				</view>
			</view>
		</view>
	</template>
	
	<template v-else>
		<view class="page-container">
			<image :src="$getImages(configList.h5_login_bg.configValue||'/assetsMobile/images/loginBg.png')" class="background-image"></image>
		
			<view class="login-content" style="background-color: transparent; z-index: 99; overflow: hidden;">
				
				<view class="welcome-copywriting">
					<text class="h5_login_title" v-if="configList.h5_login_title">{{configList.h5_login_title.configValue||'欢迎登录！'}}</text>
					<text class="h5_login_subtitle" v-if="configList.h5_login_subtitle&&configList.h5_login_subtitle.isShow===1">{{configList.h5_login_subtitle.configValue || ''}}</text>
				</view>
		
				<view class="user-info">    
					<view class="verification">
						<u--form :model="model" :rules="rules" ref="uForm" label-width="0">
		
							<u-form-item label=" " prop="loginForm.username">
								<view class="user-input">
									<u-input 
										v-model="model.loginForm.username" 
										placeholder-style="color:#80A0C6;font-size: 30rpx"
										border="none"
										type="text" 
										:clearable="true" 
										placeholder="请输入账号"
									/>
								</view>
							</u-form-item>
							<u-form-item label=" " prop="loginForm.password">
								<view class="user-input">
									<u-input 
										v-model="model.loginForm.password" 
										placeholder-style="color:#80A0C6;font-size: 30rpx"
										border="none"
										type="password" 
										:clearable="true"
										 placeholder="请输入密码"
									/>
								</view>
							</u-form-item>
							
							<u-form-item label=" " prop="loginForm.code" v-if="captchaEnabled">
								<view class="user-input" style="width: 40%;">
									<u-input 
										v-model="model.loginForm.code" 
										placeholder-style="color:#80A0C6;font-size: 30rpx"
										border="none"
										type="text" 
										:clearable="true" 
										placeholder="验证码"
									/>
								</view>
								<view class="login-code"> 
								  <image :src="codeUrl" @click="getCode" class="login-code-img"></image>
								</view>
							</u-form-item>
		
							<u-button type="primary" shape="circle" :custom-style="{
									width: '100%',
								  }" class="login-btn" @click="handleLogin">登录
							</u-button>
						
						</u--form>
					</view>
				</view>
			</view>
		</view>
	</template>
</view>
</template>

<script>
import { mapState } from 'vuex'
import { getCodeImg } from '@/api/login'
import { getToken } from '@/utils/auth'

export default {
    data() {
        return {
            codeUrl: "",
            captchaEnabled: false,
            checked: false,//记住密码
            model: {
                loginForm: {
                    username: "",
                    password: "",
                    code: "",
                    uuid: '',
                    client: "TQ-HW-MOBILE",
                }
            },
            rules: {
                'loginForm.username': {
                    type: 'string',
                    required: true,
                    message: '请输入账号',
                    trigger: ['blur', 'change']
                },
                'loginForm.password': {
                    type: 'string',
                    required: true,
                    message: '请输入密码',
                    trigger: ['blur', 'change']
                },
                'loginForm.code': {
                    type: 'string',
                    required: true,
                    message: '请输入验证码',
                    trigger: ['blur', 'change']
                },
            },
			showPassword: false,

        }
    },
    created() {
        this.getCode()
    },
	onLoad: function (option) {
		   // #ifdef H5
			if(process.env.NODE_ENV == "production")  {
				
				if(this.hasPlat(['enterprises']) && this.hasHostPlat(['wxH5'])) {
	
					let {code} =  option
					if (this.isNull(code) && !getToken()) {
						let appid = "wx0f491ff49441493e"; // 公众号ID
						// 回调页面
						let redirect_uri = encodeURI(`${window.location.protocol}//${window.location.host}/mobile/`);	
						window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirect_uri}&response_type=code&scope=snsapi_base&#wechat_redirect`;
					} else {
						this.model.loginForm.authCode = code
					}
				}
				
			}
		  // #endif
		  if(process.env.NODE_ENV != "production")  {
			  this.model.loginForm.username = 'admin'
			  this.model.loginForm.password = 'Gdtq1981%%'
		  }
		  // console.log(this.$PLATFORM,'thisthis')
	},
    onShow() {
		// console.log(this.hasPlat,'thisthisthis')
        //从本地存储中获取密码
        let loginFormInfo = uni.getStorageSync('loginFormInfo')
        if (loginFormInfo) {
            console.log('缓存的信息',loginFormInfo)
            let { username, password ,checked} = JSON.parse(loginFormInfo)
            this.model.loginForm.username = username
            this.model.loginForm.password = password
            this.checked = checked
        }
    },
    computed: {
        ...mapState('appConfig', ['configList'])
    },
    methods: {
        // 记住密码
        checkboxChange(e) {
            this.checked = e
        },
        // 获取图形验证码
        getCode() {
            getCodeImg().then(res => {
                console.log(res, 'res')
                this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled
                if (this.captchaEnabled) {
                    this.codeUrl = 'data:image/gif;base64,' + res.img
                    this.loginForm.uuid = res.uuid
                }
            })
        },
        // 登录方法
        async handleLogin() {
            this.$refs.uForm.validate().then(res => {
                this.pwdLogin()
            }).catch(errors => {
                console.log('校验失败', errors)
            })
        },
        // 密码登录
        async pwdLogin() {
            //保存密码到本地存储

            if (this.checked) {
                uni.setStorageSync('loginFormInfo', JSON.stringify({...this.model.loginForm,checked:this.checked}))
            } else { uni.removeStorageSync('loginFormInfo') }

            this.$store.dispatch('Login', this.model.loginForm).then(() => {
                this.$modal.closeLoading()
                this.loginSuccess()
            }).catch(() => {
                if (this.captchaEnabled) {
                    this.getCode()
                }
            })
        },
        // 登录成功
        loginSuccess(result) {
            // 设置用户信息
            this.$store.dispatch('GetInfo').then(res => {
                uni.reLaunch({
                    url: '/pages/index/index'
                })
				getApp().checkTabPer()
            })
        }
    },

    onReady() {
        this.$refs.uForm.setRules(this.rules)
    },
}
</script>

<style lang="scss" scoped>
@font-face {
    font-family: 'MaoKenTangYuan';
    /* 自定义的字体名称 */
    src: url('@/assets/fonts/MaoKenTangYuan.ttf') format('truetype');
    /* 字体文件路径及格式 */
}

.page-container-sanitation {
    font-family: PingFangSC, PingFang SC;
    height: 100%;
    width: 100%;
    height:100vh;
    background: linear-gradient(135deg, #49CDFC 0%, #2693FB 100%);

    .background-image-new{
        position: absolute;
        bottom: 0;
        right: 0;
        width: 100%;
        height: 100%;
    }
    .background-image {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 100%;
        height: 362rpx;
    }
    .logo-image{
      width: 174rpx;
      height: 58rpx;
      position: absolute;
      top: 58rpx;
      right: 58rpx;
    }

    .login-content {
        background-color: transparent;
        z-index: 99;
        overflow: hidden;

        // 登录提示
        .welcome-copywriting {
            position: absolute;
            width: 100%;
            // top: 35%;
            top: 190rpx;
            height: auto;
            .hi-img{
              width: 92rpx;
              height: 92rpx;
              position: absolute;
              left: 24rpx;
              top: -72rpx;
            }

            text {
                width: 100%;
                float: left;
                padding: 0 60rpx 0 92rpx;
                box-sizing: border-box;
                font-family: YSBTH;
                font-weight: normal;
                font-size: 68rpx;
                color: #FFFFFF;
                line-height: 72rpx;
                text-align: left;
                font-style: normal;
            }
            .h5_login_subtitle{
              padding-left: 144rpx;
            }
        }

        //登录提示框
        .user-info {
            position: absolute;
            top: 50%;
            transform: translate(0,-50%);
            width: 100%;

            .verification {
                padding: 0 60rpx;
                .img{
                  width: 36rpx;
                  height: 36rpx;
                  margin-right: 10rpx;
                }
				.img-append {
					width: 42rpx;
					height: 40rpx;
					margin-left: 16rpx;
				}
                .user-input {
                    padding: 20rpx 48rpx;
                    width: calc(100% - 96rpx);
                    border-radius: 30px;
                    // background-color: #EDF0F7;
                    border-radius: 46rpx;
                    border: 2rpx solid #B2E1FD;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    color: #FFFFFF;
                    background-color: #fff;
                }

                .login-code {
                    height: 38px;
                    float: right;

                    .login-code-img {
                        height: 38px;
                        position: absolute;
                        margin-left: 10px;
                        width: 200rpx;
                    }
                }


                .login-btn {
                    margin-top: 68rpx;
                    background: linear-gradient(to right, #26E3B6, #2ED7FF);
                    height: 96rpx;
                    font-size: 36rpx;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 500;
                    font-size: 32rpx;
                    color: #fff;
                    line-height: 96rpx;
                    text-align: center;
					display: flex;
					justify-content: center;
                    font-style: normal;
                }

                .login-remember {
                    display: flex;
                    align-items: center;
                    margin-top: 28rpx;
                    padding-left: 16rpx;

                    /deep/ .u-checkbox__icon-wrap {
                        background-color: rgba(57, 178, 252,0) !important;
                        border: 2rpx solid #FFFFFF!important;
                    }
                }

            }
        }
    }
}

.page-container-enterprises {
    font-family: PingFangSC, PingFang SC;
    height: 100%;
    width: 100%;
    height:100vh;
    background: #FFFFFF;

   


    .login-content {
        background-color: transparent;
        z-index: 99;
        overflow: hidden;
		
		
        // 登录提示
        .welcome-copywriting {
            position: absolute;
            width: 100%;
            top: 6%;
            // top: 110rpx;
            height: auto;
          

           text {
                width: 100%;
                float: left;
                padding: 0 54rpx 0 54rpx;
                box-sizing: border-box;
                font-family: YSBTH;
                font-weight: normal;
                font-size: 68rpx;
                color: #FFFFFF;
                line-height: 76rpx;
                text-align: left;
                font-style: normal;
            }
			.h5_login_title {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 60rpx;
				color: #4573FC;
				line-height: 76rpx;
				text-align: left;
				font-style: normal;
			}
            .h5_login_subtitle{
			  font-family: PingFangSC, PingFang SC;
			  font-weight: 500;
			  font-size: 40rpx;
			  color: #4573FC;
			  line-height: 76rpx;
			  text-align: left;
			  font-style: normal;
            }
        }
		
		.bg-img {
			position: absolute;
			 top: 21%;
			  width: 100%;
			 display: flex;
			 justify-content: center;
			 align-items: center;
			.background-image {
				
			    width: 578rpx;
			    height: 458rpx;
			}
		}
		

        //登录提示框
        .user-info {
            position: absolute;
            top: 71%;
            transform: translate(0,-50%);
            width: 100%;

            .verification {
                padding: 0 74rpx;
                .img{
                  width: 42rpx;
                  height: 40rpx;
                  margin-right: 16rpx;
                }
				.img-append {
					width: 42rpx;
					height: 40rpx;
					margin-left: 16rpx;
				}
                .user-input {
                    padding: 20rpx 0rpx;
                    width: calc(100%);
                    border-radius: 0px;
                    border-bottom: 2rpx solid #DDDDDD;
                    display: flex;
                    justify-content: center;
                    align-items: center;
          
					
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 32rpx;
					color: #DDDDDD;
					line-height: 44rpx;
					text-align: left;
					font-style: normal;
                }

                .login-code {
                    height: 38px;
                    float: right;

                    .login-code-img {
                        height: 38px;
                        position: absolute;
                        margin-left: 10px;
                        width: 200rpx;
                    }
                }


                .login-btn {
                    margin-top: 40rpx;
                   background: #4573FC;
                   border-radius: 40rpx;
				   
                    height: 80rpx;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    font-size: 36rpx;
                    color: #FFFFFF;
                    line-height: 80rpx;
                    text-align: center;
                    font-style: normal;
                }

                .login-remember {
                    display: flex;
                    align-items: center;
                    margin-top: 28rpx;
                    padding-left: 0rpx;
					
					

                    /deep/ .u-checkbox-label--left {
                     
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #4573FC;
						line-height: 40rpx;
						text-align: left;
						font-style: normal;
                    }
                }

            }
        }
    }
}


 .page-container {
      font-family: PingFangSC, PingFang SC;
      height: 100%;
        width: 100%;
        height:100vh;
	   .background-image {
		   position: absolute;
		   top: 0;
		   right: 0;
		   width: 100%;
		   height: 100%;
	   }
	   
	   .login-content {
		   background-color: transparent; 
		   z-index: 99; 
		   overflow: hidden;
		   
		   // 登录提示
		   .welcome-copywriting {
			   position: absolute;
			   width: 100%;
			   top: 35%;
			   height: auto;
			   
			   text {
					width: 100%;
					float: left;
					padding: 0 90rpx 0 90rpx;
					color: #1990FF;
					box-sizing: border-box;
                   
					// &:first-child {
					// 	font-size: 48rpx;
					// 	font-weight: 600;
					// 	margin-bottom: 20rpx;
					// }
					
					// &:last-child {
					// 	font-size: 40rpx;
					// 	font-weight: 600;
					// }

			   }
                           .h5_login_title {
                               font-size: 48rpx;
                               font-weight: 600;
                               margin-bottom: 20rpx;
                           }
            
                           .h5_login_subtitle {
                               font-size: 40rpx;
                               font-weight: 600;
                           }
		   }
		   //登录提示框
		   .user-info {
			   position: absolute;
			   top: 48%;
			   width: 100%;
			   
			   .verification {
					padding: 0 40rpx;
		
					.user-input {
						padding: 20rpx 48rpx;
						width: calc(100% - 96rpx);
						border-radius: 30px;
						background-color: #EDF0F7;
						display: flex;
						justify-content: center;
						align-items: center;
					}
					
					.login-code {
						height: 38px;
						float: right;
					  
						.login-code-img {
						  height: 38px;
						  position: absolute;
						  margin-left: 10px;
						  width: 200rpx;
						}
					}
					
					.login-btn {
						margin-top: 20rpx;
						background: #1990FF;
						height: 96rpx; 
						font-size: 36rpx;
					}
					
			   }
		   }
	   }
   }
</style>