商品视频简介

pagesHome/order/components/banner_1.vue

@@ -1,113 +1,116 @@
-<template>
-	<view class="banner">
-		<view class="banner_1">
-			<swiper class="swiper" circular :indicator-dots="true" indicator-color="#ffffff"
-				indicator-active-color="#FB1438" :interval="3000" :duration="1000">
-				<swiper-item class="list" v-for="(item,index) in fileList" :key="index">
-					<image class="image" :src="item.url" mode="aspectFit">
-					</image>
-				</swiper-item>
-			</swiper>
-			<!-- 是否关注商品 -->
-			<view class="goodsColect">
-				<text @tap="toGoodscolect"
-					:class="['iconfont',goodsColect?'icon-yduishoucangshixin-copy':'icon-yduishoucangkongxin']"></text>
-			</view>
-			<view class="acttags" v-if="acttagsList.length>0">
-				<text v-for="(i,indexx) in acttagsList" :key="indexx">{{i.label}}</text>
-			</view>
-		</view>
-	</view>
-</template>
-
-<script>
-	export default {
-		props: {
-			goodsInfo: {
-				type: Object,
-			},
-			goodsColect: {
-				type: Boolean
-			}
-		},
-		data() {
-			return {
-				// 图片
-				fileList: [],
-				// 活动
-				acttagsList: [],
-			};
-		},
-		methods: {
-			toGoodscolect() {
-				const that = this;
-				that.$emit('toGoodscolect')
-			}
-		},
-		watch: {
-			goodsInfo: {
-				deep: true,
-				immediate: true,
-				handler(val) {
-					if (val && val.file.length > 0) this.$set(this, `fileList`, val.file)
-					if (val && val.act_tags.length > 0) this.$set(this, `acttagsList`, val.act_tags)
-				}
-			}
-		},
-	}
-</script>
-
-<style lang="scss">
-	.banner {
-		.banner_1 {
-
-			border-bottom: 0.5vw solid var(--f9Color);
-
-			swiper {
-				height: 44vh !important;
-			}
-
-			.list {
-				border-radius: 5px;
-
-				.image {
-					width: 100%;
-					height: 100%;
-					border-radius: 5px;
-					background-color: #fff;
-				}
-			}
-
-			.goodsColect {
-				position: fixed;
-				top: 2vw;
-				right: 3vw;
-				z-index: 99;
-				background-color: #858585;
-				border-radius: 90px;
-
-				text {
-					font-size: 30px;
-				}
-			}
-
-			.acttags {
-				position: absolute;
-				top: 1vw;
-				left: 1vw;
-				width: 97%;
-
-				text {
-					display: inline-block;
-					background-color: var(--fFB1Color);
-					color: #fff;
-					border-radius: 1vw;
-					padding: 0.5vw;
-					font-size: 12px;
-
-					margin: 0 1vw 0 0;
-				}
-			}
-		}
-	}
-</style>
+<template>
+	<view class="banner">
+		<view class="banner_1">
+			<swiper class="swiper" circular :indicator-dots="true" indicator-color="#ffffff"
+				indicator-active-color="#FB1438" :interval="3000" :duration="1000">
+				<swiper-item class="list" v-for="(item,index) in fileList" :key="index">
+					<image class="image"
+						v-if="item.url.indexOf('gif') != -1 || item.url.indexOf('jpg') != -1 || item.url.indexOf('png') != -1 || item.url.indexOf('jpeg') !=-1"
+						:src="item.url" mode="aspectFit"></image>
+					<video class="image" :autoplay='false' :show-fullscreen-btn="false" :loop="false" controls v-else
+						:src="item.url"></video>
+				</swiper-item>
+			</swiper>
+			<!-- 是否关注商品 -->
+			<view class="goodsColect">
+				<text @tap="toGoodscolect"
+					:class="['iconfont',goodsColect?'icon-yduishoucangshixin-copy':'icon-yduishoucangkongxin']"></text>
+			</view>
+			<view class="acttags" v-if="acttagsList.length>0">
+				<text v-for="(i,indexx) in acttagsList" :key="indexx">{{i.label}}</text>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			goodsInfo: {
+				type: Object,
+			},
+			goodsColect: {
+				type: Boolean
+			}
+		},
+		data() {
+			return {
+				// 图片
+				fileList: [],
+				// 活动
+				acttagsList: [],
+			};
+		},
+		methods: {
+			toGoodscolect() {
+				const that = this;
+				that.$emit('toGoodscolect')
+			}
+		},
+		watch: {
+			goodsInfo: {
+				deep: true,
+				immediate: true,
+				handler(val) {
+					if (val && val.file.length > 0) this.$set(this, `fileList`, val.file)
+					if (val && val.act_tags.length > 0) this.$set(this, `acttagsList`, val.act_tags)
+				}
+			}
+		},
+	}
+</script>
+
+<style lang="scss">
+	.banner {
+		.banner_1 {
+
+			border-bottom: 0.5vw solid var(--f9Color);
+
+			swiper {
+				height: 44vh !important;
+			}
+
+			.list {
+				border-radius: 5px;
+
+				.image {
+					width: 100%;
+					height: 100%;
+					border-radius: 5px;
+					background-color: #fff;
+				}
+			}
+
+			.goodsColect {
+				position: fixed;
+				top: 2vw;
+				right: 3vw;
+				z-index: 99;
+				background-color: #858585;
+				border-radius: 90px;
+
+				text {
+					font-size: 30px;
+				}
+			}
+
+			.acttags {
+				position: absolute;
+				top: 1vw;
+				left: 1vw;
+				width: 97%;
+
+				text {
+					display: inline-block;
+					background-color: var(--fFB1Color);
+					color: #fff;
+					border-radius: 1vw;
+					padding: 0.5vw;
+					font-size: 12px;
+
+					margin: 0 1vw 0 0;
+				}
+			}
+		}
+	}
+</style>