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

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

@@ -0,0 +1,87 @@
+<template>
+  <view class="fui-list-view fui-view-class" :style="{ backgroundColor: backgroundColor }">
+    <view class="fui-list-title" v-if="title">{{ title }}</view>
+    <view class="fui-list-content" :class="[unlined ? 'fui-border-' + unlined : '']">
+      <slot></slot>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'fuiListView',
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    backgroundColor: {
+      type: String,
+      default: 'transparent'
+    },
+    unlined: {
+      type: String,
+      default: '' //top,bottom,all
+    }
+  }
+};
+</script>
+
+<style scoped>
+.fui-list-title {
+  width: 100%;
+  padding: 30rpx;
+  box-sizing: border-box;
+  font-size: 30rpx;
+  line-height: 30rpx;
+  color: #666;
+}
+
+.fui-list-content {
+  width: 100%;
+  position: relative;
+}
+
+.fui-list-content::before {
+  content: ' ';
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  border-top: 1rpx solid #eaeef1;
+  -webkit-transform: scaleY(0.5) translateZ(0);
+  transform: scaleY(0.5) translateZ(0);
+  transform-origin: 0 0;
+  z-index: 2;
+  pointer-events: none;
+}
+
+.fui-list-content::after {
+  content: '';
+  width: 100%;
+  position: absolute;
+  border-bottom: 1rpx solid #eaeef1;
+  -webkit-transform: scaleY(0.5) translateZ(0);
+  transform: scaleY(0.5) translateZ(0);
+  transform-origin: 0 100%;
+  bottom: 0;
+  right: 0;
+  left: 0;
+}
+
+.fui-border-top::before {
+  border-top: 0;
+}
+
+.fui-border-bottom::after {
+  border-bottom: 0;
+}
+
+.fui-border-all::after {
+  border-bottom: 0;
+}
+
+.fui-border-all::before {
+  border-top: 0;
+}
+</style>

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

@@ -0,0 +1,78 @@
+<template>
+  <view class="fui-loading-init">
+    <view class="fui-loading-center"></view>
+    <view class="fui-loadmore-tips">{{ text }}</view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'fuiLoading',
+  props: {
+    text: {
+      type: String,
+      default: '正在加载...'
+    }
+  }
+};
+</script>
+
+<style scoped>
+.fui-loading-init {
+  min-width: 200rpx;
+  min-height: 200rpx;
+  max-width: 500rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 9999;
+  font-size: 26rpx;
+  color: #fff;
+  background-color: rgba(0, 0, 0, 0.7);
+  border-radius: 10rpx;
+}
+
+.fui-loading-center {
+  width: 50rpx;
+  height: 50rpx;
+  border: 3px solid #fff;
+  border-radius: 50%;
+  margin: 0 6px;
+  display: inline-block;
+  vertical-align: middle;
+  clip-path: polygon(0% 0%, 100% 0%, 100% 40%, 0% 40%);
+  animation: rotate 1s linear infinite;
+  margin-bottom: 36rpx;
+}
+
+.fui-loadmore-tips {
+  text-align: center;
+  padding: 0 20rpx;
+  box-sizing: border-box;
+}
+
+@-webkit-keyframes rotate {
+  from {
+    transform: rotatez(0deg);
+  }
+
+  to {
+    transform: rotatez(360deg);
+  }
+}
+
+@keyframes rotate {
+  from {
+    transform: rotatez(0deg);
+  }
+
+  to {
+    transform: rotatez(360deg);
+  }
+}
+</style>

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

