完成视频搜索页面接口联

api/home.js

@@ -51,3 +51,23 @@ export const reqGetDoctorVideoList = data => {
 		isLoading: true
 	})
 }
+
+// 搜索视频列表部分
+export const reqGetSearchList = data => {
+	return ajax({
+		url: `/ymall/videoUser/SerachVideoList`,
+		method: 'POST',
+		data,
+		isLoading: true
+	})
+}
+
+// 获取所有二级科室
+export const reqAllDepartments = data => {
+	return ajax({
+		url: '/ymall/department/query',
+		method: 'POST',
+		data,
+		isLoading: true
+	})
+}

api/search.js

@@ -1,14 +0,0 @@
-import {
-	ajax
-} from './ajax.js'
-/* 搜索页面接口请求函数 */
-
-// 搜索视频列表API
-export const reqSearchList = data => {
-	return ajax({
-		url: `/ymall/videoUser/SerachVideoList`,
-		method: 'POST',
-		data,
-		isLoading: true
-	})
-}

components/public-videoList/public-videoList.vue

@@ -1,7 +1,7 @@
 <template>
 	<view>
 		<view class="content-wrap"  v-if="videoList.length!==0">
-			<view class="public-card flex-col" v-for="item in videoList" :key="item">
+			<view class="public-card flex-col" v-for="item in videoList" :key="item" @tap="handleVideoClick(item.id)">
 				<view class="img-cover">
 					<image class="video-cover" :src="item.coverPhoto"  :lazy-load="true" mode="aspectFill"></image>
 					<view class="icon-wrap" v-if="isShowPlayIcon">
@@ -72,6 +72,11 @@
 			};
 		},
 		methods: {
+			// 监听视频点击事件
+			handleVideoClick(e){
+				this.$emit('onVideoClick', e)
+			},
+			// 监听删除按钮点击事件
 			handleDeleteVideo() {
 				uni.showModal({
 					title: '提示',

pages/search/search.vue

@@ -9,35 +9,29 @@
 				<view class="cu-bar search bg-white">
 					<view class="search-form round">
 						<text class="cuIcon-search"></text>
-						<input @focus="InputFocus" @blur="InputBlur" :adjust-position="false" type="text" placeholder="请输入疾病、标题"
+						<input :adjust-position="false" type="text" placeholder="请输入疾病、标题"
+							v-model="payload.name"
 						 confirm-type="search"></input>
 					</view>
 					<view class="action">
-						<text class="search-text">搜索</text>
+						<text class="search-text" @tap="handleSearchClick">搜索</text>
 					</view>
 				</view>
-				
+
 				<view class="cu-bar category bg-white">
 					<view class="all-category flex-center">
 						<!-- <image src="../../static/images/arrow-up-blue.png" style="width: 21rpx;height: 16rpx;" mode=""></image> -->
-						<picker @change="PickerChange" class="flex-center" :value="index" :range="picker">
-							<text>全部科室</text>
+						<picker @change="PickerChange" class="flex-center" :range="picker">
+							<text>{{pickerCurrentValue}}</text>
 							<image src="../../static/images/arrow-down-blue.png" style="width: 21rpx;height: 16rpx;" mode=""></image>
 						</picker>
 					</view>
-					<view class="sort flex-center">
-						<picker @change="PickerChange" class="flex-center" :value="index" :range="sortList">
-							<text>最新</text>
-							<image src="../../static/images/arrow-down-blue.png" style="width: 21rpx; height: 16rpx;" mode=""></image>
-						</picker>
-						<!-- <image src="../../static/images/arrow-up-blue.png" style="width: 21rpx; height: 16rpx;" mode=""></image> -->
-					</view>
 				</view>
 			</view>
-			
+
 			<!-- 视频列表部分 -->
 			<view class="videoList-wrap">
-				<publicVideoList :isShowDoctorName="true"></publicVideoList>
+				<publicVideoList :isShowDoctorName="true" @onVideoClick="handleVideoClick" :videoList="videoList"></publicVideoList>
 			</view>
 		</view>
 	</view>
@@ -45,6 +39,10 @@
 
 <script>
 	import publicVideoList from '@/components/public-videoList/public-videoList.vue'
+	import {
+		reqGetSearchList,
+		reqAllDepartments
+	} from '../../api/home.js'
 	export default {
 		name: 'search',
 		components: {
@@ -52,17 +50,80 @@
 		},
 		data() {
 			return {
+				videoList: [],		// 视频列表
+				payload: {
+					pageIndex: 1,
+					pageSize: 5,
+					name: '', // 搜索关键词
+					departmentName: '' // 科室名称
+				},
 				InputBottom: 0,
 				index: -1,
-				picker: ['喵喵喵', '汪汪汪', '哼唧哼唧','喵喵喵', '汪汪汪', '哼唧哼唧','喵喵喵', '汪汪汪', '哼唧哼唧','喵喵喵', '汪汪汪', '哼唧哼唧','喵喵喵', '汪汪汪', '哼唧哼唧'],
-				sortList: ['点赞量','播放量','评论量']
+				picker: [],
+				pickerCurrentValue: "全部科室"
 			};
 		},
 		methods: {
+			// 监听视频点击事件
+			handleVideoClick(e){
+				console.log(e)
+			},
+			
+			// 获取所有二级科室数据
+			async getAllDepartments(){
+				const response = await reqAllDepartments({pageIndex: 1, pageSize: 100})
+				console.log("response: ", response)
+				if(response.success===1 && response.message==='查询成功') {
+					this.picker = response.items.map(item=>item.departmentname)
+					this.picker.unshift('全部科室')
+					console.log("picker: ", this.picker)
+				}else {
+					uni.showToast({
+						title: '科室数据获取失败,请重试...',
+						icon: 'none'
+					})
+				}
+			},
+			
+			// 监听搜索按钮点击事件
+			handleSearchClick(){
+				console.log("this.payload.name: ", this.payload.name)
+				this.payload.pageIndex = 1
+				this.videoList = []
+				this.getList()
+			},
+			
+			// 获取视频列表部分
+			async getList() {
+				if(this.payload.departmentName==='全部科室') this.payload.departmentName = ""
+				const response = await reqGetSearchList(this.payload)
+				uni.hideLoading()
+				if(response.isSuccess && response.resultCode===200) {
+					if(response.pager.totalItemCount > this.videoList.length) {
+						this.videoList = [...this.videoList, ...response.resultObject]
+						this.payload.pageIndex++
+					}else {
+						uni.showToast({
+							title: '没有更多数据了...',
+							icon: 'none'
+						})
+					}
+				}else {
+					uni.showToast({
+						title: '服务器异常,请重试...',
+						icon: 'none'
+					})
+				}
+			},
+
 			PickerChange(e) {
 				this.index = e.detail.value
+				console.log(e)
+				this.payload.departmentName = this.picker[e.detail.value]
+				this.pickerCurrentValue = this.picker[e.detail.value]
+				console.log(this.picker[e.detail.value])
 			},
-			
+
 			InputFocus(e) {
 				this.InputBottom = e.detail.height
 			},
@@ -70,15 +131,17 @@
 				this.InputBottom = 0
 			}
 		},
-		
+
 		// 页面触底的生命周期
 		onReachBottom() {
 			uni.showLoading({
 				title: '加载中...'
 			})
-			setTimeout(_=>{
-				uni.hideLoading()
-			},3000)
+			this.getList()
+		},
+		onShow() {
+			this.getList()
+			this.getAllDepartments()
 		}
 	}
 </script>
@@ -90,15 +153,17 @@
 				color: $uni-theme-color;
 				font-size: 30rpx;
 			}
-			
+
 			.category {
 				min-height: 60rpx;
 				justify-content: flex-start;
 				color: #000000;
 				padding-left: 30rpx;
+
 				view:nth-child(1) {
 					margin-right: 70rpx;
 				}
+
 				view {
 					image {
 						margin-left: 6rpx;
@@ -107,7 +172,7 @@
 				}
 			}
 		}
-		
+
 		.videoList-wrap {
 			padding: 0 20rpx;
 		}

unpackage/dist/dev/mp-weixin/common/vendor.js

@@ -8980,7 +8980,7 @@ internalMixin(Vue);
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });exports.reqGetDoctorVideoList = exports.reqGetMyLikeList = exports.reqGetMyFollowList = exports.reqBindPhone = exports.userLogin = void 0;var _ajax = __webpack_require__(/*! ./ajax.js */ 22);
+Object.defineProperty(exports, "__esModule", { value: true });exports.reqAllDepartments = exports.reqGetSearchList = exports.reqGetDoctorVideoList = exports.reqGetMyLikeList = exports.reqGetMyFollowList = exports.reqBindPhone = exports.userLogin = void 0;var _ajax = __webpack_require__(/*! ./ajax.js */ 22);
 
 
 /* 个人中心页面接口请求函数 */
