WenWuGuanJia/index_fenbao/XuanJiangYuan/XuanJiangYuan.vue

<template>
	<view class="box">
		<u-navbar title="文物宣讲员列表" autoBack :placeholder="true" bgColor="#fee1b9"></u-navbar>
		<view class="ban">
			<view style="margin-top: 20rpx">
				<u-search placeholder="搜索讲员" shape="square" :showAction="false" v-model="keyword"></u-search>
			</view>
			<!-- tab -->
			<!-- <view class="tab_box">
				<view @click="TabBtn(index)" class="tab_item" v-for="(item, index) in tabList" :key="index" :class="{ tab_item_active: index == tabIndex }">
					{{ item.name }}
				</view>
			</view> -->
			<!--  -->
			<view class="xjy_box" @click="$common.navigateTo('/index_fenbao/XuanJiangYuan/xjy_XiangQing?id=' + item.id)" v-for="item in xuangjiangyuanList" :key="item">
				<img :src="item.image" class="img" />
				<view style="margin-left: 60rpx">
					<view class="xjy_name">{{ item.name }}</view>
					<view class="xjy_addres">{{ item.cr_title }}</view>
					<view class="ckxq">查看详情</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
let that;
export default {
	onLoad(option) {
		that = this;
		that.getXuanjiangList();
	},
	data() {
		return {
			tabIndex: 0,
			keywords: '',
			tabList: [
				{
					name: '区域'
				},
				{
					name: '等级'
				},
				{
					name: '评分'
				}
			],
			xuangjiangyuanList: []
		};
	},
	methods: {
		TabBtn(i) {
			this.tabIndex = i;
		},
		getXuanjiangList() {
			this.$api.getXuanjiangList(
				{ 
					page: 1, 
					pageSize: 20,
					keywords: that.keywords
				}, 
				data => {
					if (data.code == 0) {
						that.$common.errorToShow(data.msg);
						return;
					} else {
						that.xuangjiangyuanList = data.data;
						// console.log(that.xuangjiangyuanList, '文物跑活动宣讲员');
					}
				}
			);
		},
		xqBtn() {
			uni.navigateTo({
				url: '/index_fenbao/XuanJiangYuan/xjy_XiangQing'
			});
		}
	}
};
</script>

<style>
.box {
	height: auto;
	width: 100%;
	padding-bottom: 50rpx;
	background-image: url('https://huli-app.wenlvti.net/app_static/minnanhun/image/gj_bg.png');
	background-repeat: repeat-y;
	background-size: 100%;
}
.ban {
	width: 92%;
	margin: auto;
}
.tab_box {
	display: flex;
	align-items: center;
	margin-top: 20rpx;
}
.tab_item {
	width: 90rpx;
	height: 60rpx;
	line-height: 60rpx;
	text-align: center;
	color: black;
	border-radius: 10rpx;
	background-color: #ffffff;
}
.tab_item_active {
	color: #794923 !important;
	background-color: #faefe6 !important;
}
.tab_item:nth-child(2) {
	margin-left: 10rpx;
}
.tab_item:nth-child(3) {
	margin-left: 10rpx;
}
.xjy_box {
	display: flex;
	align-items: center;
	width: 100%;
	height: 220rpx;
	border-radius: 10rpx;
	padding: 20rpx 20rpx 20rpx 50rpx;
	margin-top: 20rpx;
	background-color: #fff0e3;
}
.img {
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
}
.xjy_name {
	color: black;
	font-size: 30rpx;
}
.xjy_addres {
	font-size: 26rpx;
	color: #6b5e49;
	/* margin-top: 10rpx; */
}
.ckxq {
	width: 140rpx;
	height: 60rpx;
	line-height: 60rpx;
	text-align: center;
	color: #ffffff;
	margin-top: 20rpx;
	border-radius: 10rpx;
	background-color: #e55d45;
}
</style>