applet/pages/user/faq.vue

<template>
  <view class="container">
    <uv-navbar title="常见问题" placeholder autoBack></uv-navbar>
    <uv-sticky :offsetTop="0" :customNavHeight="44">
      <view class="topsearch u-p30s">
        <uv-search
          v-model="parmas.problemTitle"
          :showAction="true"
          actionText="搜索"
          clearabled
          @search="searchBtn"
          @custom="searchBtn"
        ></uv-search>
      </view>
    </uv-sticky>
    <view class="topsbox">
      <view
        class="u-flex-column-start"
        v-for="(item, i) in balance"
        :key="item.id"
        @click="listText(i, item.id)"
      >
        <view class="uptop u-border-one-one u-flex-center-sb">
          <view class="u-text1">
            {{ item.problemTitle }}
          </view>
          <text class="iconfont u-font28 u-333 icons">&#xe6c7;</text>
        </view>
        <view class="u-font26 u-999 u-mt10 ql-editor-box" v-if="item.show">
          <view v-html="item.replyContent"></view>
        </view>
      </view>
    </view>

    <noData v-if="noDatas" :config="{ top: 20, content: '暂无数据~' }"></noData>
    <loadMore v-if="balance.length > 0" :status="status"></loadMore>
  </view>
</template>
<script setup>
import { problemPage, problemInfo } from "@/api/index.js";
import { ref } from "vue";
import { onReachBottom, onPullDownRefresh, onLoad } from "@dcloudio/uni-app";

const balance = ref([]);
const parmas = ref({
  page: 1,
  limit: 20,
  title: "",
});
const noDatas = ref(false);
const status = ref("more");

function searchBtn() {
  rest();
  accountInfo();
}

function accountInfo() {
  problemPage(parmas.value).then((res) => {
    if (res && res.code == 200) {
      let list = res.rows;
      if (list.length > 0) {
        list = list.map((keys) => {
          keys.show = false;
          keys.replyContentShow = false;
          return keys;
        });
      }
      uni.stopPullDownRefresh();
      balance.value = balance.value.concat(res.rows);
      if (balance.value.length == 0) {
        noDatas.value = true;
      } else {
        noDatas.value = false;
      }
      if (balance.value.length >= res.total) {
        status.value = "noMore";
      } else {
        status.value = "more";
      }
    } else {
      uni.stopPullDownRefresh();
    }
  });
}

function listText(i, id) {
  if (!balance.value[i].replyContentShow) {
    problemInfo(id).then((res) => {
      if (res.code == 200) {
        balance.value[i].replyContent = res.data.replyContent;
        balance.value[i].replyContentShow = true;
        balance.value[i].show = true;
      }
    });
  } else {
    balance.value[i].show = !balance.value[i].show;
  }
}

function rest() {
  parmas.value.page = 1;
  balance.value = [];
}

onLoad(() => {
  accountInfo();
});

onPullDownRefresh(() => {
  rest();
  accountInfo();
});

onReachBottom(() => {
  if (status.value == "noMore") return;
  status.value = "loading";
  parmas.value.page++;
  accountInfo();
});
</script>

<style>
.topsearch {
  /* position: fixed;
  left: 0; */
  width: 100%;
  /* z-index: 2; */
  box-sizing: border-box;
  background-color: #fff;
}

.topsbox {
  padding: 20rpx 30rpx 20rpx;
}

.leftbox {
  height: 60rpx;
  line-height: 60rpx;
  background-color: #e6e6e6;
  border-radius: 30rpx;
}

.u-p30s {
  padding: 10rpx 30rpx;
}

.uptop {
  padding: 30rpx 0;
  width: 100%;
  position: relative;
}

.turn {
  transform: rotate(90deg);
}
</style>