besiweb/pages/temple/search.vue

<template>
	<view class="uni-main">
		<view class="sticky-nav">
			<view class="nav-box">
				<text class="header-text">寺院</text>
				<text class="right-btn">搜索</text>
			</view>
		</view>
		<view class="uni-list">
			<view class="uni-list-item" v-for="(item,index) in activityList" :key="index">
				<view class="uni-list-item_box">
					<view>
						<image :src="item.thumb" class="thumb"></image>
					</view>
					<view class="uni-list_text">
						<view class="text_title">{{item.title}}</view>
						<view class="text_desc">
							<text class="text_count">{{item.join_count}}人参与</text><text class="text_time">{{item.publish_at}}</text>
						</view>
					</view>
					<view class="uni-list_btn" v-if="item.type ==1"><navigator :url="'./activity?id='+item.id">代订</navigator></view>
					<view class="uni-list_btn" v-if="item.type ==2"><navigator :url="'./activity?id='+item.id">助印</navigator></view>
					<view class="uni-list_btn" v-if="item.type ==3"><navigator :url="'./activity?id='+item.id">供奉</navigator></view>
				</view>
			</view>
		</view>
		
		<view class="uni-list-media">
			<view class="uni-list-media-header">
				<view class="list-media-header_text">
					<text class="text_title">优选寺院</text>
					<view class="text_operation"><text>推荐</text><img src="../../static/index/arrow_down.png" width="18"></view>
				</view>
			</view>
			<view class="uni-list-media-item" v-for="(item,index) in recommList" :key="index">
				<view class="uni-list-media-item_box">
					<navigator :url="'./detail?id='+item.id">
					<view>
						<image :src="item.thumb" class="thumb"></image>
					</view>
					<view class="uni-list_text">
						<text class="text_title">{{item.title}}</text>
						<text class="text_count"><img src="../../static/index/popular_value.png" width="9">{{item.count}}</text>
					</view>
					</navigator>
				</view>
			</view>
		</view>

		<u-mask :show="showMask" @click="showMask = false">
			<view class="wrap">
				<div class="shiyuan_operate_wrap shiyuan_operate_wrap_top">
					<view v-for="(item,index) in operateList" :key="index" class="operate_list">
						<view class="operate_item" @tap.stop="gongdengDetail(item)">
							<image :src="item.icon" class="oprate_icon" width="20"></image>
							<text class="oprate_content">{{item.content}}</text>
						</view>
					</view>
				</div>
			</view>
		</u-mask>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activityList: [{
						id: 1,
						thumb: '../../static/index/shiyuan/sjmn.jpg',
						title: "深圳线下祈福交流活动",
						description: "般若智慧、慈悲宽容",
						join_count: "5",
						publish_at: "5月20-6月10日",
						price: 0,
						type: 1,
					},
					{
						id: 2,
						thumb: '../../static/index/gongdeng/wen_shu.jpg',
						title: "弘扬佛法，助印经书",
						description: "粉丝地方",
						join_count: "24",
						publish_at: "5月24-6月16日",
						price: 50.00,
						type: 1,
					},
					{
						id: 3,
						thumb: '../../static/index/gongdeng/guanyin.jpg',
						title: "观世音菩萨",
						description: "救苦救难",
						join_count: "10",
						publish_at: "5月21-6月20日",
						price: 100.00,
						type: 1,
					},
					{
						id: 4,
						thumb: '../../static/index/gongdeng/caishenye.jpg',
						title: "财神爷",
						description: "财运亨通",
						join_count: "300",
						publish_at: "5月20-6月18日",
						price: 0.00,
						type: 3,
					},
					{
						id: 5,
						thumb: '../../static/index/gongdeng/qianshouguanyin.jpg',
						title: "千手观音",
						description: "守护生肖：鼠",
						join_count: "1200",
						publish_at: "5月10-6月11日",
						price: 80.00,
						type: 2,
					}
				],
				recommList: [{
						id: 1,
						thumb: '../../static/index/shiyuan/lys.jpg',
						title: "杭州灵隐寺",
						count: 1522,
						business_time: "5月20-6月16日",
						type: 1,
					},
					{
						id: 2,
						thumb: '../../static/index/shiyuan/cds.jpg',
						title: "承德普宁寺",
						description: "简介",
						count: "1.06万",
						publish_at: "5月20-6月23日",
						price: 120.00,
						type: 2,
					},
					{
						id: 3,
						thumb: '../../static/index/shiyuan/dangyang.jpg',
						title: "当阳浴玉泉寺",
						description: "救苦救难",
						count: "1.06万",
						business_time: "5月20-6月16日",
						type: 2,
					},
					{
						id: 4,
						thumb: '../../static/index/shiyuan/kys.jpg',
						title: "泉州开元寺",
						description: "财运亨通",
						count: "6354",
						business_time: "5月20-6月16日",
						type: 2,
					},
					{
						id: 5,
						thumb: '../../static/index/shiyuan/bms.jpg',
						title: "洛阳白马寺",
						description: "简介",
						count: "1621",
						business_time: "5月20-6月16日",
						type: 2,
					},
					{
						id: 6,
						thumb: '../../static/index/shiyuan/sls.jpg',
						title: "福清南少林寺",
						description: "简介",
						count: "1621",
						business_time: "5月20-6月16日",
						type: 2,
					},
					{
						id: 7,
						thumb: '../../static/index/shiyuan/ygs.jpg',
						title: "风岩古寺",
						description: "简介",
						count: "1621",
						business_time: "5月20-6月16日",
						type: 2,
					},
					{
						id: 8,
						thumb: '../../static/index/shiyuan/hfs.jpg',
						title: "深圳弘法寺",
						description: "简介",
						count: "1621",
						business_time: "5月20-6月16日",
						type: 2,
					}
				],
				showMask: false, //是否显示遮罩层
				operateList: [{
					icon: '../../static/index/menu_history_icon.png',
					content: '我的活动',
					pagesPath: '/pages/my/activity',
				}, {
					icon: '../../static/index/search_bold_icon.png',
					content: '搜索寺院',
				}]
			}
		},
		methods: {
			backHome() {
				uni.navigateBack({
					delta: 1
				});
			},
			showGongdengMask() {
				this.showMask = true;
			},
			gongdengDetail(item) {
				switch (item.content) {
					case '供灯说明':
						uni.navigateTo({
							url: '../gongdeng/gongdengIntroduction'
						});
						break;
					case '我的供灯':
						uni.navigateTo({
							url: '../gongdeng/myGongdeng'
						});
						break;
					case '我的灯劵':
						uni.navigateTo({
							url: '../gongdeng/myTicket'
						});
						break;
				}
			}
		}
	}
