Skip to content

G
gs1
Commit b1b51e19 by Jianli Ou
Options

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

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