antissoft / lvqianmeiye_ERP

  <template>

  	<view class="page" :style="{backgroundImage:`url(https://zhgw.028wlkj.com/cdwlMall/zsfwzxt/test/file/static/homePhoto.png)`}">
  		<view style="height: 100vh;width: 100%;position: fixed;bottom: 0;left: 0;">

  				<!-- 修改切换-->
  			<view style="width: 25%;margin: 0 auto;margin-top: 15vh;">

  				<image src="../../static/login/logo.jpg" style="width: 100%;border-radius: 18%;" mode="widthFix"></image>

  			</view>

  		<!-- 	<view style="width: 80%;margin: 0 auto;margin-top: 15vh;">
  				<image src="/static/login/logo2.png" style="width: 100%;border-radius: 18%;" mode="widthFix"></image>

  			</view> -->
  			<!-- 填写区 -->

  			<view class="input-info" style="margin-top: 8vh;">

  				<view class="info">
  					<view class="info-icon">
  						<image src="../../static/login/icon1.png" mode="heightFix"></image>

  					</view>

  					<input type="text" v-model="formData.username" placeholder="请输入用户名">
  					<view class="more"></view>

  				</view>

  				<view class="info">
  					<view class="info-icon">
  						<image src="../../static/login/icon2.png" mode="heightFix"></image>
  					</view>
  					<input v-if="!showPassword" type="password" v-model="formData.password" placeholder="请输入密码">
  					<input v-else type="text" v-model="formData.password" placeholder="请输入密码">
  					<view class="more">

  						<u-icon 
  							:name="showPassword ? 'eye-off' : 'eye'" 
  							size="20" 

  							color="#0FBB59"

  							@click="togglePassword"

  						></u-icon>
  					</view>
  				</view>

  			</view>
  			<!-- 按钮 -->
  			<view class="btn-info">
  				<view class="btn" @click="handleLogin" :class="{ 'btn-disabled': loading }">
  					<text>{{ loading ? '登录中...' : '登录' }}</text>

  				</view>
  			</view>

  		</view>

  		<view
  			style="position: fixed;left: 0;bottom: 49rpx;display: flex;flex-direction: row;justify-content: center;align-items: center;width: 100%;">
  			<view style="display: flex;align-items: center;font-size: 24rpx;color: #333;">
  				<u-checkbox-group @change="checkboxGroupChange" shape="circle">
  					<u-checkbox active-color="#3f9b6a" v-model="checked" name="tongyi" :label-disabled="true"></u-checkbox>
  				</u-checkbox-group>
  				<text style="margin-left: 8rpx;">我已阅读并同意</text>
  				<text style="color:#3f9b6a;margin-left: 4rpx;" @click="goyinsi">《隐私政策》</text>
  			</view>

  		</view>
  	</view>
  </template>
  
  <script>
  import md5 from '@/service/md5.js'
  export default {
  	data() {
  		return {

  			checked: null,
  			showTong: false,

  			loading: false,
  			showPassword: false,
  			formData: {
  				username: '',
  				password: ''
  			}
  		}
  	},

  	onLoad() {

  		// 页面加载时的初始化

  	},
  	methods: {

  		goyinsi() {
  			uni.navigateTo({

  				url: '/pages/web/web?url='+encodeURIComponent('https://erp.lvqianmeiye.com/ysxy.html')

  			});
  		},
  		checkboxGroupChange(val) {
  			this.showTong = val[0]

  		},
  		// 切换密码显示
  		togglePassword() {
  			this.showPassword = !this.showPassword
  		},

  		// 表单验证
  		validateForm() {

  			if (this.showTong != 'tongyi') {
  				uni.showToast({
  					title: '请阅读并同意隐私政策',
  					icon: 'none'
  				})
  				return false
  			}

  			if (!this.formData.username.trim()) {
  				uni.showToast({
  					title: '请输入用户名',
  					icon: 'none'
  				})
  				return false
  			}

  			if (!this.formData.password.trim()) {
  				uni.showToast({
  					title: '请输入密码',
  					icon: 'none'
  				})
  				return false
  			}

  			return true
  		},

  		async getuser() {
  			await this.API.getCurrentUser().then(res => {

  				console.error(res)

  				if (res.code === 200) {

  					let date = new Date();
  					uni.setStorageSync('userInfo', res.data.userInfo)
  				}
  			})
  		},

  		// 处理登录
  		async handleLogin() {
  			if (!this.validateForm()) {
  				return
  			}
  			
  			this.loading = true
  			
  			try {
  				// 对密码进行MD5加密
  				const password = md5.hex_md5(this.formData.password)
  				const res = await this.API.AppLogin({
  					account: this.formData.username,
  					password: password
  				})
  				
  				if (res.code === 200 || res.success) {
  					// 登录成功

  					const { token } = res.data

  					
  					// 保存token和用户信息
  					uni.setStorageSync('token', token)

  					await this.getuser()

  					uni.showToast({
  						title: '登录成功',
  						icon: 'success'
  					})
  
  					// 延迟跳转
  					setTimeout(() => {
  						uni.reLaunch({

  							url: '/pages/home/home'

  						})
  					}, 1500)
  					
  				} else {
  					// 登录失败
  					uni.showToast({

  						title: res.msg || '登录失败，请重试',

  						icon: 'none'
  					})
  				}
  				
  			} catch (error) {
  				console.error('登录失败:', error)
  				uni.showToast({
  					title: '网络错误，请稍后重试',
  					icon: 'none'
  				})
  			} finally {
  				this.loading = false
  			}
  		}
  	}
  }
  </script>
  

  <style scoped lang="scss">
  @import './login.scss';

  .btn-disabled {
  	background-color: #ccc !important;
  	opacity: 0.6;

  }

  </style>