mobileclient/xw-pages/wx-combining.html

707 lines
34 KiB
HTML
Raw Permalink Normal View History

2024-04-28 09:25:40 +08:00
<!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" />
<title>组合立减金</title>
2024-04-28 09:30:38 +08:00
<link rel="stylesheet" href="../combining.css?v=234">
2024-04-28 09:25:40 +08:00
<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/common/vue.min.js?v=20210302151401"
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/lodash.min.js"></script>
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/js/api2_0.js?v=232323"></script>
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/js/libs.js?v=sdfhksdfklwrwer"></script>
<style>
body,
html {
width: 100%;
height: 100%;
overflow: hidden;
}
</style>
<link rel="stylesheet"
href="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/libs/antui/swiper.min.css">
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/libs/antui/swiper.min.js"></script>
<link rel="stylesheet"
href="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/libs/antui/antui-all.css" />
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/libs/antui/antui.js"></script>
</head>
<body>
<div id="app">
<div v-if="goods">
<img @click="backGoodsFn" v-if="backAble" class="backIcon"
src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/backprepageBtn.png" alt="">
<div class="prompt" :class="promptShow?'proactive':''">
{{prompt_text}}
</div>
<div class="mask" @touchmove.prevent @mousewheel.prevent v-show="message">
<div class="model">
<p class="m-title">温馨提示</p>
<p class="m-msg">{{message}}</p>
<button class="m-but" @click="copyFn" v-if="copyLink">复制</button>
<button class="m-but" @click="message = ''" v-else>知道了</button>
</div>
</div>
<div class="content" :style="{background: dynamicStyle.bg}">
<img class="banner" :src="dynamicStyle.banner" alt="">
<div class="countdown" v-if="this.outTime.length>0">
<p :style="{color:dynamicStyle.times_color}">{{this.outTime[0]}}</p>
<p :style="{color:dynamicStyle.times_color}">{{this.outTime[1]}}</p>
<p :style="{color:dynamicStyle.times_color}">{{this.outTime[2]}}</p>
</div>
<div class="box">
<div class="box-cotent">
<div class="goods-box"
:style="{backgroundImage:`url(${dynamicStyle.goods_bg})`,paddingTop:goods.group_info.channel==1?'0.28rem':goods.group_info.channel==2?'0.16rem':'0.2rem'}">
<p class="title" :style="{color:dynamicStyle.title_color}">{{goods.title}}</p>
<ul class="g-b-u"
:style="{marginLeft:goods.group_info.channel==1?'0.12rem':'0.14rem',marginTop:goods.group_info.channel==2?'0.12rem':'0.28rem'}">
<li v-for="(item, indexProduct) in goods.product"
:style="{backgroundImage:`url(${dynamicStyle.goods_a})`}"
style="text-align: center;">
<span class="g-b-u-t-new">立减金 <span>x{{ item.send_num }}</span></span>
<p class="money">
<span></span>
{{item.reduce_amount}}
</p>
<p class="reduce">满{{item.denomination}}可用</p>
<!-- 轮播 -->
<div class="g-b-but-new-box">
<div class="swiper-container demo-swiper1" :id="`J-swiper${indexProduct}`">
<div class="swiper-wrapper demo-swiper-wrapper">
<div class="swiper-slide demo-swiper-slide"
v-for="(items, index) in item.voucher" :key="index">
<p>
{{ items.text }}({{ items.num }})
</p>
</div>
</div>
</div>
</div>
</li>
</ul>
<p class="notis" :style="{color:dynamicStyle.notis_color}" v-show="goods.product.length>3">
滑动查看更多
</p>
</div>
<p class="g_b_title"
v-if="goods.send_status !== 2 && (goods.group_info.channel==3||goods.group_info.channel==1&&goods.group_info.receive_mode==2)">
<img src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/combining/ysf_title_icon.png"
alt="">
{{goods.group_info.channel==1?'支付宝账号':'云闪付账号'}}
<img src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/combining/ysf_title_icon.png"
alt="">
</p>
<template
v-if="goods.send_status !== 2 && (goods.group_info.channel==3||goods.group_info.channel==1&&goods.group_info.receive_mode==2)">
<input type="text" maxlength="50"
:placeholder="goods.group_info.channel==3?'请输入手机号':'请输入账号'" v-model="form.confirm">
<input type="text" maxlength="50"
:placeholder="goods.group_info.channel==3?'请再次输入手机号':'请再次输入账号'"
v-model="form.receive_account">
</template>
<button type="button" class="but"
:style="{marginTop:goods.group_info.channel==2||goods.group_info.channel==1&&goods.group_info.receive_mode==1&&'0.12rem'}"
alt="" @click="submit" :disabled="loading"
v-show="goods.send_status === 5 || goods.send_status === 3 || goods.send_status === 4"></button>
<!-- 发放中。。。 -->
<div class="ff-btn" v-show="goods.send_status === 1">
<div class="ff-text">发放中,请等待<span class="ani_dot">...</span></div>
</div>
<p class="time" v-if="goods.group_info.time_limit.timer_show!=2"
:style="{marginTop: 0,color:dynamicStyle.time_color}">
生效时间:{{goods.group_info.time_limit.effect_time.start_time}}
~
{{goods.group_info.time_limit.effect_time.end_time}}</p>
<p class="time" :style="{marginTop: '0.05rem',color:dynamicStyle.time_color}"
v-if="goods.group_info.time_limit.receive_time.start_time">
领取时间:{{goods.group_info.time_limit.receive_time.start_time}} ~
{{goods.group_info.time_limit.receive_time.end_time}}</p>
</div>
<div class="box-footer">
<img class="b-f-img" :src="dynamicStyle.footer_top" alt="">
<div class="b-f-b" :style="{backgroundImage:`url(${dynamicStyle.footer_middle})`}">
<div class="b-f-i" v-html="goods.group_info.instruction"
:style="{color:dynamicStyle.footer_color}" v-if="goods.group_info.instructionType==1">
</div>
<img v-else :src="goods.group_info.group_image" alt="" class="group_image">
</div>
<img class="b-f-img" :style="{filter:goods.receive_status==1?'grayscale(0)':'grayscale(0.6)'}"
:src="dynamicStyle.footer_bottom" alt="">
</div>
</div>
</div>
<!-- 弹窗 -->
<div class="tip-pop mask" v-show="popMsg">
<div class="tip-main">
<div class="tip-pop-head">
<img src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/combining/zh-dd.png"
class="tip-pop-dd" />
</div>
<p class="tip-title">温馨提示</p>
<p class="tip-card-status" v-show="goods.send_status === 2">全部领取成功</p>
<p class="tip-card-status" v-show="goods.send_status === 3" style="color: #FD2323;">全部领取失败</p>
<p class="tip-card-status" v-show="goods.send_status === 4">领取成功{{ isOKLength }}条,<span
style="color: #FD2323;font-size: 0.16rem;">失败{{ isErrLength }}条</span></p>
<p class="tip-card-text" v-show="goods.send_status === 2">
请前往微信-我的卡包查询使用
</p>
<p class="tip-card-text" style="padding: 0 0.2rem;" v-show="goods.send_status === 3">
{{ goods.err_msg[0] }}
</p>
<p class="tip-card-text" v-show="goods.send_status === 4">
请根据界面错误原因进行调整后再重试
</p>
<div v-if="errListShow"
style="padding: 0 0.2rem;text-align: left;max-height: 2rem;overflow-y: scroll;">
<p class="err-list-p" v-for="(item,index) in goods.err_msg">错误{{Number(index) + 1}}: {{ item }}
</p>
</div>
<button class="tip-btn" v-show="goods.send_status === 2 || goods.send_status === 3"
@click="() => popMsg = false">我知道了</button>
<button class="tip-btn" v-show="goods.send_status === 4" @click="() => {
errListShow = !errListShow
if(errListShow === false){
popMsg = false;
}
}">{{
errListShow ? '我知道了' : '查看失败原因' }}</button>
</div>
</div>
</div>
<!-- 弹出提示 -->
<div class="popboxshow" v-if="popboxshow" :class="popboxshow?'active':''">
<div class="tip">
<p>{{tiptext}}</p>
<span @click="knowFn">知道了</span>
</div>
</div>
</div>
</body>
<script>
const phoneReg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
const emailReg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
new Vue({
el: "#app",
data() {
return {
goods: '',
backAble: (~~localStorage.getItem('goodsCount')) > 1,
token: localStorage.getItem('token'),
key: localStorage.getItem('key'),
promptShow: false,
popShow: false,
is: false,
cls: null,
prompt_text: '',
receive_time: '',
message: '',
loading: false,
openId: localStorage.getItem('openid'),
copyLink: '',
outTime: [],
form: {
confirm: null,
receive_account: null
},
errListShow: false,
popMsg: false,
popboxshow: false,
maskshow: false,
tiptext: "",
cont: 0,
timeGet: null,
isOKLength: 0,
isErrLength: 0,
isTimeOut: 5000,
swiper: null
};
},
mounted() {
document.title = localStorage.getItem('title');
this.code_batch_id = JSON.parse(localStorage.getItem('goodsInfo')).entity.code_batch_id;
this.getProductDetail();
/* 倒计时 */
const key_expiration_time = localStorage.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 = [];
}
},
computed: {
dynamicStyle() {
switch (Number(this.goods.group_info.channel)) {
case 1:
return {
bg: '#4989f5',
title_color: '#fff',
banner: 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/combining/zfb_common_img_banner.png',
goods_bg: 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/combining/zfb_redenvelope_img.png',
footer_top: 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/combining/zfb_common_img_top.png',
footer_middle: 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/combining/zfb_common_img_middle.png',
footer_bottom: 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/combining/zfb_common_img_d.png',
footer_color: '#4989F5',
notis_color: '#FF486D',
times_color: '#1b7bff',
goods_a: 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/combining/llj-box-new.png',
};
case 2:
return {
bg: '#cee5be',
title_color: '#239700',
banner: 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/combining/wx_common_img_banner.png',
goods_bg: 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/combining/wx_redenvelope_img.png',
footer_top: 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/combining/wx_common_img_top.png',
footer_middle: 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/combining/wx_common_img_middle.png',
footer_bottom: 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/combining/wx_common_img_d.png',
footer_color: '#5eb145',
time_color: '#5eb145',
times_color: '#5eb145',
notis_color: '#239700',
goods_a: 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/combining/llj-box-new.png',
};
case 3:
return {
bg: '#ff4830',
title_color: '#FF3024',
banner: 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/combining/ysf_common_img_banner.png',
goods_bg: 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/combining/ysf_redenvelope_img.png',
footer_top: 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/combining/ysf_common_img_top.png',
footer_middle: 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/combining/ysf_common_img_middle.png',
footer_bottom: 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/combining/ysf_common_img_d.png',
footer_color: '#FF4901',
times_color: '#ed703f',
notis_color: '#FFD3D8',
goods_a: 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/combining/llj-box-new.png',
};
default:
return {};
}
},
},
methods: {
//获取商品详情
getProductDetail() {
const self = this;
req.axiosGet('/key/group/v2/groupProductDetail', {
token: self.token,
code_batch_id: self.code_batch_id
}).then(res => {
if (res.code == 200) {
let new_data = res.data;
new_data.product = self.computeNum(new_data.product);
self.goods = new_data;
// send_status 1发放中2全部成功 3全部失败4部分失败 5未领取
self.popMsg = self.goods.send_status === 2 || self.goods.send_status === 3 || self.goods.send_status === 4 ? true : false;
// 部分失败
if (self.goods.send_status === 4) {
let all_product_voucher = [];
new_data.product.forEach(item => {
all_product_voucher = all_product_voucher.concat(item.voucher);
});
let is_err_length = all_product_voucher.filter(item => item.status === 9).length;
self.isOKLength = all_product_voucher.length - is_err_length;
self.isErrLength = is_err_length;
}
// 1.发放中 轮循
if (res.data.send_status === 1) {
// 2.发放中才有 轮播
setTimeout(() => {
new_data.product.forEach((item, index) => {
if (item.voucher.length > 1) {
new Swiper(`#J-swiper${index}`, {
loop: true,
direction: "vertical",
autoplay: 1000
});
}
});
}, 1000);
clearInterval(self.timeGet);
self.timeGet = null;
setTimeout(() => {
self.groupProductVoucherDetail();
}, 5000);
}
} else {
self.openErrorDialog(res.message);
}
}).catch();
},
// 轮循
groupProductVoucherDetail() {
let self = this;
req.axiosPost('/key/group/groupProductVoucherDetail', {
token: this.token,
code_batch_id: this.code_batch_id
}).then(res => {
if (res.code === 200) {
let new_data = res.data.product;
// send_status 1发放中2全部成功 3全部失败4部分失败 5未领取
// status 1待领取2发放中3待使用4已使用5领取失败
// 第一步:替换数据
let old_product_all = self.goods.product;
let new_voucher_all = []; // 存储所有voucher 用于判断
let all_err = []; // 所有错误
for (let i = 0; i < old_product_all.length; i++) {
let el = new_data.find(item => item.id === old_product_all[i].id);
if (el) {
// 存储错误
el.order_voucher.forEach(row => {
if (row.receive_error !== "") {
all_err.push(row.receive_error);
}
});
// 合并所有数组 用于判断最终状态
new_voucher_all = new_voucher_all.concat(el.order_voucher);
// 替换 voucher
old_product_all[i].voucher = el.order_voucher;
}
}
// 替换
self.goods.product = self.computeNum(old_product_all);
// 第二步:状态判断
// 6发放中 1已领取 9领取失败 20待领取 轮循+详情
// 发放中 备注:只要有一个 发放中 -> send_status 1 发放中
let ffLength = new_voucher_all.filter(item => item.status === 6);
if (ffLength.length > 0) {
self.goods.send_status = 1;
// 1.发放中才有 轮播
setTimeout(() => {
self.goods.product.forEach((item, index) => {
if (item.voucher.length > 1) {
new Swiper(`#J-swiper${index}`, {
loop: true,
initialSlide: 0,
direction: "vertical",
autoplay: 1000
});
}
});
}, 1000);
setTimeout(() => {
if (self.cont > 10) {
// 超过50s增加请求间隔 为 30s
self.isTimeOut = 30000;
// 设置最大请求数 60分钟
if (self.cont > 60) {
self.openErrorDialog("请刷新页面重试!");
// 放弃
return;
}
}
self.groupProductVoucherDetail();
self.cont++;
}, self.isTimeOut);
return;
}
// 全部失败+部分失败
// 备注:领取失败失败数,大于等于全部数量 -> send_status 3 全部失败
// 6发放中 1已领取 9领取失败 20待领取 轮循+详情
let errLength = new_voucher_all.filter(item => item.status === 9);
if (errLength.length > 0 && new_voucher_all.length === errLength.length) {
self.goods.send_status = 3;
// 错误去重
self.goods.err_msg = [...new Set(all_err)];
self.popMsg = true;
return;
} else if (errLength.length > 0 && new_voucher_all.length > errLength.length) {
// 领取失败数,小于全部数量 -> send_status 4 部分失败
// 错误去重
self.goods.err_msg = [...new Set(all_err)];
self.isOKLength = new_voucher_all.length - errLength.length;
self.isErrLength = errLength.length;
self.goods.send_status = 4;
self.popMsg = true;
return;
}
// 全部领取
let allOkLength = new_voucher_all.filter(item => item.status === 1);
if (allOkLength.length > 0 && allOkLength.length === new_voucher_all.length) {
self.goods.send_status = 2;
self.popMsg = true;
return;
}
}
});
},
/* ******************************************** 官方领取 ******************************************** */
/* 直接领取 */
directSubmit() {
2024-04-28 09:39:41 +08:00
let self = this;
2024-04-28 09:25:40 +08:00
self.loading = true;
setTimeout(() => {
self.loading = false;
}, 5000);
const data = {
2024-04-28 09:39:41 +08:00
key: self.key,
token: self.token,
code_batch_id: self.code_batch_id,
2024-04-28 09:25:40 +08:00
receive_mode: 1
};
req.axiosPost("/key/couponGroupUsage", data)
.then((res) => {
if (res.code == 200) {
2024-04-28 09:39:41 +08:00
// 第一步:是否是微信环境 -> 公众号授权
if (self.openId && navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1) {
self.publicCollection(res.data.order_number);
} else {
/* 小程序 */
window.location.replace(res.data.redirect_url);
self.timeGet = setInterval(() => {
self.getProductDetail(); //
// self.groupProductVoucherDetail(); // 没有返回值,解决不了
}, 3000);
2024-04-28 09:25:40 +08:00
}
} else {
2024-04-28 09:39:41 +08:00
self.axiosErrorFun(res.code, res.message);
2024-04-28 09:25:40 +08:00
}
})
2024-04-28 09:39:41 +08:00
.catch((err) => { self.loading = false; });
2024-04-28 09:25:40 +08:00
},
/* 公众号领取 */
publicCollection() {
let params = {
token: this.token,
code_batch_id: this.code_batch_id,
channel_user_id: this.openId,
2024-04-28 09:39:41 +08:00
is_webview: 1,
grant_channel: "wechat"
2024-04-28 09:25:40 +08:00
};
req.axiosPost("/voucher/groupVoucherGrant", params)
.then((res) => {
if (res.code == 200) {
this.getProductDetail();
} else {
this.axiosErrorFun(res.code, res.message);
}
})
.catch((err) => { this.loading = false; });
},
/* 支付宝官方领取H5跳转 */
toLinkAlipay() {
let self = this;
let banklink = encodeURIComponent(
window.location.origin +
`/packkey/combiningAlipay.html?codeBatchId=${this.code_batch_id}&token=${this.token}`
);
let link = "https://openapi.1688sup.com/alipay/oauth?jump=" + banklink;
let ua = navigator.userAgent.toLowerCase(); //判断用户打开链接环境
if (isWx() ||
(ua.indexOf("android") > -1 &&
ua.indexOf("baiduboxapp") > -1) ||
ua.indexOf("windows") > -1) {
//复制链接地址,提醒去浏览器打开
this.message = '请点击下方[复制]按钮,复制链接到浏览器打开!';
this.copyLink = link;
} else {
//唤起支付宝
window.location.replace(link);
}
},
/* ******************************************** 账号领取 ******************************************** */
/* 立即领取 */
submit() {
2024-04-28 09:39:41 +08:00
this.directSubmit();
2024-04-28 09:25:40 +08:00
},
// 提交函数
submitOne(data) {
/* 领取立减金 */
req.axiosPost("/key/couponGroupUsage", data)
.then(({ code, message }) => {
if (code == 200) {
this.getProductDetail();
} else {
this.axiosErrorFun(code, message);
}
})
.catch((err) => { this.loading = false; });
},
// 重试函数
resetSubmit(data) {
/* 领取立减金 */
req.axiosPost("/voucher/groupVoucherRetry", data)
.then(({ code, message }) => {
if (code == 200) {
this.getProductDetail();
} else {
this.axiosErrorFun(code, message);
}
})
.catch((err) => { this.loading = false; });
},
/* 返回 */
backGoodsFn() {
if (this.backAble) {
window.location.replace('./homepage.html');
} else {
history.go(-2);
}
},
/* 接口异常处理 */
axiosErrorFun(code, message) {
this.loading = false;
if (code == 403) {
if (this.backAble) {
this.message = message;
setTimeout(() => {
window.location.href = localStorage.getItem('entryLink');
}, 3000);
} else {
this.message = message;
}
} else {
this.message = message;
}
},
//复制文本
copyFn() {
var textArea = document.createElement("textarea");
textArea.value = this.copyLink;
document.body.appendChild(textArea);
textArea.select();
document.execCommand("copy");
this.tips("复制成功,请到浏览器打开");
document.body.removeChild(textArea);
this.copyshow = false;
this.maskshow = false;
this.copyLink = null;
this.message = '';
},
/* 触发提示 */
tips(text) {
this.cls && clearTimeout(this.cls);
this.prompt_text = text;
this.promptShow = true;
this.cls = setTimeout(() => {
this.promptShow = false;
}, 3000);
},
// 错误弹出框关闭
knowFn() {
this.popboxshow = false;
this.maskshow = false;
},
// 错误弹窗
openErrorDialog(tip) {
this.maskshow = true;
this.tiptext = tip;
this.popboxshow = true;
},
// 6发放中 1待使用 9领取失败 20待领取 轮循+详情
formatStatusText(status) {
switch (status) {
case 6:
return "发放中";
case 1:
return "已领取";
case 9:
return "领取失败";
case 20:
return "待领取";
case 2:
return "已领取";
default:
return "";
}
},
// 计算 num
computeNum(data) {
const self = this;
let new_product = data.map(item => {
let result = item.voucher.reduce((acc, curr) => {
let existingObj = acc.find(obj => obj.status === curr.status);
if (existingObj) {
existingObj.num++;
existingObj.text = self.formatStatusText(existingObj.status);
} else {
acc.push({ status: curr.status, num: 1, text: self.formatStatusText(curr.status) });
}
return acc;
}, []);
item.voucher = result;
return item;
});
return new_product;
}
}
})
</script>
</html>