<template>
	<view class="content">
		<!-- 占位符导航栏 -->
		<navseat class="navbar" :opacity='opacitys' :title='titlename' :titleshow='false'></navseat>
		<view class="onecontent">
			<view :style="[{'padding-top':HeighT.customBar +44+'px'}]"></view>
			<view class="onecontentabsolute flex-center">
				<image class="onecontentabsoluteimage"
					src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/drder/dui.png" mode="aspectFill"></image>
				<view class="onecontentabsolutebox flex-colum-start">
					<text>支付成功！</text>
					<text style="margin-top: 16rpx;font-size: 24rpx;">感谢您的购买</text>
				</view>
			</view>
		</view>
		<view class="towcontent">
			<view class="towcontentone">
				￥{{orderInfo.orderAmount}}
			</view>
			<view class="towcontentow flex-between">
				<view class="towcontentow_O">
					订单编号：
				</view>
				<view class="towcontentow_T">
					{{orderInfo.orderNo}}
				</view>
			</view>
			<view class="towcontentow flex-between">
				<view class="towcontentow_O">
					下单时间：
				</view>
				<view class="towcontentow_T">
					{{orderInfo.createdAt|createdAtfiter}}
				</view>
			</view>
			<view class="towcontentow flex-between">
				<view class="towcontentow_O">
					支付方式：
				</view>
				<view class="towcontentow_T">
					微信支付
				</view>
			</view>
			<view class="towcontenthere flex-colum" v-if="orderinfo">
				<view class="towcontentherebox flex-center">
					<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/drder/yhj.png" mode=""></image>
					<text>恭喜获得优惠券</text>
				</view>
				<view class="towcontenthereimage flex-colum">
					<view class="towcontenthereimageone">
						<text style="font-size:28rpx; color: #FF7C0D;">￥</text>
						{{orderinfo.couponsAmount}}
					</view>
					<view class="towcontenthereimagetow">
						通用红包券
					</view>
					<view class="towcontenthereimagethere">
						有效至 {{orderinfo.endTime}}
					</view>
					<view class="towcontenthereimagefour">
						限时红包变大 快来领取
					</view>
					<view class="towcontenthereimagefive flex-between">
						<view class="towcontenthereimagefiveone" @click="wantEvent">
							我在想想
						</view>
						<view class="towcontenthereimagefivetow" @click="DoublingEvent">
							马上翻倍
						</view>
					</view>

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import navseat from '@/components/navseat.vue'
	export default {
		components: {
			navseat
		},
		filters: {
			createdAtfiter(d) {
				const timestamp = d; // 待转换的时间戳
				const date = new Date(timestamp); // 根据时间戳创建Date对象
				const year = date.getFullYear(); // 获取年份
				const month = date.getMonth() + 1; // 获取月份，需要加1
				const day = date.getDate(); // 获取日期
				const hour = date.getHours(); // 获取小时
				const minute = date.getMinutes(); // 获取分钟
				const second = date.getSeconds(); // 获取秒数
				const formattedDate = `${year}-${month}-${day} ${hour.length==1? '0'+hour:hour}:${minute.length==1? '0'+minute:minute}:${second.length==1? '0'+second:second}`; // 拼接成格式化后的日期字符串
				return formattedDate
			}
		},
		data() {
			return {
				titlename: '支付详情',
				orderId: "",
				opacitys: false,
				towcontentclickindex: 0,
				windowHeight: '',
				seighT: '',
				customheighttop: '', //top高度
				isFixedTop: false,
				Topdistance: 3000, //吸顶初始距离
				listbox: [{
						name: '全部'
					},
					{
						name: '美食正餐'
					},
					{
						name: '饮品小吃'
					}
				],
				orderinfo: null,
				form: {
					address: '', //地址
					type: '', //品类
					orderBy: '', //1.理我最近 2.销量优先 3.价格优先
					distance: '', //附近1KM 1选中 0不选中
					page: 1, //页数
					size: 10, //页容量
					status: 'loadmore'
				},
				orderInfo: null
			};
		},
		onPageScroll(e) {
			if (e.scrollTop <= 44) { //搜索导航栏
				this.opacitys = false
			} else {
				this.opacitys = true
			}
			if (e.scrollTop >= this.Topdistance) { //类别导航栏
				this.isFixedTop = true
			} else {
				this.isFixedTop = false
			}
		},
		onLoad(e) {
			this.orderId = e.orderId
			setTimeout(() => {
				this.GetTop()
			}, 1000)
			this.getinfo(e.orderId)
			this.orderInfo = JSON.parse(e.orderInfo)
		},
		computed: {
			HeighT() { //手机类型的尺寸
				return this.$store.getters.is_BarHeight
			},
		},
		methods: {
			async getinfo(id) {
				let res = await this.api.getYhqDouble({
					// orderId: 420
					orderId: id
				})
				if (res.code == 0) {
					this.orderinfo = res.data
				}
			},
			wantEvent() {
				uni.redirectTo({
					url: '/pages/order/order_detail?orderId=' + this.orderId
				});
			},
			async DoublingEvent() {
				let res = await this.api.yhqDouble({
					conponsId: this.orderinfo.id
				})
				if (res.code == 0) {
					this.wantEvent()
				}
			},
			//G滚动底部
			loadMore(e) {
				console.log(e)
			},
			//获取元素距离顶部的距离
			GetTop() {
				uni.getSystemInfo({
					success: (data) => {
						console.log(data)
						this.windowHeight = data.windowHeight - data.statusBarHeight //总高度
						// #ifdef MP-WEIXIN
						const custom = wx.getMenuButtonBoundingClientRect()
						this.seighT = data.windowHeight - custom.height - custom.top;
						console.log(custom)
						this.customheighttop = custom.height + custom.top
						// #endif
						// #ifdef APP-PLUS
						this.customheighttop = data.statusBarHeight / 2
						this.seighT = data.windowHeight - data.statusBarHeight / 2
						// #endif
						this.$u.getRect('.towcontentlistxitembt').then(res => {
							this.seighT = this.seighT - res.height //高度
						})
						this.$u.getRect('.towcontentlistxitem').then(res => {
							this.Topdistance = res.top - this.HeighT.heightBar //滚动距离 //滚动距离
							this.seighT = this.seighT - res.height //高度
							console.log(res)
						})

					}
				})
			},
			towcontentclick(index) {
				this.towcontentclickindex = index
			}
		}
	};
