积分任务

src/project/fengdu/AppNewFarmerBank/integralTask.vue

@@ -5,29 +5,27 @@
     </div>
     <div class="title">任务大厅</div>
     <div class="card-list">
-      <div class="card" @click="$linkTo('./taskDetail')">
-        <h4>10月31日线下公益宣传</h4>
-        <p>
-          百年征和波澜壮阔，百年初心历争议弥坚。7月1日上午，庆祝中国共产党成立100周年在国务院举办…
-        </p>
-        <div class="imgs">
-
+      <div class="card" v-for="(item,index) in list" :key="index" @click="$linkTo('./taskDetail?id='+item.id)">
+        <h4>{{ item.title }}</h4>
+        <p>{{ item.detail }}</p>
+        <div class="imgs" v-if="item.files">
+          <image mode="aspectFill" v-for="(e, i) in item.files" :key="i" :src="e.url"/>
         </div>
         <div class="time">
           <div class="goin">
             <img src="https://cdn.cunwuyun.cn/fengdu/ic-jinchangshijian.png" alt="">
-            <span class="label">进场时间：</span>
-            <span class="value">2020-12-11 10:10 至 2020-12-11 10:10</span>
+            <div class="label">进场时间：</div>
+            <div class="value">{{ item.intoBegintime.substring(0, 16)}} 至 {{ item.intoEndtime.substring(0, 16) }}</div>
           </div>
           <div class="exit">
             <img src="https://cdn.cunwuyun.cn/fengdu/ic-lichangshijian.png" alt="">
-            <span class="label">离场时间：</span>
-            <span class="value">2020-12-11 10:10 至 2020-12-11 10:10</span>
+            <div class="label">离场时间：</div>
+            <div class="value">{{ item.exitBegintime.substring(0, 16) }} 至 {{ item.exitEndtime.substring(0, 16) }}</div>
           </div>
           <div class="type">
             <img src="https://cdn.cunwuyun.cn/fengdu/ic-renwuleixing.png" alt="">
-            <span class="label">任务类型：</span>
-            <span class="value">报名得积分</span>
+            <div class="label">任务类型：</div>
+            <div class="value">{{ item.type==0? '打卡得积分':'报名得积分' }}</div>
           </div>
         </div>
       </div>
@@ -41,16 +39,23 @@ export default {
   appName: '功德银行',
   data() {
     return {
-
+      list: []
     }
   },
   methods: {
-
+    getList() {
+      this.$instance.post('/app/appintegraltask/list').then(res=> {
+        if(res?.data) {
+          this.list = res.data.records
+        }
+      })
+    }
   },
   onShow() {
     uni.setNavigationBarTitle({
       title: '功德银行'
     });
+    this.getList()
   },
 }
 </script>
@@ -79,6 +84,7 @@ export default {
       background: #FFF;
       color: #333333;
       border-radius: 16px;
+      margin-bottom: 24px;
       h4 {
         padding: 24px 24px 0;
         box-sizing: border-box;
@@ -95,7 +101,23 @@ export default {
         font-weight: 400;
       }
       .imgs {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        padding: 16px 24px;
+        box-sizing: border-box;
 
+        image {
+          height: 208px;
+          width: 33.33%;
+          padding-right: 12px;
+          margin-bottom: 12px;
+          box-sizing: border-box;
+
+          &:nth-of-type(3n) {
+            padding-right: 0;
+          }
+        }
       }
 
       .time {
@@ -108,20 +130,24 @@ export default {
         .goin,
         .exit,
         .type {
+          display: flex;
           img {
             width: 30px;
             height: 30px;
-            vertical-align: bottom;
+            align-self: center;
           }
           .label {
-            font-size: 24rpx;
+            font-size: 24px;
             font-weight: 400;
             color: #666666;
+            align-self: center;
+            width: 130px;
           }
           .value {
             color: #333333;
             font-size: 24px;
             font-weight: 400;
+            width: calc(100% - 160px);
           }
         }
       }