@10yun/cv-mobile-ui 0.5.62 → 0.5.63

package/ui-fireui/components/u-loadmore/u-loadmore.vue

@@ -1,13 +1,16 @@
 <template>
   <view class="up-loadmore">
-    <view :class="['up-loading-' + index, index == 3 && type ? 'up-loading-' + type : '']"></view>
+    <view
+      :class="['up-loading-' + index, index == 3 && type ? 'up-loading-' + type : '']"
+      :style="{ borderLeftColor: getBorderColor }"
+    ></view>
     <view class="up-loadmore-tips">{{ text }}</view>
   </view>
 </template>
 
 <script>
 export default {
-  name: 'fuiLoadmore',
+  name: 'tuiLoadmore',
   props: {
     //显示文本
     text: {
@@ -16,7 +19,7 @@ export default {
     },
     //loading 样式 ：1,2,3
     index: {
-      type: Number,
+      type: [Number, String],
       default: 1
     },
     //颜色设置，只有index=3时生效：primary，red，orange，green
@@ -24,6 +27,21 @@ export default {
       type: String,
       default: ''
     }
+  },
+  computed: {
+    getBorderColor() {
+      let color = 'transparent';
+      if (this.index == 3 && this.type) {
+        const global = uni && uni.$tui && uni.$tui.color;
+        color = {
+          primary: (global && global.primary) || '#5677fc',
+          red: (global && global.danger) || '#EB0909',
+          orange: (global && global.warning) || '#ff7900',
+          green: (global && global.success) || '#07c160'
+        }[this.type];
+      }
+      return color;
+    }
   }
 };
 </script>

package/ui-fireui/components/u-modal/u-modal.vue

@@ -1,8 +1,8 @@
 <template>
-  <view @touchmove.stop.prevent>
+  <view class="up-modal__container" :class="[show ? 'up-modal-show' : '']" :style="{ zIndex: zIndex }" @touchmove.stop.prevent>
     <view
       class="up-modal-box"
-      :style="{ width: width, padding: padding, borderRadius: radius }"
+      :style="{ width: width, padding: padding, borderRadius: radius, backgroundColor: backgroundColor, zIndex: zIndex + 1 }"
       :class="[fadeIn || show ? 'up-modal-normal' : 'up-modal-scale', show ? 'up-modal-show' : '']"
     >
       <view v-if="!custom">
@@ -11,35 +11,46 @@
           {{ content }}
         </view>
         <view class="up-modalBtn-box" :class="[button.length != 2 ? 'up-flex-column' : '']">
-          <block v-for="(item, index) in button" :key="index">
-            <button
-              class="up-modal-btn"
-              :class="[
-                'up-' + (item.type || 'primary') + (item.plain ? '-outline' : ''),
-                button.length != 2 ? 'up-btn-width' : '',
-                button.length > 2 ? 'up-mbtm' : '',
-                shape == 'circle' ? 'up-circle-btn' : ''
-              ]"
-              :hover-class="'up-' + (item.plain ? 'outline' : item.type || 'primary') + '-hover'"
-              :data-index="index"
-              @tap="handleClick"
-            >
-              {{ item.text || '确定' }}
-            </button>
-          </block>
+          <view
+            v-for="(item, index) in button"
+            :key="index"
+            class="up-modal-btn"
+            :class="[
+              button.length != 2 ? 'up-btn-width' : '',
+              button.length > 2 ? 'up-mbtm' : '',
+              shape == 'circle' ? 'up-circle-btn' : ''
+            ]"
+            :style="{ background: getColor(item.type, true, item.plain), color: getTextColor(item.type, item.plain) }"
+            @tap="handleClick(index)"
+          >
+            {{ item.text || '确定' }}
+            <view
+              class="up-modal__border"
+              :class="[shape == 'circle' ? 'up-circle-border' : '']"
+              :style="{ borderColor: getColor(item.type) }"
+              v-if="item.plain"
+            ></view>
+          </view>
         </view>
       </view>
       <view v-else>
         <slot></slot>
       </view>
     </view>
