<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) + 100rpx);
|
|
.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>
|