androidCnToWechatGrt/pagesInspection/onlineRepair/index.vue

<template>
	<view class="page" :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
		<cus-header title='报修'></cus-header>
		<div class="form">
			<div class="item">
				<div class="left">报修位置</div>
				<div class="right">
					<div class="right" @tap="placeShow = true">
						<text v-if="receiptDto.warehouseName">{{receiptDto.warehouseName}} ></text>
						<div class="tip" v-else>
							请选择<u-icon name="arrow-right" color="#B9C0C8" size="28"
								style="margin-left: 10rpx;"></u-icon>
						</div>
					</div>
				</div>
			</div>
			<div class="item">
				<div class="left">报修区域</div>
				<div class="right">
					<div class="right" @tap="areaShow = true">
						<text v-if="receiptDto.warehouseName">{{receiptDto.warehouseName}} ></text>
						<div class="tip" v-else>
							请选择<u-icon name="arrow-right" color="#B9C0C8" size="28"
								style="margin-left: 10rpx;"></u-icon>
						</div>
					</div>
				</div>
			</div>
			<div class="item">
				<div class="left">报修类型</div>
				<div class="right">
					<div class="right" @tap="typeShow = true">
						<text v-if="receiptDto.warehouseName">{{receiptDto.warehouseName}} ></text>
						<div class="tip" v-else>
							请选择<u-icon name="arrow-right" color="#B9C0C8" size="28"
								style="margin-left: 10rpx;"></u-icon>
						</div>
					</div>
				</div>
			</div>
			<div class="item">
				<div class="left">联系人</div>
				<div class="right">
					<input type="text" placeholder-class="repair-inp-ph" placeholder="请输入">
				</div>
			</div>
			<div class="item">
				<div class="left">联系电话</div>
				<div class="right">
					<input type="text" placeholder-class="repair-inp-ph" placeholder="请输入">
				</div>
			</div>
			<div class="pre">
				<div class="title">故障描述</div>
				<div class="desc">
					<u--textarea placeholder="请输入" placeholder-class="repair-inp-ph" autoHeight></u--textarea>
				</div>
			</div>
		</div>
		<div class="upload">
			<div class="title">上传照片</div>
			<div class="box">
				<u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" multiple
					name="1" :maxCount="10"></u-upload>
			</div>
		</div>
		<div class="bottom">
			<div class="save">保存</div>
		</div>
		<u-picker :show="placeShow" :columns="placeColumns" title="报修位置" @cancel="placeShow=false" @confirm="e=>paramsConfirm(e,'')"></u-picker>
		<u-picker :show="areaShow" :columns="areaColumns" title="报修区域" @cancel="areaShow=false" @confirm="e=>paramsConfirm(e,'')"></u-picker>
		<u-picker :show="typeShow" :columns="typeColumns" title="报修类型" @cancel="typeShow=false" @confirm="e=>paramsConfirm(e,'')"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				placeShow: false,
				areaShow: false,
				typeShow: false,
				placeColumns:[
					['位置1','位置2']
				],
				areaColumns:[
					['区域1','区域2']
				],
				typeColumns:[
					['类型1','类型2']
				],
				params: {

				},
				fileList1: [],
			}
		},
		methods: {
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1);
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file);
				let fileListLen = this[`fileList${event.name}`].length;
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: "uploading",
						message: "上传中",
					});
				});
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url);
					let item = this[`fileList${event.name}`][fileListLen];
					this[`fileList${event.name}`].splice(
						fileListLen,
						1,
						Object.assign(item, {
							status: "success",
							message: "",
							url: result,
						})
					);
					fileListLen++;
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: "http://192.168.2.21:7001/upload", // 仅为示例，非真实的接口地址
						filePath: url,
						name: "file",
						formData: {
							user: "test",
						},
						success: (res) => {
							setTimeout(() => {
								resolve(res.data.data);
							}, 1000);
						},
					});
				});
			},
			paramsConfirm(e,type){
				this.placeShow = this.areaShow = this.typeShow = false;
			}
		}
	}
</script>

<style>
	.repair-inp-ph{
		color: #1D2129 !important;
	}
</style>
<style scoped lang="less">
	::v-deep .desc .u-textarea{
		border: none;
		padding: 0 !important;
	}
	::v-deep .upload .u-upload .u-upload__button{
		width: 168rpx !important;
		height: 180rpx !important;
	}
	::v-deep .upload .u-upload .u-icon__icon{
		font-size: 24px !important;
	}
	
	.page {
		padding: 0 24rpx 168rpx;
		box-sizing: border-box;
		background: #F4F8FB;
		
		.form{
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 0 24rpx;
			margin-top: 20rpx;
			.item{
				height: 90rpx;
				box-shadow: inset 0rpx -1rpx 0rpx 0rpx #ECECEC;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.left{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 30rpx;
					color: #1D2129;
					line-height: 42rpx;
				}
				.right{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #1D2129;
					line-height: 40rpx;
					text-align: right;
					.tip{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #B9C0C8;
						line-height: 40rpx;
						text-align: right;
						display: flex;
						align-items: center;
					}
					input{
						border: none;
						outline: none;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #1D2129;
						line-height: 40rpx;
						text-align: right;
					}
				}
			}
			.pre{
				margin-top: 24rpx;
				overflow: hidden;
				.title{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 30rpx;
					color: #1D2129;
					line-height: 42rpx;
				}
				.desc{
					margin: 24rpx 0 40rpx;
				}
			}
		}
		
		.upload{
			padding: 38rpx 24rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			margin-top: 20rpx;
			.title{
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 30rpx;
				color: #1D2129;
				line-height: 36rpx;
			}
			.box{
				margin-top: 34rpx;
				width: 168rpx;
				height: 180rpx;
			}
		}
		
		.bottom{
			width: 100%;
			height: 148rpx;
			padding: 20rpx 48rpx 0;
			box-sizing: border-box;
			background: #FFFFFF;
			position: fixed;
			left: 0;
			bottom: 0;
			.save{
				width: 100%;
				height: 88rpx;
				background: #198CFF;
				border-radius: 16rpx;
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 88rpx;
				text-align: center;
				letter-spacing: 2rpx;
			}
		}
	}
</style>