Xurh
/
ss_dc_wechat_mini_program_h5


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340
							<!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;
            padding-bottom: 80px;
        }

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

        /* 预约表单 */
        .reservation-form {
            margin: 10px 0;
        }

        /* 确认弹窗内容 */
        .confirm-items {
            padding: 20px;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .confirm-item {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 17px;
            color: #333;
        }

        .confirm-item .label {
            text-align: right;
            flex: 1;
            margin-right: 10px;
        }

        .confirm-item .value {
            flex: 1;
            font-weight: 500;
        }
    </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 class="reservation-form">
            <table>
                <tr>
                    <th>开始时间</th>
                    <td>{{ formData.yykssj }}</td>
                </tr>
                <tr>
                    <th>结束时间</th>
                    <td>{{ formData.yyjssj }}</td>
                </tr>
                <tr>
                    <th>人数</th>
                    <td>
                        <ss-input v-model="formData.rs" name="rs" placeholder="请输入人数" />
                    </td>
                </tr>
                <tr>
                    <th>办事地点</th>
                    <td>
                        <ss-input v-model="formData.bsdd" name="bsdd" placeholder="请输入办事地点" />
                    </td>
                </tr>
                <tr>
                    <th>事由</th>
                    <td>
                        <ss-input v-model="formData.sy" name="sy" placeholder="请输入事由" />
                    </td>
                </tr>
            </table>
        </div>

        <!-- 底部按钮 -->
        <ss-bottom
            :buttons="bottomButtons"
            @button-click="handleBottomAction"
        ></ss-bottom>

        <!-- 确认弹窗 -->
        <ss-confirm
            v-model="showConfirm"
            title="预约确认"
            @confirm="handleConfirm"
        >
            <div class="confirm-items">
                <div class="confirm-item">
                    <span class="label">预约开始时间：</span>
                    <span class="value">{{ formData.yykssj }}</span>
                </div>
                <div class="confirm-item">
                    <span class="label">预约结束时间：</span>
                    <span class="value">{{ formData.yyjssj }}</span>
                </div>
                <div class="confirm-item">
                    <span class="label">人数：</span>
                    <span class="value">{{ formData.rs }}</span>
                </div>
                <div class="confirm-item">
                    <span class="label">办事地点：</span>
                    <span class="value">{{ formData.bsdd }}</span>
                </div>
                <div class="confirm-item">
                    <span class="label">事由：</span>
                    <span class="value">{{ formData.sy }}</span>
                </div>
            </div>
        </ss-confirm>
    </div>

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

                        // 表单数据
                        formData: {
                            yykssj: '',  // 预约开始时间
                            yyjssj: '',  // 预约结束时间
                            rs: '',      // 人数
                            bsdd: '',    // 办事地点
                            sy: ''       // 事由
                        },

                        // 底部按钮配置
                        bottomButtons: [
                            // { text: '取消', action: 'back' },
                            { text: '预约', action: 'save' }
                        ],

                        // 确认弹窗
                        showConfirm: false
                    }
                },

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

                    // 初始化校验规则
                    this.$nextTick(() => {
                        this.initValidationRules()
                    })
                },

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

                        // 解析时间参数
                        this.formData.yykssj = urlParams.get('yykssj') || ''
                        this.formData.yyjssj = urlParams.get('yyjssj') || ''

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

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

                        console.log('解析到的表单数据:', this.formData)
                        console.log('解析到的车辆数据:', this.carData)
                    },

                    // 初始化ssVm校验规则
                    initValidationRules() {
                        console.log('初始化ssVm校验规则...')

                        // 预约表单校验
                        ssVm.add('notNull', ['rs'], {
                            msgPrfx: '人数',
                            required: true
                        })

                        ssVm.add('notNull', ['bsdd'], {
                            msgPrfx: '办事地点',
                            required: true
                        })

                        ssVm.add('notNull', ['sy'], {
                            msgPrfx: '事由',
                            required: true
                        })

                        console.log('ssVm校验规则初始化完成')
                    },

                    // 底部按钮事件处理
                    handleBottomAction(data) {
                        console.log('底部按钮点击:', data)
                        switch (data.action) {
                            case 'back':
                                // 返回上一页
                                window.history.back()
                                break
                            case 'save':
                                // 使用ssVm校验预约表单
                                if (!this.validateForm()) {
                                    console.log('校验失败，中止操作')
                                    return
                                }
                                // 显示二次确认弹窗
                                this.$nextTick(() => {
                                    this.showConfirm = true
                                })
                                break
                        }
                    },

                    // 校验表单 - 使用ssVm
                    validateForm() {
                        // 使用ssVm的validateAll方法
                        const result = ssVm.validateAll()

                        if (!result.valid) {
                            console.log('表单校验失败:', result.errors)
                            // ssVm会自动显示错误信息
                            return false
                        }

                        return true
                    },

                    // 确认弹窗回调
                    async handleConfirm() {
                        await this.submitReservation()
                    },

                    // 提交预约
                    async submitReservation() {
                        try {
                            // 构建提交参数
                            const reservationParam = {
                                cdids: this.carData.id,
                                kssj: this.formData.yykssj,
                                jssj: this.formData.yyjssj,
                                mdd: this.formData.bsdd,
                                syyq: this.formData.sy,
                                syrs: this.formData.rs,
                                sfyj: 0,
                                yjsjcd: '',
                                yjms: ''
                            }

                            console.log('提交预约参数:', reservationParam)

                            // 调用PC端的cl_sureYd接口
                            const response = await window.request.post(
                                `/service?ssServ=cl_sureYd`,
                                reservationParam,
                                { loading: true, formData: true }
                            )

                            console.log('预约响应:', response)

                            if (response && response.data.msg == '提交车辆预订成功') {
                                showToastEffect('预约成功', 2000, 'success')

                                // 返回小程序
                                setTimeout(() => {
                                    // 直接调用微信小程序 API 返回
                                    if (typeof wx !== 'undefined' && wx.miniProgram) {
                                        console.log('调用 wx.miniProgram.navigateBack 返回小程序')
                                        wx.miniProgram.navigateBack({
                                            delta: 1
                                        })
                                    } else if (typeof goBack === 'function') {
                                        NavigationManager.goBack({ refreshParent: true })
                                    } else {
                                        console.warn('无法返回小程序，不在小程序环境中')
                                    }
                                }, 1500)
                            } else {
                                const errorMsg = response.data?.msg || response.message || '预约失败'
                                if (typeof showToastEffect === 'function') {
                                    showToastEffect(errorMsg, 2000, 'error')
                                } else {
                                    console.error('预约失败:', errorMsg)
                                }
                            }
                        } catch (error) {
                            console.error('预约失败:', error)
                            if (typeof showToastEffect === 'function') {
                                showToastEffect('预约失败，请重试', 2000, 'error')
                            } else {
                                console.error('预约失败，请重试')
                            }
                        }
                    }
                }
            })
        })
    </script>
</body>
</html>