@10yun/cv-mobile-ui 0.5.57 → 0.5.59

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@10yun/cv-mobile-ui",
-  "version": "0.5.57",
+  "version": "0.5.59",
   "description": "十云cvjs移动端ui，适用uniapp",
   "homepage": "http://cvjs.cn/cv-mobile-ui/",
   "license": "Apache-2.0",

package/ui-cv/components/cv-dialog-bottom/cv-dialog-bottom.vue

@@ -1,14 +1,12 @@
 <template>
-  <view class="cv-dialog-bottom">
-    <view class="cu-modal bottom-modal" :class="show ? 'show' : ''">
-      <view class="cu-dialog">
-        <view class="cu-bar bg-white">
-          <view class="action text-blue" @tap="cancel">取消</view>
-          <view class="action text-green" @tap="confirm">确定</view>
-        </view>
-        <view class="cv-dialog-body" :style="bodyClass">
-          <slot name="default" />
-        </view>
+  <view class="cv-dialog-bottom__wrap" :class="show ? 'show' : ''">
+    <view class="cv-dialog-bottom__box">
+      <view class="cv-dialog-bottom__bar">
+        <view class="action cv-dialog-bottom__bar-left" @tap="cancel">取消</view>
+        <view class="action cv-dialog-bottom__bar-right" @tap="confirm">确定</view>
+      </view>
+      <view class="cv-dialog-bottom__body" :style="bodyClass">
+        <slot name="default" />
       </view>
     </view>
   </view>
@@ -49,10 +47,7 @@ export default {
 };
 </script>
 <style>
