xq-csg-weapp_uni-ts/src/packages/people/pages/activity-mien/index.vue

<template>
  <view>
    <custom-nav-bar position="fixed" color="black" left-text="活动风采" left-arrow />

    <view class="search">
      <view class="flex flex-between search-input">
        <input class="input" :value="searchValue" type="text" confirm-type="search"
          placeholder-class="placeholder-style" placeholder="请输入搜索商户名称" @input="onSearch" @confirm="onChange" />
        <view class="search-icon flex flex-center" @click="onSearch">
          <image class="imgage" src="/static/images/search.png"></image>
        </view>
      </view>
    </view>

    <view class="activity" v-if="newsPageList.length !== 0">
      <block v-for="(item,index) in newsPageList" :key="index">
        <view class="activity-item" @click="headerDetail(item)">
          <image class="activity-image" :src="item.activityCoverImg" mode="aspectFill"></image>
          <view class="activity-type" v-if="index < 5" :class="`activity-type${index}`">NO.{{index+1}}</view>
          <view class="activity-title multi-line">{{item.activityTitle}}</view>
          <view class="activity-time">{{getDateTime(item.createTime)}}</view>
          <view class="activity-rigth">
            <text>{{item.userName}}</text>
            <image :src="item.avatar || '@/images/default-avatar.png'" mode=""></image>
          </view>
        </view>
      </block>
    </view>

    <van-empty v-else
      image="https://jiexiu.xuqidata.com:8083/jiexiujumin/e1bb4242ccc209c332b84a3fde862cc156b31634152d5df503642438bfdded50.png"
      :image-size="['78%','100%']" description="没有找到您要查询的信息" />
  </view>
</template>

<script>
  import * as peopleApi from '@/api/peopleApi';
  import * as publicApi from '@/api/publicApi';
  import utils from '@/utils/util.map'
  export default {
    data() {
      return {
        option: {},
        searchValue: '',
        newsPageList: []
      }
    },
    onLoad(option) {
      this.option = option
      this.merchantPageApi(false)
    },
    methods: {
      getDateTime(time) {
        return utils.getDateTime(time, 2)
      },
      onSearch(e) {
        this.searchValue = e.detail.value
        if (e.detail.value !== '') {
          return;
        }
        this.searchValue = e.detail.value
        this.merchantPageApi();
      },
      onChange(e) {
        this.searchValue = e.detail.value
        this.merchantPageApi();
      },
      // 分页参数处理事件
      generalQueryData(reset = false) {
        const {
          pageNo,
          pageSize,
        } = this;
        const params = {
          pageNo: 1,
          pageSize: 14,
        };
        if (reset) {
          return params;
        }
        return {
          ...params,
          pageNo: pageNo + 1,
          pageSize
        };
      },
      async merchantPageApi(reset = true) {
        const params = this.generalQueryData(reset);
        const param = {
          pageNo: 1,
          pageSize: 10,
        };
        if (this.searchValue) {
          param.key = this.searchValue;
        }
        const res = await peopleApi.activityPageApi(param);
        if (res.data) {
          this.newsPageList = res.data.list
        }
      },
      headerDetail(item) {
        uni.navigateTo({
          url: './detail?id=' + item.id
        })
      }
    },
    onReachBottom() {
      if (this.newsPageList.length === this.total) {
        return;
      }
      this.merchantPageApi(false);
    }
  }
</script>

<style lang="less" scoped>
  page {
    background-color: #F9F9F9;
  }

  .search {
    padding: 0rpx 30rpx 40rpx 30rpx;
    background-color: #ffffff;
  }

  .search-input {
    height: 64rpx;
    line-height: 64rpx;
    background: #f9f9f9;
    border-radius: 35rpx;
    border: 1px solid #e1e1e1;
    text-align: center;
    position: relative;
    box-sizing: content-box;
    padding: 0 30rpx;

    .input {
      width: 100%;
      height: 64rpx;
      line-height: 64rpx;
      text-decoration: 20rpx;
      padding: 0 64rpx;
      font-size: 26rpx;
      font-weight: 400;
    }

    .placeholder-style {
      text-align: center;
      color: #c1c1c1;
    }
  }

  .search-icon {
    width: 64rpx;
    height: 64rpx;
    background: #ffffff;
    border-radius: 35rpx;
    border: 1px solid #e1e1e1;
    position: absolute;
    right: -1px;
    top: 0;
    z-index: 1;

    .imgage {
      width: 32rpx;
      height: 32rpx;
    }
  }


  .activity {
    padding: 23rpx 20rpx;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 16rpx;

    .activity-item {
      position: relative;
      background: #fff;
      border-radius: 8rpx;
      overflow: hidden;

      .activity-image {
        width: 100%;
        height: 180rpx;
      }

      .activity-title {
        font-size: 24rpx;
        font-weight: 400;
        color: #000000;
        padding: 0 16rpx;
      }

      .activity-time {
        font-size: 24rpx;
        font-weight: 400;
        margin-top: 8rpx;
        color: #999999;
        padding: 0 16rpx;
      }

      .activity-rigth {
        text-align: right;
        font-size: 24rpx;
        font-weight: 400;
        color: #FF7F34;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding: 28rpx 28rpx 30rpx 0rpx;

        image {
          width: 32rpx;
          height: 32rpx;
          margin-left: 16rpx;
          border-radius: 1932312312px;
        }
      }
    }
  }

  .activity-type {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 0px 8rpx 1000rpx 0;
    font-size: 24rpx;
    font-weight: 400;
    color: #fff;
    width: 100rpx;
    padding: 12rpx 30rpx 12rpx 12rpx;
    text-align: center;
  }

  .activity-type0 {
    background: linear-gradient(270deg, #E71E00 0%, #FF5E33 100%);
  }

  .activity-type1 {
    background: linear-gradient(270deg, #F3623B 0%, #F88C44 100%);
  }

  .activity-type2 {
    background: linear-gradient(291deg, #fea422 0%, #f9ca10 100%);
  }

  .activity-type3 {
    background: linear-gradient(291deg, #4a507b 0%, #6882b1 100%);
  }

  .activity-type4 {
    background: linear-gradient(291deg, #4a507b 0%, #6882b1 100%);
  }

  .van-empty__description {
    font-size: 28rpx !important;
    font-weight: 400;
    color: #BFBFBF;
  }

  .van-empty__image {
    width: 75% !important;
    height: 100%;
  }
</style>