feat: 增加微信公众号跳转
This commit is contained in:
zhangds
parent
315cc37311
commit
b6f849d8e8
13
index.html
13
index.html
|
|
@ -13,7 +13,8 @@
|
|||
<link rel="stylesheet" href="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/css/loading.css">
|
||||
<link rel="stylesheet" href="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/css/index.css">
|
||||
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/js/loading.js"></script>
|
||||
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/js/api2_0.js?v=1000"></script>
|
||||
<!-- <script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/js/api2_0.js?v=1000"></script> -->
|
||||
<script src="./api2_0.js"></script>
|
||||
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/common/modelPop.js"></script>
|
||||
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/js/libs.js?v=sdfhksdfklwrwer"></script>
|
||||
<style>
|
||||
|
|
@ -121,10 +122,10 @@
|
|||
});
|
||||
let self = this;
|
||||
//获取链接携带的参数
|
||||
let linkId = getQueryString('id');
|
||||
let keyCode = getQueryString('key');
|
||||
// let linkId = "2502"
|
||||
// let keyCode = "AAACFqXSu4J3spMz"
|
||||
// let linkId = getQueryString('id');
|
||||
// let keyCode = getQueryString('key');
|
||||
let linkId = "2502"
|
||||
let keyCode = "AAACFqmpwmDvKdaq"
|
||||
if (!linkId) {//地址栏无携带id
|
||||
let path = window.location.pathname;
|
||||
let parmas = path.split('/');
|
||||
|
|
@ -217,6 +218,8 @@
|
|||
methods: {
|
||||
// 统一跳转逻辑判断
|
||||
gotoPage(data, type) {
|
||||
window.location.href = "xw-pages/homepage.html";
|
||||
return
|
||||
// 微信授权回调地址
|
||||
let wxauth_url = "https://openapi.1688sup.com/wechat/oauth";
|
||||
// 第一步：判断是否是 微信静默授权 是 -> 拼接回调地址
|
||||
|
|
|
|||
|
|
@ -0,0 +1,623 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport"
|
||||
content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,viewport-fit=cover">
|
||||
<title>权益兑换页</title>
|
||||
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/common/vue.min.js?v=1367936144322" type="text/javascript"
|
||||
charset="utf-8"></script>
|
||||
<script type="text/javascript" src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/common/axios.js?v=1367936144322">
|
||||
</script>
|
||||
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/js/libs.js?v=sdfhksdfklwrwer"></script>
|
||||
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/siteqiexchange/js/swiper.min.js"></script>
|
||||
<link href="https://lsxdemall.oss-cn-beijing.aliyuncs.com/siteqiexchange/css/swiper.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/css/homepage2_0.css?v=3">
|
||||
<link rel="stylesheet" href="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/css/loading.css">
|
||||
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/js/loading.js"></script>
|
||||
<!-- <script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/js/api2_0.js?v=1000"></script> -->
|
||||
<script src="../api2_0.js"></script>
|
||||
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/common/tabs.js"></script>
|
||||
|
||||
</head>
|
||||
<style scoped>
|
||||
* {
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
font-family: HYQiHei;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 26.66666667vw;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-ms-text-size-adjust: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body>
|
||||
<div id="homepage">
|
||||
<div v-show="loading">
|
||||
<preload-component />
|
||||
</div>
|
||||
<div v-show="!loading&&!suspension" class="main-body">
|
||||
<!-- 轮播 -->
|
||||
<div id="rotation" v-if="layout=='2'">
|
||||
<!-- 顶部banner -->
|
||||
<div class="topBanner">
|
||||
<img class="backpresty" @click="backgoodsFn" v-if="goodsShow&&!iskey"
|
||||
src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/backprepageBtn.png"
|
||||
alt="">
|
||||
<img :src="topImg" alt="" @click="bannerTo">
|
||||
</div>
|
||||
<!-- //轮播 -->
|
||||
<div class="saleNull" v-if="!goodsNum">
|
||||
<img src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/saleNull.png" alt="">
|
||||
</div>
|
||||
<div class="commodity" v-if="goodsNum">
|
||||
<div class="swiper-container" :class="swiperDataList.length>1?'':'oneItem'">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide" v-for="(item,index) in swiperDataList" :key="index">
|
||||
<div class="imgitemMask" v-if="item.available!=1">
|
||||
<span>
|
||||
<img v-if="[4,9].includes(item.available)"
|
||||
src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/yet.png"
|
||||
alt="">
|
||||
<img v-if="item.available==2"
|
||||
src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/future.png"
|
||||
alt="">
|
||||
<img v-if="item.available==11"
|
||||
src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/overdue.png"
|
||||
alt="">
|
||||
<img v-if="item.available==6"
|
||||
src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/empty.png"
|
||||
alt="">
|
||||
</span>
|
||||
</div>
|
||||
<div class="imgbox">
|
||||
<!-- type :1 兑换码 2:立减金,channel:1支付宝，2微信 -->
|
||||
<img class="le-img" :src="distinguishLogo(item)"
|
||||
:class="statusFun(item)?'':'changegray'"></img>
|
||||
</div>
|
||||
<div class="item-name" :class="statusFun(item)?'':'changegray'">
|
||||
{{item.type==1?item.entity.product_name:item.entity.batch_goods_name}}
|
||||
<span v-if="item.entity.send_num>1&&item.type===2" class="send_num">
|
||||
x{{item.entity.send_num}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 立即兑换 -->
|
||||
<div class="exchangeBtn"
|
||||
:class="(gstatus===1||(exchangeCommity.type===3&&gstatus===8))?'':'bottomBtn noexchangeBtn'"
|
||||
:style="{'background': bgcolor,'color':ftcolor}" @click="exchangeBtn()">
|
||||
立即兑换
|
||||
</div>
|
||||
</div>
|
||||
<!-- 列表 -->
|
||||
<div id="list" v-if="layout=='1'">
|
||||
<div class="topBanner">
|
||||
<img class="backpresty" @click="backgoodsFn" v-if="goodsShow&&!iskey"
|
||||
src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/backprepageBtn.png"
|
||||
alt="">
|
||||
<img :src="topImg" alt="" @click="bannerTo">
|
||||
</div>
|
||||
<div class="saleNull" v-if="!goodsNum">
|
||||
<img src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/saleNull.png" alt="">
|
||||
</div>
|
||||
<ul class="listcommity" v-if="goodsNum">
|
||||
<li v-for="(item,i) in swiperDataList" :key="i" @click="exchangeBtn(item)">
|
||||
<div>
|
||||
<img :src="distinguishLogo(item)" alt="" :class="statusFun(item)?'':'changegray'">
|
||||
<font :class="statusFun(item)?'':'changegray'">
|
||||
{{item.type==1?item.entity.product_name:item.entity.batch_goods_name}}
|
||||
<span v-if="item.entity.send_num>1&&item.type===2" class="send_num">
|
||||
x{{item.entity.send_num}}</span>
|
||||
</font>
|
||||
</div>
|
||||
<span class="goodsStatus">
|
||||
<img v-if="[4,9].includes(item.available)"
|
||||
src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/yet.png" alt="">
|
||||
<img v-if="item.available==2"
|
||||
src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/future.png"
|
||||
alt="">
|
||||
<img v-if="item.available==11"
|
||||
src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/overdue.png"
|
||||
alt="">
|
||||
<img v-if="item.available==6"
|
||||
src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/empty.png"
|
||||
alt="">
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- 矩阵 -->
|
||||
<div id="matrix" v-if="layout=='3'">
|
||||
<div class="topBanner">
|
||||
<img class="backpresty" @click="backgoodsFn" v-if="goodsShow&&!iskey"
|
||||
src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/backprepageBtn.png"
|
||||
alt="">
|
||||
<img :src="topImg" alt="" @click="bannerTo">
|
||||
|
||||
</div>
|
||||
<div class="saleNull" v-if="!goodsNum">
|
||||
<img src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/saleNull.png" alt="">
|
||||
</div>
|
||||
|
||||
<ul class="listcommity" v-if="goodsNum">
|
||||
<li :class="statusFun(item)?'':'changegray'" v-for="(item,i) in swiperDataList" :key="i"
|
||||
@click="exchangeBtn(item)">
|
||||
<div>
|
||||
<span class="goodsIcon">
|
||||
<img v-if="[4,9].includes(item.available)"
|
||||
src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/yet.png"
|
||||
alt="">
|
||||
<img v-if="item.available==2"
|
||||
src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/future.png"
|
||||
alt="">
|
||||
<img v-if="item.available==11"
|
||||
src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/overdue.png"
|
||||
alt="">
|
||||
<img v-if="item.available==6"
|
||||
src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/empty.png"
|
||||
alt="">
|
||||
</span>
|
||||
<img :src="distinguishLogo(item)" alt="" />
|
||||
</div>
|
||||
<font>
|
||||
{{item.type==1?item.entity.product_name:item.entity.batch_goods_name}}
|
||||
<span v-if="item.entity.send_num>1&&item.type===2" class="send_num">
|
||||
x{{item.entity.send_num}}</span>
|
||||
</font>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="bottom" id="bottom" :class="layout==2?'tipset':''" v-show="describe.type">
|
||||
<img :src="describe.bg_image" v-show="describe.type==1&&describe.bg_image">
|
||||
<div v-html="describe.content" class="goodsTip" v-show="describe.type==3&&describe.content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<tab-static-component :current="1" v-if="!isToLook"></tab-static-component>
|
||||
<!-- 悬浮提示 -->
|
||||
<div v-if="suspension" class="suspensionDom">
|
||||
<img @click="closeTip"
|
||||
src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/backprepageBtn.png" alt="">
|
||||
<h4>活动规则</h4>
|
||||
<div v-html="describe.content">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- 弹出框 -->
|
||||
<div class="mask" v-if="maskshow"></div>
|
||||
<img class="susTip" @click="susTipFn" v-if="describe.type==2&&describe.content&&!suspension&&!loading"
|
||||
src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/acticeTextTip.png" alt="">
|
||||
<!-- 单条弹出框 -->
|
||||
<div class="prompt" :class="promtshow?'proactive':''">
|
||||
{{this.promttip}}
|
||||
</div>
|
||||
|
||||
<!-- 弹出提示 -->
|
||||
<div class="popboxshow" v-if="popboxshow&&popboxtype=='提示'" :class="popboxshow?'active':''">
|
||||
<div class="tip">
|
||||
<p :class="gstatus==4||gstatus==6?'yettip':''">{{tiptext}}</p>
|
||||
<span @click="successchangeBtn" :class="gstatus==4||gstatus==6?'yetexchange':''">知道了</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 成功 -->
|
||||
<div class="popboxshow successbox" v-if="popboxshow&&popboxtype=='成功'" :class="popboxshow?'active':''">
|
||||
<div>
|
||||
<p>{{this.successTip}}</p>
|
||||
<span @click="successchangeBtnFn">我知道啦</span>
|
||||
</div>
|
||||
</div>
|
||||
<img v-if="popboxshow&&popboxtype!='成功'" class="closed"
|
||||
src="https://lsxd-customcard-h5.oss-cn-hangzhou.aliyuncs.com/cardpwd/img/commimgs/close.png" alt=""
|
||||
@click="closeBtn()">
|
||||
</div>
|
||||
</body>
|
||||
<script>
|
||||
/***************************** type 1:直冲 2:立减金 3:红包 *****************************/
|
||||
new Vue({
|
||||
el: '#homepage',
|
||||
data() {
|
||||
return {
|
||||
swiperDataList: [], //轮播
|
||||
layout: 1,
|
||||
maskshow: false,
|
||||
promtshow: false,
|
||||
promttip: '',
|
||||
loading: true,
|
||||
lastid: 0,
|
||||
gstatus: 1,
|
||||
suspension: false,
|
||||
popboxshow: false,
|
||||
popboxtype: '兑换',
|
||||
topImg: '',
|
||||
goodsShow: true,
|
||||
goodsNum: false,
|
||||
exchangeCommity: {}, //兑换选择的商品
|
||||
bgcolor: '',
|
||||
describe: {},
|
||||
ftcolor: '',
|
||||
iskey: true,
|
||||
allgoods: [],
|
||||
showType: 0,
|
||||
isToLook: false,
|
||||
tiptext: '还没开始哟，兑换时间为2021-12-05 12:12:12至2021-01-01 12:12:12',
|
||||
successTip: '兑换成功，到账信息请关注官方APP！',
|
||||
};
|
||||
},
|
||||
components: {
|
||||
tabStaticComponent
|
||||
},
|
||||
created() {
|
||||
let openid = getQueryString("openid");
|
||||
if (openid) {
|
||||
localStorage.setItem('openid', openid);
|
||||
}
|
||||
this.getGoods();
|
||||
let productConfig = JSON.parse(localStorage.getItem('product_list'));
|
||||
this.bgcolor = productConfig.button_color;
|
||||
this.ftcolor = productConfig.font_color;
|
||||
this.topImg = productConfig.top_image;
|
||||
document.title = localStorage.getItem('title');
|
||||
this.layout = productConfig.list;
|
||||
this.iskey = localStorage.getItem('haskey');
|
||||
this.describe = productConfig.describe;
|
||||
this.bannerUrl = productConfig.bannerUrl;
|
||||
},
|
||||
methods: {
|
||||
closeTip() {
|
||||
this.suspension = false;
|
||||
},
|
||||
susTipFn() {
|
||||
this.suspension = true;
|
||||
},
|
||||
onSelected(item) {
|
||||
this.exchangeCommity = item;
|
||||
this.gstatus = item.available;
|
||||
},
|
||||
backgoodsFn() {
|
||||
let backUrl = window.history.length;
|
||||
if (window.history.length) {
|
||||
history.go(-backUrl + 1);
|
||||
}
|
||||
},
|
||||
// 单条弹框
|
||||
openDialog() {
|
||||
this.promtshow = true;
|
||||
setTimeout(() => {
|
||||
this.promtshow = false;
|
||||
this.promttip = '';
|
||||
}, 3000);
|
||||
},
|
||||
//根据token获取商品信息
|
||||
async getGoods() {
|
||||
sessionStorage.setItem('backShow', '');
|
||||
let self = this;
|
||||
let showType = localStorage.getItem('showType');
|
||||
this.showType = showType;
|
||||
let data = {
|
||||
"last_product_id": localStorage.getItem('lastid') | 0,
|
||||
};
|
||||
if (showType == 1) { //白名单
|
||||
let tokenList = JSON.parse(localStorage.getItem('getTokenList'));
|
||||
let goodsList = [];
|
||||
for (item of tokenList) {
|
||||
let goodsItem = [];
|
||||
data.token = item;
|
||||
let waitGoods = await req.axiosPost('/key/products', data).then(res => {
|
||||
if (res.code == 200) {
|
||||
res.data.forEach(it => {
|
||||
it.token = item;
|
||||
});
|
||||
goodsItem = res.data;
|
||||
} else {
|
||||
self.maskshow = true;
|
||||
self.popboxtype = '提示';
|
||||
self.popboxshow = true;
|
||||
self.tiptext = res.message;
|
||||
if (res.code == 403) {
|
||||
setTimeout(() => {
|
||||
window.location.href = localStorage.getItem('white_link');
|
||||
}, 3000);
|
||||
}
|
||||
}
|
||||
});
|
||||
goodsList = goodsList.concat(goodsItem);
|
||||
};
|
||||
let duplicate = []; //去重
|
||||
let goodsArr = []; //最终的商品集合
|
||||
goodsList.forEach(item => {
|
||||
if (duplicate.indexOf(item.product_id) == -1) {
|
||||
duplicate.push(item.product_id);
|
||||
}
|
||||
});
|
||||
let similar = [];
|
||||
duplicate.forEach(it => {
|
||||
similar = goodsList.filter(iten => { //goodshow为去重后的数据
|
||||
return iten.product_id == it;
|
||||
});
|
||||
let flag = [1, 2, 6, 8, 7, 5, 9, 4, 11, 3, 10, 20, 21]; //显示的avarivble规则
|
||||
let minIndex = 7;
|
||||
similar.forEach(item => {
|
||||
let flagIndex = flag.indexOf(item.available);
|
||||
if (flagIndex > -1) {
|
||||
if (flagIndex < minIndex)
|
||||
minIndex = flagIndex;
|
||||
}
|
||||
});
|
||||
let obj = similar.find((o) => {
|
||||
return o.available == flag[minIndex];
|
||||
});
|
||||
goodsArr.push(obj);
|
||||
});
|
||||
/*商品自定义排序：0-100，降序排列，100第一个展示，0最后一个展示*/
|
||||
var objectArraySort = (keyName) => {
|
||||
return (objectN, objectM) => {
|
||||
var valueN = objectN[keyName];
|
||||
var valueM = objectM[keyName];
|
||||
if (valueN < valueM) return 1;
|
||||
else if (valueN > valueM) return -1;
|
||||
else return 0;
|
||||
};
|
||||
};
|
||||
goodsArr.sort(objectArraySort('weight'));
|
||||
self.swiperDataList = this.convertData(goodsArr);
|
||||
self.goodsShow = goodsArr.length > 1;
|
||||
sessionStorage.setItem('goodsCount', goodsArr.length);
|
||||
if (goodsArr && goodsArr.length == 1 && goodsArr[0].available == 1) {
|
||||
sessionStorage.setItem('goodsInfo', JSON.stringify(goodsArr[0]));
|
||||
localStorage.setItem('key', goodsArr[0].key);
|
||||
localStorage.setItem('token', goodsArr[0].token);
|
||||
this.toPage(goodsArr[0]);
|
||||
return false;
|
||||
} else if (goodsArr && goodsArr.length >= 1) {
|
||||
self.goodsNum = true;
|
||||
self.onSelected(goodsArr[0]);
|
||||
self.$nextTick(function () {
|
||||
var swiper = new Swiper('.swiper-container', {
|
||||
slidesPerView: "auto",
|
||||
loopAdditionalSlides: 1000,
|
||||
centeredSlides: true,
|
||||
observer: true,
|
||||
observeParents: true,
|
||||
loop: self.goodsShow,
|
||||
onSlideChangeEnd: function (swiper) {
|
||||
let row = goodsArr[swiper.realIndex];
|
||||
self.onSelected(goodsArr[swiper.realIndex]);
|
||||
}
|
||||
});
|
||||
});
|
||||
setTimeout(() => {
|
||||
self.loading = false;
|
||||
}, 100);
|
||||
} else {
|
||||
self.goodsNum = false;
|
||||
setTimeout(() => {
|
||||
self.maskshow = true;
|
||||
self.popboxtype = '提示';
|
||||
self.popboxshow = true;
|
||||
self.tiptext = '暂无可兑换码商品';
|
||||
}, 1000);
|
||||
}
|
||||
} else { //兑换码
|
||||
data.token = localStorage.getItem('token');
|
||||
req.axiosPost('/key/products', data).then(res => {
|
||||
if (res.code == 200) {
|
||||
self.swiperDataList = this.convertData(res.data);
|
||||
sessionStorage.setItem('goodsCount', res.data.length);
|
||||
self.goodsShow = res.data.length > 1;
|
||||
if (res.data && res.data.length == 1) {//单个商品直接进入详情页面
|
||||
const product = res.data[0];
|
||||
/* 满足3个条件进入此判断 仅兑换一次 在线查看卡密商品 则卡密页面不能返回 */
|
||||
if (product.restrict == 1 && product.type == 1 && product.entity.card_show == 2 && product.entity.product_type == 2) {
|
||||
sessionStorage.setItem('backShow', 1);
|
||||
}
|
||||
/* 满足3个条件进入此判断 仅兑换一次 已兑换 在线查看卡密商品 */
|
||||
this.isToLook = product.exchange == 1 && product.restrict == 1 && product.type == 1 && product.entity.card_show == 2 && product.entity.product_type == 2;
|
||||
if (this.isToLook) {
|
||||
return req
|
||||
.axiosGet(`/key/order/queryList`, {
|
||||
token: data.token,
|
||||
page: 1,
|
||||
limit: 10
|
||||
})
|
||||
.then(({ data, code, }) => {
|
||||
if (code === 200) {
|
||||
sessionStorage.setItem('orderNumber', data[0].order_number);
|
||||
window.location.replace('/orderDetails/cardOrder.html');
|
||||
}
|
||||
});
|
||||
} else {
|
||||
sessionStorage.setItem('goodsInfo', JSON.stringify(product));
|
||||
this.toPage(product);
|
||||
return false;
|
||||
}
|
||||
} else if (res.data && res.data.length >= 1) {
|
||||
self.goodsNum = true;
|
||||
self.onSelected(res.data[0]);
|
||||
self.$nextTick(function () {
|
||||
var swiper = new Swiper('.swiper-container', {
|
||||
slidesPerView: "auto",
|
||||
loopAdditionalSlides: 1000,
|
||||
centeredSlides: true,
|
||||
observer: true,
|
||||
observeParents: true,
|
||||
loop: self.goodsShow,
|
||||
onSlideChangeEnd: function (swiper) {
|
||||
let row = res.data[swiper.realIndex];
|
||||
self.onSelected(res.data[swiper.realIndex]);
|
||||
}
|
||||
});
|
||||
});
|
||||
setTimeout(() => {
|
||||
self.loading = false;
|
||||
}, 100);
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
self.maskshow = true;
|
||||
self.popboxtype = '提示';
|
||||
self.popboxshow = true;
|
||||
self.tiptext = '暂无可兑换码商品';
|
||||
}, 1000);
|
||||
}
|
||||
} else {
|
||||
self.maskshow = true;
|
||||
self.popboxtype = '提示';
|
||||
self.popboxshow = true;
|
||||
self.tiptext = res.message;
|
||||
if (res.code == 403) {
|
||||
let haskey = localStorage.getItem('haskey');
|
||||
if (haskey) {
|
||||
setTimeout(() => {
|
||||
window.history.back();
|
||||
}, 3000);
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
window.location.href = "../index.html?id=" + localStorage.getItem('linkId');
|
||||
}, 3000);
|
||||
}
|
||||
}
|
||||
}
|
||||
}).catch(err => {
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
/* 转换数据 */
|
||||
convertData(goods) {
|
||||
goods.map(item => {
|
||||
/* 组装组合商品数据 */
|
||||
if (item.recharge_type === 2) {
|
||||
item.entity.code_batch_id = item.code_batch_id;
|
||||
item.entity.batch_goods_name = item.entity.title;
|
||||
item.entity.channel = Number(item.entity.channel);
|
||||
item.type = 2;
|
||||
}
|
||||
});
|
||||
return goods;
|
||||
},
|
||||
|
||||
//选择商品点击兑换
|
||||
exchangeBtn(row = this.exchangeCommity) {
|
||||
let gstatus = row.available;
|
||||
this.gstatus = gstatus;
|
||||
/* 直冲、立减金商品状态为 1 时可兑换。
|
||||
* 红包商品状态为 1 8 时也可兑换
|
||||
*/
|
||||
if (gstatus == 1 || (row.type === 3 && [1, 8].includes(row.available))) {
|
||||
// 跳转商品详情页面
|
||||
if (this.showType == 1) { //白名单
|
||||
localStorage.setItem('token', row.token);
|
||||
localStorage.setItem('key', row.key);
|
||||
}
|
||||
sessionStorage.setItem('goodsInfo', JSON.stringify(row));
|
||||
this.toPage(row);
|
||||
} else {
|
||||
this.maskshow = true;
|
||||
this.popboxshow = true;
|
||||
this.popboxtype = '提示';
|
||||
this.tiptext = product_status(gstatus, row);
|
||||
}
|
||||
},
|
||||
|
||||
//关闭,关闭弹框
|
||||
closeBtn() {
|
||||
this.popboxshow = false;
|
||||
this.maskshow = false;
|
||||
if (this.gstatus == 8) {
|
||||
window.history.go(0);
|
||||
}
|
||||
},
|
||||
//关闭弹出框,仅关闭弹框
|
||||
successchangeBtn() {
|
||||
this.maskshow = false;
|
||||
this.popboxshow = false;
|
||||
if (this.gstatus == 8) {
|
||||
window.history.go(0);
|
||||
}
|
||||
|
||||
if (this.tiptext === '暂无可兑换码商品') {
|
||||
setTimeout(() => {
|
||||
window.location.href = "../index.html?id=" + localStorage.getItem('linkId');
|
||||
}, 1000);
|
||||
}
|
||||
},
|
||||
//刷新页面
|
||||
successchangeBtnFn() {
|
||||
window.history.go(0);
|
||||
},
|
||||
|
||||
/* 区分红包商品logo 路径 */
|
||||
distinguishLogo({ type, entity }) {
|
||||
const { channel } = entity;
|
||||
/* NOTE: type 1 兑换码 2 立减金 3 红包 */
|
||||
/* NOTE: channel 1 支付宝 2 微信 */
|
||||
if (type == 1) {
|
||||
return entity.show_url;
|
||||
}
|
||||
if (type == 2) {
|
||||
if (channel === 1) {
|
||||
return 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/commonproductlogo/zfbreduce.png';
|
||||
} else if (channel === 2) {
|
||||
return 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/commonproductlogo/wxreduce.png';
|
||||
} else if (channel === 3) {
|
||||
return 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/logo_ysf.png';
|
||||
}
|
||||
|
||||
}
|
||||
if (type == 3) {
|
||||
if (channel === 1) {
|
||||
return 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/redPacktes/alipay_icon.png';
|
||||
} else if (channel === 2) {
|
||||
return 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/redPacktes/wechat_icon.png';
|
||||
} else if (channel === 3) {
|
||||
return 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/logo_ysf.png';
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/* 区分状态 */
|
||||
statusFun(item) {
|
||||
if (item.available === 1) {
|
||||
return true;
|
||||
} else if (item.available === 8) {
|
||||
if (item.type === 3) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
|
||||
/* 集中跳转 */
|
||||
toPage({ type, entity, recharge_type }) {
|
||||
/*
|
||||
* type: 1 兑换码 2 立减金 3 红包
|
||||
* receive_mode: 1 支付宝 2 H5
|
||||
* recharge_type 2 组合立减金 1立减金
|
||||
*/
|
||||
if (type == 2) {
|
||||
window.location.replace("./reduce.html");
|
||||
}
|
||||
},
|
||||
|
||||
/* banner外链跳转 */
|
||||
bannerTo() {
|
||||
if (this.bannerUrl) {
|
||||
location.href = this.bannerUrl;
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,351 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport"
|
||||
content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,viewport-fit=cover" />
|
||||
<title>立减金领取</title>
|
||||
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/common/vue.min.js?v=1367936144322" type="text/javascript"
|
||||
charset="utf-8"></script>
|
||||
<script type="text/javascript" src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/common/axios.js?v=1367936144322">
|
||||
</script>
|
||||
<link rel="stylesheet" href="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/css/homepage2_0.css" />
|
||||
<!-- <script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/js/api2_0.js?v=1000"></script> -->
|
||||
<script src="../api2_0.js"></script>
|
||||
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/js/libs.js?v=sdfhksdfklwrwer"></script>
|
||||
<link rel="stylesheet" href="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/css/loading.css">
|
||||
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/js/loading.js"></script>
|
||||
<style>
|
||||
* {
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
font-family: HYQiHei;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 26.66666667vw;
|
||||
}
|
||||
|
||||
body {
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-ms-text-size-adjust: 100%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="reduce" :style="{paddingTop:this.outTime.length>0?'0':'0.21rem'}">
|
||||
<!-- 弹出框 -->
|
||||
<div class="mask" v-if="maskshow"></div>
|
||||
<!-- 单条弹出框 -->
|
||||
<div class="prompt" :class="promtshow?'proactive':''">
|
||||
{{this.promttip}}
|
||||
</div>
|
||||
<!-- 弹出提示 -->
|
||||
<div class="popboxshow" v-if="popboxshow" :class="popboxshow?'active':''">
|
||||
<div class="tip">
|
||||
<p>{{tiptext}}</p>
|
||||
<span @click="knowFn">知道了</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 复制提示 -->
|
||||
<div class="popboxshow" v-if="copyshow" :class="copyshow?'active':''">
|
||||
<div class="tip">
|
||||
<p>请点击下方[复制]按钮，复制链接到浏览器打开！</p>
|
||||
<span @click="copyFn">复制</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="countdown" v-if="this.outTime.length>0">
|
||||
<span>链接有效期：</span>
|
||||
<p>{{this.outTime[0]}}</p>时
|
||||
<p>{{this.outTime[1]}}</p>分
|
||||
<p>{{this.outTime[2]}}</p>秒
|
||||
</div>
|
||||
|
||||
<div class="mask" v-if="loading" ref="load" @touchmove.prevent @mousewheel.prevent>
|
||||
<preload-component />
|
||||
</div>
|
||||
|
||||
<div class="couponShow">
|
||||
<span>
|
||||
<img @click="backgoodsFn" v-if="backAble" class="backIcon"
|
||||
src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/backprepageBtn.png" alt="">
|
||||
</span>
|
||||
<div class="coupon-left">
|
||||
<p class="coupon_money" :style="{fontSize:this.fonts()}">
|
||||
<span>￥</span>{{parseFloat(reduceInfo.reduce_amount)}}
|
||||
</p>
|
||||
<p class="full_money">满{{parseFloat(reduceInfo.denomination)}}可用</p>
|
||||
</div>
|
||||
<div class="coupon-right">
|
||||
<p class="title">
|
||||
{{reduceInfo.batch_goods_name}}
|
||||
<span class="send_num" v-if="reduceInfo.send_num>1">x{{reduceInfo.send_num}}</span>
|
||||
</p>
|
||||
<p style="font-size: 0.11rem">
|
||||
{{reduceInfo.card_type|cardType}}可用
|
||||
</p>
|
||||
<p class="validity" v-if="receive_time.timer_show!=2">
|
||||
有效期:{{receive_time.effect_time.start_time}}至{{receive_time.effect_time.end_time}}
|
||||
</p>
|
||||
<p class="validity" v-if="receive_time.use_time.type=='received'">
|
||||
领取后{{receive_time.use_time.effect_date_type==0?'立即':'次日凌晨'}}生效,有效期
|
||||
{{receive_time.use_time.effect_day}}天
|
||||
</p>
|
||||
<p class="validity" v-if="receive_time.use_time.type=='fiexd'">
|
||||
可用时间:{{receive_time.use_time.fiexd_time.start_time}}-{{receive_time.use_time.fiexd_time.end_time}}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="receiveBtn" @click="receiveFn" :class="goodInfo.available!=1?'readOnly':''">{{
|
||||
globalFormatStatus(goodInfo.available) }}</div>
|
||||
|
||||
|
||||
<div class="coupon_explain">
|
||||
<h1>- 兑换说明 -</h1>
|
||||
<div class="content">
|
||||
<h3 v-if="receive_time.use_time.type=='week'||receive_time.use_time.type=='irregular'">可用时间</h3>
|
||||
<ul v-if="receive_time.use_time.type=='week'" class="weekTime">
|
||||
<li v-for="(item,index) in receive_time.use_time.week" :key="index">
|
||||
<p>{{item}}</p>
|
||||
<div>
|
||||
<p v-for="(item2,index2) in receive_time.use_time.time" :key="index2">
|
||||
{{item2[0]}}~{{item2[1]}}
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<ul v-if="receive_time.use_time.type=='irregular'">
|
||||
<li v-for="(item,index) in receive_time.use_time.day" :key="index">
|
||||
<p>{{item[0]}}至{{item[1]}}</p>
|
||||
<div>
|
||||
<p v-for="(item2,index2) in receive_time.use_time.time" :key="index2">
|
||||
{{item2[0]}}~{{item2[1]}}
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="content">
|
||||
<h3>使用须知</h3>
|
||||
<p>
|
||||
1、在{{reduceInfo.channel==1?'支付宝H5':'微信APP内打开链接'}}，点击【一键领取】完成领取{{reduceInfo.channel==1?'支付宝':'微信'}}立减金<br />
|
||||
2、{{reduceInfo.channel==1?'支付宝':'微信'}}立减金一旦领取不可撤销、不可转让。注意不要将兑换券泄露给他人
|
||||
</p>
|
||||
</div>
|
||||
<div class="content">
|
||||
<h3>使用规则</h3>
|
||||
<p v-html="goodInfo.instruction"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<script>
|
||||
let goodsDetail = null, goodsCount = null;
|
||||
new Vue({
|
||||
el: "#reduce",
|
||||
data() {
|
||||
return {
|
||||
plaflam: 1, //支付宝
|
||||
promtshow: false,
|
||||
promttip: "警告提示",
|
||||
copyshow: false,//解决ios，必须触发按钮复制
|
||||
copyLink: '',//存储链接
|
||||
popboxshow: false,
|
||||
maskshow: false,
|
||||
openId: localStorage.getItem('openid'),
|
||||
bindClick: false,
|
||||
tiptext: "错误提示",
|
||||
goodInfo: {}, //商品信息
|
||||
reduceInfo: {}, //券信息
|
||||
orderId: '',
|
||||
backAble: true,
|
||||
loading: false,
|
||||
outTime: [],
|
||||
receive_time: {},//领取立减金时间
|
||||
tip: `1、立减金自领取之日起0天有效，请在有效期内使用<br />
|
||||
2、微信立减金自领取后每个立减金一次性使用，不兑换，不找零，到期后自动失效，逾期未使用不再补发。使用微信支付进行付款（大于立减金面额0.01元以上）即可自动抵扣<br />
|
||||
3、多张立减金可在单笔微信支付订单中一起使用，但当用户的立减金超过8张时，系统会选取其中一部分使用，不保证在一张订单中全部使用<br />
|
||||
4、在中国境内商户使用微信支付即可使用，少数特定商户（包括但不限于：CoCo奶茶、优衣库、星巴克、肯德基、必胜客、同程艺龙、热风、太平鸟、孩子王、航联保险、华为商城、Miss
|
||||
Sixty、Ochirly、Apple商城、FivePlus、信用卡还款、零钱通、理财通等）、以及社交支付（如转账、红包、个人收款码支付等）及合单支付（微信支付订单号为44开头的交易）无法使用立减金<br />
|
||||
5、使用立减金的微信支付订单，如发生全额退款，且立减金仍在有效期内，立减金将自动退还给用户，如立减金已过期，则不退还给用户；如发生部分退款，用户支付金额将按比例原路退还，立减金将不退还给用户<br />`,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
document.title = localStorage.getItem('title');
|
||||
/* 获取立减金信息*/
|
||||
goodsDetail = JSON.parse(sessionStorage.getItem("goodsInfo"));
|
||||
this.goodInfo = goodsDetail;
|
||||
console.log(this.goodInfo)
|
||||
/*默认显示*/
|
||||
// if (goodsDetail.available != 1) {
|
||||
// this.openErrorDialog(product_status(goodsDetail.available, goodsDetail));
|
||||
// this.bindClick = true;
|
||||
// }
|
||||
goodsCount = sessionStorage.getItem('goodsCount');
|
||||
this.backAble = goodsCount > 1;//多个商品才有返回
|
||||
this.reduceInfo = goodsDetail.entity;
|
||||
this.plaflam = goodsDetail.entity.channel;
|
||||
if (goodsDetail.entity.time_limit.use_time && goodsDetail.entity.time_limit.use_time.type == 'week') { //处理星期连贯操作
|
||||
goodsDetail.entity.time_limit.use_time.week = sortWeeks(goodsDetail.entity.time_limit.use_time.week);
|
||||
}
|
||||
this.receive_time = goodsDetail.entity.time_limit;
|
||||
|
||||
/* 倒计时 */
|
||||
const key_expiration_time = sessionStorage.getItem('key_expiration_time');
|
||||
if (key_expiration_time != 0) {
|
||||
const cls = setInterval(() => {
|
||||
const time = pageOutTime(key_expiration_time);
|
||||
if (time) {
|
||||
this.outTime = time;
|
||||
} else {
|
||||
this.outTime = ['00', '00', '00'];
|
||||
clearInterval(cls);
|
||||
}
|
||||
}, 1000);
|
||||
} else {
|
||||
this.outTime = [];
|
||||
}
|
||||
},
|
||||
filters: {
|
||||
cardType(val) {
|
||||
return val.map((item) => {
|
||||
return item == 1 ? "借记卡" : "信用卡" + " ";
|
||||
}).join(" ");
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
globalFormatStatus(type) {
|
||||
switch (type) {
|
||||
case 1:
|
||||
return "立即兑换"
|
||||
case 9:
|
||||
return "已兑换"
|
||||
default:
|
||||
return "立即兑换"
|
||||
}
|
||||
},
|
||||
backgoodsFn() {
|
||||
if (goodsCount > 1) {
|
||||
window.location.replace('./homepage.html');
|
||||
} else {
|
||||
history.go(-2);
|
||||
}
|
||||
},
|
||||
receiveFn() {
|
||||
if (this.loading) return;
|
||||
this.loading = true;
|
||||
let self = this;
|
||||
if (self.goodInfo.available != 1) {
|
||||
self.openErrorDialog(product_status(self.goodInfo.available, self.goodInfo));
|
||||
this.loading = false;
|
||||
return;
|
||||
}
|
||||
let data = {
|
||||
key: localStorage.getItem("key"),
|
||||
goods_id: this.goodInfo.entity.goods_id,
|
||||
code_batch_id: this.goodInfo.code_batch_id,
|
||||
token: localStorage.getItem("token"),
|
||||
};
|
||||
req.axiosPost("/key/usage", data)
|
||||
.then((res) => {
|
||||
if (res.code == 200) {
|
||||
sessionStorage.setItem("lastid", self.goodInfo.product_id);
|
||||
this.orderId = res.data.order_number;
|
||||
// 第一步：是否是微信环境 -> 公众号授权
|
||||
if (wx.match(/MicroMessenger/i) === "micromessenger") {
|
||||
this.publicCollection(res.data.order_number);
|
||||
} else {
|
||||
// 第二步：其它环境 微信小程序
|
||||
this.loading = false;
|
||||
window.location.replace(res.data.redirect_url);
|
||||
}
|
||||
} else {
|
||||
self.openErrorDialog(res.message);
|
||||
if (res.code == 403) {
|
||||
if (goodsCount > 1) {
|
||||
setTimeout(() => {
|
||||
window.location.replace("./homepage.html");
|
||||
}, 3000);
|
||||
} else {
|
||||
self.openErrorDialog(res.message);
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch((err) => { this.loading = false; });
|
||||
},
|
||||
|
||||
/* 公众号领取 */
|
||||
publicCollection(order_number) {
|
||||
let params = {
|
||||
order_number,
|
||||
channel: 2,
|
||||
channel_user_id: this.openId,
|
||||
is_webview: 1
|
||||
};
|
||||
req.axiosPost("/voucher/grant", params)
|
||||
.then((res) => {
|
||||
this.loading = false;
|
||||
if (res.code == 200) {
|
||||
this.openErrorDialog('领取成功');
|
||||
this.goodInfo.available = 9;
|
||||
sessionStorage.setItem('goodInfo', JSON.stringify(this.goodInfo));
|
||||
} else {
|
||||
this.openErrorDialog(res.message);
|
||||
}
|
||||
})
|
||||
.catch((err) => { this.loading = false; });
|
||||
;
|
||||
},
|
||||
//错误弹出框关闭
|
||||
knowFn() {
|
||||
this.popboxshow = false;
|
||||
this.maskshow = false;
|
||||
},
|
||||
//错误弹出框
|
||||
openErrorDialog(tip) {
|
||||
this.maskshow = true;
|
||||
this.tiptext = tip;
|
||||
this.popboxshow = true;
|
||||
},
|
||||
// 单条弹框
|
||||
openDialog(tip) {
|
||||
this.promtshow = true;
|
||||
this.promttip = tip;
|
||||
setTimeout(() => {
|
||||
this.promtshow = false;
|
||||
this.promttip = "";
|
||||
}, 3000);
|
||||
},
|
||||
|
||||
/* 动态font */
|
||||
fonts() {
|
||||
const defaultCss = '0.32rem';
|
||||
const count = String(parseFloat(this.reduceInfo.reduce_amount)).length + 1;
|
||||
if (count > 4) {
|
||||
return 0.32 - ((count - 3) / 100 * 2.2) + 'rem';
|
||||
} else {
|
||||
return defaultCss;
|
||||
}
|
||||
},
|
||||
|
||||
//复制文本
|
||||
copyFn() {
|
||||
var textArea = document.createElement("textarea");
|
||||
textArea.value = this.copyLink;
|
||||
document.body.appendChild(textArea);
|
||||
textArea.select();
|
||||
document.execCommand("copy");
|
||||
this.openDialog("复制成功，请到浏览器打开");
|
||||
document.body.removeChild(textArea);
|
||||
this.copyshow = false;
|
||||
this.maskshow = false;
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in New Issue