<template>
	<view class="oil-bill-detail mg-lr-24">
	<view>
		<view class="u-f u-f-jcfs mg-bot-10">
			<image src="../.././static/common/alarm.png" class="oclock mg-right-10" />
			<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="orderInfo.goodsImage"
					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">{{orderInfo.goodsName}}</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">{{orderInfo.paymentAmount}}</text>
						<text class="fs24 light-gray delete-line">￥{{orderInfo.goodsUnitPrice}}</text>
					</view>
				</view>
				<view class="fs24 light-gray">x{{orderInfo.goodsNum}}</view>
			</view>
		</view>
		
		<view class="white-bg-wrap">
			<view class="u-f u-f-jcc u-f-aic mg-bot-8">
				<view style="width: 534rpx;">
					<image style="width:100%" :mode="'widthFix'" :src="orderInfo.verificationCode"></image>
				</view>
			</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">{{orderInfo.couponCode}}</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.orderNo}}</text>
			</view>
			
			<view class="u-f u-f-jcsb u-f-aic mg-bot-30">
				<text class="light-gray">手机号</text>
				<text class="light-black">{{orderInfo.phoneNumber}}</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">{{orderInfo.createTime}}</text>
			</view>
			
			<view class="u-f u-f-jcsb u-f-aic mg-bot-30">
				<text class="light-gray">付款时间</text>
				<text class="light-black">{{orderInfo.payTime}}</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()
			this.getCheckQuanDetail()
		},
		
		methods: {
			// getOrderDetails(){
			// 	this.$http.get('/api/client/order/orderDetails', {
			// 		orderId: this.orderId
			// 	}).then(res => {
			// 		this.orderInfo = res.data.data
					
			// 	})
			// },
			getCheckQuanDetail() {
				this.$http.get('/api/client/order/verificationCode?orderId='+this.orderId).then(res => {
					this.orderInfo = res.data.data
					console.log('this.orderInfo', this.orderInfo)
				})
			}
		}
	}
</script>

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

<style lang="scss" scoped>
	.oclock {
		width: 38rpx;
		height: 38rpx;
	}
	
	.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>