@10yun/cv-mobile-ui 0.5.62 → 0.5.64

package/ui-fireui/components/u-card/u-card.vue

@@ -3,34 +3,36 @@
     class="up-card-class up-card"
     :class="[full ? 'up-card-full' : '', border ? 'up-card-border' : '']"
     @tap="handleClick"
-    @longtap="longTap"
+    @longpress="longTap"
   >
-    <view class="up-card-header" :class="{ 'up-header-line': header.line }" :style="{ background: header.bgcolor || '#fff' }">
-      <view class="up-header-left">
-        <image
-          :src="image.url"
-          class="up-header-thumb"
-          :class="{ 'up-thumb-circle': image.circle }"
-          mode="widthFix"
-          v-if="image.url"
-          :style="{ height: (image.height || 60) + 'rpx', width: (image.width || 60) + 'rpx' }"
-        ></image>
-        <text
-          class="up-header-title"
-          :style="{ fontSize: (title.size || 30) + 'rpx', color: title.color || '#7A7A7A' }"
-          v-if="title.text"
+    <slot>
+      <view class="up-card-header" :class="{ 'up-header-line': header.line }" :style="{ background: header.bgcolor || '#fff' }">
+        <view class="up-header-left">
+          <image
+            :src="imageUrl || image.url"
+            class="up-header-thumb"
+            :class="{ 'up-thumb-circle': image.circle }"
+            mode="widthFix"
+            v-if="imageUrl || image.url"
+            :style="{ height: (image.height || 60) + 'rpx', width: (image.width || 60) + 'rpx' }"
+          ></image>
+          <text
+            class="up-header-title"
+            :style="{ fontSize: (title.size || 30) + 'rpx', color: title.color || '#7A7A7A' }"
+            v-if="titleText || title.text"
+          >
+            {{ titleText || title.text }}
+          </text>
+        </view>
+        <view
+          class="up-header-right"
+          :style="{ fontSize: (tag.size || 24) + 'rpx', color: tag.color || '#b2b2b2' }"
+          v-if="tagText || tag.text"
         >
-          {{ title.text }}
-        </text>
+          {{ tagText || tag.text }}
+        </view>
       </view>
-      <view
-        class="up-header-right"
-        :style="{ fontSize: (tag.size || 24) + 'rpx', color: tag.color || '#b2b2b2' }"
-        v-if="tag.text"
-      >
-        {{ tag.text }}
-      </view>
-    </view>
+    </slot>
     <view class="up-card-body">
       <slot name="body"></slot>
     </view>
