great_distribution/pages/index/search.vue

<template>
	<view class="index-content" :style="{'--status-bar-': statusBarHeight}">
		<view class="index-content-info">
			<!-- 头部主要内容 开始 -->
			<view class="index-content-header">	
				<customNavbar 
				title="搜索" 
				bgColor="rgba(0,0,0,0)"
				:is-left="true"
				:leftStyle="{ color: '#fff' }"
				:customNavbarInfo='{}'></customNavbar>
				<u-search 
				v-model="keyValue" 
				:showAction="true" 
				bgColor="#fff" 
				actionText="搜索"
				@search="search"
				@custom="search"
				></u-search>
			</view>
			<!-- 头部主要内容 结束 -->
			
			<!-- 列表主要内容 开始 -->
			
			<view class="index-content-list">
				<customScrollList 
				ref="customScrollList" 
				@load="load"
				@paging="paging"
				@refresh="refresh"
				 >
				 <view class="index-content-list-info" v-if="retailIndex.length>0">
					 <text class="index-content-list-class">剧目</text>
					 <view 
					 class="index-content-list-item"
					 v-for="(item,index) in retailIndex" 
					 :key="index">
						 
						 <view class="index-content-list-content">
							<image 
							class="index-content-list-image"
							:src="item.showImg" mode="scaleToFill"></image>
							<view class="index-content-list-tool">
								<text class="index-content-list-title">{{ item.name }}</text>
								<text 
								class="index-content-list-but"
								@click="navigateToFun('/pages/publicSharingDetails/index',item)"
								>查看</text>
							</view>
						 </view>
					 </view>
				 </view>
				</customScrollList>
			</view>
			<!-- 列表主要内容 结束 -->
		</view>
	</view>
</template>

<script>
	import {
		navigateTo
	} from "@/utils/util.js"
	export default {
		data() {
			return {
				title: '全民分享',
				loading: false,
				statusBarHeight: 0, // 状态栏安全距离
				retailIndex: [], // 剧目列表
				keyValue: ''
			}
		},
		onLoad() {
			
		},
		onShow() {
			this.statusBarHeight = getApp().globalData.statusBarHeight
			//this.load()
		},
		methods: {
			/** 搜索 */
			search(){
				if(!this.keyValue) {
					uni.showToast({
						title: "请输入关键字",
						icon: 'none'
					})
					return
				}
				this.$refs.customScrollList.refresh()
			},
			async load(paging){
				if(!this.keyValue) {
					this.$refs.customScrollList.loadSuccess({
						list: [],
						total: 100
					})
					return
				}
				console.log("上拉  加载数据")
				try{
					let res = await this.$u.api.retailIndex({
						"page": paging.page,
						"pages": paging.size,
						"name": this.keyValue
					})
					if(res && res.code ===200) {
						this.retailIndex = this.retailIndex.concat(res.data.performList)
						// this.retailIndex = null
						this.$refs.customScrollList.loadSuccess({
							list: this.retailIndex,
							total: this.retailIndex.length
						})
					} else {
						this.$refs.customScrollList.loadSuccess({
							list: [],
							total: 0
						})
					}
				}catch(e){
					//TODO handle the exception
					console.error("e===",e)
					this.$refs.customScrollList.loadSuccess({
						list: [],
						total: 0
					})
				}
			},
			paging(){
				console.log("下拉  加载数据")
			},
			/**
			 * 下拉触底
			 */
			async refresh(paging){
				console.log("上拉  加载数据",this.retailIndex)
				//this.$refs.customScrollList.showEmpty = true
				try{
					//this.$refs.customScrollList.showPullUp = true
					let res = await this.$u.api.retailIndex({
						pageNum: paging.page,
						pageSize: paging.size,
						name: this.keyValue
					})
					if(res && res.code ===200) {
						if(res.data.performList){
							this.retailIndex = [].concat(res.data.performList)
						}else {
							this.retailIndex = []
						}
						
						this.$refs.customScrollList.refreshSuccess({
							list: this.retailIndex,
							total:this.retailIndex.length
						})
					} else {
						this.$refs.customScrollList.refreshSuccess({
							list: [],
							total: 0
						})
					}
				}catch(e){
					//TODO handle the exception
					console.error("e===",e)
					this.$refs.customScrollList.refreshSuccess({
						list: [],
						total: 0
					})
				}
			},
			/**
			 * @author ygh
			 * @data 2023-12-20
			 */
			navigateToFun(url,data) {
				navigateTo(url,{performId:data.id})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.index-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		
		--header-h: 170rpx;
		// background-color: 
		.index-content-info {
			width: 100%;
			box-sizing: border-box;
		}
	}
	/** 头部主要内容 开始 */
	.index-content-header {
		width: 100%;
		height: var(--header-h);
		box-sizing: border-box;
		background-color: var(--gd-bgm-color);
		::v-deep .u-search {
			padding: 0 30rpx !important;
		}
		::v-deep .u-search__action {
			color: #fff !important;
		}
	}
	/** 头部主要内容 结束  **/
	
	
	/** 列表主要内容 开始 */
	.index-content-list {
		width: 100%;
		height: calc( 100% - var(--header-h) - var(--status-bar-h) );
	}
	
	.index-content-list-info {
		width: 100%;
		box-sizing: border-box;
		padding: 32rpx 32rpx 20rpx;
		.index-content-list-class {
			font-size: 32rpx;
			font-family: SourceHanSansCN, SourceHanSansCN;
			font-weight: bold;
			color: #2D2D2D;
		}
		.index-content-list-item {
			width: 100%;
			box-sizing: border-box;
			background: #FFFFFF;
			box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(200,200,200,0.5);
			border-radius: 24rpx;
			overflow: hidden;
			margin-top: 40rpx;
			.index-content-list-content {
				width: 100%;
				box-sizing: border-box;
				.index-content-list-image {
					width: 100%;
					height: 242rpx;
				}
				.index-content-list-tool {
					display: flex;
					width: 100%;
					justify-content: space-between;
					align-items: center;
					padding:42rpx 28rpx 46rpx;
					box-sizing: border-box;
					.index-content-list-title {
						font-size: 28rpx;
						font-family: SourceHanSansCN, SourceHanSansCN;
						font-weight: bold;
						color: #363636;
					}
					.index-content-list-but {
						width: 160rpx;
						height: 51rpx;
						background: #ED0000;
						border-radius: 24rpx;
						font-size: 20rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}
			}
		}
	}
	/** 列表主要内容 结束  **/
</style>