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

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>

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

@@ -0,0 +1,158 @@
+<template>
+  <view
+    :class="[dot ? 'fui-badge-dot' : 'fui-badge', 'fui-' + type, !dot ? 'fui-badge-scale' : '']"
+    :style="{ top: top, right: right, position: absolute ? 'absolute' : 'static', transform: getStyle, margin: margin }"
+    @tap="handleClick"
+  >
+    <slot></slot>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'fuiBadge',
+  props: {
+    //primary,warning,green,danger,white，black，gray,white_red
+    type: {
+      type: String,
+      default: 'primary'
+    },
+    //是否是圆点
+    dot: {
+      type: Boolean,
+      default: false
+    },
+    margin: {
+      type: String,
+      default: '0'
+    },
+    //是否绝对定位
+    absolute: {
+      type: Boolean,
+      default: false
+    },
+    top: {
+      type: String,
+      default: '-8rpx'
+    },
+    right: {
+      type: String,
+      default: '0'
+    },
+    //缩放比例
+    scaleRatio: {
+      type: Number,
+      default: 1
+    },
+    //水平方向移动距离
+    translateX: {
+      type: String,
+      default: '0'
+    }
+  },
+  computed: {
+    getStyle() {
+      return `scale(${this.scaleRatio}) translateX(${this.translateX})`;
+    }
+  },
+  methods: {
+    handleClick() {
+      this.$emit('click', {});
+    }
+  }
+};
+</script>
+
+<style scoped>
+/* color start*/
+
+.fui-primary {
+  background-color: #5677fc;
+  color: #fff;
+}
+
+.fui-danger {
+  background-color: #ed3f14;
+  color: #fff;
+}
+
+.fui-red {
+  background-color: #f74d54;
+  color: #fff;
+}
+
+.fui-warning {
+  background-color: #ff7900;
+  color: #fff;
+}
+
+.fui-green {
+  background-color: #19be6b;
+  color: #fff;
+}
+
+.fui-white {
+  background-color: #fff;
+  color: #333;
+}
+
+.fui-white_red {
+  background-color: #fff;
+  color: #f74d54;
+}
+
+.fui-white_primary {
+  background-color: #fff;
+  color: #5677fc;
+}
+
+.fui-white_green {
+  background-color: #fff;
+  color: #19be6b;
+}
+
+.fui-white_warning {
+  background-color: #fff;
+  color: #ff7900;
+}
+
+.fui-black {
+  background-color: #000;
+  color: #fff;
+}
+
+.fui-gray {
+  background-color: #ededed;
+  color: #999;
+}
+
+/* color end*/
+
+/* badge start*/
+
+.fui-badge-dot {
+  height: 8px;
+  width: 8px;
+  border-radius: 50%;
+}
+
+.fui-badge {
+  font-size: 24rpx;
+  line-height: 24rpx;
+  height: 36rpx;
+  min-width: 36rpx;
+  padding: 0 10rpx;
+  box-sizing: border-box;
+  border-radius: 100rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10;
+}
+
+.fui-badge-scale {
+  transform-origin: center center;
+}
+
+/* badge end*/
+</style>