stellar-ui-v2 1.35.3

package/components/ste-media-preview/README.md

@@ -0,0 +1,243 @@
+# MediaPreview 媒体预览
+
+用于单独预览图片或者视频
+
+---$
+
+### 代码演示
+#### 基础用法
+- `show`属性控制是否展示预览弹窗，支持`sync`双向绑定
+- `urls`属性为要预览的媒体URL数组
+```html
+<template>
+	<ste-button @click="show = true">基础预览</ste-button>
+	<view style="width: 100%">
+		<ste-media-preview :urls="medias" :show.sync="show" />
+	</view>
+</template>
+
+<script>
+export default{
+	data(){
+		return{
+			medias: [
+				'https://image.whzb.com/chain/StellarUI/图片.jpg',
+				'https://image.whzb.com/chain/StellarUI/竖屏1.mp4',
+				'https://image.whzb.com/chain/StellarUI/验证码背景.png',
+				'https://image.whzb.com/chain/StellarUI/bg4.jpg',
+				'https://image.whzb.com/chain/StellarUI/横屏2.mp4',
+				'https://image.whzb.com/chain/StellarUI/bg3.jpg',
+			],
+			show: false,
+		}
+	}
+}
+</script>
+```
+
+#### 自动轮播
+- `autoplay`属性控制自动轮播间隔时间，单位为毫秒，为`0`时不轮播
+```html
+<template>
+	<ste-button @click="show1 = true">自动轮播</ste-button>
+	<view style="width: 100%">
+		<ste-media-preview :urls="medias" :show.sync="show1" :autoplay="3000" />
+	</view>
+</template>
+
+<script>
+export default{
+	data(){
+		return{
+			show1: false,
+		}
+	}
+}
+</script>
+```
+#### 前后衔接循环播放
+- `loop`属性可开启前后衔接循环播放
+```html
+<template>
+	<ste-button @click="show2 = true">前后衔接循环播放</ste-button>
+	<view style="width: 100%">
+		<ste-media-preview :urls="medias" :show.sync="show2" loop />
+	</view>
+</template>
+
+<script>
+export default{
+	data(){
+		return{
+			show2: false,
+		}
+	}
+}
+</script>
+```
+#### 默认展示下标为2的媒体资源
+- `index`属性可控制从第几页开始展示
+```html
+<template>
+	<ste-button @click="show3 = true">默认展示下标为2的媒体资源</ste-button>
+	<view style="width: 100%">
+		<ste-media-preview :urls="medias" :show.sync="show3" :index="2" />
+	</view>
+</template>
+
+<script>
+export default{
+	data(){
+		return{
+			show3: false,
+		}
+	}
+}
+</script>
+```
+#### 隐藏左下角索引标签
+- `showIndex`属性可控制左下角页签显示
+```html
+<template>
+	<ste-button @click="show4 = true">隐藏左下角索引标签</ste-button>
+	<view style="width: 100%">
+		<ste-media-preview :urls="medias" :show.sync="show4" :showIndex="false" />
+	</view>
+</template>
+
+<script>
+export default{
+	data(){
+		return{
+			show4: false,
+		}
+	}
+}
+</script>
+```
+#### 双指缩放
+- `scale`属性可开启双指缩放功能
+```html
+<template>
+	<ste-button @click="show5 = true">双指缩放</ste-button>
+	<view style="width: 100%">
+		<ste-media-preview :urls="medias" :show.sync="show5" scale />
+	</view>
+</template>
+
+<script>
+export default{
+	data(){
+		return{
+			show5: false,
+		}
+	}
+}
+</script>
+```
+#### 长按触发事件
+- 事件`longpress`在用户长按时触发
+```html
+<template>
+	<ste-button @click="show6 = true">长按触发事件</ste-button>
+	<view style="width: 100%">
+		<ste-media-preview :urls="medias" :show.sync="show6" @longpress="onLongpress" />
+	</view>
+</template>
+
+<script>
+export default{
+	data(){
+		return{
+			show6: false,
+		}
+	},
+	methods:{
+		onLongpress(index) {
+			this.showToast({
+				title: `长按了第【${index + 1}】个媒体资源`,
+				icon: 'none',
+			});
+		},
+	}
+}
+</script>
+```
+#### 关闭前/后事件
+- 事件`beforeClose`在关闭前被触发
+- 事件`close`在关闭后被触发
+```html
+<template>
+	<ste-button @click="show7 = true">关闭前/后事件</ste-button>
+	<view style="width: 100%">
+		<ste-media-preview :urls="medias" :show.sync="show7" @beforeClose="onBeforeClose" @close="onClose" />
+	</view>
+</template>
+
+<script>
+export default{
+	data(){
+		return{
+			show7: false,
+		}
+	},
+	methods:{
+		onBeforeClose(stop, next, prevent) {
+			stop();
+			uni.showModal({
+				title: '确定关闭弹窗吗？',
+				success({ cancel, confirm }) {
+					if (confirm) {
+						console.log('点了确定');
+						next();
+					}
+					if (cancel) {
+						console.log('点了取消');
+						prevent();
+					}
+				},
+				fail() {
+					prevent();
+				},
+			});
+		},
+		onClose() {
+			this.showToast({
+				title: '弹窗关闭了',
+				icon: 'none',
+			});
+		},
+	}
+}
+</script>
+```
+
+
+
+---$
+### API
+#### Props
+
+| 属性名		| 说明								| 类型				| 默认值		| 可选值	| 支持版本			|
+| ---			| ---								| ---				| ---		| ---	| ---				|
+| `show`		| 是否显示							| `Boolean`			| `false`	| -		| -					|
+| `urls`		| 预览的媒体URL数组					| `Array<string>`	| `[]`		| -		| -					|
+| `autoplay`	| 自动轮播时长，为0不自动轮播，单位ms	| `Number`			| `0`		| -		| -					|
+| `loop`		| 是否前后衔接播放					| `Boolean`			| `false`	| -		| -					|
+| `index`		| 默认展示的资源下标					| `Number`			| `0`		| -		| -					|
+| `showIndex`	| 是否显示左下角索引					| `Boolean`			| `true`	| -		| -					|
+| `scale`		| 是否支持双指缩放					| `Boolean`			| `false`	| -		| -					|
+| `showmenu`	| 是否开启图片长按菜单					| `Boolean`			| `true`	| -		| 微信小程序`2.13.0`	|
+
+#### Event
+
+|事件名			|说明		|事件参数				|支持版本	|
+|---			|---		|---					|---		|
+| `beforeClose`	| 关闭前触发	| -						| -			|
+| `close`		| 关闭后触发	| -						| -			|
+| `change`		| 切换时触发	| `index`:切换后的下标	| -			|
+| `longpress`	| 长按时触发	| `index`:当前下标		| -			|
+
+
+---$
+{{xuyajun}}