-.cu-modal.bottom-modal {
-  margin-bottom: -552px;
-}
-.cu-modal {
+.cv-dialog-bottom__wrap {
   position: fixed;
   top: 0;
   right: 0;
@@ -69,32 +64,26 @@ export default {
   background: rgba(0, 0, 0, 0.6);
   transition: all 0.3s ease-in-out 0s;
   pointer-events: none;
+  margin-bottom: -552px;
 }
-.cu-modal.bottom-modal.show {
-  margin-bottom: 0;
+.cv-dialog-bottom__wrap::before {
+  vertical-align: bottom;
 }
-.cu-modal.show {
+.cv-dialog-bottom__wrap::before {
+  content: '\200B';
+  display: inline-block;
+  height: 100%;
+}
+.cv-dialog-bottom__wrap.show {
   opacity: 1;
   transition-duration: 0.3s;
   transform: scale(1);
   overflow-x: hidden;
   overflow-y: auto;
   pointer-events: auto;
+  margin-bottom: 0;
 }
-.cu-modal.bottom-modal::before {
-  vertical-align: bottom;
-}
-.cu-modal::before {
-  content: '\200B';
-  display: inline-block;
-  height: 100%;
-  vertical-align: middle;
-}
-.cu-modal.bottom-modal .cu-dialog {
-  width: 100%;
-  border-radius: 0;
-}
-.cu-dialog {
+.cv-dialog-bottom__box {
   position: relative;
   display: inline-block;
   vertical-align: middle;
@@ -102,15 +91,14 @@ export default {
   margin-right: auto;
   width: 375px;
   max-width: 100%;
+  width: 100%;
   background-color: #f8f8f8;
-  border-radius: 5px;
+  border-radius: 0;
+  border-top-left-radius: 15px;
+  border-top-right-radius: 15px;
   overflow: hidden;
 }
-.bg-white {
-  background-color: #ffffff;
-  color: #666666;
-}
-.cu-bar {
+.cv-dialog-bottom__bar {
   display: flex;
   position: relative;
   -webkit-box-align: center;
@@ -120,19 +108,14 @@ export default {
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   justify-content: space-between;
+  background-color: #ffffff;
+  color: #666666;
 }
-.cu-modal .cu-dialog > .cu-bar:first-child .action {
+.cv-dialog-bottom__bar-left {
   min-width: 55px;
-  margin-right: 0;
   min-height: 45px;
-}
-.cu-bar .action:first-child {
+  margin-right: 0;
   margin-left: 16px;
-}
-.cu-bar .action:last-child {
-  margin-right: 16px !important;
-}
-.cu-bar .action {
   display: flex;
   -webkit-box-align: center;
   -webkit-align-items: center;
@@ -142,17 +125,13 @@ export default {
   -webkit-justify-content: center;
   justify-content: center;
   max-width: 100%;
-  font-size: 16px;
-}
-.text-green {
-  color: #39b54a;
+  color: #0081ff;
 }
-.cu-modal .cu-dialog > .cu-bar:first-child .action {
+.cv-dialog-bottom__bar-right {
   min-width: 55px;
-  margin-right: 0;
   min-height: 45px;
-}
-.cu-bar .action {
+  margin-right: 16px;
+  font-size: 16px;
   display: flex;
   -webkit-box-align: center;
   -webkit-align-items: center;
@@ -162,11 +141,9 @@ export default {
   -webkit-justify-content: center;
   justify-content: center;
   max-width: 100%;
+  color: #39b54a;
 }
-.text-blue {
-  color: #0081ff;
-}
-.cv-dialog-body {
+.cv-dialog-bottom__body {
   padding-top: 10px;
   max-height: 500px;
   overflow: auto;

package/ui-cv/components/cv-dialog-full/cv-dialog-full.vue

@@ -1,11 +1,12 @@
 <template>
-  <view class="cv-dialog-bottom cv-modal bottom-modal" :class="show ? 'show' : ''">
-    <view class="cv-dialog">
-      <view class="cv-bar bg-white">
-        <view class="action text-blue" @tap="cancel">取消</view>
-        <view class="action text-green" @tap="confirm">确定</view>
+  <view class="cv-dialog-full__wrap" :class="localShow ? 'show' : ''">
+    <view class="cv-dialog-full__box">
+      <view class="cv-dialog-full__bar">
+        <view class="cv-dialog-full__bar-left" v-if="showLeft" @tap="cancel">取消</view>
+        <view class="cv-dialog-full__bar-title"><slot name="title">{{ title }}</slot></view>
+        <view class="cv-dialog-full__bar-right" v-if="showRight" @tap="confirm">确定</view>
       </view>
-      <view class="cv-dialog-body" :style="bodyClass">
+      <view class="cv-dialog-full__body" :style="bodyClass">
         <slot name="default" />
       </view>
     </view>
@@ -26,14 +27,34 @@ export default {
     bodyClass: {
       type: [String],
       default: ''
+    },
+    showLeft: {
+      type: Boolean,
+      default: true
+    },
+    showRight: {
+      type: Boolean,
+      default: true
+    },
+    title: {
+      type: [String],
+      default: ''
     }
   },
   watch: {},
   data() {
-    return {};
+    return {
+      localShow: false
+    };
   },
   created() {},
   methods: {
+    open() {
+      this.localShow = true;
+    },
+    close() {
+      this.localShow = false;
+    },
     confirm() {
       this.onConfirm(true);
     },
@@ -47,15 +68,12 @@ export default {
 };
 </script>
 <style>
-.cv-modal.bottom-modal {
-  left: 100%;
-}
-.cv-modal {
+.cv-dialog-full__wrap {
   width: 100%;
   position: fixed;
   top: 0;
   bottom: 0;
-  left: 0;
+  left: 100%;
   z-index: 999;
   opacity: 0;
   outline: 0;
@@ -66,47 +84,36 @@ export default {
   transition: all 0.2s ease-in-out 0s;
   pointer-events: none;
 }
-.cv-modal.bottom-modal.show {
+.cv-dialog-full__wrap.show {
   left: 0;
-}
-.cv-modal.show {
   opacity: 1;
   transition-duration: 0.2s;
   overflow-x: hidden;
   overflow-y: auto;
   pointer-events: auto;
 }
-.cv-modal.bottom-modal::before {
-  vertical-align: bottom;
-}
-.cv-modal::before {
+.cv-dialog-full__wrap::before {
   content: '\200B';
   display: inline-block;
   height: 100%;
   vertical-align: middle;
+  vertical-align: bottom;
 }
-.cv-modal.bottom-modal .cv-dialog {
+.cv-dialog-full__wrap .cv-dialog {
   width: 100%;
   border-radius: 0;
   height: 100%;
 }
-.cv-dialog {
-  position: relative;
+.cv-dialog-full__box {
   display: inline-block;
   vertical-align: middle;
-  margin-left: auto;
-  margin-right: auto;
-  width: 375px;
+  width: 100%;
   max-width: 100%;
   background-color: #f8f8f8;
-  border-radius: 5px;
   overflow: hidden;
+  height: 100%;
 }
-.bg-white {
-  background-color: #ffffff;
-  color: #666666;
-}
-.cv-bar {
+.cv-dialog-full__bar {
   display: flex;
   position: relative;
   align-items: center;
@@ -114,49 +121,35 @@ export default {
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   justify-content: space-between;
+  background-color: #ffffff;
+  color: #666666;
+  padding: 0 10px;
+  font-size: 15px;
 }
-.cv-modal .cv-dialog > .cv-bar:first-child .action {
-  min-width: 55px;
-  margin-right: 0;
-  min-height: 45px;
-}
-.cv-bar .action:first-child {
-  margin-left: 16px;
-}
-.cv-bar .action:last-child {
-  margin-right: 16px !important;
+.cv-dialog-full__bar-title {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  font-size: 15px;
+  font-weight: 400;
 }
-.cv-bar .action {
+.cv-dialog-full__bar-left {
   display: flex;
   align-items: center;
-  height: 100%;
   justify-content: center;
-  max-width: 100%;
-  font-size: 16px;
-}
-.text-green {
-  color: #39b54a;
-}
-.cv-modal .cv-dialog > .cv-bar:first-child .action {
   min-width: 55px;
-  margin-right: 0;
-  min-height: 45px;
+  color: #0081ff;
 }
-.cv-bar .action {
+.cv-dialog-full__bar-right {
   display: flex;
   align-items: center;
-  height: 100%;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
   justify-content: center;
-  max-width: 100%;
-}
-.text-blue {
-  color: #0081ff;
+  min-width: 55px;
+  color: #39b54a;
 }
-.cv-dialog-body {
+.cv-dialog-full__body {
   padding: 10px;
-  height: calc(100% - 45px - 20px);
+  height: calc(100% - 45px);
   overflow: auto;
   background-color: #fff;
 }

package/ui-cv/components/cv-dialog-share/share.vue

@@ -6,16 +6,7 @@
     @touchmove.stop.prevent="stopPrevent"
     :style="{ backgroundColor: backgroundColor }"
   >
-    <view
-      class="mask-content"
-      @click.stop.prevent="stopPrevent"
-      :style="[
-        {
-          height: config.height,
-          transform: transform
-        }
-      ]"
-    >
+    <view class="mask-content" @click.stop.prevent="stopPrevent" :style="[{ height: config.height, transform: transform }]">
       <scroll-view class="view-content" scroll-y>
         <view class="share-header">分享到</view>
         <view class="share-list">

package/ui-cv/components/cv-dialog-share/tui-share.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="container">
+  <view class="up-share-container">
     <text class="up-share-title">分享到</text>
     <view class="up-share-list">
       <view class="up-share-item" hover-class="up-hover" :hover-stay-time="150" v-for="(item, index) in shareList" :key="index">
@@ -41,7 +41,7 @@ export default {
 };
 </script>
 <style scoped>
-.container {
+.up-share-container {
   padding: 0;
   background-color: #e8e8e8;
 }

package/ui-cv/components/cv-filter-hm/cv-filter-hm.vue

@@ -4,9 +4,9 @@
       <template v-for="(item, index) in menu" :key="index">
         <view class="first-menu" :class="{ on: showPage == index }" @tap="togglePage(index)">
           <text class="name" :style="{ color: color }">{{ item.name }}</text>
-          <!-- <cv-icons type="arrow-type1-up" size="12" class="arrows" v-if="statusList[index].isActive" />
-          <cv-icons type="arrow-type1-down" size="12" class="arrows" v-if="!statusList[index].isActive" /> -->
-          <cv-icons type="arrow-type1-down" size="12" color="#aaa" :style="'transform:rotate(' + triangleDeg[index] + 'deg);'" />
+          <!-- <cv-icons type="arrowUp" size="12" class="arrows" v-if="statusList[index].isActive" />
+          <cv-icons type="arrowDown" size="12" class="arrows" v-if="!statusList[index].isActive" /> -->
+          <cv-icons type="arrowDown" size="12" color="#aaa" :style="'transform:rotate(' + triangleDeg[index] + 'deg);'" />
         </view>
       </template>
     </view>
@@ -212,8 +212,8 @@ export default {
         this.defaultActive.length > 0
           ? this.defaultActive
           : this.activeMenuArr.length > 0
-          ? this.activeMenuArr
-          : tmpMenuActiveArr;
+            ? this.activeMenuArr
+            : tmpMenuActiveArr;
       this.defaultActive = [];
       this.activeMenuArr = JSON.parse(JSON.stringify(tmpMenuActiveArr));
       this.shadowActiveMenuArr = JSON.parse(JSON.stringify(tmpMenuActiveArr));
@@ -641,7 +641,9 @@ export default {
   height: 13px;
   align-items: center;
   justify-content: center;
-  transition: transform 0.2s linear, color 0.2s linear;
+  transition:
+    transform 0.2s linear,
+    color 0.2s linear;
 }
 .sub-menu-class {
   width: 100%;

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

@@ -11,14 +11,14 @@
         auto-height
       />
       <view @tap="chooseLocation" class="cv-geo-local-button">
-        <cv-icons type="actionSearch" size="20" color="#999999" />
+        <cv-icons type="geoLocateoutline" size="20" color="#999999" />
       </view>
     </view>
     <view class="cv-geo-local-map" v-if="isShowMap">
       <map
         style="width: 100%; height: 170px"
-        :longitude="map_location.longitude"
-        :latitude="map_location.latitude"
+        :longitude="localLongitude"
+        :latitude="localLatitude"
         :scale="localScale"
         show-location
         :markers="markers"
@@ -32,7 +32,7 @@ import mixin from '../../libs/mixin/mixin.js';
 export default {
   mixins: [mpMixin, mixin],
   name: 'cvGeoLocal',
-  emits: ['input', 'update:modelValue', 'location'],
+  emits: ['input', 'update:modelValue', 'update:longitude', 'update:latitude'],
   props: {
     value: {
       type: [Number, String],
@@ -42,6 +42,16 @@ export default {
       type: [Number, String],
       default: ''
     },
+    // 经度
+    longitude: {
+      type: [Number, String],
+      default: ''
+    },
+    // 纬度
+    latitude: {
+      type: [Number, String],
+      default: ''
+    },
     placeholder: {
       type: [String],
       default: '请输入定位地址'
@@ -83,7 +93,13 @@ export default {
         }
       }
     },
-    location(n) {
+    longitude(n) {
+      if (this.isShowMap) {
+        console.log('change:location');
+        this.initLocation();
+      }
+    },
+    latitude(n) {
       if (this.isShowMap) {
         console.log('change:location');
         this.initLocation();
@@ -111,10 +127,8 @@ export default {
       markers: [],
       //当前选择的位置
       localScale: 14,
-      map_location: {
-        longitude: 119.296411,
-        latitude: 26.074286
-      },
+      localLongitude: 119.296411,
+      localLatitude: 26.074286,
       parentObj: null
     };
   },
@@ -173,12 +187,12 @@ export default {
       this.funcOnInput();
     },
     initLocation() {
-      if (this.location.longitude && this.location.latitude) {
-        this.map_location = this.location;
+      if (this.longitude && this.latitude) {
+        this.localLongitude = this.longitude;
+        this.localLatitude = this.latitude;
       }
-      console.log('--', this.map_location);
       if (this.localVal) {
-        this.map_location['address'] = this.localVal;
+        this.localVal = this.localVal;
       }
     },
     chooseLocation() {
@@ -188,9 +202,11 @@ export default {
           console.log(res);
           if (res.errMsg == 'chooseLocation:ok') {
             this.localVal = res.address || '';
-            this.map_location = { ...res };
+            this.localLongitude = res.longitude || '';
+            this.localLatitude = res.latitude || '';
             this.localScale = 16;
-            this.$emit('location', { ...res });
+            this.$emit('update:longitude', this.localLongitude);
+            this.$emit('update:latitude', this.localLatitude);
             this.funcOnInput();
           }
         }
@@ -198,12 +214,11 @@ export default {
     },
     initMarkers() {
       let markers = [];
-      let map_location = this.map_location;
       markers.push({
-        latitude: map_location.latitude,
-        longitude: map_location.longitude,
+        latitude: this.localLatitude,
+        longitude: this.localLongitude,
         callout: {
-          content: map_location.address,
+          content: this.localVal,
           color: '#333333',
           borderRadius: 5,
           bgColor: '#ffffff',
@@ -224,6 +239,7 @@ export default {
   display: flex;
   flex-direction: column;
   width: 100%;
+  position: relative;
 }
 .cv-geo-local-info {
   display: flex;

package/ui-cv/components/cv-geo-region/cv-geo-region.vue

@@ -28,9 +28,21 @@ import mpMixin from '../../libs/mixin/mpMixin.js';
 import mixin from '../../libs/mixin/mixin.js';
 export default {
   mixins: [mpMixin, mixin],
-  name: 'cvPickerRegion',
-  emits: ['input', 'update:modelValue', 'onChoose'],
+  name: 'cvGeoRegion',
+  emits: ['input', 'update:modelValue', 'update:province', 'update:city', 'update:district', 'onChoose'],
   props: {
+    province: {
+      type: [String, Number],
+      default: ''
+    },
+    city: {
+      type: [String, Number],
+      default: ''
+    },
+    district: {
+      type: [String, Number],
+      default: ''
+    },
     value: {
       type: [Array, Object],
       default: () => []
@@ -54,6 +66,18 @@ export default {
     }
   },
   watch: {
+    province(newVal) {
+      this.localVal[0] = newVal;
+      this.itemsSortOut();
+    },
+    city(newVal) {
+      this.localVal[1] = newVal;
+      this.itemsSortOut();
+    },
+    district(newVal) {
+      this.localVal[2] = newVal;
+      this.itemsSortOut();
+    },
     value(newVal) {
       this.localVal = newVal;
       this.itemsSortOut();
@@ -71,7 +95,7 @@ export default {
       last_range_data: [], //最终显示页面数组
       items_index: [0, 0, 0], //当前下标
       lastRetDataIndex: [0, 0, 0], // 最终确定选中的下标
-      localDataType: 'text',
+      localValField: 'text',
       localDataValue: 'value',
       localDataText: 'label',
       localProvince: {},
@@ -81,7 +105,7 @@ export default {
   },
   created() {
     this.localVal = this.doValueGet();
-    this.localDataType = this.dataType != 'value' ? 'text' : 'value';
+    this.localValField = this.dataType != 'value' ? 'text' : 'value';
     this.itemsSortOut();
   },
   methods: {
@@ -146,7 +170,7 @@ export default {
       if (localValue) {
         /* 便利省级列表 找出省级的位置 */
         for (const key in data) {
-          if (localValue == data[key][this.localDataType]) {
+          if (localValue == data[key][this.localValField]) {
             localKey = parseInt(key);
           }
         }
@@ -203,18 +227,18 @@ export default {
       this.lastRetDataIndex = [...items_index];
       let value = [];
       let items = this.items;
-      if (this.localDataType == 'text') {
-        value[0] = this.range_data[0][items_index[0]].text;
-        value[1] = this.range_data[1][items_index[1]].text;
-        value[2] = this.range_data[2][items_index[2]].text;
-      } else {
-        value[0] = this.range_data[0][items_index[0]].value;
-        value[1] = this.range_data[1][items_index[1]].value;
-        value[2] = this.range_data[2][items_index[2]].value;
-      }
+      let item_key = this.localValField == 'text' ? 'text' : 'value';
+      value[0] = this.range_data[0][items_index[0]][item_key];
+      value[1] = this.range_data[1][items_index[1]][item_key];
+      value[2] = this.range_data[2][items_index[2]][item_key];
+
       this.$emit('input', value);
       this.$emit('update:modelValue', value);
 
+      this.$emit('update:province', value[0]);
+      this.$emit('update:city', value[1]);
+      this.$emit('update:district', value[2]);
+
       // 把选中的3个数组传递出去
 
       let selectAllArr = {

package/ui-cv/components/cv-icons/cv-icons.vue

@@ -1,12 +1,8 @@
-<!-- <text :style="{ color: color, 'font-size': size + 'px' }" class="cv-icons" :class="rotate ? 'cv-icons-turn' : ''">
+<!-- <text :style="mergeIconStyle" class="cv-icons" :class="rotate ? 'cv-icons-turn' : ''">
   {{ icons[type] }}
 </text> -->
 <template>
-  <text
-    :style="{ color: color, 'font-size': size + 'px' }"
-    class="cv-icon"
-    :class="rotate ? 'cv-icons-turn' : 'cv-icon-' + type"
-  ></text>
+  <text :style="mergeIconStyle" class="cv-icon" :class="rotate ? 'cv-icons-turn' : 'cv-icon-' + type"></text>
 </template>
 
 <script>
@@ -44,6 +40,21 @@ export default {
       }
     }
   },
+  computed: {
+    mergeIconStyle() {
+      let sizePx = '';
+      if (typeof this.size === 'string' && (this.size.includes('px') || this.size.includes('rpx'))) {
+        sizePx = this.size;
+      } else {
+        sizePx = `${parseFloat(this.size)}px`;
+      }
+      return {
+        color: this.color,
+        height: sizePx,
+        'font-size': sizePx
+      };
+    }
+  },
   data() {
     return {
       // icons: icons