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

package/ui-fireui/fui-timeaxis-item/fui-timeaxis-item.vue

@@ -0,0 +1,48 @@
+<template>
+  <view class="fui-timeaxis-item">
+    <slot name="content"></slot>
+    <view class="fui-timeaxis-node" :style="{ backgroundColor: backgroundColor }">
+      <slot name="node"></slot>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'fuiTimeaxisItem',
+  props: {
+    //节点背景色
+    backgroundColor: {
+      type: String,
+      default: '#fafafa'
+    }
+  },
+  data() {
+    return {};
+  }
+};
+</script>
+
+<style scoped>
+.fui-timeaxis-item {
+  position: relative;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 25px;
+}
+
+.fui-timeaxis-node {
+  position: absolute;
+  top: 0;
+  left: -20px;
+  transform-origin: 0;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 99;
+  background-color: #fafafa;
+  font-size: 24rpx;
+}
+</style>

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

@@ -0,0 +1,161 @@
+<template>
+  <block v-if="position == 'top'">
+    <view class="fui-tips-class fui-toptips" :class="['fui-' + type, show ? 'fui-top-show' : '']">{{ msg }}</view>
+  </block>
+  <block v-else>
+    <view
+      class="fui-tips-class fui-toast"
+      :class="[position == 'center' ? 'fui-centertips' : 'fui-bottomtips', show ? 'fui-toast-show' : '']"
+    >
+      <view class="fui-tips-content" :class="['fui-' + type]">
+        {{ msg }}
+      </view>
+    </view>
+  </block>
+</template>
+
+<script>
+export default {
+  name: 'fuiTips',
+  props: {
+    //top bottom center
+    position: {
+      type: String,
+      default: 'top'
+    }
+  },
+  data() {
+    return {
+      timer: null,
+      show: false,
+      msg: '无法连接到服务器~',
+      //translucent,primary,green,warning,danger
+      type: 'translucent'
+    };
+  },
+  methods: {
+    showTips(options) {
+      const { type = 'translucent', duration = 2000 } = options;
+      clearTimeout(this.timer);
+      this.show = true;
+      // this.duration = duration < 2000 ? 2000 : duration;
+      this.type = type;
+      this.msg = options.msg;
+      this.timer = setTimeout(() => {
+        this.show = false;
+        clearTimeout(this.timer);
+        this.timer = null;
+      }, duration);
+    }
+  }
+};
+</script>
+
+<style scoped>
+/*顶部消息提醒 start*/
+.fui-toptips {
+  width: 100%;
+  padding: 18rpx 30rpx;
+  box-sizing: border-box;
+  position: fixed;
+  z-index: 9999;
+  color: #fff;
+  font-size: 30rpx;
+  left: 0;
+  top: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  word-break: break-all;
+  opacity: 0;
+  transform: translateZ(0) translateY(-100%);
+  transition: all 0.3s ease-in-out;
+}
+
+.fui-top-show {
+  transform: translateZ(0) translateY(0);
+  opacity: 1;
+}
+
+/*顶部消息提醒 end*/
+
+/*toast消息提醒 start*/
+
+/*注意问题：
+ 1、fixed 元素宽度无法自适应，所以增加了子元素
+ 2、fixed 和 display冲突导致动画效果消失，暂时使用visibility替代
+*/
+.fui-toast {
+  width: 80%;
+  box-sizing: border-box;
+  color: #fff;
+  font-size: 28rpx;
+  position: fixed;
+  visibility: hidden;
+  opacity: 0;
+  left: 50%;
+  transition: all 0.3s ease-in-out;
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.fui-toast-show {
+  visibility: visible;
+  opacity: 1;
+}
+
+.fui-tips-content {
+  word-wrap: break-word;
+  word-break: break-all;
+  border-radius: 8rpx;
+  padding: 18rpx 30rpx;
+}
+
+/*底部消息提醒 start*/
+.fui-bottomtips {
+  bottom: 120rpx;
+  -webkit-transform: translateX(-50%);
+  transform: translateX(-50%);
+}
+
+/*底部消息提醒 end*/
+
+/*居中消息提醒 start*/
+.fui-centertips {
+  top: 50%;
+  -webkit-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+}
+
+/*居中消息提醒 end*/
+
+/*toast消息提醒 end*/
+
+/*背景颜色 start*/
+
+.fui-primary {
+  background-color: #5677fc;
+}
+
+.fui-green {
+  background-color: #19be6b;
+}
+
+.fui-warning {
+  background-color: #ff7900;
+}
+
+.fui-danger {
+  background-color: #ed3f14;
+}
+
+.fui-translucent {
+  background-color: rgba(0, 0, 0, 0.7);
+}
+
+/*背景颜色 end*/
+
+/*消息提醒 end*/
+</style>

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

@@ -0,0 +1,117 @@
+<template>
+  <view
+    class="fui-toast"
+    :class="[visible ? 'fui-toast-show' : '', content ? 'fui-toast-padding' : '', icon ? '' : 'fui-unicon-padding']"
+    :style="{ width: getWidth(icon, content) }"
+  >
+    <image :src="imgUrl" class="fui-toast-img" v-if="icon"></image>
+    <view class="fui-toast-text" :class="[icon ? '' : 'fui-unicon']">{{ title }}</view>
+    <view class="fui-toast-text fui-content-ptop" v-if="content && icon">{{ content }}</view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'fuiToast',
+  props: {},
+  data() {
+    return {
+      timer: null,
+      //是否显示
+      visible: false,
+      //显示标题
+      title: '操作成功',
+      //显示内容
+      content: '',
+      //是否有icon
+      icon: false,
+      imgUrl: ''
+    };
+  },
+  methods: {
+    show(options) {
+      let { duration = 2000, icon = false } = options;
+      clearTimeout(this.timer);
+      this.visible = true;
+      this.title = options.title || '';
+      this.content = options.content || '';
+      this.icon = icon;
+      if (icon && options.imgUrl) {
+        this.imgUrl = options.imgUrl;
+      }
+      this.timer = setTimeout(() => {
+        this.visible = false;
+        clearTimeout(this.timer);
+        this.timer = null;
+      }, duration);
+    },
+    getWidth(icon, content) {
+      let width = 'auto';
+      if (icon) {
+        width = content ? '420rpx' : '360rpx';
+      }
+      return width;
+    }
+  }
+};
+</script>
+
+<style scoped>
+.fui-toast {
+  background-color: rgba(0, 0, 0, 0.75);
+  border-radius: 10rpx;
+  position: fixed;
+  visibility: hidden;
+  opacity: 0;
+  left: 50%;
+  top: 48%;
+  -webkit-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+  transition: 0.3s ease-in-out;
+  transition-property: opacity, visibility;
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  padding: 60rpx 20rpx 54rpx 20rpx;
+  box-sizing: border-box;
+}
+
+.fui-toast-padding {
+  padding-top: 50rpx !important;
+  padding-bottom: 50rpx !important;
+}
+.fui-unicon-padding {
+  padding: 24rpx 40rpx !important;
+  word-break: break-all;
+}
+
+.fui-toast-show {
+  visibility: visible;
+  opacity: 1;
+}
+
+.fui-toast-img {
+  width: 120rpx;
+  height: 120rpx;
+  display: block;
+  margin-bottom: 28rpx;
+}
+
+.fui-toast-text {
+  font-size: 30rpx;
+  line-height: 30rpx;
+  font-weight: 400;
+  color: #fff;
+  text-align: center;
+}
+.fui-unicon {
+  line-height: 40rpx !important;
+  font-size: 32rpx !important;
+}
+.fui-content-ptop {
+  padding-top: 10rpx;
+  font-size: 26rpx !important;
+}
+</style>

