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

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

@@ -0,0 +1,103 @@
+<template>
+  <view @touchmove.stop.prevent>
+    <view v-if="mask" class="fui-drawer-mask" :class="{ 'fui-drawer-mask_show': visible }" @tap="handleMaskClick"></view>
+    <view
+      class="fui-drawer-container"
+      :class="[
+        mode == 'left' ? 'fui-drawer-container_left' : 'fui-drawer-container_right',
+        visible ? 'fui-drawer-container_show' : ''
+      ]"
+    >
+      <slot></slot>
+    </view>
+  </view>
+</template>
+
+<script>
+/**
+ * 超过一屏时插槽使用scroll-view
+ **/
+export default {
+  name: 'fuiDrawer',
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    mask: {
+      type: Boolean,
+      default: true
+    },
+    maskClosable: {
+      type: Boolean,
+      default: true
+    },
+    mode: {
+      type: String,
+      default: 'true' // left right
+    }
+  },
+  methods: {
+    handleMaskClick() {
+      if (!this.maskClosable) {
+        return;
+      }
+      this.$emit('close', {});
+    }
+  }
+};
+</script>
+
+<style scoped>
+.fui-drawer-mask {
+  opacity: 0;
+  visibility: hidden;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 8888;
+  background-color: rgba(0, 0, 0, 0.6);
+  transition: all 0.3s ease-in-out;
+}
+.fui-drawer-mask_show {
+  display: block;
+  visibility: visible;
+  opacity: 1;
+}
+
+.fui-drawer-container {
+  position: fixed;
+  left: 50%;
+  height: 100.2%;
+  top: 0;
+  transform: translate3d(-50%, -50%, 0);
+  transform-origin: center;
+  transition: all 0.3s ease-in-out;
+  z-index: 99999;
+  opacity: 0;
+  overflow-y: scroll;
+  background-color: #fff;
+  -webkit-overflow-scrolling: touch;
+  -ms-touch-action: pan-y cross-slide-y;
+  -ms-scroll-chaining: none;
+  -ms-scroll-limit: 0 50 0 50;
+}
+.fui-drawer-container_left {
+  left: 0;
+  top: 50%;
+  transform: translate3d(-100%, -50%, 0);
+}
+
+.fui-drawer-container_right {
+  right: 0;
+  top: 50%;
+  left: auto;
+  transform: translate3d(100%, -50%, 0);
+}
+.fui-drawer-container_show {
+  opacity: 1;
+  transform: translate3d(0, -50%, 0);
+}
+</style>

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

@@ -0,0 +1,70 @@
+<template>
+  <view class="fui-selected-class fui-dropdown-list" :style="{ height: selectHeight ? selectHeight + 'rpx' : 'auto' }">
+    <slot name="selectionbox"></slot>
+    <view
+      class="fui-dropdown-view"
+      :class="[show ? 'fui-dropdownlist-show' : '']"
+      :style="{ backgroundColor: backgroundColor, height: show ? height + 'rpx' : 0, top: top + 'rpx' }"
+    >
+      <slot name="dropdownbox"></slot>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'fuiDropdownList',
+  props: {
+    //控制显示
+    show: {
+      type: Boolean,
+      default: false
+    },
+    //背景颜色
+    backgroundColor: {
+      type: String,
+      default: '#fff'
+    },
+    //top  rpx
+    top: {
+      type: Number,
+      default: 0
+    },
+    //下拉框高度 rpx
+    height: {
+      type: Number,
+      default: 0
+    },
+    //选择框高度 单位rpx
+    selectHeight: {
+      type: Number,
+      default: 0
+    }
+  },
+  methods: {}
+};
+</script>
+
+<style scoped>
+.fui-dropdown-list {
+  position: relative;
+  width: 100%;
+}
+
+.fui-dropdown-view {
+  width: 100%;
+  overflow: hidden;
+  position: absolute;
+  z-index: -99;
+  left: 0;
+  opacity: 0;
+  /* visibility: hidden; */
+  transition: all 0.2s ease-in-out;
+}
+
+.fui-dropdownlist-show {
+  opacity: 1;
+  z-index: 996;
+  /* visibility: visible; */
+}
+</style>

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

