cashier_weapp/pages/order/successful.vue

<template>
	<view class="content">
		<!-- 占位符导航栏 -->
		<navseat class="navbar" :opacity='opacitys' :title='titlename'></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">
				￥75.00
			</view>
			<view class="towcontentow flex-between">
				<view class="towcontentow_O">
					订单编号：
				</view>
				<view class="towcontentow_T">
					94789546123301
				</view>
			</view>
			<view class="towcontentow flex-between">
				<view class="towcontentow_O">
					下单时间：
				</view>
				<view class="towcontentow_T">
					2023-05-16 13:20:12
				</view>
			</view>
			<view class="towcontentow flex-between">
				<view class="towcontentow_O">
					支付方式：
				</view>
				<view class="towcontentow_T">
					微信支付
				</view>
			</view>
			<view class="towcontenthere flex-colum">
				<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>
		</view>
	</view>
</template>

<script>
	import navseat from '@/components/navseat.vue'
	export default {
		components: {
			navseat
		},
		data() {
			return {
				titlename: '支付详情',
				opacitys: false,
				towcontentclickindex: 0,
				windowHeight: '',
				seighT: '',
				customheighttop: '', //top高度
				isFixedTop: false,
				Topdistance: 3000, //吸顶初始距离
				listbox: [{
						name: '全部'
					},
					{
						name: '美食正餐'
					},
					{
						name: '饮品小吃'
					}
				],
				form: {
					address: '', //地址
					type: '', //品类
					orderBy: '', //1.理我最近 2.销量优先 3.价格优先
					distance: '', //附近1KM 1选中 0不选中
					page: 1, //页数
					size: 10, //页容量
					status: 'loadmore'
				},
			};
		},
		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() {
			setTimeout(() => {
				this.GetTop()
			}, 1000)
		},
		computed: {
			HeighT() { //手机类型的尺寸
				return this.$store.getters.is_BarHeight
			},
		},
		methods: {
			//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: 32rpx;
					image{
						width: 38.48rpx;
						height: 38.42rpx;
					}
					text{
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 28rpx;
						color: #333333;
					}
				}
				.towcontenthereimage{
					
				}
			}
		}

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

	}
</style>