Browse Source

feat: 用户名密码登录

feat
xuesinan 4 years ago
parent
commit
95fdeac461
  1. 74
      App.vue
  2. 1
      CHANGELOG.md
  3. 8
      common/styles/theme/default.scss
  4. 5
      common/styles/theme/index.scss
  5. 8
      common/styles/theme/test.scss
  6. 34
      components/Globals/Globals.vue
  7. 13
      components/Theme/Theme.vue
  8. 7
      components/TimeLine/component/Title.vue
  9. 4
      components/Title/components/CreateTask.vue
  10. 7
      hooks/theme/useTheme.js
  11. 1
      hooks/user/useGetToken.js
  12. 1
      package.json
  13. 3
      pages.json
  14. 16
      pages/index/index.vue
  15. 3
      pages/project/project.vue
  16. 9
      plugins/p-deliver/p-deliver.vue
  17. 10
      plugins/p-task-title/p-task-title.vue
  18. 16
      store/index.js

74
App.vue

@ -1,14 +1,26 @@
<script>
import useGetToken from "@/hooks/user/useGetToken";
// import { mapState } from 'vuex';
export default {
// computed: {
// ...mapState(['theme']),
// },
// watch: {
// theme(newTheme) {
// console.log('newTheme: ', newTheme);
// if (!newTheme) return;
// this.loadTheme();
// },
// },
async onLaunch(options) {
// this.loadTheme();
console.log('onLaunch options: ', options);
this.checkNetwork(); //
this.getSystemInfo(); //
this.syncLocalDataToStore(options.query.u); // localStoragestore
const token = await useGetToken();
await this.syncLocalDataToStore(options.query.u); // localStoragestore
const token = await this.getToken();
if (!token) {
this.$ui.showToast('获取用户信息失败, 请登录');
// TODO:
@ -19,15 +31,46 @@ export default {
},
methods: {
// loadTheme() {
// const path = this.theme.replace('-', '/');
// import(`./common/styles/${path}.scss`);
// },
async getToken() {
const { token } = this.$store.state.user;
const tokenIsAvailable = this.$store.getters['user/tokenIsAvailable'];
const userId = this.$store.getters['user/userId'];
if (token && tokenIsAvailable) {
// 1.1 storetoken 使storetoken
return token;
} else {
// 2. userIdtoken
if (userId) {
try {
const { token } = await this.$store.dispatch('user/getTokenByUserId', userId);
return token;
} catch (error) {
console.error('error: ', error);
return null;
}
} else {
return null;
}
}
},
/**
* 将localStorage里的数据同步到store里
* user, token, tokenExpiredTime
*/
syncLocalDataToStore(urlUserId) {
return new Promise((resolve, reject) => {
try {
const localUser = uni.$storage.getStorageSync('user');
const localToken = uni.$storage.getStorageSync('anyringToken');
const tokenExpiredTime = uni.$storage.getStorageSync('tokenExpiredTime');
if (!this.$store.state.user.user && localUser) {
if (!this.$store.state.user.user) {
if (localUser) {
// user
const user = JSON.parse(localUser);
if (!urlUserId || user.id === urlUserId) {
@ -35,13 +78,24 @@ export default {
} else {
this.$store.commit('user/setUser', { id: urlUserId });
}
} else {
this.$store.commit('user/setUser', { id: urlUserId });
}
if (this.$store.state.user.token && localToken) { // token
}
if (this.$store.state.user.token && localToken) {
// token
this.$store.commit('user/setToken', localToken);
}
if (this.$store.state.user.tokenExpiredTime && tokenExpiredTime) { // tokenExpiredTime
if (this.$store.state.user.tokenExpiredTime && tokenExpiredTime) {
// tokenExpiredTime
this.$store.commit('user/setTokenExpiredTime', +tokenExpiredTime);
}
resolve();
} catch (error) {
reject(error);
}
});
},
// store
@ -93,7 +147,8 @@ export default {
*/
async noPhone(phone) {
if (!phone) {
uni.navigateTo({ title: '/pages/phone-bind/phone-bind' });
// TODO:
// uni.navigateTo({ url: '/pages/phone-bind/phone-bind' });
}
},
},
@ -102,10 +157,11 @@ export default {
<style lang="scss">
/*每个页面公共css */
@import "@/uni_modules/vk-uview-ui/index.scss";
@import '@/uni_modules/vk-uview-ui/index.scss';
@import '@/common/styles/iconfont.scss';
@import '@/common/styles/app.scss';
@import '@/common/styles/tailwind.scss';
@import '@/common/styles/theme/index.scss';
page {
height: 100%;

1
CHANGELOG.md

@ -12,6 +12,7 @@
- | 添加 timeline | [72dad2b](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/72dad2b)
- | 项目操作面板 | [3beb05e](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/3beb05e)
- | 项目列表 | [a52e6d5](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/a52e6d5)
- | 账户名密码登录 | [ebf456e](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/ebf456e)
- | app.vue | [970cf9a](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/970cf9a)
- | first commit | [8dc26de](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/8dc26de)
- | vue3 | [12ed2ad](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/12ed2ad)

8
common/styles/theme/default.scss

@ -0,0 +1,8 @@
// 默认主题文件
.theme-default {
background-color: #333;
.u-card {
font-size: 24px !important;
color: #0f0;
}
}

5
common/styles/theme/index.scss

@ -0,0 +1,5 @@
// 整合所有主题
// 默认主题
@import './default.scss';
@import './test.scss';

8
common/styles/theme/test.scss

@ -0,0 +1,8 @@
// TODO: 测试用的scss主题样式
.theme-test {
background-color: #fff;
.u-card {
font-size: 24px !important;
background-color: #ff0 !important;
}
}

34
components/Globals/Globals.vue

@ -1,5 +1,5 @@
<template>
<view class="m-2" v-show="globals && globals.length">
<theme class="m-2" >
<u-card
@click="openCard"
:show-foot="false"
@ -7,14 +7,16 @@
:style="{ 'max-height': globalsHeight + 'px' }"
border-radius="25"
margin="0"
class="global-container"
>
<view slot="body">
<template v-slot:body>
<scroll-view :scrollY="true" :style="{ 'max-height': globalsHeight - 30 + 'px' }">
<skeleton :banner="false" :loading="!globals.length" :row="4" animate class="u-line-2 skeleton"></skeleton>
<skeleton :banner="false" :loading="!globals.length" :row="3" animate class="u-line-2 skeleton"></skeleton>
<view class="grid gap-2">
<block v-for="item in globals" :key="item.id">
<template v-if="item.plugins">
<block v-for="(pluginArr, i) in item.plugins" :key="i">
<view v-for="item in globals" :key="item.id">
<template v-if="item.plugins && item.plugins.length">
<view v-for="(pluginArr, i) in item.plugins" :key="i">
<template class="p-0 u-col-between" v-if="pluginArr.length">
<Plugin
:class="[`row-span-${plugin.row}`, `col-span-${plugin.col}`]"
@ -27,14 +29,19 @@
v-for="plugin in pluginArr"
/>
</template>
</block>
</view>
</template>
</block>
<!-- 任务名插件 -->
<p-task-title :task="item" v-else />
<!-- 交付物插件 -->
<p-deliver></p-deliver>
</view>
</scroll-view>
</view>
</scroll-view>
</template>
</u-card>
</view>
</theme>
</template>
<script setup>
@ -42,11 +49,12 @@ import { computed } from 'vue';
import { useStore } from 'vuex';
import Skeleton from '@/components/Skeleton/Skeleton.vue';
const sysHeight = uni.getSystemInfoSync().screenHeight; //
const globalsHeight = Math.floor(((sysHeight - 44 - 30 - 10) / 5) * 4); //
const store = useStore();
const isShrink = computed(() => store.state.task.isShrink);
const sysHeight = uni.getSystemInfoSync().screenHeight;
const isShrink = computed(() => store.state.task.isShrink); //
const globals = computed(() => store.getters['task/globals']);
const globalsHeight = computed(() => [((sysHeight.value - 44 - 30 - 10) / 5) * 4]);
console.log('globals: ', globals.value);
//
function openCard() {

13
components/Theme/Theme.vue

@ -0,0 +1,13 @@
<template>
<view :class="[theme]">
<slot></slot>
</view>
</template>
<script setup>
import { computed } from 'vue';
import { useStore } from 'vuex';
const store = useStore();
const theme = computed(() => store.state.theme);
</script>

7
components/TimeLine/component/Title.vue

@ -1,7 +0,0 @@
<!--
* @Author: aBin
* @email: binbin0314@126.com
* @Date: 2021-07-19 15:40:02
* @LastEditors: aBin
* @LastEditTime: 2021-07-19 15:40:03
-->

4
components/Title/components/CreateTask.vue

@ -55,7 +55,7 @@
:key="roleIndex"
@click="change(roleIndex)"
>
<view v-model="role.id">{{ role.name }}</view>
<view>{{ role.name }}</view>
<u-icon v-if="role.dropdownShow" name="checkbox-mark" color="#2979ff" size="28"></u-icon>
</div>
</view>
@ -107,7 +107,7 @@
:key="Index"
@click="choose(Index)"
>
<view v-model="checkoutOption.value">{{ checkoutOption.name }}</view>
<view>{{ checkoutOption.name }}</view>
<u-icon v-if="checkoutOption.dropdownShow" name="checkbox-mark" color="#2979ff" size="28"></u-icon>
</div>
</view>

7
hooks/theme/useTheme.js

@ -0,0 +1,7 @@
import { computed } from 'vue';
import { useStore } from 'vuex';
export default function useTheme() {
const store = useStore();
const theme = computed(() => store.state.theme);
return theme;
}

1
hooks/user/useGetToken.js

@ -16,6 +16,7 @@ export default async function useGetToken() {
const token = computed(() => store.state.user.token);
const tokenIsAvailable = computed(() => store.getters['user/tokenIsAvailable']); // token是否可用
const userId = computed(() => store.getters['user/userId']);
debugger;
if (token.value && tokenIsAvailable.value) {
// 1.1 store里有token 且没过期直接:使用store的token
return token.value;

1
package.json

@ -53,6 +53,7 @@
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"cz": "npm run log && git add . && git cz",
"fix": "eslint --fix",
"log": "conventional-changelog --config ./node_modules/vue-cli-plugin-commitlint/lib/log -i CHANGELOG.md -s -r 0"
},
"author": "",

3
pages.json

@ -31,7 +31,8 @@
"autoscan": true,
"custom": {
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue",
"^p-(.*)": "@/plugins/p-$1/p-$1.vue"
"^p-(.*)": "@/plugins/p-$1/p-$1.vue",
"theme": "@/components/Theme/Theme.vue"
}
}
}

16
pages/index/index.vue

@ -107,29 +107,29 @@ function onMove(event) {
</script>
<style>
.content {
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
}
.logo {
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
}
.text-area {
.text-area {
display: flex;
justify-content: center;
}
}
.title {
.title {
font-size: 36rpx;
color: #8f8f94;
}
}
</style>

3
pages/project/project.vue

@ -13,6 +13,9 @@
<!-- 定期任务面板 -->
<!-- <TimeLine @getTasks="getTasks" class="flex-1 overflow-hidden" ref="timeLine" /> -->
<TimeLine class="flex-1 overflow-hidden" ref="timeLine" />
<!-- TODO: DEBUG: -->
<u-button @click="$store.commit('setTheme', 'theme-test')">测试切换主题</u-button>
</view>
</view>
</template>

9
plugins/p-deliver/p-deliver.vue

@ -0,0 +1,9 @@
<template>
<view class="deliver-container">p-deliver</view>
</template>
<script setup>
</script>
<style lang="scss"></style>

10
plugins/p-task-title/p-task-title.vue

@ -0,0 +1,10 @@
<template>
<!-- 任务名插件 -->
<theme>
<view>{{ task.name }}</view>
</theme>
</template>
<script setup>
defineProps({ task: { type: Object, default: () => {} } });
</script>

16
store/index.js

@ -1,12 +1,13 @@
import { createStore } from 'vuex';
import user from './user/index.js';
import socket from './socket/index.js';
import project from './project/index.js';
import role from './role/index.js';
import socket from './socket/index.js';
import task from './task/index.js';
import user from './user/index.js';
// 不属于具体模块的 应用级的 store内容
const state = {
theme: 'theme-default',
networkConnected: true, // 网络是否连接
forceUseStorage: true, // 强制启用storage
systemInfo: null, // 系统设备信息
@ -38,11 +39,20 @@ const mutations = {
setSystemInfo(state, data) {
state.systemInfo = data;
},
/**
* 设置主题
* @param {object} state
* @param {string} theme 主题名称 默认theme-default
*/
setTheme(state, theme) {
state.theme = theme || 'theme-default';
},
};
export default createStore({
state,
getters,
mutations,
modules: {user, socket, project, role, task}
modules: { user, socket, project, role, task },
});

Loading…
Cancel
Save