epmet-wx-pa-chengyang/src/views/appeal/index.vue

<template>
  <div>
    <!--    <van-tabs v-model="type" @change="tabList" animated sticky swipeable lazy-render>
      <van-tab title="我的事件">-->
    <div class="container">
      <div class="event-list" v-if="eventList.length > 0">
        <div
          class="event-item"
          v-for="(item, index) in eventList"
          :key="index"
          @click="$router.push({ path: '/appealDetail', query: { pageType: 'event', ...item } })"
        >
          <div class="title">
            <van-tag
              round
              size="medium"
              style="margin-right: 5px"
              :color="item.status == '处理中' ? processing.bg : completion.bg"
              :text-color="item.status == '处理中' ? processing.text : completion.text"
            >
              {{ item.status }}
            </van-tag>
            <span class="text">{{ item.content }}</span>
          </div>
          <div class="time">{{ item.happenTime }}</div>
          <div class="imgs">
            <van-image
              fit="cover"
              v-for="(item2, index2) in item.imageList"
              @click.prevent.stop="previewImage(index2, item.imageList)"
              :src="item2"
              :key="index2"
            />
          </div>
        </div>
      </div>
      <div class="no-data" v-else>暂无内容</div>
    </div>
    <!--      </van-tab>
      <van-tab title="我的需求">
        <div class="container">
          <div class="event-list">
            <div
              class="event-item"
              v-for="(item, index) in demandList"
              :key="index"
              @click="$router.push({ path: '/appealDetail', query: { pageType: 'demand', ...item } })"
            >
              <div class="title">
                <van-tag
                  round
                  size="medium"
                  style="margin-right: 5px"
                  :color="item.status == '处理中' ? processing.bg : completion.bg"
                  :text-color="item.status == '处理中' ? processing.text : completion.text"
                >
                  {{ item.status }}
                </van-tag>
                <span class="text">{{ item.content }}</span>
              </div>
              <div class="time">{{ item.happenTime }}</div>
              <div class="imgs">
                <van-image
                  fit="cover"
                  v-for="(item2, index2) in item.imageList"
                  @click.prevent.stop="previewImage(index2, item.imageList)"
                  :src="item2"
                  :key="index2"
                />
              </div>
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>-->
  </div>
</template>

<script>
import { collects } from '@/api/event'
import { ImagePreview } from 'vant'
import { requirementList } from '@/api/demand'
export default {
  name: 'appeal',
  components: {
    [ImagePreview.Component.name]: ImagePreview.Component
  },
  data() {
    return {
      type: 0,
      completion: {
        bg: 'rgba(79,148,255,0.14)',
        text: '#4F94FF'
      },
      processing: {
        bg: 'rgba(255,120,60,0.14)',
        text: '#FF783C'
      },
      eventList: [],
      demandList: []
    }
  },
  mounted() {
    this.getEventList()
  },
  methods: {
    getEventList() {
      let parm = {
        pageSize:10,
        pageNo:1,
        name:this.$store.state.app.userInfo.realName||'',
        mobile:this.$store.state.app.userInfo.mobile||'',
        agencyId:this.$store.state.app.agencyId
      }
      collects(parm).then(res => {
        this.eventList = res.list;
      })
    },
    getDemandList() {
      requirementList({
        mobile: this.$store.state.app.userInfo.phone
      }).then(res => {
        this.demandList = res
      })
    },
    tabList(val) {
      console.log(val)
      if (val === 0) {
        this.getEventList()
      } else {
        this.getDemandList()
      }
    },
    previewImage(index, urls) {
      ImagePreview({
        images: urls,
        startPosition: index
      })
    }
  }
}
</script>

<style scoped lang="less">
@import './index';
</style>