@10yun/cv-mobile-ui 0.3.26 → 0.4.2

package/ui-cv/cv-form-item/cv-form-item2.vue

@@ -0,0 +1,215 @@
+<template>
+  <view class="cv-form-item" :class="localLayout == 'col' ? 'cv-form-item-col' : 'cv-form-item-row'">
+    <text class="cv-form-item-lebel-required" v-if="required == true">*</text>
+    <view class="cv-form-item-area">
+      <view :class="localLayout == 'col' ? 'cv-form-item-area-col' : 'cv-form-item-area-row'">
+        <view
+          class="cv-form-item-label"
+          :class="localLayout == 'col' ? 'cv-form-item-right-col' : 'cv-form-item-right-row'"
+          v-bind:style="labelStyle"
+        >
+          <view class="cv-form-item-lebel-title">
+            <text>{{ label }}</text>
+            <text class="cv-form-item-lebel-tip" v-if="localLayout == 'col' && tip != ''">（{{ tip }}）</text>
+          </view>
+        </view>
+        <view
+          class="cv-form-item-right"
+          :class="localLayout == 'col' ? 'cv-form-item-right-col' : 'cv-form-item-right-row'"
+          v-bind:style="labelRightStyle"
+        >
+          <view class="cv-form-item-right-item">
+            <!-- 插槽 -->
+            <slot />
+            <!-- 三角形图标 -->
+            <view class="cv-form-item-right-item-icon" v-if="isIcon">
+              <view class="cv-form-item-right-item-icon-box" :class="iconTop ? 'cv-form-item-right-item-icon-box-top' : ''">
+                <view class="cv-form-item-right-item-icon-item"></view>
+              </view>
+            </view>
+          </view>
+          <view class="cv-form-item-right-message" v-if="messageDisplay == true">
+            <text>{{ message }}</text>
+          </view>
+        </view>
+      </view>
+      <view class="cv-form-item-right-tip" v-if="localLayout == 'row' && tip != ''">
+        <text>{{ tip }}</text>
+      </view>
+    </view>
+  </view>
+</template>
+<script>
+export default {
+  name: 'cvFormItem',
+  props: {
+    /* label 内容 */
+    label: {
+      type: String,
+      default: ''
+    },
+    /* label 宽度 */
+    labelWidth: {
+      type: [String, Number],
+      default: 0
+    },
+    tip: {
+      type: String,
+      default: ''
+    },
+    layout: {
+      type: String,
+      default: ''
+    },
+    /* 必填标识 */
+    required: {
+      type: Boolean,
+      default: false
+    },
+    isIcon: {
+      type: Boolean,
+      default: false
+    },
+    iconTop: {
+      type: Boolean,
+      default: false
+    },
+    message: {
+      type: String,
+      default: ''
+    },
+    messageDisplay: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      labelStyle: '',
+      localLabelWidth: 60,
+      localLayout: 'row'
+    };
+  },
+  created() {
+    this._initLocal();
+    this.localLayout = this.layout == 'col' ? 'col' : 'row';
+    this.labelStyle =
+      this.localLayout == 'row' ? (this.labelWidth > 0 ? 'width:' + this.labelWidth + 'px;' : 'display:none;') : '';
+    this.labelRightStyle =
+      this.localLayout == 'row' && this.labelWidth > 0
+        ? 'width:' + 'calc(100% - 8px - 20px - ' + this.labelWidth + 'px);'
+        : 'padding-left:0;';
+    this.$forceUpdate();
+  },
+  methods: {
+    _initLocal() {
+      if (this.cvFormGroup) {
+        this.localLabelWidth = this.labelWidth || this.cvFormGroup.$props.labelWidth;
+        this.localLayout = this.layout || this.cvFormGroup.$props.layout;
+      } else {
+        this.localLabelWidth = this.labelWidth || this.localLabelWidth;
+        this.localLayout = this.layout || this.localLayout;
+      }
+    },
+    onEmpty(e) {
+      this.$parent.onEmpty();
+    }
+  }
+};
+</script>
+
+<style>
+.cv-form-item {
+  font-size: 14px;
+  padding-left: 15px;
+  background-color: #ffffff;
+  position: relative;
+}
+.cv-form-item-area {
+  padding: 5px 0px;
+  border-bottom: solid 1px #eee;
+}
+/* #ifndef  MP-WEIXIN */
+.cv-form-item:last-child .cv-form-item-area {
+  border: none;
+}
+/* #endif  */
+/* #ifdef MP-WEIXIN */
+
+/* #endif  */
+.cv-form-item-area-row {
+  display: flex;
+}
+.cv-form-item-label {
+  height: 35px;
+  line-height: 35px;
+  width: 60px;
+  padding-right: 4px;
+  overflow: hidden;
+  color: #303133;
+  padding-left: 4px;
+  box-sizing: unset;
+}
+.cv-form-item-right {
+  /* width: calc(100% - 60px - 4px - 4px - 20px); */
+  width: 100%;
+  padding-left: 5px;
+  padding-right: 15px;
+  box-sizing: unset;
+}
+.cv-form-item-right-item {
+  min-height: 35px;
+  line-height: 35px;
+  position: relative;
+  overflow: auto;
+}
+.cv-form-item-right-item-icon {
+  position: absolute;
+  width: 15px;
+  height: 15px;
+  top: 10px;
+  right: 10px;
+}
+.cv-form-item-right-item-icon-box {
+  padding-top: 1px;
+  transform: rotate(0deg);
+  transition: transform 0.4s;
+}
+.cv-form-item-right-item-icon-box-top {
+  transform: rotate(-180deg);
+}
+.cv-form-item-right-item-icon-item {
+  width: 0;
+  height: 0;
+  border-left: 7.5px solid transparent;
+  border-right: 7.5px solid transparent;
+  border-top: 11px solid #c0c4cc;
+}
+.cv-form-item-right-message {
+  font-size: 12px;
+  color: #fa3534;
+  margin-top: 6px;
+  line-height: 12px;
+}
+.cv-form-item-right-col {
+  /* padding-left: 0; */
+  width: auto;
+}
+.cv-form-item-right-tip {
+  font-size: 12px;
+  color: rgba(0, 0, 0, 0.4);
+  /* margin-top: 5px; */
+  line-height: 1.5em;
+  padding-right: 15px;
+}
+.cv-form-item-lebel-required {
+  color: #fa3534;
+  /* margin-right: 5px; */
+  position: absolute;
+  top: 15px;
+  left: 8px;
+}
+.cv-form-item-lebel-tip {
+  color: rgba(0, 0, 0, 0.4);
+}
+</style>

