besiweb/pages/temple/index.vue

<template>
	<view class="uni-main">
		<view class="sticky-nav">
			<view class="nav-box">
				<text class="header-text">寺院</text>
				<image src="../../static/index/more_black_icon.png" class="header_operate" @click="showGongdengMask">
				</image>
			</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">
							<navigator :url="item.pages">
								<image :src="item.icon" class="oprate_icon" width="20"></image>
								<text class="oprate_content">{{item.content}}</text>
							</navigator>
						</view>
					</view>
				</div>
			</view>
		</u-mask>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activityList: [],
				recommList: [],
				showMask: false, //是否显示遮罩层
				operateList: [{
					icon: '../../static/index/menu_history_icon.png',
					content: '我的活动',
					pages: '/pages/my/activity',
				}, {
					icon: '../../static/index/search_bold_icon.png',
					content: '搜索寺院',
					pages: '/pages/temple/search',
				}]
			}
		},
		onLoad(option) {
			this.getActivityList();
			this.getSiyuanList(option.keyword);
		},
		methods: {
			backHome() {
				location.href = "/pages/temple/index"
			},
			showGongdengMask() {
				this.showMask = true;
			},
			// 活动列表
			getActivityList() {
				let _uni = this
				uni.showLoading()
				this.$request.api('/api/activity/list', {}).then(res => {
					uni.hideLoading()
					if (res.success == true) {
						_uni.activityList = res.data
					}
				}).catch(err => {
					uni.showToast({
						title: typeof(err.msg) != 'undefined' ? err.msg : '服务器错误',
						icon: 'none'
					})
				})
			},
			// 寺院列表
			getSiyuanList(keyword){
				let _uni = this
				let params = {is_recommand: 1};
				if(typeof(keyword) != 'undefined' && keyword){
					params = {keyword: keyword}
				}
				this.$request.api('/api/siyuan/list', params).then(res => {
					if (res.success == true) {
						_uni.recommList = res.data
					}
				}).catch(err => {
					uni.showToast({
						title: typeof(err.msg) != 'undefined' ? err.msg : '服务器错误',
						icon: 'none'
					})
				})
			}
		}
	}
</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>