package/ui-fireui/fui-top-dropdown/fui-top-dropdown.vue

@@ -0,0 +1,129 @@
+<template>
+  <view>
+    <view
+      class="fui-top-dropdown fui-dropdown-box"
+      :class="[show ? 'fui-dropdown-show' : '']"
+      :style="{
+        height: height ? px(height) : 'auto',
+        width: width + 'vw',
+        left: left + 'vw',
+        'border-top-right-radius': topRadius ? px(topRadius) : 'auto',
+        'border-top-left-radius': topRadius ? px(topRadius) : 'auto',
+        backgroundColor: backgroundColor,
+        paddingBottom: px(paddingbtm),
+        transform: 'translateZ(0) translateY(' + (show ? px(translatey) : '-100%') + ')'
+      }"
+    >
+      <slot></slot>
+    </view>
+    <view
+      @touchmove.stop.prevent
+      class="fui-dropdown-mask"
+      :class="[mask && show ? 'fui-mask-show' : '']"
+      @tap="handleClose"
+    ></view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'fuiTopDropdown',
+  data() {
+    return {
+      left: 0
+    };
+  },
+  props: {
+    //是否需要mask
+    mask: {
+      type: Boolean,
+      default: true
+    },
+    //控制显示
+    show: {
+      type: Boolean,
+      default: false
+    },
+    //背景颜色
+    backgroundColor: {
+      type: String,
+      default: '#f2f2f2'
+    },
+    //padding-bottom  rpx
+    paddingbtm: {
+      type: Number,
+      default: 0
+    },
+    //高度 rpx
+    height: {
+      type: Number,
+      default: 580
+    },
+    //高度 vw
+    width: {
+      type: Number,
+      default: 100
+    },
+    topRadius: {
+      type: Number,
+      default: 0
+    },
+    //移动距离 需要计算
+    translatey: {
+      type: Number,
+      default: 0
+    }
+  },
+  created() {
+    this.left = (100 - this.width) / 2;
+  },
+  methods: {
+    handleClose() {
+      if (!this.show) {
+        return;
+      }
+      this.$emit('close', {});
+    },
+    px(num) {
+      return uni.upx2px(num) + 'px';
+    }
+  }
+};
+</script>
+
+<style scoped>
+.fui-dropdown-box {
+  position: fixed;
+  box-sizing: border-box;
+  border-bottom-right-radius: 24rpx;
+  border-bottom-left-radius: 24rpx;
+  transform: translateZ(0);
+  overflow: hidden;
+  /* visibility: hidden; */
+  transition: all 0.3s ease-in-out;
+  z-index: 996;
+  top: 0;
+}
+
+.fui-dropdown-show {
+  /* visibility: visible; */
+}
+
+.fui-dropdown-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.6);
+  z-index: 986;
+  transition: all 0.3s ease-in-out;
+  opacity: 0;
+  visibility: hidden;
+}
+
+.fui-mask-show {
+  opacity: 1;
+  visibility: visible;
+}
+</style>