</script>

<style scoped lang="scss">
	page {}

	.content {


		.onecontent {
			position: relative;
			z-index: 99;
			width: 100%;
			// #ifdef APP-PLUS || H5
			height: 498.1rpx;
			background: url(https://czg-qr-order.oss-cn-beijing.aliyuncs.com/successful.png) no-repeat;
			// #endif 
			// #ifdef MP-WEIXIN
			background: url(https://czg-qr-order.oss-cn-beijing.aliyuncs.com/drder/successfules.png) no-repeat;
			height: 586rpx;
			// #endif 
			background-size: cover;

			.onecontentabsolute {
				position: absolute;
				width: 100%;
				margin-top: 50rpx;

				.onecontentabsoluteimage {
					width: 98.53rpx;
					height: 93.63rpx;
				}

				.onecontentabsolutebox {
					margin-left: 42rpx;

					text {
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 32rpx;
						color: #FFFFFF;
					}
				}
			}
		}

		.towcontent {
			position: relative;
			z-index: 100;
			top: -148rpx;
			margin: 0 auto;
			width: 630rpx;
			background: #FFFFFF;
			border-radius: 0rpx 0rpx 24rpx 24rpx;
			padding: 0 24rpx;

			.towcontentone {
				padding-top: 26rpx;
				width: 100%;
				text-align: center;
				font-family: Roboto, Roboto;
				font-weight: bold;
				font-size: 44rpx;
				color: #333333;
			}

			.towcontentow {
				margin-top: 16rpx;

				.towcontentow_O {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #999999;
				}

				.towcontentow_T {
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 24rpx;
					color: #333333;
				}
			}

			.towcontenthere {
				margin-top: 32rpx;
				border-top: 1rpx dashed #E5E5E5;

				.towcontentherebox {
					margin-top: 48rpx;

					image {
						width: 38.48rpx;
						height: 38.42rpx;
					}

					text {
						margin-left: 16rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 28rpx;
						color: #333333;
					}
				}

				.towcontenthereimage {
					margin-top: 48rpx;
					width: 540rpx;
					height: 498rpx;
					background: url(https://czg-qr-order.oss-cn-beijing.aliyuncs.com/drder/yhjs.png) no-repeat;
					background-size: cover;
					justify-content: flex-start;

					.towcontenthereimageone {
						margin-top: 54rpx;
						font-family: Roboto, Roboto;
						font-weight: bold;
						font-size: 48rpx;
						color: #FF7C0D;
					}

					.towcontenthereimagetow {
						margin-top: 28rpx;
						width: 184rpx;
						height: 40rpx;
						line-height: 40rpx;
						text-align: center;
						background: rgba(255, 219, 151, 0.33);
						border-radius: 12rpx 12rpx 12rpx 12rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 24rpx;
						color: #C7620E;
					}

					.towcontenthereimagethere {
						margin-top: 8rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 20rpx;
						color: #333333;
					}

					.towcontenthereimagefour {
						margin-top: 74rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 28rpx;
						color: #FFFFFF;
					}

					.towcontenthereimagefive {
						margin-top: 40rpx;

						.towcontenthereimagefiveone {
							padding: 12rpx 28rpx;
							background: #FFF6D8;
							border-radius: 46rpx 46rpx 46rpx 46rpx;
							border: 2rpx solid #FFE18F;
							font-family: PingFang SC, PingFang SC;
							font-weight: bold;
							font-size: 28rpx;
							color: #333333;
						}

						.towcontenthereimagefivetow {
							margin-left: 16rpx;
							padding: 12rpx 28rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: bold;
							font-size: 28rpx;
							color: #FFFFFF;
							background: linear-gradient(178deg, #FFFF81 0%, rgba(255, 76, 59, 0.56) 100%);
							box-shadow: 0rpx 4rpx 6rpx 2rpx rgba(222, 91, 43, 0.65);
							border-radius: 46rpx 46rpx 46rpx 46rpx;
						}
					}
				}
			}
		}

		.towcontent::after {
			content: '';
			position: absolute;
			top: -14rpx;
			left: -32rpx;
			width: 694rpx;
			height: 14rpx;
			background: #FFA556;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
		}

	}
</style>