zhywpt-sp/subpackage/after-sale/account-recharge/login.vue

<template>
	<view class="content">
		<view class="item">
			<text>对公用户：</text>
			<input class="uni-input" focus placeholder="请输入用户名" v-model='state.name' />
		</view>
		<view class="item">
			<text>对公用户密码：</text>
			<input style='width:412rpx;' class="uni-input" focus placeholder="请输入对公用户密码" v-model='state.password'
				type='password' />
		</view>
		<button @click='login()'>登录</button>
		<view class='go'>
			<text @click='goAccount()'>去开户</text>
			<text @click='forgetPassword()'>忘记密码</text>
		</view>
	</view>
</template>

<script setup lang='ts'>
	import {
		navTo,
		msg
	} from "@/utils/utils";
	import {
		request
	} from "@/utils/network/request.js";
	import {
		accountLogin
	} from "@/utils/network/api.js";
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		reactive
	} from "vue";
	const state = reactive({
		name: '',
		password: ''
	})
	onLoad((option: any) => {});
	const login = () => {
		if (!state.name) {
			msg("请输入用户名!");
			return;
		}
		if (!state.password) {
			msg("请输入密码!");
			return;
		}
		let options = {
			type: 2, //type: 2,JSON格式提交数据(默认表单形式提交)
			data: {
				accountId: state.name,
				passWord: state.password
			}, //请求参数
			method: "POST", //提交方式(默认POST)
			showLoading: true, //是否显示加载中(默认显示)
		};

		//调用方式
		request(accountLogin, options).then((res) => {
				let data = JSON.parse(res.bizContent);
				console.log(data, "#################");
				navTo(`/subpackage/after-sale/account-recharge/index?name=${state.name}`);
			})
			.catch((err) => {
				console.log(err);
			});
	}
	const goAccount = () => {
		navTo(`/subpackage/after-sale/account-recharge/go-account`);
	}
	const forgetPassword = () => {
		navTo(`/subpackage/after-sale/account-recharge/forget-password`);
	}
</script>

<style scoped>
	.content {
		background-color: #EEF7F7;
		min-height: 100vh;
	}

	.item {
		display: flex;
		border-bottom: 2rpx solid rgb(239, 239, 239);
		padding: 18rpx 24rpx;
		font-size: 32rpx;
		align-items: center;
	}

	.item>text {
		width: 32%;
	}

	button {
		width: 75%;
		height: 80rpx;
		margin-top: 60rpx;
		background: linear-gradient(-90deg, #43a1e0 0%, #13e7c1 100%);
		border-radius: 40rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: #ffffff;
		line-height: 80rpx;
	}

	.go {
		display: flex;
		color: #43a1e0;
		justify-content: space-around;
		font-size: 32rpx;
		margin-top: 90rpx;
	}

	.go>text {
		text-decoration: underline;
	}

	.uni-input {
		background: transparent;
	}
</style>