dvcp_v2_wechat_app/src/mods/AppPlease/questionList.vue

<template>
  <div class="page">
    <div class="fixed-top">
      <div class="header-tab">
        <div class="tab-item" v-for="(item, index) in tabList" :key="index" @click="tabClick(index)">{{ item }}<span
            class="active-line" v-if="tabIndex == index"></span></div>
      </div>
      <div class="header-search">
        <div class="search-input-content">
          <img src="https://cdn.cunwuyun.cn/img/search-blue.svg" alt="" class="search-icon">
          <input type="text" placeholder="请输入标题或者编号" class="search-input" placeholder-style="color:#E2E8F1;"
                 v-model="inputValue" @confirm="getList" confirm-type="search"/>
        </div>
      </div>
      <div class="header-select">
        <div class="select-item" @click="leaveMessageTypeShow = true">
          <span>{{ typeName || '提问类型' }}</span>
          <img src="https://cdn.cunwuyun.cn/img/down.svg" alt="" class="down-icon">
        </div>
        <div class="select-item" @click="timeSelectShow = true">
          <span>{{ searchTime || '提问时间' }}</span>
          <img src="https://cdn.cunwuyun.cn/img/down.svg" alt="" class="down-icon">
        </div>
      </div>
    </div>
    <div class="please-list">
      <div class="item" v-for="(item, index) in messageList" :key="index" @click="toDetail(item.id)">
        <p class="item-title"><span class="item-type"
                                    :class="'color-'+item.type">{{
            $dict.getLabel('leaveMessageType', item.type)
          }}</span>{{ item.title }}
        </p>
        <div>
          <span>提问人：{{ item.leaveName }}</span>
          <span>{{ ittem.createTime }}</span>
        </div>
        <img :src="'https://cdn.cunwuyun.cn/dvcp/question/status'+item.status+'.png'" alt="" class="item-status">
      </div>
      <AiEmpty v-if="!messageList.length" class="pad-t168"/>
    </div>
    <u-select v-model="leaveMessageTypeShow" :list="leaveMessageTypeList" @confirm="confirmMessageType"
              confirm-color="#07c160"></u-select>
    <u-picker v-model="timeSelectShow" mode="time" :params="params" :start-year="startDate" :end-year="endDate"
              :default-selector="defaultDate"
              confirm-color="#07c160" @confirm="timeSelectConfirm"></u-picker>
  </div>
</template>
<script>
import {mapState} from 'vuex'

export default {
  name: "questionList",
  appName: "提问记录",
  computed: {
    ...mapState(['user', 'token'])
  },
  data() {
    return {
      tabList: ['全部', '待回复', '已回复', '处理完成'],
      tabIndex: 0,
      status: '',
      inputValue: '',
      timeSelectShow: false,
      params: {
        year: true,
        month: true,
        day: false,
        hour: false,
        minute: false,
        second: false,
      },
      startYear: '',
      endYear: '',
      defaultDate: [],
      searchTime: '',
      leaveMessageTypeShow: false,
      leaveMessageTypeList: [],
      type: '',
      typeName: '',
      messageList: []
    }
  },
  onLoad() {
    this.$dict.load('leaveMessageType').then((res) => {
      this.$nextTick(() => {
        this.$dict.getDict('leaveMessageType').map(i => {
          var item = {
            label: i.dictName,
            value: i.dictValue
          }
          this.leaveMessageTypeList.push(item)
        })
      })
      this.getList()
    })
  },
  methods: {
    getList() {
      this.messageList = []
      var searchParams = {
        createTime: this.searchTime ? this.searchTime + "08" + ' ' + '00' + ":" + "00" + ":" + "00" : '',
        title: this.inputValue,
        type: this.type,
        status: this.status,
        userType: 0,//小程序用户
        openId: this.user.openId
      }
      this.$instance.post(`/app/appleavemessage/listForWx`, searchParams).then(res => {
        if (res.data.records) {
          res.data.records.map((item) => {
            // var reg = new RegExp('(?<=.).', 'g')
            // item.leaveName = item.leaveName.replace(reg, '*')
            item.leaveName = item.leaveName.substring(0, 1) + '**'
          })
          this.messageList = res.data.records
        }
      })
    },
    timeSelectConfirm(e) {
      this.searchTime = e.year + '-' + e.month
      this.getList()
    },
    confirmMessageType(e) {
      this.typeName = e[0].label
      this.type = e[0].value
      this.getList()
    },
    getDate(type) {
      const date = new Date();
      let year = date.getFullYear();
      if (type === 'start') {
        year = year - 10;
      } else if (type === 'end') {
        year = year;
      }
      return `${year}`;
    },
    toDetail(id) {
      this.$linkTo(`./detail?id=${id}`)
    },
    tabClick(index) {
      this.tabIndex = index
      if (!this.tabIndex) {
        this.status = ''
      } else {
        this.status = this.tabIndex - 1
      }
      this.getList()
    }
  },
}
</script>
<style scoped lang="scss">
@import "~dvcp-wui/common";

.page {
  width: 100%;
  background-color: #F3F6F9;

  .please-list {
    padding: 336px 32px 144px;

    .item {
      width: 686px;
      background: #FFF;
      box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.02);
      border-radius: 8px;
      padding: 32px;
      box-sizing: border-box;
      margin-bottom: 32px;
      position: relative;

      .item-title {
        word-break: break-all;
        line-height: 44px;
        color: #333;
        font-size: 32px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        margin-bottom: 16px;

        .item-type {
          border-radius: 8px;
          padding: 8px 8px 4px;
          font-size: 26px;
          line-height: 36px;
          margin-right: 16px;
        }
      }

      div {
        display: flex;
        justify-content: space-between;
        height: 40px;
        line-height: 40px;
        color: #999;
        font-size: 28px;
      }

      .item-status {
        width: 136px;
        height: 136px;
        position: absolute;
        bottom: 0;
        right: 0;
      }
    }
  }

  .color-0 {
    background: #FFEBEF;
    color: #F46;
  }

  .color-1 {
    background: #E8EFFF;
    color: #26f;
  }

  .color-2 {
    background: #E8EFFF;
    color: #26f;
  }

  .fixed-top {
    z-index: 99;
  }

}
</style>