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

🎨 style: 修改样式

This commit is contained in:
wangsongsole 2024-03-01 23:58:25 +08:00
parent ad06e50a71
commit 72a7278185
3 changed files with 159 additions and 178 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

120
combining.css
View File

@ -49,55 +49,31 @@ body {
.content { .content {
min-height: 100%; min-height: 100%;
background-color: #f2f4fe; background: linear-gradient(#ff2c02 0 10%, #f6f6f4 25% 70%);
position: relative; position: relative;
box-sizing: border-box; box-sizing: border-box;
border-radius: 0 0 0.08rem 0.08rem; border-radius: 0 0 0.08rem 0.08rem;
}
.content .logo {
width: 100%;
height: 3rem;
display: flex;
align-items: center;
justify-content: center;
background-color: #fff;
padding-top: 0.2rem; padding-top: 0.2rem;
} }
.content .logo img { .content .nav {
max-width: 100%; text-align: center;
max-height: 100%; font-size: 0.18rem;
}
.content .flex-but {
background-color: #fff;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
padding: 0.16rem;
box-sizing: border-box;
z-index: 2;
}
.content .flex-but .but {
margin-bottom: 0.1rem;
width: 100%;
border: 0;
outline: 0;
background: #FF0000;
height: 0.42rem;
border-radius: 0.2rem;
color: #fff; color: #fff;
font-size: 0.16rem; }
.content .notis {
margin-top: 0.5rem;
background: rgba(0, 0, 0, 0.2);
color: #fff;
padding: 0.12rem;
box-sizing: border-box;
} }
.content .box { .content .box {
padding: 0.16rem; padding: 0.16rem;
} }
.content .box .box-top,
.content .box .box-cotent, .content .box .box-cotent,
.content .box .box-footer { .content .box .box-footer {
border-radius: 0.12rem; border-radius: 0.12rem;
@ -107,6 +83,10 @@ body {
box-sizing: border-box; box-sizing: border-box;
} }
.content .box .box-cotent {
padding: 0.2rem 0 0.3rem;
}
.content .box .b-t-t { .content .box .b-t-t {
font-size: 0.18rem; font-size: 0.18rem;
font-weight: bold; font-weight: bold;
@ -114,10 +94,37 @@ body {
color: #333333; 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;
}
.content .box .time { .content .box .time {
font-size: 0.12rem; font-size: 0.12rem;
margin-top: 0.08rem; margin-top: 0.08rem;
color: #666666; color: #666666;
max-width: 82%;
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 { .content .box .box-footer .b-f-t {
@ -163,53 +170,26 @@ body {
flex-direction: column; flex-direction: column;
} }
.content .box .box-cotent .b-c-t {
font-size: 0.16rem;
margin-bottom: 0.2rem;
font-weight: bold;
line-height: 0.2rem;
color: #333333;
display: flex;
align-items: center;
justify-content: center;
}
.content .box .box-cotent .b-c-t img {
width: 0.12rem;
}
.content .box .box-cotent .b-c-t img:first-child {
margin-right: 0.06rem;
}
.content .box .box-cotent .b-c-t img:last-child {
margin-left: 0.06rem;
transform: rotateY(180deg);
}
.content .box .box-cotent input { .content .box .box-cotent input {
width: 100%; width: 90%;
border: 0; border: 0;
outline: 0; outline: 0;
background: #f8f9fd; background: #f8f9fd;
height: 0.42rem; height: 0.42rem;
border-radius: 0.2rem; border-radius: 0.2rem;
padding: 0 0.2rem; padding: 0 0.2rem;
margin-bottom: 0.14rem;
box-sizing: border-box; box-sizing: border-box;
} display: block;
margin: 0 auto;
.content .box .box-cotent .tips { margin-bottom: 0.14rem;
color: #FF0000;
font-size: 0.12rem;
} }
.content .box .box-cotent .but { .content .box .box-cotent .but {
margin-top: 0.2rem; margin-top: 0.2rem;
width: 100%; width: 90%;
border: 0; border: 0;
outline: 0; outline: 0;
background: #FF0000; background: #e52600;
height: 0.42rem; height: 0.42rem;
border-radius: 0.2rem; border-radius: 0.2rem;
color: #fff; color: #fff;
@ -294,7 +274,7 @@ body {
.mask .model .m-but { .mask .model .m-but {
font-size: 0.16rem; font-size: 0.16rem;
color: #fff; color: #fff;
background-color: #FF0000; background-color: #e52600;
border-radius: 0.2rem; border-radius: 0.2rem;
height: 0.42rem; height: 0.42rem;
border: 0; border: 0;

99
combining.html
View File

@ -11,7 +11,7 @@
type="text/javascript" charset="utf-8"></script> 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 type="text/javascript" src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/common/axios.js?v=1367936144322">
</script> </script>
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/js/api2_0.js"></script> <script src="./api2_0.js"></script>
</head> </head>
<body> <body>
@ -32,44 +32,44 @@
</div> </div>
</div> </div>
<div class="content"> <div class="content" :style="{background: `linear-gradient(${dynamicStyle.bg} 0 10%, #f6f6f4 25% 70%)`}">
<div class="logo"> <p class="nav">领取页面</p>
<img :src="goods.group_info.group_cover" alt=""> <p class="notis">恭喜您领取立减金</p>
</div>
<div class="box"> <div class="box">
<div class="box-top"> <div class="box-cotent">
<p class="b-t-t">{{goods.title}}</p> <p class="b-t-t">{{goods.title}}</p>
<p class="time">生效时间：{{goods.group_info.time_limit.effect_time.start_time}} ~ <div class="logo">
{{goods.group_info.time_limit.effect_time.end_time}}</p> <img src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/unionPay.svg"
alt="">
<span>中国银联</span>
</div>
<p class="t-1">内含 {{goods.send_num}} 张</p>
<p class="t-1">适用于：{{goods.group_info.channel==1?'支付宝':goods.group_info.channel==2?'微信':'云闪付'}}
</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?'请输入手机号':'请输入账号'"
v-model="form.confirm">
<input type="text" maxlength="50"
:placeholder="goods.group_info.channel==3?'请再次输入手机号':'请再次输入账号'"
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" v-if="goods.group_info.time_limit.receive_time.start_time"> <p class="time" 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.start_time}} ~
{{goods.group_info.time_limit.receive_time.end_time}}</p> {{goods.group_info.time_limit.receive_time.end_time}}</p>
</div>
<div class="box-cotent" <button class="but" :style="{background: dynamicStyle.bg}" @click="submit"
v-if="goods.group_info.channel==3||goods.group_info.channel==1&&goods.group_info.receive_mode==2"> v-if="goods.receive_status==1">立即领取</button>
<p class="b-c-t"> <button class="but" v-else :style="{background: dynamicStyle.bt}">已领取</button>
<img src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/common_title_sm.png"
alt="">
{{goods.group_info.channel==3?'云闪付账号':'支付宝账号'}}
<img src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/common_title_sm.png"
alt="">
</p>
<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">
<p class="tips" v-if="goods.group_info.channel==1">
*您可在支付宝的个人信息中查看【支付宝账号】
</p>
<button class="but" @click="submit" v-if="goods.status==1">立即领取</button>
<button class="but" v-else style="background: #ff8a8a;">已领取</button>
</div>
<div class="flex-but" v-else>
<button class="but" @click="directSubmit">立即领取</button>
</div> </div>
<div class="box-footer" <div class="box-footer">
:style="{marginBottom:goods.group_info.channel==3||goods.group_info.channel==1&&goods.group_info.receive_mode==2?'0rem':'0.9rem'}">
<template v-if="!goods.group_info.group_image"> <template v-if="!goods.group_info.group_image">
<p class="b-f-t"> <p class="b-f-t">
<img src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/common_title_sm.png" <img src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/common_title_sm.png"
@ -120,6 +120,21 @@
this.getProductDetail(); this.getProductDetail();
}, },
computed: {
dynamicStyle () {
switch (Number(this.goods.group_info.channel)) {
case 1:
return { bg: '#0076f6', bt: '#c2dbf5' };
case 2:
return { bg: '#07c160', bt: '#cfeddc' };
case 3:
return { bg: '#ff2c02', bt: '#f9bbae' };
default:
return {};
}
},
},
methods: { methods: {
//获取商品详情 //获取商品详情
getProductDetail () { getProductDetail () {
@ -133,6 +148,7 @@
}).catch(); }).catch();
}, },
/* ******************************************** 官方领取 ******************************************** */ /* ******************************************** 官方领取 ******************************************** */
/* 直接领取 */ /* 直接领取 */
directSubmit () { directSubmit () {
@ -185,15 +201,20 @@
/* ******************************************** 账号领取 ******************************************** */ /* ******************************************** 账号领取 ******************************************** */
/* 立即领取 */ /* 立即领取 */
submit () { submit () {
const { confirm, receive_account } = this.form; if (this.goods.group_info.channel == 3 || this.goods.group_info.channel == 1 && this.goods.group_info.receive_mode == 2) {
if (this.loading) return; const { confirm, receive_account } = this.form;
if (confirm !== receive_account) return this.tips('两次输入账号不一致'); if (this.loading) return;
/* 云闪付校验手机号 支付宝校验手机号/邮箱号 */ if (confirm !== receive_account) return this.tips('两次输入账号不一致');
if ((phoneReg.test(receive_account) && this.goods.group_info.channel == 3 || this.goods.group_info.channel == 1 && (emailReg.test(receive_account) || phoneReg.test(receive_account)))) { /* 云闪付校验手机号 支付宝校验手机号/邮箱号 */
this.finalSubmit(); if ((phoneReg.test(receive_account) && this.goods.group_info.channel == 3 || this.goods.group_info.channel == 1 && (emailReg.test(receive_account) || phoneReg.test(receive_account)))) {
this.finalSubmit();
} else {
this.tips('请输入正确的账号');
}
} else { } else {
this.tips('请输入正确的账号'); this.directSubmit();
} }
}, },
/* 验证后 最终提交 */ /* 验证后 最终提交 */

118
combining.scss
View File

@ -52,53 +52,29 @@ body {
.content { .content {
min-height: 100%; min-height: 100%;
background-color: #f2f4fe; background: linear-gradient(#ff2c02 0 10%, #f6f6f4 25% 70%);
position: relative; position: relative;
box-sizing: border-box; box-sizing: border-box;
border-radius: 0 0 0.08rem 0.08rem; border-radius: 0 0 0.08rem 0.08rem;
padding-top: 0.2rem;
.logo { .nav {
width: 100%; text-align: center;
height: 3rem; font-size: 0.18rem;
display: flex; color: #fff;
align-items: center;
justify-content: center;
background-color: #fff;
padding-top: 0.2rem;
img {
max-width: 100%;
max-height: 100%;
}
} }
.flex-but { .notis {
background-color: #fff; margin-top: 0.5rem;
position: fixed; background: rgba(0, 0, 0, 0.2);
bottom: 0; color: #fff;
left: 0; padding: 0.12rem;
width: 100%;
padding: 0.16rem;
box-sizing: border-box; box-sizing: border-box;
z-index: 2;
.but {
margin-bottom: 0.1rem;
width: 100%;
border: 0;
outline: 0;
background: #FF0000;
height: 0.42rem;
border-radius: 0.2rem;
color: #fff;
font-size: 0.16rem;
}
} }
.box { .box {
padding: 0.16rem; padding: 0.16rem;
.box-top,
.box-cotent, .box-cotent,
.box-footer { .box-footer {
border-radius: 0.12rem; border-radius: 0.12rem;
@ -108,6 +84,10 @@ body {
box-sizing: border-box; box-sizing: border-box;
} }
.box-cotent {
padding: 0.2rem 0 0.3rem;
}
.b-t-t { .b-t-t {
font-size: 0.18rem; font-size: 0.18rem;
font-weight: bold; font-weight: bold;
@ -115,10 +95,37 @@ body {
color: #333333; color: #333333;
} }
.logo {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 0.3rem;
img {
width: 0.3rem;
margin-right: 0.06rem;
}
}
.t-1 {
color: #666;
margin-bottom: 0.04rem;
font-size: 0.12rem;
}
.time { .time {
font-size: 0.12rem; font-size: 0.12rem;
margin-top: 0.08rem; margin-top: 0.08rem;
color: #666666; color: #666666;
max-width: 82%;
margin: 0 auto;
word-spacing: 0.05rem;
line-height: 0.18rem;
}
.dashedLine {
width: 100%;
margin: 0.2rem 0;
} }
.box-footer { .box-footer {
@ -168,53 +175,26 @@ body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.b-c-t {
font-size: 0.16rem;
margin-bottom: 0.2rem;
font-weight: bold;
line-height: 0.2rem;
color: #333333;
display: flex;
align-items: center;
justify-content: center;
img {
width: 0.12rem;
&:first-child {
margin-right: 0.06rem;
}
&:last-child {
margin-left: 0.06rem;
transform: rotateY(180deg);
}
}
}
input { input {
width: 100%; width: 90%;
border: 0; border: 0;
outline: 0; outline: 0;
background: #f8f9fd; background: #f8f9fd;
height: 0.42rem; height: 0.42rem;
border-radius: 0.2rem; border-radius: 0.2rem;
padding: 0 0.2rem; padding: 0 0.2rem;
margin-bottom: 0.14rem;
box-sizing: border-box; box-sizing: border-box;
} display: block;
margin: 0 auto;
.tips { margin-bottom: 0.14rem;
color: #FF0000;
font-size: 0.12rem;
} }
.but { .but {
margin-top: 0.2rem; margin-top: 0.2rem;
width: 100%; width: 90%;
border: 0; border: 0;
outline: 0; outline: 0;
background: #FF0000; background: #e52600;
height: 0.42rem; height: 0.42rem;
border-radius: 0.2rem; border-radius: 0.2rem;
color: #fff; color: #fff;
@ -300,7 +280,7 @@ body {
.m-but { .m-but {
font-size: 0.16rem; font-size: 0.16rem;
color: #fff; color: #fff;
background-color: #FF0000; background-color: #e52600;
border-radius: 0.2rem; border-radius: 0.2rem;
height: 0.42rem; height: 0.42rem;
border: 0; border: 0;