jiuyiUniapp/service/pages/login/login.vue

<script setup>
/**
 * 手机号登录
 */
import { ref, reactive } from 'vue'

// api
import api from '@/api/index'
// 工具库
import util from '@/common/js/util.js'
// 加密
import CryptoJS from 'crypto-js';
// 显示密码
const showPwd = ref(false)
// 是否阅读
const read = ref(false)
// 表单
const form = reactive({
	// 手机号
	serviceAccount: '',
	// 密码
	password: '',
})

// 反选阅读
function handleRead() {
	read.value = !read.value
}

/**
 * 查看文章
 * @param {Object} id
 */
function article(id) {
	uni.navigateTo({
		url: util.setUrl('/pages/index/article', {
			id,
		})
	})
}

// 登录
function handleLogin() {
	const data = {
		...form
	}
	// 校验
	if (!data.serviceAccount) {
		util.alert('请输入手机号')
		return
	}
	if (!data.password) {
		util.alert('请输入密码')
		return
	}
	if (!read.value) {
		util.alert('请阅读并勾选服务协议》和《隐私政策》')
		return
	}
	data.password = CryptoJS.MD5(data.password).toString()

	api.login.userLoginByPassword({
		query: data,
	}).then(rs => {
		if (rs.code == 200) {
			util.finalLogin(rs)
			return
		}
		util.alert({
			content: rs.msg,
			showCancel: false,
		})
	})
}
</script>

<template>
	<view class="appbw">
		<view class="container">
			<view class="logo mauto">
				<image class="logo br10" src="/static/logo.png" mode="aspectFit" />
			</view>

			<view class="form mt60 mlr60 mb30">
				<view class="title mtb30">九亿客服登录</view>

				<view class="inputBox mtb20 ptb10 plr30">
					<input type="text" v-model="form.serviceAccount" placeholder="请输入手机号" />
				</view>

				<view class="inputBox rows mtb20 ptb10 plr30">
					<template v-if="showPwd">
						<input v-model="form.password" placeholder="请输入密码" />
					</template>
					<template v-else>
						<input :password="true" v-model="form.password" placeholder="请输入密码" />
					</template>

					<uni-icons :type="showPwd ? 'eye' : 'eye-slash'" color="#999" size="40rpx"
						@click="showPwd = !showPwd" />
				</view>

				<view class="btn lg bar black mtb60" @click="handleLogin">登录</view>
			</view>
		</view>

		<view class="footer">
			<view class="notice fmid tac c999 f20">
				<view class="button" @click="handleRead">
					<uni-icons type="checkbox-filled" size="40rpx" color="#000" v-if="read" />
					<uni-icons type="circle" size="40rpx" color="#99" v-else />
				</view>
				<text>已阅读并同意</text>
				<text class="mlr10 c333" @click="article(3)">用户协议</text>
				<text>和</text>
				<text class="mlr10 c333" @click="article(1)">隐私政策</text>
			</view>
		</view>
	</view>
</template>

<style lang="scss">
.image {
	width: 100%;
	height: 100%;
}

// 
.container {
	margin-top: 15vh;

	// 标志
	.logo {
		width: 200rpx;
		height: 200rpx;
	}
}

</style>