jzmall_uni/pages/upgrade/payResult/payResult.vue

<template>
	<view class="container">
		<view class="pay-result-top">
			<image src="/static/images/new/icon-success.png" mode="aspectFit" class="success-img"></image>
			<view class="success-text">支付成功</view>
			<view class="pay-amount">支付：¥139</view>
			<view class="btn-wrapper">
				<view class="back-btn">返回</view>
				<view class="confirm-btn">确认</view>
			</view>
		</view>
		<!-- 商品信息 -->
		<view class="product-block">
			<view class="profuct-info">
				<image mode="aspectFit" class="product-img"
					src="https://mall.zhaijieshi.cc/file/jzmall-dy/product-default.png"></image>
				<view class="info-right">
					<view class="product-name">【新客专享】全屋精细保洁3小时</view>
					<view class="appoint-info">
						<view class="appoint-state">未预约</view>
						<view class="appoint-times">可预约次数：1次</view>
					</view>
				</view>
			</view>
			<view class="appoint-btn">点击预约</view>
		</view>

		<!-- 引导 -->
		<view class="guide-block">
			<view class="title">如暂不预约，需要服务可以通过以下方式</view>
			<view class="guide-wrapper">
				<view class="guide-item">
					<image src="https://mall.zhaijieshi.cc/file/jzmall-dy/pay-icon-01.png" mode="aspectFit"
						class="guide-img"></image>
					<view>抖音APP</view>
				</view>
				<image src="https://mall.zhaijieshi.cc/file/jzmall-dy/pay-icon-arrow.png" mode="aspectFit"
					class="arrow-img"></image>
				<view class="guide-item">
					<image src="https://mall.zhaijieshi.cc/file/jzmall-dy/pay-icon-02.png" mode="aspectFit"
						class="guide-img"></image>
					<view>「我」</view>
				</view>
				<image src="https://mall.zhaijieshi.cc/file/jzmall-dy/pay-icon-arrow.png" mode="aspectFit"
					class="arrow-img"></image>
				<view class="guide-item">
					<image src="https://mall.zhaijieshi.cc/file/jzmall-dy/pay-icon-03.png" mode="aspectFit"
						class="guide-img"></image>
					<view>「更多」</view>
				</view>
				<image src="https://mall.zhaijieshi.cc/file/jzmall-dy/pay-icon-arrow.png" mode="aspectFit"
					class="arrow-img"></image>
				<view class="guide-item">
					<image src="https://mall.zhaijieshi.cc/file/jzmall-dy/pay-icon-04.png" mode="aspectFit"
						class="guide-img"></image>
					<view>「我的订单」</view>
				</view>
				<image src="https://mall.zhaijieshi.cc/file/jzmall-dy/pay-icon-arrow.png" mode="aspectFit"
					class="arrow-img"></image>
				<view class="guide-item">
					<image src="https://mall.zhaijieshi.cc/file/jzmall-dy/pay-icon-05.png" mode="aspectFit"
						class="guide-img"></image>
					<view>「去使用」</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	//获取应用实例
	const app = getApp();
	export default {
		data() {
			return {};
		}
		/**
		 * 生命周期函数--监听页面加载
		 */
		,
		onLoad: function(options) {},
		methods: {}
	};
</script>
<style>
	.container {
		padding: 0 0 160rpx;
	}

	view,
	text {
		font-size: 28rpx;
		color: #333;
	}

	.pay-result-top {
		background: url('https://mall.zhaijieshi.cc/file/jzmall-dy/pay-result.png') no-repeat center bottom;
		background-size: 750rpx 600rpx;
		width: 750rpx;
		height: 600rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 100rpx;
	}

	.success-img {
		width: 120rpx;
		height: 120rpx;
	}

	.success-text {
		color: #fff;
		font-size: 34rpx;
		margin: 56rpx 0 24rpx;
		height: 40rpx;
	}

	.pay-amount {
		font-size: 24rpx;
		color: #fff;
		margin-bottom: 60rpx;
	}

	.btn-wrapper {
		width: 440rpx;
		height: 70rpx;
		display: flex;
		justify-content: space-between;
	}

	.back-btn {
		width: 200rpx;
		height: 70rpx;
		line-height: 70rpx;
		border-radius: 70rpx;
		text-align: center;
		color: #fff;
		border: 2rpx solid #ffffff;
	}

	.confirm-btn {
		width: 200rpx;
		height: 70rpx;
		line-height: 70rpx;
		border-radius: 70rpx;
		text-align: center;
		color: #00c0ff;
		background: #fff;
	}

	.product-block {
		width: 690rpx;
		background: #ffffff;
		border-radius: 10rpx;
		margin: 28rpx 30rpx 20rpx;
		padding: 30rpx 20rpx;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}

	.profuct-info {
		height: 120rpx;
		display: flex;
		align-items: flex-start;
		width: 650rpx;
	}

	.product-img {
		width: 120rpx;
		height: 120rpx;
		border-radius: 8rpx;
		/* margin-right:20rpx; */
	}

	.info-right {
		padding-top: 4rpx;
	}

	.product-name {
		line-height: 36rpx;
		margin-bottom: 20rpx;
		font-size: 30rpx;
		padding-left: 20rpx;
		text-indent: -16rpx;
	}

	.appoint-info {
		height: 30rpx;
		display: flex;
		align-items: center;
		padding-left: 20rpx;
	}

	.appoint-state {
		color: #11bfff;
		font-size: 16rpx;
		height: 30rpx;
		line-height: 30rpx;
		padding: 0 12rpx;
		border: 2rpx solid #11bfff;
		border-radius: 8rpx;
		margin-right: 8rpx;
	}

	.appoint-times {
		font-size: 26rpx;
	}

	.appoint-btn {
		width: 140rpx;
		height: 50rpx;
		background: #00c0ff;
		line-height: 50rpx;
		border-radius: 50rpx;
		text-align: center;
		color: #fff;
		font-size: 22rpx;
	}

	.guide-block {
		width: 690rpx;
		margin: 0 30rpx;
		height: 220rpx;
		background: #ffffff;
		border-radius: 10rpx;
		padding: 30rpx 20rpx;
	}

	.guide-block .title {
		height: 26rpx;
		font-size: 26rpx;
		line-height: 26rpx;
		margin-bottom: 34rpx;
	}

	.guide-wrapper {
		padding: 0 10rpx;
		height: 96rpx;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
	}

	.guide-item {
		height: 96rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
	}

	.guide-img {
		width: 60rpx;
		height: 60rpx;
	}

	.guide-item view {
		height: 22rpx;
		font-size: 22rpx;
		line-height: 22rpx;
	}

	.arrow-img {
		width: 20rpx;
		height: 12rpx;
		margin-top: 20rpx;
	}
</style>