frontend-uniapp / Civil-Affairs-Bureau-WeChar

<template>
	<view class="page">
		<!-- <pyh-nv ref="nv" :config="nvConfig"></pyh-nv> -->
		<view class="listBox" >
			<view class="content"
				style="padding: 20rpx 40rpx;display: flex;flex-direction: column;align-items: center;background-color: #fff;">
				<view class="" style="margin-bottom: 30rpx;margin-top: 20rpx;font-weight: 600;font-size: 38rpx;">
					{{info.activityName}}
				</view>
				<view class=""
					style="font-size: 20rpx;text-align: left;width: 100%;">
					<view style="margin-bottom: 10rpx;">活动人数：{{info.activityNumber}}</view>
					<view style="margin-bottom: 10rpx;">活动开始日期：{{info.eventStartDate}}</view>
					<view style="margin-bottom: 10rpx;">活动结束日期：{{info.eventEndDate}}</view>
				</view>
				<swiper v-if="info.activeImage" style="height: 500rpx;width: 100%;" circular :indicator-dots="true" :autoplay="true">
					<swiper-item  v-for="(item,index) in info.activeImage">
						<view style="display: block;">
							<image :src="BASE_URL+item" ></image>
						</view>
					</swiper-item>
				
				</swiper>
				<!-- <image v-if="info.coverImage" :src="BASE_URL+info.coverImage" style="width: 100%;" mode="widthFix"></image> -->
				<view class="" style="margin-top: 20rpx;margin-bottom: 20rpx;width: 100%;">
					<view style="width: 100%;word-break:break-all;word-wrap:break-word;" v-html="info.eventContent">
					</view>
					<!-- <u-parse :content="info.content"></u-parse> -->
				</view>


			</view>
		</view>

	</view>
</template>

<script>
	import BASE_URL from "@/common/config.js"
	export default {
		data() {
			return {
				BASE_URL,
				OrderType: 0,
				info: {},
				nvConfig: {
					title: "详情",
					bgColor: "#ffffff",
					color: "#000000",
					fixedAssist: {
						hide: true,
					},
				},
			};
		},
		onPageScroll(e) {
			this.$refs.nv.pageScroll(e)
		},
		computed: {
			pageTop() {
				return parseInt(88 * uni.getSystemInfoSync().windowWidth / 750) + uni.getSystemInfoSync().statusBarHeight
			}
		},
		onLoad(params) {
			console.log(params.id)
			this.gain(params.id)
			// this.info = JSON.parse(params.cent)
			// this.nvConfig.title = this.info.title
			// console.log(this.info)
			// this.OrderType = params.type;
		},
		methods: {
			gain(e) {
				this.API.getactivityInfoSheetdetail(e).then(res => {
					console.log(res);
					this.info = res.data
					if(this.info.activeImage) {
						this.info.activeImage = this.info.activeImage.split(',')
					}
					
					// this.nvConfig.title = this.info.title
				})
			},
			downfile(e) {

				let that = this
				console.log(that.BASE_URL + e)
				let c1 = e.split('.')
				console.log(c1)
				uni.downloadFile({
					url: that.BASE_URL + e,
					header: {
						'content-type': "application/json",
					},
					// filePath: wx.env.USER_DATA_PATH + e,
					success: (res) => {
						console.log(res)
						if (res.statusCode === 200) {
							const savedFilePath = res.tempFilePath
							uni.openDocument({
								filePath: savedFilePath,
								fileType: c1[1], //注意：文件为pdf，类型为pdf
								showMenu: true,
								success: (response) => {
									console.log(response)
								},
								fail: (err) => {
									console.log(err)
									wx.hideLoading()
								}
							})
						} else {
							wx.hideLoading()
						}
					},
					fail: (err) => {
						console.log(err)
						wx.hideLoading()

					},
					complete: () => {
						wx.hideLoading()
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.skip-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100rpx;
		margin-top: 70rpx;
		position: fixed;
		bottom: 30rpx;

		.cart-add {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 38%;

			image {
				width: 253rpx;
				height: 80rpx;
				box-shadow: 5rpx 10rpx 20rpx 0 #efefef;
				border-radius: 100rpx;
			}

			text {
				font-size: 30rpx;
				font-weight: bold;
				color: #262626;
				position: absolute;
				z-index: 1;
			}
		}

		.buy-at {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 58%;

			image {
				width: 415rpx;
				height: 80rpx;
				box-shadow: 5rpx 10rpx 20rpx 0 #b7c8ff;
				border-radius: 100rpx;
			}

			text {
				font-size: 30rpx;
				font-weight: bold;
				color: #FFFFFF;
				position: absolute;
				z-index: 1;
			}
		}
	}

	.listBox {
		position: relative;
		z-index: 1;
	}

	.content {
		width: 100%;
	}

	/* 订单列表 */
	.order-list {
		width: 100%;
		padding-bottom: 10rpx;

		.list {
			padding: 30rpx;
			background-color: #FFFFFF;
			border-radius: 20rpx;
			margin: 25rpx;

			.title-status {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				height: 100rpx;

				.title {
					display: flex;
					align-items: center;

					text {
						font-size: 26rpx;
						color: #A7A7A7;
					}

					image {
						width: 18rpx;
						height: 18rpx;
						margin-left: 10rpx;
					}
				}

				.status {
					display: flex;
					align-items: center;

					text {
						font-size: 26rpx;
						color: #EE8952;
					}
				}
			}

			.goods-list {
				width: 100%;

				.goods {
					display: flex;
					justify-content: space-between;
					width: 100%;
					position: relative;

					.goods-name {
						width: 65%;
						font-size: 26rpx;
						color: #A7A7A7;

						.goods-name-title {
							font-size: 30rpx;
							color: #3d3d3d;
							font-weight: bold;
							margin-bottom: 20rpx;
						}
					}

					.btn {
						width: 200rpx;
						height: 58rpx;
						position: absolute;
						bottom: 0;
						right: 0;

						text {
							font-size: 28rpx;
							color: #fff;
							position: absolute;
							width: 200rpx;
							line-height: 58rpx;
							text-align: center;
							z-index: 1;
						}

						image {
							width: 200rpx;
							height: 58rpx;
							position: absolute;
							z-index: 0;
							box-shadow: 5rpx 10rpx 20rpx 0 #b7c8ff;
							border-radius: 100rpx;
						}
					}
				}
			}
		}
	}
</style>