feat: 注册页面

2022-02-24 14:43:49 +08:00 · 2022-02-24 14:43:49 +08:00 · 35a75281b1
parent 205d81017e
commit 35a75281b1
14 changed files with 178 additions and 133 deletions
--- a/src/App.vue
+++ b/src/App.vue
@ -61,4 +61,14 @@ export default {
  display: none;
 }

+.text-cut-2{
+  text-overflow: -o-ellipsis-lastline;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
 </style>
--- a/src/api/myexamCount/index.js
+++ b/src/api/myexamCount/index.js
@ -1,7 +1,7 @@
 import request from '@/utils/request'

 const countApi = {
-    myexamCount: 'study/data/home' // 学习统计
+    myexamCount: 'data/person/learningStatistics' // 学习统计
 }

 export function getMyexamCount (params) {
--- a/src/components/DbReport/index.vue
+++ b/src/components/DbReport/index.vue
@ -8,17 +8,17 @@
              <a-progress
                type="circle"
                :percent="(data.score / data.totalScore) * 100"
-                :format="percent => `${data.score }分`"
+                :format="percent => `${data.score || 0}分`"
              />
            </a-col>
            <a-col class="count-info" :span="12">
              <div>
-                共{{ data.totalQuestions }}道题，答对{{ data.rightQuestions }}道。总用时{{
-                  data.answerTime
+                共{{ data.totalQuestions || 0 }}道题，答对{{ data.rightQuestions || 0 }}道。总用时{{
+                  (data.answerTime/60).toFixed(2)
                }}分钟
              </div>
-              <div>已击败考生{{ data.beat }}%的考生</div>
-              <div>全站平均得分{{ data.avgScore }}分</div>
+              <div>已击败考生{{ data.beat || 0 }}%的考生</div>
+              <div>全站平均得分{{ data.avgScore || 0 }}分</div>
            </a-col>
          </a-row>
        </a-card>
--- a/src/components/SearchCom/index.vue
+++ b/src/components/SearchCom/index.vue
@ -24,7 +24,8 @@

        </a-form-item>
      </a-col>
-      <a-col :md="6" :sm="24">
+      <!-- <a-col :md="6" :sm="24"> -->
+      <a-col>
        <a-button type="primary" @click="handleQuery">查询</a-button>
        <a-button @click="resetQuery">重置</a-button>
      </a-col>
--- a/src/permission.js
+++ b/src/permission.js
@ -10,7 +10,7 @@ import { ACCESS_TOKEN } from '@/store/mutation-types'

 import { Modal } from 'ant-design-vue' // NProgress Configuration
 NProgress.configure({ showSpinner: false })
-const whiteList = ['login', 'register', 'registerResult'] // no redirect whitelist
+const whiteList = ['login', 'register', 'registerResult', 'setting'] // no redirect whitelist
 const loginRoutePath = '/user/login'
 // 无默认首页的情况
 const defaultRoutePath = '/welcome'
--- a/src/router/generator-routers.js
+++ b/src/router/generator-routers.js
@ -34,7 +34,7 @@ const notFoundRouter = {
 }

 // 个人中心页面
-const userAccount = [
+export const userAccount = [
  // account
  {
    'name': 'account',
@ -224,6 +224,7 @@ export const generator = (routerMap, parent) => {
      // Recursion
      currentRouter.children = generator(item.children, currentRouter)
    }
+    console.log('currentRouter', currentRouter)
    return currentRouter
  })
 }
--- a/src/views/account/center/Index.vue
+++ b/src/views/account/center/Index.vue
@ -144,10 +144,10 @@ export default {
  },
  methods: {
    getTeams () {
-      this.$http.get('/workplace/teams').then(res => {
-        this.teams = res.result
-        this.teamSpinning = false
-      })
+      // this.$http.get('/workplace/teams').then(res => {
+      //   this.teams = res.result
+      //   this.teamSpinning = false
+      // })
    },

    handleTabChange (key, type) {
--- a/src/views/mycourse/mycourseList/MyCourseList.vue
+++ b/src/views/mycourse/mycourseList/MyCourseList.vue
@ -7,10 +7,11 @@
        @search="handleRefresh"
        @reset="
          () => {
-            queryParam = {}
-            handleRefresh()
+            queryParam = {};
+            handleRefresh();
          }
-        "></SearchCom>
+        "
+      ></SearchCom>
    </div>
    <br />
    <s-table
@ -18,7 +19,8 @@
      :pageSize="5"
      :columns="columns"
      :data="loadData"
-      :rowKey="record => record.id">
+      :rowKey="record => record.id"
+    >
      <span slot="index" slot-scope="text, record, index">
        {{ index + 1 }}
      </span>
@ -37,9 +39,7 @@
      <template slot="schedule" slot-scope="text, record">
        <a-progress :percent="record.schedule" />
      </template>
-      <template slot="learnHours" slot-scope="text, record">
-        {{ record.learnHours }}小时
-      </template>
+      <template slot="learnHours" slot-scope="text, record">{{ record.learnHours }}小时</template>
      <span slot="action" slot-scope="text, record">
        <a-popconfirm
          v-if="record.status === 1"
@ -59,6 +59,7 @@
 </template>

 <script>
+import moment from 'moment'
 import { reqMyCourseList } from '@/api/mycourse/index'
 import { dictionaryDropDown } from '@/api/sys/dictionaryItem'
 import { dictToTree } from '@/utils/util'
@ -103,7 +104,11 @@ export default {
        },
        {
          title: '开始时间',
-          dataIndex: 'startDate'
+          dataIndex: 'startDate',
+          customRender: text => {
+            if (!text) return '-'
+            return moment(text).format('YYYY-MM-DD')
+          }
        },
        {
          title: '课程状态',
@ -151,7 +156,7 @@ export default {
    },
    // 获取数据词典
    dictionaryDropDown () {
-      dictionaryDropDown({ dictionaryCode: '0009' }).then((res) => {
+      dictionaryDropDown({ dictionaryCode: '0009' }).then(res => {
        this.queryOptions[1].options = dictToTree(res.data, [], 0)
        this.loading = false
      })
@ -174,7 +179,8 @@ export default {
        row: row,
        callback: function () {
          _this.$refs.table.refresh()
-      } })
+        }
+      })
    },
    // 继续学习
    handlerContinue (row) {
--- a/src/views/myexamCount/index.vue
+++ b/src/views/myexamCount/index.vue
@ -1,46 +1,45 @@
 <template>
  <a-row :gutter="24">
    <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
-      <chart-card :loading="loading" title="" :total="data.totalClassHour">
+      <chart-card :loading="loading" title="" :total="data.sumClassHour">
        <template slot="footer">当前累计学时</template>
      </chart-card>
    </a-col>
    <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
-      <chart-card :loading="loading" title="" :total="data.totalCourse">
+      <chart-card :loading="loading" title="" :total="data.sumCourse">
        <template slot="footer">累计学习课程</template>
      </chart-card>
    </a-col>
    <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
-      <chart-card :loading="loading" title="" :total="data.completeCourse">
+      <chart-card :loading="loading" title="" :total="data.completionCourse">
        <template slot="footer">结业课程</template>
      </chart-card>
    </a-col>
    <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
-      <chart-card :loading="loading" title="" :total="data.examSize">
+      <chart-card :loading="loading" title="" :total="data.examCount">
        <template slot="footer">考试次数</template>
      </chart-card>
    </a-col>
-    <a-col
-      :span="24"
-      :style="{ marginBottom: '24px' }">
+    <a-col :span="24" :style="{ marginBottom: '24px' }">
      <a-card :bordered="false" :style="{ height: '100%' }">
        <div class="flex-center" style="justify-content: flex-start;" slot="title">
          <h4 style="margin: 0;">年度学时完成情况</h4>
-          <div style="flex: 0 0 220px;margin: 0 10px;"><a-progress :percent="data.yearClassHourSituation * 100" :show-info="false" /></div>
-          <h4 style="margin: 0;">{{ data.yearTotalClassHour }}学时/{{ data.yearClassHourRequi }}学时</h4>
+          <div style="flex: 0 0 220px;margin: 0 10px;">
+            <a-progress
+              :percent="(data.yearClassHour / data.planClassHour) * 100"
+              :show-info="false"
+            />
+          </div>
+          <h4 style="margin: 0;">{{ data.yearClassHour }}学时/{{ data.planClassHour }}学时</h4>
        </div>
      </a-card>
    </a-col>
-    <a-col
-      :span="24"
-      :style="{ marginBottom: '24px' }">
+    <a-col :span="24" :style="{ marginBottom: '24px' }">
      <a-card :bordered="false" title="学时统计图" :style="{ height: '100%' }">
        <v-chart class="chart" :option="chartOptions" autoresize />
      </a-card>
    </a-col>
-    <a-col
-      :span="24"
-      :style="{ marginBottom: '24px' }">
+    <a-col :span="24" :style="{ marginBottom: '24px' }">
      <a-card :bordered="false" title="所选课程的成绩情况" :style="{ height: '100%' }">
        <a-table
          ref="table"
@ -48,13 +47,14 @@
          :columns="columns"
          :showPagination="false"
          :data-source="data.courseList"
-          :rowKey="record => record.courseId">
+          :rowKey="record => record.courseId"
+        >
          <template slot="trainSdate" slot-scope="text, record">
            {{ record.trainSdate }}至{{ record.trainEdate }}
          </template>
-          <span slot="courseType" slot-scope="text, record">
-            <a-tag v-if="record.courseType === 1" color="blue">选修</a-tag>
-            <a-tag v-if="record.courseType === 0" color="red">必修</a-tag>
+          <span slot="trainType" slot-scope="text, record">
+            <a-tag v-if="record.trainType === 1" color="blue">选修</a-tag>
+            <a-tag v-else-if="record.trainType === 0" color="red">必修</a-tag>
            <template v-else>-</template>
          </span>
          <span slot="status" slot-scope="text, record">
@ -72,7 +72,8 @@
 </template>

 <script>
-import "echarts";
+import moment from 'moment'
+import 'echarts'
 import VChart, { THEME_KEY } from 'vue-echarts'
 import {
  ChartCard,
@ -111,16 +112,19 @@ export default {
      columns: [
        {
          title: '课程名称',
-          dataIndex: 'courseName'
+          dataIndex: 'name'
        },
        {
          title: '课程类别',
-          dataIndex: 'courseType',
-          scopedSlots: { customRender: 'courseType' }
+          dataIndex: 'trainType',
+          scopedSlots: { customRender: 'trainType' }
        },
        {
          title: '开始时间',
-          dataIndex: 'startTime'
+          dataIndex: 'startDate',
+          customRender: function (text, record, index) {
+            return moment(text).format('YYYY-MM-DD')
+          }
        },
        {
          title: '课程状态',
@ -129,11 +133,14 @@ export default {
        },
        {
          title: '学时',
-          dataIndex: 'studyTime'
+          dataIndex: 'learnHours',
+          customRender: function (text, record, index) {
+            return `${text || 0}小时`
+          }
        },
        {
          title: '考试成绩',
-          dataIndex: 'testResult'
+          dataIndex: 'score'
        },
        {
          title: '操作',
@ -154,7 +161,7 @@ export default {
        console.log('data', res)
        this.data = res.data
        this.loading = false
-        this.initChart(res.data)
+        this.initChart(res.data.classHourList)
      })
    },
    initChart (data) {
@ -165,7 +172,7 @@ export default {
        color: ['#1890ff'],
        xAxis: {
          type: 'category',
-          data: ['必修课程', '选修课程', '必须公告']
+          data: data.map(item => item.name)
        },
        yAxis: {
          type: 'value'
@ -181,7 +188,7 @@ export default {
            name: '课时',
            type: 'bar',
            barMaxWidth: 30,
-            data: [data.yearClassHour1, data.yearClassHour2, data.yearClassHour3],
+            data: data.map(item => item.classHour),
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
--- a/src/views/mypractice/index.vue
+++ b/src/views/mypractice/index.vue
@ -36,11 +36,13 @@
            :xs="12"
            v-for="(j, k) in item.list"
            :key="`${index}-${k}`">
-            <a-card hoverable style="width: 100%; margin-bottom: 15px;">
-              <div class="flex-center"><h4>{{ j.courseName }}</h4></div>
-              <div class="flex-center" style="margin-top: 10px;">
+            <a-card hoverable :bodyStyle="{height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }" style="width: 100%; margin-bottom: 15px;height: 100px;">
+              <div>
+                <div class="flex-center"><h4 class="text-cut-2">{{ j.courseName }}</h4></div>
+                <div class="flex-center">
                  <a-button @click="handlerStart(j)" type="primary" size="small" round>开始答题</a-button>
                </div>
+              </div>
            </a-card>
          </a-col>
        </a-row>
--- a/src/views/myreport/index.vue
+++ b/src/views/myreport/index.vue
@ -8,10 +8,10 @@
          :headStyle="{ paddingLeft: '0px !important' }"
        >
          <template slot="title">
-            <h3>{{ viewReport.courseName }}</h3>
+            <h3 v-if="viewReport.courseName">{{ viewReport.courseName }}</h3>
            <div class="sub-info">
              <span>交卷时间：{{ viewReport.submitTime }}</span>
-              <span v-if="viewReport.totalScore">答题用时：{{ viewReport.totalScore }}</span>
+              <span v-if="viewReport.totalScore">答题用时：{{ (viewReport.answerTime/60).toFixed(2) || 0 }}分钟</span>
            </div>
            <DbReport :data="viewReport"></DbReport>
          </template>
@ -24,7 +24,7 @@
          :headStyle="{ paddingLeft: '0px !important' }"
        >
          <template slot="title">
-            <h4>{{ viewReport.courseName }}</h4>
+            <h4 v-if="viewReport.courseName">{{ viewReport.courseName }}</h4>
            <!-- <div class="sub-info"><span>选择题30/30</span><span>选择题30/30</span><span>选择题30/30</span></div> -->
          </template>
          <template v-for="(item, index) in questionList">
@ -43,7 +43,6 @@
 import DbQuestionInfoItem from '@/components/DbQuestionInfoItem/index.vue'
 import DbReport from '@/components/DbReport/index.vue'
 import { answerViewReport, answerViewResolution } from '@/api/practice/report'
-import { reqExamViewReport, reqExamViewResolution } from '@/api/myexam/exam.js'

 export default {
  components: { DbQuestionInfoItem, DbReport },
--- a/src/views/user/Login.vue
+++ b/src/views/user/Login.vue
@ -1,6 +1,12 @@
 <template>
  <div class="main">
-    <a-form-model ref="ruleForm" class="user-layout-login" :model="form" :rules="rules" @submit.prevent="handleSubmit">
+    <a-form-model
+      ref="ruleForm"
+      class="user-layout-login"
+      :model="form"
+      :rules="rules"
+      @submit.prevent="handleSubmit"
+    >
      <a-form-model-item>
        <a-select v-model="form.roleCode" placeholder="请选择">
          <a-select-option value="student">学员</a-select-option>
@ -18,7 +24,14 @@
        </a-input-password>
      </a-form-model-item>
      <a-form-model-item>
-        <a-button block type="primary" size="large" html-type="submit" :loading="loading">登录</a-button>
+        <a-button block type="primary" size="large" html-type="submit" :loading="loading">
+          登录
+        </a-button>
+      </a-form-model-item>
+      <a-form-model-item style="text-align: center;">
+        <a-button @click="handlerRegister" type="link">
+          注册
+        </a-button>
      </a-form-model-item>
    </a-form-model>
  </div>
@ -54,17 +67,25 @@ export default {
      this.$refs.ruleForm.validate(valid => {
        const { form } = this
        if (valid) {
-          this.Login(form).then(() => {
+          this.Login(form).then(
+            () => {
              this.loginSuccess()
-          }, () => {
+            },
+            () => {
              this.requestFailed()
-          })
+            }
+          )
        } else {
          this.loading = false
          return false
        }
      })
    },
+    handlerRegister () {
+      this.$router.push({
+        path: '/user/register'
+      })
+    },
    loginSuccess (res) {
      this.loading = false
      this.$router.push({ path: '/' })
@ -83,5 +104,4 @@ export default {
 }
 </script>

-<style lang="less" scoped>
-</style>
+<style lang="less" scoped></style>
--- a/src/views/user/Register.vue
+++ b/src/views/user/Register.vue
@ -6,14 +6,14 @@
        <a-input
          size="large"
          type="text"
-          placeholder="邮箱"
-          v-decorator="['email', {rules: [{ required: true, type: 'email', message: '请输入邮箱地址' }], validateTrigger: ['change', 'blur']}]"
+          placeholder="用户名"
+          v-decorator="['username', {rules: [{ required: true, message: '请输入用户名' }], validateTrigger: ['change', 'blur']}]"
        ></a-input>
      </a-form-item>

      <a-popover
        placement="rightTop"
-        :trigger="['focus']"
+        :trigger="['focus', 'click']"
        :getPopupContainer="(trigger) => trigger.parentElement"
        v-model="state.passwordLevelChecked">
        <template slot="content">
@ -21,7 +21,7 @@
            <div :class="['user-register', passwordLevelClass]">强度：<span>{{ passwordLevelName }}</span></div>
            <a-progress :percent="state.percent" :showInfo="false" :strokeColor=" passwordLevelColor " />
            <div style="margin-top: 10px;">
-              <span>请至少输入 6 个字符。请不要使用容易被猜到的密码。</span>
+              <span>请输入至少包括大写、小写、数字、特殊符号中的三种，密码长度至少为8位。</span>
            </div>
          </div>
        </template>
@ -29,8 +29,8 @@
          <a-input-password
            size="large"
            @click="handlePasswordInputClick"
-            placeholder="至少6位密码，区分大小写"
-            v-decorator="['password', {rules: [{ required: true, message: '至少6位密码，区分大小写'}, { validator: this.handlePasswordLevel }], validateTrigger: ['change', 'blur']}]"
+            placeholder="请输入至少包括大写、小写、数字、特殊符号中的三种，密码长度至少为8位。"
+            v-decorator="['password', {rules: [{ required: true, message: '请输入至少包括大写、小写、数字、特殊符号中的三种，密码长度至少为8位。'}, { validator: this.handlePasswordLevel }], validateTrigger: ['change', 'blur']}]"
          ></a-input-password>
        </a-form-item>
      </a-popover>
@ -42,23 +42,10 @@
          v-decorator="['password2', {rules: [{ required: true, message: '至少6位密码，区分大小写' }, { validator: this.handlePasswordCheck }], validateTrigger: ['change', 'blur']}]"
        ></a-input-password>
      </a-form-item>
-
      <a-form-item>
        <a-input size="large" placeholder="11 位手机号" v-decorator="['mobile', {rules: [{ required: true, message: '请输入正确的手机号', pattern: /^1[3456789]\d{9}$/ }, { validator: this.handlePhoneCheck } ], validateTrigger: ['change', 'blur'] }]">
-          <a-select slot="addonBefore" size="large" defaultValue="+86">
-            <a-select-option value="+86">+86</a-select-option>
-            <a-select-option value="+87">+87</a-select-option>
-          </a-select>
        </a-input>
      </a-form-item>
-      <!--<a-input-group size="large" compact>
-            <a-select style="width: 20%" size="large" defaultValue="+86">
-              <a-select-option value="+86">+86</a-select-option>
-              <a-select-option value="+87">+87</a-select-option>
-            </a-select>
-            <a-input style="width: 80%" size="large" placeholder="11 位手机号"></a-input>
-          </a-input-group>-->
-
      <a-row :gutter="16">
        <a-col class="gutter-row" :span="16">
          <a-form-item>
@ -76,7 +63,12 @@
            v-text="!state.smsSendBtn && '获取验证码'||(state.time+' s')"></a-button>
        </a-col>
      </a-row>
-
+      <a-form-item>
+        <a-input size="large" placeholder="请您输入单位邀请码" v-decorator="['code', {rules: [{ required: true, message: '请输入正确的邀请码' }], validateTrigger: ['blur'] }]"></a-input>
+      </a-form-item>
+      <a-form-item>
+        <a-input size="large" disabled placeholder="输入邀请码以后自动绑定" v-decorator="['unit']"></a-input>
+      </a-form-item>
      <a-form-item>
        <a-button
          size="large"
@ -85,7 +77,7 @@
          class="register-button"
          :loading="registerBtn"
          @click.stop.prevent="handleSubmit"
-          :disabled="registerBtn">注册
+          :disabled="registerBtn">立即注册
        </a-button>
        <router-link class="login" :to="{ name: 'login' }">使用已有账户登录</router-link>
      </a-form-item>
@ -101,7 +93,8 @@ const levelNames = {
  0: '低',
  1: '低',
  2: '中',
-  3: '强'
+  3: '强',
+  4: '极强'
 }
 const levelClass = {
  0: 'error',
@ -154,18 +147,20 @@ export default {
      if (/[0-9]/.test(value)) {
        level++
      }
-      // 判断字符串中有没有字母
-      if (/[a-zA-Z]/.test(value)) {
+      if (/[a-z]/.test(value)) {
+        level++
+      }
+      if (/[A-Z]/.test(value)) {
        level++
      }
      // 判断字符串中有没有特殊符号
-      if (/[^0-9a-zA-Z_]/.test(value)) {
+      if (/[^0-9a-zA-Z]/.test(value)) {
        level++
      }
      this.state.passwordLevel = level
-      this.state.percent = level * 30
-      if (level >= 2) {
+      this.state.percent = level * 25
      if (level >= 3) {
+        if (level >= 4) {
          this.state.percent = 100
        }
        callback()
@ -210,7 +205,7 @@ export default {
      validateFields({ force: true }, (err, values) => {
        if (!err) {
          state.passwordLevelChecked = false
-          $router.push({ name: 'registerResult', params: { ...values } })
+          $router.push({ name: 'registerResult', query: { ...values } })
        }
      })
    },
--- a/src/views/user/RegisterResult.vue
+++ b/src/views/user/RegisterResult.vue
@ -1,30 +1,32 @@
 <template>
-  <a-result
-    :isSuccess="true"
-    :content="false"
-    :title="email"
-    :sub-title="description">
-
+  <div>
+    <a-result :isSuccess="true" :content="false" :title="email" :sub-title="description">
      <template #extra>
-      <a-button size="large" type="primary">查看邮箱</a-button>
+        <a-button size="large" type="primary" style="margin-right: 8px" @click="goUserInfo">
+          完善信息
+        </a-button>
        <a-button size="large" style="margin-left: 8px" @click="goHomeHandle">返回首页</a-button>
      </template>
-
    </a-result>
+    <PersonForm ref="personForm"></PersonForm>
+  </div>
 </template>

 <script>
+import PersonForm from '@/views/person/PersonOrgForm.vue'
+
 export default {
  name: 'RegisterResult',
+  components: { PersonForm },
  data () {
    return {
-      description: '激活邮件已发送到你的邮箱中，邮件有效期为24小时。请及时登录邮箱，点击邮件中的链接激活帐户。',
+      description: '您的账号已经注册成功,但是还有很多信息未完善,您可以继续完善您的个人信息~',
      form: {}
    }
  },
  computed: {
    email () {
-      const v = this.form && this.form.email || 'xxx'
+      const v = (this.form && this.form.email) || 'xxx'
      return `你的账户：${v} 注册成功`
    }
  },
@ -34,11 +36,13 @@ export default {
  methods: {
    goHomeHandle () {
      this.$router.push({ name: 'login' })
+    },
+    goUserInfo () {
+      // 打开编辑弹出框
+      this.$refs.personForm.registerEdit({})
    }
  }
 }
 </script>

-<style scoped>
-
-</style>
+<style scoped></style>