@10yun/cv-mobile-ui 0.5.20 → 0.5.22

package/uni-ui/lib/uni-goods-nav/uni-goods-nav.vue

@@ -1 +1,129 @@
-<template>
  <view class="uni-goods-nav">
    <!-- 底部占位 -->
    <view class="uni-tab__seat" />
    <view class="uni-tab__cart-box flex">
      <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>
            <!-- <image class="image" :src="item.icon" mode="widthFix" /> -->
          </view>
          <text class="uni-tab__text">{{ item.text }}</text>
          <view class="flex uni-tab__dot-box">
            <text
              v-if="item.info"
              :class="{ 'uni-tab__dots': item.info > 9 }"
              class="uni-tab__dot"
              :style="{
                backgroundColor: item.infoBackgroundColor ? item.infoBackgroundColor : '#ff0000',
                color: item.infoColor ? item.infoColor : '#fff'
              }"
            >
              {{ item.info }}
            </text>
          </view>
        </view>
      </view>
      <view :class="{ 'uni-tab__right': fill }" class="flex uni-tab__cart-sub-right">
        <view
          v-for="(item, index) in buttonGroup"
          :key="index"
          :style="{ background: item.backgroundColor, color: item.color }"
          class="flex uni-tab__cart-button-right"
          @click="buttonClick(index, item)"
        >
          <text :style="{ color: item.color }" class="uni-tab__cart-button-right-text">{{ item.text }}</text>
        </view>
      </view>
    </view>
  </view>
 * GoodsNav 商品导航
 * @description 商品加入购物车、立即购买等
 * @tutorial https://ext.dcloud.net.cn/plugin?id=865
 * @property {Array} options 组件参数
 * @property {Array} buttonGroup 组件按钮组参数
 * @property {Boolean} fill = [true | false] 组件按钮组参数
 * @property {Boolean} stat 是否开启统计功能
 * @event {Function} click 左侧点击事件
 * @event {Function} buttonClick 右侧按钮组点击事件
 * @example <uni-goods-nav :fill="true"  options="" buttonGroup="buttonGroup"  @click="" @buttonClick="" />
 */
  name: 'UniGoodsNav',
  emits: ['click', 'buttonClick'],
  props: {
    options: {
      type: Array,
      default() {
        return [
          {
            icon: 'shop',
            text: t('uni-goods-nav.options.shop')
          },
          {
            icon: 'cart',
            text: t('uni-goods-nav.options.cart')
          }
        ];
      }
    },
    buttonGroup: {
      type: Array,
      default() {
        return [
          {
            text: t('uni-goods-nav.buttonGroup.addToCart'),
            backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)',
            color: '#fff'
          },
          {
            text: t('uni-goods-nav.buttonGroup.buyNow'),
            backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
            color: '#fff'
          }
        ];
      }
    },
    fill: {
      type: Boolean,
      default: false
    },
    stat: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    onClick(index, item) {
      this.$emit('click', {
        index,
        content: item
      });
    },
    buttonClick(index, item) {
      if (uni.report && this.stat) {
        uni.report(item.text, item.text);
      }
      this.$emit('buttonClick', {
        index,
        content: item
      });
    }
  }
