web-base-h5/pages/market/activeArea/activeArea.vue

<template>
  <view class="content">
    <view
      @click="goDetail(item)"
      class="list_content"
      v-for="(item, index) in dataList"
      :key="index"
    >
      <view class="actCover">
        <image :src="item.actCover" mode=""></image>
      </view>
      <view class="list_right">
        <view class="right_title">{{ item.actName }}</view>
        <!-- <view class="right_jies">{{item.actExplain}}</view> -->
        <view class="right_time"
          >{{ item.actStartDate }}-{{ item.actEndDate }}</view
        >
        <view class="">
          <u-button
            @click.native.stop="getGift(item)"
            v-if="item.existDrawNum == 0"
            class="thebtn"
            shape="circle"
            text="抽奖"
            color="#D61820"
          />
        </view>
      </view>
      <view class="actStatus colo" v-show="item.actStatus == 0">{{
        item.actStatusVal
      }}</view>
      <view class="actStatus colo1" v-show="item.actStatus == 1">{{
        item.actStatusVal
      }}</view>
      <view class="actStatus colo2" v-show="item.actStatus == 2">{{
        item.actStatusVal
      }}</view>
    </view>
    <!-- <getTree ref="tree"></getTree> -->
    <giftDrwal ref="giftDrwal"></giftDrwal>
    <!-- <newGift ref="newGiftPay"></newGift> -->
  </view>
</template>

<script>
import giftDrwal from '@/components/giftDrwal/index.vue'
import * as act from '@/config/activity.js'
// import getTree from "@/components/getTree.vue";

export default {
  components: {
    giftDrwal,
    // getTree,
  },
  data() {
    return {
      dataList: [],
    }
  },
  mounted() {
    this.getSearch()
  },
  methods: {
    // getTree(){
    //   this.$refs.tree.getData(1)
    // },
    goDetail(item) {
      uni.navigateTo({
        url: '/pages/market/activeArea/activeDetail?pkId=' + item.pkId,
      })
    },
    getSearch() {
      act.getActivityList().then(res => {
        this.dataList = res.rows
        this.dataList.forEach(item => {
          if (item.actType == 22 && item.actStatus == 1) {
            act.tourismPoint(item.pkId).then(res => {
              if (res.data != undefined) {
                this.$set(item, 'point', res.data)
              }
            })
          }
        })
      })
    },
    getGift(item) {
      this.$refs.giftDrwal.getGiftList(item.pkId)
    },
  },
}
</script>

<style lang="scss" scoped>
.content {
  background: #f2f2f2;
  padding: 5rpx 22rpx;

  .list_content {
    background-color: #ffffff;
    padding: 25rpx 21rpx;
    border-radius: 25rpx;
    margin-top: 27rpx;
    display: flex;
    position: relative;
    .actStatus {
      position: absolute;

      padding: 10rpx 20rpx;
      color: #fff;
      border-radius: 0 20px 20px 0;
      top: 48rpx;
      font-size: 12px;
    }
    .colo {
      background: #6382fb;
    }
    .colo1 {
      background: #ffa50e;
    }
    .colo2 {
      background: #bfbfbf;
    }

    .actCover {
      width: 310rpx;
      height: 210rpx;

      margin-right: 24rpx;

      image {
        width: 100%;
        height: 100%;
        border-radius: 25rpx;
      }
    }

    .list_right {
      width: 330rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      flex-wrap: wrap;

      .right_title {
        font-size: 30rpx;
        // width: 100%;
        font-weight: bold;
        color: #fb3024;
      }
      .right_title1 {
        font-size: 26rpx;
        // width: 100%;
        font-weight: bold;
        color: #fb3024;
      }

      .right_jies {
        font-size: 26rpx;
        color: #333333;
        width: 100%;
      }

      .right_time {
        font-size: 24rpx;
        font-weight: 400;
        color: #999999;
        width: 100%;
      }

      .thebtn {
        height: 60rpx;
        // height: 21px;
        font-size: 22rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #ffffff;
      }
    }
  }
}
</style>