pay-video-applet-uniapp-24-8-22/pages_mine/mine/sonPage/promotion/promotionDetail.vue

<template>
	<view class="promotionDetail">
		<!--顶部导航栏-->
		<navbar leftClick @leftClick="$utils.navigateBack" title="推广详情" />

		<!--主页面-->
		<view class="frame">
			<!--标题-->
			<view class="title">
				<span>推广基本信息</span>
			</view>

			<!--基本信息-->
			<view style="" class="basicInfo">
				<!-- <view class="item">
					<view class="label">推广名称</view>
					<view class="value">
						<uv-input v-model="form.promotionName" placeholder="请输入推广名称" border="bottom" type='number'
							clearable></uv-input>
					</view>
				</view> -->
				<view class="item">
					<view class="label">推广作品名称</view>
					<view class="value">{{item.name}}</view>
				</view>
				<!-- <view class="item">
					<view class="label">价格</view>
					<view class="value">{{item.price }}</view>
				</view>
				<view class="item">
					<view class="label">时长</view>
					<view class="value">{{item.tuTime}}</view>
				</view>
				<view class="item">
					<view class="label">联系方式</view>
					<view class="value">
						<uv-input v-model="item.phone" placeholder="请输入联系方式" border="bottom" type='number'
							clearable></uv-input>
					</view>
				</view> -->
				<view class="item">
					<view class="label">剩余推广时长</view>
					<view class="value">{{item.remainingPromotionTime}}</view>
				</view>


				<!-- <view>推广作品</view>
				<view style="width: 30%;height: 300rpx;border-radius: 20rpx;overflow: hidden;">
					<image :src="item.image" style="width: 100%;height: 100%;"></image>
				</view> -->
			</view>




			<!-- ActionSheet 操作菜单 -->
			<uv-action-sheet ref="actionSheet" :actions="upTopList" title="选择推广时长" @select="select" @close="close"
				:closeOnClickAction="false">
			</uv-action-sheet>

			<!--确认发布弹框-->
			<uv-popup ref="popup" mode="center" custom-style="height: 400rpx;">
				<view class="content">
					<view class="title">
						推广选项
					</view>
					<!--付费周期-->
					<view style="" class="payCycle">
						<view>付费周期</view>
						<view>{{popupData.day}}天</view>
					</view>

					<!--金额-->
					<view style="width:100%;display: flex;justify-content: space-between;align-items: center;">
						<view>金额</view>
						<view>￥{{popupData.money}}</view>
					</view>

					<!--确认推广按钮-->
					<view class="confirmBottom">
						<button @click="confirmPromotion" class="confirmBtn">
							确认推广
						</button>
					</view>
				</view>
			</uv-popup>

			<!--支付弹框-->
			<confirmationPopup ref="confirmationPopup" title="提示" @confirm="payOrder" confirmText="确认支付">
				<view class="confirmationPopup">
					<image src="/static/image/publish/pay.png" style="width: 150rpx;height: 150rpx;" mode=""></image>
					<view class="info">
						确认支付{{ popupData.money }}元，可置顶{{ popupData.day }}天
					</view>
				</view>
			</confirmationPopup>

			<!-- 平台审核弹框 -->
			<confirmationPopup ref="confirmationPopupUpload" title="提示" confirmText="确认" @confirm="confirm()">
				<view class="confirmationPopup">
					<image src="/static/image/publish/upload.png" style="width: 150rpx;height: 150rpx;" mode=""></image>
					<view class="info">
						已由平台进行审核，时间周期为24小时
					</view>
				</view>
			</confirmationPopup>
		</view>

		<!--继续推广按钮-->
		<button @click="continueToPromotion" class="bottomBtn">
			继续推广
		</button>
	</view>
</template>

