@10yun/cv-mobile-ui 0.5.27 → 0.5.30

package/ui-cv/components/cv-btn-base/cv-btn-base.vue

@@ -1,5 +1,12 @@
 <template>
-  <button class="cv-button-wrap" :type="type" :size="size" @click="parentClick"><slot /></button>
+  <button class="cv-button-wrap" :type="type" :size="size" @click="parentClick" :disabled="loadingStatus">
+    <view class="cv-button-box">
+      <view :class="loadingStatus ? 'cv-button-rotateloop' : ''">
+        <u-loading-icon v-if="loadingStatus" size="20"></u-loading-icon>
+      </view>
+      <slot>{{ text }}</slot>
+    </view>
+  </button>
 </template>
 <script>
 import mpMixin from '../../libs/mixin/mpMixin.js';
@@ -15,7 +22,7 @@ export default {
     },
     type: {
       type: [String],
-      default: 'primary'
+      default: 'default'
     },
     click: {
       type: [Function]
@@ -27,7 +34,7 @@ export default {
   },
   data() {
     return {
-      loadingStatus: true
+      loadingStatus: false
     };
   },
   created() {},
@@ -39,10 +46,10 @@ export default {
     },
     parentClick(evt) {
       if (this.autoLoading) {
-        if (this.loadingStatus) {
-          this.loadingStatus = false;
+        if (!this.loadingStatus) {
+          this.loadingStatus = true;
           this.$emit('click', () => {
-            this.loadingStatus = true;
+            this.loadingStatus = false;
           });
         }
       } else {
@@ -55,19 +62,64 @@ export default {
 <style>
 .cv-button-wrap {
   padding: 0 10px;
-  margin: 0 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 10px;
   margin-bottom: 10px;
   font-size: 15px;
+  width: 90%;
+}
+.cv-button-box {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
 }
 .cv-button-wrap:last-child {
   margin-bottom: 0;
 }
-.cv-button-item2 {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 275px;
-  height: 40px;
-  margin: 10px auto;
+/* 旋转动画 */
+.cv-button-rotateloop {
+  -webkit-transition-property: -webkit-transform;
+  -webkit-transition-duration: 1s;
+  -moz-transition-property: -moz-transform;
+  -moz-transition-duration: 1s;
+  -webkit-animation: rotate 1s linear infinite;
+  -moz-animation: rotate 1s linear infinite;
+  -o-animation: rotate 1s linear infinite;
+  animation: rotate 1s linear infinite;
+}
+@-webkit-keyframes rotate {
+  from {
+    -webkit-transform: rotate(0deg);
+  }
+  to {
+    -webkit-transform: rotate(360deg);
+  }
+}
+@-moz-keyframes rotate {
+  from {
+    -moz-transform: rotate(0deg);
+  }
+  to {
+    -moz-transform: rotate(359deg);
+  }
+}
+@-o-keyframes rotate {
+  from {
+    -o-transform: rotate(0deg);
+  }
+  to {
+    -o-transform: rotate(359deg);
+  }
+}
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(359deg);
+  }
 }
 </style>

package/ui-cv/components/cv-code-sms/cv-code-sms.vue

@@ -15,7 +15,7 @@
       <button
         size="mini"
         class="cv-code-button-item"
-        :class="btnDisabled ? 'cv-code-button-wait' : ''"
+        :class="[btnType, btnDisabled ? 'cv-code-button-wait' : '']"
         :disabled="btnDisabled"
         @tap="getSmsCode"
       >
@@ -60,10 +60,18 @@ export default {
       type: Function,
       default: null
     },
+    apiParam: {
+      type: Object,
+      default: {}
+    },
     // 短信发送间隔
     waitTime: {
       type: [Number, String],
       default: 60
+    },
+    btnType: {
+      type: [String],
+      default: 'default'
     }
   },
   watch: {
@@ -141,7 +149,8 @@ export default {
           this.apiFunc({
             cto_sms_type: 'alterMobile',
             sendCode: '发送验证码',
-            [this.mobileParam]: this.localMobile
+            [this.mobileParam]: this.localMobile,
+            ...this.apiParam
           })
             .then((successRes) => {
               let apiData = successRes;
@@ -193,15 +202,11 @@ export default {
   }
 };
 </script>
-
 <style>
 .cv-code-area {
-  height: 35px;
+  min-height: 35px;
   line-height: 35px;
   font-size: 14px;
-  width: 100%;
-  padding-right: 10px;
-
   display: flex;
   flex-direction: row;
   justify-content: space-between;
@@ -210,22 +215,24 @@ export default {
 }
 .cv-code-input-area {
   width: calc(100% - 120px - 10px);
-  float: left;
+  display: flex;
+  align-items: center;
 }
 .cv-code-input-item {
-  height: 35px;
-  line-height: 35px;
+  height: 100%;
 }
 .cv-code-input-item-placeholder {
   font-size: 14px;
 }
 .cv-code-button-area {
-  float: right;
-  height: 35px;
+  display: flex;
+  align-items: center;
 }
-.cv-code-button-item {
-  height: 35px;
-  line-height: 35px;
+.cv-code-button-item.default {
+  background-color: #f8f8f8;
+  color: #333;
+}
+.cv-code-button-item.primary {
   background-color: #007aff;
   color: #ffffff;
 }

package/ui-cv/components/cv-date-base/cv-date-base.vue

@@ -100,7 +100,7 @@ export default {
   height: 35px;
   line-height: 35px;
   width: 100%;
-  margin-left: 20px;
+  /* margin-left: 20px; */
 }
 .cv-date-base-placeholder {
   color: grey;

package/ui-cv/components/cv-form-item/cv-form-item.vue

@@ -448,7 +448,7 @@ export default {
   min-height: 20px;
 }
 .cv-form-item__inner.is-direction-top .cv-form-item__content {
-  min-height: 30px;
+  min-height: 45px;
 }
 .cv-form-item__label {
   /* #ifndef APP-NVUE */

package/ui-cv/components/cv-input-text/input.css

@@ -1,3 +1,16 @@
+.cv-input-password {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+}
+.cv-input-password .cv-input__right {
+  position: unset;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  justify-content: center;
+}
 .cv-input__content {
   /* min-height: 28px; */
   /* line-height: 36px; */

package/ui-cv/components/cv-picker1/cv-picker1.vue

@@ -48,7 +48,7 @@ export default {
     //数据类型text的名称
     dataText: {
       type: String,
-      default: 'text'
+      default: 'label'
     },
     // 占位符
     placeholder: {

package/ui-fireui/fui-actionsheet/fui-actionsheet.vue

@@ -0,0 +1,202 @@
+<template>
+  <view @touchmove.stop.prevent>
+    <view class="fui-actionsheet" :class="{ 'fui-actionsheet-show': show, 'fui-actionsheet-radius': radius }">
+      <view class="fui-actionsheet-tips" :style="{ fontSize: size + 'rpx', color: color }" v-if="tips">
+        {{ tips }}
+      </view>
+      <view :class="[isCancel ? 'fui-operate-box' : '']">
+        <block v-for="(item, index) in itemList" :key="index">
+          <view
+            class="fui-actionsheet-btn fui-actionsheet-divider"
+            :class="{ 'fui-btn-last': !isCancel && index == itemList.length - 1 }"
+            hover-class="fui-actionsheet-hover"
+            :hover-stay-time="150"
+            :data-index="index"
+            :style="{ color: item.color || '#2B2B2B' }"
+            @tap="handleClickItem"
+          >
+            {{ item.text }}
+          </view>
+        </block>
+      </view>
+      <view
+        class="fui-actionsheet-btn fui-actionsheet-cancel"
+        hover-class="fui-actionsheet-hover"
+        :hover-stay-time="150"
+        v-if="isCancel"
+        @tap="handleClickCancel"
+      >
+        取消
+      </view>
+    </view>
+    <view class="fui-actionsheet-mask" :class="{ 'fui-mask-show': show }" @tap="handleClickMask"></view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'fuiActionsheet',
+  props: {
+    //点击遮罩 是否可关闭
+    maskClosable: {
+      type: Boolean,
+      default: true
+    },
+    //显示操作菜单
+    show: {
+      type: Boolean,
+      default: false
+    },
+    //菜单按钮数组，自定义文本颜色，红色参考色：#e53a37
+    itemList: {
+      type: Array,
+      default: () => {
+        return [
+          {
+            text: '确定',
+            color: '#2B2B2B'
+          }
+        ];
+      }
+    },
+    //提示文字
+    tips: {
+      type: String,
+      default: ''
+    },
+    //提示文字颜色
+    color: {
+      type: String,
+      default: '#808080'
+    },
+    //提示文字大小 rpx
+    size: {
+      type: Number,
+      default: 26
+    },
+    //是否需要圆角
+    radius: {
+      type: Boolean,
+      default: true
+    },
+    //是否需要取消按钮
+    isCancel: {
+      type: Boolean,
+      default: true
+    }
+  },
+  methods: {
+    handleClickMask() {
+      if (!this.maskClosable) return;
+      this.handleClickCancel();
+    },
+    handleClickItem(e) {
+      if (!this.show) return;
+      const dataset = e.currentTarget.dataset;
+      this.$emit('click', {
+        index: Number(dataset.index)
+      });
+    },
+    handleClickCancel() {
+      this.$emit('cancel');
+    }
+  }
+};
+</script>
+
+<style scoped>
+.fui-actionsheet {
+  width: 100%;
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 9999;
+  visibility: hidden;
+  transform: translate3d(0, 100%, 0);
+  transform-origin: center;
+  transition: all 0.25s ease-in-out;
+  background-color: #f7f7f7;
+  min-height: 100rpx;
+}
+
+.fui-actionsheet-radius {
+  border-top-left-radius: 20rpx;
+  border-top-right-radius: 20rpx;
+  overflow: hidden;
+}
+
+.fui-actionsheet-show {
+  transform: translate3d(0, 0, 0);
+  visibility: visible;
+}
+
+.fui-actionsheet-tips {
+  width: 100%;
+  padding: 40rpx 60rpx;
+  box-sizing: border-box;
+  text-align: center;
+  background-color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.fui-operate-box {
+  padding-bottom: 12rpx;
+}
+
+.fui-actionsheet-btn {
+  width: 100%;
+  height: 100rpx;
+  background-color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  font-size: 34rpx;
+  position: relative;
+}
+
+.fui-btn-last {
+  padding-bottom: env(safe-area-inset-bottom);
+}
+
+.fui-actionsheet-divider::before {
+  content: '';
+  width: 100%;
+  border-top: 1rpx solid #e7e7e7;
+  position: absolute;
+  top: 0;
+  left: 0;
+  -webkit-transform: scaleY(0.5);
+  transform: scaleY(0.5);
+}
+
+.fui-actionsheet-cancel {
+  color: #1a1a1a;
+  padding-bottom: env(safe-area-inset-bottom);
+}
+
+.fui-actionsheet-hover {
+  background-color: #f7f7f9;
+}
+
+.fui-actionsheet-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.6);
+  z-index: 9996;
+  transition: all 0.3s ease-in-out;
+  opacity: 0;
+  visibility: hidden;
+}
+
+.fui-mask-show {
+  opacity: 1;
+  visibility: visible;
+}
+</style>

package/ui-fireui/fui-alert/fui-alert.vue

@@ -0,0 +1,141 @@
+<template>
+  <view>
+    <view class="fui-alert-class fui-alert-box" :class="[show ? 'fui-alert-show' : '']">
+      <view class="fui-alert-content" :style="{ fontSize: size + 'rpx', color: color }">
+        <slot></slot>
+      </view>
+      <view
+        class="fui-alert-btn"
+        :style="{ color: btnColor }"
+        hover-class="fui-alert-btn-hover"
+        :hover-stay-time="150"
+        @tap.stop="handleClick"
+      >
+        {{ btnText }}
+      </view>
+    </view>
+    <view class="fui-alert-mask" :class="[show ? 'fui-alert-mask-show' : '']" @tap.stop="handleClickCancel"></view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'fuiAlert',
+  props: {
+    //控制显示
+    show: {
+      type: Boolean,
+      default: false
+    },
+    //提示信息字体大小
+    size: {
+      type: Number,
+      default: 30
+    },
+    //提示信息字体颜色
+    color: {
+      type: String,
+      default: '#333'
+    },
+    //按钮字体颜色
+    btnColor: {
+      type: String,
+      default: '#EB0909'
+    },
+    btnText: {
+      type: String,
+      default: '确定'
+    },
+    //点击遮罩 是否可关闭
+    maskClosable: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    handleClick(e) {
+      if (!this.show) return;
+      this.$emit('click', {});
+    },
+    handleClickCancel() {
+      if (!this.maskClosable) return;
+      this.$emit('cancel');
+    }
+  }
+};
+</script>
+
+<style scoped>
+.fui-alert-box {
+  position: fixed;
+  width: 560rpx;
+  left: 50%;
+  top: 50%;
+  background-color: #fff;
+  transition: all 0.3s ease-in-out;
+  transform: translate(-50%, -50%) scale(0);
+  opacity: 0;
+  border-radius: 6rpx;
+  overflow: hidden;
+  z-index: 99998;
+}
+
+.fui-alert-show {
+  transform: translate(-50%, -50%) scale(1);
+  opacity: 1;
+}
+
+.fui-alert-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 99996;
+  transition: all 0.3s ease-in-out;
+  opacity: 0;
+  visibility: hidden;
+}
+
+.fui-alert-mask-show {
+  visibility: visible;
+  opacity: 1;
+}
+
+.fui-alert-content {
+  text-align: center;
+  color: #333333;
+  padding: 98rpx 48rpx 92rpx 48rpx;
+  box-sizing: border-box;
+  word-break: break-all;
+}
+
+.fui-alert-btn {
+  width: 100%;
+  height: 90rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #fff;
+  box-sizing: border-box;
+  position: relative;
+  font-size: 32rpx;
+  line-height: 32rpx;
+}
+
+.fui-alert-btn-hover {
+  background-color: #f7f7f7;
+}
+
+.fui-alert-btn::before {
+  width: 100%;
+  content: '';
+  position: absolute;
+  border-top: 1rpx solid #e0e0e0;
+  -webkit-transform: scaleY(0.5);
+  transform: scaleY(0.5);
+  left: 0;
+  top: 0;
+}
+</style>