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

package/other/uParse/wxParse.vue

@@ -0,0 +1,196 @@
+<!--**
+ * forked from：https://github.com/F-loat/mpvue-wxParse
+ *
+ * github地址: https://github.com/dcloudio/uParse
+ *
+ * uni-app框架下 富文本解析
+ * 
+ */-->
+<template>
+  <!--基础元素-->
+  <div class="wxParse" :class="className" :style="'user-select:' + userSelect" v-if="!loading">
+    <block v-for="(node, index) of nodes" :key="index">
+      <wxParseTemplate :node="node" />
+    </block>
+  </div>
+</template>
+<script>
+import HtmlToJson from './libs/html2json';
+import wxParseTemplate from './components/wxParseTemplate0';
+export default {
+  name: 'wxParse',
+  props: {
+    // user-select:none;
+    userSelect: {
+      type: String,
+      default: 'none' //none |text| all | element
+    },
+    imgOptions: {
+      type: [Object, Boolean],
+      default: function () {
+        return {
+          loop: false,
+          indicator: 'number',
+          longPressActions: false
+        };
+      }
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    className: {
+      type: String,
+      default: ''
+    },
+    content: {
+      type: String,
+      default: ''
+    },
+    noData: {
+      type: String,
+      default: ''
+    },
+    startHandler: {
+      type: Function,
+      default() {
+        return (node) => {
+          node.attr.class = null;
+          node.attr.style = null;
+        };
+      }
+    },
+    endHandler: {
+      type: Function,
+      default: null
+    },
+    charsHandler: {
+      type: Function,
+      default: null
+    },
+    imageProp: {
+      type: Object,
+      default() {
+        return {
+          mode: 'aspectFit',
+          padding: 0,
+          lazyLoad: false,
+          domain: ''
+        };
+      }
+    }
+  },
+  components: {
+    wxParseTemplate
+  },
+  data() {
+    return {
+      nodes: {},
+      imageUrls: [],
+      wxParseWidth: {
+        value: 0
+      }
+    };
+  },
+  computed: {},
+  mounted() {
+    this.setHtml();
+  },
+  methods: {
+    setHtml() {
+      this.getWidth().then((data) => {
+        this.wxParseWidth.value = data;
+      });
+      let { content, noData, imageProp, startHandler, endHandler, charsHandler } = this;
+      let parseData = content || noData;
+      let customHandler = {
+        start: startHandler,
+        end: endHandler,
+        chars: charsHandler
+      };
+      let results = HtmlToJson(parseData, customHandler, imageProp, this);
+      this.imageUrls = results.imageUrls;
+      // this.nodes = results.nodes;
+      this.nodes = [];
+      results.nodes.forEach((item) => {
+        setTimeout(() => {
+          this.nodes.push(item);
+        }, 0);
+      });
+    },
+    getWidth() {
+      return new Promise((res, rej) => {
+        // #ifndef MP-ALIPAY || MP-BAIDU
+        uni
+          .createSelectorQuery()
+          .in(this)
+          .select('.wxParse')
+          .fields(
+            {
+              size: true,
+              scrollOffset: true
+            },
+            (data) => {
+              res(data.width);
+            }
+          )
+          .exec();
+        // #endif
+        // #ifdef MP-BAIDU
+        return new Promise((res, rej) => {
+          swan
+            .createSelectorQuery()
+            .select('.wxParse')
+            .boundingClientRect(function (rect) {
+              res(rect.width);
+            })
+            .exec();
+        });
+        // #endif
+        // #ifdef MP-ALIPAY
+        my.createSelectorQuery()
+          .select('.wxParse')
+          .boundingClientRect()
+          .exec((ret) => {
+            res(ret[0].width);
+          });
+        // #endif
+      });
+    },
+    navigate(href, $event, attr) {
+      console.log(href, attr);
+      this.$emit('navigate', href, $event);
+    },
+    preview(src, $event) {
+      if (!this.imageUrls.length || typeof this.imgOptions === 'boolean') {
+      } else {
+        uni.previewImage({
+          current: src,
+          urls: this.imageUrls,
+          loop: this.imgOptions.loop,
+          indicator: this.imgOptions.indicator,
+          longPressActions: this.imgOptions.longPressActions
+        });
+      }
+      this.$emit('preview', src, $event);
+    },
+    removeImageUrl(src) {
+      const { imageUrls } = this;
+      imageUrls.splice(imageUrls.indexOf(src), 1);
+    }
+  },
+  // 父组件中提供
+  provide() {
+    return {
+      parseWidth: this.wxParseWidth,
+      parseSelect: this.userSelect
+      // 提示：provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。
+    };
+  },
+  watch: {
+    content() {
+      this.setHtml();
+    }
+  }
+};
+</script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@10yun/cv-mobile-ui",
-  "version": "0.5.18",
+  "version": "0.5.20",
   "description": "十云cvjs移动端ui，适用uniapp",
   "author": "10yun",
   "license": "Apache-2.0",

package/plugins/map/amqp-wx.js

@@ -0,0 +1,173 @@
+import amap from './lib/amap-wx.js';
+// 地铁颜色图
+const line = {
+  '1号线': '#C43B33',
+  '2号线': '#016299',
+  '4号线/大兴线': '#008E9C',
+  '5号线': '#A42380',
+  '6号线': '#D09900',
+  '7号线': '#F2C172',
+  '8号线': '#009D6A',
+  '9号线': '#8FC41E',
+  '10号线': '#009DBE',
+  '13号线': '#F9E701',
+  '14号线东段': '#D4A7A2',
+  '14号线西段': '#D4A7A2',
+  '15号线': '#5D2D69',
+  八通线: '#C33A32',
+  昌平线: '#DE82B1',
+  亦庄线: '#E40177',
+  房山线: '#E66021',
+  机场线: '#A29BBC'
+};
+
+// 150500:地铁站 ,150700:公交站 , 190700:地名地址
+const typecode = [
+  {
+    id: '150500',
+    icon: 'icon-ditie'
+  },
+  {
+    id: '150700',
+    icon: 'icon-gongjiao'
+  },
+  {
+    id: '190700',
+    icon: 'icon-gonglu'
+  }
+];
+
+const util = {
+  key: 'b526b09b86cd2996e7732be8ab8c4430',
+  /**
+   * 初始化高德地图api
+   */
+  mapInit() {
+    return new amap.AMapWX({
+      key: this.key
+    });
+  },
+  // 服务状态吗
+  typecode,
+  /**
+   * 获取地图颜色
+   */
+  lineColor(name) {
+    if (line[name]) {
+      return line[name];
+    } else {
+      return '#ccc';
+    }
+  },
+  /**
+   * 关键字颜色变化
+   */
+  serachNmme(val, name) {
+    let namestr = new RegExp(val);
+    let nameresult = `<div style="font-size: 14px;color: #333;line-height: 1.5;">
+		    ${name.replace(namestr, "<span style='color:#66ccff;'>" + val + '</span>')}
+		    </div>`.trim();
+
+    return nameresult;
+  },
+  /**
+   *  地址转地铁线路
+   */
+  addressToLine(address, type) {
+    let addr = address.split(';');
+    let dt = '';
+    addr.forEach((elm) => {
+      let color = '#cccccc';
+      if (type === typecode[0].id) {
+        color = this.lineColor(elm);
+      } else if (type === typecode[1].id) {
+        color = '#4075cb';
+      }
+      let style =
+        'margin:5px 0;margin-right:5px;padding:0 5px;background:' + color + ';font-size:12px;color:#fff;border-radius:3px;';
+      dt += `<div style=\'${style}\'>${elm}</div>`;
+    });
+    return `<div style="display:flex;flex-wrap: wrap;">${dt}</div>`;
+  },
+  /**
+   * 数据处理
+   */
+  dataHandle(item, val) {
+    // 改变字体颜色
+    if (val) {
+      item.nameNodes = util.serachNmme(val, item.name);
+    } else {
+      item.nameNodes = `<div style="font-size: 14px;color: #333;line-height: 1.5;">${item.name}</div>`;
+    }
+    // 地址解析 地铁
+    if (item.typecode === util.typecode[0].id || item.typecode === util.typecode[1].id) {
+      item.addressNodes = util.addressToLine(item.address, item.typecode);
+      if (item.typecode === util.typecode[0].id) {
+        item.icon = util.typecode[0].icon;
+      } else if (item.typecode === util.typecode[1].id) {
+        item.icon = util.typecode[1].icon;
+      }
+    } else {
+      item.addressNodes = `<span>${item.district}${item.address.length > 0 ? '·' + item.address : ''}</span>`.trim();
+      item.icon = 'icon-weizhi';
+    }
+
+    if (item.location && item.location.length === 0) {
+      item.icon = 'icon-sousuo';
+    }
+
+    return item;
+  },
+  /**
+   * 存储历史数据
+   * val [string | object]需要存储的内容
+   */
+  setHistory(val) {
+    let searchHistory = uni.getStorageSync('search:history');
+    if (!searchHistory) searchHistory = [];
+    let serachData = {};
+    if (typeof val === 'string') {
+      serachData = {
+        adcode: [],
+        address: [],
+        city: [],
+        district: [],
+        id: [],
+        location: [],
+        name: val,
+        typecode: []
+      };
+    } else {
+      serachData = val;
+    }
+
+    // 判断数组是否存在，如果存在，那么将放到最前面
+    for (var i = 0; i < searchHistory.length; i++) {
+      if (searchHistory[i].name === serachData.name) {
+        searchHistory.splice(i, 1);
+        break;
+      }
+    }
+
+    searchHistory.unshift(util.dataHandle(serachData));
+    uni.setStorage({
+      key: 'search:history',
+      data: searchHistory,
+      success: function () {
+        // console.log('success');
+      }
+    });
+  },
+  getHistory() {},
+  removeHistory() {
+    uni.removeStorage({
+      key: 'search:history',
+      success: function (res) {
+        console.log('success');
+      }
+    });
+    return [];
+  }
+};
+
+export default util;

package/plugins/uni-upgrade.js

@@ -1,5 +1,4 @@
 import HttpObj from '@/plugins/http.js';
-
 uni.request({
   url: 'https://uniapp.dcloud.io/update', // 检查更新的服务器地址
   data: {

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

@@ -0,0 +1,131 @@
+<template>
+  <swiper
+    class="cv-banner"
+    v-bind:style="cvBannerStyle"
+    :indicator-dots="indicatorDots"
+    indicator-color="rgba(255, 255, 255, .6)"
+    indicator-active-color="#ffffff"
+    :autoplay="autoplay"
+    :circular="circular"
+    :previous-margin="margin"
+    :next-margin="margin"
+    @change="onChange"
+  >
+    <swiper-item v-for="(item, index) in localDataLists" :key="index">
+      <view class="cv-banner-swiper-item">
+        <view class="cv-banner-swiper-item-box">
+          <image class="cv-banner-swiper-item-image" :src="item.image" mode="aspectFill" />
+          <view class="cv-banner-swiper-item-text" v-if="item.text">
+            {{ item.text }}
+          </view>
+        </view>
+      </view>
+    </swiper-item>
+  </swiper>
+</template>
+
+<script>
+import mpMixin from '../../libs/mixin/mpMixin.js';
+import mixin from '../../libs/mixin/mixin.js';
+export default {
+  mixins: [mpMixin, mixin],
+  name: 'cvBanner',
+  emits: ['change'],
+  props: {
+    dataLists: {
+      type: Array,
+      default: []
+    },
+    paramConfig: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    height: {
+      type: Number,
+      default: 160
+    },
+    autoplay: {
+      type: Boolean,
+      default: true
+    },
+    indicatorDots: {
+      type: Boolean,
+      default: true
+    }
+  },
+  watch: {
+    dataLists(newVal) {
+      this._dealDataLists();
+    },
+    height() {
+      this._dealStyle();
+    }
+  },
+  data() {
+    return {
+      localDataLists: [],
+      circular: true,
+      margin: '0px',
+      cvBannerStyle: '' /* 轮播图区域的样式 */
+    };
+  },
+  created() {
+    this._dealDataLists();
+    this._dealStyle();
+  },
+  methods: {
+    _dealDataLists() {
+      let localDataLists = [];
+      const paramImage = this.paramConfig.image || 'image',
+        paramText = this.paramConfig.text || 'text';
+      this.dataLists.forEach((element) => {
+        localDataLists.push({
+          image: element[paramImage],
+          text: element[paramText]
+        });
+      });
+      this.localDataLists = localDataLists;
+    },
+    _dealStyle() {
+      this.cvBannerStyle = 'height:' + this.height + 'px;';
+    },
+    onChange(e) {
+      this.$emit('change', e);
+    }
+  }
+};
+</script>
+<style>
+.cv-banner {
+  width: 100%;
+}
+.uni-swiper-item {
+  height: 100%;
+}
+.cv-banner-swiper-item {
+  height: 100%;
+}
+.cv-banner-swiper-item-box {
+  overflow: hidden;
+  position: relative;
+  height: 100%;
+}
+.cv-banner-swiper-item-image {
+  height: 100%;
+  width: 100%;
+}
+.cv-banner-swiper-item-text {
+  font-size: 14px;
+  position: absolute;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.6);
+  width: calc(100% - 30px);
+  height: 30px;
+  line-height: 30px;
+  padding: 0 15px;
+  color: rgba(255, 255, 255, 0.9);
+  overflow: hidden;
+}
+</style>

package/ui-cv/components/cv-banner-card/cv-banner-card.vue

@@ -0,0 +1,145 @@
+<template>
+  <swiper
+    class="cv-banner-card"
+    v-bind:style="cvBannerCardStyle"
+    :indicator-dots="indicatorDots"
+    indicator-color="rgba(255, 255, 255, .6)"
+    indicator-active-color="#ffffff"
+    :autoplay="autoplay"
+    :circular="circular"
+    :previous-margin="margin"
+    :next-margin="margin"
+    @change="onChange"
+  >
+    <swiper-item v-for="(item, index) in localDataLists" :key="index">
+      <view class="cv-banner-card-swiper-item">
+        <view class="cv-banner-card-swiper-item-box" :class="current == index ? 'swiper-item-selected' : ''">
+          <image class="cv-banner-card-swiper-item-image" :src="item.image" :mode="imageMode" />
+          <view class="cv-banner-card-swiper-item-text" v-if="item.text">
+            {{ item.text }}
+          </view>
+        </view>
+      </view>
+    </swiper-item>
+  </swiper>
+</template>
+
+<script>
+import mpMixin from '../../libs/mixin/mpMixin.js';
+import mixin from '../../libs/mixin/mixin.js';
+export default {
+  mixins: [mpMixin, mixin],
+  name: 'cvBannerCard',
+  emits: ['change'],
+  props: {
+    dataLists: {
+      type: Array,
+      default: []
+    },
+    paramConfig: {
+      type: Object,
+      default: {}
+    },
+    height: {
+      type: Number,
+      default: 160
+    },
+    autoplay: {
+      type: Boolean,
+      default: true
+    },
+    indicatorDots: {
+      type: Boolean,
+      default: true
+    },
+    margin: {
+      type: String,
+      default: '35px'
+    },
+    imageMode: {
+      type: String,
+      default: 'aspectFill'
+    }
+  },
+  watch: {
+    dataLists(newVal) {
+      this._dealDataLists();
+    },
+    height() {
+      this._dealStyle();
+    }
+  },
+  data() {
+    return {
+      localDataLists: [],
+      circular: true,
+      localMargin: '35px',
+      current: 0,
+      cvBannerCardStyle: '' /* 轮播图区域的样式 */
+    };
+  },
+  created() {
+    this._dealDataLists();
+    this._dealStyle();
+  },
+  methods: {
+    _dealDataLists() {
+      let localDataLists = [];
+      const paramImage = this.paramConfig.image || 'image',
+        paramText = this.paramConfig.text || 'text';
+      this.dataLists.forEach((element) => {
+        localDataLists.push({
+          image: element[paramImage],
+          text: element[paramText]
+        });
+      });
+      this.localDataLists = localDataLists;
+    },
+    _dealStyle() {
+      this.cvBannerCardStyle = 'height:' + this.height + 'px;';
+    },
+    onChange(e) {
+      this.current = e.detail.current;
+      this.$emit('change', e);
+    }
+  }
+};
+</script>
+<style>
+.cv-banner-card {
+  width: 100%;
+}
+.uni-swiper-item {
+  height: 100%;
+}
+.cv-banner-card-swiper-item {
+  height: 100%;
+}
+.cv-banner-card-swiper-item-box {
+  border-radius: 5px;
+  overflow: hidden;
+  position: relative;
+  height: 100%;
+  transform: scale(0.9);
+  transition: transform 0.2s;
+}
+.swiper-item-selected {
+  transform: scale(1);
+}
+.cv-banner-card-swiper-item-image {
+  height: 100%;
+  width: 100%;
+}
+.cv-banner-card-swiper-item-text {
+  font-size: 14px;
+  position: absolute;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.6);
+  width: calc(100% - 30px);
+  height: 30px;
+  line-height: 30px;
+  padding: 0 15px;
+  color: rgba(255, 255, 255, 0.9);
+  overflow: hidden;
+}
+</style>