hwnc/pagesB/pages/activitydetails/activitydetails.vue

<template>
	<view :class="[AppTheme]" class="all_box">
		<image class="live_thumbnails" lazy-load="true" mode="scaleToFill" :src="activitydetails.activity_img"></image>
		<view class="basic_information">
			<view class="information_line">
				<view class="information_line_p1">
					<text class="information_line_p1_ti1">{{ activitydetails.activity_title || '未知标题' }}</text>
					<view class="activity_typeid bg-primary">{{ activitydetails.cate_name || '未知类别' }}</view>
				</view>
				<u-icon name="share" @click="opensharebox" color="#000" size="25"></u-icon>
			</view>
			<view class="browse_information">
				<view class="browse_information_item">浏览人数 {{ activitydetails.page_view || 0 }}</view>
				<view class="browse_information_item">收藏人数 {{ activitydetails.collect_num || 0 }}</view>
			</view>
			<view class="information_line">
				<view class="address_p1">
					<u-icon name="map-fill" labelSize="15" :color="primary" labelPos="right" label="举办地址" size="22">
					</u-icon>
				</view>
				<view class="address_p2" @click="casemap">
					<u-icon :name="position?'arrow-right':''" labelSize="15" labelPos="left"
						:label="(activitydetails.activity_address || '未知位置')" size="18">
					</u-icon>
				</view>
			</view>
			<view class="information_line">
				<view class="address_p1">
					<u-icon name="clock-fill" labelSize="15" :color="primary" labelPos="right" label="活动时间" size="22">
					</u-icon>
				</view>
				<view class="address_p2">
					<text>{{ retushorttime(activitydetails.start_time || '2021-10-01') }}</text>
					<text style="font-size: 40rpx;">-</text>
					<text>{{ retushorttime(activitydetails.end_time || '2021-10-01') }}</text>
				</view>
			</view>
			<view class="information_line">
				<view class="address_p1">
					<u-icon name="coupon-fill" labelSize="15" :color="primary" labelPos="right" label="票卷价格" size="22">
					</u-icon>
				</view>
				<view class="address_p2">
					<text>{{ activitydetails.child_fares || 0 }}</text>
					<text style="font-size: 40rpx;">-</text>
					<text>{{ activitydetails.adult_fares || 0 }} / 人</text>
				</view>
			</view>
		</view>
		<view class="activity_details">
			<view class="details_title">活动详情</view>
			<view class="dotted_line_segmentation"></view>
			<u-parse :content="activitydetails.activity_content"></u-parse>
		</view>
		<admyself :opshow="true"></admyself>
		<view style="height: 100rpx;"></view>
		<!-- 底部操作菜单 -->
		<view class="page-bottom">
			<navigator url="/pages/index/index" open-type="switchTab" class="p-b-btn">
				<u-icon labelSize="12" color="#909399" label="首页" labelPos="bottom" labelColor="#909399" size="25"
					name="home"></u-icon>
			</navigator>
			<view class="p-b-btn" style="position: relative;">
				<u-icon labelSize="12" color="#909399" label="主办方" labelPos="bottom" labelColor="#909399" size="25"
					name="account" @click="callphone"></u-icon>
			</view>
			<view class="p-b-btn">
				<u-icon v-if="!ifcare" @click="setcareheart(1)" labelSize="12" color="#909399" label="收藏"
					labelPos="bottom" labelColor="#909399" size="24" name="heart-fill"></u-icon>
				<u-icon v-if="ifcare" @click="setcareheart(2)" labelSize="12" :color="primary" label="收藏"
					labelPos="bottom" :labelColor="primary" size="24" name="heart-fill"></u-icon>
			</view>

			<view class="action-btn-group"><button type="primary"
					class=" bg-linear-gradient action-btn no-border buy-now-btn" @click="gochoose">立即报名</button></view>
		</view>
		<!-- #ifdef MP-WEIXIN -->
		<nologin ref="nologin" v-on:loginback="loginback"></nologin>
		<!-- #endif -->
		<!-- 分享 -->
		<sharebox ref="sbox" v-if="sharedata" :data="sharedata"></sharebox>
	</view>
