qingnianyexiao2.0/packageA/my/cancelActivity.vue

<template>
	<view class="box flex flex-column flex-start align-items">
		<view class="con-box flex flex-column flex-start align-items">
			<view class="top flex ">
				<image :src="detail.detail.headimage" mode=""
					style="width: 280rpx;height: 200rpx;border-radius: 12rpx;"></image>
				<view class="rightBox flex flex-column flex-start">
					<span class="name">{{detail.detail.title}}</span>
					<span class="minge">活动规格</span>
					<span class="minge" style="font-weight: 800;">{{detail.orderitem.name}}</span>
					<view class="flex align-items" style="width: 340rpx;">
						<span class="minge">{{detail.orderitem.limit_num}}人</span>
						<span class="minge">{{detail.orderitem.age}}岁</span>
						<span class="minge" v-if="detail.orderitem.sex == 3">男女不限</span>
						<span class="minge" v-else>{{detail.orderitem.sex == 1 ? "男" : "女"}}</span>
					</view>
					<!-- <span class="minge" v-if="detail.feel == 0">课程价格:
						<span style="color: #FF2323;font-weight: 800;">{{'￥' + detail.price}}</span>
					</span>
					<span class="minge" v-if="detail.feel == 1">
						<span style="color: #FF2323;font-weight: 800;">免费</span>
					</span> -->
				</view>
			</view>
			<span class="line"></span>
			<view class="con-center flex flex-start flex-column align-items ">
				<view class="top flex flex-start" style="padding: 0;">
					<image :src="detail.user.avatar" mode=""
						style="width: 120rpx;height: 120rpx;border-radius: 100%;margin-right: 18rpx;">
					</image>
					<view class="flex flex-column " style="width: 550rpx;">
						<span class="name">{{detail.user.nickname}}</span>
						<span class="minge"> {{'姓 名:' + detail.user.realname}}</span>
						<span class="minge flex align-items white-space" @click="callPhone(detail.user.mobile)">
							<span class="white-space">{{'联系电话:' + detail.user.mobile}}</span>
							<image src="../../static/tel.png" mode="" style="width: 36rpx;height: 36rpx;"></image>
						</span>
						<span class="minge">{{'订 单 号:' + detail.order_no}}</span>
						<span class="minge">{{'购买时间:' + detail.user.realname  || detail.user.nickname}}</span>
						<span class="minge">{{'姓 名:' + detail.paytime_text}}</span>
					</view>
				</view>
				<span class="line-row"></span>
				<view class="center flex flex-column flex-start">
					<span class="detail">活动介绍</span>
					<span class="minge">{{'活动时间:' + detail.detail.start_time_text}} -
						{{detail.detail.end_time_text}}</span>
					<span class="minge">{{'报名时间:' + detail.detail.sign_start_time_text}} -
						{{detail.detail.sign_end_time_text}}</span>
					<span class="minge">
						报名费用:
						<span
							class="price">{{ parseFloat(detail.orderitem.price) == 0 ? '公益' : detail.orderitem.price }}</span>
					</span>
					<span class="minge">{{'活动人数:' + detail.orderitem.limit_num}}</span>
					<span class="minge flex align-items "
						@click.stop="toMap(detail.detail.latitude,detail.detail.longitude,detail.detail.address_detail)">
						<span class="white-space">{{'活动地址:' + detail.detail.address_detail}}</span>
						<image src="../../static/center/address.png" mode=""
							style="width: 36rpx;height: 36rpx; margin-left: 12rpx;"></image>
					</span>
				</view>



			</view>
		</view>
		<view class="footer flex justify-center center align-items">
			<span class="flex justify-center center align-items" @click.stop="submit">确认核销</span>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				detail: {},
				order_id: '',
				type: '',
				vcode: '',
			};
		},
		filters: {
			formatDateTime(timestamp) {
				if (!timestamp) return '';
				const date = new Date(timestamp * 1000);
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				const hours = String(date.getHours()).padStart(2, '0');
				const minutes = String(date.getMinutes()).padStart(2, '0');
				const seconds = String(date.getSeconds()).padStart(2, '0');
				return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			}
		},
		onLoad(option) {
			console.log('option', option);
			if (option.res) {
				// 解码参数
				const decodedRes = decodeURIComponent(option.res);
				// 解析查询字符串为对象
				const params = this.parseQueryString(decodedRes);
				// 将解析后的参数赋值给组件的 data 属性
				this.order_id = params.order_id;
				this.type = params.type;
				this.vcode = params.vcode;
			}
		},
		onShow() {
			this.page = 1
			this.list = []
			this.getDetail(this.order_id)
		},

		methods: {
			submit() {
				uni.$u.http.post('/api/school.worker.activity.order/verification', {
					order_no: this.detail.order_no
				}).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: '核销完成',
							icon: 'none',
							duration: 2000,
							complete: function() {
								setTimeout(function() {
									uni.navigateBack(1)
								}, 2000);
							}
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
				}).catch(error => {});
			},

			parseQueryString(queryString) {
				const params = {};
				const pairs = queryString.split('&');
				for (const pair of pairs) {
					const [key, value] = pair.split('=');
					params[key] = value;
				}
				return params;
			},


			getDetail(id) {
				uni.$u.http.get('/api/school.worker.activity.order/detail', {
					params: {
						id: id,
					}
				}).then(res => {
					if (res.code == 1) {
						this.detail = res.data.detail

					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000,
							complete: function() {
								setTimeout(function() {
									uni.navigateBack(1)
								}, 2000);
							}
						})
					}
				}).catch(error => {});
			},
			// 导航
			toMap(latitude, longitude, name) {
				uni.openLocation({
					latitude: parseFloat(latitude),
					longitude: parseFloat(longitude),
					name: name,
					success: function() {
						console.log('success');
					}
				});
			},


			callPhone(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.w-100 {
		width: 100%;
	}

	.flex {
		display: flex;
	}

	.flex-start {
		align-items: flex-start;
	}

	.justify-center {
		justify-content: center;
	}

	.align-items {
		align-items: center;
	}

	.white-space {
		overflow: hidden;
		/* 确保超出容器的文本被隐藏 */
		white-space: nowrap;
		/* 确保文本在一行内显示 */
		text-overflow: ellipsis;
		/* 使用省略号表示被截断的文本 */
		width: 100%;
	}

	.flex-column {
		flex-flow: column;
	}

	.justify-start {
		justify-content: start;
	}

	.line {
		margin-top: 12rpx;
		width: 690rpx;
		height: 1rpx;
		background: #008CFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.space-between {
		justify-content: space-between;
	}

	.hui {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #7A7A7A;
	}

	.minge {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #7A7A7A;
		margin-top: 8rpx;
		overflow: hidden;
		/* 确保超出容器的文本被隐藏 */
		white-space: nowrap;
		/* 确保文本在一行内显示 */
		text-overflow: ellipsis;
		/* 使用省略号表示被截断的文本 */
		width: 100%;
	}

	.box {
		width: 750rpx;
		background: #F1F2F8;
		height: 100vh;

		.con-box {
			background: #FFFFFF;
		}

		.con-center {
			width: 690rpx;
			margin-bottom: 42rpx;

			.name {
				font-family: PingFang SC, PingFang SC;
				font-weight: 800;
				font-size: 34rpx;
				color: #181818;
			}

			.line-row {
				width: 642rpx;
				height: 1rpx;
				background: #D9D9D9;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				margin: 33rpx 0 23rpx 0;
			}


			.center {
				width: 642rpx;

				.detail {
					font-family: PingFang SC, PingFang SC;
					font-weight: 800;
					font-size: 26rpx;
					color: #008CFF;
					margin-bottom: 6rpx;
				}

				.price {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 26rpx;
					color: #FF0000;
				}

				.minge {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 26rpx;
					color: #7A7A7A;
					margin-top: 18rpx;
				}
			}
		}

		.top {
			width: 690rpx;
			padding: 32rpx 30rpx;
			background: #FFFFFF;

			.rightBox {
				margin-left: 32rpx;
				width: 378rpx;

				.line-row {
					width: 382rpx;
					height: 1rpx;
					background: #D9D9D9;
					box-shadow: 1rpx 1rpx 0rpx 0rpx rgba(102, 102, 102, 0.25);
					margin: 14rpx 0 6rpx 0;
				}

				.price {
					font-family: PingFang SC, PingFang SC;
					font-weight: 800;
					font-size: 24rpx;
					color: #FF2323;
				}

				.name {
					font-family: PingFang SC, PingFang SC;
					font-weight: 800;
					font-size: 34rpx;
					color: #343434;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					/* 设置行数 */
					overflow: hidden;
					text-overflow: ellipsis;
					word-break: break-all;
					/* 防止单词被截断 */
				}


				.money {
					font-weight: 800;
					font-size: 24rpx;
					color: #FF2323;

					span {
						font-weight: 500;
						font-size: 24rpx;
						color: #7A7A7A;
					}
				}
			}
		}

		.centerBack {
			position: fixed;
			width: 100%;
			height: 100%;
			top: 25rpx;
			left: 0;
			z-index: -1;
		}

	}

	.line {
		width: 690rpx;
		height: 1rpx;
		background: #D9D9D9;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		margin: 37rpx 0;
	}

	.footer {
		width: 750rpx;
		height: 122rpx;
		position: fixed;
		bottom: 0;
		background: #FFFFFF;
		box-shadow: 0rpx -6rpx 12rpx 0rpx rgba(111, 190, 255, 0.1);

		span {
			width: 642rpx;
			height: 80rpx;
			background: #008CFF;
			border-radius: 401rpx 401rpx 401rpx 401rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 800;
			font-size: 34rpx;
			color: #FFFFFF;
		}
	}
</style>