Xurh
/
ss_dc_wechat_mini_program_h5


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467
							<!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;
        }

        th{
            max-width: 35% !important;
        }

        /* 车辆列表区域 */
        .car-list {
            margin-top: 17px;
            padding: 0 10px;
            display: flex;
            flex-direction: column;
        }

        /* 加载中提示 */
        .loading-more {
            padding: 15px;
            text-align: center;
            color: #666;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div id="app" v-cloak>
        <!-- 选择时间和车辆 -->
        <table style="padding-top: 8px;">
            <tr>
                <th width="200">预约开始时间</th>
                <td>
                    <ss-datetime-picker
                        v-model="formData.yykssj"
                        name="yykssj"
                        mode="datetime"
                        :min-date="yykssjMinDate"
                        placeholder="YYYY-MM-DD HH:mm"
                        @change="onYykssjChange"
                    />
                </td>
            </tr>
            <tr>
                <th width="200">预约结束时间</th>
                <td>
                    <ss-datetime-picker
                        v-model="formData.yyjssj"
                        name="yyjssj"
                        mode="datetime"
                        :min-date="yyjssjMinDate"
                        placeholder="YYYY-MM-DD HH:mm"
                        @change="onYyjssjChange"
                    />
                </td>
            </tr>
        </table>

        <!-- 车辆选择列表 -->
        <div class="car-list">
            <ss-car-card
                v-for="car in carList"
                :key="car.id"
                :car-data="car"
                :status="car.status"
                @select="handleCarSelect"
            />

            <!-- 加载中提示 -->
            <div v-if="loadingMore" class="loading-more">
                加载中...
            </div>
        </div>
    </div>

    <script>
        // 等待SS框架加载完成
        window.SS.ready(function () {
            // 使用SS框架的方式创建Vue实例
            window.SS.dom.initializeFormApp({
                el: '#app',
                data() {
                    return {
                        // 表单数据
                        formData: {
                            yykssj: '',  // 预约开始时间
                            yyjssj: ''   // 预约结束时间
                        },

                        // 时间选择器最小值
                        yykssjMinDate: new Date().toISOString().slice(0, 16),
                        yyjssjMinDate: new Date(new Date().getTime() + 3600 * 1000).toISOString().slice(0, 16),

                        // 车辆列表数据
                        carList: [],

                        // 加载状态
                        loading: false,
                        loadingMore: false,
                        hasMoreData: false,

                        // 分页信息
                        pageInfo: {
                            pageNo: 1,
                            rowNumPer: 10,
                            total: 0
                        }
                    }
                },

                async mounted() {
                    // 初始化页面数据
                    this.initPageData()
                },

                methods: {

                    // 初始化页面数据
                    initPageData() {
                        // 设置默认查询时间（一天后到两天后）
                        const tomorrow = new Date()
                        tomorrow.setDate(tomorrow.getDate() + 1)
                        tomorrow.setHours(9, 0, 0, 0)

                        const dayAfterTomorrow = new Date()
                        dayAfterTomorrow.setDate(dayAfterTomorrow.getDate() + 2)
                        dayAfterTomorrow.setHours(17, 0, 0, 0)

                        // 格式化为 yyyy-MM-dd HH:mm 格式
                        const formatDateTime = (date) => {
                            const year = date.getFullYear()
                            const month = String(date.getMonth() + 1).padStart(2, '0')
                            const day = String(date.getDate()).padStart(2, '0')
                            const hours = String(date.getHours()).padStart(2, '0')
                            const minutes = String(date.getMinutes()).padStart(2, '0')
                            return `${year}-${month}-${day} ${hours}:${minutes}`
                        }

                        this.formData.yykssj = formatDateTime(tomorrow)
                        this.formData.yyjssj = formatDateTime(dayAfterTomorrow)

                        console.log('初始化查询车辆:', {
                            yykssj: this.formData.yykssj,
                            yyjssj: this.formData.yyjssj
                        })

                        // 自动查询车辆
                        this.queryAvailableCars()
                    },

                    // 开始时间变化
                    onYykssjChange(val) {
                        console.log('📅 开始时间变化:', val)

                        if (val) {
                            // 更新结束时间的最小值
                            this.yyjssjMinDate = new Date(new Date(val).getTime() + 3600 * 1000).toISOString().slice(0, 16)

                            // 自动设置结束时间为开始时间 +1 天
                            const startDate = new Date(val)
                            const endDate = new Date(startDate.getTime() + 24 * 3600 * 1000) // +1天（24小时）

                            // 格式化为 yyyy-MM-dd HH:mm 格式
                            const year = endDate.getFullYear()
                            const month = String(endDate.getMonth() + 1).padStart(2, '0')
                            const day = String(endDate.getDate()).padStart(2, '0')
                            const hours = String(endDate.getHours()).padStart(2, '0')
                            const minutes = String(endDate.getMinutes()).padStart(2, '0')

                            this.formData.yyjssj = `${year}-${month}-${day} ${hours}:${minutes}`
                            console.log('⏰ 自动设置结束时间为:', this.formData.yyjssj)

                            // 清空车辆列表，等待用户确认时间后再查询
                            this.carList = []
                            this.onYyjssjChange(this.formData.yyjssj)
                        } else {
                            // 如果开始时间被清空，也清空结束时间和车辆列表
                            this.formData.yyjssj = ''
                            this.carList = []
                            console.log('🧹 已清空结束时间和车辆列表')
                        }

                        // 手动触发校验
                        this.$nextTick(() => {
                            if (window.ssVm) {
                                window.ssVm.validateField('yyjssj')
                            }
                        })
                    },

                    // 结束时间变化
                    onYyjssjChange(val) {
                        console.log('📅 结束时间变化:', val)

                        // 只有同时存在开始时间和结束时间才查询车辆
                        if (val && this.formData.yykssj) {
                            console.log('🚗 开始查询车辆...')
                            this.queryAvailableCars()
                        } else {
                            console.log('⏸️ 时间不完整，暂不查询车辆')
                        }
                    },

                    // 查询可用车辆
                    async queryAvailableCars(pageNo = 1) {
                        const queryStartTime = this.formData.yykssj
                        const queryEndTime = this.formData.yyjssj

                        if (!queryStartTime || !queryEndTime) {
                            return
                        }

                        this.loading = true
                       

                        try {
                            // 调用PC端的cl_search接口（分页）
                            const response = await window.request.post(
                                `/service?ssServ=cl_searchRcpt`,
                                {
                                    beginTime: queryStartTime,
                                    endTime: queryEndTime,
                                    pageNo: pageNo,
                                    rowNumPer: this.pageInfo.rowNumPer
                                },
                                {
                                    loading: true,
                                    formData: true
                                }
                            )

                            console.log('response.data内容:', response)

                            if (response && response.data) {
                                // 更新分页信息
                                if (response.wdPage) {
                                    this.pageInfo = {
                                        pageNo: response.wdPage.pageNo,
                                        rowNumPer: response.wdPage.rowNumPer,
                                        total: response.wdPage.rowNum
                                    }
                                }

                                // 处理返回的车辆数据
                                const processedCars = await Promise.all(response.data.data.map(async (item) => {
                                    console.log('📦 原始车辆数据:', item)

                                    // 简单的状态判断
                                    let status = 'available'

                                    if (item.zt == 1) {
                                        status = 'reserved'
                                    } else {
                                        status = 'available'
                                    }

                                    // 获取车辆类型
                                    let carType = '车辆'
                                    if (item.wplbm) {
                                        try {
                                            const typeOptions = await window.getDictOptions('wplb')
                                            const typeOption = typeOptions.find(opt => opt.v == item.wplbm)
                                            if (typeOption) {
                                                carType = typeOption.n
                                            }
                                        } catch (error) {
                                            console.warn('获取车辆类型失败:', error)
                                        }
                                    }

                                    const processedData = {
                                        id: item.wpid || item.id,
                                        plateNumber: item.mc,
                                        seats: 7,
                                        name: item.mc,
                                        color: '白色',
                                        type: carType,
                                        image: item.sltwj,
                                        wph: item.wph || '',
                                        wpcsList: item.wpcsList || [],
                                        wplbm: item.wplbm,
                                        wpid: item.wpid,
                                        status: status
                                    }

                                    console.log('✅ 处理后车辆数据:', processedData)
                                    return processedData
                                }))

                                // 如果是第一页，直接替换；否则追加
                                if (pageNo === 1) {
                                    this.carList = processedCars
                                    this.hasMoreData = this.pageInfo.total > this.pageInfo.rowNumPer
                                } else {
                                    this.carList = [...this.carList, ...processedCars]
                                    this.hasMoreData = this.pageInfo.pageNo * this.pageInfo.rowNumPer < this.pageInfo.total
                                }
                            } else {
                                if (pageNo === 1) {
                                    this.carList = []
                                }
                            }
                        } catch (error) {
                            console.error('查询车辆失败:', error)
                            if (pageNo === 1) {
                                this.carList = []
                            }
                        } finally {
                            this.loading = false
                        }
                    },

                    // 处理车辆选择
                    async handleCarSelect(car) {
                        console.log('选择车辆:', car)

                        // 检查是否已选择时间
                        if (!this.formData.yykssj || !this.formData.yyjssj) {
                            window.showToast?.('请先选择预约时间', 'error')
                            return
                        }

                        if (car.status === 'reserved') {
                            // 点击已预约车辆，跳转到详情页
                            this.navigateToDetail(car)
                        } else if (car.status === 'available') {
                            // 点击可预约车辆，跳转到预约表单页
                            this.navigateToForm(car)
                        }
                    },

                    // 跳转到预约详情页
                    navigateToDetail(car) {
                        console.log('🔗 跳转到预约详情页', car)

                        // 将完整的车辆数据存储到 sessionStorage（避免URL传递复杂对象）
                        sessionStorage.setItem('carDetailData', JSON.stringify(car))

                        // 获取当前 URL 的查询参数
                        const currentParams = new URLSearchParams(window.location.search)

                        // 构建跳转参数
                        const params = new URLSearchParams({
                            wpid: car.wpid || '',
                            yykssj: this.formData.yykssj || '',
                            yyjssj: this.formData.yyjssj || '',
                            // 保留必要的认证参数
                            JSESSIONID: currentParams.get('JSESSIONID') || '',
                            devId: currentParams.get('devId') || '',
                            sbmc: currentParams.get('sbmc') || ''
                        })

                        // 跳转到详情页
                        const targetUrl = `./mp_clyy_details.html?${params.toString()}`
                        console.log('🎯 目标 URL:', targetUrl)
                        window.location.href = targetUrl
                    },

                    // 跳转到预约表单页
                    navigateToForm(car) {
                        console.log('🔗 跳转到预约表单页', car)

                        // 将完整的车辆数据存储到 sessionStorage（避免URL传递复杂对象）
                        sessionStorage.setItem('carFormData', JSON.stringify(car))

                        // 获取当前 URL 的查询参数
                        const currentParams = new URLSearchParams(window.location.search)

                        // 构建跳转参数
                        const params = new URLSearchParams({
                            wpid: car.wpid || '',
                            yykssj: this.formData.yykssj || '',
                            yyjssj: this.formData.yyjssj || '',
                            // 保留必要的认证参数
                            JSESSIONID: currentParams.get('JSESSIONID') || '',
                            devId: currentParams.get('devId') || '',
                            sbmc: currentParams.get('sbmc') || ''
                        })

                        // 跳转到表单页
                        const targetUrl = `./mp_clyy_form.html?${params.toString()}`
                        console.log('🎯 目标 URL:', targetUrl)
                        window.location.href = targetUrl
                    },

                    // 拨打电话
                    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>