办事大厅v2

babel.config.js

 module.exports = {
-  presets: ['@vue/cli-plugin-babel/preset'],
-  plugins: [
-    [
-      'import',
-      {
-        libraryName: 'vant',
-        libraryDirectory: 'es',
-        style: true
-      }
-    ]
-  ]
+  presets: ['@vue/cli-plugin-babel/preset']
 }

cert/dev.ezijing.com.key

 -----BEGIN RSA PRIVATE KEY-----
-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
+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
 -----END RSA PRIVATE KEY-----

cert/dev.ezijing.com.pem

 -----BEGIN CERTIFICATE-----
-MIIFiDCCBHCgAwIBAgIQAepAKb4wAxmrtof7BwPQSDANBgkqhkiG9w0BAQsFADBu
+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
-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
+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
-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
+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
-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
-6M22MuuP1pLviPZEE4ZlPXvltUV/Qq47LvZkTg==
+LmNydDAJBgNVHRMEAjAAMIIBBAYKKwYBBAHWeQIEAgSB9QSB8gDwAHYA9lyUL9F3
+MCIUVBgIMJRWjuNNExkzv98MLyALzE7xZOMAAAF1qpa6jQAABAMARzBFAiAwHOcp
+Ua1H0WK4OZUHiQ1rndqnYxPHhP9XWunwpRMoagIhAOB2MPSW9M4qj6Yih7eQkydl
+lgawpoBZzRzhisU+TN67AHYAXNxDkv7mq0VEsV6a1FbmEDf71fpH3KFzlLJe5vbH
+DsoAAAF1qpa63gAABAMARzBFAiEA92ZeW0PgyWW3j+3wypLS0O/wI63C+x0WTvMZ
+Vngp6AMCIBoThjaKif+XY11YbaV89ndqs1nDlzbEfBrFftoB9fchMA0GCSqGSIb3
+DQEBCwUAA4IBAQA2geo9wQAd+vx+lwAafVRxCBQyBiS0qT413ewYpZYDnSkLX0l1
+5kRdxDGWQhPzOio0ckj/jOtOlbbSsiovBBVTyYPB8WfkNjMd0psMNx2e6Wy/WKkQ
+X3DqEOB4XGg0RwpebiAmz6lWxyFwIAbCrwCntkkaIF4LnIvczn6pvPFBtK2nXJJC
+HL0Igbxo+xJLt3Hql7TcwkFDXz/LIB8AwhhkkhhwW45r3Eyjw8eOyzvflDPwSNH+
+ByadQ+AH4H4vYYVo0ILNIPCdaokLQ+u4FttB9VQ+iGmpJ56Yg2muxWh8Qckca+vH
+40RbC5aK1RSy2RIRpC5fwvq2JuV/CksP5G5Q
 -----END CERTIFICATE-----
 -----BEGIN CERTIFICATE-----
 MIIEqjCCA5KgAwIBAgIQAnmsRYvBskWr+YBTzSybsTANBgkqhkiG9w0BAQsFADBh

package.json

