完成密碼找回頁面

package.json

@@ -27,23 +27,24 @@
     "quasar-tiptap-branch": "^1.8.1",
     "vue": "^3.0.0",
     "vue-i18n": "^9.0.0",
-    "vue-inline-svg": "^2.1.1",
+    "vue-inline-svg": "next",
     "vue-router": "^4.0.0",
     "vuex": "^4.0.1",
     "vuex-persistedstate": "^4.1.0"
   },
   "devDependencies": {
+    "@intlify/vite-plugin-vue-i18n": "^3.3.1",
+    "@quasar/app-vite": "^1.0.0",
+    "@types/node": "^12.20.21",
     "@typescript-eslint/eslint-plugin": "^5.10.0",
     "@typescript-eslint/parser": "^5.10.0",
+    "autoprefixer": "^10.4.2",
     "eslint": "^8.10.0",
-    "eslint-plugin-vue": "^9.0.0",
     "eslint-config-prettier": "^8.1.0",
+    "eslint-plugin-vue": "^9.0.0",
     "prettier": "^2.5.1",
-    "@types/node": "^12.20.21",
-    "@intlify/vite-plugin-vue-i18n": "^3.3.1",
-    "@quasar/app-vite": "^1.0.0",
-    "autoprefixer": "^10.4.2",
-    "typescript": "^4.5.4"
+    "typescript": "^4.5.4",
+    "vite-plugin-svg-icons": "^2.0.1"
   },
   "browserslist": [
     "last 10 Chrome versions",

src/api/axios.ts

 import Axios, { AxiosResponse, AxiosRequestConfig, AxiosError } from 'axios'
 import router from '../router/index'
+import message from '../utils/message'
+import { i18n } from '../boot/i18n'
 // import { message } from 'ant-design-vue'
-import Store from '../store'
-import { Notify } from 'quasar'
+// import Store from '../store'
+// import { Notify } from 'quasar'
+let {t} =i18n.global
+
 
 /**
  * get status code
@@ -109,6 +113,7 @@ service.interceptors.request.use(
  * @returns {}
  */
 service.interceptors.response.use(
+	
 	/** 请求有响应 */
 	async (response: AxiosResponse) => {
 		if (response.status === 200) {
@@ -131,19 +136,20 @@ service.interceptors.response.use(
 		}
 		// timeout
 		if (__emsg.indexOf('timeout') >= 0) {
-			__emsg = 'timeout'
+			__emsg = t('timeout')
 		}
 
 		//TODO: 结合接口实际情况进行权限判断
 		if (error?.response?.status === 401) {
-			if (router.currentRoute.value.path !== '/entry/login') {
-				Notify.create({
-					message: '登录凭证已过期，请重新登录',
-					color: 'warning',
-					textColor: 'dark',
-					icon: 'announcement'
-				})
-				router.push('/entry/login')
+			if (router.currentRoute.value.path !== '/auth/login') {
+				// Notify.create({
+				// 	message: '登录凭证已过期，请重新登录',
+				// 	color: 'warning',
+				// 	textColor: 'dark',
+				// 	icon: 'announcement'
+				// })
+				message.errorMsg(t('loginout'));
+				router.push('/auth/login')
 			}
 			return Promise.reject(new Error('401'))
 		}

src/api/user.ts

@@ -176,6 +176,10 @@ class UserService {
 		console.log(params)
 		return request("b2b_post_Login",params);
 	}
+
+	static sendVerify(data:any):Promise<HttpResponse>{
+		return request("b2b_post_send_verify",data);
+	}
 }
 
 export default UserService

src/components/global/svg-icon.vue

 <template>
-  <span>
-    <inline-svg :class="[`${color}`]" :src="svgIcon" :width="svgSize" :height="svgSize" :fill="svgColor" :stroke="svgColor" :title="tips" :aria-label="tips"></inline-svg>
-  </span>
+    <inline-svg :class="svgColor" :src="svgIcon" :width="svgSize" :height="svgSize" :title="tips" :aria-label="tips"></inline-svg>
 </template>
 
-<script>
+<script lang="ts">
 import { computed } from 'vue'
-import inlineSvg from 'vue-inline-svg'
+import InlineSvg from 'vue-inline-svg';
 export default {
   props: {
     /**
@@ -30,7 +28,7 @@ export default {
     tips: String
   },
   components: {
-    inlineSvg
+    InlineSvg
   },
   setup(props) {
     const svgSize = computed(() => {
@@ -38,23 +36,33 @@ export default {
     })
 
     const svgColor = computed(() => {
-      let tempColor = props.color ?? 'var(--q-dark)'
-      return tempColor.indexOf('#') != 0 ? `var(--q-${tempColor})` : tempColor
+      let tempColor = props.color ?? 'primary'
+      return `svg-icon-${tempColor}`
     })
 
     const svgIcon = computed(() => {
       return new URL(`../../assets/svg/${props.icon}`,import.meta.url).href
     })
-
+    console.log(svgIcon.value)
     return { svgSize, svgColor,svgIcon }
   }
 }
 </script>
 
 <style>
-.svg-icon.svg-icon-primary g [fill] {
+svg g [fill]{
+  fill: #3699FF !important;
+}
+/* .svg-icon g path[fill] {
+  fill: inherit !important;
+} */
+.svg-icon-primary g [fill] {
   transition: fill 0.3s ease;
-  fill: var(--q-color-primary) !important;
+  fill: #3699FF !important;
+}
+.svg-icon-success g [fill] {
+  transition: fill 0.3s ease;
+  fill: #50cd89 !important;
 }
 .svg-icon.svg-icon-secondary g [fill] {
   transition: fill 0.3s ease;

src/css/font.sass

@@ -39,7 +39,7 @@
 .Poppins
     font-family: 'Poppins'
 body
-    font-family: 'Roboto', 'Arial','微軟正黑體修正', '微軟正黑體', "Microsoft JhengHei", 'sans-serif','pf'
+    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji,MicrosoftJhengHeiBoldFix,"\5FAE\8EDF\6B63\9ED1\9AD4",Microsoft JhengHei
     color: var(--q-dark)
 .no-underline
     text-decoration: none !important

src/i18n/zh-TW/index.ts

@@ -6,6 +6,8 @@ export default {
 	success: '執行成功',
 	appsuffix: "JVS同業預定系統",
 	lanuage:"系統語言",
+	loginout:'登錄信息失效，請重新登錄',
+	timeout:'當前網絡環境異常，請求超時',
 	login:{
 		notaccess:"沒有同業會員帳戶？",
 		registlink:"申請註冊",
@@ -27,6 +29,10 @@ export default {
 		notaccess:"已經是會員了？",
 		registlink:"登錄",
 		account:"帳戶（EMail）",
-		submit:"提交"
+		submit:"提交",
+		cancel:"取消",
+		goback:"返回",
+		mailResult:"郵件已發送到您的郵箱，請根據郵件提示修改密碼",
+		resultBtn:"我已知曉"
 	}
 }

src/pages/auth/forget.vue

@@ -3,13 +3,13 @@
    
     <div class="col q-pa-xl fit row  justify-center height">
       <div style="width:450px;" class="column  justify-between  content-between">
-        <div  :class="{'row':$q.platform.is.desktop,'column':$q.platform.is.mobile}">
-          <div class="col" :class="{'text-center q-mb-md':$q.platform.is.mobile}">
-            <q-btn round flat>
-              <svg-icon icon="Navigation/Arrow-left.svg" :size="24"></svg-icon>
+        <div  class="row items-center">
+          <div class="col">
+            <q-btn round flat size="md" @click="goback">
+              <svg-icon icon="Navigation/Arrow-left.svg" :size="24" tips="$t('forget.goback')"></svg-icon>
             </q-btn>
           </div>
-          <div class="text-grey-6 text-weight-bold col"  :class="{'text-right':$q.platform.is.desktop,'text-center':$q.platform.is.mobile}">
+          <div class="text-grey-6 text-weight-bold text-right" >
             <span>{{$t("forget.notaccess")}}</span>
             <router-link :to="{ path: '/auth/regist' }" class="text-primary pfb text-subtitle">{{$t("forget.registlink")}}</router-link>
           </div>
@@ -56,28 +56,46 @@
     </div>
     <div class="col right-bg full-height mobile-hide"></div>
   </div>
+  <q-dialog no-esc-dismiss persistent v-model="successModel">
+      <q-card :class="{'q-pa-xl':$q.platform.is.desktop,'q-pa-lg':$q.platform.is.mobile}">
+        <q-card-section>
+          <div class="text-center q-mb-md">
+            <svg-icon icon="Code/Done-circle.svg" color="success" :size="80"></svg-icon>
+          </div>
+          <div>{{$t('forget.mailResult')}}</div>
+          <div class="text-center q-mt-xl">
+            <q-btn color="primary" @click="goback" unelevated :label="$t('forget.resultBtn')" />
+          </div>
+        </q-card-section>
+      </q-card>
+  </q-dialog>
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive } from 'vue'
+import { defineComponent, reactive, ref, toRefs } from 'vue'
 import useMetaModule from '../../module/meta/metaModule'
 import { useI18n } from 'vue-i18n'
 import { getLangs } from "../../utils/tools";
-import { SitLang } from '@/@types';
+import { SitLang } from '../../@types';
 import svgIcon from '../../components/global/svg-icon.vue';
+import UserService from '../../api/user';
+import message from '../../utils/message';
+import { ApiResult } from '../../@types/enumHelper';
+
 export default defineComponent({
   components: { svgIcon },
   setup() {
     let { setTitle } = useMetaModule()
-   
-    const dtNow = new Date().getFullYear()
+    
+    const accountRef = ref(null)
     const {locale,t } = useI18n();
-    setTitle(t("login.pageTitle"))
+    setTitle(t("forget.pageTitle"))
     const data=reactive({
       currentLang: {} as SitLang,
       langs:[] as SitLang[],
       account:'',
-      loading:false
+      loading:false,
+      successModel:false
     })
     data.langs=getLangs()
     if(data.langs && data.langs.length>0){
@@ -86,11 +104,33 @@ export default defineComponent({
 
     let methods = {
       sendVerifyCode(){
-
+        const accountRefVal=accountRef as any
+        console.log(accountRef.value)
+        
+        accountRefVal.value.validate()
+        if(!accountRefVal.value.hasError){
+          data.loading=true
+          //hasError
+          UserService.sendVerify({account:data.account,platform:0}).then(r=>{
+            console.log(r)
+            data.loading=false
+            if(r.data.resultCode==ApiResult.SUCCESS){
+              data.successModel=true
+            }else{
+              message.errorMsg(r.data.message)
+            }
+          }).catch(e=>{
+            data.loading=false
+            message.errorMsg(e.message)
+          })
+        }
+      },
+      goback(){
+        window.history.go(-1)
       }
     }
 
-    return { ...data, ...methods }
+    return { ...toRefs(data), ...methods,accountRef }
   }
 })
 </script>