alipay/pages/showmp_debug/showmp_debug.vue

<template>
	<view class="container">
		<!-- <view class="bg-image" style=""></view> -->
		<!-- <view class="bg-image" style="background-image: url({{bgImageUrl}});"></view> -->
		<uni-popup ref="popup" :is-mask-click="false" type="message" background-color="#ffffff" style="border-radius: 10px;">
			<view class="message-box" style="z-index: 1001;">
				<view class="message-title">用电发起成功</view>
				<view class="message-content">请前往【用电小助理】用电中心查看详细支付记录。</view>
				<!-- 微信环境 -->
				<!-- #ifdef MP-WEIXIN -->
				<view style="display: grid;width: 100%;">
					<button size="mini" v-if="is_automobile" @click="launchWeapp" class="weapp-btn">立即前往</button>
					<button size="mini" @click="gotoLocation" class="weapp-btn m">我知道了</button>
				</view>
				<!-- #endif -->
				<!-- 非微信环境 -->
				<!-- #ifdef H5  -->
				<view style="display: grid;width: 100%;">
					<button size="mini" @click="serviceStatus" class="weapp-btn">立即前往</button>
					<button size="mini" @click="gotoLocation" class="weapp-btn m">我知道了</button>
					<!-- <navigator url="/pages/service_status/service_status?type=1">立即前往</navigator>
					<view @click="gotoLocation">我知道了</view> -->
				</view>
				<!-- #endif -->
			</view>
		</uni-popup>
		<view class="icon-area">
			<uni-icons color="#0586ff" type="checkbox-filled" size="60"></uni-icons>
			<text>支付成功</text>
		</view>
		<uni-card class="order-info">
			<view class="order-item">
				<text>订单金额:</text>
				<text>1{{count}}</text>
			</view>

			<view class="order-item">
				<text>设备编号:</text>
				<text>{{sn}}</text>
			</view>
		</uni-card>
		<view v-if="orderFlag == 0">
			<button @click="checkOrder">刷新订单状态</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// bgImageUrl: this.$_W['config']['oss']['url'] + '/common/index/bgimage.png',
				count: '', // 订单金额
				sn: '', // 设备编号
				//useragent: this.$_W['useragent'], // 用户代理
				is_automobile: false, // 是否是汽车
				orderFlag: 0, // 订单标志
			};
		},
		onReady() {
			this.$refs.popup.open('center')
		},
		methods: {
			checkOrder() {
				// AJAX请求检查订单状态
				uni.request({
					url:config.baseUrl+''
				})
				
			},
			launchWeapp() {
				// 微信小程序跳转逻辑
				uni.navigateTo({
					url: '/pages/sevice_status/sevice_status'
				})
				// uni.request({
				// 	url:config.baseUrl+'app/index.php?i=1&j=1&c=auth&a=usercenter&do=service_status&type=1'
				// })
			},
			gotoLocation() {
				// 跳转逻辑
				this.$refs.popup.close('center')
			},
			serviceStatus(){
				uni.navigateTo({
					url:'/pages/sevice_status/sevice_status'
				})
			}
		},
	};
</script>

<style>
	.container {

		display: flex;
		flex-direction: column;
		width: 100vw;
		background-color: #ffffff;
		justify-content: flex-start;
		align-items: center;
	}

	.message-title {
		font-size: 20px;
		font-weight: 700;
	}

	.message-content {
		font-size: 13px;
	}

	.bg-image {
		width: 100%;
		height: 100%;
		background-size: cover;
		background-position: center;
	}

	.message-box {
		width: 50vw;
		background-color: #ffffff;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20px;
		border-radius: 10px;
	}

	/* .overlay {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 999;
} */

	.icon-area {
		margin-top: 48px;
		display: grid;
	}

	.order-info {
		padding: 20px;
		background: white;
		border-radius: 3px;
		width: 90%;
		display: grid;
		justify-items: start;
	}
 
	.order-item {
		width: 75vw;
		margin: 10px 20px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		border-bottom: 1px dotted black;
	}

	.weapp-btn {
		margin: 10px;
		border-radius: 8px;
		background: #0687ff;
		color: black;
	}

	.m {
		background-color: aqua;
	}
</style>