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

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

@@ -0,0 +1,185 @@
+<template>
+  <view class="cv-radio-group-wrap">
+    <radio-group @change="radioChange" class="cv-radio-group__box">
+      <slot>
+        <cv-radio-opt-base
+          v-if="type == 'base'"
+          v-for="item in items"
+          :key="item.value"
+          :value="item.value"
+          :checked="item.value == itemsValue"
+        >
+          {{ item.text }}
+        </cv-radio-opt-base>
+        <cv-radio-opt-tag
+          v-if="type == 'tag'"
+          v-for="item in items"
+          :key="item.value"
+          :value="item.value"
+          :checked="item.value == itemsValue"
+        >
+          {{ item.text }}
+        </cv-radio-opt-tag>
+        <!-- <label class="cv-radio-group__label">
+          <view class="">
+            <radio :value="item.value" :checked="item.value == itemsValue" style="transform: scale(0.7)" />
+          </view>
+          <view>{{ item.text }}</view>
+        </label> -->
+      </slot>
+    </radio-group>
+  </view>
+</template>
+
+<script>
+import cvRadioOptBase from '../cv-radio-opt-base/cv-radio-opt-base.vue';
+import cvRadioOptTag from '../cv-radio-opt-tag/cv-radio-opt-tag.vue';
+export default {
+  name: 'cvRadioGroup',
+  components: {
+    cvRadioOptBase,
+    cvRadioOptTag
+  },
+  props: {
+    type: {
+      type: String,
+      default: 'base'
+    },
+    value: {
+      type: [String, Number],
+      default: ''
+    },
+    dataType: {
+      type: String,
+      default: 'value'
+    },
+
+    dataUrl: {
+      type: String,
+      default: ''
+    },
+    dataValue: {
+      type: String,
+      default: 'value'
+    },
+    dataText: {
+      type: String,
+      default: 'text'
+    },
+    dataLists: {
+      type: [Array, String],
+      default: () => {
+        return [];
+      }
+    }
+  },
+  data() {
+    return {
+      localVal: '',
+      items: [],
+      itemsValue: ''
+    };
+  },
+  watch: {
+    value(newVal) {
+      this.localVal = newVal;
+      this._dealValue();
+    },
+    dataLists(newVal) {
+      if (this.dataUrl == '') {
+        this.dataLists = newVal;
+        this.items = this.itemsSortOut();
+        this._dealValue();
+      }
+    }
+  },
+  created() {
+    this.localVal = this.value;
+    if (this.dataLists) {
+      this.items = this.itemsSortOut();
+    }
+    //默认Value
+    this._dealValue();
+  },
+  methods: {
+    _dealValue() {
+      //默认Value
+      let items = this.items;
+      if (this.dataType == 'text') {
+        for (let index = 0; index < items.length; index++) {
+          if (this.localVal == items[index].text) {
+            this.itemsValue = items[index].value;
+          }
+        }
+      } else {
+        this.itemsValue = this.localVal;
+      }
+    },
+    radioChange(e) {
+      let value = e.detail.value;
+      let localVal = value;
+      if (this.dataType == 'text') {
+        let items = this.items;
+        for (let index = 0; index < items.length; index++) {
+          if (localVal == items[index].value) {
+            localVal = items[index].text;
+          }
+        }
+      }
+      this.localVal = localVal;
+      this.$emit('input', this.localVal);
+    },
+    itemsSortOut() {
+      let original = [];
+      if (this.dataUrl) {
+        //网络请求
+        if (typeof this.dataUrl == 'function') {
+          this.dataUrl({}).then((successRes) => {
+            original = successRes.data;
+          });
+        } else {
+          console.warn('此处需要自定义请求方法');
+        }
+      } else {
+        original = this.dataLists;
+      }
+      if (typeof original == 'string') {
+        original = JSON.parse(original);
+      }
+      //整理数据
+      let items = [];
+      let dataValue = this.dataValue ? this.dataValue : 'value';
+      let dataText = this.dataText ? this.dataText : 'text';
+      let i = 0;
+      for (i in original) {
+        let data = original[i];
+        items.push({
+          value: data[dataValue].toString(),
+          text: data[dataText]
+        });
+      }
+      return items;
+    }
+  }
+};
+</script>
+
+<style>
+.cv-radio-group-wrap {
+  min-height: 35px;
+  float: left;
+}
+.cv-radio-group__box {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: stretch;
+  align-content: flex-start;
+}
+.cv-radio-group__label {
+  height: 35px;
+  line-height: 35px;
+  display: flex;
+  margin-right: 10px;
+}
+</style>

package/ui-cv/cv-radio-opt-base/cv-radio-opt-base.vue

