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

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

@@ -0,0 +1,181 @@
+<template>
+  <!--底部分享弹窗-->
+  <fui-bottom-popup :show="popupShow">
+    <view class="fui-share">
+      <view class="fui-share-title">分享到</view>
+      <view class="share-main" style="padding-right: 20upx">
+        <view class="fui-share-top" style="display: flex; align-items: center; justify-content: center">
+          <view
+            class="fui-share-item"
+            style="width: 50%"
+            :class="[shareList[0].share.length - 1 === index ? 'fui-item-last' : '']"
+            v-for="(item, index) in shareList[0].share"
+            :key="index"
+            :data-index="index"
+            @tap="sharbutton($event)"
+          >
+            <view class="fui-share-icon" hover-class="fui-hover" :hover-stay-time="150">
+              <iconfont :className="item.icon" :color="item.color" :size="item.size ? item.size : 36" />
+              <!-- <fui-icon :name="item.icon" :color="item.color" :size="item.size?item.size:36"></fui-icon> -->
+            </view>
+            <view class="fui-share-text">{{ item.name }}</view>
+          </view>
+          <view class="fui-empty">!</view>
+        </view>
+      </view>
+
+      <view class="fui-btn-cancle" @tap="popup">取消</view>
+    </view>
+  </fui-bottom-popup>
+  <!--底部分享弹窗-->
+</template>
+
+<script>
+export default {
+  name: 'fuiSharemodel',
+  data() {
+    return {
+      popupShowstatus: false,
+      shareList: [
+        {
+          share: [
+            {
+              name: '微信',
+              icon: 'base-weixin',
+              color: '#80D640'
+            }
+            // , {
+            // 	name: "海报",
+            // 	icon: "icon-haibaofenxiang",
+            // 	color: "#80D640",
+            // 	size: 32
+            // },
+          ]
+        }
+      ]
+    };
+  },
+  props: {
+    //是否显示分享model
+    popupShow: {
+      type: Boolean,
+      default: false
+    },
+    contentHeight: {
+      type: Number,
+      default: 0
+    },
+    //是否是tabbar页面
+    hasTabbar: {
+      type: Boolean,
+      default: false
+    }
+    // shareList:{
+    // 	type: Array,
+    // default: () => {
+    // 		return [];
+    // 	}
+    // }
+  },
+  created() {
+    this.popupShowstatus = this.popupShow;
+    console.log('当前状态', this.popupShow);
+  },
+  methods: {
+    popup() {
+      this.popupShow = !this.popupShow;
+    },
+    sharbutton(event) {
+      console.log(event, event.currentTarget.dataset.index);
+      this.$emit('sharbutton', event.currentTarget.dataset.index);
+    }
+  }
+};
+</script>
+
+<style>
+.share-main {
+  min-height: 125rpx;
+  padding-bottom: 120rpx;
+}
+.fui-share {
+  background: #e8e8e8;
+  position: relative;
+  padding-bottom: env(safe-area-inset-bottom);
+}
+
+.fui-share-title {
+  font-size: 26rpx;
+  color: #7e7e7e;
+  text-align: center;
+  line-height: 26rpx;
+  padding: 20rpx 0 50rpx 0;
+}
+
+.fui-share-top,
+.fui-share-bottom {
+  min-width: 101%;
+  padding: 0 20rpx 0 30rpx;
+  white-space: nowrap;
+}
+
+.fui-mt {
+  margin-top: 30rpx;
+  padding-bottom: 150rpx;
+}
+
+.fui-share-item {
+  /* width: 126rpx;
+		display: inline-block;
+		margin-right: 24rpx; */
+  text-align: center;
+}
+
+.fui-item-last {
+  margin: 0;
+}
+
+.fui-empty {
+  display: inline-block;
+  width: 30rpx;
+  visibility: hidden;
+}
+
+.fui-share-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #fafafa;
+  height: 126rpx;
+  width: 126rpx;
+  border-radius: 32rpx;
+  margin: 0 auto;
+}
+
+.fui-share-text {
+  font-size: 24rpx;
+  color: #7e7e7e;
+  line-height: 24rpx;
+  padding: 20rpx 0;
+  white-space: nowrap;
+}
+
+.fui-btn-cancle {
+  width: 100%;
+  height: 100rpx;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  background: #f6f6f6;
+  font-size: 36rpx;
+  color: #3e3e3e;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-bottom: env(safe-area-inset-bottom);
+}
+
+.fui-hover {
+  background: rgba(0, 0, 0, 0.2);
+}
+</style>

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

