popularize-front/pages_order/orderDetails.vue

<template>
	<view class="orderDetails">
		<Navbar :title="$t('pages_order.order_details.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="images" />
					</view>
					<view class="right">
						<view class="detailed">
							<view class="title">{{getTitle()}}</view>
							<view class="date">{{dataInfo.startTime}}</view>
							<view class="address">{{getAddress()}}</view>
						</view>
						<view class="price"><text>{{$t('pages_order.order_details.total')}}</text>¥{{dataInfo.payPrice}}</view><!-- 总计 -->
					</view>
				</view>
			</view>
			<view class="orderInfo">
				<view class="title">{{$t('pages_order.order_details.order_info')}}</view><!-- 订单信息 -->
				<view class="details">
					<uv-cell :border="false" titleStyle="{color: 'red'}" :title="$t('pages_order.order_details.order_number')" :value="showOrderId"></uv-cell><!-- 订单编号 -->
					<uv-cell :border="false" titleStyle="{color: 'red'}" :title="$t('pages_order.order_details.order_time')" :value="dataInfo.createTime"></uv-cell><!-- 下单时间 -->
					<uv-cell :border="false" titleStyle="{color: 'red'}" :title="$t('pages_order.order_details.order_amount')" :value="'¥' + dataInfo.payPrice"></uv-cell><!-- 订单金额 -->
					<uv-cell :border="false" titleStyle="{color: 'red'}" :title="$t('pages_order.order_details.order_status')" :value="orderStatus"></uv-cell><!-- 订单状态 -->
				</view>

			</view>
			<view class="tips">
				<view class="title">{{$t('pages_order.order_details.payment_notice')}}</view><!-- 支付须知 -->
				<view class="details">
					<uv-parse :content="configList.recharge_instructions"></uv-parse>
				</view>
			</view>
			<view class="tips" v-if="dataInfo.type == 0">
				<view class="title">{{$t('pages_order.order_details.activity_notice')}}</view><!-- 活动须知 -->
				<view class="details">
					<uv-parse :content="getHuodongText()"></uv-parse>
					<!-- <uv-parse :content="configList.huodong_text"></uv-parse> -->
				</view>
			</view>
			<view class="tips" v-else-if="dataInfo.type == 1">
				<view class="title">{{$t('pages_order.order_details.travel_notice')}}</view><!-- 旅行须知 -->
				<view class="details">
					<uv-parse :content="getLvyouText()"></uv-parse>
					<!-- <uv-parse :content="configList.withdrawal_instructions"></uv-parse> -->
				</view>
			</view>
		</view>
		<view style="padding: 65rpx 35rpx;" 
		@click="open"
		v-if="dataInfo.state == 1">
			<uv-button :custom-style="customStyle" type="primary" shape="circle" color="#381615" :text="$t('pages_order.order_details.activity_checkin')"></uv-button><!-- 活动签到 -->
		</view>
		
		<signInQrcodePopup ref="signInQrcodePopup"/>
	</view>
</template>

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

	export default {
		mixins: [globalMixin],
		components: {
			Navbar,
			signInQrcodePopup,
		},
		data() {
			return {
				orderId:'',
				dataInfo: {},
				customStyle:{
					color:'#FF5858'
				},
                detail : {},
			}
		},
		onLoad(e) {
			this.orderId = e.id
			this.getorderInfo()
		},
		computed:{
			orderStatus() {
				let state = this.dataInfo.state
				if( state == 0) {
					return this.$t('pages_order.order_details.status.unpaid') // 未付款
				}else if(state == 1) {
					return this.$t('pages_order.order_details.status.pending') // 待参加
				}else if(state == 2) {
					return this.$t('pages_order.order_details.status.completed') // 已完成
				}else{
					return this.$t('pages_order.order_details.status.cancelled') // 已取消
				}
			},
			showOrderId() {//0活动 1旅行
				let id = ""
				if(this.dataInfo.type == 0) {
					id = this.dataInfo.activityOrderId
				}else{
					id = this.dataInfo.travelOrderId
				}
				return id
			},
			images(){
				return this.dataInfo.image && this.dataInfo.image.split(',')[0]
			},
		},
		methods:{
			getorderInfo() {
				this.$api('orderInfo',{orderId:this.orderId},res=>{
					if(res.code == 200) {
						this.dataInfo = res.result.orderDetails
						this.detail = res.result
					}
				})
			},
			open(){
				this.$refs.signInQrcodePopup.open(this.orderId)
			},
			getTitle() {
				// 根据订单类型决定使用哪种对象类型进行国际化
				if (this.dataInfo.type == 0) {
					// 活动订单
					return this.$ot(this.detail.activity, 'active', 'title')
				} else {
					// 旅行订单
					return this.$ot(this.detail.travel, 'travel', 'title')
				}
			},
			getAddress() {
				// 根据订单类型决定使用哪种对象类型进行国际化
				if (this.dataInfo.type == 0) {
					// 活动订单
					return this.$ot(this.detail.activity, 'active', 'address')
				} else {
					// 旅行订单
					return this.$ot(this.detail.travel, 'travel', 'address')
				}
			},
			getHuodongText() {
				return this.$ot(this.detail.activity, 'active', 'orderDetails')
			},
			getLvyouText() {
				return this.$ot(this.detail.travel, 'travel', 'xz')
			},
		}
	}
</script>
<style scoped lang="scss">
	.orderDetails {
		padding-bottom: 80rpx;
	}
	.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>