hbj_app/pages/indexpage/sheBeiSheShi/myBaoXiu/myBaoXiu.vue

<template>
	
	<view class="mybaoxiu-container">
		<u-navbar bgColor="#ffffff" :placeholder="true" titleStyle="font-weight:600" title="我的报修" :autoBack="true">
		
		</u-navbar>
		<uni-forms :model="mybaoxiuForm" ref="mybaoxiuForm" :rules="rules" :errShowType="errorType">
			<uni-forms-item name="question">
				<view class="top-search">
					<view class="top-search-prefix">报修原因</view>
					<u-input ref="input" :focus="isfocus" clearable v-model="mybaoxiuForm.question" placeholder="请输入报修原因" fontSize="13px" @blur="onblur"></u-input>
				</view>
			</uni-forms-item>
			<uni-forms-item>
				<view class="upload-img">
					<view class="upload-img-title">上传图片</view>
					<u-line color="#E6E6E6"></u-line>
					<view class="upload-img-box"><u-upload :fileList="fileList" auto-upload @delete="deletePic" @afterRead="getImage"></u-upload></view>
				</view>
			</uni-forms-item>
			<!-- <uni-forms-item>
        <view class="dispose-person">
          <view class="dispose-item" @click="openPicker">
            <view class="dispose-item-left">处理人</view>
            <view class="dispose-item-right">
              <view style="margin-right: 20rpx">请选择处理人</view>
              <u-icon name="arrow-right"></u-icon>
            </view>
          </view>
        </view>
      </uni-forms-item> -->
		</uni-forms>
		<view class="submit" @click="addFrom()">提交报修</view>
		<u-picker :show="personPopupShow" :columns="columns" @confirm="personPopupConfirm" @cancel="personPopupClose"></u-picker>
	</view>
</template>

<script>
import config from '@/config.js';
import { getToken } from '@/utils/auth.js';
import { addFacilitiesRepair } from '@/api/indexpage/implement/index.js';
export default {
	data() {
		return {
			errorType: 'toast',

			mybaoxiuForm: { question: '', pic: '' },
			fileList: [],
			ssid: '',
			columns: [],
			isfocus: false,
			rules: {
				// 对name字段进行必填验证
				question: {
					rules: [
						{
							required: true,
							errorMessage: '请输入报修原因',
							trigger: ['blur', 'change']
						}
					]
				}
			},
			personPopupShow: false
		};
	},
	onLoad(options) {
		this.ssid = options.ssId;
	},

	methods: {
		onblur() {
			this.isfocus = false;
		},
		addFocus() {
			this.isfocus = true;
		},
		personPopupConfirm() {
			this.personPopupShow = false;
		},
		openPicker() {
			this.personPopupShow = true;
		},
		personPopupClose() {
			this.personPopupShow = false;
		},
		//确定提交
		addFrom() {
			this.$refs.mybaoxiuForm
				.validate()
				.then(res => {
					//把图片数组对象中的id，转成逗号隔开的字符串,赋值给from表单
					this.mybaoxiuForm.pic = this.fileList
						.map(item => {
							return item.id;
						})
						.join(',');
					let params = {
						facilitiesId: this.ssid,
						...this.mybaoxiuForm
					};
					addFacilitiesRepair(params).then(res => {
						this.mybaoxiuForm = { question: '', pic: '' };
						this.fileList = [];
						uni.navigateBack({
							delta: 1
						});
						this.$modal.msg('提交成功');
					});
				})
				.catch(err => {
					this.$modal.msg(err);
				});
		},
		// 删除图片
		deletePic(event) {
			//删除本地
			this[`fileList${event.name}`].splice(event.index, 1);
		},
		// 图片上传结果
		async getImage(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: '',
						id: result
					})
				);
				fileListLen++;
			}
		},
		uploadFilePromise(url) {
			return new Promise((resolve, reject) => {
				let a = uni.uploadFile({
					url: `${config.baseUrlImg}/filemanage/upload1`, // 仅为示例，非真实的接口地址
					filePath: url,
					name: 'file',
					header: {
						Authorization: 'Bearer ' + getToken()
					},
					formData: {
						isFullDir: false,
						classify: '1',
						dir: '/inspectionPic'
					},
					success: res => {
						let result = JSON.parse(res.data);
						console.log('result', result);
						setTimeout(() => {
							resolve(result.data.id);
						}, 1000);
					}
				});
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.mybaoxiu-container {
	// #ifndef APP-PLUS
	height: calc(100vh - 44px);
	// #endif
	// #ifdef APP-PLUS
	height: calc(100vh);
	// #endif
	background-color: #fff;
	overflow-y: auto;
	font-family: Noto Sans S Chinese;
	/deep/ .uni-forms-item {
		margin-bottom: 0;
	}
	.top-search {
		height: 134rpx;
		box-sizing: border-box;
		padding: 20rpx 28rpx 28rpx;
		display: flex;
		align-items: center;
		/deep/ .input-placeholder {
			text-align: right !important;
			color: red;
		}
		::v-deep .u-input {
			height: 100%;
			border-radius: 0 9px 9px 0;
			background-color: #f8f9fb;
			border: none;
		}
		/deep/ .uni-input-placeholder {
			text-align: right;
		}
		.top-search-prefix {
			font-weight: 400;
			height: 100%;
			display: flex;
			justify-content: center;
			width: 140rpx;
			background-color: #f8f9fb;
			align-items: center;
			border-radius: 9px 0 0 9px;
			font-size: 13px;
			color: #666666;
		}
		.top-search-suffix {
			width: 100px;
			font-weight: 400;
			font-size: 13px;
			color: #999999;
			line-height: 19px;
		}
	}
	.upload-img {
		width: calc(100% - 56rpx);
		margin: 0 auto;
		box-sizing: border-box;
		padding: 28rpx 28rpx 42rpx 28rpx;
		background-color: #f8f9fb;
		border-radius: 18rpx;
		.upload-img-title {
			width: 100%;
			font-weight: 400;
			font-size: 13px;
			color: #666666;
			margin-bottom: 20rpx;
		}
		.upload-img-box {
			margin-top: 34rpx;
		}
	}
	.dispose-person {
		height: 134rpx;
		box-sizing: border-box;
		padding: 30rpx 28rpx 28rpx;
		.dispose-item {
			width: 100%;
			border-radius: 18rpx;
			height: 42px;
			background: #f8f9fb;
			display: flex;
			align-items: center;
			justify-content: space-between;
			box-sizing: border-box;
			padding: 0 26rpx;
			.dispose-item-left {
				font-weight: 400;
				font-size: 13px;
				color: #666666;
			}
			.dispose-item-right {
				display: flex;
				align-items: center;
				font-weight: 400;
				font-size: 13px;
				color: #999999;
				line-height: 19px;
			}
		}
	}
	.submit {
		height: 94rpx;
		background: linear-gradient(0deg, #2a86ff, #8fbcff);
		line-height: 94rpx;
		width: calc(100% - 140rpx);
		text-align: center;
		margin: 0 auto;
		margin-top: 200rpx;
		border-radius: 50rpx;
		color: #fff;
		font-size: 30rpx;
	}
}
</style>