discounts-minapp/signUp/index.vue

<template>
	<view class="signUp">
		<image class="good-img" :src="info.activityCover" mode="aspectFit"></image>
		<view class="goods-info">
			<view class="goods-name">
				{{ info.activityName }}
			</view>
			<view class="price-box" v-if="info.activityEnable == 1">
				<view class="left">
					<view class="unit">
						￥
					</view>
					<view class="price">
						{{ info.price }}
					</view>
				</view>

			</view>
		</view>

		<view class="list">
			<view class="item">
				<view class="label">
					活动时间
				</view>
				<view class="value">
					{{ info.activityStartTime }} 至 {{ info.activityEndTime }}
				</view>
			</view>
			<view class="item" v-if="info.activityEnable == 1">
				<view class="label">
					报名时间
				</view>
				<view class="value">
					{{ info.signupStartTime }} 至 {{ info.signupEndTime }}
				</view>
			</view>
			<view class="item" v-if="info.address">
				<view class="label">
					活动地址
				</view>
				<view class="value">
					{{ info.address }}
				</view>
			</view>
		</view>

		<view class="sub-title">
			活动详情
		</view>
		<view class="desc-box">
			<rich-text @click="goImgDetials" class="goods-desc" :nodes="info.activityDetail"></rich-text>
		</view>


		<view class="buy-box" v-if="info.activityEnable == 1 && !isEnd">
			<button class="buy-btn" type="default" @click="handleSignUp">报名</button>
		</view>

	</view>
</template>

<script>
import { getActivityDetail } from '@/api/activity.js'
export default {
	data() {
		return {
			id: 0,
			info: {},
			isEnd: false
		}
	},
	onshareAppMessage() {
		return {
			title: this.info.activityName,
			path: `/signUp/index?scene=${this.id}`
		}
	},
	methods: {
		extractImageSrcFromHtml(htmlString) {
			// 正则表达式用于匹配 <img> 标签的 src 属性  
			const regex = /<img[^>]+src="([^"]+)"[^>]*>/gi;
			let match;
			const result = [];

			// 执行正则表达式匹配，并收集所有匹配到的 src 属性  
			while ((match = regex.exec(htmlString)) !== null) {
				result.push(match[1]); // match[1] 是正则表达式中的第一个捕获组，即 src 属性的值  
			}

			return result;
		},
		goImgDetials(e) {
			// console.log('e', e);
			// console.log(this.info.activityDetail)
			const imgArr = this.extractImageSrcFromHtml(this.info.activityDetail)
			// console.log('imgArr', imgArr);
			// let item = e.detail.node;
			// if (item.name == "img") {
			uni.previewImage({
				urls: imgArr,
				longPressActions: {
					itemList: ["保存到相册", "识别二维码"],
					itemColor: "#007AFF",
					success: function (data) {
						let {
							tapIndex,
							index
						} = data;
						// tapIndex 第几个按钮
						// index 第几张图片
						//#ifdef APP-PLUS
						if (tapIndex == 0) {
							// 保存到相册
							plus.gallery.save(imgArr[index], () => {
								uni.showToast({
									icon: "none",
									title: "保存成功!"
								})
							}, () => {
								uni.showToast({
									icon: "none",
									title: "保存失败!"
								})
							})

						} else {
							// 现将文件下载到本地
							uni.downloadFile({
								url: imgArr[index],
								success: (args) => {
									// 扫描二维码
									plus.barcode.scan(
										args.tempFilePath,
										(code, url) => {
											// 如果识别成功
											if (code == 0) {
												// 打开扫描结果
												plus.runtime.openURL(url)
											}
										},
										(err) => {
											uni.showToast({
												icon: 'none',
												title: "图中没有可识别的二维码"
											})
											console.log(err, 'err');
										},
										[plus.barcode.QR],
										true)
								},
								fail: () => {

								}
							})
						}
						//#endif
					}
				}
			})
			// }
		},
		handleSignUp() {
			let that = this
			let { activityStartTime, activityEndTime, limited, activityName, id, price, shopId } = this.info
			let obj = {
				activityStartTime,
				activityEndTime,
				limited,
				activityName,
				id,
				price,
				shopId
			}

			if (uni.getStorageSync('token')) {
				uni.setStorageSync('activity', JSON.stringify(obj))
				uni.navigateTo({
					url: '/signUp/makeOut?id=' + this.info.dataCollectId
				})

			} else {
				uni.showModal({
					title: '请登录',
					confirmText: '去登录',
					success(res) {
						console.log(res);
						if (res.confirm) {
							uni.navigateTo({
								url: `/login/login/login?redirect=/signUp/index&scene=${that.id}`
							})
						}
					}
				})
			}
		},
		getActivityDetail(id) {
			getActivityDetail({ id }).then(res => {
				if (res.state == 'Success') {
					this.info = res.content
					this.info.activityDetail = res.content.activityDetail.replace(/<img/gi, '<img class="img_class" ')
					uni.setNavigationBarTitle({
						title: this.info.activityName
					})
					if (new Date(this.info.activityEndTime).getTime() < new Date().getTime()) {//活动结束
						this.isEnd = true
					}
				}
			})
		}
	},
	onLoad(options) {
		console.log('options', options);
		this.id = decodeURIComponent(options.scene)
		this.getActivityDetail(this.id)
	}

}
</script>

<style lang="scss">
.signUp {
	background: #F9F9F9;
	padding-bottom: 200rpx;
	min-height: 100vh;

	.good-img {
		width: 100%;
		height: 750rpx;
		vertical-align: bottom;
	}

	.goods-info {
		padding: 24rpx;
		margin-bottom: 20rpx;
		background: #fff;

		.price-box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 20rpx;

			.left {
				display: flex;
				align-items: flex-end;

				.unit {
					font-size: 20rpx;
					color: $uni-color-primary;
					font-weight: bold;
				}

				.price {
					font-size: 36rpx;
					color: $uni-color-primary;
					font-weight: bold;
				}

			}

		}

		.goods-name {
			font-size: 32rpx;
			color: #222222;
			font-weight: bold;
		}

	}

	.sub-title {
		font-weight: 600;
		font-size: 28rpx;
		color: #222222;
		padding: 24rpx;
		border-radius: 16rpx 16rpx 0 0;
		background: #fff;
	}

	.desc-box {
		.goods-desc {
			color: #222222;
			font-size: 24rpx;

			.img_class {
				max-width: 100% !important;
				vertical-align: bottom;
			}
		}
	}

	.list {
		background: #fff;
		margin-bottom: 20rpx;

		.item {
			padding: 24rpx;
			border-top: 1rpx solid #F0F0F0;

			.label {
				font-weight: 600;
				font-size: 28rpx;
				color: #222222;
			}

			.value {
				font-weight: 300;
				font-size: 24rpx;
				color: #AAAAAA;
				margin-top: 16rpx;
				line-height: 40rpx;
			}
		}
	}

	.buy-box {
		position: fixed;
		bottom: 0%;
		left: 0%;
		width: 100%;
		background: #fff;
		padding: 10rpx 24rpx env(safe-area-inset-bottom);
		border-top: 1rpx solid #EEEEEE;
		box-sizing: border-box;

		.buy-btn {
			width: 702rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			background: $uni-color-primary;
			border-radius: 40rpx;
			font-weight: 600;
			font-size: 28rpx;
			color: #FFFFFF;
		}


	}

}
</style>