<script>
	import dayjs from 'dayjs';
	import '../../../../common.css'; // 引入公共 CSS 文件
	import confirmationPopup from '@/components/toast/confirmationPopup.vue'
	export default {
		onLoad(options) {
			// if (options.item) {
			// 	let item = JSON.parse(decodeURIComponent(options.item));
			// }
			console.log(options.id,"opID");
			this.item.id = options.id
		},
		components: {
			confirmationPopup
		},
		data() {
			return {
				upTopList: [],
				payList: [],
				payId: null,
				item: {
					day: 0,
					money: 0,
				},
				popupData: {
					day: 0,
					money: 0,
				},
				param: {
					type: 'default',
					title: '结束后跳转标签页',
					message: "推广成功",
					url: '/pages/componentsD/tag/tag'
				}
			};
		},
		mounted() {
			this.getData()
			this.indexTopPayList()
		},
		methods: {
			// 获取推广详情数据
			getData() {
				this.$api('infoGetPromotionDetail', {
					id: this.item.id
				}, res => {
					if (res.code == 200) {
						console.log(res.result,"res.result");
						this.item = res.result

						// 计算推广时间加上置顶时间
						const futureTime = dayjs(this.item.createTime).add(this.item.tuTime, "day")

						// 获取当前时间
						const now = dayjs();

						// 计算两个时间之间的差异（毫秒）
						const diff = futureTime.diff(now);

						// 将毫秒转换为小时和天
						const hours = Math.floor(diff / 3600000);
						const days = Math.floor(hours / 24);

						// 根据时间差显示不同的格式
						if (days > 0) {
							// 超过24小时
							const remainingHours = hours % 24;
							console.log(`${days}天${remainingHours}小时`);
							this.item.remainingPromotionTime = `${days}天${remainingHours}小时`
						} else {
							// 没有超过24小时
							console.log(`${hours}小时`);
							this.item.remainingPromotionTime = `${hours < 0 ? 0 : hours}小时`
						}
					}
				})
			},

			// 获取置顶方式
			indexTopPayList() {
				this.$api('indexTopPayList', res => {
					if (res.code == 200) {
						for (var i = 0; i < res.result.length; i++) {
							this.payList = res.result
							this.upTopList.push({
								name: '置顶' + res.result[i].day + '天' + res.result[i].money + '元'
							})
						}
					}
				})
			},

			select(e) {
				console.log('选中该项：', e);
				// 使用正则表达式匹配整数和浮点数
				const matches = e.name.match(/(\d+\.?\d*)/g).map(Number);

				// 如果匹配到数字，则输出
				if (matches && matches.length >= 2) {
					// console.log(matches, "matches");
					for (var i = 0; i < this.payList.length; i++) {
						if (this.payList[i].day == matches[0]) {
							this.payId = this.payList[i].id
						}
					}


					// 提取天数和金额
					this.popupData.day = matches[0]; // 例如，置顶天数
					this.popupData.money = matches[1]; // 例如，金额
					this.$refs.actionSheet.close() //关闭弹框
					this.$refs.popup.open() //打开另外一个弹框
				}
			},

			// ActionSheet 操作菜单关闭
			close() {
				this.$refs.actionSheet.close() //关闭弹框
				// this.$refs.popup.open() //打开另外一个弹框
			},

			// 提交平台审核的弹框的确认回调
			confirm(e) {
				uni.navigateTo({
					url: "/pages/index/index"
				})
			},
			// 继续推广按钮
			continueToPromotion() {
				if (this.item.phone == '' || this.item.phone == null) {
					return uni.showToast({
						title: '请输入联系电话',
						icon: 'none'
					})
				}
				this.$refs.actionSheet.open();
			},

			// 确认发布弹框
			confirmPromotion() {
				this.$refs.confirmationPopup.open()
				this.$refs.popup.close()
			},


			// 发起支付
			payOrder() {
				let self = this

				console.log(self.item.id, "self.item.id");
				let data = {
					id: self.item.id,
					dayId: self.payId
				}


				self.$api('confirmPromotion', data,
					res => {
						console.log(res,"res");
						if (res.code == 200) {
							uni.requestPayment({
								provider: 'wxpay', // 服务提提供商
								timeStamp: res.result.timeStamp, // 时间戳
								nonceStr: res.result.nonceStr, // 随机字符串
								package: res.result.packageValue,
								signType: res.result.signType, // 签名算法
								paySign: res.result.paySign, // 签名
								success: function(res) {
									console.log('支付成功', res);
									self.$refs.confirmationPopupUpload.open()
									// self.$refs.confirmationPopup.close()
								},
								fail: function(err) {
									console.log('支付失败', err);
									self.$refs.confirmationPopup.close()
									uni.showToast({
										icon: 'none',
										title: "支付失败"
									})
								}
							});

						}
					})

			},

		}
	}
</script>

<style lang="scss" scoped>
	* {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}

	.promotionDetail {
		width: 100vw;
		height: 100vh;

		.frame {
			width: 100%;
			//height: calc(100vh - 220rpx);
			padding: 28rpx 28rpx 0 28rpx;

			.title {
				font-size: 36rpx;
				font-weight: 600;
			}

			.basicInfo {
				display: flex;
				flex-direction: column;
				gap: 60rpx;
				margin-top: 50rpx;
				width: 90%;

				.item {
					display: flex;
					justify-content: space-between;

					.label {
						width: 60%;
					}

					.value {
						width: 40%;
						text-align: right;
					}
				}
			}

			.bottom {
				position: fixed;
				bottom: 30rpx;
				left: 25%;
				width: 50%;
				height: 100rpx;

				.continueBtn {
					color: #ffffff;
					background: $uni-linear-gradient-btn-color;
				}
			}


			.confirmationPopup {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				width: 100%;
				height: 300rpx;

				image {
					margin-top: 40rpx;
				}

				.info {
					margin-top: 40rpx;
					font-size: 26rpx;
				}
			}
		}


		.content {
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			gap: 20rpx;
			width: 600rpx;
			height: 100%;
			padding: 20rpx;


			.title {
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.payCycle {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.confirmBtn {
				width: 50%;
				height: 80rpx;
				text-align: center;
				color: #ffffff;
				background: linear-gradient(to right, #3c69f1, #5f3bf5);
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 30rpx;
				margin-top: 50rpx;
			}


		}


	}

	/deep/ .uv-popup .uv-popup__content {
		border-radius: 20rpx;
	}
</style>