上传改版

src/main/h5/src/components/previewRate.vue

@@ -0,0 +1,80 @@
+<template>
+  <van-popup
+    v-model="show"
+    safe-area-inset-bottom
+    round
+    position="bottom"
+    style=" height:70%;"
+    closeable
+  >
+    <div class="preview">
+      <div class="title">
+        考级评分预览
+      </div>
+      <div class="list" ref="list">
+        <rate-info :info="info" :rateInfo="rate" isPreview></rate-info>
+      </div>
+    </div>
+  </van-popup>
+</template>
+
+<script>
+import rateInfo from "./rateInfo.vue";
+export default {
+  props: {
+    info: {
+      type: Array,
+      default: () => {
+        return [];
+      }
+    },
+    rate: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    }
+  },
+  components: { rateInfo },
+  name: "time",
+  data() {
+    return {
+      show: false
+    };
+  },
+  methods: {
+    init() {
+      this.show = true;
+      this.$nextTick(() => {
+        this.$refs.list.scrollTop = 0;
+      });
+    }
+  }
+};
+</script>
+<style lang="less" scoped>
+.title {
+  font-size: 16px;
+  text-align: center;
+  color: #000000;
+  line-height: 60px;
+}
+
+.list {
+  flex-grow: 1;
+  overflow: auto;
+}
+
+.preview {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+/deep/ .van-popup--bottom {
+  .van-popup__close-icon--top-right {
+    top: 20px;
+  }
+}
+</style>

src/main/h5/src/components/rateInfo.vue

@@ -0,0 +1,226 @@
+<template>
+  <div class="submitInfo">
+    <div class="score-card">
+      <div class="score">总评分 {{ score }}</div>
+
+      <div class="score-ratelist">
+        <div class="rate-item" v-for="(item, index) in categories" :key="index">
+          <div class="rate-title">{{ item.label }}</div>
+          <div
+            class="rate-info"
+            v-for="(k, kIndex) in item.children"
+            :key="kIndex"
+          >
+            <div class="rate-text">
+              <span class="name">{{ kIndex + 1 }}.{{ k.label }}</span>
+              <span class="val not" v-if="!getValue(k.value) && isPreview"
+                >未评分</span
+              >
+              <span class="val" v-else>{{ getValue(k.value) }}分</span>
+            </div>
+
+            <div class="rate-img" v-if="getImg(k.value).length > 0">
+              <img
+                v-for="(item, index) in getImg(k.value)"
+                :key="index"
+                :src="item"
+                alt=""
+                @click="preview(getImg(k.value), index)"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="remark-card" v-if="rateInfo.remark">
+      <div class="title">考察结论</div>
+      <div class="card">
+        {{ rateInfo.remark }}
+      </div>
+    </div>
+
+    <div class="img-card" v-if="rateInfo.img && rateInfo.img.length > 0">
+      <div class="title">现场图片材料</div>
+      <div class="card">
+        <img
+          v-for="(item, index) in rateInfo.img"
+          :key="index"
+          :src="item"
+          alt=""
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import expert from "../mixins/expert";
+import { ImagePreview } from "vant";
+export default {
+  name: "rateInfo",
+  mixins: [expert],
+  props: {
+    info: {
+      type: Array,
+      default: () => {
+        return [];
+      }
+    },
+    rateInfo: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    },
+    isPreview: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    score() {
+      let list = [...this.categories];
+      return list.reduce((total, current) => {
+        return (
+          total +
+          current.children.reduce((tChild, cChild) => {
+            return tChild + this.getValue(cChild.value);
+          }, 0)
+        );
+      }, 0);
+    }
+  },
+  methods: {
+    getValue(key) {
+      let info = [...this.info].find(item => {
+        return item.type === key;
+      });
+      return info ? info.score || 0 : 0;
+    },
+    getImg(key) {
+      let info = [...this.info].find(item => {
+        return item.type === key;
+      });
+      return info ? info.img || [] : [];
+    },
+    preview(imgs, index) {
+      ImagePreview({
+        images: imgs,
+        startPosition: index
+      });
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.submitInfo {
+  padding: 0 16px;
+}
+.score-card {
+  background: #ffffff;
+  border-radius: 12px;
+  overflow: hidden;
+
+  .score {
+    font-size: 20px;
+    font-weight: bold;
+    color: #ffffff;
+    line-height: 28px;
+    line-height: 60px;
+    text-align: center;
+    background: #ffcf6a;
+  }
+
+  .score-ratelist {
+    padding: 20px;
+
+    .rate-item {
+      .rate-title {
+        font-size: 15px;
+        color: #00000080;
+        line-height: 24px;
+        padding-bottom: 8px;
+      }
+
+      .rate-info {
+        .rate-text {
+          display: flex;
+          justify-content: space-between;
+          .name {
+            font-size: 15px;
+            font-weight: bold;
+            color: #313233;
+            line-height: 24px;
+          }
+          .val {
+            font-size: 15px;
+            color: #313233;
+            line-height: 24px;
+
+            &.not {
+              font-size: 13px;
+              color: #c8c9cc;
+            }
+          }
+        }
+        padding-bottom: 16px;
+
+        .rate-img {
+          display: flex;
+          justify-content: flex-end;
+
+          img {
+            width: 44px;
+            height: 44px;
+            border-radius: 8px;
+            margin-left: 5px;
+            margin-top: 5px;
+          }
+        }
+      }
+    }
+  }
+}
+
+.remark-card {
+  .title {
+    font-size: 20px;
+    font-weight: bold;
+    color: #000000;
+    line-height: 30px;
+    padding: 36px 0 10px;
+  }
+
+  .card {
+    padding: 20px;
+    background-color: #fff;
+    font-size: 16px;
+    color: #000000;
+    line-height: 26px;
+    border-radius: 8px;
+  }
+}
+
+.img-card {
+  .title {
+    font-size: 20px;
+    font-weight: bold;
+    color: #000000;
+    line-height: 30px;
+    padding: 36px 0 10px;
+  }
+
+  .card {
+    img {
+      display: block;
+      border-radius: 8px;
+      width: 100%;
+      margin-bottom: 12px;
+    }
+  }
+}
+</style>
+
+<style></style>