</template>
<script>
	import mallApi from '@/api/mall/index.js';
	import untiljs from '@/common/until.js';
	import homeApi from '@/api/home/index.js';
	import nologin from '@/components/nologin/nologin.vue';
	export default {
		components: {
			nologin
		},
		data() {
			return {
				primary: this.$theme.primary,
				sharedata: null,
				settingFile: getApp().globalData.siteinfo,
				//详细信息
				activitydetails: {},
				//是否收藏
				ifcare: false,
				// 坐标地址
				latitude: 34.758351,
				longitude: 113.768284,
				position: false
			};
		},
		onLoad(options) {
			let that = this;
			this.$bindid.getbindid(options, this.$store);
			let id = options.id;
			if (that.$config) {
				if (that.$config.app.position == 1) {
					that.position = true;
				}
			}
			if (id !== undefined || id !== null) {
				this.vueinit(id);
			}
		},
		onShareAppMessage(res) {
			let that = this
			let data = {
				title: that.sharedata.title,
				imageUrl: that.sharedata.imageUrl,
				path: that.sharedata.path
			};
			return data;
		},
		onShareTimeline(res) {
			let that = this
			return {
				title: that.sharedata.title,
				imageUrl: that.sharedata.imageUrl,
				path: that.sharedata.path
			}
		},
		methods: {
			loginback() {
				//登录回调
			},
			opensharebox() {
				this.$refs.sbox.opensharebox(this.sharedata);
			},
			//更改收藏
			setcareheart(settype) {
				let that = this;
				let params = {
					activity_id: that.activitydetails.id,
					status: settype
				};
				mallApi.setcareheart(params).then(res => {
					if (res.status == 1) {
						that.ifcare = !that.ifcare;
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
					} else {
						that.$api.msg(res.msg);
					}
				});
			},
			//切换地图
			casemap() {
				if (this.position) {
					// #ifdef MP-WEIXIN || APP-PLUS
					uni.openLocation({
						latitude: Number(this.latitude), //要去的纬度-地址---请注意这里的Number，如果不加Number，就会出错
						longitude: Number(this.longitude), //要去的经度-地址---请注意这里的Number，如果不加Number，就会出错
						name: '',
						address: this.activitydetails.activity_address
					});
					// #endif
				}
			},
			//拨打电话
			callphone() {
				uni.makePhoneCall({
					phoneNumber: this.activitydetails.host_mobile
				});
			},
			// 返回指定格式时间
			retushorttime(time) {
				if (time !== undefined && time !== null) {
					let date = new Date(time);
					return untiljs.formatDate(date, 'yyyy.MM.dd');
				}
			},
			//选择活动票
			gochoose() {
				let that = this;
				uni.setStorage({
					key: 'activitydetails',
					data: that.activitydetails
				});
				let tmplIdsone = that.$config.temlist;
				if (tmplIdsone) {
					that.$until.requestSubscribeMessage([tmplIdsone['orderSuccess'], tmplIdsone['orderDelivery'],
						tmplIdsone['returnReminder']
					], tmplIdsone, function() {
						if (that.$store.state.islogin()) {
							uni.navigateTo({
								url: '/pagesB/pages/chooseticket/chooseticket'
							});
						} else {
							that.$refs.nologin.open();
						}
					});
				}else{
					if (that.$store.state.islogin()) {
						uni.navigateTo({
							url: '/pagesB/pages/chooseticket/chooseticket'
						});
					} else {
						that.$refs.nologin.open();
					}
				}
			},
			vueinit(id) {
				let that = this;
				let params = {
					id: id
				};
				mallApi.getdeitbyid(params).then(res => {
					if (res.status == 1) {
						res.data.activity_content = res.data.activity_content.replace(/\<img src="/gi,
							`<img style='width:100%;display:block' src="${that.settingFile.root_rich_img}`);
						that.activitydetails = res.data;
						that.sharedata = res.data.sharedata;
						that.sharedata.title = res.data.activity_title;
						that.sharedata.path = '/pagesB/pages/activitydetails/activitydetails?pid=' + that
							.$getuid() + '&id=' + id;
						that.latitude = res.data.location[1];
						that.longitude = res.data.location[0];
						if (that.activitydetails.is_collect === 1) {
							that.ifcare = true;
						}
					} else {
						that.activitydetails = res.data;
						that.$api.msg(res.msg);
					}
				});
			}
		}
	};
