From 72a7278185480a22dd8ef39ff2d6a756ee974dcd Mon Sep 17 00:00:00 2001
From: wangsongsole <wangsongsole@126.com>
Date: Fri, 1 Mar 2024 23:58:25 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20style:=20=E4=BF=AE=E6=94=B9?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 combining.css  | 120 +++++++++++++++++++++----------------------------
 combining.html |  99 ++++++++++++++++++++++++----------------
 combining.scss | 118 ++++++++++++++++++++----------------------------
 3 files changed, 159 insertions(+), 178 deletions(-)

diff --git a/combining.css b/combining.css
index 065b29c..4cb3e4e 100644
--- a/combining.css
+++ b/combining.css
@@ -49,55 +49,31 @@ body {
 
 .content {
   min-height: 100%;
-  background-color: #f2f4fe;
+  background: linear-gradient(#ff2c02 0 10%, #f6f6f4 25% 70%);
   position: relative;
   box-sizing: border-box;
   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;
 }
 
-.content .logo img {
-  max-width: 100%;
-  max-height: 100%;
-}
-
-.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;
+.content .nav {
+  text-align: center;
+  font-size: 0.18rem;
   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 {
   padding: 0.16rem;
 }
 
-.content .box .box-top,
 .content .box .box-cotent,
 .content .box .box-footer {
   border-radius: 0.12rem;
@@ -107,6 +83,10 @@ body {
   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;
@@ -114,10 +94,37 @@ body {
   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 {
   font-size: 0.12rem;
   margin-top: 0.08rem;
   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 {
@@ -163,53 +170,26 @@ body {
   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 {
-  width: 100%;
+  width: 90%;
   border: 0;
   outline: 0;
   background: #f8f9fd;
   height: 0.42rem;
   border-radius: 0.2rem;
   padding: 0 0.2rem;
-  margin-bottom: 0.14rem;
   box-sizing: border-box;
-}
-
-.content .box .box-cotent .tips {
-  color: #FF0000;
-  font-size: 0.12rem;
+  display: block;
+  margin: 0 auto;
+  margin-bottom: 0.14rem;
 }
 
 .content .box .box-cotent .but {
   margin-top: 0.2rem;
-  width: 100%;
+  width: 90%;
   border: 0;
   outline: 0;
-  background: #FF0000;
+  background: #e52600;
   height: 0.42rem;
   border-radius: 0.2rem;
   color: #fff;
@@ -294,7 +274,7 @@ body {
 .mask .model .m-but {
   font-size: 0.16rem;
   color: #fff;
-  background-color: #FF0000;
+  background-color: #e52600;
   border-radius: 0.2rem;
   height: 0.42rem;
   border: 0;
diff --git a/combining.html b/combining.html
index 3352f47..5f945bc 100644
--- a/combining.html
+++ b/combining.html
@@ -11,7 +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="./api2_0.js"></script>
 </head>
 
 <body>
@@ -32,44 +32,44 @@
             </div>
         </div>
 
-        <div class="content">
-            <div class="logo">
-                <img :src="goods.group_info.group_cover" alt="">
-            </div>
+        <div class="content" :style="{background: `linear-gradient(${dynamicStyle.bg} 0 10%, #f6f6f4 25% 70%)`}">
+            <p class="nav">领取页面</p>
+            <p class="notis">恭喜您领取立减金</p>
             <div class="box">
-                <div class="box-top">
+                <div class="box-cotent">
                     <p class="b-t-t">{{goods.title}}</p>
-                    <p class="time">生效时间：{{goods.group_info.time_limit.effect_time.start_time}} ~
-                        {{goods.group_info.time_limit.effect_time.end_time}}</p>
+                    <div class="logo">
+                        <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">
                         领取时间：{{goods.group_info.time_limit.receive_time.start_time}} ~
                         {{goods.group_info.time_limit.receive_time.end_time}}</p>
-                </div>
-                <div class="box-cotent"
-                    v-if="goods.group_info.channel==3||goods.group_info.channel==1&&goods.group_info.receive_mode==2">
-                    <p class="b-c-t">
-                        <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>
+
+                    <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"
-                    :style="{marginBottom:goods.group_info.channel==3||goods.group_info.channel==1&&goods.group_info.receive_mode==2?'0rem':'0.9rem'}">
+                <div class="box-footer">
                     <template v-if="!goods.group_info.group_image">
                         <p class="b-f-t">
                             <img src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/common_title_sm.png"
@@ -120,6 +120,21 @@
             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: {
             //获取商品详情
             getProductDetail () {
@@ -133,6 +148,7 @@
                 }).catch();
             },
 
+
             /* ******************************************** 官方领取 ******************************************** */
             /* 直接领取 */
             directSubmit () {
@@ -185,15 +201,20 @@
             /* ******************************************** 账号领取 ******************************************** */
             /* 立即领取 */
             submit () {
-                const { confirm, receive_account } = this.form;
-                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 (this.goods.group_info.channel == 3 || this.goods.group_info.channel == 1 && this.goods.group_info.receive_mode == 2) {
+                    const { confirm, receive_account } = this.form;
+                    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();
+                    } else {
+                        this.tips('请输入正确的账号');
+                    }
                 } else {
-                    this.tips('请输入正确的账号');
+                    this.directSubmit();
                 }
+
             },
 
             /* 验证后 最终提交 */
diff --git a/combining.scss b/combining.scss
index 111be95..5aea7bb 100644
--- a/combining.scss
+++ b/combining.scss
@@ -52,53 +52,29 @@ body {
 
 .content {
     min-height: 100%;
-    background-color: #f2f4fe;
+    background: linear-gradient(#ff2c02 0 10%, #f6f6f4 25% 70%);
     position: relative;
     box-sizing: border-box;
     border-radius: 0 0 0.08rem 0.08rem;
+    padding-top: 0.2rem;
 
-    .logo {
-        width: 100%;
-        height: 3rem;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        background-color: #fff;
-        padding-top: 0.2rem;
-
-        img {
-            max-width: 100%;
-            max-height: 100%;
-        }
+    .nav {
+        text-align: center;
+        font-size: 0.18rem;
+        color: #fff;
     }
 
-    .flex-but {
-        background-color: #fff;
-        position: fixed;
-        bottom: 0;
-        left: 0;
-        width: 100%;
-        padding: 0.16rem;
+    .notis {
+        margin-top: 0.5rem;
+        background: rgba(0, 0, 0, 0.2);
+        color: #fff;
+        padding: 0.12rem;
         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 {
         padding: 0.16rem;
 
-        .box-top,
         .box-cotent,
         .box-footer {
             border-radius: 0.12rem;
@@ -108,6 +84,10 @@ body {
             box-sizing: border-box;
         }
 
+        .box-cotent {
+            padding: 0.2rem 0 0.3rem;
+        }
+
         .b-t-t {
             font-size: 0.18rem;
             font-weight: bold;
@@ -115,10 +95,37 @@ body {
             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 {
             font-size: 0.12rem;
             margin-top: 0.08rem;
             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 {
@@ -168,53 +175,26 @@ body {
             display: flex;
             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 {
-                width: 100%;
+                width: 90%;
                 border: 0;
                 outline: 0;
                 background: #f8f9fd;
                 height: 0.42rem;
                 border-radius: 0.2rem;
                 padding: 0 0.2rem;
-                margin-bottom: 0.14rem;
                 box-sizing: border-box;
-            }
-
-            .tips {
-                color: #FF0000;
-                font-size: 0.12rem;
+                display: block;
+                margin: 0 auto;
+                margin-bottom: 0.14rem;
             }
 
             .but {
                 margin-top: 0.2rem;
-                width: 100%;
+                width: 90%;
                 border: 0;
                 outline: 0;
-                background: #FF0000;
+                background: #e52600;
                 height: 0.42rem;
                 border-radius: 0.2rem;
                 color: #fff;
@@ -300,7 +280,7 @@ body {
         .m-but {
             font-size: 0.16rem;
             color: #fff;
-            background-color: #FF0000;
+            background-color: #e52600;
             border-radius: 0.2rem;
             height: 0.42rem;
             border: 0;