@@ -9,26 +9,28 @@
     "dev-build": "vue-cli-service build --mode dev"
   },
   "dependencies": {
-    "axios": "^0.20.0",
-    "core-js": "^3.6.5",
-    "dayjs": "^1.8.34",
+    "axios": "^0.21.1",
+    "core-js": "^3.8.2",
+    "dayjs": "^1.10.1",
     "js-cookie": "^2.2.1",
+    "lodash": "^4.17.20",
     "md5": "^2.3.0",
+    "qrcode.vue": "^1.7.0",
     "qs": "^6.9.4",
-    "vant": "^2.10.3",
+    "vant": "^2.12.2",
     "vue": "^2.6.12",
     "vue-meta": "^2.4.0",
-    "vue-router": "^3.4.3",
-    "vuex": "^3.5.1"
+    "vue-router": "^3.4.9",
+    "vuex": "^3.6.0"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.5.0",
-    "@vue/cli-plugin-eslint": "~4.5.0",
-    "@vue/cli-plugin-router": "~4.5.0",
-    "@vue/cli-plugin-vuex": "~4.5.0",
-    "@vue/cli-service": "~4.5.0",
+    "@vue/cli-plugin-babel": "~4.5.9",
+    "@vue/cli-plugin-eslint": "~4.5.9",
+    "@vue/cli-plugin-router": "~4.5.9",
+    "@vue/cli-plugin-vuex": "~4.5.9",
+    "@vue/cli-service": "~4.5.9",
     "babel-eslint": "^10.1.0",
-    "babel-plugin-import": "^1.13.0",
+    "babel-plugin-import": "^1.13.3",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
     "sass": "^1.26.5",

src/api/index.js

@@ -84,3 +84,28 @@ export function getReport(params) {
 export function getStudent() {
   return httpRequest.get('/api/ehall/v2/lobby/student')
 }
+
+// 获取重修课程
+export function getRetakeCourses() {
+  return httpRequest.get('/api/ehall/v2/lobby/courses')
+}
+
+// 创建微信支付订单
+export function createWxpayOrder(identity, productId, params) {
+  return httpRequest.get(`/api/pay/v1/wechat/qr/${identity}/${productId}`, params)
+}
+
+// 创建支付宝支付订单
+export function createAlipayOrder(productId, params) {
+  return httpRequest.get(`/api/pay/v1/ali/unified-order/${productId}`, params)
+}
+
+// 获取订单
+export function getOrder(orderId) {
+  return httpRequest.get(`/api/pay/v1/order/status/${orderId}`)
+}
+
+// 支付成功回调
+export function paySuccess(id) {
+  return httpRequest.get(`/api/ehall/v2/lobby/update-status-api/${id}`)
+}

src/assets/css/base.css

@@ -93,8 +93,7 @@ body {
   font-size: 14px;
   line-height: 1.4;
   color: #333;
-  font-family: -apple-system-font, 'Helvetica Neue', 'PingFang SC',
-    'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
+  font-family: -apple-system-font, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
   background-color: #f4f4f4;
 }
 
@@ -110,22 +109,21 @@ body {
   padding-bottom: env(safe-area-inset-bottom);
   max-width: 750px;
   margin: 0 auto;
+  display: flex;
   background: rgba(255, 255, 255, 1);
   box-shadow: 0px -4px 8px 0px rgba(0, 0, 0, 0.05);
 }
 .fixed-button {
+  flex: 1;
   margin: 15px 30px;
   height: 40px;
   line-height: 40px;
   text-align: center;
   color: #fff;
-  background: linear-gradient(
-    180deg,
-    rgba(255, 155, 150, 1) 0%,
-    rgba(206, 62, 58, 1) 100%
-  );
+  background: linear-gradient(180deg, rgba(255, 155, 150, 1) 0%, rgba(206, 62, 58, 1) 100%);
   border-radius: 5px;
   cursor: pointer;
+  border: 0;
 }
 .empty {
   margin-top: 100px;
@@ -151,18 +149,26 @@ body {
 .form input.van-field__control,
 .form textarea.van-field__control {
   height: 40px;
-  padding: 0 20px;
-  border: 1px solid #999;
+  padding: 0 10px;
+  border: 1px solid #c9c9c9;
 }
 .form .van-field__label {
-  margin-bottom: 10px;
+  margin-bottom: 5px;
+  width: auto;
+  color: #000;
 }
 .form .van-field--error .van-field__control,
 .form .van-field--error .van-field__control::placeholder {
   color: #999;
   -webkit-text-fill-color: currentColor;
 }
-
+.form .van-radio + .van-radio,
+.form .van-checkbox + .van-checkbox {
+  margin-top: 10px;
+}
+.form .van-radio--horizontal {
+  margin-top: 0 !important;
+}
 .line-clamp {
   display: -webkit-box;
   -webkit-line-clamp: 2;
@@ -176,3 +182,10 @@ body {
 .van-popup--bottom {
   padding-bottom: env(safe-area-inset-bottom);
 }
+.dialog-close {
+  position: absolute;
+  top: 26px;
+  right: 20px;
+  font-size: 24px;
+  cursor: pointer;
+}

src/components/Card.vue

@@ -10,13 +10,13 @@
           </div>
         </template>
         <div class="p-item">
-          <div class="p-title">审核状态：</div>
+          <div class="p-title">审批状态：</div>
           <div class="p-content" :class="{ 'is-red': notPass }">
             {{ statusText }}
           </div>
         </div>
         <div class="p-item" v-if="data.approve_time1 || data.approve_time2">
-          <div class="p-title">审核时间：</div>
+          <div class="p-title">审批时间：</div>
           <div class="p-content">
             {{ data.approve_time1 || data.approve_time2 }}
           </div>
@@ -27,15 +27,15 @@
         </div>
       </div>
       <div class="card-aside">
-        <div class="card-status" v-if="isPass">
-          <div class="icon-seal"></div>
-        </div>
-        <div class="card-tools" v-if="!isPass">
-          <div class="card-button" @click.stop="onEdit">编辑</div>
-          <div class="card-button" @click.stop="onRemove" v-if="notPass">
-            删除
+        <slot name="button">
+          <div class="card-status" v-if="isPass">
+            <div class="icon-seal"></div>
           </div>
-        </div>
+          <div class="card-tools" v-if="!isPass">
+            <div class="card-button" @click.stop="onEdit">编辑</div>
+            <div class="card-button" @click.stop="onRemove" v-if="notPass">删除</div>
+          </div>
+        </slot>
       </div>
     </div>
   </div>
@@ -62,12 +62,12 @@ export default {
   computed: {
     statusText() {
       const map = {
-        '-1': '待审核',
-        '0': '未通过',
-        '1': '通过',
-        '2': '通过',
-        '3': '未通过',
-        '4': '通过'
+        '-1': '待审批',
+        0: '未通过',
+        1: '通过',
+        2: '通过',
+        3: '未通过',
+        4: '通过'
       }
       return map[this.data.status]
     },

src/components/Card2.vue

+<template>
+  <div class="card" @click="onClick">
+    <div class="card-title">{{ title }}</div>
+    <div class="card-main">
+      <div class="card-content">
+        <template v-for="item in fields">
+          <div class="p-item" :key="item.name">
+            <div class="p-title">{{ item.label }}：</div>
+            <div class="p-content">{{ data.form[item.name] }}</div>
+          </div>
+        </template>
+        <div class="p-item">
+          <div class="p-title">审批状态：</div>
+          <div class="p-content" :class="{ 'is-red': notPass }">
+            {{ statusText }}
+          </div>
+        </div>
+        <div class="p-item" v-if="data.approve_time1 || data.approve_time2">
+          <div class="p-title">审批时间：</div>
+          <div class="p-content">
+            {{ data.approve_time1 || data.approve_time2 }}
+          </div>
+        </div>
+        <div class="p-item" v-if="data.remark1 || data.remark2">
+          <div class="p-title">审批备注：</div>
+          <div class="p-content is-red">{{ data.remark1 || data.remark2 }}</div>
+        </div>
+      </div>
+      <div class="card-aside">
+        <slot name="button">
+          <div class="card-status" v-if="isPass">
+            <div class="icon-seal"></div>
+          </div>
+          <div class="card-tools" v-if="data.status === -1 || data.pay === 0">
+            <template v-if="data.pay === 0">
+              <div class="card-button" @click.stop="onEdit">支付</div>
+            </template>
+            <template v-if="data.status === -1">
+              <div class="card-button" @click.stop="onEdit">编辑</div>
+              <div class="card-button" @click.stop="onRemove">删除</div>
+            </template>
+          </div>
+        </slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Card',
+  props: {
+    data: Object,
+    title: { type: String },
+    fields: { type: Array, default: () => [] }
+  },
+  computed: {
+    statusText() {
+      const map = { '-1': '待审批', 0: '未通过', 1: '审批通过', 2: '审批中' }
+      return map[this.data.status]
+    },
+    // 已通过
+    isPass() {
+      return this.data.status === 1
+    },
+    // 未通过
+    notPass() {
+      return this.data.status === 0
+    }
+  },
+  methods: {
+    // 查看
+    onClick() {
+      this.$emit('view', this.data)
+    },
+    // 编辑
+    onEdit() {
+      this.$emit('edit', this.data)
+    },
+    // 删除
+    onRemove() {
+      this.$emit('remove', this.data)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.card {
+  margin: 15px 0 20px;
+  padding: 10px 20px 20px;
+  background: rgba(255, 255, 255, 1);
+  box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.06);
+}
+.is-red {
+  color: #ab2824 !important;
+}
+.card-title {
+  font-size: 15px;
+  color: #333;
+}
+.p-item {
+  margin-top: 10px;
+  display: flex;
+}
+.p-title {
+  font-size: 12px;
+  color: #999;
+  white-space: nowrap;
+}
+.p-content {
+  font-size: 12px;
+  color: #333;
+}
+.card-main {
+  display: flex;
+}
+.card-content {
+  flex: 1;
+  overflow: hidden;
+}
+.card-aside {
+  width: 60px;
+  margin-left: 20px;
+  display: flex;
+  flex-direction: column;
+}
+.card-status {
+  flex: 1;
+  .icon-seal {
+    margin-left: -10px;
+    width: 90px;
+    height: 70px;
+    background: url('~@/assets/img/icon_seal.png') no-repeat;
+    background-size: contain;
+  }
+}
+.card-tools {
+  padding: 10px 0 0 0;
+}
+.card-button {
+  margin-top: 18px;
+  width: 60px;
+  height: 25px;
+  font-size: 12px;
+  line-height: 25px;
+  text-align: center;
+  color: #999;
+  border-radius: 5px;
+  border: 1px solid rgba(153, 153, 153, 1);
+  cursor: pointer;
+
+  &:first-child {
+    margin-top: 0;
+  }
+}
+</style>

src/components/Form.vue

 <template>
-  <van-form ref="form" class="form" validate-trigger="onChange" v-bind="$attrs" v-on="$listeners">
-    <template v-for="(item, index) in fields">
-      <div class="form-item" :key="index">
+  <van-form class="form" ref="form" validate-trigger="onChange" v-bind="$attrs" v-on="$listeners">
+    <template v-for="item in currentFields">
+      <div class="form-item" :key="item.name">
+        <div class="prepend" v-if="item.prepend">{{ item.prepend }}</div>
         <!-- 时间 -->
         <template v-if="item.fieldType === 'date'">
-          <van-field
-            readonly
-            clickable
-            :border="false"
-            v-bind="item"
-            v-model="ruleForm[item.name]"
-            @click="showPicker(item)"
-          />
+          <van-field readonly :border="false" v-bind="item" v-model="ruleForm[item.name]" @click="showPicker(item)" />
         </template>
+
         <!-- 选择 -->
         <template v-else-if="item.fieldType === 'select'">
-          <van-field
-            readonly
-            clickable
-            :border="false"
-            v-bind="item"
-            v-model="ruleForm[item.name]"
-            @click="showPicker(item)"
-          />
+          <van-field readonly :border="false" v-bind="item" v-model="ruleForm[item.name]" @click="showPicker(item)" />
         </template>
+
         <!-- 上传图片 -->
         <van-field
           :border="false"
@@ -35,8 +24,37 @@
             <upload v-model="ruleForm[item.name]" :max-count="1" />
           </template>
         </van-field>
+
+        <!-- 单选框 -->
+        <template v-else-if="item.fieldType === 'radio'">
+          <van-field :border="false" v-bind="item">
+            <template #input>
+              <van-radio-group v-model="ruleForm[item.name]" v-bind="item">
+                <template v-for="item in item.values">
+                  <van-radio :name="item.value" :key="item.value">{{ item.label || item.value }}</van-radio>
+                </template>
+              </van-radio-group>
+            </template>
+          </van-field>
+        </template>
+
+        <!-- 复选框 -->
+        <template v-else-if="item.fieldType === 'checkbox'">
+          <van-field :border="false" v-bind="item">
+            <template #input>
+              <van-checkbox-group v-model="ruleForm[item.name]" v-bind="item">
+                <template v-for="item in item.values">
+                  <van-checkbox shape="square" :name="item.value" :key="item.value">
+                    {{ item.label || item.value }}
+                  </van-checkbox>
+                </template>
+              </van-checkbox-group>
+            </template>
+          </van-field>
+        </template>
+
         <!-- 文本框 -->
-        <van-field :border="false" :disabled="disabled" v-bind="item" v-model.trim="ruleForm[item.name]" v-else />
+        <van-field :border="false" v-bind="item" v-model.trim="ruleForm[item.name]" v-else />
       </div>
     </template>
     <van-popup v-model="pickerVisible" position="bottom">
@@ -68,19 +86,8 @@ export default {
   components: { Upload },
   props: {
     disabled: { type: Boolean, default: false },
-    model: {
-      type: Object,
-      default() {
-        return {}
-      }
-    },
-    fields: {
-      type: Array,
-      required: true,
-      default() {
-        return []
-      }
-    }
+    model: { type: Object, default: () => ({}) },
+    fields: { type: Array, required: true, default: () => [] }
   },
   watch: {
     model: {
@@ -105,6 +112,16 @@ export default {
       pickerActive: {}
     }
   },
+  computed: {
+    currentFields() {
+      return this.fields.filter(item => {
+        if (item.visible) {
+          return item.visible(item, this.ruleForm)
+        }
+        return true
+      })
+    }
+  },
   methods: {
     showPicker({ fieldType, name, remote }) {
       this.pickerVisible = true

src/components/FormView.vue

+<template>
+  <div class="view-box">
+    <template v-for="item in fields">
+      <div class="p-item" :key="item.name">
+        <div class="p-title">{{ item.label }}</div>
+        <div class="p-content">
+          <template v-if="item.computed">
+            <div v-html="item.computed($_.get(data, item.name), data)"></div>
+          </template>
+          <template v-else>{{ $_.get(data, item.name) }}</template>
+        </div>
+      </div>
+    </template>
+    <template v-if="data.pay !== -1">
+      <div class="p-item">
+        <div class="p-title">支付方式</div>
+        <div class="p-content">{{ payText }}</div>
+      </div>
+      <div class="p-item" v-if="data.form.payment !== '3'">
+        <div class="p-title">支付状态</div>
+        <div class="p-content">{{ payStatusText }}</div>
+      </div>
+    </template>
+    <div class="p-item">
+      <div class="p-title">审批状态</div>
+      <div class="p-content">{{ statusText }}</div>
+    </div>
+    <div class="p-item" v-if="data.approve_time1 || data.approve_time2">
+      <div class="p-title">审批时间</div>
+      <div class="p-content">{{ data.approve_time1 || data.approve_time2 }}</div>
+    </div>
+    <div class="p-item" v-if="data.remark1 || data.remark2">
+      <div class="p-title">审批备注</div>
+      <div class="p-content is-red">{{ data.remark1 || data.remark2 }}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    fields: { required: true, type: Array, default: () => [] },
+    data: { required: true, type: Object, default: () => ({}) }
+  },
+  computed: {
+    // 审批状态
+    statusText() {
+      const map = { '-1': '待审批', 0: '未通过', 1: '审批通过', 2: '审批中' }
+      return map[this.data.status]
+    },
+    // 支付方式
+    payText() {
+      const map = { 1: '支付宝支付', 2: '微信支付', 3: '银行转账' }
+      return map[this.data.form.payment]
+    },
+    // 支付状态
+    payStatusText() {
+      const map = { '-1': '无', 0: '待支付', 1: '支付成功' }
+      return map[this.data.pay]
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.view-box {
+  margin: 0 30px 30px;
+  padding: 20px;
+  box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.06);
+}
+.p-item {
+  display: flex;
+  justify-content: space-between;
+  padding: 20px 0;
+  font-size: 15px;
+  border-bottom: 1px solid #f5f5f5;
+  &:last-child {
+    border-bottom: 0;
+  }
+}
+.p-title {
+  padding-right: 20px;
+  color: #424242;
+  white-space: nowrap;
+}
+.p-content {
+  align-items: flex-end;
+  color: #a3a3a3;
+  text-align: right;
+}
+</style>

src/components/Layout.vue

@@ -9,18 +9,10 @@
             <span></span>
           </div>
           <ul class="menu-list">
-            <li @click="toPage({ name: 'index' })">首页</li>
-            <li
-              v-for="item in menus"
-              :key="item.id"
-              @click="
-                toPage({
-                  name: 'list',
-                  query: { channel: item.form_name, channel_id: item.id }
-                })
-              "
-            >{{ item.affair_name }}</li>
-            <li @click="toPage({ name: 'reportIndex' })">成绩单</li>
+            <li @click="$router.push('/')">首页</li>
+            <li v-for="item in affairTypes" :key="item.id" @click="toPage(item)">
+              {{ item.affair_name }}
+            </li>
             <li @click="$router.back()">返回上一页</li>
           </ul>
         </div>
@@ -52,12 +44,18 @@ export default {
     toggleMenu() {
       this.menuVisible = !this.menuVisible
     },
-    toPage(route) {
-      this.menuVisible = false
-      this.$router.push({
-        name: route.name,
-        query: Object.assign({}, this.$route.query, route.query)
-      })
+    toPage(data) {
+      const routeMap = {
+        retake: 'retakeList', // 重修
+        pareport: 'reportPaperList', // 纸质成绩单
+        elreport: 'reportElList', // 电子成绩单
+        suspend: 'studyPauseList', // 休学
+        return: 'studyContinueList', // 复学
+        job_certification: 'certSchoolList', // Sofia在读证明
+        learn_certification: 'certStudyList' // 紫荆在读证明
+      }
+      const routeName = routeMap[data.form_name] || 'list'
+      this.$router.push({ name: routeName, query: { channel: data.form_name, channel_id: data.id } })
     },
     getList() {
       if (!this.affairTypes.length) {
@@ -132,8 +130,8 @@ export default {
   background: #fff;
   box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.2);
   li {
-    height: 60px;
-    line-height: 60px;
+    height: 44px;
+    line-height: 44px;
     color: #333;
     text-align: center;
     border-top: 1px solid #f5f5f5;

src/components/Pay.vue

+<template>
+  <div class="pay">
+    <!-- 微信 -->
+    <div class="qr-pay" v-if="payment === '2'">
+      <qrcode-vue :value="qrcodeValue" size="260"></qrcode-vue>
+      <p class="tips">微信扫一扫支付</p>
+    </div>
+    <!-- 支付宝 -->
+    <div class="qr-pay" v-else-if="payment === '1'">
+      <qrcode-vue :value="qrcodeValue" size="260"></qrcode-vue>
+      <p class="tips">支付宝扫一扫支付</p>
+    </div>
+    <!-- 银行转账 -->
+    <div class="bank-pay" v-else>
+      <p>银行账户名称：清控紫荆（北京）教育科技股份有限公司</p>
+      <p>银行帐号：694485289</p>
+      <p>开户行：中国民生银行股份有限公司北京魏公村支行</p>
+      <div class="is-center">
+        <van-button type="primary" round @click="$emit('success')">我已支付成功，已告知教务老师</van-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as api from '../api'
+import QrcodeVue from 'qrcode.vue'
+
+export default {
+  props: {
+    payment: { type: String }, // 支付方式
+    productId: { type: String, required: true }, // 商品ID
+    num: { type: [Number, String], default: 1 } // 购买数量
+  },
+  components: { QrcodeVue },
+  data() {
+    return {
+      order: {}, // 创建订单返回的数据
+      rawOrder: {}, // 获取订单返回的数据
+      timer: null
+    }
+  },
+  computed: {
+    qrcodeValue() {
+      return this.order.url
+    }
+  },
+  methods: {
+    // 创建微信订单
+    createWxPayOrder(productId, num = 1) {
+      return api.createWxpayOrder('ezijing', productId, { num }).then(response => {
+        this.order = response
+        return response
+      })
+    },
+    // 创建支付宝订单
+    createAliPayOrder(productId, num = 1) {
+      return api.createAlipayOrder(productId, { type: 2, num }).then(response => {
+        this.order = response
+        return response
+      })
+    },
+    getOrder() {
+      return api.getOrder(this.order.order_no).then(response => {
+        const { order } = response
+        this.rawOrder = order
+        return order
+      })
+    },
+    setTimer() {
+      this.timer = setInterval(() => {
+        this.getOrder().then(response => {
+          // 支付成功
+          if (response.status === 1) {
+            this.$emit('success')
+            this.clearTimer()
+          }
+        })
+      }, 5000)
+    },
+    clearTimer() {
+      this.timer && clearInterval(this.timer)
+    }
+  },
+  mounted() {
+    if (this.payment === '2') {
+      // 微信支付
+      this.createWxPayOrder(this.productId, this.num).then(this.setTimer)
+    } else if (this.payment === '1') {
+      // 支付宝支付
+      this.createAliPayOrder(this.productId, this.num).then(this.setTimer)
+    }
+  },
+  destroyed() {
+    this.clearTimer()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.pay {
+  padding: 30px;
+}
+.qr-pay {
+  text-align: center;
+}
+.tips {
+  margin-top: 10px;
+  color: #999;
+  font-size: 14px;
+}
+.bank-pay {
+  line-height: 30px;
+  p {
+    margin: 0;
+  }
+  .van-button {
+    margin-top: 20px;
+  }
+}
+.is-center {
+  text-align: center;
+}
+</style>

src/main.js

@@ -3,51 +3,18 @@ import App from './App.vue'
 import router from './router'
 import store from '@/store'
 
+// vant
+import Vant from 'vant'
+import 'vant/lib/index.css'
+Vue.use(Vant)
+
 // vue-meta
 import VueMeta from 'vue-meta'
 Vue.use(VueMeta)
 
-// vant
-import { Notify } from 'vant'
-Vue.use(Notify)
-
-import { Toast } from 'vant'
-Vue.use(Toast)
-
-import { Dialog } from 'vant'
-Vue.use(Dialog)
-
-import { Popup } from 'vant'
-Vue.use(Popup)
-
-import { Form } from 'vant'
-Vue.use(Form)
-
-import { Field } from 'vant'
-Vue.use(Field)
-
-import { Button } from 'vant'
-Vue.use(Button)
-
-import { Checkbox, CheckboxGroup } from 'vant'
-Vue.use(Checkbox)
-Vue.use(CheckboxGroup)
-
-import { RadioGroup, Radio } from 'vant'
-Vue.use(Radio)
-Vue.use(RadioGroup)
-
-import { DatetimePicker } from 'vant'
-Vue.use(DatetimePicker)
-
-import { Picker } from 'vant'
-Vue.use(Picker)
-
-import { Uploader } from 'vant'
-Vue.use(Uploader)
-
-import { List } from 'vant'
-Vue.use(List)
+// lodash
+import _ from 'lodash'
+Vue.prototype.$_ = _
 
 // 公共css
 import '@/assets/css/base.css'

src/mixins/edit.js

+import VForm from '@/components/Form'
+import * as api from '../api'
+export default {
+  props: {
+    isEdit: { type: Boolean, default: false }
+  },
+  components: { VForm },
+  data() {
+    return {
+      detail: {},
+      // 学期列表
+      semesterList: [
+        { value: '春季学期（4月11日---7月10日）' },
+        { value: '夏季学期（7月11日---10月10日）' },
+        { value: '秋季学期（10月11日---1月10日）' },
+        { value: '冬季学期（1月11日---4月10日）' }
+      ],
+      payList: [
+        { label: '微信支付', value: '2' },
+        { label: '支付宝支付', value: '1' },
+        { label: '银行转账', value: '3' }
+      ],
+      submitLoading: false
+    }
+  },
+  computed: {
+    pid() {
+      return this.$route.params.id
+    },
+    channelId() {
+      return this.$route.query.channel_id
+    },
+    // 撤回
+    hasAbort() {
+      return this.isEdit && this.detail.status === -1
+    },
+    // 去支付
+    hasPay() {
+      return this.isEdit && this.detail.pay === 0
+    },
+    // 已支付
+    isPaid() {
+      return this.detail.pay === 1
+    },
+    // 禁用信息部分
+    disabledInfo() {
+      return this.hasPay || (this.isEdit && this.detail.status !== -1)
+    },
+    // 审批状态
+    statusText() {
+      const map = {
+        '-1': '待审批',
+        0: '未通过',
+        1: '审批通过',
+        2: '审批中'
+      }
+      return map[this.detail.status]
+    },
+    // 支付方式
+    payText() {
+      const map = {
+        1: '支付宝支付',
+        2: '微信支付',
+        3: '银行转账'
+      }
+      return map[this.ruleForm.payment]
+    },
+    // 支付状态
+    payStatusText() {
+      const map = {
+        '-1': '无',
+        0: '待支付',
+        1: '支付成功'
+      }
+      return map[this.detail.pay]
+    }
+  },
+  methods: {
+    // 获取学生信息
+    getStudent() {
+      api.getStudent().then(response => {
+        const data = this.$_.pick(response, ['personal_name', 'class_name', 'sofia_id'])
+        data.sofia_id = data.sofia_id || response.sno
+        Object.assign(this.ruleForm, data)
+      })
+    },
+    // 获取详情
+    getDetail() {
+      api.getAffair(this.pid).then(response => {
+        this.detail = response
+        this.ruleForm = response.form
+      })
+    },
+    // 提交
+    handleSubmit() {
+      this.$refs.form.submit()
+    },
+    // 新建
+    handleAdd(params, callback) {
+      this.submitLoading = true
+      api
+        .createAffair(params)
+        .then(response => {
+          if (response.success) {
+            callback ? callback(response) : this.handleSuccess(response)
+          } else {
+            this.handleError(response)
+          }
+        })
+        .catch(this.handleError)
+        .finally(() => {
+          this.submitLoading = false
+        })
+    },
+    // 修改
+    handleUpdate(params, callback) {
+      this.submitLoading = true
+      api
+        .updateAffair(this.pid, params)
+        .then(response => {
+          if (response.success) {
+            callback ? callback(response) : this.handleSuccess(response)
+          } else {
+            this.handleError(response)
+          }
+        })
+        .catch(this.handleError)
+        .finally(() => {
+          this.submitLoading = false
+        })
+    },
+    // 撤销的时候
+    onRemove() {
+      this.$dialog({
+        message: '你确定要撤回申请吗？撤回后，需要重新提交申请并由教务审批。',
+        confirmButtonText: '确定',
+        showCancelButton: true
+      })
+        .then(this.handleRemove)
+        .catch(() => {})
+    },
+    // 撤回申请
+    handleRemove() {
+      api.deleteAffair(this.pid).then(response => {
+        if (response.success) {
+          this.$toast({ type: 'success', duration: 600, message: '撤回成功', onClose: () => this.$router.back() })
+        }
+      })
+    },
+    // 成功
+    handleSuccess(response) {
+      this.$toast({ type: 'success', duration: 600, message: response.message, onClose: () => this.$router.back() })
+    },
+    // 失败
+    handleError(response) {
+      this.$toast(response.message)
+    }
+  }
+}

src/mixins/list.js

+import Card from '@/components/Card2.vue'
+import * as api from '@/api/index'
+
+export default {
+  components: { Card },
+  data() {
+    return {
+      list: [],
+      loading: false,
+      finished: false,
+      pagination: { offset: 0, limit: 10 }
+    }
+  },
+  watch: {
+    '$route.query': {
+      immediate: true,
+      deep: true,
+      handler(query) {
+        if (!query.channel) {
+          this.$dialog.alert({ message: '请选择事务' }).then(() => {
+            this.$router.replace({ name: 'index', query })
+          })
+        }
+      }
+    }
+  },
+  computed: {
+    channelId() {
+      return this.$route.query.channel_id
+    }
+  },
+  methods: {
+    getList() {
+      const toast = this.$toast.loading({ message: '加载中...', forbidClick: true, duration: 0 })
+      const params = Object.assign({ affair_id: this.channelId }, this.pagination)
+      api
+        .getAffairList(params)
+        .then(response => {
+          if (response.list.length) {
+            this.list = this.list.concat(response.list)
+          }
+          this.loading = false
+          this.finished = response.list.length < this.pagination.limit
+          toast.clear()
+        })
+        .catch(() => {
+          this.loading = false
+          this.finished = true
+          toast.clear()
+        })
+    },
+    onLoad() {
+      this.pagination.offset = this.pagination.offset + this.pagination.limit
+      this.getList()
+    },
+    onRemove(data) {
+      this.$dialog.confirm({ confirmButtonText: '确定', message: '确定要删除吗？' }).then(() => {
+        api.deleteAffair(data.id).then(response => {
+          if (response.success) {
+            this.list = this.list.filter(item => item.id !== data.id)
+          } else {
+            this.$toast(response.message)
+          }
+        })
+      })
+    }
+  },
+  beforeMount() {
+    this.getList()
+  }
+}

src/mixins/view.js

+import * as api from '../api'
+import FormView from '@/components/FormView'
+export default {
+  components: { FormView },
+  data() {
+    return {
+      loading: false,
+      detail: {}
+    }
+  },
+  computed: {
+    pid() {
+      return this.$route.params.id
+    },
+    channelId() {
+      return this.$route.query.channel_id
+    },
+    // 去支付
+    hasPay() {
+      return this.detail.pay === 0
+    }
+  },
+  methods: {
+    // 获取详情
+    getDetail() {
+      const toast = this.$toast.loading({ message: '加载中...', forbidClick: true, duration: 0 })
+      this.loading = true
+      api
+        .getAffair(this.pid)
+        .then(response => {
+          this.detail = response
+        })
+        .finally(() => {
+          toast.clear()
+          this.loading = false
+        })
+    }
+  },
+  beforeMount() {
+    this.getDetail()
+  }
+}

src/router/index.js

 import Vue from 'vue'
 import VueRouter from 'vue-router'
 import Layout from '@/components/Layout.vue'
+import RetateEdit from '@/views/retake/Edit.vue'
+import ReportPaperEdit from '@/views/report/PaperEdit.vue'
+import ReportElEdit from '@/views/report/ElEdit.vue'
+import StudyContinueEdit from '@/views/study/ContinueEdit.vue'
+import StudyPauseEdit from '@/views/study/PauseEdit.vue'
+import CertSchoolyEdit from '@/views/cert/SchoolEdit.vue'
+import CertStudyEdit from '@/views/cert/StudyEdit.vue'
 
 Vue.use(VueRouter)
 
@@ -38,38 +45,81 @@ const routes = [
     component: Layout,
     children: [{ name: 'view', path: '', component: () => import('@/views/View.vue') }]
   },
-  // 成绩单
+  // 重修
   {
-    path: '/report',
+    path: '/retake',
     component: Layout,
     children: [
-      {
-        name: 'reportIndex',
-        path: '',
-        component: () => import('@/views/report/Index.vue')
-      },
-      {
-        name: 'reportCreate',
-        path: 'create',
-        component: () => import('@/views/report/Create.vue')
-      }
+      { name: 'retakeList', path: '', component: () => import('@/views/retake/List.vue') },
+      { name: 'retakeAdd', path: 'add', component: RetateEdit },
+      { name: 'retakeEdit', path: 'edit/:id', component: RetateEdit, props: { isEdit: true } },
+      { name: 'retakeView', path: 'view/:id', component: () => import('@/views/retake/View.vue') }
     ]
   },
-  // 重修
+  // 纸质成绩单
   {
-    path: '/retake',
+    path: '/report_papaer',
     component: Layout,
     children: [
-      {
-        name: 'retakeIndex',
-        path: '',
-        component: () => import('@/views/retake/Index.vue')
-      },
-      {
-        name: 'retakeCreate',
-        path: 'create',
-        component: () => import('@/views/retake/Update.vue')
-      }
+      { name: 'reportPaperList', path: '', component: () => import('@/views/report/PaperList.vue') },
+      { name: 'reportPaperAdd', path: 'add', component: ReportPaperEdit },
+      { name: 'reportPaperEdit', path: 'edit/:id', component: ReportPaperEdit, props: { isEdit: true } },
+      { name: 'reportPaperView', path: 'view/:id', component: () => import('@/views/report/PaperView.vue') }
+    ]
+  },
+  // 电子成绩单
+  {
+    path: '/report_el',
+    component: Layout,
+    children: [
+      { name: 'reportElList', path: '', component: () => import('@/views/report/ElList.vue') },
+      { name: 'reportElAdd', path: 'add', component: ReportElEdit },
+      { name: 'reportElEdit', path: 'edit/:id', component: ReportElEdit, props: { isEdit: true } },
+      { name: 'reportElView', path: 'view/:id', component: () => import('@/views/report/ElView.vue') }
+    ]
+  },
+  // 休学
+  {
+    path: '/study_pause',
+    component: Layout,
+    children: [
+      { name: 'studyPauseList', path: '', component: () => import('@/views/study/PauseList.vue') },
+      { name: 'studyPauseAdd', path: 'add', component: StudyPauseEdit },
+      { name: 'studyPauseEdit', path: 'edit/:id', component: StudyPauseEdit, props: { isEdit: true } },
+      { name: 'studyPauseView', path: 'view/:id', component: () => import('@/views/study/PauseView.vue') }
+    ]
+  },
+  // 复学
+  {
+    path: '/study_continue',
+    component: Layout,
+    children: [
+      { name: 'studyContinueList', path: '', component: () => import('@/views/study/ContinueList.vue') },
+      { name: 'studyContinueAdd', path: 'add', component: StudyContinueEdit },
+      { name: 'studyContinueEdit', path: 'edit/:id', component: StudyContinueEdit, props: { isEdit: true } },
+      { name: 'studyContinueView', path: 'view/:id', component: () => import('@/views/study/ContinueView.vue') }
+    ]
+  },
+  // Sofia在读证明
+  {
+    path: '/cert_shcool',
+    component: Layout,
+    children: [
+      { name: 'certSchoolList', path: '', component: () => import('@/views/cert/SchoolList.vue') },
+      { name: 'certSchoolAdd', path: 'add', component: CertSchoolyEdit },
+      { name: 'certSchoolEdit', path: 'edit/:id', component: CertSchoolyEdit, props: { isEdit: true } },
+      { name: 'certSchoolView', path: 'view/:id', component: () => import('@/views/cert/SchoolView.vue') }
+    ]
+  },
+  // 紫荆在读证明
+  {
+    path: '/cert_study',
+    component: Layout,
+    children: [
+      { name: 'certStudyList', path: '', component: () => import('@/views/cert/StudyList.vue') },
+      { name: 'certStudyAdd', path: 'add', component: CertStudyEdit },
+      { name: 'certStudyEdit', path: 'edit/:id', component: CertStudyEdit, props: { isEdit: true } },
+      { name: 'certStudyView', path: 'view/:id', component: () => import('@/views/cert/StudyView.vue') }
     ]
   }
 ]

src/store/index.js

@@ -20,10 +20,12 @@ export default new Vuex.Store({
     async getAffairTypes({ commit }) {
       const affairTypes = await getAffairType()
       commit('updateAffairTypes', affairTypes)
+      return affairTypes
     },
     async getStudent({ commit }) {
       const student = await getStudent()
       commit('updateStudent', student)
+      return student
     }
   }
 })

src/utils/axios.js

@@ -16,9 +16,7 @@ const httpRequest = axios.create({
 // 请求拦截
 httpRequest.interceptors.request.use(
   function(config) {
-    if (
-      config.headers['Content-Type'] === 'application/x-www-form-urlencoded'
-    ) {
+    if (config.headers['Content-Type'] === 'application/x-www-form-urlencoded') {
       config.data = qs.stringify(config.data)
     }
     return config

src/views/Index.vue

@@ -3,7 +3,7 @@
     <h2 class="choose-title">请选择事务</h2>
     <div class="choose-list">
       <van-radio-group v-model="radio">
-        <div class="choose-item" v-for="item in chooseList" :key="item.value">
+        <div class="choose-item" v-for="item in affairTypes" :key="item.value">
           <van-radio :name="item.id">{{ item.affair_name }}</van-radio>
         </div>
       </van-radio-group>
@@ -49,18 +49,21 @@ export default {
         this.$toast('请选择事务')
         return
       }
-      // 成绩单
-      if (this.radio === 'report') {
-        this.$router.push({ name: 'reportIndex' })
-        return
+      const routeMap = {
+        retake: 'retakeList', // 重修
+        pareport: 'reportPaperList', // 纸质成绩单
+        elreport: 'reportElList', // 电子成绩单
+        suspend: 'studyPauseList', // 休学
+        return: 'studyContinueList', // 复学
+        job_certification: 'certSchoolList', // Sofia在读证明
+        learn_certification: 'certStudyList' // 紫荆在读证明
       }
-      this.$router.push({
-        name: 'list',
-        query: Object.assign(this.$route.query, {
-          channel: this.currentItem.form_name,
-          channel_id: this.radio
-        })
+      const routeName = routeMap[this.currentItem.form_name] || 'list'
+      const query = Object.assign(this.$route.query, {
+        channel: this.currentItem.form_name,
+        channel_id: this.radio
       })
+      this.$router.push({ name: routeName, query })
     },
     getList() {
       if (this.affairTypes.length) {
@@ -89,6 +92,6 @@ export default {
   margin-top: 46px;
 }
 .choose-item {
-  margin-bottom: 50px;
+  margin-bottom: 30px;
 }
 </style>

src/views/List.vue

@@ -6,7 +6,7 @@
     <div class="empty" v-else>{{ page.emptyText }}</div>
     <div class="fixed-box">
       <div class="fixed-inner">
-        <div class="fixed-button" @click="toCreatePage">{{ page.buttonText }}</div>
+        <div class="fixed-button" @click="handleAdd">{{ page.buttonText }}</div>
       </div>
     </div>
   </div>
@@ -90,7 +90,7 @@ export default {
       this.pagination.offset = this.pagination.offset + this.pagination.limit
       this.getList()
     },
-    toCreatePage() {
+    handleAdd() {
       this.$router.push({ name: 'create', query: this.$route.query })
     },
     onRemove(data) {

src/views/Login.vue

@@ -151,7 +151,7 @@ export default {
 .logo {
   width: 136px;
   height: 44px;
-  background: url('~@/assets/img/logo.png') no-repeat;
+  background: url('https://zws-imgs-pub.ezijing.com/pc/base/logo.svg') no-repeat;
   background-size: contain;
 }
 .login-hd {

src/views/View.vue

@@ -13,11 +13,11 @@
         </div>
       </template>
       <div class="p-item">
-        <div class="p-title">审核状态</div>
+        <div class="p-title">审批状态</div>
         <div class="p-content">{{ statusText }}</div>
       </div>
       <div class="p-item" v-if="detail.approve_time1 || detail.approve_time2">
-        <div class="p-title">审核时间</div>
+        <div class="p-title">审批时间</div>
         <div class="p-content">{{ detail.approve_time1 || detail.approve_time2 }}</div>
       </div>
       <div class="p-item" v-if="detail.remark1 || detail.remark2">
@@ -77,7 +77,7 @@ export default {
     },
     statusText() {
       const map = {
-        '-1': '待审核',
+        '-1': '待审批',
         0: '未通过',
         1: '通过',
         2: '通过',

src/views/cert/SchoolEdit.vue

+<template>
+  <div class="main">
+    <v-form ref="form" :model="ruleForm" :fields="fields" @submit="onSubmit"></v-form>
+    <div class="fixed-box">
+      <div class="fixed-inner">
+        <van-button class="fixed-button" :loading="submitLoading" @click="handleSubmit">提交申请</van-button>
+        <van-button class="fixed-button" @click="onRemove" v-if="hasAbort">撤回申请</van-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import editMixins from '@/mixins/edit'
+export default {
+  mixins: [editMixins],
+  metaInfo: { title: '索菲亚在读证明' },
+  data() {
+    return {
+      ruleForm: { personal_name: '', class_name: '', sofia_id: '', birth_date: '' },
+      fields: [
+        { name: 'personal_name', label: '姓名', readonly: true },
+        { name: 'class_name', label: '班级', readonly: true },
+        { name: 'sofia_id', label: 'Sofia ID', readonly: true },
+        {
+          name: 'birth_date',
+          label: '出生年月',
+          fieldType: 'date',
+          rules: [{ required: true, message: '请选择出生年月' }]
+        }
+      ]
+    }
+  },
+  methods: {
+    onSubmit(data) {
+      data.affair_id = this.channelId
+      this.isEdit ? this.handleUpdate(data) : this.handleAdd(data)
+    }
+  },
+  beforeMount() {
+    if (this.isEdit) {
+      this.getDetail()
+    } else {
+      // 获取学生信息
+      this.getStudent()
+    }
+  }
+}
+</script>

src/views/cert/SchoolList.vue

+<template>
+  <div class="list">
+    <van-list v-model="loading" :finished="finished" @load="onLoad" v-if="list.length">
+      <card
+        title="索菲亚在读证明"
+        v-for="item in list"
+        :data="item"
+        :key="item.id"
+        @edit="onEdit"
+        @view="onView"
+        @remove="onRemove"
+      >
+      </card>
+    </van-list>
+    <div class="empty" v-else>您还没有申请索菲亚在读证明</div>
+    <div class="fixed-box">
+      <div class="fixed-inner">
+        <div class="fixed-button" @click="handleAdd">申请索菲亚在读证明</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import listMixins from '@/mixins/list'
+export default {
+  mixins: [listMixins],
+  metaInfo: { title: '索菲亚在读证明' },
+  data() {
+    return {}
+  },
+  methods: {
+    // 创建
+    handleAdd() {
+      this.$router.push({ name: 'certSchoolAdd', query: { channel_id: this.channelId } })
+    },
+    // 编辑
+    onEdit(data) {
+      this.$router.push({ name: 'certSchoolEdit', params: { id: data.id }, query: { channel_id: this.channelId } })
+    },
+    // 查看
+    onView(data) {
+      this.$router.push({ name: 'certSchoolView', params: { id: data.id }, query: { channel_id: this.channelId } })
+    }
+  }
+}
+</script>
+

src/views/cert/SchoolView.vue

+<template>
+  <div class="main" v-if="!loading">
+    <form-view :fields="fields" :data="detail" />
+  </div>
+</template>
+
+<script>
+import ViewMixins from '@/mixins/view'
+export default {
+  mixins: [ViewMixins],
+  metaInfo: { title: '索菲亚在读证明' },
+  data() {
+    return {
+      fields: [
+        { name: 'form.personal_name', label: '姓名' },
+        { name: 'form.class_name', label: '班级' },
+        { name: 'form.sofia_id', label: 'Sofia ID' },
+        { name: 'form.birth_date', label: '出生年月' }
+      ]
+    }
+  }
+}
+</script>

src/views/cert/StudyEdit.vue

+<template>
+  <div class="main">
+    <v-form ref="form" :model="ruleForm" :fields="fields" @submit="onSubmit"></v-form>
+    <div class="fixed-box">
+      <div class="fixed-inner">
+        <van-button class="fixed-button" :loading="submitLoading" @click="handleSubmit">提交申请</van-button>
+        <van-button class="fixed-button" @click="onRemove" v-if="hasAbort">撤回申请</van-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import editMixins from '@/mixins/edit'
+export default {
+  mixins: [editMixins],
+  metaInfo: { title: '紫荆在读证明' },
+  data() {
+    return {
+      ruleForm: {
+        personal_name: '',
+        class_name: '',
+        sofia_id: '',
+        is_self: '1',
+        receive_name: '',
+        telephone: '',
+        email: ''
+      },
+      fields: [
+        { name: 'personal_name', label: '姓名', readonly: true },
+        { name: 'class_name', label: '班级', readonly: true },
+        { name: 'sofia_id', label: 'Sofia ID', readonly: true },
+        {
+          name: 'is_self',
+          label: '在读证明邮寄收件人是否为本人',
+          fieldType: 'radio',
+          values: [
+            { value: '1', label: '是' },
+            { value: '0', label: '否' }
+          ]
+        },
+        { name: 'receive_name', label: '收件人姓名', rules: [{ required: true, message: '请输入收件人名字' }] },
+        {
+          name: 'telephone',
+          label: '收件人联系电话',
+          type: 'tel',
+          rules: [{ required: true, message: '请输入收件人联系电话' }]
+        },
+        {
+          name: 'email',
+          label: '在读证明邮寄地址',
+          type: 'textarea',
+          rules: [{ required: true, message: '请输入在读证明邮寄地址' }]
+        }
+      ]
+    }
+  },
+  methods: {
+    onSubmit(data) {
+      data.affair_id = this.channelId
+      console.log(data)
+      this.isEdit ? this.handleUpdate(data) : this.handleAdd(data)
+    }
+  },
+  beforeMount() {
+    if (this.isEdit) {
+      this.getDetail()
+    } else {
+      // 获取学生信息
+      this.getStudent()
+    }
+  }
+}
+</script>

src/views/cert/StudyList.vue

+<template>
+  <div class="list">
+    <van-list v-model="loading" :finished="finished" @load="onLoad" v-if="list.length">
+      <card
+        title="紫荆在读证明"
+        v-for="item in list"
+        :data="item"
+        :key="item.id"
+        @edit="onEdit"
+        @view="onView"
+        @remove="onRemove"
+      >
+      </card>
+    </van-list>
+    <div class="empty" v-else>您还没有申请紫荆在读证明</div>
+    <div class="fixed-box">
+      <div class="fixed-inner">
+        <div class="fixed-button" @click="handleAdd">申请紫荆在读证明</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import listMixins from '@/mixins/list'
+export default {
+  mixins: [listMixins],
+  metaInfo: { title: '紫荆在读证明' },
+  data() {
+    return {}
+  },
+  methods: {
+    // 创建
+    handleAdd() {
+      this.$router.push({ name: 'certStudyAdd', query: { channel_id: this.channelId } })
+    },
+    // 编辑
+    onEdit(data) {
+      this.$router.push({ name: 'certStudyEdit', params: { id: data.id }, query: { channel_id: this.channelId } })
+    },
+    // 查看
+    onView(data) {
+      this.$router.push({ name: 'certStudyView', params: { id: data.id }, query: { channel_id: this.channelId } })
+    }
+  }
+}
+</script>
+

src/views/cert/StudyView.vue

+<template>
+  <div class="main" v-if="!loading">
+    <form-view :fields="fields" :data="detail" />
+  </div>
+</template>
+
+<script>
+import ViewMixins from '@/mixins/view'
+export default {
+  mixins: [ViewMixins],
+  metaInfo: { title: '紫荆在读证明' },
+  data() {
+    return {
+      fields: [
+        { name: 'form.personal_name', label: '姓名' },
+        { name: 'form.class_name', label: '班级' },
+        { name: 'form.sofia_id', label: 'Sofia ID' },
+        { name: 'form.semester_name', label: '挂科学期' },
+        { name: 'form.course_name', label: '重修课程' }
+      ]
+    }
+  }
+}
+</script>

src/views/report/Create.vue

-<template>
-  <div class="main">
-    <div class="form-tips" v-html="page.tips"></div>
-    <v-form
-      ref="form"
-      :model="formModel"
-      :fields="page.form.fields"
-      :disabled="isSubmited"
-      @submit="onSubmit"
-    ></v-form>
-    <div class="fixed-box">
-      <div class="fixed-inner">
-        <div class="fixed-button" v-if="isSubmited">已提交</div>
-        <div class="fixed-button" @click="handleSubmit" v-else>提交</div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import VForm from '@/components/Form'
-import * as api from '@/api/index'
-const pages = {
-  pareport: {
-    title: '纸质成绩单',
-    tips:
-      '毕业生可申请成绩单。<br />请仔细核查您填写的信息后提交，提交后不可修改。纸质成绩单将按您填写的地址邮寄给您。',
-    form: {
-      fields: [
-        // {
-        //   name: 'personal_name',
-        //   label: '姓名',
-        //   required: true,
-        //   placeholder: '请输入姓名',
-        //   rules: [{ required: true, message: '请输入姓名' }]
-        // },
-        // {
-        //   name: 'class_name',
-        //   label: '班级',
-        //   required: true,
-        //   placeholder: '请输入班级',
-        //   rules: [{ required: true, message: '请输入班级' }]
-        // },
-        {
-          type: 'digit',
-          name: 'sofia_id',
-          label: 'Sofia ID',
-          required: true,
-          placeholder: '请输入Sofia ID',
-          rules: [{ required: true, message: '请输入Sofia ID' }]
-        },
-        {
-          type: 'tel',
-          name: 'telephone',
-          label: '电话',
-          required: true,
-          placeholder: '请输入电话',
-          rules: [{ required: true, message: '请输入电话' }]
-        },
-        {
-          name: 'email',
-          label: '邮寄地址',
-          required: true,
-          placeholder: '请输入邮寄地址',
-          rules: [{ required: true, message: '请输入邮寄地址' }]
-        },
-        {
-          type: 'digit',
-          name: 'number',
-          label: '需打印的份数',
-          required: true,
-          placeholder: '请输入需打印的份数',
-          rules: [{ required: true, message: '请输入需打印的份数' }]
-        }
-      ]
-    }
-  },
-  elreport: {
-    title: '电子成绩单',
-    tips: '毕业生可申请成绩单。<br />请仔细核查您填写的信息后提交，提交后不可修改。电子成绩单将发送至您填写的邮箱。',
-    form: {
-      fields: [
-        // {
-        //   name: 'personal_name',
-        //   label: '姓名',
-        //   required: true,
-        //   placeholder: '请输入姓名',
-        //   rules: [{ required: true, message: '请输入姓名' }]
-        // },
-        // {
-        //   name: 'class_name',
-        //   label: '班级',
-        //   required: true,
-        //   placeholder: '请输入班级',
-        //   rules: [{ required: true, message: '请输入班级' }]
-        // },
-        {
-          type: 'digit',
-          name: 'sofia_id',
-          label: 'Sofia ID',
-          required: true,
-          placeholder: '请输入Sofia ID',
-          rules: [{ required: true, message: '请输入Sofia ID' }]
-        },
-        {
-          name: 'email',
-          label: '邮箱',
-          required: true,
-          placeholder: '请输入邮箱',
-          rules: [{ required: true, message: '请输入邮箱' }]
-        }
-      ]
-    }
-  }
-}
-export default {
-  name: 'Create',
-  components: { VForm },
-  metaInfo() {
-    return {
-      title: this.page.title
-    }
-  },
-  data() {
-    return {
-      formModel: {}
-    }
-  },
-  watch: {
-    $route: {
-      immediate: true,
-      deep: true,
-      handler(route) {
-        if (!route.query.channel) {
-          this.$dialog
-            .alert({
-              message: '请选择事务'
-            })
-            .then(() => {
-              this.$router.replace({
-                name: 'index',
-                query: this.$route.query
-              })
-            })
-        }
-      }
-    }
-  },
-  computed: {
-    // 页面配置
-    page() {
-      return pages[this.channel] ? pages[this.channel] : {}
-    },
-    channel() {
-      return this.$route.query.channel
-    },
-    channelId() {
-      return this.$route.query.channel_id
-    },
-    isSubmited() {
-      return this.formModel.submit === 1
-    }
-  },
-  methods: {
-    handleSubmit() {
-      this.$refs.form.submit()
-    },
-    onSubmit(data) {
-      if (data.telephone && data.telephone.length !== 11) {
-        this.$notify('请输入正确的电话号码')
-        return
-      }
-      data.affair_id = this.channelId
-      api.createAffair(data).then(response => {
-        if (response.success) {
-          this.$dialog.alert({ confirmButtonText: '确定', message: '已提交成功！' }).then(() => {
-            this.getDetail()
-          })
-        } else {
-          this.$toast(response.message)
-        }
-      })
-    },
-    // 获取详情
-    getDetail() {
-      api.getReport({ type: this.channel }).then(response => {
-        this.formModel = response
-      })
-    }
-  },
-  beforeMount() {
-    this.getDetail()
-  }
-}
-</script>

src/views/report/ElEdit.vue

+<template>
+  <div class="main">
+    <p class="tips">
+      电子成绩单可在从Sofia官网自行申请并获取，可参考文档：<a
+        href="https://zws-imgs-pub.ezijing.com/pc/sofia/Sofia%E5%A4%A7%E5%AD%A6%E7%94%B5%E5%AD%90%E6%88%90%E7%BB%A9%E5%8D%95%E7%94%B3%E8%AF%B7%E6%B5%81%E7%A8%8B.pdf"
+        target="_blank"
+        >电子成绩单说明文档</a
+      >
+    </p>
+    <v-form ref="form" :model="ruleForm" :fields="fields" @submit="onSubmit"></v-form>
+    <div class="fixed-box">
+      <div class="fixed-inner">
+        <van-button class="fixed-button" :loading="submitLoading" @click="handleSubmit">提交申请</van-button>
+        <van-button class="fixed-button" @click="onRemove" v-if="hasAbort">撤回申请</van-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import editMixins from '@/mixins/edit'
+export default {
+  mixins: [editMixins],
+  metaInfo: { title: '电子成绩单' },
+  data() {
+    return {
+      ruleForm: { personal_name: '', class_name: '', sofia_id: '' },
+      fields: [
+        { name: 'personal_name', label: '姓名', readonly: true },
+        { name: 'class_name', label: '班级', readonly: true },
+        { name: 'sofia_id', label: 'Sofia ID', readonly: true }
+      ]
+    }
+  },
+  methods: {
+    onSubmit(data) {
+      data.affair_id = this.channelId
+      this.isEdit ? this.handleUpdate(data) : this.handleAdd(data)
+    }
+  },
+  beforeMount() {
+    if (this.isEdit) {
+      this.getDetail()
+    } else {
+      // 获取学生信息
+      this.getStudent()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.tips {
+  margin: 0 30px;
+  line-height: 24px;
+  a {
+    color: #00f;
+  }
+}
+</style>
\ No newline at end of file

src/views/report/ElList.vue

+<template>
+  <div class="list">
+    <van-list v-model="loading" :finished="finished" @load="onLoad" v-if="list.length">
+      <card
+        title="电子成绩单"
+        v-for="item in list"
+        :data="item"
+        :key="item.id"
+        @edit="onEdit"
+        @view="onView"
+        @remove="onRemove"
+      >
+      </card>
+    </van-list>
+    <div class="empty" v-else>您还没有申请电子成绩单</div>
+    <div class="fixed-box">
+      <div class="fixed-inner">
+        <div class="fixed-button" @click="handleAdd">申请电子成绩单</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import listMixins from '@/mixins/list'
+export default {
+  mixins: [listMixins],
+  metaInfo: { title: '电子成绩单' },
+  data() {
+    return {}
+  },
+  methods: {
+    // 创建
+    handleAdd() {
+      this.$router.push({ name: 'reportElAdd', query: { channel_id: this.channelId } })
+    },
+    // 编辑
+    onEdit(data) {
+      this.$router.push({ name: 'reportElEdit', params: { id: data.id }, query: { channel_id: this.channelId } })
+    },
+    // 查看
+    onView(data) {
+      this.$router.push({ name: 'reportElView', params: { id: data.id }, query: { channel_id: this.channelId } })
+    }
+  }
+}
+</script>
+

src/views/report/ElView.vue

+<template>
+  <div class="main" v-if="!loading">
+    <form-view :fields="fields" :data="detail" />
+  </div>
+</template>
+
+<script>
+import ViewMixins from '@/mixins/view'
+export default {
+  mixins: [ViewMixins],
+  metaInfo: { title: '电子成绩单' },
+  data() {
+    return {
+      fields: [
+        { name: 'form.personal_name', label: '姓名' },
+        { name: 'form.class_name', label: '班级' },
+        { name: 'form.sofia_id', label: 'Sofia ID' }
+      ]
+    }
+  }
+}
+</script>

src/views/report/Index.vue

-<template>
-  <div class="choose">
-    <div class="choose-list">
-      <van-radio-group v-model="radio">
-        <div class="choose-item" v-for="item in reportList" :key="item.value">
-          <van-radio :name="item.id">{{ item.affair_name }}</van-radio>
-        </div>
-      </van-radio-group>
-    </div>
-    <div class="fixed-box">
-      <div class="fixed-inner">
-        <div class="fixed-button" @click="toListPage">下一步</div>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  metaInfo: { title: '成绩单' },
-  data() {
-    return {
-      radio: ''
-    }
-  },
-  computed: {
-    // 所有类型
-    affairTypes() {
-      return this.$store.state.affairTypes
-    },
-    currentItem() {
-      return this.affairTypes.find(item => item.id === this.radio)
-    },
-    // 成绩单列表
-    reportList() {
-      return this.affairTypes.filter(item => ['pareport', 'elreport'].includes(item.form_name))
-    }
-  },
-  methods: {
-    toListPage() {
-      if (!this.radio) {
-        this.$toast('请选择成绩单类型')
-        return
-      }
-      this.$router.push({
-        name: 'reportCreate',
-        query: Object.assign(this.$route.query, {
-          channel: this.currentItem.form_name,
-          channel_id: this.radio
-        })
-      })
-    },
-    getList() {
-      if (!this.affairTypes.length) {
-        this.$store.dispatch('getAffairTypes')
-      }
-    }
-  },
-  beforeMount() {
-    this.getList()
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.choose {
-  padding: 0 30px;
-}
-.choose-title {
-  font-size: 19px;
-  font-weight: normal;
-}
-.choose-list {
-  margin-top: 46px;
-}
-.choose-item {
-  margin-bottom: 50px;
-}
-</style>

src/views/report/PaperEdit.vue

+<template>
+  <div class="main">
+    <v-form ref="form" :model="ruleForm" :fields="fields" @submit="onSubmit"></v-form>
+    <div class="fixed-box">
+      <div class="fixed-inner">
+        <van-button class="fixed-button" :loading="submitLoading" @click="handleSubmit" v-if="!isPaid"
+          >去支付</van-button
+        >
+        <van-button class="fixed-button" :loading="submitLoading" @click="handleSubmit" v-else>保存并提交</van-button>
+        <van-button class="fixed-button" @click="onRemove" v-if="hasAbort">撤回申请</van-button>
+      </div>
+    </div>
+    <van-dialog v-model="payVisible" title="支付" :showConfirmButton="false" :closeOnClickOverlay="true">
+      <van-icon name="close" class="dialog-close" @click="payVisible = false" />
+      <pay :payment="ruleForm.payment" :productId="productId" @success="handlePaySuccess" v-if="payVisible"></pay>
+    </van-dialog>
+  </div>
+</template>
+
+<script>
+import editMixins from '@/mixins/edit'
+import * as api from '@/api/index'
+import Pay from '@/components/Pay'
+export default {
+  mixins: [editMixins],
+  metaInfo: { title: '纸质成绩单' },
+  components: { Pay },
+  data() {
+    return {
+      ruleForm: {
+        personal_name: '',
+        class_name: '',
+        sofia_id: '',
+        is_self: '1',
+        receive_name: '',
+        telephone: '',
+        email: '',
+        number: '1',
+        payment: '2'
+      },
+      productList: [
+        { label: '1份—￥126元', value: '1', product_id: '6747325185390542848' },
+        { label: '2份—￥201元', value: '2', product_id: '6747325279879823360' },
+        { label: '3份—￥276元', value: '3', product_id: '6747325351686307840' }
+      ],
+      payVisible: false
+    }
+  },
+  watch: {
+    '$route.query': {
+      immediate: true,
+      handler(query) {
+        this.payVisible = query.pay === '1'
+      }
+    }
+  },
+  computed: {
+    fields() {
+      return [
+        { name: 'personal_name', label: '姓名', readonly: true },
+        { name: 'class_name', label: '班级', readonly: true },
+        { name: 'sofia_id', label: 'Sofia ID', readonly: true },
+        {
+          name: 'is_self',
+          label: '成绩单收件人是否为本人',
+          fieldType: 'radio',
+          direction: 'horizontal',
+          values: [
+            { value: '1', label: '是' },
+            { value: '0', label: '否' }
+          ]
+        },
+        {
+          name: 'receive_name',
+          label: '收件人姓名',
+          rules: [{ required: true, message: '请输入收件人名字' }],
+          visible(data, model) {
+            return model.is_self === '1'
+          }
+        },
+        {
+          name: 'telephone',
+          label: '收件人联系电话',
+          type: 'tel',
+          rules: [{ required: true, message: '请输入收件人联系电话' }]
+        },
+        {
+          name: 'email',
+          label: '邮寄地址',
+          type: 'textarea',
+          append: '国内大陆地区顺丰或EMS包邮，偏远地区及港澳台地区请联系班主任，根据实际情况收取快递费用。',
+          rules: [{ required: true, message: '请输入在读证明邮寄地址' }]
+        },
+        {
+          name: 'number',
+          label: '需打印的份数',
+          fieldType: 'radio',
+          values: this.productList,
+          disabled: this.isPaid
+        },
+        {
+          name: 'payment',
+          label: '支付方式',
+          fieldType: 'radio',
+          values: this.payList,
+          disabled: this.isPaid
+        }
+      ]
+    },
+    productId() {
+      const found = this.productList.find(item => item.value === this.ruleForm.number)
+      return found ? found.product_id : ''
+    }
+  },
+  methods: {
+    onSubmit(data) {
+      data.affair_id = this.channelId
+      if (this.isEdit) {
+        this.isPaid ? this.handleUpdate(data) : this.handleUpdate(data, this.handlePay)
+      } else {
+        this.handleAdd(data, response => {
+          this.$router.replace({
+            name: 'reportPaperEdit',
+            params: { id: response.data.id },
+            query: { channel_id: this.channelId, pay: '1' }
+          })
+        })
+      }
+    },
+    // 去支付
+    handlePay() {
+      this.payVisible = true
+    },
+    // 支付成功
+    handlePaySuccess() {
+      api.paySuccess(this.pid).then(() => {
+        this.$router.replace({
+          name: 'reportPaperView',
+          params: { id: this.pid },
+          query: { channel_id: this.channelId }
+        })
+      })
+    }
+  },
+  beforeMount() {
+    if (this.isEdit) {
+      this.getDetail()
+    } else {
+      // 获取学生信息
+      this.getStudent()
+    }
+  }
+}
+</script>

src/views/report/PaperList.vue

+<template>
+  <div class="list">
+    <van-list v-model="loading" :finished="finished" @load="onLoad" v-if="list.length">
+      <card
+        title="纸质成绩单"
+        v-for="item in list"
+        :data="item"
+        :key="item.id"
+        @edit="onEdit"
+        @view="onView"
+        @remove="onRemove"
+      >
+        <template #button> </template>
+      </card>
+    </van-list>
+    <div class="empty" v-else>您还没有申请纸质成绩单</div>
+    <div class="fixed-box">
+      <div class="fixed-inner">
+        <div class="fixed-button" @click="handleAdd">申请纸质成绩单</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import listMixins from '@/mixins/list'
+export default {
+  mixins: [listMixins],
+  metaInfo: { title: '纸质成绩单' },
+  data() {
+    return {}
+  },
+  methods: {
+    // 创建
+    handleAdd() {
+      this.$router.push({ name: 'reportPaperAdd', query: { channel_id: this.channelId } })
+    },
+    // 编辑
+    onEdit(data) {
+      this.$router.push({ name: 'reportPaperEdit', params: { id: data.id }, query: { channel_id: this.channelId } })
+    },
+    // 查看
+    onView(data) {
+      this.$router.push({ name: 'reportPaperView', params: { id: data.id }, query: { channel_id: this.channelId } })
+    }
+  }
+}
+</script>
+

src/views/report/PaperView.vue

+<template>
+  <div class="main" v-if="!loading">
+    <form-view :fields="fields" :data="detail" />
+  </div>
+</template>
+
+<script>
+import ViewMixins from '@/mixins/view'
+export default {
+  mixins: [ViewMixins],
+  metaInfo: { title: '纸质成绩单' },
+  data() {
+    return {
+      fields: [
+        { name: 'form.personal_name', label: '姓名' },
+        { name: 'form.class_name', label: '班级' },
+        { name: 'form.sofia_id', label: 'Sofia ID' },
+        { name: 'form.receive_name', label: '收件人姓名' },
+        { name: 'form.telephone', label: '收件人联系电话' },
+        { name: 'form.email', label: '邮寄地址' },
+        {
+          name: 'form.number',
+          label: '需打印的份数',
+          computed(value) {
+            const map = { 1: '1份—￥126元', 2: '2份—￥201元', 3: '3份—￥276元' }
+            return map[value]
+          }
+        }
+      ]
+    }
+  }
+}
+</script>

src/views/retake/Edit.vue

+<template>
+  <div class="main">
+    <v-form ref="form" :model="ruleForm" :fields="fields" @submit="onSubmit"></v-form>
+    <div class="fixed-box">
+      <div class="fixed-inner">
+        <van-button class="fixed-button" :loading="submitLoading" @click="handlePay" v-if="hasPay">去支付</van-button>
+        <van-button class="fixed-button" :loading="submitLoading" @click="handleSubmit" v-else>提交申请</van-button>
+        <van-button class="fixed-button" @click="onRemove" v-if="hasAbort">撤回申请</van-button>
+      </div>
+    </div>
+    <van-dialog v-model="payVisible" title="支付" :showConfirmButton="false" :closeOnClickOverlay="true">
+      <van-icon name="close" class="dialog-close" @click="payVisible = false" />
+      <pay :payment="ruleForm.payment" :productId="productId" @success="handlePaySuccess" v-if="payVisible"></pay>
+    </van-dialog>
+  </div>
+</template>
+
+<script>
+import editMixins from '@/mixins/edit'
+import * as api from '@/api/index'
+import Pay from '@/components/Pay'
+export default {
+  mixins: [editMixins],
+  metaInfo: { title: '申请重修' },
+  components: { Pay },
+  data() {
+    return {
+      ruleForm: {
+        personal_name: '',
+        class_name: '',
+        sofia_id: '',
+        semester_name: '',
+        course_id: [],
+        payment: '1'
+      },
+      courseList: [], // 课程列表
+      submitedCourseList: [], // 提交的课程列表
+      productId: '6745273257873637376', // 商品ID
+      payVisible: false
+    }
+  },
+  computed: {
+    fields() {
+      return [
+        { name: 'personal_name', label: '姓名', readonly: true, disabled: this.disabledInfo },
+        { name: 'class_name', label: '班级', readonly: true, disabled: this.disabledInfo },
+        { name: 'sofia_id', label: 'Sofia ID', readonly: true, disabled: this.disabledInfo },
+        {
+          name: 'semester_name',
+          label: '挂科学期',
+          fieldType: 'radio',
+          values: this.semesterList,
+          rules: [{ required: true, message: '请选择挂科学期' }],
+          disabled: this.disabledInfo
+        },
+        {
+          name: 'course_id',
+          label: '重修课程',
+          fieldType: 'checkbox',
+          values: this.currentCourseList,
+          rules: [{ required: true, message: '请选择重修课程' }],
+          disabled: this.disabledInfo
+        },
+        {
+          name: 'payment',
+          label: '支付方式',
+          fieldType: 'radio',
+          values: this.payList,
+          visible: () => {
+            return this.hasPay
+          }
+        }
+      ]
+    },
+    currentCourseList() {
+      const courseList = this.courseList.map(item => {
+        item.value = item.id
+        item.label = item.course_name
+        return item
+      })
+      const submitedCourseList = this.submitedCourseList.map(item => {
+        item.value = item.id
+        item.label = item.course_name
+        return item
+      })
+      return courseList.concat(submitedCourseList)
+    }
+  },
+  methods: {
+    // 获取重修课程
+    getCourses() {
+      api
+        .getRetakeCourses()
+        .then(response => {
+          this.courseList = response
+          if (!this.isEdit && !this.courseList.length) {
+            this.$dialog.alert({ message: '您没有需要重修的课程' }).then(() => {
+              this.$router.replace({ name: 'index' })
+            })
+          }
+        })
+        .catch(() => {
+          // 清除全局提示
+          this.$notify.clear()
+          !this.isEdit &&
+            this.$dialog.alert({ message: '您没有需要重修的课程' }).then(() => {
+              this.$router.replace({ name: 'index' })
+            })
+        })
+    },
+    getDetail() {
+      api.getAffair(this.pid).then(response => {
+        const form = response.form
+        if (form.course_name_arr) {
+          form.course_id = form.course_name_arr.map(item => item.course_id)
+          this.submitedCourseList = form.course_name_arr.map(item => {
+            item.id = item.course_id
+            return item
+          })
+        }
+        // 设置表单数据
+        const ruleForm = this.$_.pick(response.form, [
+          'personal_name',
+          'class_name',
+          'sofia_id',
+          'semester_name',
+          'course_id',
+          'payment'
+        ])
+        Object.assign(this.ruleForm, ruleForm)
+        // 设置接口返回的数据
+        this.detail = response
+      })
+    },
+    onSubmit(data) {
+      data.affair_id = this.channelId
+      data.course_id = this.ruleForm.course_id.join(',')
+      data.payment = data.payment || '0'
+      this.isEdit ? this.handleUpdate(data) : this.handleAdd(data)
+    },
+    // 去支付
+    handlePay() {
+      this.payVisible = true
+    },
+    // 支付成功
+    handlePaySuccess() {
+      api.paySuccess(this.pid).then(() => {
+        this.$router.replace({ name: 'retakeView', params: { id: this.pid }, query: { channel_id: this.channelId } })
+      })
+    }
+  },
+  beforeMount() {
+    if (this.isEdit) {
+      this.getDetail()
+    } else {
+      // 获取学生信息
+      this.getStudent()
+    }
+    // 获取重修课程
+    this.getCourses()
+  }
+}
+</script>

src/views/retake/Index.vue

-<template>
-  <div></div>
-</template>
-
-<script>
-export default {}
-</script>
\ No newline at end of file

src/views/retake/List.vue

+<template>
+  <div class="list">
+    <van-list v-model="loading" :finished="finished" @load="onLoad" v-if="list.length">
+      <card
+        title="重修"
+        v-for="item in list"
+        :data="item"
+        :key="item.id"
+        @edit="onEdit"
+        @view="onView"
+        @remove="onRemove"
+      >
+        <template #button> </template>
+      </card>
+    </van-list>
+    <div class="empty" v-else>暂无内容</div>
+    <div class="fixed-box">
+      <div class="fixed-inner">
+        <div class="fixed-button" @click="handleAdd">申请重修</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import listMixins from '@/mixins/list'
+export default {
+  mixins: [listMixins],
+  metaInfo: { title: '重修' },
+  data() {
+    return {}
+  },
+  methods: {
+    // 创建
+    handleAdd() {
+      this.$router.push({ name: 'retakeAdd', query: this.$route.query })
+    },
+    // 编辑
+    onEdit(data) {
+      this.$router.push({ name: 'retakeEdit', params: { id: data.id }, query: { channel_id: this.channelId } })
+    },
+    // 查看
+    onView(data) {
+      this.$router.push({ name: 'retakeView', params: { id: data.id }, query: { channel_id: this.channelId } })
+    }
+  }
+}
+</script>
+

src/views/retake/Update.vue

-<template>
-  <div class="main">
-    <van-form @submit="onSubmit">
-      <van-field
-        v-model="formModel.personal_name"
-        name="personal_name"
-        label="姓名"
-        placeholder="请输入姓名"
-        :rules="[{ required: true, message: '请输入姓名' }]"
-      />
-      <van-field
-        v-model="formModel.class_name"
-        name="class_name"
-        label="班级"
-        placeholder="请输入班级"
-        :rules="[{ required: true, message: '请输入班级' }]"
-      />
-      <van-field
-        v-model="formModel.semester_name"
-        name="semester_name"
-        label="Sofia ID"
-        placeholder="请输入Sofia ID"
-        :rules="[{ required: true, message: '请输入Sofia ID' }]"
-      />
-      <van-field
-        v-model="formModel.semester_name"
-        name="semester_name"
-        label="挂科学期"
-        :rules="[{ required: true, message: '请选择挂科学期' }]"
-      />
-      <van-field
-        v-model="formModel.course_name"
-        name="course_name"
-        label="重修课程"
-        :rules="[{ required: true, message: '请选择重修课程' }]"
-      />
-    </van-form>
-    <div class="fixed-box">
-      <div class="fixed-inner">
-        <div class="fixed-button" v-if="isSubmited">已提交</div>
-        <div class="fixed-button" @click="handleSubmit" v-else>提交</div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import * as api from '@/api/index'
-
-export default {
-  name: 'Create',
-  metaInfo() {
-    return {
-      title: '申请重修'
-    }
-  },
-  data() {
-    return {
-      formModel: {
-        personal_name: '',
-        class_name: '',
-        semester_name: '',
-        sofia_id: '',
-        course_name: '',
-        payment_instrument: ''
-      }
-    }
-  },
-  watch: {
-    $route: {
-      immediate: true,
-      deep: true,
-      handler(route) {
-        if (!route.query.channel) {
-          this.$dialog
-            .alert({
-              message: '请选择事务'
-            })
-            .then(() => {
-              this.$router.replace({
-                name: 'index',
-                query: this.$route.query
-              })
-            })
-        }
-      }
-    }
-  },
-  computed: {
-    channel() {
-      return this.$route.query.channel
-    },
-    channelId() {
-      return this.$route.query.channel_id
-    },
-    isSubmited() {
-      return this.formModel.submit === 1
-    }
-  },
-  methods: {
-    handleSubmit() {
-      this.$refs.form.submit()
-    },
-    onSubmit(data) {
-      if (data.telephone && data.telephone.length !== 11) {
-        this.$notify('请输入正确的电话号码')
-        return
-      }
-      data.affair_id = this.channelId
-      api.createAffair(data).then(response => {
-        if (response.success) {
-          this.$dialog.alert({ confirmButtonText: '确定', message: '已提交成功！' }).then(() => {
-            this.getDetail()
-          })
-        } else {
-          this.$toast(response.message)
-        }
-      })
-    },
-    // 获取详情
-    getDetail() {
-      api.getReport({ type: this.channel }).then(response => {
-        this.formModel = response
-      })
-    }
-  },
-  beforeMount() {
-    this.getDetail()
-    this.$store.dispatch('getStudent')
-  }
-}
-</script>

src/views/retake/View.vue

+<template>
+  <div class="main" v-if="!loading">
+    <form-view :fields="fields" :data="detail" />
+  </div>
+</template>
+
+<script>
+import ViewMixins from '@/mixins/view'
+export default {
+  mixins: [ViewMixins],
+  metaInfo: { title: '重修' },
+  data() {
+    return {
+      fields: [
+        { name: 'form.personal_name', label: '姓名' },
+        { name: 'form.class_name', label: '班级' },
+        { name: 'form.sofia_id', label: 'Sofia ID' },
+        { name: 'form.semester_name', label: '挂科学期' },
+        {
+          name: 'form.course_name_arr',
+          label: '重修课程',
+          computed(list) {
+            return list.map(item => item.course_name).join(',')
+          }
+        },
+        { name: 'form.credit_sum_str', label: '缴费说明' }
+      ]
+    }
+  }
+}
+</script>
+

src/views/study/ContinueEdit.vue

+<template>
+  <div class="main">
+    <v-form ref="form" :model="ruleForm" :fields="fields" @submit="onSubmit"></v-form>
+    <div class="fixed-box">
+      <div class="fixed-inner">
+        <van-button class="fixed-button" :loading="submitLoading" @click="handleSubmit">提交申请</van-button>
+        <van-button class="fixed-button" @click="onRemove" v-if="hasAbort">撤回申请</van-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import editMixins from '@/mixins/edit'
+export default {
+  mixins: [editMixins],
+  metaInfo: { title: '复学申请' },
+  data() {
+    return {
+      ruleForm: {
+        personal_name: '',
+        class_name: '',
+        sofia_id: '',
+        semester_name: ''
+      }
+    }
+  },
+  computed: {
+    fields() {
+      return [
+        { name: 'personal_name', label: '姓名', readonly: true },
+        { name: 'class_name', label: '班级', readonly: true },
+        { name: 'sofia_id', label: 'Sofia ID', readonly: true },
+        {
+          name: 'semester_name',
+          label: '复学时间',
+          fieldType: 'radio',
+          values: this.semesterList,
+          rules: [{ required: true, message: '请选择复学时间' }]
+        }
+      ]
+    }
+  },
+  methods: {
+    onSubmit(data) {
+      data.affair_id = this.channelId
+      this.isEdit ? this.handleUpdate(data) : this.handleAdd(data)
+    }
+  },
+  beforeMount() {
+    if (this.isEdit) {
+      this.getDetail()
+    } else {
+      // 获取学生信息
+      this.getStudent()
+    }
+  }
+}
+</script>

src/views/study/ContinueList.vue

+<template>
+  <div class="list">
+    <van-list v-model="loading" :finished="finished" @load="onLoad" v-if="list.length">
+      <card
+        title="复学"
+        v-for="item in list"
+        :data="item"
+        :key="item.id"
+        @edit="onEdit"
+        @view="onView"
+        @remove="onRemove"
+      >
+      </card>
+    </van-list>
+    <div class="empty" v-else>您还没有申请复学</div>
+    <div class="fixed-box">
+      <div class="fixed-inner">
+        <div class="fixed-button" @click="handleAdd">申请复学</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import listMixins from '@/mixins/list'
+export default {
+  mixins: [listMixins],
+  metaInfo: { title: '复学' },
+  data() {
+    return {}
+  },
+  methods: {
+    // 创建
+    handleAdd() {
+      this.$router.push({ name: 'studyContinueAdd', query: { channel_id: this.channelId } })
+    },
+    // 编辑
+    onEdit(data) {
+      this.$router.push({ name: 'studyContinueEdit', params: { id: data.id }, query: { channel_id: this.channelId } })
+    },
+    // 查看
+    onView(data) {
+      this.$router.push({ name: 'studyContinueView', params: { id: data.id }, query: { channel_id: this.channelId } })
+    }
+  }
+}
+</script>
+

src/views/study/ContinueView.vue

+<template>
+  <div class="main" v-if="!loading">
+    <form-view :fields="fields" :data="detail" />
+  </div>
+</template>
+
+<script>
+import ViewMixins from '@/mixins/view'
+export default {
+  mixins: [ViewMixins],
+  metaInfo: { title: '复学' },
+  data() {
+    return {
+      fields: [
+        { name: 'form.personal_name', label: '姓名' },
+        { name: 'form.class_name', label: '班级' },
+        { name: 'form.sofia_id', label: 'Sofia ID' },
+        { name: 'form.semester_name', label: '复学时间' }
+      ]
+    }
+  }
+}
+</script>

src/views/study/PauseEdit.vue

+<template>
+  <div class="main">
+    <v-form ref="form" :model="ruleForm" :fields="fields" @submit="onSubmit"></v-form>
+    <div class="fixed-box">
+      <div class="fixed-inner">
+        <van-button class="fixed-button" :loading="submitLoading" @click="handleSubmit">提交申请</van-button>
+        <van-button class="fixed-button" @click="onRemove" v-if="hasAbort">撤回申请</van-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import editMixins from '@/mixins/edit'
+export default {
+  mixins: [editMixins],
+  metaInfo: { title: '休学申请' },
+  data() {
+    return {
+      ruleForm: {
+        personal_name: '',
+        class_name: '',
+        sofia_id: '',
+        semester_name: '',
+        reason: ''
+      }
+    }
+  },
+  computed: {
+    fields() {
+      return [
+        { name: 'personal_name', label: '姓名', readonly: true },
+        { name: 'class_name', label: '班级', readonly: true },
+        { name: 'sofia_id', label: 'Sofia ID', readonly: true },
+        {
+          name: 'semester_name',
+          label: '休学时间',
+          fieldType: 'radio',
+          values: this.semesterList,
+          rules: [{ required: true, message: '请选择休学时间' }]
+        },
+        {
+          name: 'reason',
+          label: '休学原因',
+          type: 'textarea',
+          autosize: { maxHeight: 200, minHeight: 140 },
+          rules: [{ required: true, message: '请输入休学原因' }]
+        }
+      ]
+    }
+  },
+  methods: {
+    onSubmit(data) {
+      data.affair_id = this.channelId
+      this.isEdit ? this.handleUpdate(data) : this.handleAdd(data)
+    }
+  },
+  beforeMount() {
+    if (this.isEdit) {
+      this.getDetail()
+    } else {
+      // 获取学生信息
+      this.getStudent()
+    }
+  }
+}
+</script>

src/views/study/PauseList.vue

+<template>
+  <div class="list">
+    <van-list v-model="loading" :finished="finished" @load="onLoad" v-if="list.length">
+      <card
+        title="休学"
+        v-for="item in list"
+        :data="item"
+        :key="item.id"
+        @edit="onEdit"
+        @view="onView"
+        @remove="onRemove"
+      >
+      </card>
+    </van-list>
+    <div class="empty" v-else>您还没有申请休学</div>
+    <div class="fixed-box">
+      <div class="fixed-inner">
+        <div class="fixed-button" @click="handleAdd">申请休学</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import listMixins from '@/mixins/list'
+export default {
+  mixins: [listMixins],
+  metaInfo: { title: '休学' },
+  data() {
+    return {}
+  },
+  methods: {
+    // 创建
+    handleAdd() {
+      this.$router.push({ name: 'studyPauseAdd', query: { channel_id: this.channelId } })
+    },
+    // 编辑
+    onEdit(data) {
+      this.$router.push({ name: 'studyPauseEdit', params: { id: data.id }, query: { channel_id: this.channelId } })
+    },
+    // 查看
+    onView(data) {
+      this.$router.push({ name: 'studyPauseView', params: { id: data.id }, query: { channel_id: this.channelId } })
+    }
+  }
+}
+</script>
+

src/views/study/PauseView.vue

+<template>
+  <div class="main" v-if="!loading">
+    <form-view :fields="fields" :data="detail" />
+  </div>
+</template>
+
+<script>
+import ViewMixins from '@/mixins/view'
+export default {
+  mixins: [ViewMixins],
+  metaInfo: { title: '休学' },
+  data() {
+    return {
+      fields: [
+        { name: 'form.personal_name', label: '姓名' },
+        { name: 'form.class_name', label: '班级' },
+        { name: 'form.sofia_id', label: 'Sofia ID' },
+        { name: 'form.semester_name', label: '休学时间' },
+        { name: 'form.reason', label: '休学原因' }
+      ]
+    }
+  }
+}
+</script>

vue.config.js

@@ -10,7 +10,7 @@ module.exports = {
     },
     proxy: {
       '/api': {
-        target: 'https://ehall.ezijing.com'
+        target: 'https://ehall2.ezijing.com'
       }
     }
   }