@@ -0,0 +1,284 @@
+<template>
+  <view @touchmove.stop.prevent>
+    <view
+      class="fui-fab-box"
+      :class="{ 'fui-fab-right': !left || (left && right) }"
+      :style="{ left: getLeft(), right: getRight(), bottom: bottom + 'rpx' }"
+    >
+      <view class="fui-fab-btn" :class="{ 'fui-visible': isOpen, 'fui-fab-hidden': hidden }">
+        <view
+          class="fui-fab-item-box"
+          :class="{ 'fui-fab-item-left': left && !right && item.imgUrl }"
+          v-for="(item, index) in btnList"
+          :key="index"
+          @tap.stop="handleClick(index)"
+        >
+          <view
+            :class="[left && !right ? 'fui-text-left' : 'fui-text-right']"
+            v-if="item.imgUrl"
+            :style="{ fontSize: item.fontSize + 'rpx', color: item.color }"
+          >
+            {{ item.text || '' }}
+          </view>
+          <view
+            class="fui-fab-item"
+            :style="{ width: width + 'rpx', height: height + 'rpx', background: item.bgColor || bgColor, borderRadius: radius }"
+          >
+            <view class="fui-fab-title" v-if="!item.imgUrl" :style="{ fontSize: item.fontSize + 'rpx', color: item.color }">
+              {{ item.text || '' }}
+            </view>
+            <image
+              :src="item.imgUrl"
+              class="fui-fab-img"
+              v-else
+              :style="{ width: item.imgWidth + 'rpx', height: item.imgHeight + 'rpx' }"
+            ></image>
+          </view>
+        </view>
+      </view>
+      <view
+        class="fui-fab-item"
+        :class="{ 'fui-active': isOpen }"
+        :style="{ width: width + 'rpx', height: height + 'rpx', borderRadius: radius, background: bgColor, color: color }"
+        @tap.stop="handleClick(-1)"
+      >
+        <view class="fui-fab-icon fui-icon-plus"></view>
+      </view>
+    </view>
+    <view class="fui-fab-mask" :class="{ 'fui-visible': isOpen }" @tap="handleClickCancel"></view>
+  </view>
+</template>
+
+<script>
+//拓展出来的按钮不应多于6个，否则违反了作为悬浮按钮的快速、高效的原则
+export default {
+  name: 'fuiFab',
+  props: {
+    //rpx 为0时值为auto
+    left: {
+      type: Number,
+      default: 0
+    },
+    //rpx 当为0时且left不为0，值为auto
+    right: {
+      type: Number,
+      default: 80
+    },
+    //rpx bottom值
+    bottom: {
+      type: Number,
+      default: 100
+    },
+    //默认按钮 宽度 rpx
+    width: {
+      type: Number,
+      default: 108
+    },
+    //默认按钮 高度 rpx
+    height: {
+      type: Number,
+      default: 108
+    },
+    //圆角值
+    radius: {
+      type: String,
+      default: '50%'
+    },
+    //默认按钮背景颜色
+    bgColor: {
+      type: String,
+      default: '#5677fc'
+    },
+    //字体颜色
+    color: {
+      type: String,
+      default: '#fff'
+    },
+    //拓展按钮
+    // bgColor: "#5677fc",
+    // //图标/图片地址
+    // imgUrl: "/static/images/fab/fab_reward.png",
+    // //图片高度 rpx
+    // imgHeight: 60,
+    // //图片宽度 rpx
+    // imgWidth: 60,
+    // //名称
+    // text: "名称",
+    // //字体大小
+    // fontSize: 30,
+    // //字体颜色
+    // color: "#fff"
+    btnList: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    //点击遮罩 是否可关闭
+    maskClosable: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      isOpen: false,
+      hidden: true,
+      timer: null
+    };
+  },
+  methods: {
+    getLeft() {
+      let val = 'auto';
+      if (this.left && !this.right) {
+        val = this.left + 'rpx';
+      }
+      return val;
+    },
+    getRight() {
+      let val = this.right + 'rpx';
+      if (this.left && !this.right) {
+        val = 'auto';
+      }
+      return val;
+    },
+    handleClick(index) {
+      this.hidden = false;
+      clearTimeout(this.timer);
+      if (index == -1 && this.btnList.length) {
+        this.isOpen = !this.isOpen;
+      } else {
+        this.$emit('click', {
+          index: index
+        });
+        this.isOpen = false;
+      }
+      if (!this.isOpen) {
+        this.timer = setTimeout(() => {
+          this.hidden = true;
+        }, 200);
+      }
+    },
+    handleClickCancel() {
+      if (!this.maskClosable) return;
+      this.isOpen = false;
+    }
+  },
+  beforeDestroy() {
+    clearTimeout(this.timer);
+    this.timer = null;
+  }
+};
+</script>
+
+<style scoped>
+@font-face {
+  font-family: 'fuifab';
+  src: url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAREAA0AAAAABnAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAEKAAAABoAAAAciPExJUdERUYAAAQIAAAAHgAAAB4AKQAKT1MvMgAAAaAAAABCAAAAVjyBSAVjbWFwAAAB9AAAAD4AAAFCAA/pvmdhc3AAAAQAAAAACAAAAAj//wADZ2x5ZgAAAkAAAABRAAAAYFkYQQNoZWFkAAABMAAAADAAAAA2Fm5OF2hoZWEAAAFgAAAAHQAAACQH3QOFaG10eAAAAeQAAAAPAAAAEAwAAANsb2NhAAACNAAAAAoAAAAKADAAAG1heHAAAAGAAAAAHwAAACABDwAobmFtZQAAApQAAAFJAAACiCnmEVVwb3N0AAAD4AAAAB8AAAAx2XRuznjaY2BkYGAAYtGolt54fpuvDNwsDCBwc1krH5xm/t/I/J+5FsjlYGACiQIAGAEKZHjaY2BkYGBu+N/AEMPCAALM/xkYGVABCwBZ4wNrAAAAeNpjYGRgYGBhkGEA0QwMTEDMBYQMDP/BfAYAC4kBOAB42mNgZGFgnMDAysDA1Ml0hoGBoR9CM75mMGLkAIoysDIzYAUBaa4pDA7PhJ8JMzf8b2CIYW5gaAAKM4LkAN21DAEAAHjaY2GAABYIZgYAAIMAEAB42mNgYGBmgGAZBkYGELAB8hjBfBYGBSDNAoRA/jPh//8hpOQHqEoGRjYGGJOBkQlIMDGgAkaGYQ8AUSIHswAAAAAAAAAAAAAAMAAAeNpjYGRg/t/I/J+5lkGagYFRUVCPUYmNXVCRj1FETFxRUI7RyMxcUNGO0USN+fS/HEY5XTnGfznicnLijFPAHMYpYnJyjFvBlBgWBQBNJxKpAAAAeNp9kD1OAzEQhZ/zByQSQiCoXVEA2vyUKRMp9Ailo0g23pBo1155nUg5AS0VB6DlGByAGyDRcgpelkmTImvt6PObmeexAZzjGwr/3yXuhBWO8ShcwREy4Sr1F+Ea+V24jhY+hRvUf4SbuFUD4RYu1BsdVO2Eu5vSbcsKZxgIV3CKJ+Eq9ZVwjfwqXMcVPoQb1L+EmxjjV7iFa2WpDOFhMEFgnEFjig3jAjEcLJIyBtahOfRmEsxMTzd6ETubOBso71dilwMeaDnngCntPbdmvkon/mDLgdSYbh4FS7YpjS4idCgbXyyc1d2oc7D9nu22tNi/a4E1x+xRDWzU/D3bM9JIbAyvkJI18jK3pBJTj2hrrPG7ZynW814IiU68y/SIx5o0dTr3bmniwOLn8owcfbS5kj33qBw+Y1kIeb/dTsQgil2GP5PYcRkAAAB42mNgYoAALjDJyIAOWMCiTIxMbFmZiRmJ+QALXAKKAAAAAAH//wACAAEAAAAMAAAAFgAAAAIAAQADAAMAAQAEAAAAAgAAAAB42mNgYGBkAIKrS9Q5QPTNZa18MBoAPbcFzgAA)
+    format('woff');
+  font-weight: normal;
+  font-style: normal;
+}
+
+.fui-fab-icon {
+  font-family: 'fuifab' !important;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  padding: 10rpx;
+}
+
+.fui-icon-plus:before {
+  content: '\e613';
+}
+
+.fui-fab-box {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  position: fixed;
+  z-index: 99997;
+}
+
+.fui-fab-right {
+  align-items: flex-end;
+}
+
+.fui-fab-btn {
+  transform: scale(0);
+  transition: all 0.2s ease-in-out;
+  opacity: 0;
+  visibility: hidden;
+}
+
+.fui-fab-hidden {
+  height: 0;
+  width: 0;
+}
+
+.fui-fab-item-box {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding-bottom: 40rpx;
+}
+
+.fui-fab-item-left {
+  flex-flow: row-reverse;
+}
+
+.fui-fab-title {
+  width: 90%;
+  text-align: center;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.fui-text-left {
+  padding-left: 28rpx;
+}
+
+.fui-text-right {
+  padding-right: 28rpx;
+}
+
+.fui-fab-img {
+  display: block;
+}
+
+.fui-fab-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.1);
+  transition: all 0.2s linear;
+}
+
+.fui-radius {
+  border-radius: 50%;
+}
+
+.fui-active {
+  transform: rotate(135deg);
+}
+
+.fui-fab-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.75);
+  z-index: 99996;
+  transition: all 0.2s ease-in-out;
+  opacity: 0;
+  visibility: hidden;
+}
+
+.fui-visible {
+  visibility: visible;
+  opacity: 1;
+  transform: scale(1);
+}
+</style>

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