package/components/ste-media-preview/TouchScaleing.js

@@ -0,0 +1,102 @@
+export default class TouchScaleing {
+	identifiers = [];
+
+	startParam = {
+		id1: null,
+		x1: null,
+		y1: null,
+		id2: null,
+		x2: null,
+		y2: null,
+	};
+
+	scale = 1;
+
+	rotate = 0;
+
+	translateX = 0;
+	translateY = 0;
+
+	_setData(changedTouches) {
+		changedTouches.forEach((newData) => {
+			const data = this.identifiers.find((item) => item.identifier === newData.identifier);
+			if (data) {
+				Object.assign(data, newData);
+			} else {
+				this.identifiers.push(newData);
+				if (this.identifiers.length > 2) {
+					this.identifiers.shift();
+					this.startParam.id1 = this.startParam.id2;
+					this.startParam.x1 = this.startParam.x2;
+					this.startParam.y1 = this.startParam.y2;
+					this.startParam.id2 = newData.identifier;
+					this.startParam.x2 = newData.pageX;
+					this.startParam.y2 = newData.pageY;
+				}
+			}
+		});
+	}
+
+	_getTouchPosition() {
+		const [m1, m2] = this.identifiers;
+		const x1 = m1?.pageX || null;
+		const y1 = m1?.pageY || null;
+		const x2 = m2?.pageX || null;
+		const y2 = m2?.pageY || null;
+		const id1 = m1?.identifier || null;
+		const id2 = m2?.identifier || null;
+		return [x1, y1, x2, y2, id1, id2];
+	}
+	touchStart(changedTouches) {
+		this._setData(changedTouches);
+
+		const [x1, y1, x2, y2, id1, id2] = this._getTouchPosition();
+		if (x1 !== null && y1 !== null) {
+			this.startParam.x1 = x1;
+			this.startParam.y1 = y1;
+			this.startParam.id1 = id1;
+		}
+		if (x2 !== null && y2 !== null) {
+			this.startParam.x2 = x2;
+			this.startParam.y2 = y2;
+			this.startParam.id2 = id2;
+		}
+		return [x1, y1, x2, y2];
+	}
+	touchMove(changedTouches) {
+		if (changedTouches.length < 2) return false;
+		this._setData(changedTouches);
+
+		const param = this.startParam;
+		const [startX1, startY1, startX2, startY2] = [param.x1, param.y1, param.x2, param.y2];
+		const [x1, y1, x2, y2] = this._getTouchPosition();
+
+		this.scale =
+			Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)) /
+			Math.sqrt(Math.pow(startX2 - startX1, 2) + Math.pow(startY2 - startY1, 2));
+		this.rotate =
+			(Math.atan2(y2 - y1, x2 - x1) * 180) / Math.PI -
+			(Math.atan2(startY2 - startY1, startX2 - startX1) * 180) / Math.PI;
+		this.translateX = (x1 + x2) / 2 - (startX1 + startX2) / 2;
+		this.translateY = (y1 + y2) / 2 - (startY1 + startY2) / 2;
+		return true;
+	}
+	touchEnd(changedTouches) {
+		changedTouches.forEach((item) => {
+			const index = this.identifiers.findIndex((m) => m.identifier === item.identifier);
+			if (index !== -1) {
+				this.identifiers.splice(index, 1);
+			}
+		});
+		const [x1, y1, x2, y2] = this._getTouchPosition();
+		if (x1 !== null && y1 !== null) {
+			this.startParam.x1 = null;
+			this.startParam.y1 = null;
+		}
+		if (x2 !== null && y2 !== null) {
+			this.startParam.x2 = null;
+			this.startParam.y2 = null;
+		}
+		return !this.identifiers.length;
+	}
+}

