pingpu_H5/pages/fault/index.vue

<template>
	<!-- 故障上报 -->
	<view>
		<!-- 上报表单 -->
		<view class="form-panel">
			<view class="form-title">
				基本信息
			</view>
			<input class="form-input" placeholder="请输入设备ID" type="text" />
			<input class="form-input" placeholder="请输入设备名称" type="text" />
			<input class="form-input" placeholder="请输入联系人名称" type="text" />
			<input class="form-input" placeholder="请输入联系人电话" type="text" />
			<input class="form-input" placeholder="请输入联系人地址" type="text" />

			<view class="form-title" style="padding-top: 24rpx;">
				故障信息
			</view>
			<textarea class="form-textarea" placeholder="请尽量详细描述您所反馈的意见（不少于10个文字）" />
			<view class="form-words">0/300</view>
			<view class="row-between form-title">
				图片上传
				<text class="font-10">最多5张图片</text>
			</view>
			<!-- 上传图片 -->
			<view class="ui-upload" id="descripImg">
				<view class="ui-upload_file">
					<image src="@/static/demo/demo2.png" @click="previewImage()" class="ui-upload_img"
						mode="aspectFill">
					</image>
				</view>
				<view class="ui-upload_input" @click="uploadFile">
					<image src="@/static/img/upload.png" class="ui-upload_img" mode="aspectFill"></image>
				</view>
			</view>
		</view>

		<view class="form-submit">
			<button class="btn">提交</button>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 图片列表
				imgList: [],
			}
		},
		methods: {
			// 上传图片
			async uploadFile(e) {
				let res = await this.uploadImageSync();
				if (res.success) {
					
				}
			},
			uploadImageSync() {
				return new Promise((resolve, reject) => {
					uni.chooseImage({
						count: 1, // 默认9
						sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
						success(res) {
							const tempFilePaths = res.tempFilePaths;
						}
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	.form-panel {
		padding: 24rpx;
		margin-top: 24rpx;
		background: #fff;
		border-radius: 12rpx;
	}

	.form-title {
		padding: 0 16rpx 16rpx;
		font-size: 32rpx;
		color: #272A2E;
	}

	.form-input,
	.form-textarea {
		margin-bottom: 24rpx;
		font-size: 28rpx;
		line-height: 40rpx;
	}

	.form-input {
		padding: 22rpx 28rpx;
		background: #F3F5F9;
		border-radius: 12rpx;
	}

	.form-textarea {
		width: calc(100% - 32rpx);
		padding: 15rpx 22rpx;
		margin: 0 16rpx;
		font-size: 24rpx;
		box-sizing: border-box;
		background: #F3F4F5;
		border-radius: 8rpx;
	}

	.form-words {
		margin: 10rpx 16rpx;
		font-size: 24rpx;
		color: #272A2E;
		text-align: right;
	}

	.form-submit {
		padding: 120rpx 24rpx;
		overflow: hidden;
	}
</style>