feat: 校验码计算工具【100%】

src/views/Search/check.vue

@@ -4,60 +4,52 @@
     <div class="body">
       <div style="padding-top:20px">
         <el-form label-position="left" label-width="180px" :model="search">
-          <el-form-item label="境外商品条码信息查询：">
+          <el-form-item label="包装指示符：">
             <el-input
-              v-model="search.code"
-              placeholder="请输入正确的境外商品条码！"
-              class="w240"
+                v-model="search.pack"
+                class="w160"
+                @input="handlePackChange"
             ></el-input>
+            <span>（备注：单品为0）</span>
           </el-form-item>
 
-          <el-form-item label="验证码：">
-            <div class="y-center">
+          <el-form-item label="请输入您要校验的商品条码（前12位)：">
             <el-input
-                v-model="search.validate"
-                placeholder="请输入验证码"
+                v-model="search.code"
                 class="w160"
+                @input="handleCodeChange"
             ></el-input>
+          </el-form-item>
 
-              <div class="validate-code">
-                <img src="../../assets/image/validate.jpg" alt="" />
-              </div>
-
-              <el-button
-                style="margin-left:40px"
-                type="primary"
-                @click="handleSearch"
-                >查询</el-button
-              >
+          <el-form-item label="生成校验码：">
+            <div class="y-center">
+              <el-input
+                  disabled
+                  v-model="search.result"
+                  class="w40"
+              ></el-input>
+              <a href="http://www.ancc.org.cn/Knowledge/BarcodeArticle.aspx?id=301" style="margin-left: 20px"
+                 target="_blank" class="hover">检验码计算方法</a>
             </div>
           </el-form-item>
         </el-form>
-
-        <div class="result-box" v-if="showResult">
-          <div class="result-box-title">查询 {{ searchCodeShow }} 结果</div>
-          <div class="result-box-body">
-            <template v-if="result">
-              <div class="title">商品信息</div>
-              <div class="product-info"></div>
-              <div class="title">企业信息</div>
-              <div class="company-info"></div>
-            </template>
-            <span v-else>您输入的商品条码格式不正确，请确认后重试。</span>
-          </div>
-        </div>
       </div>
     </div>
     <div class="notice">
       <div class="title">友情提示</div>
       <div class="content-wrapper">
-        <img src="./img/query-external-barcode.png" align="right" alt="" />
+        <img src="./img/query-external-barcode.png" align="right" alt=""/>
         <p>
-          1、目前，国际物品编码组织（GS1）已将690至697之间的前缀码分配给中国物品编码中心使用，通常以这些前缀码开始的厂商识别代码都是由中国物品编码中心负责分配和管理的；以其他前缀码开始的则由境外GS1成员组织负责，一般称为"境外条码"，以下为您提供了境外商品条码信息的查询工具，请根据提示进行相关查询。欲了解GS1分配的前缀码，请点击：了解更多
-          >>
+          1.请根据下列提示，输入商品的包装指示符和商品条码，系统会自动计算出它的校验码。欲了解校验码的计算规则，请点击
+          <a
+              href="http://www.ancc.org.cn/Knowledge/goodsGln.aspx"
+              target="_blank"
+              style="color: #5ac8fa"
+          >了解更多 >></a
+          >
         </p>
         <p>
-          2、本查询仅适用于中华人民共和国境外注册的商品条码信息。
+          2.校验码是位于商品条码最后一位的数字，用于检验编码是否正确。请核对系统自动生成的校验码与要查询的商品条码的最后一位数字是否一致，一致则为正确。
         </p>
       </div>
     </div>
@@ -68,20 +60,41 @@
 export default {
   data() {
     return {
-      search: { code: "", validate: "" },
-      searchCodeShow: "",
-      showResult: false,
+      search: {code: "", pack: "", result: ''},
       result: null,
     };
   },
   methods: {
-    handleSearch() {
-      this.searchCodeShow = this.search.code;
-      this.showResult = true;
-      if (this.search.code === "1") {
-        this.result = {};
+    handleCodeChange() {
+      if (this.search.code.length === 13) {
+        this.search.code = this.search.code.substring(0, 12)
+      }
+      if (this.search.code) {
+        this.search.result = this.barcodeChecksum(this.search.pack + this.search.code)
       }
     },
+    handlePackChange() {
+      if (this.search.pack.length === 2) {
+        this.search.pack = this.search.pack.substring(0, 1)
+      }
+      if (this.search.code) {
+        this.search.result = this.barcodeChecksum(this.search.pack + this.search.code)
+      }
+    },
+    barcodeChecksum(barcode) {
+      let l = barcode.length,
+          sum = 0;
+      if (typeof barcode !== 'string' || /\D/.test(barcode) || (l !== 12 && l !== 13)) {
+        throw new Error('参数不是12(EAN-13)或13(ITF-14)位数字字符！');
+        //return;
+      }
+      barcode.split('').reverse().forEach(function (n, i) {
+        sum += i % 2 ? Number(n) : Number(n) * 3;
+      });
+      return Math.ceil(sum / 10) * 10 - sum;
+    },
+    handleToMethod() {
+    },
   },
 };
 </script>
@@ -93,6 +106,7 @@ export default {
     width: 70px;
     height: 40px;
     margin-left: 11px;
+
     > img {
       width: 100%;
       height: 100%;

src/views/Search/style/common.scss

@@ -118,6 +118,10 @@
       }
     }
 
+    .w40 {
+      width: 40px;
+    }
+
     .w160 {
       width: 160px;
     }
@@ -144,10 +148,10 @@
 
   .hover{
     cursor: pointer;
-    color: #008dbd;
+    color: #5ac8fa;
 
     &:hover{
-      color: #006587;
+      color: #36a5d5;
     }
   }
 }