Skip to content

P
pptist
Commit 94ac46d5 authored by 罗超's avatar 罗超
Browse files
Options

修改部分个人中心内容

parent db7e6f70
Hide whitespace changes
Inline Side-by-side
Showing with 332 additions and 21 deletions
src/assets/styles/common.css
View file @ 94ac46d5
......@@ -698,6 +698,18 @@ page {
background-color: #d9dcdf !important;
border-color: #d9dcdf !important;
}
.no-border .el-tabs__nav-wrap::after{
display: none!important;
}
.dark .el-tabs__active-bar{
background-color: #000!important;
}
.dark .el-tabs__item.is-active{
color:#000 !important;
}
.dark .el-tabs__item{
color: grey !important;
}
.full-dialog{
background-color: rgba(0,0,0,0.4);
position: fixed;
......
src/components/User/UserCard.vue
View file @ 94ac46d5
......@@ -3,16 +3,11 @@
<el-dropdown trigger="click">
<el-avatar
:size="size"
:src="userInfo.photo"
:src="userInfo.photo && userInfo.photo.includes('http') ? userInfo.photo:USER_DEFAULT_HEADER"
shape="square"
style="background-color: #e6ddf5; color: #7b35ef"
class="q-mx-lg cusor-pointer"
>{{
userInfo.photo && userInfo.photo.includes("http")
? ""
: userInfo.nickname[0]
}}</el-avatar
>
></el-avatar>
<template #dropdown>
<div class="MarketfigurePopover shrink">
<div class="row">
......@@ -21,15 +16,11 @@
</div> -->
<el-avatar
:size="40"
:src="userInfo.photo"
shape="square"
:src="userInfo.photo && userInfo.photo.includes('http') ? userInfo.photo:USER_DEFAULT_HEADER"
style="background-color: #e6ddf5; color: #7b35ef"
class="q-mr-lg cusor-pointer shrink"
>{{
userInfo.photo && userInfo.photo.includes("http")
? ""
: userInfo.nickname[0]
}}</el-avatar
>
></el-avatar>
<div>
<div class="row items-center MarketfigureName">
<span>{{ userInfo.nickname }}</span>
......@@ -112,7 +103,7 @@
import { useUserStore } from "@/store";
import { storeToRefs } from "pinia";
import { useRouter } from "vue-router";
import {USER_DEFAULT_HEADER} from '@/configs/customer'
const props = defineProps({
size: {
type: Number,
......
src/configs/customer.ts
View file @ 94ac46d5
......@@ -10,4 +10,6 @@ export const FREE_USER_THEME:CustomerTheme = {name:'FREE',bg:'linear-gradient(27
export const VIP_USER_THEME:CustomerTheme = {name:'VIP',bg:'linear-gradient(270deg, #4165E2 0%, #5276F5 100%)',color:'#dd9b38', desc:'会员版·个人'}
export const ENT_USER_THEME:CustomerTheme = {name:'EN',bg:'linear-gradient(270deg, #DD9B38 0%, #E6B351 100%);',color:'#252860', desc:'会员版·企业'}
export const CustomerThemeConfig:CustomerTheme[] = [FREE_USER_THEME,VIP_USER_THEME,ENT_USER_THEME]
\ No newline at end of file
export const CustomerThemeConfig:CustomerTheme[] = [FREE_USER_THEME,VIP_USER_THEME,ENT_USER_THEME]
export const USER_DEFAULT_HEADER = 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1713839840000_239.png'
\ No newline at end of file
src/plugins/icon.ts
View file @ 94ac46d5
......@@ -133,6 +133,7 @@ import {
Like,
Currency,
Protect,
Help
} from '@icon-park/vue-next'
export interface Icons {
......@@ -269,7 +270,8 @@ export const icons: Icons = {
IconRefresh: Refresh,
IconLike: Like,
IconCurrency: Currency,
IconProtect: Protect
IconProtect: Protect,
IconHelp:Help
}
export default {
......
src/router/router.ts
View file @ 94ac46d5
......@@ -186,6 +186,13 @@ const routes: RouteRecordRaw[] = [
title:'我的订单/发票'
}
},
{
path: '/u/setting',
component: () => import('@/views/UserCenter/Setting.vue'),
meta:{
title:'账户设置'
}
},
]
},
{
......
src/store/menu.ts
View file @ 94ac46d5
......@@ -7,7 +7,7 @@ export interface Menu{
url:string,
children?:Menu[]
}
export type MenuOwner = '*'|'F'|'V'|'A'|'E'
export type MenuOwner = '*'|'F'|'V'|'A'|'E'|'M'
export interface MenuState {
// freeUser: Menu[],
// vipUser: Menu[],
......
src/views/UserCenter/Index.vue
View file @ 94ac46d5
<template>
<div class="user-header rounded row items-center" :style="{ background: userTheme?.bg }">
<el-avatar :size="64" :src="userInfo.photo" shape="square" :style="{ BackgroundColor: userTheme?.color }" style="font-size: 36px;font-weight: bold;"></el-avatar>
<el-avatar :size="64" :src="userInfo.photo && userInfo.photo.includes('http') ? userInfo.photo:USER_DEFAULT_HEADER" shape="square" :style="{ BackgroundColor: userTheme?.color }" style="font-size: 36px;font-weight: bold;"></el-avatar>
<div class="q-ml-lg text-white col">
<div class="" style="font-size: 20px;">{{ userInfo.nickname }}</div>
<div class="q-mt-sm text-info">个人账号ID：{{ userInfo.cardno??'8027970449819221090' }}</div>
......@@ -112,6 +112,7 @@ import { ENT_USER_THEME, VIP_USER_THEME } from "@/configs/customer";
import { useUserStore } from "@/store";
import { storeToRefs } from "pinia";
import { ref } from "vue";
import {USER_DEFAULT_HEADER} from '@/configs/customer'
const useUser = useUserStore()
const { userInfo } = storeToRefs(useUser)
......
src/views/UserCenter/Order.vue
View file @ 94ac46d5
<template>
这里是Order
<el-tabs v-model="activeName" @tab-click="tabsHandlerClick" class="no-border dark">
<el-tab-pane label="全部订单" name="all"></el-tab-pane>
<el-tab-pane label="待支付" name="pay"></el-tab-pane>
<el-tab-pane label="已完成" name="finish"></el-tab-pane>
<el-tab-pane label="待开票" name="invoice"></el-tab-pane>
<el-tab-pane label="历史发票" name="invoiceHistory"></el-tab-pane>
<div class="order-bar rounded row">
<div class="item" style="width:300px; text-align: left">商品信息</div>
<div class="item col">时长</div>
<div class="item col" >单价</div>
<div class="item col">数量</div>
<div class="item none-width">
<div style="background-color: rgba(0,0,0,.08);width:1px">&nbsp;</div>
</div>
<div class="item col">实付款</div>
<div class="item col">订单状态</div>
<div class="item">操作</div>
</div>
<div class="order-body q-mt-lg">
<div class="order-item rounded">
<div class="title">
<span>2024-04-20 21:39:59</span>
<span class="q-ml-md">订单号：202404202139000359</span>
</div>
<div class="bg-white rounded row items-center">
<div class="item row items-center" style="width:300px; text-align: left;padding:24px;">
<img src="https://st0.dancf.com/02/tms/202308030952-517b.png?x-oss-process=image/resize,w_72,type_6/interlace,1/format,webp" style="width:72px;" class="rounded" >
<div class="q-ml-lg">VIP_个人授权版本</div>
</div>
<div class="item col">1个月</div>
<div class="item col">¥39.00</div>
<div class="item col">1席位</div>
<div class="item none-width">
<div style="background-color: rgba(0,0,0,.08);width:1px;height:72px;">&nbsp;</div>
</div>
<div class="item col">
<div class="text-weight-bold q-mb-sm" style="font-size: 16px">¥29.00</div>
<div class="row items-center flex-end">
<span class="text-grey-8 q-mr-md">已优惠 ¥10.00</span>
<IconHelp :size="16" class="cursor-pointer"></IconHelp>
</div>
</div>
<div class="item col">
<div class="q-mb-sm">交易完成</div>
<el-button link>订单详情</el-button>
</div>
<div class="item column">
<el-button type="primary">发票</el-button>
<br />
<el-button type="default">售后</el-button>
</div>
</div>
</div>
</div>
<div class="order-body q-mt-lg">
<div class="order-item rounded">
<div class="title">
<span>2024-04-20 21:39:59</span>
<span class="q-ml-md">订单号：202404202139000359</span>
</div>
<div class="bg-white rounded row items-center">
<div class="item row items-center" style="width:300px; text-align: left;padding:24px;">
<img src="https://st0.dancf.com/02/tms/202308030952-517b.png?x-oss-process=image/resize,w_72,type_6/interlace,1/format,webp" style="width:72px;" class="rounded" >
<div class="q-ml-lg">VIP_个人授权版本</div>
</div>
<div class="item col">1个月</div>
<div class="item col">¥39.00</div>
<div class="item col">1席位</div>
<div class="item none-width">
<div style="background-color: rgba(0,0,0,.08);width:1px;height:72px;">&nbsp;</div>
</div>
<div class="item col">
<div class="text-weight-bold q-mb-sm" style="font-size: 16px">¥29.00</div>
<div class="row items-center flex-end">
<span class="text-grey-8 q-mr-md">已优惠 ¥10.00</span>
<IconHelp :size="16" class="cursor-pointer"></IconHelp>
</div>
</div>
<div class="item col">
<div class="q-mb-sm">交易完成</div>
<el-button link>订单详情</el-button>
</div>
<div class="item column">
<el-button type="primary">发票</el-button>
<br />
<el-button type="default">售后</el-button>
</div>
</div>
</div>
</div>
<div class="order-body q-mt-lg">
<div class="order-item rounded">
<div class="title">
<span>2024-04-20 21:39:59</span>
<span class="q-ml-md">订单号：202404202139000359</span>
</div>
<div class="bg-white rounded row items-center">
<div class="item row items-center" style="width:300px; text-align: left;padding:24px;">
<img src="https://st0.dancf.com/02/tms/202308030952-517b.png?x-oss-process=image/resize,w_72,type_6/interlace,1/format,webp" style="width:72px;" class="rounded" >
<div class="q-ml-lg">VIP_个人授权版本</div>
</div>
<div class="item col">1个月</div>
<div class="item col">¥39.00</div>
<div class="item col">1席位</div>
<div class="item none-width">
<div style="background-color: rgba(0,0,0,.08);width:1px;height:72px;">&nbsp;</div>
</div>
<div class="item col">
<div class="text-weight-bold q-mb-sm" style="font-size: 16px">¥29.00</div>
<div class="row items-center flex-end">
<span class="text-grey-8 q-mr-md">已优惠 ¥10.00</span>
<IconHelp :size="16" class="cursor-pointer"></IconHelp>
</div>
</div>
<div class="item col">
<div class="q-mb-sm">交易完成</div>
<el-button link>订单详情</el-button>
</div>
<div class="item column">
<el-button type="primary">发票</el-button>
<br />
<el-button type="default">售后</el-button>
</div>
</div>
</div>
</div>
</el-tabs>
</template>
<script lang="ts" setup>
import { ref } from "vue";
const activeName = ref<string>('all')
const tabsHandlerClick = (e:any)=>{
console.log(e)
}
</script>
<style>
<style scoped>
.order-bar{
background: #f6f7f9 !important;
}
.order-bar .item,
.order-body .order-item .item{
padding: 0 24px;
height: 42px;
line-height: 42px;
font-size: 14px;
color:gray;
text-align: right;
min-width: 128px;
}
.order-bar .item.none-width,
.order-body .order-item .item.none-width{
min-width: unset;
}
.order-body{
}
.order-body .order-item{
background: #f6f7f9;
border:1px solid rgba(0,0,0,.08);
font-size: 14px;
}
.order-body .order-item .title{
padding: 0 24px;
height: 45px;
line-height: 45px;
color:grey;
}
.order-body .order-item .item{
height: auto;
line-height: 1;
color: #000;
}
</style>
\ No newline at end of file
src/views/UserCenter/Setting.vue 0 → 100644
View file @ 94ac46d5
<template>
<div class="user-setting">
<div class="row flex-center">
<el-upload drag action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" class="avatar-upload">
<el-avatar :size="72" :src="userInfo.photo && userInfo.photo.includes('http') ? userInfo.photo:USER_DEFAULT_HEADER" shape="square" :style="{ BackgroundColor: userTheme?.color }"></el-avatar>
<div class="after-overlayer">上传</div>
</el-upload>
</div>
<div class="q-mt-xl q-mb-md row flex-center items-center" style="height:26px;">
<template v-if="!isEditorNickname">
<div>{{ userInfo.nickname }}</div>
<IconWrite :size="16" class="q-ml-md cusor-pointer" @click="()=>editorNicknameHandler(nicknameRef)"></IconWrite>
</template>
<input type="text" ref="nicknameRef" class="nickname" v-model="userInfo.nickname" :autofocus="true" v-show="isEditorNickname" @blur="()=>isEditorNickname=false">
</div>
<div class="text-small text-info text-center">用户ID:9020345764199812103</div>
<div class="q-mt-lg setting-body rounded">
<div class="setting-item">
<div>
<div class="text-dark">手机</div>
<div class="">+86 173****7817</div>
</div>
<el-button>更换手机</el-button>
</div>
<div class="setting-item">
<div>
<div class="text-dark">邮箱</div>
<div class="">绑定邮箱后，可以更方便的登录、管理稿定账号</div>
</div>
<el-button>立即绑定</el-button>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { useUserStore } from "@/store";
import { storeToRefs } from "pinia";
import { nextTick } from "vue";
import { ref } from "vue";
import {USER_DEFAULT_HEADER} from '@/configs/customer'
const useUser = useUserStore()
const { userInfo } = storeToRefs(useUser)
const userTheme = useUser.getUserTheme
const isEditorNickname = ref(false)
const nicknameRef=ref<HTMLElement>()
const editorNicknameHandler = (target:HTMLElement|undefined)=>{
isEditorNickname.value=true
nextTick(()=>{
if(target){
target.focus()
}
})
}
</script>
<style>
.user-setting {
width: 848px;
padding-bottom: 24px;
margin: 0 auto;
}
.user-setting .avatar-upload{
width:72px;
height: 72px;
position: relative;
border-radius:8px;
overflow: hidden;
}
.user-setting .avatar-upload .el-upload-dragger{
padding:0px !important;
border-radius:8px;
height: 72px;
}
.user-setting .avatar-upload .after-overlayer{
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: rgba(0,0,0,.2);
display: none;
line-height: 72px;
font-size: 16px;
color:#FFF;
text-align: center;
}
.user-setting .avatar-upload:hover .after-overlayer{
display: block;
}
.user-setting .nickname{
border:none;
outline: none;
padding: 5px;
width: 180px;
border-bottom: 1px dashed #000;
font-size: 16px;
font-family: pingfangr;
}
.user-setting .setting-body{
border:1px solid rgba(0,0,0,.08)
}
.user-setting .setting-body .setting-item{
display: flex;
align-items: center;
justify-content: space-between;
padding: 24px;
font-size: 14px;
line-height: 22px;
color: #9da3ac;
border-bottom:1px solid rgba(0,0,0,.08);
}
.user-setting .setting-body .setting-item:last-child{
border: none;
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment