From 9d5b4d650e5b01081d3537c750e7469db4d161e3 Mon Sep 17 00:00:00 2001 From: 马宇豪 <978517621@qq.com> Date: 星期二, 29 四月 2025 08:53:20 +0800 Subject: [PATCH] 提交 --- pages/tabBar/current/current.vue | 637 +++++++++++++++++++++++---------------------------------- 1 files changed, 259 insertions(+), 378 deletions(-) diff --git a/pages/tabBar/current/current.vue b/pages/tabBar/current/current.vue index 24a0a5f..88df9d9 100644 --- a/pages/tabBar/current/current.vue +++ b/pages/tabBar/current/current.vue @@ -6,423 +6,304 @@ <view class="statusBar" :style="{ paddingTop: statusBarHeight + 'px' }"></view> <!-- 真正的导航栏内容 --> <view class="navBar"> - <u-icon style=" margin-left: -25px;" name="arrow-left" color="black" size="17" @click="goBack" v-if="role!='工作人员'" /> - <view class="barText">信息查看</view> + <view class="barText">记录查询</view> </view> </view> - <div v-if="loading" style='display: flex;justify-content: center;position: absolute;width:100%;top: 40%;left: 0'> - <u-loading-icon></u-loading-icon> - </div> <!-- 页面内容 --> - <view class="controlBar"> - <view class="buttonGroup"> - <view class="buttonItem all" - :class="{ 'active': selectedSaleAnalysis === 'all'}" - @click="handleButtonClick({label: 'all',name: '全部'})"> - 全部 - </view> - <view v-for="(button, index) in buttons" :key="index" class="buttonItem" - :class="{ 'active': selectedSaleAnalysis === button.label, - 'all': button.label === 'all', - 'red': button.label === 'red', - 'orange':button.label === 'orange', - 'yellow':button.label === 'yellow', - 'blue': button.label === 'blue'}" - @click="handleButtonClick(button)"> - {{ button.name }} - </view> - </view> - <view class="listHead"> - - <view class="switchBtn"> - <u-switch v-model="checked" size="20" @change="clickSwitch" style="margin-right: 6px"></u-switch> - <text>仅紧临</text> - </view> - </view> - </view> - <view style="display: flex;flex-direction: column;margin-bottom: 55px;"> - <view class="examineList"> - <scroll-view :scroll-top="scrollTop" scroll-y="true" class="listContent" @scrolltoupper="upper" v-if="InfoList.length > 0" - @scrolltolower="lower" @scroll="scroll" lower-threshold="50"> - <view v-for="(item, index) in InfoList" :key="index" class="itemContent" @click="toDetail(item)"> - <view class="content"> - <text class="tit">[{{item.colorContent}}]{{item.title}}</text><br> - <text class="cont">{{item.content}}</text> - <view class="btnGroup"> - <text style="font-size: 14px;">发送 {{item.responseSum}} 人,叫应 {{item.responseNum}} 人</text> - <u-button - size="medium" - style="background-color:rgb(17, 204, 33);color: white;width: 100px;margin: 0;font-size: 13px;height: 30px;" - @click.native.stop="toResponsivity(item)" - > - 叫应率 {{item.responsesRate}} - </u-button> - </view> - </view> - </view> - </scroll-view> - <view v-else> - <u-empty margin-top="40%" text="数据为空" mode="data"></u-empty> - </view> - </view> - </view> + <u-toast ref="uToast"></u-toast> + <view class="m-p-15"> + <view class="searchBar"> + <u-input placeholder="请输入或扫描二维码编号进行搜索" v-model="searchContent"> + <template slot="prefix"> + <u-icon name="scan" color="#2979ff" size="28" @click="scanCode()"></u-icon> + </template> + <template slot="suffix"> + <u-button type="primary" class="searchBtn" size="small" text="溯源查询" shape="circle" @click="getList()"></u-button> + </template> + </u-input> + </view> + <view class="productCard" v-if="dataList && dataList.length>0"> + <view v-if="dataList[0].hazmatBasic"> + <view>名称:<span>{{dataList[0].hazmatBasic?dataList[0].hazmatBasic.name:''}}({{dataList[0].hazmatBasic?dataList[0].hazmatBasic.productSn :''}})</span></view> + <view>条码:<span>{{dataList[0].code}}</span></view> + </view> + <view v-if="dataList[0].productBasic"> + <view>名称:{{dataList[0].productBasic?dataList[0].productBasic.name:''}}({{dataList[0].productBasic?dataList[0].productBasic.productSn :''}})</view> + <view>条码:{{dataList[0].code}}</view> + </view> + </view> + <view class="cardList" v-if="dataList && dataList.length>0"> + <view class="card-i" v-for="(item,index) in dataList" :key="index"> + <view class="card-i-l"> + <span><u-icon name="clock-fill" color="#2979ff" size="18" style="margin-right: 4px"></u-icon>{{item.updateTime}}</span> + <view v-if="item.user"> + <span></span>{{item.user.departName}}部门的<span style="font-weight: bold">{{item.user.name }}</span>进行了<span :class="item.num>=0?'green':'red'">{{item.state==0?'入库':item.state==1?'取用':item.state==2?'归还':item.state==3?'标签作废':item.state==4?'用尽登记':item.state==5?'销售':item.state==6?'零头入库 ':'--'}}</span> + </view> + </view> + <view v-if="item.hazmatBasic" class="card-i-r" :class="item.num>=0?'green':'red'"> + <span v-if="item.num > 0">+</span>{{item.num + item.hazmatBasic.unit}} + </view> + <view v-if="item.productBasic" class="card-i-r" :class="item.num>=0?'green':'red'"> + <span v-if="item.num > 0">+</span>{{item.num + item.productBasic.unit}} + </view> + </view> + </view> + <view v-else style="margin-top: 200rpx"> + <u-empty + mode="list" + text="通过条码搜索记录" + > + </u-empty> + </view> + </view> <tabBar :currentPagePath="page"></tabBar> </view> </template> <script> import tabBar from '../tabBarIndex.vue' - import { getPublished, getResponseDetail } from '../../../api/notice.js' + import {getHazmatFlowByCode} from '../../../api/index.js' import tebBar from '../tabBarIndex.vue' + import VUE_APP_BASE_URL from "../../../common/constant"; export default { components:{ tabBar }, data() { return { - data: { - pageIndex: 1, - pageSize: 10, - searchParams: { - emergType: null,//1-紧急;2-常规 - warningLevel: null,//1-红色预警;2-橙色预警;3-黄色预警;4-蓝色预警 - } - }, - total: 0, - scrollTop: 0, - loading: false, page: 'pages/tabBar/current/current', - checked: false, - isReadOnly: false, - statusBarHeight: 0, - buttons: [ - { - label: 'red', - name: '红' - }, - { - label: 'orange', - name: '橙' - }, - { - label: 'yellow', - name: '黄' - }, - { - label: 'blue', - name: '蓝' - }, - ], - selectedSaleAnalysis: 'all', - InfoList: [], - unitType: null, - role:'', + statusBarHeight: '', + searchContent: '', + dataList: [] } }, onLoad() { - this.unitType = uni.getStorageSync('unittype') + 1; - console.log("11",this.unitType) - //获取手机状态栏高度 this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight']; - uni.hideTabBar(); }, onShow() { - this.role = uni.getStorageSync('roleName'); - this.data.pageIndex = 1 - this.getInfoList(); + // this.getList() + // this.role = uni.getStorageSync('roleName'); }, + created(){ + uni.hideTabBar() + }, methods: { - goBack() { - uni.switchTab({ - url:'/pages/tabBar/firstPage/firstPage' - }); - }, - getInfoList() { - this.loading = true - this.data.searchParams.emergType = this.checked ? 1 : null; - this.data.searchParams.warningLevel = this.selectedSaleAnalysis == 'all' ? null : this.selectedSaleAnalysis =='red' ? 1 : this.selectedSaleAnalysis =='orange' ? 2: this.selectedSaleAnalysis =='yellow'? 3 : 4; - getPublished(this.data).then(res => { - if(res.code == 100) { - let list = res.data?res.data: []; - if (res.pageIndex != 1) { - this.InfoList = this.InfoList.concat(list) - } else { - this.InfoList = list; - } - this.total = res.total - if(this.InfoList && this.InfoList.length > 0) { - this.InfoList.forEach((item, index) => { - this.InfoList[index].colorContent = item.warningLevel == 1 ? '红色预警': item.warningLevel == 2 ? '橙色预警': item.warningLevel == 3 ? '黄色预警':'蓝色预警'; - this.InfoList[index].warningLevel = item.warningLevel; - }); - } - }else{ - uni.$u.toast(res.msg) - } - this.loading = false - }) - }, - handleButtonClick(button) { - this.data.pageIndex = 1 - this.selectedSaleAnalysis = button.label; - this.getInfoList(); - }, - toDetail(item) { - item.responsesRate = item.responsesRate.replace(/%/g, '%25'); - uni.navigateTo({ - url: `/pages/tabBar/notice/detail?data=` + encodeURIComponent(JSON.stringify(item)) - }) - }, - toResponsivity(item) { - const param = { - pageIndex: 1, - pageSize: 100, - searchParams: { - warnInfoId: item.id - } - } - getResponseDetail(param).then(res => { - if(res.code == 100){ - console.log("res",res) - let data = res.data.appPageResponseByIdRespDTOS; - res.data.appPageResponseByIdRespDTOS.forEach((item,index) => { - if(item.forwardRate){ - data[index].forwardRate = item.forwardRate.replace(/%/g, '%25'); - } - - }) - uni.navigateTo({ - url: `/pages/tabBar/responsivity/countyResponsivity?data=` + encodeURIComponent(JSON.stringify(res.data)) - }) - }else{ - uni.$u.toast(res.msg) - } - }) - }, - //下拉刷新 - onPullDownRefresh() { - console.log('refresh'); - setTimeout(() => { - uni.stopPullDownRefresh(); - this.getInfoList(); - }, 1000); - }, - clickSwitch(e) { - this.data.pageIndex = 1 - this.getInfoList(); - }, + scanCode(){ + const t = this + t.dataList = [] + t.searchContent = '' + uni.scanCode({ + autoZoom: false, + scanType: ['qrCode'], + success: function (res) { + if(res && res.result){ + if(res.result.indexOf('SJ') == -1 && res.result.indexOf('CP') == -1){ + t.$refs.uToast.show({ + type: 'default', + message: '没有识别到正确的编码,请重新扫码', + duration: 2000 + }) + return + } + t.searchContent = res.result + getHazmatFlowByCode({code: res.result}).then(re => { + if(re.code == 200) { + t.dataList = re.data?re.data: [] + }else{ + uni.$u.toast(re.message) + } + }) + }else{ + uni.showToast({ + title: '该二维码已失效或不包含条码信息', + duration: 2000 + }) + } + } + }) + }, - upper: function(e) { - // console.log(e) - }, - lower: function(e) { - if (this.data.pageIndex * this.data.pageSize >= this.total){ - // uni.$u.toast('已加载全部数据') - return - } - //并且让页码+1,调用获取数据的方法获取第二页数据 - this.data.pageIndex++ - //此处调用自己获取数据列表的方法 - this.getInfoList() - }, - scroll: function(e) { - // console.log(e) - }, - goBack() { - uni.switchTab({ - url:'/pages/tabBar/firstPage/firstPage' - }); - }, + getList(){ + const t = this + if(t.searchContent == ''){ + uni.$u.toast('请输入二维码编号') + }else{ + getHazmatFlowByCode({code: t.searchContent}).then(re => { + if(re.code == 200) { + t.dataList = re.data?re.data: [] + }else{ + uni.$u.toast(re.message) + } + }) + } + }, + + toStudy(item) { + uni.setStorageSync("prevPage", '/pages/tabBar/current/current'); + uni.navigateTo({ + url: `/pages/tabBar/current/detail?bank=` + encodeURIComponent(JSON.stringify(item)) + }) + }, } } </script> <style lang="scss" scoped> -.box { - display: flex; - flex-direction: column; - width: 100%; - height: 100%; +.navBarBox .navBar { + background-color:#fff; + height: 50px; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + box-shadow: 0 3px 12px rgba(0,0,0,0.05); + } .fix{ - position: sticky; - top: 0; - left: 0; - right: 0; - width: 100%; - z-index: 1; -} -.navBarBox .navBar { - background-color:#fff; - height: 50px; - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; - box-shadow: 0 3px 12px rgba(0,0,0,0.05); -} -.barText{ - text-align: center; - width: 85%; - font-size: 16px; - /* text-align: center; */ - font-weight: 600; + position: sticky; + top: 0; + left: 0; + right: 0; + width: 100%; + z-index: 9999; } .statusBar{ - background-color:lightgrey; + background-color:lightgrey; } -/* .contentList{ - display: flex; - flex-direction: column; -} -.buttonGroup{ - margin: 18px 12px; - display: flex; - align-items: center; - justify-content: space-between; -} -.buttonAll{ - margin-left:5px; - color: white; - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; - width: 35px; - height: 30px; - border-radius: 5px; - font-size: 12px; - font-weight: 700; -} */ -.controlBar{ - margin: 12px 12px 0; - padding: 12px; - height: 90px; - box-sizing: border-box; - display: flex; - flex-direction: column; - justify-content: space-between; - width: calc(100% - 24px); - background: #fff; - border-radius: 5px; - box-shadow: 0 3px 12px rgba(0,0,0,0.05); - - .buttonGroup{ - display: flex; - align-items: center; - justify-content: space-between; - margin-bottom: 12px; - } - - .listHead{ - display: flex; - align-items: center; - justify-content: flex-end; - } -} -.buttonItem{ - width: calc(20% - 4px); - color: white; - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; - height: 30px; - border-radius: 5px; - &.active{ - border: 1px solid rgba(0,0,0,.4); - box-shadow: 0 1px 3px rgba(0,0,0,0.1); - } -} -.all { - background-color: rgb(17,204,33); - &.active{ - background-image: linear-gradient(#22992d,#12da23); - } -} -.active { - border: 1.5px solid #8d8d8d; -} -.red { - background-color: #ff5555; - &.active{ - background:linear-gradient(#dc2f2f, #ff5b5b); - } -} -.orange { - background-color: rgb(251, 158, 13); - &.active{ - background: linear-gradient(#e28e0c,#ffa90e); - } -} -.yellow { - background-color: rgb(255, 223, 37); - &.active{ - background: linear-gradient(#e6c921,#ffef28); - } -} -.blue { - background-color: #409EFF; - &.active{ - background: linear-gradient(#3a8ee6,#44a9ff); - } -} -.switchBtn{ - display: flex; - align-items: center; -} -.examineList{ - margin-top: 12px; - height: calc(100vh - 246px); - overflow: hidden; - overflow-y: scroll; -} -.listContent{ - display: flex; - flex-direction: column; - width: calc(100% - 24px); - margin: 0 12px; - // margin-bottom: 30px; - background: #fff; - border-radius: 5px; - box-shadow: 0 3px 12px rgba(0,0,0,0.05); - height: 100%; -} -.itemContent{ - color: #333; +.barText{ + /* text-align: center; */ font-size: 16px; - margin-top: 15px; - padding: 0 12px 10px; - border-bottom: 1px solid #ebebeb; -} -.content{ - .tit{ - width: 100%; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - } - .cont{ - width: 100%; - font-size: 14px; - color: #666; - display: block; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - margin-bottom: 6px; - } - .btnGroup{ - width: 100%; - display: flex; - justify-content: space-between; - } -} -.buttonCo{ - margin-top: 5px; - margin-bottom: 10px; + font-weight: 600; + flex: 2; + text-align: center; } +.u-input{ + border-color: #f5f7fa !important; + border-radius: 99px; + background: #f5f7fa; + box-shadow: 0px -6px 10px rgba(255, 255, 255, 1), 0px 4px 15px rgba(0, 0, 0, 0.1),0px 3px 6px rgba(0, 0, 0, 0.1) inset !important; + transition: box-shadow .1s ease !important; +} +.searchBtn{ + border: 1px solid #fff; + padding: 0 30rpx; + box-shadow: 0px -6px 10px rgba(255, 255, 255, 1), 0px 4px 15px rgba(0, 0, 0, 0.15)!important; +} +.m-p-15{ + width: 100%; + padding: 0 15px; + margin-top: 20px; + box-sizing: border-box; + + .searchBar{ + position: -webkit-sticky; + position: sticky; + top: 50px; + left: 0; + right: 0; + z-index: 9998; + } + + .productCard{ + width: 100%; + background: #fff; + border-radius: 20px; + padding: 15px; + margin: 15px auto; + box-sizing: border-box; + box-shadow: 4px 4px 12px rgba(150,150,150,.05); + + &>view>view{ + width: 100%; + font-size: 28rpx; + font-weight: bold; + margin-bottom: 10rpx; + + span{ + color: #2979ff; + } + + &:last-of-type{ + margin-bottom: 0; + } + } + } + + .cardList{ + width: 100%; + box-sizing: border-box; + margin-top: 15px; + box-shadow: 4px 4px 12px rgba(150,150,150,.05); + padding-bottom: 75px; + + .card-i{ + width: 100%; + background: #fff; + border-radius: 12px; + padding: 20px 15px; + box-sizing: border-box; + margin: 0 auto; + display: flex; + justify-content: space-between; + align-items: center; + border-bottom: 1px dashed #ccc; + + &:first-of-type{ + border-radius: 20px 20px 12px 12px; + } + + &:last-of-type{ + margin-bottom: 0; + border-bottom: none; + border-radius: 12px 12px 20px 20px; + } + + .card-i-l{ + height: 100%; + width: 75%; + flex-direction: column; + align-items: flex-end; + justify-content: space-between; + &>span{ + display: flex; + align-items: center; + font-size: 30rpx; + font-weight: bold; + margin-bottom: 15rpx; + } + + &>view{ + width: 100%; + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + span{ + &:first-of-type{ + display: inline-block; + width: 22px; + } + } + } + } + .card-i-r{ + height: 100%; + width: 25%; + text-align: right; + font-size: 32rpx; + font-weight: bolder; + } + .green{ + color: #5fb734; + } + .red{ + color: #ed6464 + } + } + } +} </style> \ No newline at end of file -- Gitblit v1.9.2