任务详情

src/project/fengdu/AppNewFarmerBank/AppNewFarmerBank.vue

@@ -34,11 +34,12 @@
           <div class="left">百年征和波澜壮阔，百年初心历争议弥坚。7月1日上午，庆祝中国共产党成立100周年…</div>
           <div class="right">
             <img src="https://cdn.cunwuyun.cn/wxmp/fengdu/zan-active.png" alt="">
+            <!-- https://cdn.cunwuyun.cn/wxmp/fengdu/zan.png -->
             <span>99+</span>
           </div>
         </div>
         <div class="bottom">
-          <img src="https://cdn.cunwuyun.cn/wxmp/fengdu/zan.png" alt="">
+          <img src="https://cdn.cunwuyun.cn/fengdu/img-jifenlist.png" alt="">
         </div>
       </div>
     </div>

src/project/fengdu/AppNewFarmerBank/integralTask.vue

@@ -5,7 +5,7 @@
     </div>
     <div class="title">任务大厅</div>
     <div class="card-list">
-      <div class="card">
+      <div class="card" @click="$linkTo('./taskDetail')">
         <h4>10月31日线下公益宣传</h4>
         <p>
           百年征和波澜壮阔，百年初心历争议弥坚。7月1日上午，庆祝中国共产党成立100周年在国务院举办…
@@ -95,7 +95,7 @@ export default {
         font-weight: 400;
       }
       .imgs {
-        
+
       }
 
       .time {

src/project/fengdu/AppNewFarmerBank/taskDetail.vue

@@ -0,0 +1,165 @@
+<template>
+  <div class="taskDetail">
+    <div class="task">
+      <h4>10月31日线下公益宣传</h4>
+      <p>百年征和波澜壮阔，百年初心历争议弥坚。7月1日上午，庆祝中国共产党成立100周年在国务院举办午，庆
+        祝中国共产党成立100周年在国务院举办午，庆祝中…</p>
+      <div class="imgs" v-for="(item, index) in info.annexs" :key="index">
+        <!-- <img :src="item.annexFile.url" mode="aspectFill" @click="preview(info.annexs, item.annexFile.url)" /> -->
+      </div>
+    </div>
+
+    <div class="info">
+      <div class="title">基础信息</div>
+      <div class="items">
+        <img src="https://cdn.cunwuyun.cn/fengdu/ic-dizhi.png" alt="">
+        <div class="items-info">
+          <label>活动地点：</label>
+          <div class="value">丰都县金牛区XXXX大厦XXX楼2101</div>
+        </div>
+        <div class="address">
+          <img src="https://cdn.cunwuyun.cn/fengdu/ic-daohang.png" alt="">
+          <i>导航</i>
+        </div>
+      </div>
+      <div class="item">
+        <img src="https://cdn.cunwuyun.cn/fengdu/ic-renwuleixing.png" alt="">
+        <div class="item-info">
+          <label>任务类型：</label>
+          <div class="value">报名得积分</div>
+        </div>
+      </div>
+      <div class="item">
+        <img src="https://cdn.cunwuyun.cn/fengdu/ic-jinchangshijian.png" alt="">
+        <div class="item-info">
+          <label>进场时间：</label>
+          <div class="value">2020-12-11 10:10 至 2020-12-11 10:10</div>
+        </div>
+      </div>
+      <div class="item">
+        <img src="https://cdn.cunwuyun.cn/fengdu/ic-lichangshijian.png" alt="">
+        <div class="item-info">
+          <label>离场时间：</label>
+          <div class="value">2020-12-11 10:10 至 2020-12-11 10:10</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- <div class="right" @click="toAddress">
+      <image src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/dh.png" />
+      <i>导航</i>
+    </div> -->
+  </div>
+</template>
+
+<script>
+export default {
+  name: "taskDetail",
+  appName: "任务详情",
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    toAddress() {
+      wx.openLocation({
+        latitude: this.info.lat,
+        longitude: this.info.lng,
+        scale: 18
+      })
+    },
+    // preview(url) {
+    //   uni.previewImage({
+    //     urls: this.info.checkPhoto.map(v => v.url),
+    //     current: url
+    //   })
+    // },
+
+  },
+  onShow() {
+    uni.setNavigationBarTitle({
+      title: '任务详情'
+    });
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.taskDetail {
+  .task,
+  .info {
+    margin-top: 24px;
+    padding: 32px;
+    box-sizing: border-box;
+    background: #FFF;
+    h4 {
+      font-size: 34px;
+      font-weight: 500;
+    }
+
+    p {
+      margin-top: 32px;
+      font-size: 28px;
+      font-weight: 400;
+    }
+
+    .imgs {
+      display: flex;
+      max-width: 450px;
+
+      img {
+        width: 40px;
+        height: 40px;
+      }
+    }
+  }
+  .info {
+    .title {
+      font-size: 34px;
+      font-weight: 500;
+    }
+    .items,
+    .item {
+      display: flex;
+      margin-top: 24px;
+      img {
+        width: 32px;
+        height: 32px;
+        align-self: center;
+        margin-right: 32px;
+      }
+
+      .items-info {
+        width: calc(100% - 100px);
+      }
+
+      .address {
+        width: 60px;
+        img {
+          width: 60px;
+          height: 60px;
+        }
+        i {
+          font-size: 24px;
+          font-weight: 400;
+          color: #687DA6;
+          text-align: center;
+        }
+      }
+      .item-info,
+      .items-info {
+        font-size: 28px;
+        font-weight: 400;
+        label {
+          color: #666666;
+        }
+        .value {
+          color: #333333;
+          margin-top: 8px;
+        }
+      }
+    }
+  }
+}
+</style>