Skip to content

G
gs1
Commit a5951d30 by Tang
Options

feat: 缩短码查询优化

parent 6d9ddc53
Showing with 141 additions and 51 deletions
src/views/Search/internal.vue
......@@ -14,7 +14,7 @@
<el-form
label-position="left"
label-width="180px"
style="margin-top:50px"
style="margin-top:40px"
:model="companySearch"
>
<el-form-item label="境内商品条码信息查询：">
......@@ -55,7 +55,7 @@
<el-form
label-position="left"
label-width="180px"
style="margin-top:50px"
style="margin-top:20px"
:model="productSearch"
>
<el-form-item label="境内商品条码信息查询：">
......
src/views/Search/shortcode.vue
......@@ -2,62 +2,115 @@
<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-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="search.validate"
placeholder="请输入验证码"
class="w160"
></el-input>
<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>
<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>
<el-button
style="margin-left:40px"
type="primary"
@click="handleSearchProduct"
>查询</el-button
>
</div>
</el-form-item>
</el-form>
</el-tab-pane>
<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>
<el-tab-pane label="查询厂商信息" name="second">
<div style="padding-top:20px">
<el-radio-group v-model="company">
<el-radio :label="NAME">根据厂商名称查询</el-radio>
<el-radio :label="ADDRESS">根据厂商地址查询</el-radio>
</el-radio-group>
<el-form
label-position="left"
label-width="180px"
style="margin-top:40px"
:model="companySearch"
>
<el-form-item label="缩短码查询：">
<el-input
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"
></el-input>
</el-form-item>
<el-form-item label="验证码：">
<div class="y-center">
<el-input
v-model="companySearch.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="handleSearchCompany"
>查询</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>
</template>
<span v-else>没有符合条件的记录！</span>
</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>
<img src="./img/query-short-code.png" align="right" alt="" />
<p>
2、本查询仅适用于中华人民共和国境外注册的商品条码信息。
1、缩短码是由7位商品代码和1位校验码构成的8位数字的条码，只有当标准码尺寸超过总印刷面积的25％时，才允许申报。请根据下列提示进行相关查询。
</p>
</div>
</div>
......@@ -65,22 +118,58 @@
</template>
<script>
const NAME = 1;
const ADDRESS = 2;
export default {
data() {
return {
search: { code: "", validate: "" },
NAME,
ADDRESS,
activeName: "first",
company: NAME,
companySearch: {
validate: "",
code: "",
address: "",
},
productSearch: {
code: "",
validate: ""
},
searchCodeShow: "",
showResult: false,
result: null,
};
},
methods: {
handleSearch() {
this.searchCodeShow = this.search.code;
this.showResult = true;
if (this.search.code === "1") {
handleSearchProduct() {
this.searchCodeShow = this.productSearch.code;
if (this.productSearch.code === "1") {
this.result = {};
}else{
this.result = null;
}
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: '北京阿里巴巴食品有限公司', 状态: "已注销"},
]
}
} else {
this.searchCodeShow = this.companySearch.address;
}
this.showResult = true;
},
},
};
......
src/views/Search/style/common.scss
......@@ -41,6 +41,7 @@
margin-top: 29px;
font-size: 14px;
font-weight: 400;
overflow: hidden;
p + p {
margin-top: 30px;
......
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