refactor: 重构 render/pages 目录下三个文件, 使用 Vue3 组合式 API 写法 (#113)

web/src/render/pages/ErrorPage.vue

@@ -8,29 +8,23 @@
     </div>
   </div>
 </template>
-<script>
-export default {
-  name: 'errorPage',
-  data() {
-    return {
-      imageMap: {
-        overTime: '/imgs/icons/overtime.webp'
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useStore } from 'vuex'
+
+const store = useStore()
+
+const errorImageUrl = computed(() => {
+  const errorType = store.state?.errorInfo?.errorType
+  const imageMap = {
+    overTime: '/imgs/icons/overtime.webp',
+    default: '/imgs/icons/error.webp',
   }
-    }
-  },
-  computed: {
-    errorImageUrl() {
-      return this.imageMap[this.errorType] || this.imageMap.default
-    },
-    errorType() {
-      return this.$store.state?.errorInfo?.errorType
-    },
-    errorMsg() {
-      return this.$store.state?.errorInfo?.errorMsg
-    }
-  },
-  mounted() {}
-}
+
+  return imageMap[errorType as 'overTime'] || imageMap.default
+})
+
+const errorMsg = computed(() => store.state?.errorInfo?.errorMsg)
 </script>
 <style lang="scss" scoped>
 .result-page-wrap {

web/src/render/pages/IndexPage.vue

@@ -1,19 +1,21 @@
 <template>
   <div class="index">
     <progressBar />
-    <div class="wrapper" ref="box">
+    <div class="wrapper" ref="boxRef">
       <HeaderSetter></HeaderSetter>
       <div class="content">
         <MainTitle></MainTitle>
-        <MainRenderer ref="main"></MainRenderer>
-        <submit :validate="validate" :renderData="renderData" @submit="onSubmit"></submit>
+        <MainRenderer ref="mainRef"></MainRenderer>
+        <submit :validate="validate" :renderData="renderData" @submit="handleSubmit"></submit>
         <LogoIcon />
       </div>
     </div>
   </div>
 </template>
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useStore } from 'vuex'
 
-<script>
 import HeaderSetter from '../components/HeaderSetter.vue'
 import MainTitle from '../components/MainTitle.vue'
 import submit from '../components/SubmitSetter.vue'
@@ -28,115 +30,101 @@ import encrypt from '../utils/encrypt'
 
 import useCommandComponent from '../hooks/useCommandComponent'
 
-export default {
-  name: 'indexPage',
-  props: {
-    questionInfo: {
-      type: Object,
-      default: () => ({})
-    },
-    isMobile: {
-      type: Boolean,
-      default: false
-    }
-  },
-  components: {
-    HeaderSetter,
-    MainTitle,
-    submit,
-    MainRenderer,
-    progressBar,
-    LogoIcon
-  },
-  computed: {
-    formModel() {
-      return this.$store.getters.formModel
-    },
-    confirmAgain() {
-      return this.$store.state.submitConf.confirmAgain
-    },
-    surveyPath() {
-      return this.$store.state.surveyPath
-    },
-    renderData() {
-      return this.$store.getters.renderData
-    },
-    encryptInfo() {
-      return this.$store.state.encryptInfo
-    }
-  },
-  created() {
-    this.alert = useCommandComponent(AlertDialog)
-    this.confirm = useCommandComponent(ConfirmDialog)
-  },
-  methods: {
-    validate(cbk) {
+interface Props {
+  questionInfo?: any,
+  isMobile?: boolean,
+}
+
+withDefaults(defineProps<Props>(), {
+  questionInfo: {},
+  isMobile: false,
+})
+
+const mainRef = ref<any>()
+const boxRef = ref<HTMLElement>()
+
+const alert = useCommandComponent(AlertDialog)
+const confirm = useCommandComponent(ConfirmDialog)
+
+const store = useStore()
+
+const renderData = computed(() => store.getters.renderData)
+
+const validate = (cbk: (v: boolean) => void) => {
   const index = 0
-      this.$refs.main.$refs.formGroup[index].validate(cbk)
-    },
-    onSubmit() {
-      const { again_text, is_again } = this.confirmAgain
-      if (is_again) {
-        this.confirm({
-          title: again_text,
-          onConfirm: async () => {
-            try {
-              await this.submitForm()
-            } catch (error) {
-              console.error(error)
-            } finally {
-              this.confirm.close()
-            }
-          }
-        })
-      } else {
-        this.submitForm()
-      }
-    },
-    getSubmitData() {
-      const result = {
-        surveyPath: this.surveyPath,
-        data: JSON.stringify(this.formModel),
-        difTime: Date.now() - this.$store.state.enterTime,
+  mainRef.value.$refs.formGroup[index].validate(cbk)
+}
+
+const normalizationRequestBody = () => {
+  const enterTime = store.state.enterTime
+  const encryptInfo = store.state.encryptInfo
+  const formModel = store.getters.formModel
+  const surveyPath = store.state.surveyPath
+
+  const result: any = {
+    surveyPath,
+    data: JSON.stringify(formModel),
+    difTime: Date.now() - enterTime,
     clientTime: Date.now()
   }
-      if (this.encryptInfo?.encryptType) {
-        result.encryptType = this.encryptInfo?.encryptType
-        result.data = encrypt[result.encryptType]({
+
+  if (encryptInfo?.encryptType) {
+    result.encryptType = encryptInfo?.encryptType
+    result.data = encrypt[result.encryptType as 'rsa']({
       data: result.data,
-          secretKey: this.encryptInfo?.data?.secretKey
+      secretKey: encryptInfo?.data?.secretKey
     })
-        if (this.encryptInfo?.data?.sessionId) {
-          result.sessionId = this.encryptInfo.data.sessionId
+    if (encryptInfo?.data?.sessionId) {
+      result.sessionId = encryptInfo.data.sessionId
     }
   } else {
     result.data = JSON.stringify(result.data)
   }
 
   return result
-    },
-    async submitForm() {
+}
+
+const submitSurver = async () => {
   try {
-        const submitData = this.getSubmitData()
-        const res = await submitForm(submitData)
+    const params = normalizationRequestBody()
+    console.log(params)
+    const res: any = await submitForm(params)
     if (res.code === 200) {
-          this.$store.commit('setRouter', 'successPage')
+      store.commit('setRouter', 'successPage')
     } else {
-          this.alert({
+      alert({
         title: res.errmsg || '提交失败'
       })
     }
   } catch (error) {
     console.log(error)
   }
+}
+
+const handleSubmit = () => {
+  const confirmAgain = store.state.submitConf.confirmAgain
+  const { again_text, is_again } = confirmAgain
+
+  if (is_again) {
+    confirm({
+      title: again_text,
+      onConfirm: async () => {
+        try {
+          submitSurver()
+        } catch(error) {
+          console.log(error)
+        } finally {
+          confirm.close()
         }
       }
+    })
+  } else {
+    submitSurver()
+  }
 }
 </script>
-
 <style scoped lang="scss">
 .index {
-  // padding-bottom: 0.8rem;
   min-height: 100%;
   .wrapper {
     min-height: 100%;

web/src/render/pages/SuccessPage.vue

@@ -9,20 +9,17 @@
     </div>
   </div>
 </template>
-<script>
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useStore } from 'vuex'
 import LogoIcon from '../components/LogoIcon.vue'
-export default {
-  name: 'resultPage',
-  components: { LogoIcon },
-  computed: {
-    submitConf() {
-      return this.$store?.state?.submitConf || {}
-    },
-    successMsg() {
-      return this.submitConf?.msgContent?.msg_200 || '提交成功'
-    }
-  }
-}
+
+const store = useStore()
+
+const successMsg = computed(() => {
+  const msgContent = store.state?.submitConf?.msgContent || {}
+  return msgContent?.msg_200 || '提交成功'
+})
 </script>
 <style lang="scss" scoped>
 @import '@/render/styles/variable.scss';