From 9b80c42df73cb99b37d95b5c0a186ceec5e45a27 Mon Sep 17 00:00:00 2001
From: liukangdong <898885815@qq.com>
Date: 星期二, 07 一月 2025 17:23:31 +0800
Subject: [PATCH] ll
---
h5/pages/staffLogin/login.vue | 625 ++++++++++++++++++++++++++++++++++++--------------------
1 files changed, 403 insertions(+), 222 deletions(-)
diff --git a/h5/pages/staffLogin/login.vue b/h5/pages/staffLogin/login.vue
index f6252d7..81d457b 100644
--- a/h5/pages/staffLogin/login.vue
+++ b/h5/pages/staffLogin/login.vue
@@ -1,222 +1,403 @@
-<template>
- <view class="login">
- <image class="login_bg" src="@/static/login_bg@2x.png" />
- <image class="login_logo" src="@/static/logo@2x.png" mode="widthFix" />
- <view class="login_title">瀹夋嘲鐗╂祦鏅烘収鍥尯</view>
- <view class="login_list">
- <view class="login_list_item">
- <image src="@/static/login_ic_phone@2x.png" mode="widthFix" />
- <input v-model="form.username" maxlength="18" placeholder="璐﹀彿" />
- </view>
- <view class="login_list_item">
- <image src="@/static/login_ic_password@2x.png" mode="widthFix" />
- <input v-model="form.password" type="password" placeholder="瀵嗙爜" />
- </view>
- <view class="login_list_item">
- <image src="@/static/ic_captcha.png" mode="widthFix"></image>
- <input v-model="form.code" placeholder="楠岃瘉鐮�" type="text" />
- <image
- @click="initCaptcha"
- :src="captcha.image"
- class="captcha"
- mode="widthFix"
- />
- </view>
- </view>
- <view class="login_btn">
- <view class="login_btn_n" @click="onLogin">绔嬪嵆鐧诲綍</view>
- <view @click="$jump('/pages/staffLogin/forgetPsd')" class="for_psd"
- >蹇樿瀵嗙爜</view
- >
- </view>
-
- <view class="deal_wrap">
- <checkbox @change="dealChange" />
- <text>鐧诲綍鍗冲悓鎰�</text>
- <text class="deal" @click="isShowProtocol = true"
- >銆婂畨娉扮墿娴佺敤鎴峰崗璁��</text
- >
- </view>
- <!-- -->
- <u-popup
- :show="isShowProtocol"
- @close="isShowProtocol = false"
- mode="center"
- >
- <view class="modal">111</view>
- </u-popup>
- </view>
-</template>
-
-<script>
-import { loginPost, loginCaptcha, getUserInfo } from '@/api'
-import { mapState, mapMutations } from 'vuex'
-export default {
- name: 'login',
-
- data() {
- return {
- form: {
- account: '',
- password: '',
- },
- isShowProtocol: false,
- captcha: {}
- }
- },
-
- onLoad() {
- this.initCaptcha()
- },
-
- methods: {
- ...mapMutations(["setToken", "setUserInfo"]),
- dealChange(e) {
- console.log(e)
- },
- initCaptcha() {
- loginCaptcha().then(res => {
- this.captcha = res.data
- })
- },
-
- onLogin() {
- const { form } = this
- if (!form.username) return uni.showToast({
- title: '璐﹀彿涓嶈兘涓虹┖',
- icon: 'none'
- })
- if (!form.password) return uni.showToast({
- title: '瀵嗙爜涓嶈兘涓虹┖',
- icon: 'none'
- })
- if (!form.code) return uni.showToast({
- title: '楠岃瘉鐮佷笉鑳戒负绌�',
- icon: 'none'
- })
- loginPost({
- ...form,
- uuid: this.captcha.uuid,
- openId: this.$store.state.openId
- }).then(res => {
- if (res.code === 200) {
- this.setToken(res.data)
- getUserInfo().then(ress => {
- this.setUserInfo(ress.data)
- uni.redirectTo({
- url: "/pages/staff/index"
- })
- })
- }
- })
- }
- }
-}
-</script>
-
-<style lang="scss" scoped>
-.login {
- width: 100%;
- height: 100vh;
- display: flex;
- padding-top: 160rpx;
- box-sizing: border-box;
- align-items: center;
- flex-direction: column;
- background: linear-gradient(
- 180deg,
- rgba(39, 155, 170, 0.2) 0%,
- rgba(39, 155, 170, 0) 100%
- );
- .login_logo {
- width: 180rpx;
- height: 180rpx;
- }
- .login_bg {
- position: absolute;
- top: 0;
- width: 750rpx;
- }
- .login_title {
- font-size: 44rpx;
- font-weight: 600;
- color: #333333;
- margin-top: 40rpx;
- margin-bottom: 120rpx;
- }
- .login_list {
- width: 100%;
- padding: 0 60rpx;
- box-sizing: border-box;
- .login_list_item {
- width: 100%;
- border-radius: 50rpx;
- height: 98rpx;
- padding: 0 40rpx;
- box-sizing: border-box;
- background: #ffffff;
- margin-bottom: 40rpx;
- display: flex;
- align-items: center;
- justify-content: space-between;
- &:last-child {
- margin-bottom: 0 !important;
- }
- image {
- flex-shrink: 0;
- width: 40rpx;
- height: 40rpx;
- }
- .captcha {
- width: 200rpx;
- }
- input {
- flex: 1;
- height: 100%;
- color: #666666;
- margin-left: 24rpx;
- border: none;
- }
- }
- }
- .login_btn {
- width: 100%;
- padding: 0 60rpx;
- box-sizing: border-box;
- margin-top: 80rpx;
- .for_psd {
- color: $uni-color-primary;
- margin-top: 40rpx;
- width: 140rpx;
- text-align: center;
- margin: 40rpx auto;
- }
- .login_btn_n {
- width: 100%;
- height: 98rpx;
- background: $uni-color-primary;
- box-shadow: 0rpx 12rpx 24rpx 0rpx rgba(39, 155, 170, 0.2);
- display: flex;
- align-items: center;
- justify-content: center;
- font-weight: 500;
- font-size: 32rpx;
- color: #ffffff;
- border-radius: 50rpx;
- }
- }
- .deal_wrap {
- position: absolute;
- width: 100%;
- left: 0;
- text-align: center;
- bottom: 108rpx;
- .deal {
- color: $uni-color-primary;
- }
- }
-}
-.modal {
- padding: 32rpx;
-}
-</style>
+<template>
+ <view class="login" :style="{height: windowHeight + 'px'}">
+ <image class="login_bg" src="@/static/login_bg@2x.png" mode="widthFix" />
+ <image class="login_logo" src="@/static/logo@2x.png" mode="widthFix" />
+ <view class="login_title">瀹夋嘲鐗╂祦鏅烘収鍥尯</view>
+ <view class="tabs">
+ <view class="tab" @click="tabsClick(0)" :class="{active: activeTab == 0 }">
+ <view>璐﹀彿鐧诲綍</view>
+ <view class="bor"></view>
+ </view>
+ <view class="tab" @click="tabsClick(1)" :class="{active: activeTab == 1 }">
+ <view>楠岃瘉鐮佺櫥褰�</view>
+ <view class="bor"></view>
+ </view>
+ </view>
+ <view class="login_list">
+ <template v-if="activeTab == 0">
+ <view class="login_list_item">
+ <image src="@/static/login_ic_phone@2x.png" mode="widthFix" />
+ <input v-model="form.username" type="number" maxlength="18" @focus="showKeyboard = true"
+ @blur="showKeyboard = false" placeholder="璐﹀彿" />
+ </view>
+ <view class="login_list_item">
+ <image src="@/static/login_ic_password@2x.png" mode="widthFix" />
+ <input v-model="form.password" @focus="showKeyboard = true" @blur="showKeyboard = false" type="password"
+ placeholder="瀵嗙爜" />
+ </view>
+ </template>
+ <template v-else>
+ <view class="login_list_item">
+ <image src="@/static/login_ic_phone@2x.png" mode="widthFix" />
+ <input v-model="form.phone" type="tel" @focus="showKeyboard = true" @blur="showKeyboard = false"
+ :maxlength="18" placeholder="鎵嬫満鍙�" />
+ </view>
+ <view class="login_list_item">
+ <image src="@/static/ic_captcha.png" mode="widthFix"></image>
+ <input v-model="form.code" placeholder="璇疯緭鍏ラ獙璇佺爜" :maxlength="6" type="number" />
+ <text class="captcha" v-if="countDown == 0" @click="initCaptcha">鑾峰彇楠岃瘉鐮�</text>
+ <text class="placeholder9" v-else>{{ countDown }}</text>
+ </view>
+ </template>
+ <!-- <view class="login_list_item">
+ <image src="@/static/ic_captcha.png" mode="widthFix"></image>
+ <input v-model="form.code" @focus="showKeyboard = true" @blur="showKeyboard = false" placeholder="楠岃瘉鐮�" type="text" />
+ <image
+ @click="initCaptcha"
+ :src="captcha.image"
+ class="captcha"
+ mode="widthFix"
+ />
+ </view> -->
+ </view>
+ <view class="login_btn">
+ <view class="login_btn_n" @click="onLogin">绔嬪嵆鐧诲綍</view>
+ <view @click="$jump('/pages/staffLogin/forgetPsd')" class="for_psd">蹇樿瀵嗙爜</view>
+ </view>
+
+ <view class="deal_wrap">
+ <image @click="changeFalg" v-if="ProtocolFlag" src="@/static/checkbox_sel@2x.png" mode="widthFix" class="checked">
+ </image>
+ <image @click="changeFalg" v-if="!ProtocolFlag" src="@/static/meeting/icon/ic_choose@2x.png" mode="widthFix"
+ class="checked"></image>
+ <text>鐧诲綍鍗冲悓鎰�</text>
+ <text class="deal" @click="showContent">銆婂畨娉扮墿娴佺敤鎴峰崗璁��</text>
+ </view>
+ <!-- -->
+ <u-popup :show="isShowProtocol" @close="isShowProtocol = false" closeable :round="8" mode="center">
+ <view class="modal">
+ <!-- <view v-html="htmlText"></view> -->
+ <view class="content">
+ <mp-html :content="htmlText" />
+ </view>
+ </view>
+ </u-popup>
+ </view>
+</template>
+
+<script>
+ import {
+ loginPost,
+ loginH5ByPhone,
+ getUserInfo,
+ getSystemDictData,
+ saveHkUserOpenid,
+ sendSms
+ } from '@/api'
+ import {
+ mapState,
+ mapMutations
+ } from 'vuex'
+ export default {
+ name: 'login',
+
+ data() {
+ return {
+ form: {
+ // username: '18655749830',
+ username: null,
+ phone: null,
+ password: null,
+ code: null
+ },
+ showKeyboard: false,
+ isShowProtocol: false,
+ ProtocolFlag: false,
+ captcha: {},
+ htmlText: '',
+ windowHeight: '',
+
+ countDown: 0,
+ activeTab: 0,
+
+ ywinfo: {}
+ }
+ },
+
+ onLoad() {
+ const result = uni.getWindowInfo()
+ this.windowHeight = result.windowHeight
+
+ const ywinfo = uni.getStorageSync('ywinfo') || {}
+ if (ywinfo.ywid && ywinfo.type == 2) {
+ this.ywinfo = ywinfo
+ uni.setStorageSync('ywinfo', {})
+ }
+ },
+ onBackPress(options) {
+ uni.redirectTo({
+ url: '/pages/login/login'
+ })
+ return true
+ },
+ methods: {
+ onLogin() {
+ const {
+ form,
+ ProtocolFlag,
+ activeTab
+ } = this
+ if (!ProtocolFlag) return uni.showToast({
+ title: '璇峰厛闃呰骞跺悓鎰忕敤鎴峰崗璁�',
+ icon: 'none'
+ })
+ if (activeTab == 0) {
+ if (!form.username) return uni.showToast({
+ title: '璐﹀彿涓嶈兘涓虹┖',
+ icon: 'none'
+ })
+ if (!form.password) return uni.showToast({
+ title: '瀵嗙爜涓嶈兘涓虹┖',
+ icon: 'none'
+ })
+ } else {
+ if (!form.phone) return uni.showToast({
+ title: '鎵嬫満鍙蜂笉鑳戒负绌�',
+ icon: 'none'
+ })
+ if (!form.code) return uni.showToast({
+ title: '楠岃瘉鐮佷笉鑳戒负绌�',
+ icon: 'none'
+ })
+ }
+ let fn = activeTab == 0 ? loginPost : loginH5ByPhone
+ fn({
+ ...form,
+ openid: this.$store.state.openId
+ }).then(res => {
+ if (res.code === 200) {
+ this.setToken(res.data)
+ getUserInfo().then(ress => {
+ uni.setStorageSync('ywinfo', this.ywinfo)
+ this.setUserInfo(ress.data)
+ uni.redirectTo({
+ url: "/pages/staff/index"
+ })
+ })
+ saveHkUserOpenid({})
+ } else {
+ }
+ })
+ },
+ ...mapMutations(["setToken", "setUserInfo"]),
+ tabsClick(val) {
+ this.activeTab = val
+ if (val == 0) {
+ this.form.username = this.form.username || this.form.phone
+ this.form.phone = null
+ this.form.code = null
+ } else {
+ this.form.phone = this.form.username || this.form.phone
+ this.form.password = null
+ this.form.username = null
+ }
+ },
+ changeFalg() {
+ this.ProtocolFlag = !this.ProtocolFlag
+ },
+ getContent() {
+ getSystemDictData({
+ dictCode: 'SYSTEM',
+ label: 'USER_PROTOCOL'
+ }).then(res => {
+ this.htmlText = res.data.code
+ this.isShowProtocol = true
+ })
+ },
+ showContent() {
+ this.getContent()
+ },
+ initCaptcha() {
+ if (!this.form.phone) return uni.showToast({
+ title: '鎵嬫満鍙蜂笉鑳戒负绌�',
+ icon: 'none'
+ })
+ sendSms({
+ phone: this.form.phone
+ }).then(res => {
+ this.countDown = 60
+ setInterval(() => {
+ if (this.countDown == 0) return
+ this.countDown--
+ }, 1000)
+ })
+ }
+ }
+ }
+</script>
+
+<style lang="scss" scoped>
+ .login {
+ width: 100%;
+ display: flex;
+ padding-top: 130rpx;
+ box-sizing: border-box;
+ align-items: center;
+ flex-direction: column;
+ position: relative;
+ background: linear-gradient(180deg,
+ rgba(39, 155, 170, 0.2) 0%,
+ rgba(39, 155, 170, 0) 100%);
+
+ .login_logo {
+ width: 180rpx;
+ height: 180rpx;
+ }
+
+ .login_bg {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ z-index: -1;
+ }
+
+ .login_title {
+ font-size: 44rpx;
+ font-weight: 600;
+ color: #333333;
+ margin-top: 40rpx;
+ }
+
+ .tabs {
+ display: flex;
+ align-items: center;
+ justify-content: space-evenly;
+ width: 530rpx;
+ margin: 60rpx auto 42rpx;
+
+ .tab {
+ font-size: 30rpx;
+ color: #666666;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ height: 52rpx;
+ line-height: 36rpx;
+ }
+
+ .active {
+ font-weight: bold;
+ font-size: 34rpx;
+ color: #222222;
+
+ .bor {
+ width: 80rpx;
+ height: 8rpx;
+ background: linear-gradient(to bottom, #4d99a8, #a3c8d4);
+ }
+ }
+ }
+
+ .login_list {
+ width: 100%;
+ padding: 0 60rpx;
+ box-sizing: border-box;
+
+ .login_list_item {
+ width: 100%;
+ border-radius: 50rpx;
+ height: 98rpx;
+ padding: 0 40rpx;
+ box-sizing: border-box;
+ background: #ffffff;
+ margin-bottom: 40rpx;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+
+ &:last-child {
+ margin-bottom: 0 !important;
+ }
+
+ .captcha {
+ color: $uni-color-primary;
+ font-size: 30rpx;
+ }
+
+ image {
+ flex-shrink: 0;
+ width: 40rpx;
+ height: 40rpx;
+ }
+
+ .captcha {
+ width: 200rpx;
+ }
+
+ input {
+ flex: 1;
+ height: 100%;
+ color: #666666;
+ margin-left: 24rpx;
+ border: none;
+ }
+ }
+ }
+
+ .login_btn {
+ width: 100%;
+ padding: 0 60rpx;
+ box-sizing: border-box;
+ margin-top: 60rpx;
+
+ .for_psd {
+ color: $uni-color-primary;
+ width: 140rpx;
+ text-align: center;
+ margin: 40rpx auto;
+ }
+
+ .login_btn_n {
+ width: 100%;
+ height: 98rpx;
+ background: $uni-color-primary;
+ box-shadow: 0rpx 12rpx 24rpx 0rpx rgba(39, 155, 170, 0.2);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-weight: 600;
+ font-size: 32rpx;
+ color: #ffffff;
+ border-radius: 50rpx;
+ }
+ }
+
+ .deal_wrap {
+ position: absolute;
+ width: 100%;
+ left: 0;
+ text-align: center;
+ bottom: 48rpx;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ .deal {
+ color: $uni-color-primary;
+ }
+
+ .checked {
+ width: 48rpx;
+ margin-right: 12rpx;
+ }
+ }
+
+ .rela_wrap {
+ position: relative;
+ margin-top: 360rpx;
+ }
+ }
+
+ .modal {
+ width: 690rpx;
+ max-height: 80vh;
+ border-radius: 24rpx;
+ padding: 30rpx 30rpx;
+ overflow: auto;
+ // .content{
+ // height: 100%;
+ // overflow: auto;
+ // }
+ }
+</style>
\ No newline at end of file
--
Gitblit v1.9.3