bjhedasx/webcode/uni-app/pages/expert/addQues.vue

<template>
	<view class="page">
		<view class="pageMain">
			<view class="text-30 text-33 text-bold line-40 margin-bottom-15">
				追加提问
			</view>
			<view class="zxBox">
				<textarea v-model="content" placeholder="描述您的要咨询的内容" placeholder-class="text-aa" class="text-30"
					maxlength="500" @input="inputContent"></textarea>
				<view class="margin-top-20 text-right text-26 text-aa">
					{{contentLength}}/500
				</view>
			</view>
			<view class="margin-top-40">
				<view class="margin-bottom-15">
					<text class="line-40 text-30 text-33 text-bold">相关图片</text>
					<text class="line-40 text-24 text-aa">（最多5张）</text>
				</view>
				<ty-image-images-upload :count="5" :video-count="0" @imageChange="imageChange" :image_list="image_list">
				</ty-image-images-upload>
			</view>
			<view class="padding-top-25">
				<view class="margin-bottom-15">
					<text class="line-40 text-30 text-33 text-bold">相关视频</text>
				</view>
				<ty-image-images-upload :count="0" :video-count="1" @videoChange="videoChange" :video_list="video_list">
				</ty-image-images-upload>
			</view>
			<view class="padding-top-25">
				<view class="margin-bottom-15">
					<text class="line-40 text-30 text-33 text-bold">相关文件</text>
					<text class="line-40 text-24 text-aa">（最多5个）</text>
				</view>
				<view class="margin-bottom-30">
					<view v-for="(item,index) in file_list" :key="index" class="flex align-center"
						:class="index == 0 ? '' : 'margin-top-20'">
						<view class="flex-one text-28 text-4b8 line-40" style="text-decoration:underline">
							{{item.name}}
						</view>
						<view class="text-28 text-e62 margin-left-30 line-40" @click="delFile(index)">删除</view>
					</view>
				</view>
				<view class="margin-top-30" v-if="file_list.length < 5" @click="upLoadFile">
					<image src="/static/home/uploadFile.png" class="fileUpImg"></image>
				</view>
			</view>
		</view>
		<view class="bottomBox border-top-f5">
			<view class="text-30 text-ff text-center text-bold" @click="tapSub">
				提交追问
			</view>
		</view>
	</view>
</template>

<script>
	import file from '@/components/hzjc/utils/functions/file.js'
	export default {
		data() {
			return {
				id: '',
				content: '', //咨询内容
				contentLength: 0,
				image_list: [], //相关图片
				video_list: [], //相关视频
				file_list: [], //相关文件
			}
		},
		onLoad(options) {
			this.id = options.id ? options.id : '';
		},
		methods: {
			inputContent(e) {
				if (e.detail.cursor < 500) {
					this.contentLength = e.detail.cursor;
				} else {
					this.contentLength = 500
				}
			},
			imageChange(e) {
				console.log(811, e)
				this.image_list = e.image_list;
			},
			videoChange(e) {
				console.log(799, e)
				this.video_list = e.video_list;
			},
			upLoadFile() {
				wx.chooseMessageFile({
					count: 5 - this.file_list.length,
					type: 'file',
					success: (r) => {
						uni.showLoading({
							title: '上传中...'
						})
						console.log(1007, r)
						var tempFiles = r.tempFiles;
						let files = []

						tempFiles.forEach(value => {
							// 原文件名称
							let localFileName,
								// 上传后文件名称
								fileName
							// 获取源文件名称
							localFileName = value.name
							if (localFileName) {
								fileName = localFileName
							} else {
								let suffix = this.cn.getSuffix(localFileName)
								fileName = this.cn.getRandomStr(10) + suffix
							}
							let file = {
								path: value.path,
								fileName: fileName
							}
							files.push(file)
						})

						// 上传到OSS
						file.uploadFilesToOss(files, [], {}, true, 'file').then(res => {
							uni.hideLoading()
							console.log(1005, res)
							res.forEach((item, index) => {
								var n = item.split("/");
								this.file_list.push({
									file_name: n[n.length - 1],
									file_url: item
								})
							})

						}).catch(res => {
							uni.hideLoading()
							console.log(1006, res)
						})
					},
					fail: (ff) => {
						uni.hideLoading()
						console.log(1008, ff)
					}
				})
			},
			delFile(i) {
				this.file_list.splice(i, 1)
			},
			// 追加提问
			tapSub() {
				if (this.content == '') {
					this.cn.alert('请描述您的要咨询的内容');
					return;
				}
				this.rq.getData('fire/api/Fire/submitOrderAppend', {
					order_id: this.id,
					ask_content: this.content,
					ask_img: this.image_list.join(','),
					ask_video: this.video_list.length ? this.video_list[0].video_url : '',
					ask_data: JSON.stringify(this.file_list)
				}).then(res => {
					if (res.code == 0) {
						uni.redirectTo({
							url: '/pages/expert/orderList'
						})
					}
				})
			}
		}
	}
</script>

<style scoped>
	.pageMain {
		width: 100vw;
		min-height: 100vh;
		background: #fff;
		padding: 20rpx 30rpx calc(130rpx + env(safe-area-inset-bottom));
		box-sizing: border-box;
	}

	.zxBox {
		padding: 20rpx 25rpx 15rpx;
		width: 100%;
		box-sizing: border-box;
		border-radius: 10rpx;
		border: 1rpx solid #DDDDDD;
	}

	.zxBox textarea {
		width: 100%;
		height: 180rpx;
	}

	.fileUpImg {
		width: 160rpx;
		height: 160rpx;
	}

	.bottomBox {
		width: 100vw;
		background: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		padding: 10rpx 30rpx calc(10rpx + env(safe-area-inset-bottom));
		box-sizing: border-box;
	}

	.bottomBox>view {
		width: 100%;
		height: 80rpx;
		background: #2F97FF;
		border-radius: 40rpx;
		line-height: 80rpx;
	}
</style>