package/ui-cv/cv-form-merge/cv-form-merge.vue

@@ -10,7 +10,7 @@ export default {
   data() {
     return {};
   },
-  created: function () {}
+  created() {}
 };
 </script>
 

package/ui-cv/cv-geo-local/cv-geo-local.vue

@@ -1,31 +1,19 @@
 <template>
   <view class="cv-geo-local-wrap">
-    <cv-form-item
-      :tip="tip"
-      :label="label"
-      :message="message"
-      :must="must"
-      :messageDisplay="messageDisplay"
-      :labelWidth="localLabelWidth"
-      :layout="localLayout"
-      :onQClear="onQClear"
-      :input-value="localVal"
-    >
-      <view class="cv-geo-local" ref="onEmpty">
-        <textarea
-          class="cv-geo-local-item"
-          v-model="localVal"
-          :maxlength="maxlength"
-          :placeholder="placeholder"
-          placeholder-class="cv-geo-local-placeholder"
-          @input="updateInput"
-          auto-height
-        />
-        <view @tap="chooseLocation" class="cv-geo-local-button">
-          <cv-icons type="action-search" size="20" color="#999999" />
-        </view>
+    <view class="cv-geo-local" ref="onEmpty">
+      <textarea
+        class="cv-geo-local-item"
+        v-model="localVal"
+        :maxlength="maxlength"
+        :placeholder="placeholder"
+        placeholder-class="cv-geo-local-placeholder"
+        @input="funcOnInput"
+        auto-height
+      />
+      <view @tap="chooseLocation" class="cv-geo-local-button">
+        <cv-icons type="action-search" size="20" color="#999999" />
       </view>
