WenWuGuanJia/index_fenbao/GuanLi/gengDuoFC.vue

<template>
	<view class="box">
		<u-navbar :autoBack="true" title="厦门文物" bgColor="rgba(255,255,255,0)" :placeholder="true" titleStyle="font-weight:bold;color:#000000"></u-navbar>
		<view class="fiex_top">
			<view class="top_box">
				<view @click="showqy = true" class="tit_box">
					<view class="">{{ qyVal ? qyVal : '区域' }}</view>
					<view class="">
						<image style="width: 40rpx; height: 40rpx" src="/static/img/map_more.png"></image>
					</view>
				</view>
				<view class="tit_box" @click="showlx = true">
					<view class="">{{ lxVal ? lxVal : '类型' }}</view>
					<view class="">
						<image style="width: 40rpx; height: 40rpx" src="/static/img/map_more.png"></image>
					</view>
				</view>
				<view class="tit_box" @click="showjb = true">
					<view class="">{{ jbVal ? jbVal : '级别' }}</view>
					<view class="">
						<image style="width: 40rpx; height: 40rpx" src="/static/img/map_more.png"></image>
					</view>
				</view>
			</view>
			<view class="" style="border: 1px solid #eba869; width: 670rpx; margin: auto; margin-top: 32rpx">
				<u-search
					bgColor="transparent"
					v-model="val"
					shape="square"
					:showAction="true"
					actionText="搜索"
					@custom="searchBtn"
					:actionStyle="{ color: '#985741', fontSize: '28rpx', fontWeight: 'bold', backgroundColor: '#fff9e9' }"
				></u-search>
			</view>
		</view>
		<scroll-view v-if="list.length" style="height: 1200rpx; margin-left: 6rpx" scroll-y="true" @scrolltolower="LoadMore">
			<view class="wenwu_box">
				<view @click="detailsBtn(item.id)" class="" v-for="(item, index) in list" :key="item.id">
					<view class="gc_item">
						<view class="gc_box" style="">
							<image style="width: 100%; height: 100%; border-radius: 15rpx" :src="item.thumbnail"></image>
						</view>
						<view class="tit">{{ item.title }}</view>
						<!-- <view class="bg_box">湖里区</view> -->
						<u-badge type="primary" max="99" :value="item.district" :absolute="true" :offset="[10, 5]"></u-badge>
					</view>
				</view>
			</view>
		</scroll-view>
		<view v-else><u-empty mode="data" text="暂无数据"></u-empty></view>
		<!-- 选择 -->
		<u-picker keyName="title" :show="showqy" @cancel="showqy = false" :columns="columnsQy" @close="close" :closeOnClickOverlay="true" @confirm="qyBtn"></u-picker>
		<u-picker keyName="title" :show="showlx" @cancel="showlx = false" :columns="columnsLx" @close="close" :closeOnClickOverlay="true" @confirm="lxBtn"></u-picker>
		<u-picker keyName="title" :show="showjb" @cancel="showjb = false" :columns="columnsJb" @close="close" :closeOnClickOverlay="true" @confirm="jbBtn"></u-picker>
	</view>
</template>

<script>
let that;
export default {
	data() {
		return {
			val: '',
			page: 1,
			list: [],
			isLoading: false,
			showqy: false,
			showlx: false,
			showjb: false,
			levelId: '',
			cr_typeId: '',
			regionId: '',
			qyVal: '',
			lxVal: '',
			jbVal: '',
			columnsQy: [],
			columnsLx: [],
			columnsJb: []
		};
	},

	onLoad() {
		that = this;
		this.getContentList();
		this.getCulturalRelicCategory();
	},
	methods: {
		// 文物分类列表
		getCulturalRelicCategory() {
			this.$api.getCulturalRelicCategory({ main_body_id: 1 }, function (res) {
				console.log(res, 565656);

				that.columnsQy = [res.data.region_list];
				that.columnsLx = [res.data.cr_type_list];
				that.columnsJb = [res.data.level_list];
			});
		},

		lxBtn(e) {
			console.log(e, 'eeeeeee');
			this.lxVal = e.value[0].title;
			this.showlx = false;
			this.list = [];
			this.page = 1;
			this.cr_typeId = e.value[0].id;

			this.getContentList();
		},
		qyBtn(e) {
			this.qyVal = e.value[0].title;
			this.showqy = false;
			this.list = [];
			this.page = 1;
			this.regionId = e.value[0].id;
			this.getContentList();
		},
		jbBtn(e) {
			this.jbVal = e.value[0].title;
			this.showjb = false;
			this.list = [];
			this.page = 1;
			this.levelId = e.value[0].id;
			this.getContentList();
		},

		detailsBtn(id) {
			uni.navigateTo({
				url: '/index_fenbao/GuanLi/XiangQing?id=' + id
			});
		},
		getContentList(id) {
			this.isLoading = true;
			this.$api.getContentList(
				{
					main_body_id: 1,
					model_id: 1,
					keywords: this.val,
					page: this.page,
					pageSize: '10',
					level: this.levelId,
					cr_type: this.cr_typeId,
					region: this.regionId
				},
				function (res) {
					that.isLoading = false;
					that.list = [...that.list, ...res.data];
				}
			);
		},
		searchBtn() {
			this.qyVal = '';
			this.lxVal = '';
			this.jbVal = '';
			this.levelId = '';
			this.cr_typeId = '';
			this.regionId = '';
			this.page = 1;
			this.list = [];
			this.getContentList();
		},
		LoadMore() {
			if (this.isLoading) {
				return;
			} else {
				// this.qyVal = '';
				// this.lxVal = '';
				// this.jbVal = '';

				this.page++;
				this.getContentList();
			}
		},
		close() {
			this.showqy = false;
			this.showlx = false;
			this.showjb = false;
		},
		clear() {
			this.val = '';
		}
	}
};
</script>

<style>
.box {
	width: 100%;
	padding-bottom: 50rpx;
	background-image: url('https://huli-app.wenlvti.net/app_static/WenWuGuanJia/image/xbg_2.png');
	background-size: 100% 100%;
	background-attachment: fixed;
	background-repeat: repeat-y;
	height: auto;
}

.fiex_top {
	/* margin-bottom: 20rpx; */
}
.top_box {
	display: flex;
	width: 90%;
	margin: auto;
	justify-content: space-between;
}
.tit_box {
	display: flex;
	align-items: center;
	text-align: center;
	width: 215rpx;
	height: 56rpx;
	justify-content: space-around;
	border: 2rpx solid #eba869;
}
.tit {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.wenwu_box {
	width: 92%;
	margin: auto;
	margin-top: 20rpx;
	display: flex;
	flex-flow: wrap;
	justify-content: space-between;
}
.gc_item {
	position: relative;
	width: 324rpx;
	color: #444444;
	/* font-weight: 900; */
	font-size: 32rpx;
	margin-top: 20rpx;
	font-family: 'MyGlobalFont';
}
.gc_box {
	width: 333rpx;
	height: 280rpx;
}

.bg_box {
	width: 184rpx;
	height: 62rpx;
	margin: auto;
	margin-top: 20rpx;
	line-height: 62rpx;
	color: #fef3e1;
	font-size: 28rpx;
	font-weight: 500;
	background-image: url('/static/img/tab.png');
	background-size: 100% 100%;
}
.u-search__action--active.data-v-0a306a29 {
	height: 60rpx !important;
	line-height: 60rpx !important;
}
.u-search__action--active.data-v-2d141374 {
	height: 60rpx !important;
	line-height: 60rpx !important;
}
</style>