@@ -0,0 +1,57 @@
+<template>
+  <view class="cv-radio-opt-base">
+    <label class="cv-radio-opt__label">
+      <radio :value="localVal" :checked="checked" style="transform: scale(0.7)" />
+      <view>
+        <slot>{{ label }}</slot>
+      </view>
+    </label>
+  </view>
+</template>
+<script>
+export default {
+  name: 'cvRadioOptBase',
+  props: {
+    label: {
+      type: [String, Number],
+      default: ''
+    },
+    value: {
+      type: [String, Number],
+      default: ''
+    },
+    checked: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      localVal: ''
+    };
+  },
+  watch: {
+    value(newVal) {
+      this.localVal = String(newVal);
+    }
+  },
+  created() {
+    this.localVal = String(this.value);
+  },
+  methods: {}
+};
+</script>
+
+<style>
+.cv-radio-opt-base {
+  min-height: 35px;
+  display: inline-flex;
+}
+
+.cv-radio-opt__label {
+  height: 35px;
+  line-height: 35px;
+  margin-right: 10px;
+  display: flex;
+}
+</style>

package/ui-cv/cv-radio-opt-tag/cv-radio-opt-tag.vue

@@ -0,0 +1,107 @@
+<template>
+  <view class="cv-radio-opt-tag">
+    <label class="cv-radio-opt__label" :class="localChecked ? 'radio-checked' : ''" @click="funcOnClick">
+      <radio class="cv-radio-opt__radio" :value="localVal" :checked="localChecked" />
+      <view>
+        <slot>{{ label }}</slot>
+      </view>
+    </label>
+  </view>
+</template>
+<script>
+export default {
+  name: 'cvRadioOptTag',
+  props: {
+    label: {
+      type: [String, Number],
+      default: ''
+    },
+    value: {
+      type: [String, Number],
+      default: ''
+    },
+    checked: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      localVal: '',
+      localChecked: false,
+      parentObj: null
+    };
+  },
+  watch: {
+    value(newVal) {
+      this.localVal = String(newVal);
+    },
+    checked(newVal) {
+      this.localChecked = newVal;
+    },
+    'parentObj.value'(newVal) {
+      // console.log('----', newVal);
+      this.localChecked = newVal == this.value ? true : false;
+    }
+  },
+  created() {
+    this.localVal = String(this.value);
+    this.localChecked = this.checked;
+  },
+  mounted() {
+    this.parentObj = this.getParent();
+  },
+  methods: {
+    funcOnClick() {
+      // let parentObj = this.getParent();
+      // console.log(parentObj.$children);
+      // let { value } = parentObj;
+      // console.log(value, this.localVal);
+      // this.localChecked = newVal == this.value ? true : false;
+    },
+    /**
+     * 获取父元素实例
+     */
+    getParent(name = 'cvRadioGroup') {
+      let parent = this.$parent;
+      let parentName = parent.$options.name;
+      while (parentName !== name) {
+        parent = parent.$parent;
+        if (!parent) return false;
+        parentName = parent.$options.name;
+      }
+      return parent;
+    }
+  }
+};
+</script>
+
+<style>
+.cv-radio-opt-tag {
+  display: inline-flex;
+  min-height: 35px;
+}
+
+.cv-radio-opt__label {
+  margin: 5px 0;
+  height: 25px;
+  line-height: 25px;
+  display: flex;
+  margin-right: 10px;
+  border: solid 0.5px #f0f4f7;
+  color: rgba(0, 0, 0, 0.4);
+  padding: 0 10px;
+  border-radius: 3px;
+  background-color: #f0f4f7;
+  font-size: 14px;
+}
+.cv-radio-opt__label.radio-checked {
+  color: #4292cc;
+  border-color: #4292cc;
+  background-color: #ddeffd;
+}
+.cv-radio-opt__radio {
+  display: none;
+  transform: scale(0.7);
+}
+</style>

package/ui-cv/cv-rate/cv-rate.vue

@@ -1,25 +1,21 @@
 <template>
-  <cv-form-item :label="label" :labelWidth="localLabelWidth" :layout="localLayout" rtip="">
-    <view class="cv-rate-area">
-      <view
-        class="cv-rate-item"
-        v-for="i in parseInt(max)"
-        :key="i"
-        v-bind:style="i <= locaValue ? starSelected : starStyle"
-        :data-value="i"
-        @tap="click_star"
-      >
-        <template v-if="isFill == true && i > locaValue">☆</template>
-        <template v-else>★</template>
-      </view>
+  <view class="cv-rate-area">
+    <view
+      class="cv-rate-item"
+      v-for="i in parseInt(max)"
+      :key="i"
+      v-bind:style="i <= locaValue ? starSelected : starStyle"
+      :data-value="i"
+      @tap="click_star"
+    >
+      <template v-if="isFill == true && i > locaValue">☆</template>
+      <template v-else>★</template>
     </view>
-  </cv-form-item>
+  </view>
 </template>
 
 <script>
-import MixinsCommon from '../mixins/mixins-common';
 export default {
-  mixins: [MixinsCommon],
   name: 'cvRate',
   inject: {
     cvFormGroup: {
@@ -80,7 +76,7 @@ export default {
   watch: {
     value(newVal) {}
   },
-  created: function () {
+  created() {
     this.locaValue = this.value || 1;
     this._dealStyle();
   },