juliancheng/pages/mine/paysource.vue

<template>
	<view class="main">
		<image class="topbg" :src="imgHost+'/static/index/top.png'"></image>
		<view class=" padding-xs flex align-center">
			<view class="flex-sub text-center">
				<view class=" text-xsl padding-top">
					<text class=" cuIcon-roundcheckfill text-green"></text>
				</view>
				<view class="margin-sm text-xxl">支付成功</view>
				<view class="margin-sm">您已经成功支付订单</view>
				<view class="margin-sm">可前往个人中心查看订单</view>
				<view class="btns">
					<view class="btn" @click="callback" style="border:1px solid #f5cc57;" data-target="cancel">返回首页</view>
					<view class="btn" style="background-color:#f5cc57;color: #fff;border: none;" @click="gotoinfo">
						前往查看
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgHost: '',
				id: "",
				payment_status: ""
			}
		},
		onLoad(option) {
			this.imgHost = this.$imgHost
			this.id = option.id
			this.payment_status = option.payment_status
		},
		mounted() {

		},
		methods: {
			callback() {
				uni.switchTab({
					url: "../index/index"
				})
			},
			gotoinfo() {
				uni.redirectTo({
					url: '/pages/mine/detail?id=' + this.id + '&payment_status=' + this.payment_status
				})
			}
		}
	}
</script>

<style>
	page {
		margin: 0;
		padding: 0;
		background: #f5f5f5;
	}

	.main {
		width: 100vw;
		height: auto;
		position: relative;
		overflow: hidden;
		/* margin-bottom: 55px; */
	}

	.main .topbg {
		width: 100%;
		/* position: absolute; */
		/* top: 0; */
		/* left: 0; */
		height: 36vw;
		/* z-index: -1; */
	}

	.btns {
		width: 100%;
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.btns .btn {
		width: auto;
		height: 30px;
		line-height: 30px;
		padding: 0 15px;
		border: 1px solid #979797;
		color: #979797;
		margin: 5px;
		border-radius: 5px;
	}
</style>