web-retail-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.existNewPeopleGift == 0"
                    class="thebtn"
                    shape="circle"
                    text="领取礼包"
                    color="#D61820"></u-button>
          <u-button @click.native.stop="getGift(item)"
                    v-if="item.existDrawNum == 0"
                    class="thebtn"
                    shape="circle"
                    text="抽奖"
                    color="#D61820"></u-button>
          <u-button class="thebtn"
                    color="#D61820"
                    shape="circle"
                    @click.native.stop="getTree()"
                    v-if="item.actType == 19">{{ $t('w_0283') }}</u-button>
                    <view class="right_title1"  v-if="item.actType == 22&& item.actStatus == 1&&item.point"> 积分:{{ item.point }}</view>
        </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="newGift"></newGift>
   
  </view>
</template>

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

export default {
  components: {
    giftDrwal,
    getTree,
    newGift
  },
  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) {
      if (item.actType == 16) {
        // 新人礼包;
        this.$refs.newGift.getGiftList(item.pkId);
      } else if (item.actType == 17) {
        //抽奖
        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>