我的档案查看完成

This commit is contained in:
luyuan 2020-10-10 10:57:00 +08:00
parent a67333be23
commit 32361d6629
Signed by: theluyuan
GPG Key ID: A7972FD973317FF3
5 changed files with 64 additions and 21 deletions

View File

@ -8,10 +8,12 @@
<script lang="ts">
import { defineComponent } from 'vue';
import store from './store';
import { getValue } from './utils/common';
export default defineComponent({
setup(){
if(store.state.islogin){
if(getValue('token')){
store.commit("login")
store.dispatch("setUserInfo");
}
}

View File

@ -37,6 +37,22 @@ export async function userinfo(){
console.log(user.data?.img)
return {
head: user.data?.img,
username: user.data?.name
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
}
}

View File

@ -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
}
}
})

16
src/types/index.d.ts vendored
View File

@ -43,4 +43,20 @@ export interface LoginData{
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;
}

View File

@ -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,6 +296,7 @@ export default defineComponent({
currency: '人民币',
language: '中文',
}
const userinfo = computed(() => store.state.userinfo)
//
const formData = reactive(formBasic);
/**
@ -446,6 +448,7 @@ export default defineComponent({
passwordForm,
updateUserPassword,
submitInfo,
userinfo
}
}
});