no message

src/components/layout/userInfo.vue

@@ -18,7 +18,7 @@
     <q-separator color="grey-3" class="q-my-sm" />
     <q-list class="q-px-md text-subtitle2">
       <q-item clickable v-ripple class="rounded-borders lang-demo">
-        <q-item-section>{{ $t('userMenu.mypro') }}</q-item-section>
+        <q-item-section @click="goUrl('/personal')">{{ $t('userMenu.mypro') }}</q-item-section>
       </q-item>
       <q-item clickable v-ripple class="rounded-borders lang-demo">
         <q-item-section>
@@ -66,6 +66,7 @@
 </template>
 
 <script lang="ts">
+  import { useRouter } from 'vue-router';
 import { defineComponent, ref, reactive, toRefs, provide } from 'vue'
 import { getLangs } from "../../utils/tools";
 import { SitLang } from '../../@types';
@@ -81,6 +82,7 @@ export default defineComponent({
     }
   },
   setup(props) {
+    const $router = useRouter();
     const {locale,t } = useI18n();
     const data=reactive({
         currentLang: {} as SitLang,
@@ -93,6 +95,9 @@ export default defineComponent({
     
     // 切换语言
     const methods = {
+        goUrl(url){
+          $router.push({ path:url})
+        },
         getLanguage (val:SitLang) {
             locale.value = val.langLocale??''
             data.currentLang=val

src/i18n/zh-TW/index.ts

@@ -13,6 +13,19 @@ export default {
   query: "檢索",
   noneData: "沒有找到相關的數據",
   loading: "正在加載數據",
+  personal:{
+    pageTitle: "個人檔案",
+    trading: '累積交易額',
+    order: '訂單數量',
+    cancel: '取消率',
+    ProfileDetails: '資料詳情',
+    TravelAgency: '旅行社名稱',
+    numbering: '統一編號(統編)',
+    LINEID: 'LINE ID',
+    Phone: '電話',
+    Name: '姓名',
+    Email: '電郵'
+  },
   upload:{
     "success":"上傳成功",
     "failed":"上傳失敗",

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':'840px'}">
-            <div>
+        <div class="bg-white q-pa-lg borounded-borders" 
+        :style="{'width':$q.platform.is.desktop?'840px':'100%'}">
+            <div class="row items-start q-py-lg">
                 <q-avatar size="160px" rounded class="personal-HeadImg reactive bg-blue-2 cursor-pointer q-mr-md">
                     <img src="../../assets/images/8.png" />
-                    <!-- <span class="text-primary text-30">小</span> -->
-                    <q-icon class="absolute HeadImg-edit bg-white q-pa-xs" name="edit" size="xs"></q-icon>
+                    <!-- <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 q-ml-lg" style="flex-grow: 1;">
+                  <div class="row justify-between">
+                    <div class="column rounded-borders q-px-lg q-py-sm personal-data" style="flex: 1;">
+                      <div class="row items-center">
+                        <q-icon class="text-positive" name="arrow_upward"></q-icon>
+                        <span class="text-weight-bold text-h6 q-ml-sm">¥23.0</span>
+                      </div>
+                      <div class="text-grey-13">{{$t('personal.trading')}}</div>
+                    </div>
+                    <div class="column rounded-borders q-px-lg q-py-sm q-ml-lg q-mr-lg personal-data" style="flex: 1;">
+                      <div class="row items-center">
+                        <q-icon class="text-red-14" name="arrow_downward"></q-icon>
+                        <span class="text-weight-bold text-h6 q-ml-sm">¥23.0</span>
+                      </div>
+                      <div class="text-grey-13">{{$t('personal.order')}}</div>
+                    </div>
+                    <div class="column rounded-borders q-px-lg q-py-sm personal-data" style="flex: 1;">
+                      <div class="row items-center">
+                        <q-icon class="text-positive" name="arrow_upward"></q-icon>
+                        <span class="text-weight-bold text-h6 q-ml-sm">¥23.0</span>
+                      </div>
+                      <div class="text-grey-13">{{$t('personal.cancel')}}</div>
+                    </div>
+                  </div>
+                  <div class="column q-mt-lg">
+                    <div class="q-mb-lg text-h6 text-primary text-weight-bold">{{$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>
+                
             </div>
         </div>
     </div>
-  </template>
+</template>
   
   <script lang="ts">
   import useMetaModule from '../../module/meta/metaModule'
@@ -21,29 +86,23 @@
   export default defineComponent({
     components: { svgIcon },
     setup() {
-      const data = reactive({})
+      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('hotel.pageTitle')
+      pageTitle.value = t('personal.pageTitle')
       setTitle(pageTitle.value)
-      const search = reactive({
-        HotelChooseArray: [],
-        StartDate: '',
-        EndDate: '',
-        Country: '651',
-        Province: 0,
-        City: 0,
-        OutBranchId: -1,
-        Star: 0,
-        PriceLevel: 0,
-        Supplier: 0,
-        MaxPrice:'',
-        MinPrice:''
-      })
   
       const methods= {
-        
+        uploadHandleChange() {
+          data.loading = true
+        },
+        handleFinish(options: { file: UploadFileInfo; event?: ProgressEvent }) {
+          data.loading = false
+        },
       }
       return {
         ...toRefs(data),
@@ -54,11 +113,11 @@
   </script>
   
   <style>
-    .personal-HeadImg:hover .HeadImg-edit{
+    .personal-HeadImg:hover .personal-HeadImg-edit{
        display: block; 
        color: #019DF5;
     }
-    .HeadImg-edit{
+    .personal-HeadImg-edit{
         box-shadow: 0 0.5rem 1.5rem 0.5rem rgb(0 0 0 / 8%);
         border-radius: 50%;
         top: -10px;
@@ -66,5 +125,8 @@
         display: none;
         color: #A7A5B7;
     }
+    .personal-data{
+      border: 1px dashed #eeeeee;
+    }
   </style>
   
\ No newline at end of file