Skip to content

G
gs1
Commit 32dfa8dd by 林家欣
Options

Merge branch 'master' of https://gitee.com/gs1-office-web-sit/gs1

parents 3cef5b8f e7aeb370
Showing with 866 additions and 549 deletions
src/axios/module/search.js
......@@ -2,10 +2,9 @@ import {
POST
} from "../fetch.js"
const Prefix = process.env.NODE_ENV === 'development' ? '/gs1' : '';
// 条码查询—GLN查询/境外码查询
// 条码查询—GLN查询/境外码查询
const searchGln = (params = {}) => {
return POST(`${Prefix}/office/codeSearch/api/gln`, params)
}
......@@ -15,8 +14,25 @@ const searchGetList = (params = {}) => {
return POST(`${Prefix}/office/shortcode/api/getList`, params)
}
// 条码查询—境内码查询
const searchInternal = (params = {}) => {
return POST(`${Prefix}/office/codeSearch/api/domesticCode`, params)
}
// 条码查询—自行车企业代码公告查询
const searchBike = (params = {}) => {
return POST(`${Prefix}/office/bikefirm/api/getBikeFirm`, params)
}
// 条码查询—术语查询
const searchGlossary = (params = {}) => {
return POST(`${Prefix}/office/glossary/api/terminology`, params)
}
export default {
searchGln,
searchGetList,
searchInternal,
searchBike,
searchGlossary,
}
src/views/Search/bike.vue
......@@ -3,32 +3,40 @@
<div class="title">自行车企业代码公告查询</div>
<div class="body">
<div style="padding-top:20px">
<el-form label-position="left" label-width="180px" :model="search">
<el-form-item label="境外商品条码信息查询：">
<el-radio-group v-model="type">
<el-radio :label="CODE">企业代码</el-radio>
<el-radio :label="NAME">企业名称</el-radio>
</el-radio-group>
<el-form label-position="left"
style="margin-top:40px"
label-width="100px"
:model="search">
<el-form-item :label="type===CODE?'企业代码：':'企业名称：'">
<el-input
v-model="search.code"
placeholder="请输入正确的境外商品条码！"
class="w240"
v-model="search.code"
:placeholder="type===CODE?'请输入正确的4位企业代码！':'请输入正确的企业名称！'"
class="w240"
></el-input>
</el-form-item>
<el-form-item label="验证码：">
<div class="y-center">
<el-input
v-model="search.validate"
placeholder="请输入验证码"
class="w160"
v-model="captcha"
placeholder="请输入验证码"
class="w160"
></el-input>
<div class="validate-code">
<img src="../../assets/image/validate.jpg" alt="" />
<img :src="captchaPath" @click="getCaptcha()" alt=""/>
</div>
<el-button
style="margin-left:40px"
type="primary"
@click="handleSearch"
>查询</el-button
style="margin-left:40px"
type="primary"
@click="handleSearch"
>查询
</el-button
>
</div>
</el-form-item>
......@@ -38,12 +46,24 @@
<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>
<el-table
:data="result"
header-cell-class-name="search-table-hc"
style="width: 100%"
>
<el-table-column prop="code" label="企业代码" width="100">
</el-table-column>
<el-table-column label="企业名称">
<template slot-scope="scope">
<span type="text" class="hover" size="small">{{
scope.row.firmName
}}</span>
</template>
</el-table-column>
<el-table-column prop="status" label="公告状态" width="80"></el-table-column>
</el-table>
</template>
<span v-else>您输入的商品条码格式不正确，请确认后重试。</span>
<span class="error-msg" v-else>{{ errorMsg }}</span>
</div>
</div>
</div>
......@@ -51,13 +71,9 @@
<div class="notice">
<div class="title">友情提示</div>
<div class="content-wrapper">
<img src="./img/query-external-barcode.png" align="right" alt="" />
<p>
1、目前，国际物品编码组织（GS1）已将690至697之间的前缀码分配给中国物品编码中心使用，通常以这些前缀码开始的厂商识别代码都是由中国物品编码中心负责分配和管理的；以其他前缀码开始的则由境外GS1成员组织负责，一般称为"境外条码"，以下为您提供了境外商品条码信息的查询工具，请根据提示进行相关查询。欲了解GS1分配的前缀码，请点击：了解更多
>>
</p>
<img src="./img/bikecode.jpeg" style="width: 240px" align="right" alt=""/>
<p>
2、本查询仅适用于中华人民共和国境外注册的商品条码信息。
右图为新自行车的编码规则的示意，新自行车编码采用的是15位全数字代码结构，由4部分组成，X1～X4是企业代码，X5是车种代码，X6～X7是生产年份代码，X8～X15是生产流水号代码。请根据自行车企业的代码和名称进行查询。
</p>
</div>
</div>
......@@ -65,21 +81,47 @@
</template>
<script>
import validation from "@/views/Search/validation";
const CODE = 0
const NAME = 1
export default {
mixins: [validation],
data() {
return {
search: { code: "", validate: "" },
CODE,
NAME,
type: CODE,
search: {code: ""},
searchCodeShow: "",
showResult: false,
result: null,
};
},
methods: {
handleSearch() {
async handleSearch() {
const params = {
code: "",
firmName: "",
uuid: this.uuid,
captcha: this.captcha,
};
if (this.type === CODE) {
params.code = this.search.code
} else if (this.type === NAME) {
params.firmName = this.search.code
}
this.searchCodeShow = this.search.code;
this.showResult = true;
if (this.search.code === "1") {
this.result = {};
const searchGlnRes = await this.$api.search.searchBike(params);
const {returnCode, data} = searchGlnRes;
if (returnCode === "0") {
this.result = data;
} else {
this.errorMsg =
searchGlnRes.returnMsg ||
"没有符合条件的记录！";
this.result = null;
}
},
},
......@@ -93,6 +135,7 @@ export default {
width: 70px;
height: 40px;
margin-left: 11px;
> img {
width: 100%;
height: 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="验证码：">
<el-form-item label="请输入您要校验的商品条码（前12位)：">
<el-input
v-model="search.code"
class="w160"
@input="handleCodeChange"
></el-input>
</el-form-item>
<el-form-item label="生成校验码：">
<div class="y-center">
<el-input
v-model="search.validate"
placeholder="请输入验证码"
class="w160"
disabled
v-model="search.result"
class="w40"
></el-input>
<div class="validate-code">
<img src="../../assets/image/validate.jpg" alt="" />
</div>
<el-button
style="margin-left:40px"
type="primary"
@click="handleSearch"
>查询</el-button
>
<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/country.vue
......@@ -2,63 +2,414 @@
<div class="search-content">
<div class="title">国家及地区前缀码查询</div>
<div class="body">
<div style="padding-top:20px">
<el-form label-position="left" label-width="180px" :model="search">
<el-form-item label="境外商品条码信息查询：">
<el-input
v-model="search.code"
placeholder="请输入正确的境外商品条码！"
class="w240"
></el-input>
</el-form-item>
<el-form-item label="验证码：">
<div class="y-center">
<el-input
v-model="search.validate"
placeholder="请输入验证码"
class="w160"
></el-input>
<div class="validate-code">
<img src="../../assets/image/validate.jpg" alt="" />
</div>
<el-button
style="margin-left:40px"
type="primary"
@click="handleSearch"
>查询</el-button
>
</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="" />
<p>
1、目前，国际物品编码组织（GS1）已将690至697之间的前缀码分配给中国物品编码中心使用，通常以这些前缀码开始的厂商识别代码都是由中国物品编码中心负责分配和管理的；以其他前缀码开始的则由境外GS1成员组织负责，一般称为"境外条码"，以下为您提供了境外商品条码信息的查询工具，请根据提示进行相关查询。欲了解GS1分配的前缀码，请点击：了解更多
>>
</p>
<p>
2、本查询仅适用于中华人民共和国境外注册的商品条码信息。
</p>
<div class="tpanel">
<table width="100%" cellspacing="1" cellpadding="2" border="1">
<colgroup>
<col>
<col>
<col>
<col>
</colgroup>
<thead>
<tr>
<th width="12%">前缀码</th>
<th width="38%">编码组织所在国家 ( 或地区 )/ 应用领域</th>
<th width="12%">前缀码</th>
<th width="38%">编码组织所在国家 ( 或地区 )/ 应用领域</th>
</tr>
</thead>
<tbody>
<tr>
<td>00001～00009<br>
0001～0009<br>
001～019<br>
030～039<br>
050～059<br>
060～139
</td>
<td>美国</td>
<td>627</td>
<td>科威特</td>
</tr>
<tr>
<td>020～029<br>
040～049<br>
200～299
</td>
<td>店内码</td>
<td>628</td>
<td>沙特阿拉伯</td>
</tr>
<tr>
<td>300～379</td>
<td>法国</td>
<td>629</td>
<td>阿拉伯联合酋长国</td>
</tr>
<tr>
<td>380</td>
<td>保加利亚</td>
<td>640～649</td>
<td>芬兰</td>
</tr>
<tr>
<td>383</td>
<td>斯洛文尼亚</td>
<td>690～699</td>
<td>中国</td>
</tr>
<tr>
<td>385</td>
<td>克罗地亚</td>
<td>700～709</td>
<td>挪威</td>
</tr>
<tr>
<td>387</td>
<td>波黑</td>
<td>729</td>
<td>以色列</td>
</tr>
<tr>
<td>389</td>
<td>黑山共和国</td>
<td>730～739</td>
<td>瑞典</td>
</tr>
<tr>
<td>400～440</td>
<td>德国</td>
<td>740</td>
<td>危地马拉</td>
</tr>
<tr>
<td>450～459<br>
490～499
</td>
<td>日本</td>
<td>741</td>
<td>萨尔瓦多</td>
</tr>
<tr>
<td>460～469</td>
<td>俄罗斯</td>
<td>742</td>
<td>洪都拉斯</td>
</tr>
<tr>
<td>470</td>
<td>吉尔吉斯斯坦</td>
<td>743</td>
<td>尼加拉瓜</td>
</tr>
<tr>
<td>471</td>
<td>中国台湾</td>
<td>744</td>
<td>哥斯达黎加</td>
</tr>
<tr>
<td>474</td>
<td>爱沙尼亚</td>
<td>745</td>
<td>巴拿马</td>
</tr>
<tr>
<td>475</td>
<td>拉脱维亚</td>
<td>746</td>
<td>多米尼加</td>
</tr>
<tr>
<td>476</td>
<td>阿塞拜疆</td>
<td>750</td>
<td>墨西哥</td>
</tr>
<tr>
<td>477</td>
<td>立陶宛</td>
<td>754～755</td>
<td>加拿大</td>
</tr>
<tr>
<td>478</td>
<td>乌兹别克斯坦</td>
<td>759</td>
<td>委内瑞拉</td>
</tr>
<tr>
<td>479</td>
<td>斯里兰卡</td>
<td>760～769</td>
<td>瑞士</td>
</tr>
<tr>
<td>480</td>
<td>菲律宾</td>
<td>770～771</td>
<td>哥伦比亚</td>
</tr>
<tr>
<td>481</td>
<td>白俄罗斯</td>
<td>773</td>
<td>乌拉圭</td>
</tr>
<tr>
<td>482</td>
<td>乌克兰</td>
<td>775</td>
<td>秘鲁</td>
</tr>
<tr>
<td>483</td>
<td>土库曼斯坦</td>
<td>777</td>
<td>玻利维亚</td>
</tr>
<tr>
<td>484</td>
<td>摩尔多瓦</td>
<td>778～779</td>
<td>阿根廷</td>
</tr>
<tr>
<td>485</td>
<td>亚美尼亚</td>
<td>780</td>
<td>智利</td>
</tr>
<tr>
<td>486</td>
<td>格鲁吉亚</td>
<td>784</td>
<td>巴拉圭</td>
</tr>
<tr>
<td>487</td>
<td>哈萨克斯坦</td>
<td>786</td>
<td>厄瓜多尔</td>
</tr>
<tr>
<td>488</td>
<td>塔吉克斯坦</td>
<td>789～790</td>
<td>巴西</td>
</tr>
<tr>
<td>489</td>
<td>中国香港特别行政区</td>
<td>800～839</td>
<td>意大利</td>
</tr>
<tr>
<td>500～509</td>
<td>英国</td>
<td>840～849</td>
<td>西班牙</td>
</tr>
<tr>
<td>520～521</td>
<td>希腊</td>
<td>850</td>
<td>古巴</td>
</tr>
<tr>
<td>528</td>
<td>黎巴嫩</td>
<td>858</td>
<td>斯洛伐克</td>
</tr>
<tr>
<td>529</td>
<td>塞浦路斯</td>
<td>859</td>
<td>捷克</td>
</tr>
<tr>
<td>530</td>
<td>阿尔巴尼亚</td>
<td>860</td>
<td>南斯拉夫</td>
</tr>
<tr>
<td>531</td>
<td>马其顿</td>
<td>865</td>
<td>蒙古</td>
</tr>
<tr>
<td>535</td>
<td>马耳他</td>
<td>867</td>
<td>朝鲜</td>
</tr>
<tr>
<td>539</td>
<td>爱尔兰</td>
<td>868～869</td>
<td>土耳其</td>
</tr>
<tr>
<td>540～549</td>
<td>比利时和卢森堡</td>
<td>870～879</td>
<td>荷兰</td>
</tr>
<tr>
<td>560</td>
<td>葡萄牙</td>
<td>880</td>
<td>韩国</td>
</tr>
<tr>
<td>569</td>
<td>冰岛</td>
<td>883</td>
<td>缅甸</td>
</tr>
<tr>
<td>570～579</td>
<td>丹麦</td>
<td>884</td>
<td>柬埔寨</td>
</tr>
<tr>
<td>590</td>
<td>波兰</td>
<td>885</td>
<td>泰国</td>
</tr>
<tr>
<td>594</td>
<td>罗马尼亚</td>
<td>888</td>
<td>新加坡</td>
</tr>
<tr>
<td>599</td>
<td>匈牙利</td>
<td>890</td>
<td>印度</td>
</tr>
<tr>
<td>600～601</td>
<td>南非</td>
<td>893</td>
<td>越南</td>
</tr>
<tr>
<td>603</td>
<td>加纳</td>
<td>896</td>
<td>巴基斯坦</td>
</tr>
<tr>
<td>604</td>
<td>塞内加尔</td>
<td>899</td>
<td>印度尼西亚</td>
</tr>
<tr>
<td>608</td>
<td>巴林</td>
<td>900～919</td>
<td>奥地利</td>
</tr>
<tr>
<td>609</td>
<td>毛里求斯</td>
<td>930～939</td>
<td>澳大利亚</td>
</tr>
<tr>
<td>611</td>
<td>摩洛哥</td>
<td>940～949</td>
<td>新西兰</td>
</tr>
<tr>
<td>613</td>
<td>阿尔及利亚</td>
<td>950</td>
<td>GS1总部</td>
</tr>
<tr>
<td>615</td>
<td>尼日利亚</td>
<td>951</td>
<td>GS1总部(产品电子代码)</td>
</tr>
<tr>
<td>616</td>
<td>肯尼亚</td>
<td>955</td>
<td>马来西亚</td>
</tr>
<tr>
<td>617</td>
<td>喀麦隆</td>
<td>958</td>
<td>中国澳门特别行政区</td>
</tr>
<tr>
<td>618</td>
<td>科特迪瓦</td>
<td>960～969</td>
<td>GS1总部(缩短码)</td>
</tr>
<tr>
<td>619</td>
<td>突尼斯</td>
<td>977</td>
<td>连续出版物</td>
</tr>
<tr>
<td>620</td>
<td>坦桑尼亚</td>
<td>978～979</td>
<td>图书</td>
</tr>
<tr>
<td>621</td>
<td>叙利亚</td>
<td>980</td>
<td>应收票据</td>
</tr>
<tr>
<td>622</td>
<td>埃及</td>
<td>981～984</td>
<td>普通流通券</td>
</tr>
<tr>
<td>623</td>
<td>文莱</td>
<td>99</td>
<td>优惠券</td>
</tr>
<tr>
<td>624</td>
<td>利比亚</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>625</td>
<td>约旦</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>626</td>
<td>伊朗</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
......@@ -68,7 +419,7 @@
export default {
data() {
return {
search: { code: "", validate: "" },
search: {code: "", validate: ""},
searchCodeShow: "",
showResult: false,
result: null,
......@@ -88,23 +439,23 @@ export default {
<style lang="scss">
.search-content {
.validate-code {
display: inline-block;
width: 70px;
height: 40px;
margin-left: 11px;
> img {
width: 100%;
height: 100%;
}
.tpanel th, .tpanel td {
padding: 6px;
font-size: 14px;
}
.tpanel thead {
background-color: #002c6c;
color: #fff;
}
.w160 {
width: 160px;
.tpanel tbody tr td:nth-child(2n+1) {
background-color: #f5f5f5;
}
.w240 {
width: 240px;
table, table tr th, table tr td {
border: 1px solid gray;
}
}
</style>
src/views/Search/external.vue
......@@ -43,63 +43,20 @@
<div class="result-box-title">查询 {{ searchCodeShow }} 结果</div>
<div class="result-box-body">
<template v-if="result">
<div class="title">商品信息</div>
<div v-if="result.product" class="product-info row">
<div class="left col-lg-8">
<div
class="row_"
:key="item.key"
v-for="item in productFields"
>
<div class="cell">
{{ item.label }}
</div>
<div class="value">
{{ result.product[item.key] }}
</div>
</div>
</div>
<div class="right col-lg-4"></div>
</div>
<div v-else class="product-info row">
<div class="left col-lg-8">
<div class="row_">
<div class="cell">商品条码</div>
<div class="value">
{{ searchCodeShow }}
</div>
</div>
</div>
<p
style="
font-size: 14px;
font-weight: 400;
color: #f26335;
line-height: 22px;
text-align: center;
margin-bottom: 29px;
margin-top: 14px;
"
>
该进口商品的中文信息尚未通报，进口商品经营企业可查看《进口商品数据通报操作指南》
（http://import.gds.org.cn/Content/staticpage/operateGuide.html）进行通报。
</p>
</div>
<div class="title">企业信息</div>
<div class="company-info">
<el-table
:data="result.companyInfo"
:data="result"
header-cell-class-name="search-table-hc"
style="width: 100%"
>
<el-table-column prop="brand" label="国际品牌商">
</el-table-column>
<el-table-column prop="address" label="国际品牌商地址">
</el-table-column>
<el-table-column prop="address.name" label="企业名称"></el-table-column>
<el-table-column prop="gepirRequestedKey.requestedKeyValue" label="GTIN"></el-table-column>
<el-table-column prop="address.streetAddressOne" label="地址"></el-table-column>
<el-table-column prop="address.city" label="城市"></el-table-column>
</el-table>
</div>
</template>
<span v-else>您输入的商品条码格式不正确，请确认后重试。</span>
<span style="color: rgb(255, 59, 48)" v-else>{{ errorMsg }}</span>
</div>
</div>
</div>
......@@ -119,94 +76,40 @@
</template>
<script>
import { getUUID } from "@/utils/utils";
import validation from "@/views/Search/validation";
export default {
mixins: [validation],
data() {
return {
captchaPath: "",
search: { code: "", captcha: "", uuid: "" },
search: { code: "" },
searchCodeShow: "",
showResult: false,
result: null,
productFields: [
{
key: "id",
label: "商品条码：",
},
{
key: "name",
label: "产品名称：",
},
{
key: "brand",
label: "品牌：",
},
{
key: "classify",
label: "产品分类：",
},
{
key: "standard",
label: "规格：",
},
{
key: "netContent",
label: "净含量：",
},
{
key: "origin",
label: "产地：",
},
],
};
},
created() {
this.getCaptcha();
},
methods: {
// 获取验证码
getCaptcha() {
this.search.uuid = getUUID();
const query = {
uuid: this.search.uuid,
};
this.$api.getCaptcha(query).then((res) => {
console.log(res, 'res');
this.captchaPath = window.URL.createObjectURL(res.body);
});
},
handleSearch() {
async handleSearch() {
this.searchCodeShow = this.search.code;
this.showResult = true;
if (this.search.code === "1") {
this.result = {
product: {
id: "1",
name: "法国梦巴黎圣萨蒂黑歌海娜红",
brand: "法国梦巴黎",
classify: "利口酒",
standard: "750ML",
netContent: "750毫升",
origin: "法国",
},
companyInfo: [
{ brand: "CAVES LANGUEDOC ROUSILLON", address: "ZAC MILLENAIRE" },
],
};
} else if (this.search.code === "2") {
this.result = {
companyInfo: [
{ brand: "CAVES LANGUEDOC ROUSILLON", address: "ZAC MILLENAIRE" },
],
};
const params = {
"code": this.search.code,
"type": "GTIN",
"requestedLanguage":"en",
"captcha":this.captcha,
"uuid":this.uuid
};
const searchGlnRes = await this.$api.search.searchGln(params);
const { returnCode, data } = searchGlnRes;
if (returnCode === "0") {
this.result = [data];
} else {
this.errorMsg =
searchGlnRes.returnMsg ||
"您输入的商品条码格式不正确，请确认后重试。";
this.result = null;
}
},
openUrl(url) {
window.open(url)
}
},
};
</script>
......@@ -222,18 +125,6 @@ export default {
cursor: pointer;
}
}
.validate-code {
display: inline-block;
width: 70px;
height: 40px;
margin-left: 11px;
> img {
width: 100%;
height: 100%;
cursor: pointer;
}
}
.product-info {
margin-top: -15px;
......@@ -263,13 +154,5 @@ export default {
.right {
}
}
.w160 {
width: 160px;
}
.w240 {
width: 240px;
}
}
</style>
src/views/Search/glossary.vue
......@@ -3,32 +3,43 @@
<div class="title">条码术语查询</div>
<div class="body">
<div style="padding-top:20px">
<el-form label-position="left" label-width="180px" :model="search">
<el-form-item label="境外商品条码信息查询：">
<el-form label-position="left" label-width="120px" :model="search">
<el-form-item label="选择搜索范围：">
<el-select class="w240" v-model="type" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="术语搜索：">
<el-input
v-model="search.code"
placeholder="请输入正确的境外商品条码！"
class="w240"
v-model="search.code"
class="w240"
></el-input>
</el-form-item>
<el-form-item label="验证码：">
<div class="y-center">
<el-input
v-model="search.validate"
placeholder="请输入验证码"
class="w160"
v-model="captcha"
placeholder="请输入验证码"
class="w160"
></el-input>
<div class="validate-code">
<img src="../../assets/image/validate.jpg" alt="" />
<img :src="captchaPath" @click="getCaptcha()" alt=""/>
</div>
<el-button
style="margin-left:40px"
type="primary"
@click="handleSearch"
>查询</el-button
style="margin-left:40px"
type="primary"
@click="handleSearch"
>查询
</el-button
>
</div>
</el-form-item>
......@@ -38,73 +49,69 @@
<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>
<el-table
:data="result"
header-cell-class-name="search-table-hc"
style="width: 100%"
>
<el-table-column prop="titleEn" label="英文标题" width="130">
</el-table-column>
<el-table-column prop="titleCn" width="110" label="中文标题">
</el-table-column>
<el-table-column prop="content" label="解释">
</el-table-column>
<el-table-column prop="keyword" label="关键字" width="160"></el-table-column>
</el-table>
</template>
<span v-else>您输入的商品条码格式不正确，请确认后重试。</span>
<span class="error-msg" v-else>{{errorMsg}}</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="" />
<p>
1、目前，国际物品编码组织（GS1）已将690至697之间的前缀码分配给中国物品编码中心使用，通常以这些前缀码开始的厂商识别代码都是由中国物品编码中心负责分配和管理的；以其他前缀码开始的则由境外GS1成员组织负责，一般称为"境外条码"，以下为您提供了境外商品条码信息的查询工具，请根据提示进行相关查询。欲了解GS1分配的前缀码，请点击：了解更多
>>
</p>
<p>
2、本查询仅适用于中华人民共和国境外注册的商品条码信息。
</p>
</div>
</div>
</div>
</template>
<script>
import validation from "@/views/Search/validation";
export default {
mixins: [validation],
data() {
return {
search: { code: "", validate: "" },
type: '',
options: [
{label: '中文标题', value: '1'},
{label: '英文标题', value: '2'},
{label: '关键字', value: '3'},
{label: '术语解释', value: '4'},
],
search: {code: "",},
searchCodeShow: "",
showResult: false,
result: null,
};
},
methods: {
handleSearch() {
async handleSearch() {
const params = {
keyword: this.search.code,
type: this.type,
uuid: this.uuid,
captcha: this.captcha,
};
this.searchCodeShow = this.search.code;
this.showResult = true;
if (this.search.code === "1") {
this.result = {};
const searchGlnRes = await this.$api.search.searchGlossary(params);
const {returnCode, data} = searchGlnRes;
if (returnCode === "0") {
this.result = data;
} else {
this.errorMsg =
searchGlnRes.returnMsg ||
"没有符合条件的记录！";
this.result = null;
}
},
},
};
</script>
<style lang="scss">
.search-content {
.validate-code {
display: inline-block;
width: 70px;
height: 40px;
margin-left: 11px;
> img {
width: 100%;
height: 100%;
}
}
.w160 {
width: 160px;
}
.w240 {
width: 240px;
}
}
</style>
src/views/Search/internal.vue
......@@ -12,56 +12,50 @@
</el-radio-group>
<el-form
label-position="left"
label-width="180px"
style="margin-top: 40px"
:model="companySearch"
label-position="left"
label-width="180px"
style="margin-top: 40px"
:model="companySearch"
>
<el-form-item label="境内商品条码信息查询：">
<el-input
v-show="company === CODE"
v-model="companySearch.code"
placeholder="请输入正确的厂商识别代码！"
class="w240"
v-show="company === CODE"
v-model="companySearch.code"
placeholder="请输入正确的厂商识别代码！"
class="w240"
></el-input>
<el-input
v-show="company === NAME"
v-model="companySearch.name"
placeholder="请输入正确的商品条码！"
class="w240"
v-show="company === NAME"
v-model="companySearch.name"
placeholder="请输入正确的商品条码！"
class="w240"
></el-input>
<el-input
v-show="company === ADDRESS"
v-model="companySearch.address"
placeholder="请输入正确的厂商名称！"
class="w240"
v-show="company === ADDRESS"
v-model="companySearch.address"
placeholder="请输入正确的厂商名称！"
class="w240"
></el-input>
</el-form-item>
<el-form-item label="验证码：">
<el-button
type="primary"
class="w240"
icon="gs-guard-icon"
@click="handleVerification"
v-if="!isVerificationPass"
>
点击此处进行验证
</el-button>
<el-button
type="success"
class="w240"
icon="el-icon-circle-check"
v-else
>
验证通过
</el-button>
<el-button
style="margin-left: 40px"
type="primary"
@click="handleSearchCompany"
>查询
</el-button>
<div class="y-center">
<el-input
v-model="captcha"
placeholder="请输入验证码"
class="w160"
></el-input>
<div class="validate-code">
<img :src="captchaPath" @click="getCaptcha()" alt="" />
</div>
<el-button
style="margin-left: 40px"
type="primary"
@click="handleSearchCompany"
>查询</el-button>
</div>
</el-form-item>
</el-form>
</div>
......@@ -69,31 +63,31 @@
<el-tab-pane label="查询产品信息" name="second">
<el-form
label-position="left"
label-width="180px"
style="margin-top: 20px"
:model="productSearch"
label-position="left"
label-width="180px"
style="margin-top: 20px"
:model="productSearch"
>
<el-form-item label="境内商品条码信息查询：">
<el-input
v-model="productSearch.code"
placeholder="请输入13位或14位的商品条码"
class="w240"
v-model="productSearch.code"
placeholder="请输入13位或14位的商品条码"
class="w240"
></el-input>
</el-form-item>
<el-form-item label="验证码：">
<el-button type="primary" class="w240">
<div style="diplay: flex; align-item: center">
<img style="height: 14px" src="./img/guard.png" alt="" />
<img style="height: 14px" src="./img/guard.png" alt=""/>
点击此处进行验证
</div>
</el-button>
<el-button
style="margin-left: 40px"
type="primary"
@click="handleSearchProduct"
>查询
style="margin-left: 40px"
type="primary"
@click="handleSearchProduct"
>查询
</el-button>
</el-form-item>
</el-form>
......@@ -107,45 +101,45 @@
<template v-if="result">
<!--结果表格-->
<el-table
:data="result"
header-cell-class-name="search-table-hc"
style="width: 100%"
:data="result"
header-cell-class-name="search-table-hc"
style="width: 100%"
>
<el-table-column prop="id" label="厂商识别代码" width="180">
<template slot-scope="scope">
<span type="text" class="hover" size="small">{{
scope.row.id
}}</span>
scope.row.id
}}</span>
</template>
</el-table-column>
<el-table-column prop="name" label="厂商名称" width="180">
</el-table-column>
<el-table-column prop="status" label="状态"> </el-table-column>
<el-table-column prop="status" label="状态"></el-table-column>
<el-table-column label="详细">
<template>
<span
type="text"
class="hover pointer"
@click="handleCheck()"
size="small"
>详情</span
type="text"
class="hover pointer"
@click="handleCheck()"
size="small"
>详情</span
>
</template>
</el-table-column>
<el-table-column label="查看">
<template>
<span
type="text"
class="hover pointer"
@click="handleCheck()"
size="small"
>查看</span
type="text"
class="hover pointer"
@click="handleCheck()"
size="small"
>查看</span
>
</template>
</el-table-column>
</el-table>
</template>
<span v-else>没有符合条件的记录！</span>
<span style="color: rgb(255, 59, 48)" v-else>{{ errorMsg }}</span>
</div>
</div>
</div>
......@@ -153,20 +147,20 @@
<div class="notice">
<div class="title">友情提示</div>
<div class="content-wrapper">
<img src="./img/pic_ex_jl.png" align="right" alt="" />
<img src="./img/pic_ex_jl.png" align="right" alt=""/>
<p>
1、<a
href="http://www.ancc.org.cn/Knowledge/goodsGln.aspx"
target="_blank"
style="color: #5ac8fa"
>商品条码</a
>
>商品条码</a
>
（又称全球贸易项目代码GTIN）是指包含厂商识别代码在内的对零售商品、非零售商品、物流单元、位置、资产及服务进行全球惟一标识的一种代码（或称数据结构）。对贸易项目进行编码和符号表示（前缀码为690-699是境内条码），能够实现商品零售（POS）、进货、存货管理、自动补货、销售分析及其它业务运作的自动化。
<a
href="http://www.ancc.org.cn/Knowledge/goodsGln.aspx"
target="_blank"
style="color: #5ac8fa"
>了解更多 >></a
href="http://www.ancc.org.cn/Knowledge/goodsGln.aspx"
target="_blank"
style="color: #5ac8fa"
>了解更多 >></a
>
</p>
<p style="color: #ff3b30">
......@@ -178,19 +172,21 @@
</div>
</div>
<Vcode :show="isShowVcode" @success="onSuccess" @close="onClose" />
<Vcode :show="isShowVcode" @success="onSuccess" @close="onClose"/>
</div>
</template>
<script>
import { getUUID } from "@/utils/utils";
import {getUUID} from "@/utils/utils";
import Vcode from "vue-puzzle-vcode";
import validation from "@/views/Search/validation";
const CODE = '1';
const NAME = '2';
const ADDRESS = '3';
export default {
mixins:[validation],
data() {
return {
CODE,
......@@ -210,13 +206,28 @@ export default {
},
result: null,
searchCodeShow: "",
errorMsg: "",
showResult: false,
};
},
components: {
Vcode,
},
created() {
this.getCaptcha();
},
methods: {
// 获取验证码
getCaptcha() {
this.uuid = getUUID()
const query = {
uuid: this.uuid
};
this.$api.getCaptcha(query).then((res) => {
console.log(res, "res");
this.captchaPath = window.URL.createObjectURL(res.body);
});
},
// 点击此处进行验证
handleVerification() {
console.log("点击此处进行验证");
......@@ -244,39 +255,27 @@ export default {
this.showResult = true;
if (this.company === CODE) {
this.searchCodeShow = this.companySearch.code;
if (this.companySearch.code === "1") {
this.result = [
{ id: "6912614", name: "北京阿里巴巴食品有限公司", 状态: "已注销" },
{ id: "6912614", name: "北京阿里巴巴食品有限公司", 状态: "已注销" },
{ id: "6912614", name: "北京阿里巴巴食品有限公司", 状态: "已注销" },
{ id: "6912614", name: "北京阿里巴巴食品有限公司", 状态: "已注销" },
{ id: "6912614", name: "北京阿里巴巴食品有限公司", 状态: "已注销" },
{ id: "6912614", name: "北京阿里巴巴食品有限公司", 状态: "已注销" },
{ id: "6912614", name: "北京阿里巴巴食品有限公司", 状态: "已注销" },
{ id: "6912614", name: "北京阿里巴巴食品有限公司", 状态: "已注销" },
];
}
} else if (this.company === NAME) {
this.searchCodeShow = this.companySearch.name;
} else {
this.searchCodeShow = this.companySearch.address;
}
const params = { type:this.company,uuid: getUUID() };
const searchGlnRes = await this.$api.search.searchGln(params);
const { returnCode, data } = searchGlnRes;
const params = {type: this.company, uuid: this.uuid, code: this.searchCodeShow, captcha: this.captcha,};
const searchGlnRes = await this.$api.search.searchInternal(params);
const {returnCode, data} = searchGlnRes;
if (returnCode === "0") {
this.result = [data];
} else {
this.errorMsg =
searchGlnRes.returnMsg ||
"您输入的商品条码格式不正确，请确认后重试。";
"没有符合条件的记录！";
this.result = null;
}
},
handleSearchProduct() {
window.open(
`http://search.anccnet.com/searchResult2.aspx?keyword=${this.productSearch.code}`
`http://search.anccnet.com/searchResult2.aspx?keyword=${this.productSearch.code}`
);
},
},
......@@ -284,10 +283,6 @@ export default {
</script>
<style lang="scss">
.w240 {
width: 240px;
}
.gs-guard-icon {
display: inline-block;
margin-bottom: -1px;
......
src/views/Search/shortcode.vue
......@@ -2,59 +2,26 @@
<div class="search-content">
<div class="title">缩短码查询</div>
<div class="body">
<el-tabs v-model="activeName" class="tab-no-bottom">
<el-tab-pane label="查询产品信息" name="first">
<el-form label-position="left"
label-width="180px"
style="margin-top:20px"
:model="productSearch">
<el-form-item label="缩短码查询：">
<el-input
v-model="productSearch.code"
placeholder="请输入正确的8位商品条码！"
class="w240"
>
</el-input>
</el-form-item>
<el-form-item label="验证码：">
<div class="y-center">
<el-input
v-model="productSearch.validate"
placeholder="请输入验证码"
class="w160"
></el-input>
<div class="validate-code">
<img src="../../assets/image/validate.jpg" alt="" />
</div>
<el-button
style="margin-left:40px"
type="primary"
@click="handleSearchProduct"
>查询</el-button
>
</div>
</el-form-item>
</el-form>
</el-tab-pane>
<el-tab-pane label="查询厂商信息" name="second">
<div style="padding-top:20px">
<div style="padding-top:20px">
<el-radio-group v-model="company">
<el-radio :label="CODE">EAN/UCC-8缩短码</el-radio>
<el-radio :label="NAME">根据厂商名称查询</el-radio>
<el-radio :label="ADDRESS">根据厂商地址查询</el-radio>
</el-radio-group>
<el-form
label-position="left"
label-width="180px"
label-width="120px"
style="margin-top:40px"
:model="companySearch"
>
<el-form-item label="缩短码查询：">
<el-input
v-show="company === CODE"
v-model="companySearch.code"
placeholder="请输入正确的8位商品条码！"
class="w240"
></el-input>
<el-input
v-show="company === NAME"
v-model="companySearch.name"
placeholder="请输入正确的厂商名称！"
......@@ -71,44 +38,53 @@
<el-form-item label="验证码：">
<div class="y-center">
<el-input
v-model="companySearch.validate"
v-model="captcha"
placeholder="请输入验证码"
class="w160"
></el-input>
<div class="validate-code">
<img src="../../assets/image/validate.jpg" alt="" />
<img :src="captchaPath" @click="getCaptcha()" alt=""/>
</div>
<el-button
style="margin-left:40px"
type="primary"
@click="handleSearchCompany"
>查询</el-button
>查询
</el-button
>
</div>
</el-form-item>
</el-form>
</div>
</el-tab-pane>
</el-tabs>
<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>
<el-table
:data="result"
header-cell-class-name="search-table-hc"
style="width: 100%"
>
<el-table-column prop="shortCode" label="缩短码">
</el-table-column>
<el-table-column prop="produceName" label="商品名称">
</el-table-column>
<el-table-column prop="brandName" label="商标"></el-table-column>
<el-table-column prop="produceStyle" label=规格></el-table-column>
<el-table-column prop="producePack" label="包装"></el-table-column>
<el-table-column prop="firmName" label="厂商名称"></el-table-column>
</el-table>
</template>
<span v-else>没有符合条件的记录！</span>
<span class="error-msg" v-else>{{ errorMsg }}</span>
</div>
</div>
</div>
<div class="notice">
<div class="title">友情提示</div>
<div class="content-wrapper">
<img src="./img/query-short-code.png" align="right" alt="" />
<img src="./img/query-short-code.png" align="right" alt=""/>
<p>
1、缩短码是由7位商品代码和1位校验码构成的8位数字的条码，只有当标准码尺寸超过总印刷面积的25％时，才允许申报。请根据下列提示进行相关查询。
</p>
......@@ -118,11 +94,16 @@
</template>
<script>
import validation from "@/views/Search/validation";
const CODE = 0;
const NAME = 1;
const ADDRESS = 2;
export default {
mixins: [validation],
data() {
return {
CODE,
NAME,
ADDRESS,
activeName: "first",
......@@ -130,70 +111,42 @@ export default {
companySearch: {
validate: "",
code: "",
name: "",
address: "",
},
productSearch: {
code: "",
validate: ""
},
searchCodeShow: "",
showResult: false,
result: null,
};
},
methods: {
handleSearchProduct() {
this.searchCodeShow = this.productSearch.code;
if (this.productSearch.code === "1") {
this.result = {};
}else{
this.result = null;
}
async handleSearchCompany() {
this.showResult = true;
},
handleSearchCompany() {
if (this.company === NAME) {
this.searchCodeShow = this.companySearch.code;
if (this.companySearch.code === '1') {
this.result = [
{id: '6912614', name: '北京阿里巴巴食品有限公司', 状态: "已注销"},
{id: '6912614', name: '北京阿里巴巴食品有限公司', 状态: "已注销"},
{id: '6912614', name: '北京阿里巴巴食品有限公司', 状态: "已注销"},
{id: '6912614', name: '北京阿里巴巴食品有限公司', 状态: "已注销"},
{id: '6912614', name: '北京阿里巴巴食品有限公司', 状态: "已注销"},
{id: '6912614', name: '北京阿里巴巴食品有限公司', 状态: "已注销"},
{id: '6912614', name: '北京阿里巴巴食品有限公司', 状态: "已注销"},
{id: '6912614', name: '北京阿里巴巴食品有限公司', 状态: "已注销"},
]
}
const params = {
shortCode: "",
firmName: "",
registerAddress: "",
uuid: this.uuid,
captcha: this.captcha,
};
if (this.company === CODE) {
params.shortCode = this.companySearch.code;
} else if (this.company === NAME) {
params.firmName = this.companySearch.name;
} else {
this.searchCodeShow = this.companySearch.address;
params.registerAddress = this.companySearch.address;
}
const searchGlnRes = await this.$api.search.searchGetList(params);
const {returnCode, data} = searchGlnRes;
if (returnCode === "0") {
this.result = data;
} else {
this.errorMsg =
searchGlnRes.returnMsg ||
"没有符合条件的记录！";
this.result = null;
}
this.showResult = true;
},
},
};
</script>
<style lang="scss">
.search-content {
.validate-code {
display: inline-block;
width: 70px;
height: 40px;
margin-left: 11px;
> img {
width: 100%;
height: 100%;
}
}
.w160 {
width: 160px;
}
.w240 {
width: 240px;
}
}
</style>
src/views/Search/style/common.scss
......@@ -24,6 +24,10 @@
.body {
padding: 20px 30px;
.error-msg{
color: #FF3B30;
}
}
.notice {
......@@ -100,6 +104,31 @@
}
}
}
.validate-code {
display: inline-block;
width: 70px;
height: 40px;
margin-left: 11px;
overflow: hidden;
> img {
width: 100%;
height: 100%;
}
}
.w40 {
width: 40px;
}
.w160 {
width: 160px;
}
.w240 {
width: 240px;
}
}
.el-tabs__item.is-active {
......@@ -118,10 +147,11 @@
}
.hover{
color: #008dbd;
cursor: pointer;
color: #5ac8fa;
&:hover{
color: #008dbd;
color: #36a5d5;
}
}
}
src/views/Search/validation.js 0 → 100644
import { getUUID } from "@/utils/utils";
export default {
created() {
this.getCaptcha();
},
data(){
return {
captchaPath:'',
uuid: '',
captcha: '',
errorMsg: '',
}
},
methods: {
getCaptcha() {
this.uuid = getUUID()
const query = {
uuid: this.uuid
};
this.$api.getCaptcha(query).then((res) => {
this.captchaPath = window.URL.createObjectURL(res.body);
});
},
},
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment