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

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


		<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 class="bottom-line" v-if="state.flags">我是有底线的~~~</view>
	</view>

	<view class="evaluate-btn" v-if="state.type === '2'">
		<submit-button title="去评价" @submit="goOrder()"></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, onReachBottom } from "@dcloudio/uni-app";
	import { reactive } from "vue";
	import { request } from "@/utils/network/request";
	import { stringToJson } from "@/utils/network/encryption";
	import { satisfactionEvaluation } from "@/utils/network/api";
	import { getItem, StorageKeys } from "@/utils/storage";
	const state = reactive({
		type: "", //评价列表类型 1-发行产品评价 2-业务办理满意度评价 3-权益产品评价 4-业务员满意度评价(暂无UI)
		tabs: ["全部", "好评", "中评", "差评"],
		curCheckTab: "全部", //当前选择的tab
		dataList: [], //评价列表
		scoreLevel: 0,   //0 全部 1 好评 2 中评 3 差评
		serviceType: '',
		pageNo: 1,
		pageSize: 10,
		flags: false,
	});

	onLoad((options) => {
		console.log("options", options)
		state.type = options.type;
		uni.setNavigationBarTitle({
			title: options.title,
		});

		fetchList(1);
	});
	const goOrder = () => {
		uni.switchTab({
			url: "/pages/order/order"
		})
	}
	/* tab点击 */
	const tabClick = (tab) => {
		state.flags = false;
		console.log("tab", tab)
		state.curCheckTab = tab;
		if (tab == '全部') {
			state.scoreLevel = 0
		} else if (tab == '好评') {
			state.scoreLevel = 1
		} else if (tab == '中评') {
			state.scoreLevel = 2
		} else {
			state.scoreLevel = 3
		}
		requestData("11", { type: state.curCheckTab }, 1);
	};

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

	/*请求评价列表*/
	const requestData = (code, data, params) => {
		if (params == 1) {
			state.pageNo = 1
		}
		if (state.pageNo == 1 && state.dataList.length > 0) {
			state.dataList = []
		}
		const options = {
			type: 2,
			data: {
				"serviceType": state.serviceType,
				"scoreLevel": state.scoreLevel,
				"opId": getItem(StorageKeys.OpenId),
				"pageNo": state.pageNo,
				"pageSize": state.pageSize,
			},
			method: "POST",
			showLoading: true,
		};
		request(satisfactionEvaluation, options).then((res) => {
			//若不填评价内容，根据打分规则自动填充评价内容
			//差评展示：默认差评 2.5分及以下
			//中评展示：默认中评 2.5以上4.0以下 
			//好评展示：默认好评 4.0及4.0以上
			const data = stringToJson(res.bizContent).data;
			console.log("stringToJson(res.bizContent)1", data)
			if (data) {
				for (var i = 0; i < data.length; i++) {
					if (data[i].score <= 2.5) {
						data[i].evaluate = '差评';
					} else if (data[i].score > 2.5 && data[i].score < 4) {
						data[i].evaluate = '中评';
					} else {
						data[i].evaluate = '好评';
					}
					data[i].insertTime = data[i].insertTime.split('T').join(' ');
					if (data[i].pictureUrl) {
						data[i].pictureUrlArr = data[i].pictureUrl.split(',')
					}
				}
				// state.dataList = data;
				state.dataList = [...data, ...state.dataList]

			} else {
				state.dataList = []
			}
			console.log("stringToJson(res.bizContent)2", state.dataList)

		})
	};
	// 触底加载
	onReachBottom(() => {
		if (state.dataList.length < state.pageNo * 10) return state.flags = true
		console.log("触底了")
		state.pageNo++
		fetchList(2)
	})
</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;
	}

	.bottom-line {
		text-align: center;
		margin: 30rpx 0;
	}
</style>