web-app-v1/pages/pay-status/pay-status.vue

<template>
	<view class="ps">
		<view class="ps_status_icon"><image src="../../icon/shop/pay_success.png" mode=""></image></view>
		<text class="ps_status_text">支付成功</text>
		<text class="ps_status_tip">感谢你对大卫博士微店的支持，欢迎你下次购买</text>
		<view class="ps_control">
			<text>订单号：{{ order_no }}</text>
			<text class="copy_btn" @click="copy()">复制</text>
		</view>
		<view class="ps_goon_btn" @click="lookOrder">查看订单</view>
		<view class="ps_follow_code"><image src="../../static/logo.png" mode="aspectFit"></image></view>
		<text class="ps_follow_text">关注“大卫博士官网”公众号，查询订单</text>
	</view>
</template>

<script>
import { handleClipboard } from '../../common/util/index.js';
export default {
	data() {
		return {
			order_no: ''
		};
	},
	onLoad(ops) {
		if (ops.order_no) {
			this.order_no = ops.order_no;
		}
	},
	methods: {
		lookOrder() {
			uni.reLaunch({
				url: '../order-manage/order-manage?status=' + 1
			});
		},
		copy(data) {
			handleClipboard(
				this.order_no,
				event,
				() => {
					uni.showToast({
						icon: 'none',
						title: '复制成功'
					});
				},
				() => {
					uni.showToast({
						icon: 'none',
						title: '复制失败'
					});
				}
			);
		}
	}
};
</script>

<style lang="scss" scoped>
.ps {
	width: 100%;
	padding: 30rpx;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-direction: column;
	.ps_follow_text {
		font-size: 28rpx;
		line-height: 34rpx;
		color: #333333;
	}
	.ps_follow_code {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 30rpx;
		image {
			display: block;
			width: 276rpx;
			height: 276rpx;
		}
	}
	.ps_goon_btn {
		width: 530rpx;
		margin: 74rpx auto 212rpx auto;
		height: 88rpx;
		text-align: center;
		line-height: 88rpx;
		border-radius: 88rpx;
		background: $base-line-bg;
		color: #ffffff;
		font-size: 32rpx;
	}
	.ps_status_icon {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		image {
			width: 210rpx;
			height: 172rpx;
		}
	}
	.ps_status_text {
		display: block;
		width: 100%;
		color: #333333;
		font-size: 48rpx;
		text-align: center;
		margin: 30rpx auto 40rpx auto;
	}
	.ps_status_tip {
		display: block;
		width: 100%;
		color: #999999;
		font-size: 28rpx;
		text-align: center;
		margin-bottom: 14px;
	}
	.ps_control {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		text {
			&:nth-of-type(1) {
				color: #f76454;
				font-size: 28rpx;
				line-height: 34rpx;
			}
		}
	}
}
</style>