769 lines
23 KiB
Vue
769 lines
23 KiB
Vue
<template>
|
||
<!-- 编码出库-->
|
||
<view class="page-container">
|
||
|
||
<text class="steps-title">领用申请详情</text>
|
||
<!-- <uni-steps
|
||
:options="auditingList.map(item => ({ title: item.nodeName,desc: `${item.isAccept == 0 ? '待审批' : item.isAccept == 1 ? '已通过' : '已驳回'}${item.createTime ? ` ${item.createTime}` : ''}` ,
|
||
status: 'finish',
|
||
|
||
}))" style="margin-bottom: 5px;"
|
||
:active="3" >
|
||
</uni-steps> -->
|
||
<!-- 自定义横向步骤条 -->
|
||
<view class="custom-steps horizontal">
|
||
<view
|
||
v-for="(item, index) in auditingList"
|
||
:key="index"
|
||
class="step-item"
|
||
>
|
||
<!-- 步骤图标 -->
|
||
<view
|
||
class="step-icon"
|
||
:class="{
|
||
'pending': item.isAccept === 0,
|
||
'approved': item.isAccept === 1,
|
||
'rejected': item.isAccept !== 0 && item.isAccept !== 1
|
||
}"
|
||
>
|
||
{{ index + 1 }}
|
||
</view>
|
||
<!-- 步骤连接线 -->
|
||
<view
|
||
v-if="index < auditingList.length - 1"
|
||
class="step-line"
|
||
:class="{
|
||
'approved': item.isAccept === 1,
|
||
'rejected': item.isAccept !== 0 && item.isAccept !== 1
|
||
}"
|
||
></view>
|
||
<!-- 步骤标题和描述 -->
|
||
<view class="step-content">
|
||
<text
|
||
class="step-title"
|
||
:class="{
|
||
'pending': item.isAccept === 0,
|
||
'approved': item.isAccept === 1,
|
||
'rejected': item.isAccept !== 0 && item.isAccept !== 1
|
||
}"
|
||
>
|
||
{{ item.nodeName }}
|
||
</text>
|
||
<text
|
||
class="step-desc"
|
||
:class="{
|
||
'pending': item.isAccept === 0,
|
||
'approved': item.isAccept === 1,
|
||
'rejected': item.isAccept !== 0 && item.isAccept !== 1
|
||
}"
|
||
>
|
||
{{ item.isAccept == 0 ? '待审批' : item.isAccept == 1 ? '已通过' : '已驳回' }}
|
||
{{ item.createTime ? ` ${item.createTime}` : '' }}
|
||
</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 按钮区域 -->
|
||
<view class="table-list-item" v-if="type==1">
|
||
<uni-row :gutter="24" style="display: flex; align-items: center" justify="center">
|
||
<uni-col :span="8">
|
||
<view
|
||
class="coding-btn search-btn"
|
||
@tap="handleReview(1)"
|
||
>通过</view>
|
||
</uni-col>
|
||
<uni-col :span="8">
|
||
<view
|
||
class="coding-btn search-btnTwo"
|
||
@tap="handleReview(2)"
|
||
>驳回</view>
|
||
</uni-col>
|
||
</uni-row>
|
||
</view>
|
||
<!-- 表单信息区域 -->
|
||
<scroll-view scroll-y style="height: 100vh;margin-top: 5px">
|
||
<view class="form-section">
|
||
<view class="section-header" @tap="toggleForm">
|
||
<text class="title">基本信息</text>
|
||
<text class="toggle-icon" :class="{ 'is-expanded': isExpanded }">›</text>
|
||
</view>
|
||
<view class="form-content" :class="{ 'is-expanded': isExpanded }">
|
||
<uni-forms :model="formData" label-width="100" :border="true">
|
||
<uni-forms-item label="领料单位：" name="leaseUnit">
|
||
<span class="form-view">{{ formData.leaseUnit }}</span>
|
||
</uni-forms-item>
|
||
<uni-forms-item label="领料工程：" name="leaseProject">
|
||
<span class="form-view">{{ formData.leaseProject }}</span>
|
||
</uni-forms-item>
|
||
<uni-forms-item label="领料人：" name="leasePerson">
|
||
<span class="form-view">{{ formData.leasePerson }}</span>
|
||
</uni-forms-item>
|
||
<uni-forms-item label="采购申请编号：" name="applyCode">
|
||
<span class="form-view">{{ formData.applyCode }}</span>
|
||
</uni-forms-item>
|
||
<uni-forms-item label="标准配置：" name="leaseUnit">
|
||
<span class="form-view">{{ formData.leaseUnit }}</span>
|
||
</uni-forms-item>
|
||
<uni-forms-item label="联系电话：" name="phone">
|
||
<span class="form-view">{{ formData.phone }}</span>
|
||
</uni-forms-item>
|
||
<uni-forms-item label="类型规格：" name="maTypeNames">
|
||
<span class="form-view">{{ formData.maTypeNames }}</span>
|
||
</uni-forms-item>
|
||
</uni-forms>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
<scroll-view scroll-y @scrolltolower="onScrollTolower" style="padding-bottom: 90rpx">
|
||
<div style="width: 92%;height: auto;margin: 5px;">
|
||
<uni-table stripe emptyText="暂无更多数据" >
|
||
<!-- 表头行 -->
|
||
<uni-tr>
|
||
<uni-th width="60px" style="font-size: 24rpx;" align="center">序号</uni-th>
|
||
<uni-th width="100px" style="font-size: 24rpx;" align="center">类型名称</uni-th>
|
||
<uni-th width="100px" style="font-size: 24rpx;" align="center">规格型号</uni-th>
|
||
<uni-th width="70px" style="font-size: 24rpx;" align="center">计量单位</uni-th>
|
||
<uni-th width="100px" style="font-size: 24rpx;" align="center">预领数量</uni-th>
|
||
<uni-th width="60px" style="font-size: 24rpx;" align="center">备注</uni-th>
|
||
</uni-tr>
|
||
<!-- 表格数据行 -->
|
||
<uni-tr v-for="(item,index) in codeDeviceList" :key="item.id">
|
||
<uni-td style="font-size: 24rpx;text-align: center;">{{ index + 1 }}</uni-td>
|
||
<uni-td style="font-size: 24rpx;text-align: center;">{{item.maTypeName}}</uni-td>
|
||
<uni-td style="font-size: 24rpx;text-align: center;">{{item.typeName}}</uni-td>
|
||
<uni-td style="font-size: 24rpx;text-align: center;">{{item.unitName}}</uni-td>
|
||
<uni-td style="font-size: 24rpx;text-align: center;">{{item.preNum}}</uni-td>
|
||
<uni-td style="font-size: 24rpx;text-align: center;">{{item.remark}}</uni-td>
|
||
</uni-tr>
|
||
</uni-table>
|
||
</div>
|
||
<!--
|
||
<view class="loading-text">
|
||
{{ finish ? '没有更多数据了~' : '正在加载...' }}
|
||
</view> -->
|
||
</scroll-view>
|
||
</scroll-view>
|
||
</view>
|
||
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, computed, onUnmounted } from 'vue'
|
||
import { onLoad, onShow, } from '@dcloudio/uni-app'
|
||
import { getCodeDeviceListAPI, setOutboundNumAPI, } from '@/services/picking/outbound.js'
|
||
import { getAuditInfoAPI,receiveDetailAPI,submitAuditingApi } from '@/services/picking/review.js'
|
||
|
||
import { debounce } from 'lodash-es'
|
||
|
||
|
||
// const query = defineProps() // 获取上级页面传递的路由参数
|
||
// const queryParams = JSON.parse(query.queryParams)
|
||
const queryParams = ref({
|
||
id: '', //任务id
|
||
nodeId: '', //节点id
|
||
})
|
||
const queryParamsInfo = ref({})
|
||
const formData = ref({})
|
||
const codeDeviceList = ref([])
|
||
|
||
const total = ref(0)
|
||
|
||
// 编码设备列表查询参数
|
||
const queryCodeParams = ref({
|
||
pageNum: 1,
|
||
pageSize: 10,
|
||
typeId: '',
|
||
maStatus: 1,
|
||
maCode: '',
|
||
})
|
||
|
||
const auditingParams = ref({
|
||
nodeId: '', // 当前审核记录的id
|
||
remark: '', // 审核意见
|
||
typeId: '', // 当前审核记录中的 typeId
|
||
taskId: '', // 外层列表的taskId
|
||
isAccept: '', // 审批结果 1. 通过 2. 驳回
|
||
recordId: '',
|
||
nextNodeId: '' // 下个流程节点ID
|
||
})
|
||
|
||
const auditingList = ref([]) //流程记录
|
||
// 控制表单展开收起
|
||
const isExpanded = ref(true)
|
||
|
||
// 切换表单展开状态
|
||
const toggleForm = () => {
|
||
isExpanded.value = !isExpanded.value
|
||
}
|
||
|
||
const type = ref(1)
|
||
|
||
const userId = uni.getStorageSync('id')
|
||
// 页面加载完毕
|
||
onLoad((options) => {
|
||
console.log("options",options)
|
||
queryParams.value = JSON.parse(options.params)
|
||
auditingParams.value.taskId = queryParams.value.taskId
|
||
type.value = queryParams.value.type
|
||
})
|
||
|
||
onShow(() => {
|
||
console.log(queryParams.value)
|
||
// getCodeDetailData(queryParams.value.id,queryParams.value.publishTask,queryParams.value.typeId)//获取详情
|
||
getReviewInfo(queryParams.value.id)
|
||
fetchAuditInfo()
|
||
})
|
||
// 获取详情列表
|
||
const getReviewInfo = async (id) => {
|
||
console.log("yyyyyyyyyy",id)
|
||
const res = await receiveDetailAPI(id)
|
||
console.log("zzzzzzzzz",res)
|
||
formData.value=res.data.leaseApplyInfo;
|
||
|
||
|
||
// queryCodeParams.value.typeId = queryParams.value.typeId;
|
||
// queryCodeParams.value.pageNum = 1;
|
||
codeDeviceList.value = res.data.leaseApplyDetailsList;
|
||
// getCodeDeviceListData()//获取编码列表
|
||
}
|
||
|
||
const fetchAuditInfo = async () => {
|
||
try {
|
||
console.log('xxxxxxxxxxxxxx',queryParams.value.id)
|
||
// 调用导入的 API 函数
|
||
const res = await getAuditInfoAPI({taskId:queryParams.value.taskId})
|
||
console.log('🚀 ~ fetchAuditInfo ~ res:', res)
|
||
auditingList.value = res.rows
|
||
console.log('🚀 ~ fetchAuditInfo ~ auditingList:', auditingList.value)
|
||
} catch (error) {
|
||
// 打印错误信息
|
||
console.log('🚀 ~ fetchAuditInfo ~ error:', error)
|
||
}
|
||
}
|
||
|
||
// 获取列表
|
||
const getCodeDeviceListData = async () => {
|
||
const res = await getCodeDeviceListAPI(queryCodeParams.value)
|
||
codeDeviceList.value.push(...res.rows)
|
||
if (codeDeviceList.value.length > 0) {
|
||
codeDeviceList.value = codeDeviceList.value.map((e) => {
|
||
return { ...e, checked: false }
|
||
})
|
||
}
|
||
total.value = res.total
|
||
}
|
||
|
||
|
||
// // 编码搜索按钮
|
||
// const onCodeSearch = () => {
|
||
// queryCodeParams.value.pageNum = 1
|
||
// codeDeviceList.value = []
|
||
// getCodeDeviceListData()
|
||
// }
|
||
|
||
// 处理审核操作
|
||
const handleReview = (action) => {
|
||
uni.showModal({
|
||
title: action == 1 ? '通过' : '驳回',
|
||
content: '请输入审核意见',
|
||
editable: true,
|
||
confirmText: '确认',
|
||
cancelText: '取消',
|
||
success: async (res) => {
|
||
if (res.confirm) {
|
||
const comment = res.content;
|
||
// 组装参数
|
||
const currentAuditing = auditingList.value.filter(e => e.configValues.includes(userId)) // 获取当前审核的节点
|
||
const currentIndex = auditingList.value.findIndex(e => e.configValues.includes(userId)) // 获取当前的索引
|
||
auditingParams.value.remark = comment
|
||
const { recordId, id, typeId, } = currentAuditing[0]
|
||
Object.assign(auditingParams.value, {
|
||
typeId,
|
||
recordId,
|
||
nodeId: id
|
||
})
|
||
auditingParams.value.isAccept = action
|
||
if (currentIndex !== auditingList.value.length - 1) {
|
||
auditingParams.value.nextNodeId =auditingList.value[currentIndex + 1].id
|
||
}
|
||
console.log("yyyyyyyyyyyyyyy",auditingParams.value)
|
||
const submitRes = await submitAuditingApi(auditingParams.value)
|
||
console.log("zrrrrrrrrrrrrrrrrrr",submitRes)
|
||
if (submitRes.code === 200) {
|
||
uni.showToast({
|
||
title: '审核成功',
|
||
icon: 'none',
|
||
})
|
||
uni.navigateBack(); // 调接口成功后返回上一层页面
|
||
}
|
||
} else if (res.cancel) {
|
||
console.log('用户取消操作');
|
||
}
|
||
}
|
||
});
|
||
};
|
||
|
||
// 滚动触底事件
|
||
const onScrollTolower = debounce(() => {
|
||
// console.log('滚动触底--')
|
||
if (total.value > codeDeviceList.value.length) {
|
||
queryCodeParams.value.pageNum++
|
||
getCodeDeviceListData()
|
||
}
|
||
}, 500)
|
||
|
||
|
||
|
||
// 出库按钮
|
||
const onHandleOutbound = async () => {
|
||
const isSelect = codeDeviceList.value.some((e) => e.checked === true)
|
||
if (!isSelect) {
|
||
uni.showToast({
|
||
title: '请勾选需要出库的设备',
|
||
icon: 'none',
|
||
})
|
||
return
|
||
}
|
||
// 解构所需要的数据
|
||
const { typeId, parentId,publishTask } = queryParams.value
|
||
// 组装出库参数
|
||
const paramsList = []
|
||
codeDeviceList.value.map((e) => {
|
||
if (e.checked) {
|
||
paramsList.push({
|
||
leaseType: 0,
|
||
maId: e.maId,
|
||
maCode: e.maCode,
|
||
manageType: 0,
|
||
outNum: 1,
|
||
parentId,
|
||
typeId,
|
||
publishTask,
|
||
})
|
||
|
||
}
|
||
})
|
||
console.log("mmmmmmmmmmmmmmmm",paramsList)
|
||
const res = await setOutboundNumAPI({ leaseOutDetailsList: paramsList })
|
||
if (res.code === 200) {
|
||
uni.showToast({
|
||
title: '出库成功！',
|
||
icon: 'none',
|
||
})
|
||
getCodeDetailData(queryParams.value.id,queryParams.value.publishTask,queryParams.value.typeId)//获取详情
|
||
}
|
||
}
|
||
|
||
|
||
|
||
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.custom-steps {
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.custom-steps.horizontal {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.step-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
flex: 1;
|
||
position: relative;
|
||
}
|
||
|
||
.step-icon {
|
||
width: 26px;
|
||
height: 26px;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 12px;
|
||
color: white;
|
||
z-index: 1;
|
||
}
|
||
|
||
.step-icon.pending {
|
||
background-color: #fadb14;
|
||
}
|
||
|
||
.step-icon.approved {
|
||
background-color: #52c41a;
|
||
}
|
||
|
||
.step-icon.rejected {
|
||
background-color: #ff4d4f;
|
||
}
|
||
|
||
.step-line {
|
||
position: absolute;
|
||
top: 13px;
|
||
left: 50%;
|
||
width: 100%;
|
||
height: 2px;
|
||
background-color: #d9d9d9;
|
||
}
|
||
|
||
.step-line.approved {
|
||
background-color: #52c41a;
|
||
}
|
||
|
||
.step-line.rejected {
|
||
background-color: #ff4d4f;
|
||
}
|
||
|
||
.step-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
margin-top: 6px;
|
||
}
|
||
|
||
.step-title {
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
margin-bottom: 3px;
|
||
text-align: center;
|
||
}
|
||
|
||
.step-title.pending {
|
||
color: #fadb14;
|
||
}
|
||
|
||
.step-title.approved {
|
||
color: #52c41a;
|
||
}
|
||
|
||
.step-title.rejected {
|
||
color: #ff4d4f;
|
||
}
|
||
|
||
.step-desc {
|
||
font-size: 12px;
|
||
text-align: center;
|
||
color: #8c8c8c; // 默认颜色
|
||
}
|
||
|
||
.step-desc.pending {
|
||
color: #fadb14; // 待审批黄色
|
||
}
|
||
|
||
.step-desc.approved {
|
||
color: #52c41a; // 已通过绿色
|
||
}
|
||
|
||
.step-desc.rejected {
|
||
color: #ff4d4f; // 已驳回红色
|
||
}
|
||
.page-container {
|
||
display: flex;
|
||
height: 100%;
|
||
flex-direction: column;
|
||
background-color: #f7f8fa;
|
||
padding: 24rpx;
|
||
|
||
:deep(.uni-steps-item-title.accepted-title) {
|
||
color: red !important;
|
||
}
|
||
|
||
:deep(.uni-steps-item-title.rejected-title) {
|
||
color: green !important;
|
||
}
|
||
// :deep(.uni-steps-item) {
|
||
// // 这里根据实际组件的高亮样式类名进行调整
|
||
// // 假设高亮类名为 .uni-steps-item-active
|
||
// &::after {
|
||
// // 步骤连接线高亮
|
||
// background-color: #52c41a !important;
|
||
// }
|
||
// .uni-steps-item-icon {
|
||
// // 步骤图标高亮
|
||
// background-color: #52c41a !important;
|
||
// border-color: #52c41a !important;
|
||
// }
|
||
// .uni-steps-item-title {
|
||
// // 步骤标题高亮
|
||
// color: #52c41a !important;
|
||
// }
|
||
// .uni-steps-item-description {
|
||
// // 步骤描述高亮
|
||
// color: #52c41a !important;
|
||
// }
|
||
// }
|
||
.steps-title {
|
||
display: block;
|
||
text-align: center; // 文本居中
|
||
color: #008000; // 绿色文本
|
||
font-size: 32rpx; // 字体大小，可按需调整
|
||
margin-bottom: 20rpx; // 标题与步骤条的间距，可按需调整
|
||
}
|
||
.table-list-item {
|
||
background: #fff;
|
||
padding: 32rpx;
|
||
border-radius: 20rpx;
|
||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
|
||
margin-bottom: 24rpx;
|
||
|
||
// 表单样式
|
||
:deep(.uni-forms) {
|
||
.uni-forms-item {
|
||
margin-bottom: 24rpx;
|
||
padding: 0;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.uni-forms-item__label {
|
||
color: #8c8c8c;
|
||
font-size: 28rpx;
|
||
font-weight: 500;
|
||
padding: 0;
|
||
line-height: 1.8;
|
||
}
|
||
|
||
.uni-forms-item__content {
|
||
display: flex;
|
||
align-items: center;
|
||
min-height: unset;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 编码按钮组
|
||
.coding-btn {
|
||
padding: 16rpx 0;
|
||
background: linear-gradient(135deg, #4b8eff 0%, #3784fb 100%);
|
||
border-radius: 12rpx;
|
||
text-align: center;
|
||
color: #fff;
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
box-shadow: 0 6rpx 20rpx rgba(55, 132, 251, 0.2);
|
||
transition: all 0.3s ease;
|
||
|
||
&:active {
|
||
transform: scale(0.98);
|
||
opacity: 0.9;
|
||
}
|
||
|
||
// 编码检索按钮特殊样式
|
||
&.search-btn {
|
||
padding: 12rpx 0;
|
||
background: #fff;
|
||
color: #fff;
|
||
border: 2rpx solid rgba(255, 152, 0, 0.5);
|
||
background: linear-gradient(to bottom, rgba(23, 237, 3, 0.957), rgba(23, 237, 3, 0.957));
|
||
box-shadow: none;
|
||
font-weight: 600;
|
||
letter-spacing: 1rpx;
|
||
|
||
&:active {
|
||
background: rgba(23, 237, 3, 0.957);
|
||
border-color: rgba(23, 237, 3, 0.957);
|
||
transform: translateY(1rpx);
|
||
}
|
||
}
|
||
&.search-btnTwo {
|
||
padding: 12rpx 0;
|
||
background: #fff;
|
||
color: #fff;
|
||
border: 2rpx solid rgba(255, 152, 0, 0.5);
|
||
background: linear-gradient(to bottom, rgba(255, 8, 0, 0.911), rgba(255, 8, 0, 0.911));
|
||
box-shadow: none;
|
||
font-weight: 600;
|
||
letter-spacing: 1rpx;
|
||
|
||
&:active {
|
||
background: rgba(255, 8, 0, 0.911);
|
||
border-color: rgba(255, 8, 0, 0.911);
|
||
transform: translateY(1rpx);
|
||
}
|
||
}
|
||
}
|
||
|
||
// 编码列表样式
|
||
:deep(.uni-row) {
|
||
margin-bottom: 20rpx;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.uni-col-6 {
|
||
color: #8c8c8c;
|
||
font-size: 28rpx;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.cont {
|
||
color: #262626;
|
||
font-size: 28rpx;
|
||
font-weight: 500;
|
||
line-height: 1.8;
|
||
}
|
||
}
|
||
|
||
// 输入框样式
|
||
:deep(.uni-easyinput__content) {
|
||
background-color: #f7f8fa;
|
||
border: 2rpx solid #e8e8e8;
|
||
border-radius: 12rpx;
|
||
height: 80rpx;
|
||
transition: all 0.3s ease;
|
||
|
||
&:focus-within {
|
||
border-color: #3784fb;
|
||
box-shadow: 0 0 0 2rpx rgba(55, 132, 251, 0.1);
|
||
}
|
||
|
||
.uni-easyinput__content-input {
|
||
font-size: 28rpx;
|
||
color: #262626;
|
||
}
|
||
}
|
||
|
||
// 复选框样式
|
||
:deep(checkbox) {
|
||
.wx-checkbox-input {
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
border-radius: 8rpx;
|
||
border: 2rpx solid #e8e8e8;
|
||
background: transparent;
|
||
|
||
&.wx-checkbox-input-checked {
|
||
background: #3784fb;
|
||
border-color: #3784fb;
|
||
|
||
&::before {
|
||
font-size: 28rpx;
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
&.wx-checkbox-input-disabled {
|
||
background: #f5f5f5;
|
||
border-color: #e8e8e8;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 底部出库按钮
|
||
.outbound-btn {
|
||
position: fixed;
|
||
bottom: 40rpx;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 90%;
|
||
height: 88rpx;
|
||
background: linear-gradient(135deg, #4b8eff 0%, #3784fb 100%);
|
||
text-align: center;
|
||
line-height: 88rpx;
|
||
color: #fff;
|
||
border-radius: 12rpx;
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
box-shadow: 0 6rpx 20rpx rgba(55, 132, 251, 0.2);
|
||
transition: all 0.3s ease;
|
||
|
||
&:active {
|
||
transform: translateX(-50%) scale(0.98);
|
||
opacity: 0.9;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 加载提示文字
|
||
.loading-text {
|
||
text-align: center;
|
||
font-size: 26rpx;
|
||
color: #8c8c8c;
|
||
padding: 32rpx 0;
|
||
letter-spacing: 1rpx;
|
||
}
|
||
|
||
.form-section {
|
||
background: #fff;
|
||
border-radius: 20rpx;
|
||
margin-bottom: 24rpx;
|
||
overflow: hidden;
|
||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
|
||
|
||
// 头部样式
|
||
.section-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 24rpx 32rpx;
|
||
background: #fff;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
|
||
&:active {
|
||
background: #f7f8fa;
|
||
}
|
||
|
||
.title {
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
color: #262626;
|
||
}
|
||
|
||
.toggle-icon {
|
||
font-size: 40rpx;
|
||
color: #8c8c8c;
|
||
transform: rotate(90deg);
|
||
transition: transform 0.3s ease;
|
||
display: inline-block;
|
||
|
||
&.is-expanded {
|
||
transform: rotate(-90deg);
|
||
}
|
||
}
|
||
}
|
||
|
||
// 表单内容区域
|
||
.form-content {
|
||
max-height: 0;
|
||
overflow: hidden;
|
||
transition: max-height 0.3s ease-out;
|
||
|
||
&.is-expanded {
|
||
max-height: 800rpx; /* 高度可进一步减小 */
|
||
}
|
||
|
||
:deep(.uni-forms) {
|
||
padding: 0 20rpx 0rpx; /* 减少底部内边距 */
|
||
}
|
||
|
||
:deep(.uni-forms-item) {
|
||
margin-bottom: 0rpx !important; /* 关键：行间距缩小 */
|
||
padding: 0rpx 0 !important; /* 减少项内边距 */
|
||
|
||
.uni-forms-item__label {
|
||
color: #8c8c8c;
|
||
padding-bottom: 0rpx !important; /* 标签与内容间距 */
|
||
line-height: 2.8; // 保持原有的行高
|
||
}
|
||
|
||
.form-view {
|
||
color: #262626;
|
||
font-size: 28rpx;
|
||
line-height: 2.8 !important; /* 减小文本行高 */
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|