<template>
|
<div class="product" :class="{ pd: !flag }">
|
<img class="banner" v-if="flag" src="../../assets/images/product/banner.png" alt="" />
|
<div class="img_box sure" v-if="flag && product">
|
<img class="img" src="../../assets/images/product/sure.png" alt="" />
|
<div class="t">
|
查询成功!
|
</div>
|
</div>
|
<div class="content mr">
|
<div class="scanCount" v-if="flag && product">
|
第
|
<div class="count">{{ product.scanCount }}</div>
|
次查询
|
</div>
|
<template v-if="flag">
|
<div class="title title_p">商品信息</div>
|
<ul v-if="product">
|
<li class="item-style">
|
<label class="label">商品名称：</label>
|
<span class="text">{{ product.orderItems.spuName }}</span>
|
</li>
|
<template v-if="propMetas">
|
<li class="item-style" v-for="item in propMetas" :key="item.propName">
|
<label class="label">{{ item.propName }}：</label>
|
<span class="text">{{ item.propValueName }}{{ item.propUnit }}</span>
|
</li>
|
</template>
|
<li class="item-style">
|
<label class="label">鉴别编码：</label>
|
<span class="text codeId">{{ product.codeId}}</span>
|
</li>
|
<li class="item-style">
|
<label class="label">首次查询时间：</label>
|
<span class="text">{{ product.firstScanTime }}</span>
|
</li>
|
<li class="item-style">
|
<label class="label">订单编号：</label>
|
<span class="text">{{ product.orderId }}</span>
|
</li>
|
<li class="item-style">
|
<label class="label">下单时间：</label>
|
<span class="text">{{ product.submitTime}}</span>
|
</li>
|
<li class="item-style">
|
<label class="label">物流编号：</label>
|
<span class="text">{{ product.logisticsId}}</span>
|
</li>
|
<li class="item-style">
|
<label class="label">公司名称：</label>
|
<span class="text">{{ product.companyName }}</span>
|
</li>
|
<li class="item-style">
|
<label class="label">生产地址：</label>
|
<span class="text">{{ product.prodtAddress }}</span>
|
</li>
|
<li class="item-style">
|
<label class="label">服务电话：</label>
|
<span class="text">{{ product.serviceLine }}</span>
|
</li>
|
</ul>
|
<div class="noData" v-else>{{ msg }}</div>
|
</template>
|
<div class="container" v-else>
|
<div class="title">查询结果</div>
|
<div class="msg" :style="{ height: height }">
|
<div class="img_box">
|
<img class="img" src="../../assets/images/product/error.png" alt="" />
|
<div class="t">查询失败</div>
|
</div>
|
<div>该二维码不存在</div>
|
<!-- 非五粮液原厂商品，请谨慎购买 -->
|
</div>
|
</div>
|
</div>
|
<!-- <div class="scan-btn" @click="scanClick">
|
<img class="scan-icon" src="../../assets/images/product/scan-icon.png" alt="">
|
扫一扫查防伪
|
</div> -->
|
<div class="msg" v-if="flag">
|
提示：若首次购买扫码查询次数大于1，请谨慎购买。
|
</div>
|
<!-- <div class="fixed-msg" v-if="flag && (!msg || msg === '努力加载中...')">
|
该产品为原厂正品
|
</div> -->
|
</div>
|
</template>
|
<script>
|
import {
|
getWxSignature,
|
scanVerify,
|
scanVerifyInfoAdd
|
} from '@/api/oauth/index'
|
import axios from 'axios'
|
const wx = require('weixin-js-sdk')
|
export default {
|
name: 'product',
|
data() {
|
return {
|
product: null,
|
flag: true,
|
msg: '努力加载中...',
|
propMetas: null
|
}
|
},
|
created() {
|
if (this.$route.query.uuid) {
|
this._scanVerify()
|
const ua = navigator.userAgent.toLowerCase()
|
const isWeixin = ua.indexOf('micromessenger') !== -1
|
if (isWeixin) {
|
this._getWxSignature()
|
}
|
}
|
},
|
computed: {
|
height() {
|
if (!this.flag) {
|
return window.screen.height - 100 + 'px'
|
}
|
return 'auto'
|
}
|
},
|
methods: {
|
async _scanVerify() {
|
try {
|
const res = await scanVerify({
|
uuid: this.$route.query.uuid
|
})
|
if (res.code === '0') {
|
this.flag = res.data.boolState
|
this.product = res.data
|
if (this.product.orderItems.propMetas) {
|
this.propMetas = JSON.parse(this.product.orderItems.propMetas)
|
}
|
} else {
|
this.flag = false
|
}
|
} catch (error) {
|
this.msg = error
|
}
|
},
|
loadScript(url) {
|
return new Promise((resolve, reject) => {
|
const script = document.createElement('script')
|
script.src = url
|
script.onload = resolve
|
script.onerror = reject
|
document.head.appendChild(script)
|
})
|
},
|
async _getWxSignature() {
|
const res = await getWxSignature({
|
url: encodeURIComponent(window.location.href.split('#')[0])
|
})
|
if (res.code === '0') {
|
this.wxscan(res.data)
|
}
|
},
|
async scanClick() {
|
const ua = navigator.userAgent.toLowerCase()
|
const isWeixin = ua.indexOf('micromessenger') !== -1
|
if (isWeixin) {
|
// this._getWxSignature()
|
wx.scanQRCode({
|
needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
|
scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码，默认二者都有
|
success: res => {
|
var result = res.resultStr // 当needResult 为 1 时，扫码返回的结果
|
const flag = result.indexOf('//app.wlyxls.com') > -1
|
if (flag) {
|
window.location.replace(result)
|
} else {
|
setTimeout(() => {
|
this.$alert(result, '检测到以下文本')
|
}, 600)
|
}
|
}
|
})
|
} else {
|
await this.loadScript(
|
'https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js'
|
)
|
/* eslint-disable */
|
document.addEventListener('UniAppJSBridgeReady', function () {
|
uni.postMessage({
|
data: {
|
action: 'message'
|
}
|
})
|
})
|
/* eslint-enable */
|
}
|
},
|
wxscan(wxSignature) {
|
const _this = this
|
wx.config({
|
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
|
appId: wxSignature.appId, // 必填，公众号的唯一标识
|
timestamp: wxSignature.timestamp, // 必填，生成签名的时间戳
|
nonceStr: wxSignature.nonceStr, // 必填，生成签名的随机串
|
signature: wxSignature.signature, // 必填，签名
|
jsApiList: ['scanQRCode', 'getLocation'] // 必填，需要使用的JS接口列表
|
})
|
wx.ready(function () {
|
// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
|
wx.getLocation({
|
type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
|
success: function (res) {
|
axios
|
.get(
|
`https://restapi.amap.com/v3/geocode/regeo?key=e7db0357f03c05b67c4a0e0297b02dbc&&location=${res.longitude},${res.latitude}`
|
)
|
.then(r => {
|
scanVerifyInfoAdd({
|
uuid: _this.$route.query.uuid,
|
scanAddress: r.data.regeocode.formatted_address
|
})
|
})
|
}
|
})
|
})
|
}
|
}
|
}
|
</script>
|
<style scoped lang="stylus">
|
.product {
|
padding-bottom: 30px;
|
|
.img_box {
|
.img {
|
width: 140px;
|
height: 140px;
|
}
|
|
.t {
|
font-size: 48px;
|
font-weight: 600;
|
color: #333333;
|
margin: 30px 0 60px;
|
}
|
|
&.sure {
|
text-align: center;
|
width: 711px;
|
background: #FFFFFF;
|
border-radius: 20px;
|
padding: 52px 0 60px;
|
margin: 30px auto;
|
|
.t {
|
margin-bottom: 0;
|
}
|
}
|
}
|
|
.banner {
|
width: 100%;
|
}
|
|
.title {
|
margin: 20px;
|
font-size: 32px;
|
font-weight: 600;
|
color: #333333;
|
|
&.title_p {
|
margin: 20px 0 40px 0;
|
}
|
}
|
|
.noData {
|
margin: 40px 0;
|
text-align: center;
|
}
|
|
.msg {
|
font-size: 24px;
|
font-weight: 400;
|
color: #FF4615;
|
margin: 30px 20px 0;
|
}
|
|
.scanCount {
|
text-align: center;
|
margin: 20px auto 30px;
|
|
.count {
|
display: inline-block;
|
text-align: center;
|
font-size: 36px;
|
font-weight: 500;
|
color: #A01E18;
|
margin: 0 20px;
|
}
|
}
|
|
.content {
|
background: white;
|
padding: 18px 20px;
|
box-sizing: border-box;
|
margin-bottom: 20px;
|
border-radius: 20px;
|
|
&.mr {
|
margin: 30px 20px;
|
}
|
|
.item-style {
|
font-size: 28px;
|
font-weight: 400;
|
margin-bottom: 40px;
|
vertical-align: top;
|
|
&:last-child {
|
margin-bottom: 0;
|
}
|
|
.label {
|
color: #666;
|
display: inline-block;
|
line-height: 1.8;
|
}
|
|
.text {
|
color: #333333;
|
// flex: 1;
|
display: inline-block;
|
line-height: 1.8;
|
|
&.codeId {
|
width: 530px;
|
word-wrap: break-word;
|
vertical-align: top;
|
}
|
}
|
}
|
}
|
|
.scan-btn {
|
width: 710px;
|
height: 88px;
|
background: linear-gradient(270deg, #FB5B6D 0%, #FF4309 100%);
|
border-radius: 10px;
|
margin: 0 20px 30px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
font-size: 28px;
|
font-weight: 400;
|
color: white;
|
|
.scan-icon {
|
width: 44px;
|
height: 44px;
|
margin-right: 10px;
|
}
|
}
|
|
.fixed-msg {
|
position: fixed;
|
bottom: 0;
|
left: 0;
|
width: 100%;
|
height: 80px;
|
background: #A01E18;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-size: 24px;
|
font-weight: 400;
|
color: #FFFFFF;
|
}
|
|
.container {
|
.msg {
|
color: #A01E18;
|
font-size: 32px;
|
font-weight: 400;
|
text-align: center;
|
height: 500px;
|
display: flex;
|
align-items: center;
|
flex-direction: column;
|
justify-content: center;
|
}
|
}
|
}
|
</style>
|
<style lang="stylus">
|
body {
|
background: #f2f2f2;
|
}
|
</style>
|
