信用积分

src/mods/AppIntegralApply/detail.vue

@@ -1,25 +1,157 @@
 <template>
-  <div class="details">detail</div>
+  <div class="page">
+    <div class="header-content">
+      <div class="header-middle">
+        <div class="img-title">{{ detail.title }}</div>
+
+        <div class="cards">
+          <div class="cards-left">活动时间</div>
+          <div class="cards-right">{{ detail.beginTime }}</div>
+        </div>
+
+        <div class="cards">
+          <div class="cards-left">活动人数</div>
+          <div class="cards-right">
+            <span style="color: #1c6bdf">{{ detail.realNum }}</span>
+          </div>
+        </div>
+
+        <div class="cards">
+          <div class="cards-left">活动地点</div>
+          <div class="cards-right" style="width: 75%; text-align: right">{{ detail.areaName }}{{ detail.address }}</div>
+        </div>
+
+        <div class="cards">
+          <div class="cards-left">活动地点</div>
+          <div class="cards-right" style="width: 75%; text-align: right">{{ detail.areaName }}{{ detail.address }}</div>
+        </div>
+
+        <div class="cards">
+          <div class="cards-left">活动地点</div>
+          <div class="cards-right" style="width: 75%; text-align: right">{{ detail.areaName }}{{ detail.address }}</div>
+        </div>
+
+        <div class="cards">
+          <div class="cards-left">活动地点</div>
+          <div class="cards-right" style="width: 75%; text-align: right">{{ detail.areaName }}{{ detail.address }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
 export default {
-  name: 'detail',
-  components: {},
-  props: {},
-  data() {
-    return {}
-  },
+  name: 'Detail',
   computed: {},
-  watch: {},
-  onLoad() {},
+  data() {
+    return {
+      id: '',
+      detail: {},
+    }
+  },
+  onLoad(option) {
+    this.id = option.id
+
+    this.$dict.load('').then(() => {
+      this.getDetail()
+    })
+  },
   onShow() {},
-  methods: {},
+  methods: {
+    getDetail() {
+      var ids = 'f16e54058cab4099bf3ee6e03e750b93'
+      this.$instance.post(`/app/appvillageactivityinfo/queryDetailById?id=${ids}`).then((res) => {
+        if (res.code == 0) {
+          this.detail = res.data
+        }
+      })
+    },
+  },
 }
 </script>
-
 <style scoped lang="scss">
-.details {
+.page {
+  width: 100%;
   height: 100%;
+  background-color: #fff;
+
+  .info-title {
+    padding-left: 32px;
+    line-height: 108px;
+    font-size: 32px;
+    font-family: PingFangSC-Semibold, PingFang SC;
+    font-weight: 600;
+    color: #333;
+  }
+  .tab-title {
+    line-height: 108px;
+    font-size: 32px;
+    font-family: PingFangSC-Semibold, PingFang SC;
+    font-weight: 600;
+    color: #333;
+    span {
+      display: inline-block;
+      width: 192px;
+      text-align: center;
+    }
+    .active {
+      color: #3671ee;
+      border-bottom: 4px solid #3671ee;
+    }
+  }
+  .status0 {
+    background: #000;
+  }
+  .status1 {
+    background: #ff883c;
+  }
+  .status3 {
+    background: #1aaaff;
+  }
+  .status2 {
+    background: #42d784;
+  }
+  .status4,
+  .status5 {
+    background: #e4e4e4;
+  }
+  .header-content {
+    // padding-bottom: 80px;
+    .header-top {
+      width: 100%;
+      height: 440px;
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    .header-middle {
+      padding: 32px 32px 0 32px;
+
+      .img-title {
+        font-size: 36px;
+        font-weight: 600;
+      }
+
+      .cards {
+        display: flex;
+        justify-content: space-between;
+        border-bottom: 2px solid #eee;
+        padding: 36px 0;
+        line-height: 40px;
+        font-size: 28px;
+
+        .cards-left {
+          color: #999;
+        }
+
+        .cards-right {
+          color: #333;
+        }
+      }
+    }
+  }
 }
 </style>