web-app-v1/components/chat/audio-slide.vue

<template>
	<view class="SlideBody" ref="slide">
		<div class="Slide-progress">
			<div class="Slide-progress-loaded" :style="{ width: `${leftWidth}px` }" />
		</div>
		<div class="Slide-control" style="white-space:nowrap;" :style="{ left:`${leftWidth}px` }"
			@touchmove.stop.prevent="controlMove" @touchstart="controlTouchStart" @touchend="controlTouchEnd">
			{{ playTime | mediaTimeFormatter }} / {{ allTime | mediaTimeFormatter }}
		</div>
	</view>
</template>

<script>
	export default {
		props: {
			ratio: {
				type: Number,
				default: 1
			},
			direction: {
				type: String,
				default: 'clientX'
			},
			iosDirection: {
				type: Number,
				default: 1
			},
			allTime: {
				type: Number,
				default: 0
			},
			playTime: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				oldToucesX: 0,
				leftWidth: 0,
				oldLeftWidth: 0,
				currentWidth: 0,
				controlWidth: 0
			}
		},
		mounted() {
			this.init()
		},
		filters: {
			mediaTimeFormatter: num => {
				if (!num) return "00:00";
				num = Math.floor(num);
				let hour = Math.floor(num / 3600);
				let minutes = Math.floor((num - hour * 3600) / 60);
				let second = num - hour * 3600 - minutes * 60;
				if (hour > 0) {
					return `${hour > 9 ? hour : "0" + hour}:${
			        minutes > 9 ? minutes : "0" + minutes
			      }:${second > 9 ? second : "0" + second}`;
				} else {
					return `${minutes > 9 ? minutes : "0" + minutes}:${
			        second > 9 ? second : "0" + second
			      }`;
				}
			}
		},
		watch: {
			playTime: {
				handler(a) {
					if (a && this.allTime) {
						if (this.currentWidth && this.controlWidth) {
							let maxLeftWidth = this.currentWidth - this.controlWidth
							this.leftWidth = Math.ceil((a / this.allTime) * maxLeftWidth)
						} else {
							this.init(() => {
								let maxLeftWidth = this.currentWidth - this.controlWidth
								this.leftWidth = Math.ceil((a / this.allTime) * maxLeftWidth)
							})
						}
					} else {
						this.leftWidth = 0
					}
				},
				immediate: true
			},
			allTime: {
				handler(a) {
					if (a && this.playTime) {
						if (this.currentWidth && this.controlWidth) {
							let maxLeftWidth = this.currentWidth - this.controlWidth
							this.leftWidth = Math.ceil((this.playTime / a) * maxLeftWidth)
						} else {
							this.init(() => {
								let maxLeftWidth = this.currentWidth - this.controlWidth
								this.leftWidth = Math.ceil((this.playTime / a) * maxLeftWidth)
							})
						}
					} else {
						this.leftWidth = 0
					}
				},
				immediate: true
			}
		},
		methods: {
			init(cb) {
				const query = uni.createSelectorQuery().in(this);
				query.select('.SlideBody').boundingClientRect(({
					width
				}) => {
					this.currentWidth = width
				}).exec();
				query.select('.Slide-control').boundingClientRect(({
					width
				}) => {
					this.controlWidth = width
				}).exec();
				setTimeout(() => {
					cb && cb()
				}, 200)
			},
			controlTouchStart(e) {
				this.oldLeftWidth = this.leftWidth
				this.oldToucesX = e.changedTouches[0][this.direction];
				this.$emit('touchStart')
			},
			controlMove(e) {
				let newToucesX;
				let maxLeftWidth = this.currentWidth - this.controlWidth
				newToucesX = e.changedTouches[0][this.direction];
				this.leftWidth = this.iosDirection * (newToucesX - this.oldToucesX) + this.oldLeftWidth
				this.leftWidth = this.leftWidth > maxLeftWidth ? maxLeftWidth : this.leftWidth
				this.leftWidth = this.leftWidth < 0 ? 0 : this.leftWidth
			},
			controlTouchEnd(e) {
				let maxLeftWidth = this.currentWidth - this.controlWidth
				let current = this.leftWidth / maxLeftWidth
				let value = current * this.allTime
				this.$emit('update:progress', {
					value
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.SlideBody {
		width: 90%;
		height: 34rpx;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		-webkit-overflow-scrolling: touch;

		.Slide {
			&-progress {
				width: 100%;
				height: 8rpx;
				border-radius: 8rpx;
				background: #EEEEEE;
				position: relative;
				overflow: hidden;

				&-loaded {
					position: absolute;
					top: 0;
					left: 0;
					bottom: 0;
					right: 0;
					width: 0;
					height: 100%;
					background: linear-gradient(to right, #F97C55, #F44545);
				}
			}

			&-control {
				height: 34rpx;
				border-radius: 34rpx;
				background: linear-gradient(to right, #F97C55, #F44545);
				color: #FFFFFF;
				font-size: 24rpx;
				padding: 0 12rpx;
				line-height: 34rpx;
				position: absolute;
				top: 50%;
				left: 0;
				transform: translate(0, -50%);
			}
		}
	}
</style>