popup与confirm组件修改

packages/common/scripts/hlsPopup.js

 import Vue from 'vue'
-import { ToastPlugin, AlertPlugin, ConfirmPlugin, LoadingPlugin, DatetimePlugin } from 'vux'
-/* import ActionSheet from '../../components/ActionSheet/index'
-import ShowPicture from '../../components/ShowPicture/index'
-import Select from '../../components/select/index'
-import Notify from '../../components/Dialog/plugins/index' */
-// import HlsModal from '../../components/Modal/index'
+import { ToastPlugin, LoadingPlugin, DatetimePlugin } from 'vux'
 
-import NumberKeyboard from '../../components/NumberKeyboard/index'
 import { ActionSheetPlugin, NotifyPlugin, NumberKeyboardPlugin, SelectPlugin, ShowPicturePlugin } from '../../index'
 
+import confirm from '../../components/Confirm/index'
+
 Vue.use(ToastPlugin)
-Vue.use(AlertPlugin)
-Vue.use(ConfirmPlugin)
 Vue.use(LoadingPlugin)
 Vue.use(DatetimePlugin)
-Vue.use(NumberKeyboard)
-
-import confirm from '../../components/Confirm/index'
 
 // Vue.prototype.HlsModal = window.HlsModal = HlsModal
 
@@ -27,13 +18,12 @@ import confirm from '../../components/Confirm/index'
  * @param timeout
  */
 export function showLoading (content = '', timeout = 10000) {
-  let vm = this
   Vue.$vux.loading.show({
     text: content || 'Loading',
   })
   // 10s后自动解屏用于防止屏幕锁死
   setTimeout(() => {
-     Vue.$vux.loading.hide()
+    Vue.$vux.loading.hide()
   }, timeout)
 }
 
@@ -147,29 +137,12 @@ export function showConfirm (confirmObject) {
   confirm.confirmShow(def)
 }
 
-export function showConfirmVux (confirmObject) {
-  let def = {
-    title: confirmObject.title || '提示',
-    content: confirmObject.content || '',
-    confirmText: '确定',
-    cancelText: '取消',
-    onConfirm: () => {
-      confirmObject.onConfirm(1)
-    },
-    onCancel: () => {
-      confirmObject.onConfirm(0)
-    },
-  }
-  Vue.$vux.confirm.show(def)
-}
-
-/*
-   * 弹出确认的窗口
-   * @param confirmObject.title 标题
-   * @param confirmObject.content 内容
-   * @param confirmObject.onConfirm 确定函数
-   *
-   */
+/**
+ * 弹出是否确认的窗口
+ * @param confirmObject.title 标题
+ * @param confirmObject.content 内容
+ * @param confirmObject.onConfirm 确定函数
+ */
 export function showPopup (confirmObject) {
   let def = {
     title: confirmObject.title || '提示',
@@ -180,7 +153,7 @@ export function showPopup (confirmObject) {
       confirmObject.onConfirm()
     },
   }
-  Vue.$vux.confirm.show(def)
+  confirm.confirmShow(def)
 }
 
 /**

packages/common/styles/public-style.less

@@ -124,16 +124,6 @@
   font-size: 30px !important;
 }
 
-.weui-dialog {
-  height: fit-content;
-  width: 70% !important;
-  max-width: 260px !important;
-  border-radius: 10px !important;
-}
-
-.weui-dialog__hd {
-  padding: 1.5em 1.6em 0.5em !important;
-}
 
 .weui-tabbar__item {
   padding: 6px 0 0 !important;
@@ -143,7 +133,6 @@
   width: 22px !important;
   height: 22px !important;
 }
-
 .weui-tabbar__label {
   font-size: 12px !important;
 
@@ -153,22 +142,6 @@
   padding-bottom: 0px !important;
 }
 
-.weui-dialog__title {
-
-  font-weight: 600 !important;
-  font-size: 16px !important;
-}
-
-.weui-dialog__bd {
-  font-size: 14px !important;
-  min-height: 20px;
-}
-
-.weui-dialog__ft {
-  line-height: 44px !important;
-  font-size: 16px !important;
-}
-
 .dp-header {
   .vux-datetime-cancel {
     padding-left: 15px !important;

packages/components/Confirm/confirm.vue

@@ -4,19 +4,24 @@
 */
 
 <template>
