预览原图

packages/components/DateField/index.vue

@@ -13,7 +13,7 @@
       <span>{{ label }}</span>
     </div>
     <div :style="{'flex':proportion[1] }" class="field-value">
-      <div class="field-body">
+      <div :class="{'field-control-error':hasError}" class="field-body">
         <input
           v-bind="$attrs"
           v-model="value"
@@ -30,6 +30,7 @@
 </template>
 
 <script>
+import {isDef} from '../../../packages/common/utils'
 export default {
   name: 'DateField',
   inheritAttrs: false,
@@ -99,10 +100,14 @@ export default {
       type: String,
       default: require('./right-gray@2x.png'),
     },
+    error: {
+      type: Boolean,
+      default: false,
+    },
   },
   data () {
     return {
-
+      hasError: false,
     }
   },
   computed: {
@@ -139,8 +144,12 @@ export default {
   },
   methods: {
     cleanValue () {
+      let vm = this
       this.$emit('input', null)
       this.$emit('clean', null)
+      if (isDef(vm.value) && vm.error) {
+        vm.hasError = true
+      }
     },
     showDate () {
       let vm = this
@@ -159,6 +168,12 @@ export default {
           onConfirm (val) {
             vm.$emit('input', val)
             vm.$emit('onSelect', val)
+            vm.hasError = false
+          },
+          onHide () {
+            if (!isDef(vm.value) && vm.error) {
+              vm.hasError = true
+            }
           },
         })
       }

packages/components/Field/index.vue

@@ -53,7 +53,7 @@
 </template>
 
 <script>
-import { formatNumber, isDef, isObject } from '../../../packages/common/utils'
+import { formatNumber, isDef, isObject, isString } from '../../../packages/common/utils'
 
 export default {
   name: 'Field',
@@ -134,7 +134,7 @@ export default {
     },
     error: {
       type: Boolean,
-      default: false,
+      default: true,
     },
     autosize: {
       type: Boolean | Object,
@@ -272,6 +272,9 @@ export default {
       const { required, error } = this
       if (required && error) {
         this.hasError = !isDef(fieldInput.value)
+        /* if (isString(error)) {
+          this.placehold = error
+        } */
       }
     },
 

packages/components/Select/SelectField.vue

@@ -13,13 +13,14 @@
       <span>{{ label }}</span>
     </div>
     <div :style="{'flex':proportion[1] }" class="field-value">
-      <div class="field-body">
+      <div :class="{'field-control-error':hasError}" class="field-body">
         <input
           v-bind="$attrs"
           v-model="codeName" :disabled="disabled" :placeholder="selectPlaceholder" :class="('field-control-'+inputAlign)"
           type="text" class="field-control"
           readonly
-          @click="showSelect">
+          @click="showSelect"
+          @blur="onBlur">
         <input v-model="value" type="text" hidden>
         <i v-if="showClean" class="field-icon field-right-icon icon ion-close-circled" @click="cleanValue"/>
         <!--<slot name="icon"/>-->
@@ -31,6 +32,7 @@
 </template>
 
 <script>
+import {isDef} from '../../../packages/common/utils'
 import VueSelect from './index'
 export default {
   name: 'SelectField',
@@ -109,9 +111,14 @@ export default {
       type: String,
       default: require('./right-gray@2x.png'),
     },
+    error: {
+      type: Boolean,
+      default: false,
+    },
   },
   data () {
     return {
+      hasError: false,
     }
   },
   computed: {
@@ -179,10 +186,16 @@ export default {
         this.$emit('input', v1)
         this.$emit('onSelect', v1, v2)
       }
+      vm.hasError = false
     },
     cleanValue () {
+      let vm = this
       this.$emit('input', null)
       this.$emit('clean', null)
+      const { required, error } = this
+      if (required && error) {
+        this.hasError = !isDef(vm.value)
+      }
     },
     showSelect () {
       let vm = this
@@ -204,6 +217,23 @@ export default {
         })
       }
     },
+    // 检验输入的合法性
+    validate () {
+      const { fieldInput } = this.$refs
+      const { required, error } = this
+      if (required && error) {
+        this.hasError = !isDef(fieldInput.value)
+        /* if (isString(error)) {
+          this.placehold = error
+        } */
+      }
+    },
+
+    onBlur (event) {
+      this.focused = false
+      this.$emit('blur', event)
+      this.validate()
+    },
   },
 }
 </script>

