market-app-ui/pages/login/login.vue

<template>
	<view class="login">
		<view class="app_top">
			<view class="welcome">
				<view class="desc">您好,</view>
				<view class="desc">欢迎来到边民互市贸易</view>
			</view>
			<image src="../../static/images/my.png" mode="widthFix" class="img"></image>
		</view>
		<view class="dk">
			<view class="bg">
				<text class="icon">&#xe8b9;</text>
				<input type="number" v-model="form.phone" placeholder="请输入手机号" />
			</view>
			<view class="bg">
				<text class="icon">&#xe8b2;</text>
				<input :password="show" v-model="form.password" placeholder="请输入密码" />
				<view class="label"><view class="icon" :class="{ active: !show }" @click="show = !show">&#xe7a6;</view></view>
			</view>
			<view class="xy">
				<u-checkbox-group class="checkbox" v-model="form.checked">
					<u-checkbox size="15" shape="circle" label="我已阅读并同意" labelSize="13" name="true"></u-checkbox>
				</u-checkbox-group>
				<text class="a" @click="getAgreement(1)">《用户协议》</text>
				<text>和</text>
				<text class="a" @click="getAgreement(2)">《隐私政策》</text>
			</view>
			<button class="btn" @click="submit()">登录</button>
			<button class="btn register" @click="toRegister()">注册</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			show: true,
			form: {
				phone: '',
				password: ''
			},
			rules: {
				phone: [
					{
						required: true,
						message: '请输入手机号',
						trigger: 'blur,change'
					},
					{
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							// 上面有说，返回true表示校验通过，返回false表示不通过
							// uni.$u.test.mobile()就是返回true或者false的
							// return uni.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						// 触发器可以同时用blur和change
						trigger: ['change', 'blur']
					}
				],
				password: [
					{
						required: true,
						message: '请输入密码',
						trigger: 'blur,change'
					}
				]
			},
			radioLabel: '',
			value: ['1']
		};
	},
	methods: {
		submit() {
			this.$refs.uForm
				.validate()
				.then(res => {
					let value = this.value;
					if (value.length == 0) {
						this.$common.toast('请先同意协议');
						return;
					}
					this.$api.doLogin(this.form).then(resp => {
						if (resp.code == 200) {
							let data = resp.data;
							uni.setStorageSync('token', data.tokenInfo.tokenValue);
							uni.setStorageSync('info', data.appUser);
							uni.setStorageSync('menu', data.per_list);
							this.$common.toBar('/pages/index/index');
						}
					});
				})
				.catch(errors => {
					uni.$u.toast('校验失败');
				});
		},
		toRegister() {
			this.$common.to('/pages/login/chooseRole');
		},
		getAgreement(id) {
			this.$common.to('/pages/login/userAgreement?id=' + id);
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: white;
}
</style>