dvcp_v2_wechat_app/src/project/fengdu/AppNewFarmerBank/taskDetail.vue

<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" @click="toAddress">
          <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="btn-wrapper">
      <div class="btn" @click="toReport" hover-class="text-hover">报名得积分/积分+5,已报名</div>
    </div> -->
    <div class="btn-clock">
      <div class="btn-circle" @click="toReport" hover-class="text-hover">
        <div class="daka">打卡签到</div>
        <div class="text">积分+5</div>
      </div>
      <div class="tips">符合打卡条件,未到打卡时间,无法重复打卡</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "taskDetail",
  appName: "任务详情",
  data() {
    return {
      info: {},
      id: ''
    }
  },
  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
    //   })
    // },
    getDetail() {
      this.$instance.post(`/app/appintegraltask/queryDetailById?id=${this.id}`).then(res=> {
        if(res?.data) {
          console.log(res);
        }
      })
    }
  },
  onLoad(o) {
    this.id = o.id
    uni.setNavigationBarTitle({
      title: '任务详情'
    });
    this.getDetail()
  },
}
</script>

<style lang="scss" scoped>
.taskDetail {
  padding-bottom: 400px;
  box-sizing: border-box;
  .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;
        }
      }
    }
  }
  ::v-deep .btn-wrapper {
    background: #FFF;
  }

  ::v-deep .btn-wrapper .btn {
    height: 80px;
    line-height: 80px;
    border-radius: 40px;
  }

  .opacity {
    opacity: 0.6000000238418579;
  }

  .gray {
    background: #b5b5bcff;
  }

  .btn-clock {
    height: 372px;
    width: 100%;
    background: #FFF;
    position: fixed;
    left: 0;
    bottom: 0;
    .btn-circle {
      width: 226px;
      height: 226px;
      background: #2D7DFF;
      border-radius: 50%;
      margin: 40px auto 24px;
      text-align: center;
      .text,
      .daka {
        color: #FFF;
        font-size: 34px;
        font-weight: 500;
      }
      .daka {
        padding-top: 62px;
        box-sizing: border-box;
        font-size: 40px;
        font-weight: 500;
      }
    }
    .tips {
      text-align: center;
      color: #666666;
      font-size: 28px;
      font-weight: 400;
    }
  }
}
</style>