app_tree_planting/pages/duty/dutyexplain.vue

<template>
	<view class="page">
		<view class="content">
			<view class="state-bar">
				<image src="/static/images/ic_arrow_left_black.png" mode="aspectFill" @click="closePage()"></image>
				<text>尽责形式</text>
			</view>
			<view class="title-img-box">
				<image class="img-left" src="/static/images/ic_duty_plan_left.png" mode="aspectFill"></image>
				<image class="img-center" src="../../static/images/ic_explan_title_bg.png" mode="aspectFill"></image>
				<image class="img-right" src="/static/images/ic_duty_plan_right.png" mode="aspectFill"></image>
			</view>
			<view class="box-content">
				<view class="item-content">
					<block v-for="(item,index) in list" :key="index">
						<view class="box-item" @click="openPage(item)">
							<image :src="imgUrl+item.titlePhoto" mode="scaleToFill"></image>
							<!-- <rich-text :nodes="item.description" class="txt"></rich-text> -->
						</view>
					</block>
				</view>
			</view>
		</view>
		<pageLoading v-if="showPageLoading"></pageLoading>
	</view>
</template>

<script>
	import pageLoading from '@/components/loading/pageLoading.vue';
	export default {
		components: {
			pageLoading
		},
		data() {
			return {
				list: [],
				showPageLoading: true,
				token: '',
				imgUrl: this.$api.common.imgUrl
			}
		},
		onLoad(res) {
			this.getExplain()
		},
		onShow() {
			this.token = getApp().globalData.token
		},
		methods: {
			closePage() {
				uni.navigateBack()
			},
			getExplain() {
				this.$app.request({
					url: this.$api.duty.getDutyExplain,
					method: 'GET',
					dataType: 'json',
					success: res => {
						console.log(res)
						if (res.status) {
							uni.showToast({
								icon: 'error',
								title: "系统错误"
							})
						} else {
							uni.hideLoading()
							this.list = res
						}
					},
					fail: res => {

					},
					complete: res => {
						this.showPageLoading = false
						uni.hideLoading()
					}
				});
			},
			openPage(item) {
				var jumpType = item.jumpType;
				var id = item.typeId;
				var content = item.content;
				var title = item.description
				if ('other' == jumpType) {
					//捐资捐物
					//二维码
					uni.navigateTo({
						url: '/pages/duty/giftpage1/giftpage1?desc=' + item.content
					});
					// uni.navigateTo({
					// 	url: '/pages/news/giftpage?desc=' + item.content
					// })
				} else {
					uni.navigateTo({
						url: '/pages/duty/activitytypelist?id=' + id + '&desc=' + content + '&title=' + title +
							"&type=" + jumpType
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
	}

	.page {
		display: flex;
		flex: 1;
		flex-direction: column;
		overflow: hidden;
		height: 100%;
		background-image: url('../../static/images/ic_explan_bg.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.content {
		width: 100%;
		position: relative;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.box-item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 95%;
	}

	.box-item .txt {
		margin-top: 10rpx;
		font-size: 30rpx;
		display: -webkit-box;
		text-overflow: ellipsis;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		overflow: hidden;
		color: #0c8d66;
	}

	.box-item:nth-of-type(n+5) {
		margin-top: 40rpx;
	}

	.item-content {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		align-self: flex-start;
		margin-top: 40rpx;
		width: 100%;
		overflow-y: auto;
		height: 95%;
	}

	.box-item image {
		width: 100%;
		height: 212rpx;
	}

	.box {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		position: relative;
		height: 100%;
		// height: 1920rpx;
		// width: 90%;
		// position: absolute;
		top: 300rpx;
		// left: 50%;
		// transform: translate(-50%, 0);
		// -webkit-transform: translate(-50%, 0);
		// box-shadow: 0rpx 7rpx 33rpx 16rpx rgba(188, 226, 204, 0.15);
		// border-radius: 30rpx;


	}

	.title-img {
		align-items: center;
		align-self: center;
		width: 360rpx;
		height: 100rpx;
		position: absolute;
		top: 340rpx;
		z-index: 3;
	}

	.title-img-box {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		align-self: center;
		position: absolute;
		top: 340rpx;
		z-index: 3;
		width: 100%;

		.img-left {
			width: 76rpx;
			height: 96rpx;
		}

		.img-center {
			width: 360rpx;
			height: 100rpx;
		}

		.img-right {
			width: 76rpx;
			height: 96rpx;
		}
	}

	.box-content {
		width: 95%;
		height: 65%;
		align-self: center;
		position: absolute;
		top: 360rpx;
		padding-top: 60rpx;
		background: #ffffff;
		border-radius: 20rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
	}

	.tab-bar {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		padding-top: 15rpx;

		.tab-active {
			text-align: center;
			font-size: 40rpx;
			font-weight: bold;
			color: #00821E;
		}

		.tab-default {
			text-align: center;
			font-size: 40rpx;
			font-weight: 200;
			color: #00821E;
		}
	}

	.title-box {
		width: 100%;
		height: 100%;
		background-image: url('../../static/images/ic_explan_bg.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.state-bar {
		position: fixed;
		top: 0%;
		left: 0%;
		width: 100%;
		margin: 45rpx 0rpx;
		height: 100rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		color: black;

		image {
			width: 50rpx;
			height: 50rpx;
			margin-left: 20rpx;
		}

		text {
			font-size: 40rpx;
			align-self: center;
			text-align: center;
			width: 100%;
			margin-left: -70rpx;
		}
	}


	.container-box {
		display: flex;
		flex-direction: column;
		padding: 20rpx;
		margin-top: 20rpx;

		.container-item {
			display: flex;
			flex-direction: column;

			.container-title {
				display: flex;
				flex-direction: row;
				padding: 20rpx 10rpx;
				background: #EDFCED;

				text {
					background: #00821E;
					border-radius: 50%;
					width: 45rpx;
					min-width: 45rpx;
					height: 45rpx;
					min-height: 45rpx;
					text-align: center;
					color: white;
					margin-right: 20rpx;
				}
			}

			.container-content {
				padding: 20rpx;

			}
		}
	}
</style>