-  <div v-show="showValue" class="modal-backdrop" >
-    <section class="h-confirm">
+  <div v-show="showValue" class="popup-backdrop">
+    <section class="h-confirm animated fadeIn">
       <div v-if="!!title" class="confirm_hd">
         <strong class="confirm__title">{{ title }}</strong>
       </div>
       <template v-if="showContent">
         <div class="confirm__bd">
-          <slot><div v-html="content"/></slot>
+          <slot>
+            <div v-html="content"/>
+          </slot>
         </div>
       </template>
       <div class="confirm__ft vue-1px-t">
-        <a v-if="showCancelButton" href="javascript:;" class="confirm__btn confirm__btn_default" @click="_onCancel">{{ cancelText }}</a>
-        <a v-if="showConfirmButton" href="javascript:;" class="confirm__btn" @click="_onConfirm">{{ confirmText }}</a>
+        <a v-if="showCancelButton" href="javascript:;" class="confirm__btn confirm__btn_default" @click="_onCancel">{{
+        cancelText }}</a>
+        <a
+          v-if="showConfirmButton" :class="{'vue-1px-l':showCancelButton}" href="javascript:;" class="confirm__btn confirm__btn_primary "
+          @click="_onConfirm">{{ confirmText }}</a>
       </div>
     </section>
   </div>
@@ -93,38 +98,61 @@ export default {
 }
 </script>
 
