dvcp_v2_wechat_app/src/mods/AppPlease/AppPlease.vue

<template>
  <div class="page">
    <div class="fixed-top">
      <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>
      </div>
      <AiEmpty v-if="!messageList.length"/>
    </div>
    <div class="fixed-bottom bottom-btn">
      <div @click="$linkTo('./questionList')">提问记录</div>
      <div class="btn-active" @click="$linkTo('./add')">我要提问</div>
    </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: "AppPlease",
  appName:"随心问",
  computed: {
    ...mapState(['user', 'token']),
    startDate() {
      return this.getDate('start')
    },
    endDate() {
      return this.getDate('end')
    }
  },
  data() {
    const currentDate = this.getDate({
      format: true
    })
    return {
      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() {
      var searchParams = {
        createTime: this.searchTime ? this.searchTime + '-' + "01" + ' ' + '00' + ":" + "00" + ":" + "00" : '',
        title: this.inputValue,
        type: this.type,
        userType: 0,//小程序用户
      }
      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, '*')
            if (item.leaveName) {
              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}`)
    },
  }
}
</script>
<style scoped lang="scss">
@import "../../common/common.scss";

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

  .please-list {
    padding: 240px 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;

      .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;
      }
    }
  }

  .bottom-btn {
    height: 112px;
    line-height: 110px;
    font-weight: 500;
    color: #666;
    font-size: 36px;
    display: flex;
    background-color: #fff;
    border-top: 2px solid #ddd;
    box-sizing: border-box;

    div {
      flex: 1;
      text-align: center;
    }

    .btn-active {
      background-color: #1365DD;
      color: #fff;
    }
  }

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

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

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

}

</style>