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

fix: 增加包码

This commit is contained in:
zhangds 2024-03-15 19:49:58 +08:00
parent 9fd17003cf
commit 7ca5b8ea50
2 changed files with 237 additions and 129 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

239
packkey/combining.css
View File

@ -1,3 +1,4 @@
@charset "UTF-8";
* {
margin: 0 auto;
padding: 0;
@ -34,10 +35,6 @@ body {
.mask {
height: 6rem !important;
}
.flex-but {
top: 5.12rem;
bottom: unset !important;
}
}
#app {
@ -49,105 +46,148 @@ body {
.content {
min-height: 100%;
background: linear-gradient(#ff2c02 0 1rem, #f6f6f4 3rem 70%);
background: #ff4830;
position: relative;
box-sizing: border-box;
border-radius: 0 0 0.08rem 0.08rem;
padding-top: 0.2rem;
}
.content .nav {
text-align: center;
font-size: 0.18rem;
color: #fff;
}
.content .notis {
margin-top: 0.5rem;
background: rgba(0, 0, 0, 0.2);
color: #fff;
padding: 0.12rem;
box-sizing: border-box;
.content .banner {
width: 100%;
max-height: 100%;
}
.content .box {
padding: 0.16rem;
padding-top: 0;
}
.content .box .goods-box {
background-size: 100% 100%;
min-height: 1.8rem;
width: 100%;
padding-top: 0.2rem;
box-sizing: border-box;
}
.content .box .goods-box .title {
text-align: center;
color: #ff3024;
font-weight: bold;
font-size: 0.16rem;
padding-left: 0.12rem;
box-sizing: border-box;
}
.content .box .goods-box .notis {
margin: 0 0 0.1rem;
color: #ffd3d8;
text-align: center;
font-size: 0.13rem;
}
.content .box .g-b-u {
overflow-x: scroll;
margin-top: 0.28rem;
margin-bottom: 0.12rem;
width: 94%;
margin-left: 0.14rem;
box-sizing: border-box;
list-style: none;
display: -webkit-box;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: none;
overflow: -moz-scrollbars-none;
}
.content .box .g-b-u::-webkit-scrollbar {
display: none;
}
.content .box .g-b-u li {
background: url("./云闪付切图/ysf_redenvelope_overdue.png");
background-size: 100% 100%;
height: 1.16rem;
width: 1rem;
margin-left: 0.1rem;
}
.content .box .g-b-u li:first-child {
margin-left: 0;
}
.content .box .g-b-u li .g-b-u-t {
color: #fd4b34;
font-size: 0.12rem;
text-align: center;
}
.content .box .g-b-u li .reduce {
text-align: center;
color: #ff877d;
font-size: 0.12rem;
}
.content .box .g-b-u li .money {
text-align: center;
color: #fc4a2f;
font-size: 0.2rem;
font-weight: bold;
margin: 0.02rem 0;
}
.content .box .g-b-u li .money span {
font-size: 0.12rem;
font-weight: 400;
display: inline-block;
margin-right: -0.04rem;
}
.content .box .g-b-u li .g-b-but {
font-size: 0.12rem;
text-align: center;
color: #fc4934;
margin-top: 0.23rem;
}
.content .box .g_b_title {
color: #fff;
font-size: 0.18rem;
display: flex;
align-items: center;
margin: 0.2rem;
}
.content .box .g_b_title img {
width: 0.26rem;
}
.content .box .g_b_title img:first-child {
margin-right: 0.1rem;
transform: rotateY(360deg);
}
.content .box .g_b_title img:last-child {
margin-left: 0.1rem;
transform: rotateY(180deg);
}
.content .box .box-cotent,
.content .box .box-footer {
border-radius: 0.12rem;
background-color: #fff;
margin-bottom: 0.2rem;
padding: 0.14rem;
box-sizing: border-box;
}
.content .box .box-cotent {
padding: 0.2rem 0 0.3rem;
}
.content .box .b-t-t {
font-size: 0.18rem;
font-weight: bold;
margin-bottom: 0.15rem;
color: #333333;
}
.content .box .logo {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 0.3rem;
}
.content .box .logo img {
width: 0.3rem;
margin-right: 0.06rem;
}
.content .box .t-1 {
color: #666;
margin-bottom: 0.04rem;
font-size: 0.12rem;
margin-bottom: 0.12rem;
}
.content .box .time {
font-size: 0.12rem;
margin-top: 0.08rem;
color: #666666;
width: 82%;
text-align: center;
color: #fff;
width: 100%;
margin: 0 auto;
word-spacing: 0.05rem;
line-height: 0.18rem;
}
.content .box .dashedLine {
width: 100%;
margin: 0.2rem 0;
}
.content .box .box-footer .b-f-t {
font-size: 0.16rem;
margin-bottom: 0.14rem;
line-height: 0.2rem;
font-weight: bold;
.content .box .box-footer {
display: flex;
align-items: center;
justify-content: center;
}
.content .box .box-footer .b-f-t img {
width: 0.12rem;
}
.content .box .box-footer .b-f-t img:first-child {
margin-right: 0.06rem;
}
.content .box .box-footer .b-f-t img:last-child {
margin-left: 0.06rem;
transform: rotateY(180deg);
flex-direction: column;
}
.content .box .box-footer .group_image {
@ -158,20 +198,32 @@ body {
}
.content .box .box-footer .b-f-i {
font-size: 0.14rem;
margin-top: 0.08rem;
color: #666666;
color: #ff4901;
line-height: 0.24rem;
min-height: 2rem;
}
.content .box .box-footer .b-f-i p {
font-size: 0.12rem;
}
.content .box .box-footer .b-f-b {
background-size: 100% 100%;
padding: 0 0.24rem;
}
.content .box .box-footer .b-f-img {
width: 100%;
max-height: 100%;
}
.content .box .box-cotent {
display: flex;
flex-direction: column;
}
.content .box .box-cotent input {
width: 90%;
width: 100%;
border: 0;
outline: 0;
background: #f8f9fd;
@ -185,15 +237,10 @@ body {
}
.content .box .box-cotent .but {
margin-top: 0.2rem;
width: 90%;
border: 0;
outline: 0;
background: #e52600;
height: 0.42rem;
border-radius: 0.2rem;
color: #fff;
font-size: 0.16rem;
margin-top: 0.05rem;
width: 100%;
max-height: 100%;
margin-bottom: 0.08rem;
}
.prompt {
@ -253,7 +300,7 @@ body {
}
.mask .model .m-title {
font-size: .18rem;
font-size: 0.18rem;
color: #000;
}

127
packkey/combining.html
View File

@ -11,8 +11,7 @@
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/api2_0.js"></script>
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/js/libs.js"></script>
<script src="./api2_0.js"></script>
</head>
<body>
@ -33,23 +32,45 @@
</div>
</div>
<div class="content" :style="{background: `linear-gradient(${dynamicStyle.bg} 0 1rem, #f6f6f4 3rem 70%)`}">
<p class="nav">领取页面</p>
<p class="notis">恭喜您领取立减金</p>
<div class="content" :style="{background: dynamicStyle.bg}">
<img class="banner" :src="dynamicStyle.banner" alt="">
<div class="box">
<div class="box-cotent">
<p class="b-t-t">{{goods.title}}</p>
<div class="logo">
<img src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/unionPay.svg"
alt="">
<span>中国银联</span>
<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 :style="{backgroundImage:`url(${item.voucher.used_num?dynamicStyle.goods_a:dynamicStyle.goods_b})`}"
v-for="item in goods.product">
<p class="g-b-u-t">立减金</p>
<p class="money">
<span>￥</span>
{{item.voucher.reduce_amount}}
</p>
<p class="reduce">满{{item.voucher.denomination}}可用</p>
<p class="g-b-but" v-if='goods.receive_status==1'>
待领取({{item.voucher.used_num}}/{{item.voucher.send_num}})</p>
<p class="g-b-but" v-else-if='item.voucher.used_num'>
已使用({{item.voucher.used_num}}/{{item.voucher.send_num}})</p>
<p class="g-b-but" v-else>待使用({{item.voucher.used_num}}/{{item.voucher.send_num}})</p>
</li>
</ul>
<p class="notis" :style="{color:dynamicStyle.notis_color}" v-show="goods.product.length>3">
滑动查看更多
</p>
</div>
<p class="t-1">内含 {{goods.send_num}} 张</p>
<p class="t-1">适用于：{{goods.group_info.channel==1?'支付宝':goods.group_info.channel==2?'微信':'云闪付'}}
<p class="g_b_title"
v-if="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>
<img class="dashedLine"
src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/combining_dashedLine.png"
alt="">
<template
v-if="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?'请输入手机号':'请输入账号'"
@ -59,28 +80,31 @@
v-model="form.receive_account">
</template>
<p class="time" style="margin-top: 0;">生效时间：{{goods.group_info.time_limit.effect_time.start_time}} ~
{{goods.group_info.time_limit.effect_time.end_time}}，逾期不可领取</p>
<p class="time" style="margin-top: 0.01rem;"
<img class="but"
:style="{marginTop:goods.group_info.channel==2||goods.group_info.channel==1&&goods.group_info.receive_mode==1&&'0.12rem'}"
src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/combining/ysf_but.png"
alt="" @click="submit">
<p class="time" :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>
<button class="but" :style="{background: dynamicStyle.bg}" @click="submit"
v-if="goods.receive_status==1">立即领取</button>
<button class="but" v-else :style="{background: dynamicStyle.bt}">已领取</button>
</div>
<div class="box-footer">
<p class="b-f-t">
<img src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/common_title_sm.png"
alt="">使用须知 <img
src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/common_title_sm.png"
alt="">
</p>
<div class="b-f-i" v-html="goods.group_info.instruction" v-if="goods.group_info.instructionType==1">
<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 v-else :src="goods.group_info.group_image" alt="" class="group_image">
<img class="b-f-img" :style="{filter:goods.receive_status==1?'grayscale(0)':'grayscale(0.6)'}"
:src="dynamicStyle.footer_bottom" alt="">
</div>
</div>
</div>
@ -125,11 +149,48 @@
dynamicStyle() {
switch (Number(this.goods.group_info.channel)) {
case 1:
return { bg: '#0076f6', bt: '#c2dbf5' };
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',
goods_a: 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/combining/zfb_redenvelope_tobeused.png',
goods_b: 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/combining/zfb_redenvelope_overdue.png',
};
case 2:
return { bg: '#07c160', bt: '#cfeddc' };
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',
notis_color: '#239700',
goods_a: 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/combining/zfb_redenvelope_tobeused.png',
goods_b: 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/combining/zfb_redenvelope_overdue.png',
};
case 3:
return { bg: '#ff2c02', bt: '#f9bbae' };
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',
notis_color: '#FFD3D8',
goods_a: 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/combining/ysf_redenvelope_tobeused.png',
goods_b: 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/combining/ysf_redenvelope_overdue.png',
};
default:
return {};
}