customerapp-H5/pages/Buy_soap_tape/pay-status.vue

<template>
	<view class="ps">
		<view class="ps_status_icon"><image src="../../static/Buy_soap_tape/success.png"></image></view>
		<text class="ps_status_text">下单成功</text>
		<view class="ps_control">
			<text>订单号：{{ order_no }}</text>
			<text class="copy_btn" @click="copy(order_no)">复制</text>
		</view>
		<view class="ps_money">
			已付金额：<text>￥{{ total }}</text>
		</view>
		<view class="ps_bottom flexB">
			<view class="left" @click="again">继续下单</view>
			<view class="right" @click="lookOrder">订单详情</view>
		</view>
	</view>
</template>

<script>
// import { handleClipboard } from '../../common/util/index.js';
export default {
	data() {
		return {
			order_no: '',
			total: 200,
			data: {},
			type: ''
		};
	},
	onLoad(ops) {
		if (ops.order_no) {
			this.order_no = ops.order_no;
			this.total = ops.total
		}
		const form = JSON.parse(decodeURIComponent(ops.data))
		this.type = form.goods_type == 1 ? 'soap' : 'tape'
		this.data = ops.data
	},
	methods: {
		// 订单详情
		lookOrder() {
			uni.navigateTo({
				url: './orderDetail?data=' + this.data
			});
		},
		// 再次下单
		again() {
			uni.navigateTo({
				url: './goods?type=' + this.type
			});
		},
		/*复制单号*/
		copy(order_no) {
			try {
				uni.setClipboardData({
					data: order_no,
					success: () => {
						uni.showToast({
							title: '复制成功'
						})
					}
				})
			} catch (e) {
				uni.showModal({
					content: '您的手机暂不支持复制',
					showCancel: false
				})
			}
		},
	}
};
</script>
<style>
	page {
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
.ps {
	padding: 62rpx 56rpx 0 56rpx;
	@include flex(column)
	
	.ps_status_icon {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		image {
			width: 212rpx;
			height: 157rpx;
		}
	}
	.ps_status_text {
		color: #333333;
		font-size: 48rpx;
		text-align: center;
		margin-top: 50rpx;
	}
	.ps_control {
		margin-top: 64rpx;
		text {
			font-size: 30rpx;
		}
		.copy_btn {
			padding: 8rpx;
			font-size: 28rpx;
			height: 44rpx;
			background: #FFF4F3;
			border-radius: 4rpx 4rpx 4rpx 4rpx;
			font-weight: 400;
			color: #FB231F;
			text-align: center;
			margin-left: 20rpx;
		}
	}
	&_money {
		font-size: 32rpx;
		margin-top: 58rpx;
		text {
			font-size: 44rpx;
			font-weight: bold;
			color: #FB231F;
		}
	}
	&_bottom {
		width: 100%;
		margin-top: 140rpx;
		view {
			width: 300rpx;
			font-size: 32rpx;
			line-height: 88rpx;
			text-align: center;
			border-radius: 44rpx 44rpx 44rpx 44rpx;
		}
		.left {
			color: #FF0000;
			border: 2rpx solid #F30100;
			background: #FFF4F3;
		}
		.right {
			color: #FFFFFF;
			background: linear-gradient(93deg, #F30000 0%, #FE4815 100%);
		}
	}
}
</style>