签名修改

src/app.vue

 <template>
   <div style="height: 100%; width: 100%">
     <router-view></router-view>
+    <el-dialog
+      :title="$t('components.learnSysLayout.navigation.dialogTitle')"
+      :width="dialogWidth"
+      :visible.sync="dialogVisible"
+      :center="true"
+      :append-to-body="true"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      @closed="handleClose"
+    >
+      <div class="sign">
+        <p>
+          {{ $t('components.learnSysLayout.navigation.dialogMessage1')
+          }}<a :href="$t('components.learnSysLayout.navigation.dialogMessageHref')" target="_blank">{{
+            $t('components.learnSysLayout.navigation.dialogMessage2')
+          }}</a
+          >{{ $t('components.learnSysLayout.navigation.dialogMessage3') }}
+        </p>
+        <el-checkbox v-model="checked">{{ $t('components.learnSysLayout.navigation.dialogCheckbox') }}</el-checkbox>
+      </div>
+      <template #footer>
+        <el-button type="primary" :disabled="!checked" @click="handlePrimary">{{
+          $t('components.learnSysLayout.navigation.dialogButton')
+        }}</el-button>
+      </template>
+    </el-dialog>
   </div>
 </template>
+
+<script>
+import cAction from '@/action'
+
+export default {
+  data() {
+    const UA = navigator.userAgent
+    return {
+      isMobile: /iphone/i.test(UA) || (/android/i.test(UA) && /mobile/i.test(UA)),
+      dialogVisible: false,
+      checked: false,
+      sign: {},
+      documentUrl: '',
+      timer: null
+    }
+  },
+  computed: {
+    dialogWidth() {
+      return this.isMobile ? '90%' : '460px'
+    }
+  },
+  methods: {
+    createSign() {
+      cAction.Other.createSign().then(response => {
+        const { code, data } = response
+        if (code === 1) {
+          this.sign = data
+          this.getSignDocument(data.flowid).then(() => {
+            if (!this.documentUrl) {
+              this.dialogVisible = true
+            }
+          })
+        } else {
+          this.$message.error('处理签名失败')
+        }
+      })
+    },
+    getSignDocument(flowid) {
+      return cAction.Other.getSignDocument({ flowid }).then(response => {
+        const { code, data } = response
+        if (code === 1) {
+          this.documentUrl = data.url
+          this.$store.commit('updateDocumentUrl', data.url)
+        }
+        return response
+      })
+    },
+    setTimer() {
+      this.timer = setInterval(() => {
+        this.getSignDocument(this.sign.flowid).then(response => {
+          if (response.code === 1) {
+            this.clearTimer()
+            this.dialogVisible = false
+          } else {
+            this.dialogVisible = true
+          }
+        })
+      }, 5000)
+    },
+    clearTimer() {
+      this.timer && clearInterval(this.timer)
+    },
+    handlePrimary() {
+      this.setTimer()
+      this.newWindowPreview(this.sign.shortUrl)
+    },
+    handleClose() {
+      if (!this.documentUrl) {
+        window.location.href = webConf.others.loginUrl
+      }
+    },
+    // 新窗口预览
+    newWindowPreview(url) {
+      const a = document.createElement('a')
+      a.href = url
+      a.target = '_blank'
+      document.body.appendChild(a)
+      a.click()
+      a.remove()
+    }
+  },
+  beforeMount() {
+    this.createSign()
+  },
+  destroyed() {
+    this.clearTimer()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.sign {
+  p {
+    text-indent: 2em;
+    line-height: 24px;
+  }
+}
+</style>

src/components/learnSysLayout/navigation.vue

@@ -15,32 +15,6 @@
       </div>
       <language-switch />
     </div>
-    <el-dialog
-      :title="$t('components.learnSysLayout.navigation.dialogTitle')"
-      width="460px"
-      :visible.sync="dialogVisible"
-      :center="true"
-      :append-to-body="true"
-      :close-on-click-modal="false"
-      :close-on-press-escape="false"
-      @closed="handleClose"
-    >
-      <div class="sign">
-        <p>
-          {{ $t('components.learnSysLayout.navigation.dialogMessage1')
-          }}<a :href="$t('components.learnSysLayout.navigation.dialogMessageHref')" target="_blank">{{
-            $t('components.learnSysLayout.navigation.dialogMessage2')
-          }}</a
-          >{{ $t('components.learnSysLayout.navigation.dialogMessage3') }}
-        </p>
-        <el-checkbox v-model="checked">{{ $t('components.learnSysLayout.navigation.dialogCheckbox') }}</el-checkbox>
-      </div>
-      <template #footer>
-        <el-button type="primary" :disabled="!checked" @click="handlePrimary">{{
-          $t('components.learnSysLayout.navigation.dialogButton')
-        }}</el-button>
-      </template>
-    </el-dialog>
   </div>
 </template>
 
@@ -52,12 +26,12 @@ export default {
   components: { LanguageSwitch },
   data() {
     return {
-      num: this.$store.getters.myMsg,
-      dialogVisible: false,
-      checked: false,
-      sign: {},
-      documentUrl: '',
-      timer: null
+      num: this.$store.getters.myMsg
+    }
+  },
+  computed: {
+    documentUrl() {
+      return this.$store.state.documentUrl
     }
   },
   mounted() {
@@ -81,70 +55,7 @@ export default {
         this.status = true
       }
       this.$root.$emit('updateStatus', this.status)
-    },
-    createSign() {
-      cAction.Other.createSign().then(response => {
-        const { code, data } = response
-        if (code === 1) {
-          this.sign = data
-          this.getSignDocument(data.flowid).then(() => {
-            if (!this.documentUrl) {
-              this.dialogVisible = true
-            }
-          })
-        } else {
-          this.$message.error('处理签名失败')
-        }
-      })
-    },
-    getSignDocument(flowid) {
-      return cAction.Other.getSignDocument({ flowid }).then(response => {
-        const { code, data } = response
-        if (code === 1) {
-          this.documentUrl = data.url
-        }
-        return response
-      })
-    },
-    setTimer() {
-      this.timer = setInterval(() => {
-        this.getSignDocument(this.sign.flowid).then(response => {
-          if (response.code === 1) {
-            this.clearTimer()
-            this.dialogVisible = false
-          } else {
-            this.dialogVisible = true
-          }
-        })
-      }, 5000)
-    },
-    clearTimer() {
-      this.timer && clearInterval(this.timer)
-    },
-    handlePrimary() {
-      this.setTimer()
-      this.newWindowPreview(this.sign.shortUrl)
-    },
-    handleClose() {
-      if (!this.documentUrl) {
-        window.location.href = webConf.others.loginUrl
-      }
-    },
-    // 新窗口预览
-    newWindowPreview(url) {
-      const a = document.createElement('a')
-      a.href = url
-      a.target = '_blank'
-      document.body.appendChild(a)
-      a.click()
-      a.remove()
     }
-  },
-  beforeMount() {
-    this.createSign()
-  },
-  destroyed() {
-    this.clearTimer()
   }
 }
 </script>
@@ -214,12 +125,6 @@ export default {
     }
   }
 }
-.sign {
-  p {
-    text-indent: 2em;
-    line-height: 24px;
-  }
-}
 .nav-a {
   a {
     margin: 0 10px;

src/store/index.js

@@ -4,7 +4,8 @@ Vue.use(Vuex)
 
 export default new Vuex.Store({
   state: {
-    myMsg: 0
+    myMsg: 0,
+    documentUrl: ''
   },
   getters: {
     myMsg(state) {
@@ -14,6 +15,9 @@ export default new Vuex.Store({
   mutations: {
     myMsg(state, sum) {
       state.myMsg = sum
+    },
+    updateDocumentUrl(state, url) {
+      state.documentUrl = url
     }
   },
   actions: {}