JinShan_uniapp/pages/serviceTickets/index.vue

<template>
	<view class="container">
		<!-- 引入头部组件 -->
		<Header :title="'智能工单'"></Header>
		<view class="conent">
			<view class="form-item">
				<view class="label">
					<u-icon name="order" color="#3B8CFF" size="38"></u-icon>
					工单内容
				</view>
				<textarea v-model="workOrderContent" placeholder="请输入..." style="width: 100%;" />
				<view class="voice-icon">
					<u-icon name="mic" color="#409EFF" size="36"></u-icon>
				</view>
			</view>
			<!-- 上传照片/视频 -->
			<view class="form-item">
				<view class="label">

					<u-icon name="photo" color="#3B8CFF" size="38"></u-icon>
					上传照片/视频
				</view>
				<view class="upload-area">
					<u-upload :action="uploadAction" :max-count="8" @on-success="handleUploadSuccess" width="200"
						height="200"></u-upload>
				</view>
				<text class="note">注：照片可识别工单内容，支持分批上传，但最大数量为8</text>
			</view>

			<!-- 工单分类 -->
			<view class="form-item" style="height: 60rpx;line-height: 50rpx;">
				<view class="label" @click="showSelect = true">
					工单类型
					<view @click="showPicker = true" class="select-box">
						{{ workOrderCategory || '请选择' }}
						<u-icon name="arrow-down" color="#999" size="30"></u-icon>
					</view>
				</view>

				
				<u-picker :show="showSelect" :columns="categoryList" @confirm="handleConfirm"
					@cancel="handleCancel"></u-picker>
			</view>


			<!-- 工单地点 -->
			<view class="form-item" style="margin-bottom: 30rpx;height: 200rpx;">
				<view class="label">
					<u-icon name="map" color="#3B8CFF" size="38"></u-icon>
					工作地点
				</view>
				<textarea v-model="workOrderLocation" placeholder="请输入..." style="width: 100%;" />
				
			</view>
			

			<!-- 预计上门时间 -->
			<view class="form-item"  style="height: 200rpx;">
				<view class="label">
					<u-icon name="clock" color="#3B8CFF" size="38"></u-icon>
					期望上门时间
				</view>
				<textarea v-model="expectedTime" placeholder="请输入..." style="width: 100%;" />
				
			</view>
			
			

			<!-- 提交按钮 -->
			<view class="submit-button">
				<u-button type="primary" @click="handleSubmit">提交</u-button>
			</view>

		</view>
		<!-- 工单内容 -->



		<Footer></Footer>
	</view>

</template>

<script>
	import Header from '@/components/header_common.vue';
	import Footer from '@/components/footer_common.vue';
	export default {
		components: {
			Header,
			Footer
		},
		data() {
			return {
				workOrderContent: '',
				uploadAction: 'https://your-upload-api.com/upload', // 替换为你的上传接口地址
				workOrderCategory: '',
				showSelect: false, // 控制下拉框的显示状态
				categoryList: [
					['投诉', '维修']
				],
				workOrderLocation: '',
				expectedTime: ''
			};
		},
		methods: {
			handleBack() {
				uni.navigateBack({
					delta: 1 // 返回上一级页面
				});
			},
			handleUploadSuccess(res) {
				console.log('上传成功:', res);
			},
			handleSubmit() {
				// 处理提交逻辑
				console.log('提交数据:', this.workOrderContent, this.workOrderCategory, this.workOrderLocation, this
					.expectedTime);
			},
			// 用户点击“确定”时触发
			handleConfirm(e) {
				// const selectedIndex = e[0]; // 获取选中的索引
				// this.workOrderCategory = this.categoryList[selectedIndex].label;
				this.showSelect = false; // 关闭选择器
			},
			// 用户点击“取消”时触发
			handleCancel() {
				this.showSelect = false; // 关闭选择器
			}
		}
	};
</script>

<style lang="scss" scoped>
	.container {

		width: 100%;
		height: 130vh;
	 //    padding-bottom: 400rpx;
		// margin-bottom: 100rpx;
		opacity: 1;
		background: rgba(210, 227, 255, 1);
 
		position: relative;

		.conent {
			width: 100%;
			position: absolute;
			margin-top: 200rpx;

			.form-item {
				margin-bottom: 20px;
				height: 400rpx;
				width: 95%;
				margin: 0 auto;
				margin-bottom: 20rpx;
				background: #fff;
				padding: 20rpx;
				display: flex;
				flex-direction: column;
				position: relative;
				// align-items: center;

				.label {
					font-size: 32rpx;
					color: #333;
					margin-bottom: 30px;
					display: flex;
					white-space: nowrap;
				}
				
				.select-box {
				  display: flex;
				  align-items: center;
				  // padding: 10rpx;
				  // border: 2rpx solid #ccc;
				  // border-radius: 8rpx;
				  // min-width: 400rpx;
				  justify-content: space-between;
		          margin-left: 30rpx;
				  color: #999;
				}

				.voice-icon {
					position: absolute;
					right: 30rpx;
					bottom: 20rpx;
				}

				.upload-area {
					display: flex;
					justify-content: center;
					align-items: center;
					height: 100px;
				}

				.note {
					font-size: 20rpx;
					color: #999;
					margin-top: 60rpx;
				}

				.submit-button {
					text-align: center;
					margin-top: 20px;
				}

			}
		}






	}
</style>