Skip to content

G
gs1
Commit 0cb6dc32 by 林家欣
Options

feat: 新增图形拼图、数字验证码

parent 6b9d3be8
Showing with 133 additions and 69 deletions
package.json
......@@ -30,6 +30,7 @@
"v-clipboard": "^2.2.2",
"vue": "^2.6.11",
"vue-baidu-map": "^0.21.22",
"vue-puzzle-vcode": "^1.1.9",
"vue-router": "^3.1.6",
"vue-slick-carousel": "^1.0.6",
"vuex": "^3.1.3",
......
src/axios/api.js
// import {
// GET, POSTFORM
// } from "./fetch.js"
import {
GET
} from "./fetch.js"
const Prefix = process.env.NODE_ENV === 'development' ? '/gs1' : '';
/* 公共接口 */
// 首页大轮播图
const getCaptcha = (query = {}) => {
return GET(`${Prefix}/office/captcha.jpg`, query)
}
import home from "./module/home.js"
import business from "./module/business.js"
const api = {
home,
business,
getCaptcha,
}
export default api
\ No newline at end of file
src/utils/utils.js
......@@ -48,4 +48,13 @@ export const groupList = (list, length) => {
});
return pages;
};
\ No newline at end of file
/**
* 获取uuid
*/
export const getUUID = () => {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
return (c === 'x' ? (Math.random() * 16 | 0) : ('r&0x3' | '0x8')).toString(16)
})
}
\ No newline at end of file
src/views/Search/external.vue
......@@ -2,35 +2,35 @@
<div class="search-content">
<div class="title">境外条码信息查询</div>
<div class="body">
<div style="padding-top:20px">
<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"
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"
v-model="search.validate"
placeholder="请输入验证码"
class="w160"
></el-input>
<div class="validate-code">
<img src="../../assets/image/validate.jpg" alt=""/>
<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
>
style="margin-left: 40px"
type="primary"
@click="handleSearch"
>查询
</el-button>
</div>
</el-form-item>
</el-form>
......@@ -42,7 +42,11 @@
<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="row_"
:key="item.key"
v-for="item in productFields"
>
<div class="cell">
{{ item.label }}
</div>
......@@ -56,15 +60,23 @@
<div v-else class="product-info row">
<div class="left col-lg-8">
<div class="row_">
<div class="cell">
商品条码
</div>
<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">
<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>
......@@ -72,18 +84,13 @@
<div class="title">企业信息</div>
<div class="company-info">
<el-table
:data="result.companyInfo"
header-cell-class-name="search-table-hc"
style="width: 100%">
<el-table-column
prop="brand"
label="国际品牌商"
>
:data="result.companyInfo"
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 prop="address" label="国际品牌商地址">
</el-table-column>
</el-table>
</div>
......@@ -96,85 +103,101 @@
<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分配的前缀码，请点击：了解更多
>>
</p>
<p>
2、本查询仅适用于中华人民共和国境外注册的商品条码信息。
</p>
<p>2、本查询仅适用于中华人民共和国境外注册的商品条码信息。</p>
</div>
</div>
</div>
</template>
<script>
import { getUUID } from "@/utils/utils";
export default {
data() {
return {
search: {code: "", validate: ""},
captchaPath: "",
uuid: "",
search: { code: "", validate: "" },
searchCodeShow: "",
showResult: false,
result: null,
productFields: [
{
key: 'id',
label: '商品条码：',
key: "id",
label: "商品条码：",
},
{
key: 'name',
label: '产品名称：',
key: "name",
label: "产品名称：",
},
{
key: 'brand',
label: '品牌：',
key: "brand",
label: "品牌：",
},
{
key: 'classify',
label: '产品分类：',
key: "classify",
label: "产品分类：",
},
{
key: 'standard',
label: '规格：',
key: "standard",
label: "规格：",
},
{
key: 'netContent',
label: '净含量：',
key: "netContent",
label: "净含量：",
},
{
key: 'origin',
label: '产地：',
key: "origin",
label: "产地：",
},
]
],
};
},
created() {
this.getCaptcha();
},
methods: {
// 获取验证码
getCaptcha() {
this.uuid = getUUID();
this.$http
.get(`/gs1/office/captcha.jpg?uuid=${this.uuid}`, {
responseType: "blob",
})
.then((res) => {
this.captchaPath = window.URL.createObjectURL(res.body);
});
},
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: '法国',
id: "1",
name: "法国梦巴黎圣萨蒂黑歌海娜红",
brand: "法国梦巴黎",
classify: "利口酒",
standard: "750ML",
netContent: "750毫升",
origin: "法国",
},
companyInfo: [
{brand: 'CAVES LANGUEDOC ROUSILLON', address: 'ZAC MILLENAIRE'}
]
{ brand: "CAVES LANGUEDOC ROUSILLON", address: "ZAC MILLENAIRE" },
],
};
} else if (this.search.code === "2") {
this.result = {
companyInfo: [
{brand: 'CAVES LANGUEDOC ROUSILLON', address: 'ZAC MILLENAIRE'}
]
}
}else{
{ brand: "CAVES LANGUEDOC ROUSILLON", address: "ZAC MILLENAIRE" },
],
};
} else {
this.result = null;
}
},
......@@ -193,6 +216,7 @@ export default {
> img {
width: 100%;
height: 100%;
cursor: pointer;
}
}
......
src/views/Search/internal.vue
......@@ -39,7 +39,7 @@
</el-form-item>
<el-form-item label="验证码：">
<el-button type="primary" class="w240" icon="gs-guard-icon">
<el-button type="primary" class="w240" icon="gs-guard-icon" @click="handelVerification">
点击此处进行验证
</el-button>
<el-button style="margin-left:40px" type="primary" @click="handleSearchCompany"
......@@ -145,19 +145,25 @@
</p>
</div>
</div>
<Vcode :show="isShowVcode" @success="onSuccess" @close="onClose" />
</div>
</template>
<script>
import Vcode from "vue-puzzle-vcode";
const CODE = 0;
const NAME = 1;
const ADDRESS = 2;
export default {
data() {
return {
CODE,
NAME,
ADDRESS,
isShowVcode: false,
activeName: "first",
company: CODE,
companySearch: {
......@@ -173,7 +179,23 @@ export default {
showResult: false,
};
},
components: {
Vcode,
},
methods: {
// 点击此处进行验证
handelVerification() {
console.log('点击此处进行验证');
this.isShowVcode = true;
},
// 验证结束
onClose() {
this.isShowVcode = false;
},
// 通过验证后
onSuccess() {
this.isShowVcode = false; // 通过验证后，需要手动关闭模态框
},
// 查看按钮
handleCheck(row) {
console.log(row)
......
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