hospital/app/components/images/images.vue

<template>
	<view class="imgs">
		<view v-if="type === '图片' || type === '视频'">
			<view class="photo" v-for="(item, index) in value" :key="index" :style="{ width: size, height: size }">
				<image :src="ip + item" mode="aspectFill" :style="{ width: size, height: size }" v-if="type === '图片'" @click.stop="preview(item)"></image>
				<video :src="ip + item" v-if="type === '视频'" controls class="video" :style="{ width: size, height: size }"></video>
				<text class="icon del" @click.stop="del(item)" v-if="!read">&#xe8b6;</text>
			</view>
		</view>
		<audio :src="ip + value[0]" v-if="type === '录音' && read" name="录音文件" controls></audio>
		<view class="uploads" v-if="type != '录音' && value.length < 3 && !read" @click.stop="chooseImage()">
			<view class="bw" v-if="type == '图片'">
				<view class="icon">&#xe696;</view>
				<view class="text">上传图片</view>
			</view>
			<view class="bw" v-if="type == '视频'">
				<view class="icon">&#xe622;</view>
				<view class="text">上传视频</view>
			</view>
		</view>
		<view v-if="type == '录音' && !read" class="audio">
			<button @click="startRecord()" :disabled="stop">
				<text class="icon">&#xe618;</text>
				<text>开始</text>
			</button>
			<button @click="endRecord()" :disabled="!stop">
				<text class="icon">&#xe611;</text>
				<text>停止</text>
			</button>
			<button @click="playVoice()" :disabled="stop">
				<text class="icon">&#xe628;</text>
				<text>播放</text>
			</button>
			<button @click="again()">
				<text class="icon">&#xe607;</text>
				<text>重新</text>
			</button>
		</view>
	</view>
</template>

<script>
const recorderManager = uni.getRecorderManager();
const innerAudioContext = uni.createInnerAudioContext();
export default {
	name: 'images',
	props: {
		value: {
			type: Array
		},
		read: {
			type: Boolean,
			default: false
		},
		type: {
			type: String,
			default: 'img'
		},
		size: {
			type: String,
			default: '80px'
		}
	},
	data() {
		return {
			stop: false,
			ip: this.http.ip,
			voicePath: ''
		};
	},
	mounted() {
		if (this.type === '录音') {
			recorderManager.onStop((res) => {
				this.voicePath = res.tempFilePath;
				uni.uploadFile({
					url: this.ip + '/app/common/upload',
					filePath: res.tempFilePath,
					name: 'file',
					header: { Authorization: this.getUser().token },
					success: (res) => {
						let data = JSON.parse(res.data);
						if (data.code === 200) {
							this.value.push(data.fileName);
							this.$emit('input', this.value);
							this.$forceUpdate();
						} else {
							uni.showModal({ content: data.msg, showCancel: false });
						}
						uni.hideLoading();
					},
					fail: (res) => {
						uni.hideLoading();
						uni.showModal({ content: '上传失败', showCancel: false });
					}
				});
			});
		}
	},
	methods: {
		chooseImage() {
			//照片选择
			if (this.type === '图片') {
				uni.chooseImage({
					count: 3, //默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					success: (res) => {
						res.tempFilePaths.forEach((path) => {
							uni.showLoading({ title: '正在上传图片', mask: true });
							uni.uploadFile({
								url: this.ip + '/app/common/upload',
								filePath: path,
								name: 'file',
								header: { Authorization: this.getUser().token },
								success: (res) => {
									let data = JSON.parse(res.data);
									if (data.code === 200) {
										if (this.value.length < 3) {
											this.value.push(data.fileName);
											this.$emit('input', this.value);
											this.$forceUpdate();
										} else {
											uni.showModal({ content: '最多只能上传5个附件', showCancel: false });
										}
									} else {
										uni.showModal({ content: data.msg, showCancel: false });
									}
									uni.hideLoading();
								},
								fail: (res) => {
									uni.hideLoading();
									uni.showModal({ content: '图片上传失败', showCancel: false });
								}
							});
						});
					}
				});
			} else if (this.type === '视频') {
				uni.chooseVideo({
					count: 3,
					sourceType: ['camera', 'album'],
					maxDuration: 30,
					success: (path) => {
						uni.showLoading({ title: '正在上传...', mask: true });
						uni.uploadFile({
							url: this.ip + '/app/common/upload',
							filePath: path.tempFilePath,
							name: 'file',
							header: { Authorization: this.getUser().token },
							success: (res) => {
								uni.hideLoading();
								let data = JSON.parse(res.data);
								if (data.code === 200) {
									if (this.value.length < 3) {
										this.value.push(data.fileName);
										this.$emit('input', this.value);
										this.$forceUpdate();
									} else {
										uni.showModal({ content: '最多只能上传5个附件', showCancel: false });
									}
								} else {
									uni.showModal({ content: data.msg, showCancel: false });
								}
								uni.hideLoading();
							},
							fail: (res) => {
								uni.hideLoading();
								uni.showModal({ content: '图片上传失败', showCancel: false });
							}
						});
					}
				});
			} else if (this.type === '录音') {
			}
		},
		startRecord() {
			console.log('开始录音');
			this.stop = true;
			recorderManager.start();
		},
		endRecord() {
			console.log('录音结束');
			this.stop = false;
			recorderManager.stop();
		},
		again() {
			this.voicePath = '';
			this.startRecord();
		},
		playVoice() {
			console.log('播放录音');
			if (this.voicePath) {
				innerAudioContext.src = this.voicePath;
				innerAudioContext.play();
			}
		},
		preview(item) {
			let urls = [];
			this.value.forEach((item) => {
				urls.push(this.ip + item);
			});
			// 预览图片
			uni.previewImage({
				urls: urls,
				current: this.ip + item,
				success: (res) => {}
			});
		},
		del(item) {
			this.value.splice(this.value.indexOf(item), 1);
			this.$emit('input', this.value);
			this.$forceUpdate();
		}
	}
};
</script>

<style lang="scss" scoped>
.imgs {
	overflow: hidden;
	.uploads {
		float: left;
		width: 80px;
		height: 80px;
		text-align: center;
		border-radius: 10px;
		margin: 5px 5px 5px 5px;
		overflow: hidden;
		background-color: #f8f8f8;
		.bw {
			padding-top: 10px;
			.icon {
				font-size: 30px;
				display: block;
				float: none;
			}
			.text {
				font-size: 13px;
				color: #444444;
				padding-top: 5px;
			}
		}
	}
	.photo {
		float: left;
		margin: 5px 5px 5px 5px;
		position: relative;
		overflow: hidden;
		border-radius: 8px;

		image {
			border-radius: 5px;
		}
		.video {
			border-radius: 5px;
		}
		.audio {
		}
		.del {
			position: absolute;
			top: 0px;
			right: 0px;
			background-color: #00000078;
			color: white;
			padding: 3px 8px;
			font-size: 12px;
			border-radius: 0px 0px 0px 10px;
		}
	}
	.audio {
		background-color: #eeeeee;
		border-radius: 20px;
		overflow: hidden;
		padding: 5px;
		button {
			float: left;
			background-color: #eeeeee;
			font-size: 14px;
			.icon {
				padding-right: 3px;
			}
		}
	}
}
</style>