dvcp_v2_wechat_app/src/mods/AppIntegralApply/AppIntegralApply.vue

<template>
  <div class="integralapply" v-if="showPage">
    <u-tabs :list="list" :is-scroll="false" :current="currentTab" @change="change" style="width: 50%" bg-color="#4181FF" active-color="#FFF;" inactive-color="#FFF" active-item-style="activeClass"></u-tabs>

    <div class="middle">
      <div class="nav">
        <div class="navLeft" @click="showType = true">
          <span class="showTypes">{{ name ? name : '全部类型' }}</span>

          <u-icon name="arrow-down" style="margin-left: 16px"></u-icon>
        </div>

        <u-search v-model="searchObj" placeholder="请输入姓名或电话" :show-action="false" clearabled bg-color="#fff" search-icon-color="#6AA8F8" placeholder-color="#D0D4D4" @search="handerSearch" @clear=";(searchObj = ''), init()" />
      </div>

      <template v-if="data.length">
        <div class="items" v-for="(item, i) in data" :key="i" @click="toAdd(0, item)">
          <div class="cards">
            <div class="cont">{{ item.description }}</div>

            <div class="flex">
              <span class="tags">{{ $dict.getLabel('atWillReportType', item.applyIntegralType) }}</span>
              <span class="times">{{ item.createTime }}</span>
            </div>
          </div>

          <div class="card">
            <span :class="item.auditStatus == 0 ? 'status2' : item.auditStatus == 1 ? 'status0' : 'status1'" class="status">
              <span>{{ $dict.getLabel('auditStatus', item.auditStatus) }}</span>

              <span v-if="item.auditStatus == 1">
                <span v-if="item.auditIntegral * 1 > 0">+</span>
                <span>{{ item.auditIntegral }}分</span>
              </span>
            </span>
          </div>
        </div>
      </template>

      <AiEmpty description="暂无数据" class="emptyWrap" v-else></AiEmpty>
    </div>

    <div class="fixedBtn" @click="toAdd(1)">我要申请</div>

    <u-select v-model="showType" :list="newList" value-name="dictValue" label-name="dictName" @confirm="confirm"></u-select>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'AppIntegralApply',
  appName: '积分申请',
  components: {},
  props: {},
  data() {
    return {
      showPage: false,
      name: '',
      list: [
        {
          name: '全部',
        },
        {
          name: '待审核',
        },
        {
          name: '已审核',
        },
      ],
      currentTab: 0,
      showType: false,
      value: '',
      name: '',
      searchObj: '',
      data: [],
      current: 1,
      newList: [],
    }
  },
  computed: {
    ...mapState(['user']),

    activeClass() {
      return {
        fontSize: '44px',
      }
    },
  },
  watch: {},
  onLoad() {
    this.$dict.load('atWillReportType', 'auditStatus').then(() => {
      this.getList()
    })
  },
  onShow() {
    uni.$on('updateList', () => {
      this.current = 1
      this.getList()
    })
  },
  methods: {
    getList() {
      this.$instance
        .post('/app/appvillagerintegraldeclare/list', null, {
          params: {
            size: 6,
            current: this.current,
            residentId: this.user.residentId,
            description: this.searchObj,
            applyIntegralType: this.value,
            auditType: this.currentTab == '0' ? '' : this.currentTab == '1' ? '0' : this.currentTab == 2 ? '1' : '',
          },
        })
        .then((res) => {
          if (res.code == 0) {
            this.data = this.current > 1 ? [...this.data, ...res.data.records] : res.data.records

            const oldList = this.$dict.getDict('atWillReportType')
            const addList = [{ dictName: '全部类型', dictValue: '', dictColor: null }]
            this.newList = [...addList, ...oldList]
          }
        })
        .finally(() => {
          this.showPage = true
        })
    },

    toAdd(index, item) {
      if (index == '0') {
        this.$linkTo(`./detail?id=${item.id}`)
      }
      if (index == '1') {
        this.$linkTo(`./add`)
      }
    },

    init() {
      this.data = []
      this.current = 1
      this.getList()
    },

    change(index) {
      this.currentTab = index
      this.init()
    },

    confirm(e) {
      this.value = e[0].value
      this.name = e[0].label
      this.init()
    },

    handerSearch(e) {
      this.searchObj = e
      this.init()
    },
  },
  onReachBottom() {
    this.current = this.current + 1
    this.getList()
  },
}
</script>

<style scoped lang="scss">
.integralapply {
  height: 100%;
  ::v-deep .u-tabs {
    padding-right: 326px;
    padding-top: 24px;
    padding-bottom: 12px;
  }

  .middle {
    padding: 0 32px;
    padding-bottom: 112px;
    .nav {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 54px 0 14px 0;
      .navLeft {
        display: flex;
        width: calc(100% - 430px);
        height: 32px;
        line-height: 32px;

        .showTypes {
          font-size: 38px;
          color: #333333;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
      ::v-deep u-search {
        width: 410px;
      }
    }

    .items {
      margin-top: 24px;
      .cards {
        padding: 32px;
        background: #fff;
        border-radius: 16px 16px 0px 0px;
        box-shadow: inset 0px -1px 0px 0px #dddddd;
        .cont {
          line-height: 50px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
          font-size: 36px;
          font-weight: 500;
          color: #333333;
        }

        .flex {
          display: flex;
          justify-content: space-between;
          margin-top: 28px;
          .tags {
            display: inline-block;
            padding: 4px 16px;
            background: #eeeeee;
            border-radius: 24px;
            font-size: 28px;
            color: #999999;
          }
          .times {
            width: 53%;
            font-size: 28px;
            color: #999;
            margin-left: 15px;
            text-align: right;
          }
        }
      }

      .card {
        padding: 32px 0 32px 32px;
        background: #fff;
        box-shadow: inset 0px -1px 0px 0px #dddddd;
        border-radius: 0px 0px 16px 16px;
        .status {
          font-size: 28px;
        }
        .status0 {
          color: #42d784;
        }
        .status1 {
          color: #ff4466;
        }
        .status2 {
          color: #ff883c;
        }
      }
    }
  }

  .fixedBtn {
    position: fixed;
    bottom: 0;
    width: 100%;
    box-sizing: border-box;
    background: #4181ff;
    padding: 20px 0;
    text-align: center;
    border-radius: 16px;
    font-size: 34px;
    font-weight: 500;
    color: #ffffff;
    z-index: 999;
  }
}
</style>