kly_uniapp/pages/activity/detail.vue

<!-- 活动详情 -->

<template>
	<view class="loading_text" v-if="loading">加载中...</view>
	<view v-else>
		<swiper indicator-color='#b2b2b2' indicator-active-color="#f5f5f5 " indicator-dots="true" circular
			class="swiper_banner" autoplay>
			<swiper-item :key="index" v-for="(item, index) in (data.detail_photos||data.profile_photos)">
				<image style="width: 100%;height: 100%;" :src="item" class="banner"></image>
			</swiper-item>
		</swiper>
		<view style="position: relative;">
			<view style="position: absolute;top: 20upx;right: 0;">
				<button :data-key="1" open-type="share" class="share_style">
					<image style="width: 42upx;height: 36upx;" src="/static/share_orange.png"></image>
					<view style="color: #ff663d;margin-left: 16upx;width: 80upx;">分享</view>
				</button>
			</view>
			<view style="padding:70upx 0 30upx;" class="main_width">
				<view class="page_title">{{data.title}}</view>
				<view style="margin-top: 0upx;" class="page_title_price">{{data.price}}元{{sys_role==1?'起':''}}</view>
				<view v-if="sys_role==0" class="box_line main_text_view people">
					<view>
						<image class="mini_icon" src="../../static/people.png"></image>
						<text class="mini_text">{{data.total}}人</text>
					</view>
					<image style="margin-left: 40upx;width: 2upx;height: 24upx;margin-top: 4upx;"
						src="../../static/line.png"></image>
					<view style="margin-left: 40upx;">
						<image style="height: 28upx;" class="mini_icon" src="../../static/pos_grey.png"></image>
						<text class="mini_text">距离我约{{(Number(data.distance)/1000).toFixed(1)}}km</text>
					</view>
				</view>
				<view style="margin-top: 15upx;" class="page_title2">{{sys_role==0?'活动':'服务'}}介绍</view>
				<view v-if="sys_role==0">
					<rich-text :nodes="data.biz_desc"></rich-text>
				</view>
				<image style="width: 100%;margin-top: 10upx;" v-if="data.profile_photo" mode="widthFix" :src="data.profile_photo"></image>
				<view v-else class="main_text">{{data.content}}</view>
			</view>
		</view>
		<view class="line_grey"></view>
		<view v-if="sys_role==0" style="padding:10upx 0 40upx;" class="main_width">
			<view class="page_title2">活动时间</view>
			<view style="margin-top: 0upx;" class="box_line main_text_view">
				<view>
					<image class="mini_icon" src="../../static/clock_grey.png"></image>
					<text class="mini_text">{{data.begin_datetime}}</text>~<text style="margin-left: 0upx;"
						class="mini_text">{{data.finish_datetime}}</text>
				</view>
			</view>
		</view>
		<view class="line_grey"></view>
		<view style="padding: 10upx 0 20upx;" class="main_width">
			<view class="page_title2">机构信息</view>
			<view style="margin-top: 20upx;display: flex;flex-direction: row;justify-content: space-between;">
				<view class="main_text">联系人：{{data.linker_name}}</view>
			</view>
			<view v-if="sys_role==1" style="margin-top: 10upx;" class="main_text">地址：{{data.company_addr}}</view>
			<view style="margin-top: 10upx;" class="main_text">{{data.company_name}}</view>
		</view>
		<view class="line_grey"></view>
		<view v-if="sys_role==0" style="padding: 10upx 0 0upx;" class="main_width">
			<view class="page_title2">商家地址</view>
			<view style="" class="main_text">{{data.activity_addr1}}</view>
		</view>
		<view v-if="sys_role==0&&!loading" style="margin-top: 10upx;">
			<mapBox :dataSource="positionData"></mapBox>
		</view>
		<view style="padding: 20upx 0 50upx" class="main_width">
			<view class="page_title2">备注</view>
			<view class="main_text">
				<rich-text :nodes="data.biz_remark||data.remark"></rich-text>
			</view>
			<view v-if="show_code==1||type==1" style="width: 50%;margin-left: 25%;margin-top: 20upx;">
				<image @click="save_pic" style="width: 100%;" mode="widthFix" :src="data.group_qrurl"></image>
				<view style="text-align: center;color: #666666;margin-top: 15upx;">请加群了解具体事项</view>
			</view>
		</view>

		<view style="height: 120upx;"></view>
		<view v-if="sys_role==0" class="bot_fixed">
			<block v-if="IS_TOURIST==1">
				<view @click="open_sign_modal()" class="bot_fixed_con"
					:style="'width: 100%;background-color: '+(type==0?'#81d8d0':'#a1d37a')+';'">
					<image style="width: 38upx;height: 42upx;"
						:src="'../../static/single.png'"></image>
					<view class="text">{{type==0?'报名':'已报名'}}</view>
				</view>
			</block>
			<block v-else>
				<view @click="open_sign_modal()" class="bot_fixed_con"
					:style="'width: 50%;background-color: '+(type==0?'#81d8d0':'#a1d37a')+';'">
					<image style="width: 38upx;height: 42upx;"
						:src="'../../static/'+(type==0? 'single':'has_singed')+'.png'"></image>
					<view class="text">{{type==0?'报名':'已报名'}}</view>
				</view>
				<view @click="toChat" class="bot_fixed_con" style="width: 25%;background-color: #00ab92;">
					<image style="width: 42upx;height: 44upx;" src="../../static/msg.png"></image>
				</view>
				<view @click="makeCall" class="bot_fixed_con" style="width: 25%;background-color: #ff663d;">
					<image style="width: 39upx;height: 43upx;" src="../../static/call.png"></image>
				</view>
			</block>
		</view>
		<view v-else class="bot_fixed">
			<view @click="makeCall" class="bot_fixed_con" style="width: 100%;background-color: #ff663d;">
				<image style="width: 39upx;height: 43upx;" src="../../static/call.png"></image>
			</view>
		</view>

		<uni-popup ref="popup" :mask-click="false">
			<view style="overflow: hidden;" class="modal_box">
				<image @click="save_pic" style="width: 80%;margin-left: 10%;margin-top: 20upx;" mode="widthFix"
					:src="data.group_qrurl">
				</image>
				<view style="text-align: center;color: #666666;margin-top: 15upx;">请加群了解具体事项</view>
				<view style="display: flex;justify-content: center;" class="modal_btn">
					<view @click="close_modal" class="modal_btn_cancel">关闭</view>
				</view>
			</view>
		</uni-popup>

		<!-- 报名遮罩 -->
		<uni-popup ref="popup_sign" :mask-click="false">
			<view class="modal_box">
				<view style="color: #313131;text-align: center;font-size: 38upx;line-height: 90upx;">确认报名</view>
				<view class="mention">
					<view v-if="!user_info.true_name">您还没有实名认证，<navigator url="/pages/personal/authentication">去实名认证
						</navigator>
					</view>
				</view>
				<view class="modal_btn">
					<view @click="close_sign_modal" class="modal_btn_cancel">取消</view>
					<view @click="sign" class="modal_btn_confirm">报名并支付{{data.price}}元</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import commonData from '../../commonData.js'
	import commonFun from '../../commonFun.js'

	import trailerStars from '../../components/starts/index.vue'
	import share from '../../components/share/index.vue'
	import mapBox from '../../components/mapBox/index.vue'

	export default {
		data() {
			return {
				IS_TOURIST: uni.getStorageSync('IS_TOURIST'), //获取游客模式
				sys_role: commonData.sys_role,
				type: 0, //0是未报名，1是已报名
				id: '',
				data: {},
				positionData: {},
				serverUrlImg3: this.serverUrl + 'show/complaint.png',
				show_code: 0,
				loading: true,
				user_info: {},
			}
		},
		onShareAppMessage() {
			return {
				title: this.data.title,
				path: '/pages/activity/detail?id=' + this.id
			}
		},
		methods: {
			// 保存图片
			save_pic() { //保存图片
				uni.downloadFile({
					url: this.data.group_qrurl,
					success: (res) => {
						if (res.statusCode === 200) {
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: function() {
									uni.showToast({
										title: "保存成功",
										icon: "none"
									});
								},
								fail: function() {
									uni.showToast({
										title: "保存失败，请稍后重试",
										icon: "none"
									});
								}
							});
						}
					},
					fail(e) {
						uni.showToast({
							title: "保存失败，请稍后重试，" + JSON.stringify(e),
							icon: "none"
						});
						console.log('失败')
						console.log(e)
					}
				})
			},
			// 获取个人信息
			get_info() {
				commonFun.get_user_info(res => {
					if (res.status) {
						this.user_info = res.data.Result
						console.log('活动详情页获取个人信息')
						console.log(this.user_info)
					}
				})
			},
			toChat() {
				uni.setStorageSync('targetUser', {
					name: this.data.cbu_login_name,
					avatar: 'https://api.kuailaiyou.top/prjcenter/prjKLY/fileroot/images/front/logo.png',
				})
				uni.navigateTo({
					url: '/pages/message/chat?to=userlogin_' + this.data.cbu_login_name + '1'
				})
			},
			// 拨号
			makeCall(phoneNumber) {
				uni.makePhoneCall({
					phoneNumber: this.data.linker_phone
				});
			},
			// 打开报名窗口
			open_sign_modal() {
				if (this.IS_TOURIST == 1) {
					uni.showModal({
						title: '请登录后报名！',
						confirmText: '去登录',
						success: (res) => {
							if (res.confirm) {
								uni.navigateTo({
									url: '../login/index?need_back=1'
								})
							}
						}
					})
					return
				}
				if (this.type == 1) {
					return
				}
				this.$refs.popup_sign.open('top')
			},
			// 关闭报名窗口
			close_sign_modal() {
				this.$refs.popup_sign.close('top')
			},
			// 关闭窗口
			close_modal() {
				this.$refs.popup.close('top')
			},
			// 报名
			sign() {
				if (this.type == 1) {
					return
				}
				uni.showModal({
					content: '确认支付？',
					success: (res) => {
						if (res.confirm) {
							uni.showLoading({
								title: '加载中...',
								mask: true
							})
							uni.login({
								success: res => {
									let params = {
										bizCatalog: 'MActivityEntity',
										handleMode: 'enroll',
										activityId: this.data.id,
										minaCode: res.code,
									}
									console.log('活动报名处理请求参数')
									console.log(params)
									commonFun.requestUrl(
										'&WsAjaxBiz=Worker&WsAjaxAction=entityDataHandle',
										params,
										res => {
											console.log('paySettle处理获取参数')
											console.log(res)
											if (res.status) {
												if (res.data.Result.payResult) {
													uni.showModal({
														content: '报名成功',
														showCancel: false
													})
													this.close_sign_modal()
													setTimeout(() => {
														this.$refs.popup.open('top')
														this.show_code = 1
													}, 300)
													uni.hideLoading()
													return
												}
												let prePayInfo = res.data.Result
													.prePayInfo
												console.log('prePayInfo')
												console.log(prePayInfo)
												uni.requestPayment({
													...prePayInfo,
													success: (res2) => {
														uni.showModal({
															title: '支付成功',
															showCancel: false,
															success: res => {
																uni.showModal({
																	content: '报名成功',
																	showCancel: false
																})
																this.close_sign_modal()
																setTimeout
																	(() => {
																			this.$refs
																				.popup
																				.open(
																					'top'
																				)
																			this.show_code =
																				1
																		},
																		300
																	)
															}
														})
													},
													fail: function(res2) {
														if (res2.errMsg
															.indexOf(
																'cancel'
															) == -1
														) {
															uni.showModal({
																title: '支付失败',
																content: JSON
																	.stringify(
																		res2
																	),
																showCancel: false,
															})
														}
													}
												});
											}
											uni.hideLoading()
										})
								}
							})
						}
					}
				})
			},
			// 获取数据
			get_data() {
				this.get_info()
				this.loading = true
				let url = '&WsAjaxBiz=' + (this.IS_TOURIST == 1 ? 'Public' : this.sys_role == 1 ? 'Trader' :
						'Worker') +
					'&WsAjaxAction=entityDataHandle'
				console.log('活动详情请求URL：' + url)
				commonFun.requestUrl(url, {
					bizCatalog: this.sys_role == 0 ? 'MActivityEntity' : 'TraServiceEntity',
					handleMode: 'fetch',
					bizId: this.id,
					nowLngLat: '117.68898010253906,39.0351862510659',
				}, res => {
					this.data = res.data.Result
					this.type = this.data.enrolled || 0
					console.log('活动/服务页获取详情')
					console.log(this.data)
					this.positionData = {
						work_addr: this.data.activity_addr1,
						work_addr_lng: this.data.addr_lng,
						work_addr_lat: this.data.addr_lat,
					}
					console.log(this.positionData)
					this.loading = false
				})
			},
			changeScore(e) {
				console.log(e)
			},
		},
		onLoad(e) {
			if (e.id) {
				this.id = e.id
			}
			if (this.sys_role == 1) {
				uni.setNavigationBarTitle({
					title: '服务详情'
				})
			}
		},
		onShow() {
			setTimeout(() => {
				this.get_data()
			}, 1000)
			this.IS_TOURIST = uni.getStorageSync('IS_TOURIST') == '' ? 1 : uni.getStorageSync('IS_TOURIST')
		},
		onPullDownRefresh() {
			this.get_data();
		},
		onReachBottom() {

		},
		components: {
			trailerStars,
			share,
			mapBox,
		},
	}
</script>

<style>
	.people {
		line-height: 30upx;
		margin-top: 30upx;
	}

	.swiper_banner {
		width: 750upx;
		height: 780upx;
	}

	.banner {
		width: 100%;
		height: 100%;
	}

	.box_line {
		display: flex;
		flex-direction: row;
		height: 32upx;
	}

	.mini_icon {
		width: 24upx;
		height: 24upx;
	}

	.mini_text {
		margin-left: 20upx;
	}

	.mention {
		width: 90%;
		margin-left: 5%;
		color: #9c9c9c;
	}

	.mention view {
		padding-bottom: 20upx;
		display: flex;
	}
</style>