</script>
<style lang="scss">
	.all_box {
		background-color: #fafafa;
		min-height: 100vh;

		.live_thumbnails {
			width: 100%;
			height: 420rpx;
			box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.08);
		}

		.basic_information {
			background-color: #fafafa;
			border-radius: 40rpx 40rpx 0 0;
			padding: 0 30rpx;
			position: relative;
			top: -35rpx;

			.information_line {
				font-size: 31rpx;
				line-height: 70rpx;
				color: #111;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.information_line_p1 {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					font-size: 34rpx;
					color: #333;

					.information_line_p1_ti1 {
						font-size: 32rpx;
						line-height: 42rpx;
						padding-top: 10rpx;
						color: #000;
					}

					.activity_typeid {
						font-size: 28rpx;
						color: #ffffff;
						height: 40rpx;
						line-height: 40rpx;
						padding: 0 10rpx;
						border-radius: 10rpx;
						margin-left: 25rpx;
					}
				}

				.wx_share {
					width: auto;
					margin: 0;
					padding: 0;
				}

				.wx_share::after {
					border: none;
				}

				.address_p1 {
					width: 170rpx;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					flex-wrap: nowrap;
					font-size: 28rpx;
					color: #000;
					margin-right: 20rpx;
				}

				.address_p2 {
					font-size: 26.5rpx;
					color: #111;
					display: flex;
					justify-content: flex-start;
					align-items: center;

					text {
						display: block;
					}
				}

				.cost {
					color: #56ab2f;
				}

				u-icon {
					margin-right: 15rpx;
				}
			}

			.browse_information {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				margin-bottom: 25rpx;

				.browse_information_item {
					font-size: 22rpx;
					color: #a6a6a6;
					margin-right: 25rpx;
				}
			}
		}

		.activity_details {
			background-color: #ffffff;
			border-radius: 20rpx;
			margin: 0 3% 0 3%;
			padding: 15rpx;
			box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.08);
			margin-bottom: 20rpx;
			min-height: 500rpx;

			.details_title {
				font-size: 32rpx;
				color: #000;
				font-weight: 900;
			}

			.dotted_line_segmentation {
				width: 100%;
				border-bottom: 2rpx solid #eeeeee;
				margin: 25rpx 0;
			}

			.details_contont {
				width: 100%;

				image {
					max-width: 100%;
				}
			}
		}

		/* 底部操作菜单 */
		.page-bottom {
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 95;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 100upx;
			background: rgba(255, 255, 255, 0.9);
			box-shadow: 0 0 20upx 0 rgba(0, 0, 0, 0.5);

			.p-b-btn {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				font-size: $font-sm;
				width: 96upx;
				height: 80upx;

				.yticon {
					font-size: 40upx;
					line-height: 48upx;
					color: $font-color-light;
				}

				&.active,
				&.active .yticon {
					color: $tab-color-1;
				}

				.icon-fenxiang2 {
					font-size: 42upx;
					transform: translateY(-2upx);
				}

				.icon-shoucang {
					font-size: 46upx;
				}
			}

			.action-btn-group {
				display: flex;
				height: 76upx;
				border-radius: 100px;
				overflow: hidden;
				box-shadow: 0 20upx 40upx -16upx #fa436a;
				box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
				// background: linear-gradient(to right, #ffac30);

				margin-left: 20upx;
				position: relative;

				.action-btn {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 400rpx;
					height: 100%;
					font-size: $font-base;
					padding: 0;
					border-radius: 0;
				}
			}
		}

		.padd_bottom {
			height: calc(env(safe-area-inset-bottom) + 130rpx);
			width: 100%;
		}
	}
</style>