Przeglądaj źródła

优化:订单结算台选择优惠券改为自定义radio

萤火科技 1 rok temu
rodzic
commit
181a951f45
3 zmienionych plików z 40 dodań i 14 usunięć
  1. 3 3
      pages/checkout/index.vue
  2. 30 1
      pages/checkout/style.scss
  3. 7 10
      utils/utils.scss

+ 3 - 3
pages/checkout/index.vue

@@ -197,9 +197,9 @@
                     </view>
                   </view>
                   <view class="coupon-right">
-                    <u-radio-group v-model="selectCouponId">
-                      <u-radio :name="item.user_coupon_id" :active-color="appTheme.mainBg"></u-radio>
-                    </u-radio-group>
+                    <view class="my-radio" :class="{ checked: selectCouponId == item.user_coupon_id }">
+                      <u-icon name="checkbox-mark" :size="20" />
+                    </view>
                   </view>
                 </view>
                 <!-- 优惠券描述 -->

+ 30 - 1
pages/checkout/style.scss

@@ -96,7 +96,7 @@
     align-items: center;
     padding-top: 30rpx;
     box-shadow: 0 -12rpx 30rpx -6rpx rgba(151, 151, 151, 0.1);
-    
+
     .control {
       display: flex;
       justify-content: center;
@@ -486,3 +486,32 @@
     }
   }
 }
+
+// 自定义radio
+.my-radio {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 34rpx;
+  height: 34rpx;
+  text-align: center;
+  border: 1px solid #c8c9cc;
+  transition-duration: 0.2s;
+  border-radius: 100%;
+  color: transparent;
+
+  &.checked {
+    background-color: $main-bg;
+    border-color: $main-bg;
+    color: #fff;
+  }
+
+  &.disabled {
+    background-color: #ebedf0;
+    border-color: #c8c9cc;
+  }
+
+  &.disabled-checked {
+    color: #c8c9cc !important;
+  }
+}

+ 7 - 10
utils/utils.scss

@@ -1,12 +1,6 @@
-.container, input {
-  font-family: PingFang-Medium,
-                 PingFangSC-Regular,
-                 Heiti,
-                 Heiti SC,
-                 DroidSans,
-                 DroidSansFallback,
-                 "Microsoft YaHei",
-                 sans-serif;
+.container,
+input {
+  font-family: PingFang-Medium, PingFangSC-Regular, Heiti, Heiti SC, DroidSans, DroidSansFallback, 'Microsoft YaHei', sans-serif;
   -webkit-font-smoothing: antialiased;
 }
 
@@ -113,7 +107,7 @@
 
 .clearfix::after {
   clear: both;
-  content: " ";
+  content: ' ';
   display: table;
 }
 
@@ -262,6 +256,9 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  text {
+    white-space: nowrap;
+  }
 }
 
 .twoline-hide {