Xurh
/
ss_dc_wechat_mini_program_h5


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>预约详情</title>
    <script src="/js/mp_base/base.js"></script>

    <style>
        /* 防止Vue模板闪烁 */
        [v-cloak] {
            display: none !important;
        }

        #app {
            background: #f5f5f5;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        /* 当前车辆信息区域 */
        .current-car-section {
            padding: 10px;
            padding-bottom: 0;
        }

        /* 预约详情 */
        .reservation-detail {
            margin: 10px 0;
        }

        /* 电话链接样式 */
        .phone-link {
            color: #007AFF;
            text-decoration: underline;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="app" v-cloak>
        <!-- 当前车辆信息卡片 -->
        <div class="current-car-section">
            <ss-car-card
                v-if="carData"
                :car-data="carData"
                :status="carData.status"
            />
        </div>

        <!-- 预约详情 -->
        <div v-if="reservationDetail" class="reservation-detail">
            <table>
                <tr>
                    <th>开始时间</th>
                    <td>{{ formatDate(reservationDetail.kssj, 'yyyy-MM-dd HH:mm:ss') }}</td>
                </tr>
                <tr>
                    <th>结束时间</th>
                    <td>{{ formatDate(reservationDetail.jssj, 'yyyy-MM-dd HH:mm:ss') }}</td>
                </tr>
                <tr>
                    <th>使用人</th>
                    <td>{{ reservationDetail.ydr }}</td>
                </tr>
                <tr>
                    <th>联系电话</th>
                    <td>
                        <span class="phone-link" @click="makePhoneCall(reservationDetail.ydrdh)">
                            {{ reservationDetail.ydrdh }}
                        </span>
                    </td>
                </tr>
            </table>
        </div>
    </div>

    <script>
        // 等待SS框架加载完成
        window.SS.ready(function () {
            // 使用SS框架的方式创建Vue实例
            window.SS.dom.initializeFormApp({
                el: '#app',
                data() {
                    return {
                        // 车辆信息
                        carData: null,

                        // 预约详情
                        reservationDetail: null,

                        // URL参数
                        urlParams: {
                            wpid: '',
                            yykssj: '',
                            yyjssj: ''
                        }
                    }
                },

                async mounted() {
                    // 解析URL参数
                    this.parseUrlParams()

                    // 加载预约详情
                    await this.loadReservationDetail()
                },

                methods: {
                    // 解析URL参数
                    parseUrlParams() {
                        const urlParams = new URLSearchParams(window.location.search)

                        this.urlParams.wpid = urlParams.get('wpid') || ''
                        this.urlParams.yykssj = urlParams.get('yykssj') || ''
                        this.urlParams.yyjssj = urlParams.get('yyjssj') || ''

                        // 从 sessionStorage 获取完整的车辆数据（包含 wpcsList 等数组字段）
                        const carDataStr = sessionStorage.getItem('carDetailData')
                        if (carDataStr) {
                            try {
                                this.carData = JSON.parse(carDataStr)
                                console.log('从 sessionStorage 获取车辆数据:', this.carData)

                                // 使用后清除，避免占用空间
                                sessionStorage.removeItem('carDetailData')
                            } catch (error) {
                                console.error('解析车辆数据失败:', error)
                            }
                        }

                        console.log('解析到的URL参数:', this.urlParams)
                        console.log('解析到的车辆数据:', this.carData)
                    },

                    // 加载预约详情
                    async loadReservationDetail() {
                        if (!this.urlParams.wpid || !this.urlParams.yykssj || !this.urlParams.yyjssj) {
                            console.error('缺少必要参数')
                            window.showToast?.('参数错误', 'error')
                            return
                        }

                        try {
                            // 查询预约详情
                            const res = await window.request.post(
                                `/service?ssServ=cl_searchYd`,
                                {
                                    wpid: this.urlParams.wpid,
                                    kssj: this.urlParams.yykssj,
                                    jssj: this.urlParams.yyjssj
                                },
                                { loading: true, formData: true }
                            )

                            console.log('查询预约响应:', res)

                            if (res.data && res.data.wpydlist && res.data.wpydlist.length > 0) {
                                this.reservationDetail = res.data.wpydlist[0]
                            } else {
                                window.showToast?.('未找到预约信息', 'error')
                            }
                        } catch (error) {
                            console.error('加载预约详情失败:', error)
                            window.showToast?.('加载失败', 'error')
                        }
                    },

                    // 拨打电话
                    makePhoneCall(phoneNumber) {
                        window.location.href = `tel:${phoneNumber}`
                    },

                    // 格式化日期 - 使用 dayjs
                    formatDate(dateStr, format) {
                        if (!dateStr) return ''

                        console.log('formatDate 输入:', dateStr, '格式要求:', format)

                        // 检查 dayjs 是否可用
                        if (typeof dayjs === 'undefined') {
                            console.error('dayjs 未加载')
                            return dateStr
                        }

                        // 清理字符串：移除特殊空格字符（如 \u202F），替换为普通空格
                        const cleanedDateStr = dateStr
                            .replace(/[\u202F\u00A0]/g, ' ')  // 替换不间断空格
                            .replace(/\s+/g, ' ')              // 多个空格合并为一个
                            .trim()

                        console.log('清理后的字符串:', cleanedDateStr)

                        // 尝试使用原生 Date 解析（兼容性最好）
                        let date = null
                        try {
                            const jsDate = new Date(cleanedDateStr)
                            if (!isNaN(jsDate.getTime())) {
                                date = dayjs(jsDate)
                            }
                        } catch (e) {
                            console.warn('Date 解析失败:', e)
                        }

                        // 如果 Date 解析失败，尝试直接用 dayjs
                        if (!date || !date.isValid()) {
                            date = dayjs(cleanedDateStr)
                        }

                        console.log('dayjs 解析结果:', date, 'isValid:', date.isValid())

                        if (!date.isValid()) {
                            console.warn('无效的日期格式:', dateStr)
                            return dateStr // 如果无法解析，返回原始字符串
                        }

                        // dayjs 的格式化映射
                        // yyyy -> YYYY, MM -> MM, dd -> DD, HH -> HH, mm -> mm, ss -> ss
                        const dayjsFormat = format
                            .replace('yyyy', 'YYYY')
                            .replace('dd', 'DD')

                        console.log('dayjs 格式:', dayjsFormat)

                        const result = date.format(dayjsFormat)
                        console.log('格式化结果:', result)

                        return result
                    }
                }
            })
        })
    </script>
</body>
</html>