+<template>
+  <view class="uni-goods-nav">
+    <!-- 底部占位 -->
+    <view class="uni-tab__seat" />
+    <view class="uni-tab__cart-box flex">
+      <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>
+            <!-- <image class="image" :src="item.icon" mode="widthFix" /> -->
+          </view>
+          <text class="uni-tab__text">{{ item.text }}</text>
+          <view class="flex uni-tab__dot-box">
+            <text
+              v-if="item.info"
+              :class="{ 'uni-tab__dots': item.info > 9 }"
+              class="uni-tab__dot"
+              :style="{
+                backgroundColor: item.infoBackgroundColor ? item.infoBackgroundColor : '#ff0000',
+                color: item.infoColor ? item.infoColor : '#fff'
+              }"
+            >
+              {{ item.info }}
+            </text>
+          </view>
+        </view>
+      </view>
+      <view :class="{ 'uni-tab__right': fill }" class="flex uni-tab__cart-sub-right">
+        <view
+          v-for="(item, index) in buttonGroup"
+          :key="index"
+          :style="{ background: item.backgroundColor, color: item.color }"
+          class="flex uni-tab__cart-button-right"
+          @click="buttonClick(index, item)"
+        >
+          <text :style="{ color: item.color }" class="uni-tab__cart-button-right-text">{{ item.text }}</text>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+<script>
+import { initVueI18n } from '@dcloudio/uni-i18n';
+import messages from './i18n/index.js';
+const { t } = initVueI18n(messages);
+/**
+ * GoodsNav 商品导航
+ * @description 商品加入购物车、立即购买等
+ * @tutorial https://ext.dcloud.net.cn/plugin?id=865
+ * @property {Array} options 组件参数
+ * @property {Array} buttonGroup 组件按钮组参数
+ * @property {Boolean} fill = [true | false] 组件按钮组参数
+ * @property {Boolean} stat 是否开启统计功能
+ * @event {Function} click 左侧点击事件
+ * @event {Function} buttonClick 右侧按钮组点击事件
+ * @example <uni-goods-nav :fill="true"  options="" buttonGroup="buttonGroup"  @click="" @buttonClick="" />
+ */
+export default {
+  name: 'UniGoodsNav',
+  emits: ['click', 'buttonClick'],
+  props: {
+    options: {
+      type: Array,
+      default() {
+        return [
+          {
+            icon: 'shop',
+            text: t('uni-goods-nav.options.shop')
+          },
+          {
+            icon: 'cart',
+            text: t('uni-goods-nav.options.cart')
+          }
+        ];
+      }
+    },
+    buttonGroup: {
+      type: Array,
+      default() {
+        return [
+          {
+            text: t('uni-goods-nav.buttonGroup.addToCart'),
+            backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)',
+            color: '#fff'
+          },
+          {
+            text: t('uni-goods-nav.buttonGroup.buyNow'),
+            backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
+            color: '#fff'
+          }
+        ];
+      }
+    },
+    fill: {
+      type: Boolean,
+      default: false
+    },
+    stat: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    onClick(index, item) {
+      this.$emit('click', {
+        index,
+        content: item
+      });
+    },
+    buttonClick(index, item) {
+      if (uni.report && this.stat) {
+        uni.report(item.text, item.text);
+      }
+      this.$emit('buttonClick', {
+        index,
+        content: item
+      });
+    }
+  }
+};
+</script>
+<style>
+@import 'style.css';
+</style>

package/uni-ui/lib/uni-grid/uni-grid.vue

@@ -1 +1,115 @@
-<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>
 * 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 下标
 */
  name: 'UniGrid',
  emits: ['change'],
  props: {
    // 每列显示个数
    column: {
      type: Number,
      default: 3
    },
    // 是否显示边框
    showBorder: {
      type: Boolean,
      default: true
    },
    // 边框颜色
    borderColor: {
      type: String,
      default: '#D2D2D2'
    },
    // 是否正方形显示,默认为 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
    }
  }
+<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: 'UniGrid',
+  emits: ['change'],
+  props: {
+    // 每列显示个数
+    column: {
+      type: Number,
+      default: 3
+    },
+    // 是否显示边框
+    showBorder: {
+      type: Boolean,
+      default: true
+    },
+    // 边框颜色
+    borderColor: {
+      type: String,
+      default: '#D2D2D2'
+    },
+    // 是否正方形显示,默认为 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>
+@import 'style.css';
+</style>

package/uni-ui/lib/uni-grid-item/uni-grid-item.vue

@@ -1 +1,78 @@
-<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>
 * GridItem 宫格
 * @description 宫格组件
 * @tutorial https://ext.dcloud.net.cn/plugin?id=27
 * @property {Number} index 子组件的唯一标识 ，点击gird会返回当前的标识
 */
  name: 'UniGridItem',
  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
        }
      });
    }
  }
+<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: 'UniGridItem',
+  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>
+@import 'style.css';
+</style>