Merge pull request 'xbx' (#29) from xbx into master
Reviewed-on: http://git.luyuan.tk/luyuan/beelink/pulls/29
This commit is contained in:
commit
96e9284abb
14
src/App.vue
14
src/App.vue
@ -5,6 +5,20 @@
|
||||
</div> -->
|
||||
<router-view/>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import store from './store';
|
||||
import { getValue } from './utils/common';
|
||||
|
||||
export default defineComponent({
|
||||
setup(){
|
||||
if(getValue('token')){
|
||||
store.commit("login")
|
||||
store.dispatch("setUserInfo");
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.one-line-hide {
|
||||
|
||||
@ -1,20 +1,35 @@
|
||||
import axios from '../config/axiosConfig'
|
||||
|
||||
import { AxiosRequestConfig, CustomSuccessData } from 'axios';
|
||||
import { getValue } from '@/utils/common';
|
||||
|
||||
// 泛型接口
|
||||
export interface Get {
|
||||
<T>(url: string, params?: object, config?: AxiosRequestConfig): Promise<CustomSuccessData<T>>;
|
||||
}
|
||||
|
||||
axios.interceptors.response.use((response)=>{
|
||||
return response.data;
|
||||
return response;
|
||||
},(error)=>{
|
||||
return error;
|
||||
})
|
||||
|
||||
function get(url: string,data?: object) {
|
||||
return axios.get(url,{params:data})
|
||||
const get: Get = async function (url: string,data?: object) {
|
||||
const res = await axios.get(url,{params:data});
|
||||
return res.data;
|
||||
}
|
||||
|
||||
function post(url: string,data?: object) {
|
||||
return axios.post(url,data)
|
||||
const post: Get = async function (url: string,data?: object) {
|
||||
const res = await axios.post(url,data)
|
||||
return res.data;
|
||||
}
|
||||
|
||||
function setToken(){
|
||||
axios.defaults.headers.common['Authorization'] = "Bearer " + getValue("token");
|
||||
}
|
||||
|
||||
export {
|
||||
get,
|
||||
post
|
||||
post,
|
||||
setToken
|
||||
}
|
||||
@ -1,15 +1,58 @@
|
||||
import { get, post } from './base'
|
||||
import router from '@/router';
|
||||
import store from '@/store';
|
||||
import { LoginData, UserInfo } from '@/types';
|
||||
import { saveValue } from '@/utils/common';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { get, post, setToken } from './base'
|
||||
|
||||
|
||||
/**
|
||||
* 请求验证码
|
||||
* 用户名密码登录
|
||||
* @param phone 手机号
|
||||
* @param type 类型 0国内 1国外
|
||||
* @param password 密码
|
||||
*/
|
||||
|
||||
export function sendsms(phone: string, type?: number){
|
||||
return post('SendSms',{phone, type})
|
||||
export async function loginpass(phone: string, password: string){
|
||||
const res = await post<LoginData>("login",{type: 2,username: phone, password: password});
|
||||
console.log(res.code)
|
||||
if(res.code == 1){
|
||||
message.error(res.msg)
|
||||
}else{
|
||||
console.log(res.data)
|
||||
if(!saveValue("token", res.data?.api_token) && !saveValue("memberid", res.data?.memberid) ){
|
||||
message.error("存储错误, 请允许网页使用本地存储！")
|
||||
}else{
|
||||
setToken();
|
||||
store.commit("login");
|
||||
router.push("/mine/archives")
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export function loginpass(phone: string, password: string){
|
||||
return post("login",{type: 2,username: phone, password: password})
|
||||
/**
|
||||
* 用户头像和用户名字
|
||||
*/
|
||||
export async function userinfo(){
|
||||
const user = await get<UserInfo>('personalInfo');
|
||||
console.log(user.data?.img)
|
||||
return {
|
||||
head: user.data?.img,
|
||||
username: user.data?.name,
|
||||
language: user.data?.language,
|
||||
currency: user.data?.currency,
|
||||
zoneStr: user.data?.zoneStr,
|
||||
memberid: user.data?.memberid,
|
||||
country: user.data?.country,
|
||||
live: user.data?.live,
|
||||
mtongue: user.data?.mtongue,
|
||||
tlanguage: user.data?.tlanguage,
|
||||
willsay: user.data?.willsay,
|
||||
interest: user.data?.interest,
|
||||
mobile: user.data?.mobile,
|
||||
email: user.data?.email,
|
||||
birthday: user.data?.birthday,
|
||||
video: user.data?.video,
|
||||
desc: user.data?.desc,
|
||||
money: user.data?.money
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,8 +2,8 @@
|
||||
<div class="menu">
|
||||
<div class="user" style="overflow: hidden;">
|
||||
<div class="user" :class="{'seltop': selnum == 0}">
|
||||
<img src="" alt="" class="head">
|
||||
<div class="name">name</div>
|
||||
<img :src="userinfo.head" alt="" class="head">
|
||||
<div class="name">{{userinfo.username}}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -50,7 +50,6 @@
|
||||
.head{
|
||||
width: 57px;
|
||||
height: 57px;
|
||||
background-color: #0f0;
|
||||
margin-bottom: 15px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
@ -118,7 +117,8 @@
|
||||
</style>
|
||||
<script lang="ts">
|
||||
import router from '@/router';
|
||||
import { defineComponent, ref } from 'vue';
|
||||
import store from '@/store';
|
||||
import { computed, defineComponent, ref } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
setup(){
|
||||
@ -169,6 +169,9 @@ export default defineComponent({
|
||||
]
|
||||
// 当前选中的index
|
||||
const selnum = ref(0);
|
||||
|
||||
const userinfo = computed(() => store.state.userinfo)
|
||||
console.log(userinfo.value)
|
||||
/**
|
||||
* 跳转路由与赋值对应的下标
|
||||
* @param index 选中的下标 方便赋值与跳转
|
||||
@ -181,10 +184,13 @@ export default defineComponent({
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
|
||||
return{
|
||||
list,
|
||||
routeto,
|
||||
selnum
|
||||
selnum,
|
||||
userinfo
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@ -14,17 +14,17 @@
|
||||
<div class="setting">
|
||||
<div class="item">
|
||||
<img src="@/static/images/shijian.png" alt="" class="icon">
|
||||
<div class="name">北京 GMT +08:00</div>
|
||||
<div class="name">{{userinfo.zoneStr}}</div>
|
||||
<img src="@/static/images/jiantou2.png" alt="" class="down">
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="@/static/images/qianbi.png" alt="" class="icon">
|
||||
<div class="name">人民币</div>
|
||||
<div class="name">{{userinfo.currency}}</div>
|
||||
<img src="@/static/images/jiantou2.png" alt="" class="down">
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="@/static/images/yuyan.png" alt="" class="icon">
|
||||
<div class="name">中文</div>
|
||||
<div class="name">{{userinfo.language}}</div>
|
||||
<img src="@/static/images/jiantou2.png" alt="" class="down">
|
||||
</div>
|
||||
<div class="item">
|
||||
@ -110,7 +110,8 @@
|
||||
</style>
|
||||
<script lang="ts">
|
||||
import router from '@/router';
|
||||
import { defineComponent, ref } from 'vue';
|
||||
import store from '@/store';
|
||||
import { computed, defineComponent, ref } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
|
||||
export default defineComponent({
|
||||
@ -148,6 +149,10 @@ export default defineComponent({
|
||||
route: "/mine/archives"
|
||||
}
|
||||
]
|
||||
const userinfo = computed(() => {
|
||||
return store.state.userinfo;
|
||||
})
|
||||
|
||||
function navto(index: number){
|
||||
router.push({
|
||||
path: nav[index].route
|
||||
@ -156,7 +161,8 @@ export default defineComponent({
|
||||
return {
|
||||
nav,
|
||||
types,
|
||||
navto
|
||||
navto,
|
||||
userinfo
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@ -1,11 +1,27 @@
|
||||
import { userinfo } from '@/api';
|
||||
import { createStore } from 'vuex'
|
||||
|
||||
export default createStore({
|
||||
state: {
|
||||
userinfo:{
|
||||
username: "username",
|
||||
head: ""
|
||||
},
|
||||
islogin: false
|
||||
},
|
||||
mutations: {
|
||||
setUserInfo(state, userinfo){
|
||||
state.userinfo = userinfo
|
||||
},
|
||||
login(state){
|
||||
state.islogin = true;
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
async setUserInfo({ commit }){
|
||||
const user = await userinfo();
|
||||
commit('setUserInfo', user);
|
||||
}
|
||||
},
|
||||
modules: {
|
||||
}
|
||||
|
||||
44
src/types/index.d.ts
vendored
44
src/types/index.d.ts
vendored
@ -2,6 +2,19 @@
|
||||
* 只添加了一些必要的参数，并没有写完整，因为剩下的大部分用不到
|
||||
*/
|
||||
|
||||
// 定义axios
|
||||
import * as axios from 'axios';
|
||||
|
||||
declare module 'axios' {
|
||||
export interface CustomSuccessData<T> {
|
||||
code: number;
|
||||
msg?: string;
|
||||
data?: T;
|
||||
[keys: string]: any;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// 图片选择
|
||||
export interface ImgInfo {
|
||||
@ -20,9 +33,30 @@ export interface VideoInfo {
|
||||
uid: string;
|
||||
}
|
||||
|
||||
// 返回数据
|
||||
export interface ResData{
|
||||
code?: number;
|
||||
msg?: string;
|
||||
data?: any;
|
||||
// 登录返回数据
|
||||
export interface LoginData{
|
||||
api_token: string;
|
||||
memberid: number;
|
||||
}
|
||||
|
||||
// 用户信息
|
||||
export interface UserInfo {
|
||||
name: string;
|
||||
img: string;
|
||||
language: string;
|
||||
currency: string;
|
||||
zoneStr: string;
|
||||
memberid: string;
|
||||
country: string;
|
||||
live: string;
|
||||
mtongue: string;
|
||||
tlanguage: string;
|
||||
willsay: string;
|
||||
interest:any;
|
||||
mobile: string;
|
||||
email: string;
|
||||
birthday: string;
|
||||
video: string;
|
||||
desc: string;
|
||||
money: string;
|
||||
}
|
||||
@ -149,11 +149,8 @@
|
||||
import { defineComponent, reactive, ref } from "vue";
|
||||
import LoginTab from "@/components/login/LoginTab.vue";
|
||||
import NavTop from "@/components/NavTop.vue"
|
||||
import { loginpass, sendsms } from '@/api';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { ResData } from '@/types';
|
||||
import { saveValue } from '@/utils/common';
|
||||
import router from '@/router';
|
||||
import { loginpass } from '@/api';
|
||||
import store from '@/store';
|
||||
|
||||
export default defineComponent({
|
||||
name: "Login",
|
||||
@ -188,9 +185,6 @@ export default defineComponent({
|
||||
*/
|
||||
const getcode: () => void = () => {
|
||||
console.log(phone.value);
|
||||
sendsms("86" + phone.value, 0).then((res)=>{
|
||||
console.log(res)
|
||||
})
|
||||
const timestep = setInterval(() => {
|
||||
console.log(11112);
|
||||
time.value = time.value - 1;
|
||||
@ -202,23 +196,12 @@ export default defineComponent({
|
||||
}
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
function login(): void {
|
||||
console.log(userinfo.phone,userinfo.password)
|
||||
|
||||
loginpass(userinfo.phone,userinfo.password).then((res: ResData) =>{
|
||||
console.log(res.code)
|
||||
if(res.code == 1){
|
||||
message.error(res.msg)
|
||||
}else{
|
||||
console.log(res.data)
|
||||
if(!saveValue("token", res.data.api_token)){
|
||||
message.error("存储错误, 请允许网页使用本地存储！")
|
||||
}else{
|
||||
router.push("/mine/archives")
|
||||
}
|
||||
}
|
||||
loginpass(userinfo.phone,userinfo.password).then(()=>{
|
||||
store.dispatch("setUserInfo");
|
||||
})
|
||||
|
||||
}
|
||||
return {
|
||||
formLayout,
|
||||
|
||||
@ -2,11 +2,11 @@
|
||||
<div class="archives">
|
||||
<div class="user-info">
|
||||
<div class="avatar">
|
||||
<a-avatar :size="85" shape="circle" src="https://fanyi-cdn.cdn.bcebos.com/static/translation/img/header/logo_40c4f13.svg">
|
||||
<a-avatar :size="85" shape="circle" :src="userinfo.head">
|
||||
<template v-slot:icon><UserOutlined /></template>
|
||||
</a-avatar>
|
||||
<div class="user-name">
|
||||
<div class="value">{{ formData.name }}</div>
|
||||
<div class="value">{{ userinfo.username }}</div>
|
||||
<div class="update-btn" @click="updateUserName">修改</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -16,7 +16,7 @@
|
||||
<div class="input-box country">
|
||||
<div class="label">来自国家</div>
|
||||
<a-select
|
||||
v-model:value="formData.country"
|
||||
v-model:value="userinfo.country"
|
||||
style="width: 171px"
|
||||
size="small"
|
||||
ref="select"
|
||||
@ -29,12 +29,12 @@
|
||||
</div>
|
||||
<div class="input-box address">
|
||||
<div class="label">居住地</div>
|
||||
<a-input size="small" v-model:value="formData.address" placeholder="请输入居住地" />
|
||||
<a-input size="small" v-model:value="userinfo.live" placeholder="请输入居住地" />
|
||||
</div>
|
||||
<div class="input-box teach-lang">
|
||||
<div class="label">授课语言</div>
|
||||
<a-select
|
||||
v-model:value="formData.teachingLang"
|
||||
v-model:value="userinfo.tlanguage"
|
||||
style="width: 171px"
|
||||
size="small"
|
||||
ref="select"
|
||||
@ -77,7 +77,7 @@
|
||||
<div class="input-box native-lang">
|
||||
<div class="label">母语</div>
|
||||
<a-select
|
||||
v-model:value="formData.nativeLang"
|
||||
v-model:value="userinfo.mtongue"
|
||||
style="width: 171px"
|
||||
size="small"
|
||||
ref="select"
|
||||
@ -107,7 +107,7 @@
|
||||
</div>
|
||||
<div class="input-box introduce">
|
||||
<div class="label">自我介绍</div>
|
||||
<a-textarea v-model:value="formData.introduce" class="introduce-textarea" />
|
||||
<a-textarea v-model:value="userinfo.desc" class="introduce-textarea" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -116,11 +116,11 @@
|
||||
<div class="main-container">
|
||||
<div class="input-box mailbox">
|
||||
<div class="label">邮箱</div>
|
||||
<a-input size="small" v-model:value="formData.mail" placeholder="请输入邮箱" />
|
||||
<a-input size="small" v-model:value="userinfo.mail" placeholder="请输入邮箱" />
|
||||
</div>
|
||||
<div class="input-box phone-box">
|
||||
<div class="label">手机号</div>
|
||||
<div class="phone">{{ formData.phone }}</div>
|
||||
<div class="phone">{{ userinfo.mobile }}</div>
|
||||
<div class="update-btn" @click="togglePhoneModal(true)">更换手机号</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -130,13 +130,13 @@
|
||||
<div class="main-container">
|
||||
<div class="input-box password-box">
|
||||
<div class="label">密码</div>
|
||||
<div class="password">{{ formData.password }}</div>
|
||||
<div class="password">************</div>
|
||||
<div class="update-btn" @click="togglePasswordModal(true)">修改密码</div>
|
||||
</div>
|
||||
<div class="input-box time-zone-box">
|
||||
<div class="label">时区</div>
|
||||
<a-select
|
||||
v-model:value="formData.timeZone"
|
||||
v-model:value="userinfo.zoneStr"
|
||||
style="width: 171px"
|
||||
size="small"
|
||||
ref="select"
|
||||
@ -150,7 +150,7 @@
|
||||
<div class="input-box currency-box">
|
||||
<div class="label">货币</div>
|
||||
<a-select
|
||||
v-model:value="formData.currency"
|
||||
v-model:value="userinfo.currency"
|
||||
style="width: 171px"
|
||||
size="small"
|
||||
ref="select"
|
||||
@ -164,7 +164,7 @@
|
||||
<div class="input-box time-zone">
|
||||
<div class="label">语言</div>
|
||||
<a-select
|
||||
v-model:value="formData.language"
|
||||
v-model:value="userinfo.language"
|
||||
style="width: 171px"
|
||||
size="small"
|
||||
ref="select"
|
||||
@ -258,9 +258,10 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, reactive, Ref, ref } from "vue";
|
||||
import { computed, defineComponent, reactive, Ref, ref } from "vue";
|
||||
import { UserOutlined, SmileOutlined, PlaySquareOutlined } from '@ant-design/icons-vue';
|
||||
import NavBottom from '@/components/NavBottom.vue';
|
||||
import store from '@/store';
|
||||
|
||||
export default defineComponent({
|
||||
name: "Archives",
|
||||
@ -295,8 +296,11 @@ export default defineComponent({
|
||||
currency: '人民币',
|
||||
language: '中文',
|
||||
}
|
||||
const userinfo = computed(() => store.state.userinfo)
|
||||
// 表单数据
|
||||
const formData = reactive(formBasic);
|
||||
|
||||
const modalNode = () => document.getElementsByClassName('modal-container')[0]
|
||||
/**
|
||||
* 修改用户名
|
||||
* @return { void }
|
||||
@ -426,7 +430,7 @@ export default defineComponent({
|
||||
|
||||
}
|
||||
return {
|
||||
modalNode: () => document.getElementsByClassName('modal-container')[0],
|
||||
modalNode,
|
||||
formData,
|
||||
updateUserName,
|
||||
addSpeakLang,
|
||||
@ -446,6 +450,7 @@ export default defineComponent({
|
||||
passwordForm,
|
||||
updateUserPassword,
|
||||
submitInfo,
|
||||
userinfo
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user