pingpu_H5/pages/aftersale/index.vue

<template>
	<!-- 故障上报 -->
	<view>
		<!-- 上报表单 -->
		<view class="form-panel">
			<view class="form-title">
				基本信息
			</view>
			<input class="form-input" v-model="aftersale.device_id" placeholder="请输入设备ID" type="text" />
			<input class="form-input" v-model="aftersale.user" placeholder="请输入联系人名称" type="text" />
			<input class="form-input" v-model="aftersale.phone" placeholder="请输入联系人电话" type="text" />
			<input class="form-input" v-model="aftersale.addr" placeholder="请输入联系人地址" type="text" />
			<view class="form-title" style="padding-top: 24rpx;">
				故障信息
			</view>
			<textarea class="form-textarea" v-model="aftersale.errordesc" maxlength="300"
				placeholder="请尽量详细描述您所反馈的意见（不少于10个文字）" />
			<view class="form-words">{{aftersale.errordesc.length}}/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" :disabled="saveLoading" @click="submitAftersaleInfo">提交</button>
		</view>

	</view>
</template>

<script>
	import {
		uploadFile,
		saveAftersaleInfo
	} from '@/api/aftersale.js'
	export default {
		data() {
			return {

				// 图片列表
				imgList: [],
				// 上报信息
				aftersale: {
					device_id: '',
					errordesc: "", //描述信息
					errorimg: "", //图片链接,多张图片用 , 进行隔开
					errorvideo: "", //视频链接
					addr: "", //原图片链接
					user: "", //用户
					phone: "" //联系电话
				},
				saveLoading: false,
			}
		},
		methods: {
			// 上传图片
			async uploadFile(e) {
				let res = await this.uploadImageSync();
				if (res.success) {

				}
			},
			uploadImageSync() {
				return new Promise((resolve, reject) => {
					uni.chooseImage({
						count: 5, // 默认9
						sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
						success(res) {
							const tempFilePaths = res.tempFilePaths;
						}
					})
				})
			},
			uploadVideoSync() {
				return new Promise((resolve, reject) => {
					uni.chooseVideo({
						sourceType: ['camera', 'album'],
						success(res) {
							self.src = res.tempFilePath;
						}
					});
				})
			},
			// 提交保存
			async submitAftersaleInfo(e) {
				this.$api.loading("上报中...");
				this.saveLoading = true;
				await saveAftersaleInfo(this.aftersale);
				this.saveLoading = false;
				this.$api.hide();
			}
		}
	}
</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>