pad-hl-hcx-new/pages/login/login.vue

<template>
	<view class="login_bg">
		<view class="login_wrap">
			<view class="login_tab">
				<view class="login_tab_line drift" :style="{'left': drift+'%'}"></view>
				<view class="login_tab_item" @tap="_tabChange(0)">登录</view>
				<view class="login_tab_item" @tap="_tabChange(50)">配置</view>
			</view>
			<view class="login_cnt drift" :style="{'left': '-'+drift*2+'%'}">
				<view class="login_card">
					<view class="card_wrap">
						<view class="inputOuter">
							<input type="text" placeholder="用户名" v-model="loginname" class="inputStyle">
							<text v-show="showBtn3" class="iconfont login_icon delete_icon" @tap="clearData(3)"></text>
						</view>
						<view class="inputOuter">
							<input :type="inputType" placeholder="密码" v-model="password" class="inputStyle">
							<text class="iconfont login_icon" :class="eyeOpen ? 'eye_colse_icon' : 'eye_open_icon'" @click="passwordShow"></text>
						</view>
					</view>
					<view class="submit">
						<button class="primary-button" :disabled="disabled" @click="toLogin">登&nbsp;&nbsp;录</button>
					</view>
					<view class="scanBox" @tap="toScan">
						<view class="iconfont scan_icon"></view>
						<text class="san_text">扫码登录</text>
					</view>
				</view>
				<view class="login_card">
					<view class="card_wrap">
						<view class="inputOuter">
							<input type="text" placeholder="域名地址" v-model="baseUrl" class="inputStyle">
							<text v-show="showBtn1" class="iconfont login_icon delete_icon" @tap="clearData(1)"></text>
						</view>
						<view class="inputOuter">
							<input type="text" placeholder="图片域名地址" v-model="imgBaseUrl" class="inputStyle">
							<text v-show="showBtn2" class="iconfont login_icon delete_icon" @tap="clearData(2)"></text>
						</view>
					</view>
					<view class="submit">
						<button class="primary-button" :disabled="disabled" @tap="toConfig">配&nbsp;&nbsp;置</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { RSAencrypt } from '@/utils/jsencrypt.js'
	import {handLogin} from '@/utils/getData2.js'
	import permision from "@/utils/permission.js"
	export default {
		data() {
			return {
				loginname: '',
				password: '',
				baseUrl: this.$store.getters.baseUrl,
				imgBaseUrl: this.$store.getters.imgBaseUrl,
				inputType: 'password',
				eyeOpen: true,
				drift: 0,
				disabled: false,
				jobnum: '',
				qrcode: '',
				logintype: ''
			};
		},
		computed: {
			showBtn1 () {
				return this.baseUrl !== ''
			},
			showBtn2 () {
				return this.imgBaseUrl !== ''
			},
			showBtn3 () {
				return this.loginname !== ''
			}
		},
		methods: {
			_tabChange (num) {
				this.drift = num
			},
			clearData (t) {
				switch (t) {
					case 1:
						this.baseUrl = ''
						break
					case 2:
						this.imgBaseUrl = ''
						break
					case 3:
						this.loginname = ''
						break
				}
			},
			passwordShow () {
				this.eyeOpen = !this.eyeOpen
				if (this.eyeOpen) {
					this.inputType = 'password'
				} else {
					this.inputType = 'text'
				}
			},
			toConfig () {
				let obj = {
					baseUrl: this.baseUrl,
					imgBaseUrl: this.imgBaseUrl
				}
				this.$store.dispatch('setConfig', obj)
				this._tabChange(0)
			},
			async toLogin() {
				this.disabled = true
				if (this.loginname === '') {
					uni.showToast({
						title: '用户名不能为空',
						icon: 'none'
					})
					this.disabled = false
					return
				}
				  if (this.password === '') {
					uni.showToast({
						title: '密码不能为空',
						icon: 'none'
					})
					this.disabled = false
					return
				}
				try {
					let res = await handLogin(this.loginname, RSAencrypt(this.password))
					this.$store.dispatch('saveUserInfo', JSON.stringify(res.user.user))
					this.$store.dispatch('saveToken', res.token)
					uni.redirectTo({
						url: '/pages/home/home'
					})
					this.disabled = false
				} catch (e) {
					this.disabled = false
				}
			},
			async toScan() {
				// #ifdef APP-PLUS
				let status = await this.checkPermission();
				if (status !== 1) {
				    return;
				}
				// #endif
				uni.scanCode({
					success: (res) => {
						console.log(res.result)
					},
					fail: (err) => {
						// uni.showToast({
						// 	title: '出错',
						// 	icon: 'none'
						// })
					}
				});
			}
			// #ifdef APP-PLUS
			,
			async checkPermission(code) {
				let status = permision.isIOS ? await permision.requestIOS('camera') :
					await permision.requestAndroid('android.permission.CAMERA');
			
				if (status === null || status === 1) {
					status = 1;
				} else {
					uni.showModal({
						content: "需要相机权限",
						confirmText: "设置",
						success: function(res) {
							if (res.confirm) {
								permision.gotoAppSetting();
							}
						}
					})
				}
				return status;
			}
			// #endif
		}
	}
</script>

<style lang="stylus" scoped>
@import '../../common/style/mixin.styl';
.login_bg
	_wh(100%, 100%)
	_bis(#fff,'../../static/images/bg_01.png', 100%,,bottom)
.login_wrap
	position fixed
	left 50%
	top 50%
	width 44%
	transform translate3d(-50%, -50%, 0)
	border-radius 5px
	overflow hidden
.login_tab
	position relative
	height 35px
	border-bottom 1px solid #E2E2E2
	margin-bottom 15px
.login_tab_item
	float left
	width 50%
	_font(16px,35px,#444444,,center)
	cursor pointer
.login_tab_line
	position absolute
	width 50%
	height 2px
	background-color #D7592F
	left 0
	bottom -1px
.login_cnt
	position relative
	width 200%
	overflow hidden
.login_card
	width 50%
	float left
.card_wrap
	overflow hidden
.inputOuter
	position relative
	width 100%
	margin 15px auto
.inputStyle
	_wh(100%,35px)
	_font(16px,35px,#999,,)
	text-indent 10px
	border-bottom 1px solid #E2E2E2
	box-sizing border-box
.login_icon
	position absolute
	top 0
	right 10px
.submit
	width 100%
	margin 15px auto
	text-align center
.primary-button
	_wh(100%, 35px)
	background-color #d7592f
	border-radius 35px
	_font(16px,35px,#fff,,center)
.scanBox
	_fj()
	flex-direction  column
.san_text
	_font(16px,24px,#D7592F,,center)
.drift
	transition left .3s linear
</style>