package/components/ste-media-preview/ste-media-preview.vue

@@ -0,0 +1,267 @@
+<template>
+	<view class="ste-media-preview-root" v-if="dataShow">
+		<view class="media-preview-content">
+			<swiper
+				style="width: 100%; height: 100%"
+				:autoplay="autoplay > 0"
+				:interval="autoplay"
+				:circular="loop"
+				:current="dataIndex"
+				@change="onChange"
+			>
+				<swiper-item v-for="(item, index) in cmpUrls" :key="index">
+					<view
+						class="preview-item"
+						@click.stop="1"
+						@touchstart="onTouchstart"
+						@touchmove="onTouchmove"
+						@touchend="onTouchend"
+						@longpress="onLongpress"
+						:style="[dataIndex === index ? cmpTransform : null]"
+					>
+						<video
+							class="video"
+							object-fit="contain"
+							v-if="item.type === 'video'"
+							:src="item.url || item.path"
+							@click.stop="1"
+						/>
+						<ste-image
+							v-else
+							class="image"
+							:showMenuByLongpress="dataShowmenu"
+							:src="item.url || item.path"
+							mode="aspectFit"
+						></ste-image>
+					</view>
+				</swiper-item>
+			</swiper>
+		</view>
+		<view class="media-preview-footer">
+			<view class="footer-index">
+				<text v-if="showIndex">{{ dataIndex + 1 }}/{{ cmpUrls.length }}</text>
+			</view>
+			<view class="footer-close" @click="onClose">
+				<ste-icon name="close" size="60" code="&#xe6a0;" color="#fff" />
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+import utils from '../../utils/utils.js';
+import TouchScaleing from './TouchScaleing.js';
+/**
+ * ste-media-preview 媒体预览
+ * @description 媒体预览组件
+ * @tutorial https://stellar-ui.intecloud.com.cn/pc/index/index?name=ste-media-preview
+ * @property {Boolean} show 是否显示
+ * @property {Array<String>} urls 预览的媒体地址数组
+ * @property {Number} autoplay 自动轮播时长，为0不自动轮播，单位ms
+ * @property {Boolean} loop 是否前后衔接播放
+ * @property {Number} index 默认展示的资源下标
+ * @property {Boolean} showIndex 是否显示左下角索引
+ * @property {Boolean} scale 是否支持双指缩放
+ * @property {Boolean} showmenu 是否开启图片长按菜单
+ * @event {Function} beforeClose 关闭前触发
+ * @event {Function} close 关闭后触发
+ * @event {Function} change 切换时触发
+ * @event {Function} longpress 长按触发
+ */
+export default {
+	group: '展示组件',
+	title: 'MediaPreview 媒体预览',
+	name: 'ste-media-preview',
+	props: {
+		show: {
+			type: [Boolean, null],
+			default: () => false,
+		},
+		urls: {
+			type: [Array, null],
+			default: () => [],
+		},
+		autoplay: {
+			type: [Number, null],
+			default: () => 0,
+		},
+		loop: {
+			type: [Boolean, null],
+			default: () => false,
+		},
+		index: {
+			type: [Number, null],
+			default: () => null,
+		},
+		showIndex: {
+			type: [Boolean, null],
+			default: () => true,
+		},
+		scale: {
+			type: [Boolean, null],
+			default: () => false,
+		},
+		showmenu: {
+			type: [Boolean, null],
+			default: () => true,
+		},
+	},
+	data() {
+		return {
+			dataIndex: 0,
+			dataShow: false,
+			touch: null,
+			scaling: 1,
+			translate: 0,
+			rotate: 0,
+			transition: 0,
+			dataShowmenu: true,
+		};
+	},
+	mounted() {
+		if (this.scale) this.touch = new TouchScaleing();
+	},
+	computed: {
+		cmpUrls() {
+			return this.urls
+				.map((url) => ({ url, type: utils.getMediaFileType(url) }))
+				.filter((item) => item.type !== 'audio');
+		},
+		cmpTransform() {
+			return {
+				transform: `scale(${this.scaling}) translate(${this.translate}) rotate(${this.rotate}deg)`,
+				transition: this.transition,
+			};
+		},
+	},
+	watch: {
+		show: {
+			handler(v) {
+				if (v) {
+					// 如果外部指定index，则使用外部index，不然使用内部dataIndex
+					if (this.index != null) {
+						this.dataIndex = this.index;
+					}
+				}
+				this.dataShow = v;
+			},
+			immediate: true,
+		},
+		showmenu: {
+			handler(v) {
+				this.dataShowmenu = v;
+			},
+			immediate: true,
+		},
+	},
+	methods: {
+		async onClose() {
+			let next = true;
+			const stop = new Promise((resolve, reject) => {
+				this.$emit(
+					'beforeClose',
+					() => (next = false),
+					() => resolve(),
+					() => reject()
+				);
+			});
+			if (!next) {
+				await stop;
+			}
+			this.dataShow = false;
+			this.$emit('update:show', false);
+			this.$emit('close');
+		},
+		async onTouchstart(e) {
+			if (!this.scale) return;
+
+			const [x1, y1, x2, y2] = this.touch.touchStart(e.changedTouches);
+			if (x1 && y1 && x2 && y2) {
+				if (this.dataShowmenu) this.dataShowmenu = false;
+			}
+		},
+		onTouchmove(e) {
+			if (!this.scale) return;
+			/**
+			 * @type {TouchScaleing}
+			 */
+			const touch = this.touch;
+			const bool = touch.touchMove(e.changedTouches);
+			if (!bool) return;
+			if (this.dataShowmenu) this.dataShowmenu = false;
+			this.scaling = touch.scale;
+			this.translate = `${touch.translateX}px,${touch.translateY}px`;
+			this.rotate = touch.rotate;
+		},
+		onTouchend(e) {
+			if (!this.scale) return;
+			if (this.dataShowmenu !== this.showmenu) this.dataShowmenu = this.showmenu;
+			const bool = this.touch.touchEnd(e.changedTouches);
+			if (!bool) return;
+			this.transition = '0.3s';
+			setTimeout(() => {
+				this.scaling = 1;
+				this.translate = 0;
+				this.rotate = 0;
+				setTimeout(() => {
+					this.transition = 0;
+				}, 100);
+			}, 50);
+		},
+		onChange({ detail }) {
+			this.dataIndex = detail.current;
+			this.$emit('update:index', this.dataIndex);
+			this.$emit('change', this.dataIndex);
+		},
+		onLongpress() {
+			this.$emit('longpress', this.dataIndex);
+		},
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.ste-media-preview-root {
+	position: fixed;
+	top: 0;
+	left: 0;
+	bottom: 0;
+	right: 0;
+	width: 100vw;
+	height: 100vh;
+	background-color: #000;
+	color: #fff;
+	z-index: 9999999;
+	.media-preview-content {
+		width: 100%;
+		height: calc(100% - 120rpx);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		.preview-item {
+			width: 100%;
+			height: 100%;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			.image,
+			.video {
+				width: 100%;
+				height: 100%;
+			}
+			.image {
+				max-width: 100%;
+				max-height: 100%;
+			}
+		}
+	}
+	.media-preview-footer {
+		width: 100%;
+		height: 120rpx;
+		padding: 0 30rpx 30rpx 30rpx;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+	}
+}
+</style>