<!DOCTYPE html>
|
<html>
|
|
<head>
|
<meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta name="App-Config" content="fullscreen=yes,useHistoryState=yes,transition=yes">
|
<meta content="yes" name="apple-mobile-web-app-capable"><meta content="yes" name="apple-touch-fullscreen">
|
<meta content="telephone=no,email=no" name="format-detection">
|
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
|
<script type="text/javascript" src="https://public.ffquan.cn/lib/jquery-1.12.4.min.js"></script>
|
<script type="text/javascript" src="https://public.ffquan.cn/lib/vue-lazyload.js"></script>
|
<script type="text/javascript" src="https://public.ffquan.cn/lib/swiper/js/swiper.min.js"></script>
|
<script type="text/javascript" src="https://public.ffquan.cn/lib/taobaoCode/taobaoCode.js?v=1.2.1"></script>
|
<script type="text/javascript" src="https://public.ffquan.cn/lib/clipboard.min.js"></script>
|
<script type="text/javascript" src="https://p1static.dataoke.com/web/js/layer/layer.js?t=202104191256"></script>
|
<script type="text/javascript" src="https://img.ushopvip.com/js/uni-webview-js.js"></script>
|
<title>全网比价</title>
|
|
<style>
|
.top-content
|
{
|
width: 100%;
|
position:absolute;
|
top: 0;
|
left: 0;
|
}
|
.mid-content
|
{
|
width: 95%;
|
margin: 0 auto;
|
margin-top: 5.3rem;
|
position:relative;
|
}
|
.mid-content-con
|
{
|
width: 100%;
|
background: #fff;
|
border-radius: .2rem;
|
margin-bottom: 0.2rem;
|
padding-top:.2rem;
|
}
|
.mid-content-list
|
{
|
width: 100%;
|
background: #fff;
|
border-radius: .5rem;
|
height: 30rem;
|
}
|
.content-tip
|
{
|
width: 88%;
|
font-size: 13px;
|
margin: 0 auto;
|
margin-bottom: 0.2rem;
|
font-weight: 500;
|
color: #958d8d;
|
text-align: right;
|
padding-right: 0.1rem;
|
}
|
.copytxt
|
{
|
font-size: 13px;
|
position: absolute;
|
bottom: 0.1rem;
|
right: 0.1rem;
|
color: #958d8d;
|
}
|
.content-txtarea
|
{
|
width: 88%;
|
margin: 0 auto;
|
height: 2.2rem;
|
position: relative;
|
}
|
.txtarea{
|
width: 100%;
|
height: 99%;
|
border: 0px;
|
background: #f5f5f9;
|
resize:none;
|
}
|
.mid-button-content
|
{
|
display:flex;
|
flex-direction: row;
|
width: 100%;
|
justify-content: center;
|
margin-top: 0.2rem;
|
}
|
.mid-button-content-img
|
{
|
width: 83%;
|
}
|
.cont-title
|
{
|
margin: 0 0 0.2rem 0.2rem;
|
font-weight: 600;
|
font-size: .3rem;
|
}
|
.mid-content-none
|
{
|
width: 100%;
|
width: 100%;
|
text-align: center;
|
margin: 0 auto;
|
line-height: 1.2rem;
|
color: #a69b9b;
|
font-size: 14px;
|
}
|
|
.ulist > a {
|
display: block;
|
text-decoration: none;
|
margin-bottom: 0.15rem;
|
}
|
|
.ulist {
|
display: block;
|
}
|
.detail___3ZQFW {
|
background-color: #fff;
|
height: 2.6rem;
|
border-radius: .16rem;
|
padding: .1rem;
|
position: relative;
|
box-sizing: border-box;
|
}
|
.picture___r4a1j {
|
height: 2.4rem;
|
width: 2.4rem;
|
border-radius: .1rem;
|
position: absolute;
|
left: .1rem;
|
top: .1rem;
|
}
|
.choiceInfo___3ZuEa {
|
-webkit-justify-content: space-between;
|
-ms-flex-pack: justify;
|
justify-content: space-between;
|
padding-left: 2.5rem;
|
|
width: 100%;
|
overflow: hidden;
|
-webkit-align-items: flex-start;
|
-ms-flex-align: start;
|
align-items: flex-start;
|
position: relative;
|
display: flex;
|
flex-wrap: nowrap;
|
flex-direction: column;
|
}
|
|
.other___2Mv8Q h2 span {
|
width: calc(100vw - 3.6rem);
|
overflow: hidden;
|
white-space: nowrap;
|
text-overflow: ellipsis;
|
}
|
|
.other___2Mv8Q h2 {
|
justify-content: flex-start;
|
padding: 0;
|
margin: 0;
|
height: .85rem;
|
font-size: .28rem;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
line-height: .4rem;
|
color: #333;
|
display: flex;
|
flex-direction: row;
|
flex-wrap: nowrap;
|
width: 100%;
|
}
|
|
.shoplabel___1_Nv0 img {
|
margin-right: .05rem;
|
display: block;
|
height: 100%;
|
font-size: 100%;
|
font: inherit;
|
vertical-align: baseline;
|
}
|
|
.shoplabel___1_Nv0 {
|
height: .26rem;
|
display:inline-block;
|
position: relative;
|
top: .05rem;
|
}
|
|
.coupon___2SVZi span {
|
display: inline-block;
|
font-size: .18rem;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #ff5351;
|
line-height: .20rem;
|
padding: .02rem .04rem;
|
background: #fff;
|
border-radius: .02rem 0 0 .02rem;
|
text-align: center;
|
margin-right: .06rem;
|
}
|
|
.coupon___2SVZi {
|
margin-top: 3px;
|
height: .28rem;
|
background: linear-gradient(
|
90deg, #ff8873, #ff4f4f);
|
border-radius: .04rem;
|
display: inline-block;
|
line-height: .28rem;
|
padding: 0 .06rem 0 .02rem;
|
font-size: .19rem;
|
font-family: PingFangSC-Regular, PingFang SC;
|
color: #fff;
|
display: -webkit-flex;
|
display: -ms-flexbox;
|
display: flex;
|
-webkit-align-items: center;
|
-ms-flex-align: center;
|
align-items: center;
|
width: -webkit-max-content;
|
width: -moz-max-content;
|
width: max-content;
|
}
|
|
.price___dfbCD u {
|
text-decoration: line-through;
|
width: .64rem;
|
font-size: .2rem;
|
color: #a7a7a7;
|
}
|
|
.price___dfbCD span {
|
font-size: .32rem;
|
line-height: .34rem;
|
padding: 0 .08rem 0 .04rem;
|
font-weight: 700;
|
}
|
|
.price___dfbCD {
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 500;
|
color: #fe3738;
|
font-size: .22rem;
|
justify-content: flex-start;
|
height: .34rem;
|
margin: .04rem 0 .1rem;
|
-webkit-align-items: baseline;
|
-ms-flex-align: baseline;
|
align-items: baseline;
|
}
|
|
.detail___3ZQFW .choiceInfo___3ZuEa .operation___3KazI button {
|
border: none;
|
width: 1.36rem;
|
height: .4rem;
|
line-height: .4rem;
|
background: linear-gradient(
|
270deg, #F7AD38, #F7AD38);
|
border-radius: .2rem;
|
text-align: center;
|
font-size: .22rem;
|
font-family: PingFangSC-Medium, PingFang SC;
|
font-weight: 500;
|
color: #fff;
|
line-height: .32rem;
|
}
|
.detail___3ZQFW .choiceInfo___3ZuEa .price___dfbCD {
|
|
-webkit-justify-content: flex-start;
|
-ms-flex-pack: start;
|
justify-content: flex-start;
|
-webkit-align-items: baseline;
|
-ms-flex-align: baseline;
|
align-items: baseline;
|
font-size: .24rem;
|
font-family: PingFangSC-Medium, PingFang SC;
|
font-weight: 500;
|
color: #fe3738;
|
line-height: .54rem;
|
}
|
|
.detail___3ZQFW .choiceInfo___3ZuEa .operation___3KazI {
|
position: absolute;
|
right: .1rem;
|
bottom: .06rem;
|
display: flex;
|
flex-direction: column;
|
flex-wrap: nowrap;
|
}
|
|
* {
|
box-sizing: border-box;
|
}
|
.loading{
|
display: flex;
|
position: fixed;
|
width: 100vw;
|
height: 100vh;
|
background: rgb(0 0 0 / 67%);
|
top: 0;
|
left: 0;
|
z-index: 10;
|
justify-content: center;
|
align-items: center;
|
font-size: .35rem;
|
color: #fff;
|
}
|
.showshop
|
{
|
font-size: .26rem;
|
color: #787070;
|
}
|
.goodtitle
|
{
|
overflow: hidden;
|
text-overflow: ellipsis;
|
display: -webkit-box;
|
-webkit-line-clamp: 2;
|
-webkit-box-orient: vertical;
|
}
|
.price_font
|
{
|
font-size: .26rem;
|
color: #787070;
|
}
|
.plat-div
|
{
|
font-size: 0.28rem;
|
padding: 0.2rem;
|
background: #fff;
|
margin-bottom: 0.2rem;
|
display: flex;
|
border-radius: .16rem;
|
align-items: center;
|
}
|
.plat-ite
|
{
|
width: 20%;
|
text-align: center;
|
margin-right: 0.1rem;
|
border-radius: 0.1rem;
|
color: #fff;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
background: #F79633;
|
padding: 0.1rem;
|
}
|
.plat-unite
|
{
|
background: #fff;
|
border:1px solid #F79633;
|
color:#F79633;
|
|
width: 20%;
|
text-align: center;
|
margin-right: 0.1rem;
|
border-radius: 0.1rem;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
padding: 0.1rem;
|
}
|
</style>
|
</head>
|
|
<body style="background: #f5f5f9;">
|
<div id="comprice">
|
<div v-if="loading" class="loading">加载中...</div>
|
<image class="top-content" src="https://yanfeiobpub.obs.cn-east-3.myhuaweicloud.com/dfg/compareprice_topimg.png"></image>
|
<div class="main-content">
|
<div class="mid-content">
|
<div class="mid-content-con">
|
<div class="content-tip" v-on:click="clear()">
|
清空
|
</div>
|
<div class="content-txtarea">
|
<textarea enterkeyhint="search" onkeydown="onTextareaKeyDown()" class="txtarea" v-model="txtareatxt" :placeholder='txtplaceholder'></textarea>
|
<span class="copytxt" v-on:click="fromcopy()">粘贴</span>
|
</div>
|
<div class="mid-button-content">
|
<div class="mid-button-content-img" v-on:click="search()">
|
<image style="width: 100%;" src="https://yanfeiobpub.obs.cn-east-3.myhuaweicloud.com/dfg/compareprice_search.png"></image>
|
</div>
|
</div>
|
</div>
|
<div class="cont-title">
|
{{showTxt}}
|
</div>
|
<div v-if="goodsItem.length==0" class="mid-content-none">
|
暂无数据~
|
</div>
|
<div v-else class="ulist">
|
<div class="plat-div" v-if="issearch">
|
<span>平台：</span>
|
<div v-on:click="changeplat(item)" :class="item.choose?'plat-ite':'plat-unite'" v-for="item in plat">
|
<span class="plat-span" v-if="item.choose">
|
√{{item.platname}}
|
</span>
|
<span class="plat-span" v-else>
|
{{item.platname}}
|
</span>
|
</div>
|
|
</div>
|
<a v-for="g in goodsItem" :key="g.id" v-on:click="handleCdetailFavorite(g)">
|
<div class="detail___3ZQFW">
|
<img :src="g.mainPic"
|
class="fadeIn picture___r4a1j">
|
<div class="choiceInfo___3ZuEa">
|
<div class="other___2Mv8Q">
|
<h2>
|
<!-- <div class="shoplabel___1_Nv0"><img
|
:src="g.labelImg">
|
</div> -->
|
<div class="goodtitle">
|
<img class="shoplabel___1_Nv0" :src="g.labelImg">
|
{{g.title}}</div></h2>
|
<div v-if="g.couponPrice" class="coupon___2SVZi" style="float: left; margin-right:10px"><span>券</span>{{g.couponPrice}}元</div>
|
<div class="coupon___2SVZi" style="background: #A429F3;"><span style="color: #A429F3;">返</span>{{g.fanli}}元</div>
|
|
</div>
|
<div class="price___dfbCD"><span class="price_font" style="font-size: .26rem; font-weight: 500;">到手价</span><span style="padding: 0;">¥</span><span style="padding: 0 .08rem 0 0;">{{(g.actualPrice-g.fanli).toFixed(2)}}</span><u v-if="g.sourceType=='tb'||g.sourceType=='tm'" style="text-decoration:line-through">¥{{g.originalPrice}}</u></div>
|
<!-- <div class="operation___3KazI">
|
<button>立即购买</button>
|
</div> -->
|
<div class="showshop">月销{{g.monthSales}}</div>
|
<div class="showshop">{{g.shopName}}</div>
|
</div>
|
</div>
|
</a>
|
</div>
|
|
</div>
|
</div>
|
|
</div>
|
</body>
|
|
</html>
|
<script type="text/javascript" src="./js/vue.js"></script>
|
<script>
|
|
(function () {
|
var size1=document.body.clientWidth;
|
var size2=document.documentElement.clientWidth;
|
var size=size1<=0?size2:size1;
|
size=size<=0?400:size;
|
document.documentElement.style.fontSize = (size > 750 ? 750 : size) / 7.5 + 'px';
|
})();
|
function scanCode(str)
|
{
|
app.copytxt(str);
|
}
|
function likeDataGet(data)
|
{
|
app.likeDataGet(data);
|
}
|
|
function onTextareaKeyDown()
|
{
|
if (event.keyCode == 13)
|
{
|
app.search();
|
document.activeElement.blur();
|
}
|
|
}
|
Vue.use(VueLazyload, {
|
preLoad: 1.3,//
|
error: 'https://sr.ffquan.cn/cms_pic/20200622/bro7s7f6vrkd3jat4ujg0.png',
|
loading: 'https://sr.ffquan.cn/cms_pic/20200612/brhjkf76vrkcrfpi79eg0.png',
|
attempt: 1
|
})
|
var app= new Vue({
|
el: '#comprice',
|
data:{
|
//posturl:'http://dfg.shop.com',
|
// posturl:'http://appapitest.ushopvip.com',
|
//posturl:'http://dfgapp.ushopvip.com',
|
goodsItem:[],
|
loading:false,
|
plat:[
|
{
|
'platname':'淘宝',
|
'plat':'tb',
|
'choose':true
|
},
|
{
|
'platname':'京东',
|
'plat':'jd',
|
'choose':true
|
},
|
{
|
'platname':'抖音',
|
'plat':'dy',
|
'choose':true
|
},
|
{
|
'platname':'拼多多',
|
'plat':'pdd',
|
'choose':true
|
},
|
],
|
txtareatxt:'',
|
issearch:false,
|
showTxt:'猜你喜欢',
|
txtplaceholder:'1、支持淘宝、天猫、京东、抖音、拼多多等平台\r\n2、请粘贴您需要转换的分享文案/链接和口令/商品链接;不支持券链接'
|
},
|
methods:{
|
changeplat:function(item)
|
{
|
var index=this.plat.findIndex(i=>i.plat==item.plat);
|
item.choose=!item.choose;
|
this.plat[index]=item;
|
this.search();
|
},
|
//查询
|
search:function()
|
{
|
if(this.txtareatxt=='')
|
{
|
return;
|
}
|
this.showTxt="查询结果";
|
this.goodsItem=[];
|
var that = this;
|
this.loading = true
|
var postData={
|
content:that.txtareatxt
|
};
|
//查看不看的平台
|
var cancelPlat=this.plat.filter(i=>!i.choose);
|
if(cancelPlat&&cancelPlat.length>0)
|
{
|
for(var i=0;i<cancelPlat.length;i++)
|
{
|
switch(cancelPlat[i].plat)
|
{
|
case "tb":
|
postData.exclude_tb=1;
|
break;
|
case "jd":
|
postData.exclude_jd=1;
|
break;
|
case "pdd":
|
postData.exclude_pdd=1;
|
break;
|
case "dy":
|
postData.exclude_dy=1;
|
break;
|
}
|
}
|
}
|
$.ajax({
|
headers:{
|
"token":this.getUrlPar("token")
|
},
|
url:'/api/taoke/compare_good',
|
type:"post",
|
dataType:"json",
|
data:postData
|
}).done(function(res){
|
that.loading = false;
|
that.issearch=true;
|
if(res.code == 0){
|
that.goodsItem=res.data.list;
|
}
|
})
|
|
},
|
Infoformat: function(info){
|
info = info.replace(/\%/g,"%25")
|
info = info.replace(/\#/g,"%23")
|
info = info.replace(/\&/g,"%26")
|
info = info.replace(/\?/g,"%3F")
|
return info;
|
},
|
handleCdetailFavorite:function(item)
|
{
|
switch(item.sourceType)
|
{
|
case "tb":
|
case "tm":
|
uni.navigateTo({
|
url: '/pages/goods/goodsDetail?id=' + item.goodsId+'&frompage=compareprice'
|
});
|
break;
|
default:
|
var itemsStr=this.Infoformat(JSON.stringify(item));
|
uni.navigateTo({
|
url: '/pages/goods/goodsDetail?sourcefrom=compareprice&info=' + itemsStr+'&frompage=compareprice'
|
});
|
break;
|
}
|
},
|
likeDataGet:function(postData)
|
{
|
var _this=this;
|
$.ajax({
|
headers:{
|
"token":this.getUrlPar("token")
|
},
|
url:'/api/taoke/get_goods_things',
|
type:"post",
|
dataType:"json",
|
async: false,
|
data:{
|
deviceType:postData.postData,
|
deviceValue:postData.deviceValue,
|
pageId:1,
|
pageSize:10,
|
type:1
|
}
|
}).done(function(res){
|
_this.goodsItem=res.data.list;
|
console.log(res);
|
})
|
},
|
getLikeGoods:function()
|
{
|
uni.postMessage({
|
data: {
|
action: 'getlike'
|
}
|
})
|
},
|
clear:function()
|
{
|
this.txtareatxt='';
|
},
|
copytxt(str)
|
{
|
if(str&&str.data&&str.data.length>0)
|
{
|
this.txtareatxt=str.data;
|
}
|
},
|
fromcopy:function()
|
{
|
uni.postMessage({
|
data: {
|
action: 'copy'
|
}
|
})
|
},
|
getUrlPar:function(name)
|
{
|
var reg=new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
|
var r=window.location.search.substr(1).match(reg);
|
if(r !=null)return unescape(r[2]);
|
return null;
|
},
|
},
|
mounted:function(){
|
/* var postData={
|
postData:'OAID',
|
deviceValue:''
|
};
|
this.likeDataGet(postData); */
|
|
|
var that=this;
|
document.addEventListener('UniAppJSBridgeReady', function() {
|
that.getLikeGoods();
|
});
|
}
|
})
|
</script>
|
