ccsens
/
TALL-MUI-4
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

feat: 账户名密码登录

feat
xuesinan 4 years ago
parent
1c785547b1
commit
ebf456e47c
10 changed files with 829 additions and 18 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      CHANGELOG.md
  2. 20
      apis/tall.js
  3. BIN
      common/img/weixinIcon.png
  4. 48
      common/js/dc-clipboard/clipboard.js
  5. 285
      hooks/user/userMixin - 副本.js
  6. 123
      hooks/user/userMixin.js
  7. 7
      pages.json
  8. 94
      pages/user/accountLogin.vue
  9. 266
      pages/user/mixin.js
  10. 2
      store/user/mutations.js

2
CHANGELOG.md
View File

@ -20,6 +20,7 @@
### 🎨 代码样式
范围|描述|commitId
--|--|--
- | 细节调整 | [bdd5f87](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/bdd5f87)
- | calender格式及细节调整 | [db9602b](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/db9602b)
@ -33,6 +34,7 @@
范围|描述|commitId
--|--|--
- | 重构project init 部分 | [c7bf2df](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/c7bf2df)
- | project init 重构 | [2457a87](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/2457a87)
### 🚀 性能优化

20
apis/tall.js
View File

@ -1,25 +1,13 @@
import Config from '@/common/js/config.js'
const apiUrl = Config.apiUrl;
const tall = `${apiUrl}/tall3/v3.0`;
// 登录
export const login = {
async index(params) {
try {
const data = await uni.$u.http.post(`${tall}/users/signin`, params);
return data;
} catch (error) {
throw new Error(error);
}
},
};
const tall = `${apiUrl}/tall3/v3.0`;
export function setupTall(app) {
uni.$u.api = { ...uni.$u.api } || {};
// 登录
uni.$u.api.signin = params => login.index(params);
// uni.$u.api.signin = params => login.index(params);
uni.$u.api.signin = params => uni.$u.http.post(`${tall}/users/signin`, params); // 登录
// 获取图片验证码
uni.$u.api.getImageCode = () => uni.$u.get(`${tall}/users/code`);
// 获取短信验证码
@ -42,4 +30,4 @@ export function setupTall(app) {
uni.$u.api.setProjectRelation = params => uni.$u.post(`${tall}/project/setProjectRelation`, params);
// 删除某个项目
uni.$u.api.delProject = projectId => uni.$u.post(`${tall}/project/deleteProject`, { projectId });
}
}

BIN
common/img/weixinIcon.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.6 KiB

48
common/js/dc-clipboard/clipboard.js
View File

@ -0,0 +1,48 @@
/**
* 设置粘贴板数据
* @param {String} text 要设置的字符串
* 如果未设置参数，则清空数据
*/
function setClipboardText(text) {
try {
var os = plus.os.name;
text = text || '';
if ('iOS' == os) {
// var UIPasteboard = plus.ios.importClass('UIPasteboard');
// var pasteboard = UIPasteboard.generalPasteboard();
// pasteboard.setValueforPasteboardType(text, 'public.utf8-plain-text');
var pasteboard = plus.ios.invoke('UIPasteboard', 'generalPasteboard');
plus.ios.invoke(pasteboard, 'setValue:forPasteboardType:', text, 'public.utf8-plain-text');
} else {
var main = plus.android.runtimeMainActivity();
// var Context = plus.android.importClass('android.content.Context');
// var clip = main.getSystemService(Context.CLIPBOARD_SERVICE);
var clip = main.getSystemService('clipboard');
plus.android.invoke(clip, 'setText', text);
}
} catch (e) {
console.error('error @setClipboardText!!');
}
}
function getClipboardText() {
try {
var os = plus.os.name;
if ('iOS' == os) {
var pasteboard = plus.ios.invoke('UIPasteboard', 'generalPasteboard');
return plus.ios.invoke(pasteboard, 'valueForPasteboardType:', 'public.utf8-plain-text')
} else {
var main = plus.android.runtimeMainActivity();
var clip = main.getSystemService('clipboard');
return plus.android.invoke(clip, 'getText');
}
} catch (e) {
console.error('error @getClipboardText!!');
}
}
export default {
setClipboardText,
getClipboardText
}

285
hooks/user/userMixin - 副本.js
View File

@ -0,0 +1,285 @@
import { ref, computed } from 'vue';
import { useStore } from 'vuex';
import clipboard from "@/common/js/dc-clipboard/clipboard.js"
export default function mixinInit {
const store = useStore();
const user = computed(() => store.state.user.user);
const rules = ref({
phone: [
{
required: true,
message: '请输入手机号',
trigger: ['change','blur'],
},
{
validator: (rule, value, callback) => {
// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
return this.$u.test.mobile(value);
},
message: '手机号码不正确',
// 触发器可以同时用blur和change，二者之间用英文逗号隔开
trigger: ['change','blur'],
}
],
verificationCodeValue: [
{
required: true,
message: '请输入图形验证码',
trigger: ['change','blur'],
},
{
type: 'number',
message: '图形验证码只能为数字',
trigger: ['change','blur'],
}
],
smsCode: [
{
required: true,
message: '请输入验证码',
trigger: ['change','blur'],
},
{
type: 'number',
message: '验证码只能为数字',
trigger: ['change','blur'],
}
],
account: [
{
required: true,
message: '请输入用户名',
trigger: ['change','blur'],
},
{
min: 2,
max: 20,
message: '用户名长度在2到20个字符',
trigger: ['change','blur'],
},
{
pattern: /^[a-zA-Z0-9._-]{2,20}$/,
message: '请输入2-20位字母、数字、汉字或字符"_ - ."',
trigger: ['change','blur'],
}
],
password: [
{
required: true,
message: '请输入密码',
trigger: ['change','blur'],
},
{
min: 6,
max: 20,
message: '密码长度在6到20个字符',
trigger: ['change','blur'],
},
{
// 正则不能含有两边的引号
pattern: /^[a-zA-Z0-9._-]{6,20}$/,
message: '请输入6-20位字母、数字、汉字或字符"_ - ."',
trigger: ['change','blur'],
}
],
});
const errorType = ref(['message']);
const labelPosition = ref('left');
const border = ref(false);
const smsCode = ref(''); // 短信验证码
const showInterval = ref(false);
const interval = ref(120);
const codeTimer = ref(null);
const showPaste = ref(false);
// 获取图形验证码
async function getImageCode() {
console.log('5555')
uni.$ui.showLoading();
try {
const data = await uni.$u.api.getImageCode();
const { imageBase64, verificationCodeId } = data;
imageBase64 = imageBase64 || '';
verificationCodeId = verificationCodeId || '';
uni.$ui.hideLoading();
} catch (error) {
uni.$ui.hideLoading();
uni.$ui.showToast(error);
}
}
return {
// errorType,
// rules,
// labelPosition,
// border,
getImageCode,
// hasvalue,
// getCode,
// getCodeInterval,
// checkRules,
// setCode,
// getClipboardContents,
// verifyPhone,
// verifyLoginname,
// handleWxLogin
}
}
// const mixin = {
// computed: mapState('user', ['user']),
// onReady() {
// this.$refs.uForm.setRules(this.rules);
// },
// methods: {
// ...mapActions('user', ['sendCode']),
// 获取图形验证码
// async getImageCode() {
// this.$util.showLoading();
// try {
// const data = await uni.$u.api.getImageCode();
// const { imageBase64, verificationCodeId } = data;
// this.imageBase64 = imageBase64 || '';
// this.verificationCodeId = verificationCodeId || '';
// uni.hideLoading();
// } catch (error) {
// uni.hideLoading();
// uni.$ui.showToast(error);
// }
// },
// //有图片验证码的值
// hasvalue() {
// if(this.model.smsCode || this.model.showPaste) return
// if (!this.verifyPhone(this.model.phone)) {
// uni.$ui.showToast('请输入正确的手机号');
// return;
// }
// if (!this.model.verificationCodeValue) {
// uni.$ui.showToast('请输入图形验证码');
// return;
// }
// this.getCode();
// },
// // 获取验证码
// async getCode() {
// try {
// const { phone, verificationCodeValue } = this.model;
// const { verificationCodeId } = this;
// if (!verificationCodeId || !verificationCodeValue) {
// uni.$ui.showToast('缺少图形验证码参数');
// return;
// }
// const params = {
// phone,
// verificationCodeId,
// verificationCodeValue,
// };
// const date = await store.dispatch('user/sendCode', params);
// getCodeInterval();
// showPaste.value = true;
// } catch (err) {
// throw err;
// }
// },
// // 获取验证码倒计时
// getCodeInterval() {
// this.showInterval = true;
// this.codeTimer = setInterval(() => {
// if (this.interval === 0) {
// clearInterval(this.codeTimer);
// this.codeTimer = null;
// this.showInterval = false;
// this.interval = 120;
// return;
// }
// this.interval = this.interval - 1;
// }, 1000);
// },
// // 验证信息
// checkRules() {
// // const { smsCode, phone, user } = this;
// if (!this.verifyPhone(phone.value)) {
// uni.$ui.showToast('请输入正确的手机号');
// return false;
// }
// if (!smsCode.value) {
// uni.$ui.showToast('验证码无效');
// return false;
// }
// if (phone.value === user.value.phone) {
// uni.$ui.showToast('新手机号不能与旧手机号相同');
// return;
// }
// return true;
// },
// // 粘贴
// setCode() {
// // 获取粘贴板内容
// // 小程序平台
// //#ifdef MP-WEIXIN
// var _this = this
// uni.getClipboardData({
// success (res) {
// _this.smsCode = res.data;
// }
// });
// //#endif
// // 非小程序平台
// //#ifndef MP-WEIXIN
// this.getClipboardContents()
// //#endif
// },
// // 非小程序平台粘贴
// async getClipboardContents() {
// try {
// const text = await navigator.clipboard.readText();
// this.smsCode = text;
// } catch (err) {
// console.error('Failed to read clipboard contents: ', err);
// }
// },
// /**
// * 验证手机号格式
// * @param {string} phone 手机号
// */
// verifyPhone(phone) {
// const phoneExg = /^1\d{10}$/;
// return phoneExg.test(phone);
// },
// /**
// * 验证账号/密码 格式
// * @param {string} account 账号
// */
// verifyLoginname(account) {
// const accountExg = /^[a-zA-Z0-9._-]{2,20}$/;
// return accountExg.test(account);
// },
// // 微信登录
// handleWxLogin() {
// const origin = 'https://test.tall.wiki/pt-mui'; // 测试
// const appid = 'wxd1842e073e0e6d91';
// const state = 'wx_web';
// const href = 'https://open.weixin.qq.com/connect/qrconnect';
// // eslint-disable-next-line
// window.location.href =
// `${href}?appid=${appid}&redirect_uri=${origin}&response_type=code&scope=snsapi_login&state=${state}#wechat_redirect`;
// },
// // }
// };

