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 | 312 ++++++++++++++++++++++++++++++++++++++++++++-------
1 files changed, 269 insertions(+), 43 deletions(-)
diff --git a/pages/tabBar/current/current.vue b/pages/tabBar/current/current.vue
index 46b8829..88df9d9 100644
--- a/pages/tabBar/current/current.vue
+++ b/pages/tabBar/current/current.vue
@@ -5,20 +5,66 @@
<!-- 状态栏占位 -->
<view class="statusBar" :style="{ paddingTop: statusBarHeight + 'px' }"></view>
<!-- 真正的导航栏内容 -->
- <view style="display: flex; flex-direction: column;">
- <view class="navBar">
- <u-icon style=" margin-left: -25px;" name="arrow-left" color="black" size="17" @click="goBack" />
- <view class="barText">信息</view>
- </view>
+ <view class="navBar">
+ <view class="barText">记录查询</view>
</view>
</view>
- <text>通用信息详情</text>
+ <!-- 页面内容 -->
+ <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 {getHazmatFlowByCode} from '../../../api/index.js'
+ import tebBar from '../tabBarIndex.vue'
+ import VUE_APP_BASE_URL from "../../../common/constant";
export default {
components:{
tabBar
@@ -26,58 +72,238 @@
data() {
return {
page: 'pages/tabBar/current/current',
- statusBarHeight: ''
+ statusBarHeight: '',
+ searchContent: '',
+ dataList: []
}
-
},
onLoad() {
- //获取手机状态栏高度
this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
- uni.hideTabBar();
},
+ onShow() {
+ // this.getList()
+ // this.role = uni.getStorageSync('roleName');
+ },
+ created(){
+ uni.hideTabBar()
+ },
methods: {
- goBack() {
- console.log("1111")
- uni.switchTab({
- url:'/pages/tabBar/firstPage/firstPage'
- });
+ 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
+ })
+ }
+ }
+ })
+ },
+
+ 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>
-.box {
- display: flex;
- flex-direction: column;
- width: 100%;
- height: 100%;
+<style lang="scss" scoped>
+.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:lightgrey;
- height: 45px;
- display: flex;
- flex-direction: row;
- justify-content: center;
- align-items: center;
-}
-.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;
}
+.barText{
+ /* text-align: center; */
+ font-size: 16px;
+ 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