add OrderCoupon component

2025-10-22 03:44:48 +00:00 · 2017-09-04 15:15:21 +08:00
parent 225df48ba5
commit 556f5ce75b
12 changed files with 1014 additions and 23 deletions
--- a/packages/vant-css/src/index.css
+++ b/packages/vant-css/src/index.css
@@ -1,40 +1,51 @@
 /**
-  css组件库入口，组装成css组件库
+ * style entry
 */
+
+/* base */
@import './reset.css';
+
+/* common components */
+@import './col.css';
+@import './row.css';
+@import './badge.css';
@import './button.css';
@import './cell.css';
@import './cell-swipe.css';
@import './card.css';
-@import './deep-select.css';
-@import './dialog.css';
-@import './field.css';
@import './icon.css';
@import './loading.css';
-@import './picker.css';
@import './popup.css';
-@import './radio.css';
-@import './switch.css';
-@import './badge.css';
@import './search.css';
@import './panel.css';
@import './steps.css';
@import './tag.css';
-@import './checkbox.css';
@import './tab.css';
-@import './col.css';
-@import './row.css';
@import './image-preview.css';
-@import './actionsheet.css';
@import './quantity.css';
@import './progress.css';
-@import './toast.css';
-@import './uploader.css';
@import './swipe.css';
-@import './notice-bar.css';
-@import './switch-cell.css';
+
+/* form components */
+@import './checkbox.css';
+@import './field.css';
+@import './radio.css';
+@import './switch.css';
+@import './uploader.css';
+
+/* action components */
+@import './actionsheet.css';
+@import './dialog.css';
+@import './picker.css';
+@import './toast.css';
+
+/* business components */
+@import './deep-select.css';
@import './express-way.css';
-@import './pay-order.css';
-@import './order-goods.css';
-@import './invalid-goods.css';
@import './goods-action.css';
+@import './invalid-goods.css';
+@import './notice-bar.css';
+@import './order-coupon.css';
+@import './order-goods.css';
+@import './pay-order.css';
+@import './switch-cell.css';
--- a/packages/vant-css/src/order-coupon.css
+++ b/packages/vant-css/src/order-coupon.css
@@ -0,0 +1,196 @@
+@import "./mixins/border_retina.css";
+@import "./mixins/ellipsis.css";
+
+.van-order-coupon {
+  &-list {
+    height: 100%;
+    background-color: #f8f8f8;
+
+    &__top {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      z-index: 1;
+      box-sizing: border-box;
+
+      &::after {
+        border-top: none;
+      }
+    }
+
+    &__exchange {
+      top: 6px;
+      right: 15px;
+      position: absolute;
+      border-radius: 2px;
+    }
+
+    &__list {
+      padding: 60px 0;
+      max-height: 100%;
+      overflow-y: auto;
+      box-sizing: border-box;
+      -webkit-overflow-scrolling: touch;
+
+      h3 {
+        color: #999;
+        margin: 15px 0;
+        font-size: 14px;
+        position: relative;
+        text-align: center;
+
+        &::before,
+        &::after {
+          content: ' ';
+          width: 45px;
+          height: 1px;
+          top: 50%;
+          position: absolute;
+          background-color: #e5e5e5;
+        }
+
+        &::before {
+          left: 50%;
+          margin-left: -95px;
+        }
+
+        &::after {
+          right: 50%;
+          margin-right: -95px;
+        }
+      }
+
+      .van-order-coupon-card + h3 {
+        margin-top: 30px;
+      }
+    }
+
+    &__close {
+      left: 0;
+      bottom: 0;
+      width: 100%;
+      font-size: 15px;
+      line-height: 45px;
+      text-align: center;
+      position: absolute;
+      background-color: #fff;
+
+      &::after {
+        @mixin border-retina (top);
+      }
+    }
+  }
+
+  &-coupon {
+    display: flex;
+    height: 100px;
+    margin: 0 15px 10px;
+
+    &__head {
+      display: flex;
+      height: 100%;
+      min-width: 126px;
+    }
+
+    &__lines {
+      height: 100%;
+      min-width: 18px;
+      background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAADICAMAAAC3WLNTAAAAclBMVEUAAAD/cHD/gID/amr/a2v/cXH/amr/dHT/cHD/cnL/bW3/aGj/dXX/gID/Z2f/Z2f/bW3/dXX/Zmb/dnb/Z2f/d3f/a2v/dnb/c3P/dXX/dHT/eHj/dHT/amr/cXH/bm7/aGj/bW3/cHD/bGz/dnb/Z2fPFIA9AAAAHHRSTlMANwyaQpoMQkLm5uaaBvPVvZSUj48rK/Pz1dVCCskVeAAABKBJREFUWMOFmdd2GzEMRKH03ntW0a5l//8vBh0hB2JgcZ/umRkC4JNJ6uvnn983rvvtnos/UzHy9uP9poj/7qGY+aCIcULxB6CPiYQjKn1VrzVIn7eqCDVT9AtlNlD6sWFBpg7RAxBiI/To9GYi8ILE9fwlaI0YSf1ugG2G6E17w22ETg0DSo/6UBtAHbKBHXJbHxwvmdBzBJzCZiLiII4FpzgNGKNbpj9/tj8LTA8hgdkZYq01Jkr/1yJmVpxn4vrPBQXSVEuQAMFyO/ssoAi1ghRZp5cBPzVkQdmqeLAFxFQSPUdaT+2GwfTQKXrQY/6kjIH8AGHr0Q4wDF5MQtgCL0FKDJtZEGrpWKoEQY4KGDiAgNpQ6Q6E/oDSHUrNIDEDXAEFYXJQurvrHEdIkYljYsBIAFRCO5FatosE0QPpUUkh7GoNeLogrg1xvXhpGHZrWDrL1QvV+jICk/ZPPYQbXTC1eFIayjlcVIcMAcqYtOOy7ChWwZWCS252lHnBhFMolM0MpAd9LBf+48Iput2FASH4mBIKMcSVQq1hKF1MKYgJKyV1teqUyi8viVBhl6IQilwru+RSigsgp1ALleyU1B1ApZUAQi7Tx5cB/yOkFLx8W5XABqHQyqVToORyH4zz9S0hpmAf/CEMfrUQhsWTSmQOxhRATkRLBUG7SpYYBM/xFJPQi1FHuCG+Mq8SCKwY1rKxHEcB0AqxOxZIJCNG9A+5ooiFWikLZuMhRfggWOEFUgSJuqRChWEsg67GtMn9Ry5zE/u/nWPEbvwLuT6/QFModGToGkouhSvBA358RK5yLEaVuJ68cs9b4W3pHOk6Lx/Sesw3vEQwlPKHEFJ9LH9SdUOkEjrqhs4gdOJuFQepPLgP5+KnU3rCkazzfSprphP9RthYrlKHnl6LrlaBtBSdz9ezMemJkBLnUEpqgrgESQyWXpXCT4jMlVqViT9KFlhY2VWsrAm6Zi6/YPZLQIMSCQ4ab3b2SerfYRvkgEPmNWgdDhlZrVC5Syk94wEHUZOuCx65Kh6sMg1dzaUbu8VEVb47Far52BTj5cdDqCtCt5jzJzXd8NATz9qhZwqE35TrUnaBlVJ5evBizoOUOVoLlHG1EktHb2YxpVWLKmMJwDHnjtp52kekYgnnajQh1dRKL9A+C4VU7hdNjCHDnlqmHXMJWE2F4IDp7fa9cxxykSL8wfs5J8FFaO/tMjpDZohYgSQyejDUeVCqUL2nDni/wYSjrsprj7XfkMqlY+xmdF/fCgb5EzppsxDxWP6kNBTGutrHIVFyBJc57fYcD3IVPLrQZbcW7FH9alkzQ6iftY7FVXKKaPcP4VdELXrYAUNoYILYV0qVbKEUlwS7B/4DysVKCQwtFmTCKxpT0ANKwe0emlT2WWeqFUwlhkRu0S0ZMCPLfvqqNEr1NGLp+lgpF+srwVqsoFPY4RULeiZ3vHnD3SEGeqnBjhn5tY6uxK0SrB1QtkAIw1qpaGYJ4axtLMbYBRFjyIjg+lgBlVpT9G6ghEGO3g9M3yv6MhB+ZqVvKIR29CmBm6D8uxCRiSOmJq0dM0l9+/L+3crwL+JFMIL5LZlUAAAAAElFTkSuQmCC') no-repeat;
+      background-size: 18px 100px;
+    }
+
+    &__gradient {
+      flex: 1;
+      color: #fff;
+      display: flex;
+      margin-left: -1px; /* hack for flex space */
+      text-align: center;
+      padding-right: 16px;
+      flex-direction: column;
+      justify-content: center;
+      background-image: linear-gradient(45deg, #ff6868, #ff8c8c);
+
+      h2 {
+        font-size: 22px;
+        margin-bottom: 10px;
+
+        span {
+          font-size: 16px;
+        }
+      }
+
+      p {
+        font-size: 14px;
+        font-weight: 300;
+        @mixin multi-ellipsis 1;
+      }
+    }
+
+    &__body {
+      flex: 1;
+      height: 100%;
+      display: flex;
+      padding: 0 15px;
+      overflow: hidden;
+      position: relative;
+      background-color: #fff;
+      flex-direction: column;
+      justify-content: center;
+      border-radius: 0 4px 4px 0;
+
+      h2 {
+        opacity: .8;
+        font-size: 16px;
+      }
+
+      p,
+      span {
+        color: #999;
+        font-size: 12px;
+        margin-top: 5px;
+      }
+
+      p,
+      h2,
+      span {
+        line-height: 1.4;
+        @mixin multi-ellipsis 1;
+      }
+    }
+
+    &__corner {
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 0;
+      height: 0;
+      border-style: solid;
+      border-width: 18px 19px;
+      border-radius: 0 4px 0 0;
+      border-color: #f44 #f44 transparent transparent;
+
+      .van-icon {
+        position: absolute;
+        top: -13px;
+        right: -13px;
+        color: #fff;
+        font-size: 12px;
+        
+        &::before {
+          font-weight: bold;
+        }
+      }
+    }
+
+    &--disabled {
+      .van-order-coupon-coupon__lines {
+        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAADICAMAAAC3WLNTAAAAWlBMVEUAAACqrremq7Oqv7+mq7Wqqr+rsLeprreqsrmqrralq7SkqbKrsbikqLGqwNWqrrmrr7mkqbGrsbijqLGnq7SssrimrLKlqrOnrLWprraqr7ekqbKrsLijqLGfTYl9AAAAF3RSTlMAN5oMQgya5kJC5uaSkgZC8/PV1b0rK6hQU+kAAASjSURBVFjDfZlJduMwDESZntJDeh5sUdb9r9kuA+AXA0iIIi/8X6FYALNJU/19+fWj3/pNT1V35NvLratgMvTtjxH+1NBLt7rLHbb7OwhVrSUhKQhz7z1Dv6xZoLWnH70vg5ESINDedkg5BrR0yrGs9Pbpw21SqxNvH593YsN+30OibhwvaQXUPgghVH1m6EkAXK30VllB+UeCMG7OmCPtlk5exN6TcWsRv0UE/aG0GIKxMsycfB9j6QgZwn7FgO/AYhSFq+7Q4hBgyMT9kJKkkhJiriTEuoKACereTw+Y98LTsDVvKdenDWAW6gh1lNwTGHvjEGGhRre+U3J0iKGGknl7zeCJjoBCDPQBBxXhY94WwlYFuXLQTfW979LKYKzvECKH3aLGRSCFnnPwK7UPi8VZ7IRAGH+9X9w7iv0a3GvjZG+F8Y8LRRS0fMQ0hUn0o2ws1wEB7tJqV4iEDKVlgZo5bDWYPQWiVzNmNCX2CMo9XSutziEFoTRjRNqkAwBBqBGBvSpMpEVwrXLgr9Gidi511FaQSZVASO2VkJqxRQPefw3GbX2syqdnqdEy2bd7F77qWRvU3ggp09LDvUMmu/crJVN+wlRA9CrG4+0eadmTteLeScW0/De3+zSEljIpD3Mx53WoGssbfQfgrwm6Un5EgAJCL0MAQ2r4AkoYzoBgBnbuiREilSGLw/YLpUuSChBjKAGltIBSzxDKUOpVQYbEx27ABTYiEOurUjvSi6V7V0ihxb3LqbNfXARqRvdXqmb8fgyI8eSNqNst834l41mNe1f1G38EHzE9w8ycZW5juVzEwCHl7S5CqJJrd0Sci9VUM8CcJ843qwnBVFUGCamJBU+OGVsEKsiYE18egQllJSLA1ZF3Nx6uyoYonRwRJbBM+oANtY6pbFU+iwBMp/R7x/dZa6yvGELVZ4aeRliEn6C3QlDzvgnyIvS6HYWpZJxQzRQUEYC5fTDCpFjleLf3jGWvhTG2oKKoBHEA2tZK1gxPpdC8XzXELosBOsIeYDsEEMpKOXugGjG1MyUW9VgJBqWC88cGfJKCgazKETiW7jhOFeubigvNRTjbGIPeFwRJAB1T3LvTwviJFhGshxRhnjl/jGVd0Sk9rUKoGroj4s7EtE/x9aqnhqQRptYzTysqJ578dQIZ475OIvATnhlfcVVjzZFwFXCthNipUo0xYHpVjK3KFxcTk8FYujuB0Hq0vkgJ0WeGnggrjYcrRRCRfwENBk+53SbEQUxl43ZAY48jwDvhz2GqAMuxbPcfPbF/Q4gBb5teoQMFtN0rkE3AiAqw6euBccRaaRMK5kccSsIQYmeMNUiAYU5iC08BGAGAkCBvuEZa+Wq0Gclh6SWl4X1Ogt1pmwMg2/6MYvCkj30/5mgDXi1PDrmNQxpoqxJCSCE3lk4KKdRLjDvWdwPAfQQ6LgJHnPK0CPxK2fnQA1MBCaDZ/oS0A4v9oty4MajNgVoEG7UOMaIgTJy7LZzHWGBWA+FswBTctMsZYr+AfpbAHFb7XQiZScy3rxliFfzd/h06wlY7kJp86d+FGTEhlO4UWgU6Bvzv6++fmWGE/wHKk5MgoCYAjwAAAABJRU5ErkJggg==');
+      }
+
+      .van-order-coupon-coupon__gradient {
+        background-image: linear-gradient(45deg, #a4a9b2, #b7bcc3);
+      }
+    }
+  }
+}