帮扶

src/apps/AppHelpDeclaration/details.vue

@@ -0,0 +1,142 @@
+<template>
+  <div class="details">
+
+    <div class="event_info">
+      <div class="content">{{ data.riskDescription }}</div>
+      <div class="picture" v-if="data.files.length">
+        <img :src="item.url" v-for="(item,index) in data.files" :key="index" alt="" @click="preview(index)">
+      </div>
+      <div class="tags">
+        <span v-for="(item,index) in list" :key="index">{{item}}</span>
+      </div>
+    </div>
+
+    <div class="progress_info">
+      <div class="item">
+        <label>申报进度</label>
+        <div :style="{color: item.status == 0? '#FF883C':item.status == 1? '#1AAAFF': item.status==2? '#FF4466': '#42D784'}">{{ $dict.getLabel('helpDeclarationStatus', data.status) }}</div>
+      </div>
+      <div class="item">
+        <label>申报人姓名</label>
+        <div>{{ data.name }}</div>
+      </div>
+      <div class="item">
+        <label>申报时间</label>
+        <div>{{ data.declareTime }}</div>
+      </div>
+      <div class="items">
+        <label>详细地址</label>
+        <div>{{ data.address }}</div>
+      </div>
+    </div>
+
+    <div class="progress"></div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      list: [],
+      data: {},
+      id: '',
+    }
+  },
+  onLoad(o) {
+    this.$dict.load('helpDeclarationStatus')
+    if (o.id) {
+      this.id = o.id
+      this.getDetail()
+    }
+  },
+  methods: {
+    getDetail() {
+      this.$instance.post(`/app/apphelpdeclarationinfo/queryDetailById?id=${this.id}`).then(res => {
+        if(res.code == 0) {
+          this.data = res.data
+          this.list = res.data.reason.split(',')
+        }
+      })
+    },
+    preview(index) {
+      this.$previewImage(this.data.files, index, "url");
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.details {
+
+  .event_info {
+    background: #FFFFFF;
+    padding: 32px;
+    box-sizing: border-box;
+    .content {
+      background: #FFFFFF;
+    }
+    .picture {
+      margin-top: 32px;
+      img {
+        width: 220px;
+        height: 220px;
+        margin-right: 10px;
+      }
+    }
+    .tags {
+      margin-top: 20px;
+      span {
+        display: inline-block;
+        margin-right: 16px;
+        background: #EEEEEE;
+        padding: 4px 16px;
+        box-sizing: border-box;
+        border-radius: 24px;
+        margin-bottom: 16px;
+        color: #999999;
+      }
+    }
+  }
+
+  .progress_info {
+    margin-top: 16px;
+    background: #FFF;
+    padding: 0 32px 20px 32px;
+    box-sizing: border-box;
+    .item {
+      padding: 32px;
+      box-sizing: border-box;
+      display: flex;
+      justify-content: space-between;
+      border-bottom: 1px solid #DDDDDD;
+      label {
+        color: #999999;
+      }
+    }
+    .items {
+      padding: 32px;
+      box-sizing: border-box;
+      label {
+        color: #999999;
+      }
+      div {
+        margin-top: 32px;
+      }
+    }
+    .status0 {
+      color: #FF883C
+    }
+    .status1 {
+      color: #1AAAFF
+    }
+    .status2 {
+      color: #42D784
+    }
+    .status3 {
+      color: #FF4466
+    }
+  }
+}
+</style>