crm-uni/pages/login/index.vue

<template>
	<view class="page">
		<view class="title">
			<image src="/static/image/lingke.png" mode=""></image>
		</view>
		<view class="changeyy" @click="showlang = true">
			<image src="/static/image/change1.png" mode=""></image>{{$t('home.langbtn')}}
		</view>
		<view class="form">
			<view class="inputs_button">
				<view class="inputs">
					<view class="account">
						<u--input
							type="text"
						    :placeholder="$t('account')"
						    v-model="email"
						    border="none"
						  ></u--input>
						<!-- <input type="text" v-model="email"  :placeholder="$t('account')" /> -->
					</view>
					<view class="password">
						<u--input
							type="password"
						    :placeholder="$t('password')"
						    v-model="password"
						    border="none"
						  ></u--input>
					</view>
				</view>
				<view class="forgot-password">
					<view @click="regin">{{$t('reg')}}</view>
					<view @click="forgotPassword">{{$t('fgpassword')}}？</view>
				</view>
				<view class="button">
					<view @click="login">
						{{$t('login')}}
					</view>
				</view>
			</view>
			<!-- <view class="three">
				<u-divider :text="$t('threelogin')" style="padding: 0px 40px;"></u-divider>
				<u-grid :border="false" @click="click" align="center">
					<u-grid-item>
						<image src="/static/image/login/fenshu.png" mode=""></image>
						<text class="grid-text">{{$t('Facebook')}}</text>
					</u-grid-item>
					<u-grid-item>
						<image src="/static/image/login/emali.png" mode=""></image>
						<text class="grid-text">{{$t('email')}}</text>
					</u-grid-item>
					<u-grid-item>
						<image src="/static/image/login/phone.png" mode=""></image>
						<text class="grid-text">{{$t('phone')}}</text>
					</u-grid-item>
				</u-grid>
			</view> -->
			
		</view>
		<view class="pact">
			<radio :checked="pactChecked" activeBackgroundColor="#3264ed" activeBorderColor="#3264ed"
				borderColor="#3264ed" color="#fff" @click="pactChange" />
			<view>{{$t('agreeMsg')}}<text @click="navigateToAgreement">{{$t('UserAgreement')}}</text>{{$t('and')}}<text @click="navigateToPrivacy">{{$t('Privacy')}}</text></view>
		</view>
		<view class="footer">
			<text class="copyright">© 2024 powered by 河南新友合科技有限公司</text>
		</view>
		<u-picker closeOnClickOverlay :cancel-text="$t('cancel')" :confirm-text="$t('confirm')"  @close="close" :show="showlang" :columns="columns"
			@cancel="cancellang" @confirm="confirmlang" :title="$t('home.langbtn')" keyName="label"></u-picker>
	</view>
</template>

