新增提交任务，佩戴任务静态页面

src/router/router.config.js

@@ -62,6 +62,18 @@ export const constantRouterMap = [
         component: () => import('@/views/development/taskDetail'),
         meta: { title: '任务详情', keepAlive: false }
       },
+      {
+        path: '/taskSubmission',
+        name: 'taskSubmission',
+        component: () => import('@/views/development/taskSubmission'),
+        meta: { title: '提交任务', keepAlive: false }
+      },
+      {
+        path: '/taskWearing',
+        name: 'taskWearing',
+        component: () => import('@/views/development/taskWearing'),
+        meta: { title: '佩戴任务', keepAlive: false }
+      },
       {
         path: '/familyNumber',
         name: 'familyNumber',

src/views/development/index.vue

@@ -23,7 +23,7 @@
           <div class="mid-text bold">{{ task.detail }}</div>
         </div>
         <div class="task-times">
-          <div class="task-time" v-for="(item, index) in task.taskList" :key="index">
+          <div class="task-time" v-for="(item, index) in task.taskList" :key="index" @click="toTask(item)">
             <div class="task-time-info">
               <div class="task-time-text">{{ item.title }}</div>
               <div class="task-time-button min-text" v-if="item.status === 0">查看进度</div>
@@ -108,11 +108,11 @@ export default {
         taskList: [
           {
             title: '格言朗读',
-            status: 0
+            status: 1
           },
           {
             title: '佩戴习惯',
-            status: 1
+            status: 0
           }
         ]
       },
@@ -147,6 +147,20 @@ export default {
   created() {},
   mounted() {},
   methods: {
+    toTask(item) {
+      console.log(item);
+      if (item.status === 0) {
+        this.$router.push({
+          name: 'taskWearing',
+          params: {}
+        });
+      } else {
+        this.$router.push({
+          name: 'taskSubmission',
+          params: {}
+        });
+      }
+    },
     toDetail(item, task) {
       console.log(item);
       console.log(task);

src/views/development/taskSubmission.vue

@@ -0,0 +1,158 @@
+<template>
+  <div class="pageContent taskSubmission">
+    <van-nav-bar
+      title="提交任务"
+      left-text="返回"
+      left-arrow
+      @click-left="$router.back()"
+      @click-right="() => {}"
+      :fixed="true"
+    >
+      <template #right>
+        <div class="submit">提交</div>
+      </template>
+    </van-nav-bar>
+    <div class="content">
+      <textarea name="" id="textarea" maxlength="1000" v-model="textarea" placeholder="请按照要求完成任务"></textarea>
+      <div class="other">
+        <div class="tools">
+          <div class="tool" @click="onSelect('vote')">
+            <van-icon class="tool-icon" name="luyin" class-prefix="iconfont"></van-icon>
+            <div class="tool-text">录音</div>
+          </div>
+          <div class="tool" @click="onSelect('image')">
+            <van-icon class="tool-icon" name="photo-o"></van-icon>
+            <div class="tool-text">图片</div>
+          </div>
+          <div class="tool" @click="onSelect('video')">
+            <van-icon class="tool-icon" name="video-o"></van-icon>
+            <div class="tool-text">视频</div>
+          </div>
+        </div>
+        <div class="number">{{ textarea.length }}/1000</div>
+      </div>
+    </div>
+
+    <div class="taskDemand">任务要求</div>
+
+    <input
+      ref="votefile"
+      type="file"
+      class="file"
+      id="votefile"
+      accept="audio/mp3,audio/mp4"
+      @change="onChange('vote')"
+    />
+    <input
+      ref="imagefile"
+      type="file"
+      class="file"
+      id="imagefile"
+      accept="image/png,image/jpeg,image/jpg"
+      @change="onChange('image')"
+    />
+    <input ref="videofile" type="file" class="file" id="videofile" accept="video/mp4" @change="onChange('video')" />
+  </div>
+</template>
+
+<script>
+export default {
+  components: {},
+  data() {
+    return {
+      textarea: ''
+    };
+  },
+  mounted() {},
+  methods: {
+    onSelect(type) {
+      console.log(type);
+      this.$refs[type + 'file'].click();
+    },
+    onChange(type) {
+      const file = this.$refs[type + 'file'].files[0];
+      console.log(file);
+      const formData = new FormData();
+      formData.append('file', file);
+      formData.append('type', type);
+      console.log(formData);
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss">
+@import './include.scss';
+@font-face {
+  font-family: 'iconfont'; /* Project id 2652084 */
+  src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAANEAAsAAAAABxwAAAL2AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACCcAqCGIIcATYCJAMICwYABCAFhGcHLxtXBsgeg207eZwyVtIpsOplBI9rn/OSHBH6c6exoBhk9X7ZspEVtsojGbE/2r2vkFPpV2buw7mUmIgZXrt5I7euHSahADJ9/u+d/hbhBfDWHLQ2PrA8oA/UWMsi7OQFxi2yuwKxyGcE2u2KpniYnFkIuo/qqAQsKTPbgyQ3HvG5daAuBBQFp1uFZujSIt5CE+mZ4jneBO+P//ZDnaQpMwtO7iQ1wuGvDmtErv4r8gfVeA14eEITMjZXZorzzY4jSlFik5L2KoeyeVJbBL866toTrPuPRxDNzOxOMIkF5yR0RKf6ywQKWnANaPQqoKV0ThsYuFvd1IL2C9pDm31bWjovNnrXi4eKH63R0VgbXoHqoejhxdNTSlt4j3e7OPT4GLnx9PTi4UGq7u+vDN1fh7IbiOyutOz28bwOdN7UHIuhNXX5rjpyKnLb30Mn1iRWx03XuwotL0or3Evd/FMD0yq07SzstDNK2tIdshx3F5JCRWZBWlHOrZta6lbhLhElsYGJZYFRQYmlVDYkTS0NCg+JL2cDkocDSl1ynMMda4kz39bGuERUTPevz7Ohs4OVE7pyk1x9b2WtWQ7EAtRzt5LkB3zHw6c7XTV6ka+tHQV8fefUFoyoF8hPALSeoSN43cpLQGLRgqRSJRQyyTVqdyBrt8LUTE+/576agdvKhFYDN+dqMZEgazXPKJx1NOmwj2atDtBuQ9LqDgNklERpw7IBhNBrA0m398h6HTEK5wlNhr2gWa9ftLsYOtt1WI6GBILrKG5E9W2I3yCVMLaaBnTzMbdJVEfKosWYsHwcRn4c33w6BUswGWIG28z1p5RBDJGKUTJ3GhaJpEhGpALcQDk8SmXhPj5M1Us4DVIxJCCwOhTWCKnXBuFrICXBeGSa/bx8GFcTkToEyChOECw+po/44fAFMFIUElDLlezCasblj6IYCIOglBiSLAzCRESkEFn1IAGsAcXB6xGTCedjkRiogjO/SvxoO6CdqU1h9cmaHjW18SUAAAA=');
+}
+
+.iconfont {
+  font-family: 'iconfont' !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.iconfont-luyin:before {
+  content: '\e60b';
+}
+
+.taskSubmission {
+  .submit {
+    color: white;
+    font-size: 25px;
+    border-radius: 40px;
+    padding: 5px 50px;
+    background: black;
+  }
+
+  .content {
+    background: white;
+    border-radius: 12px;
+    padding: 10px;
+
+    #textarea {
+      width: 100%;
+      height: 500px;
+      font-size: 30px;
+    }
+
+    .other {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-end;
+      padding: 10px 0;
+
+      .tools {
+        display: flex;
+        align-items: center;
+        .tool {
+          font-size: 25px;
+          text-align: center;
+          margin-right: 30px;
+          .tool-icon {
+            font-size: 60px;
+          }
+        }
+      }
+
+      .number {
+        font-size: 25px;
+        color: gray;
+      }
+    }
+  }
+  .taskDemand {
+    padding: 20px 0;
+    font-size: 30px;
+    color: gray;
+  }
+
+  .file {
+    display: none;
+  }
+}
+</style>

src/views/development/taskWearing.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="pageContent taskWearing">
+    <NavBar title="佩戴任务" @on-click-left="$router.back()"></NavBar>
+
+  </div>
+</template>
+
+<script>
+import NavBar from '@/components/NavBar';
+export default {
+  components: {
+    NavBar
+  },
+  data() {
+    return {
+      textarea: ''
+    };
+  },
+  mounted() {},
+  methods: {
+    onSelect(type) {
+      console.log(type);
+      this.$refs[type + 'file'].click();
+    },
+    onChange(type) {
+      const file = this.$refs[type + 'file'].files[0];
+      console.log(file);
+      const formData = new FormData();
+      formData.append('file', file);
+      formData.append('type', type);
+      console.log(formData);
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss">
+@import './include.scss';
+
+.taskWearing {
+
+}
+</style>