@@ -9032,7 +9032,27 @@ exports.reqGetMyLikeList = reqGetMyLikeList;var reqGetDoctorVideoList = function
     data: data,
     isLoading: true });
 
-};exports.reqGetDoctorVideoList = reqGetDoctorVideoList;
+};
+
+// 搜索视频列表部分
+exports.reqGetDoctorVideoList = reqGetDoctorVideoList;var reqGetSearchList = function reqGetSearchList(data) {
+  return (0, _ajax.ajax)({
+    url: "/ymall/videoUser/SerachVideoList",
+    method: 'POST',
+    data: data,
+    isLoading: true });
+
+};
+
+// 获取所有二级科室
+exports.reqGetSearchList = reqGetSearchList;var reqAllDepartments = function reqAllDepartments(data) {
+  return (0, _ajax.ajax)({
+    url: '/ymall/department/query',
+    method: 'POST',
+    data: data,
+    isLoading: true });
+
+};exports.reqAllDepartments = reqAllDepartments;
 
 /***/ }),
 

unpackage/dist/dev/mp-weixin/components/public-videoList/public-videoList.js

@@ -201,6 +201,11 @@ var _default =
 
   },
   methods: {
+    // 监听视频点击事件
+    handleVideoClick: function handleVideoClick(e) {
+      this.$emit('onVideoClick', e);
+    },
+    // 监听删除按钮点击事件
     handleDeleteVideo: function handleDeleteVideo() {
       uni.showModal({
         title: '提示',

unpackage/dist/dev/mp-weixin/project.config.json

@@ -55,6 +55,13 @@
 					"id": -1,
 					"name": "我的喜欢",
 					"pathName": "pages/myLike/myLike",
+					"query": "",
+					"scene": null
+				},
+				{
+					"id": -1,
+					"name": "搜索页面",
+					"pathName": "pages/search/search",
 					"scene": null
 				}
 			]