dvcp_v2_wechat_app/src/mods/AppIntegralApply/AppIntegralApply.vue

<template>
  <div class="integralapply">
    <u-tabs :list="list" :is-scroll="false" :current="currentTab" @change="change" style="width: 50%" bg-color="#197df0" active-color="#FFF;" inactive-color="#FFF"></u-tabs>

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

          <u-icon name="arrow-down" v-if="!name"></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.content }}</div>

            <div class="flex">
              <span class="tags">{{ item.address }}</span>
              <span class="times">{{ item.createTime }}</span>
            </div>
          </div>

          <div class="card">
            <span>{{ item.name }}</span>
          </div>
        </div>
      </template>

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

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

    <u-select v-model="show" :list="lists" @confirm="confirm"></u-select>
  </div>
</template>

<script>
export default {
  name: 'AppIntegralApply',
  appName: '积分申请',
  components: {},
  props: {},
  data() {
    return {
      name: '',
      list: [
        {
          name: '全部',
        },
        {
          name: '待审核',
        },
        {
          name: '已审核',
        },
      ],
      currentTab: 0,
      show: false,
      lists: [
        {
          value: '0',
          label: '江',
        },
        {
          value: '1',
          label: '湖',
        },
      ],
      value: '',
      name: '',
      searchObj: '',
      data: [],
      current: 1,
    }
  },
  computed: {},
  watch: {},
  onLoad() {
    this.getList()
  },
  onshow() {
    uni.$on('updateList', () => {
      this.getList()
    })
  },
  methods: {
    getList() {
      this.$instance
        .post('/app/appmarriagefuneralinfo/list', null, {
          params: {
            size: 6,
            current: this.current,
            searchObj: this.searchObj,
          },
        })
        .then((res) => {
          if (res.code == 0) {
            this.data = this.current > 1 ? [...this.data, ...res.data.records] : res.data.records
          }
        })
    },

    toAdd(index, item) {
      if (index == '0') {
        console.log(index, '详情')
        this.$linkTo(`./detail?id=${item.id}`)
      }
      if (index == '1') {
        console.log(index, '新增')
        this.$linkTo(`./add`)
      }
    },

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

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

    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 {
        width: calc(100% - 460px);
      }
      ::v-deep u-search {
        width: 460px;
      }
    }

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

        .flex {
          display: flex;
          justify-content: space-between;
          .tags {
          }
          .times {
          }
        }
      }

      .card {
        padding: 32px 0 32px 32px;
        background: #fff;
        box-shadow: inset 0px -1px 0px 0px #dddddd;
        border-radius: 0px 0px 16px 16px;
      }
    }
  }

  .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: 600;
    color: #ffffff;
    z-index: 999;
  }
}
</style>