@zfqh/uniapp 0.1.1

package/lib/components/g-page-container/g-page-container.vue

@@ -0,0 +1,470 @@
+<template>
+  <view class="container" :style="[containerStyle]">
+    <view v-if="showHeader" class="header" id="page_header" :style="[_headerStyle]">
+      <view v-if="showNavbar" class="flex justify-center" :style="[_navbarStyle]">
+        <view :style="[_leftStyle]">
+          <g-back-button
+            v-if="showBack"
+            :showHome="showHome"
+            :iconType="iconType"
+            :iconFont="iconFont"
+            :iconName="iconName"
+            :homeIconName="homeIconName"
+            :iconSize="iconSize"
+            :homeIconSize="homeIconSize"
+            :color="iconColor"
+            :fixed="false"
+          />
+          <slot v-else name="left"></slot>
+        </view>
+        <view v-if="title !== false" :style="[_titleStyle]">
+          <slot name="title">
+            {{ title }}
+          </slot>
+        </view>
+        <view :style="[rightStyle]">
+          <slot name="right"></slot>
+        </view>
+      </view>
+      <slot v-if="showExtra" name="extra"></slot>
+    </view>
+    <view class="flex-1 h-0 main">
+      <g-refresh-view
+        height="100%"
+        :enabled="refreshEnabled"
+        :triggered="trigger"
+        :mode="refreshMode"
+        :loadingStyle="_loadingStyle"
+        :scrollTop="scroll_top"
+        :spinnerColor="spinnerColor"
+        :animation="animation"
+        :completeText="completeText"
+        @refresh="refresh"
+        @scroll="scroll"
+        @pulling="pulling = true"
+        @restore="pulling = false"
+        @abort="pulling = false"
+        @scrolltop="scrolltop"
+        @scrollbottom="scrollbottom"
+      >
+        <view class="content" :class="{ hasBg }" :style="[_contentStyle]">
+          <slot name="content">
+            <view class="flex-1 w-full">
+              <slot name="default"></slot>
+            </view>
+          </slot>
+          <slot name="bottom"></slot>
+        </view>
+      </g-refresh-view>
+    </view>
+    <view v-if="showFooter" :style="[_footerStyle]" :class="{ 'uv-border-top': footerBorder }">
+      <slot name="footer"></slot>
+    </view>
+  </view>
+</template>
+
+<script>
+import system from '../../modules/system';
+import color from '../../configs/color';
+
+export default {
+  props: {
+    triggered: Boolean,
+    spinnerColor: String,
+    title: {
+      type: [String, Boolean],
+      default: '',
+    },
+    loading: {
+      type: [String, Boolean],
+      default: false,
+    },
+    refreshEnabled: {
+      type: Boolean,
+      default: false,
+    },
+    showNavbar: {
+      type: Boolean,
+      default: true,
+    },
+    showHeader: {
+      type: Boolean,
+      default: false,
+    },
+    showFooter: {
+      type: Boolean,
+      default: false,
+    },
+    showBack: {
+      type: Boolean,
+      default: false,
+    },
+    showHome: {
+      type: Boolean,
+      default: false,
+    },
+    showExtra: {
+      type: Boolean,
+      default: true,
+    },
+    hasNavbar: {
+      type: Boolean,
+      default: false,
+    },
+    hasTabbar: {
+      type: Boolean,
+      default: false,
+    },
+    bgColor: {
+      type: String,
+      default: () => color.bgColor,
+    },
+    titleColor: {
+      type: String,
+      default: '#fff',
+    },
+    titleSize: {
+      type: [String, Number],
+      default: 18,
+    },
+    titleBold: {
+      type: [String, Number],
+      default: 500,
+    },
+    titleStyle: {
+      type: Object,
+      default: () => ({}),
+    },
+    headerStyle: {
+      type: Object,
+      default: () => ({}),
+    },
+    navbarStyle: {
+      type: Object,
+      default: () => ({}),
+    },
+    footerStyle: {
+      type: Object,
+      default: () => ({}),
+    },
+    footerBorder: {
+      type: Boolean,
+      default: true,
+    },
+    // 是否显示footer阴影
+    footerShadow: {
+      type: Boolean,
+      default: false,
+    },
+    contentStyle: {
+      type: Object,
+      default: () => ({}),
+    },
+    customStyle: {
+      type: Object,
+      default: () => ({}),
+    },
+    loadingStyle: {
+      type: Object,
+      default: () => ({}),
+    },
+    backgroundStyle: {
+      type: Object,
+      default: () => ({}),
+    },
+    leftStyle: {
+      type: Object,
+      default: () => ({}),
+    },
+    rightStyle: {
+      type: Object,
+      default: () => ({}),
+    },
+    footerSafeArea: {
+      type: Boolean,
+      default: true,
+    },
+    animation: {
+      type: Boolean,
+      default: false,
+    },
+    completeText: {
+      type: String,
+      default: '刷新成功',
+    },
+    iconColor: {
+      type: String,
+      default: '#fff',
+    },
+    iconType: {
+      type: String,
+      default: '',
+    },
+    iconFont: {
+      type: String,
+      default: '',
+    },
+    iconSize: {
+      type: [String, Number],
+      default: 0,
+    },
+    homeIconSize: {
+      type: [String, Number],
+      default: 0,
+    },
+    iconName: {
+      type: String,
+      default: 'arrow-left',
+    },
+    homeIconName: {
+      type: String,
+      default: 'home-fill',
+    },
+    refreshMode: {
+      type: String,
+      default: 'none',
+    },
+  },
+  data() {
+    return {
+      trigger: this.triggered,
+      scroll_top: 0,
+      scrollTop: 0,
+      pulling: false,
+      headerRect: {
+        height: this.showHeader ? system.state.info.topBarTitleHeight : 0,
+      },
+    };
+  },
+  computed: {
+    systemInfo() {
+      return this.$store.state.system.info;
+    },
+    topBarTitleHeight() {
+      return this.systemInfo.topBarTitleHeight;
+    },
+    hasBg() {
+      if (this.showHeader) {
+        return this.scrollTop > 0 && !this.pulling && !this.trigger;
+      }
+      return false;
+    },
+    containerStyle() {
+      return Object.assign(
+        {
+          backgroundColor: this.bgColor,
+        },
+        this.backgroundStyle,
+        this.customStyle,
+      );
+    },
+    _titleStyle() {
+      return Object.assign(
+        {
+          fontSize: uni.$uv.addUnit(this.titleSize),
+          fontWeight: this.titleBold,
+        },
+        this.titleStyle,
+      );
+    },
+    _navbarStyle() {
+      return Object.assign(
+        {
+          height: `${this.systemInfo.titleHeight}px`,
+          color: this.titleColor,
+        },
+        this.navbarStyle,
+      );
+    },
+    _leftStyle() {
+      const style = {
+        left: '-12rpx',
+      };
+      if (this.showHome && this.showBack) {
+        return {
+          left: 0,
+        };
+      }
+      return Object.assign(style, this.leftStyle);
+    },
+    _loadingStyle() {
+      return Object.assign(
+        {
+          transform: `translateY(8rpx)`,
+        },
+        this.loadingStyle,
+      );
+    },
+    _headerStyle() {
+      return Object.assign(
+        this.hasNavbar
+          ? {}
+          : {
+              paddingTop: `${this.systemInfo.topStatusBarHeight}px`,
+            },
+        this.backgroundStyle,
+        this.headerStyle,
+      );
+    },
+    _contentStyle() {
+      let style = {};
+      if (this.hasBg) {
+        style.backgroundColor = this.bgColor;
+        style.backgroundPosition = `center -${this.headerRect.height || 0}px`;
+      } else {
+        style.backgroundImage = 'none';
+      }
+      return Object.assign({}, this.backgroundStyle, this.contentStyle, style);
+    },
+    _footerStyle() {
+      const footerStyle = Object.assign(
+        {
+          padding: '16rpx 32rpx',
+          backgroundColor: '#fff',
+        },
+        this.footerStyle,
+      );
+      if (this.footerShadow) {
+        footerStyle.boxShadow = '0rpx -4rpx 10rpx 0rpx rgba(0,0,0,0.05)';
+      }
+      if (this.footerSafeArea && !this.hasTabbar && this.systemInfo.safeAreaInsets.bottom > 0) {
+        footerStyle.paddingBottom = `${this.systemInfo.safeAreaInsets.bottom}px !important`;
+      }
+      return footerStyle;
+    },
+  },
+  watch: {
+    showHeader() {
+      this.$nextTick(() => {
+        this.getRect();
+      });
+    },
+    showNavbar() {
+      this.$nextTick(() => {
+        this.getRect();
+      });
+    },
+    showExtra() {
+      this.$nextTick(() => {
+        this.getRect();
+      });
+    },
+    topBarTitleHeight() {
+      this.$nextTick(() => {
+        this.getRect();
+      });
+    },
+    triggered(e) {
+      this.trigger = e;
+    },
+    loading(value) {
+      this.setLoading(value);
+    },
+  },
+  methods: {
+    setLoading(loading) {
+      if (loading) {
+        uni.showLoading({
+          title: typeof loading === 'string' ? loading : '',
+          mask: true,
+        });
+      } else if (!loading) {
+        uni.hideLoading();
+      }
+    },
+    refresh() {
+      this.$emit('refresh');
+    },
+    scroll(e) {
+      this.scrollTop = e.detail.scrollTop;
+      this.$emit('scroll', e);
+    },
+    scrolltop() {
+      this.$emit('scrolltop');
+    },
+    scrollbottom() {
+      this.$emit('scrollbottom');
+    },
+    scrollTo(e) {
+      // 强制更新
+      if (!this._top) {
+        this._top = 0.1;
+      } else {
+        this._top = 0;
+      }
+      this.scroll_top = e + this._top;
+    },
+    getRect() {
+      try {
+        const query = uni.createSelectorQuery().in(this);
+        query
+          .select(`#page_header`)
+          .boundingClientRect((data) => {
+            this.headerRect = data || {};
+          })
+          .exec();
+      } catch (e) {}
+    },
+  },
+  beforeMount() {
+    if (this.loading) {
+      this.setLoading(this.loading);
+    }
+  },
+  mounted() {
+    if (this.showHeader) {
+      this.getRect();
+    }
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.container,
+.content,
+.header {
+  background-repeat: no-repeat;
+  background-position: center top;
+  background-size: 100% auto;
+}
+.container {
+  height: calc(100vh - var(--window-top) - var(--window-bottom));
+  display: flex;
+  flex-direction: column;
+}
+.header {
+  padding: 0 32rpx;
+  & > view {
+    position: relative;
+    & > view {
+      &:first-child,
+      &:last-child {
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+      }
+      &:first-child {
+        left: 0;
+      }
+      &:last-child {
+        right: 0;
+      }
+    }
+  }
+}
+.content {
+  position: relative;
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+/* #ifdef H5 */
+// 修复ios下popup被遮挡问题
+.main ::v-deep > .scroll-view > .uni-scroll-view > .uni-scroll-view {
+  -webkit-overflow-scrolling: auto;
+}
+/* #endif */
+</style>

package/lib/components/g-permission-popup/g-permission-popup.vue

@@ -0,0 +1,80 @@
+<template>
+  <view v-if="visible" :style="[style]" class="popup">
+    <view class="font-bold text-32rpx"> 申请权限 </view>
+    <view class="mt-12rpx text-30rpx"> {{ content }} </view>
+  </view>
+</template>
+
+<script>
+export default {
+  props: {
+    customStyle: {
+      type: Object,
+      default: () => ({}),
+    },
+    hasNavbar: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return {
+      active: true,
+      visible: false,
+      content: '',
+    };
+  },
+  computed: {
+    style({ hasNavbar }) {
+      return Object.assign(
+        {
+          top: `calc(${hasNavbar ? '0px' : '44px + var(--status-bar-height)'} + 8px)`,
+        },
+        this.customStyle,
+      );
+    },
+  },
+  methods: {
+    requestPermission(e) {
+      if (this.active) {
+        if (e) {
+          this.visible = true;
+          Object.assign(this, e);
+        } else {
+          this.visible = false;
+        }
+      }
+    },
+  },
+  deactivated() {
+    this.active = false;
+  },
+  activated() {
+    this.active = true;
+  },
+  beforeMount() {
+    uni.$on('requestPermission', this.requestPermission);
+  },
+  beforeUnmount() {
+    uni.$off('requestPermission', this.requestPermission);
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.popup {
+  position: fixed;
+  top: 8px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 720rpx;
+  max-width: 96vw;
+  z-index: 999999;
+  background-color: #fff;
+  box-sizing: border-box;
+  box-shadow: 0rpx 8rpx 30rpx rgba(0, 0, 0, 0.06);
+  line-height: 40rpx;
+  padding: 30rpx;
+  border-radius: 20rpx;
+}
+</style>