-<style scoped lang="less">
-  .modal-backdrop{
+<style lang="less">
+  .popup-backdrop {
+    position: fixed;
     z-index: 9999;
-  }
-  .h-confirm{
-    max-width: 80vw;
-    width: 75vw;
-    height: auto;
-    margin: auto;
-    background-color: #fff;
-    text-align: center;
-    border-radius: 8px;
-    .confirm_hd{
-      padding: 1.5em 1.6em .5em;
-      .confirm__title{
+    display: flex;
+    background-color: rgba(0,0,0,.3);
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    .h-confirm {
+      max-width: 80vw;
+      width: 70vw;
+      height: auto;
+      margin: auto;
+      background-color: #fff;
+      text-align: center;
+      border-radius: 8px;
+
+      .confirm_hd {
+        padding: 1.5em 1.6em .5em;
+
+        .confirm__title {
+          font-size: 16px;
+        }
+      }
+
+      .confirm__bd {
+        padding: 0 1.6em .8em;
+        min-height: 10.667vw;
+        font-size: 14px;
+        line-height: 1.3;
+        word-wrap: break-word;
+        word-break: break-all;
+        color: #999;
+      }
+
+      .confirm__ft {
+        display: flex;
+        position: relative;
+        line-height: 44px;
         font-size: 16px;
+        .confirm__btn{
+          display: block;
+          flex: 1;
+          text-decoration: none;
+          &_default{
+            color: #666;
+          }
+          &_primary{
+            color: @theme-color
+          }
+        }
       }
     }
-    .confirm__bd{
-      padding: 0 1.6em .8em;
-      min-height: 10.667vw;
-      font-size: 14px;
-      line-height: 1.3;
-      word-wrap: break-word;
-      word-break: break-all;
-      color: #999;
-    }
-    .confirm__ft{
-display: flex;
-      position: relative;
-      line-height: 44px;
-      font-size: 16px
-    }
   }
+
 </style>

packages/components/Range/index.vue

@@ -83,6 +83,11 @@ export default {
       }
     },
   },
+  watch: {
+    value () {
+      this.currentValue = this.value
+    },
+  },
   created () {
     this.currentValue = this.value
   },

packages/index.js

@@ -42,7 +42,7 @@ import NumberKeyboardPlugin from './components/NumberKeyboard/index'
 // styles
 import appStyle from './common/styles/app.core.less'
 
-import {showLoading, hideLoading, showLongTop, showLongCenter, showLongBottom, showSuccess, showError, showConfirm, showConfirmVux, showPopup, showActionSheet, showTime, showBigPicture, selectList, showNumberKeyboard, showNotify} from './common/scripts/hlsPopup'
+import {showLoading, hideLoading, showLongTop, showLongCenter, showLongBottom, showSuccess, showError, showConfirm, showPopup,showActionSheet, showTime, showBigPicture, selectList, showNumberKeyboard, showNotify} from './common/scripts/hlsPopup'
 import elementUtil from './common/scripts/elementUtil'
 import filter from './common/scripts/filter'
 import directives from './common/scripts/directives'
@@ -59,7 +59,6 @@ const hlsPopup = {
   showSuccess,
   showError,
   showConfirm,
-  showConfirmVux,
   showPopup,
   showActionSheet,
   showTime,

src/pages/Sign.vue

+/**
+* @Author think
+* @Date 9/18/21 3:03 PM
+*/
+
+<template>
+  <h-view>
+    <h-header style="padding-top: 0 !important;">
+      <div v-tap="confirm" slot="left" class="h-header-btn">确定</div>
+      <div v-tap="cleanData" slot="right" class="h-header-btn">清除</div>
+    </h-header>
+    <h-content>
+      <div id="draw" class="draw">
+        <div id="sig" class="sig">
+          <canvas
+            id="canvas"
+            @mousedown="beginDraw"
+            @mouseup="endDraw"
+            @mousemove="drawing"
+            @touchstart="beginDraw"
+            @touchend="endDraw"
+            @touchmove="drawing"
+          />
+        </div>
+      </div>
+    </h-content>
+  </h-view>
+</template>
+
+<script>
+export default {
+  name: 'Sign',
+  data () {
+    return {
+      image_base64: '',
+      canvas: {},
+      context: {},
+      height: '',
+      hasSignature: false,
+      last: null,
+      config: {
+        strokeStyle: '#ff0000',
+        lineWidth: 3,
+      },
+      mousePress: false,
+    }
+  },
+  mounted () {
+    this.canvas = document.getElementById('canvas')
+    this.context = this.canvas.getContext('2d')
+    //if (window.innerHeight > window.innerWidth) {
+      this.height = window.innerHeight - 80
+      this.resizeCanvas(window.innerWidth, this.height)
+    //} else {
+    //  this.resizeCanvas(window.innerWidth, window.innerHeight - 50)
+    //  this.height = window.innerHeight + 50
+    //}
+  },
+  methods: {
+    /**
+       * 清空画布
+       * */
+    cleanData () {
+      this.context.clearRect(0, 0, this.canvas.width, this.canvas.height)
+      this.hasSignature = false
+    },
+    /**
+       * 获取画图内容
+       *
+       * */
+    confirm () {
+      let vm = this
+      if (!this.hasSignature) {
+        vm.hlsPopup.showLongBottom('未创建签名！')
+      } else {
+        let signData = this.canvas.toDataURL('image/png').split(',')[1]
+        console.log(signData)
+      }
+    },
+    beginDraw (e) {
+      this.mousePress = true
+    },
+    endDraw (e) {
+      this.mousePress = false
+      e.preventDefault()
+      this.last = null
+    },
+    drawing (e) {
+      e.preventDefault()
+      if (!this.hasSignature) {
+        this.hasSignature = true
+      }
+      if (!this.mousePress) {
+        return
+      }
+      let xy = this.getCoordinate(e)
+      if (this.last !== null) {
+        this.context.beginPath()
+        this.context.moveTo(this.last.x, this.last.y)
+        this.context.lineTo(xy.x, xy.y)
+        this.context.stroke()
+      }
+      // 开始移动，将坐标赋值给last。那么下次再移动就会通过上面的操作从上一个xy移动到当前的xy处
+      this.last = xy
+    },
+    getCoordinate (e) {
+      let x, y
+      if (this.isTouch(e)) {
+        x = e.touches[0].pageX // 修改
+        y = e.touches[0].pageY - 80
+      } else {
+        x = e.offsetX + e.target.offsetLeft
+        y = e.offsetY + e.target.offsetTop + 80
+        // return false;
+      }
+      return {
+        x: x,
+        y: y,
+      }
+    },
+    /**
+     * 重置画布操作
+     * @param {*} w 画布宽
+     * @param {*} h 画布高
+     */
+    resizeCanvas (w, h) {
+      let nc = this.canvas
+      this.canvas.width = w
+      this.canvas.height = h
+      this.context.strokeStyle = this.config.strokeStyle
+      this.context.lineWidth = this.config.lineWidth
+      this.context.drawImage(nc, 0, 0, w, h, 0, 0, w, h)
+    },
+    isTouch (e) {
+      let type = e.type
+      if (type.indexOf('touch') >= 0) {
+        return true
+      } else {
+        return false
+      }
+    },
+  },
+}
+</script>
+
+<style scoped lang="less">
+.content{
+  .draw {
+    width: 100%;
+    height: 95%;
+    //position: absolute;
+    .sig {
+      width: 100%;
+      height: 100%;
+      /*canvas {
+        width: 100%;
+        height: 100%;
+      }*/
+    }
+  }
+}
+</style>

src/pages/hlsPopup.vue

@@ -35,7 +35,6 @@
       <h-button class="button-class" type="primary" @click.native="showSuccess">showSuccess</h-button>
       <h-button class="button-class" type="primary" @click.native="showError">showError</h-button>
       <h-button class="button-class" type="primary" @click.native="showConfirm">showConfirm</h-button>
-      <h-button class="button-class" type="primary" @click.native="showConfirmVux">showConfirmVux</h-button>
       <h-button class="button-class" type="primary" @click.native="showPopup">showPopup</h-button>
       <h-button class="button-class" type="primary" @click.native="showActionSheet">showActionSheet</h-button>
       <h-button class="button-class" type="primary" @click.native="showActionSheetButton">showActionSheet 区分按钮颜色
@@ -421,15 +420,6 @@ export default {
         },
       })
     },
