warm_man/pages/User/activity.vue

<template>
  <view class="body-background"></view>
  <u-navbar
      :title="title"
      :auto-back="true"
      left-icon-size="40rpx"
      :safe-area-inset-top="true"
      :placeholder="true"
      bgColor="#ffffff"
  ></u-navbar>
  <view class="app-wallpaper">
    <view class="">
      <view class="item blue" style="padding:4rpx;background-color: #fff;border-radius:20rpx;margin-bottom:16rpx;" v-for="item in lists">
        <view class="blue" style="padding:20rpx;border-radius:20rpx;">
          <view class="title row" style="margin-bottom:32rpx;">
            <view class="title-item blue">
              <view class="title-content">
                <u-text :text="item.type_name" color="#ffffff" size="28" line-height="40"></u-text>
              </view>
            </view>
            <view class="title-item">
              <view class="title-content">
                <u-text :text="item.community" color="#90A0AF" size="28" line-height="40"></u-text>
              </view>
            </view>
            <view class="title-item" style="margin-left:auto;padding-right:0;text-align: right;">
              <view class="title-content">
                <u-text :text="'已报名'" color="#178AF2" size="28" line-height="40"></u-text>
              </view>
            </view>
          </view>
          <view class="body row" @click="api.navTo('/pages/Activity/index?id='+item.id)">
            <view class="cover" style="margin-right:24rpx;">
              <u-image mode="widthFix" width="260" height="160" :src="item.cover" radius="10"></u-image>
            </view>
            <view class="content col">
              <view class="content-title" style="margin-bottom:32rpx;">
                <u-text :text="item.title" color="#020B18" size="32"></u-text>
              </view>
              <view class="content-body">
                <view class="body-address row" style="margin-bottom:10rpx;">
                  <view class="icon" style="margin-right:20rpx;">
                    <u-image mode="widthFix" width="32" height="32" :src="staticImage.listPosition"></u-image>
                  </view>
                  <view class="value col ">
                    <u-text :text="item.address" color="#AFB5BE" size="28" custom-style="display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; "></u-text>
                  </view>
                </view>
                <view class="body-phone row" style="justify-content: flex-start">
                  <view class="icon" style="margin-right:20rpx;">
                    <u-image mode="widthFix" width="32" height="32" :src="staticImage.listTime"></u-image>
                  </view>
                  <view class="value row col">
                    <view class="">
                      <u-text :text="$u.timeFormat(item.start_time,'yyyy/mm/dd')" color="#AFB5BE" size="28"></u-text>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
          <view class="button-group row">
            <view class="button join" @click="api.navTo('/pages/User/join?id='+item.id)">参加人员名单</view>
            <view class="button qrcode" @click="api.navTo('/pages/Report/qrcode?id='+item.id)">扫码签到</view>
          </view>
        </view>
      </view>
    </view>
  </view>
  <u-loadmore :status="status" fontSize="28"
              marginBottom="30" marginTop="30" @loadmore="getUserActivity()"/>
</template>

<script>
import {
  imghost
} from '@/config/host.js'
import MzSubsection from '@/components/MzSubsection/Index.vue';
import api from '@/utils/functions.js';
import {goodsOrder, orderLogistics, roomOrder, tabCount} from "@/api/user";
import {userActivity, userFollow} from "@/api/other";

export default {
  components: {
    MzSubsection
  },
  data() {
    return {
      listItem:[
        {name:'全部留言'},
        {name:'已回答'},
        {name:'未回答'},
      ],
      tabCheck:'room',
      title: '我的活动',
      loading: true,
      staticImage: {
        bg: imghost + '/BG.png',
        newIcon: imghost + '/new-icon.png',
        shopThumb: imghost + '/new-1.png',
        ask:imghost+ '/ask.png',
        answer:imghost+ '/answer.png',
        listPosition:imghost+'/activity-position.png',
        listTime:imghost+'/activity-time.png',
        rightRed:imghost+'/activity-red.png',
        rightBlue:imghost+'/activity-blue.png',
        rightGreen:imghost+'/activity-green.png',
        rightOrange:imghost+'/activity-orange.png',
      },
      item:{
        status:1,
        type_name:'社区活动',
        community:'三元社区',
        title:'家庭教育培训课堂开课啦！',
        address:'asdasd',
        start_time:'2023-11-11',
        cover:imghost+'/activity-banner.png',
      },
      lists:[],
      status:'loadmore',
      pages:{
        page:1,
        limit:10,
      }
    }
  },
  onLoad() {

  },
  onReady() {

  },
  computed: {
    api() {
      return api
    }

  },
  methods: {
    getUserActivity(clear = false){
      if (clear) {
        this.status = 'loadmore'
        this.pages.page = 1;
        this.lists = [];
      }
      if (this.status === 'nomore') {
        return false;
      }
      userActivity(this.pages).then(res => {
        this.lists.push.apply(this.lists, res.data);
        if (res.data.length === 0) {
          this.status = 'nomore'
        }
      })
      this.pages.page++;

    },
  },
  onReachBottom() {
    this.getUserActivity();
  },
  onPageScroll(res) {

  },
  mounted() {
    this.getUserActivity();
  },
  created() {

  }
}
</script>

<style lang="scss">
@import './components/activity.scss';
</style>