lilei преди 2 години
родител
ревизия
08481060c3
променени са 4 файла, в които са добавени 178 реда и са изтрити 7 реда
  1. 8 0
      api/video.js
  2. 2 1
      pages/index/index.vue
  3. 167 6
      pages/videos/index.vue
  4. 1 0
      store/index.js

+ 8 - 0
api/video.js

@@ -15,4 +15,12 @@ export const promoTerminalDetail = params => {
     method: 'get',
     data: ''
   })
+}
+// 视频列表
+export const getVideoList = (params) => {
+  return request({
+    url: `content/queryPage/${params.pageNo}/${params.pageSize}`,
+    data: params,
+    method: 'post'
+  })
 }

+ 2 - 1
pages/index/index.vue

@@ -203,6 +203,8 @@
 			this.orderTodo = null
 			this.bondRecord = null
 			this.vinList = []
+			// 视频类型
+			this.getLookUpList('CONTENT_CATEGORY', 'vuex_videoTypeList');
 			// 检测是否登录
 			this.$store.dispatch('checkLogin',()=>{
 				// 获取数据字典
@@ -645,7 +647,6 @@
 				}
 				.tits{
 					font-size:28rpx;
-					font-weight: bold;
 				}
 			}
 			.scanButton{

+ 167 - 6
pages/videos/index.vue

@@ -1,6 +1,35 @@
 <template>
-	<view>
-		<view>asdfasdf asdf</view>
+	<view class="video-pagesCons">
+		<view class="tab-body">
+			    <view>
+					<u-tabs-swiper ref="uTabs" :list="tabList" :offset="[5,40]" bar-width='100' active-color="#1283d4" name="dispName" :current="current" @change="tabsChange" :is-scroll="false"
+					 swiperWidth="750"></u-tabs-swiper>
+				</view>
+				<swiper class="check-list" :current="swiperCurrent" @transition="transition" @change="swiperChange" @animationfinish="animationfinish">
+					<swiper-item class="swiper-item" style="height: 100%;width: 100%;overflow: hidden;" v-for="(tabs, indexs) in tabList" :key="indexs">
+						<scroll-view scroll-y style="height: 100%;width: 100%;overflow: auto;" @scrolltolower="onreachBottom">
+							<view  
+							class="check-order-list" 
+							v-for="(item,index) in list" 
+							:key="item.id" 
+							 @click="viewRow(item)"
+							>
+								<view class="video-item">
+									<view>
+										<u-image v-if="!item.showVideo" :src="item.imageSet[0]" height="200px" width="100%"></u-image>
+										<video v-else autoplay :src="item.content" style="width: 100%;height: 200px;" controls></video>
+									</view>
+									<view>{{item.titile}}</view>
+								</view>
+							 </view>
+							 <view style="padding: 20upx;">
+								 <u-empty :src="`/static/nodata.png`" icon-size="180" :text="noDataText" img-width="120" v-if="list.length==0 && status!='loading'" mode="list"></u-empty>
+								 <u-loadmore v-if="(total>=list.length&&list.length)||status=='loading'" :status="status" />
+							 </view>
+						</scroll-view>
+					</swiper-item>
+				</swiper>
+		</view>
 		<u-tabbar :list="vuex_tabBarList" :before-switch="beforeSwitch" :mid-button="false"></u-tabbar>
 	</view>
 </template>
@@ -10,19 +39,120 @@
 	    mapState,
 	    mapMutations,
 	} from 'vuex'
