|
|
@@ -1,83 +1,81 @@
|
|
|
<template>
|
|
|
- <view>
|
|
|
- <view class="remain">
|
|
|
- <h1>账号登录</h1>
|
|
|
+ <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="form">
|
|
|
- <u-form :model="form" ref="uForm" label-width="100px" label-position="top">
|
|
|
- <u-form-item label="手机号" prop="phone">
|
|
|
- <view class="form-input">
|
|
|
- <u-input v-model="form.phone" type="number" border="surround" maxlength='11'
|
|
|
- placeholder='请输入手机号码' :clearable='false' />
|
|
|
- </view>
|
|
|
- </u-form-item>
|
|
|
- <u-form-item label="密码" prop="password">
|
|
|
- <view class="form-input">
|
|
|
- <u-input v-model="form.password" type="password" placeholder='请输入密码' :clearable='false' />
|
|
|
- </view>
|
|
|
- </u-form-item>
|
|
|
- </u-form>
|
|
|
- <view style="font-size: 13px;">忘记密码？</view>
|
|
|
- <view class="btn">
|
|
|
- <view style="margin-bottom: 20rpx;font-size: 28rpx;">
|
|
|
- <u-checkbox-group v-model="value" :wrap="true">
|
|
|
- <u-checkbox name="1"></u-checkbox>登录同意<text class="blue-class" @click="getAgreement(1)">《用户协议》</text>和<text
|
|
|
- class="blue-class" @click="getAgreement(2)">《隐私政策》</text>
|
|
|
- </u-checkbox-group>
|
|
|
- </view>
|
|
|
- <view>
|
|
|
- <u-button type="error" shape="circle" text="登录" @click="submit()"></u-button>
|
|
|
- </view>
|
|
|
- <view class="tip" @click="toRegister()">还没有账号？马上<text class="register_btn blue-class">注册</text>
|
|
|
- </view>
|
|
|
+ <view class="dk">
|
|
|
+ <view class="bg">
|
|
|
+ <text class="icon"></text>
|
|
|
+ <input type="number" v-model="form.phone" placeholder="请输入手机号" />
|
|
|
</view>
|
|
|
-
|
|
|
+ <view class="bg">
|
|
|
+ <text class="icon"></text>
|
|
|
+ <input :password="show" v-model="form.password" placeholder="请输入密码" />
|
|
|
+ <view class="label"><view class="icon" :class="{ active: !show }" @click="show = !show"></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 {
|
|
|
- form: {
|
|
|
- phone: '',
|
|
|
- password: ''
|
|
|
- },
|
|
|
- rules: {
|
|
|
- phone: [{
|
|
|
- required: true,
|
|
|
- message: '请输入手机号',
|
|
|
- trigger: 'blur,change'
|
|
|
+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);
|
|
|
},
|
|
|
- {
|
|
|
- // 自定义验证函数，见上说明
|
|
|
- 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: [{
|
|
|
+ message: '手机号码不正确',
|
|
|
+ // 触发器可以同时用blur和change
|
|
|
+ trigger: ['change', 'blur']
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ password: [
|
|
|
+ {
|
|
|
required: true,
|
|
|
message: '请输入密码',
|
|
|
trigger: 'blur,change'
|
|
|
- }]
|
|
|
- },
|
|
|
- radioLabel: "",
|
|
|
- value: ["1"],
|
|
|
- }
|
|
|
- },
|
|
|
- onReady() {
|
|
|
- this.$refs.uForm.setRules(this.rules);
|
|
|
- },
|
|
|
- methods: {
|
|
|
- submit() {
|
|
|
- this.$refs.uForm.validate().then(res => {
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ radioLabel: '',
|
|
|
+ value: ['1']
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ submit() {
|
|
|
+ this.$refs.uForm
|
|
|
+ .validate()
|
|
|
+ .then(res => {
|
|
|
let value = this.value;
|
|
|
if (value.length == 0) {
|
|
|
this.$common.toast('请先同意协议');
|
|
|
@@ -87,74 +85,28 @@
|
|
|
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')
|
|
|
+ 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)
|
|
|
- }
|
|
|
+ .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: #fff;
|
|
|
- padding: 30px;
|
|
|
- }
|
|
|
-
|
|
|
- .remain {
|
|
|
- margin: 30rpx 150rpx 0;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
-
|
|
|
- .wel {
|
|
|
- margin-top: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .form {
|
|
|
- // margin: 0 30px;
|
|
|
- height: 200px;
|
|
|
- // display: flex;
|
|
|
- // align-items: center;
|
|
|
- // justify-content: center;
|
|
|
- }
|
|
|
-
|
|
|
- .form-input {
|
|
|
- width: 100%;
|
|
|
- background-color: #f5f5f5;
|
|
|
- margin-top: 10rpx;
|
|
|
- border-radius: 20rpx;
|
|
|
- border: none;
|
|
|
- }
|
|
|
-
|
|
|
- .btn {
|
|
|
- margin: 25px 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .tip {
|
|
|
- margin-top: 30px;
|
|
|
- text-align: center;
|
|
|
- font-size: 14px;
|
|
|
- }
|
|
|
-
|
|
|
- .blue-class {
|
|
|
- color: #55aaff;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
-
|
|
|
- .register_btn {
|
|
|
-
|
|
|
- text-decoration: underline;
|
|
|
- margin-left: 0.5em;
|
|
|
- }
|
|
|
-</style>
|
|
|
+page {
|
|
|
+ background-color: white;
|
|
|
+}
|
|
|
+</style>
|
李书文