rongtong_301_app/report/infor.vue

<template>
	<view class="content">
		<view class="topbar" v-show="isIphone">
		</view>
		<!-- #ifdef MP-WEIXIN -->
		<view class="topbar">
		</view>
		<!-- #endif -->
		<view class="status_bar">
			<view class="left" @click="goBack()"><u-icon name="arrow-left"></u-icon>返回</view>
			<span style="font-size: 36rpx;">详情</span>
			<view class="right"></view>
		</view>
		<view class="mainCont">
			<view class="card">
				<view class="top">
					<view class="left">{{ form.troubleCode }}</view>
					<view v-show="form.troubleState == 1" class="right" style="color: #33CC00">待处理</view>
					<view v-show="form.troubleState == 2" class="right" style="color: #33CC00">处理中</view>
					<view v-show="form.troubleState == 3" class="right" style="color: #CCCCCC">已完成</view>
					<!-- <view class="right" v-show="current == 1" style="color: #33CC00;">处理中</view>
					<view class="right" v-show="current == 2" style="color: #CCCCCC">已关闭</view> -->
				</view>
				<view class="bottom">
					<view>所在位置：{{ form.location }}</view>
					<view v-show="form.troubleType != 2">内容描述：{{ form.description }}</view>
					<view v-show="form.troubleType == 2">内容描述：语音信息{{ playTime }}"</view>
					<view>上报时间：{{ form.createDate }}</view>
					<view v-show="form.troubleType == 2 && !isIphone" class="soundPlay" @click="soundPlay">{{ playTime }}"<u-icon
							name="wifi" class="trans">
						</u-icon>
					</view>
					<view v-show="form.troubleType == 2 && isIphone" class="soundPlay" @click="soundPlay">
						点击播放
					</view>
					<view class="imageupload">
						<view class="imagebox">
							<u-image width="80px" height="80px" :key="index" v-for="(item,index) in fileList"
								:src="item.filePath"></u-image>
						</view>
					</view>
				</view>
			</view>
			<view class="card">
				<view class="top">
					<view class="left">处理进度</view>
				</view>
				<view class="bottom" style="padding: 10px 20px">
					<u-time-line>
						<u-time-line-item nodeTop="2" v-for="(item, index) in processList" :key="index">
							<template v-slot:node>
								<view class="u-node" style="background: #blue;">
								</view>
							</template>
							<!-- 此处自定义了左边内容，用一个图标替代 -->
							<template v-slot:content>
								<view>
									<view class="u-order-title">
										{{ item.content }}
									</view>
									<view>
										{{ item.creatorName }} {{ item.createDate }}
									</view>
								</view>
							</template>
						</u-time-line-item>
					</u-time-line>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	const NET = require('@/utils/request')
	const API = require('@/config/api')
	export default {
		onLoad(option) {
			uni.getSystemInfo({
				success: (res) => {
					console.log(res)
					if (res.model == 'iPhone') {
						this.isIphone = true;
					}
				},
				fail: (err) => {
					console.log(err)
				}
			})
			console.log(option.id);

			NET.request(API.htroubleDetail, {
				troubleId: option.id
			}, 'GET').then(res => {
				this.form = res.data;
				this.fileList = res.data.fileList.filter(a => a.fileType == 2);
				this.soundFile = res.data.fileList.filter(a => a.fileType == 1).length ? res.data.fileList.filter(
					a => a.fileType == 1)[0] : null;
				this.processList = res.data.processList;

				if (this.soundFile) {
					if (this.isIphone) {
						// EbeiPlugins.getAudioDuration(this.soundFile.filePath, (res) => {
						// 	this.playTime = res
						// })
						// EbeiPlugins.getAudioDuration(
						// 	'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3',
						// 	(res) => {
						// 		console.log(res)
						// 		this.playTime = res
						// 	})
					} else {
						this.innerAudioContext = uni.createInnerAudioContext();
						this.innerAudioContext.src =
							this.soundFile.filePath;
						this.innerAudioContext.onCanplay(() => {
							this.playTime = Math.floor(this.innerAudioContext.duration)
							console.log(this.innerAudioContext.duration)
						});
					}
				}
			}).catch(error => {
				this.$refs.uToast.show({
					title: error.msg,
					type: 'warning',
				})
			})
		},
		onReady() {
			if (this.isIphone) {
				document.getElementsByClassName('mainCont')[0].style.height = document.getElementsByClassName('mainCont')[
					0].clientHeight - 25 + 'px'
			}
		},
		data() {
			return {
				isIphone: false,
				playTime: 0,
				playIng: false,
				soundFile: null,
				fileList: [],
				processList: [],
				form: {},
				innerAudioContext: null,
			}
		},
		methods: {
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			soundPlay() {
				if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
					this.playIng = true
					EbeiPlugins.playAudioRecord(this.soundFile.filePath, 0, (res) => {
						this.playIng = false
					}, (err) => {

					})
					// EbeiPlugins.playAudioRecord(
					// 	'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3',
					// 	0, (res) => {
					// 		this.playIng = false
					// 	}, (err) => {

					// 	})
				} else {
					if (this.playIng) {
						this.innerAudioContext.stop();
						// this.innerAudioContext.destory();
						// this.innerAudioContext = null;
						this.playIng = false;
						return false;
					}
					this.innerAudioContext.play();
					this.playIng = true;
					this.innerAudioContext.onPlay(() => {
						console.log('开始播放');
					});
					this.innerAudioContext.onError((res) => {
						console.log(res.errMsg);
						console.log(res.errCode);
					});
				}
			}
		}
	}
</script>

<style lang="scss">
	.mainCont {
		height: calc(100% - 80rpx);
		padding: 10px 0 10px 0;
		box-sizing: border-box;
		overflow-y: auto;
	}

	.imageupload {
		margin-bottom: 10px;
		padding: 5px 0px;
		background: #fff;

		.imagebox {
			.u-image {
				display: inline-block;
				margin: 10px 10px 0 0;
			}
		}
	}

	.soundPlay {
		margin-top: 10px;
		padding: 0 10px;
		height: 30px;
		line-height: 30px !important;
		width: 75%;
		text-align: right;
		color: #fff;
		background-color: #2d8cf0;
		border-radius: 5px;
	}

	.u-node {
		width: 12px;
		height: 12px;
		border-radius: 22px;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #6aa0f7;
	}

	.u-order-title {
		// margin-bottom: 20px;
	}

	.trans {
		transform: rotate(90deg);
	}
</style>