From 69f14e5186bac041a6a7cb8ffce37029e5befe38 Mon Sep 17 00:00:00 2001
From: BianLzhaoMin <11485688+bianliangzhaomin123@user.noreply.gitee.com>
Date: Wed, 22 Oct 2025 13:54:05 +0800
Subject: [PATCH] =?UTF-8?q?H5=E6=89=AB=E7=A0=81=E5=8A=9F=E8=83=BD=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E6=90=AD=E5=BB=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages.json                       |  16 +
 src/pages/offline-witness/index.vue  | 480 +++++++++++++++++++++++++++
 src/pages/offline-witness/upload.vue | 263 +++++++++++++++
 src/pages/sel-business/index.vue     | 109 ++++++
 4 files changed, 868 insertions(+)
 create mode 100644 src/pages/offline-witness/index.vue
 create mode 100644 src/pages/offline-witness/upload.vue
 create mode 100644 src/pages/sel-business/index.vue

diff --git a/src/pages.json b/src/pages.json
index 32ec856..4370b0a 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -9,6 +9,22 @@
         }
     },
     "pages": [
+        // 离场见证选择
+        {
+            "path": "pages/sel-business/index",
+            "style": {
+                "navigationBarTitleText": "请选择操作业务",
+                "navigationBarBackgroundColor": "#fff"
+            }
+        },
+        // 离场见证-线下
+        {
+            "path": "pages/offline-witness/index",
+            "style": {
+                "navigationBarTitleText": "custom",
+                "navigationStyle": "custom"
+            }
+        },
         // 登录页面
         {
             "path": "pages/login/index",
diff --git a/src/pages/offline-witness/index.vue b/src/pages/offline-witness/index.vue
new file mode 100644
index 0000000..d14c021
--- /dev/null
+++ b/src/pages/offline-witness/index.vue
@@ -0,0 +1,480 @@
+<template>
+    <!-- 离场见证-线下页面 -->
+    <view class="offline-witness-container">
+        <!-- 导航栏 -->
+        <view class="nav-bar">
+            <view class="nav-left" @tap="goBack">
+                <up-icon name="arrow-left" size="20" color="#333" />
+                <text class="nav-text">返回</text>
+            </view>
+            <view class="nav-title">离场见证-线下</view>
+            <view class="nav-right"></view>
+        </view>
+
+        <!-- 进度指示器 -->
+        <view>
+            <up-steps :current="currentStep">
+                <up-steps-item
+                    :key="item.title"
+                    :title="item.title"
+                    :error="item.isError"
+                    v-for="item in stepList"
+                />
+            </up-steps>
+        </view>
+        <!-- 表单内容 -->
+
+        <template v-if="currentStep === 0">
+            <view class="form-container">
+                <up-form ref="formRef" :model="formData" :rules="formRules" labelWidth="auto">
+                    <!-- 手机号码输入 -->
+                    <up-form-item prop="phone">
+                        <up-input
+                            v-model="formData.phone"
+                            placeholder="请输入手机号码"
+                            prefixIcon="phone"
+                            clearable
+                            class="custom-input"
+                        />
+                    </up-form-item>
+
+                    <!-- 验证码输入 -->
+                    <up-form-item prop="code" class="code-form-item">
+                        <view style="width: 70%">
+                            <up-input
+                                v-model="formData.code"
+                                placeholder="请输入验证码"
+                                prefixIcon="email"
+                                clearable
+                            />
+                        </view>
+
+                        <up-button
+                            :text="codeButtonText"
+                            :disabled="codeButtonDisabled"
+                            :loading="codeLoading"
+                            size="small"
+                            type="primary"
+                            class="code-button"
+                            color="linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)"
+                            @tap="getVerificationCode"
+                        />
+                    </up-form-item>
+                </up-form>
+            </view>
+
+            <!-- 下一步按钮 -->
+            <view class="button-container">
+                <up-button
+                    text="下一步"
+                    type="primary"
+                    :loading="submitLoading"
+                    class="next-button"
+                    @tap="handleNext"
+                    color="linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)"
+                />
+            </view>
+        </template>
+
+        <template v-if="currentStep === 1">
+            <Upload @goBack="onGoBack" />
+        </template>
+
+        <!-- 加载页面 -->
+        <up-loading-page
+            color="#fff"
+            fontSize="16"
+            loadingColor="#2979ff"
+            :loading="submitLoading"
+            bg-color="rgba(0,0,0,0.7)"
+            loading-text="正在验证..."
+        />
+    </view>
+</template>
+
+<script setup>
+import { ref, computed, onUnmounted } from 'vue'
+import { debounce } from 'lodash-es'
+import Upload from './upload.vue'
+
+// 响应式数据
+const formRef = ref(null)
+const submitLoading = ref(false)
+const codeLoading = ref(false)
+const countdown = ref(0)
+const countdownTimer = ref(null)
+const currentStep = ref(0)
+const stepList = ref([
+    {
+        title: '短信验证',
+        isError: false,
+    },
+    {
+        title: '见证上传',
+        isError: false,
+    },
+])
+
+// 表单数据
+const formData = ref({
+    phone: '',
+    code: '',
+})
+
+// 表单验证规则
+const formRules = ref({
+    phone: [
+        {
+            type: 'string',
+            required: true,
+            message: '请输入手机号码',
+            trigger: ['blur', 'change'],
+        },
+        {
+            pattern: /^1[3-9]\d{9}$/,
+            message: '请输入正确的手机号码',
+            trigger: ['blur', 'change'],
+        },
+    ],
+    code: [
+        {
+            type: 'string',
+            required: true,
+            message: '请输入验证码',
+            trigger: ['blur', 'change'],
+        },
+        {
+            pattern: /^\d{6}$/,
+            message: '请输入6位数字验证码',
+            trigger: ['blur', 'change'],
+        },
+    ],
+})
+
+// 计算属性
+const codeButtonText = computed(() => {
+    return countdown.value > 0 ? `${countdown.value}s后重新获取` : '获取验证码'
+})
+
+const codeButtonDisabled = computed(() => {
+    return (
+        countdown.value > 0 || !formData.value.phone || !/^1[3-9]\d{9}$/.test(formData.value.phone)
+    )
+})
+
+const submitDisabled = computed(() => {
+    return (
+        !formData.value.phone ||
+        !formData.value.code ||
+        !/^1[3-9]\d{9}$/.test(formData.value.phone) ||
+        !/^\d{6}$/.test(formData.value.code)
+    )
+})
+
+// 返回上一页
+const goBack = () => {
+    uni.navigateBack()
+}
+
+// 返回上一页
+const onGoBack = () => {
+    currentStep.value = 0
+}
+
+// 获取验证码
+const getVerificationCode = debounce(async () => {
+    if (codeButtonDisabled.value) return
+
+    try {
+        codeLoading.value = true
+
+        // 这里应该调用获取验证码的API
+        // const res = await getSmsCodeAPI({ phone: formData.value.phone })
+
+        // 模拟API调用
+        await new Promise((resolve) => setTimeout(resolve, 1000))
+
+        uni.$u.toast('验证码已发送')
+
+        // 开始倒计时
+        startCountdown()
+    } catch (error) {
+        console.error('获取验证码失败:', error)
+        uni.$u.toast('获取验证码失败，请重试')
+    } finally {
+        codeLoading.value = false
+    }
+}, 500)
+
+// 开始倒计时
+const startCountdown = () => {
+    countdown.value = 60
+
+    countdownTimer.value = setInterval(() => {
+        countdown.value--
+        if (countdown.value <= 0) {
+            clearInterval(countdownTimer.value)
+            countdownTimer.value = null
+        }
+    }, 1000)
+}
+
+// 下一步处理
+const handleNext = debounce(() => {
+    currentStep.value = 1
+    console.log(currentStep.value)
+
+    return
+    if (submitDisabled.value) return
+
+    formRef.value
+        .validate()
+        .then(async (valid) => {
+            if (valid) {
+                try {
+                    submitLoading.value = true
+
+                    // 这里应该调用验证短信验证码的API
+                    // const res = await verifySmsCodeAPI({
+                    //     phone: formData.value.phone,
+                    //     code: formData.value.code
+                    // })
+
+                    // 模拟API调用
+                    await new Promise((resolve) => setTimeout(resolve, 1500))
+
+                    uni.$u.toast('验证成功')
+
+                    // 跳转到见证上传页面
+                    setTimeout(() => {
+                        uni.navigateTo({
+                            url: '/pages/offline-witness/upload',
+                        })
+                    }, 500)
+                } catch (error) {
+                    console.error('验证失败:', error)
+                    uni.$u.toast('验证失败，请检查验证码')
+                } finally {
+                    submitLoading.value = false
+                }
+            }
+        })
+        .catch(() => {
+            submitLoading.value = false
+        })
+}, 500)
+
+// 页面卸载时清理定时器
+onUnmounted(() => {
+    if (countdownTimer.value) {
+        clearInterval(countdownTimer.value)
+    }
+})
+</script>
+
+<style lang="scss" scoped>
+.offline-witness-container {
+    min-height: 100vh;
+    background-color: #fff;
+    display: flex;
+    flex-direction: column;
+}
+
+// 导航栏
+.nav-bar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 20rpx 30rpx;
+    background-color: #fff;
+    border-bottom: 1rpx solid #f0f0f0;
+    margin-bottom: 20rpx;
+
+    .nav-left {
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+
+        .nav-text {
+            margin-left: 10rpx;
+            font-size: 28rpx;
+            color: #333;
+        }
+    }
+
+    .nav-title {
+        font-size: 32rpx;
+        font-weight: 600;
+        color: #333;
+    }
+
+    .nav-right {
+        width: 80rpx; // 占位，保持标题居中
+    }
+}
+
+// 进度指示器
+.progress-container {
+    padding: 60rpx 30rpx 40rpx;
+    background-color: #fff;
+
+    .progress-line {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+
+        .progress-step {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            z-index: 2;
+
+            .step-circle {
+                width: 40rpx;
+                height: 40rpx;
+                border-radius: 50%;
+                background-color: #e0e0e0;
+                border: 4rpx solid #e0e0e0;
+                transition: all 0.3s ease;
+
+                &.active {
+                    background-color: #2979ff;
+                    border-color: #2979ff;
+                }
+            }
+
+            .step-text {
+                margin-top: 20rpx;
+                font-size: 24rpx;
+                color: #999;
+                transition: color 0.3s ease;
+            }
+
+            &.active .step-text {
+                color: #2979ff;
+            }
+        }
+
+        .progress-connector {
+            position: absolute;
+            top: 20rpx;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 200rpx;
+            height: 4rpx;
+            background-color: #e0e0e0;
+            z-index: 1;
+            transition: background-color 0.3s ease;
+
+            &.active {
+                background-color: #2979ff;
+            }
+        }
+    }
+}
+
+// 表单容器
+.form-container {
+    flex: 1;
+    padding: 40rpx 30rpx;
+    background-color: #fff;
+
+    .code-form-item {
+        :deep(.up-form-item__body) {
+            display: flex;
+            align-items: center;
+            gap: 20rpx;
+        }
+
+        .code-input {
+            width: 70%;
+        }
+
+        .code-button {
+            // min-width: 180rpx;
+            flex: 1;
+            height: 80rpx;
+            font-size: 24rpx;
+        }
+    }
+}
+
+// 按钮容器
+.button-container {
+    padding: 40rpx 30rpx 60rpx;
+    background-color: #fff;
+
+    .next-button {
+        width: 100%;
+        height: 88rpx;
+        font-size: 32rpx;
+        font-weight: 600;
+        border-radius: 44rpx;
+        // background: linear-gradient(135deg, #2979ff, #5e35b1);
+        // box-shadow: 0 8rpx 20rpx rgba(41, 121, 255, 0.3);
+        transition: all 0.3s ease;
+
+        &:active {
+            transform: translateY(2rpx);
+            box-shadow: 0 4rpx 10rpx rgba(41, 121, 255, 0.3);
+        }
+
+        &:disabled {
+            background: #e0e0e0;
+            box-shadow: none;
+            transform: none;
+        }
+    }
+}
+
+// 自定义输入框样式
+:deep(.custom-input) {
+    .up-input__content {
+        height: 88rpx;
+        border-radius: 12rpx;
+        border: 2rpx solid #e0e0e0;
+        background-color: #fff;
+        transition: border-color 0.3s ease;
+
+        &:focus-within {
+            border-color: #2979ff;
+        }
+    }
+
+    .up-input__content__field-wrapper__field {
+        font-size: 28rpx;
+        color: #333;
+
+        &::placeholder {
+            color: #999;
+        }
+    }
+
+    .up-input__content__prefix-icon {
+        color: #999;
+        margin-right: 20rpx;
+    }
+}
+
+// 响应式适配
+@media (max-width: 480px) {
+    .progress-container {
+        padding: 40rpx 20rpx 30rpx;
+
+        .progress-line {
+            .progress-connector {
+                width: 150rpx;
+            }
+        }
+    }
+
+    .form-container {
+        padding: 30rpx 20rpx;
+    }
+
+    .button-container {
+        padding: 30rpx 20rpx 40rpx;
+    }
+}
+</style>
diff --git a/src/pages/offline-witness/upload.vue b/src/pages/offline-witness/upload.vue
new file mode 100644
index 0000000..d92ba59
--- /dev/null
+++ b/src/pages/offline-witness/upload.vue
@@ -0,0 +1,263 @@
+<template>
+    <!-- 人员出场资料上传 -->
+    <view class="data-upload">
+        <!-- 人员信息 -->
+        <view class="person-info">
+            <view>
+                <text>姓名</text>
+                <text>
+                    {{ exitParams?.name }}
+                </text>
+            </view>
+            <view>
+                <text>身份证号</text>
+                <text>
+                    {{ exitParams?.idNumber }}
+                </text>
+            </view>
+            <view>
+                <text>工程名称</text>
+                <text>
+                    {{ exitParams?.proName }}
+                </text>
+            </view>
+            <view>
+                <text>分包商名称</text>
+                <text>
+                    {{ exitParams?.subName }}
+                </text>
+            </view>
+            <view>
+                <text>班组名称</text>
+                <text>
+                    {{ exitParams?.teamName }}
+                </text>
+            </view>
+        </view>
+
+        <view class="red-text exit-title"> 离场工资结算确认单 </view>
+
+        <view class="upload-content">
+            <text>离场工资结算确认单</text>
+
+            <up-upload
+                multiple
+                :maxCount="3"
+                accept="image"
+                @delete="deletePic"
+                :fileList="fileList"
+                @afterRead="afterRead"
+                :capture="['camera']"
+            />
+        </view>
+
+        <view class="confirm-btn">
+            <up-button
+                color="linear-gradient(135deg, #bdc3c7 0%, #2c3e50 100%)"
+                @click="goBack"
+                text="上一步"
+            />
+            <up-button
+                color="linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)"
+                @click="openConfirmExitModal"
+                text="提交"
+            />
+        </view>
+
+        <!-- 确认出场提示弹框 -->
+        <up-modal
+            title="出场确认"
+            :showCancelButton="true"
+            content="是否确认将人员出场？"
+            :show="showModalConfirmExit"
+            @confirm="onConfirmExit"
+            @cancel="onCancelConfirmExit"
+        />
+    </view>
+</template>
+
+<script setup name="DataUpload">
+import { ref } from 'vue'
+import { useCommonStore } from '@/stores'
+import { onLoad } from '@dcloudio/uni-app'
+import { editPersonEntryExitApi } from '@/services/person-entry.js'
+import { decryptWithSM4, encryptWithSM4, hashWithSM3AndSalt } from '@/utils/sm.js'
+
+const commonStore = useCommonStore()
+const exitParams = ref({}) // 出场参数
+const fileList = ref([]) // 离场工资结算确认单
+const exitContent = ref('') // 离场工资结算确认单内容
+const showModalConfirmExit = ref(false) // 确认出场提示弹框
+const fileIds = ref([]) // 上传文件ID
+const emit = defineEmits(['goBack'])
+
+// 删除图片
+const deletePic = (e) => {
+    fileList.value = fileList.value.filter((item) => item.id !== e.file.id)
+}
+
+// 上传图片
+const afterRead = (e) => {
+    const type = e.file[0].type
+    if (!type.includes('image')) {
+        uni.$u.toast('请上传图片格式')
+        return
+    }
+
+    // fileList.value.push(e.file[0])
+
+    const files = [
+        {
+            file: e.file[0].url,
+            name: 'file',
+            uri: e.file[0].url,
+        },
+    ]
+
+    uni.uploadFile({
+        url: '/bmw/app/uploadFile',
+        files: files,
+        name: 'file',
+        isUploadFile: true,
+        formData: {
+            type: 1,
+        },
+        success: (res) => {
+            const data = JSON.parse(res.data)
+
+            if (data.code === 200) {
+                fileIds.value.push(data.data)
+                fileList.value.push({ ...e.file[0], id: data.data })
+            } else {
+                uni.$u.toast('上传失败：' + data.msg)
+            }
+        },
+        fail: (err) => {
+            uni.$u.toast('上传失败，请重新上传')
+        },
+    })
+}
+
+// 打开确认出场提示弹框
+const openConfirmExitModal = () => {
+    if (fileList.value.length === 0 && exitParams.value.isShanghai == 0) {
+        uni.$u.toast('请上传离场工资结算确认单')
+        return
+        // exitContent.value = `当前没有上传离场工资结算确认单，是否确认将人员 <${exitParams.value.name}> 出场？`
+    } else {
+        exitContent.value = `是否确认将人员 ${exitParams.value.name} 出场？`
+    }
+    showModalConfirmExit.value = true
+}
+
+// 确认出场
+const onConfirmExit = async () => {
+    const params = {
+        id: exitParams.value.id,
+        proId: exitParams.value.proId,
+        workerId: exitParams.value.workerId,
+        subId: exitParams.value.subId,
+        teamId: exitParams.value.teamId,
+        exitWay: 'APP',
+    }
+
+    if (fileIds.value.length > 0) {
+        params.fileIds = fileIds.value.join(',')
+    }
+
+    const res = await editPersonEntryExitApi(params)
+
+    if (res.code === 200) {
+        uni.$u.toast('出场成功')
+        setTimeout(() => {
+            uni.navigateBack()
+        }, 500)
+    } else {
+        uni.$u.toast(res.msg)
+    }
+}
+
+// 返回上一页
+const goBack = () => {
+    emit('goBack')
+}
+
+// 取消确认出场
+const onCancelConfirmExit = () => {
+    showModalConfirmExit.value = false
+}
+
+onLoad((options) => {
+    exitParams.value = JSON.parse(options?.params)
+})
+</script>
+
+<style scoped lang="scss">
+.data-upload {
+    height: 100%;
+    padding: 20rpx;
+    box-sizing: border-box;
+    background-color: #fff;
+}
+.exit-tip {
+    padding: 30rpx 15rpx;
+    background-color: #f0f2f5;
+    border-radius: 10rpx;
+}
+
+.exit-tip-item {
+    padding: 4rpx 0;
+}
+
+.person-info {
+    margin-top: 20rpx;
+    padding: 30rpx;
+    background-color: #f5f5f5;
+
+    view {
+        padding: 20rpx 0;
+        border-bottom: 1px solid #e5e5e5;
+
+        & text:first-child {
+            display: inline-block;
+            width: 200rpx;
+            color: #909399;
+        }
+
+        & text:last-child {
+            margin-left: 20rpx;
+        }
+    }
+}
+
+.exit-title {
+    padding: 18rpx 0;
+    border-bottom: 1px solid #e5e5e5;
+}
+
+.upload-content {
+    padding: 30rpx 0;
+    display: flex;
+    align-items: center;
+
+    & text:first-child {
+        display: inline-block;
+        width: 200rpx;
+        color: #909399;
+        margin-right: 50rpx;
+    }
+}
+
+.confirm-btn {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: 20rpx;
+    background-color: #fff;
+    display: flex;
+    align-items: center;
+    gap: 20rpx;
+    justify-content: space-between;
+}
+</style>
diff --git a/src/pages/sel-business/index.vue b/src/pages/sel-business/index.vue
new file mode 100644
index 0000000..460e871
--- /dev/null
+++ b/src/pages/sel-business/index.vue
@@ -0,0 +1,109 @@
+<template>
+    <!-- 离场见证选择页面 -->
+    <view class="sel-business-container">
+        <!-- 选择卡片 -->
+        <view class="business-card">
+            <!-- 线下选项 -->
+            <view class="business-option" @tap="handleSelect('offline')">
+                <view class="option-icon offline-icon">
+                    <up-icon name="account" size="40" color="#ff4757" />
+                </view>
+                <text class="option-text">离场见证-线下</text>
+            </view>
+
+            <!-- 线上选项 -->
+            <!-- <view class="business-option" @tap="handleSelect('online')">
+                <view class="option-icon online-icon">
+                    <up-icon name="account" size="40" color="#ff4757" />
+                    <view class="upload-indicator">
+                        <up-icon name="arrow-up" size="16" color="#ff4757" />
+                    </view>
+                </view>
+                <text class="option-text">离场见证-线上</text>
+            </view> -->
+        </view>
+    </view>
+</template>
+
+<script setup>
+// 选择处理
+const handleSelect = (type) => {
+    if (type === 'offline') {
+        // 跳转到线下离场见证页面
+        uni.navigateTo({
+            url: '/pages/offline-witness/index',
+        })
+    } else if (type === 'online') {
+        // 跳转到线上离场见证页面
+        uni.navigateTo({
+            url: '/pages/person-exit/index?type=online',
+        })
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.sel-business-container {
+    min-height: 100vh;
+    background-color: #f0f2f5;
+    padding: 40rpx 30rpx;
+    box-sizing: border-box;
+}
+
+.business-card {
+    width: 100%;
+    background-color: #fff;
+    border-radius: 20rpx;
+    padding: 60rpx 40rpx;
+    display: flex;
+    align-items: center;
+    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
+}
+
+.business-option {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    cursor: pointer;
+    transition: all 0.3s ease;
+
+    &:active {
+        transform: scale(0.95);
+    }
+}
+
+.option-icon {
+    width: 120rpx;
+    height: 120rpx;
+    background-color: #ffe6e6;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    margin-bottom: 20rpx;
+}
+
+.online-icon {
+    .upload-indicator {
+        position: absolute;
+        top: -8rpx;
+        right: -8rpx;
+        width: 32rpx;
+        height: 32rpx;
+        background-color: #ffe6e6;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border: 2rpx solid #fff;
+    }
+}
+
+.option-text {
+    font-size: 28rpx;
+    color: #333;
+    font-weight: 500;
+    text-align: center;
+}
+</style>