-    </cv-form-item>
+    </view>
     <view class="cv-geo-local-map" v-if="isShowMap">
       <map
         style="width: 100%; height: 342rpx"
@@ -99,7 +87,7 @@ export default {
       }
     };
   },
-  created: function () {
+  created() {
     this.initLocation();
   },
   methods: {

package/{ui-uni/uni-goods-nav/uni-goods-nav.vue → ui-cv/cv-goods-nav/cv-goods-nav.vue}

@@ -6,7 +6,7 @@
 			<view class="flex uni-tab__cart-sub-left">
 				<view v-for="(item,index) in options" :key="index" class="flex uni-tab__cart-button-left uni-tab__shop-cart" @click="onClick(index,item)">
 					<view class="uni-tab__icon">
-						<uni-icons :type="item.icon" size="20" color="#646566"></uni-icons>
+						<cv-icon2 :type="item.icon" size="20" color="#646566"></cv-icon2>
 						<!-- <image class="image" :src="item.icon" mode="widthFix" /> -->
 					</view>
 					<text class="uni-tab__text">{{ item.text }}</text>

package/ui-cv/cv-grid-group/cv-grid-group.vue

@@ -0,0 +1,148 @@
+<template>
+  <view class="uni-grid-wrap">
+    <view
+      :id="elId"
+      ref="uni-grid"
+      class="uni-grid"
+      :class="{ 'uni-grid--border': showBorder }"
+      :style="{ 'border-left-color': borderColor }"
+    >
+      <slot />
+    </view>
+  </view>
+</template>
+
+<script>
+// #ifdef APP-NVUE
+const dom = uni.requireNativePlugin('dom');
+// #endif
+
+/**
+ * Grid 宫格
+ * @description 宫格组件
+ * @tutorial https://ext.dcloud.net.cn/plugin?id=27
+ * @property {Number} column 每列显示个数
+ * @property {String} borderColor 边框颜色
+ * @property {Boolean} showBorder 是否显示边框
+ * @property {Boolean} square 是否方形显示
+ * @property {Boolean} Boolean 点击背景是否高亮
+ * @event {Function} change 点击 grid 触发，e={detail:{index:0}}，index 为当前点击 gird 下标
+ */
+export default {
+  name: 'cvGridGroup',
+  emits: ['change'],
+  props: {
+    // 每列显示个数
+    column: {
+      type: Number,
+      default: 3
+    },
+    // 是否显示边框
+    showBorder: {
+      type: Boolean,
+      default: true
+    },
+    // 边框颜色
+    borderColor: {
+      type: String,
+      default: '#e5e5e5'
+    },
+    // 是否正方形显示,默认为 true
+    square: {
+      type: Boolean,
+      default: true
+    },
+    highlight: {
+      type: Boolean,
+      default: true
+    }
+  },
+  provide() {
+    return {
+      grid: this
+    };
+  },
+  data() {
+    const elId = `Uni_${Math.ceil(Math.random() * 10e5).toString(36)}`;
+    return {
+      elId,
+      width: 0
+    };
+  },
+  created() {
+    this.children = [];
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.init();
+    });
+  },
+  methods: {
+    init() {
+      setTimeout(() => {
+        this._getSize((width) => {
+          this.children.forEach((item, index) => {
+            item.width = width;
+          });
+        });
+      }, 50);
+    },
+    change(e) {
+      this.$emit('change', e);
+    },
+    _getSize(fn) {
+      // #ifndef APP-NVUE
+      uni
+        .createSelectorQuery()
+        .in(this)
+        .select(`#${this.elId}`)
+        .boundingClientRect()
+        .exec((ret) => {
+          this.width = parseInt((ret[0].width - 1) / this.column) + 'px';
+          fn(this.width);
+        });
+      // #endif
+      // #ifdef APP-NVUE
+      dom.getComponentRect(this.$refs['uni-grid'], (ret) => {
+        this.width = parseInt((ret.size.width - 1) / this.column) + 'px';
+        fn(this.width);
+      });
+      // #endif
+    }
+  }
+};
+</script>
+
+<style scoped>
+.uni-grid-wrap {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex: 1;
+  flex-direction: column;
+  /* #ifdef H5 */
+  width: 100%;
+  /* #endif */
+}
+
+.uni-grid {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+.uni-grid--border {
+  position: relative;
+  /* #ifdef APP-NVUE */
+  border-left-color: #e5e5e5;
+  border-left-style: solid;
+  border-left-width: 0.5px;
+  /* #endif */
+  /* #ifndef APP-NVUE */
+  z-index: 1;
+  border-left: 1px #e5e5e5 solid;
+  /* #endif */
+}
+</style>

package/ui-cv/cv-grid-item/cv-grid-item.vue

@@ -0,0 +1,132 @@
+<template>
+  <view v-if="width" :style="'width:' + width + ';' + (square ? 'height:' + width : '')" class="uni-grid-item">
+    <view
+      :class="{
+        'uni-grid-item--border': showBorder,
+        'uni-grid-item--border-top': showBorder && index < column,
+        'uni-highlight': highlight
+      }"
+      :style="{ 'border-right-color': borderColor, 'border-bottom-color': borderColor, 'border-top-color': borderColor }"
+      class="uni-grid-item__box"
+      @click="_onClick"
+    >
+      <slot />
+    </view>
+  </view>
+</template>
+
+<script>
+/**
+ * GridItem 宫格
+ * @description 宫格组件
+ * @tutorial https://ext.dcloud.net.cn/plugin?id=27
+ * @property {Number} index 子组件的唯一标识 ，点击gird会返回当前的标识
+ */
+export default {
+  name: 'cvGridItem',
+  inject: ['grid'],
+  props: {
+    index: {
+      type: Number,
+      default: 0
+    }
+  },
+  data() {
+    return {
+      column: 0,
+      showBorder: true,
+      square: true,
+      highlight: true,
+      left: 0,
+      top: 0,
+      openNum: 2,
+      width: 0,
+      borderColor: '#e5e5e5'
+    };
+  },
+  created() {
+    this.column = this.grid.column;
+    this.showBorder = this.grid.showBorder;
+    this.square = this.grid.square;
+    this.highlight = this.grid.highlight;
+    this.top = this.hor === 0 ? this.grid.hor : this.hor;
+    this.left = this.ver === 0 ? this.grid.ver : this.ver;
+    this.borderColor = this.grid.borderColor;
+    this.grid.children.push(this);
+    // this.grid.init()
+    this.width = this.grid.width;
+  },
+  beforeDestroy() {
+    this.grid.children.forEach((item, index) => {
+      if (item === this) {
+        this.grid.children.splice(index, 1);
+      }
+    });
+  },
+  methods: {
+    _onClick() {
+      this.grid.change({
+        detail: {
+          index: this.index
+        }
+      });
+    }
+  }
+};
+</script>
+
+<style scoped>
+.uni-grid-item {
+  /* #ifndef APP-NVUE */
+  height: 100%;
+  display: flex;
+  /* #endif */
+  /* #ifdef H5 */
+  cursor: pointer;
+  /* #endif */
+}
+
+.uni-grid-item__box {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  width: 100%;
+  /* #endif */
+  position: relative;
+  flex: 1;
+  flex-direction: column;
+}
+
+.uni-grid-item--border {
+  position: relative;
+  /* #ifdef APP-NVUE */
+  border-bottom-color: #e5e5e5;
+  border-bottom-style: solid;
+  border-bottom-width: 0.5px;
+  border-right-color: #e5e5e5;
+  border-right-style: solid;
+  border-right-width: 0.5px;
+  /* #endif */
+  /* #ifndef APP-NVUE */
+  z-index: 0;
+  border-bottom: 1px #e5e5e5 solid;
+  border-right: 1px #e5e5e5 solid;
+  /* #endif */
+}
+
+.uni-grid-item--border-top {
+  position: relative;
+  /* #ifdef APP-NVUE */
+  border-top-color: #e5e5e5;
+  border-top-style: solid;
+  border-top-width: 0.5px;
+  /* #endif */
+  /* #ifndef APP-NVUE */
+  border-top: 1px #e5e5e5 solid;
+  z-index: 0;
+  /* #endif */
+}
+
+.uni-highlight:active {
+  background-color: #f1f1f1;
+}
+</style>