Skip to content

B
bigwood
Commit c31ece66 authored by youjie's avatar youjie
Browse files
Options

Merge branch 'master' of http://gitlab.oytour.com/luochao/bigwood

parents dab89c6b c1d87f5a
Hide whitespace changes
Inline Side-by-side
Showing with 450 additions and 151 deletions
src/App.vue
View file @ c31ece66
...@@ -87,7 +87,7 @@ export default defineComponent({ ...@@ -87,7 +87,7 @@ export default defineComponent({
body body
font-family: 'microsoft yahei','-apple-system','BlinkMacSystemFont','Segoe UI','Roboto','Helvetica Neue','Arial','Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji','MicrosoftJhengHeiBoldFix','Microsoft JhengHei' !important font-family: 'microsoft yahei','-apple-system','BlinkMacSystemFont','Segoe UI','Roboto','Helvetica Neue','Arial','Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji','MicrosoftJhengHeiBoldFix','Microsoft JhengHei' !important
color: var(--q-dark) color: #181c32
.n-base-selection .n-base-selection-label, .n-base-selection .n-base-selection-label,
.n-base-selection .n-base-selection-tags .n-base-selection .n-base-selection-tags
background: #f1f1f1 !important background: #f1f1f1 !important
...@@ -272,5 +272,33 @@ body ...@@ -272,5 +272,33 @@ body
max-height: unset !important max-height: unset !important
width: 100vw !important width: 100vw !important
height: 100vh !important height: 100vh !important
:root
--q-gray-100: #f5f8fa
--q-gray-200: #eff2f5
--q-gray-300: #E4E6EF
--q-gray-400: #B5B5C3
--q-gray-500: #A1A5B7
--q-gray-600: #7E8299
--q-gray-700: #5E6278
--q-gray-800: #3F4254
--q-gray-900: #181C32
.text-grey-100
color: var(--q-gray-100) !important
.text-grey-200
color: var(--q-gray-200) !important
.text-grey-300
color: var(--q-gray-300) !important
.text-grey-400
color: var(--q-gray-400) !important
.text-grey-500
color: var(--q-gray-500) !important
.text-grey-600
color: var(--q-gray-600) !important
.text-grey-700
color: var(--q-gray-700) !important
.text-grey-800
color: var(--q-gray-800) !important
.text-grey-900
color: var(--q-gray-900) !important
</style> </style>
src/api/user.ts
View file @ c31ece66
...@@ -184,6 +184,33 @@ class UserService { ...@@ -184,6 +184,33 @@ class UserService {
static resetPassword(certificate:string,password:string):Promise<HttpResponse>{ static resetPassword(certificate:string,password:string):Promise<HttpResponse>{
return request("b2b_post_reset_password",{certificate,password}); return request("b2b_post_reset_password",{certificate,password});
} }
/**
* 用戶修改登錄密碼
* @param oldPassword 老密碼
* @param newPassword 新密碼
* @returns
*/
static setNewPassword(oldPassword:string,newPassword:string):Promise<HttpResponse>{
return request("b2b_post_ModifyAccountPassowrd",{oldPassword,newPassword});
}
/**
* 修改用戶頭像
* @param photo 頭像地址
* @returns
*/
static setUserPhoto(photo:string):Promise<HttpResponse>{
return request("b2b_post_MdifyCustomerAccountPhoto",{photo});
}
/**
* 查詢用戶的基本資料
* @returns
*/
static getCustomerInfo():Promise<HttpResponse>{
return request("b2b_get_GetCustomerManagerInfo",{});
}
} }
export default UserService export default UserService
src/components/global/svg-icon.vue
View file @ c31ece66
...@@ -88,9 +88,9 @@ svg g [fill]{ ...@@ -88,9 +88,9 @@ svg g [fill]{
transition: fill 0.3s ease; transition: fill 0.3s ease;
fill: #ccc !important; fill: #ccc !important;
} }
.svg-icon.svg-icon-warning g [fill] { .svg-icon-warning g [fill] {
transition: fill 0.3s ease; transition: fill 0.3s ease;
fill: var(--q-color-warning) !important; fill: orange !important;
} }
.svg-icon.svg-icon-negative g [fill] { .svg-icon.svg-icon-negative g [fill] {
transition: fill 0.3s ease; transition: fill 0.3s ease;
...@@ -169,7 +169,7 @@ svg g [fill]{ ...@@ -169,7 +169,7 @@ svg g [fill]{
} }
.hover-g-p.svg-icon g [fill] { .hover-g-p.svg-icon g [fill] {
transition: fill 0.3s ease; transition: fill 0.3s ease;
fill: #666 !important; fill: #666 !important;
} }
.hover-g-p:hover { .hover-g-p:hover {
color: var(--q-primary) !important; color: var(--q-primary) !important;
......
src/components/layout/userInfo.vue
View file @ c31ece66
...@@ -3,13 +3,13 @@ ...@@ -3,13 +3,13 @@
<div class="q-px-sm"> <div class="q-px-sm">
<div class="q-pa-sm row"> <div class="q-pa-sm row">
<q-avatar size="50px" rounded class="bg-blue-2 cursor-pointer q-mr-md"> <q-avatar size="50px" rounded class="bg-blue-2 cursor-pointer q-mr-md">
<img :src="user.photo" v-if="user?.photo" /> <q-img :src="user.photo" v-if="user?.photo" mode="cover" />
<span class="text-primary text-h6" v-else>{{ user?.name.substring(0, 1) }}</span> <span class="text-primary text-h6" v-else>{{ user?.name.substring(0, 1) }}</span>
</q-avatar> </q-avatar>
<div class="col column"> <div class="col column">
<div class="col row items-center"> <div class="col row items-center">
<span class="text-weight-bold text-subtitle1 q-mr-md">{{ user?.name }}</span> <span class="text-weight-bold text-subtitle1 q-mr-md">{{ user?.name }}</span>
<span class="bg-green-11 text-green-14 rounded-borders q-px-sm">已認證</span> <span class="bg-green-11 text-green-14 rounded-borders q-px-sm">{{$t('verified')}}</span>
</div> </div>
<div class="f12 text-grey-6 f12">{{ user?.account }}</div> <div class="f12 text-grey-6 f12">{{ user?.account }}</div>
</div> </div>
...@@ -92,10 +92,10 @@ export default defineComponent({ ...@@ -92,10 +92,10 @@ export default defineComponent({
if(data.langs && data.langs.length>0){ if(data.langs && data.langs.length>0){
data.currentLang = data.langs.find(x=> x.langLocale==locale.value) ?? {}; data.currentLang = data.langs.find(x=> x.langLocale==locale.value) ?? {};
} }
// 切换语言 // 切换语言
const methods = { const methods = {
goUrl(url){ goUrl(url:string){
$router.push({ path:url}) $router.push({ path:url})
}, },
getLanguage (val:SitLang) { getLanguage (val:SitLang) {
......
src/i18n/zh-TW/index.ts
View file @ c31ece66
...@@ -13,6 +13,7 @@ export default { ...@@ -13,6 +13,7 @@ export default {
query: "檢索", query: "檢索",
noneData: "沒有找到相關的數據", noneData: "沒有找到相關的數據",
loading: "正在加載數據", loading: "正在加載數據",
verified: '已認證',
personal:{ personal:{
pageTitle: "個人檔案", pageTitle: "個人檔案",
trading: '累積交易額', trading: '累積交易額',
...@@ -22,9 +23,23 @@ export default { ...@@ -22,9 +23,23 @@ export default {
TravelAgency: '旅行社名稱', TravelAgency: '旅行社名稱',
numbering: '統一編號(統編)', numbering: '統一編號(統編)',
LINEID: 'LINE ID', LINEID: 'LINE ID',
Phone: '電話', Phone: '聯絡電話',
addreess: '辦公地址',
Name: '姓名', Name: '姓名',
Email: '電郵' Email: '電郵',
post:'負責人',
profile: '概述',
security: '帳戶安全',
accountUpdate:'帳戶信息修改提示',
accountUpdateTips:'如果您需要修改以上預留的帳戶資料，請聯繫您與JVS對接業務人員進行修改',
resetPw:'修改密碼',
cpw:'當前密碼',
npw:'新密碼',
rpw:'確認新密碼',
subBtn:'確認修改',
cpwTips:'請輸入當前密碼',
updateSuccess:'密碼修改成功，請重新登入',
photoSuccess:'頭像設置成功'
}, },
upload:{ upload:{
"success":"上傳成功", "success":"上傳成功",
......
src/layouts/MainLayout.vue
View file @ c31ece66
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
</q-popup-proxy> </q-popup-proxy>
</div> </div>
<q-avatar size="40px" rounded class="bg-blue-2 cursor-pointer"> <q-avatar size="40px" rounded class="bg-blue-2 cursor-pointer">
<img :src="userInfo.photo" v-if="userInfo.photo" /> <q-img :src="userInfo.photo" v-if="userInfo?.photo" mode="cover" />
<span class="text-primary text-h6" v-else>{{ userInfo.name.substring(0, 1) }}</span> <span class="text-primary text-h6" v-else>{{ userInfo.name.substring(0, 1) }}</span>
<q-popup-proxy :offset="[0,15]" class="no-shadow"> <q-popup-proxy :offset="[0,15]" class="no-shadow">
<user-info :user="userInfo"></user-info> <user-info :user="userInfo"></user-info>
......
src/pages/personal/personal.vue
View file @ c31ece66
<template> <template>
<div class="fix-height-subpage column no-wrap items-center q-pa-md"> <div class=" column items-center" :class="{'q-pa-xl':$q.platform.is.desktop,'q-pa-sm':$q.platform.is.mobile}">
<div class="bg-white q-pa-lg borounded-borders" <div class="col full-width" style="max-width: 1000px">
:style="{'width':$q.platform.is.desktop?'840px':'100%'}"> <div class="rounded-borders bg-white light-shadow q-pa-lg" style="padding-bottom: 0 !important">
<div class="items-start" :class="{'row':$q.platform.is.desktop,'q-pa-lg':$q.platform.is.desktop,'column':$q.platform.is.mobile}"> <div :class="{'row':$q.platform.is.desktop,'column items-center':$q.platform.is.mobile}">
<div class="row" :class="{'justify-center':$q.platform.is.mobile,'items-center':$q.platform.is.mobile}" <n-upload @change="uploadHandleChange()" style="width: unset" accept="image/*" :action="importFileUrl" @finish="handleFinish" file-list-style="display:none">
:style="{'width':$q.platform.is.mobile?'100%':''}"> <q-avatar size="160px" rounded class="bg-blue-2 cursor-pointer q-mr-md">
<q-avatar :size="$q.platform.is.desktop?'150px':'100px'" rounded class="personal-HeadImg reactive bg-blue-2 cursor-pointer q-mr-lg"> <q-img :src="userInfo.photo" v-if="userInfo?.photo" mode="cover" />
<img src="../../assets/images/8.png" /> <span class="text-primary text-h2" v-else>{{ userInfo?.name.substring(0, 1) }}</span>
<!-- <span class="text-primary">小</span> --> </q-avatar>
<n-upload class="col" </n-upload>
:loading="loading" <div class="colunm" :class="{'q-ml-sm':$q.platform.is.desktop,'q-mt-md':$q.platform.is.mobile}">
:action="importFileUrl" <div class="" :class="{'row items-center':$q.platform.is.desktop,'text-center':$q.platform.is.mobile}">
@finish="handleFinish" <span style="font-size: 20px" class="text-weight-bold q-mr-md personal-hover">{{ userInfo.name }}</span>
@change="uploadHandleChange" file-list-style="display:none"> <span class="bg-green-11 text-green-14 rounded-borders q-px-sm">{{$t('verified')}}</span>
<q-icon class="absolute personal-HeadImg-edit bg-white q-pa-xs" name="edit" size="xs"></q-icon> </div>
</n-upload> <div class="row q-mt-sm text-blue-grey-4" :class="{'justify-center':$q.platform.is.mobile}">
</q-avatar> <div class="personal-hover row">
<svg-icon icon="Communication/Contact1.svg" color="nav" :size="18"></svg-icon>
<span class="f12 q-ml-sm">{{ $t('personal.post') }}</span>
</div>
<div class="personal-hover row q-mx-lg">
<svg-icon icon="Communication/Mail.svg" color="nav" :size="18"></svg-icon>
<span class="f12 q-ml-sm">{{ userInfo.account }}</span>
</div>
<div class="personal-hover row q-mx-lg">
<svg-icon icon="Map/Marker1.svg" color="nav" :size="18"></svg-icon>
<span class="f12 q-ml-sm">{{ userInfo.address ?? '台南區，細絲豆腐店旁，1-1290' }}</span>
</div> </div>
<div class="column" :style="{'flex-grow': $q.platform.is.desktop?1:'','width': $q.platform.is.desktop?'':'100%'}" :class="{'q-mt-lg':$q.platform.is.mobile}">
<div class="row justify-between"> </div>
<div class="column rounded-borders personal-data" :class="{'q-px-lg':$q.platform.is.desktop,'q-py-sm':$q.platform.is.desktop,'q-px-xs':$q.platform.is.mobile,'q-py-xs':$q.platform.is.mobile,}" <div class="row justify-between col q-mt-lg din">
style="flex:1;flex-shrink: 0;"> <div class="column rounded-borders personal-data" :class="{ 'q-px-lg': $q.platform.is.desktop, 'q-py-sm': $q.platform.is.desktop, 'q-px-xs': $q.platform.is.mobile, 'q-py-xs': $q.platform.is.mobile }" style="flex: 1; flex-shrink: 0">
<div class="row no-wrap items-center"> <div class="row no-wrap items-center">
<q-icon class="q-pr-sm text-positive" name="arrow_upward"></q-icon> <q-icon class="q-pr-sm text-positive" name="arrow_upward"></q-icon>
<div class="q-ml-xs"> <div class="q-ml-xs">
<span class="text-weight-bold" :class="{'fz16':$q.platform.is.desktop,'fz14':$q.platform.is.mobile,}">{{$t('unit.jpc')}}</span> <span class="text-weight-bold" :class="{ fz16: $q.platform.is.desktop, fz14: $q.platform.is.mobile }">{{ $t('unit.jpc') }}</span>
<span class="text-weight-bold" :class="{'fz20':$q.platform.is.desktop,'fz18':$q.platform.is.mobile,}">23.0</span> <span class="text-weight-bold" :class="{ fz20: $q.platform.is.desktop, fz18: $q.platform.is.mobile }">0.00</span>
</div>
</div>
<div class="text-grey-13">{{$t('personal.trading')}}</div>
</div>
<div class="column rounded-borders personal-data"
:class="{'q-px-lg':$q.platform.is.desktop,'q-py-sm':$q.platform.is.desktop,'q-px-xs':$q.platform.is.mobile,'q-py-xs':$q.platform.is.mobile,'q-mx-lg':$q.platform.is.desktop,'q-mx-sm':$q.platform.is.mobile}"
style="flex:1;flex-shrink: 0;">
<div class="row no-wrap items-center">
<q-icon class="q-pr-sm text-red-14" name="arrow_downward"></q-icon>
<div class="q-ml-xs">
<span class="text-weight-bold" :class="{'fz16':$q.platform.is.desktop,'fz14':$q.platform.is.mobile,}"></span>
<span class="text-weight-bold" :class="{'fz20':$q.platform.is.desktop,'fz18':$q.platform.is.mobile,}">23.0</span>
</div>
</div>
<div class="text-grey-13">{{$t('personal.order')}}</div>
</div>
<div class="column rounded-borders personal-data" :class="{'q-px-lg':$q.platform.is.desktop,'q-py-sm':$q.platform.is.desktop,'q-px-xs':$q.platform.is.mobile,'q-py-xs':$q.platform.is.mobile,}"
style="flex:1;flex-shrink: 0;">
<div class="row no-wrap items-center">
<q-icon class="q-pr-sm text-positive" name="arrow_upward"></q-icon>
<div class="q-ml-xs">
<span class="text-weight-bold" :class="{'fz16':$q.platform.is.desktop,'fz14':$q.platform.is.mobile,}">%</span>
<span class="text-weight-bold" :class="{'fz20':$q.platform.is.desktop,'fz18':$q.platform.is.mobile,}">23.0</span>
</div>
</div>
<div class="text-grey-13">{{$t('personal.cancel')}}</div>
</div>
</div> </div>
<div class="column q-mt-lg"> </div>
<div class="q-mb-lg text-primary text-weight-bold" :class="{'fz18':$q.platform.is.desktop,'fz16':$q.platform.is.mobile}">{{$t('personal.ProfileDetails')}}</div> <div class="text-grey-13">{{ $t('personal.trading') }}</div>
<div class="row justify-between q-px-lg"> </div>
<span>{{$t('personal.TravelAgency')}}</span> <div class="column rounded-borders personal-data" :class="{ 'q-px-lg': $q.platform.is.desktop, 'q-py-sm': $q.platform.is.desktop, 'q-px-xs': $q.platform.is.mobile, 'q-py-xs': $q.platform.is.mobile, 'q-mx-lg': $q.platform.is.desktop, 'q-mx-sm': $q.platform.is.mobile }" style="flex: 1; flex-shrink: 0">
<span class="text-weight-bold">和平旅行社</span> <div class="row no-wrap items-center">
</div> <q-icon class="q-pr-sm text-red-14" name="arrow_downward"></q-icon>
<q-separator color="grey-3" class="q-my-md" /> <div class="q-ml-xs">
<div class="row justify-between q-px-lg"> <span class="text-weight-bold" :class="{ fz16: $q.platform.is.desktop, fz14: $q.platform.is.mobile }"></span>
<span>{{$t('personal.numbering')}}</span> <span class="text-weight-bold" :class="{ fz20: $q.platform.is.desktop, fz18: $q.platform.is.mobile }">0.00</span>
<span class="text-weight-bold">ERF</span> </div>
</div> </div>
<q-separator color="grey-3" class="q-my-md" /> <div class="text-grey-13">{{ $t('personal.order') }}</div>
<div class="row justify-between q-px-lg"> </div>
<span>{{$t('personal.LINEID')}}</span> <div class="column rounded-borders personal-data" :class="{ 'q-px-lg': $q.platform.is.desktop, 'q-py-sm': $q.platform.is.desktop, 'q-px-xs': $q.platform.is.mobile, 'q-py-xs': $q.platform.is.mobile }" style="flex: 1; flex-shrink: 0">
<span class="text-weight-bold">786</span> <div class="row no-wrap items-center">
</div> <q-icon class="q-pr-sm text-positive" name="arrow_upward"></q-icon>
<q-separator color="grey-3" class="q-my-md" /> <div class="q-ml-xs">
<div class="row justify-between q-px-lg"> <span class="text-weight-bold" :class="{ fz16: $q.platform.is.desktop, fz14: $q.platform.is.mobile }">%</span>
<span>{{$t('personal.Phone')}}</span> <span class="text-weight-bold" :class="{ fz20: $q.platform.is.desktop, fz18: $q.platform.is.mobile }">0.00</span>
<span class="text-weight-bold">1822555442</span>
</div>
<q-separator color="grey-3" class="q-my-md" />
<div class="row justify-between q-px-lg">
<span>{{$t('personal.Name')}}</span>
<span class="text-weight-bold">d張三efe</span>
</div>
<q-separator color="grey-3" class="q-my-md" />
<div class="row justify-between q-px-lg">
<span>{{$t('personal.Email')}}</span>
<span class="text-weight-bold">23432334@qq.com</span>
</div>
</div> </div>
</div> </div>
<div class="text-grey-13">{{ $t('personal.cancel') }}</div>
</div>
</div>
</div>
</div>
<q-tabs v-model="showActive" active-class="text-primary" class="text-blue-grey-4 q-mt-lg">
<q-tab name="profile" :label="$t('personal.profile')" />
<q-tab name="security" :label="$t('personal.security')" />
</q-tabs>
</div>
<div class="rounded-borders bg-white light-shadow q-mt-lg q-pb-lg" v-if="showActive == 'profile'">
<div class="q-pa-lg text-h6" style="border-bottom:1px solid #f1f1f1;">{{ $t('personal.ProfileDetails') }}</div>
<div class="q-px-lg">
<div class="q-mt-lg row items-center">
<div class="col-5 f12 text-grey-500">{{ $t('personal.TravelAgency') }}</div>
<div class="col text-subtitle2">{{ customerInfo.customerName??$t('台灣雄獅旅行社') }}</div>
</div>
</div>
<div class="q-px-lg">
<div class="q-mt-lg row items-center">
<div class="col-5 f12 text-grey-500">{{ $t('personal.post') }}</div>
<div class="col text-subtitle2">{{ customerInfo.contact??userInfo.name }}</div>
</div>
</div>
<div class="q-px-lg">
<div class="q-mt-lg row items-center">
<div class="col-5 f12 text-grey-500">{{ $t('personal.Email') }}</div>
<div class="col text-subtitle2">
{{ userInfo.account }}
<br v-if="$q.platform.is.mobile"/>
<span class="bg-green-11 text-green-14 rounded-borders q-px-sm" :class="{'q-ml-md':$q.platform.is.desktop}">{{$t('verified')}}</span>
</div> </div>
</div>
</div>
<div class="q-px-lg">
<div class="q-mt-lg row items-center">
<div class="col-5 f12 text-grey-500">{{ $t('personal.numbering') }}</div>
<div class="col text-subtitle2 text-weight-bolder">{{ $t('1603 0275') }}</div>
</div>
</div>
<div class="q-px-lg">
<div class="q-mt-lg row items-center">
<div class="col-5 f12 text-grey-500">{{ $t('personal.LINEID') }}</div>
<div class="col text-subtitle2 text-weight-bolder">{{ customerInfo.lineId ?? $t('091 004 022 9') }}</div>
</div>
</div>
<div class="q-px-lg">
<div class="q-mt-lg row items-center">
<div class="col-5 f12 text-grey-500">{{ $t('personal.Phone') }}</div>
<div class="col text-subtitle2 text-weight-bolder">{{ customerInfo.contactNumber ?? $t('+886 910040229') }}</div>
</div>
</div> </div>
<div class="q-px-lg">
<div class="q-mt-lg row items-center">
<div class="col-5 f12 text-grey-500">{{ $t('personal.addreess') }}</div>
<div class="col text-subtitle2">{{ customerInfo.address ?? $t('新北市三重區三和路四段101-1號17樓') }}</div>
</div>
</div>
<div class="q-mt-lg q-mx-lg rounded-borders bg-orange-1 row" :class="{'q-pa-lg':$q.platform.is.desktop,'q-pa-sm items-baseline':$q.platform.is.mobile}" style="border: 1px dashed; border-color: var(--q-warning)">
<svg-icon :size="$q.platform.is.desktop?36:20" icon="Code/Warning-1-circle.svg" color="warning"></svg-icon>
<div class="q-ml-md col">
<div class="text-grey-900 text-subtitle1 text-weight-bold">{{ $t('personal.accountUpdate') }}</div>
<div class="text-grey-700 f12">{{ $t('personal.accountUpdateTips') }}</div>
</div>
</div>
</div>
<div v-else class="rounded-borders bg-white light-shadow q-mt-lg q-pb-lg">
<div class="q-pa-lg text-h6" style="border-bottom:1px solid #f1f1f1;">{{ $t('personal.resetPw') }}</div>
<div class="q-px-lg">
<div class="q-mt-lg row items-center">
<div class="col-5 f12 text-grey-500 desktop-only">{{ $t('personal.cpw') }}：</div>
<div class="col-5 text-subtitle2" :class="{'col-5':$q.platform.is.desktop,'col-12':$q.platform.is.mobile}">
<q-input v-model="password.current" standout dense type="password" ref="oldPassWordRef" :rules="[(val: any) => !!val || $t('personal.cpwTips')]" />
</div>
</div>
</div>
<div class="q-px-lg">
<div class="q-mt-lg row items-center">
<div class="col-5 f12 text-grey-500 desktop-only">{{ $t('personal.npw') }}：</div>
<div class="col-5 text-subtitle2" :class="{'col-5':$q.platform.is.desktop,'col-12':$q.platform.is.mobile}">
<q-input v-model="password.new" ref="passwordRef" :rules="password.passRules" standout dense :hint="$t('newpwd.passTips')" type="password" />
<div class="row q-mt-sm">
<div class="col rounded-borders" style="height: 8px" :class="{ 'bg-positive': level.indexOf('low') != -1, 'bg-grey-3': level.indexOf('low') == -1 }"></div>
<div class="col q-mx-md rounded-borders" style="height: 8px" :class="{ 'bg-positive': level.indexOf('middle') != -1, 'bg-grey-3': level.indexOf('middle') == -1 }"></div>
<div class="col rounded-borders" style="height: 8px" :class="{ 'bg-positive': level.indexOf('high') != -1, 'bg-grey-3': level.indexOf('high') == -1 }"></div>
</div>
</div>
</div>
</div>
<div class="q-px-lg">
<div class="q-mt-lg row items-center">
<div class="col-5 f12 text-grey-500 desktop-only">{{ $t('personal.rpw') }}：</div>
<div class="col-5 text-subtitle2" :class="{'col-5':$q.platform.is.desktop,'col-12':$q.platform.is.mobile}">
<q-input v-model="password.repeat" standout dense type="password" ref="repeatPassWordRef" :rules="[(val: any) => val == password.new || $t('newpwd.repeatPassvalidate')]" />
</div>
</div>
</div>
<div class="q-px-lg">
<div class="q-mt-lg row items-center">
<div class="col-5 f12 text-grey-500 desktop-only"></div>
<div class="col-5 text-subtitle2" :class="{'col-5':$q.platform.is.desktop,'col-12 text-center':$q.platform.is.mobile}">
<q-btn :loading="subLoading" color="primary" :label="$t('personal.subBtn')" class="q-px-xl" unelevated @click="submitSetPasswordHandler" />
</div>
</div>
</div>
</div>
</div> </div>
<q-inner-loading :showing="loading" :label="$t('loading')" label-class="text-grey-6 f12" />
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
import useMetaModule from '../../module/meta/metaModule' import useMetaModule from '../../module/meta/metaModule'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import svgIcon from '../../components/global/svg-icon.vue' import svgIcon from '../../components/global/svg-icon.vue'
import { defineComponent, inject, provide, reactive, ref, toRefs } from 'vue' import { defineComponent, inject, provide, reactive, ref, toRefs } from 'vue'
import { DirtionmaryHelper } from '../../config/dictionary' import { DirtionmaryHelper } from '../../config/dictionary'
export default defineComponent({ import { dispatchAction, getStoreGetter } from 'src/store/utils'
components: { svgIcon }, import { UserGetter } from 'src/store/modules/user/getters'
setup() { import UserService from 'src/api/user'
const data = reactive({ import { ApiResult } from 'src/@types/enumHelper'
loading: true, import message from 'src/utils/message'
importFileUrl: 'https://mallApi.oytour.com/api/File/UploadTencent?MallBaseId=1' import { UserActionsType } from 'src/store/modules/user/actions'
}) import { UploadFileInfo } from 'naive-ui'
let { setTitle } = useMetaModule() export default defineComponent({
const { locale, t } = useI18n() components: { svgIcon },
const pageTitle = inject(DirtionmaryHelper.PAGE_TITLE_KEY) as any setup() {
pageTitle.value = t('personal.pageTitle') const data = reactive({
setTitle(pageTitle.value) loading: false,
importFileUrl: 'https://mallApi.oytour.com/api/File/UploadTencent?MallBaseId=1',
const methods= { userInfo: getStoreGetter<UserGetter>('user', 'getUser'),
uploadHandleChange() { showActive: 'profile',
data.loading = true level: [] as string[],
}, passwordRef: null as any,
handleFinish(options: { file: UploadFileInfo; event?: ProgressEvent }) { oldPassWordRef: null as any,
data.loading = false repeatPassWordRef: null as any,
}, subLoading: false,
customerInfo: {} as any,
password: {
current: '',
new: '',
repeat: '',
passRules: [(val: string | undefined) => (val && val.length >= 8) || t('newpwd.notEmptyPass'), (val: string | undefined) => (val && val.length <= 16) || t('newpwd.maxLengthPass'), (val: string) => methods.checkPassword(val) || '']
} }
return { })
...toRefs(data), let { setTitle } = useMetaModule()
...methods const { t } = useI18n()
} const pageTitle = inject(DirtionmaryHelper.PAGE_TITLE_KEY) as any
} pageTitle.value = t('personal.pageTitle')
}) setTitle(pageTitle.value)
</script>
const methods = {
<style> uploadHandleChange() {
.personal-HeadImg:hover .personal-HeadImg-edit{ data.loading = true
display: block; },
color: #019DF5; handleFinish(options: { file: UploadFileInfo; event?: ProgressEvent }) {
} data.loading = false
.personal-HeadImg-edit{ let r = (options.event?.target as XMLHttpRequest).response
box-shadow: 0 0.5rem 1.5rem 0.5rem rgb(0 0 0 / 8%); if (r) {
border-radius: 50%; let res = JSON.parse(r)
top: -10px; if (res.resultCode == ApiResult.SUCCESS && res.data) {
right: -10px; methods.modifyPhotoHandler(res.data)
display: none; } else {
color: #A7A5B7; message.errorMsg(t('upload.failed'))
data.loading = false
}
} else {
message.errorMsg(t('upload.failed'))
data.loading = false
}
},
modifyPhotoHandler(url: string) {
UserService.setUserPhoto(url)
.then(r => {
if (r.data.resultCode == ApiResult.SUCCESS) {
message.successMsg(t('photoSuccess'))
data.userInfo.photo=url
try {
dispatchAction<UserActionsType>('user', 'setUserDetail', data.userInfo)
} catch (error) {}
setTimeout(() => {
document.location.reload()
}, 1000)
} else {
message.errorMsg(r.data.message)
}
data.loading = false
})
.catch(e => {
data.loading = false
message.errorMsg(e.message)
})
},
checkPassword(value: string): boolean {
data.level = []
if (value && value.length >= 8 && value.length <= 16) {
// 校验是数字
const regex1 = /^\d+$/
// 校验字母
const regex2 = /^[A-Za-z]+$/
// 校验符号
const regex3 = /^[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、]+$/
if (regex1.test(value)) {
data.level.push('low')
} else if (regex2.test(value)) {
data.level.push('low')
} else if (regex3.test(value)) {
data.level.push('low')
} else if (/^[A-Za-z\d]+$/.test(value)) {
data.level.push('low')
data.level.push('middle')
} else if (/^[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、\d]+$/.test(value)) {
data.level.push('low')
data.level.push('middle')
} else if (/^[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、A-Za-z]+$/.test(value)) {
data.level.push('low')
data.level.push('middle')
} else if (/^[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、A-Za-z\d]+$/.test(value)) {
data.level.push('low')
data.level.push('middle')
data.level.push('high')
}
return true
}
return false
},
submitSetPasswordHandler() {
if (data.subLoading) return
data.passwordRef.validate()
data.oldPassWordRef.validate()
data.repeatPassWordRef.validate()
if (!data.passwordRef.hasError && !data.oldPassWordRef.hasError && !data.oldPassWordRef.hasError) {
data.subLoading = true
UserService.setNewPassword(data.password.current, data.password.new)
.then(r => {
data.subLoading = false
if (r.data.resultCode == ApiResult.SUCCESS) {
message.successMsg(t('personal.updateSuccess'))
setTimeout(() => {
dispatchAction<UserActionsType>('user', 'setUserSignout', null)
window.location.reload()
}, 2000)
} else {
message.errorMsg(r.data.message)
}
data.subLoading = false
})
.catch(e => {
data.subLoading = false
message.errorMsg(e.message)
})
}
},
getCustomerInfo() {
UserService.getCustomerInfo()
.then(r => {
data.loading = false
if (r.data.resultCode == ApiResult.SUCCESS) {
data.customerInfo=r.data.data
} else {
message.errorMsg(r.data.message)
}
data.loading = false
})
.catch(e => {
data.loading = false
message.errorMsg(e.message)
})
},
} }
.personal-data{
border: 1px dashed #eeeeee; methods.getCustomerInfo()
return {
...toRefs(data),
...methods
} }
</style> }
})
\ No newline at end of file </script>
<style>
.personal-HeadImg:hover .personal-HeadImg-edit {
display: block;
color: #019df5;
}
.personal-HeadImg-edit {
box-shadow: 0 0.5rem 1.5rem 0.5rem rgb(0 0 0 / 8%);
border-radius: 50%;
top: -10px;
right: -10px;
display: none;
color: #a7a5b7;
}
.personal-data {
border: 1px dashed #eeeeee;
}
.personal-hover {
cursor: pointer;
}
.personal-hover:hover {
color: var(--q-primary);
}
.personal-hover:hover .svg-icon-nav g [fill] {
fill: var(--q-primary) !important;
}
</style>
src/store/modules/user/actions.ts
View file @ c31ece66
...@@ -41,7 +41,16 @@ const userActions = { ...@@ -41,7 +41,16 @@ const userActions = {
setStoreState('user', 'token', { }) setStoreState('user', 'token', { })
//清除菜单权限 //清除菜单权限
setStoreState('user', 'menuList', []) setStoreState('user', 'menuList', [])
},
/**
* 更新用戶資料
* @param param0
* @param params
*/
setUserDetail({},params:any){
setStoreState('user', 'userDetail', params)
}, },
async userLogin({},params: { account: string; password: string, platform:number }):Promise<[boolean, string]> { async userLogin({},params: { account: string; password: string, platform:number }):Promise<[boolean, string]> {
...@@ -67,7 +76,7 @@ const userActions = { ...@@ -67,7 +76,7 @@ const userActions = {
const expireTime = 72 * 60 * 60 * 1000 + new Date().getTime() const expireTime = 72 * 60 * 60 * 1000 + new Date().getTime()
setStoreState('user', 'token', { ...token, expireTime }) setStoreState('user', 'token', { ...token, expireTime })
flag[0]=true; flag[0]=true;
}else { }else {
flag[1]=loginResult.data.message flag[1]=loginResult.data.message
flag[0] = false flag[0] = false
...@@ -76,9 +85,9 @@ const userActions = { ...@@ -76,9 +85,9 @@ const userActions = {
flag[1]=error as string flag[1]=error as string
flag[0] = false flag[0] = false
} }
return flag; return flag;
} }
} }
......
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