packages/components/ShowPicture/showpicture.vue

@@ -12,7 +12,8 @@
           v-if="!imgList.length"
           :alt="imgTitle">
         <swipe
-          v-if="imgList.length" :index.sync="startPosition" :auto="false" :show-indicators="false">
+          v-if="imgList.length" :index.sync="startPosition" :auto="false" :show-indicators="false"
+          @change="swipeChange">
           <swipe-item
             v-for="(item,index) in imgList" :key="index">
             <img
@@ -25,6 +26,10 @@
         </swipe>
       </div>
       <div v-if="imgList.length" class="indicators">{{ startPosition + 1 }}/{{ imgList.length }}</div>
+      <div v-show="imgOriginalUrl && percent!=100" class="img-origin" @click="showOriginPic(imgOriginalUrl,startPosition)">
+        <div class="word">{{ word }}</div>
+        <div v-show="percent" :style="{width:percent+'%'}" class="progress"/>
+      </div>
     </div>
   </div>
 </template>
@@ -45,7 +50,7 @@
     }
 
     &.active {
-      background-color: rgba(0, 0, 0, 0.6);
+      background-color: rgba(0, 0, 0, 0.9);
     }
 
     .show-picture-wrapper {
@@ -80,7 +85,7 @@
           justify-content: center;
           align-items: center;
           object-fit: cover;
-         // width: fit-content;
+          // width: fit-content;
         }
       }
 
@@ -102,30 +107,66 @@
         }
       }
     }
-    .indicators{
-      top:20px;
+
+    .indicators {
+      top: 20px;
       position: absolute;
       color: #fff;
       font-size: 16px;
     }
+
+    .img-origin {
+      position: absolute;
+      bottom: 40px;
+      left: 20px;
+      background-color: #666;
+      color: #fff;
+      font-weight: bold;
+      font-size: 12px;
+      border-radius: 12px;
+      min-height: 24px;
+      min-width: 100px;
+      .word {
+        position: absolute;
+        padding: 6px 10px;
+        width: 100%;
+        text-align: center;
+      }
+      .progress{
+        position: absolute;
+        height: 100%;
+        background-color: rgba(255,255,255,.4);
+        border-radius: 12px;
+      }
+    }
   }
 
   .modal-open [vum-show-picture] {
     pointer-events: auto;
   }