</script>
<style>
	page {
		background-color: rgb(247, 246, 242);
	}
</style>
<style lang="less" scoped>
	.uni-main {
		width: 100%;
		height: 100%;
		background-color: #f6f7f5;
		font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	}

	.sticky-nav {
		position: sticky;
		width: 100%;
		top: 0;
		z-index: 1;
	}

	.nav-box {
		width: 100%;
		padding-top: 90rpx;
		display: flex;
		align-items: center;
		background: linear-gradient(rgb(255, 152, 101), rgb(255, 122, 85));
		height: 135rpx;
		padding-bottom: 50rpx;

		.header-text {
			font-size: 45rpx;
			color: #333;
			font-weight: bold;
			width: 100%;
			text-align: center;
			margin-left: 20rpx;
		}

		.header_operate {
			width: 48rpx;
			height: 46rpx;
			float: right;
			margin-right: 20rpx;
		}
	}

	.uni-list {
		margin: 20rpx 20rpx 15rpx 20rpx;
	}

	.uni-list-item {
		padding: 20rpx 30rpx;
		margin-bottom: 12rpx;
		background-color: #FFFFFF;
		border-radius: 8rpx;
		position: relative;
	}

	.uni-list-item_box .thumb {
		width: 100%;
		height: 200rpx;
		border-radius: 8rpx;
	}

	.uni-list_text .text_title {
		font-size: 32rpx;
		font-weight: bold;
		padding: 4rpx 0rpx;
	}

	.uni-list_text .text_count {
		margin-right: 20rpx;
	}

	.uni-list_text .text_time {
		color: #999;
	}

	.uni-list .uni-list_btn {
		text-align: center;
		min-width: 120rpx;
		position: absolute;
		right: 40rpx;
		bottom: 40rpx;
		background-color: #ccac56;
		color: #fff;
		border-radius: 30rpx;
		padding: 8rpx 20rpx;
		display: inline-block;
	}
	
	.uni-list-media {
		background-color: #fff;
		margin: 0rpx 20rpx 4rpx;
		border-radius: 8rpx;
	}
	.uni-list-media-header {
		padding: 20rpx 20rpx 24rpx;
	}
	
	.uni-list-media-header .text_title {
		font-size: 36rpx;
		font-weight: bold;
	}
	
	.uni-list-media-header .text_operation {
		display: inline-block;
		float: right;
		color: #999;
		font-size: 24rpx;
		margin-top: 4rpx;
	}
	.uni-list-media-header .text_operation img {
		vertical-align: middle;
	}
	
	.uni-list-media-item {
		width: calc(50% - 16rpx);
		display: inline-block;
		margin: 0rpx 8rpx;
		margin-bottom: 20rpx;
	}
	.uni-list-media-item_box {
		width: 100%;
		height: 100%;
	}
	
	.uni-list-media-item .thumb {
		width: 100%;
		height: 200rpx;
	}
	.uni-list-media-item .text_title {
		font-weight: normal;
		padding: 8rpx 0rpx;
	}
	
	.uni-list-media-item .text_count {
		float: right;
		margin-right: 6rpx;
		color: #cc540e;
		font-size: 24rpx;
		line-height: 40rpx;
	}
	.uni-list-media-item .text_count img {
		margin-right: 6rpx;
	}
	
	.wrap{
		position: fixed;
		top:140rpx;
		right:0;
		.shiyuan_operate_wrap {
			width: 300rpx;
			// height: 430rpx;
			background-color: #fff;
			border-radius: 10rpx;
			position: relative;
			.operate_list {
				margin: 0 5rpx 0 25rpx;
				border-bottom: 1rpx solid rgb(165, 165, 165);
				.operate_item{
					padding: 27rpx 5rpx 27rpx 25rpx;
					display: flex;
					align-items: center;
				}
				.oprate_icon {
					width: 50rpx;
					height: 50rpx;
					padding-right: 15rpx;
				}
				.oprate_content{
					font-size: 35rpx;
				}
			}
			.operate_list:last-of-type{
				border-bottom: none;
			}
		}
		.shiyuan_operate_wrap_top::before {
			content: '';
			position: absolute;
			width: 0;
			height: 0;
			left: 220rpx;
			top: -52rpx;
			border: 25rpx solid;
			border-color: transparent transparent rgb(255, 255, 255) transparent;
			/*上 右 下 左 */
		}
	}
</style>