Skip to content

G
gs1
Commit dbadfb2d by Jianli Ou
Options

新境外条码查询页面接口对接 

对接GTIN查询接口；每个查询项都携带验证码校验；
注：externalcopy.vue文件是原来的境外条码查询页面
parent f69bd572
Showing with 1190 additions and 1043 deletions
package.json
...@@ -5,6 +5,7 @@ ...@@ -5,6 +5,7 @@
"scripts": { "scripts": {
"serve": "vue-cli-service serve", "serve": "vue-cli-service serve",
"dev": "vue-cli-service serve --mode development", "dev": "vue-cli-service serve --mode development",
"test77": "vue-cli-service serve --mode test77",
"testBuild": "vue-cli-service build --mode test", "testBuild": "vue-cli-service build --mode test",
"build": "vue-cli-service build", "build": "vue-cli-service build",
"build:prod1": "vue-cli-service build --mode prod1", "build:prod1": "vue-cli-service build --mode prod1",
......
src/axios/module/search.js
import { import {
POST POST,
GET
} from "../fetch.js" } from "../fetch.js"
const Prefix = process.env.NODE_ENV === 'development' ? '/gs1' : ''; const Prefix = process.env.NODE_ENV === 'development' ? '/gs1' : '';
...@@ -45,6 +46,11 @@ const searchGlossary = (params = {}) => { ...@@ -45,6 +46,11 @@ const searchGlossary = (params = {}) => {
return POST(`${Prefix}/office/glossary/api/terminology`, params) return POST(`${Prefix}/office/glossary/api/terminology`, params)
} }
// 条码查询—境外码查询-通过GTIN查询验证产品
const searchGtin = (params = {}) => {
return GET(`${Prefix}/office/vbgOutSearch/api/verified`, params)
}
export default { export default {
searchGln, searchGln,
searchGetList, searchGetList,
...@@ -53,5 +59,6 @@ export default { ...@@ -53,5 +59,6 @@ export default {
searchCompanyChange, searchCompanyChange,
searchBike, searchBike,
searchGlossary, searchGlossary,
searchCodeGln searchCodeGln,
searchGtin
} }
src/utils/constant.js
...@@ -2,18 +2,18 @@ ...@@ -2,18 +2,18 @@
* GS1_Mark_List 境外条码信息查询 —— 验证其它GS1标识 —— 选择GS1标识 的下拉选择常量列表 * GS1_Mark_List 境外条码信息查询 —— 验证其它GS1标识 —— 选择GS1标识 的下拉选择常量列表
*/ */
export const GS1_Mark_List = [ export const GS1_Mark_List = [
{ label: 'SSCC-系列货运包装箱代码', value: 'SSCC-系列货运包装箱代码' }, { label: 'SSCC-系列货运包装箱代码', value: 'SSCC' },
{ label: 'GRAI-全球可回收资产标识符', value: 'GRAI-全球可回收资产标识符' }, { label: 'GRAI-全球可回收资产标识符', value: 'GRAI' },
{ label: 'GIAI-单个资产标识代码', value: 'GIAI-单个资产标识代码' }, { label: 'GIAI-单个资产标识代码', value: 'GIAI' },
{ label: 'GSRN-全球服务关系代码', value: 'GSRN-全球服务关系代码' }, { label: 'GSRN-全球服务关系代码', value: 'GSRN' },
{ label: 'GDTI-全球文件类型标识符', value: 'GDTI-全球文件类型标识符' }, { label: 'GDTI-全球文件类型标识符', value: 'GDTI' },
{ label: 'GINC-全球寄售识别号', value: 'GINC-全球寄售识别号' }, { label: 'GINC-全球寄售识别号', value: 'GINC' },
{ label: 'GSIN-全球货件识别号', value: 'GSIN-全球货件识别号' }, { label: 'GSIN-全球货件识别号', value: 'GSIN' },
{ label: 'GCN-全球优惠券号码', value: 'GCN-全球优惠券号码' }, { label: 'GCN-全球优惠券号码', value: 'GCN' },
{ label: 'CPID-组件/零件标识符', value: 'CPID-组件/零件标识符' }, { label: 'CPID-组件/零件标识符', value: 'CPID' },
{ label: 'GMN-全球型号', value: 'GMN-全球型号' }, { label: 'GMN-全球型号', value: 'GMN' },
{ label: 'GTIN-商品条码', value: 'GTIN-商品条码' }, { label: 'GTIN-商品条码', value: 'GTIN' },
{ label: 'GLN-全球位置码', value: 'GLN-全球位置码' } { label: 'GLN-全球位置码', value: 'GLN' }
] ]
/** /**
......
src/views/Search/external.vue
...@@ -7,60 +7,520 @@ ...@@ -7,60 +7,520 @@
<!-- http://static.gds.org.cn/staticPage/GRPVbg/index.html 中文版VbG宣传页面--> <!-- http://static.gds.org.cn/staticPage/GRPVbg/index.html 中文版VbG宣传页面-->
</div> </div>
<div class="title">境外条码信息查询</div> <div class="title">境外条码信息查询</div>
<div class="body"> <div class="row body gln-panel" style="padding-bottom:0px!important">
<div style="padding-top: 20px"> <div class="col-lg-3 clo3" @click="changeTab('first')" >
<el-form label-position="left" label-width="180px" :model="search"> <div class="gln-border" style="height:136px" :class="{active:active=='first'}">
<el-form-item label="境外商品条码信息查询："> <img src="../../assets/image/search/gln1.png" v-if="active=='first'" style="margin-top: 7px;"/>
<el-input <img src="../../assets/image/search/gln12.png" v-if="active!='first'" style="margin-top: 7px;"/>
v-model="search.code" <p class="gln-tab-p1">验证产品</p>
placeholder="请输入正确的境外商品条码！" <p class="gln-tab-p2">通过GTIN查询</p>
class="w240" </div>
></el-input> <img src="../../assets/image/search/border-bottom.png" style="border-bottom" v-if="active=='first'"/>
</el-form-item> </div>
<div class="col-lg-3 clo3" @click="changeTab('second')">
<el-form-item label="验证码："> <div class="gln-border" style="height:136px" :class="{active:active=='second'}">
<div class="y-center"> <img src="../../assets/image/search/gln22.png" v-if="active=='second'" />
<el-input <img src="../../assets/image/search/gln2.png" v-if="active!='second'" />
v-model="captcha" <p class="gln-tab-p1">验证位置/实体</p>
placeholder="请输入验证码" <p class="gln-tab-p2">通过GLN查询</p>
class="w160" </div>
></el-input> <img src="../../assets/image/search/border-bottom.png" style="border-bottom" v-if="active=='second'"/>
</div>
<div class="validate-code"> <div class="col-lg-3 clo3" @click="changeTab('third')">
<img :src="captchaPath" @click="getCaptcha()" alt=""/> <div class="gln-border" style="height:136px" :class="{active:active=='third'}">
<!-- <img src="../../assets/image/validate.jpg" alt=""/> --> <img src="../../assets/image/search/other-keys2.png" v-if="active=='third'" />
</div> <img src="../../assets/image/search/other-keys.png" v-if="active!='third'" />
<p class="gln-tab-p1">验证其它GS1标识</p>
<el-button <p class="gln-tab-p2">通过其它GS1标识查询</p>
style="margin-left: 40px" </div>
type="primary" <img src="../../assets/image/search/border-bottom.png" style="border-bottom" v-if="active=='third'"/>
@click="handleSearch" </div>
>查询 <div class="col-lg-3 clo3" @click="changeTab('four')">
</el-button> <div class="gln-border" style="height:136px" :class="{active:active=='four'}">
<img src="../../assets/image/search/licensee2.png" v-if="active=='four'" />
<img src="../../assets/image/search/licensee.png" v-if="active!='four'" />
<p class="gln-tab-p1">验证企业</p>
<p class="gln-tab-p2">通过企业名称查询</p>
</div>
<img src="../../assets/image/search/border-bottom.png" style="border-bottom" v-if="active=='four'"/>
</div>
</div>
<div class="body body1">
<div>
<div v-if="active=='first'">
<p class="tab-cnt-title">输入GTIN</p>
<div class="gtin-cnt">
<div class="row">
<div class="col-lg-12">
<el-input v-model="GtinInputValue" placeholder="请输入GTIN" style="margin-top:5px"><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input>
</div>
<!-- <div class="col-lg-1">-->
<!-- <el-button class="gtin-btn" @click="searchGTIN">查询</el-button>-->
<!-- </div>-->
</div>
<div class="row y-center" style="margin-top: 15px;">
<div class="col-lg-4">
<el-input v-model="captcha" placeholder="请输入验证码"></el-input>
</div>
<div class="col-lg-2">
<div class="validate-code">
<img :src="captchaPath" @click="getCaptcha()" alt=""/>
</div>
</div>
<div class="col-lg-2">
<el-button class="gtin-btn" @click="searchGTIN">查询</el-button>
</div>
</div>
<p class="search-num">搜索样例：<span>9506000140445</span></p>
<p class="agreeCheck">
<el-checkbox></el-checkbox>我已阅读并同意<span @click="openPdf">《VbG用户使用条款》</span>
</p>
</div>
<div v-if="GtinResultData" class="gtin-result">
<div class="gtin-result-tip">
<img src="../../assets/image/search/gtinIcon.png" />
<div>
<p>{{GtinResultData.gtin}}</p>
<p>此商品条码已经由“{{GtinResultData.licenseeName}}”公司注册</p>
</div>
</div>
<el-tabs v-model="gtinActiveName" @tab-click="handleClick">
<el-tab-pane label="商品信息" name="first">
<div class="commodityInfo">
<div class="commodityInfo-cnt row">
<div class="col-lg-3">
<img :src="GtinResultData.productImageUrl[0].value" alt="" style="width: 100%;">
</div>
<div class="col-lg-9 result-info">
<p><span>商品条码：</span><span>{{GtinResultData.gtin}}</span></p>
<p><span>品牌：</span><span>({{GtinResultData.brandName[0].language}}){{GtinResultData.brandName[0].value}}</span></p>
<p><span>产品描述：</span><span>({{GtinResultData.productDescription[0].language}}){{GtinResultData.productDescription[0].value}}</span></p>
<p><span>图片URL：</span><span>({{GtinResultData.productImageUrl[0].language}}){{GtinResultData.productImageUrl[0].value}}</span></p>
<p><span>产品类别：</span><span>{{GtinResultData.gpcCategoryCode}}</span></p>
<p><span>净含量：</span><span>{{GtinResultData.netContent[0].value}}（{{GtinResultData.netContent[0].unitCode}}）</span></p>
<p><span>商品条码：</span><span>{{GtinResultData.gtin}}</span></p>
</div>
</div>
<p style="font-size:13px;margin:15px 0 0 0 ;">该数据由Active Test Account企业提供，并于2023年5月2日最新更新</p>
<p style="font-size:13px;">该GTIN信息完整</p>
</div>
<div class="hrefInfo ">
<p>链接至其他产品信息</p>
<div class="hrefInfoList">
<p>企业网站</p>
<div class="hrefInfoList-list">
<p><span>Donde comprar Dal Gi</span><span>HTML</span></p>
<P>语言：de</P>
</div>
<div class="hrefInfoList-list">
<p><span>Where to buy</span><span>HTML</span></p>
<P>语言：de</P>
</div>
<div class="hrefInfoList-list">
<p><span>Información del Prod</span><span>HTML</span></p>
<P>语言：de</P>
</div>
</div>
<div class="hrefInfoList">
<p>企业网站</p>
<div class="hrefInfoList-list">
<p><span>Información del Prod</span><span>HTML</span></p>
<P>语言：de</P>
</div>
<div class="hrefInfoList-list">
<p><span>Información del Prod</span><span>HTML</span></p>
<P>语言：de</P>
</div>
<div class="hrefInfoList-list">
<p><span>GS1</span><span>HTML</span></p>
<P>语言：de</P>
</div>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="企业信息" name="second">
<div class="commodityInfo">
<div class="commodityInfo-cnt row">
<div class="col-lg-12 result-info hrefInfo2">
<p><span>企业名称：</span><span>{{GtinResultData.gs1Licence.licenseeName}}</span></p>
<p><span>地址：</span><span>{{addressInfo(GtinResultData.gs1Licence.address)}}</span></p>
<p><span>网址：</span><span>{{GtinResultData.gs1Licence.website || '--'}}</span></p>
<p><span>License类型：</span><span>{{GtinResultData.gs1Licence.licenceType}}</span></p>
<p><span>License Key：</span><span>{{GtinResultData.gs1Licence.licenceKey}}</span></p>
<p><span>发码MO：</span><span>{{GtinResultData.gs1Licence.licensingMO.moName}}</span></p>
</div>
</div>
<p style="font-size:13px;margin:15px 0 0 0 ;">该License数据由于2021年5月2日由GS1 Global Office提供，并于2023年6月1日最新更新</p>
</div>
</el-tab-pane>
</el-tabs>
</div>
<span style="color: rgb(255, 59, 48)" v-else>{{ errorMsg }}</span>
</div>
<div v-if="active=='second'">
<p class="tab-cnt-title">输入GLN</p>
<div class="gtin-cnt">
<div class="row">
<div class="col-lg-12">
<el-input placeholder="请输入GLN" style="margin-top:5px"><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input>
</div>
<!-- <div class="col-lg-1">-->
<!-- <el-button class="gtin-btn">查询</el-button>-->
<!-- </div>-->
</div>
<div class="row y-center" style="margin-top: 15px;">
<div class="col-lg-4">
<el-input v-model="captcha" placeholder="请输入验证码"></el-input>
</div>
<div class="col-lg-2">
<div class="validate-code">
<img :src="captchaPath" @click="getCaptcha()" alt=""/>
</div>
</div>
<div class="col-lg-2">
<el-button class="gtin-btn" @click="searchGLN">查询</el-button>
</div>
</div>
<p class="search-num">搜索样例：<span>9506000140445</span></p>
</div>
<div class="gtin-result">
<div class="gtin-result-tip">
<img src="../../assets/image/search/gtinIcon.png" />
<div>
<p>此商品条码已经由“Activate Test Account”公司注册</p>
</div>
</div>
<el-tabs v-model="gtinActiveName2" @tab-click="handleClick">
<el-tab-pane label="GLN信息" name="first">
<div class="gin-cnt-info">
<p>此GLN数据包含以下内容：</p>
<el-collapse v-model="collapseActiveName" accordion>
<el-collapse-item title="法人实体" name="1">
<p style="font-size:16px;color:#002C6C;">GS1 AISBL</p>
<p style="font-size:14px;color:#454545;">法人实体有效</p>
<ul>
<li>
<p><span>GLN</span><span>9506000140445</span></p>
</li>
<li>
<p><span>GLN类型</span><span>Legal entity</span></p>
</li>
<li>
<p><span>名称</span><span>(en)GS1 AISBL</span></p>
</li>
<li>
<p><span>组织角色</span><span>(en)GS1 AISBL</span></p>
</li>
<li>
<p><span>父级位置</span><span>9506000140445</span></p>
</li>
<li>
<p><span>相关地址</span><span>9506000140445</span></p>
</li>
<li>
<p><span>其他标识</span><span>9506000140445</span></p>
</li>
</ul>
<p style="font-size:16px;color:#002C6C;margin-top:15px">联系方式</p>
<ul>
<li>
<p><span>邮箱</span><span>info@gs1.org</span></p>
</li>
<li>
<p><span>电话</span><span>3227887800</span></p>
</li>
<li>
<p><span>网址</span><span>https://www.gs1.org</span></p>
</li>
<li>
<p><span>可获取语言</span><span>Unknown</span></p>
</li>
<p style="font-size:13px;color:#696D73;margin-top:15px">该数据由Active Test Account企业提供，并于2023年5月2日最新更新</p>
</ul>
</el-collapse-item>
<el-collapse-item title="固定物理位置" name="2">
<p style="font-size:16px;color:#002C6C;">布鲁塞尔办公室</p>
<p style="font-size:14px;color:#454545;">固定物理位置有效</p>
<ul>
<li>
<p><span>GLN</span><span>9506000140445</span></p>
</li>
<li>
<p><span>GLN类型</span><span>Legal entity</span></p>
</li>
<li>
<p><span>名称</span><span>(en)GS1 AISBL</span></p>
</li>
<li>
<p><span>组织角色</span><span>(en)GS1 AISBL</span></p>
</li>
<li>
<p><span>父级位置</span><span>9506000140445</span></p>
</li>
<li>
<p><span>相关地址</span><span>9506000140445</span></p>
</li>
<li>
<p><span>其他标识</span><span>9506000140445</span></p>
</li>
</ul>
<p style="font-size:16px;color:#002C6C;margin-top:15px">企业位置</p>
<p style="font-size:14px;color:#454545;">地址</p>
<ul>
<li>
<p><span>邮政名称</span><span>info@gs1.org</span></p>
</li>
<li>
<p><span>国家代码</span><span>3227887800</span></p>
</li>
<li>
<p><span>城市</span><span>https://www.gs1.org</span></p>
</li>
<li>
<p><span>街道地址</span><span>Unknown</span></p>
</li>
<li>
<p><span>邮政编码</span><span>Unknown</span></p>
</li>
<p style="font-size:13px;color:#696D73;margin-top:15px">该数据由Active Test Account企业提供，并于2023年5月2日最新更新</p>
</ul>
<p style="font-size:16px;color:#002C6C;margin-top:15px">联系方式</p>
<ul>
<li>
<p><span>邮箱</span><span>info@gs1.org</span></p>
</li>
<li>
<p><span>电话</span><span>3227887800</span></p>
</li>
<li>
<p><span>网址</span><span>https://www.gs1.org</span></p>
</li>
<li>
<p><span>可获取语言</span><span>Unknown</span></p>
</li>
<p style="font-size:13px;color:#696D73;margin-top:15px">该数据由GS1 Demo Account企业提供，并于2023年5月2日最新更新</p>
</ul>
</el-collapse-item>
<el-collapse-item title="数字位置" name="3">
<p style="font-size:16px;color:#002C6C;">EDI 网关</p>
<p style="font-size:14px;color:#454545;">数字位置有关</p>
<ul>
<li>
<p><span>GLN</span><span>9506000140445</span></p>
</li>
<li>
<p><span>GLN类型</span><span>Legal entity</span></p>
</li>
<li>
<p><span>名称</span><span>(en)GS1 AISBL</span></p>
</li>
<li>
<p><span>组织角色</span><span>(en)GS1 AISBL</span></p>
</li>
<li>
<p><span>父级位置</span><span>9506000140445</span></p>
</li>
<li>
<p><span>相关地址</span><span>9506000140445</span></p>
</li>
<li>
<p><span>其他标识</span><span>9506000140445</span></p>
</li>
</ul>
<p style="font-size:16px;color:#002C6C;margin-top:15px">企业位置</p>
<p style="font-size:14px;color:#454545;">数字位置</p>
<ul>
<li>
<p><span>数字地址</span><span>info@gs1.org</span></p>
</li>
</ul>
<p style="font-size:16px;color:#002C6C;margin-top:15px">联系方式</p>
<ul>
<li>
<p><span>邮箱</span><span>info@gs1.org</span></p>
</li>
<li>
<p><span>电话</span><span>3227887800</span></p>
</li>
<li>
<p><span>网址</span><span>https://www.gs1.org</span></p>
</li>
<li>
<p><span>可获取语言</span><span>Unknown</span></p>
</li>
<p style="font-size:13px;color:#696D73;margin-top:15px">该数据由GS1 Demo Account企业提供，并于2023年5月2日最新更新</p>
</ul>
</el-collapse-item>
<el-collapse-item title="链接至其他信息" name="4">
<p style="font-size:16px;color:#002C6C;">有零售商</p>
<div>
<p><span style="color:#00799E">GS1 MOs</span><span style="color:#F26335;margin-left:8px">HTML</span></p>
<p><span>语言：en</span></p>
</div>
</el-collapse-item>
</el-collapse>
</div>
</el-tab-pane>
<el-tab-pane label="企业信息" name="second">
<div class="commodityInfo">
<div class="commodityInfo-cnt row">
<div class="col-lg-12 result-info hrefInfo2">
<p><span>企业名称：</span><span>09506000140445</span></p>
<p><span>地址：</span><span>(en)Sticky's</span></p>
<p><span>网址：</span><span>(en)Sticky's Traditional Strawberry Jam Low Sugar 500 Gram</span></p>
<p><span>License类型：</span><span>(en)http://www.gs1.org/docs/09506000140445_A1C1.jpg</span></p>
<p><span>License Key：</span><span>10000217（Jams/Marmalades(Shelf Stable))</span></p>
<p><span>发码MO：</span><span>500（Gram）</span></p>
</div>
</div>
<p style="font-size:13px;margin:15px 0 0 0 ;">该License数据由于2021年5月2日由GS1 Global Office提供，并于2023年6月1日最新更新</p>
</div>
</el-tab-pane>
</el-tabs>
</div>
</div>
<div v-if="active=='third'">
<p class="tab-cnt-title">输入GS1标识</p>
<div class="gtin-cnt">
<div class="row">
<div class="col-lg-12">
<div class="row">
<div class="col-lg-6" >
<el-select placeholder="请选择GS1标识" filterable style="width:100%;margin-top:5px">
<el-option v-for="(item, index) in GS1_Mark_List" :label="item.label" :value="item.value" :key="`GS1_Mark_${index}`"></el-option>
</el-select>
</div>
<div class="col-lg-6">
<el-input placeholder="请输入GS1标识" style="margin-top:5px"><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input>
<!-- <p class="search-num">搜索样例：<span>9506000140445</span></p>-->
</div>
</div>
</div>
<!-- <div class="col-lg-1">-->
<!-- <el-button class="gtin-btn">查询</el-button>-->
<!-- </div>-->
</div>
<div class="row y-center" style="margin-top: 15px;">
<div class="col-lg-6">
<el-input v-model="captcha" placeholder="请输入验证码"></el-input>
</div>
<div class="col-lg-2">
<div class="validate-code">
<img :src="captchaPath" @click="getCaptcha()" alt=""/>
</div>
</div>
<div class="col-lg-2">
<el-button class="gtin-btn" @click="searchGS1">查询</el-button>
</div>
</div>
<p class="search-num">搜索样例：<span>9506000140445</span></p>
</div>
<div class="gtin-result">
<div class="gtin-result-tip" style="margin-top:20px">
<img src="../../assets/image/search/gtinIcon.png" />
<div>
<p>9506000140445</p>
<p>此商品条码已经由“Activate Test Account”公司注册</p>
</div>
</div>
<el-tabs v-model="gtinActiveName3" @tab-click="handleClick" class="tab3">
<el-tab-pane label="企业信息" name='first' >
<div class="commodityInfo">
<div class="commodityInfo-cnt row">
<div class="col-lg-12 result-info hrefInfo2">
<p><span>企业名称：</span><span>09506000140445</span></p>
<p><span>地址：</span><span>(en)Sticky's</span></p>
<p><span>网址：</span><span>(en)Sticky's Traditional Strawberry Jam Low Sugar 500 Gram</span></p>
<p><span>License类型：</span><span>(en)http://www.gs1.org/docs/09506000140445_A1C1.jpg</span></p>
<p><span>License Key：</span><span>10000217（Jams/Marmalades(Shelf Stable))</span></p>
<p><span>发码MO：</span><span>500（Gram）</span></p>
</div>
</div>
<p style="font-size:13px;margin:15px 0 0 0 ;">该License数据由于2021年5月2日由GS1 Global Office提供，并于2023年6月1日最新更新</p>
</div>
</el-tab-pane>
</el-tabs>
</div>
</div>
<div v-if="active=='four'">
<p class="tab-cnt-title">选择国家并填写企业名称</p>
<div class="gtin-cnt">
<div class="row">
<div class="col-lg-12">
<div class="row">
<div class="col-lg-6" >
<el-select placeholder="请选择国家" filterable style="width:100%;margin-top:5px">
<el-option v-for="(item, index) in countryList" :label="item.label" :value="item.value" :key="`Country_${index}`"> </el-option>
</el-select>
</div>
<div class="col-lg-6">
<el-input placeholder="请输入企业名称" style="margin-top:5px"><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input>
<!-- <p class="search-num">搜索样例：<span>9506000140445</span></p>-->
</div>
</div>
</div>
<!-- <div class="col-lg-1">-->
<!-- <el-button class="gtin-btn">查询</el-button>-->
<!-- </div>-->
</div>
<div class="row y-center" style="margin-top: 15px;">
<div class="col-lg-6">
<el-input v-model="captcha" placeholder="请输入验证码"></el-input>
</div>
<div class="col-lg-2">
<div class="validate-code">
<img :src="captchaPath" @click="getCaptcha()" alt=""/>
</div>
</div>
<div class="col-lg-2">
<el-button class="gtin-btn" @click="searchQY">查询</el-button>
</div>
</div> </div>
</el-form-item> <p class="search-num">搜索样例：<span>9506000140445</span></p>
</el-form> </div>
<div class="gtin-result">
<div class="result-box" v-if="showResult"> <div class="gtin-result-tip" style="margin-top:20px">
<div class="result-box-title">查询 {{ searchCodeShow }} 结果</div> <img src="../../assets/image/search/gtinIcon.png" />
<div class="result-box-body"> <div>
<template v-if="result"> <p>9506000140445</p>
<div class="company-info"> <p>此商品条码已经由“Activate Test Account”公司注册</p>
<el-table </div>
:data="result" </div>
header-cell-class-name="search-table-hc" <p class="tab-cnt-title" style="margin-top:25px">搜索结果</p>
style="width: 100%" <p style="font-size: 16px;color:#002C6C">点击企业名称了解更多信息</p>
> <el-table
<el-table-column prop="gs1CompanyPrefixLicensee.partyName" label="企业名称"></el-table-column> :data="tableData"
<el-table-column prop="gepirRequestedKey.requestedKeyValue" label="GTIN"></el-table-column> style="width: 100%">
<el-table-column prop="address.streetAddressOne" label="地址"></el-table-column> <el-table-column
<el-table-column prop="address.city" label="城市"></el-table-column> prop="date"
</el-table> label="License标识"
</div> width="180">
</template> </el-table-column>
<span style="color: rgb(255, 59, 48)" v-else>{{ errorMsg }}</span> <el-table-column
prop="name"
label="企业名称"
width="180">
</el-table-column>
<el-table-column
prop="city"
label="城市">
</el-table-column>
<el-table-column
prop="address"
label="国家">
</el-table-column>
</el-table>
<el-pagination
background
layout="prev, pager, next"
:total="1000">
</el-pagination>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="notice"> <div class="notice">
...@@ -80,6 +540,7 @@ ...@@ -80,6 +540,7 @@
<script> <script>
import validation from "@/views/Search/validation"; import validation from "@/views/Search/validation";
import {mapState} from "vuex"; import {mapState} from "vuex";
import { GS1_Mark_List, countryListFunc } from "@/utils/constant";
const errorText = { const errorText = {
"1": '没有符合条件的记录！', "1": '没有符合条件的记录！',
...@@ -91,11 +552,42 @@ export default { ...@@ -91,11 +552,42 @@ export default {
mixins: [validation], mixins: [validation],
data() { data() {
return { return {
active:'first',
gtinActiveName:'first',
gtinActiveName2:'first',
gtinActiveName3:'first',
collapseActiveName:1,
tableData: [{
date: '2016-05-02',
name: '王小虎',
city:'江苏',
address: 'Belgium'
}, {
date: '2016-05-04',
name: '王小虎',
city:'江苏',
address: 'Belgium'
}, {
date: '2016-05-01',
name: '王小虎',
city:'江苏',
address: 'Belgium'
}, {
date: '2016-05-03',
name: '王小虎',
city:'江苏',
address: 'Belgium'
}],
search: {code: ""}, search: {code: ""},
searchCodeShow: "", searchCodeShow: "",
showResult: false, showResult: false,
result: null, result: null,
file: '', file: '',
errorMsg: '',
GtinInputValue: '09506000134352',
GtinResultData: '',
GS1_Mark_List: GS1_Mark_List,
countryList: countryListFunc()
}; };
}, },
created() { created() {
...@@ -105,14 +597,106 @@ export default { ...@@ -105,14 +597,106 @@ export default {
}, },
computed: { computed: {
...mapState(["urls"]), ...mapState(["urls"]),
addressInfo: () => {
return (address) => {
const {addressLocality, addressRegion, addressSuburb, streetAddress} = address
const language = addressLocality.language || addressRegion.language || addressSuburb.language || streetAddress.language
return `(${language}) ${addressLocality.value} ${addressRegion.value} ${addressSuburb.value} ${streetAddress.value}`
}
}
}, },
mounted(){ mounted(){
this.file = window.location.protocol + '//' + window.location.hostname + ':9091/office/uploadFileResource/' this.file = window.location.protocol + '//' + window.location.hostname + ':9091/office/uploadFileResource/'
}, },
methods: { methods: {
// tab切换
changeTab(active){
this.active=active
this.captcha = ''
this.getCaptcha();
},
handleClick() {
},
openUrl(url) { openUrl(url) {
window.open(url, '_blank') window.open(url, '_blank')
}, },
openPdf() {
window.open('/全球商品条码查询服务条款.pdf', '_blank')
},
async searchGTIN() {
this.GtinResultData = ''
this.errorMsg ='正在查询……'
const params = {
gtin: this.GtinInputValue,
uuid: this.uuid,
captcha: this.captcha
};
const searchResult = await this.$api.search.searchGtin(params);
const {returnCode, returnMsg, data} = searchResult;
if (returnCode === "0") {
console.log('请求成功了')
this.GtinResultData = data ? data[0] : ''
!data && (this.errorMsg = '没有查询到相关信息！')
} else {
this.showResult = true;
this.errorMsg = returnMsg || '您输入的商品条码格式不正确，请确认后重试。';
}
this.getCaptcha();
},
async searchGLN() {
// this.errorMsg ='正在查询……'
// const params = {
// uuid: this.uuid,
// captcha: this.captcha
// };
// const searchResult = await this.$api.search.searchGtin(params);
// const {returnCode, returnMsg, data} = searchResult;
// if (returnCode === "0") {
// console.log('请求成功了')
// this.GtinResultData = data ? data[0] : ''
// !data && (this.errorMsg = '没有查询到相关信息！')
// } else {
// this.showResult = true;
// this.errorMsg = returnMsg || '您输入的商品条码格式不正确，请确认后重试。';
// }
this.getCaptcha();
},
async searchGS1() {
// this.errorMsg ='正在查询……'
// const params = {
// uuid: this.uuid,
// captcha: this.captcha
// };
// const searchResult = await this.$api.search.searchGtin(params);
// const {returnCode, returnMsg, data} = searchResult;
// if (returnCode === "0") {
// console.log('请求成功了')
// this.GtinResultData = data ? data[0] : ''
// !data && (this.errorMsg = '没有查询到相关信息！')
// } else {
// this.showResult = true;
// this.errorMsg = returnMsg || '您输入的商品条码格式不正确，请确认后重试。';
// }
this.getCaptcha();
},
searchQY() {
// this.errorMsg ='正在查询……'
// const params = {
// uuid: this.uuid,
// captcha: this.captcha
// };
// const searchResult = await this.$api.search.searchGtin(params);
// const {returnCode, returnMsg, data} = searchResult;
// if (returnCode === "0") {
// console.log('请求成功了')
// this.GtinResultData = data ? data[0] : ''
// !data && (this.errorMsg = '没有查询到相关信息！')
// } else {
// this.showResult = true;
// this.errorMsg = returnMsg || '您输入的商品条码格式不正确，请确认后重试。';
// }
this.getCaptcha();
},
async handleSearch() { async handleSearch() {
this.errorMsg ='正在查询……' this.errorMsg ='正在查询……'
this.searchCodeShow = this.search.code; this.searchCodeShow = this.search.code;
...@@ -149,6 +733,11 @@ export default { ...@@ -149,6 +733,11 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
.validate-code {
display: flex !important;
margin-left: 0 !important;
width: 90px !important;
}
.search-content { .search-content {
.banner-box { .banner-box {
width: 100%; width: 100%;
...@@ -190,5 +779,339 @@ export default { ...@@ -190,5 +779,339 @@ export default {
.right { .right {
} }
} }
.body1{
padding-top: 0!important;
}
.clo3{
padding-right: 7px!important;
padding-left: 7px!important;
margin-bottom: 15px;
>img{
width: 100%;
}
}
.gln-border{
background: #F0F5FA;
border-radius: 4px;
border: 1px solid #C4D7ED;
padding: 18px;
cursor: pointer;
img{
margin-bottom: 13px;
}
p{
margin: 0 0 6px;
}
.gln-tab-p1{
font-size: 18px;
font-family: 'MicrosoftYaHeiSemibold';
color: #002C6C;
line-height: 24px;
font-weight: 600;
}
.gln-tab-p2{
font-size: 14px;
font-family: 'MicrosoftYaHei';
color: #002C6C;
line-height: 19px;
}
}
.gln-panel{
.active{
background: #002C6C;
background: linear-gradient(-145deg, transparent 20px, #002C6C 0) right;
background-size: 100% 100%;
background-repeat: no-repeat;
border: none;
p{
color: #fff;
}
}
}
.tab-cnt-title{
font-size: 22px;
color: #002C6C;
line-height: 30px;
font-weight: 600;
}
.gtin-cnt{
.gtin-btn{
//margin-top:5px;
background:#CD3C0D;
color:#fff;
@media (min-width: 996px) {
margin-left: -31px;
}
@media (max-width: 996px) {
width: 100%;
}
}
.search-num{
margin-top: 16px;
font-size: 15px;
color: #454545;
line-height: 20px;
span{
color: #002C6C;
}
}
.agreeCheck{
margin-top: 24px;
font-size: 14px;
color: #454545;
line-height: 19px;
.el-checkbox{
margin-right: 8px;
.el-checkbox__inner{
display: inline-block;
width: 18px;
height: 18px;
border-radius: 9px;
&::after{
left: 6px;
height: 10px;
}
}
}
span{
color: #00799E;
cursor: pointer;
}
}
}
.gtin-result{
.gtin-result-tip{
padding: 13px 24px;
background: #CCF1DC;
border-radius: 4px;
border-left: 3px solid #238037;
display: flex;
align-items: center;
margin-bottom: 20px;
img{
margin-right: 16px;
}
p{
margin: 0;
color: #238037;
font-size: 15px;
font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
&:first-child{
font-weight: 600;
font-size: 18px;
}
}
}
.el-tabs{
.el-tabs__item{
padding: 0 26px;
font-size: 15px;
}
.is-active{
border-bottom:4px solid #F26335 ;
}
.el-tabs__header{
margin: 0;
}
.el-tabs__content{
border: 1px solid #C5D8EE;
}
}
.commodityInfo{
padding: 30px;
border-bottom: 1px solid #C5D8EE;
.result-info{
font-size: 14px;
p{
display: flex;
margin-bottom: 16px;
> span:nth-child(1) {
flex-shrink: 0;
}
}
span:first-child{
display: inline-block;
width: 80px;
text-align: right;
}
span:last-child{
color: #002C6C;
margin-left: 12px;
}
}
}
.hrefInfo2{
p{
span:first-child{
width: 102px!important;
}
}
}
.hrefInfo{
padding: 23px 30px;
>p{
font-size: 22px;
font-family: MicrosoftYaHeiSemibold;
color: #002C6C;
line-height: 30px;
font-weight: 600;
}
.hrefInfoList{
>p{
font-size: 18px;
font-family: MicrosoftYaHeiSemibold;
color: #002C6C;
line-height: 24px;
font-weight: 600;
margin-top: 24px;
}
.hrefInfoList-list{
margin-top: 16px;
margin-bottom: 14px;
p:nth-child(1){
font-size: 14px;
color: #00799E;
line-height: 19px;
span:last-child{
color: #F26335;
margin-left: 15px;
}
}
p:nth-child(2){
font-size: 14px;
color: #454545;
line-height: 19px;
}
}
}
}
}
.gin-cnt-info{
padding: 32px 30px;
>p{
font-size: 22px;
font-weight: 600;
color: #002C6C;
line-height: 30px;
}
.el-collapse{
.el-collapse-item__header{
font-size: 16px;
color: #002C6C;
line-height: 21px;
padding-left: 16px;
}
.is-active{
border-bottom: none;
background: #F0F5FA;
}
.el-collapse-item__wrap{
background: #F0F5FA;
padding-left: 16px;
box-sizing: border-box;
}
ul{
padding: 0;
margin: 0;
li{
list-style: none;
display: inline-block;
width: calc( 100% - 16px);
height: 44px;
line-height: 44px;
background: #fff;
border-bottom: 1px solid #F0F5FA;
p{
font-size: 14px;
span:first-child{
display: inline-block;
width: 50%;
padding-left: 12px;
}
span:last-child{
color: #002C6C;
}
}
}
}
}
}
.tab3{
.el-tabs__active-bar{
width: auto!important;
}
}
.el-table{
margin-top: 14px;
th{
color: #454545;
font-size: 14px;
font-weight: 0;
border-top: 1px solid #696D73;
border-bottom: 1px solid #696D73!important;
&:first-child{
border-left: 1px solid #696D73!important;
}
&:nth-child(4){
border-right: 1px solid #696D73!important;
}
}
td{
font-size: 14px;
color: #454545;
}
.has-gutter{
border: 1px solid #696D73!important;;
}
}
.el-table tr:nth-child(odd){
background: #E5E8EB;
}
.el-pagination.is-background{
text-align: right;
}
.el-pagination{
button{
margin: 0;
}
}
.el-pagination.is-background .btn-prev, .el-pagination.is-background .btn-next, .el-pagination.is-background .el-pager li{
margin: 0;
border-radius:0!important;
background: #E5E8EB;
font-size: 14px;
color: #0E2C6B;
width: 36px;
height: 36px;
line-height: 36px;
border-right: 1px solid #D5E3F2;
font-weight: 0;
}
.el-pagination.is-background .el-pager li:not(.disabled).active{
background: #C4D7ED;
color: #0E2C6B;
}
.search-content .el-pagination.is-background .btn-prev{
border-top-left-radius: 4px!important;
border-bottom-left-radius: 4px!important;
}
} }
</style> </style>
src/views/Search/externalcopy.vue 0 → 100644
<template>
<div class="search-content">
<div class="banner-box">
<img src="./img/query_external_banner2.png"
@click="openUrl(`http://static.gds.org.cn/staticPage/GRPVbg/index.html`)"/>
<!-- https://import.gds.org.cn/#/home/index 中国进口商品信息服务平台-->
<!-- http://static.gds.org.cn/staticPage/GRPVbg/index.html 中文版VbG宣传页面-->
</div>
<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="captcha"
placeholder="请输入验证码"
class="w160"
></el-input>
<div class="validate-code">
<img :src="captchaPath" @click="getCaptcha()" alt=""/>
<!-- <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="company-info">
<el-table
:data="result"
header-cell-class-name="search-table-hc"
style="width: 100%"
>
<el-table-column prop="gs1CompanyPrefixLicensee.partyName" 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 style="color: rgb(255, 59, 48)" 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至699之间的前缀码分配给中国物品编码中心使用，通常以这些前缀码开始的厂商识别代码都是由中国物品编码中心负责分配和管理的；以其他前缀码开始的则由境外GS1成员组织负责，一般称为"境外条码"，以下为您提供了境外商品条码信息的查询工具，请根据提示进行相关查询。欲了解GS1分配的前缀码，请点击：
<a href="/search/country" target="_blank" style="color: #5AC8FA;">了解更多 >></a>
</p>
<p style="color: #FF3B30;">2、本查询仅适用于中华人民共和国境外注册的商品条码信息。</p>
</div>
</div>
</div>
</template>
<script>
import validation from "@/views/Search/validation";
import {mapState} from "vuex";
const errorText = {
"1": '没有符合条件的记录！',
"2": '未找到该商品条码信息！',
"10": '厂商识别代码已注销！',
"14": '搜索频率过多！',
}
export default {
mixins: [validation],
data() {
return {
search: {code: ""},
searchCodeShow: "",
showResult: false,
result: null,
file: '',
};
},
created() {
if (this.$route.query.keyword) {
this.search.code=this.$route.query.keyword
}
},
computed: {
...mapState(["urls"]),
},
mounted(){
this.file = window.location.protocol + '//' + window.location.hostname + ':9091/office/uploadFileResource/'
},
methods: {
openUrl(url) {
window.open(url, '_blank')
},
async handleSearch() {
this.errorMsg ='正在查询……'
this.searchCodeShow = this.search.code;
if(this.hasSpecialString(this.searchCodeShow)){
return true
}
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} = searchGlnRes;
console.log(searchGlnRes)
if (returnCode === "0") {
let redirectUrl='https://www.gds.org.cn/#/importList/index?type=importProduct&keyword='+this.search.code
window.open(redirectUrl, '_blank')
} else {
this.showResult = true;
this.errorMsg =
searchGlnRes.returnMsg ||
"您输入的商品条码格式不正确，请确认后重试。";
// this.result = null;
}
this.getCaptcha();
},
},
};
</script>
<style lang="scss">
.search-content {
.banner-box {
width: 100%;
height: auto;
> img {
width: 100%;
height: auto;
cursor: pointer;
}
}
.product-info {
margin-top: -15px;
.left {
.row_ {
display: flex;
align-items: center;
height: 42px;
.cell {
flex: 0 0 100px;
text-align: left;
font-size: 14px;
font-weight: 400;
color: #666666;
}
.value {
flex: 1;
font-size: 14px;
font-weight: 400;
color: #414345;
}
}
}
.right {
}
}
}
</style>
src/views/Search/externalcopy1.vue deleted 100644 → 0
<template>
<div class="search-content">
<div class="banner-box">
<img src="./img/query_external_banner2.png"
@click="openUrl(`http://static.gds.org.cn/staticPage/GRPVbg/index.html`)"/>
<!-- https://import.gds.org.cn/#/home/index 中国进口商品信息服务平台-->
<!-- http://static.gds.org.cn/staticPage/GRPVbg/index.html 中文版VbG宣传页面-->
</div>
<div class="title">境外条码信息查询</div>
<div class="row body gln-panel" style="padding-bottom:0px!important">
<div class="col-lg-3 clo3" @click="changeTab('first')" >
<div class="gln-border" style="height:136px" :class="{active:active=='first'}">
<img src="../../assets/image/search/gln1.png" v-if="active=='first'" style="margin-top: 7px;"/>
<img src="../../assets/image/search/gln12.png" v-if="active!='first'" style="margin-top: 7px;"/>
<p class="gln-tab-p1">验证产品</p>
<p class="gln-tab-p2">通过GTIN查询</p>
</div>
<img src="../../assets/image/search/border-bottom.png" style="border-bottom" v-if="active=='first'"/>
</div>
<div class="col-lg-3 clo3" @click="changeTab('second')">
<div class="gln-border" style="height:136px" :class="{active:active=='second'}">
<img src="../../assets/image/search/gln22.png" v-if="active=='second'" />
<img src="../../assets/image/search/gln2.png" v-if="active!='second'" />
<p class="gln-tab-p1">验证位置/实体</p>
<p class="gln-tab-p2">通过GLN查询</p>
</div>
<img src="../../assets/image/search/border-bottom.png" style="border-bottom" v-if="active=='second'"/>
</div>
<div class="col-lg-3 clo3" @click="changeTab('third')">
<div class="gln-border" style="height:136px" :class="{active:active=='third'}">
<img src="../../assets/image/search/other-keys2.png" v-if="active=='third'" />
<img src="../../assets/image/search/other-keys.png" v-if="active!='third'" />
<p class="gln-tab-p1">验证其它GS1标识</p>
<p class="gln-tab-p2">通过其它GS1标识查询</p>
</div>
<img src="../../assets/image/search/border-bottom.png" style="border-bottom" v-if="active=='third'"/>
</div>
<div class="col-lg-3 clo3" @click="changeTab('four')">
<div class="gln-border" style="height:136px" :class="{active:active=='four'}">
<img src="../../assets/image/search/licensee2.png" v-if="active=='four'" />
<img src="../../assets/image/search/licensee.png" v-if="active!='four'" />
<p class="gln-tab-p1">验证企业</p>
<p class="gln-tab-p2">通过企业名称查询</p>
</div>
<img src="../../assets/image/search/border-bottom.png" style="border-bottom" v-if="active=='four'"/>
</div>
</div>
<div class="body body1">
<div>
<div v-if="active=='first'">
<p class="tab-cnt-title">输入GTIN</p>
<div class="gtin-cnt">
<div class="row">
<div class="col-lg-11">
<el-input style="margin-top:5px"><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input>
</div>
<div class="col-lg-1">
<el-button class="gtin-btn">查询</el-button>
</div>
</div>
<p class="search-num">搜索样例：<span>9506000140445</span></p>
<p class="agreeCheck">
<el-checkbox></el-checkbox>我已阅读并同意<span @click="openPdf">《VbG用户使用条款》</span>
</p>
</div>
<div class="gtin-result">
<div class="gtin-result-tip">
<img src="../../assets/image/search/gtinIcon.png" />
<div>
<p>9506000140445</p>
<p>此商品条码已经由“Activate Test Account”公司注册</p>
</div>
</div>
<el-tabs v-model="gtinActiveName" @tab-click="handleClick">
<el-tab-pane label="商品信息" name="first">
<div class="commodityInfo">
<div class="commodityInfo-cnt row">
<div class="col-lg-3">
<img src="" alt="">
</div>
<div class="col-lg-9 result-info">
<p><span>商品条码：</span><span>09506000140445</span></p>
<p><span>品牌：</span><span>(en)Sticky's</span></p>
<p><span>产品描述：</span><span>(en)Sticky's Traditional Strawberry Jam Low Sugar 500 Gram</span></p>
<p><span>图片URL：</span><span>(en)http://www.gs1.org/docs/09506000140445_A1C1.jpg</span></p>
<p><span>产品类别：</span><span>10000217（Jams/Marmalades(Shelf Stable))</span></p>
<p><span>净含量：</span><span>500（Gram）</span></p>
<p><span>商品条码：</span><span>001</span></p>
</div>
</div>
<p style="font-size:13px;margin:15px 0 0 0 ;">该数据由Active Test Account企业提供，并于2023年5月2日最新更新</p>
<p style="font-size:13px;">该GTIN信息完整</p>
</div>
<div class="hrefInfo ">
<p>链接至其他产品信息</p>
<div class="hrefInfoList">
<p>企业网站</p>
<div class="hrefInfoList-list">
<p><span>Donde comprar Dal Gi</span><span>HTML</span></p>
<P>语言：de</P>
</div>
<div class="hrefInfoList-list">
<p><span>Where to buy</span><span>HTML</span></p>
<P>语言：de</P>
</div>
<div class="hrefInfoList-list">
<p><span>Información del Prod</span><span>HTML</span></p>
<P>语言：de</P>
</div>
</div>
<div class="hrefInfoList">
<p>企业网站</p>
<div class="hrefInfoList-list">
<p><span>Información del Prod</span><span>HTML</span></p>
<P>语言：de</P>
</div>
<div class="hrefInfoList-list">
<p><span>Información del Prod</span><span>HTML</span></p>
<P>语言：de</P>
</div>
<div class="hrefInfoList-list">
<p><span>GS1</span><span>HTML</span></p>
<P>语言：de</P>
</div>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="企业信息" name="second">
<div class="commodityInfo">
<div class="commodityInfo-cnt row">
<div class="col-lg-12 result-info hrefInfo2">
<p><span>企业名称：</span><span>09506000140445</span></p>
<p><span>地址：</span><span>(en)Sticky's</span></p>
<p><span>网址：</span><span>(en)Sticky's Traditional Strawberry Jam Low Sugar 500 Gram</span></p>
<p><span>License类型：</span><span>(en)http://www.gs1.org/docs/09506000140445_A1C1.jpg</span></p>
<p><span>License Key：</span><span>10000217（Jams/Marmalades(Shelf Stable))</span></p>
<p><span>发码MO：</span><span>500（Gram）</span></p>
</div>
</div>
<p style="font-size:13px;margin:15px 0 0 0 ;">该License数据由于2021年5月2日由GS1 Global Office提供，并于2023年6月1日最新更新</p>
</div>
</el-tab-pane>
</el-tabs>
</div>
</div>
<div v-if="active=='second'">
<p class="tab-cnt-title">输入GLN</p>
<div class="gtin-cnt">
<div class="row">
<div class="col-lg-11">
<el-input style="margin-top:5px"><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input>
</div>
<div class="col-lg-1">
<el-button class="gtin-btn">查询</el-button>
</div>
</div>
<p class="search-num">搜索样例：<span>9506000140445</span></p>
</div>
<div class="gtin-result">
<div class="gtin-result-tip">
<img src="../../assets/image/search/gtinIcon.png" />
<div>
<p>此商品条码已经由“Activate Test Account”公司注册</p>
</div>
</div>
<el-tabs v-model="gtinActiveName2" @tab-click="handleClick">
<el-tab-pane label="GLN信息" name="first">
<div class="gin-cnt-info">
<p>此GLN数据包含以下内容：</p>
<el-collapse v-model="collapseActiveName" accordion>
<el-collapse-item title="法人实体" name="1">
<p style="font-size:16px;color:#002C6C;">GS1 AISBL</p>
<p style="font-size:14px;color:#454545;">法人实体有效</p>
<ul>
<li>
<p><span>GLN</span><span>9506000140445</span></p>
</li>
<li>
<p><span>GLN类型</span><span>Legal entity</span></p>
</li>
<li>
<p><span>名称</span><span>(en)GS1 AISBL</span></p>
</li>
<li>
<p><span>组织角色</span><span>(en)GS1 AISBL</span></p>
</li>
<li>
<p><span>父级位置</span><span>9506000140445</span></p>
</li>
<li>
<p><span>相关地址</span><span>9506000140445</span></p>
</li>
<li>
<p><span>其他标识</span><span>9506000140445</span></p>
</li>
</ul>
<p style="font-size:16px;color:#002C6C;margin-top:15px">联系方式</p>
<ul>
<li>
<p><span>邮箱</span><span>info@gs1.org</span></p>
</li>
<li>
<p><span>电话</span><span>3227887800</span></p>
</li>
<li>
<p><span>网址</span><span>https://www.gs1.org</span></p>
</li>
<li>
<p><span>可获取语言</span><span>Unknown</span></p>
</li>
<p style="font-size:13px;color:#696D73;margin-top:15px">该数据由Active Test Account企业提供，并于2023年5月2日最新更新</p>
</ul>
</el-collapse-item>
<el-collapse-item title="固定物理位置" name="2">
<p style="font-size:16px;color:#002C6C;">布鲁塞尔办公室</p>
<p style="font-size:14px;color:#454545;">固定物理位置有效</p>
<ul>
<li>
<p><span>GLN</span><span>9506000140445</span></p>
</li>
<li>
<p><span>GLN类型</span><span>Legal entity</span></p>
</li>
<li>
<p><span>名称</span><span>(en)GS1 AISBL</span></p>
</li>
<li>
<p><span>组织角色</span><span>(en)GS1 AISBL</span></p>
</li>
<li>
<p><span>父级位置</span><span>9506000140445</span></p>
</li>
<li>
<p><span>相关地址</span><span>9506000140445</span></p>
</li>
<li>
<p><span>其他标识</span><span>9506000140445</span></p>
</li>
</ul>
<p style="font-size:16px;color:#002C6C;margin-top:15px">企业位置</p>
<p style="font-size:14px;color:#454545;">地址</p>
<ul>
<li>
<p><span>邮政名称</span><span>info@gs1.org</span></p>
</li>
<li>
<p><span>国家代码</span><span>3227887800</span></p>
</li>
<li>
<p><span>城市</span><span>https://www.gs1.org</span></p>
</li>
<li>
<p><span>街道地址</span><span>Unknown</span></p>
</li>
<li>
<p><span>邮政编码</span><span>Unknown</span></p>
</li>
<p style="font-size:13px;color:#696D73;margin-top:15px">该数据由Active Test Account企业提供，并于2023年5月2日最新更新</p>
</ul>
<p style="font-size:16px;color:#002C6C;margin-top:15px">联系方式</p>
<ul>
<li>
<p><span>邮箱</span><span>info@gs1.org</span></p>
</li>
<li>
<p><span>电话</span><span>3227887800</span></p>
</li>
<li>
<p><span>网址</span><span>https://www.gs1.org</span></p>
</li>
<li>
<p><span>可获取语言</span><span>Unknown</span></p>
</li>
<p style="font-size:13px;color:#696D73;margin-top:15px">该数据由GS1 Demo Account企业提供，并于2023年5月2日最新更新</p>
</ul>
</el-collapse-item>
<el-collapse-item title="数字位置" name="3">
<p style="font-size:16px;color:#002C6C;">EDI 网关</p>
<p style="font-size:14px;color:#454545;">数字位置有关</p>
<ul>
<li>
<p><span>GLN</span><span>9506000140445</span></p>
</li>
<li>
<p><span>GLN类型</span><span>Legal entity</span></p>
</li>
<li>
<p><span>名称</span><span>(en)GS1 AISBL</span></p>
</li>
<li>
<p><span>组织角色</span><span>(en)GS1 AISBL</span></p>
</li>
<li>
<p><span>父级位置</span><span>9506000140445</span></p>
</li>
<li>
<p><span>相关地址</span><span>9506000140445</span></p>
</li>
<li>
<p><span>其他标识</span><span>9506000140445</span></p>
</li>
</ul>
<p style="font-size:16px;color:#002C6C;margin-top:15px">企业位置</p>
<p style="font-size:14px;color:#454545;">数字位置</p>
<ul>
<li>
<p><span>数字地址</span><span>info@gs1.org</span></p>
</li>
</ul>
<p style="font-size:16px;color:#002C6C;margin-top:15px">联系方式</p>
<ul>
<li>
<p><span>邮箱</span><span>info@gs1.org</span></p>
</li>
<li>
<p><span>电话</span><span>3227887800</span></p>
</li>
<li>
<p><span>网址</span><span>https://www.gs1.org</span></p>
</li>
<li>
<p><span>可获取语言</span><span>Unknown</span></p>
</li>
<p style="font-size:13px;color:#696D73;margin-top:15px">该数据由GS1 Demo Account企业提供，并于2023年5月2日最新更新</p>
</ul>
</el-collapse-item>
<el-collapse-item title="链接至其他信息" name="4">
<p style="font-size:16px;color:#002C6C;">有零售商</p>
<div>
<p><span style="color:#00799E">GS1 MOs</span><span style="color:#F26335;margin-left:8px">HTML</span></p>
<p><span>语言：en</span></p>
</div>
</el-collapse-item>
</el-collapse>
</div>
</el-tab-pane>
<el-tab-pane label="企业信息" name="second">
<div class="commodityInfo">
<div class="commodityInfo-cnt row">
<div class="col-lg-12 result-info hrefInfo2">
<p><span>企业名称：</span><span>09506000140445</span></p>
<p><span>地址：</span><span>(en)Sticky's</span></p>
<p><span>网址：</span><span>(en)Sticky's Traditional Strawberry Jam Low Sugar 500 Gram</span></p>
<p><span>License类型：</span><span>(en)http://www.gs1.org/docs/09506000140445_A1C1.jpg</span></p>
<p><span>License Key：</span><span>10000217（Jams/Marmalades(Shelf Stable))</span></p>
<p><span>发码MO：</span><span>500（Gram）</span></p>
</div>
</div>
<p style="font-size:13px;margin:15px 0 0 0 ;">该License数据由于2021年5月2日由GS1 Global Office提供，并于2023年6月1日最新更新</p>
</div>
</el-tab-pane>
</el-tabs>
</div>
</div>
<div v-if="active=='third'">
<p class="tab-cnt-title">输入GS1标识</p>
<div class="gtin-cnt">
<div class="row">
<div class="col-lg-11">
<div class="row">
<div class="col-lg-6" >
<el-select placeholder="请选择" filterable style="width:100%;margin-top:5px">
<el-option v-for="(item, index) in GS1_Mark_List" :label="item.label" :value="item.value" :key="`GS1_Mark_${index}`"></el-option>
</el-select>
</div>
<div class="col-lg-6">
<el-input style="margin-top:5px"><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input>
<p class="search-num">搜索样例：<span>9506000140445</span></p>
</div>
</div>
</div>
<div class="col-lg-1">
<el-button class="gtin-btn">查询</el-button>
</div>
</div>
</div>
<div class="gtin-result">
<div class="gtin-result-tip" style="margin-top:20px">
<img src="../../assets/image/search/gtinIcon.png" />
<div>
<p>9506000140445</p>
<p>此商品条码已经由“Activate Test Account”公司注册</p>
</div>
</div>
<el-tabs v-model="gtinActiveName3" @tab-click="handleClick" class="tab3">
<el-tab-pane label="企业信息" name='first' >
<div class="commodityInfo">
<div class="commodityInfo-cnt row">
<div class="col-lg-12 result-info hrefInfo2">
<p><span>企业名称：</span><span>09506000140445</span></p>
<p><span>地址：</span><span>(en)Sticky's</span></p>
<p><span>网址：</span><span>(en)Sticky's Traditional Strawberry Jam Low Sugar 500 Gram</span></p>
<p><span>License类型：</span><span>(en)http://www.gs1.org/docs/09506000140445_A1C1.jpg</span></p>
<p><span>License Key：</span><span>10000217（Jams/Marmalades(Shelf Stable))</span></p>
<p><span>发码MO：</span><span>500（Gram）</span></p>
</div>
</div>
<p style="font-size:13px;margin:15px 0 0 0 ;">该License数据由于2021年5月2日由GS1 Global Office提供，并于2023年6月1日最新更新</p>
</div>
</el-tab-pane>
</el-tabs>
</div>
</div>
<div v-if="active=='four'">
<p class="tab-cnt-title">选择国家并填写企业名称</p>
<div class="gtin-cnt">
<div class="row">
<div class="col-lg-11">
<div class="row">
<div class="col-lg-6" >
<el-select placeholder="请选择" filterable style="width:100%;margin-top:5px">
<el-option v-for="(item, index) in countryList" :label="item.label" :value="item.value" :key="`Country_${index}`"> </el-option>
</el-select>
</div>
<div class="col-lg-6">
<el-input style="margin-top:5px"><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input>
<p class="search-num">搜索样例：<span>9506000140445</span></p>
</div>
</div>
</div>
<div class="col-lg-1">
<el-button class="gtin-btn">查询</el-button>
</div>
</div>
</div>
<div class="gtin-result">
<div class="gtin-result-tip" style="margin-top:20px">
<img src="../../assets/image/search/gtinIcon.png" />
<div>
<p>9506000140445</p>
<p>此商品条码已经由“Activate Test Account”公司注册</p>
</div>
</div>
<p class="tab-cnt-title" style="margin-top:25px">搜索结果</p>
<p style="font-size: 16px;color:#002C6C">点击企业名称了解更多信息</p>
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop="date"
label="License标识"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="企业名称"
width="180">
</el-table-column>
<el-table-column
prop="city"
label="城市">
</el-table-column>
<el-table-column
prop="address"
label="国家">
</el-table-column>
</el-table>
<el-pagination
background
layout="prev, pager, next"
:total="1000">
</el-pagination>
</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至699之间的前缀码分配给中国物品编码中心使用，通常以这些前缀码开始的厂商识别代码都是由中国物品编码中心负责分配和管理的；以其他前缀码开始的则由境外GS1成员组织负责，一般称为"境外条码"，以下为您提供了境外商品条码信息的查询工具，请根据提示进行相关查询。欲了解GS1分配的前缀码，请点击：
<a href="/search/country" target="_blank" style="color: #5AC8FA;">了解更多 >></a>
</p>
<p style="color: #FF3B30;">2、本查询仅适用于中华人民共和国境外注册的商品条码信息。</p>
</div>
</div>
</div>
</template>
<script>
import validation from "@/views/Search/validation";
import {mapState} from "vuex";
import { GS1_Mark_List, countryListFunc } from "@/utils/constant";
const errorText = {
"1": '没有符合条件的记录！',
"2": '未找到该商品条码信息！',
"10": '厂商识别代码已注销！',
"14": '搜索频率过多！',
}
export default {
mixins: [validation],
data() {
return {
active:'first',
gtinActiveName:'first',
gtinActiveName2:'first',
gtinActiveName3:'first',
collapseActiveName:1,
tableData: [{
date: '2016-05-02',
name: '王小虎',
city:'江苏',
address: 'Belgium'
}, {
date: '2016-05-04',
name: '王小虎',
city:'江苏',
address: 'Belgium'
}, {
date: '2016-05-01',
name: '王小虎',
city:'江苏',
address: 'Belgium'
}, {
date: '2016-05-03',
name: '王小虎',
city:'江苏',
address: 'Belgium'
}],
search: {code: ""},
searchCodeShow: "",
showResult: false,
result: null,
file: '',
GS1_Mark_List: GS1_Mark_List,
countryList: countryListFunc()
};
},
created() {
if (this.$route.query.keyword) {
this.search.code=this.$route.query.keyword
}
},
computed: {
...mapState(["urls"]),
},
mounted(){
this.file = window.location.protocol + '//' + window.location.hostname + ':9091/office/uploadFileResource/'
},
methods: {
// tab切换
changeTab(active){
this.active=active
},
openUrl(url) {
window.open(url, '_blank')
},
openPdf() {
window.open('/全球商品条码查询服务条款.pdf', '_blank')
},
async handleSearch() {
this.errorMsg ='正在查询……'
this.searchCodeShow = this.search.code;
if(this.hasSpecialString(this.searchCodeShow)){
return true
}
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} = searchGlnRes;
console.log(searchGlnRes)
if (returnCode === "0") {
let redirectUrl='https://www.gds.org.cn/#/importList/index?type=importProduct&keyword='+this.search.code
window.open(redirectUrl, '_blank')
} else {
this.showResult = true;
this.errorMsg =
searchGlnRes.returnMsg ||
"您输入的商品条码格式不正确，请确认后重试。";
// this.result = null;
}
this.getCaptcha();
},
},
};
</script>
<style lang="scss">
.search-content {
.banner-box {
width: 100%;
height: auto;
> img {
width: 100%;
height: auto;
cursor: pointer;
}
}
.product-info {
margin-top: -15px;
.left {
.row_ {
display: flex;
align-items: center;
height: 42px;
.cell {
flex: 0 0 100px;
text-align: left;
font-size: 14px;
font-weight: 400;
color: #666666;
}
.value {
flex: 1;
font-size: 14px;
font-weight: 400;
color: #414345;
}
}
}
.right {
}
}
.body1{
padding-top: 0!important;
}
.clo3{
padding-right: 7px!important;
padding-left: 7px!important;
margin-bottom: 15px;
>img{
width: 100%;
}
}
.gln-border{
background: #F0F5FA;
border-radius: 4px;
border: 1px solid #C4D7ED;
padding: 18px;
cursor: pointer;
img{
margin-bottom: 13px;
}
p{
margin: 0 0 6px;
}
.gln-tab-p1{
font-size: 18px;
font-family: 'MicrosoftYaHeiSemibold';
color: #002C6C;
line-height: 24px;
font-weight: 600;
}
.gln-tab-p2{
font-size: 14px;
font-family: 'MicrosoftYaHei';
color: #002C6C;
line-height: 19px;
}
}
.gln-panel{
.active{
background: #002C6C;
background: linear-gradient(-145deg, transparent 20px, #002C6C 0) right;
background-size: 100% 100%;
background-repeat: no-repeat;
border: none;
p{
color: #fff;
}
}
}
.tab-cnt-title{
font-size: 22px;
color: #002C6C;
line-height: 30px;
font-weight: 600;
}
.gtin-cnt{
.gtin-btn{
margin-top:5px;
background:#CD3C0D;
color:#fff;
@media (min-width: 996px) {
margin-left: -31px;
}
@media (max-width: 996px) {
width: 100%;
}
}
.search-num{
margin-top: 16px;
font-size: 15px;
color: #454545;
line-height: 20px;
span{
color: #002C6C;
}
}
.agreeCheck{
margin-top: 24px;
font-size: 14px;
color: #454545;
line-height: 19px;
.el-checkbox{
margin-right: 8px;
.el-checkbox__inner{
display: inline-block;
width: 18px;
height: 18px;
border-radius: 9px;
&::after{
left: 6px;
height: 10px;
}
}
}
span{
color: #00799E;
cursor: pointer;
}
}
}
.gtin-result{
.gtin-result-tip{
padding: 13px 24px;
background: #CCF1DC;
border-radius: 4px;
border-left: 3px solid #238037;
display: flex;
align-items: center;
margin-bottom: 20px;
img{
margin-right: 16px;
}
p{
margin: 0;
color: #238037;
font-size: 15px;
font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
&:first-child{
font-weight: 600;
font-size: 18px;
}
}
}
.el-tabs{
.el-tabs__item{
padding: 0 26px;
font-size: 15px;
}
.is-active{
border-bottom:4px solid #F26335 ;
}
.el-tabs__header{
margin: 0;
}
.el-tabs__content{
border: 1px solid #C5D8EE;
}
}
.commodityInfo{
padding: 30px;
border-bottom: 1px solid #C5D8EE;
.result-info{
font-size: 14px;
p{
margin-bottom: 16px;
}
span:first-child{
display: inline-block;
width: 80px;
text-align: right;
}
span:last-child{
color: #002C6C;
margin-left: 12px;
}
}
}
.hrefInfo2{
p{
span:first-child{
width: 102px!important;
}
}
}
.hrefInfo{
padding: 23px 30px;
>p{
font-size: 22px;
font-family: MicrosoftYaHeiSemibold;
color: #002C6C;
line-height: 30px;
font-weight: 600;
}
.hrefInfoList{
>p{
font-size: 18px;
font-family: MicrosoftYaHeiSemibold;
color: #002C6C;
line-height: 24px;
font-weight: 600;
margin-top: 24px;
}
.hrefInfoList-list{
margin-top: 16px;
margin-bottom: 14px;
p:nth-child(1){
font-size: 14px;
color: #00799E;
line-height: 19px;
span:last-child{
color: #F26335;
margin-left: 15px;
}
}
p:nth-child(2){
font-size: 14px;
color: #454545;
line-height: 19px;
}
}
}
}
}
.gin-cnt-info{
padding: 32px 30px;
>p{
font-size: 22px;
font-weight: 600;
color: #002C6C;
line-height: 30px;
}
.el-collapse{
.el-collapse-item__header{
font-size: 16px;
color: #002C6C;
line-height: 21px;
padding-left: 16px;
}
.is-active{
border-bottom: none;
background: #F0F5FA;
}
.el-collapse-item__wrap{
background: #F0F5FA;
padding-left: 16px;
box-sizing: border-box;
}
ul{
padding: 0;
margin: 0;
li{
list-style: none;
display: inline-block;
width: calc( 100% - 16px);
height: 44px;
line-height: 44px;
background: #fff;
border-bottom: 1px solid #F0F5FA;
p{
font-size: 14px;
span:first-child{
display: inline-block;
width: 50%;
padding-left: 12px;
}
span:last-child{
color: #002C6C;
}
}
}
}
}
}
.tab3{
.el-tabs__active-bar{
width: auto!important;
}
}
.el-table{
margin-top: 14px;
th{
color: #454545;
font-size: 14px;
font-weight: 0;
border-top: 1px solid #696D73;
border-bottom: 1px solid #696D73!important;
&:first-child{
border-left: 1px solid #696D73!important;
}
&:nth-child(4){
border-right: 1px solid #696D73!important;
}
}
td{
font-size: 14px;
color: #454545;
}
.has-gutter{
border: 1px solid #696D73!important;;
}
}
.el-table tr:nth-child(odd){
background: #E5E8EB;
}
.el-pagination.is-background{
text-align: right;
}
.el-pagination{
button{
margin: 0;
}
}
.el-pagination.is-background .btn-prev, .el-pagination.is-background .btn-next, .el-pagination.is-background .el-pager li{
margin: 0;
border-radius:0!important;
background: #E5E8EB;
font-size: 14px;
color: #0E2C6B;
width: 36px;
height: 36px;
line-height: 36px;
border-right: 1px solid #D5E3F2;
font-weight: 0;
}
.el-pagination.is-background .el-pager li:not(.disabled).active{
background: #C4D7ED;
color: #0E2C6B;
}
.search-content .el-pagination.is-background .btn-prev{
border-top-left-radius: 4px!important;
border-bottom-left-radius: 4px!important;
}
}
</style>
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