dolphin-weex-ui 1.2.0 → 1.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dolphin-weex-ui",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "description": "inteligense cross platform frame",
   "main": "index.js",
   "directories": {

package/packages/dof-confirm/index.vue

@@ -1,41 +1,50 @@
 <template>
   <div>
-      <div @touchend="handleTouchEnd">
-          <dof-overlay ref="overlay"
-            v-if="show"
-            :show="haveOverlay && isOverShow"
-            v-bind="overlayCfg"
-            v-on:dofOverlayBodyClicked="dofOverlayBodyClicking">
-          </dof-overlay>
-      </div>
-      <div ref="dof-confirm"
-          v-if="show"
-          :height="_height"
-          :hack="isNeedShow"
-          :class="['dof-confirm', pos]"
-          :style="padStyle">
-          <!-- add slot by hairong -->
-          <slot name="confirmContent"></slot>
+    <div @touchend="handleTouchEnd">
+      <dof-overlay
+        ref="overlay"
+        v-if="show"
+        :show="haveOverlay && isOverShow"
+        v-bind="overlayCfg"
+        v-on:dofOverlayBodyClicked="dofOverlayBodyClicking"
+      >
+      </dof-overlay>
+    </div>
+    <div
+      ref="dof-confirm"
+      v-if="show"
+      :height="_height"
+      :hack="isNeedShow"
+      :class="['dof-confirm', pos]"
+      :style="padStyle"
+    >
+      <!-- add slot by hairong -->
+      <slot name="confirmContent"></slot>
 
-          <text v-if="title" class="confirm-title">{{title}}</text>
-          <div class="confirm-content-wrapper">
-              <text class="confirm-content">{{content}}</text>
-          </div>
-          <div class="confirm-buttons">
-              <div class="confirm-button-left" @click="leftBtnClick"><text class="left-button">{{leftBtnText}}</text></div>
-              <div class="confirm-button-right" @click="rightBtnClick"><text class="right-button">{{rightBtnText}}</text></div>
-          </div>
-          <!-- add by lau  解决iPhonex xr xs等机型的低栏问题 留白 -->
-          <div :style="{height:isipx?'68px':'0px','background-color': '#ffffff'}"></div>
+      <text v-if="title" class="confirm-title">{{ title }}</text>
+      <div class="confirm-content-wrapper">
+        <text class="confirm-content">{{ content }}</text>
+      </div>
+      <div class="confirm-buttons">
+        <div class="confirm-button-left" @click="leftBtnClick">
+          <text class="left-button">{{ leftBtnText }}</text>
+        </div>
+        <div class="confirm-button-right" @click="rightBtnClick">
+          <text class="right-button">{{ rightBtnText }}</text>
+        </div>
       </div>
+      <!-- add by lau  解决iPhonex xr xs等机型的低栏问题 留白 -->
+      <div :style="{ height: isipx ? '68px' : '0px', 'background-color': '#ffffff' }"></div>
+    </div>
   </div>
 </template>
 
 <script>
-const animation = weex.requireModule('animation');
-const { platform } = weex.config.env;
-const isWeb = typeof (window) === 'object' && platform.toLowerCase() === 'web';
-import dofOverlay from '../dof-overlay';
+const animation = weex.requireModule('animation')
+const { platform } = weex.config.env
+const isWeb = typeof window === 'object' && platform.toLowerCase() === 'web'
+import dofOverlay from '../dof-overlay'
+import { Bridge } from 'dolphin-native-bridge'
 export default {
   components: { dofOverlay },
   props: {
@@ -92,128 +101,141 @@ export default {
   },
   data: () => ({
     haveOverlay: true,
-    isOverShow: true
+    isOverShow: true,
+    bottomArc: 0
   }),
 
   computed: {
     // add by lau
-    isipx: function () {
-      return weex && (
-                weex.config.env.deviceModel === 'iPhone10,3' || weex.config.env.deviceModel === 'iPhone10,6' || // iphoneX
-                weex.config.env.deviceModel === 'iPhone11,8' || // iPhone XR
-                weex.config.env.deviceModel === 'iPhone11,2' || // iPhone XS
-                weex.config.env.deviceModel === 'iPhone11,4' || weex.config.env.deviceModel === 'iPhone11,6' // iPhone XS Max
-                );
+    isipx: function() {
+      if (this.bottomArc) return true
+      return (
+        weex &&
+        (weex.config.env.deviceModel === 'iPhone10,3' ||
+        weex.config.env.deviceModel === 'iPhone10,6' || // iphoneX
+        weex.config.env.deviceModel === 'iPhone11,8' || // iPhone XR
+        weex.config.env.deviceModel === 'iPhone11,2' || // iPhone XS
+          weex.config.env.deviceModel === 'iPhone11,4' ||
+          weex.config.env.deviceModel === 'iPhone11,6') // iPhone XS Max
+      )
     },
 
-    isNeedShow () {
+    isNeedShow() {
       setTimeout(() => {
-        this.appearPopup(this.show);
-      }, 50);
-      return this.show;
+        this.appearPopup(this.show)
+      }, 50)
+      return this.show
     },
-    _height () {
-      this.appearPopup(this.show, 150);
-      return this.height;
+    _height() {
+      this.appearPopup(this.show, 150)
+      return this.height
     },
-    transformValue () {
-      return this.getTransform(this.pos, this.width, this.height, true);
+    transformValue() {
+      return this.getTransform(this.pos, this.width, this.height, true)
     },
-    padStyle () {
-      const { pos, width, height, popupColor } = this;
+    padStyle() {
+      const { pos, width, height, popupColor } = this
       let style = {
         width: `${width}px`,
         backgroundColor: popupColor
-      };
-      pos === 'bottom' && (style = {
-        ...style,
-        bottom: `${-height}px`,
-        height: `${height}px`
-      });
-      return style;
+      }
+      pos === 'bottom' &&
+        (style = {
+          ...style,
+          bottom: `${-height}px`,
+          height: `${height}px`
+        })
+      return style
     }
   },
 
-  created(){
-    console.log("weeks", weex)
+  created() {
+    console.log('weeks', weex)
+    Bridge.getAllBarHeight().then(res => {
+      this.bottomArc = res.bottomArc || 0
+    })
   },
   methods: {
-    leftBtnClick () {
-      this.appearPopup(false);
-      this.$emit('leftBtnClick', false);
+    leftBtnClick() {
+      this.appearPopup(false)
+      this.$emit('leftBtnClick', false)
     },
-    rightBtnClick () {
-      this.appearPopup(false);
-      this.$emit('rightBtnClick', true);
+    rightBtnClick() {
+      this.appearPopup(false)
+      this.$emit('rightBtnClick', true)
     },
-    handleTouchEnd (e) {
-            // 在支付宝上面有点击穿透问题
-      const { platform } = weex.config.env;
-      platform === 'Web' && e.preventDefault && e.preventDefault();
+    handleTouchEnd(e) {
+      // 在支付宝上面有点击穿透问题
+      const { platform } = weex.config.env
+      platform === 'Web' && e.preventDefault && e.preventDefault()
     },
-    hide () {
-      this.appearPopup(false);
-      this.$refs.overlay.appearOverlay(false);
+    hide() {
+      this.appearPopup(false)
+      this.$refs.overlay.appearOverlay(false)
     },
-    dofOverlayBodyClicking () {
-      this.isShow && this.appearPopup(false);
+    dofOverlayBodyClicking() {
+      this.isShow && this.appearPopup(false)
     },
 
-    appearPopup (bool, duration = 300) {
+    appearPopup(bool, duration = 300) {
       // 解决iphonex,xr,xs.11机型低栏的问题
-      var height = this.isipx?this.height+68:this.height;
-      this.isShow = bool;
-      const popupEl = this.$refs['dof-confirm'];
+      var height = this.isipx ? this.height + 68 : this.height
+      this.isShow = bool
+      const popupEl = this.$refs['dof-confirm']
       if (!popupEl) {
-        return;
+        return
       }
-      animation.transition(popupEl, {
-        styles: {
-          transform: this.getTransform(this.pos, this.width, height, !bool)
+      animation.transition(
+        popupEl,
+        {
+          styles: {
+            transform: this.getTransform(this.pos, this.width, height, !bool)
+          },
+          duration,
+          delay: 0,
+          ...this.animation
         },
-        duration,
-        delay: 0,
-        ...this.animation
-      }, () => {
-        if (!bool) {
-          this.$emit('dofPopupOverlayClicked', { pos: this.pos });
+        () => {
+          if (!bool) {
+            this.$emit('dofPopupOverlayClicked', { pos: this.pos })
+          }
         }
-      });
+      )
     },
-    getTransform (pos, width, height, bool) {
-      let _size = pos === 'top' || pos === 'bottom' ? height : width;
-      let _transform;
+    getTransform(pos, width, height, bool) {
+      let _size = pos === 'top' || pos === 'bottom' ? height : width
+      let _transform
       if (isWeb) {
-        _size -= this.standOut;
+        _size -= this.standOut
       }
-      bool && (_size = 0);
+      bool && (_size = 0)
       switch (pos) {
-      case 'top':
-        _transform = `translateY(${_size}px)`;
-        break;
-      case 'bottom':
-        _transform = `translateY(-${_size}px)`;
-        break;
-      case 'left':
-        _transform = `translateX(${_size}px)`;
-        break;
-      case 'right':
-        _transform = `translateX(-${_size}px)`;
-        break;
+        case 'top':
+          _transform = `translateY(${_size}px)`
+          break
+        case 'bottom':
+          _transform = `translateY(-${_size}px)`
+          break
+        case 'left':
+          _transform = `translateX(${_size}px)`
+          break
+        case 'right':
+          _transform = `translateX(-${_size}px)`
+          break
       }
-      return _transform;
+      return _transform
     }
   }
-};
+}
 </script>
 
 <style scoped>
 .dof-confirm {
   position: fixed;
   width: 750px;
-  background: #FFFFFF;
-  border-top-left-radius:32px;
-  border-top-right-radius:32px;
+  background: #ffffff;
+  border-top-left-radius: 32px;
+  border-top-right-radius: 32px;
 }
 
 .bottom {
@@ -228,8 +250,8 @@ export default {
   color: #000000;
   font-size: 36px;
   background-color: #ffffff;
-  border-top-left-radius:32px;
-  border-top-right-radius:32px;
+  border-top-left-radius: 32px;
+  border-top-right-radius: 32px;
 }
 
 .confirm-content-wrapper {
@@ -243,7 +265,7 @@ export default {
 }
 
 .confirm-content {
-  color: #020F13;
+  color: #020f13;
   font-size: 28px;
   line-height: 30px;
   /* text-align: justify;
@@ -251,7 +273,7 @@ export default {
   justify-content: space-between; */
 }
 
-.confirm-content::after{
+.confirm-content::after {
   content: '';
   display: inline-block;
   width: 100%;
@@ -264,13 +286,14 @@ export default {
   background-color: #f2f2f2;
   text-align: center;
   font-size: 36px;
-  flex-direction:row;
+  flex-direction: row;
 }
 
-.confirm-button-left, .confirm-button-right {
+.confirm-button-left,
+.confirm-button-right {
   width: 375px;
   text-align: center;
-  flex:1;
+  flex: 1;
   align-items: center;
   justify-content: center;
   text-align: center;
@@ -279,7 +302,7 @@ export default {
 
 .confirm-button-left {
   border-right-width: 1px;
-  border-right-color: #E5E5E5;
+  border-right-color: #e5e5e5;
 }
 
 .left-button {
@@ -294,4 +317,3 @@ export default {
   color: #000000;
 }
 </style>
-

package/packages/dof-confirm-box/index.vue

@@ -1,8 +1,14 @@
 <template>
   <div v-if="show" class="bg" @click="cancel">
-    <div class="dof-confirm-box-wrap" ref="boxWrap"  :style="{height: wrapHeight, bottom:'0px'}">
-      <text v-if='title' class="title">{{title}}</text>
-      <dof-image src="../../assets/img/check/disuncheked.png" @click="cancel" class="closeIcon" width="40px" height="40px"></dof-image>
+    <div class="dof-confirm-box-wrap" ref="boxWrap" :style="{ height: wrapHeight, bottom: '0px' }">
+      <text v-if="title" class="title">{{ title }}</text>
+      <dof-image
+        src="../../assets/img/check/disuncheked.png"
+        @click="cancel"
+        class="closeIcon"
+        width="40px"
+        height="40px"
+      ></dof-image>
       <div class="slot-floor">
         <slot></slot>
       </div>
@@ -11,20 +17,19 @@
         <text class="right-button" @click="rightBtnClick">{{rightBtnText}}</text>
       </div> -->
 
-      <div :class="[isipx?'bottom-offset-padding':'']"></div>
+      <div :class="[isipx ? 'bottom-offset-padding' : '']"></div>
     </div>
   </div>
 </template>
 
-
-
 <script>
-import DofImage from '../dof-image';
+import DofImage from '../dof-image'
 // import { DofImage, DofMinibar } from "../../index";
-var animation = weex.requireModule('animation');
+var animation = weex.requireModule('animation')
+import { Bridge } from 'dolphin-native-bridge'
 
 export default {
-  components:{DofImage},
+  components: { DofImage },
   props: {
     show: {
       type: Boolean,
@@ -51,31 +56,33 @@ export default {
   },
   data() {
     return {
-    };
-  },
-
-  watch:{
-   
+      bottomArc: 0
+    }
   },
 
+  watch: {},
 
   computed: {
-    isipx: function () {
-      return weex && (
-        weex.config.env.deviceModel === 'iPhone10,3' || weex.config.env.deviceModel === 'iPhone10,6' || // iphoneX
+    isipx: function() {
+      if (this.bottomArc) return true
+      return (
+        weex &&
+        (weex.config.env.deviceModel === 'iPhone10,3' ||
+        weex.config.env.deviceModel === 'iPhone10,6' || // iphoneX
         weex.config.env.deviceModel === 'iPhone11,8' || // iPhone XR
         weex.config.env.deviceModel === 'iPhone11,2' || // iPhone XS
-        weex.config.env.deviceModel === 'iPhone11,4' || weex.config.env.deviceModel === 'iPhone11,6' // iPhone XS Max
-        );
+          weex.config.env.deviceModel === 'iPhone11,4' ||
+          weex.config.env.deviceModel === 'iPhone11,6') // iPhone XS Max
+      )
     },
     wrapHeight: function() {
-      let tmp = '';
+      let tmp = ''
       if (this.isipx) {
-        tmp = this.height + 34;
+        tmp = this.height + 34
       } else {
-        tmp = this.height;
+        tmp = this.height
       }
-      return tmp + 'px';
+      return tmp + 'px'
     }
   },
   methods: {
@@ -84,119 +91,129 @@ export default {
     //   this.$emit('dofPopupOverlayClicked');
     // },
 
-    open(){
+    open() {
       var _this = this
-      console.log("open")
-      var el = this.$refs.boxWrap;
-      var translate = 'translate(0px, 0px)';
-      _this.animationFn(el, translate, 'cubic-bezier( 1.0, 0.25, 0.1, 0.25)', function () {
-        _this.show = true;   // overlay show = false
-        _this.$emit('dofPopupOverlayClicked');
-      });
+      console.log('open')
+      var el = this.$refs.boxWrap
+      var translate = 'translate(0px, 0px)'
+      _this.animationFn(el, translate, 'cubic-bezier( 1.0, 0.25, 0.1, 0.25)', function() {
+        _this.show = true // overlay show = false
+        _this.$emit('dofPopupOverlayClicked')
+      })
     },
 
     cancel() {
       var _this = this
-      console.log("cancel")
-      var el = this.$refs.boxWrap;
-      var translate = 'translate(0px, ' + (this.height) + 'px)';
-      _this.animationFn(el, translate, 'cubic-bezier( 1.0, 0.25, 0.1, 0.25)', function () {
-        _this.show = false;   // overlay show = false
-        _this.$emit('dofPopupOverlayClicked');
-      });
+      console.log('cancel')
+      var el = this.$refs.boxWrap
+      var translate = 'translate(0px, ' + this.height + 'px)'
+      _this.animationFn(el, translate, 'cubic-bezier( 1.0, 0.25, 0.1, 0.25)', function() {
+        _this.show = false // overlay show = false
+        _this.$emit('dofPopupOverlayClicked')
+      })
     },
 
-    leftBtnClick () {
-      this.$emit('leftBtnClick');
+    leftBtnClick() {
+      this.$emit('leftBtnClick')
     },
-    rightBtnClick () {
-      this.$emit('rightBtnClick');
+    rightBtnClick() {
+      this.$emit('rightBtnClick')
     },
 
     animationFn(el, translate, timing, fn) {
-      animation.transition(el, {
-        styles: {
-          transform: translate,
-          transformOrigin: 'center center'
+      animation.transition(
+        el,
+        {
+          styles: {
+            transform: translate,
+            transformOrigin: 'center center'
+          },
+          duration: 300, // ms
+          timingFunction: timing,
+          delay: 0 // ms
         },
-        duration: 300, // ms
-        timingFunction: timing,
-        delay: 0 // ms
-      }, function () {
-        fn && fn();
-      });
+        function() {
+          fn && fn()
+        }
+      )
     }
   },
-  mounted() {
-  },
+  mounted() {},
   created() {
+    Bridge.getAllBarHeight().then(res => {
+      this.bottomArc = res.bottomArc || 0
+    })
   }
-};
+}
 </script>
 
 <style>
-.bg{
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    background-color: rgba(0,0,0, 0.3)
+.bg {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: rgba(0, 0, 0, 0.3);
+}
+.dof-confirm-box-wrap {
+  background-color: #ffffff;
+  width: 750px;
+  position: fixed;
+  bottom: 0;
+  border-top-left-radius: 32px;
+  border-top-right-radius: 32px;
+  overflow: hidden;
+  transition: ease-in-out all 0.5s;
+  /* padding: 16px; */
 }
-.dof-confirm-box-wrap{
-    background-color: #ffffff;
-    width:750px;
-    position: fixed;
-    bottom: 0;
-    border-top-left-radius: 32px;
-    border-top-right-radius: 32px;
-    overflow: hidden;
-    transition: ease-in-out all 0.5s;
-    /* padding: 16px; */
+.slot-floor {
+  /* width: 750px; */
+  /* height: 500px; */
+  background-color: #ffffff;
+  font-size: 28px;
+  border-top-left-radius: 32px;
+  border-top-right-radius: 32px;
 }
-.slot-floor{
-    /* width: 750px; */
-    /* height: 500px; */
-    background-color: #ffffff;
-    font-size: 28px;
-    border-top-left-radius: 32px;
-    border-top-right-radius: 32px;
+.row-sb {
+  flex-direction: row;
+  justify-content: space-between;
 }
-.row-sb{ flex-direction: row; justify-content: space-between; }
-.confirm-buttons{
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    padding-top: 16px;
-    background-color: #f2f2f2;
+.confirm-buttons {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding-top: 16px;
+  background-color: #f2f2f2;
 }
-.left-button, .right-button {
-    width: 375px;
-    line-height: 96px;
-    flex:1;
-    text-align: center;
-    background-color: #ffffff;
+.left-button,
+.right-button {
+  width: 375px;
+  line-height: 96px;
+  flex: 1;
+  text-align: center;
+  background-color: #ffffff;
 }
 .left-button {
-    font-size: 32px;
-    color: #666666;
-    border-right-width: 1px;
-    border-right-color: #e5e5e5;
+  font-size: 32px;
+  color: #666666;
+  border-right-width: 1px;
+  border-right-color: #e5e5e5;
 }
 .right-button {
-    font-size: 32px;
-    color: #000000;
+  font-size: 32px;
+  color: #000000;
 }
-.bottom-offset{
-    height: 154px;
+.bottom-offset {
+  height: 154px;
 }
 
-.bottom-offset-padding{
+.bottom-offset-padding {
   height: 68px;
 }
 
-.title{
+.title {
   color: #000000;
   font-size: 32px;
   line-height: 106px;
@@ -207,7 +224,7 @@ export default {
   padding-left: 32px;
 }
 
-.closeIcon{
+.closeIcon {
   position: absolute;
   top: 37px;
   right: 37px;