uniapp-ZHSQ/packages/workOrderDashboard/detail/index.vue

<template>
	<div class="container">
		<div class="searchBox" :style="{ height: localHeight + 'px', paddingTop: top + 'px' }">
			<div class="searchBox_add">
				<div class="searchBox_left">
					<u-icon bold color="#000" size="40" name="arrow-left" @click="headerBackClick"></u-icon>
				</div>
				<div class="searchBox_mid">工单详情</div>
				<div class="searchBox_right"></div>
			</div>
		</div>

		<div class="repairMsg">
			<div class="orderItemTit orderItemTit_state1" v-if="state == 1">
				<div class="orderItemTit_left">工单编号：123456789145</div>
				<div class="orderItemTit_right ">待指派</div>
			</div>
			<div class="orderItemTit orderItemTit_state2" v-if="state == 2">
				<div class="orderItemTit_left">工单编号：123456789145</div>
				<div class="orderItemTit_right">进行中</div>
			</div>
			<div class="orderItemTit orderItemTit_state3" v-if="state == 3">
				<div class="orderItemTit_left">工单编号：123456789145</div>
				<div class="orderItemTit_right">已作废</div>
			</div>
			<div class="orderItemTit orderItemTit_state4" v-if="state == 4">
				<div class="orderItemTit_left">工单编号：123456789145</div>
				<div class="orderItemTit_right">已完成</div>
			</div>

			<div class="row">
				<div class="row_label">小区房源名称</div>
				<div class="row_con">世纪名城1号楼1单元101</div>
			</div>

			<div class="row">
				<div class="row_label">报修类型</div>
				<div class="row_con">家具维修</div>
			</div>

			<div class="row">
				<div class="row_label">问题描述</div>
				<div class="row_con">门坏了</div>
			</div>

			<div class="row">
				<div class="row_label">联系人</div>
				<div class="row_con">高尚</div>
			</div>

			<div class="row">
				<div class="row_label">联系电话</div>
				<div class="row_con">15901518415</div>
			</div>

			<div class="row">
				<div class="row_label">上门时间</div>
				<div class="row_con">2025-06-12 12:00</div>
			</div>
		</div>

		<div class="repairMsg">
			<div class="row">
				<div class="row_label df">图片</div>
				<div class="row_con">
					<image v-for="item in 3" src="http://192.168.0.172:5500/com_communityNav.png" mode="aspectFill">
					</image>
				</div>
			</div>

			<div class="row">
				<div class="row_label df">视频</div>
				<div class="row_con">
					<image src="http://192.168.0.172:5500/com_communityNav.png" mode="aspectFill"></image>
				</div>
			</div>

			<div class="row">
				<div class="row_label">创建时间</div>
				<div class="row_con noneBor">2025-06-12 12:00</div>
			</div>
		</div>

		<div class="repairMsg" v-if="state != 1">
			<div class="row">
				<div class="row_label">维修师傅</div>
				<div class="row_con">
					刘师傅
				</div>
			</div>

			<div class="row">
				<div class="row_label">师傅手机号</div>
				<div class="row_con">
					13445667552
				</div>
			</div>

			<div class="row">
				<div class="row_label">师傅工号</div>
				<div class="row_con noneBor">123456789</div>
			</div>
		</div>

		<div class="repairMsg" v-if="state != 1">
			<div class="row">
				<div class="row_label df">维修图片</div>
				<div class="row_con">
					<image v-for="item in 3" src="http://192.168.0.172:5500/com_communityNav.png" mode="aspectFill">
					</image>
				</div>
			</div>

			<div class="row">
				<div class="row_label df">维修视频</div>
				<div class="row_con">
					<image src="http://192.168.0.172:5500/com_communityNav.png" mode="aspectFill"></image>
				</div>
			</div>

			<div class="row">
				<div class="row_label">维修描述</div>
				<div class="row_con noneBor">大门坏了文案文案文案文案</div>
			</div>
		</div>
		<div class="white_container" v-if="state == 2 && type === 'edit'" @click="headerChangeStateClick">
			<div style="display: flex; justify-content: space-between;">
				<div style="display: flex;">
					<div class="white_label">工单状态</div>
					<div class="whit_desc">{{orderState.desc || orderStateList[0].desc }}</div>
				</div>
				<u-icon name="arrow-up" v-if="!orderSelect" />
				<u-icon name="arrow-down" v-if="orderSelect" />
			</div>
			
			<view class="statePupop" v-if="orderSelect">
				<view class="statePopop_label" v-for="(item, index) in orderStateList" :key="index" @click.stop="headerSelectClick(item)">{{item.desc}}</view>
			</view>
		</div>
		<div class="btn" v-if="state == 1" @click="headerTakeClick">接单</div>
		<div class="btn" v-if="state == 2" @click="headerEditClick">{{type === 'edit' ? '确定' : '编辑'}}</div>
	</div>
</template>

<script>
import {
	request,
	picUrl,
	NavgateTo,
	upload,
	isPhone,
	menuButtonInfo
} from '../../../utils';
import {
	apiArr
} from '../../../api/community';
export default {
	data() {
		return {
			active: "1",
			top: "",
			localHeight: "",
			state: '4',
			type: 'edit',
			orderSelect: false,
			orderStateList: [
				{
					desc: '进行中',
					state: '2'
				},
				{
					desc: '已作废',
					state: '3'
				},
				{
					desc: '已完成',
					state: '4'
				},
			],
			orderState: {},
		}
	},
	methods: {
		headerBackClick() {
			uni.navigateBack({
				delta: 1
			});
		},
		headerTakeClick() {
			console.log('接单')
		},
		headerEditClick() {
			if(this.type === 'edit') {
				console.log('确定')
			} else {
				this.type = 'edit';
				console.log('编辑')
			}
		},
		headerChangeStateClick() {
			this.orderSelect = true;
		},
		headerSelectClick(item) {
			this.orderState = item;
			this.orderSelect = false;
		}
	},

	onLoad(options) {
		const meun = menuButtonInfo();
		this.top = meun.top;
		this.localHeight = meun.height;
	},

	onShow() {

	},

}
</script>

<style>
@import url("./index.css");
</style>