<template>
  <div class="content-page order-preview">
    <q-card class="rounded-borders q-pa-md q-mt-md" flat>
        <div class="text-subtitle1 text-weight-bolder">訂單狀態</div>
        <div class="q-mt-lg row">
            <div class="col">
                <div class="row items-center">
                    <q-icon name="iconfont icontishi" size="32px" color="warning" />
                    <div class="q-ml-md text-h6 text-orange text-weight-bold">待支付</div>
                </div>
                <div class="q-mt-md f12 text-grey-6">請在您下單成功後30分鐘內完成支付，否則訂單會被系統自動取消</div>
            </div>
            <div class="">
                <div class="f12 text-grey-6">訂單編號：#D2022325159852</div>
                <div class="f12 text-grey-6 q-mt-md">下單日期：2023年3月14日 19:02</div>
            </div>
        </div>
        <q-separator color="grey-2" class="q-my-md" />
        <div class="row">
            <div class="text-subtitle1 col">
                <span>應付金額：</span>
                <span class="text-subtitle2">CNY</span>
                <span class="q-ml-sm text-weight-bolder">{{ moneyFormat('3580.00',2) }}</span>
            </div>
            <div class="">
                <q-btn color="primary" outline dense label="取消訂單" class="q-mr-md q-px-md"/>
                <q-btn color="primary" unelevated dense label="前往付款" class="q-px-md"/>
            </div>
        </div>
    </q-card>

    <q-card class="rounded-borders q-pa-md q-mt-md" flat>
        <div class="text-subtitle1 text-weight-bolder">商品訊息</div>
        <div class="row q-mt-md">
            <q-img
              src="http://imgfile.oytour.com/Upload/DMC/202302280651141800000000003.jpg"
              class="rounded-borders q-mr-md"
              spinner-color="grey-2"
              style="width: 150px"
            />
            <div class="col">
              <div class="text-body1 ellipsis">忠清北道私人包車一日遊｜玉笋峰悬索桥 & 单轨列车登飞凤山(滑翔伞) & 朴达岭 & 国弓体验</div>
              <div class="q-mt-sm text-grey-6">2023-03-15從成都出發 成人x2; </div>
              <div class="q-mt-sm text-dark">
                出行日期：2023年3月30日（本地时间）
              </div>
              <div class="q-mt-sm text-grey-6">
                商品類型：包車
              </div>
            </div>
          </div>
    </q-card>

    <q-card class="rounded-borders q-pa-md q-mt-md" flat>
        <div class="text-subtitle1 text-weight-bolder">訂購人訊息</div>
        <div class="f12 q-mt-sm text-grey-6">如你的预订有任何变动，我们将及时通知你</div>
        <div class="row q-col-gutter-md q-mt-md">
            <div class="col-6">
                <div class="f12 text-grey-6">姓氏</div>
                <div class="q-mt-sm text-body1">羅</div>
            </div>
            <div class="col-6">
                <div class="f12 text-grey-6">名字</div>
                <div class="q-mt-sm text-body1">超</div>
            </div>
            <div class="col-6">
                <div class="f12 text-grey-6">手機號碼</div>
                <div class="q-mt-sm text-body1">86-17308037817</div>
            </div>
            <div class="col-6">
                <div class="f12 text-grey-6">邮箱 (用于接收订单确认邮件)</div>
                <div class="q-mt-sm text-body1">alex9012@vip.qq.com</div>
            </div>
        </div>
        <div>
            <q-separator color="grey-2" class="q-my-md" />
            <div class="text-subtitle1 text-weight-bolder">用戶備註</div>
            <div class="rounded-borders bg-orange-1 col q-mt-md q-pa-md text-orange">
                凍死了防控就是大陸飛科技阿斯蒂芬盧卡斯經費達拉斯
            </div>
        </div>
    </q-card>
    
    
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>