123
hooks/user/userMixin.js
View File

@ -0,0 +1,123 @@
import { ref, computed } from 'vue';
import { useStore } from 'vuex';
import clipboard from "@/common/js/dc-clipboard/clipboard.js"
export default function userMixin() {
const store = useStore();
const user = computed(() => store.state.user.user);
const rules = ref({
phone: [{
required: true,
message: '请输入手机号',
trigger: ['change', 'blur'],
},
{
validator: (rule, value, callback) => {
// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
return this.$u.test.mobile(value);
},
message: '手机号码不正确',
// 触发器可以同时用blur和change，二者之间用英文逗号隔开
trigger: ['change', 'blur'],
}
],
verificationCodeValue: [{
required: true,
message: '请输入图形验证码',
trigger: ['change', 'blur'],
},
{
type: 'number',
message: '图形验证码只能为数字',
trigger: ['change', 'blur'],
}
],
smsCode: [{
required: true,
message: '请输入验证码',
trigger: ['change', 'blur'],
},
{
type: 'number',
message: '验证码只能为数字',
trigger: ['change', 'blur'],
}
],
account: [{
required: true,
message: '请输入用户名',
trigger: ['change', 'blur'],
},
{
min: 2,
max: 20,
message: '用户名长度在2到20个字符',
trigger: ['change', 'blur'],
},
{
pattern: /^[a-zA-Z0-9._-]{2,20}$/,
message: '请输入2-20位字母、数字、汉字或字符"_ - ."',
trigger: ['change', 'blur'],
}
],
password: [{
required: true,
message: '请输入密码',
trigger: ['change', 'blur'],
},
{
min: 6,
max: 20,
message: '密码长度在6到20个字符',
trigger: ['change', 'blur'],
},
{
// 正则不能含有两边的引号
pattern: /^[a-zA-Z0-9._-]{6,20}$/,
message: '请输入6-20位字母、数字、汉字或字符"_ - ."',
trigger: ['change', 'blur'],
}
],
});
const errorType = ['message'];
const labelPosition = 'left';
const border = false;
const smsCode = ref(''); // 短信验证码
const showInterval = ref(false);
const interval = ref(120);
const codeTimer = ref(null);
const showPaste = ref(false);
// 获取图形验证码
async function getImageCode() {
console.log('5555')
uni.$ui.showLoading();
try {
const data = await uni.$u.api.getImageCode();
const { imageBase64, verificationCodeId } = data;
imageBase64 = imageBase64 || '';
verificationCodeId = verificationCodeId || '';
uni.$ui.hideLoading();
} catch (error) {
uni.$ui.hideLoading();
uni.$ui.showToast(error);
}
}
return {
rules,
errorType,
labelPosition,
border,
getImageCode,
// hasvalue,
// getCode,
// getCodeInterval,
// checkRules,
// setCode,
// getClipboardContents,
// verifyPhone,
// verifyLoginname,
// handleWxLogin
}
}