@@ -42,16 +44,22 @@
 
 <script>
 export default {
-  name: 'fuiCard',
+  name: 'tuiCard',
+  emits: ['click', 'longclick'],
   props: {
     //是否铺满
     full: {
       type: Boolean,
       default: false
     },
+    //v2.9.6+ 图片地址，优先级高于image 中 url
+    imageUrl: {
+      type: String,
+      default: ''
+    },
     image: {
       type: Object,
-      default: () => {
+      default: function () {
         return {
           url: '', //图片地址
           height: 60, //图片高度
@@ -60,10 +68,15 @@ export default {
         };
       }
     },
+    //v2.9.6+ 标题文本，优先级高于 title中 text
+    titleText: {
+      type: String,
+      default: ''
+    },
     //标题
     title: {
       type: Object,
-      default: () => {
+      default: function () {
         return {
           text: '', //标题文字
           size: 30, //字体大小
@@ -71,10 +84,15 @@ export default {
         };
       }
     },
+    //标签文本，优先级高于 tag中 text
+    tagText: {
+      type: String,
+      default: ''
+    },
     //标签，时间等
     tag: {
       type: Object,
-      default: () => {
+      default: function () {
         return {
           text: '', //标签文字
           size: 24, //字体大小
@@ -84,10 +102,10 @@ export default {
     },
     header: {
       type: Object,
-      default: () => {
+      default: function () {
         return {
           bgcolor: '#fff', //背景颜色
-          line: true //是否去掉底部线条
+          line: false //是否去掉底部线条
         };
       }
     },
@@ -118,7 +136,7 @@ export default {
 
 <style scoped>
 .up-card {
-  margin: 0 40rpx;
+  margin: 0 30rpx;
   font-size: 28rpx;
   background-color: #fff;
   border-radius: 10rpx;

package/ui-fireui/components/u-cascade-selection/u-cascade-selection.vue

@@ -1,7 +1,7 @@
 <template>
   <view class="up-cascade-selection">
     <scroll-view
-      scroll-x
+      :scroll-x="true"
       scroll-with-animation
       :scroll-into-view="scrollViewId"
       :style="{ backgroundColor: headerBgColor }"
@@ -11,22 +11,22 @@
       <view class="up-selection-header" :style="{ height: tabsHeight, backgroundColor: backgroundColor }">
         <view
           class="up-header-item"
-          :class="{ 'up-font-bold': index === currentTab && bold }"
-          :style="{ color: index === currentTab ? activeColor : color, fontSize: size + 'rpx' }"
-          :id="`id_${index}`"
+          :class="{ 'up-font-bold': idx === currentTab && bold }"
+          :style="{ color: idx === currentTab ? getActiveColor : color, fontSize: size + 'rpx' }"
+          :id="`id_${idx}`"
           @tap.stop="swichNav"
-          :data-current="index"
-          v-for="(item, index) in selectedArr"
-          :key="index"
+          :data-current="idx"
+          v-for="(item, idx) in selectedArr"
+          :key="idx"
         >
-          {{ item.text }}
-          <view class="up-active-line" :style="{ backgroundColor: lineColor }" v-if="index === currentTab && showLine"></view>
+          {{ item[textField] }}
+          <view class="up-active-line" :style="{ backgroundColor: getLineColor }" v-if="idx === currentTab && showLine"></view>
         </view>
       </view>
     </scroll-view>
     <swiper
       class="up-selection-list"
-      :current="currentTab"
+      :current="defTab"
       duration="300"
       @change="switchTab"
       :style="{ height: height, backgroundColor: backgroundColor }"
@@ -40,18 +40,18 @@
             :id="`id_${subIndex}`"
             v-for="(subItem, subIndex) in item.list"
             :key="subIndex"
-            @tap="change(index, subIndex, subItem)"
+            @tap.stop="change(index, subIndex, subItem)"
           >
             <icon
               type="success_no_circle"
               v-if="item.index === subIndex"
-              :color="checkMarkColor"
+              :color="getCkMarkColor"
               :size="checkMarkSize"
               class="up-icon-success"
             ></icon>
             <image
-              :src="subItem.src"
-              v-if="subItem.src"
+              :src="subItem[srcField]"
+              v-if="subItem[srcField]"
               class="up-cell-img"
               :style="{ width: imgWidth, height: imgHeight, borderRadius: radius }"
             ></image>
@@ -60,14 +60,14 @@
               :class="{ 'up-font-bold': item.index === subIndex && textBold, 'up-flex-shrink': nowrap }"
               :style="{ color: item.index === subIndex ? textActiveColor : textColor, fontSize: textSize + 'rpx' }"
             >
-              {{ subItem.text }}
+              {{ subItem[textField] }}
             </view>
             <view
               class="up-cell-sub_title"
               :style="{ color: subTextColor, fontSize: subTextSize + 'rpx' }"
-              v-if="subItem.subText"
+              v-if="subItem[subTextField]"
             >
-              {{ subItem.subText }}
+              {{ subItem[subTextField] }}
             </view>
           </view>
         </scroll-view>
@@ -78,11 +78,12 @@
 
 <script>
 export default {
-  name: 'fuiCascadeSelection',
+  name: 'tuiCascadeSelection',
+  emits: ['change', 'complete'],
   props: {
     /**
-			 * 如果下一级是请求返回，则为第一级数据，否则所有数据
-			 * 数据格式
+     * 如果下一级是请求返回，则为第一级数据，否则所有数据
+     * 数据格式
 			  [{
 				  src: "",
 				  text: "",
@@ -95,28 +96,54 @@ export default {
 					  children:[]
 			   }]
 			  }]
-			 * */
+     * */
     itemList: {
       type: Array,
       default: () => {
         return [];
       }
     },
+    srcField: {
+      type: String,
+      default: 'src'
+    },
+    textField: {
+      type: String,
+      default: 'text'
+    },
+    subTextField: {
+      type: String,
+      default: 'subText'
+    },
+    valueField: {
+      type: String,
+      default: 'value'
+    },
+    childrenField: {
+      type: String,
+      default: 'children'
+    },
     /*
-		   初始化默认选中数据
-		   [{
-			text: "",//选中text
-			subText: '',//选中subText
-			value: '',//选中value
-			src: '', //选中src，没有则传空或不传
-			index: 0, //选中数据在当前layer索引
-			list: [{src: "", text: "", subText: "", value: 101}] //所有layer数据集合
-		  }];
-		    
-		   */
+			   初始化默认选中数据
+			   [{
+				text: "",//选中text
+				subText: '',//选中subText
+				value: '',//选中value
+				src: '', //选中src，没有则传空或不传
+				index: 0, //选中数据在当前layer索引
+				list: [{src: "", text: "", subText: "", value: 101}] //当前layer下所有数据集合
+			  }];
+
+			   */
     defaultItemList: {
       type: Array,
-      value: []
+      default() {
+        return [];
+      }
+    },
+    defaultKey: {
+      type: String,
+      default: 'text'
     },
     //是否显示header底部细线
     headerLine: {
@@ -151,7 +178,7 @@ export default {
     //选中颜色
     activeColor: {
       type: String,
-      default: '#5677fc'
+      default: ''
     },
     //选中后文字加粗
     bold: {
@@ -166,7 +193,7 @@ export default {
     //线条颜色
     lineColor: {
       type: String,
-      default: '#5677fc'
+      default: ''
     },
     //icon 大小
     checkMarkSize: {
@@ -176,7 +203,7 @@ export default {
     //icon 颜色
     checkMarkColor: {
       type: String,
-      default: '#5677fc'
+      default: ''
     },
     //item 图片宽度
     imgWidth: {
@@ -265,6 +292,17 @@ export default {
       default: 0
     }
   },
+  computed: {
+    getActiveColor() {
+      return this.activeColor || (uni && uni.$tui && uni.$tui.color.primary) || '#5677fc';
+    },
+    getLineColor() {
+      return this.lineColor || (uni && uni.$tui && uni.$tui.color.primary) || '#5677fc';
+    },
+    getCkMarkColor() {
+      return this.checkMarkColor || (uni && uni.$tui && uni.$tui.color.primary) || '#5677fc';
+    }
+  },
   watch: {
     itemList(val) {
       this.initData(val, -1);
@@ -274,32 +312,94 @@ export default {
     },
     reset() {
       this.initData(this.itemList, -1);
+    },
+    defaultItemList(val) {
+      this.setDefaultData(val);
     }
   },
   created() {
-    let defaultItemList = this.defaultItemList || [];
-    if (defaultItemList.length > 0) {
-      defaultItemList.map((item) => {
-        item.scrollViewId = `id_${item.index}`;
-      });
-      this.selectedArr = defaultItemList;
-      this.currentTab = defaultItemList.length - 1;
-      this.$nextTick(() => {
-        this.checkCor();
-      });
-    } else {
-      this.initData(this.itemList, -1);
-    }
+    this.setDefaultData(this.defaultItemList);
   },
   data() {
     return {
       currentTab: 0,
+      defTab: 0,
       //tab栏scrollview滚动的位置
       scrollViewId: 'id__1',
       selectedArr: []
     };
   },
   methods: {
+    setDefaultData(val) {
+      let defaultItemList = JSON.parse(JSON.stringify(val || []));
+      if (defaultItemList.length > 0) {
+        if ((typeof defaultItemList[0] === 'string' || typeof defaultItemList[0] === 'number') && !this.request) {
+          let subi = -1;
+          let selectedArr = [];
+          for (let j = 0, len = defaultItemList.length; j < len; j++) {
+            let item = defaultItemList[j];
+            let list = [];
+            let obj = {};
+            if (j === 0) {
+              list = this.getItemList(-1);
+            } else {
+              list = this.getItemList(j - 1, subi, selectedArr);
+            }
+            subi = this.getDefaultIndex(list, item);
+            if (subi !== -1) {
+              obj = list[subi];
+              selectedArr.push({
+                [this.textField]: obj[this.textField] || this.text,
+                [this.valueField]: obj[this.valueField] || '',
+                [this.srcField]: obj[this.srcField] || '',
+                [this.subTextField]: obj[this.subTextField] || '',
+                index: subi,
+                scrollViewId: `id_${subi}`,
+                list: list
+              });
+            }
+
+            if (subi === -1) break;
+          }
+          this.selectedArr = selectedArr;
+          this.defTab = this.currentTab;
+          this.$nextTick(() => {
+            setTimeout(() => {
+              this.currentTab = selectedArr.length - 1;
+              this.defTab = this.currentTab;
+              this.checkCor();
+            }, 20);
+          });
+        } else {
+          defaultItemList.map((item) => {
+            item.scrollViewId = `id_${item.index}`;
+          });
+          this.selectedArr = defaultItemList;
+          this.defTab = this.currentTab;
+          this.$nextTick(() => {
+            setTimeout(() => {
+              this.currentTab = defaultItemList.length - 1;
+              this.defTab = this.currentTab;
+              this.checkCor();
+            }, 20);
+          });
+        }
+      } else {
+        this.initData(this.itemList, -1);
+      }
+    },
+    getDefaultIndex(arr, val) {
+      if (!arr || arr.length === 0 || val === undefined) return -1;
+      let index = -1;
+      let key = this.defaultKey || 'text';
+      for (let i = 0, len = arr.length; i < len; i++) {
+        if (arr[i][key] == val) {
+          index = i;
+          break;
+        }
+      }
+      return index;
+    },
     initData(data, layer) {
       if (!data || data.length === 0) return;
       if (this.request) {
@@ -316,24 +416,27 @@ export default {
     },
     removeChildren(data) {
       let list = data.map((item) => {
-        delete item['children'];
+        delete item[this.childrenField];
         return item;
       });
       return list;
     },
-    getItemList(layer, index) {
+    getItemList(layer, index, selectedArr) {
       let list = [];
       let arr = JSON.parse(JSON.stringify(this.itemList));
+      selectedArr = selectedArr || this.selectedArr;
       if (layer == -1) {
         list = this.removeChildren(arr);
       } else {
-        let value = this.selectedArr[0].index;
-        value = value == -1 ? index : value;
-        list = arr[value].children || [];
+        let value = selectedArr[0].index;
+        value = value === undefined || value == -1 ? index : value;
+        if (arr[value] && arr[value][this.childrenField]) {
+          list = arr[value][this.childrenField];
+        }
         if (layer > 0) {
           for (let i = 1; i < layer + 1; i++) {
-            let val = layer === i ? index : this.selectedArr[i].index;
-            list = list[val].children || [];
+            let val = layer === i ? index : selectedArr[i].index;
+            list = val === -1 ? [] : list[val][this.childrenField] || [];
             if (list.length === 0) break;
           }
         }
@@ -350,7 +453,11 @@ export default {
     swichNav(e) {
       let cur = e.currentTarget.dataset.current;
       if (this.currentTab != cur) {
-        this.currentTab = cur;
+        this.defTab = this.currentTab;
+        setTimeout(() => {
+          this.currentTab = cur;
+          this.defTab = this.currentTab;
+        }, 20);
       }
     },
     checkCor() {
@@ -360,7 +467,7 @@ export default {
         setTimeout(() => {
           let val = item.index < 2 ? 0 : Number(item.index - 2);
           item.scrollViewId = `id_${val}`;
-        }, 2);
+        }, 20);
       });
 
       if (this.currentTab > 1) {
@@ -373,11 +480,10 @@ export default {
       let item = this.selectedArr[index];
       if (item.index == subIndex) return;
       item.index = subIndex;
-      item.text = subItem.text;
-      item.value = subItem.value;
-      item.subText = subItem.subText || '';
-      item.src = subItem.src || '';
-
+      item[this.textField] = subItem[this.textField];
+      item[this.valueField] = subItem[this.valueField];
+      item[this.subTextField] = subItem[this.subTextField] || '';
+      item[this.srcField] = subItem[this.srcField] || '';
       this.$emit('change', {
         layer: index,
         subIndex: subIndex, //layer=> Array index
@@ -394,11 +500,16 @@ export default {
       if (!data || data.length === 0) {
         if (layer == -1) return;
         //完成选择
+        let arr = this.selectedArr;
+        if (layer < arr.length - 1) {
+          let newArr = arr.slice(0, layer + 1);
+          this.selectedArr = newArr;
+        }
         let result = JSON.parse(JSON.stringify(this.selectedArr));
         let lastItem = result[result.length - 1] || {};
         let text = '';
         result.map((item) => {
-          text += item.text;
+          text += item[this.textField];
           delete item['list'];
           //delete item['index'];
           delete item['scrollViewId'];
@@ -406,19 +517,19 @@ export default {
         });
         this.$emit('complete', {
           result: result,
-          value: lastItem.value,
-          text: text,
-          subText: lastItem.subText,
-          src: lastItem.src
+          [this.valueField]: lastItem[this.valueField],
+          [this.textField]: text,
+          [this.subTextField]: lastItem[this.subTextField],
+          [this.srcField]: lastItem[this.srcField]
         });
       } else {
         //重置数据（ >layer层级）
         let item = [
           {
-            text: this.text,
-            subText: '',
-            value: '',
-            src: '',
+            [this.textField]: this.text,
+            [this.subTextField]: '',
+            [this.valueField]: '',
+            [this.srcField]: '',
             index: -1,
             scrollViewId: 'id__1',
             list: data
@@ -427,11 +538,20 @@ export default {
         if (layer == -1) {
           this.selectedArr = item;
         } else {
-          let retainArr = this.selectedArr.slice(0, layer + 1);
+          let retainArr = this.selectedArr.slice(0, layer + 1) || [];
           this.selectedArr = retainArr.concat(item);
         }
+
+        let current = this.selectedArr.length - 1;
+        if (current >= this.currentTab) {
+          this.defTab = this.currentTab;
+        }
         this.$nextTick(() => {
-          this.currentTab = this.selectedArr.length - 1;
+          setTimeout(() => {
+            this.defTab = current;
+            this.currentTab = current;
+            this.scrollViewId = `id_${this.currentTab > 1 ? this.currentTab - 1 : 0}`;
+          }, 50);
         });
       }
     }
@@ -468,6 +588,8 @@ export default {
   bottom: 0;
   right: 0;
   left: 0;
+  z-index: 1;
+  pointer-events: none;
 }
 
 .up-btm-none::after {
@@ -532,6 +654,7 @@ export default {
   margin-left: 20rpx;
   word-break: break-all;
 }
+
 .up-first-item {
   width: 100%;
 }