dvcp_v2_wxcp_app/src/pages/casuallyask/casuallyask.vue

<template>
  <div class="casuallyask">
    <div class="banner">
      <picker :range="dictList" @change="bindPickerChange" range-key="dictName">
        <div class="picker">
          {{ askType }}
          <u-icon
              name="arrow-down"
              :custom-style="{ margin: '0 5px' }"
          ></u-icon>
        </div>
      </picker>
      <u-search
          placeholder="请输入标题"
          :show-action="false"
          v-model="keyword"
          @search="onSearch"
      />
    </div>
    <u-tabs
        class="nav"
        :list="tabs"
        :is-scroll="false"
        :current="currentType"
        font-size="32"
        bar-width="192"
        height="96"
        @change="handleTabClick"
    ></u-tabs>
    <div class="body" v-if="eventList.length !== 0">
      <div
          class="content"
          v-for="(item, index) in eventList"
          :key="index"
          @click="detail(item)"
      >
        <u-row>
          <div>
            <div class="top">

              <text :class="item.type == '0' ? 'active' : 'noactive'">
                {{ $dict.getLabel('leaveMessageType', item.type) }}
              </text>
              <!-- 村 -->
              <text class="areaName" v-if="item.areaName">{{ item.areaName }}：</text>
              <!-- 问题 -->
              <text class="title">{{ item.title }}</text>
            </div>

            <div class="cont">
              <span class="name_time">留言人:</span>
              <text class="text_c"> {{ item.leaveName }}</text>
            </div>
            <div class="cont">
              <text class="name_time">留言时间:</text>
              <text class="text_c"> {{ item.createTime }}</text>
            </div>
          </div>
        </u-row>
      </div>
    </div>
    <AiEmpty v-else/>
  </div>
</template>

<script>
import AiEmpty from '../../components/AiEmpty'
import URow from '../../uview/components/u-row/u-row.vue'

export default {
  name: 'casuallyAsk',
  // 组件
  components: {URow, AiEmpty},
  props: {},
  data() {
    return {
      page: {current: 1, size: 10, total: 0},
      dictList: [], // 字典
      index: 0, // 留言类型 0投诉 1咨询 2建议
      keyword: '',
      askType: '提问类型',
      askIndex: '',
      currentType: 0, // 默认value的值(0待我回复)(1已回复)(2处理完成)
      eventList: [] // 数据列表
      // temp: { '0': '投诉', '1': '建议', '2': '咨询' }
    }
  },
  // 计算
  computed: {
    tabs() {
      return [
        {name: '待我回复', value: 0},
        {name: '我已回复', value: 1},
        {name: '处理完成', value: 2}
      ]
    }
  },
  // 实例创建后
  onShow() {
    this.$dict.load('leaveMessageType').then(() => {
      this.dictList = this.$dict.getDict('leaveMessageType')
      this.getList()
    })
  },
  // 方法
  methods: {
    // 点击 value的值(0待我回复)(1已回复)(2处理完成)
    handleTabClick(i) {
      this.currentType = i
      this.getList()
    },
    getList() {
      this.$http.post(`/app/appleavemessage/list`, null, {
        params: {
          ...this.page,
          title: this.keyword,
          status: this.currentType,
          type: this.askIndex
        }
      }).then(res => {
        if (res?.data) {
          this.page.total = res.data.total
          if (this.page.current > 1)
            this.eventList = [...this.eventList, res.data.records]
          else this.eventList = res.data.records
        }
      })
    },
    detail(item) {
      uni.navigateTo({
        url: `/pages/casuallyask/casuallyaskDetail?id=${item.id}&type=${item.type}`
        //  url: `/pages/casuallyask/casuallyaskDetail?id=${item.id}`
      })
    },
    // 提问类型
    bindPickerChange(e) {
      let index = e.detail.value
      this.askType = this.dictList[index].dictName
      this.askIndex = index
      this.getList()
    },
    onSearch(e) {
      this.keyword = e
      this.getList()
    }
  },
  onReachBottom() {
    if (this.eventList.length < this.page.total) {
      this.page.current++
      this.getList()
    }
  }
}
</script>

<style scoped lang="scss">
.casuallyask {
  min-height: 100%;
  background: #f5f5f5;
  padding-top: 64px;

  .banner {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #fff;
    height: 80px;
    line-height: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 30px 0 30px;

    .picker {
      font-size: 30px;
      font-weight: 500;
      color: #333333;
      margin-right: 8px;

      .u-icon-wrap {
        margin-left: 25px;
      }
    }
  }

  .nav {
    position: fixed;
    top: 80px;
    background-color: #ffffff;
    height: 96px;
    padding-top: 8px;
    width: 100%;
  }

  .body {
    padding: 114px 0 0 0;

    .content {
      background-color: #ffffff;
      box-sizing: border-box;
      padding: 34px 32px;
      margin: 32px 20px;

      .top {
        display: flex;
        align-items: center;
        width: 100%;

        .typeBox {

        }

        .noactive {
          text-align: center;
          color: #2266ff;
          width: 70px;
          height: 44px;
          line-height: 44px;
          border-radius: 8px;
          background-color: #e8efff;
        }

        .active {
          text-align: center;
          color: #ff4466;
          line-height: 44px;
          width: 70px;
          height: 44px;
          border-radius: 8px;
          background-color: #ffebef;
        }

        .areaName {
          display: inline-block;
          color: #333;
          font-size: 32px;
          margin-left: 15px;
        }

        .title {
          color: #333;
          font-size: 32px;
        }
      }

      .cont {
        margin: 10px 0;

        .name_time {
          display: inline-block;
          width: 150px;
          height: 24px;
          color: #999;
          font-size: 30px;
          // font-weight: 800;
        }

        .text_c {
          color: #343d65;
          font-size: 30px;
          // font-weight: 800;
        }
      }
    }
  }
}
</style>