7
pages.json
View File

@ -12,6 +12,13 @@
"navigationStyle": "custom",
"navigationBarTextStyle": "white"
}
},
{
"path": "pages/user/accountLogin",
"style": {
"navigationStyle": "custom",
"navigationBarTextStyle": "white"
}
}
],
"globalStyle": {

94
pages/user/accountLogin.vue
View File

@ -0,0 +1,94 @@
<template>
<view class="u-p-l-50 u-p-r-50 u-p-t-30">
<u-form :model="model" ref="uForm" :rules="mixinInit.rules" :error-type="mixinInit.errorType">
<u-form-item :label-position="mixinInit.labelPosition" label="用户名" prop="account" label-width="150">
<u-input :border="mixinInit.border" placeholder="请输入用户名" v-model="model.account" type="text"></u-input>
</u-form-item>
<u-form-item :label-position="mixinInit.labelPosition" label="密码" prop="password" label-width="150">
<u-input :password-icon="true" :border="mixinInit.border" type="password" v-model="model.password" placeholder="请输入密码">
</u-input>
</u-form-item>
<view class="flex flex-nowrap">
<view class="flex-sub"></view>
<view class="u-m-t-30 u-font-12 text-gray-400" @click="openPage('/pages/user/forgetPassword')">忘记密码</view>
</view>
</u-form>
<view class="u-m-t-50">
<u-button @click="submit" type="primary">立即登录</u-button>
</view>
<view class="flex justify-between">
<view class="u-m-t-30" style="color: #2885ED;" @click="openPage('/pages/user/rigister')"> 新用户注册</view>
<view class="u-m-t-30" style="color: #2885ED;" @click="openPage('/pages/user/login')">手机号登录 </view>
</view>
<view style="margin-top: 200rpx;text-align: center; color: #999999;font-size: 35rpx;">
快速登录
</view>
<view style="text-align: center; margin-top: 20rpx;">
<image src="/common/img/weixinIcon.png" mode="" style="width: 85rpx;height: 85rpx;"></image>
</view>
</view>
</template>
<script setup>
import { ref, computed } from 'vue';
import { useStore } from 'vuex';
import userMixin from '@/hooks/user/userMixin'
const store = useStore();
const mixinInit = userMixin();
const userInfo = uni.$storage.getStorageSync('user');
const user = ref({});
// const uForm = ref(null);
const model = ref({
account: '',
password: ''
})
if (userInfo) {
user.value = JSON.parse(userInfo);
}
const submit = () => {
// uForm.value.validate().then().catch();
}
async function login() {
try {
uni.$ui.showLoading();
if (account.value === user.value.account) {
uni.$ui.showToast('当前账户已登录');
} else {
const params = ref({
client: 1,
data: {
identifier: account.value,
credential: password.value,
},
type: 3,
});
let res = await uni.$u.api.signin(params.value);
store.commit('user/setToken', res.token);
store.commit('user/setUser', res);
uni.$storage.setStorageSync('anyringToken', res.token || '');
uni.$storage.setStorageSync('user', JSON.stringify(res));
}
uni.navigateTo({
url: '/pages/index/index'
});
uni.$ui.hideLoading();
} catch (error) {
uni.$ui.hideLoading();
uni.$ui.showToast(error);
}
}
</script>
<style>
</style>

266
pages/user/mixin.js
View File

@ -0,0 +1,266 @@
import { ref, computed } from 'vue';
import { useStore } from 'vuex';
import clipboard from "@/common/js/dc-clipboard/clipboard.js"
export default function mixinInit {
const store = useStore();
const user = computed(() => store.state.user.user);
const rules = ref({
phone: [
{
required: true,
message: '请输入手机号',
trigger: ['change','blur'],
},
{
validator: (rule, value, callback) => {
// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
return this.$u.test.mobile(value);
},
message: '手机号码不正确',
// 触发器可以同时用blur和change，二者之间用英文逗号隔开
trigger: ['change','blur'],
}
],
verificationCodeValue: [
{
required: true,
message: '请输入图形验证码',
trigger: ['change','blur'],
},
{
type: 'number',
message: '图形验证码只能为数字',
trigger: ['change','blur'],
}
],
smsCode: [
{
required: true,
message: '请输入验证码',
trigger: ['change','blur'],
},
{
type: 'number',
message: '验证码只能为数字',
trigger: ['change','blur'],
}
],
account: [
{
required: true,
message: '请输入用户名',
trigger: ['change','blur'],
},
{
min: 2,
max: 20,
message: '用户名长度在2到20个字符',
trigger: ['change','blur'],
},
{
pattern: /^[a-zA-Z0-9._-]{2,20}$/,
message: '请输入2-20位字母、数字、汉字或字符"_ - ."',
trigger: ['change','blur'],
}
],
password: [
{
required: true,
message: '请输入密码',
trigger: ['change','blur'],
},
{
min: 6,
max: 20,
message: '密码长度在6到20个字符',
trigger: ['change','blur'],
},
{
// 正则不能含有两边的引号
pattern: /^[a-zA-Z0-9._-]{6,20}$/,
message: '请输入6-20位字母、数字、汉字或字符"_ - ."',
trigger: ['change','blur'],
}
],
});
const errorType = ref(['message']);
const labelPosition = ref('left');
const border = ref(false);
const smsCode = ref(''); // 短信验证码
const showInterval = ref(false);
const interval = ref(120);
const codeTimer = ref(null);
const showPaste = ref(false);
return {
errorType,
// getImageCode,
// hasvalue,
// getCode,
// getCodeInterval,
// checkRules,
// setCode,
// getClipboardContents,
// verifyPhone,
// verifyLoginname,
// handleWxLogin
}
}
// const mixin = {
// computed: mapState('user', ['user']),
// onReady() {
// this.$refs.uForm.setRules(this.rules);
// },
// methods: {
// ...mapActions('user', ['sendCode']),
// 获取图形验证码
// async getImageCode() {
// this.$util.showLoading();
// try {
// const data = await uni.$u.api.getImageCode();
// const { imageBase64, verificationCodeId } = data;
// this.imageBase64 = imageBase64 || '';
// this.verificationCodeId = verificationCodeId || '';
// uni.hideLoading();
// } catch (error) {
// uni.hideLoading();
// uni.$ui.showToast(error);
// }
// },
// //有图片验证码的值
// hasvalue() {
// if(this.model.smsCode || this.model.showPaste) return
// if (!this.verifyPhone(this.model.phone)) {
// uni.$ui.showToast('请输入正确的手机号');
// return;
// }
// if (!this.model.verificationCodeValue) {
// uni.$ui.showToast('请输入图形验证码');
// return;
// }
// this.getCode();
// },
// // 获取验证码
// async getCode() {
// try {
// const { phone, verificationCodeValue } = this.model;
// const { verificationCodeId } = this;
// if (!verificationCodeId || !verificationCodeValue) {
// uni.$ui.showToast('缺少图形验证码参数');
// return;
// }
// const params = {
// phone,
// verificationCodeId,
// verificationCodeValue,
// };
// const date = await store.dispatch('user/sendCode', params);
// getCodeInterval();
// showPaste.value = true;
// } catch (err) {
// throw err;
// }
// },
// // 获取验证码倒计时
// getCodeInterval() {
// this.showInterval = true;
// this.codeTimer = setInterval(() => {
// if (this.interval === 0) {
// clearInterval(this.codeTimer);
// this.codeTimer = null;
// this.showInterval = false;
// this.interval = 120;
// return;
// }
// this.interval = this.interval - 1;
// }, 1000);
// },
// // 验证信息
// checkRules() {
// // const { smsCode, phone, user } = this;
// if (!this.verifyPhone(phone.value)) {
// uni.$ui.showToast('请输入正确的手机号');
// return false;
// }
// if (!smsCode.value) {
// uni.$ui.showToast('验证码无效');
// return false;
// }
// if (phone.value === user.value.phone) {
// uni.$ui.showToast('新手机号不能与旧手机号相同');
// return;
// }
// return true;
// },
// // 粘贴
// setCode() {
// // 获取粘贴板内容
// // 小程序平台
// //#ifdef MP-WEIXIN
// var _this = this
// uni.getClipboardData({
// success (res) {
// _this.smsCode = res.data;
// }
// });
// //#endif
// // 非小程序平台
// //#ifndef MP-WEIXIN
// this.getClipboardContents()
// //#endif
// },
// // 非小程序平台粘贴
// async getClipboardContents() {
// try {
// const text = await navigator.clipboard.readText();
// this.smsCode = text;
// } catch (err) {
// console.error('Failed to read clipboard contents: ', err);
// }
// },
// /**
// * 验证手机号格式
// * @param {string} phone 手机号
// */
// verifyPhone(phone) {
// const phoneExg = /^1\d{10}$/;
// return phoneExg.test(phone);
// },
// /**
// * 验证账号/密码 格式
// * @param {string} account 账号
// */
// verifyLoginname(account) {
// const accountExg = /^[a-zA-Z0-9._-]{2,20}$/;
// return accountExg.test(account);
// },
// // 微信登录
// handleWxLogin() {
// const origin = 'https://test.tall.wiki/pt-mui'; // 测试
// const appid = 'wxd1842e073e0e6d91';
// const state = 'wx_web';
// const href = 'https://open.weixin.qq.com/connect/qrconnect';
// // eslint-disable-next-line
// window.location.href =
// `${href}?appid=${appid}&redirect_uri=${origin}&response_type=code&scope=snsapi_login&state=${state}#wechat_redirect`;
// },
// // }
// };

2
store/user/mutations.js
View File

@ -1,5 +1,3 @@
import storage from '@/utils/storage.js';
const mutations = {
/**
* 设置存储token

Write Preview
Loading…
Cancel
Save