zhywpt-sp/subpackage/service/remind/evaluate-list.vue

<!-- 评价列表 -->
<template>
  <view style="padding: 30rpx">
    <evaluate-tab-item :tabs="state.tabs" @tabClick="tabClick" />

    <view class="list" :class="state.type === '2' ? 'btn-divider' : ''">
      <evaluate-issue-item
        :dataList="state.dataList"
        v-if="state.type === '1'"
      />
      <evaluate-business-item
        :dataList="state.dataList"
        v-if="state.type === '2'"
      />
      <evaluate-equity-item
        :dataList="state.dataList"
        v-if="state.type === '3'"
      />
      <evaluate-salesman-item
        :dataList="state.dataList"
        v-if="state.type === '4'"
      />
    </view>
  </view>

  <view class="evaluate-btn" v-if="state.type === '2'">
    <submit-button
      title="去评价"
      @submit="$util.navTo('/subpackage/orders/order-evaluate')"
    ></submit-button>
  </view>
</template>

<script setup lang="ts">
import evaluateTabItem from "./components/evaluate-tab-item";
import evaluateIssueItem from "./components/evaluate-issue-item";
import evaluateEquityItem from "./components/evaluate-equity-item";
import evaluateBusinessItem from "./components/evaluate-business-item";
import evaluateSalesmanItem from "./components/evaluate-salesman-item";
import { onLoad } from "@dcloudio/uni-app";
import { reactive } from "vue";
import { request } from "@/utils/network/request";
import { stringToJson } from "@/utils/network/encryption";

const state = reactive({
  type: "", //评价列表类型 1-发行产品评价 2-业务办理满意度评价 3-权益产品评价 4-业务员满意度评价(暂无UI)
  tabs: ["全部", "好评", "中评", "差评"],
  curCheckTab: "全部", //当前选择的tab
  dataList: [], //评价列表
});

onLoad((options) => {
  state.type = options.type;
  uni.setNavigationBarTitle({
    title: options.title,
  });
  if (state.type === "2") {
    state.tabs = [...state.tabs, "业务类型"];
  }

  fetchList();
});

/* tab点击 */
const tabClick = (tab) => {
  state.curCheckTab = tab;
};

/* 根据不同条件获取数据 */
const fetchList = () => {
  switch (state.type) {
    case "1": //发行产品评价
      requestData("11", { type: state.curCheckTab });
      break;
    case "2": //业务办理满意度评价
      requestData("22", { type: state.curCheckTab });
      break;
    case "3": //权益产品评价
      requestData("33", { type: state.curCheckTab });
      break;
    case "4": //业务员满意度评价
      requestData("44", { type: state.curCheckTab });
      break;
    default:
      break;
  }
};

/*请求评价列表*/
const requestData = (code, data) => {
  const options = {
    type: 2,
    data: data,
    method: "POST",
    showLoading: true,
  };
  // request(code,options).then((res)=>{
  // 	state.dataList = stringToJson(res.bizContent).list;
  // })

  //TODO 构造假数据
  state.dataList = [
    {
      name: "张三",
      time: "2021-10-01 10:10",
      score: "4.5",
      evaluate: "好评",
      title: "产品A",
      content:
        "这里是评价这里是评价这里是评价这里是评价这里是评价这里是评价这里是评价这里是评价这里是评价",
    },
    {
      name: "李四",
      time: "2022-10-01 10:10",
      score: "3.0",
      evaluate: "中评",
      title: "产品B",
      content:
        "这里是评价这里是评价这里是评价这里是评价这里是评价这里是评价这里是评价这里是评价这里是评价",
    },
    {
      name: "河西笑傲",
      time: "2023-10-01 10:10",
      score: "2.8",
      evaluate: "差评",
      title: "产品C",
      content:
        "这里是评价这里是评价这里是评价这里是评价这里是评价这里是评价这里是评价这里是评价这里是评价",
    },
  ];
};
</script>

<style>
page {
  background-color: #eef7f7;
  box-sizing: border-box;
}
</style>
<style lang="scss" scoped>
.list {
  margin-top: 30rpx;
}
.btn-divider {
  margin-bottom: 180rpx;
}
.evaluate-btn {
  width: 100%;
  position: fixed;
  bottom: 0rpx;
  padding: 30rpx 40rpx;
  background-color: #eef7f7;
  text-align: center;
  box-sizing: border-box;
}
</style>