-  .platform-ios{
+
+  .platform-ios {
     .show-picture-backdrop {
-      .indicators{
-        top:40px;
+      .indicators {
+        top: 40px;
+      }
+
+      .img-origin {
+        bottom: 40px;
       }
     }
   }
+
   // iPhoneX适配
   @media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) {
     .platform-ios {
       .show-picture-backdrop {
-        .indicators{
-          top:60px;
+        .indicators {
+          top: 60px;
+        }
+
+        .img-origin {
+          bottom: 70px;
         }
       }
     }
@@ -135,8 +176,12 @@
   @media (device-width: 414px) and (device-height: 896px) {
     .platform-ios {
       .show-picture-backdrop {
-        .indicators{
-          top:60px;
+        .indicators {
+          top: 60px;
+        }
+
+        .img-origin {
+          bottom: 70px;
         }
       }
     }
@@ -144,6 +189,7 @@
 
 </style>
 <script>
+import {isFunction} from '../../common/utils'
 import assign from 'object-assign'
 import SwipeItem from '../Swipe/SwipeItem'
 import Swipe from '../Swipe/index'
@@ -157,17 +203,25 @@ export default {
     return {
       defaultOptions: {
         imgUrl: '',
+        imgOriginalUrl: '',
         imgList: [],
         startPosition: 0,
         imgTitle: '',
         width: '100',
+        imgSize: 0,
       },
       imgUrl: '',
+      imgOriginalUrl: '',
       imgList: [],
       startPosition: 0,
       imgTitle: '',
       state: 0,
       width: '100',
+      imgSize: null,
+      loadSuccess: null,
+      percent: 0,
+      original: '查看原图',
+      word: '',
     }
   },
 
@@ -191,12 +245,28 @@ export default {
       this.imgTitle = _options.imgTitle
       this.width = _options.width
       this.imgList = _options.imgList || []
-      this.startPosition = _options.startPosition
+      this.startPosition = _options.startPosition || 0
+      this.percent = _options.percent
+      this.imgOriginalUrl = _options.imgOriginalUrl
+      this.loadSuccess = _options.loadSuccess
       this.state = 1
       if (!this.width) {
         this.width = 100
       }
       vm.$refs.pad.style.width = this.width + '%'
+      if (_options.imgSize) {
+        vm.imgSize = vm.formatSize(_options.imgSize)
+        vm.word = vm.original + vm.imgSize
+      }
+      vm.imgList.forEach((item, index, array) => {
+        item.word = vm.original + vm.formatSize(array[index].imgSize)
+        item.percent = item.percent | 0
+      })
+      if (vm.imgList.length) {
+        vm.word = vm.imgList[vm.startPosition].word
+        vm.imgOriginalUrl = vm.imgList[vm.startPosition].imgOriginalUrl
+        vm.percent = vm.imgList[vm.startPosition].percent
+      }
     },
 
     hide () {
@@ -207,9 +277,80 @@ export default {
       }, false)
     },
 
+    formatSize (size = 0, pointLength = 1, units) {
+      var unit
+      units = units || ['B', 'K', 'M', 'G', 'TB']
+      while ((unit = units.shift()) && size > 1024) {
+        size = size / 1024
+      }
+      return (unit === 'B' ? size : size.toFixed(pointLength === undefined ? 2 : pointLength)) + unit
+    },
+
     getState () {
       return this.state
     },
+    showOriginPic (originalUrl, startPosition = 0) {
+      let vm = this
+      function getHttpObj () {
+        var httpobj = null
+        try {
+          httpobj = new ActiveXObject('Msxml2.XMLHTTP')
+        } catch (e) {
+          try {
+            httpobj = new ActiveXObject('Microsoft.XMLHTTP')
+          } catch (e1) {
+            httpobj = new XMLHttpRequest()
+          }
+        }
+        return httpobj
+      }
+
+      // eslint-disable-next-line new-cap
+      var xhr = new getHttpObj()
+      xhr.responseType = 'blob'
+
+      xhr.open('GET', originalUrl, true)
+
+      xhr.onprogress = function (event) {
+        if (event.lengthComputable) {
+          // console.log(event.loaded)
+          // console.log(event.total)
+          vm.percent = event.loaded / event.total * 100
+          vm.word = '下载' + vm.percent.toFixed(2) + '%'
+        }
+      }
+      xhr.onreadystatechange = function () {
+        if (xhr.readyState === 4) {
+          // 使用URL.createObjectURL将Blob对象转换为可访问的url地址
+          let src = URL.createObjectURL(xhr.response)
+          vm.imgOriginalUrl = src
+          vm.imgUrl = src
+          if (vm.imgList.length) {
+            vm.imgList[startPosition].imgUrl = src
+            vm.imgList[startPosition].imgOriginalUrl = src
+            vm.imgList[startPosition].percent = 100
+          }
+
+          if (isFunction(vm.loadSuccess)) {
+            vm.loadSuccess({
+              index: startPosition,
+              percent: 100,
+              localUrl: src,
+            })
+          }
+        }
+      }
+
+      xhr.send()
+    },
+
+    swipeChange (index) {
+      let vm = this
+      vm.imgOriginalUrl = vm.imgList[index].imgOriginalUrl
+      vm.percent = vm.imgList[index].percent
+      vm.word = vm.imgList[index].word
+    },
+
     sharePicture () {
       // var reg = /(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?/
       // window.plugins.socialsharing.share(null, null, this.imgUrl, null)

src/pages/hlsPopup.vue

@@ -295,6 +295,24 @@ export default {
       modal: '',
       showModalValue: false,
       radioValue: true,
+
+      imgList: [
+        {imgUrl: 'http://hlsapp.hand-china.com/hls_file/2018/05/F1B6D85E409A4714A8540504B2D133AD',
+          imgOriginalUrl: 'http://hlsapp.hand-china.com/file/orign.png',
+          imgSize: 2982604,
+          percent: 0,
+        },
+        {imgUrl: 'http://hlsapp.hand-china.com/hls_file/2018/05/F1B6D85E409A4714A8540504B2D133AD',
+          imgOriginalUrl: 'http://hlsapp.hand-china.com/file/orign.png',
+          imgSize: 2282604,
+          percent: 0,
+        },
+        {imgUrl: 'http://hlsapp.hand-china.com/hls_file/2018/05/F1B6D85E409A4714A8540504B2D133AD',
+          imgOriginalUrl: 'http://hlsapp.hand-china.com/file/orign.png',
+          imgSize: 3282604,
+          percent: 0,
+        },
+      ],
     }
   },
   watch: {
@@ -434,8 +452,16 @@ export default {
       })
     },
     showBigPicture () {
-      this.hlsPopup.showBigPicture({
-        imgUrl: 'http://hlsapp.hand-china.com/hls_file/2018/05/F1B6D85E409A4714A8540504B2D133AD',
+      let vm = this
+      vm.hlsPopup.showBigPicture({
+        /* imgUrl: 'http://hlsapp.hand-china.com/hls_file/2018/05/F1B6D85E409A4714A8540504B2D133AD',
+        imgOriginalUrl: 'http://hlsapp.hand-china.com/file/orign.png',
+        imgSize: 2882604, */
+        imgList: vm.imgList,
+        loadSuccess: (src) => {
+          vm.imgList[src.index]['percent'] = src.percent
+          vm.imgList[src.index]['imgOriginalUrl'] = src.localUrl
+        },
       })
     },
     selectListMultiple () {
@@ -469,7 +495,7 @@ export default {
         }, {
           'code': 'NP2',
           'code_name': '个人2',
-        },{
+        }, {
           'code': 'NP',
           'code_name': '个人',
         }, {

src/pages/home.vue

@@ -8,7 +8,6 @@
       <tab-item>Vue</tab-item>
       <tab-item>APP</tab-item>
     </s-tab>
-    <div style="backgroundColor:red;height:50px"/>
     <h-content>
       <list-item>
         <item>
@@ -48,7 +47,7 @@
       <currency-input v-model="number"/>
       <DateField
         v-model="nowDate" required label="时间"
-        @onSelect="select"/>
+        @onSelect="select" error/>
 
       <h-field
         v-model="number" format type="number"
@@ -88,6 +87,7 @@
         inputAlign="left"
         clearable error
         required label="家庭地址"/>
+        <!--<img src="@/assets/image/logo.png" @click="imgclick()" alt="img">-->
     </h-content>
     <bottom-tab/>
   </h-view>
@@ -140,6 +140,9 @@ export default {
     // this.height = this.$refs.textarea.clientHeight
   },
   methods: {
+    /* imgclick(){
+      console.log('img click')
+    }, */
     scrollBottom () {
       let div = document.getElementById('home-content')
       div.scrollTop = div.scrollHeight

src/scripts/hlsPopup.js

@@ -251,9 +251,13 @@ export default {
     if (typeof imgObject === 'object') {
       ShowPicturePlugin.show({
         imgUrl: imgObject.imgUrl,
+        imgOriginalUrl: imgObject.imgOriginalUrl,
+        percent: imgObject.imgOriginalUrl || 0,
+        imgSize: imgObject.imgSize,
         width: imgObject.width,
         imgList: imgObject.imgList || [],
         startPosition: imgObject.startPosition,
+        loadSuccess: imgObject.loadSuccess,
       })
     }
   },