uniapp-ZHSQ/packages/community/oneRepair/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="back"></u-icon>
				</div>
				<div class="searchBox_mid">报修信息</div>
				<div class="searchBox_right"></div>
			</div>
		</div>

		<div class="repairMsg">
			<div class="repairTit">
				<span>*</span>报修信息
			</div>

			<div class="label">选择房源信息</div>
			<div class="roomList">
				<div :class="active == '1'?'roomItem active':'roomItem'" @click="changeAct(1)">1号楼1单位101</div>
				<div :class="active == '2'?'roomItem active':'roomItem'" @click="changeAct(2)">1号楼1单位101</div>
				<div :class="active == '3'?'roomItem active':'roomItem'" @click="changeAct(3)">1号楼1单位101</div>
				<div :class="active == '4'?'roomItem active':'roomItem'" @click="changeAct(4)">1号楼1单位101</div>
			</div>

			<div class="row">
				<div class="row_label">报修类型</div>
				<div class="row_con" @click="chose">
					<input type="text" placeholder="请选择报修类型" disabled>
					<u-icon bold color="#999999" size="30" name="arrow-right"></u-icon>
				</div>
			</div>

			<div class="row">
				<div class="row_label">问题描述</div>
				<div class="row_con">
					<input type="text" placeholder="请描述故障">
				</div>
			</div>

			<div class="row">
				<div class="row_label">联系人</div>
				<div class="row_con">
					<input type="text" placeholder="请输入您的姓名">
				</div>
			</div>

			<div class="row">
				<div class="row_label">联系电话</div>
				<div class="row_con">
					<input type="text" placeholder="请输入您的联系方式">
				</div>
			</div>

			<div class="row noneBorder">
				<div class="row_label">上门时间</div>
				<div class="row_con" @click="choseTime">
					<input type="text" placeholder="请选择上门时间" disabled>
					<u-icon bold color="#999999" size="30" name="arrow-right"></u-icon>
				</div>
			</div>
		</div>

		<div class="repairMedia">
			<div class="row df">
				<div class="row_label">上传图片</div>
				<div class="row_con2">
					<u-upload :fileList="imgList" @afterRead="afterReadImg" @delete="deletePic" name="1" multiple
						:maxCount="10">
						<div class="imgCon">
							<image src="http://192.168.0.172:5500/com_imageImg.png" mode="widthFix"></image>
							上传图片
						</div>
					</u-upload>
				</div>
			</div>

			<div class="row df">
				<div class="row_label">上传视频</div>
				<div class="row_con2">
					<u-upload :fileList="videoList" @afterRead="afterReadVideo" @delete="deletePic" name="1"
						:maxCount="1" accept="video">
						<div class="videoCon">
							<image src="http://192.168.0.172:5500/com_videoImg.png"  mode="widthFix"></image>
							上传视频
						</div>
					</u-upload>
				</div>
			</div>
		</div>

		<u-picker :show="show" :columns="columns" @confirm="confirm1" @cancel="cancel1"></u-picker>

		<u-datetime-picker :show="show2" v-model="time" mode="datetime" @confirm="confirm2"
			@cancel="cancel2"></u-datetime-picker>

		<div class="btn">确认报修</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: "",
			columns: ["家具维修"],
			show: false,
			show2: false,
			time: new Date().getTime(),
			imgList: [],
			videoList: [],
		}
	},
	methods: {
		back() {
			uni.navigateBack({
				delta: 1
			});
		},
		chose() {
			console.log(123);
			this.show = true;
		},
		cancel1() {
			this.show = false;
		},
		confirm1(e) {
			console.log(e);
			this.show = false;
		},
		choseTime() {
			this.show2 = true;
		},

		cancel2() {
			this.show2 = false;
		},
		confirm2(e) {
			console.log(e);
			this.show2 = false;
		},

		afterReadImg(e){
			console.log(e);
			
			console.log(123);
		},
		afterReadVideo(){},

		changeAct(e){
			this.active = e;
		},

	},

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

	onShow() {

	},

}
</script>

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