组合票页面视频加载处理

pages/combination/distributionCombiChoose/distributionCombiChoose.vue

@@ -3,7 +3,7 @@
 	<view class="wrap">
 		<scroll-view @scroll="scrollFull" style="height: 100%;" :scroll-into-view="toViewFull" scroll-y enhanced :bounces="false">
 			<view class="banner" id='banner'>
-				<u-swiper :list="imgList" @change="e => currentNum = e.current" indicatorStyle="right: 20px;bottom:25px" height="400" circular>
+				<u-swiper :list="imgList" @change="e => currentNum = e.current" indicatorStyle="right: 20px;bottom:16px" height="400" :interval='interval' circular>
 						<view slot="indicator" class="indicator-num">
 								<text class="indicator-num__text">{{ currentNum + 1 }}/{{ imgList.length }}</text>
 						</view>
@@ -221,6 +221,7 @@ export default {
   },
   data() {
     return {
+      interval:3000,//轮播时间
       currentMerchant:'',//当前入口商家信息
       showTip:false,//系统调不通或者崩了跳出弹窗
       detailData:'',//详情数据
@@ -433,6 +434,22 @@ export default {
 		        //获取当前景区图片,把当前景区放在第一位
 		        if (item.id == this.merchantId) {
 		          this.imgList = item.imgList
+              //视频排在图片前面
+              this.imgList.sort((a,b)=>{
+                return b.type-a.type
+              })
+              //类型转化，用于视频播放
+              this.imgList.forEach(item2=>{
+                if(item2.type==1){
+                  //图片
+                  item2.type='image'
+                }
+                if(item2.type==2){
+                  //如果有视频，轮播时间改为60秒
+                  item2.type='video'
+                  this.interval=100*1000
+                }
+              })
 		          this.scenicList.splice(index, 1)
 		          this.scenicList.unshift(item)
 		          item.productListCopy = item.productList
@@ -641,8 +658,8 @@ export default {
         let scrollTop=e.detail.scrollTop
         let selectFun=(data)=>{
           if(data){
-					  //20为中间盒子的top-20
-					  height=data.height+this.middleTopHeight-20-this.topHeight
+					  //10为中间盒子的top-10
+					  height=data.height+this.middleTopHeight-10-this.topHeight
 					  let opacity=scrollTop/(data.height)
 					  this.tabbarOpacity=parseFloat(opacity.toFixed(2))
             //下面值取整数，防止部分手机取值太多小数，出现抖动的bug
@@ -895,7 +912,7 @@ export default {
 .middle {
 	padding-bottom: 100rpx;
 	position: relative;
-	top: -20px;
+	top: -10px;
 }
 // 中间上部分
 .middle-top{

pages/indexs/center/center.vue

@@ -169,14 +169,14 @@
 							咨询电话
 						</view>
 					</view>
-					<view class="middle3-list" @click="goSuggest()">
+					<!-- <view class="middle3-list" @click="goSuggest()">
 						<view>
 							<image src="@/static/img/my/center/suggest.png"></image>
 						</view>
 						<view>
 							建议投诉
 						</view>
-					</view>
+					</view> -->
 				</view>
 			</view>
 		</view>

uview-ui/components/u-swiper/u-swiper.vue

@@ -65,6 +65,7 @@
 							height: $u.addUnit(height)
 						}"
 						controls
+						:autoplay='ifAutoplay(index)'
 						@tap="clickHandler(index)"
 					></video>
 					<text
@@ -90,8 +91,8 @@
 </template>
 
 <script>
-	import props from './props.js';
-	/**
+import props from './props.js'
+/**
 	 * Swiper 轮播图
 	 * @description 该组件一般用于导航轮播，广告展示等场景,可开箱即用，
 	 * @tutorial https://www.uviewui.com/components/swiper.html
@@ -123,82 +124,90 @@
 	 * @event {Function(index)}	change	轮播图切换时触发(自动或者手动切换)	index：切换到了第几张图片，从0开始
 	 * @example	<u-swiper :list="list4" keyName="url" :autoplay="false"></u-swiper>
 	 */
-	export default {
-		name: 'u-swiper',
-		mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
-		data() {
-			return {
-				currentIndex: 0
-			}
-		},
-		watch: {
-			current(val, preVal) {
-				if(val === preVal) return;
-				this.currentIndex = val; // 和上游数据关联上
-			}
-		},
-		computed: {
-			itemStyle() {
-				return index => {
-					const style = {}
-					// #ifndef APP-NVUE || MP-TOUTIAO
-					// 左右流出空间的写法不支持nvue和头条
-					// 只有配置了此二值，才加上对应的圆角，以及缩放
-					if (this.nextMargin && this.previousMargin) {
-						style.borderRadius = uni.$u.addUnit(this.radius)
-						if (index !== this.currentIndex) style.transform = 'scale(0.92)'
-					}
-					// #endif
-					return style
-				}
-			}
-		},
-		methods: {
-      getItemType(item) {
-        if (typeof item === 'string') return uni.$u.test.video(this.getSource(item)) ? 'video' : 'image'
-        if (typeof item === 'object' && this.keyName) {
-          if (!item.type) return uni.$u.test.video(this.getSource(item)) ? 'video' : 'image'
-          if (item.type === 'image') return 'image'
-          if (item.type === 'video') return 'video'
-          return 'image'
+export default {
+  name: 'u-swiper',
+  mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
+  data() {
+    return {
+      currentIndex: 0
+    }
+  },
+  watch: {
+    current(val, preVal) {
+      if(val === preVal) return
+      this.currentIndex = val // 和上游数据关联上
+    }
+  },
+  computed: {
+    itemStyle() {
+      return index => {
+        const style = {}
+        // #ifndef APP-NVUE || MP-TOUTIAO
+        // 左右流出空间的写法不支持nvue和头条
+        // 只有配置了此二值，才加上对应的圆角，以及缩放
+        if (this.nextMargin && this.previousMargin) {
+          style.borderRadius = uni.$u.addUnit(this.radius)
+          if (index !== this.currentIndex) style.transform = 'scale(0.92)'
         }
-      },
-			// 获取目标路径，可能数组中为字符串，对象的形式，额外可指定对象的目标属性名keyName
-			getSource(item) {
-				if (typeof item === 'string') return item
-				if (typeof item === 'object' && this.keyName) return item[this.keyName]
-				else uni.$u.error('请按格式传递列表参数')
-				return ''
-			},
-			// 轮播切换事件
-			change(e) {
-				// 当前的激活索引
-				const {
-					current
-				} = e.detail
-				this.pauseVideo(this.currentIndex)
-				this.currentIndex = current
-				this.$emit('change', e.detail)
-			},
-			// 切换轮播时，暂停视频播放
-			pauseVideo(index) {
-				const lastItem = this.getSource(this.list[index])
-				if (uni.$u.test.video(lastItem)) {
-					// 当视频隐藏时，暂停播放
-					const video = uni.createVideoContext(`video-${index}`, this)
-					video.pause()
-				}
-			},
-			// 当一个轮播item为视频时，获取它的视频海报
-			getPoster(item) {
-				return typeof item === 'object' && item.poster ? item.poster : ''
-			},
-			// 点击某个item
-			clickHandler(index) {
-				this.$emit('click', index)
-			}
-		},
-	}
+        // #endif
+        return style
+      }
+    }
+  },
+  methods: {
+    //---是否自动播放
+    ifAutoplay(index){
+      if(index==0){
+        return true
+      }else{
+        return false
+      }
+    },
+    getItemType(item) {
+      if (typeof item === 'string') return uni.$u.test.video(this.getSource(item)) ? 'video' : 'image'
+      if (typeof item === 'object' && this.keyName) {
+        if (!item.type) return uni.$u.test.video(this.getSource(item)) ? 'video' : 'image'
+        if (item.type === 'image') return 'image'
+        if (item.type === 'video') return 'video'
+        return 'image'
+      }
+    },
+    // 获取目标路径，可能数组中为字符串，对象的形式，额外可指定对象的目标属性名keyName
+    getSource(item) {
+      if (typeof item === 'string') return item
+      if (typeof item === 'object' && this.keyName) return item[this.keyName]
+      else uni.$u.error('请按格式传递列表参数')
+      return ''
+    },
+    // 轮播切换事件
+    change(e) {
+      // 当前的激活索引
+      const {
+        current
+      } = e.detail
+      this.pauseVideo(this.currentIndex)
+      this.currentIndex = current
+      this.$emit('change', e.detail)
+    },
+    // 切换轮播时，暂停视频播放
+    pauseVideo(index) {
+      const lastItem = this.getSource(this.list[index])
+      if (uni.$u.test.video(lastItem)) {
+        // 当视频隐藏时，暂停播放
+        const video = uni.createVideoContext(`video-${index}`, this)
+        video.pause()
+      }
+    },
+    // 当一个轮播item为视频时，获取它的视频海报
+    getPoster(item) {
+      return typeof item === 'object' && item.poster ? item.poster : ''
+    },
+    // 点击某个item
+    clickHandler(index) {
+      this.$emit('click', index)
+    }
+  },
+}
 </script>
 
 <style lang="scss" scoped>