<template>
	<view class="oil-bill-detail mg-lr-24">
		<view>
			<view class="u-f u-f-jcfs mg-bot-10">
				<text class="oclock mg-right-10"></text>
				<text class="light-black fs32 fw700">待使用</text>
			</view>
			<view class="light-gray fs24 mg-bot-24">请在2024年04月08日(含)前到店使用</view>
		</view>

		<view class="white-bg-wrap mg-bot-20">
			<view class="u-f u-f-jcfs u-f-aic mg-bot-24">
				<!-- <image
					src="order"
					style="width: 128rpx;height: 128rpx;"
					:mode="'widthFix'"
					class="mg-right-10"
				></image> -->
				<view class="u-f u-f-fdc">
					<view class="fs28 light-black fw400 mg-bot-10">【加油团购】100面额代金券加油团购</view>
					<view class="mg-bot-10 u-f u-f-aic u-f-jcfs">
						<text class="deep-gray fs24 mg-ight-8">随时退 | 过期自动退 | 到站使用</text>
					</view>
					<view class="mg-bot-10 u-f u-f-aic u-f-jcfs">
						<text class="light-gray fs24 mg-right-8">周一至周日</text>
					</view>
				</view>
			</view>
			<view class="u-f u-f-aic u-f-jcsb">
				<view class="u-f u-f-jcsb u-f-aic" style="margin-right: 96rpx;">
					<view>
						<text class="fs24 main-color">￥</text>
						<text class="fs32 main-color mg-right-18">499</text>
						<text class="fs24 light-gray delete-line">￥699</text>
					</view>
				</view>
				<view class="fs24 light-gray">x1</view>
			</view>
		</view>

		<view class="white-bg-wrap">
			<view class="u-f u-f-jcc u-f-aic mg-bot-8">
				<!-- <image style="width: 534rpx;height: 343rpx;" src="../.././static/common/erweima.png"></image> -->
			</view>
			<view class="u-f u-f-jcfs u-f-aic fw700 fs32 mg-bot-14">
				<text class="mg-right-10">待使用券码</text>
				<text class="mg-right-10 main-color">1</text>
				<text class="font700">张</text>
			</view>
			<view class="u-f u-f-jcsb u-f-aic">
				<view class="fs32 fw700 u-f u-f-jcfs u-f-aic">
					<text class="mg-right-10">1356 5986 2563</text>
					<text class="copy"></text>
				</view>
				<text class="fs28 light-gray">待使用</text>
			</view>
		</view>

		<view class="mg-bot-20">
			<common-title :msg="'团购详情'"></common-title>
		</view>

		<view class="white-bg-wrap u-f u-f-jcsb u-f-aic mg-bot-34">
			<text class="fs28 light-black">200元代金券</text>
			<view class="u-f u-f-jcfs fs26">
				<text class="light-gray">1份</text>
				<text class="main-color">￥200</text>
			</view>
		</view>

		<view class="mg-bot-20">
			<common-title :msg="'购买须知'"></common-title>
		</view>

		<view class="white-bg-wrap">
			<view class="u-f u-f-jcfs u-f-aic fs28 light-gray mg-bot-30">
				<text class="fl-1">有效日期</text>
				<text class="fl-3">购买后30天有效</text>
			</view>

			<view class="u-f u-f-jcfs u-f-aic fs28 light-gray mg-bot-30">
				<text class="fl-1">使用时间</text>
				<text class="fl-3">营业时间内可用</text>
			</view>

			<view class="u-f u-f-jcfs u-f-aic fs28 light-gray">
				<text class="fl-1">适用规则</text>
				<text class='fl-3'>适用规则适用规则适用规则 适用规则适用规则适用规则</text>
			</view>
		</view>

		<view class="mg-bot-20">
			<common-title :msg="'订单详情'"></common-title>
		</view>

		<view class="white-bg-wrap fs28">
			<view class="u-f u-f-jcsb u-f-aic mg-bot-30">
				<text class="light-gray">留言</text>
				<text class="light-black">{{orderInfo.remark==null?"无":orderInfo.remark}}</text>
			</view>
			<view class="u-f u-f-jcsb u-f-aic mg-bot-30">
				<text class="light-gray">订单号</text>
				<text class="light-black">123456789</text>
			</view>

			<view class="u-f u-f-jcsb u-f-aic mg-bot-30">
				<text class="light-gray">手机号</text>
				<text class="light-black">177****9865</text>
			</view>

			<view class="u-f u-f-jcsb u-f-aic mg-bot-30">
				<text class="light-gray">交易方式</text>
				<text class="light-black">微信支付</text>
			</view>

			<view class="u-f u-f-jcsb u-f-aic mg-bot-30">
				<text class="light-gray">下单时间</text>
				<text class="light-black">2024-08-09 11:00</text>
			</view>

			<view class="u-f u-f-jcsb u-f-aic mg-bot-30">
				<text class="light-gray">付款时间</text>
				<text class="light-black">2024-08-09 11:00</text>
			</view>

		</view>

	</view>
</template>

<script>
	import commonTitle from "../.././components/common-title/common-title.vue"
	export default {
		components: {
			commonTitle
		},
		data() {
			return {
				orderId: '',
				status: '',
				orderInfo: {},
			}
		},
		onLoad(options) {
			this.orderId = options.orderId;
			this.status = options.status;
			this.getOrderDetails()
		},

		methods: {
			getOrderDetails() {
				this.$http.get('/api/client/order/orderDetails', {
					orderId: this.orderId
				}).then(res => {
					this.orderInfo = res.data.data

				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #FAFBFF;
	}
</style>

<style lang="scss" scoped>
	.oclock {
		width: 38rpx;
		height: 38rpx;
		// background: url(../.././static/common/small-olock.png) no-repeat center center;
		background-size: 100%;
	}

	.copy {
		width: 32rpx;
		height: 32rpx;
		// background: url(../.././static/common/copy.png) no-repeat center center;
		background-size: 100%;
	}

	.fl-1 {
		flex: 1;
	}

	.fl-3 {
		flex: 3;
	}
</style>