jiangchengfeiyi-xiaochengxu/pages/order/paysuccess/paysuccess.vue

<template>
	<view class="flex-col page">
		<view class="flex-row justify-center items-center">
			<image class="image" :src="success" />
			<text class="text ml-11">支付成功</text>
		</view>
		<view class="flex-row justify-between group mt-47">
			<view class="flex-col justify-start items-center text-wrapper"><text class="font text_2">返回首页</text></view>
			<view class="flex-col justify-start items-center text-wrapper_2" @click="toOrderDetail"><text
					class="font text_3">查看订单</text></view>
		</view>
		<view class="flex-col mt-47">
			<view class="flex-row justify-center items-center">
				<image class="image_2" :src="xian" />
				<text class="text_4 ml-11">更多精选商品</text>
				<image class="image_2 ml-11" :src="xian2" />
			</view>
			<view class="grid mt-19">
				<view class="flex-col grid-item" v-for="(item, index) in products" :key="index">
					<image class="shrink-0 image_3" :src="item.product_img" />
					<text class="font_2 text_5">【{{ item.product_type }}】{{ item.product_name }}</text>
					<view class="flex-row items-center group_2">
						<image class="image_4" :src="rmb" />
						<text class="font_3">{{ item.product_value }}.00</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import success from '@/pages/order/paysuccess/img/success.png'
	import xian from '@/pages/order/paysuccess/img/xian.png'
	import xian2 from '@/pages/order/paysuccess/img/xian2.png'
	import rmb from '@/pages/order/paysuccess/img/rmb.png'
	import product from '@/pages/order/paysuccess/img/product.png'
	const products = ref([{
			product_img: product,
			product_type: "非遗手工艺体验",
			product_name: "玉雕-古法制玉体验",
			product_value: 99
		},
		{
			product_img: product,
			product_type: "非遗手工艺体验",
			product_name: "玉雕-古法制玉体验",
			product_value: 99
		},
		{
			product_img: product,
			product_type: "非遗手工艺体验",
			product_name: "玉雕-古法制玉体验",
			product_value: 99
		},
		{
			product_img: product,
			product_type: "非遗手工艺体验",
			product_name: "玉雕-古法制玉体验",
			product_value: 99
		}
	])
	const toOrderDetail = () => {
		uni.navigateTo({
			url: '../productOrderDetail/productOrderDetail'
		})
	}
</script>

<style lang="scss" scoped>
	.mt-47 {
		margin-top: 88.13rpx;
	}

	.ml-11 {
		margin-left: 20.63rpx;
	}

	.mt-19 {
		margin-top: 35.63rpx;
	}

	.page {
		padding: 183.75rpx 13.59rpx 41.25rpx 16.41rpx;
		background-color: #fffaf0;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.image {
		width: 56.25rpx;
		height: 52.5rpx;
	}

	.text {
		color: #000000;
		font-size: 45rpx;
		font-family: Inter;
		line-height: 41.66rpx;
	}

	.group {
		padding: 0 66.09rpx;
	}

	.text-wrapper {
		padding: 23.34rpx 0 23.87rpx;
		background-color: #fffef8;
		border-radius: 75rpx;
		width: 221.25rpx;
		height: 78.75rpx;
		border: solid 1.88rpx #818181;
	}

	.font {
		font-size: 30rpx;
		font-family: Inter;
		line-height: 27.71rpx;
		color: #fbb612;
	}

	.text_2 {
		line-height: 27.79rpx;
	}

	.text-wrapper_2 {
		padding: 23.42rpx 0 23.89rpx;
		background-color: #fffef8;
		border-radius: 75rpx;
		width: 221.25rpx;
		height: 78.75rpx;
		border: solid 1.88rpx #818181;
	}

	.text_3 {
		line-height: 27.69rpx;
	}

	.image_2 {
		width: 251.25rpx;
		height: 1.88rpx;
	}

	.text_4 {
		color: #323232;
		font-size: 30rpx;
		font-family: Open Sans;
		line-height: 27.71rpx;
	}

	.grid {
		margin-left: 11.72rpx;
		margin-right: 14.53rpx;
		height: 965.63rpx;
		display: grid;
		grid-template-rows: repeat(2, minmax(0, 1fr));
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 30.13rpx;
		column-gap: 28.26rpx;
	}

	.grid-item {
		padding-bottom: 28.26rpx;
		background-color: #ffffff;
		border-radius: 18.75rpx;
		border: solid 1.88rpx #818181;
	}

	.image_3 {
		border-radius: 18.75rpx 18.75rpx 0rpx 0rpx;
		width: 333.75rpx;
		height: 322.5rpx;
	}

	.font_2 {
		font-size: 24.38rpx;
		font-family: Open Sans;
		line-height: 30rpx;
		color: #000000;
	}

	.text_5 {
		margin: 8.42rpx 6.69rpx 0 12.06rpx;
	}

	.group_2 {
		margin-top: 17.83rpx;
		padding: 0 22.37rpx;
	}

	.image_4 {
		width: 26.25rpx;
		height: 26.25rpx;
	}

	.font_3 {
		font-size: 30rpx;
		font-family: Times New Roman;
		line-height: 20.68rpx;
		color: #fbb612;
	}

	@import url(../../../common/css/global.css);
</style>