bonus
/
sh_real_name_system_app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

H5扫码功能页面搭建

This commit is contained in:
BianLzhaoMin 2025-10-22 13:54:05 +08:00
parent 48d9ad730c
commit 69f14e5186
4 changed files with 868 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/pages.json
View File

@ -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",

480
src/pages/offline-witness/index.vue Normal file
View File

@ -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>

263
src/pages/offline-witness/upload.vue Normal file
View File

@ -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>

109
src/pages/sel-business/index.vue Normal file
View File

@ -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>