popularize-front/pages_order/orderDetails.vue

<template>
	<view class="orderDetails">
        <Navbar title="订单详情" :autoBack="true" :bgColor="bgColor" leftIconSize="18px" height="100rpx" :leftIconColor="leftIconColor" :titleStyle="{color:fontColor}" />
		<view class="content">
			<view class="baseInfo cardBackground_">
				<view class="statusBox">
					<i></i>
					<view class="status">待参加</view>
				</view>
				<view class="info grayBg cardStyle_">
					<view class="left">
					    <image src="https://img0.baidu.com/it/u=4274003247,920124130&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1031" alt="">
					</view>
					<view class="right">
					    <view class="detailed">
					        <view class="title">夏日去撒野旅游计划～</view>
					        <view class="date">2024.10.28 10:00</view>
					        <view class="address">成都市东丽湖露营地32号</view>
					    </view>
					    <view class="price"><text>总计</text>¥800.00</view>
					</view>
				</view>
			</view>
			<view class="orderInfo">
				<view class="title">订单信息</view>
				<view class="details">
					<uv-cell :border="false" titleStyle="{color: 'red'}" title="版本更新" value="已是新版本"></uv-cell>
					<uv-cell :border="false" titleStyle="{color: 'red'}" title="版本更新" value="已是新版本"></uv-cell>
					<uv-cell :border="false" titleStyle="{color: 'red'}" title="版本更新" value="已是新版本"></uv-cell>
					<uv-cell :border="false" titleStyle="{color: 'red'}" title="版本更新" value="已是新版本"></uv-cell>
				</view>
				
			</view>
			<view class="tips">
				<view class="title">旅行须知</view>
				<view class="details">
					<p>行程安排：请仔细阅读旅行社提供的行程安排了解每天的具体活动和时间表。 </p>
					<p>退改政策：了解清楚旅行社的退改政策，以便在必要时进行调整</p>
					<p>健康安全：携带必要的药品和个人用品，确保旅途中的健康和安全。</p>
					<p>个人需求：如果有特殊饮食要求或身体状况，请提前告知旅行社，以便他们做出相应的安排。</p>
				</view>
			</view>
		</view>
		<view style="padding: 65rpx 35rpx;">
			<uv-button :custom-style="customStyle" type="primary" shape="circle" color="#381615" text="活动签到"></uv-button>
		</view>
	</view>
</template>

<script>
	import Navbar from '@/pages/components/Navbar.vue'
    import { globalMixin } from '../pages/mixins/globalMixin';

	export default{
        mixins: [globalMixin],
        components:{
            Navbar
		},
	}
</script>
<style scoped lang="scss">
.details {
	padding: 50rpx 40rpx;
	/deep/.uv-cell {
		.uv-cell__body {
			padding: 0rpx;
			padding-bottom: 30rpx;
		}
		&:last-child {
			.uv-cell__body {
				padding-bottom: 0rpx;
			}
		}
		.uv-cell__body__content {
			.uv-cell__title-text {
				color: $uni-text-color-grey!important;
				font-size: 28rpx
			}
		}
		.uv-cell__value {
			color: #DCDCDC!important;
			font-size: 28rpx
		}
		
	}
}

.orderDetails {
	margin-top: 40rpx;
	/deep/.uv-navbar__content__title {
		color: #fff;
	}
	.content {
		padding: 0 35rpx;
		color: #fff;
		padding-top: calc(var(--status-bar-height) + 110rpx);
		.baseInfo {
			.statusBox {
				display: flex;
				align-items: center;
				padding: 33rpx 47rpx 24rpx;
				i {
					background: url('@/static/image/cart/U-status.png') no-repeat;
					background-size: 100% 100%;
					display: block;
					width: 39rpx;
					height: 34rpx;
					margin-right: 15rpx;
				}
                .status {
                    font-size: 32rpx;
                }
			}
		}
		.orderInfo,.tips {
			.title {
				font-size: 29rpx;
				padding-bottom: 26rpx;
				margin-top: 36rpx;
			}
			.details {
				background-color: $uni-color-card-background;
				border-radius: 26rpx;
			}
		}
		.tips {
			.details {
				p {
					color: #CCC;
					font-size: 25rpx;
					line-height: 50rpx;
				}
			}
		}
	}
}
</style>