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">{{orderStatus}}</view>
				</view>
				<view class="info grayBg cardStyle_">
					<view class="left">
						<image :src="dataInfo.image" >
					</view>
					<view class="right">
						<view class="detailed">
							<view class="title">{{dataInfo.title}}</view>
							<view class="date">{{dataInfo.startTime}}</view>
							<view class="address">{{dataInfo.address}}</view>
						</view>
						<view class="price"><text>总计</text>¥{{dataInfo.payPrice}}</view>
					</view>
				</view>
			</view>
			<view class="orderInfo">
				<view class="title">订单信息</view>
				<view class="details">
					<uv-cell :border="false" titleStyle="{color: 'red'}" title="订单编号" :value="showOrderId"></uv-cell>
					<uv-cell :border="false" titleStyle="{color: 'red'}" title="下单时间" :value="dataInfo.createTime"></uv-cell>
					<uv-cell :border="false" titleStyle="{color: 'red'}" title="订单金额" :value="'¥' + dataInfo.payPrice"></uv-cell>
					<uv-cell :border="false" titleStyle="{color: 'red'}" title="订单状态" :value="orderStatus"></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;" v-if="dataInfo.state == 1 && dataInfo.type == 0">
			<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
		},
		data() {
			return {
				orderId:'',
				dataInfo:null,
				customStyle:{
					color:'#FF5858'
				}
			}
		},
		onLoad(e) {
			this.orderId = e.id
			this.getorderInfo()
		},
		computed:{
			orderStatus() {
				let text = ""
				let state = this.dataInfo.state
				if( state == 0) {
					text = '未付款'
				}else if(state == 1) {
					text = '待参加'
				}else if(state == 2) {
					text = '已完成'
				}else{
					text = '已取消'
				}
				return text
			},
			showOrderId() {//0活动 1旅行
				let id = ""
				if(this.dataInfo.type == 0) {
					id = this.dataInfo.activityOrderId
				}else{
					id = this.dataInfo.travelOrderId
				}
				return id
			}
		},
		methods:{
			getorderInfo() {
				this.$api('orderInfo',{orderId:this.orderId},res=>{
					if(res.code == 200) {
						this.dataInfo = res.result
					}
				})
			}
		}
	}
</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>