chore: 新增电子签名

src/api/my.js

@@ -134,3 +134,26 @@ export function changeFileStatus(userId, recordId, status) {
 export function getOpenId(data) {
   return httpRequest.post('/usercenter/v1/wechat/get-openid', data)
 }
+
+/**
+ * 签名
+ */
+export function createSign(data) {
+  return httpRequest.post('/sign/v1/sign/create-by-template', data)
+}
+
+/**
+ * 获取签名文档
+ */
+export function getSignDocument(params) {
+  return httpRequest.get('/sign/v1/sign/document', params)
+}
+
+/**
+ * 申请面试
+ */
+export function changeSubmissionStage(data) {
+  return httpRequest.post(`/enrollment/v1.0/application-materials/submit/${projectId}`, data, {
+    headers: { 'Content-Type': 'application/json' }
+  })
+}

src/pages/my/admission/components/collapse.vue

+<template>
+  <div class="collapse" :class="classes">
+    <div class="collapse-hd">
+      <div class="collapse-icon" @click="toggle">
+        <i class="el-icon-remove-outline" v-if="isActive"></i>
+        <i class="el-icon-circle-plus-outline" v-else></i>
+      </div>
+      <div class="collapse-title">
+        <slot name="title">{{ title }}</slot>
+      </div>
+    </div>
+    <div class="collapse-bd" v-show="isActive">
+      <slot>{{ content }}</slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    value: { type: Boolean, default: false },
+    title: { type: String },
+    content: { type: String }
+  },
+  data() {
+    return {
+      isActive: false
+    }
+  },
+  computed: {
+    classes() {
+      return { 'is-active': this.isActive }
+    }
+  },
+  methods: {
+    toggle() {
+      this.isActive = !this.isActive
+      this.$emit('input', this.isActive)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.collapse {
+  margin-top: 10px;
+}
+.collapse-hd {
+  display: flex;
+  font-size: 14px;
+  line-height: 20px;
+  color: #222;
+}
+
+.collapse-icon {
+  margin-right: 6px;
+  font-size: 14px;
+  cursor: pointer;
+  color: #999;
+}
+.collapse-bd {
+  padding-left: 20px;
+  color: #666;
+  p {
+    color: #666 !important;
+  }
+}
+</style>

src/pages/my/admission/index.vue

@@ -10,11 +10,16 @@
       @prev="handlePrev"
       @next="handleNext"
       @uploaded="getApplication"
+      v-if="detail"
     >
       <template #aside-append>
         <div class="aside-payment"><a href="https://accounts.ezijing.com/payment" target="_blank">查看缴费记录</a></div>
         <div class="aside-logout" @click="$store.dispatch('logout')"><span>退出登录</span></div>
       </template>
+      <!-- 入学协议 -->
+      <template #content v-if="currentActive === 'admission_xy' && detail.material.basic_info.admission_agreement_type">
+        <app-xy :data="detail" />
+      </template>
     </vue-form>
     <el-dialog
       title="办理入学资料提交成功"
@@ -39,9 +44,10 @@
 import AppLayout from '../layout.vue'
 import getMenu from './form'
 import * as api from '@/api/my'
+import AppXy from './xy'
 
 export default {
-  components: { AppLayout },
+  components: { AppLayout, AppXy },
   data() {
     const menus = getMenu(this)
     return {

src/pages/my/admission/xy.vue

+<template>
+  <div class="xy">
+    <p>学员应仔细阅读《入学协议》以及课程介绍，如对入学协议或课程有异议，请第一时间与课程顾问咨询确认。</p>
+    <div class="footer">
+      <el-button type="primary" :disabled="disabled" size="medium" @click="handlePrimary">{{ buttonText }}</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import AppCollapse from './components/collapse'
+import * as api from '@/api/my'
+
+export default {
+  props: { data: { type: Object, required: true } },
+  components: { AppCollapse },
+  data() {
+    return {
+      sign: {},
+      documentUrl: '',
+      timer: null
+    }
+  },
+  computed: {
+    basicInfo() {
+      return this.data.material.basic_info || {}
+    },
+    buttonText() {
+      return this.documentUrl ? '签署完成' : '立即签署'
+    },
+    disabled() {
+      return !!this.documentUrl
+    }
+  },
+  methods: {
+    createSign() {
+      api
+        .createSign({
+          name: this.basicInfo.real_name_cn,
+          id_number: this.basicInfo.id_number,
+          email: this.basicInfo.email,
+          type: this.basicInfo.admission_agreement_type
+        })
+        .then(response => {
+          const { code, data } = response
+          if (code === 1) {
+            this.sign = data
+            data.flowid && this.getSignDocument(data.flowid)
+          } else {
+            this.$message.error('处理签名失败')
+          }
+        })
+    },
+    getSignDocument(flowid) {
+      return api.getSignDocument({ flowid, type: this.basicInfo.admission_agreement_type }).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.$message({ type: 'success', message: '入学协议已签署完成' })
+            this.clearTimer()
+          }
+        })
+      }, 5000)
+    },
+    clearTimer() {
+      this.timer && clearInterval(this.timer)
+    },
+    handlePrimary() {
+      if (!this.sign.shortUrl) {
+        this.$message({ type: 'error', message: '缺少签名地址，请联系管理员' })
+        return
+      }
+      this.setTimer()
+      this.newWindowPreview(this.sign.shortUrl)
+    },
+    // 新窗口预览
+    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>
+.xy {
+  h1 {
+    font-size: 18px;
+    font-weight: 600;
+    color: #222;
+    line-height: 25px;
+    text-align: center;
+    padding: 0 0 10px;
+  }
+  p {
+    margin-top: 10px;
+    font-size: 14px;
+    line-height: 20px;
+    color: #222;
+  }
+  .content {
+    height: 248px;
+    overflow-x: hidden;
+    overflow-y: auto;
+    & > p {
+      padding-left: 20px;
+    }
+  }
+  .footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: 20px;
+    padding-top: 20px;
+    border-top: 1px solid #f1f1f1;
+  }
+}
+</style>