asd-mobild/src/views/weibao/views/loveHelp/index.vue

<template>
  <div class="box">
    <van-nav-bar title="爱心帮扶" @click-left="$router.back()" left-arrow fixed placeholder safe-area-inset-top />
    <van-sticky>
      <van-search v-model="form.name" shape="round" show-action placeholder="请输入名称" @search="onSearch">
        <template #action>
          <div style="display:flex;align-items:center;">
            <div @click="onSearch">搜索</div>
            <van-button v-if="roleIdStr==23" size="mini" @click="$router.push({path:'/loveHelp/details'})">新建</van-button>
          </div>
        </template>
      </van-search>
    </van-sticky>
    <van-list v-model="loading" :finished="finished" :immediate-check="false" finished-text="没有更多了" @load="onLoad">
      <div class="list" v-for="item in dataList" :key="item.id" @click="$router.push({path:'/loveHelp/details',query:{id:item.id,orgId:item.orgId}})">
        <div class="img">
          <van-image fit="cover" :src="getpics(item.pics)" alt="" />
        </div>
        <div class="text">
          <p class="title">{{item.name}}</p>
          <p class="mes">活动日期：{{item.workDate}}</p>
          <p class="date">主办单位：{{item.orgName}}</p>
          <p class="date address">活动地址：{{item.address}}</p>
        </div>
      </div>
    </van-list>
  </div>
</template>
<script>
import { lovingHelpPage } from '../../api/index.js'
export default {
  data() {
    return {
      bgimg: require('../../assets/newsbg.png'),
      roleIdStr: JSON.parse(sessionStorage.getItem('userInfo')).roleIdStr,
      loading: false,
      finished: false,
      dataList: [],
      form: {
        pageNum: 1,
        pageSize: 10,
      },
    }
  },
  created() {
    this.lovingHelpPage()
  },
  methods: {
    async lovingHelpPage() {
      const res = await lovingHelpPage(this.form)
      this.loading = false
      if (this.form.pageNum == 1) {
        this.dataList = res.data.records
      } else {
        this.dataList = this.dataList.concat(res.data.records)
      }
      this.form.pageNum = this.form.pageNum + 1
      if (this.dataList.length >= res.data.total) {
        this.finished = true
      } else {
        this.finished = false
      }
    },
    onLoad() {
      this.loading = true
      this.finished = false
      this.lovingHelpPage()
    },
    onSearch() {
      this.form.pageNum = 1
      this.lovingHelpPage()
    },
    getpics(item) {
      if (!item) return this.bgimg
      var url = ''
      var arr = item.split(',')
      arr.forEach((item, index) => {
        if (item.indexOf('.jpg') || item.indexOf('.png')) {
          url = arr[index]
          console.log(url, 'url')
          return
        }
      })
      return url
    },
  },
}
</script>
<style lang="scss" scoped>
.address {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
p {
  margin: 0;
  margin-top: 16px;
}
.van-list {
  padding: 0 30px;
}
.van-button {
  width: 100px;
  background-color: #1677ff;
  color: #fff;
  font-size: 24px;
  border-radius: 8px;
  margin-left: 10px;
}
.list {
  display: flex;
  align-items: center;
  margin-top: 16px;
  .img {
    .van-image {
      width: 260px;
      height: 160px;
    }
  }
  .text {
    text-align: left;
    margin-left: 26px;
    width: calc(100% - 286px);
    .title {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      font-size: 30px;
    }
    .mes,
    .date {
      font-size: 26px;
    }
    p {
      margin: 0;
      margin-bottom: 16px;
    }
  }
}
/deep/.van-search__action:active {
  background-color: transparent;
}
</style>