Bladeren bron

no message

sys 2 jaren geleden
bovenliggende
commit
3955f55d5c
2 gewijzigde bestanden met toevoegingen van 148 en 0 verwijderingen
  1. 79 0
      components/en-utils/en-popup/en-drawer.vue
  2. 69 0
      components/en-utils/en-popup/en-popup.vue

+ 79 - 0
components/en-utils/en-popup/en-drawer.vue

@@ -0,0 +1,79 @@
+<template>
+  <view >
+    <uni-drawer ref="drawer"  :type="type" :width="drawerWidth" mask-background-color="rgba(0,0,0,0.4)">
+        <slot name="drawerInfo">
+
+        </slot>
+
+    </uni-drawer>
+  </view>
+</template>
+
+<script>
+export default {
+  name: "en-drawer",
+  components: {},
+  props: {
+    showTop:{
+      type:Boolean,
+      default:true
+    },
+    type:{
+      type:String,
+      default: 'left'
+    },
+    width:{
+      type:Number,
+      default: 0
+    }
+  },
+  data() {
+    return {
+      drawerWidth:375
+    }
+  },
+  watch: {},
+  mounted() {
+    console.log(uni.getSystemInfoSync().windowWidth)
+    if(this.width>0){
+      this.drawerWidth=this.width
+    }else {
+      // this.drawerWidth=this.width
+    }
+  },
+  methods: {
+    open(){
+      this.$refs.drawer.open()
+    },
+    setTabBar(e){
+      // console.log(e)
+      // if(e.show){
+      //   uni.hideTabBar()
+      // }else {
+      //   uni.showTabBar()
+      // }
+    },
+    close(){
+      this.$refs.drawer.close()
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.popup-box{
+  background: #FFFFFF;
+  border-radius: 20rpx 20rpx 0 0;
+  box-shadow: 0px -8px 20px 0px rgba(0,0,0,0.04);
+  padding: 28rpx 32rpx 50rpx 32rpx;
+  z-index: 100;
+  .popup-title{
+    .popup-close{
+      margin: 0 auto;
+      width: 82rpx;
+      height: 10rpx;
+    }
+  }
+}
+
+</style>

+ 69 - 0
components/en-utils/en-popup/en-popup.vue

@@ -0,0 +1,69 @@
+<template>
+  <view >
+    <uni-popup ref="popup" @change="setTabBar" type="bottom" :mask-background-color="maskBackgroundColor">
+      <view class="popup-box" v-show="showTop">
+        <view class="popup-title" @click="close">
+          <image class="popup-close" src="@/static/img/pay/gb-p.png"></image>
+        </view>
+        <slot name="popupInfo"></slot>
+      </view>
+    </uni-popup>
+  </view>
+</template>
+
+<script>
+export default {
+  name: "en-popup",
+  components: {},
+  props: {
+    showTop:{
+      type:Boolean,
+      default:true
+    },
+    maskBackgroundColor:{
+      default: 'rgba(0,0,0,0.4)'
+    }
+  },
+  data() {
+    return {}
+  },
+  watch: {},
+  mounted() {
+
+  },
+  methods: {
+    open(){
+      this.$refs.popup.open('bottom')
+    },
+    setTabBar(e){
+      if(e.show){
+        uni.hideTabBar()
+      }else {
+        uni.showTabBar()
+      }
+    },
+    close(){
+      this.$refs.popup.close()
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.popup-box{
+  background: #FFFFFF;
+  border-radius: 20rpx 20rpx 0 0;
+  box-shadow: 0px -8px 20px 0px rgba(0,0,0,0.04);
+  padding: 28rpx 32rpx 50rpx 32rpx;
+  z-index: 100;
+  .popup-title{
+    padding: 20rpx;
+    .popup-close{
+      margin: 0 auto;
+      width: 82rpx;
+      height: 10rpx;
+    }
+  }
+}
+
+</style>