<!DOCTYPE html>
|
<html lang="zh-CN">
|
|
<head>
|
<meta charset="utf-8">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
|
<meta name="screen-orientation" content="portrait">
|
<meta name="x5-orientation" content="portrait">
|
<meta name="full-screen" content="yes">
|
<meta name="x5-fullscreen" content="true">
|
<meta name="browsermode" content="application">
|
<meta name="x5-page-mode" content="app">
|
<meta name="msapplication-tap-highlight" content="no">
|
<meta content="telephone=no" name="format-detection">
|
<title>红包特价专场</title>
|
<link rel="stylesheet" href="//at.alicdn.com/t/font_1534407_5zmyvxx3vxs.css">
|
<script type="text/javascript" src="https://img.ushopvip.com/js/uni-webview-js.js"></script>
|
<script>
|
document.write("<link rel=\"stylesheet\" href=\"https://img.bc.haodanku.com/cms/signin.css?t=" + (Date.now() - Date.now() % (60 * 1000 * 30)) + "\"/>");
|
</script>
|
<style>
|
.box
|
{
|
position:absolute;
|
width: 100%;
|
height: 100%;
|
background: url(https://yanfeiobpub.obs.cn-east-3.myhuaweicloud.com/dfg/h5loading.gif) no-repeat fixed top;
|
background-size: 70px 70px;
|
}
|
.list{
|
position: relative;
|
top: 0;
|
width: 100%;
|
}
|
</style>
|
</head>
|
|
<body>
|
<div class="box">
|
<div class="list">
|
<div id="app" style="background-color:#F10F04;padding-top:0.5rem" v-cloak>
|
<template v-if="isexplain && issource">
|
<div class="main">
|
<!--<div class="banenr" v-on:click="openDirect">
|
<img src="http://img.bc.haodanku.com/cms/1627984833" alt="">
|
</div>-->
|
<div class="step">
|
<img src="https://img.bc.haodanku.com/cms/1629341253" alt="">
|
<div class="step-content">
|
<div class="title">玩法概况</div>
|
<ul>
|
<li v-for="(item,index) in help_info">
|
<span class="top-num">{{index + 1}}</span>
|
<span class="text">{{item}}</span>
|
</li>
|
</ul>
|
<div class="btn-block">
|
<div class="btn to-sign-in" v-on:click="toSignIn"><span>前往签到</span> <i class="iconfont hdk-xiangyou"></i>
|
</div>
|
<div class="btn view-direct" v-on:click="openDirect"><span>查看图文教程</span> <i
|
class="iconfont hdk-xiangyou"></i></div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="list-wrapper">
|
<!--<h6>签到红包抵扣专区</h6>-->
|
|
<div class="newtop">
|
<div class="search">
|
<div class="search-box">
|
<i class="search-icon"></i>
|
<input type="text" v-model="keyword" v-on:blur="myblur" v-on:focus="myfocus"
|
v-on:keyup.enter="handleSearch"
|
placeholder="输入商品名称">
|
</div>
|
<span class="search-btn" v-on:click="handleSearch">搜索</span>
|
</div>
|
<div class="sort">
|
<ul class="sort-list">
|
<li v-for="item in fristOrderSort" v-bind:class="{'sort-active': item.number == sortNumber}"
|
v-on:click="handleSort(item)">
|
{{ item.name }}
|
<span v-show="item.min !== item.max">
|
<i v-bind:class="{'arrow-active': item.min == sortId}"></i>
|
<i v-bind:class="{'arrow-active': item.max == sortId}"></i>
|
</span>
|
</li>
|
</ul>
|
</div>
|
</div>
|
|
<ul class="shoplist contscore" v-if="fristOrderItems.length>0">
|
<li v-for="(item,index) in fristOrderItems">
|
<img class="shop-img" v-lazy="item.itempic" v-if="item.itempic">
|
<img class="shop-img" src="http://img.bc.haodanku.com/haodanku-activity/1596092443" v-else>
|
<div class="shop-box" v-bind:class="!item.couponurl?'active':''">
|
<p class="shop-title">{{item.itemshorttitle}}</p>
|
<div class="shop-tips">
|
<img src="http://img.bc.haodanku.com/haodanku/1613978202">
|
<p>领取签到红包可再叠加抵扣！</p>
|
</div>
|
<div class="shop-tips row-2">
|
<img src="http://img.bc.haodanku.com/cms/1627703910">
|
<p>店铺：{{item.shopname}}</p>
|
</div>
|
<div>
|
<div class="ticket" v-if="item.couponurl"><span class="name" style="height: 0.3rem;">券</span><span
|
class="value" style="height: 0.3rem;">￥{{item.couponmoney}}</span></div>
|
<div class="ticket" v-if="item.couponurl"><span class="name" style="height: 0.3rem;background:linear-gradient(180deg,#b21db6,#ad25d1)">返</span><span
|
class="value" style="border:1px solid #b817ce;color:#b817ce;height: 0.3rem;">￥{{item.fanli}}</span></div>
|
</div>
|
|
<div class="shop-b">
|
<div class="shop-b-l">
|
<p class="shop-b-m"><i>券后价</i>￥{{parseFloat(item.itemendprice)}}</p>
|
<p class="shop-b-label">￥{{parseFloat(item.itemprice)}}</p>
|
</div>
|
</div>
|
|
<span class="shop-btn shop-coupon" v-on:click="getTaocode(item,true)" v-if="item.couponurl">立即领券</span>
|
<span class="shop-btn" v-on:click="getTaocode(item)">搜索下单</span>
|
</div>
|
</li>
|
</ul>
|
<div class="combox">
|
<p class="realpic-loading" v-if="loadshow"><i class="vmIconLoad"></i><em>数据加载中...</em></p>
|
<p class="realpic-loading" v-else>数据已加载完了</p>
|
</div>
|
</div>
|
<!-- <div class="free-share" v-bind:class="acFocus?'active':''">
|
<img src="http://img.bc.haodanku.com/haodanku/1613981706" v-on:click="copyShare()" class="share-btn">
|
</div> -->
|
<div>
|
<div class="back_top" v-if="scrollShow" v-on:click="arrowTop()"></div>
|
<div class="tokenbox tokenbox1">
|
<em class="shut" v-on:click="shutBtn"></em>
|
<span>{{taoToken}}</span>
|
<p>复制淘口令，打开手机淘宝领取</p>
|
<span class="copybtn" v-on:click="copyBtn('.copybtn')">复制淘口令</span>
|
</div>
|
</div>
|
</template>
|
|
<div v-if="!isexplain">
|
<img src="http://img.bc.haodanku.com/haodanku-activity/1596022875" class="goback"
|
v-on:click="arrowBtn('isexplain')">
|
<img src="http://img.bc.haodanku.com/haodanku_activity/1596768292">
|
</div>
|
|
<div v-if="!issource">
|
<img src="http://img.bc.haodanku.com/haodanku-activity/1596022875" class="goback"
|
v-on:click="arrowBtn('issource')">
|
<img src="http://img.bc.haodanku.com/haodanku-activity/1596032111" alt="">
|
</div>
|
|
<div class="direct-img" v-show="showDirect" v-on:click="closeDirect">
|
<div class="direct-box">
|
<div class="box-header">
|
使用教程
|
<img
|
v-on:click="closeDirect"
|
class="btn-close"
|
src="http://img-haodanku-com.cdn.fudaiapp.com/FsHmpTJUJxhdJ7X8YL36ix1GduZg"
|
alt="">
|
</div>
|
<div class="box-content">
|
<img src="http://img.bc.haodanku.com/cms/1627703471?t=1" alt="">
|
</div>
|
</div>
|
</div>
|
<transition name="fade">
|
<div class="snapped-up" v-show="snappedUp.show">
|
<div class="box">
|
<div class="box-header">
|
<img
|
class="btn-close"
|
v-on:click="closeSnappedUpDialog"
|
src="http://img.bc.haodanku.com/haodanku/1596096751"
|
alt="">
|
</div>
|
<div class="box-content">
|
<div class="title">
|
复制【下单链接】打开手淘APP，<br>
|
搜索立即下单 ~
|
</div>
|
<img src="http://img.bc.haodanku.com/cms/1627701410" alt="">
|
<button class="btn copy" v-on:click="copyBtn('.copy.btn')">点击复制</button>
|
</div>
|
</div>
|
</div>
|
</transition>
|
<van-overlay :show="titleCopyTipsVisible" @click="diaCloese()">
|
<div
|
class="wrapper"
|
style="display:flex;align-items:center;justify-content:center;height: 100%;"
|
>
|
<img style="width: 6rem;" src="http://img-haodanku-com.cdn.fudaiapp.com/FhYQl6NqvQIycYZS1DM9DLBELA72" alt="">
|
</div>
|
</van-overlay>
|
</div>
|
</div>
|
</div>
|
<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
|
<script src="https://cdn.staticfile.org/vue/2.6.10/vue.min.js"></script>
|
<script src="https://cdn.staticfile.org/vue-lazyload/1.3.3/vue-lazyload.js"></script>
|
<script src="https://cdn.bootcdn.net/ajax/libs/layer/2.3/layer.js"></script>
|
<script src="https://cdn.staticfile.org/clipboard.js/2.0.4/clipboard.min.js"></script>
|
<script src="https://cdn.bootcdn.net/ajax/libs/ScrollToFixed/1.0.8/jquery-scrolltofixed-min.js"></script>
|
<script src="https://cdn.bootcdn.net/ajax/libs/device.js/0.2.7/device.min.js"></script>
|
<script src="https://img.bc.haodanku.com/cms/SpaUtils.min.js"></script>
|
<script src="https://cdn.staticfile.org/vant/2.12.5/vant.min.js"></script>
|
<link href="https://cdn.staticfile.org/vant/2.12.5/index.min.css" rel="stylesheet">
|
<script src="https://img.bc.haodanku.com/cdn/vant-touch-emulator.js"></script>
|
<script>
|
var vmUrlSearchs = null;
|
|
function vmRequest(name) {
|
if(!vmUrlSearchs) {
|
vmUrlSearchs = new vmUrlSearch();
|
}
|
return vmUrlSearchs[name];
|
}
|
|
function vmUrlSearch() {
|
var name, value;
|
var str = location.href;
|
var num = str.indexOf("?");
|
str = str.substr(num + 1);
|
var arr = str.split("&");
|
for(var i = 0; i < arr.length; i++) {
|
if(num = arr[i].indexOf("=") != -1) {
|
num = arr[i].indexOf("=");
|
} else {
|
num = arr[i].indexOf("/");
|
}
|
if(num > 0) {
|
name = arr[i].substring(0, num);
|
value = arr[i].substr(num + 1);
|
this[name] = value;
|
}
|
}
|
}
|
|
|
Vue.use(VueLazyload, {
|
preLoad: 1.3,
|
error: "http://img.bc.haodanku.com/haodanku/1595237918",
|
loading: "http://img.bc.haodanku.com/haodanku-activity/1596092443",
|
attempt: 1
|
});
|
var app = new Vue({
|
el: "#app",
|
data: function() {
|
return {
|
//posturl:"http://dfg.shop.com",
|
//posturl:"http://appapitest.ushopvip.com",
|
posturl:"http://dfgapp.ushopvip.com",
|
showDirect: false,
|
codeId: vmRequest("code"),
|
|
fristOrderSort: [
|
{
|
name: "综合",
|
bool: true,
|
max: "",
|
min: "",
|
number: 3
|
},
|
{
|
name: "价格",
|
bool: false,
|
max: 3,
|
min: 1,
|
number: 0
|
},
|
{
|
name: "销量",
|
bool: false,
|
max: 2,
|
min: 2,
|
number: 1
|
},
|
{
|
name: "最新",
|
bool: false,
|
max: 5,
|
min: 5,
|
number: 2
|
}
|
],
|
sortId: "",
|
sortBool: true,
|
sortNumber: 3,
|
|
fristOrderItems: [],
|
topArr: [],
|
|
|
page: 1,
|
loadmsg: true,
|
loadshow: true,
|
|
scrollShow: false,
|
|
taoToken: "",
|
|
isexplain: true,
|
issource: true,
|
locationUrl: window.location.href,
|
|
keyword: "",
|
|
sigclick: false,
|
|
playState: false,
|
vmHttp: window.location.protocol.substring(0, window.location.protocol.length - 1) != "file" ? window.location.protocol.substring(0, window.location.protocol.length - 1) : "https",
|
|
acFocus: false,
|
outerHeight: "",
|
|
// 立即抢购弹窗相关
|
snappedUp: {
|
show: false,
|
code: ""
|
},
|
|
help_info: [],
|
|
sign_info: {},
|
titleCopyTipsVisible: false,
|
};
|
},
|
created: function() {
|
this.ajaxFristOrderItems(true);
|
},
|
mounted: function() {
|
this.outerHeight = $(".banenr").outerHeight(true) + $(".secret-wrapper").outerHeight(true) + $(".list-wrapper>h6").outerHeight(true) + 2;
|
this.taobaoscroll();
|
this.touch();
|
},
|
methods: {
|
diaCloese:function()
|
{
|
this.titleCopyTipsVisible=false;
|
uni.postMessage({
|
data: {
|
action: 'totb',
|
tburl:this.sign_info.url
|
}
|
})
|
},
|
touch:function()
|
{
|
const box = document.querySelector('.box')
|
const list = document.querySelector('.list');
|
// 按下屏幕的位置
|
let touchStartPosition = 0
|
|
// touchstart事件
|
box.addEventListener('touchstart', function (e) {
|
let touch = e.touches[0]
|
touchStartPosition = touch.pageY
|
})
|
// touchmove事件
|
box.addEventListener('touchmove', function (e) {
|
|
let touch = e.touches[0]
|
// 列表的top值等于列表相对于box的偏移量+滑动的距离
|
let pySize= list.offsetTop + touch.pageY - touchStartPosition;
|
if(pySize>=110)
|
{
|
return;
|
}
|
if(pySize<0)
|
{
|
return;
|
}
|
var scroll = document.getElementsByClassName('contscore')
|
var srollPos = $('.contscore').scrollTop(); //滚动条距顶部距离(页面超出窗口的高度)
|
if(srollPos>0)
|
{
|
return;
|
}
|
list.style.top =pySize + 'px';
|
// 实现平滑的滑动
|
touchStartPosition = touch.pageY
|
})
|
// touchend事件
|
box.addEventListener('touchend', function (e) {
|
let top = list.offsetTop
|
|
if (top > 70) {
|
// 在此处调用刷新后的回调
|
console.log('刷新');
|
location.reload();
|
}
|
|
if(top<0)
|
{
|
list.style.top=0;
|
}
|
if (top > 0) {
|
// 通过定时器平滑的将list的top = 0
|
let timer = setInterval(() => {
|
top=top-5;
|
list.style.top = top + 'px'
|
if (top <= 0) {
|
list.style.top=0;
|
clearInterval(timer)
|
}
|
},1)
|
}
|
})
|
},
|
toSignIn: function() {
|
if(!this.sign_info.url) {
|
return;
|
}
|
uni.postMessage({
|
data: {
|
action: 'totb',
|
tburl:this.sign_info.url
|
}
|
})
|
//SpaUtils.copy(this.sign_info.tpwd, "复制口令成功，请打开淘宝浏览领取签到红包");
|
},
|
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;
|
},
|
arrowBtn: function(val) {
|
this[val] = !this[val];
|
this.arrowTop();
|
},
|
taobaoscroll: function() { //滚动加载
|
var that = this;
|
window.addEventListener("scroll", function() {
|
|
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
|
var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
|
var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
|
|
if(!that.isexplain || !that.issource) return;
|
that.scrollShow = scrollTop > 750;
|
if(scrollHeight > clientHeight && scrollTop + clientHeight + 20 >= scrollHeight) {
|
if(that.loadmsg && !that.sigclick) {
|
that.loadmsg = false;
|
that.sigclick = false;
|
that.ajaxFristOrderItems();
|
}
|
}
|
});
|
},
|
ajaxFristOrderItems: function(cb) {
|
var that = this;
|
if(that.sigclick) {
|
if(this.fristOrderItems[0]) {
|
this.fristOrderItems.forEach(function(item) {
|
item.itempic = "";
|
});
|
}
|
document.documentElement.scrollTop = that.outerHeight;
|
document.body.scrollTop = that.outerHeight;
|
}
|
$.ajax({
|
headers:{
|
"token":that.getUrlPar("token")
|
},
|
url:that.posturl+'/api/activity/signRed',
|
type:"post",
|
dataType:"json",
|
data:{
|
apikey: '0F92EBA7AADA', //必填
|
min_size: 20,
|
sort: that.sortId,
|
min_id: that.page,
|
keyword: that.keyword,
|
pure_tpwd: vmRequest("pure_tpwd") ? 1 : undefined
|
}
|
}).done(function(res){
|
var data=res.data;
|
if(res.code == 0) {
|
that.help_info = data.help_info || [];
|
that.sign_info = data.sign_info || {};
|
if(that.sigclick) {
|
that.fristOrderItems = data.data;
|
} else {
|
that.fristOrderItems = that.fristOrderItems.concat(data.data);
|
}
|
that.topArr = data.top_data;
|
if(that.page != data.min_id) {
|
that.loadmsg = true;
|
that.loadshow = true;
|
that.page = data.min_id;
|
} else {
|
that.loadmsg = false;
|
that.loadshow = false;
|
}
|
that.$nextTick(function() {
|
that.sigclick = false;
|
if(cb) {
|
$(".newtop").scrollToFixed();
|
}
|
|
});
|
} else {
|
that.loadmsg = false;
|
that.loadshow = false;
|
that.sigclick = false;
|
layer.msg(data.msg, {
|
time: 2000,
|
shade: 0.1,
|
shadeClose: true
|
});
|
}
|
})
|
},
|
handleSort: function(item) {
|
if(this.sortNumber == item.number) {
|
if(item.min === item.max) {
|
return;
|
}
|
if(item.bool) {
|
this.sortId = item.min;
|
item.bool = false;
|
} else {
|
this.sortId = item.max;
|
item.bool = true;
|
}
|
} else {
|
item.bool = true;
|
this.sortNumber = item.number;
|
this.sortId = item.max;
|
}
|
this.page = 1;
|
this.loadmsg = true;
|
this.loadshow = true;
|
this.sigclick = true;
|
this.ajaxFristOrderItems();
|
},
|
popupFun: function(classname) {
|
layer.open({
|
type: 1,
|
shift: 0,
|
title: false,
|
closeBtn: 0,
|
shade: 0.4,
|
shadeClose: true,
|
content: $(classname)
|
});
|
},
|
getTaocode: function(item, isCoupon) {
|
// if(!isCoupon && vmRequest("pure_tpwd")) {
|
// // 直接复制
|
// copy(item.tpwd, "复制口令成功,请打开淘宝下单");
|
if(!isCoupon) {
|
// 直接复制
|
SpaUtils.copy(item.itemtitle, false);
|
this.titleCopyTipsVisible = true;
|
return;
|
}
|
var that = this;
|
var load = layer.load(1, {shade: 0.3});
|
$.ajax({
|
type: "Post",
|
url: that.vmHttp + "://v2.api.haodanku.com/ratesurl",
|
data: {
|
apikey: '0F92EBA7AADA', //必填
|
itemid: item.itemid,
|
activityid: isCoupon ? item.activityid : undefined,
|
title: item.itemshorttitle,
|
itemtitle: item.itemtitle,
|
pid: 'mm_4091757048_2861600076_114781900494', //必填
|
tb_name: 'tb108547775155', //必填
|
get_taoword: 1,
|
},
|
dataType: "json",
|
timeout: 5000,
|
success: function(data) {
|
layer.close(load);
|
if(data.code == "1") {
|
if(!isCoupon) {
|
}
|
that.taoToken = data.data.taoword;
|
if(isCoupon) {
|
that.popupFun(".tokenbox1");
|
/* uni.postMessage({
|
data: {
|
action: 'totb',
|
tburl:data.data.link
|
}
|
}) */
|
} else {
|
that.openSnappedUpDialog();
|
}
|
} else {
|
that.msgFun(data.msg);
|
}
|
|
},
|
error: function() {
|
layer.close(load);
|
that.msgFun("网络错误，请检查网络重试");
|
}
|
});
|
},
|
msgFun: function(val) {
|
layer.msg(val, {
|
time: 2000,
|
shade: 0.1,
|
shadeClose: true
|
});
|
},
|
arrowTop: function() {
|
$("body,html").stop(true, true).animate({
|
scrollTop: 0
|
});
|
},
|
copyBtn: function(dom) { //复制公共方法
|
var that = this;
|
var clipboard = new ClipboardJS(dom, {
|
text: function(target) {
|
return that.taoToken;
|
}
|
});
|
clipboard.on("success", function(e) {
|
layer.closeAll();
|
that.msgFun(that.snappedUp.show ? "下单链接复制成功，请打开手淘APP搜索下单" : "复制口令成功,请打开淘宝领取");
|
e.clearSelection();
|
clipboard.destroy();
|
});
|
clipboard.on("error", function(e) {
|
layer.msg("复制口令失败,请手动复制", {
|
shade: 0.4,
|
time: 1000,
|
shadeClose: false
|
}, function() {
|
});
|
|
});
|
},
|
copyShare: function() { //复制公共方法
|
var that = this;
|
|
var txt = that.locationUrl;
|
|
var clipboard = new ClipboardJS(".share-btn", {
|
text: function(target) {
|
return txt;
|
}
|
});
|
clipboard.on("success", function(e) {
|
that.msgFun("已复制分享链接");
|
console.log(txt);
|
e.clearSelection();
|
clipboard.destroy();
|
});
|
clipboard.on("error", function(e) {
|
layer.msg("复制分享链接失败！", {
|
shade: 0.4,
|
time: 1000,
|
shadeClose: false
|
}, function() {
|
});
|
|
});
|
},
|
handleSearch: function() {
|
this.page = 1;
|
this.loadmsg = true;
|
this.loadshow = true;
|
this.sigclick = true;
|
this.ajaxFristOrderItems();
|
},
|
shutBtn: function() {
|
layer.closeAll();
|
},
|
playBtn: function() {
|
this.playState = true;
|
},
|
myfocus: function() {
|
this.acFocus = true;
|
},
|
myblur: function() {
|
this.acFocus = false;
|
},
|
openDirect: function() {
|
this.showDirect = true;
|
},
|
closeDirect: function() {
|
this.showDirect = false;
|
},
|
openSnappedUpDialog: function() {
|
this.snappedUp.show = true;
|
},
|
closeSnappedUpDialog: function() {
|
this.snappedUp.show = false;
|
}
|
},
|
watch: {}
|
});
|
</script>
|
</body>
|
|
</html>
|
