HandOver-liuwu
/
mobileclient
mirror of https://codeup.aliyun.com/lsxd/marketing/mobileclient.git
4
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
mobileclient/reduce.html

290 lines
11 KiB
HTML
Raw Normal View History

营销系统C端更新
2022-06-13 16:49:06 +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,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/siteqiexchange/js/swiper.min.js"></script>
<link href="https://lsxdemall.oss-cn-beijing.aliyuncs.com/siteqiexchange/css/swiper.min.css" rel="stylesheet" />
style:调整C端兑换码与优惠券结构
2022-10-11 09:43:31 +08:00
<link rel="stylesheet"
href="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/css/homepage1_3_0.css?v=124" />
营销系统C端V1_4锁版
2022-08-17 17:03:56 +08:00
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/js/api1_4_0.js"></script>
营销系统C端更新
2022-06-13 16:49:06 +08:00
<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">
<!-- 弹出框 -->
C端商品根据状态展示样式交互处理
2022-06-16 18:07:46 +08:00
<div class="mask" v-if="maskshow"></div>
营销系统C端更新
2022-06-13 16:49:06 +08:00
<!-- 单条弹出框 -->
<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>
解决微信领取支付宝立减金，ios复制链接不成功
2022-06-17 14:23:34 +08:00
<!-- 复制提示 -->
<div class="popboxshow" v-if="copyshow" :class="copyshow?'active':''">
<div class="tip">
<p>请点击下方[复制]按钮，复制链接到浏览器打开！</p>
<span @click="copyFn">复制</span>
</div>
</div>
style:调整C端兑换码与优惠券结构
2022-10-11 09:43:31 +08:00
<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">
<span>￥</span>{{reduceInfo.reduce_amount}}
</p>
<p class="full_money">满{{reduceInfo.denomination}}可用</p>
营销系统C端更新
2022-06-13 16:49:06 +08:00
</div>
style:调整C端兑换码与优惠券结构
2022-10-11 09:43:31 +08:00
<div class="coupon-right">
<p class="title">{{reduceInfo.batch_goods_name}}</p>
<p style="font-size: 0.11rem">
{{reduceInfo.card_type|cardType}}可用
</p>
<p class="validity">
有效期:{{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':''">立即领取</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>
【c端】立减金商品可用时间段的展示位置，根据后台设置的可用时间段规则来展示
2022-08-15 16:49:16 +08:00
</ul>
style:调整C端兑换码与优惠券结构
2022-10-11 09:43:31 +08:00
<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>
营销系统C端更新
2022-06-13 16:49:06 +08:00
</div>
style:调整C端兑换码与优惠券结构
2022-10-11 09:43:31 +08:00
<div class="content">
<h3>使用规则</h3>
<p v-html="reduceInfo.instruction"></p>
</div>
</div>
调整单商品/多商品进入商品列表页，详情页逻辑交互处理
2022-06-16 11:16:54 +08:00
</div>
营销系统C端更新
2022-06-13 16:49:06 +08:00
</body>
<script>
style:调整C端兑换码与优惠券结构
2022-10-11 09:43:31 +08:00
let goodsDetail = null, goodsCount = null;
营销系统C端更新
2022-06-13 16:49:06 +08:00
new Vue({
el: "#reduce",
style:调整C端兑换码与优惠券结构
2022-10-11 09:43:31 +08:00
data () {
营销系统C端更新
2022-06-13 16:49:06 +08:00
return {
plaflam: 1, //支付宝
promtshow: false,
promttip: "警告提示",
style:调整C端兑换码与优惠券结构
2022-10-11 09:43:31 +08:00
copyshow: false,//解决ios，必须触发按钮复制
copyLink: '',//存储链接
营销系统C端更新
2022-06-13 16:49:06 +08:00
popboxshow: false,
maskshow: false,
style:调整C端兑换码与优惠券结构
2022-10-11 09:43:31 +08:00
bindClick: false,
营销系统C端更新
2022-06-13 16:49:06 +08:00
tiptext: "错误提示",
goodInfo: {}, //商品信息
reduceInfo: {}, //券信息
orderId: '',
C端立减金详情页面展示返回按钮
2022-06-15 14:41:42 +08:00
backAble: true,
style:调整C端兑换码与优惠券结构
2022-10-11 09:43:31 +08:00
receive_time: {},//领取立减金时间
营销系统C端更新
2022-06-13 16:49:06 +08:00
tip: `1、立减金自领取之日起0天有效，请在有效期内使用<br />
2、微信立减金自领取后每个立减金一次性使用，不兑换，不找零，到期后自动失效，逾期未使用不再补发。使用微信支付进行付款（大于立减金面额0.01元以上）即可自动抵扣<br />
3、多张立减金可在单笔微信支付订单中一起使用，但当用户的立减金超过8张时，系统会选取其中一部分使用，不保证在一张订单中全部使用<br />
4、在中国境内商户使用微信支付即可使用，少数特定商户（包括但不限于：CoCo奶茶、优衣库、星巴克、肯德基、必胜客、同程艺龙、热风、太平鸟、孩子王、航联保险、华为商城、Miss
Sixty、Ochirly、Apple商城、FivePlus、信用卡还款、零钱通、理财通等）、以及社交支付（如转账、红包、个人收款码支付等）及合单支付（微信支付订单号为44开头的交易）无法使用立减金<br />
5、使用立减金的微信支付订单，如发生全额退款，且立减金仍在有效期内，立减金将自动退还给用户，如立减金已过期，则不退还给用户；如发生部分退款，用户支付金额将按比例原路退还，立减金将不退还给用户<br />`,
};
},
style:调整C端兑换码与优惠券结构
2022-10-11 09:43:31 +08:00
created () {
营销系统C端更新
2022-06-13 16:49:06 +08:00
/* 获取立减金信息*/
style:调整C端兑换码与优惠券结构
2022-10-11 09:43:31 +08:00
goodsDetail = JSON.parse(sessionStorage.getItem("goodsInfo"));
更换核销product_id->goods_id
2022-06-15 20:28:39 +08:00
this.goodInfo = goodsDetail;
调整单商品/多商品进入商品列表页，详情页逻辑交互处理
2022-06-16 11:16:54 +08:00
/*默认显示*/
style:调整C端兑换码与优惠券结构
2022-10-11 09:43:31 +08:00
if (goodsDetail.available != 1) {
this.openErrorDialog(product_status(goodsDetail.available, goodsDetail));
this.bindClick = true;
调整单商品/多商品进入商品列表页，详情页逻辑交互处理
2022-06-16 11:16:54 +08:00
}
C端立减金详情页面展示返回按钮
2022-06-15 14:41:42 +08:00
goodsCount = sessionStorage.getItem('goodsCount');
this.backAble = goodsCount > 1;//多个商品才有返回
更换核销product_id->goods_id
2022-06-15 20:28:39 +08:00
this.reduceInfo = goodsDetail.entity;
this.plaflam = goodsDetail.entity.channel;
style:调整C端兑换码与优惠券结构
2022-10-11 09:43:31 +08:00
if (goodsDetail.entity.time_limit.use_time.type == 'week') { //处理星期连贯操作
goodsDetail.entity.time_limit.use_time.week = sortWeeks(goodsDetail.entity.time_limit.use_time.week);
更换核销product_id->goods_id
2022-06-15 20:28:39 +08:00
}
style:调整C端兑换码与优惠券结构
2022-10-11 09:43:31 +08:00
this.receive_time = goodsDetail.entity.time_limit;
营销系统C端更新
2022-06-13 16:49:06 +08:00
},
filters: {
style:调整C端兑换码与优惠券结构
2022-10-11 09:43:31 +08:00
cardType (val) {
更换核销product_id->goods_id
2022-06-15 20:28:39 +08:00
return val.map((item) => {
style:调整C端兑换码与优惠券结构
2022-10-11 09:43:31 +08:00
return item == 1 ? "借记卡" : "信用卡" + " ";
}).join(" ");
营销系统C端更新
2022-06-13 16:49:06 +08:00
},
},
methods: {
style:调整C端兑换码与优惠券结构
2022-10-11 09:43:31 +08:00
backgoodsFn () {
C端立减金详情页面展示返回按钮
2022-06-15 14:41:42 +08:00
if (goodsCount > 1) {
window.location.replace('./homepage.html');
} else {
history.go(-2);
}
},
style:调整C端兑换码与优惠券结构
2022-10-11 09:43:31 +08:00
receiveFn () {
营销系统C端更新
2022-06-13 16:49:06 +08:00
let self = this;
style:调整C端兑换码与优惠券结构
2022-10-11 09:43:31 +08:00
if (self.goodInfo.available != 1) {
self.openErrorDialog(product_status(self.goodInfo.available, self.goodInfo));
return
C端商品根据状态展示样式交互处理
2022-06-16 18:07:46 +08:00
}
营销系统C端更新
2022-06-13 16:49:06 +08:00
let data = {
style:调整C端兑换码与优惠券结构
2022-10-11 09:43:31 +08:00
key: localStorage.getItem("key"),
更换核销product_id->goods_id
2022-06-15 20:28:39 +08:00
goods_id: this.goodInfo.entity.goods_id,
营销系统C端更新
2022-06-13 16:49:06 +08:00
code_batch_id: this.goodInfo.code_batch_id,
style:调整C端兑换码与优惠券结构
2022-10-11 09:43:31 +08:00
token: localStorage.getItem("token"),
营销系统C端更新
2022-06-13 16:49:06 +08:00
};
req.axiosPost("/key/usage", data)
.then((res) => {
style:调整C端兑换码与优惠券结构
2022-10-11 09:43:31 +08:00
营销系统C端更新
2022-06-13 16:49:06 +08:00
if (res.code == 200) {
解决C端bug：last_product_id,可用时间
2022-07-11 09:40:55 +08:00
sessionStorage.setItem("lastid", self.goodInfo.product_id);
营销系统C端更新
2022-06-13 16:49:06 +08:00
this.orderId = res.data.order_number;
let ua = navigator.userAgent.toLowerCase(); //判断用户打开链接环境
if (self.plaflam == 1) {
//支付宝-微信环境中不能唤起支付宝
self.toLinkAlipay();
}
if (self.plaflam == 2) {
//微信
if (ua.indexOf("dingtalk") > -1) {
//在钉钉内置环境打开，不能唤起微信小程序
self.openErrorDialog("请在其他浏览器打开!");
} else {
//唤起微信福利官小程序
window.location.replace(res.data.redirect_url);
}
}
} else {
self.openErrorDialog(res.message);
if (res.code == -1) {
if (goodsCount > 1) {
setTimeout(() => {
window.location.replace("./homepage.html");
}, 3000);
} else {
解决【营销计划-立减金C端】只有一个商品，在商品详情页兑换码暂停，点击立即领取。报401错误。
2022-06-15 17:04:12 +08:00
self.openErrorDialog(res.message);
// window.location.replace("./index.html");
营销系统C端更新
2022-06-13 16:49:06 +08:00
}
}
}
})
style:调整C端兑换码与优惠券结构
2022-10-11 09:43:31 +08:00
.catch((err) => { });
营销系统C端更新
2022-06-13 16:49:06 +08:00
},
style:调整C端兑换码与优惠券结构
2022-10-11 09:43:31 +08:00
toLinkAlipay () {
营销系统C端更新
2022-06-13 16:49:06 +08:00
//支付宝H5跳转
let self = this;
let banklink = encodeURIComponent(
window.location.origin +
解决【营销系统-C端】超过充值批次金额或者异常情况，点击立即领取，跳转到其他网页
2022-06-15 09:42:49 +08:00
"/alipay.html?orderNumber=" + this.orderId
营销系统C端更新
2022-06-13 16:49:06 +08:00
);
let link = "http://openapi.1688sup.com/alipay/oauth?jump=" + banklink;
let ua = navigator.userAgent.toLowerCase(); //判断用户打开链接环境
if (ua.match(/MicroMessenger/i) == "micromessenger") {
//复制链接地址，提醒去浏览器打开
style:调整C端兑换码与优惠券结构
2022-10-11 09:43:31 +08:00
this.copyLink = link;
this.copyshow = true;
this.maskshow = true;
营销系统C端更新
2022-06-13 16:49:06 +08:00
} else {
//唤起支付宝
window.location.replace(link);
}
},
//错误弹出框关闭
style:调整C端兑换码与优惠券结构
2022-10-11 09:43:31 +08:00
knowFn () {
营销系统C端更新
2022-06-13 16:49:06 +08:00
this.popboxshow = false;
this.maskshow = false;
},
//错误弹出框
style:调整C端兑换码与优惠券结构
2022-10-11 09:43:31 +08:00
openErrorDialog (tip) {
营销系统C端更新
2022-06-13 16:49:06 +08:00
this.maskshow = true;
this.tiptext = tip;
this.popboxshow = true;
},
// 单条弹框
style:调整C端兑换码与优惠券结构
2022-10-11 09:43:31 +08:00
openDialog (tip) {
营销系统C端更新
2022-06-13 16:49:06 +08:00
this.promtshow = true;
this.promttip = tip;
setTimeout(() => {
this.promtshow = false;
this.promttip = "";
}, 3000);
},
//复制文本
style:调整C端兑换码与优惠券结构
2022-10-11 09:43:31 +08:00
copyFn () {
营销系统C端更新
2022-06-13 16:49:06 +08:00
var textArea = document.createElement("textarea");
解决微信领取支付宝立减金，ios复制链接不成功
2022-06-17 14:23:34 +08:00
textArea.value = this.copyLink;
营销系统C端更新
2022-06-13 16:49:06 +08:00
document.body.appendChild(textArea);
textArea.select();
document.execCommand("copy");
this.openDialog("复制成功，请到浏览器打开");
document.body.removeChild(textArea);
},
},
});
</script>
</html>