@@ -0,0 +1,163 @@
+<template>
+  <view class="fui-loadmore">
+    <view :class="['fui-loading-' + index, index == 3 && type ? 'fui-loading-' + type : '']"></view>
+    <view class="fui-loadmore-tips">{{ text }}</view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'fuiLoadmore',
+  props: {
+    //显示文本
+    text: {
+      type: String,
+      default: '正在加载...'
+    },
+    //loading 样式 ：1,2,3
+    index: {
+      type: Number,
+      default: 1
+    },
+    //颜色设置，只有index=3时生效：primary，red，orange，green
+    type: {
+      type: String,
+      default: ''
+    }
+  }
+};
+</script>
+
+<style scoped>
+.fui-loadmore {
+  width: 48%;
+  margin: 1.5em auto;
+  line-height: 1.5em;
+  font-size: 24rpx;
+  text-align: center;
+}
+
+.fui-loading-1 {
+  margin: 0 5px;
+  width: 20px;
+  height: 20px;
+  display: inline-block;
+  vertical-align: middle;
+  -webkit-animation: a 1s steps(12) infinite;
+  animation: a 1s steps(12) infinite;
+  background: transparent
+    url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=)
+    no-repeat;
+  background-size: 100%;
+}
+
+@-webkit-keyframes a {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  to {
+    -webkit-transform: rotate(1turn);
+    transform: rotate(1turn);
+  }
+}
+
+@keyframes a {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  to {
+    -webkit-transform: rotate(1turn);
+    transform: rotate(1turn);
+  }
+}
+
+.fui-loadmore-tips {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.fui-loading-2 {
+  width: 28rpx;
+  height: 28rpx;
+  border: 1px solid #8f8d8e;
+  border-radius: 50%;
+  margin: 0 6px;
+  display: inline-block;
+  vertical-align: middle;
+  clip-path: polygon(0% 0%, 100% 0%, 100% 30%, 0% 30%);
+  animation: rotate 1s linear infinite;
+}
+
+@-webkit-keyframes rotate {
+  from {
+    transform: rotatez(0deg);
+  }
+
+  to {
+    transform: rotatez(360deg);
+  }
+}
+
+@keyframes rotate {
+  from {
+    transform: rotatez(0deg);
+  }
+
+  to {
+    transform: rotatez(360deg);
+  }
+}
+
+.fui-loading-3 {
+  display: inline-block;
+  margin: 0 6px;
+  vertical-align: middle;
+  width: 28rpx;
+  height: 28rpx;
+  background: 0 0;
+  border-radius: 50%;
+  border: 2px solid;
+  border-color: #e5e5e5 #e5e5e5 #e5e5e5 #8f8d8e;
+  animation: fui-rotate 0.7s linear infinite;
+}
+
+.fui-loading-3.fui-loading-primary {
+  border-color: #e5e5e5 #e5e5e5 #e5e5e5 #5677fc;
+}
+
+.fui-loading-3.fui-loading-green {
+  border-color: #e5e5e5 #e5e5e5 #e5e5e5 #19be6b;
+}
+
+.fui-loading-3.fui-loading-orange {
+  border-color: #e5e5e5 #e5e5e5 #e5e5e5 #ff7900;
+}
+
+.fui-loading-3.fui-loading-red {
+  border-color: #ededed #ededed #ededed #ed3f14;
+}
+
+@-webkit-keyframes fui-rotate {
+  0% {
+    transform: rotate(0);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes fui-rotate {
+  0% {
+    transform: rotate(0);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+</style>

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

@@ -0,0 +1,392 @@
+<template>
+  <view @touchmove.stop.prevent>
+    <view
+      class="fui-modal-box"
+      :style="{ width: width, padding: padding, borderRadius: radius }"
+      :class="[fadeIn || show ? 'fui-modal-normal' : 'fui-modal-scale', show ? 'fui-modal-show' : '']"
+    >
+      <view v-if="!custom">
+        <view class="fui-modal-title" v-if="title">{{ title }}</view>
+        <view class="fui-modal-content" :class="[title ? '' : 'fui-mtop']" :style="{ color: color, fontSize: size + 'rpx' }">
+          {{ content }}
+        </view>
+        <view class="fui-modalBtn-box" :class="[button.length != 2 ? 'fui-flex-column' : '']">
+          <block v-for="(item, index) in button" :key="index">
+            <button
+              class="fui-modal-btn"
+              :class="[
+                'fui-' + (item.type || 'primary') + (item.plain ? '-outline' : ''),
+                button.length != 2 ? 'fui-btn-width' : '',
+                button.length > 2 ? 'fui-mbtm' : '',
+                shape == 'circle' ? 'fui-circle-btn' : ''
+              ]"
+              :hover-class="'fui-' + (item.plain ? 'outline' : item.type || 'primary') + '-hover'"
+              :data-index="index"
+              @tap="handleClick"
+            >
+              {{ item.text || '确定' }}
+            </button>
+          </block>
+        </view>
+      </view>
+      <view v-else>
+        <slot></slot>
+      </view>
+    </view>
+    <view class="fui-modal-mask" :class="[show ? 'fui-mask-show' : '']" @tap="handleClickCancel"></view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'fuiModal',
+  props: {
+    //是否显示
+    show: {
+      type: Boolean,
+      default: false
+    },
+    width: {
+      type: String,
+      default: '84%'
+    },
+    padding: {
+      type: String,
+      default: '40rpx 64rpx'
+    },
+    radius: {
+      type: String,
+      default: '24rpx'
+    },
+    //标题
+    title: {
+      type: String,
+      default: ''
+    },
+    //内容
+    content: {
+      type: String,
+      default: ''
+    },
+    //内容字体颜色
+    color: {
+      type: String,
+      default: '#999'
+    },
+    //内容字体大小 rpx
+    size: {
+      type: Number,
+      default: 28
+    },
+    //形状 circle, square
+    shape: {
+      type: String,
+      default: 'square'
+    },
+    button: {
+      type: Array,
+      default: () => {
+        return [
+          {
+            text: '取消',
+            type: 'red',
+            plain: true //是否空心
+          },
+          {
+            text: '确定',
+            type: 'red',
+            plain: false
+          }
+        ];
+      }
+    },
+    //点击遮罩 是否可关闭
+    maskClosable: {
+      type: Boolean,
+      default: true
+    },
+    //淡入效果，自定义弹框插入input输入框时传true
+    fadeIn: {
+      type: Boolean,
+      default: false
+    },
+    //自定义弹窗内容
+    custom: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    handleClick(e) {
+      if (!this.show) return;
+      const dataset = e.currentTarget.dataset;
+      this.$emit('click', {
+        index: Number(dataset.index)
+      });
+    },
+    handleClickCancel() {
+      if (!this.maskClosable) return;
+      this.$emit('cancel');
+    }
+  }
+};
+</script>
+
+<style scoped>
+.fui-modal-box {
+  position: fixed;
+  left: 50%;
+  top: 50%;
+  margin: auto;
+  background-color: #fff;
+  z-index: 9999998;
+  transition: all 0.3s ease-in-out;
+  opacity: 0;
+  box-sizing: border-box;
+  visibility: hidden;
+}
+
+.fui-modal-scale {
+  transform: translate(-50%, -50%) scale(0);
+}
+
+.fui-modal-normal {
+  transform: translate(-50%, -50%) scale(1);
+}
+
+.fui-modal-show {
+  opacity: 1;
+  visibility: visible;
+}
+
+.fui-modal-mask {
+  position: fixed;
+  top: 0;
+  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;
+}
+
+.fui-mask-show {
+  visibility: visible;
+  opacity: 1;
+}
+
+.fui-modal-title {
+  text-align: center;
+  font-size: 34rpx;
+  color: #333;
+  padding-top: 20rpx;
+  font-weight: bold;
+}
+
+.fui-modal-content {
+  text-align: center;
+  color: #999;
+  font-size: 28rpx;
+  padding-top: 20rpx;
+  padding-bottom: 60rpx;
+}
+
+.fui-mtop {
+  margin-top: 30rpx;
+}
+
+.fui-mbtm {
+  margin-bottom: 30rpx;
+}
+
+.fui-modalBtn-box {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.fui-flex-column {
+  flex-direction: column;
+}
+
+.fui-modal-btn {
+  width: 46%;
+  height: 68rpx;
+  line-height: 68rpx;
+  position: relative;
+  border-radius: 10rpx;
+  font-size: 26rpx;
+  overflow: visible;
+  margin-left: 0;
+  margin-right: 0;
+}
+
+.fui-modal-btn::after {
+  content: ' ';
+  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);
+  left: 0;
+  top: 0;
+  border-radius: 20rpx;
+}
+
+.fui-btn-width {
+  width: 80% !important;
+}
+
+.fui-primary {
+  background: #5677fc;
+  color: #fff;
+}
+
+.fui-primary-hover {
+  background: #4a67d6;
+  color: #e5e5e5;
+}
+
+.fui-primary-outline {
+  color: #5677fc;
+  background: transparent;
+}
+
+.fui-primary-outline::after {
+  border: 1px solid #5677fc;
+}
+
+.fui-danger {
+  background: #4fb49b;
+  color: #fff;
+}
+
+.fui-danger-hover {
+  background: #d53912;
+  color: #e5e5e5;
+}
+
+.fui-danger-outline {
+  color: #4fb49b;
+  background: transparent;
+}
+
+.fui-danger-outline::after {
+  border: 1px solid #4fb49b;
+}
+
+.fui-red {
+  background: #4fb49b;
+  color: #fff;
+}
+
+.fui-red-hover {
+  background: #4fb49b;
+  color: #e5e5e5;
+}
+
+.fui-red-outline {
+  color: #4fb49b;
+  background: transparent;
+}
+
+.fui-red-outline::after {
+  border: 1px solid #4fb49b;
+}
+
+.fui-warning {
+  background: #ff7900;
+  color: #fff;
+}
+
+.fui-warning-hover {
+  background: #e56d00;
+  color: #e5e5e5;
+}
+
+.fui-warning-outline {
+  color: #ff7900;
+  background: transparent;
+}
+
+.fui-warning-outline::after {
+  border: 1px solid #ff7900;
+}
+
+.fui-green {
+  background: #19be6b;
+  color: #fff;
+}
+
+.fui-green-hover {
+  background: #16ab60;
+  color: #e5e5e5;
+}
+
+.fui-green-outline {
+  color: #19be6b;
+  background: transparent;
+}
+
+.fui-green-outline::after {
+  border: 1px solid #19be6b;
+}
+
+.fui-white {
+  background: #fff;
+  color: #333;
+}
+
+.fui-white-hover {
+  background: #f7f7f9;
+  color: #666;
+}
+
+.fui-white-outline {
+  color: #333;
+  background: transparent;
+}
+
+.fui-white-outline::after {
+  border: 1px solid #333;
+}
+
+.fui-gray {
+  background: #ededed;
+  color: #999;
+}
+
+.fui-gray-hover {
+  background: #d5d5d5;
+  color: #898989;
+}
+
+.fui-gray-outline {
+  color: #999;
+  background: transparent;
+}
+
+.fui-gray-outline::after {
+  border: 1px solid #999;
+}
+
+.fui-outline-hover {
+  opacity: 0.6;
+}
+
+.fui-circle-btn {
+  border-radius: 40rpx !important;
+}
+
+.fui-circle-btn::after {
+  border-radius: 80rpx !important;
+}
+</style>