-    showConfirmVux () {
-      this.hlsPopup.showConfirmVux({
-        title: '确定退出',
-        content: '退出后需从新登录',
-        onConfirm: function (index) {
-          alert(index)
-        },
-      })
-    },
     showPopup () {
       this.hlsPopup.showPopup({
         title: '确定退出',

src/router/index.js

@@ -26,6 +26,7 @@ const Field = resolve => require.ensure([], () => { resolve(require('@/pages/Fie
 const CurrencyInput = resolve => require.ensure([], () => { resolve(require('@/pages/CurrencyInput/demo')) }, 'currencyInput')
 const CheckBox = resolve => require.ensure([], () => { resolve(require('@/pages/CheckBox/demo')) }, 'checkBox')
 const DateField = resolve => require.ensure([], () => { resolve(require('@/pages/DateField/demo')) }, 'dateField')
+const Sign = resolve => require.ensure([], () => { resolve(require('@/pages/Sign')) }, 'Sign')
 
 Vue.use(Router)
 
@@ -59,6 +60,7 @@ export default new Router({
     {path: '/currencyInput', component: CurrencyInput, name: 'CurrencyInput', meta: {keepAlive: false}},
     {path: '/checkBox', component: CheckBox, name: 'CheckBox', meta: {keepAlive: false}},
     {path: '/dateField', component: DateField, name: 'DateField', meta: {keepAlive: false}},
+    {path: '/Sign', component: Sign, name: 'Sign', meta: {keepAlive: false}},
 
   ],
   scrollBehavior (to, from, savedPosition) {

src/styles/variables.less

@@ -10,7 +10,7 @@
 /**
 * 颜色
 */
-@theme-color:#0041C4;
+@theme-color:#ff0000;
 @font-color:#666666;
 @mainColor: #000;
 @baseColor: white;

src/websocket.html

+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title></title>
+</head>
+<body>
+websocket Demo---- user000 <br />
+<input id="text" type="text" />
+<button onclick="send()"> Send </button>
+<button   onclick="closeWebSocket()"> Close </button>
+<div id="message">   </div>
+
+<script type="text/javascript">
+  //判断当前浏览器是否支持WebSocket
+  if('WebSocket' in window){
+    websocket = new WebSocket("ws://hzero.hlsapp.hand-china.com/hls_support/websocket/test/user000");
+    console.log("link success")
+  }else{
+    alert('Not support websocket')
+  }
+
+  //连接发生错误的回调方法
+  websocket.onerror = function(){
+    setMessageInnerHTML("error");
+  };
+
+  //连接成功建立的回调方法
+  websocket.onopen = function(event){
+    setMessageInnerHTML("open");
+  }
+  console.log("-----")
+  //接收到消息的回调方法
+  websocket.onmessage = function(event){
+    setMessageInnerHTML(event.data);
+  }
+
+  //连接关闭的回调方法
+  websocket.onclose = function(){
+    setMessageInnerHTML("close");
+  }
+
+  //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
+  window.onbeforeunload = function(){
+    websocket.close();
+  }
+
+  //将消息显示在网页上
+  function setMessageInnerHTML(innerHTML){
+    document.getElementById('message').innerHTML += innerHTML + '<br/>';
+  }
+
+  //关闭连接
+  function closeWebSocket(){
+    websocket.close();
+  }
+
+  //发送消息
+  function send(){
+    var message = document.getElementById('text').value;
+    websocket.send(message);
+  }
+</script>
+
+</body>
+</html>