Ver código fonte

修复:用户端倒计时文字颜色不正确

萤火科技 1 ano atrás
pai
commit
7eafa9cc88
2 arquivos alterados com 31 adições e 23 exclusões
  1. 30 19
      components/countdown/index.vue
  2. 1 4
      pages/checkout/cashier/index.vue

+ 30 - 19
components/countdown/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <view v-if="date" class="count-down">
+  <view v-if="date" class="count-down" :style="{ color: textColor, fontSize: `${fontSize}rpx` }">
     <view :class="[`${theme}-theme`, `separator-${separator}`]">
       <!-- <block v-if="dynamic.day != '00'">
         <text class="dynamic-value">{{ dynamic.day }}</text>
@@ -9,11 +9,11 @@
         <text class="dynamic-value">{{ dynamic.day }}</text>
         <text class="separator">{{ separatorText.day }}</text>
       </block>
-      <text class="dynamic-value" :style="{ backgroundColor: customBgColor }">{{ dynamic.hou }}</text>
+      <text class="dynamic-value" :style="{ backgroundColor: customNumBgColor, color: customNumColor }">{{ dynamic.hou }}</text>
       <text class="separator">{{ separatorText.hou }}</text>
-      <text class="dynamic-value" :style="{ backgroundColor: customBgColor }">{{ dynamic.min }}</text>
+      <text class="dynamic-value" :style="{ backgroundColor: customNumBgColor, color: customNumColor }">{{ dynamic.min }}</text>
       <text class="separator">{{ separatorText.min }}</text>
-      <text class="dynamic-value" :style="{ backgroundColor: customBgColor }">{{ dynamic.sec }}</text>
+      <text class="dynamic-value" :style="{ backgroundColor: customNumBgColor, color: customNumColor }">{{ dynamic.sec }}</text>
       <text class="separator">{{ separatorText.sec }}</text>
     </view>
   </view>
@@ -39,11 +39,25 @@
         type: String,
         default: 'text'
       },
-      // custom样式的背景色
-      customBgColor: {
+      // custom: 倒计时文字颜色 (分隔符和纯文本)
+      textColor: {
+        type: String,
+        default: '#303133'
+      },
+      fontSize: {
+        type: Number,
+        default: 26
+      },
+      // custom: 倒计时数字背景颜色
+      customNumBgColor: {
         type: String,
         default: '#252525'
-      }
+      },
+      // custom: 倒计时数字颜色
+      customNumColor: {
+        type: String,
+        default: '#fff'
+      },
     },
     data() {
       return {
@@ -138,17 +152,11 @@
 </script>
 
 <style lang="scss" scoped>
-  .item {
-    display: inline-block;
-    width: 22px;
-    margin-right: 5px;
-    color: #fff;
-    font-size: 12px;
-    text-align: center;
-    background-color: #1989fa;
-    border-radius: 2px;
+  .count-down {
+    font-size: 26rpx;
   }
 
+  // 分隔符
   .separator {
     padding: 0 2rpx;
   }
@@ -169,15 +177,18 @@
   // 背景主题
   .custom-theme {
     .dynamic-value {
+      display: inline-block;
       background: #252525;
-      color: #fff;
-      padding: 2rpx 8rpx;
+      width: 40rpx;
+      height: 40rpx;
       line-height: 40rpx;
+      text-align: center;
       border-radius: 8rpx;
+      color: #fff;
     }
 
     .separator {
       padding: 0 6rpx;
     }
   }
-</style>
+</style>

+ 1 - 4
pages/checkout/cashier/index.vue

@@ -5,7 +5,7 @@
       <!-- 支付剩余时间 -->
       <view v-if="order.showExpiration" class="order-countdown">
         <text class="m-r-6">剩余时间</text>
-        <count-down :date="order.expirationTime" separator="zh" theme="text" />
+        <count-down :date="order.expirationTime" separator="zh" theme="text" textColor="#666666" customNumColor="#666666" />
       </view>
       <!-- 付款金额 -->
       <view class="order-amount">
@@ -13,7 +13,6 @@
         <text class="amount">{{ order.pay_price }}</text>
       </view>
     </view>
-
     <!-- 支付方式 -->
     <view class="payment-method">
       <view v-for="(item, index) in methods" :key="index" class="pay-item dis-flex flex-x-between" @click="handleSelectPayType(index)">
@@ -33,14 +32,12 @@
         </view>
       </view>
     </view>
-
     <!-- 确认按钮 -->
     <view class="footer-fixed">
       <view class="btn-wrapper">
         <view class="btn-item btn-item-main" :class="{ disabled }" @click="handleSubmit()">确认支付</view>
       </view>
     </view>
-
     <!-- 支付确认弹窗 -->
     <!-- #ifdef H5 -->
     <u-modal v-if="tempUnifyData" v-model="showConfirmModal" title="支付确认" show-cancel-button confirm-text="已完成支付"