new-dianxiaorui-uniapp/pageInvest/login/login.vue

<template>
	<view class="login">
		<view class="orderdetail_header p30">
			<view :style="{ height: statusBarHeight }"></view>
			<view style="height: 44px; display: flex; align-items: center">
				<up-icon name="arrow-left" bold color="#000" @click="back"></up-icon>
			</view>
		</view>

		<image class="login_bei" src="/static/logoB.png"></image>
		<statusBar />
		<view class="login_logo">
			<image class="login_logo_img" src="/static/logo.png"></image>
			<view class="login_logo_tit">欢迎来到投资者平台</view>
		</view>
		<view style="margin-top: 150rpx">
			<view style="margin-bottom: 50rpx">
				<up-input fontSize="30rpx" v-model="dataFrom.userName" placeholder="请输入您的用户名" border="bottom" clearable></up-input>
			</view>
			<view>
				<up-input fontSize="30rpx" v-model="dataFrom.passwd" type="password" placeholder="请输入您的密码" border="bottom" clearable></up-input>
			</view>
			<!-- 			<view style="display: flex; align-items: center">
				<up-input fontSize="30rpx" v-model="dataFrom.captcha" placeholder="请输入验证码" border="bottom" clearable></up-input>
				<image @click="getCaptcha" :src="captchaImg" style="width: 154rpx; height: 66rpx"></image>
			</view> -->
		</view>
		<view style="font-size: 28rpx; color: #666; margin-top: 20rpx; display: flex; align-items: center; justify-content: space-between">
			<view>
				忘记账号？
				<text style="color: rgba(111, 162, 86, 1)" @click="getBackAccout">找回用户名</text>
			</view>
			<view>
				<text style="color: rgba(111, 162, 86, 1)" @click="toGetBack">忘记密码</text>
			</view>
		</view>
		<view style="display: flex; justify-content: center; margin-top: 80rpx">
			<view class="login_btn" @click="login">登录</view>
		</view>
		<view style="display: flex; justify-content: center; margin-top: 40rpx; opacity: 0.5">
			<view class="login_btn" @click="toRegister">还没有账号？立即注册</view>
		</view>
		<!-- 		<view style="display: flex; justify-content: center; margin-top: 20rpx;font-size: 26rpx;">
			登录即表示接受
			<navigator url="/pages/agreement/agreement?id=9" style="color: rgba(111, 162, 86, 1);">《隐私政策》</navigator>
			和
			<navigator url="/pages/agreement/agreement?10" style="color: rgba(111, 162, 86, 1);">《用户注册服务协议》</navigator>
		</view> -->
	</view>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { loginByPassword, saveOpenIdByWxCode } from '@/api/api.js';
import { onLoad } from '@dcloudio/uni-app';
import store from '@/store/index.js';

const statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
let captchaImg = ref('');

let dataFrom = reactive({
	userName: '',
	passwd: '',
	uuid: '',
	captcha: ''
});

// onLoad(async () => {
// 	getCaptcha();
// });

let back = () => {
	uni.navigateBack();
};

let getCaptcha = async () => {
	let { captcha, uuid } = await captchaApi();
	dataFrom.uuid = uuid;
	captchaImg.value = 'data:image/png;base64,' + captcha;
};

let toRegister = () => {
	uni.navigateTo({
		url: '/pageInvest/login/register'
	});
};

let getBackAccout = () => {
	uni.navigateTo({
		url: '/pageInvest/login/getBackAccout'
	});
};

let toGetBack = () => {
	uni.navigateTo({
		url: '/pageInvest/login/getBack'
	});
};

let login = async () => {
	try {
		const { code } = await uni.login();
		let _res = await loginByPassword(dataFrom);
		// uni.setStorageSync('tokenInvest', _res.token);
		// uni.setStorageSync('userInvest', _res);
		uni.setStorageSync('token', _res.token);
		uni.setStorageSync('user', _res);
		uni.setStorageSync('isInvest', true);
		store.commit('setToken', _res.token);
		// #ifdef MP-WEIXIN
		let saveOpenId = await saveOpenIdByWxCode({ loginCode: code });
		// #endif
		// #ifdef MP-ALIPAY
		let saveOpenId = await saveOpenIdByZfbCode({ loginCode: code });
		// #endif
		uni.showToast({ title: '登录成功', icon: 'none' });
		setTimeout(() => {
			uni.reLaunch({
				url: '/pages/home/home'
			});
			// uni.navigateBack();
		}, 200);
	} catch (err) {
		// getCaptcha();
	}
};
</script>

<style scoped lang="scss">
.login {
	padding: 0 60rpx;

	&_bei {
		position: fixed;
		right: -120rpx;
		top: -206rpx;
		width: 728rpx;
		height: 728rpx;
	}

	&_logo {
		margin-top: 150rpx;
		&_img {
			width: 280rpx;
			height: 200rpx;
			// background: #e6e6e6;
			// box-shadow: 0rpx 0rpx 110rpx 2rpx rgba(115, 192, 76, 0.19);
			border-radius: 28rpx 28rpx 28rpx 28rpx;
			margin-bottom: 20rpx;
		}
		&_tit {
			font-weight: bold;
			font-size: 44rpx;
			color: #232323;
		}
	}
	&_btn {
		width: 474rpx;
		height: 78rpx;
		background: rgba(111, 162, 86, 1);
		border-radius: 54rpx 54rpx 54rpx 54rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: bold;
		font-size: 30rpx;
		color: #ffffff;
	}
}

.orderdetail_header {
	width: 750rpx;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 99;
}
</style>