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

src/App.vue

@@ -87,7 +87,7 @@ export default defineComponent({
 
 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
-    color: var(--q-dark)
+    color: #181c32
 .n-base-selection .n-base-selection-label,
 .n-base-selection .n-base-selection-tags
     background: #f1f1f1 !important
@@ -272,5 +272,33 @@ body
     max-height: unset !important
     width: 100vw !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>

src/api/user.ts

@@ -184,6 +184,33 @@ class UserService {
 	static resetPassword(certificate:string,password:string):Promise<HttpResponse>{
 		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

src/components/global/svg-icon.vue

@@ -88,9 +88,9 @@ svg g [fill]{
   transition: fill 0.3s ease;
   fill: #ccc !important;
 }
-.svg-icon.svg-icon-warning g [fill] {
+.svg-icon-warning g [fill] {
   transition: fill 0.3s ease;
-  fill: var(--q-color-warning) !important;
+  fill: orange !important;
 }
 .svg-icon.svg-icon-negative g [fill] {
   transition: fill 0.3s ease;
@@ -169,7 +169,7 @@ svg g [fill]{
 }
 .hover-g-p.svg-icon g [fill] {
   transition: fill 0.3s ease;
-  fill: #666 !important; 
+  fill: #666 !important;
 }
 .hover-g-p:hover {
   color: var(--q-primary) !important;

src/components/layout/userInfo.vue

@@ -3,13 +3,13 @@
     <div class="q-px-sm">
       <div class="q-pa-sm row">
         <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>
         </q-avatar>
         <div class="col column">
           <div class="col row items-center">
             <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 class="f12 text-grey-6 f12">{{ user?.account }}</div>
         </div>
@@ -92,10 +92,10 @@ export default defineComponent({
     if(data.langs && data.langs.length>0){
       data.currentLang = data.langs.find(x=> x.langLocale==locale.value) ?? {};
     }
-    
+
     // 切换语言
     const methods = {
-        goUrl(url){
+        goUrl(url:string){
           $router.push({ path:url})
         },
         getLanguage (val:SitLang) {

src/i18n/zh-TW/index.ts

@@ -13,6 +13,7 @@ export default {
   query: "檢索",
   noneData: "沒有找到相關的數據",
   loading: "正在加載數據",
+  verified: '已認證',
   personal:{
     pageTitle: "個人檔案",
     trading: '累積交易額',
@@ -22,9 +23,23 @@ export default {
     TravelAgency: '旅行社名稱',
     numbering: '統一編號(統編)',
     LINEID: 'LINE ID',
-    Phone: '電話',
+    Phone: '聯絡電話',
+    addreess: '辦公地址',
     Name: '姓名',
-    Email: '電郵'
+    Email: '電郵',
+    post:'負責人',
+    profile: '概述',
+    security: '帳戶安全',
+    accountUpdate:'帳戶信息修改提示',
+    accountUpdateTips:'如果您需要修改以上預留的帳戶資料，請聯繫您與JVS對接業務人員進行修改',
+    resetPw:'修改密碼',
+    cpw:'當前密碼',
+    npw:'新密碼',
+    rpw:'確認新密碼',
+    subBtn:'確認修改',
+    cpwTips:'請輸入當前密碼',
+    updateSuccess:'密碼修改成功，請重新登入',
+    photoSuccess:'頭像設置成功'
   },
   upload:{
     "success":"上傳成功",

src/layouts/MainLayout.vue

@@ -22,7 +22,7 @@
             </q-popup-proxy>
           </div>
           <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>
             <q-popup-proxy :offset="[0,15]" class="no-shadow">
              <user-info :user="userInfo"></user-info>

src/pages/personal/personal.vue

 <template>
-    <div class="fix-height-subpage column no-wrap items-center q-pa-md">
-        <div class="bg-white q-pa-lg borounded-borders" 
-        :style="{'width':$q.platform.is.desktop?'840px':'100%'}">
-            <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" :class="{'justify-center':$q.platform.is.mobile,'items-center':$q.platform.is.mobile}"
-              :style="{'width':$q.platform.is.mobile?'100%':''}">
-                <q-avatar :size="$q.platform.is.desktop?'150px':'100px'" rounded class="personal-HeadImg reactive bg-blue-2 cursor-pointer q-mr-lg">
-                  <img src="../../assets/images/8.png" />
-                  <!-- <span class="text-primary">小</span> -->
-                  <n-upload class="col" 
-                  :loading="loading"
-                  :action="importFileUrl" 
-                  @finish="handleFinish" 
-                  @change="uploadHandleChange" file-list-style="display:none">
-                    <q-icon class="absolute personal-HeadImg-edit bg-white q-pa-xs" name="edit" size="xs"></q-icon>
-                  </n-upload>
-                </q-avatar>
+  <div class=" column items-center" :class="{'q-pa-xl':$q.platform.is.desktop,'q-pa-sm':$q.platform.is.mobile}">
+    <div class="col full-width" style="max-width: 1000px">
+      <div class="rounded-borders bg-white light-shadow q-pa-lg" style="padding-bottom: 0 !important">
+        <div :class="{'row':$q.platform.is.desktop,'column items-center':$q.platform.is.mobile}">
+          <n-upload @change="uploadHandleChange()" style="width: unset" accept="image/*" :action="importFileUrl" @finish="handleFinish" file-list-style="display:none">
+            <q-avatar size="160px" rounded class="bg-blue-2 cursor-pointer q-mr-md">
+              <q-img :src="userInfo.photo" v-if="userInfo?.photo" mode="cover" />
+              <span class="text-primary text-h2" v-else>{{ userInfo?.name.substring(0, 1) }}</span>
+            </q-avatar>
+          </n-upload>
+          <div class="colunm" :class="{'q-ml-sm':$q.platform.is.desktop,'q-mt-md':$q.platform.is.mobile}">
+            <div class="" :class="{'row items-center':$q.platform.is.desktop,'text-center':$q.platform.is.mobile}">
+              <span style="font-size: 20px" class="text-weight-bold q-mr-md personal-hover">{{ userInfo.name }}</span>
+              <span class="bg-green-11 text-green-14 rounded-borders q-px-sm">{{$t('verified')}}</span>
+            </div>
+            <div class="row q-mt-sm text-blue-grey-4" :class="{'justify-center':$q.platform.is.mobile}">
+              <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 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 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,}">{{$t('unit.jpc')}}</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.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 class="row justify-between col q-mt-lg din">
+              <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 }">{{ $t('unit.jpc') }}</span>
+                    <span class="text-weight-bold" :class="{ fz20: $q.platform.is.desktop, fz18: $q.platform.is.mobile }">0.00</span>
                   </div>
-                  <div class="column q-mt-lg">
-                    <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="row justify-between q-px-lg">
-                      <span>{{$t('personal.TravelAgency')}}</span>
-                      <span class="text-weight-bold">和平旅行社</span>
-                    </div>
-                    <q-separator color="grey-3" class="q-my-md" />
-                    <div class="row justify-between q-px-lg">
-                      <span>{{$t('personal.numbering')}}</span>
-                      <span class="text-weight-bold">ERF</span>
-                    </div>
-                    <q-separator color="grey-3" class="q-my-md" />
-                    <div class="row justify-between q-px-lg">
-                      <span>{{$t('personal.LINEID')}}</span>
-                      <span class="text-weight-bold">786</span>
-                    </div>
-                    <q-separator color="grey-3" class="q-my-md" />
-                    <div class="row justify-between q-px-lg">
-                      <span>{{$t('personal.Phone')}}</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 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 }">0.00</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 }">0.00</span>
                   </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 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 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>
+    <q-inner-loading :showing="loading" :label="$t('loading')" label-class="text-grey-6 f12" />
+  </div>
 </template>
-  
-  <script lang="ts">
-  import useMetaModule from '../../module/meta/metaModule'
-  import { useI18n } from 'vue-i18n'
-  import svgIcon from '../../components/global/svg-icon.vue'
-  import { defineComponent, inject, provide, reactive, ref, toRefs } from 'vue'
-  import { DirtionmaryHelper } from '../../config/dictionary'
-  export default defineComponent({
-    components: { svgIcon },
-    setup() {
-      const data = reactive({
-        loading: true,
-        importFileUrl: 'https://mallApi.oytour.com/api/File/UploadTencent?MallBaseId=1'
-      })
-      let { setTitle } = useMetaModule()
-      const { locale, t } = useI18n()
-      const pageTitle = inject(DirtionmaryHelper.PAGE_TITLE_KEY) as any
-      pageTitle.value = t('personal.pageTitle')
-      setTitle(pageTitle.value)
-  
-      const methods= {
-        uploadHandleChange() {
-          data.loading = true
-        },
-        handleFinish(options: { file: UploadFileInfo; event?: ProgressEvent }) {
-          data.loading = false
-        },
+
+<script lang="ts">
+import useMetaModule from '../../module/meta/metaModule'
+import { useI18n } from 'vue-i18n'
+import svgIcon from '../../components/global/svg-icon.vue'
+import { defineComponent, inject, provide, reactive, ref, toRefs } from 'vue'
+import { DirtionmaryHelper } from '../../config/dictionary'
+import { dispatchAction, getStoreGetter } from 'src/store/utils'
+import { UserGetter } from 'src/store/modules/user/getters'
+import UserService from 'src/api/user'
+import { ApiResult } from 'src/@types/enumHelper'
+import message from 'src/utils/message'
+import { UserActionsType } from 'src/store/modules/user/actions'
+import { UploadFileInfo } from 'naive-ui'
+export default defineComponent({
+  components: { svgIcon },
+  setup() {
+    const data = reactive({
+      loading: false,
+      importFileUrl: 'https://mallApi.oytour.com/api/File/UploadTencent?MallBaseId=1',
+      userInfo: getStoreGetter<UserGetter>('user', 'getUser'),
+      showActive: 'profile',
+      level: [] as string[],
+      passwordRef: null as any,
+      oldPassWordRef: null as any,
+      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),
-        ...methods
-      }
-    }
-  })
-  </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;
+    })
+    let { setTitle } = useMetaModule()
+    const { t } = useI18n()
+    const pageTitle = inject(DirtionmaryHelper.PAGE_TITLE_KEY) as any
+    pageTitle.value = t('personal.pageTitle')
+    setTitle(pageTitle.value)
+
+    const methods = {
+      uploadHandleChange() {
+        data.loading = true
+      },
+      handleFinish(options: { file: UploadFileInfo; event?: ProgressEvent }) {
+        data.loading = false
+        let r = (options.event?.target as XMLHttpRequest).response
+        if (r) {
+          let res = JSON.parse(r)
+          if (res.resultCode == ApiResult.SUCCESS && res.data) {
+            methods.modifyPhotoHandler(res.data)
+          } else {
+            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

@@ -41,7 +41,16 @@ const userActions = {
     setStoreState('user', 'token', { })
     //清除菜单权限
     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]> {
@@ -67,7 +76,7 @@ const userActions = {
           const expireTime = 72 * 60 * 60 * 1000 + new Date().getTime()
           setStoreState('user', 'token', { ...token, expireTime })
         flag[0]=true;
-        
+
       }else {
         flag[1]=loginResult.data.message
         flag[0] = false
@@ -76,9 +85,9 @@ const userActions = {
       flag[1]=error as string
       flag[0] = false
     }
-    
+
     return flag;
-    
+
   }
 }