红包，立减金
This commit is contained in:
parent
40d0ba5cb2
commit
a41348f1a2
|
|
@ -3,7 +3,7 @@
|
|||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"start": "webpack-dev-server --config build/webpack.dev.js",
|
||||
"start": "webpack-dev-server --open --config build/webpack.dev.js",
|
||||
"com": "cross-env NODE_ENV=development webpack --config build/webpack.com.js",
|
||||
"dev": "cross-env NODE_ENV=development webpack --config build/webpack.dev.js",
|
||||
"build": "cross-env NODE_ENV=production webpack --config build/webpack.prod.js"
|
||||
|
|
|
|||
|
|
@ -3,7 +3,8 @@
|
|||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<!-- <meta name="viewport" content="width=device-width,initial-scale=1.0"> -->
|
||||
<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><%= htmlWebpackPlugin.options.title %></title>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -16,6 +16,14 @@ const routes = [
|
|||
{
|
||||
path: '/comProduct',
|
||||
component: () => import('../views/comProduct/index.vue')
|
||||
},
|
||||
{
|
||||
path: '/cash',
|
||||
component: () => import('../views/cash/index.vue')
|
||||
},
|
||||
{
|
||||
path: '/voucher',
|
||||
component: () => import('../views/voucher/index.vue')
|
||||
}
|
||||
]
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,170 @@
|
|||
#redPacketsViews {
|
||||
// height: 6rem !important;
|
||||
background: #f4f6f9;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
background-color: rgb(250, 67, 59);
|
||||
}
|
||||
|
||||
#redPacketsViews ::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#redPacketsViews .top {
|
||||
height: 505px;
|
||||
}
|
||||
|
||||
#redPacketsViews .box {
|
||||
padding: 10px 10px 20px;
|
||||
box-sizing: border-box;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url("https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/redPacktes/common_img_main_1.png") no-repeat;
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
#redPacketsViews .instruction-box {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#redPacketsViews .effect_date {
|
||||
font-size: 12px;
|
||||
line-height: 40px;
|
||||
color: #ffc49c;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#redPacketsViews .effect_date>span {
|
||||
background: linear-gradient(to left top, #ff6049, #fd322a);
|
||||
border: 1px solid #ffc3a5;
|
||||
border-radius: 20px;
|
||||
padding: 5px 20px;
|
||||
}
|
||||
|
||||
#redPacketsViews .bt {
|
||||
width: 200px;
|
||||
height: 46px;
|
||||
background: url("https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/but_back_img.png");
|
||||
background-size: 100% 100%;
|
||||
margin: 0 auto;
|
||||
margin-top: 100px;
|
||||
text-align: center;
|
||||
line-height: 42px;
|
||||
color: #df1104;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#redPacketsViews .title {
|
||||
margin-top: 30px;
|
||||
font-size: 25px;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#redPacketsViews .type {
|
||||
color: #fd3b2d;
|
||||
font-size: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#redPacketsViews .type>span {
|
||||
background-color: #fdc9a2;
|
||||
border-radius: 20px;
|
||||
padding: 3px 15px;
|
||||
}
|
||||
|
||||
#redPacketsViews .money {
|
||||
font-weight: bold;
|
||||
color: #fe0f0b;
|
||||
font-size: 32px;
|
||||
height: 97px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin-left: -2px;
|
||||
line-height: 140px;
|
||||
}
|
||||
|
||||
#redPacketsViews .tag {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
#redPacketsViews .instruction-text {
|
||||
font-weight: bold;
|
||||
font-size: 12px;
|
||||
color: #060606;
|
||||
}
|
||||
|
||||
#redPacketsViews .available_time {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#redPacketsViews .timeList {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 33.33%);
|
||||
text-align: center;
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
#redPacketsViews .timeList li {
|
||||
font-size: 11px;
|
||||
color: #a8a8a8;
|
||||
}
|
||||
|
||||
#redPacketsViews .scroll {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
#redPacketsViews .instruction-header {
|
||||
width: 100%;
|
||||
height: 43px;
|
||||
background: url("https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/redPacktes/common_img_header.png") no-repeat;
|
||||
background-size: 100%;
|
||||
margin-bottom: -3px;
|
||||
}
|
||||
|
||||
#redPacketsViews .instruction {
|
||||
width: 100%;
|
||||
background: url("https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/redPacktes/common_img_text.png") no-repeat;
|
||||
min-height: 450px;
|
||||
background-size: 100% 100%;
|
||||
font-size: 11px;
|
||||
color: #959595;
|
||||
padding: 0 12px 12px;
|
||||
box-sizing: border-box;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
#redPacketsViews .TextBlock {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
#redPacketsViews .notice {
|
||||
width: 160px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#redPacketsViews .instruction-2 {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
#redPacketsViews .center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#redPacketsViews .backIcon {
|
||||
width: 40px;
|
||||
position: fixed;
|
||||
left: 10px;
|
||||
top: 10px;
|
||||
z-index: 1001;
|
||||
}
|
||||
|
|
@ -0,0 +1,394 @@
|
|||
<template>
|
||||
<div id="redPacketsViews">
|
||||
<!-- v-if="backAble" -->
|
||||
<img
|
||||
@click="backGoodsFn"
|
||||
class="backIcon"
|
||||
src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/backprepageBtn.png"
|
||||
alt=""
|
||||
/>
|
||||
|
||||
<!-- <div class="prompt" :class="promptShow ? 'proactive' : ''">
|
||||
复制成功，请到浏览器打开
|
||||
</div> -->
|
||||
|
||||
<!-- 弹出提示 -->
|
||||
<!-- <model-pop :show.sync="popShow" :title="popTitle" :status="popStatus" :text="popText" :bottom_text="popBt"
|
||||
@backFunction="copyFn"></model-pop> -->
|
||||
<!-- 单条弹出框 -->
|
||||
|
||||
<div class="box">
|
||||
<div class="top">
|
||||
<p class="title">{{ goodsInfo.entity.batch_goods_name }}</p>
|
||||
<p class="effect_date">
|
||||
<span>红包有效期截止 {{ goodsInfo.entity.end_time }}</span>
|
||||
</p>
|
||||
<p class="money">
|
||||
<span class="tag" :style="{ fontSize: fonts().b }">￥</span>
|
||||
<span :style="{ fontSize: fonts().a }">{{
|
||||
goodsInfo.entity.cash_amount_type === "1"
|
||||
? parseFloat(goodsInfo.entity.denomination)
|
||||
: `${parseFloat(goodsInfo.entity.min_denomination)}~${parseFloat(
|
||||
goodsInfo.entity.max_denomination
|
||||
)}`
|
||||
}}</span>
|
||||
</p>
|
||||
<p class="type">
|
||||
<span>{{
|
||||
goodsInfo.entity.cash_amount_type === "1" ? "固额红包" : "随机红包"
|
||||
}}</span>
|
||||
</p>
|
||||
<div class="bt" v-if="goodsInfo.available == 9">
|
||||
<!-- {{ buttonTextFun(goodsInfo.type, "received") }} -->
|
||||
立即领取
|
||||
</div>
|
||||
<div class="bt" @click="receive" v-else>
|
||||
立即领取
|
||||
<!-- {{ buttonTextFun(goodsInfo.type, "receive") }} -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="instruction-box">
|
||||
<div class="instruction-header"></div>
|
||||
<div class="instruction">
|
||||
<div class="instruction-1">
|
||||
<p class="center">
|
||||
<img
|
||||
class="notice"
|
||||
src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/redPacktes/common_title_notice.png"
|
||||
alt=""
|
||||
/>
|
||||
</p>
|
||||
<div
|
||||
v-if="goodsInfo.entity.receive_type === 1"
|
||||
class="available_time"
|
||||
>
|
||||
<h3 class="instruction-text">领取时间</h3>
|
||||
<ul class="timeList">
|
||||
<li
|
||||
v-for="item in sortWeeks(goodsInfo.entity.receive_rule.week)"
|
||||
:key="item"
|
||||
>
|
||||
{{ item }}
|
||||
<p
|
||||
v-for="(item1, index) in goodsInfo.entity.receive_rule.time"
|
||||
:key="index"
|
||||
style="text-align: center; margin-top: 5px"
|
||||
>
|
||||
{{ item1[0] }}~{{ item1[1] }}
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div
|
||||
v-if="goodsInfo.entity.receive_type === 2"
|
||||
class="available_time"
|
||||
>
|
||||
<h3 class="instruction-text">领取时间</h3>
|
||||
<ul class="timeList">
|
||||
<li
|
||||
v-for="item in goodsInfo.entity.receive_irregular"
|
||||
:key="item.date"
|
||||
>
|
||||
{{ item.date }}
|
||||
<p
|
||||
v-for="item1 in item.time"
|
||||
style="margin-top: 5px"
|
||||
:key="item1[1]"
|
||||
>
|
||||
{{ item1[0] }}~{{ item1[1] }}
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div
|
||||
v-if="goodsInfo.entity.receive_type === 3"
|
||||
class="available_time"
|
||||
>
|
||||
<h3 class="instruction-text">领取时间</h3>
|
||||
<ul class="timeList">
|
||||
<li
|
||||
v-for="(item, index) in goodsInfo.entity.receive_day"
|
||||
:key="index"
|
||||
>
|
||||
{{ item.join(" ~ ") }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="instruction-text">使用规则</h3>
|
||||
<p class="scroll" v-html="goodsInfo.entity.instruction"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import "./index.scss";
|
||||
export default {
|
||||
name: "comProduct",
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
promptShow: false,
|
||||
popShow: false,
|
||||
popTitle: "温馨提示",
|
||||
popText: "请点击下方[复制]按钮，复制链接到浏览器打开！",
|
||||
popStatus: 1 /*1 成功 2提示 3失败 */,
|
||||
popBt: "点击复制",
|
||||
copyLink: "",
|
||||
goodsInfo: {
|
||||
id: 68155,
|
||||
type: 3,
|
||||
code_batch_id: 9171,
|
||||
weight: 1,
|
||||
delete_time: null,
|
||||
total_stock: 50,
|
||||
use_stock: 0,
|
||||
stock: 50,
|
||||
entity: {
|
||||
id: 565,
|
||||
batch_goods_name: "微信红包",
|
||||
wishing: "11291821",
|
||||
goods_id: 68155,
|
||||
cash_activity_id: "p51e7VuF1724817062344",
|
||||
channel: 2,
|
||||
cash_amount_type: "1",
|
||||
all_budget: "5.00",
|
||||
num: 50,
|
||||
usage: 0,
|
||||
denomination: "0.10",
|
||||
min_denomination: "0.00",
|
||||
average_amount: "0.10",
|
||||
residue_budget: "0.00",
|
||||
generated_amount: "5.00",
|
||||
generated_num: 50,
|
||||
max_denomination: "0.00",
|
||||
total_contract_price: "100.0000",
|
||||
day_budget: "5.00",
|
||||
receive_every: 1,
|
||||
receive_num: 10,
|
||||
begin_time: "2024-08-28 11:42:56",
|
||||
end_time: "2024-09-30 23:59:59",
|
||||
receive_type: 0,
|
||||
receive_rule: { time: [[]], week: [] },
|
||||
receive_irregular: { "0": { date: "", time: [[]] } },
|
||||
receive_day: { "0": [] },
|
||||
instruction: "",
|
||||
early_per: { "0": "1" },
|
||||
early_notifier: { "0": { mobile: "18202818112", real_name: "张城" } },
|
||||
last_early_per: 0,
|
||||
create_time: "2024-08-28 11:51:24",
|
||||
update_time: "2024-08-28 11:51:24",
|
||||
delete_time: null,
|
||||
receive_mode: 1,
|
||||
},
|
||||
begin_time: "2024-08-23 15:19:10",
|
||||
end_time: "2024-09-30 23:59:59",
|
||||
available: 1,
|
||||
exchange: 0,
|
||||
product_id: 68155,
|
||||
key: "AAACsHAafZqcB5vd",
|
||||
instruction: "",
|
||||
recharge_type: 1,
|
||||
},
|
||||
backAble: sessionStorage.getItem("goodsCount") || 0 > 1,
|
||||
loading: false,
|
||||
openid: "",
|
||||
};
|
||||
},
|
||||
created() {
|
||||
document.title = localStorage.getItem("title") || "";
|
||||
let openid = this.getQueryString("openid");
|
||||
if (openid) {
|
||||
this.openid = openid;
|
||||
this.getGoodsStatus();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getQueryString(name: string) {
|
||||
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
|
||||
var r = window.location.search.substr(1).match(reg);
|
||||
if (r != null) return unescape(r[2]);
|
||||
return null;
|
||||
},
|
||||
// 获取最新的商品状态
|
||||
getGoodsStatus() {
|
||||
if (this.goodsInfo.entity.goods_id) {
|
||||
let params = {
|
||||
token: localStorage.getItem("token"),
|
||||
};
|
||||
}
|
||||
},
|
||||
/* 立即领取 */
|
||||
receive() {
|
||||
if (this.loading) return;
|
||||
this.loading = true;
|
||||
let data = {
|
||||
key: localStorage.getItem("key"),
|
||||
goods_id: this.goodsInfo.entity.goods_id,
|
||||
code_batch_id: this.goodsInfo.code_batch_id,
|
||||
token: localStorage.getItem("token"),
|
||||
};
|
||||
},
|
||||
// 红包 结算
|
||||
publicCollection(order_number: string) {
|
||||
let params = {
|
||||
order_number,
|
||||
open_id: this.openid,
|
||||
subject: "bale",
|
||||
};
|
||||
},
|
||||
|
||||
/* 根据环境进行下一步操作 1 支付宝 2 微信 */
|
||||
judgeEnvironment(order_number: string, weiXinUrl: string | URL) {
|
||||
let ua = window.navigator.userAgent.toLowerCase();
|
||||
|
||||
/* 支付宝：判断如果是微信/安卓百度浏览器 则复制链接 */
|
||||
if (this.goodsInfo.entity.channel === 1) {
|
||||
const aliPaysUrl = `alipays://platformapi/startapp?appId=2021004100663111&page=pages/index/index?order_number=${encodeURIComponent(
|
||||
window.btoa(order_number)
|
||||
)}`;
|
||||
if (
|
||||
(ua.indexOf("android") > -1 && ua.indexOf("baiduboxapp") > -1) ||
|
||||
ua.indexOf("windows") > -1
|
||||
) {
|
||||
this.copyLink = aliPaysUrl;
|
||||
this.tip(
|
||||
"请点击下方[复制]按钮，复制链接到浏览器打开！",
|
||||
1,
|
||||
"点击复制"
|
||||
);
|
||||
} else {
|
||||
location.replace(aliPaysUrl);
|
||||
}
|
||||
return;
|
||||
}
|
||||
/* 微信 */
|
||||
if (this.goodsInfo.entity.channel === 2) {
|
||||
// 第一步：是否是微信环境 -> 公众号授权
|
||||
if (this.openid && ua.indexOf("micromessenger") !== -1) {
|
||||
this.publicCollection(order_number);
|
||||
} else {
|
||||
// 第二步：其它环境 微信小程序
|
||||
window.location.replace(weiXinUrl);
|
||||
}
|
||||
return;
|
||||
}
|
||||
},
|
||||
|
||||
/* 复制文本 */
|
||||
copyFn() {
|
||||
if (this.popBt === "关闭") {
|
||||
return (this.popShow = false);
|
||||
}
|
||||
var textArea = document.createElement("textarea");
|
||||
textArea.value = this.copyLink;
|
||||
document.body.appendChild(textArea);
|
||||
textArea.select();
|
||||
document.execCommand("copy");
|
||||
this.promptShow = true;
|
||||
this.popShow = false;
|
||||
setTimeout(() => {
|
||||
this.promptShow = false;
|
||||
}, 3000);
|
||||
document.body.removeChild(textArea);
|
||||
clearTimeout;
|
||||
},
|
||||
|
||||
/* 触发提示 */
|
||||
tip(text: string, status: number, bt: string) {
|
||||
this.popText = text;
|
||||
this.popStatus = status; /*1 成功 2提示 3失败 */
|
||||
this.popBt = bt;
|
||||
this.popShow = true;
|
||||
},
|
||||
|
||||
/* 返回 */
|
||||
backGoodsFn() {
|
||||
if (this.backAble) {
|
||||
window.location.replace("./homepage.html");
|
||||
} else {
|
||||
history.go(-2);
|
||||
}
|
||||
},
|
||||
/* 动态font */
|
||||
fonts() {
|
||||
const { cash_amount_type, min_denomination, max_denomination } =
|
||||
this.goodsInfo.entity;
|
||||
const defaultCss = { b: "20px", a: "32px" };
|
||||
if (cash_amount_type === "2") {
|
||||
const count =
|
||||
String(parseFloat(min_denomination)).length +
|
||||
String(parseFloat(max_denomination)).length +
|
||||
1;
|
||||
if (count > 6) {
|
||||
return {
|
||||
a: 0.32 - ((count - 6) / 100) * 1.5 + "rem",
|
||||
b: 0.2 - (count - 6) / 100 + "rem",
|
||||
};
|
||||
} else {
|
||||
return defaultCss;
|
||||
}
|
||||
} else {
|
||||
return defaultCss;
|
||||
}
|
||||
},
|
||||
sortWeeks(weeks: any[]) {
|
||||
const staticWeeks = [
|
||||
{ id: 1, name: "周一" },
|
||||
{ id: 2, name: "周二" },
|
||||
{ id: 3, name: "周三" },
|
||||
{ id: 4, name: "周四" },
|
||||
{ id: 5, name: "周五" },
|
||||
{ id: 6, name: "周六" },
|
||||
{ id: 7, name: "周日" },
|
||||
];
|
||||
|
||||
var _weeks: any = weeks
|
||||
.map((item) =>
|
||||
staticWeeks.filter((item1) => item1.name === item || item1.id == item)
|
||||
)
|
||||
.flat(Infinity)
|
||||
.sort((a: any, b: any) => a.id - b.id);
|
||||
|
||||
//将weeks清空并将排序好的值赋给weeks
|
||||
const weeksData = [];
|
||||
if (
|
||||
this.isContinuityNum(_weeks.map((item: any) => item.id)) &&
|
||||
_weeks.length > 1
|
||||
) {
|
||||
weeksData.push(`${_weeks[0].name} 至 ${_weeks.slice(-1)[0].name}`);
|
||||
} else {
|
||||
for (var i = 0; i < _weeks.length; i++) {
|
||||
weeksData.push(_weeks[i].name);
|
||||
}
|
||||
}
|
||||
|
||||
return weeksData;
|
||||
},
|
||||
isContinuityNum(num: {
|
||||
toString: () => Iterable<unknown> | ArrayLike<unknown>;
|
||||
}) {
|
||||
let array = [];
|
||||
if (num instanceof Array) {
|
||||
array = [...num];
|
||||
} else {
|
||||
array = Array.from(num.toString()); //转换为数组
|
||||
}
|
||||
|
||||
var i = array[0];
|
||||
var isContinuation = true;
|
||||
for (var e in array) {
|
||||
if (array[e] != i) {
|
||||
isContinuation = false;
|
||||
break;
|
||||
}
|
||||
i++;
|
||||
}
|
||||
return isContinuation;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,170 @@
|
|||
#reduce {
|
||||
// height: 6rem !important;
|
||||
background: #f4f6f9;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
background-color: rgb(250, 67, 59);
|
||||
}
|
||||
|
||||
#reduce {
|
||||
background: #fff;
|
||||
padding: 21px 0;
|
||||
box-sizing: border-box;
|
||||
font-size: 14px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.readOnly {
|
||||
filter: grayscale(1);
|
||||
}
|
||||
|
||||
#reduce .couponShow {
|
||||
width: 94%;
|
||||
margin: 0 auto;
|
||||
max-height: 120px;
|
||||
min-height: 90px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background: url("https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/reduce/coupon.png");
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
#reduce .countdown {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
margin-bottom: 20px;
|
||||
background: red;
|
||||
}
|
||||
|
||||
#reduce .countdown p {
|
||||
margin: 5px;
|
||||
background-size: 100% 100%;
|
||||
min-width: 18px;
|
||||
padding: 2.8px;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
#reduce .countdown span {
|
||||
color: #fff;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#reduce .coupon-left {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
#reduce .coupon_money {
|
||||
font-weight: bold;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#reduce .coupon_money>span {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
#reduce .full_money {
|
||||
margin: 0 auto;
|
||||
font-size: 12px;
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
#reduce .coupon-right {
|
||||
width: 250px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding-left: 12px;
|
||||
box-sizing: border-box;
|
||||
color: #d18d6f;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
#reduce .coupon-right>p {
|
||||
margin: 0;
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
#reduce .title {
|
||||
color: #cd4236;
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#reduce .send_num {
|
||||
font-size: 14px;
|
||||
color: #f4342b;
|
||||
}
|
||||
|
||||
#reduce .coupon-right .validity {
|
||||
font-size: 9px;
|
||||
color: #cc9590;
|
||||
}
|
||||
|
||||
#reduce .receiveBtn {
|
||||
width: 178px;
|
||||
height: 46px;
|
||||
background: url("https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/reduce/btnbg.png") no-repeat 100% 100% / cover;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
color: #ab582f;
|
||||
font-weight: bold;
|
||||
margin: 24px auto;
|
||||
}
|
||||
|
||||
#reduce .coupon_explain {
|
||||
margin: 0 auto;
|
||||
border-top: 2px dashed #f1f1f1;
|
||||
}
|
||||
|
||||
/*说明*/
|
||||
#reduce .coupon_explain {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#reduce .backIcon {
|
||||
width: 40px;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
#reduce .coupon_explain>h1 {
|
||||
font-size: 16px;
|
||||
color: #171717;
|
||||
margin: 33px;
|
||||
}
|
||||
|
||||
#reduce .coupon_explain .content {
|
||||
width: 94%;
|
||||
margin: 0 auto;
|
||||
text-align: justify;
|
||||
line-height: 22px;
|
||||
color: #a8a8a8;
|
||||
font-size: 12px;
|
||||
margin-bottom: 27px;
|
||||
}
|
||||
|
||||
#reduce .coupon_explain .content>h3 {
|
||||
font-size: 13px;
|
||||
color: #171717;
|
||||
padding-bottom: 11px;
|
||||
}
|
||||
|
||||
h3,
|
||||
h1 {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
|
@ -0,0 +1,431 @@
|
|||
<template>
|
||||
<div id="reduce" :style="{ paddingTop: outTime.length > 0 ? '0' : '21px' }">
|
||||
<!-- 弹出框 -->
|
||||
<div class="mask" v-if="maskshow"></div>
|
||||
<!-- 单条弹出框 -->
|
||||
<!-- <div class="prompt" :class="promtshow ? 'proactive' : ''">
|
||||
{{ 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="outTime.length > 0">
|
||||
<span>链接有效期：</span>
|
||||
<p>{{ outTime[0] }}</p>
|
||||
时
|
||||
<p>{{ outTime[1] }}</p>
|
||||
分
|
||||
<p>{{ 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: '32px' }">
|
||||
<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: 11px">{{ reduceInfo.card_type }}可用</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' : ''"
|
||||
>
|
||||
立即领取
|
||||
<!-- {{
|
||||
goodInfo.available == 9
|
||||
? buttonTextFun(goodInfo.type, "received")
|
||||
: buttonTextFun(goodInfo.type, "receive")
|
||||
}} -->
|
||||
</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 v-html="goodInfo.entity.notice" v-if="goodInfo.entity.notice"></p>
|
||||
<p v-else>
|
||||
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>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import "./index.scss";
|
||||
let goodsDetail = 0,
|
||||
goodsCount = 0;
|
||||
export default {
|
||||
name: "comProduct",
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
plaflam: 1, //支付宝
|
||||
promtshow: false,
|
||||
promttip: "警告提示",
|
||||
copyshow: false, //解决ios，必须触发按钮复制
|
||||
copyLink: "", //存储链接
|
||||
popboxshow: false,
|
||||
maskshow: false,
|
||||
openId: localStorage.getItem("openid"),
|
||||
bindClick: false,
|
||||
tiptext: "错误提示",
|
||||
goodInfo: {
|
||||
available: 0,
|
||||
instruction: "",
|
||||
entity: {
|
||||
notice: "",
|
||||
},
|
||||
}, //商品信息
|
||||
reduceInfo: {
|
||||
channel: 1,
|
||||
reduce_amount: "",
|
||||
denomination: "",
|
||||
batch_goods_name: "",
|
||||
send_num: 0,
|
||||
card_type: 1,
|
||||
}, //券信息
|
||||
orderId: "",
|
||||
backAble: true,
|
||||
loading: false,
|
||||
outTime: [],
|
||||
receive_time: {
|
||||
timer_show: 1,
|
||||
use_time: {
|
||||
week: "",
|
||||
day: "",
|
||||
time: "",
|
||||
type: "",
|
||||
effect_date_type: 0,
|
||||
effect_day: 0,
|
||||
fiexd_time: { start_time: "", end_time: "" },
|
||||
},
|
||||
effect_time: { start_time: "", end_time: "" },
|
||||
}, //领取立减金时间
|
||||
tip: `1、立减金自领取之日起0天有效，请在有效期内使用<br />
|
||||
2、微信立减金自领取后每个立减金一次性使用，不兑换，不找零，到期后自动失效，逾期未使用不再补发。使用微信支付进行付款（大于立减金面额0.01元以上）即可自动抵扣<br />
|
||||
3、多张立减金可在单笔微信支付订单中一起使用，但当用户的立减金超过8张时，系统会选取其中一部分使用，不保证在一张订单中全部使用<br />
|
||||
4、在中国境内商户使用微信支付即可使用，少数特定商户（包括但不限于：CoCo奶茶、优衣库、星巴克、肯德基、必胜客、同程艺龙、热风、太平鸟、孩子王、航联保险、华为商城、Miss
|
||||
Sixty、Ochirly、Apple商城、FivePlus、信用卡还款、零钱通、理财通等）、以及社交支付（如转账、红包、个人收款码支付等）及合单支付（微信支付订单号为44开头的交易）无法使用立减金<br />
|
||||
5、使用立减金的微信支付订单，如发生全额退款，且立减金仍在有效期内，立减金将自动退还给用户，如立减金已过期，则不退还给用户；如发生部分退款，用户支付金额将按比例原路退还，立减金将不退还给用户<br />`,
|
||||
goodsInfo: {
|
||||
id: 68147,
|
||||
type: 2,
|
||||
code_batch_id: 9164,
|
||||
weight: 0,
|
||||
delete_time: null,
|
||||
stock: 100,
|
||||
entity: {
|
||||
id: 2776,
|
||||
goods_id: 68147,
|
||||
channel: 1,
|
||||
channel_activity_id: "23232323221jjk",
|
||||
batch_goods_name: "支付宝立减金",
|
||||
price: "10.0000",
|
||||
recharge_amount: "100.00",
|
||||
frozen_amount: "0.0000",
|
||||
balance: "100.0000",
|
||||
used_amount: "0.0000",
|
||||
denomination: "1.01",
|
||||
reduce_amount: "1.00",
|
||||
all_budget: "100.00",
|
||||
day_budget: "100.00",
|
||||
receive_conf: { num: "1", type: "all" },
|
||||
card_type: ["1"],
|
||||
natural_limit: 1,
|
||||
brush_limit: 1,
|
||||
time_limit: {
|
||||
use_time: {
|
||||
type: "received",
|
||||
effect_day: "1",
|
||||
fiexd_time: [],
|
||||
effect_date_type: "0",
|
||||
},
|
||||
timer_show: "1",
|
||||
effect_time: {
|
||||
end_time: "2024-09-30 23:59:59",
|
||||
start_time: "2024-08-28 11:41:36",
|
||||
},
|
||||
receive_time: [],
|
||||
},
|
||||
instruction:
|
||||
"<p>1、立减金自领取之日起7天有效，请在有效期内使用\n<br/>2、支付宝立减金自领取后每个立减金一次性使用，不兑换、不找零，到期后自动失效，逾期未使用不再补发。使用支付宝支付进行付款(大于立减金面额0.01元以上)即可自动抵扣\n<br/>3、多张立减金可在单笔支付宝支付订单中一起使用，但当用户的立减金超过8张时，系统会选取其中一部分使用，不保证在一张订单中全部使用\n<br/>4、使用立减金的支付宝支付订单，如发生全额退款，且立减金仍在有效期内，立减金将自动退还给用户，如立减金已过期，则不退还给用户;如发生部分退款，用户支付金额将按比例原路退还，立减金将不退还给用户</p>",
|
||||
early_per: ["1"],
|
||||
early_notifier: [{ mobile: "18202818112", real_name: "张城" }],
|
||||
last_early_per: 0,
|
||||
temp_no: "23232323",
|
||||
create_time: "2024-08-28 11:46:17",
|
||||
delete_time: null,
|
||||
provider: "lsxd",
|
||||
receive_mode: 1,
|
||||
send_num: 1,
|
||||
is_webview: 0,
|
||||
notice:
|
||||
"<p>1、在支付宝H5内打开链接，点击【一键领取】完成领取支付宝立减金<br/>\n2、支付宝立减金一旦领取不可撤销、不可转让。注意不要将兑换券泄露给他人</p>",
|
||||
voucher_batch: ["23232323221jjk"],
|
||||
},
|
||||
begin_time: "2024-08-23 15:19:10",
|
||||
end_time: "2024-09-30 23:59:59",
|
||||
available: 1,
|
||||
exchange: 0,
|
||||
product_id: 68147,
|
||||
key: "AAACsHAafZqcB5vd",
|
||||
instruction:
|
||||
"<p>1、立减金自领取之日起7天有效，请在有效期内使用\n<br/>2、支付宝立减金自领取后每个立减金一次性使用，不兑换、不找零，到期后自动失效，逾期未使用不再补发。使用支付宝支付进行付款(大于立减金面额0.01元以上)即可自动抵扣\n<br/>3、多张立减金可在单笔支付宝支付订单中一起使用，但当用户的立减金超过8张时，系统会选取其中一部分使用，不保证在一张订单中全部使用\n<br/>4、使用立减金的支付宝支付订单，如发生全额退款，且立减金仍在有效期内，立减金将自动退还给用户，如立减金已过期，则不退还给用户;如发生部分退款，用户支付金额将按比例原路退还，立减金将不退还给用户</p>",
|
||||
recharge_type: 1,
|
||||
origin_price: "1.00",
|
||||
coupon_price: "1.00",
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
document.title = localStorage.getItem("title") || "";
|
||||
/* 获取立减金信息*/
|
||||
let goodsDetail = this.goodsInfo;
|
||||
this.goodInfo = goodsDetail;
|
||||
/*默认显示*/
|
||||
// if (goodsDetail.available != 1) {
|
||||
// this.openErrorDialog(product_status(goodsDetail.available, goodsDetail));
|
||||
// this.bindClick = true;
|
||||
// }
|
||||
const goodsCount: any = sessionStorage.getItem("goodsCount") || 12;
|
||||
this.backAble = goodsCount > 1; //多个商品才有返回
|
||||
Object.assign(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
|
||||
// );
|
||||
}
|
||||
Object.assign(this.receive_time, goodsDetail.entity.time_limit);
|
||||
|
||||
/* 倒计时 */
|
||||
const key_expiration_time =
|
||||
sessionStorage.getItem("key_expiration_time") || 0;
|
||||
this.outTime = [];
|
||||
},
|
||||
filters: {
|
||||
cardType(val: any[]) {
|
||||
return val
|
||||
.map((item) => {
|
||||
return item == 1 ? "借记卡" : "信用卡" + " ";
|
||||
})
|
||||
.join(" ");
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
globalFormatStatus(type: any) {
|
||||
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;
|
||||
},
|
||||
|
||||
/* 公众号领取 */
|
||||
publicCollection(order_number: any) {
|
||||
let params = {
|
||||
order_number,
|
||||
channel: 2,
|
||||
channel_user_id: this.openId,
|
||||
is_webview: 1,
|
||||
};
|
||||
},
|
||||
|
||||
toLinkAlipay() {
|
||||
//支付宝H5跳转
|
||||
let self = this;
|
||||
let banklink = encodeURIComponent(
|
||||
window.location.origin + "/alipay.html?orderNumber=" + this.orderId
|
||||
);
|
||||
let link = "https://openapi.1688sup.com/alipay/oauth?jump=" + banklink;
|
||||
let ua = navigator.userAgent.toLowerCase(); //判断用户打开链接环境
|
||||
if (
|
||||
ua.indexOf("micromessenger") > -1 ||
|
||||
ua.indexOf("baiduboxapp") > -1 ||
|
||||
ua.indexOf("firefox") > -1
|
||||
) {
|
||||
//复制链接地址，提醒去浏览器打开
|
||||
this.copyLink = link;
|
||||
this.copyshow = true;
|
||||
this.maskshow = true;
|
||||
} else {
|
||||
//唤起支付宝
|
||||
window.location.replace(link);
|
||||
}
|
||||
},
|
||||
//错误弹出框关闭
|
||||
knowFn() {
|
||||
this.popboxshow = false;
|
||||
this.maskshow = false;
|
||||
},
|
||||
//错误弹出框
|
||||
openErrorDialog(tip: string) {
|
||||
this.maskshow = true;
|
||||
this.tiptext = tip;
|
||||
this.popboxshow = true;
|
||||
},
|
||||
// 单条弹框
|
||||
openDialog(tip: string) {
|
||||
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>
|
||||
Loading…
Reference in New Issue