@@ -0,0 +1,131 @@
+<template>
+  <view class="fui-footer-class fui-footer" :class="[fixed ? 'fui-fixed' : '']" :style="{ backgroundColor: backgroundColor }">
+    <view class="fui-footer-link" v-if="navigate.length > 0">
+      <block v-for="(item, index) in navigate" :key="index">
+        <navigator
+          class="fui-link"
+          hover-class="fui-link-hover"
+          :hover-stop-propagation="true"
+          :style="{ color: item.color || '#596d96', fontSize: (item.size || 28) + 'rpx' }"
+          :open-type="item.type"
+          :url="item.url"
+          :target="item.target"
+          :delta="item.delta"
+          :app-id="item.appid"
+          :path="item.path"
+          :extra-data="item.extradata"
+          :bindsuccess="item.bindsuccess"
+          :bindfail="item.bindfail"
+        >
+          {{ item.text }}
+        </navigator>
+      </block>
+    </view>
+    <view class="fui-footer-copyright" :style="{ color: color, fontSize: size + 'rpx' }">
+      {{ copyright }}
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'fuiFooter',
+  props: {
+    //type target url delta appid path extradata bindsuccess bindfail text color size
+    //链接设置  数据格式对应上面注释的属性值
+    navigate: {
+      type: Array,
+      default: () => {
+        return [];
+      }
+    },
+    //底部文本
+    copyright: {
+      type: String,
+      default: 'All Rights Reserved.'
+    },
+    //copyright 字体颜色
+    color: {
+      type: String,
+      default: '#A7A7A7'
+    },
+    //copyright 字体大小
+    size: {
+      type: Number,
+      default: 24
+    },
+    //footer背景颜色
+    backgroundColor: {
+      type: String,
+      default: 'transparent'
+    },
+    //是否固定在底部
+    fixed: {
+      type: Boolean,
+      default: true
+    }
+  },
+  methods: {}
+};
+</script>
+
+<style scoped>
+.fui-footer {
+  width: 100%;
+  overflow: hidden;
+  padding: 30rpx 24rpx;
+  box-sizing: border-box;
+}
+
+.fui-fixed {
+  position: fixed;
+  z-index: 9999;
+  bottom: 0;
+  left: 0;
+}
+
+.fui-footer-link {
+  color: #596d96;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 28rpx;
+}
+
+.fui-link {
+  position: relative;
+  padding: 0 18rpx;
+  line-height: 1;
+}
+
+.fui-link::before {
+  content: ' ';
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 1px;
+  bottom: 0;
+  border-right: 1px solid #d3d3d3;
+  -webkit-transform-origin: 100% 0;
+  transform-origin: 100% 0;
+  -webkit-transform: scaleX(0.5);
+  transform: scaleX(0.5);
+}
+
+.fui-link:last-child::before {
+  border-right: 0 !important;
+}
+
+.fui-link-hover {
+  opacity: 0.5;
+}
+
+.fui-footer-copyright {
+  font-size: 24rpx;
+  color: #a7a7a7;
+  line-height: 1;
+  text-align: center;
+  padding-top: 16rpx;
+  padding-bottom: env(safe-area-inset-bottom);
+}
+</style>

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

@@ -0,0 +1,42 @@
+<template>
+  <view class="fui-grids" :class="{ 'fui-border-top': unlined }">
+    <slot></slot>
+  </view>
+</template>
+<script>
+export default {
+  name: 'fuiGrid',
+  props: {
+    //是否去掉上线条
+    unlined: {
+      type: Boolean,
+      default: false
+    }
+  }
+};
+</script>
+<style scoped>
+.fui-grids {
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+}
+
+.fui-grids::after {
+  content: ' ';
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 1px;
+  border-top: 1px solid #eaeef1;
+  -webkit-transform-origin: 0 0;
+  transform-origin: 0 0;
+  -webkit-transform: scaleY(0.5);
+  transform: scaleY(0.5);
+}
+
+.fui-border-top::after {
+  border-top: 0 !important;
+}
+</style>