lanan-repair-app/pages-business/businessInfo/businessInfo.vue

<template>
	<view class="container">
		<!-- 顶部背景 -->
		<view class="header">
			<image class="bg-img" src="/static/images/table_header.png" mode="aspectFill"></image>
			<view style="display: flex;align-items: center;padding-left: 20rpx;">
				<uni-icons style="position: absolute;left: 30rpx;" @click="goBack" type="left" color="black"
					size="24"></uni-icons>
			</view>
			<view class="title">{{title}}业务总览</view>
		</view>

		<!-- 表格 -->

		<uni-table emptyText="暂无更多数据" style="margin-top: 30rpx;">
			<!-- 表头行 -->
			<uni-tr style="background: #E5EEFF;">
				<uni-th>车辆信息</uni-th>
				<uni-th>业务</uni-th>
				<!-- <uni-th>渠道</uni-th> -->
				<uni-th>来源</uni-th>
				<uni-th>经办人</uni-th>
				<uni-th>办理时间</uni-th>
				<uni-th>付款状态</uni-th>
			</uni-tr>
			<!-- 表格数据行 -->
			<uni-tr v-for="(item,index) in list" :key="index" class="table-row" @click.native="goWorkDetail(item)"
				:class="{'row-bg': index % 2 === 1}">
				<uni-td>{{ item.carNo }}</uni-td>
				<uni-td>{{ item.sourceStr }}</uni-td>
				<!-- <uni-td>{{ item.channel }}</uni-td> -->
				<uni-td>{{ item.busiFrom }}</uni-td>
				<uni-td>{{ item.handleName }}</uni-td>
				<uni-td>{{ formatDateTimeToMinute(item.createTime) }}</uni-td>
				<uni-td>{{ dictData[item.payStatus] }}</uni-td>
			</uni-tr>

		</uni-table>
		<uni-pagination :current="current" :pageSize="queryParams.pageSize" :total="total"
			@change="onPageChange"></uni-pagination>
	</view>
</template>

<script>
	import request from '../../utils/request';
	import {
		formatDateTimeToMinute,
		getDictTextByCodeAndValue,
		getDictByCode
	} from '@/utils/utils.js'

	export default {
		data() {
			return {
				list: [],
				data: undefined,
				queryParams: {
					pageSize: 15,
					pageNo: 1
				},
				title: '',
				total: 0,
				current: 0,
				safeLeft: 0,
				dictData: undefined,
			}
		},
		methods: {
			formatDateTimeToMinute,
			getDictTextByCodeAndValue,
			goBack() {
				uni.redirectTo({
					url: '/pages/white/white'
				});
			},
			async getDict() {
				const list = await getDictByCode('repair_pay_status')
				this.dictData = list?.reduce((map, item) => {
					map[item.value] = item.label
					return map
				}, {}) ?? {} // 如果 list 为空或 reduce 返回 undefined，则使用空对象
				console.log('dict', this.dictData)
			},
			getList() {
				request({
					url: `/admin-api/repair/statistics/pageByCustomerOrCar`,
					params: this.queryParams
				}).then(res => {
					this.list = res.data.records
					this.total = res.data.total
					this.current = res.data.current
				})
			},
			onPageChange(e) {
				this.queryParams.pageNo = e.current
				this.getList()
			},
			goWorkDetail(data) {
				console.log('执行');
				// 退出时恢复自动（或者你项目里默认的方向）
				// #ifdef APP-PLUS
				plus.screen.lockOrientation('portrait-primary'); //锁死屏幕方向为竖屏
				plus.navigator.setFullscreen(false);
				// #endif
				const innerUrl = `/pages-order/orderDetail/orderDetail?id=${data.id}&isDetail=1`
				// const url = `/pages-business/white/newWhite?url=${encodeURIComponent(innerUrl)}`
				setTimeout(() => {
					uni.navigateTo({
						url: innerUrl
					})
				}, 1000); // 300毫秒延时，可以根据需要调整
			}
		},
		onShow() {},
		//页面显示时切换为横屏配置
		onLoad(options) {
			this.getDict()
			console.log('传进来的数据', options);
			if (options.data) {
				const queryParams = JSON.parse(decodeURIComponent(options.data));
				this.data = queryParams
				if (options.type == 'customer') {
					this.queryParams.phone = queryParams.customerPhone
					this.title = queryParams.customerName
				} else {
					this.queryParams.carNo = queryParams.carNum
					this.title = queryParams.carNum
				}
				this.getList()
			}
		},
		// 监听页面返回
		onBackPress() {
			console.log('执行跳转');
			// 跳转至空白页
			uni.redirectTo({
				url: '/pages/white/white'
			});
			return true;
		},
	}
</script>

<style scoped>
	.container {
		width: 100%;
		height: 100%;
		background-color: white;
		padding-left: env(safe-area-inset-left);

	}

	/* 顶部背景和标题 */
	.header {
		display: flex;
		position: relative;
		height: 100rpx;
		justify-content: center;
		align-items: center;
		padding: 20rpx 40rpx;
		padding-top: var(--status-bar-height); //给组件加个上边距
	}

	.bg-img {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		/* z-index: -1; */
	}

	.title {
		text-align: center;
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		line-height: 100rpx;
		z-index: 2;
	}

	/* 表格 */
	.table {
		margin: 20rpx;
		border-radius: 12rpx;
		overflow: hidden;
	}

	.table-row {
		/* flex-direction: row;
		display: flex; */
	}

	.table-header {
		background-color: #f2f6ff;
		font-weight: bold;
	}

	.table-cell {
		flex: 1;
		padding: 20rpx;
		text-align: center;
		font-size: 28rpx;
		color: #555;
	}

	.row-bg {
		background-color: #f9fbff;
	}

	.status {
		color: #d4a017;
		/* 金色 */
		font-weight: 500;
	}
</style>