jiangchengfeiyi-xiaochengxu/pages/mine/bookings/bookings.vue

<template>
	<view class="flex-col page">
		<view class="flex-col section">
			<view class="flex-row justify-between self-stretch group">
				<text class="font text" @click="goto()">待消费</text>
				<text class="font text_2">已消费</text>
			</view>
			<view class="self-end section_2"></view>
		</view>
		<view class="flex-col section_3 mt-16" v-for="i in item">
			<text class="self-end font_2 text_3">已消费</text>
			<view class="flex-row items-baseline self-stretch group_2">
				<text class="font_3 text_4">订单编号：</text>
				<text class="font_3 text_5 ml-5">E20241005095840091406189</text>
			</view>
			<view class="flex-row self-stretch group_3">
				<image class="shrink-0 image"
					src="https://ide.code.fun/api/image?token=6736eddfc471750012df05d6&name=bc0e955304da0a2ccafe3a66ac1f3aca.png" />
				<view class="flex-col flex-1 group_4">
					<view class="flex-row justify-center self-stretch relative">
						<text class="font_2 text_6 pos">整套约拍</text>
						<text class="font_2 text_7">【时尚精选】</text>
					</view>
					<text class="self-start font_5 text_10">到店日期：2024-10-15</text>
					<text class="self-start font_5 text_1">具体场次：上午场（09:30-12:00）</text>
					<text class="self-stretch text_11">已选服务：妆发服务；摄影服务;室内；</text>
				</view>
				<view class="flex-row items-center shrink-0 self-start group_5">
					<text class="text_8">138.</text>
					<image class="shrink-0 image_2 image_3"
						src="https://ide.code.fun/api/image?token=6736eddfc471750012df05d6&name=6c5700b3ac5fd83a23d838cb456bdd10.png" />
					<text class="font_4 text_9">00</text>
				</view>
			</view>
			<view class="flex-row justify-end items-center self-stretch group_6">
				<text class="font_2 text_12">已付款：</text>
				<image class="image_2"
					src="https://ide.code.fun/api/image?token=6736eddfc471750012df05d6&name=ea05ec17023763edb8cfe919508e0459.png" />
				<view class="group_7">
					<text class="text_13">88</text>
					<text class="font_4 text_14">.00</text>
				</view>
			</view>
			<view class="flex-col justify-start items-center self-end text-wrapper">
				<text class="font_2 text_15">删除记录</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {ref} from 'vue'
	const goto = () => {
		uni.navigateTo({
			url: '/pages/mine/bookings/booking'
		})
	}
	const item =ref([null,null,null])
</script>

<style lang="scss" scoped>
	.ml-5 {
		margin-left: 9.38rpx;
	}

	.page {
		padding-bottom: 1085.63rpx;
		background-color: #f8e8c1;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.section {
		padding-left: 132.09rpx;
		padding-right: 116.25rpx;
		background-color: #fffef8;
	}

	.group {
		padding: 21.68rpx 0 19.16rpx;
	}

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

	.text {
		line-height: 27.6rpx;
	}

	.text_2 {
		margin-right: 10.33rpx;
		line-height: 27.6rpx;
	}

	.section_2 {
		background-color: #fb8b05;
		width: 112.5rpx;
		height: 5.63rpx;
	}

	.section_3 {
		margin-left: 16.88rpx;
		margin-right: 15rpx;
		padding: 30rpx 20.06rpx 30rpx 24.38rpx;
		background-color: #fffef8;
		border-radius: 18.75rpx;
	}

	.font_2 {
		font-size: 26.25rpx;
		font-family: Open Sans;
		line-height: 26.25rpx;
		color: #323232;
	}

	.text_3 {
		color: #fb8b05;
		line-height: 24.15rpx;
	}

	.group_2 {
		margin-top: 18.49rpx;
	}

	.font_3 {
		font-size: 22.5rpx;
		font-family: Open Sans;
		color: #818181;
	}

	.text_4 {
		line-height: 20.85rpx;
	}

	.text_5 {
		line-height: 16.54rpx;
	}

	.group_3 {
		margin-top: 29.81rpx;
	}

	.image {
		border-radius: 9.38rpx;
		width: 118.13rpx;
		height: 151.88rpx;
	}

	.group_4 {
		margin: 2.19rpx 0 5.38rpx 23.38rpx;
	}

	.text_6 {
		line-height: 24.49rpx;
	}

	.pos {
		position: absolute;
		left: 0.15rpx;
		top: 50%;
		transform: translateY(-50%);
	}

	.text_7 {
		line-height: 24.43rpx;
	}

	.font_5 {
		font-size: 22.5rpx;
		font-family: Open Sans;
		line-height: 26.25rpx;
		color: #323232;
	}

	.text_10 {
		margin-top: 21.04rpx;
	}

	.text_1 {
		margin-top: 3.39rpx;
	}

	.text_11 {
		margin-top: 19.01rpx;
		color: #939393;
		font-size: 22.5rpx;
		font-family: Inter;
		line-height: 22.97rpx;
	}

	.group_5 {
		margin-left: 3.52rpx;
		margin-right: 14.42rpx;
	}

	.text_8 {
		margin-left: 25.03rpx;
		color: #323232;
		font-size: 33.75rpx;
		font-family: Open Sans;
		font-weight: 600;
		line-height: 24.88rpx;
	}

	.image_2 {
		width: 30rpx;
		height: 26.25rpx;
	}

	.image_3 {
		margin-left: -90.66rpx;
	}

	.font_4 {
		font-size: 26.25rpx;
		font-family: Open Sans;
		line-height: 19.29rpx;
		font-weight: 600;
	}

	.text_9 {
		margin-left: 61.14rpx;
		color: #323232;
	}

	.group_6 {
		margin-top: 37.93rpx;
		padding: 0 9.38rpx;
	}

	.text_12 {
		margin-right: -8.06rpx;
		line-height: 24.23rpx;
	}

	.group_7 {
		line-height: 21.99rpx;
		height: 22.05rpx;
	}

	.text_13 {
		color: #fb8b05;
		font-size: 30rpx;
		font-family: Open Sans;
		font-weight: 600;
		line-height: 21.99rpx;
	}

	.text_14 {
		color: #fb8b05;
		line-height: 19.39rpx;
	}

	.text-wrapper {
		margin-right: 2.44rpx;
		margin-top: 35.4rpx;
		padding: 13.54rpx 0 14.83rpx;
		background-color: #fffef8;
		border-radius: 75rpx;
		width: 155.63rpx;
		border: solid 1.88rpx #cbcbcb;
	}

	.text_15 {
		line-height: 24.13rpx;
	}

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