feat: 订单详情

zjk

2025-12-30 e4403195f88036ec3d681d07770e48d690b05838

feat: 订单详情

 miniprogram/pages.json

@@ -81,13 +81,19 @@
        "navigationBarBackgroundColor": "#fff"
      }
    },
    {
        "path": "pages/contact/contact",
        "style": {
            "navigationBarTitleText": "联系客服",
            "navigationBarBackgroundColor": "#fff"
        }
    }
    {
      "path": "pages/contact/contact",
      "style": {
        "navigationBarTitleText": "联系客服",
        "navigationBarBackgroundColor": "#fff"
      }
    },
    {
      "path": "pages/orderDetail/orderDetail",
      "style": {
        "navigationStyle": "custom"
      }
    }
  ],
  "subPackages": [
    {

 miniprogram/pages/contact/contact.vue

@@ -33,6 +33,7 @@
    height: 100%;
    background-color: #fff;
    padding: 58rpx 58rpx;
    box-sizing: border-box;

    .contact {
        width: 635rpx;

 miniprogram/pages/orderDetail/orderDetail.vue

New file
@@ -0,0 +1,345 @@
<template>
    <view class="container">
        <u-navbar title="订单详情" :border-bottom="false" background="transparent" :is-fixed="false" title-bold></u-navbar>
        <view class="pt-27 px-27">
            <!-- 核销码 -->
            <view class="order"
                style="background: url('../../static/image/order/ticket.png');background-size: 100% 100%">
                <view class="item pt-31 px-31 pb-29">
                    <view class="name">青城后山成人票</view>
                    <view class="price"><text>￥</text>80.00</view>
                </view>
                <view class="item px-46">
                    <view class="label">使用日期</view>
                    <view class="value">2025-09-09 周五</view>
                </view>
                <view class="item mt-27 px-46">
                    <view class="label">使用时段</view>
                    <view class="value">16:00</view>
                </view>
                <view class="code">
                    <image src="../../static/image/mine/contact.png"></image>
                    <view v-if="true" class="ellipsis">
                        <image src="../../static/image/order/used.png"></image>
                    </view>
                </view>
                <view class="item px-46 mb-31">
                    <view class="label">票号</view>
                    <view class="value">
                        <view :class="{ 'text-ellipsis': true }">46456245634567457356</view>
                        <view class="btn">复制</view>
                    </view>
                </view>
                <view class="item px-46">
                    <view class="label">2025-12-31 12:00后到期</view>
                    <view class="btn">申请退款</view>
                </view>
            </view>
            <!-- 订单信息 -->
            <view class="orderInfo">
                <view class="title">订单信息</view>
                <view class="item px-46" style="align-items: flex-start;">
                    <view class="label">出行人</view>
                    <view class="value" style="flex-direction: column;">
                        <view>陈琳 510****1033</view>
                        <view>陈琳 510****1033</view>
                    </view>
                </view>
                <view class="item px-46">
                    <view class="label">联系方式</view>
                    <view class="value">199****4732</view>
                </view>
                <view class="item px-46">
                    <view class="label">订单编号</view>
                    <view class="value">
                        <view>9302 3324 1109 8842 0324</view>
                        <view class="btn">复制</view>
                    </view>
                </view>
                <view class="item px-46">
                    <view class="label">下单时间</view>
                    <view class="value">2025-09-09 11:09:09</view>
                </view>
            </view>
            <!-- 购票须知 -->
            <view class="orderInfo">
                <view class="title">购票须知</view>
                <view class="px-46 mb-38">
                    <view class="label-bg">可定日期</view>
                    <view class="value-bg">可订周一至周五；下单后不支持改期。</view>
                </view>
                <view class="px-46 mb-38">
                    <view class="label-bg">出票速度</view>
                    <view class="value-bg">平均5秒出票。</view>
                </view>
                <view class="px-46 mb-38">
                    <view class="label-bg">入园方式</view>
                    <view class="value-bg">携带【入园码】或【身份证】入园。</view>
                </view>
                <view class="px-46 mb-38">
                    <view class="label-bg">随时退</view>
                    <view class="value-bg">XXXXXXXXXXXXXXXXXXXXXXXXX</view>
                </view>
                <view class="px-46 mb-38">
                    <view class="label-bg">XXXXXX</view>
                    <view class="value-bg">XXXXXXXXXXXXXXXXXXXXXXXXX</view>
                </view>
            </view>
            <!-- 费用说明 -->
            <view class="orderInfo">
                <view class="title">费用说明</view>
                <view class="item px-46">
                    <view class="label">费用包含</view>
                    <view class="value">XXXXXXXXXXXXXXXXXXX</view>
                </view>
                <view class="item px-46">
                    <view class="label">有效期</view>
                    <view class="value">XXXXXXXXXXXXXXXXXXX</view>
                </view>
            </view>
            <!-- 其他说明 -->
            <view class="orderInfo">
                <view class="title">其他说明</view>
                <view class="item px-46">
                    <view class="label">购票说明</view>
                    <view class="value">XXXXXXXXXXXXXXXXXXX</view>
                </view>
                <view class="item px-46">
                    <view class="label">其他</view>
                    <view class="value">XXXXXXXXXXXXXXXXXXX</view>
                </view>
            </view>
            <view class="flex a-center w100 mt-38">
                <image src="/static/image/login/checkbox.png" class="w-35 h-35 shrink0 mr-19" />
                <!-- <view @tap.stop="isChecked = !isChecked" v-else class="w-35 h-35 shrink0 mr-19 br50 border1" /> -->
                <view class="fs-23">
                    阅读并同意
                    <span @tap.stop="toAgreement" class="color1">《青城山票务预定条款》</span>
                    <span @tap.stop="toAgreement" class="color1">《用户隐私协议》</span>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">

const toAgreement = () => {
    uni.navigateTo({
        url: "/pagesA/agreement/agreement?title=用户注册隐私协议&type=1",
    });
};

</script>

<style>
page {
    background-color: #F5F6F7 !important;
    height: 100%;
}
</style>
<style lang="scss">
.container {
    width: 100%;
    // height: 100%;
    box-sizing: border-box;
    background: linear-gradient(180deg, rgba(6, 197, 132, 0.4) 0%, rgba(6, 197, 132, 0) 317rpx);
    padding-bottom: 0;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);


    .order {
        width: 696rpx;
        height: 908rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;

        .code {
            margin-top: 87rpx;
            margin-bottom: 87rpx;
            width: 365rpx;
            height: 365rpx;
            position: relative;
            image {
                width: 100%;
                height: 100%;
            }
            .ellipsis {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(255,255,255,0.7);
                display: flex;
                align-items: center;
                justify-content: center;
                image {
                    width: 285rpx;
                    height: 231rpx;
                }
            }
        }

        .item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;

            .name {
                font-family: PingFangSC, PingFang SC;
                font-weight: 600;
                font-size: 38rpx;
                color: #191F3F;
                line-height: 54rpx;
            }

            .price {
                font-family: PingFangSC, PingFang SC;
                font-weight: 600;
                font-size: 38rpx;
                color: #FF6257;
                line-height: 38rpx;

                text {
                    font-size: 27rpx;
                }
            }

            .label {
                font-family: PingFang-SC, PingFang-SC;
                font-weight: 500;
                font-size: 27rpx;
                color: rgba(0, 0, 0, 0.65);
                line-height: 38rpx;
            }

            .value {
                font-family: PingFangSC, PingFang SC;
                font-weight: 600;
                font-size: 27rpx;
                color: #191F3F;
                line-height: 38rpx;
                display: flex;
                align-items: center;
            }

            .btn {
                height: 46rpx;
                background: rgba(0, 0, 0, 0.04);
                border-radius: 12rpx;
                border: 2rpx solid #E9E9E9;
                box-sizing: border-box;
                padding: 0 19rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                font-family: PingFang-SC, PingFang-SC;
                font-weight: 500;
                font-size: 23rpx;
                color: #8C8C8C;
                line-height: 23rpx;
                margin-left: 12rpx;
            }
        }

        .text-ellipsis {
            text-decoration: line-through;
        }
    }

    .orderInfo {
        width: 696rpx;
        background: #FFFFFF;
        border-radius: 19rpx;
        margin-top: 27rpx;
        overflow: hidden;

        .title {
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            font-size: 31rpx;
            color: #303133;
            line-height: 35rpx;
            padding-top: 27rpx;
            padding-left: 27rpx;
            margin-bottom: 29rpx;
        }

        .label-bg {
            width: 100%;
            height: 46rpx;
            background: linear-gradient(270deg, rgba(238, 255, 249, 0) 0%, #D8FFF2 100%);
            border-radius: 12rpx;
            margin-bottom: 12rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            font-size: 23rpx;
            color: #000000;
            line-height: 46rpx;
            padding-left: 12rpx;
        }

        .value-bg {
            width: 100%;
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            font-size: 27rpx;
            color: #191F3F;
            line-height: 38rpx;
        }

        .item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            margin-bottom: 38rpx;

            .label {
                font-family: PingFang-SC, PingFang-SC;
                font-weight: 500;
                font-size: 27rpx;
                color: rgba(0, 0, 0, 0.65);
                line-height: 38rpx;
            }

            .value {
                font-family: PingFangSC, PingFang SC;
                font-weight: 600;
                font-size: 27rpx;
                color: #191F3F;
                line-height: 38rpx;
                display: flex;
                align-items: center;
            }

            .btn {
                height: 46rpx;
                background: rgba(0, 0, 0, 0.04);
                border-radius: 12rpx;
                border: 2rpx solid #E9E9E9;
                box-sizing: border-box;
                padding: 0 19rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                font-family: PingFang-SC, PingFang-SC;
                font-weight: 500;
                font-size: 23rpx;
                color: #8C8C8C;
                line-height: 23rpx;
                margin-left: 12rpx;
            }
        }
    }

    .color1 {
        color: #06C584;
    }
}
</style>

 miniprogram/static/image/order/expired.png

 miniprogram/static/image/order/ticket.png

 miniprogram/static/image/order/used.png