+	import { getVideoList } from "@/api/video.js"
+	import { openWebView } from "@/utils/index.js"
 	export default {
 		data() {
 			return {
-				
+				status: 'loading',
+				noDataText: '暂无数据',
+				current: 0,
+				swiperCurrent: 0,
+				// 查询条件
+				pageNo: 1,
+				pageSize: 10,
+				list: [],
+				total: 0,
 			}
 		},
 		computed: {
-			...mapState(['hasLogin','vuex_vinScanNums','vuex_scanMaxNums','vuex_tabBarList']),
+			...mapState(['hasLogin','vuex_vinScanNums','vuex_scanMaxNums','vuex_tabBarList','vuex_videoTypeList']),
 			userInfo(){
 				return this.$store.state.vuex_userInfo
 			},
+			tabList(){
+				return this.$store.state.vuex_videoTypeList
+			}
+		},
+		onLoad() {
+			this.pageInit()
+		},
+		onHide() {
+			this.list.map(item => {
+				item.showVideo = false
+			})
 		},
 		methods: {
+			pageInit(){
+				this.total = 0
+				this.pageNo = 1
+				this.getRow()
+			},
+			// tabs通知swiper切换
+			tabsChange(index) {
+				this.swiperCurrent = index;
+			},
+			swiperChange(event){
+				console.log(event.detail)
+				this.list = []
+				this.status = "loading"
+			},
+			// swiper-item左右移动,通知tabs的滑块跟随移动
+			transition(e) {
+				let dx = e.detail.dx;
+				this.$refs.uTabs.setDx(dx);
+			},
+			// 由于swiper的内部机制问题,快速切换swiper不会触发dx的连续变化,需要在结束时重置状态
+			// swiper滑动结束,分别设置tabs和swiper的状态
+			animationfinish(e) {
+				let current = e.detail.current;
+				if(current != this.current){
+					this.$refs.uTabs.setFinishCurrent(current);
+					this.swiperCurrent = current;
+					this.current = current;
+					this.pageInit()
+				}
+			},
+			// scroll-view到底部加载更多
+			onreachBottom() {
+				console.log(this.list.length, this.total)
+				if(this.list.length < this.total){
+					this.pageNo += 1
+					this.getRow()
+				}else{
+					this.status = "nomore"
+				}
+			},
+			// 查询列表
+			getRow (pageNo) {
+			  let _this = this
+			  if (pageNo) {
+			    this.pageNo = pageNo
+			  }
+			  let params = {
+			    pageNo: this.pageNo,
+			    pageSize: this.pageSize,
+			  }
+			  params.category = this.tabList ? this.tabList[this.swiperCurrent].code : ''
+			  this.status = "loading"
+			  getVideoList(params).then(res => {
+				if (res.code == 200 || res.status == 204 || res.status == 200) {
+				  const list = res.data.list || []
+				  list.map(item => {
+					  item.showVideo = false
+				  })
+				  if(_this.pageNo>1){
+					  _this.list = _this.list.concat(list)
+				  }else{
+					  _this.list = list
+				  }
+				  _this.total = res.data.count || 0
+				} else {
+				  _this.list = []
+				  _this.total = 0
+				  _this.noDataText = res.message
+				}
+				_this.status = _this.total>=_this.list.length ? "nomore" : 'loadmore'
+			  })
+			},
+			// 详细页
+			viewRow(item){
+				if(item.contentType == 'VIDEO'){
+					item.showVideo = true
+				}else{
+					openWebView({url:item.content})
+				}
+			},
 			// 扫描vin
 			beforeSwitch(index){
 				console.log(index)
@@ -64,6 +194,37 @@
 	}
 </script>
 
-<style>
-
+<style lang="less">
+    page{
+		height: 100vh;
+	}
+	.video-pagesCons{
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		.tab-body{
+			.check-list{
+				height: calc(100vh - 44px);
+			}
+			.check-order-list{
+				background: #ffffff;
+				padding: 10upx 20upx;
+				margin: 25upx;
+				border-radius: 30upx;
+				box-shadow: 1px 1px 3px #EEEEEE;
+				.video-item{
+					> view{
+						&:first-child{
+							padding-top: 20rpx;
+						}
+						&:last-child{
+							text-align: center;
+							font-size: 36rpx;
+							padding: 20rpx;
+						}
+					}
+				}
+			}
+		}
+	}
 </style>

+ 1 - 0
store/index.js

@@ -51,6 +51,7 @@ const store = new Vuex.Store({
 		vuex_allLookUp: [],  //  数据字典
 		vuex_paymentTypeList: [], // 支付方式
 		vuex_priceTypeList:[], // 价格类型
+		vuex_videoTypeList:[], // 视频类型
 		vuex_showPrice:[false,'',false], // 价格显示规则
 		vuex_userInfo:  null, // 用户信息
 		vuex_userPhoto: null, // 用户头像