nbwansui 1.0.0 → 1.0.2

package/components/taskModal.vue

@@ -0,0 +1,343 @@
+<template>
+  <div class="task-wrapper">
+    <div :class="[peizhi.JinDu == 'dealing' ? 'dealingBg' : peizhi.JinDu == 'success' ? 'successBg' : 'failBg']">
+      <div class="task-title">{{ peizhi.ZhuTi }}</div>
+      <div class="task-tip">
+        <img alt="" :src="progressImg" />
+        <span>{{ peizhi.JinDuJieGuo }}</span>
+      </div>
+      <div class="avator-list">
+        <div v-for="(item, index) in peizhi.avatorList" :key="index" class="avator-item">
+          <div class="avator-wrapper">
+            <img alt="" :src="item.ava" />
+          </div>
+          <span>{{ item.name }}</span>
+        </div>
+      </div>
+    </div>
+    <div class="header"
+      :class="[peizhi.JinDu == 'dealing' ? 'dealingBg' : peizhi.JinDu == 'success' ? 'successBg' : 'failBg']">
+      <!--Content before waves-->
+      <!--Waves Container-->
+      <div>
+        <svg class="waves" preserveAspectRatio="none" shape-rendering="auto" viewBox="0 24 150 28"
+          xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          >
+          <defs>
+            <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
+          </defs>
+          <g class="parallax">
+            <use fill="rgba(255,255,255,0.7" x="48" xlink:href="#gentle-wave" y="0" />
+            <use fill="rgba(255,255,255,0.5)" x="48" xlink:href="#gentle-wave" y="3" />
+            <use fill="rgba(255,255,255,0.3)" x="48" xlink:href="#gentle-wave" y="5" />
+            <use fill="#fff" x="48" xlink:href="#gentle-wave" y="7" />
+          </g>
+        </svg>
+      </div>
+      <!--Waves end-->
+    </div>
+
+    <div v-show="peizhi.JinDu != 'dealing'" class="task-list">
+      <div class="record-list">
+        <h3>后台记录</h3>
+        <span v-for="(item, index) in peizhi.recordList" :key="index" :style="computeStyle(item.type)">
+          {{ item.content }}
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TaskModal',
+  props: {
+    peizhi: {
+      type: Object,
+    },
+  },
+  data() {
+    return {
+      progressImg: '',
+      waveBottom: '0px',
+
+      progressN: '',
+    }
+  },
+  computed: {
+    computeStyle() {
+      return (type) => {
+        switch (type) {
+          case 0:
+            return {
+              color: '#c7c7c7',
+            }
+          case 1:
+            return {
+              color: '#67c13d',
+            }
+          case 2:
+            return {
+              color: '#f56d6d',
+            }
+          default:
+            return {
+              color: '#c7c7c7',
+            }
+        }
+      }
+    },
+  },
+  // watch:{
+  //   progress(newVal,oldVal){
+  //     console.log(this.progress);
+  //     this.ProgressN = this.progress;
+  //     this.initComponent();
+  //   }
+  // },
+  mounted() {
+    this.progressN = this.progress
+    //console.log(this.progressN)
+    this.initComponent()
+  },
+  methods: {
+    initComponent() {
+      //处理中
+      if (this.peizhi.JinDu == 'dealing') {
+        this.progressImg = `${this.baseConfig.baseUrl}/appimg/task_warning.png`
+      } else if (this.peizhi.JinDu == 'success') {
+        //申请成功
+        this.waveBottom = '360px'
+        this.progressImg = `${this.baseConfig.baseUrl}/appimg/task_success.png`
+      } else if (this.peizhi.JinDu == 'fail') {
+        //申请失败
+        this.waveBottom = '360px'
+        this.progressImg = `${this.baseConfig.baseUrl}/appimg/task_fail.png`
+      }
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.header {
+  position: relative;
+  //  background-color: yellow;
+  /* background: linear-gradient(60deg, rgba(84, 58, 183, 1) 0%, rgba(0, 172, 193, 1) 100%); */
+  color: white;
+  text-align: center;
+}
+
+.logo {
+  display: inline-block;
+  width: 50px;
+  padding-right: 15px;
+  vertical-align: middle;
+  fill: white;
+}
+
+.inner-header {
+  width: 100%;
+  height: 65vh;
+  padding: 0;
+  margin: 0;
+}
+
+.flex {
+  /*Flexbox for containers*/
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}
+
+.waves {
+  position: relative;
+  width: 100%;
+  height: 15vh;
+  /*Fix for safari gap*/
+  min-height: 100px;
+  max-height: 150px;
+  margin-bottom: -7px;
+}
+
+.content {
+  position: relative;
+  height: 20vh;
+  text-align: center;
+  background-color: white;
+}
+
+/* Animation */
+.parallax>use {
+  animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
+}
+
+.parallax>use:nth-child(1) {
+  animation-duration: 7s;
+  animation-delay: -2s;
+}
+
+.parallax>use:nth-child(2) {
+  animation-duration: 10s;
+  animation-delay: -3s;
+}
+
+.parallax>use:nth-child(3) {
+  animation-duration: 13s;
+  animation-delay: -4s;
+}
+
+.parallax>use:nth-child(4) {
+  animation-duration: 20s;
+  animation-delay: -5s;
+}
+
+@keyframes move-forever {
+  0% {
+    transform: translate3d(-90px, 0, 0);
+  }
+
+  100% {
+    transform: translate3d(85px, 0, 0);
+  }
+}
+
+/*Shrinking for mobile*/
+@media (max-width: 768px) {
+  .waves {
+    height: 40px;
+    min-height: 40px;
+  }
+
+  .content {
+    height: 30vh;
+  }
+
+  h1 {
+    font-size: 24px;
+  }
+}
+
+.dealingBg {
+  height: 100%;
+  background-color: #e8aa4e;
+}
+
+.successBg {
+  background-color: #6ac43f;
+}
+
+.failBg {
+  background-color: #ff6f6f;
+}
+
+.task-wrapper {
+  // height:600px;
+  position: relative;
+  overflow: hidden;
+  overflow-y: scroll;
+  // padding-bottom: 60px;
+
+  color: #ffffff;
+}
+
+.task-title {
+  width: 100%;
+  padding: 20px 40px;
+}
+
+.task-tip {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  font-size: 20px;
+}
+
+.task-tip img {
+  width: 80px;
+  height: 80px;
+  margin-bottom: 10px;
+}
+
+.avator-list {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-start;
+  width: 100%;
+
+  .avator-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: 20px;
+
+    .avator-wrapper {
+      width: 80px;
+      height: 80px;
+      margin-bottom: 10px;
+      overflow: hidden;
+      background-color: #ffffff;
+      border-radius: 50%;
+
+      img {
+        width: 80px;
+        height: 80px;
+        border-radius: 50%;
+      }
+    }
+
+    span {
+      font-size: 16px;
+      color: #ffffff;
+    }
+  }
+}
+
+.task-list {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  // position: absolute;
+  // bottom: 60px;
+  height: 200px;
+  background-color: #fff;
+
+  .record-list {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+    padding: 20px;
+
+    h3 {
+      width: 100%;
+      color: #333;
+      text-align: center;
+    }
+
+    span {
+      align-self: flex-start;
+      margin-bottom: 10px;
+      font-size: 16px;
+      color: #c7c7c7;
+    }
+  }
+}
+
+.button-group {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-around;
+  width: 100%;
+  // position:absolute;
+  // bottom:0;
+  height: 60px;
+  background-color: #fff;
+}
+</style>