Merge branch 'dev' of https://gitea.lihaink.cn/mkm/new_shop_app into dev

components/productConSwiper/index.vue

@@ -1,45 +1,43 @@
 <template>
 	<view class='product-bg'>
-		<swiper :indicator-dots="indicatorDots" indicator-active-color="#e93323" :autoplay="autoplay" :circular="circular"
+		<swiper :indicator-dots="indicatorDots" :current='current' indicator-active-color="#e93323" :autoplay="autoplay"
-		 :interval="interval" :duration="duration" @change="change" v-if="isPlay">
+			:circular="circular" :interval="interval" :duration="duration" @change="change" v-if="isPlay">
 			<!-- #ifndef APP-PLUS -->
-			<swiper-item v-if="videoline && videoline != '' && videoline != 'https:'">
-				<view class="item">
-					<video id="myVideo" :src='videoline && (videoline.substring(0,4) == "http" || videoline.substring(0,5) == "https") ? videoline : ("http:" + videoline)'
-					 objectFit="cover" controls style="width:100%;height:100% " show-mute-btn="true"
-					 auto-pause-if-navigate @ended="endedFun()"></video>
-					<view class="poster" v-if="controls">
-						<image class="image" :src="videoCoverImg"></image>
-					</view>
-					<view class="stop" v-if="controls" @tap="bindPause">
-						<image class="image" src="../../static/images/stop.png"></image>
-					</view>
-				</view>
-			</swiper-item>
-			<!-- #endif -->
-			<!-- #ifdef APP-PLUS -->
-			<swiper-item v-if="videoline">
-				<view class="item">
-					<view class="poster" v-show="controls">
-						<image class="image" :src="videoCoverImg"></image>
-					</view>
-					<view class="stop" v-show="controls" @tap="bindPause">
-						<image class="image" src="../../static/images/stop.png"></image>
-					</view>
-				</view>
-			</swiper-item>
-			<!-- #endif -->
 			<block v-for="(item,index) in imgUrls" :key='index'>
-				<swiper-item>
+				<swiper-item v-if="isVideoUrl(item)">
-					<image :src="item" class="slide-image" @click='getpreviewImage(item)' mode="widthFix" />
+					<video :src="isVideoUrl(item,true)" objectFit="cover" controls style="width:100%;height:100% "
+						show-center-play-btn show-mute-btn="true" auto-pause-if-navigate
+						:enable-progress-gesture="false" :poster="item+coverUrl"></video>
+				</swiper-item>
+				<swiper-item v-else>
+					<image :src="item" class="slide-image" @click='getpreviewImage(item)' />
 				</swiper-item>
 			</block>
+			<!-- #endif -->
+
+			<!-- #ifdef APP-PLUS -->
+			<block v-for="(item,index) in imgUrls" :key='index'>
+				<swiper-item v-if="isVideoUrl(item)">
+					<view>
+						<image :src="item+coverUrl" class="slide-image" />
+						<image class="image-play-icon" src="../../static/images/stop.png"
+							@click='videoPlay(item,index)'>
+						</image>
+					</view>
+				</swiper-item>
+
+				<swiper-item v-else>
+					<image :src="item" class="slide-image" @click='getpreviewImage(item)' />
+				</swiper-item>
+			</block>
+			<!-- #endif -->
 		</swiper>
+
 		<!-- #ifdef APP-PLUS -->
 		<view v-if="!isPlay" style="width: 100%; height: 750rpx;">
-			<video id="myVideo" :src='videoline && (videoline.substring(0,4) == "http" || videoline.substring(0,5) == "https") ? videoline : "http:" + videoline'
+			<video id="myVideo" :src='playingUrl' objectFit="cover" controls style="width:100%;height:100% "
-			 objectFit="cover" controls style="width:100%;height:100% " show-center-play-btn show-mute-btn="true"
+				show-center-play-btn show-mute-btn="true" auto-pause-if-navigate :enable-progress-gesture="false"
-			 auto-pause-if-navigate :enable-progress-gesture="false" :poster="videoCoverImg" @pause="videoPause" @ended="endedFun()"></video>
+				:poster="playingUrl+coverUrl" @pause="videoPause" @ended="endedFun()"></video>
 
 		</view>
 		<!-- #endif -->
