pay-video-applet-uniapp-24-8-22/pages/order/payOrder.vue

<template>
	<view class="payOrder">
		<navbar
		leftClick
		@leftClick="$utils.navigateBack"
		title="订单支付"/>
		
		<view class="pay">
			<view class="">
				金额
			</view>
			<view class="">
				￥100
			</view>
		</view>
		
		<view class="submit"
		@click="submit">
			支付
		</view>
		
		<confirmationPopup
		ref="confirmationPopup"
		title="提示"
		confirmText="确认">
			<view class="confirmationPopup">
				<!-- <image src="/static/image/publish/upload.png" 
				style="width: 150rpx;height: 150rpx;"
				mode=""></image> -->
				<view>
					支付成功
				</view>
			</view>
		</confirmationPopup>
		
	</view>
</template>

<script>
	import confirmationPopup from '@/components/toast/confirmationPopup.vue'
	export default {
		components : {
			confirmationPopup,
		},
		data() {
			return {
				
			}
		},
		methods: {
			submit(){
				this.$refs.confirmationPopup.open()
			},
		}
	}
</script>

<style scoped lang="scss">
.payOrder{
	padding: 30rpx;
	.pay{
		display: flex;
		color: #999;
		justify-content: space-between;
		padding: 20rpx 0;
		border-bottom: 1px solid #999;
	}
	.submit{
		background: $uni-linear-gradient-btn-color;
		color: #fff;
		padding: 20rpx 0;
		text-align: center;
		margin-top: 100rpx;
	}
	
	.confirmationPopup{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 200rpx;
		image{
			margin-top: 40rpx;
		}
		.info{
			margin-top: 40rpx;
			font-size: 26rpx;
		}
	}
}
</style>