-    <view class="up-modal-mask" :class="[show ? 'up-mask-show' : '']" @tap="handleClickCancel"></view>
+    <view
+      v-if="isMask"
+      class="up-modal-mask"
+      :class="[show ? 'up-mask-show' : '']"
+      :style="{ zIndex: maskZIndex, background: maskColor }"
+      @tap="handleClickCancel"
+    ></view>
   </view>
 </template>
 
 <script>
 export default {
-  name: 'fuiModal',
+  name: 'tuiModal',
+  emits: ['click', 'cancel'],
   props: {
     //是否显示
     show: {
@@ -50,6 +61,10 @@ export default {
       type: String,
       default: '84%'
     },
+    backgroundColor: {
+      type: String,
+      default: '#fff'
+    },
     padding: {
       type: String,
       default: '40rpx 64rpx'
@@ -85,7 +100,7 @@ export default {
     },
     button: {
       type: Array,
-      default: () => {
+      default: function () {
         return [
           {
             text: '取消',
@@ -105,6 +120,15 @@ export default {
       type: Boolean,
       default: true
     },
+    //是否显示mask
+    isMask: {
+      type: Boolean,
+      default: true
+    },
+    maskColor: {
+      type: String,
+      default: 'rgba(0, 0, 0, 0.6)'
+    },
     //淡入效果，自定义弹框插入input输入框时传true
     fadeIn: {
       type: Boolean,
@@ -114,17 +138,60 @@ export default {
     custom: {
       type: Boolean,
       default: false
+    },
+    //容器z-index
+    zIndex: {
+      type: Number,
+      default: 9997
+    },
+    //mask z-index
+    maskZIndex: {
+      type: Number,
+      default: 9990
     }
   },
   data() {
     return {};
   },
   methods: {
-    handleClick(e) {
+    getColor(type, isBg, plain) {
+      const global = uni && uni.$tui && uni.$tui.color;
+      let color = {
+        primary: (global && global.primary) || '#5677fc',
+        green: (global && global.success) || '#07c160',
+        warning: (global && global.warning) || '#ff7900',
+        danger: (global && global.danger) || '#EB0909',
+        red: (global && global.danger) || '#EB0909',
+        pink: (global && global.pink) || '#f74d54',
+        white: isBg ? '#fff' : '#333',
+        gray: isBg ? '#ededed' : '#999'
+      }[type || 'primary'];
+      if (isBg && plain) {
+        color = 'transparent';
+      }
+      return color;
+    },
+    getTextColor(type, plain) {
+      const global = uni && uni.$tui && uni.$tui.color;
+      let color = {
+        primary: (global && global.primary) || '#5677fc',
+        green: (global && global.success) || '#07c160',
+        warning: (global && global.warning) || '#ff7900',
+        danger: (global && global.danger) || '#EB0909',
+        red: (global && global.danger) || '#EB0909',
+        pink: (global && global.pink) || '#f74d54',
+        white: '#333',
+        gray: '#999'
+      }[type || 'primary'];
+      if (!plain && type !== 'white' && type !== 'gray') {
+        color = '#fff';
+      }
+      return color;
+    },
+    handleClick(index) {
       if (!this.show) return;
-      const dataset = e.currentTarget.dataset;
       this.$emit('click', {
-        index: Number(dataset.index)
+        index: Number(index)
       });
     },
     handleClickCancel() {
@@ -136,25 +203,32 @@ export default {
 </script>
 
 <style scoped>
-.up-modal-box {
+.up-modal__container {
+  width: 100%;
+  height: 100%;
   position: fixed;
-  left: 50%;
-  top: 50%;
-  margin: auto;
-  background-color: #fff;
-  z-index: 9999998;
-  transition: all 0.3s ease-in-out;
+  left: 0;
+  top: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  visibility: hidden;
+}
+
+.up-modal-box {
+  position: relative;
   opacity: 0;
-  box-sizing: border-box;
   visibility: hidden;
+  box-sizing: border-box;
+  transition: all 0.3s ease-in-out;
 }
 
 .up-modal-scale {
-  transform: translate(-50%, -50%) scale(0);
+  transform: scale(0);
 }
 
 .up-modal-normal {
-  transform: translate(-50%, -50%) scale(1);
+  transform: scale(1);
 }
 
 .up-modal-show {
@@ -168,8 +242,6 @@ export default {
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: rgba(0, 0, 0, 0.6);
-  z-index: 9999996;
   transition: all 0.3s ease-in-out;
   opacity: 0;
   visibility: hidden;
@@ -225,168 +297,60 @@ export default {
   overflow: visible;
   margin-left: 0;
   margin-right: 0;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /* #ifdef H5 */
+  cursor: pointer;
+  /* #endif */
+  border-width: 0;
+}
+
+.up-modal-btn:active::after {
+  content: '';
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  background-color: rgba(0, 0, 0, 0.15);
+  pointer-events: none;
 }
 
 .up-modal-btn::after {
-  content: ' ';
+  border-radius: 10rpx;
+}
+
+.up-modal__border {
   position: absolute;
   width: 200%;
   height: 200%;
   -webkit-transform-origin: 0 0;
   transform-origin: 0 0;
-  -webkit-transform: scale(0.5, 0.5);
-  transform: scale(0.5, 0.5);
+  transform: scale(0.5, 0.5) translateZ(0);
+  border: 1px solid;
+  box-sizing: border-box;
   left: 0;
   top: 0;
+  z-index: 2;
   border-radius: 20rpx;
+  pointer-events: none;
 }
 
 .up-btn-width {
   width: 80% !important;
 }
 
-.up-primary {
-  background: #5677fc;
-  color: #fff;
-}
-
-.up-primary-hover {
-  background: #4a67d6;
-  color: #e5e5e5;
-}
-
-.up-primary-outline {
-  color: #5677fc;
-  background: transparent;
-}
-
-.up-primary-outline::after {
-  border: 1px solid #5677fc;
-}
-
-.up-danger {
-  background: #4fb49b;
-  color: #fff;
-}
-
-.up-danger-hover {
-  background: #d53912;
-  color: #e5e5e5;
-}
-
-.up-danger-outline {
-  color: #4fb49b;
-  background: transparent;
-}
-
-.up-danger-outline::after {
-  border: 1px solid #4fb49b;
-}
-
-.up-red {
-  background: #4fb49b;
-  color: #fff;
-}
-
-.up-red-hover {
-  background: #4fb49b;
-  color: #e5e5e5;
-}
-
-.up-red-outline {
-  color: #4fb49b;
-  background: transparent;
-}
-
-.up-red-outline::after {
-  border: 1px solid #4fb49b;
-}
-
-.up-warning {
-  background: #ff7900;
-  color: #fff;
-}
-
-.up-warning-hover {
-  background: #e56d00;
-  color: #e5e5e5;
-}
-
-.up-warning-outline {
-  color: #ff7900;
-  background: transparent;
-}
-
-.up-warning-outline::after {
-  border: 1px solid #ff7900;
-}
-
-.up-green {
-  background: #19be6b;
-  color: #fff;
-}
-
-.up-green-hover {
-  background: #16ab60;
-  color: #e5e5e5;
-}
-
-.up-green-outline {
-  color: #19be6b;
-  background: transparent;
-}
-
-.up-green-outline::after {
-  border: 1px solid #19be6b;
-}
-
-.up-white {
-  background: #fff;
-  color: #333;
-}
-
-.up-white-hover {
-  background: #f7f7f9;
-  color: #666;
-}
-
-.up-white-outline {
-  color: #333;
-  background: transparent;
-}
-
-.up-white-outline::after {
-  border: 1px solid #333;
-}
-
-.up-gray {
-  background: #ededed;
-  color: #999;
-}
-
-.up-gray-hover {
-  background: #d5d5d5;
-  color: #898989;
-}
-
-.up-gray-outline {
-  color: #999;
-  background: transparent;
-}
-
-.up-gray-outline::after {
-  border: 1px solid #999;
-}
-
-.up-outline-hover {
-  opacity: 0.6;
-}
-
 .up-circle-btn {
   border-radius: 40rpx !important;
 }
 
 .up-circle-btn::after {
+  border-radius: 40rpx !important;
+}
+
+.up-circle-border {
   border-radius: 80rpx !important;
 }
 </style>