| | |
| | | <template> |
| | | <view> |
| | | <!-- 刷新页面后的顶部提示框 --> |
| | | <view class="page-container"> |
| | | <!-- 刷新提示框 --> |
| | | <view class="tips" :class="{ 'tips-ani': tipShow }">刷新成功</view> |
| | | |
| | | <!-- 搜索框 --> |
| | | <view class="search-bar"> |
| | | <view class="search-bar-box"> |
| | | <input class="search-text" type="text" v-model="searchQuery" @keypress.enter="getInputValue" |
| | | placeholder="规格" style="font-size: 16px;" /> |
| | | <input class="search-text" type="text" v-model="searchQueryItemNo" @keypress.enter="getInputValue" |
| | | placeholder="物料编号" style="font-size: 16px;"/> |
| | | <input class="search-text" type="text" v-model="searchQueryItemName" @keypress.enter="getInputValue" |
| | | placeholder="物料名称" style="font-size: 16px;"/> |
| | | <input class="search-text" type="text" v-model="searchQuerySupp" @keypress.enter="getInputValue" |
| | | placeholder="供应商" style="font-size: 16px;"/> |
| | | <input class="search-text" type="text" v-model="searchQueryBy" @keypress.enter="getInputValue" |
| | | placeholder="送检人" style="font-size: 16px;"/> |
| | | <input class="search-text" type="text" v-model="searchQueryReNo" @keypress.enter="getInputValue" |
| | | placeholder="检验单号" style="font-size: 16px;"/> |
| | | |
| | | <button class="search-btn" @click="getInputValue">搜索</button> |
| | | <!-- 固定头部区域 --> |
| | | <view class="fixed-header"> |
| | | <!-- 搜索栏样式 --> |
| | | <view class="search-bar"> |
| | | <view class="search-card"> |
| | | <picker mode="selector" :range="searchOptions" v-model="selectedOption" @change="onPickerChange"> |
| | | <view class="picker"> |
| | | {{ searchOptions[selectedOption] }} |
| | | </view> |
| | | </picker> |
| | | <input class="search-input" type="text" v-model="searchValue" @keypress.enter="getInputValue" |
| | | placeholder="请输入搜索值" /> |
| | | <button class="search-btn" @click="getInputValue">搜索</button> |
| | | </view> |
| | | </view> |
| | | |
| | | <!-- 选项卡样式 --> |
| | | <view class="newsTab"> |
| | | <uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" style-type="button" |
| | | active-color="#165DFF"></uni-segmented-control> |
| | | </view> |
| | | </view> |
| | | |
| | | <!-- 内容区域 --> |
| | | <view class="content-container"> |
| | | <view v-show="current === 0"> |
| | | <uni-list> |
| | | <uni-list-item class="list-card" v-for="item in data" :key="item.id" |
| | | :to="'Add?id=' + item.id + '&lotNo=' + item.lotNo + '&releaseNo=' + item.releaseNo"> |
| | | <template v-slot:header> |
| | | <view class="card-header"> |
| | | <view class="header-content"> |
| | | <!-- 单号信息区域 - 优化布局 --> |
| | | <view class="order-info"> |
| | | <view class="order-row"> |
| | | <view class="order-item"> |
| | | <view class="order-label">销售单号</view> |
| | | <view class="order-value">{{ item.salesOrderId }}</view> |
| | | </view> |
| | | <view class="order-item"> |
| | | <view class="order-label">检验单号</view> |
| | | <view class="order-value">{{ item.releaseNo }}</view> |
| | | </view> |
| | | </view> |
| | | <view class="order-row"> |
| | | <view class="order-item"> |
| | | <view class="order-label">到货单号</view> |
| | | <view class="order-value">{{ item.lotNo }}</view> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | |
| | | <view class="newsTab"> |
| | | <uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" style-type="button" |
| | | active-color="#87cefa"></uni-segmented-control> |
| | | <view class="content"> |
| | | <view v-show="current===0"> |
| | | <!-- 基于 uni-list 的页面布局 --> |
| | | <uni-list> |
| | | <!-- to 属性携带参数跳转详情页面,当前只为参考 --> |
| | | <uni-list-item |
| | | style="margin-top: 10px;background-color:#EFEFF4;border-radius: 5px;border: 5px solid #0d9ff5;" |
| | | class="list-item" direction="column" v-for="item in data" :key="item.id" |
| | | :to="'Add?id='+item.id+'&lotNo='+item.lotNo+'&releaseNo='+item.releaseNo"> |
| | | <!-- 通过header插槽定义列表的标题 --> |
| | | |
| | | <template v-slot:header> |
| | | <view class="form-group uni-title" style="margin-bottom: 0;"> |
| | | <label class="form-label">销售单号:</label> |
| | | <input class="form-input" disabled="true" type="text" v-model="item.salesOrderId" /> |
| | | </view> |
| | | <view class="form-group uni-title" style="margin-bottom: 0;"> |
| | | <label class="form-label">检验单号:</label> |
| | | <input class="form-input" disabled="true" type="text" v-model="item.releaseNo" /> |
| | | </view> |
| | | </template> |
| | | <!-- 通过body插槽定义列表内容显示 --> |
| | | <template v-slot:body> |
| | | |
| | | <view class="uni-title-sub uni-ellipsis-2"> |
| | | <view class="form-group"> |
| | | <label class="form-label lab">到货单号:</label> |
| | | <input class="form-input" disabled="true" type="text" v-model="item.lotNo" /> |
| | | <!-- 状态标签 - 调整位置 --> |
| | | <view class="status-badge" :class="item.fsubmit == 1 ? 'approved' : 'pending'"> |
| | | {{ item.fsubmit == 1 ? '已提交' : '待提交' }} |
| | | </view> |
| | | </view> |
| | | <checkbox-group style="background-color: white;border-bottom: 1px solid #c7c7c7;"> |
| | | <label> |
| | | </view> |
| | | </template> |
| | | <template v-slot:body> |
| | | <view class="card-body"> |
| | | <!-- 检验人信息移至此处 --> |
| | | <view class="inspector-info"> |
| | | <view class="info-row"> |
| | | <view class="info-label">检验人</view> |
| | | <view class="info-value">{{ item.modify1By || '待检验' }}</view> |
| | | </view> |
| | | <view class="info-row"> |
| | | <view class="info-label">检验时间</view> |
| | | <view class="info-value">{{ item.iqcDate || '未检验' }}</view> |
| | | </view> |
| | | <view class="info-row"> |
| | | <view class="info-label">检测结果</view> |
| | | <view class="info-value result-badge" :class="{ |
| | | 'pass': item.fcheckResu === '合格', |
| | | 'fail': item.fcheckResu === '不合格', |
| | | 'pending': !item.fcheckResu || item.fcheckResu === '未检验' |
| | | }"> |
| | | {{ item.fcheckResu || '未检验' }} |
| | | </view> |
| | | </view> |
| | | </view> |
| | | |
| | | <view class="checkbox-group"> |
| | | <label class="checkbox-item"> |
| | | <checkbox value="F_TYPE" disabled="true" :checked="item.ftype == 1" /> |
| | | 委外 |
| | | </label> |
| | | <label> |
| | | <label class="checkbox-item"> |
| | | <checkbox value="URGENT_FLAG" disabled="true" :checked="item.urgentFlag == 1" /> |
| | | 急料标识 |
| | | </label> |
| | | <label> |
| | | <checkbox value="URGENT_FLAG" disabled="true" :checked="item.fsubmit == 1" /> |
| | | 提交标识 |
| | | </label> |
| | | </checkbox-group> |
| | | <view style="margin-top: 0;"> |
| | | <view class="uni-content"> |
| | | <view class="uni-title-sub uni-ellipsis-2"> |
| | | <view class="form-group"> |
| | | <label class="form-label lab">创建时间:</label> |
| | | <input class="form-input" disabled="true" type="text" |
| | | v-model="item.createDate" /> |
| | | </view> |
| | | </view> |
| | | <view class="uni-note"> |
| | | <view class="form-group"> |
| | | <label class="form-label lab">创建人:</label> |
| | | <input class="form-input" disabled="true" type="text" |
| | | v-model="item.createBy" /> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | |
| | | |
| | | <view class="uni-title-sub uni-ellipsis-2"> |
| | | <view class="form-group"> |
| | | <label class="form-label lab">物料编码:</label> |
| | | <input class="form-input" disabled="true" type="text" |
| | | v-model="item.itemNo" /> |
| | | </view> |
| | | <!-- 信息网格布局 - 优化列分配 --> |
| | | <view class="info-grid"> |
| | | <view class="grid-row"> |
| | | <view class="grid-item"> |
| | | <label class="grid-label">创建时间</label> |
| | | <view class="grid-value">{{ item.createDate }}</view> |
| | | </view> |
| | | |
| | | <view class="uni-title-sub uni-ellipsis-2"> |
| | | <view class="form-group"> |
| | | <label class="form-label">物料名称:</label> |
| | | <input class="form-input" disabled="true" type="text" |
| | | v-model="item.itemName" /> |
| | | </view> |
| | | <view class="grid-item"> |
| | | <label class="grid-label">创建人</label> |
| | | <view class="grid-value">{{ item.createBy }}</view> |
| | | </view> |
| | | |
| | | <view class="uni-title-sub uni-ellipsis-2"> |
| | | <view class="form-group"> |
| | | <label class="form-label">规格型号:</label> |
| | | <input class="form-input" disabled="true" type="text" |
| | | v-model="item.itemModel" /> |
| | | </view> |
| | | <view class="grid-item"> |
| | | <label class="grid-label">物料编码</label> |
| | | <view class="grid-value">{{ item.itemNo }}</view> |
| | | </view> |
| | | |
| | | <view class="uni-title-sub uni-ellipsis-2"> |
| | | <view class="form-group"> |
| | | <label class="form-label">数量:</label> |
| | | <input class="form-input" disabled="true" type="text" |
| | | v-model="item.fcovertQty" /> |
| | | </view> |
| | | </view> |
| | | <view class="grid-row"> |
| | | <view class="grid-item"> |
| | | <label class="grid-label">物料名称</label> |
| | | <view class="grid-value">{{ item.itemName }}</view> |
| | | </view> |
| | | <view class="uni-title-sub uni-ellipsis-2"> |
| | | <view class="form-group"> |
| | | <label class="form-label">供应商:</label> |
| | | <input class="form-input" disabled="true" type="text" |
| | | v-model="item.suppName" /> |
| | | </view> |
| | | <view class="grid-item"> |
| | | <label class="grid-label">规格型号</label> |
| | | <view class="grid-value">{{ item.itemModel }}</view> |
| | | </view> |
| | | <view class="uni-note" style="color: red"> |
| | | <view class="form-group"> |
| | | <label class="form-label lab">送验人:</label> |
| | | <input class="form-input" disabled="true" type="text" |
| | | v-model="item.fcheckBy" /> |
| | | </view> |
| | | </view> |
| | | <view class="uni-note" style="color: red"> |
| | | <view class="form-group"> |
| | | <label class="form-label lab">检验人:</label> |
| | | <input class="form-input" disabled="true" type="text" |
| | | v-model="item.modify1By" /> |
| | | </view> |
| | | <view class="grid-item"> |
| | | <label class="grid-label">数量</label> |
| | | <view class="grid-value">{{ item.fcovertQty }}</view> |
| | | </view> |
| | | <view class="uni-note" style="color: red"> |
| | | <view class="form-group"> |
| | | <label class="form-label lab">检验时间:</label> |
| | | <input class="form-input" disabled="true" type="text" |
| | | v-model="item.iqcDate" /> |
| | | </view> |
| | | </view> |
| | | <view class="grid-row"> |
| | | <view class="grid-item"> |
| | | <label class="grid-label">供应商</label> |
| | | <view class="grid-value">{{ item.suppName }}</view> |
| | | </view> |
| | | <view class="uni-note" style="color: red"> |
| | | <view class="form-group"> |
| | | <label class="form-label lab">检测结果:</label> |
| | | <input class="form-input" disabled="true" type="text" |
| | | v-model="item.fcheckResu" /> |
| | | </view> |
| | | <view class="grid-item"> |
| | | <label class="grid-label">送验人</label> |
| | | <view class="grid-value">{{ item.fcheckBy }}</view> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | </template> |
| | | </uni-list-item> |
| | | </uni-list> |
| | | <!-- 通过 loadMore 组件实现上拉加载效果,如需自定义显示内容,可参考:https://ext.dcloud.net.cn/plugin?id=29 --> |
| | | <!-- <uni-load-more v-if="loading || options.status === 'noMore' " :status="options.status" /> --> |
| | | |
| | | <!-- <view class="fab" @click="handleFabClick"> |
| | | <text class="fab-icon">+</text> |
| | | </view> --> |
| | | <view class="plus-button" @click="handleFabClick"> |
| | | + |
| | | </view> |
| | | </view> |
| | | <view v-show="current===1"> |
| | | <uni-list> |
| | | <!-- to 属性携带参数跳转详情页面,当前只为参考 --> |
| | | <uni-list-item style="margin-top: 10px;background-color:#EFEFF4;border-radius:5px;" |
| | | class="list-item" direction="column" v-for="item in data" :key="item.id" |
| | | :to="'Add?id='+item.id+'&lotNo='+item.lotNo+'&releaseNo='+item.releaseNo"> |
| | | <!-- 通过header插槽定义列表的标题 --> |
| | | |
| | | <template v-slot:header> |
| | | <view class="form-group uni-title" style="margin-bottom: 0;"> |
| | | <label class="form-label">销售单号:</label> |
| | | <input class="form-input" disabled="true" type="text" v-model="item.salesOrderId" /> |
| | | </view> |
| | | <view class="form-group uni-title" style="margin-bottom: 0;"> |
| | | <label class="form-label">检验单号:</label> |
| | | <input class="form-input" disabled="true" type="text" v-model="item.releaseNo" /> |
| | | </view> |
| | | </template> |
| | | <!-- 通过body插槽定义列表内容显示 --> |
| | | |
| | | <template v-slot:body> |
| | | <view class="uni-title-sub uni-ellipsis-2"> |
| | | <view class="form-group"> |
| | | <label class="form-label lab">到货单号:</label> |
| | | <input class="form-input" disabled="true" type="text" v-model="item.lotNo" /> |
| | | </view> |
| | | </view> |
| | | <checkbox-group style="background-color: white;border-bottom: 1px solid #c7c7c7;"> |
| | | <label> |
| | | <checkbox value="F_TYPE" disabled="true" :checked="item.fType == 1" /> |
| | | 委外 |
| | | </label> |
| | | <label> |
| | | <checkbox value="URGENT_FLAG" disabled="true" :checked="item.urgentFlag == 1" /> |
| | | 急料标识 |
| | | </label> |
| | | <label> |
| | | <checkbox value="URGENT_FLAG" disabled="true" :checked="item.fsubmit == 1" /> |
| | | 提交标识 |
| | | </label> |
| | | </checkbox-group> |
| | | |
| | | <view style="margin-top: 0;"> |
| | | <view class="uni-content"> |
| | | <view class="uni-title-sub uni-ellipsis-2"> |
| | | <view class="form-group"> |
| | | <label class="form-label lab">创建时间:</label> |
| | | <input class="form-input" disabled="true" type="text" |
| | | v-model="item.createDate" /> |
| | | </view> |
| | | </view> |
| | | <view class="uni-note"> |
| | | <view class="form-group"> |
| | | <label class="form-label lab">创建人:</label> |
| | | <input class="form-input" disabled="true" type="text" |
| | | v-model="item.createBy" /> |
| | | </view> |
| | | </view> |
| | | |
| | | |
| | | <view class="uni-title-sub uni-ellipsis-2"> |
| | | <view class="form-group"> |
| | | <label class="form-label lab">物料编码:</label> |
| | | <input class="form-input" disabled="true" type="text" |
| | | v-model="item.itemNo" /> |
| | | </view> |
| | | </view> |
| | | |
| | | <view class="uni-title-sub uni-ellipsis-2"> |
| | | <view class="form-group"> |
| | | <label class="form-label">物料名称:</label> |
| | | <input class="form-input" disabled="true" type="text" |
| | | v-model="item.itemName" /> |
| | | </view> |
| | | </view> |
| | | |
| | | <view class="uni-title-sub uni-ellipsis-2"> |
| | | <view class="form-group"> |
| | | <label class="form-label">规格型号:</label> |
| | | <input class="form-input" disabled="true" type="text" |
| | | v-model="item.itemModel" /> |
| | | </view> |
| | | </view> |
| | | |
| | | |
| | | <view class="uni-title-sub uni-ellipsis-2"> |
| | | <view class="form-group"> |
| | | <label class="form-label">数量:</label> |
| | | <input class="form-input" disabled="true" type="text" |
| | | v-model="item.fcovertQty" /> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | <view class="uni-title-sub uni-ellipsis-2"> |
| | | <view class="form-group"> |
| | | <label class="form-label">供应商:</label> |
| | | <input class="form-input" disabled="true" type="text" |
| | | v-model="item.suppName" /> |
| | | </view> |
| | | <view class="uni-note" style="color: red"> |
| | | <view class="form-group"> |
| | | <label class="form-label lab">送检人:</label> |
| | | <input class="form-input" disabled="true" type="text" |
| | | v-model="item.fcheckBy" /> |
| | | </view> |
| | | </view> |
| | | <view class="uni-note" style="color: red"> |
| | | <view class="form-group"> |
| | | <label class="form-label lab">检验人:</label> |
| | | <input class="form-input" disabled="true" type="text" |
| | | v-model="item.modify1By" /> |
| | | </view> |
| | | </view> |
| | | <view class="uni-note" style="color: red"> |
| | | <view class="form-group"> |
| | | <label class="form-label lab">检验时间:</label> |
| | | <input class="form-input" disabled="true" type="text" |
| | | v-model="item.iqcDate" /> |
| | | </view> |
| | | </view> |
| | | <view class="uni-note" style="color: red"> |
| | | <view class="form-group"> |
| | | <label class="form-label lab">检测结果:</label> |
| | | <input class="form-input" disabled="true" type="text" |
| | | v-model="item.fcheckResu" /> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | </template> |
| | | </uni-list-item> |
| | | </uni-list> |
| | | </view> |
| | | </template> |
| | | </uni-list-item> |
| | | </uni-list> |
| | | <view class="plus-button" @click="handleFabClick"> |
| | | + |
| | | </view> |
| | | </view> |
| | | <!-- 第二个选项卡内容省略,与第一个类似 --> |
| | | <view v-show="current === 1"> |
| | | <uni-list> |
| | | <uni-list-item class="list-card" v-for="item in data" :key="item.id" |
| | | :to="'Add?id=' + item.id + '&lotNo=' + item.lotNo + '&releaseNo=' + item.releaseNo"> |
| | | <template v-slot:header> |
| | | <view class="card-header"> |
| | | <view class="header-content"> |
| | | <!-- 单号信息区域 - 优化布局 --> |
| | | <view class="order-info"> |
| | | <view class="order-row"> |
| | | <view class="order-item"> |
| | | <view class="order-label">销售单号</view> |
| | | <view class="order-value">{{ item.salesOrderId }}</view> |
| | | </view> |
| | | <view class="order-item"> |
| | | <view class="order-label">检验单号</view> |
| | | <view class="order-value">{{ item.releaseNo }}</view> |
| | | </view> |
| | | </view> |
| | | <view class="order-row"> |
| | | <view class="order-item"> |
| | | <view class="order-label">到货单号</view> |
| | | <view class="order-value">{{ item.lotNo }}</view> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | |
| | | <!-- 状态标签 - 调整位置 --> |
| | | <view class="status-badge" :class="item.fsubmit == 1 ? 'approved' : 'pending'"> |
| | | {{ item.fsubmit == 1 ? '已提交' : '待提交' }} |
| | | </view> |
| | | </view> |
| | | </view> |
| | | </template> |
| | | <template v-slot:body> |
| | | <view class="card-body"> |
| | | <!-- 检验人信息移至此处 --> |
| | | <view class="inspector-info"> |
| | | <view class="info-row"> |
| | | <view class="info-label">检验人</view> |
| | | <view class="info-value">{{ item.modify1By || '待检验' }}</view> |
| | | </view> |
| | | <view class="info-row"> |
| | | <view class="info-label">检验时间</view> |
| | | <view class="info-value">{{ item.iqcDate || '未检验' }}</view> |
| | | </view> |
| | | <view class="info-row"> |
| | | <view class="info-label">检测结果</view> |
| | | <view class="info-value result-badge" :class="{ |
| | | 'pass': item.fcheckResu === '合格', |
| | | 'fail': item.fcheckResu === '不合格', |
| | | 'pending': !item.fcheckResu || item.fcheckResu === '未检验' |
| | | }"> |
| | | {{ item.fcheckResu || '未检验' }} |
| | | </view> |
| | | </view> |
| | | </view> |
| | | |
| | | <view class="checkbox-group"> |
| | | <label class="checkbox-item"> |
| | | <checkbox value="F_TYPE" disabled="true" :checked="item.ftype == 1" /> |
| | | 委外 |
| | | </label> |
| | | <label class="checkbox-item"> |
| | | <checkbox value="URGENT_FLAG" disabled="true" :checked="item.urgentFlag == 1" /> |
| | | 急料标识 |
| | | </label> |
| | | </view> |
| | | |
| | | <!-- 信息网格布局 - 优化列分配 --> |
| | | <view class="info-grid"> |
| | | <view class="grid-row"> |
| | | <view class="grid-item"> |
| | | <label class="grid-label">创建时间</label> |
| | | <view class="grid-value">{{ item.createDate }}</view> |
| | | </view> |
| | | <view class="grid-item"> |
| | | <label class="grid-label">创建人</label> |
| | | <view class="grid-value">{{ item.createBy }}</view> |
| | | </view> |
| | | <view class="grid-item"> |
| | | <label class="grid-label">物料编码</label> |
| | | <view class="grid-value">{{ item.itemNo }}</view> |
| | | </view> |
| | | </view> |
| | | <view class="grid-row"> |
| | | <view class="grid-item"> |
| | | <label class="grid-label">物料名称</label> |
| | | <view class="grid-value">{{ item.itemName }}</view> |
| | | </view> |
| | | <view class="grid-item"> |
| | | <label class="grid-label">规格型号</label> |
| | | <view class="grid-value">{{ item.itemModel }}</view> |
| | | </view> |
| | | <view class="grid-item"> |
| | | <label class="grid-label">数量</label> |
| | | <view class="grid-value">{{ item.fcovertQty }}</view> |
| | | </view> |
| | | </view> |
| | | <view class="grid-row"> |
| | | <view class="grid-item"> |
| | | <label class="grid-label">供应商</label> |
| | | <view class="grid-value">{{ item.suppName }}</view> |
| | | </view> |
| | | <view class="grid-item"> |
| | | <label class="grid-label">送验人</label> |
| | | <view class="grid-value">{{ item.fcheckBy }}</view> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | </template> |
| | | </uni-list-item> |
| | | </uni-list> |
| | | <view class="plus-button" @click="handleFabClick"> |
| | | + |
| | | </view> |
| | | </view> |
| | | |
| | | </view> |
| | | </view> |
| | | </template> |
| | |
| | | limit: 20, |
| | | totalPage: 0, |
| | | totalCount: 0, |
| | | noData: false, // 没有更多数据了 |
| | | isLoading: false, // 是否正在加载 |
| | | noData: false, |
| | | isLoading: false, |
| | | tipShow: false, |
| | | searchQuery: '' ,//搜索销售订单号内容 |
| | | searchQueryItemNo:'',//搜索物料内容 |
| | | searchQuerySupp:'',//搜索供应商 |
| | | searchQueryBy:'',//搜索送检人 |
| | | searchQueryItemName:'',//搜索物料名称 |
| | | searchQueryReNo:'',//搜索送检单号 |
| | | searchOptions: ['物料编号', '规格', '物料名称', '供应商', '送检人', '检验单号'], |
| | | selectedOption: 0, |
| | | searchValue: '', |
| | | copiedText: '', |
| | | headerHeight: 0, |
| | | }; |
| | | }, |
| | | onLoad() { |
| | | //页面加载时调用的事件 |
| | | uni.createSelectorQuery().select('.fixed-header').boundingClientRect(rect => { |
| | | this.headerHeight = rect.height; |
| | | }).exec(); |
| | | |
| | | this.init(); |
| | | }, |
| | | methods: { |
| | | |
| | | //2024-10-28 kyy |
| | | onPickerChange(e) { |
| | | this.selectedOption = e.detail.value; |
| | | }, |
| | | getInputValue() { |
| | | console.log('这是输入的值:', this.searchQuery); // 检查事件是否触发 |
| | | this.pageIndex = 1; // 搜索时重置页码 |
| | | this.loadData(); // 调用统一的数据加载方法 |
| | | }, |
| | | loadData() { |
| | | let result = "未完成"; |
| | | if (this.current === 1) { |
| | | result = "已完成"; |
| | | } |
| | | |
| | | if (this.isLoading) return; // 如果正在加载则不继续执行 |
| | | if (this.isLoading) return; |
| | | |
| | | this.isLoading = true; |
| | | |
| | | //获取当前登录的用户 |
| | | let userName = this.$loginInfo.account; |
| | | let url1; |
| | | /*if (this.searchQuery == null || this.searchQuery.trim() === ''&& |
| | | this.searchQueryItemNo == null || this.searchQueryItemNo.trim() === ''&& |
| | | this.searchQuerySupp == null || this.searchQuerySupp.trim() === '' |
| | | ) */ |
| | | if (this.searchQuery != null && this.searchQuery.trim() !== '' || |
| | | this.searchQueryItemNo != null && this.searchQueryItemNo.trim() !== '' || |
| | | this.searchQueryBy != null && this.searchQueryBy.trim() !== '' || |
| | | this.searchQueryItemName != null && this.searchQueryItemName.trim() !== '' || |
| | | this.searchQueryReNo != null && this.searchQueryReNo.trim() !== '' || |
| | | this.searchQuerySupp != null && this.searchQuerySupp.trim() !== '' |
| | | ) |
| | | { |
| | | url1 = '/LLJ/getSearchPage'; |
| | | |
| | | } else { |
| | | url1 = '/LLJ/getPage'; |
| | | //url1 = '/LLJ/getSearchPage'; |
| | | |
| | | let url = "/LLJ/getPage"; // 默认调用getPage |
| | | let requestData = { |
| | | pageIndex: this.pageIndex, |
| | | limit: this.limit, |
| | | createUser: userName, |
| | | result: result |
| | | }; |
| | | //重置起始页 |
| | | //this.pageIndex = 1; |
| | | console.log('这是输入的值:', url1); // 检查事件是否触发 |
| | | //页面加载时调用的事件 |
| | | this.$post({ |
| | | url: url1, |
| | | data: { |
| | | pageIndex: this.pageIndex, |
| | | limit: this.limit, |
| | | createUser: userName, |
| | | SalesOrder: this.searchQuery, |
| | | ItemNo: this.searchQueryItemNo, |
| | | SuppNameContains: this.searchQuerySupp, |
| | | SongJ: this.searchQueryBy, |
| | | SongNo: this.searchQueryReNo, |
| | | ItemName:this.searchQueryItemName, |
| | | result: result |
| | | |
| | | // 判断搜索框是否有值 |
| | | if (this.searchValue != null && this.searchValue.trim() !== '') { |
| | | url = '/LLJ/getSearchPage'; // 有值则调用getSearchPage |
| | | |
| | | // 根据选择的搜索选项设置搜索条件 |
| | | switch (this.selectedOption) { |
| | | case 0: |
| | | requestData.ItemNo = this.searchValue; |
| | | break; |
| | | case 1: |
| | | requestData.SalesOrder = this.searchValue; |
| | | break; |
| | | case 2: |
| | | requestData.ItemName = this.searchValue; |
| | | break; |
| | | case 3: |
| | | requestData.SuppNameContains = this.searchValue; |
| | | break; |
| | | case 4: |
| | | requestData.SongJ = this.searchValue; |
| | | break; |
| | | case 5: |
| | | requestData.SongNo = this.searchValue; |
| | | break; |
| | | } |
| | | } |
| | | |
| | | this.$post({ |
| | | url: url, |
| | | data: requestData |
| | | }).then(res => { |
| | | if (this.pageIndex === 1) { |
| | | // 如果是第一页,直接覆盖原数据 |
| | | this.data = []; |
| | | this.data = res.data.tbBillList; |
| | | } else { |
| | | |
| | | if (res.data.tbBillList.length > 0) { |
| | | // 如果是下一页,追加新数据 |
| | | this.data = [...this.data, ...res.data.tbBillList]; |
| | | } |
| | | |
| | | } |
| | | this.totalCount = res.data.totalCount; |
| | | this.totalPage = Math.ceil(this.totalCount / this.limit); |
| | | |
| | | this.noData = this.pageIndex >= this.totalPage; |
| | | this.isLoading = false; // 结束加载 |
| | | this.isLoading = false; |
| | | }).catch(() => { |
| | | this.isLoading = false; // 出现错误时结束加载 |
| | | this.isLoading = false; |
| | | this.searchValue = ''; |
| | | }); |
| | | |
| | | }, |
| | | init() { |
| | | |
| | | let result = "未完成"; |
| | | if (this.current === 1) { |
| | | result = "已完成"; |
| | | } |
| | | |
| | | if (this.isLoading) return; // 如果正在加载则不继续执行 |
| | | |
| | | this.isLoading = true; |
| | | |
| | | //获取当前登录的用户 |
| | | let userName = this.$loginInfo.account; |
| | | |
| | | //页面加载时调用的事件 |
| | | this.$post({ |
| | | url: "/LLJ/getPage", |
| | | data: { |
| | | pageIndex: this.pageIndex, |
| | | limit: this.limit, |
| | | //pageIndex: 1, |
| | | //limit: 20, |
| | | createUser: userName, |
| | | result: result |
| | | } |
| | | }).then(res => { |
| | | if (this.pageIndex === 1) { |
| | | // 如果是第一页,直接覆盖原数据 |
| | | this.data = res.data.tbBillList; |
| | | } else { |
| | | |
| | | if (res.data.tbBillList.length > 0) { |
| | | // 如果是下一页,追加新数据 |
| | | this.data = [...this.data, ...res.data.tbBillList]; |
| | | } |
| | | |
| | | } |
| | | this.totalCount = res.data.totalCount; |
| | | this.totalPage = Math.ceil(this.totalCount / this.limit); |
| | | |
| | | this.noData = this.pageIndex >= this.totalPage; |
| | | this.isLoading = false; // 结束加载 |
| | | }).catch(() => { |
| | | this.isLoading = false; // 出现错误时结束加载 |
| | | }); |
| | | this.loadData(); // 统一调用loadData方法 |
| | | }, |
| | | handleFabClick() { |
| | | uni.navigateTo({ |
| | |
| | | this.current = index.currentIndex; |
| | | this.data = []; |
| | | this.pageIndex = 1; |
| | | this.init(); |
| | | this.loadData(); // 选项卡切换时调用loadData |
| | | } |
| | | }, |
| | | copyText(text) { |
| | | uni.setClipboardData({ |
| | | data: text, |
| | | success: () => { |
| | | this.copiedText = text; |
| | | this.tipShow = true; |
| | | setTimeout(() => { |
| | | this.tipShow = false; |
| | | }, 1000); |
| | | } |
| | | }); |
| | | } |
| | | }, |
| | | |
| | | |
| | | /** |
| | | * 下拉刷新回调函数 |
| | | */ |
| | | onPullDownRefresh() { |
| | | this.pageIndex = 1; |
| | | //重新执行一遍查询 |
| | | this.init(); |
| | | this.loadData(); |
| | | this.tipShow = true; |
| | | //关闭动画 |
| | | uni.stopPullDownRefresh(); |
| | | |
| | | setTimeout(function() { |
| | | setTimeout(() => { |
| | | this.tipShow = false; |
| | | }, 3000); |
| | | }, 1000); |
| | | }, |
| | | /** |
| | | * 上拉加载回调函数 |
| | | */ |
| | | onReachBottom() { |
| | | if (this.noData || this.isLoading) return; |
| | | this.pageIndex++; |
| | | this.init(); // 加载更多数据 |
| | | |
| | | setTimeout(function() { |
| | | this.tipShow = false; |
| | | console.log(111); |
| | | }, 3000); |
| | | }, |
| | | onShow() { |
| | | //每次进入页面都会执行的方法 |
| | | //this.pageIndex = 1; |
| | | // this.data = []; |
| | | // //this.current = 0 |
| | | // this.init(); |
| | | this.loadData(); // 上拉加载时调用loadData |
| | | } |
| | | |
| | | }; |
| | | </script> |
| | | |
| | | <style lang="scss"> |
| | | @import '@/common/uni-ui.scss'; |
| | | |
| | | .uni-note { |
| | | margin-top: 0; |
| | | /* 基础配色方案不变 */ |
| | | :root { |
| | | --primary-color: #4080FF; |
| | | /* 主色调 - 蓝色 */ |
| | | --primary-light: #E6F0FF; |
| | | /* 主色浅色 */ |
| | | --success-color: #00B42A; |
| | | /* 成功色 - 绿色 */ |
| | | --warning-color: #FF7D00; |
| | | /* 警告色 - 橙色 */ |
| | | --danger-color: #F53F3F; |
| | | /* 危险色 - 红色 */ |
| | | --pending-color: #FFC107; |
| | | /* 待处理色 - 黄色 */ |
| | | --text-color: #1D2129; |
| | | /* 主文本色 */ |
| | | --text-secondary: #4E5969; |
| | | /* 次要文本色 */ |
| | | --bg-color: #F7F8FA; |
| | | /* 背景色 */ |
| | | --card-bg: #FFFFFF; |
| | | /* 卡片背景色 */ |
| | | --border-color: #E5E6EB; |
| | | /* 边框色 */ |
| | | } |
| | | |
| | | /* Set the input backgrounds to be gray */ |
| | | .form-input { |
| | | background-color: #f2f2f2; |
| | | /* Or any other shade of gray you prefer */ |
| | | } |
| | | |
| | | /* Ensure automatic adaptation based on page size */ |
| | | .form-group { |
| | | display: flex; |
| | | align-items: center; |
| | | } |
| | | |
| | | .form-label { |
| | | margin-bottom: 0; |
| | | border-bottom: 1px solid #FFFFFF; |
| | | padding: 5px; |
| | | font-size: 12px; |
| | | width: 60px; |
| | | /* Adjust the font size as per your requirement */ |
| | | } |
| | | |
| | | .form-input { |
| | | flex: 1; |
| | | margin-bottom: 0; |
| | | border-bottom: 1px solid #c7c7c7; |
| | | padding: 5px; |
| | | font-size: 12px; |
| | | background-color: #FFFFFF; |
| | | /* Adjust the font size as per your requirement */ |
| | | } |
| | | |
| | | .plus-button { |
| | | position: fixed; |
| | | bottom: 20px; |
| | | right: 20px; |
| | | width: 60px; |
| | | height: 60px; |
| | | border-radius: 50%; |
| | | background-color: #007bff; |
| | | color: #ffffff; |
| | | text-align: center; |
| | | line-height: 59px; |
| | | font-size: 24px; |
| | | cursor: pointer; |
| | | z-index: 1000; |
| | | margin-bottom: 35px; |
| | | } |
| | | |
| | | /* 页面整体样式不变 */ |
| | | page { |
| | | background-color: var(--bg-color); |
| | | min-height: 100vh; |
| | | display: flex; |
| | | flex-direction: column; |
| | | box-sizing: border-box; |
| | | background-color: #efeff4; |
| | | min-height: 100%; |
| | | height: auto; |
| | | } |
| | | |
| | | .page-container { |
| | | padding: 0; |
| | | flex: 1; |
| | | display: flex; |
| | | flex-direction: column; |
| | | } |
| | | |
| | | /* 顶部提示框不变 */ |
| | | .tips { |
| | | color: #67c23a; |
| | | font-size: 14px; |
| | | line-height: 40px; |
| | | color: var(--success-color); |
| | | font-size: 28rpx; |
| | | line-height: 80rpx; |
| | | text-align: center; |
| | | background-color: #f0f9eb; |
| | | background-color: rgba(0, 180, 42, 0.1); |
| | | border-radius: 16rpx; |
| | | height: 0; |
| | | opacity: 0; |
| | | transform: translateY(-100%); |
| | | transform: translateY(-20rpx); |
| | | transition: all 0.3s; |
| | | margin: 20rpx 20rpx 0 20rpx; |
| | | box-shadow: 0 2rpx 10rpx rgba(0, 180, 42, 0.15); |
| | | z-index: 2000; |
| | | position: relative; |
| | | } |
| | | |
| | | .tips-ani { |
| | | transform: translateY(0); |
| | | height: 40px; |
| | | height: 80rpx; |
| | | opacity: 1; |
| | | } |
| | | |
| | | .content { |
| | | width: 100%; |
| | | /* 固定头部区域优化 */ |
| | | .fixed-header { |
| | | position: fixed; |
| | | top: 0; |
| | | left: 0; |
| | | right: 0; |
| | | z-index: 1000; |
| | | background-color: var(--bg-color); |
| | | padding: 16rpx; |
| | | /* 减小顶部区域内边距 */ |
| | | box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06); |
| | | } |
| | | |
| | | .list-picture { |
| | | width: 100%; |
| | | height: 145px; |
| | | } |
| | | |
| | | .thumb-image { |
| | | width: 100%; |
| | | height: 100%; |
| | | } |
| | | |
| | | .ellipsis { |
| | | display: flex; |
| | | overflow: hidden; |
| | | } |
| | | |
| | | .uni-ellipsis-1 { |
| | | overflow: hidden; |
| | | white-space: nowrap; |
| | | text-overflow: ellipsis; |
| | | } |
| | | |
| | | .uni-ellipsis-2 { |
| | | overflow: hidden; |
| | | text-overflow: ellipsis; |
| | | display: -webkit-box; |
| | | -webkit-line-clamp: 2; |
| | | -webkit-box-orient: vertical; |
| | | } |
| | | |
| | | // 搜索框 |
| | | /* 搜索栏样式优化 */ |
| | | .search-bar { |
| | | width: 100%; |
| | | height: 100rpx; |
| | | margin-top: 2%; |
| | | margin-bottom: 16rpx; |
| | | /* 减小底部边距 */ |
| | | } |
| | | |
| | | .search-bar-box { |
| | | .search-card { |
| | | display: flex; |
| | | margin: 0 auto; |
| | | width: 620rpx; |
| | | align-items: center; |
| | | background-color: var(--card-bg); |
| | | border-radius: 20rpx; |
| | | /* 减小圆角半径 */ |
| | | box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05); |
| | | /* 减小阴影 */ |
| | | height: 70rpx; |
| | | border: 5rpx solid #00a8cc; |
| | | border-radius: 50rpx; |
| | | /* 减小高度 */ |
| | | } |
| | | |
| | | .search-span { |
| | | width: 100rpx; |
| | | height: 56rpx; |
| | | margin-top: 6rpx; |
| | | margin-left: 30rpx; |
| | | .picker { |
| | | width: 180rpx; |
| | | /* 减小选择器宽度 */ |
| | | height: 70rpx; |
| | | line-height: 70rpx; |
| | | text-align: center; |
| | | font-size: 24rpx; |
| | | /* 减小字体大小 */ |
| | | color: var(--text-secondary); |
| | | border-right: 1rpx solid var(--border-color); |
| | | white-space: nowrap; |
| | | } |
| | | |
| | | .search-text { |
| | | width: 100%; |
| | | margin-top: 10rpx; |
| | | margin-left: 20rpx; |
| | | font-size: 30rpx; |
| | | color: #7f7f81; |
| | | .search-input { |
| | | flex: 1; |
| | | height: 70rpx; |
| | | line-height: 70rpx; |
| | | font-size: 24rpx; |
| | | /* 减小字体大小 */ |
| | | color: var(--text-color); |
| | | padding: 0 20rpx; |
| | | /* 减小内边距 */ |
| | | border: none; |
| | | outline: none; |
| | | } |
| | | |
| | | .search-btn { |
| | | background-color: #00a8cc; |
| | | /* Green */ |
| | | background: linear-gradient(135deg, var(--primary-color), #2B67FF); |
| | | color: white; |
| | | text-align: center; |
| | | display: inline-block; |
| | | font-size: 35rpx; |
| | | width: 240rpx; |
| | | font-size: 24rpx; |
| | | /* 减小字体大小 */ |
| | | width: 160rpx; |
| | | /* 减小按钮宽度 */ |
| | | height: 70rpx; |
| | | line-height: 65rpx; |
| | | border-radius: 30rpx; |
| | | letter-spacing: 3rpx; |
| | | line-height: 70rpx; |
| | | border-radius: 0; |
| | | letter-spacing: 2rpx; |
| | | /* 减小字间距 */ |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | transition: all 0.3s; |
| | | box-shadow: 0 2rpx 6rpx rgba(64, 128, 255, 0.2); |
| | | /* 减小阴影 */ |
| | | } |
| | | |
| | | uni-button { |
| | | margin: 0; |
| | | margin-top: 0px; |
| | | margin-right: 0px; |
| | | margin-bottom: 0px; |
| | | margin-left: 0px; |
| | | .search-btn:hover { |
| | | background: linear-gradient(135deg, #2B67FF, #1A53FF); |
| | | transform: translateY(-1rpx); |
| | | box-shadow: 0 3rpx 8rpx rgba(64, 128, 255, 0.25); |
| | | } |
| | | |
| | | // |
| | | .search-btn:active { |
| | | transform: translateY(1rpx); |
| | | box-shadow: 0 1rpx 4rpx rgba(64, 128, 255, 0.15); |
| | | } |
| | | |
| | | /* 选项卡样式优化 */ |
| | | .newsTab { |
| | | margin-bottom: 0; |
| | | } |
| | | |
| | | uni-segmented-control { |
| | | background-color: var(--card-bg); |
| | | border-radius: 20rpx; |
| | | /* 减小圆角半径 */ |
| | | box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05); |
| | | /* 减小阴影 */ |
| | | overflow: hidden; |
| | | height: 70rpx; |
| | | /* 减小高度 */ |
| | | } |
| | | |
| | | uni-segmented-control .uni-segmented-control__item { |
| | | font-size: 24rpx; |
| | | /* 减小字体大小 */ |
| | | color: var(--text-secondary); |
| | | height: 70rpx; |
| | | line-height: 70rpx; |
| | | font-weight: 500; |
| | | } |
| | | |
| | | uni-segmented-control .uni-segmented-control__item--active { |
| | | color: var(--primary-color); |
| | | border-bottom: 2rpx solid var(--primary-color); |
| | | /* 减小下划线高度 */ |
| | | } |
| | | |
| | | /* 内容区域样式优化 */ |
| | | .content-container { |
| | | margin-top: 180rpx; |
| | | /* 减小顶部边距 */ |
| | | padding: 16rpx; |
| | | /* 减小内容区域内边距 */ |
| | | flex: 1; |
| | | overflow-y: auto; |
| | | } |
| | | |
| | | /* 列表卡片样式优化 */ |
| | | .list-card { |
| | | margin-bottom: 20rpx; |
| | | /* 减小底部边距 */ |
| | | background-color: var(--card-bg); |
| | | border-radius: 16rpx; |
| | | /* 减小圆角半径 */ |
| | | box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05); |
| | | /* 减小阴影 */ |
| | | overflow: hidden; |
| | | transition: all 0.3s; |
| | | } |
| | | |
| | | .list-card:hover { |
| | | transform: translateY(-2rpx); |
| | | /* 减小悬停时的上移距离 */ |
| | | box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08); |
| | | } |
| | | |
| | | /* 卡片头部样式优化 */ |
| | | .card-header { |
| | | padding: 0; |
| | | background-color: var(--primary-light); |
| | | } |
| | | |
| | | .header-content { |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | padding: 12rpx 16rpx; |
| | | /* 减小头部区域内边距 */ |
| | | position: relative; |
| | | } |
| | | |
| | | /* 单号信息区域优化 */ |
| | | .order-info { |
| | | flex: 1; |
| | | margin-right: 16rpx; |
| | | /* 减小右侧边距 */ |
| | | } |
| | | |
| | | .order-row { |
| | | display: flex; |
| | | flex-wrap: wrap; |
| | | gap: 12rpx; |
| | | /* 减小元素间距 */ |
| | | } |
| | | |
| | | .order-item { |
| | | flex: 1; |
| | | min-width: 160rpx; |
| | | /* 减小最小宽度 */ |
| | | } |
| | | |
| | | .order-label { |
| | | font-size: 20rpx; |
| | | /* 减小标签字体大小 */ |
| | | color: var(--text-secondary); |
| | | margin-bottom: 2rpx; |
| | | /* 减小标签与值之间的间距 */ |
| | | display: block; |
| | | font-weight: 500; |
| | | } |
| | | |
| | | .order-value { |
| | | font-size: 22rpx; |
| | | /* 减小值字体大小 */ |
| | | color: var(--text-color); |
| | | font-weight: 500; |
| | | white-space: nowrap; |
| | | overflow: hidden; |
| | | text-overflow: ellipsis; |
| | | } |
| | | |
| | | /* 状态标签优化 */ |
| | | .status-badge { |
| | | display: inline-block; |
| | | padding: 4rpx 10rpx; |
| | | /* 减小状态标签尺寸 */ |
| | | border-radius: 8rpx; |
| | | /* 减小圆角半径 */ |
| | | font-size: 18rpx; |
| | | /* 减小状态标签字体大小 */ |
| | | font-weight: 500; |
| | | white-space: nowrap; |
| | | flex-shrink: 0; |
| | | } |
| | | |
| | | .approved { |
| | | background-color: rgba(0, 180, 42, 0.1); |
| | | color: var(--success-color); |
| | | } |
| | | |
| | | .pending { |
| | | background-color: rgba(245, 63, 63, 0.1); |
| | | color: var(--danger-color); |
| | | } |
| | | |
| | | /* 检验人信息区域优化 */ |
| | | .inspector-info { |
| | | background-color: rgba(245, 63, 63, 0.05); |
| | | padding: 12rpx 16rpx; |
| | | /* 减小内边距 */ |
| | | border-radius: 0; |
| | | margin-bottom: 12rpx; |
| | | /* 与下方内容保持适当间距 */ |
| | | } |
| | | |
| | | .info-row { |
| | | display: flex; |
| | | margin-bottom: 8rpx; |
| | | /* 减小行间距 */ |
| | | align-items: center; |
| | | } |
| | | |
| | | .info-label { |
| | | font-size: 20rpx; |
| | | /* 减小标签字体大小 */ |
| | | color: var(--text-secondary); |
| | | width: 120rpx; |
| | | /* 减小标签宽度 */ |
| | | } |
| | | |
| | | .info-value { |
| | | font-size: 22rpx; |
| | | /* 减小值字体大小 */ |
| | | color: var(--text-color); |
| | | font-weight: 500; |
| | | } |
| | | |
| | | .result-badge { |
| | | padding: 4rpx 10rpx; |
| | | /* 减小结果标签尺寸 */ |
| | | border-radius: 8rpx; |
| | | /* 减小圆角半径 */ |
| | | } |
| | | |
| | | .pass { |
| | | background-color: rgba(0, 180, 42, 0.1); |
| | | color: var(--success-color); |
| | | } |
| | | |
| | | .fail { |
| | | background-color: rgba(245, 63, 63, 0.1); |
| | | color: var(--danger-color); |
| | | } |
| | | |
| | | .pending { |
| | | background-color: rgba(255, 193, 7, 0.2); |
| | | /* 黄色背景 */ |
| | | color: #FF7D00; |
| | | /* 橙色文字 */ |
| | | font-weight: 600; |
| | | /* 加粗文字 */ |
| | | } |
| | | |
| | | /* 复选框组样式优化 */ |
| | | .checkbox-group { |
| | | display: flex; |
| | | padding: 12rpx 16rpx; |
| | | /* 减小内边距 */ |
| | | border-bottom: 1rpx solid var(--border-color); |
| | | background-color: rgba(230, 240, 255, 0.3); |
| | | } |
| | | |
| | | .checkbox-item { |
| | | display: flex; |
| | | align-items: center; |
| | | margin-right: 24rpx; |
| | | /* 减小右侧边距 */ |
| | | font-size: 22rpx; |
| | | /* 减小字体大小 */ |
| | | color: var(--text-secondary); |
| | | } |
| | | |
| | | checkbox { |
| | | transform: scale(0.8); |
| | | /* 减小复选框大小 */ |
| | | margin-right: 10rpx; |
| | | /* 减小右侧边距 */ |
| | | } |
| | | |
| | | /* 信息网格布局优化 */ |
| | | .info-grid { |
| | | padding: 12rpx 16rpx; |
| | | /* 减小内边距 */ |
| | | } |
| | | |
| | | .grid-row { |
| | | display: flex; |
| | | flex-wrap: wrap; |
| | | margin-bottom: 12rpx; |
| | | /* 减小行间距 */ |
| | | } |
| | | |
| | | .grid-item { |
| | | flex: 1; |
| | | min-width: 200rpx; |
| | | /* 减小最小宽度 */ |
| | | margin-right: 16rpx; |
| | | /* 减小右侧边距 */ |
| | | } |
| | | |
| | | .grid-item:last-child { |
| | | margin-right: 0; |
| | | } |
| | | |
| | | .grid-label { |
| | | font-size: 20rpx; |
| | | /* 减小标签字体大小 */ |
| | | color: var(--text-secondary); |
| | | margin-bottom: 3rpx; |
| | | /* 减小标签与值之间的间距 */ |
| | | display: block; |
| | | } |
| | | |
| | | .grid-value { |
| | | font-size: 22rpx; |
| | | /* 减小值字体大小 */ |
| | | color: var(--text-color); |
| | | font-weight: 500; |
| | | } |
| | | |
| | | /* 浮动按钮样式优化 */ |
| | | .plus-button { |
| | | position: fixed; |
| | | bottom: 30rpx; |
| | | right: 30rpx; |
| | | width: 80rpx; |
| | | /* 减小按钮大小 */ |
| | | height: 80rpx; |
| | | border-radius: 50%; |
| | | background: linear-gradient(135deg, var(--primary-color), #2B67FF); |
| | | color: white; |
| | | text-align: center; |
| | | line-height: 80rpx; |
| | | font-size: 40rpx; |
| | | /* 减小字体大小 */ |
| | | cursor: pointer; |
| | | z-index: 1000; |
| | | box-shadow: 0 4rpx 16rpx rgba(64, 128, 255, 0.25); |
| | | transition: all 0.3s; |
| | | } |
| | | |
| | | .plus-button:hover { |
| | | background: linear-gradient(135deg, #2B67FF, #1A53FF); |
| | | transform: translateY(-4rpx); |
| | | box-shadow: 0 8rpx 24rpx rgba(64, 128, 255, 0.35); |
| | | } |
| | | |
| | | .plus-button:active { |
| | | transform: translateY(2rpx); |
| | | box-shadow: 0 2rpx 8rpx rgba(64, 128, 255, 0.2); |
| | | } |
| | | |
| | | /* 响应式设计优化 */ |
| | | @media (max-width: 768px) { |
| | | .fixed-header { |
| | | padding: 12rpx; |
| | | } |
| | | |
| | | .search-bar { |
| | | margin-bottom: 12rpx; |
| | | } |
| | | |
| | | .search-card { |
| | | height: 60rpx; |
| | | } |
| | | |
| | | .picker { |
| | | width: 160rpx; |
| | | height: 60rpx; |
| | | line-height: 60rpx; |
| | | font-size: 22rpx; |
| | | } |
| | | |
| | | .search-input { |
| | | height: 60rpx; |
| | | line-height: 60rpx; |
| | | font-size: 22rpx; |
| | | padding: 0 16rpx; |
| | | } |
| | | |
| | | .search-btn { |
| | | width: 140rpx; |
| | | height: 60rpx; |
| | | line-height: 60rpx; |
| | | font-size: 22rpx; |
| | | } |
| | | |
| | | uni-segmented-control { |
| | | height: 60rpx; |
| | | } |
| | | |
| | | uni-segmented-control .uni-segmented-control__item { |
| | | height: 60rpx; |
| | | line-height: 60rpx; |
| | | font-size: 22rpx; |
| | | } |
| | | |
| | | .content-container { |
| | | margin-top: 160rpx; |
| | | padding: 12rpx; |
| | | } |
| | | |
| | | .list-card { |
| | | margin-bottom: 16rpx; |
| | | border-radius: 12rpx; |
| | | } |
| | | |
| | | .header-content { |
| | | padding: 8rpx 12rpx; |
| | | /* 进一步减小头部区域高度 */ |
| | | } |
| | | |
| | | .order-row { |
| | | gap: 10rpx; |
| | | } |
| | | |
| | | .order-item { |
| | | min-width: 140rpx; |
| | | } |
| | | |
| | | .order-label { |
| | | font-size: 18rpx; |
| | | margin-bottom: 2rpx; |
| | | } |
| | | |
| | | .order-value { |
| | | font-size: 20rpx; |
| | | } |
| | | |
| | | .status-badge { |
| | | padding: 3rpx 8rpx; |
| | | font-size: 16rpx; |
| | | } |
| | | |
| | | .inspector-info { |
| | | padding: 8rpx 12rpx; |
| | | margin-bottom: 8rpx; |
| | | } |
| | | |
| | | .info-row { |
| | | margin-bottom: 6rpx; |
| | | } |
| | | |
| | | .info-label { |
| | | font-size: 18rpx; |
| | | width: 100rpx; |
| | | } |
| | | |
| | | .info-value { |
| | | font-size: 20rpx; |
| | | } |
| | | |
| | | .result-badge { |
| | | padding: 3rpx 8rpx; |
| | | } |
| | | |
| | | .pending { |
| | | background-color: rgba(255, 193, 7, 0.2); |
| | | /* 黄色背景 */ |
| | | color: #FF7D00; |
| | | /* 橙色文字 */ |
| | | } |
| | | |
| | | .checkbox-group, |
| | | .info-grid { |
| | | padding: 8rpx 12rpx; |
| | | } |
| | | |
| | | .checkbox-item { |
| | | margin-right: 20rpx; |
| | | font-size: 20rpx; |
| | | } |
| | | |
| | | .grid-item { |
| | | min-width: 180rpx; |
| | | margin-right: 12rpx; |
| | | } |
| | | |
| | | .grid-label { |
| | | font-size: 18rpx; |
| | | margin-bottom: 2rpx; |
| | | } |
| | | |
| | | .grid-value { |
| | | font-size: 20rpx; |
| | | } |
| | | |
| | | .plus-button { |
| | | width: 70rpx; |
| | | height: 70rpx; |
| | | line-height: 70rpx; |
| | | font-size: 35rpx; |
| | | bottom: 20rpx; |
| | | right: 20rpx; |
| | | } |
| | | } |
| | | </style> |