git

package-lock.json

@@ -2104,6 +2104,11 @@
       "integrity": "sha512-0FcBfdcmaumGPQ0qPn7Q5qTgz/ooXgIyp1rf8ik5bGX8mpE2YHjC0P/eyQvxu1GURYQgq9ozf2mteQ5ZD9YiyQ==",
       "dev": true
     },
+    "animate.css": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/animate.css/-/animate.css-4.1.1.tgz",
+      "integrity": "sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ=="
+    },
     "ansi-colors": {
       "version": "3.2.4",
       "resolved": "https://registry.npmmirror.com/ansi-colors/-/ansi-colors-3.2.4.tgz",
@@ -6161,8 +6166,8 @@
     },
     "image-size": {
       "version": "0.5.5",
-      "resolved": "https://registry.npmmirror.com/image-size/-/image-size-0.5.5.tgz",
-      "integrity": "sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==",
+      "resolved": "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz",
+      "integrity": "sha1-Cd/Uq50g4p6xw+gLiZA3jfnjy5w=",
       "dev": true,
       "optional": true
     },
@@ -6876,7 +6881,7 @@
     },
     "less": {
       "version": "4.1.2",
-      "resolved": "https://registry.npmmirror.com/less/-/less-4.1.2.tgz",
+      "resolved": "https://registry.npmjs.org/less/-/less-4.1.2.tgz",
       "integrity": "sha512-EoQp/Et7OSOVu0aJknJOtlXZsnr8XE8KwuzTHOLeVSEx8pVWUICc8Q0VYRHgzyjX78nMEyC/oztWFbgyhtNfDA==",
       "dev": true,
       "requires": {
@@ -6927,7 +6932,7 @@
     },
     "less-loader": {
       "version": "5.0.0",
-      "resolved": "https://registry.npmmirror.com/less-loader/-/less-loader-5.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/less-loader/-/less-loader-5.0.0.tgz",
       "integrity": "sha512-bquCU89mO/yWLaUq0Clk7qCsKhsF/TZpJUzETRvJa9KSVEL9SO3ovCvdEHISBhrC81OwC8QSVX7E0bzElZj9cg==",
       "dev": true,
       "requires": {
@@ -6938,8 +6943,8 @@
       "dependencies": {
         "clone": {
           "version": "2.1.2",
-          "resolved": "https://registry.npmmirror.com/clone/-/clone-2.1.2.tgz",
-          "integrity": "sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==",
+          "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
+          "integrity": "sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18=",
           "dev": true
         }
       }

package.json

@@ -8,6 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "animate.css": "^4.1.1",
     "axios": "^0.26.0",
     "core-js": "^3.6.5",
     "vant": "^2.12.44",
@@ -39,7 +40,9 @@
     "parserOptions": {
       "parser": "babel-eslint"
     },
-    "rules": {}
+    "rules": {
+        "no-unused-vars":"off"
+    }
   },
   "browserslist": [
     "> 1%",

src/App.vue

@@ -6,14 +6,29 @@
 </template>
 
 <script>
-import Tabber from './components/Tabber.vue';
+import { UserLogin } from './util/api'
+
+import Tabber from './components/Tabber.vue'
 
 export default {
   name: 'App',
   components: {
     Tabber
+  },
+  mounted() {
+    // this.onLogin()
+  },
+  methods: {
+    // onLogin() {
+    //   UserLogin('123').then((e) => {
+    //     console.log(e)
+    //     console.log(22222222222222222222222)
+    //     let tokens = e.token
+    //     this.$store.commit('SET_USER_INFO', { token: tokens })
+    //   })
+    // }
   }
-};
+}
 </script>
 
 <style>

src/assets/icon/courseIcon.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1645417710161" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9196" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css"></style></defs><path d="M113.371429 160.914286l519.314285-40.228572-3.657143 120.685715 179.2 3.657142-7.314285 738.742858H113.371429z" fill="#BFD5EC" p-id="9197"></path><path d="M800.914286 1002.057143l-687.542857-3.657143c-7.314286 0-14.628571-7.314286-14.628572-14.628571V160.914286c0-7.314286 3.657143-14.628571 14.628572-14.628572l519.314285-40.228571c3.657143 0 7.314286 0 10.971429 3.657143 3.657143 3.657143 3.657143 7.314286 3.657143 10.971428l-3.657143 102.4H804.571429c7.314286 0 14.628571 7.314286 14.628571 14.628572l-7.314286 742.4c3.657143 14.628571-3.657143 21.942857-10.971428 21.942857z m-669.257143-36.571429l654.628571 3.657143 7.314286-709.485714h-164.571429c-3.657143 0-7.314286-3.657143-10.971428-3.657143-3.657143-3.657143-3.657143-7.314286-3.657143-10.971429l3.657143-102.4-486.4 36.571429v786.285714z" fill="#BFD5EC" p-id="9198"></path><path d="M881.371429 1024H138.971429c-25.6 0-47.542857-21.942857-47.542858-47.542857V138.971429l512 18.285714v47.542857L138.971429 186.514286v789.942857h746.057142V186.514286H694.857143V138.971429h186.514286c25.6 0 47.542857 21.942857 47.542857 47.542857v789.942857c0 25.6-21.942857 47.542857-47.542857 47.542857z m0 0" fill="#4C8AC2" p-id="9199"></path><path d="M694.857143 186.514286V47.542857L138.971429 153.6v705.828571H91.428571V117.028571L694.857143 0c25.6 0 47.542857 21.942857 47.542857 47.542857v138.971429H694.857143z m0 0" fill="#4C8AC2" p-id="9200"></path><path d="M299.885714 164.571429v292.571428c0 10.971429 14.628571 18.285714 21.942857 10.971429l80.457143-73.142857c7.314286-7.314286 21.942857-7.314286 29.257143 0l76.8 73.142857c7.314286 7.314286 21.942857 3.657143 21.942857-10.971429v-292.571428H299.885714z m186.514286 226.742857l-54.857143-51.2c-7.314286-7.314286-21.942857-7.314286-29.257143 0l-54.857143 51.2V186.514286h138.971429v204.8z m0 0M277.942857 640H438.857143c14.628571 0 21.942857-10.971429 21.942857-21.942857 0-14.628571-10.971429-21.942857-21.942857-21.942857H277.942857c-14.628571 0-21.942857 10.971429-21.942857 21.942857-3.657143 10.971429 7.314286 21.942857 21.942857 21.942857z m248.685714 0h186.514286c14.628571 0 21.942857-10.971429 21.942857-21.942857 0-14.628571-10.971429-21.942857-21.942857-21.942857h-186.514286c-14.628571 0-21.942857 10.971429-21.942857 21.942857s10.971429 21.942857 21.942857 21.942857z m-248.685714 117.028571h347.428572c14.628571 0 21.942857-10.971429 21.942857-21.942857 0-14.628571-10.971429-21.942857-21.942857-21.942857H277.942857c-14.628571 0-21.942857 10.971429-21.942857 21.942857-3.657143 10.971429 7.314286 21.942857 21.942857 21.942857z m464.457143 69.485715H277.942857c-14.628571 0-21.942857 10.971429-21.942857 21.942857 0 14.628571 10.971429 21.942857 21.942857 21.942857h464.457143c10.971429 0 21.942857-10.971429 21.942857-21.942857s-7.314286-21.942857-21.942857-21.942857z m0 0" fill="#4C8AC2" p-id="9201"></path></svg>

src/assets/icon/register.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1645423147426" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3049" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css"></style></defs><path d="M472.7296 269.6704m-218.5728 0a218.5728 218.5728 0 1 0 437.1456 0 218.5728 218.5728 0 1 0-437.1456 0Z" fill="#80B7F9" p-id="3050"></path><path d="M554.8544 506.6752H390.656c-176.5888 0-319.744 143.1552-319.744 319.744 0 63.0784 51.1488 114.176 114.176 114.176h575.2832c63.0784 0 114.176-51.1488 114.176-114.176 0-176.5888-143.104-319.744-319.6928-319.744z" fill="#80B7F9" p-id="3051"></path><path d="M747.52 771.072m-202.2912 0a202.2912 202.2912 0 1 0 404.5824 0 202.2912 202.2912 0 1 0-404.5824 0Z" fill="#95C9FC" p-id="3052"></path><path d="M744.2944 568.8832c-110.1824 1.7408-199.0144 91.5456-199.0144 202.1888 0 71.0144 36.608 133.4272 92.0064 169.5232h123.136c63.0784 0 114.176-51.1488 114.176-114.176-0.0512-105.6768-51.3024-199.3216-130.304-257.536z" fill="#3E8BF8" p-id="3053"></path><path d="M810.4448 730.112H788.48v-21.9136c0-22.6304-18.3296-40.96-40.96-40.96s-40.96 18.3296-40.96 40.96v21.9136h-21.9136c-22.6304 0-40.96 18.3296-40.96 40.96s18.3296 40.96 40.96 40.96H706.56v21.9136c0 22.6304 18.3296 40.96 40.96 40.96s40.96-18.3296 40.96-40.96v-21.9136h21.9136c22.6304 0 40.96-18.3296 40.96-40.96s-18.3296-40.96-40.9088-40.96z" fill="#FFFFFF" p-id="3054"></path></svg>

src/components/ClockIn.vue

@@ -0,0 +1,101 @@
+<template>
+  <div class="Clockln-box">
+    <div class="box1">
+      <img src="https://static.zcool.cn/git_z/z/images/girl.png" alt />
+      <div class="box1-title">2022年度上半年第一期架空线路工程培训课程</div>
+      <div class="box1-time">课程时间</div>
+      <div class="box1-time">2022年2月21日9:00-11:00</div>
+    </div>
+    <div class="myDIV">
+      <div>上课打卡</div>
+      <span>24:00:00</span>
+    </div>
+
+    <img src="../assets/basemap.png" alt width="100%" />
+  </div>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style lang="less" scoped>
+.Clockln-box {
+  background-color: #fff;
+  height: 100%;
+  width: 100vw;
+  .box1 {
+    width: 100%;
+    > img {
+      width: 80px;
+      border-radius: 50%;
+      margin: 0 auto;
+      display: block;
+      padding: 35px 0 20px 0;
+    }
+    &-title {
+      width: 90%;
+      margin: 0 auto;
+      text-align: center;
+      color: #000;
+      font-size: 17px;
+      font-weight: 700;
+      margin-bottom: 30px;
+    }
+    &-time {
+      width: 90%;
+      margin: 0 auto;
+      text-align: center;
+      color: rgb(133, 133, 133);
+      font-size: 13px;
+      line-height: 26px;
+      letter-spacing: 2px;
+    }
+  }
+  .myDIV {
+    margin: 6vh auto auto auto;
+    width: 140px;
+    height: 140px;
+    // margin: 0 auto;
+    border-radius: 100%;
+    background-color: #42a9aa;
+    display: flex;
+    animation: qiandao 3s infinite;
+    flex-direction: column;
+    justify-content: center;
+    text-align: center;
+    > div {
+      width: 100%;
+      margin: 0 auto;
+      color: white;
+      font-size: 19px;
+      margin-bottom: 10px;
+      font-weight: 600;
+    }
+
+    > span {
+      color: white;
+      display: block;
+      font-size: 15px;
+    }
+  }
+  > img {
+    position: fixed;
+    bottom: 7vh;
+  }
+}
+
+@keyframes qiandao {
+  0% {
+    box-shadow: 0 0 10px #0d888a;
+  }
+
+  50% {
+    box-shadow: 0 0 20px #7bdadb;
+  }
+
+  100% {
+    box-shadow: 0 0 10px #0d888a;
+  }
+}
+</style>

src/components/Course.vue

@@ -1,15 +1,38 @@
 <template>
-  <div>
-    <van-cell-group v-for="(item, index) in courseList" :key="index">
-      <van-cell :title="item.name" icon="records" @click="handLogin()" is-link />
-    </van-cell-group>
+  <div class="Course-box">
+    <div>
+      <van-swipe :autoplay="3000">
+        <van-swipe-item v-for="(image, index) in images" :key="index">
+          <van-image width="100%" height="25vh" :src="image" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <!-- list -->
+    <div class="Card-box">
+      <div class="Card-box-top">
+        <img
+          src="https://iknow-pic.cdn.bcebos.com/5ab5c9ea15ce36d316933f0437f33a87e950b16b?x-bce-process%3Dimage%2Fresize%2Cm_lfit%2Cw_600%2Ch_800%2Climit_1%2Fquality%2Cq_85%2Fformat%2Cf_jpg"
+          alt
+        />
+        <div class="Card-box-top-box">
+          <div class="Card-box-top-title">2022年度上半年第一期架空线路工程培训课程</div>
+          <div class="Card-box-top-time">课程时间：2022年2月21日9:00-11:00</div>
+        </div>
+      </div>
+      <div class="Card-box-botton">
+        <div>查看详情</div>
+        <van-icon name="arrow" />
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
+import { getBanner } from '../util/api'
 export default {
   data() {
     return {
+      icon: require('../assets/icon/courseIcon.svg'),
       courseList: [
         { name: '课程阿斯达四方' },
         { name: 'dgdgdgdfgfds' },
@@ -17,12 +40,94 @@ export default {
         { name: '昂贵的法国电视公司提供' },
         { name: '认同感他如果' },
         { name: '课程阿斯好友和用户运营达四方' },
-        { name: '肉体和肉体和人' }
+        { name: '毛概' }
+      ],
+      images: [
+        'https://img.yzcdn.cn/vant/apple-1.jpg',
+        'https://img.yzcdn.cn/vant/apple-2.jpg',
+        'https://img.yzcdn.cn/vant/cat.jpeg'
       ]
-    };
+    }
+  },
+  mounted() {
+    this.onBanner()
+  },
+  methods: {
+    goQuestion() {
+      this.$router.push('/ClockIn')
+    },
+    onBanner() {
+      getBanner({ position: 'Training' }).then((e) => {
+        console.log(e)
+      })
+    }
   }
-};
+}
 </script>
 
 <style lang="less" scoped>
+.Course-box {
+  width: 100vw;
+  .van-swipe {
+    width: 100%;
+    border-radius: 20px;
+
+    height: 25vh;
+    .van-swipe-item {
+    }
+  }
+  .van-cell-group {
+    display: flex;
+  }
+
+  .Card-box {
+    width: 95%;
+    border-radius: 15px;
+    background-color: #fff;
+    margin: 2.4em auto 1em auto;
+    box-shadow: 0 0 15px rgb(214, 214, 214);
+
+    .Card-box-top {
+      display: flex;
+      align-items: center;
+      > img {
+        width: 20vw;
+        border-radius: 50%;
+
+        // padding: 20px;
+      }
+      &-box {
+        // width: 63vw;
+      }
+
+      &-title {
+        font-size: 16px;
+        font-weight: 700;
+        letter-spacing: 1px;
+        padding: 10px;
+      }
+      &-time {
+        font-size: 14px;
+        color: rgb(133, 133, 133);
+        padding: 0px 0 10px 10px;
+      }
+    }
+    .Card-box-botton {
+      width: 90%;
+      margin: 0 auto;
+      border-top: 1px solid rgb(238, 238, 238);
+      display: flex;
+      color: rgb(133, 133, 133);
+      justify-content: space-between;
+
+      > div {
+        padding: 10px 0 10px 0;
+      }
+      .van-icon {
+        position: relative;
+        top: 1.9vh;
+      }
+    }
+  }
+}
 </style>

src/components/Question/Answer.vue

@@ -0,0 +1,63 @@
+<template>
+  <div
+    class="answer-box animate__animated animate__bounceInUp"
+    :class="{active: active}"
+    @click="$emit('click')"
+  >
+    <div>{{opt}}</div>
+    <div class="answer-box-gutter">{{label}}</div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Answer',
+  props: {
+    active: Boolean,
+    option: String,
+    label: String
+  },
+  computed: {
+    opt() {
+      switch (this.option) {
+        case 'true':
+          return ''
+        case 'false':
+          return ''
+        default:
+          return this.option ? `${this.option}:` : ''
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.answer-box {
+  background-color: #f6f6f8;
+  color: #4e5053;
+  border-radius: 100px;
+  display: flex;
+  align-items: center;
+  margin-bottom: 25px;
+  font-size: 14px;
+  font-weight: 400;
+  padding: 1em 2em;
+  // height: 40px;
+
+  & + & {
+    margin-top: 26px;
+    text-align-last: left;
+  }
+
+  &-gutter {
+    margin-left: 1em;
+    line-height: 1.4em;
+  }
+
+  &.active {
+    background-color: #409eff;
+    color: #fff;
+  }
+}
+</style>

src/components/Question/Title.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="question-title">
+    <span>{{`第${this.serialNo}题:`}}</span>
+    <span>{{title}}</span>
+    <span>({{ formatType(qType) }})</span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'QuestionTitle',
+  props: {
+    serialNo: {
+      type: Number,
+      required: true
+    },
+    qType: String,
+    title: String
+  },
+  computed: {
+    content() {
+      return ` 第${this.serailNo}题: ${this.title} `
+    }
+  },
+  methods: {
+    formatType(typ) {
+      switch (typ) {
+        case 'single':
+          return '单选'
+        case 'many':
+          return '多选'
+        case 'judgment':
+          return '判断'
+        default:
+          return '未知题型'
+      }
+    }
+  }
+}
+</script>
+
+
+<style lang="less" scoped>
+.question-title {
+  margin: 1em 0;
+  font-weight: 700;
+  text-align-last: left;
+  letter-spacing: 2px;
+}
+</style>

src/components/Question/index.vue

@@ -0,0 +1,101 @@
+<template>
+  <div class="question-box">
+    <q-title v-bind="qTitleContent"></q-title>
+    <div style="margin-top:3em;">
+      <div class="scroll">
+        <answer
+          v-for="answer in question.answerList"
+          :key="answer.answerId"
+          :active="values.includes(answer.option)"
+          :option="answer.option"
+          :label="answer.content"
+          @click="handleAnswer(answer.option)"
+        ></answer>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Question',
+  components: {
+    Answer: () => import('./Answer.vue'),
+    QTitle: () => import('./Title.vue')
+  },
+  props: {
+    value: {
+      type: [Array, String]
+    },
+    question: {
+      type: Object,
+      default: () => ({
+        rightAnswer: '',
+        answerList: []
+      })
+    },
+    serialNo: {
+      type: Number,
+      required: true
+    }
+  },
+  data() {
+    return {
+      answerValues: {}
+    }
+  },
+  computed: {
+    qTitleContent() {
+      return {
+        serialNo: this.serialNo,
+        title: this.question.title,
+        qType: this.question.optType
+      }
+    },
+    values() {
+      // 为了便捷处理, 不同的问题类型。所有的答案统一处理为数组
+      return Array.isArray(this.value) ? this.value : [this.value]
+    }
+  },
+  methods: {
+    handleAnswer(opt) {
+      const isChecked = this.values.includes(opt)
+
+      // 如果是多选
+      if (this.question.optType === 'many') {
+        if (isChecked) {
+          this.$emit(
+            'input',
+            this.values.filter((x) => x !== opt)
+          )
+        } else {
+          this.$emit('input', [...this.values, opt])
+        }
+      } else {
+        this.$emit('input', opt)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.question-box {
+  width: 80vw;
+  margin: 0 auto;
+  position: relative;
+  top: -15vh;
+  left: -4%;
+  background: white;
+  box-shadow: 0px 8px 38px 0px rgba(0, 0, 0, 0.12);
+  border-radius: 12px;
+  padding: 1em 15px 2em 15px;
+
+  .scroll {
+    padding-top: 5px;
+    width: 100%;
+    height: 46vh;
+    overflow: auto;
+  }
+}
+</style>

src/components/Questionnaire.vue

@@ -0,0 +1,237 @@
+<template>
+  <div>
+    <!-- <img :src="backgeImg" class="ImagStyle" /> -->
+    <popup
+      :show="showPopup"
+      @confirm="submitForm(currentQuestion.rightAnswer)"
+      @cancel="cancelForm"
+      :showCancel="true"
+      :LoadingShow="LoadingShowAAA"
+      :title="'确定提交答案吗'"
+      :confirmText="`提交`"
+      :cancelText="`取消提交`"
+    >
+      <p>确定要提交答案吗？提交后内容不可更改！</p>
+    </popup>
+
+    <!-- 页面标题 -->
+    <div class="VSTD_box" v-if="question.length > 0">
+      <!-- 题的表单 -->
+      <!-- 绑定表单的数据 ruleForm -->
+      <!-- 绑定题的数组 ruleForm.resource[index] -->
+
+      <el-form class="demo-ruleForm">
+        <!-- 循环后端  的所有题 -->
+        <div class="VSTD_box_item">
+          <question
+            :question="currentQuestion"
+            :serial-no="netx + 1"
+            v-model="currentQuestion.rightAnswer"
+          ></question>
+
+          <div class="but-box">
+            <el-form-item class="but-box-form-item">
+              <el-button class="butsize" v-show="ButPrevious" @click="PreviousBut">上一题</el-button>
+              <el-button
+                type="primary"
+                class="butsize"
+                v-show="Butnetx"
+                @click="netxBut(currentQuestion.rightAnswer)"
+              >下一题</el-button>
+              <el-button type="primary" class="butsize" v-show="Butsubmit" @click="firstSubmit">提交</el-button>
+            </el-form-item>
+          </div>
+        </div>
+
+        <!-- 提交函数  -->
+      </el-form>
+    </div>
+
+    <!-- 如果没题就提示没题 -->
+
+    <div v-else>
+      <div class="none" style="margin-left: 0px">
+        <div class="none_img"></div>
+        <h3>暂无试题</h3>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+// import { getQuestionList, submitAnswer } from '@/util/api'
+// import query from '../util/query'
+
+export default {
+  name: 'Questionnaire',
+  components: {
+    Question: () => import('./Question'),
+    Popup: () => import('./Questionnaire/Popup.vue')
+  },
+  data() {
+    return {
+      showPopup: false,
+      LoadingShowAAA: false,
+      // backgeImg: require('../assets/bgc.png'),
+      netx: 0, //第一题第二题下标
+      startData: null,
+      endData: null,
+      ButPrevious: false, //上一题
+      Butsubmit: false, //提交
+      Butnetx: true, //下一题
+
+      indexSum: 0, //第indexSum题
+      // questionId: '', //试题的id
+      title: '', //返回的题目信息
+      question: [], //答题保存的数组
+
+      DSQ: null, //定时器，到时间自动提交
+      DSQTime: 0 //后端返回的结束时间
+    }
+  }
+  //   computed: {
+  //     currentQuestion: {
+  //       get: function () {
+  //         return this.question[this.netx]
+  //       },
+  //       set: function (val) {
+  //         this.$set(this.question, this.netx, val)
+  //       }
+  //     }
+  //   },
+  //   created() {
+  //     // findIndex 用来获取数组中第一个满足条件的元素下标
+  //     var v = this.question.findIndex((value, index, arr) => {
+  //       return value.a == '2'
+  //     })
+  //   },
+
+  //   mounted() {
+  //     this.onSearch()
+  //   },
+
+  //   methods: {
+  //     cancelForm() {
+  //       this.showPopup = false
+  //       console.log('点击了取消')
+  //     },
+
+  //     onSearch() {
+  //       getQuestionList(this.$store.state.user.appid, query('gameId')).then(
+  //         (res) => {
+  //           console.log('题目列表', res)
+  //           const { questionId, title, optType } = res
+  //           this.question = res
+  //           this.questionId = questionId
+  //           this.title = title
+  //           let NBMMSSD = res.map((obj) => {
+  //             let start = 0
+  //             let sum = obj.score
+  //             start += sum
+  //             return start
+  //           })
+  //           let oversum = eval(NBMMSSD.join('+'))
+  //           this.$store.commit('SET_USER_INFO', { totalScore: oversum })
+  //         }
+  //       )
+  //       // let sum = 0
+  //     },
+  //     firstSubmit() {
+  //       this.showPopup = true
+  //     },
+  //     submitForm(e) {
+  //       this.LoadingShowAAA = true
+  //       console.log('🚀 ~ f e', e)
+  //       // const { questionId, rightAnswer } = this.question
+  //       console.log(this.question)
+
+  //       let NEW_ARR = this.question.map((obj) => {
+  //         if (Array.isArray(obj.rightAnswer)) {
+  //           let sliceArray = obj.rightAnswer.slice(1)
+  //           let stringArray = sliceArray.sort().toLocaleString()
+
+  //           return { questionId: obj.questionId, answer: stringArray }
+  //         } else {
+  //           return { questionId: obj.questionId, answer: obj.rightAnswer }
+  //         }
+  //       })
+  //       console.log(NEW_ARR)
+
+  //       submitAnswer(this.$store.state.user.appid, query('gameId'), NEW_ARR).then(
+  //         (e) => {
+  //           console.log(e.score, e)
+  //           this.$store.commit('SET_USER_INFO', { scoreNumb: e.result.score })
+  //           this.$store.commit('SET_USER_INFO', { resultInfo: e.result.resultId })
+  //           this.LoadingShowAAA = false
+  //           this.showPopup = false
+
+  //           this.$router.replace('/Leaderboard') //replace  不记录页面 ，无法返回
+  //         }
+  //       )
+  //     },
+
+  //     netxBut(e) {
+  //       if (e !== null) {
+  //         if (this.netx >= this.question.length - 2) {
+  //           this.Butnetx = false
+  //           this.Butsubmit = true
+  //         }
+  //         if (this.netx <= this.question.length - 2) {
+  //           this.netx = this.netx + 1
+  //           this.ButPrevious = this.ButPrevious = true
+  //           this.indexSum = this.indexSum + 1
+  //         }
+  //       } else {
+  //         this.$message.warning('请选择至少一项')
+  //       }
+  //     },
+
+  //     PreviousBut() {
+  //       if (this.netx >= 1) {
+  //         this.Butnetx = true
+  //         this.Butsubmit = false
+  //       }
+  //       if (this.netx <= 1) {
+  //         this.ButPrevious = this.ButPrevious = false
+  //         this.Butnetx = true
+  //       }
+  //       if (this.netx <= 0) {
+  //         console.log('???', this.netx, this.question.length)
+  //       } else {
+  //         this.netx = this.netx - 1
+  //         this.indexSum = this.indexSum - 1
+  //       }
+  //     }
+  //   }
+}
+</script>
+
+
+
+
+<style lang="less" scoped>
+.ImagStyle {
+  width: 100%;
+}
+
+.VSTD_box {
+  .demo-ruleForm {
+    width: 80%;
+    display: flex;
+    margin: auto;
+    .VSTD_box_item {
+      .but-box {
+        position: absolute;
+        width: 80%;
+        align-items: center;
+        bottom: 10px;
+        margin: auto;
+        .butsize {
+          height: 43px;
+        }
+      }
+    }
+  }
+}
+</style>
+

src/components/Questionnaire/Loading.vue

@@ -0,0 +1,63 @@
+<template>
+  <div v-show="LoadingShow">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      xmlns:xlink="http://www.w3.org/1999/xlink"
+      :width="LoadingWidth"
+      :height="LoadingHeight"
+      viewBox="0 0 40 40"
+      enable-background="new 0 0 40 40"
+      xml:space="preserve"
+    >
+      <!-- loading背景灰色圆圈 -->
+      <path
+        opacity="0.2"
+        fill="#fff"
+        d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946
+      s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634
+      c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z"
+      />
+      <!-- loading白色转动部分 -->
+      <path
+        fill="#fff"
+        d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0
+      C22.32,8.481,24.301,9.057,26.013,10.047z"
+        transform="rotate(42.1171 20 20)"
+      >
+        <animateTransform
+          attributeType="xml"
+          attributeName="transform"
+          type="rotate"
+          from="0 20 20"
+          to="360 20 20"
+          dur="0.5s"
+          repeatCount="indefinite"
+        />
+      </path>
+    </svg>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Loading',
+  props: {
+    LoadingWidth: {
+      type: String,
+      default: '30px'
+    },
+    LoadingHeight: {
+      type: String,
+      default: '30px'
+    },
+    LoadingShow: {
+      type: Boolean,
+      default: false,
+      required: true
+    }
+  }
+}
+</script>
+
+<style>
+</style>

src/components/Questionnaire/Many.vue

@@ -0,0 +1,114 @@
+<template>
+  <div class="div-box">
+    <div class="VSTD_box_item_title">
+      <!-- 题目的信息 -->
+
+      <p style="font-weight:700">
+        第{{ index + 1 }}题：{{ item.title
+        }}
+        <!-- <span>（{{ item.stScore }}分）</span> -->
+        <span>（多选）</span>
+      </p>
+    </div>
+    <!-- v-model="ruleForm.ManyVal" -->
+    <div class="group-box">
+      <el-form-item label=" " class="Single-radio">
+        <el-checkbox-group :change="changeVaal" style="display:grid">
+          <el-checkbox
+            :class="`Single-elradio animate__animated animate__bounceInUp `"
+            v-for="(item, index) in item.answerList"
+            :label="item.option"
+            :key="index"
+          >{{ item.option }}：{{item.content}}</el-checkbox>
+          <!-- <el-checkbox label="F">{{ item.stSelectf }}</el-checkbox> -->
+        </el-checkbox-group>
+      </el-form-item>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Many', //多选题
+  props: {
+    item: {
+      type: Object
+    },
+    ruleForm: {
+      type: Object || Array
+    },
+    index: {
+      type: Number || String,
+      required: true
+    }
+  },
+  data() {
+    return {
+      chilcLisat: []
+    }
+  },
+  methods: {
+    changeVaal(e, v) {
+      console.log(
+        '🚀 ~ file: Questionnaire.vue ~ line 213 ~ change ~ e,v',
+        e,
+        v
+      )
+      console.log('🚀 ~ file: Many.vue ~ line 18 ~ ruleForm', this.ruleForm)
+    }
+  }
+}
+</script>
+<style lang="less" >
+.div-box {
+  width: 87vw;
+  height: 70vh;
+  // border: 1px solid black;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
+  border-radius: 10px;
+  position: relative;
+  top: -12vh;
+  left: -3vw;
+  .VSTD_box_item_title {
+    text-align-last: left;
+    letter-spacing: 2px;
+    background-color: #ffffff;
+    height: 12vh;
+    padding: 10px 20px 0px 20px;
+    position: relative;
+    top: -15px;
+    width: 87%;
+    margin: 0 auto;
+    border-radius: 10px;
+  }
+
+  .group-box {
+    .el-radio.is-bordered + .el-radio.is-bordered {
+      margin-left: 20px;
+    }
+    .Single-elradio {
+      border: 0px;
+      margin: 13px 20px;
+      background-color: #f6f6f8;
+      color: #4e5053;
+      border-radius: 100px;
+      .el-radio__input {
+        display: none;
+      }
+      .el-checkbox__input {
+        display: none;
+      }
+    }
+    .Single-elradio.is-checked {
+      background-color: #409eff;
+    }
+    .el-radio__input.is-checked + .el-radio__label {
+      color: #ffffff !important;
+    }
+
+    .el-checkbox__input.is-checked + .el-checkbox__label {
+      color: #ffffff !important;
+    }
+  }
+}
+</style>

src/components/Questionnaire/Popup.vue

@@ -0,0 +1,225 @@
+<template>
+  <div v-if="showSelf" class="dialog" :style="{'z-index': zIndex}">
+    <div class="dialog-mark" @click.self="closeMyself" :style="{'z-index': zIndex + 1}"></div>
+    <transition name="dialog">
+      <div class="dialog-sprite" :style="{'z-index': zIndex + 2}">
+        <!-- 标题 -->
+        <section v-if="title" class="header">{{ title }}</section>
+
+        <!-- 弹窗的主题内容 -->
+        <section class="dialog-body">
+          <slot></slot>
+        </section>
+
+        <!-- 按钮 -->
+        <div class="dialog-footer">
+          <button class="btn btn-confirm" @click="confirm" :disabled="LoadingShow">
+            {{confirmText}}
+            <v-loading
+              class="btn-confirm-loading"
+              :LoadingShow="LoadingShow"
+              LoadingWidth="25px"
+              LoadingHeight="25px"
+            />
+          </button>
+
+          <button v-if="showCancel" class="btn btn-refuse" @click="cancel">{{cancelText}}</button>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Popup',
+  props: {
+    show: {
+      type: Boolean,
+      default: false,
+      required: true
+    },
+    title: {
+      type: String,
+      required: true
+    },
+    showCancel: {
+      typs: Boolean,
+      default: false,
+      required: false
+    },
+    cancelText: {
+      type: String,
+      default: '取消',
+      required: false
+    },
+    confirmText: {
+      type: String,
+      default: '确定',
+      required: false
+    },
+    LoadingShow: {
+      type: Boolean,
+      default: false,
+      required: true
+    }
+  },
+
+  data() {
+    return {
+      name: 'dialog',
+      showSelf: false,
+      zIndex: this.getZIndex(),
+      bodyOverflow: ''
+    }
+  },
+  watch: {
+    show(val) {
+      console.log('🚀 ~ file: Popup.vue ~ line 78 ~ show ~ val', val)
+      this.showSelf = val
+
+      // if (!val) {
+      //   this.closeMyself()
+      // } else {
+      //   this.showSelf = val
+      // }
+    }
+  },
+  created() {
+    this.showSelf = this.show
+  },
+  mounted() {
+    this.forbidScroll()
+  },
+  methods: {
+    /** 禁止页面滚动 */
+    forbidScroll() {
+      this.bodyOverflow = document.body.style.overflow
+      document.body.style.overflow = 'hidden'
+    },
+
+    /**  每次获取之后 zindex 自动增加 */
+    getZIndex() {
+      let zIndexInit = 2022112
+      return zIndexInit++
+    },
+
+    /** 取消按钮操作 */
+    cancel() {
+      this.$emit('cancel', true)
+    },
+
+    /** 确认按钮操作 */
+    confirm() {
+      this.$emit('confirm', true)
+    },
+
+    /** 点击遮罩关闭弹窗 */
+    closeMyself() {
+      // this.sloveBodyOverflow()
+    },
+
+    /** 恢复页面的滚动 */
+    sloveBodyOverflow() {
+      document.body.style.overflow = this.bodyOverflow
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+// 弹窗动画
+.dialog-enter-active,
+.dialog-leave-active {
+  transition: opacity 1s;
+}
+
+.dialog-enter,
+.dialog-leave-to {
+  opacity: 0;
+}
+
+// 最外层 设置position定位
+// 遮罩 设置背景层，z-index值要足够大确保能覆盖，高度 宽度设置满 做到全屏遮罩
+.dialog {
+  position: fixed;
+  top: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  transition: opacity 1s;
+
+  // 内容层 z-index要比遮罩大，否则会被遮盖
+  .dialog-mark {
+    position: absolute;
+    top: 0;
+    height: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.6);
+  }
+}
+
+.dialog-sprite {
+  position: absolute;
+  left: 5%;
+  right: 5%;
+  bottom: 25%;
+  display: flex;
+  flex-direction: column;
+  max-height: 75%;
+  min-height: 280px;
+
+  overflow: hidden;
+  z-index: 23456765435;
+  background: #fff;
+  border-radius: 8px;
+  .header {
+    padding: 15px;
+    text-align: center;
+    font-size: 18px;
+    font-weight: 700;
+    color: #333;
+  }
+  .dialog-body {
+    flex: 1;
+    overflow-x: hidden;
+    overflow-y: scroll;
+    padding: 0 15px 20px 15px;
+  }
+  .dialog-footer {
+    width: 100%;
+    padding-top: 1em;
+    .btn {
+      display: block;
+      width: 95%;
+      margin: auto;
+      margin-bottom: 1em;
+      border: 0;
+      line-height: 45px;
+      border-radius: 20px;
+      font-weight: 700;
+      font-size: 15px;
+      box-shadow: 0px 8px 28px 0px rgba(0, 0, 0, 0.12);
+    }
+    .btn-refuse {
+      background: #fff;
+      color: #5886fe;
+      height: 45px;
+    }
+    .btn-confirm {
+      color: white;
+      background-image: linear-gradient(to right, #3b5bea, #5886fe);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 45px;
+      &-loading {
+        display: flex;
+        align-items: center;
+      }
+    }
+  }
+}
+</style>
+

src/components/Questionnaire/index.js

@@ -0,0 +1,28 @@
+import PlayGame from './PlayGame.vue'//简答（输入框）
+
+import Loading from './Loading.vue'//单选
+
+// import { component } from 'vue/types/umd'
+
+
+const compoents = [
+  PlayGame,
+  // UserScore,
+  // Many,
+  Loading,
+]
+
+
+
+const Questionnaire = {
+  install (Vue) {
+    console.log('组件打印');
+    compoents.forEach(compoents => {
+      Vue.component(compoents.name, compoents)
+
+    })
+  }
+}
+
+
+export default Questionnaire

src/components/StrongPhoto.vue

@@ -1,9 +1,45 @@
 <template>
-  <!-- <h1>StrongPhoto 精彩瞬间</h1> -->
-  <div>
-    <span v-for="(image, index) in imageList" :key="index">
-      <van-image width="200px" :src="image.a" />
-    </span>
+  <!-- <h1>StrongPhoto 精彩集锦</h1> -->
+  <div class="Photo-box">
+    <div>
+      <van-swipe :autoplay="3000">
+        <van-swipe-item v-for="(image, index) in title.imageList" :key="index">
+          <van-image width="100%" height="25vh" :src="image.a" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div style="display: flex; aline-itme:center;margin-top: 30px;padding-left: 15px;
+    ">
+      <!-- <div :class="`${classStyle?'Zhedie-box Donghua':'Zhedie-box'}`"> -->
+      <div :class="{'Zhedie-box': true, 'expand': classStyle}">
+        <!-- :class="`${clickStyle?'clickStyle':''}`" -->
+
+        <div
+          v-for="(item,i) in buttList"
+          :key="item"
+          @click="SeePhotos(i)"
+          :class="activeNum === i ? 'clickStyle':''"
+        >{{item}}</div>
+      </div>
+      <van-icon
+        v-show="iconShow"
+        style="left:0; top: 0.6vh;"
+        :name="`${classStyle?'arrow-up ':'arrow-down'}`"
+        @click="animations"
+      />
+    </div>
+
+    <div class="PhotoList-box">
+      <div class="PhotoList-box-text">
+        <div></div>
+        <span>{{title.name}}</span>
+      </div>
+      <div class="PhotoList-box-images">
+        <span v-for="(image, index) in title.imageList" :key="index">
+          <van-image width="31vw" :src="image.a" style="padding:0 3px 0 2px" />
+        </span>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -11,18 +47,117 @@
 export default {
   data() {
     return {
-      imageList: [
-        { a: 'https://img.yzcdn.cn/vant/cat.jpeg' },
-        { a: 'https://img.yzcdn.cn/vant/cat.jpeg' },
-        { a: 'https://img.yzcdn.cn/vant/cat.jpeg' },
-        { a: 'https://img.yzcdn.cn/vant/cat.jpeg' },
-        { a: 'https://img.yzcdn.cn/vant/cat.jpeg' },
-        { a: 'https://img.yzcdn.cn/vant/cat.jpeg' }
-      ]
-    };
+      classStyle: false,
+      clickStyle: false,
+      iconShow: false,
+      activeNum: 0, //下标
+      buttList: [
+        '一期培训',
+        '二期培训',
+        '三期培训',
+        '四期345啊啊',
+        '四期44啊啊',
+        '四期2啊啊',
+        '四期0啊啊'
+      ],
+      title: {
+        name: '2022年02月22日',
+        imageList: [
+          { a: 'https://img.yzcdn.cn/vant/cat.jpeg' },
+          { a: 'https://img.yzcdn.cn/vant/cat.jpeg' },
+          { a: 'https://img.yzcdn.cn/vant/cat.jpeg' },
+          { a: 'https://img.yzcdn.cn/vant/cat.jpeg' },
+          { a: 'https://img.yzcdn.cn/vant/cat.jpeg' }
+          // { a: 'https://img.yzcdn.cn/vant/cat.jpeg' }
+        ]
+      }
+    }
+  },
+  mounted() {
+    if (this.buttList.length >= 5) {
+      this.iconShow = true
+    } else {
+      this.iconShow = false
+    }
+  },
+  methods: {
+    animations() {
+      this.classStyle = !this.classStyle
+    },
+    SeePhotos(i) {
+      console.log('🚀 ~ file: StrongPhoto.vue ~ line 64 ~ SeePhotos ~ i', i)
+      this.activeNum = i
+      // this.clickStyle = !this.clickStyle
+    }
   }
-};
+}
 </script>
 
 <style lang="less" scoped>
+.Photo-box {
+  width: 100vw;
+  height: 100%;
+  background-color: #fff;
+  .van-swipe {
+    width: 100%;
+    border-radius: 20px;
+    height: 25vh;
+  }
+  .Zhedie-box {
+    width: 90%;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    height: 30px;
+    transition: height 0.2s ease;
+    &.expand {
+      height: 50vh;
+    }
+
+    > div {
+      width: 75px;
+      height: 30px;
+      color: rgb(128, 128, 128);
+      line-height: 28px;
+      text-align: center;
+      font-size: 10px;
+    }
+    .clickStyle {
+      color: #12a89f;
+      font-weight: 700;
+      background-color: #f3f3f3;
+      border-radius: 30px;
+    }
+  }
+  .Donghua {
+    animation: Donghua 0.2s 1 forwards;
+    overflow: scroll;
+  }
+  .PhotoList-box {
+    width: 100%;
+
+    .PhotoList-box-text {
+      display: flex;
+      align-items: center;
+      margin: 1.2em 0 0.8em 0;
+      > div {
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        background-color: #13c0b4;
+        margin: 0 13px 0 9px;
+      }
+      > span {
+        font-size: 12px;
+        letter-spacing: 1px;
+        color: rgb(128, 128, 128);
+      }
+    }
+    .PhotoList-box-images {
+      width: 97%;
+      margin: 0 auto;
+    }
+  }
+}
 </style>

src/components/Tabber.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="tabbar">
     <van-tabbar class="van-tabbar" v-model="active" @change="onChange">
-      <van-tabbar-item icon="column">课程管理</van-tabbar-item>
-      <van-tabbar-item icon="photo">精彩瞬间</van-tabbar-item>
+      <van-tabbar-item icon="column">培训通知</van-tabbar-item>
+      <van-tabbar-item icon="photo">精彩集锦</van-tabbar-item>
       <van-tabbar-item icon="manager">个人中心</van-tabbar-item>
     </van-tabbar>
   </div>

src/components/UserCenter.vue

@@ -16,7 +16,8 @@
 
     <div class="button-box">
       <van-cell-group>
-        <van-cell class="user-button" title="注册" icon="contact" @click="handLogin()" is-link />
+        <img :src="register" alt width="25px" style=" margin: 0 0 0 10px;" />
+        <van-cell class="user-button" title="注册" @click="handLogin()" is-link />
       </van-cell-group>
       <!-- <button type="primary" @click="handLogin()">微信授权登录</button> -->
       <!-- <van-button class="user-button" type="info" @click="handLogin()">注册</van-button> -->
@@ -28,33 +29,31 @@
 export default {
   data() {
     return {
+      register: require('../assets/icon/register.svg'),
       code: '' // 前端获取 code 传给后端调用相应接口
-    };
+    }
   },
   created() {
     // 从 window.location.href 中截取 code 并且赋值
     if (window.location.href.indexOf('Code_state') !== -1) {
-      this.code = window.location.href
-        .split('?')[1]
-        .split('=')[1]
-        .split('&')[0];
-      this.$store.commit('SET_USER_INFO', { code: this.code });
+      this.code = window.location.href.split('?')[1].split('=')[1].split('&')[0]
+      this.$store.commit('SET_USER_INFO', { code: this.code })
     }
 
     if (this.$store.state.user.code) {
       // 存在 code 直接调用接口
-      this.handGetUserInfo(this.code);
+      this.handGetUserInfo(this.code)
     }
   },
   methods: {
     handLogin() {
-      this.$router.push('/SetUser');
+      this.$router.push('/SetUser')
       // this.$store.commit('SET_USER_INFO', { code: this.code })
 
       // 重定向地址重定到当前页面，在路径获取 code
       if (process.env.NODE_ENV === 'development') {
-        console.log(222);
-        return;
+        console.log(222)
+        return
       }
       /**
        * 获取 code
@@ -67,7 +66,7 @@ export default {
       //   }
       // }
 
-      const hrefUrl = window.location.href;
+      const hrefUrl = window.location.href
 
       // const originCode = localStorage.getItem('wxcode')
       // const queryCode = getCode()
@@ -82,15 +81,15 @@ export default {
 						&response_type=code
 						&scope=snsapi_userinfo
 						&state=Code_state#wechat_redirect
-					`;
+					`
       }
     },
     handGetUserInfo(code) {
       console.log(
         '🚀 ~ file: UserCenter.vue ~ line 44 ~ handGetUserInfo ~ code',
         code
-      );
-      // 调用后端接口，参数为 code 剩下工作量交给后端即可
+      )
+      // 调用后端接口，参数为 code
       // wxLogin({
       //   data: {
       //     code: code
@@ -105,7 +104,7 @@ export default {
       // })
     }
   }
-};
+}
 </script>
 
 <style lang="less" scoped>
@@ -141,7 +140,7 @@ export default {
       width: 30px;
       margin: 0 auto;
       position: relative;
-      left: 15vw;
+      left: 18.4vw;
       top: 7.7vh;
       // position: relative;
       // top: 9vh;
@@ -151,8 +150,9 @@ export default {
     width: 100%;
     margin: 0 auto;
     // box-shadow: 0px 8px 38px 0px rgba(0, 0, 0, 0.12);
-    .user-button {
-      // box-shadow: 0px 8px 38px 0px rgba(0, 0, 0, 0.12);
+
+    .van-cell-group {
+      display: flex;
     }
   }
 }

src/components/userPages/SetUser.vue

@@ -1,26 +1,29 @@
 <template>
-  <div class="setInfo">
-    <van-nav-bar title="修改个人信息" left-text="返回" left-arrow @click-left="onClickLeft" />
-    <van-form @submit="onSubmit">
-      <van-field
-        v-model="username"
-        name="username"
-        label="姓名"
-        placeholder="姓名"
-        :rules="[{ required: true, message: '请填写姓名' }]"
-      />
-      <van-field
-        v-model="phone"
-        type="number"
-        name="phone"
-        label="手机号"
-        placeholder="手机号"
-        :rules="[{ required: true, message: '请填写手机号码' }]"
-      />
-      <div style="margin: 20px; margin-top:3em;">
-        <van-button round block type="info" native-type="submit">提交</van-button>
-      </div>
-    </van-form>
+  <div class="setInfo-box">
+    <div class="setInfo">
+      <van-nav-bar title="修改个人信息" left-text="返回" left-arrow @click-left="onClickLeft" />
+      <van-form @submit="onSubmit">
+        <van-field
+          v-model="username"
+          name="username"
+          label="姓名"
+          placeholder="姓名"
+          :rules="[{ required: true, message: '请填写姓名' }]"
+        />
+        <van-field
+          v-model="phone"
+          type="number"
+          name="phone"
+          maxlength="11"
+          label="手机号"
+          placeholder="手机号"
+          :rules="[{ required: true, message: '请填写手机号码' }]"
+        />
+        <div style="margin: 20px; margin-top:3em;">
+          <van-button round block type="info" native-type="submit">提交</van-button>
+        </div>
+      </van-form>
+    </div>
   </div>
 </template>
 
@@ -30,26 +33,43 @@ export default {
     return {
       username: '',
       phone: ''
-    };
+    }
   },
   methods: {
     onClickLeft() {
-      this.$router.go(-1);
+      this.$router.go(-1)
     },
     onSubmit(values) {
-      console.log('submit', values);
-      this.$toast.success('提示文案');
+      console.log('submit', values)
+      this.$toast.success('提示文案')
     }
   }
-};
+}
 </script>
 
 <style lang="less" scoped>
-.setInfo {
-  width: 100%;
-  height: 33%;
-  border-bottom-left-radius: 20px;
-  border-bottom-right-radius: 20px;
+.setInfo-box {
   background-color: #fff;
+  height: 100%;
+
+  width: 100vw;
+  display: flex;
+  .setInfo {
+    align-items: center;
+    margin: 0 auto;
+    width: 100%;
+    height: 50vh;
+    // border-bottom-left-radius: 20px;
+    // border-bottom-right-radius: 20px;
+    .van-form {
+      position: relative;
+      top: 25vh;
+      .van-field {
+        margin-bottom: 2em;
+        font-size: 17px;
+        font-weight: 600;
+      }
+    }
+  }
 }
 </style>

src/main.js

@@ -1,5 +1,10 @@
 import Vue from 'vue'
 import App from './App.vue'
+import animated from 'animate.css'
+import { Login } from './util/initial'
+
+import Questionnaire from './components/Questionnaire'
+import Loading from './components/Questionnaire/Loading.vue';
 import router from './router/index'//路由
 import store from './store';//状态管理
 import {
@@ -14,8 +19,9 @@ import {
   Toast,
   Card,
   NavBar,
-  Image, SwipeItem, Tag, Swipe
+  Image, SwipeItem, Tag, Swipe, Divider
 } from 'vant';
+Vue.use(Divider);
 Vue.use(Swipe);
 Vue.use(Tag);
 Vue.use(NavBar);
@@ -31,11 +37,13 @@ Vue.use(Notify);
 Vue.use(Tabbar).use(TabbarItem);
 Vue.use(Button);
 Vue.use(Icon);
-
+Vue.component('v-loading', Loading);
+Vue.use(Questionnaire)
+Vue.use(animated)
 
 // Vue.use(Tabbar);
 // Vue.use(TabbarItem);
-
+// Login()
 
 Vue.config.productionTip = false
 

src/router/index.js

@@ -3,9 +3,11 @@
 import Vue from 'vue'
 import Router from 'vue-router'
 import Course from '../components/Course.vue'//课程
-import StrongPhoto from '../components/StrongPhoto.vue'
-import UserCenter from '../components/UserCenter.vue'
-import SetUser from '../components/userPages/SetUser.vue'
+import ClockIn from '../components/ClockIn.vue'//打卡
+import StrongPhoto from '../components/StrongPhoto.vue'//精彩集锦
+import UserCenter from '../components/UserCenter.vue'//我的页面
+import Questionnaire from '../components/Questionnaire.vue'
+import SetUser from '../components/userPages/SetUser.vue'//修改个人信息
 // // import Login from '../Login.vue'
 
 
@@ -19,7 +21,7 @@ export default new Router({
 
 
   routes: [
-    //课程管理
+    //培训通知
     {
       path: '/',
       name: 'Course',
@@ -30,7 +32,7 @@ export default new Router({
 
 
     },
-    //精彩瞬间
+    //精彩集锦
     {
       path: '/StrongPhoto',
       name: 'StrongPhoto',
@@ -58,9 +60,25 @@ export default new Router({
       meta: {
         requireAuth: true //是否登陆
       }
-    }
-
-
+    },
+    //问卷页面
+    {
+      path: '/Questionnaire',
+      name: 'Questionnaire',
+      component: Questionnaire,
+      meta: {
+        requireAuth: true //是否登陆
+      }
+    },
+    //打卡页面
+    {
+      path: '/ClockIn',
+      name: 'ClockIn',
+      component: ClockIn,
+      meta: {
+        requireAuth: true //是否登陆
+      }
+    },
 
 
 

src/store/index.js

@@ -12,8 +12,8 @@ const store = new Vuex.Store({
     user: {
 
       appid: 'wxd3bab568bc42d1de',
-
-      code: '',
+      token: '',
+      code: '123',
 
     }
   },

src/util/api.js

@@ -1 +1,21 @@
 import request from "./request";
+
+
+/**
+ * @getBanner
+ *
+ */
+//  /api/wx/login
+export const getBanner = (params, data,) => request(`/api/wx/banner`, data, 'GET')
+
+
+
+/**
+ * 登录
+ * @param {*} id 
+ * @returns 
+ * loginParam
+ */
+export const UserLogin = (code) => request(`/api/wx/login?code=${code}`, { method: 'post' })
+
+

src/util/initial.js

@@ -0,0 +1,13 @@
+/**
+ * 登陆
+ */
+import { UserLogin } from './api'
+
+export function Login () {
+  UserLogin('123',).then(e => {
+    console.log(e);
+    console.log(22222222222222222222222);
+    let tokens = e.token
+    this.$store.commit('SET_USER_INFO', { token: tokens })
+  })
+}

src/util/query.js

@@ -0,0 +1,10 @@
+// 获取url参数
+export default function getUrlKey (name) {
+  return (
+    decodeURIComponent(
+      (new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(
+        location.href
+      ) || [, ''])[1].replace(/\+/g, '%20')
+    ) || null
+  )
+}

src/util/request.js

@@ -1,72 +1,46 @@
-
-
-
-import axios from 'axios'
-
-import { Message } from 'element-ui'
-// import md5 from 'js-md5'
+import axios from "axios";
 import store from '../store'
-// import routerfrom from '../router'
 
+// import { getQueryString } from ".";
 
+export default (url, options) => {
+  const { params, header, ...leftOptions } = options || {}
+  // const queryStr = getQueryString(params)
+  const { code, token } = store.state.user
 
+  const authToken = token
 
-export default function (url, params, methodType = 'GET') {
-  return new Promise((resolve, reject) => {
-    // const { personId, phone, appid, totalScore } = store.state.user
-    // const timestamp = new Date().valueOf()
-    // const sign = md5(appid + personId + phone + timestamp)
+  const tokenHeader = authToken ? { 'X-Authorization-JWT': authToken } : {}
 
-    // let header = {
-    //   'x-appid': appid,
-    //   'x-personid': personId,
-    //   'x-timestamp': timestamp,
-    //   'x-sign': sign,
-    //   'totalScore': totalScore
-    // }
+  const nwHeader = {
+    ...(header || {}),
+    ...tokenHeader,
 
+  }
 
+  return new Promise((resolve, reject) => {
     axios.request({
+      ...leftOptions,
       url: url,
-      method: methodType,
-      data: params,
-      // headers: header,
-      timeout: 1000 * 60,
-    }).then(res => {
-      const { code, message, data, token } = res.data
-
-      if (code === 1000) {
-        resolve(data)
-      } else {
-        Message.error(message)
-
-        if (code === 1001) {
-          // Message.error('请重新登陆')
-
-          // routerfrom.push('../Login.vue')
-
-          // this.$router.replace('../Login.vue') //replace  不记录页面 ，无法返回
+      header: nwHeader,
+      success: (res) => {
+        const { code, message, data, token } = res.data
+        if (token || data?.token) {
+          axios.setStorage({ key: 'token', data: token || data?.token })
         }
-      }
-
-
-
-    }).catch(err => {
-      const message = err.message || err.errMsg || err
-      console.error("🚀 错误~ err", err)
-      Message.error('请求错误', err)
-
-
-
-
+        if (code === 1000) {
+          resolve(data)
+        } else {
+          console.error(res)
+          reject(message?.indexOf('java') > -1 ? '系统内部错误' : message)
+        }
+      },
+      fail: (err) => {
+        const message = err.message || err.errMsg || err
 
-      if (err.message.includes('timeout')) {
-        // 请求超时
-        Message.error('请求超时')
+        reject(message)
       }
-      reject(message)
-    }).finally(() => {
-      // 请求结束
     })
   })
+
 }

vue.config.js

@@ -0,0 +1,32 @@
+// vue.config.js
+
+
+// vue.config.js
+const path = require('path')
+const resolve = dir => path.join(__dirname, dir)
+
+
+module.exports = {
+
+  devServer: {
+    proxy: {
+      '/api': {
+        target: "http://192.168.89.147:8080/",
+        // ws: true,
+        changeOrigin: true,
+        // pathRewrite: {
+        //   // 路径重写
+        //   "/api": "" // 这个意思就是以api开头的，定向到哪里, 如果你的后边还有路径的话， 会自动拼接上
+        // }
+      },
+    },
+
+
+  },
+  lintOnSave: false,
+  publicPath: "./",//在vue-cli.3.3版本后 baseUrl被废除了，因此这边要写成 publicPath。 https://cli.vuejs.org/zh/config/#vue-config-js
+  runtimeCompiler: true,
+  chainWebpack: config => {
+    config.resolve.alias.set("@", resolve("src"));
+  }
+}