Skip to content

G
gs1
Commit b1b51e19 by Jianli Ou
Options

完善新版境外条码查询页面

parent 0e926bd1
Showing with 147 additions and 33 deletions
src/views/Search/external.vue
......@@ -74,7 +74,7 @@
</div>
<p class="search-num">搜索样例：<span>9506000140445</span></p>
<p class="agreeCheck">
<el-checkbox></el-checkbox>我已阅读并同意<span @click="openPdf">《VbG用户使用条款》</span>
<el-checkbox v-model="agreementCheck"></el-checkbox>我已阅读并同意<span @click="openPdf">《VbG用户使用条款》</span>
</p>
</div>
<div v-if="GtinResultData" class="gtin-result">
......@@ -107,34 +107,56 @@
</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 v-if="GtinResultData.links.hasRetailers" class="hrefInfoList">
<p>有零售商</p>
<div v-for="(link, index) in GtinResultData.links.hasRetailers" :key="index" class="hrefInfoList-list">
<p><span @click="openHref(link.href)">{{link.title}}</span><span>{{link.type}}</span></p>
<P>语言：{{link.hreflang}}</P>
</div>
<!-- <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-list">
<p><span>Información del Prod</span><span>HTML</span></p>
<P>语言：de</P>
<div v-if="GtinResultData.links.sustainabilityInfo" class="hrefInfoList">
<p>产品信息页</p>
<div v-for="(link, index) in GtinResultData.links.sustainabilityInfo" :key="index" class="hrefInfoList-list">
<p><span @click="openHref(link.href)">{{link.title}}</span><span>{{link.type}}</span></p>
<P>语言：{{link.hreflang}}</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>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 class="hrefInfoList">
<p>企业网站</p>
<div class="hrefInfoList-list">
<p><span>Información del Prod</span><span>HTML</span></p>
<P>语言：de</P>
<div v-if="GtinResultData.links.productSustainabilityInfo" class="hrefInfoList">
<p>可持续性和回收（不建议使用）</p>
<div v-for="(link, index) in GtinResultData.links.productSustainabilityInfo" :key="index" class="hrefInfoList-list">
<p><span @click="openHref(link.href)">{{link.title}}</span><span>{{link.type}}</span></p>
<P>语言：{{link.hreflang}}</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 v-if="GtinResultData.links.recipeInfo" class="hrefInfoList">
<p>食谱网站</p>
<div v-for="(link, index) in GtinResultData.links.recipeInfo" :key="index" class="hrefInfoList-list">
<p><span @click="openHref(link.href)">{{link.title}}</span><span>{{link.type}}</span></p>
<P>语言：{{link.hreflang}}</P>
</div>
</div>
</div>
......@@ -369,9 +391,28 @@
</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 v-for="(link, index) in glnResultData.links.hasRetailers" :key="index">
<p><span @click="openHref(link.href)" style="color:#00799E; cursor: pointer;">{{link.title}}</span><span style="color:#F26335;margin-left:8px">{{link.type}}</span></p>
<P><span>语言：{{link.hreflang}}</span></P>
</div>
<!-- <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>-->
<p v-if="glnResultData.links.sustainabilityInfo" style="font-size:16px;color:#002C6C;">产品信息页</p>
<div v-for="(link, index) in glnResultData.links.sustainabilityInfo" :key="index">
<p><span @click="openHref(link.href)" style="color:#00799E; cursor: pointer;">{{link.title}}</span><span style="color:#F26335;margin-left:8px">{{link.type}}</span></p>
<P><span>语言：{{link.hreflang}}</span></P>
</div>
<p v-if="glnResultData.links.productSustainabilityInfo" style="font-size:16px;color:#002C6C;">可持续性和回收（不建议使用）</p>
<div v-for="(link, index) in glnResultData.links.productSustainabilityInfo" :key="index">
<p><span @click="openHref(link.href)" style="color:#00799E; cursor: pointer;">{{link.title}}</span><span style="color:#F26335;margin-left:8px">{{link.type}}</span></p>
<P><span>语言：{{link.hreflang}}</span></P>
</div>
<p v-if="glnResultData.links.recipeInfo" style="font-size:16px;color:#002C6C;">食谱网站</p>
<div v-for="(link, index) in glnResultData.links.recipeInfo" :key="index">
<p><span @click="openHref(link.href)" style="color:#00799E; cursor: pointer;">{{link.title}}</span><span style="color:#F26335;margin-left:8px">{{link.type}}</span></p>
<P><span>语言：{{link.hreflang}}</span></P>
</div>
</el-collapse-item>
</el-collapse>
......@@ -550,7 +591,7 @@
</div>
</div>
<p class="tab-cnt-title" style="margin-top:25px">搜索结果</p>
<p style="font-size: 16px;color:#002C6C">点击企业名称了解更多信息</p>
<!-- <p style="font-size: 16px;color:#002C6C">点击企业名称了解更多信息</p>-->
<el-table
:data="tableData"
style="width: 100%">
......@@ -618,16 +659,20 @@ export default {
result: null,
file: '',
errorMsg: '',
GtinInputValue: '09506000134352',
agreementCheck: false,
// GtinInputValue: '09506000134352',
GtinInputValue: '',
GtinResultData: '',
glnInputValue: '9506000140445',
// glnInputValue: '9506000140445',
glnInputValue: '',
glnResultData: '',
gs1Type: '',
gs1InputValue: '',
GS1_Mark_List: GS1_Mark_List,
gs1ResultData: '',
countryCode: '',
licenseeName: 'GS1 Demo Account',
// licenseeName: 'GS1 Demo Account',
licenseeName: '',
streetAddress: '', // 街道地址
postalCode: '', // 邮政编码
addressLocality: '', // 城市名称
......@@ -675,10 +720,18 @@ export default {
openUrl(url) {
window.open(url, '_blank')
},
openHref(href) {
window.open(href, '_blank')
},
openPdf() {
window.open('/全球商品条码查询服务条款.pdf', '_blank')
},
async searchGTIN() {
if (!this.agreementCheck) {
this.GtinResultData = ''
this.errorMsg = '请阅读并同意《VbG用户使用条款》'
return
}
this.GtinResultData = ''
this.errorMsg ='正在查询……'
const params = {
......@@ -689,7 +742,37 @@ export default {
const searchResult = await this.$api.search.searchGtin(params);
const {returnCode, returnMsg, data} = searchResult;
if (returnCode === "0") {
this.GtinResultData = data ? data[0] : ''
if (data) {
data[0].links = {
hasRetailers: '', // 有零售商
sustainabilityInfo: '', // 产品信息页
productSustainabilityInfo: '', // 可持续性和回收（不建议使用）
recipeInfo: '' // 食谱网站
}
Object.keys(data[0].linkset).forEach(item => {
const linkDataStructure = (linkObj) => {
return { href: linkObj.href, hreflang: linkObj.hreflang[0], title: linkObj.title, type: linkObj.type }
}
if (item.indexOf('hasRetailers') >= 0) {
data[0].links.hasRetailers = data[0].linkset[item].map(linkObj => {
return linkDataStructure(linkObj)
})
} else if (item.indexOf('sustainabilityInfo') >= 0) {
data[0].links.sustainabilityInfo = data[0].linkset[item].map(linkObj => {
return linkDataStructure(linkObj)
})
} else if (item.indexOf('productSustainabilityInfo') >= 0) {
data[0].links.productSustainabilityInfo = data[0].linkset[item].map(linkObj => {
return linkDataStructure(linkObj)
})
} else if (item.indexOf('recipeInfo') >= 0) {
data[0].links.recipeInfo = data[0].linkset[item].map(linkObj => {
return linkDataStructure(linkObj)
})
}
})
this.GtinResultData = data[0]
}
!data && (this.errorMsg = '没有查询到相关信息！')
} else {
this.showResult = true;
......@@ -723,8 +806,37 @@ export default {
if (item.glnType === 'DIGITAL_LOCATION') data[0].DIGITAL_LOCATION = item
})
}
data[0].links = {
hasRetailers: '', // 有零售商
sustainabilityInfo: '', // 产品信息页
productSustainabilityInfo: '', // 可持续性和回收（不建议使用）
recipeInfo: '' // 食谱网站
}
if (data[0] && data[0].linkset) {
Object.keys(data[0].linkset[0]).forEach(item => {
const linkDataStructure = (linkObj) => {
return { href: linkObj.href, hreflang: linkObj.hreflang[0], title: linkObj.title, type: linkObj.type }
}
if (item.indexOf('hasRetailers') >= 0) {
data[0].links.hasRetailers = data[0].linkset[0][item].map(linkObj => {
return linkDataStructure(linkObj)
})
} else if (item.indexOf('sustainabilityInfo') >= 0) {
data[0].links.sustainabilityInfo = data[0].linkset[0][item].map(linkObj => {
return linkDataStructure(linkObj)
})
} else if (item.indexOf('productSustainabilityInfo') >= 0) {
data[0].links.productSustainabilityInfo = data[0].linkset[0][item].map(linkObj => {
return linkDataStructure(linkObj)
})
} else if (item.indexOf('recipeInfo') >= 0) {
data[0].links.recipeInfo = data[0].linkset[0][item].map(linkObj => {
return linkDataStructure(linkObj)
})
}
})
}
this.glnResultData = data ? data[0] : ''
console.log(this.glnResultData)
!data && (this.errorMsg = '没有查询到相关信息！')
} else {
this.showResult = true;
......@@ -1074,9 +1186,11 @@ export default {
font-size: 14px;
color: #00799E;
line-height: 19px;
cursor: pointer;
span:last-child{
color: #F26335;
margin-left: 15px;
cursor: default;
}
}
p:nth-child(2){
......
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