件码扫描结果

src/views/ManualOperation/ScanResults/index.vue

+<template>
+  <div id="topDiv">
+    <van-nav-bar
+      title="件烟扫描结果"
+      left-text=""
+      left-arrow
+      @click-left="$router.go(-1)"
+      class="nav-bar"
+    >
+      <template #right> ？ </template>
+    </van-nav-bar>
+  </div>
+
+  <div id="centerDiv">
+    <div class="code-info-card">
+      <p class="card-title">件码信息</p>
+      <div class="code-info-content">
+        <p class="info-item">
+          <span class="total-count">件码值：</span>
+          <span>{{ this.data.qrCode }}</span>
+        </p>
+        <p class="info-item">
+          <span class="total-count">生产时间：</span>
+          <span>{{ this.data.relationTime }}</span>
+        </p>
+        <p class="info-item">
+          <span class="total-count">机台号：</span>
+          <span>{{ this.data.barPieceProductLineDeviceCode }}</span>
+        </p>
+        <p class="info-item">
+          <span class="total-count">总条数：</span>
+          <span>{{ this.data.num }}</span>
+        </p>
+      </div>
+    </div>
+    <div class="form-container from">
+      <van-field
+        v-model="fieldValue"
+        is-link
+        readonly
+        placeholder="选择机台号"
+        @click="showPicker = true"
+      />
+      <van-popup
+        v-model:show="showPicker"
+        destroy-on-close
+        round
+        position="bottom"
+      >
+        <van-picker
+          :columns="uniqueNumColumns"
+          :model-value="pickerValue"
+          @cancel="showPicker = false"
+          @confirm="textsch"
+        />
+      </van-popup>
+      <van-button class="Resetbtn" @click="Reset()" type="default">重置</van-button>
+    </div>
+    <div class="barcode-container">
+      <p class="barcode-title">
+        <span>条码分布（5×5）</span>
+        <span><van-icon name="passed" />{{ index }}/2</span>
+      </p>
+      <div class="contbox">
+        <!-- 核心修改1：动态绑定class，根据选中的num值判断样式 -->
+        <div 
+          class="contboxitem" 
+          v-for="(item, index) in data.childList" 
+          :key="item.BrandId || index"
+          :class="{ 'selected-item': fieldValue && item.num === fieldValue }"
+        >
+          <p class="item-index">{{ index + 1 }}</p>
+          <p class="item-code">{{ formatQrCode(item.qrCode) }}</p>
+        </div>
+      </div>
+    </div>
+    <div class="btn-container">
+      <van-button plain class="query-btn" type="default">
+        <van-icon name="revoke" />
+        返回件码列表
+      </van-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  NavBar,
+  CellGroup,
+  Cell,
+  List,
+  Button,
+  Dialog,
+  Sticky,
+  Col,
+  Row,
+  Notify,
+  Icon,
+  Tab,
+  Tabs,
+  Picker,
+  Popup,
+  Field,
+} from "vant";
+export default {
+  name: "",
+  components: {
+    [NavBar.name]: NavBar,
+    [CellGroup.name]: CellGroup,
+    [Cell.name]: Cell,
+    [List.name]: List,
+    [Button.name]: Button,
+    [Dialog.Component.name]: Dialog.Component,
+    [Sticky.name]: Sticky,
+    [Col.name]: Col,
+    [Row.name]: Row,
+    [Icon.name]: Icon,
+    [Notify.Component.name]: Notify.Component,
+    [Tabs.name]: Tabs,
+    [Tab.name]: Tab,
+    [Picker.name]: Picker,
+    [Popup.name]: Popup,
+    [Field.name]: Field,
+  },
+  mounted() {
+    // this.$nativeQRCode.setStatusBarColor("#006953", "white");
+    // ScanOverlay.show('请扫描二维码')
+  },
+  data() {
+    return {
+      index: 1,
+      fieldValue: "",
+      pickerValue: "",
+      showPicker: false,
+      data: {
+        qrCode: "xxxx",
+        relationTime: "2024-08-29",
+        barPieceProductLineDeviceCode: "BXBSB001",
+        barPieceProductLineName: "盒条产线",
+        num: "50条（2页）",
+        childList: [
+          {
+            qrCode: "xxxx1",
+            generateTime: "2024-08-29 15:00:00",
+            boxBarProductLineDeviceCode: "BXBSB001",
+            boxBarProductLineName: "盒条产线",
+            codingDateStr: "2024-08-29",
+            num: "JT221-5",
+            BrandId: 1
+          },
+          {
+            qrCode: "xxxx2",
+            generateTime: "2024-08-29 15:00:01",
+            boxBarProductLineDeviceCode: "BXBSB001",
+            boxBarProductLineName: "盒条产线",
+            codingDateStr: "2024-08-29",
+            num: "JT221-5",
+            BrandId: 2
+          },
+          {
+            qrCode: "xxxx3",
+            generateTime: "2024-08-29 15:00:02",
+            boxBarProductLineDeviceCode: "BXBSB001",
+            boxBarProductLineName: "盒条产线",
+            codingDateStr: "2024-08-29",
+            num: "JT221-5",
+            BrandId: 3
+          },
+          {
+            qrCode: "xxxx4",
+            generateTime: "2024-08-29 15:00:03",
+            boxBarProductLineDeviceCode: "BXBSB001",
+            boxBarProductLineName: "盒条产线",
+            codingDateStr: "2024-08-29",
+            num: "JT221-5",
+            BrandId: 4
+          },
+          {
+            qrCode: "xxxx5",
+            generateTime: "2024-08-29 15:00:04",
+            boxBarProductLineDeviceCode: "BXBSB001",
+            boxBarProductLineName: "盒条产线",
+            codingDateStr: "2024-08-29",
+            num: "JT221-5",
+            BrandId: 5
+          },
+          {
+            qrCode: "xxxx6",
+            generateTime: "2024-08-29 15:00:05",
+            boxBarProductLineDeviceCode: "BXBSB001",
+            boxBarProductLineName: "盒条产线",
+            codingDateStr: "2024-08-29",
+            num: "JT221-5",
+            BrandId: 6
+          },
+          {
+            qrCode: "xxxx7",
+            generateTime: "2024-08-29 15:00:06",
+            boxBarProductLineDeviceCode: "BXBSB001",
+            boxBarProductLineName: "盒条产线",
+            codingDateStr: "2024-08-29",
+            num: "JT221-5",
+            BrandId: 7
+          },
+          {
+            qrCode: "xxxx8",
+            generateTime: "2024-08-29 15:00:07",
+            boxBarProductLineDeviceCode: "BXBSB001",
+            boxBarProductLineName: "盒条产线",
+            codingDateStr: "2024-08-29",
+            num: "JT221-5",
+            BrandId: 8
+          },
+          {
+            qrCode: "xxxx9",
+            generateTime: "2024-08-29 15:00:08",
+            boxBarProductLineDeviceCode: "BXBSB001",
+            boxBarProductLineName: "盒条产线",
+            codingDateStr: "2024-08-29",
+            num: "JT221-5",
+            BrandId: 9
+          },
+          {
+            qrCode: "xxxx10",
+            generateTime: "2024-08-29 15:00:09",
+            boxBarProductLineDeviceCode: "BXBSB001",
+            boxBarProductLineName: "盒条产线",
+            codingDateStr: "2024-08-29",
+            num: "JT221-5",
+            BrandId: 10
+          },
+          {
+            qrCode: "xxxx11",
+            generateTime: "2024-08-29 15:00:10",
+            boxBarProductLineDeviceCode: "BXBSB001",
+            boxBarProductLineName: "盒条产线",
+            codingDateStr: "2024-08-29",
+            num: "JT221-6",
+            BrandId: 11
+          },
+          {
+            qrCode: "xxxx12",
+            generateTime: "2024-08-29 15:00:11",
+            boxBarProductLineDeviceCode: "BXBSB001",
+            boxBarProductLineName: "盒条产线",
+            codingDateStr: "2024-08-29",
+            num: "JT221-6",
+            BrandId: 12
+          },
+          {
+            qrCode: "xxxx13",
+            generateTime: "2024-08-29 15:00:12",
+            boxBarProductLineDeviceCode: "BXBSB001",
+            boxBarProductLineName: "盒条产线",
+            codingDateStr: "2024-08-29",
+            num: "JT221-6",
+            BrandId: 13
+          },
+          {
+            qrCode: "xxxx14",
+            generateTime: "2024-08-29 15:00:13",
+            boxBarProductLineDeviceCode: "BXBSB001",
+            boxBarProductLineName: "盒条产线",
+            codingDateStr: "2024-08-29",
+            num: "JT221-6",
+            BrandId: 14
+          },
+          {
+            qrCode: "xxxx15",
+            generateTime: "2024-08-29 15:00:14",
+            boxBarProductLineDeviceCode: "BXBSB001",
+            boxBarProductLineName: "盒条产线",
+            codingDateStr: "2024-08-29",
+            num: "JT221-6",
+            BrandId: 15
+          },
+          {
+            qrCode: "xxxx16",
+            generateTime: "2024-08-29 15:00:15",
+            boxBarProductLineDeviceCode: "BXBSB001",
+            boxBarProductLineName: "盒条产线",
+            codingDateStr: "2024-08-29",
+            num: "JT221-6",
+            BrandId: 16
+          },
+          {
+            qrCode: "abcdefghijklmn", // 测试长字符的情况
+            generateTime: "2024-08-29 15:00:16",
+            boxBarProductLineDeviceCode: "BXBSB001",
+            boxBarProductLineName: "盒条产线",
+            codingDateStr: "2024-08-29",
+            num: "JT221-6",
+            BrandId: 17
+          }
+        ],
+      },
+    };
+  },
+  computed: {
+    // 提取childList中的num字段并去重，生成picker的columns数据
+    uniqueNumColumns() {
+      // 提取所有num值
+      const numList = this.data.childList.map(item => item.num);
+      // 去重
+      const uniqueNums = Array.from(new Set(numList));
+      // 转换为picker需要的格式 { text: 'xxx' }
+      return uniqueNums.map(num => ({ text: num }));
+    }
+  },
+  methods: {
+    textsch(e) {
+      console.log(11111, e);
+      this.showPicker = false;
+      this.fieldValue = e.text;
+    },
+    Reset() {
+      this.fieldValue = "";
+    },
+    // 格式化qrCode的方法
+    formatQrCode(qrCode) {
+      // 判空处理，避免空值报错
+      if (!qrCode) return "";
+      // 当字符数大于5时，显示...+后四位，否则原样显示
+      if (qrCode.length > 5) {
+        return `...${qrCode.slice(-4)}`;
+      }
+      return qrCode;
+    }
+  },
+};
+</script>
+
+<style scoped>
+/* 基础样式 */
+:deep(.van-nav-bar__right) {
+  font-size: 0.45rem;
+  color: #ffffff;
+}
+
+#centerDiv {
+  height: 91%;
+}
+
+.nav-bar {
+  background-color: rgba(0, 105, 83, 1);
+}
+
+.total-count {
+  color: #979797;
+}
+
+.query-btn {
+  width: 92%;
+  margin: auto;
+  display: block;
+  border-radius: 0.1rem;
+  height: 1.3rem;
+  position: fixed;
+  bottom: .3rem;
+  left: .4rem;
+  border: 1px solid #d7d4d8;
+}
+
+:deep(.van-field) {
+  width: 40%;
+  font-size: 0.4rem;
+}
+
+.from {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  box-sizing: border-box;
+  padding: 0 0.25rem;
+}
+
+:deep(.van-icon-arrow) {
+  font-size: 0.4rem;
+  line-height: 0.65rem;
+  display: none;
+}
+
+.Resetbtn {
+  font-size: 0.4rem !important;
+  border: none;
+  color: #979797;
+}
+
+:deep(.van-icon-passed) {
+  color: #07C160;
+}
+
+/* 提取的行内样式 */
+.code-info-card {
+  width: 95%;
+  height: 3.3rem;
+  margin: auto;
+  margin-top: 0.3rem;
+  border-radius: 0.2rem;
+  background: #ffffff;
+  box-sizing: border-box;
+  padding: 0 0.25rem;
+}
+
+.card-title {
+  font-size: 0.45rem;
+  padding-left: 0.4rem;
+  padding-top: 0.15rem;
+  margin: 0;
+}
+
+.code-info-content {
+  width: 100%;
+  height: 2.3rem;
+  display: flex;
+  align-items: center;
+  font-size: 0.35rem;
+  line-height: 1.2rem;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+
+.info-item {
+  width: 49%;
+  height: 50%;
+  margin: 0;
+}
+
+.form-container {
+  width: 95%;
+  height: 1.5rem;
+  margin: 0.5rem auto;
+  border-radius: 0.2rem;
+  background: #ffffff;
+}
+
+.barcode-container {
+  width: 95%;
+  margin: auto;
+}
+
+.barcode-title {
+  font-size: 0.4rem;
+  display: flex;
+  justify-content: space-between;
+  margin-top: 0.2rem;
+  margin-bottom: .2rem;
+  align-items: center;
+  margin: 0;
+  margin-bottom: .2rem;
+}
+
+.contbox {
+  height: 7rem;
+}
+
+.contboxitem {
+  width: 18.3%;
+  height: 17%;
+  background-color: #F0FDF4;
+  border-radius: .2rem;
+  display: inline-block;
+  margin-right: .13rem;
+  margin-bottom: .2rem;
+  border: 1px solid;
+  border-color: #CEF8DD;
+}
+
+/* 核心修改2：新增选中项的样式 */
+.contboxitem.selected-item {
+  background-color: #FEFCE8 !important;
+  border-color: #FCF8D4 !important;
+}
+
+.contboxitem:nth-child(5n) {
+  margin-right: 0;
+}
+
+.item-index {
+  font-size: .3rem;
+  margin:0.25rem .35rem 0 1.3rem;
+  color: #979797;
+}
+
+.item-code {
+  font-size: .4rem;
+  margin-left: .2rem;
+  /* margin-top: .1rem; */
+  margin-bottom: 0;
+}
+</style>
\ No newline at end of file