From 7ca5b8ea50a305fe47767e295a61d1a3c48aa2e5 Mon Sep 17 00:00:00 2001
From: zhangds <c664256297@163.com>
Date: Fri, 15 Mar 2024 19:49:58 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=A2=9E=E5=8A=A0=E5=8C=85=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packkey/combining.css  | 239 ++++++++++++++++++++++++-----------------
 packkey/combining.html | 127 ++++++++++++++++------
 2 files changed, 237 insertions(+), 129 deletions(-)

diff --git a/packkey/combining.css b/packkey/combining.css
index 0658576..9ba2a1e 100644
--- a/packkey/combining.css
+++ b/packkey/combining.css
@@ -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;
 }
 
diff --git a/packkey/combining.html b/packkey/combining.html
index 2fe5392..8880162 100644
--- a/packkey/combining.html
+++ b/packkey/combining.html
@@ -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 {};
                 }