@@ -0,0 +1,248 @@
+<template>
+  <view
+    class="fui-skeleton-cmomon fui-skeleton-box"
+    :style="{ width: winWidth + 'px', height: winHeight + 'px', backgroundColor: backgroundColor }"
+  >
+    <view
+      class="fui-skeleton-cmomon"
+      v-for="(item, index) in skeletonElements"
+      :key="index"
+      :style="{
+        width: item.width + 'px',
+        height: item.height + 'px',
+        left: item.left + 'px',
+        top: item.top + 'px',
+        backgroundColor: skeletonBgColor,
+        borderRadius: getRadius(item.skeletonType, borderRadius)
+      }"
+    ></view>
+    <view class="fui-loading" :class="[getLoadingType(loadingType)]" v-if="isLoading"></view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'fuiSkeleton',
+  props: {
+    //选择器(外层容器)
+    selector: {
+      type: String,
+      default: 'fui-skeleton'
+    },
+    //外层容器背景颜色
+    backgroundColor: {
+      type: String,
+      default: '#fff'
+    },
+    //骨架元素背景颜色
+    skeletonBgColor: {
+      type: String,
+      default: '#e9e9e9'
+    },
+    //骨架元素类型：矩形，圆形，带圆角矩形["rect","circular","fillet"]
+    //默认所有，根据页面情况进行传值
+    //页面对应元素class为：fui-skeleton-rect，fui-skeleton-circular，fui-skeleton-fillet
+    //如果传入的值不在下列数组中，则为自定义class值，默认按矩形渲染
+    skeletonType: {
+      type: Array,
+      default() {
+        return ['rect', 'circular', 'fillet'];
+      }
+    },
+    //圆角值，skeletonType=fillet时生效
+    borderRadius: {
+      type: String,
+      default: '16rpx'
+    },
+    //骨架屏预生成数据：提前生成好的数据，当传入该属性值时，则不会再次查找子节点信息
+    preloadData: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    //是否需要loading
+    isLoading: {
+      type: Boolean,
+      default: true
+    },
+    //loading类型[1-10]
+    loadingType: {
+      type: Number,
+      default: 1
+    }
+  },
+  created() {
+    const res = uni.getSystemInfoSync();
+    this.winWidth = res.windowWidth;
+    this.winHeight = res.windowHeight;
+    //如果有预生成数据，则直接使用
+    this.isPreload(true);
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.nodesRef(`.${this.selector}`).then((res) => {
+        if (res && res[0]) {
+          this.winHeight = res[0].height + Math.abs(res[0].top);
+        }
+      });
+      !this.isPreload() && this.selectorQuery();
+    });
+  },
+  data() {
+    return {
+      winWidth: 375,
+      winHeight: 800,
+      skeletonElements: []
+    };
+  },
+  methods: {
+    getLoadingType(type) {
+      let value = 1;
+      if (type && type > 0 && type < 11) {
+        value = type;
+      }
+      return 'fui-loading-' + value;
+    },
+    getRadius(type, val) {
+      let radius = '0';
+      if (type == 'circular') {
+        radius = '50%';
+      } else if (type == 'fillet') {
+        radius = val;
+      }
+      return radius;
+    },
+    isPreload(init) {
+      let preloadData = this.preloadData || [];
+      if (preloadData.length) {
+        init && (this.skeletonElements = preloadData);
+        return true;
+      }
+      return false;
+    },
+    async selectorQuery() {
+      let skeletonType = this.skeletonType || [];
+      let nodes = [];
+      for (let item of skeletonType) {
+        let className = `.${item}`;
+        if (~'rect_circular_fillet'.indexOf(item)) {
+          className = `.${this.selector}-${item}`;
+        }
+        await this.nodesRef(className).then((res) => {
+          res.map((d) => {
+            d.skeletonType = item;
+          });
+          nodes = nodes.concat(res);
+        });
+      }
+      this.skeletonElements = nodes;
+    },
+    async nodesRef(className) {
+      return await new Promise((resolve, reject) => {
+        uni
+          .createSelectorQuery()
+          .selectAll(className)
+          .boundingClientRect((res) => {
+            if (res) {
+              resolve(res);
+            } else {
+              reject(res);
+            }
+          })
+          .exec();
+      });
+    }
+  }
+};
+</script>
+
+<style scoped>
+.fui-skeleton-cmomon {
+  position: absolute;
+  z-index: 99999;
+  overflow: hidden;
+}
+
+.fui-skeleton-box {
+  left: 0;
+  top: 0;
+}
+
+.fui-loading {
+  display: inline-block;
+  vertical-align: middle;
+  width: 40rpx;
+  height: 40rpx;
+  background: 0 0;
+  border-radius: 50%;
+  border: 2px solid;
+  animation: fui-rotate 0.7s linear infinite;
+  position: fixed;
+  z-index: 999999;
+  left: 50%;
+  top: 50%;
+  margin-left: -20rpx;
+  margin-top: -20rpx;
+}
+
+.fui-loading-1 {
+  border-color: #e5e5e5 #e5e5e5 #e5e5e5 #5677fc;
+}
+
+.fui-loading-2 {
+  border-color: #e5e5e5 #e5e5e5 #e5e5e5 #8f8d8e;
+}
+
+.fui-loading-3 {
+  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) #fff;
+}
+
+.fui-loading-4 {
+  border-color: #e5e5e5 #e5e5e5 #e5e5e5 #35b06a;
+}
+
+.fui-loading-5 {
+  border-color: #e5e5e5 #e5e5e5 #e5e5e5 #fc872d;
+}
+
+.fui-loading-6 {
+  border-color: #e5e5e5 #e5e5e5 #e5e5e5 #eb0909;
+}
+
+.fui-loading-7 {
+  border-color: #5677fc transparent #5677fc transparent;
+}
+
+.fui-loading-8 {
+  border-color: #35b06a transparent #35b06a transparent;
+}
+
+.fui-loading-9 {
+  border-color: #fc872d transparent #fc872d transparent;
+}
+
+.fui-loading-10 {
+  border-color: #eb0909 transparent #eb0909 transparent;
+}
+
+@-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-steps/fui-steps.vue

@@ -0,0 +1,214 @@
+<template>
+  <view class="fui-steps-box" :class="{ 'fui-steps-column': direction === 'column' }">
+    <view
+      class="fui-step-item"
+      :style="{ width: direction === 'column' ? '100%' : spacing }"
+      :class="[direction === 'row' ? 'fui-step-horizontal' : 'fui-step-vertical']"
+      v-for="(item, index) in items"
+      :key="index"
+    >
+      <view class="fui-step-item-ico" :style="{ width: direction === 'column' ? '36rpx' : '100%' }">
+        <view
+          class="fui-step-ico"
+          :class="[direction === 'column' ? 'fui-step-column_ico' : 'fui-step-row_ico']"
+          :style="{
+            width: type == 2 || activeSteps === index ? '36rpx' : '16rpx',
+            height: type == 2 || activeSteps === index ? '36rpx' : '16rpx',
+            backgroundColor: index <= activeSteps ? activeColor : type == 2 ? '#fff' : deactiveColor,
+            borderColor: index <= activeSteps ? activeColor : deactiveColor
+          }"
+        >
+          <!-- <icon type="success_no_circle" :size="12"  color="#fff"></icon> -->
+          <text v-if="activeSteps !== index" :style="{ color: index <= activeSteps ? '#fff' : '' }">
+            {{ type == 1 ? '' : index + 1 }}
+          </text>
+          <fui-icon name="check" :size="16" color="#fff" v-if="activeSteps === index"></fui-icon>
+        </view>
+        <view
+          class="fui-step-line"
+          :class="['fui-step-' + direction + '_line']"
+          :style="{ backgroundColor: index <= activeSteps - 1 ? activeColor : deactiveColor }"
+          v-if="index != items.length - 1"
+        ></view>
+      </view>
+      <view class="fui-step-item-main" :class="['fui-step-' + direction + '_item_main']">
+        <view
+          class="fui-step-item-title"
+          :style="{
+            color: index <= activeSteps ? activeColor : deactiveColor,
+            fontSize: titleSize + 'rpx',
+            lineHeight: titleSize + 'rpx',
+            fontWeight: bold ? 'bold' : 'normal'
+          }"
+        >
+          {{ item.title }}
+        </view>
+        <view
+          class="fui-step-item-content"
+          :style="{ color: index <= activeSteps ? activeColor : deactiveColor, fontSize: descSize + 'rpx' }"
+        >
+          {{ item.desc }}
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+//如果自定义传入图标内容，则需要拆分组件
+export default {
+  name: 'fuiSteps',
+  props: {
+    // 1-默认步骤 2-数字步骤
+    type: {
+      type: Number,
+      default: 1
+    },
+    spacing: {
+      type: String,
+      default: '160rpx'
+    },
+    // 方向 row column
+    direction: {
+      type: String,
+      default: 'row'
+    },
+    // 激活状态成功颜色
+    activeColor: {
+      type: String,
+      default: '#5677fc'
+    },
+    // 未激活状态颜色
+    deactiveColor: {
+      type: String,
+      default: '#999999'
+    },
+    //title字体大小
+    titleSize: {
+      type: Number,
+      default: 28
+    },
+    //title是否粗体
+    bold: {
+      type: Boolean,
+      default: false
+    },
+    //desc字体大小
+    descSize: {
+      type: Number,
+      default: 24
+    },
+    // 当前步骤
+    activeSteps: {
+      type: Number,
+      default: -1
+    },
+    /**
+			 * [{
+					title: "标题",
+					desc: "描述"
+				}]
+			 * */
+    items: {
+      type: Array,
+      default() {
+        return [];
+      }
+    }
+  },
+  data() {
+    return {};
+  }
+};
+</script>
+
+<style scoped>
+.fui-steps-box {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.fui-steps-column {
+  flex-direction: column;
+}
+
+.fui-step-ico {
+  border-radius: 40rpx;
+  position: relative;
+  z-index: 3;
+  margin: 0 auto;
+  border-width: 1rpx;
+  border-style: solid;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.fui-step-row_ico {
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.fui-step-column_ico {
+  top: 0;
+}
+
+.fui-step-line {
+  position: absolute;
+  left: 50%;
+  top: 20rpx;
+  width: 100%;
+  height: 1rpx;
+}
+
+.fui-step-row_item_main {
+  text-align: center;
+}
+
+.fui-step-item {
+  font-size: 24rpx;
+  position: relative;
+  box-sizing: border-box;
+}
+
+.fui-step-item-ico {
+  height: 36rpx;
+  line-height: 36rpx;
+  text-align: center;
+}
+
+.fui-step-item-main {
+  margin-top: 16rpx;
+  clear: both;
+}
+
+.fui-step-item-title {
+  word-break: break-all;
+}
+
+.fui-step-item-content {
+  margin-top: 8rpx;
+  word-break: break-all;
+}
+
+.fui-step-vertical {
+  width: 100%;
+  display: flex;
+  padding-bottom: 60rpx;
+}
+
+.fui-step-column_item_main {
+  margin-top: 0;
+  padding-left: 20rpx;
+}
+
+.fui-step-column_line {
+  position: absolute;
+  height: 100%;
+  top: 0;
+  left: 18rpx;
+  margin: 0;
+  width: 1rpx;
+}
+</style>