@@ -50,7 +48,7 @@
 	// +----------------------------------------------------------------------
 	// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
 	// +----------------------------------------------------------------------
-	// | Copyright (c) 2016~2023 https://www.crmeb.com All rights reserved.
+	// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
 	// +----------------------------------------------------------------------
 	// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
 	// +----------------------------------------------------------------------
@@ -74,6 +72,10 @@
 		},
 		data() {
 			return {
+				coverUrl: '?spm=a2c4e.11153940.blogcont573781.6.c1032027sQ46VG&x-oss-process=video/snapshot,t_1000,m_fast',
+				current: '0',
+				videoTypeList: ['mp4', 'avi', 'mov', 'wmv', 'mkv', 'flv', 'mpeg', '3gp', 'webm'],
+				playingUrl: '',
 				indicatorDots: true,
 				circular: true,
 				autoplay: true,
@@ -97,6 +99,25 @@
 			// #endif
 		},
 		methods: {
+			isVideoUrl(url, getRightUrl) {
+				const str = url;
+				const lastIndex = str.lastIndexOf(".");
+				let extension;
+				if (lastIndex !== -1) {
+					extension = str.substring(lastIndex + 1);
+				} else {
+					extension = 'jpg'
+				}
+				if (getRightUrl) return url.replace(/\\/g, "")
+				return this.videoTypeList.includes(extension)
+			},
+
+			videoPlay(url, index) {
+				this.playingUrl = url
+				this.current = index
+				console.log(this.current)
+				this.bindPause()
+			},
 			getpreviewImage: function(item) {
 				uni.previewImage({
 					urls: this.imgUrls,
@@ -109,6 +130,7 @@
 				this.autoplay = true
 				// #endif
 			},
+
 			bindPause: function() {
 				// #ifndef APP-PLUS
 				this.videoContext.play();
@@ -119,7 +141,7 @@
 				// #ifdef APP-PLUS
 				this.isPlay = false
 				this.videoContext = uni.createVideoContext('myVideo', this);
-				this.$nextTick(()=>{
+				this.$nextTick(() => {
 					this.videoContext.play();
 				})
 				// #endif
@@ -140,15 +162,18 @@
 		height: 750rpx;
 		position: relative;
 	}
+
 	.product-bg swiper {
 		width: 100%;
 		height: 100%;
 		position: relative;
 	}
+
 	.product-bg .slide-image {
-		width: 100%;
+		width: 750rpx;
-		height: 100%;
+		height: 750rpx;
 	}
+
 	.product-bg .pages {
 		position: absolute;
 		background-color: #fff;
@@ -161,15 +186,18 @@
 		font-size: 24rpx;
 		color: #050505;
 	}
+
 	#myVideo {
 		width: 100%;
 		height: 100%
 	}
+
 	.product-bg .item {
 		position: relative;
 		width: 100%;
 		height: 100%;
 	}
+
 	.product-bg .item .poster {
 		position: absolute;
 		top: 0;
@@ -178,10 +206,12 @@
 		width: 100%;
 		z-index: 9;
 	}
+
 	.product-bg .item .poster .image {
 		width: 100%;
 		height: 100%;
 	}
+
 	.product-bg .item .stop {
 		position: absolute;
 		top: 50%;
@@ -192,8 +222,18 @@
 		margin-left: -68rpx;
 		z-index: 9;
 	}
+
 	.product-bg .item .stop .image {
 		width: 100%;
 		height: 100%;
 	}
+
+	.image-play-icon {
+		position: absolute;
+		width: 100rpx;
+		height: 100rpx;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+	}
 </style>

pages.json

@@ -107,6 +107,13 @@
 				// #endif
 			}
 		},
+		{
+			"path": "pages/goods_details/videoPlay",
+			"style": {
+				"navigationBarTitleText": "视屏详情"
+
+			}
+		},
 		{
 			"path": "pages/goods_cate/goods_cate",
 			"style": {

pages/goods_details/index.vue

@@ -319,6 +319,7 @@
 						</view>
 					</view>
 					<view class='product-intro' id="past3" style="background-color: #fff;">
+
 						<view class='conter' v-if="description">
 							<!-- #ifndef APP-PLUS -->
 							<jyf-parser v-if="description.type == 0" :domain='domain'
@@ -334,9 +335,26 @@
 									{{description.content.title}}
 								</view>
 								<view v-if="description.content && description.content.image" class="pictures">
-									<image mode="widthFix" style="width: 100%;"
+									<view class="" v-for="(item,index) in description.content.image" :key="index">
-										v-for="(item,index) in description.content.image" :key="index" :src="item">
+										<view style="position: relative;"
-									</image>
+											v-if='videoTypeList.includes(getSuffix(item))' @click="navGoPlay(item)">
+											<!-- #ifdef APP-PLUS -->
+											<image :src="item+coverUrl" mode="widthFix"
+												style="background-color: #fff;width: 100vw;" />
+											<!-- <image class="image-play-icon" src="/static/images/stop.png"> -->
+											<u--image class="image-play-icon" src="/static/images/stop.png" width="100rpx" height="100rpx" ></u--image>
+											</image>
+											<!-- #endif -->
+											<!-- #ifndef APP-PLUS -->
+											<video :src="item" objectFit="cover" controls style="width:750rpx;"
+												show-center-play-btn show-mute-btn="true" auto-pause-if-navigate
+												:enable-progress-gesture="false"></video>
+											<!-- #endif -->
+										</view>
+										<image v-else :src="item" mode="widthFix"
+											style="background-color: #fff;width: 100vw;">
+										</image>
+									</view>
 								</view>
 							</view>
 						</view>
@@ -575,6 +593,8 @@
 		data() {
 			let that = this;
 			return {
+				videoTypeList: ['mp4', 'avi', 'mov', 'wmv', 'mkv', 'flv', 'mpeg', '3gp', 'webm'],
+				coverUrl: '?spm=a2c4e.11153940.blogcont573781.6.c1032027sQ46VG&x-oss-process=video/snapshot,t_1000,m_fast',
 				isNodes: 0, //控制什么时候开始抓取元素节点,只要数值改变就重新抓取
 				sysHeight: sysHeight, //系统导航条高度
 				//属性是否打开
@@ -828,6 +848,22 @@
 		},
 		// #endif
 		methods: {
+			navGoPlay(url) {
+				uni.navigateTo({
+					url: `/pages/goods_details/videoPlay?url=${url}`
+				})
+
+			},
+			getSuffix(url) {
+				const str = url;
+				const lastIndex = str.lastIndexOf(".");
+				if (lastIndex !== -1) {
+					const extension = str.substring(lastIndex + 1);
+					return extension
+				} else {
+					console.log("字符串中没有找到点号。");
+				}
+			},
 			call: function() {
 				let that = this;
 				if (that.storeInfo.merchant.service_phone) {
@@ -2686,4 +2722,11 @@
 		color: #000000;
 		// border: 1px solid #F55726;
 	}
+
+	.image-play-icon {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+	}
 </style>

pages/goods_details/videoPlay.nvue

@@ -0,0 +1,45 @@
+<template>
+	<view class="">
+		<video :src="url" style="width: 750rpx;height: 1400rpx;" :autoplay='true' id="myvideo" controls></video>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				url: ""
+			}
+		},
+		methods: {
+			videoPlay() {
+				console.log("开始播放了")
+			},
+
+			videoShow() {
+				this.videoContext = uni.createVideoContext("myvideo", this); // this这个是实例对象 必传
+				this.videoUrl = this.url;
+				this.videoContext.requestFullScreen({
+					// direction: 90
+				});
+				this.videoContext.play();
+				this.videoPlay = true; // 显示播放盒子
+
+			}
+
+		},
+		onLoad(option) {
+			this.url = option.url
+			setTimeout(() => {
+				this.videoShow()
+			})
+
+		}
+
+
+	}
+</script>
+
+<style>
+
+</style>