<script>
	import { request,showToast } from '@/api/apiT.js'
	export default {
		data() {
			return {
				email: "",
				password: "",
				pactChecked: false,
				showlang: false,
				columns: [
					[{
						label: this.$t('zh'),
						id: 'zh-Hans'
					}, {
						label: this.$t('en'),
						id: 'en'
					},{
						label: this.$t('ru'),
						id: 'ru'
					}]
				],
				language:uni.getLocale()
			}
		},
		onLoad() {
			if(uni.getStorageSync('token')){
				uni.reLaunch({
					url: '/pages/index/index',// 替换为你要跳转的页面路径
				});
			}
		},
		methods: {
			close(){
				this.showlang = false
			},
			cancellang() {
				this.showlang = false
			},
			//语言切换事件
			confirmlang(e) {
				uni.setLocale(e.value[0].id)
				this.$i18n.locale = e.value[0].id
				uni.setStorageSync('i18locale', e.value[0].id);
				this.language = e.value[0].id
				this.showlang = false
				this.columns =[
					[{
						label: this.$t('zh'),
						id: 'zh-Hans'
					}, {
						label: this.$t('en'),
						id: 'en'
					},{
						label: this.$t('ru'),
						id: 'ru'
					}]
				];
				this.list1 = [{
					name: this.$t('all'),
				}, {
					name: this.$t('followup'),
				}, {
					name: this.$t('deal')
				}, {
					name: this.$t('lost')
				}];
				uni.setTabBarItem({
					index: 0,
					text: this.$t('tabbar.home')
				})
				uni.setTabBarItem({
					index: 1,
					text: this.$t('tabbar.customer')
				})
				uni.setTabBarItem({
					index: 2,
					text: this.$t('tabbar.mine')
				})
			},
			pactChange() {
				this.pactChecked = !this.pactChecked
			},
			regin(){
				uni.navigateTo({
					url: '/pages/login/register'
				})
			},
			forgotPassword(){
				uni.navigateTo({
					url: '/pages/mine/resetPwd'
				})
			},
			login() {
				if(this.email==''){
					uni.showToast({
						title:this.$t('emailerr'),
						icon: 'none'
					});
					return false
				}
				if(this.password==''){
					uni.showToast({
						title:this.$t('passworerr'),
						icon: 'none'
					});
					return false
				}
				if(!this.pactChecked){
					uni.showToast({
						title:this.$t('agreementarr'),
						icon: 'none'
					});
					return false
				}
				if(this.language=='zh-Hans'){
					this.language= 'zh_CN'
				}
				request({
					url:'user/login',
					method:'POST',
					data:{
						email: this.email,
						password: this.password,
						language: this.language,
						abbr:'hesu'
					}
				}).then(res => {
					uni.setStorageSync('i18locale',this.language);
					if (res.data.code == -1) {
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						});
						
					} else if (res.data.code == 0) {
						//存取session
						uni.setStorageSync('userinfo',JSON.stringify(res.data.data));
						uni.setStorageSync('token', res.data.data.token);
						//返回数据接收成功
						uni.reLaunch({
							url: '/pages/index/index',// 替换为你要跳转的页面路径
						});
					}
				})
			},
			navigateToAgreement() {
				  uni.navigateTo({
					  url: '/pages/login/agreement',// 替换为你要跳转的页面路径
				  });
			},
			navigateToPrivacy() {
			  uni.navigateTo({
				  url: '/pages/login/agreementuser',// 替换为你要跳转的页面路径
			  });
			}
		}
	}
</script>

<style lang="scss" scoped>
	.changeyy {
		padding: 10px 15px;
		border-radius: 50px;
		background-color: #ECF2FF;
		margin-bottom: 50rpx;
		position: fixed;
		right: 15px;
		top: 5%;
		color: #3471FF;
		image {
			width: 14px;
			height: 12px;
			margin-right: 5px;
		}
	}
	.page {
		min-height: 100vh;
		background-image: url("../../static/image/login/loginbg.png");
		background-size: 100%;
		background-repeat: no-repeat;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.title {
			padding-top: 220rpx;
			text-align: center;
			image{
				width: 128px;
				height: 47px;
			}
		}

		.form {
			flex: 1;
			margin: 0 76rpx;
			overflow: hidden;

			.inputs_button {
				.inputs {
					padding: 150rpx 0px 0;
					margin-bottom: 20rpx;
					.account,
					.password{
						height: 80rpx;
						border-radius: 50px;
						padding: 0 48rpx;
						display: flex;
						align-items: center;
						background-color: #F6F6F6;

						input {
							flex: 1;
						}
					}

					.account {
						margin-bottom: 48rpx;
					}
				}

				.button {
					// padding: 0 32rpx;

					view {
						line-height: 80rpx;
						border-radius: 50px;
						text-align: center;
						font-size: 32rpx;
						background: linear-gradient(to right, #3471FF, #6776FF);
						color: #fff;
					}
				}
			}
			.three{
				margin: 40rpx 0px;
				padding: 20rpx 40rpx;
				image{
					width: 100rpx;
					height: 100rpx;
				}
			}
		}
		.forgot-password {
			display: flex;
			align-items: center;
			justify-content:space-between;
		  // text-align: right;
		  margin-bottom: 20px;
		}
		.pact {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 24rpx;
			margin-bottom: 30px;
			text {
				color: #3264ed;
			}

			radio {
				:deep(.uni-radio-input) {
					border: 1rpx solid #3264ed;
				}

				transform:scale(0.6)
			}
		}
	}
	.footer {
		width: 100%;
		text-align: center;
		position: fixed;
		bottom: 15px;
		.copyright {
			font-size: 12px;
			color:#3471FF;
		}
	}
</style>