@zfqh/uniapp 0.1.1

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

@@ -0,0 +1,449 @@
+<template>
+  <uv-popup
+    ref="popup"
+    :mode="opts.mode"
+    :duration="opts.duration"
+    :overlay="opts.overlay"
+    :overlayStyle="opts.overlayStyle"
+    :overlayOpacity="opts.overlayOpacity"
+    :closeOnClickOverlay="opts.closeOnClickOverlay"
+    :zIndex="opts.zIndex"
+    :closeable="opts.closeable"
+    :closeIconPos="opts.closeIconPos"
+    :bgColor="opts.bgColor"
+    :round="opts.round"
+    :zoom="opts.zoom"
+    :safeAreaInsetBottom="opts.safeAreaInsetBottom && opts.mode === 'bottom'"
+    @close="close"
+    @change="change"
+  >
+    <view :style="[_customStyle]">
+      <slot v-if="opts.showHeader" name="header">
+        <view
+          class="flex"
+          :class="[{ 'border-b': opts.headerBorder }, { 'justify-start': opts.titleAlign === 'left', 'justify-end': opts.titleAlign === 'right', 'justify-center': opts.titleAlign === 'center', 'justify-between': opts.titleAlign === 'between', 'justify-around': opts.titleAlign === 'around' }]"
+          :style="[_headerStyle]"
+        >
+          <text v-if="opts.showTitle" :class="{ 'font-bold': opts.titleBold }" :style="[_titleStyle]">
+            {{ opts.title }}
+          </text>
+        </view>
+      </slot>
+      <slot v-if="opts.showContent" name="content">
+        <scroll-view scroll-y :style="[_scrollStyle]">
+          <view class="flex justify-center break-all" :class="[{ 'text-left': opts.align === 'left', 'text-right': opts.align === 'right', 'text-center': opts.align === 'center' }]" :style="[_contentStyle]">
+            <slot name="default">
+              <rich-text :nodes="opts.content" />
+            </slot>
+          </view>
+        </scroll-view>
+      </slot>
+      <slot v-if="opts.showFooter" name="footer">
+        <view
+          v-if="opts.showConfirm || opts.showCancel"
+          class="flex justify-center footer"
+          :class="{ 'border-t': opts.footerBorder }"
+          :style="[_footerStyle]"
+        >
+          <uv-button
+            v-if="opts.showCancel"
+            :type="_cancelProps.type || 'primary'"
+            :size="_cancelProps.size || opts.size"
+            :shape="_cancelProps.shape || 'square'"
+            :plain="_cancelProps.plain || true"
+            :hairline="_cancelProps.hairline || false"
+            :disabled="_cancelProps.disabled || false"
+            :customStyle="_cancelProps.customStyle"
+            @click="cancel"
+          >
+            {{ opts.cancelText }}
+          </uv-button>
+          <view v-if="opts.showConfirm && opts.showCancel" :style="[style.gap]" />
+          <uv-button
+            v-if="opts.showConfirm"
+            :type="_confirmProps.type || 'primary'"
+            :size="_confirmProps.size || opts.size"
+            :shape="_cancelProps.shape || 'square'"
+            :plain="_cancelProps.plain || false"
+            :hairline="_confirmProps.hairline || false"
+            :disabled="_confirmProps.disabled || false"
+            :loading="_confirmProps.loading || false"
+            :loadingMode="_confirmProps.loadingMode || 'spinner'"
+            :customStyle="_confirmProps.customStyle"
+            @click="confirm"
+          >
+            {{ opts.confirmText }}
+          </uv-button>
+        </view>
+      </slot>
+    </view>
+  </uv-popup>
+</template>
+
+<script>
+import model from '../../mixins/model';
+import deep from '../../mixins/deep';
+
+export default {
+  mixins: [
+    deep,
+    model({
+      type: Boolean,
+      default: false,
+    }),
+  ],
+  props: {
+    size: {
+      type: String,
+      default: 'normal',
+    },
+    content: {
+      type: String,
+      default: '',
+    },
+    showHeader: {
+      type: Boolean,
+      default: true,
+    },
+    showTitle: {
+      type: Boolean,
+      default: true,
+    },
+    showContent: {
+      type: Boolean,
+      default: true,
+    },
+    showFooter: {
+      type: Boolean,
+      default: true,
+    },
+    showCancel: {
+      type: Boolean,
+      default: true,
+    },
+    showConfirm: {
+      type: Boolean,
+      default: true,
+    },
+    title: {
+      type: String,
+      default: '提示',
+    },
+    titleAlign: {
+      type: String,
+      default: 'center',
+    },
+    titleBorder: {
+      type: Boolean,
+      default: false,
+    },
+    titleBold: {
+      type: Boolean,
+      default: true,
+    },
+    align: {
+      type: String,
+      default: 'left',
+    },
+    width: {
+      type: [String, Number],
+      default: 325,
+    },
+    duration: {
+      type: [String, Number],
+      default: 300,
+    },
+    round: {
+      type: [Number, String],
+      default: 8,
+    },
+    zoom: {
+      type: Boolean,
+      default: true,
+    },
+    bgColor: {
+      type: String,
+      default: '#fff',
+    },
+    closeOnClickOverlay: {
+      type: Boolean,
+      default: true,
+    },
+    overlayOpacity: {
+      type: [Number, String],
+      default: 0.5,
+    },
+    overlay: {
+      type: Boolean,
+      default: true,
+    },
+    closeIconPos: {
+      type: String,
+      default: 'top-right',
+    },
+    zIndex: {
+      type: [Number, String],
+      default: 10075,
+    },
+    mode: {
+      type: String,
+      default: 'center',
+    },
+    cancelText: {
+      type: [String, Boolean],
+      default: '取 消',
+    },
+    confirmText: {
+      type: [String, Boolean],
+      default: '确 定',
+    },
+    closeable: {
+      type: Boolean,
+      default: true,
+    },
+    safeAreaInsetBottom: {
+      type: Boolean,
+      default: true,
+    },
+    headerBorder: {
+      type: Boolean,
+      default: false,
+    },
+    footerBorder: {
+      type: Boolean,
+      default: false,
+    },
+    closeOnConfirm: {
+      type: Boolean,
+      default: true,
+    },
+    closeOnCancel: {
+      type: Boolean,
+      default: true,
+    },
+    cancelProps: {
+      type: Object,
+      default: () => ({}),
+    },
+    confirmProps: {
+      type: Object,
+      default: () => ({}),
+    },
+    buttonProps: {
+      type: Object,
+      default: () => ({}),
+    },
+    headerStyle: {
+      type: Object,
+      default: () => ({}),
+    },
+    titleStyle: {
+      type: Object,
+      default: () => ({}),
+    },
+    footerStyle: {
+      type: Object,
+      default: () => ({}),
+    },
+    scrollStyle: {
+      type: Object,
+      default: () => ({}),
+    },
+    contentStyle: {
+      type: Object,
+      default: () => ({}),
+    },
+    customStyle: {
+      type: Object,
+      default: () => ({}),
+    },
+    overlayStyle: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  data() {
+    return {
+      opts: {},
+      visible: false,
+      resolve: null,
+      reject: null,
+    };
+  },
+  computed: {
+    style({ opts }) {
+      if (opts.size === 'mini') {
+        const size = '24rpx';
+        return {
+          title: {
+            fontSize: size,
+          },
+          header: {
+            padding: size,
+          },
+          content: {
+            padding: size,
+            fontSize: '24rpx',
+            lineHeight: '30rpx',
+          },
+          footer: {
+            padding: size,
+          },
+          gap: {
+            width: '18rpx',
+          },
+        };
+      } else if (opts.size === 'large') {
+        const size = '36rpx';
+        return {
+          title: {
+            fontSize: size,
+          },
+          header: {
+            padding: size,
+          },
+          content: {
+            padding: size,
+            fontSize: '32rpx',
+            lineHeight: '48rpx',
+          },
+          footer: {
+            padding: size,
+          },
+          gap: {
+            width: '32rpx',
+          },
+        };
+      } else {
+        const size = '32rpx';
+        return {
+          title: {
+            fontSize: size,
+          },
+          header: {
+            padding: size,
+          },
+          content: {
+            padding: size,
+            fontSize: '28rpx',
+            lineHeight: '40rpx',
+          },
+          footer: {
+            padding: size,
+          },
+          gap: {
+            width: '24rpx',
+          },
+        };
+      }
+    },
+    options() {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      const { value, modelValue, ...options } = this.$props;
+      return options;
+    },
+    _headerStyle({ opts, style }) {
+      return Object.assign(style.header, opts.headerStyle);
+    },
+    _titleStyle({ opts, style }) {
+      return Object.assign(style.title, opts.titleStyle);
+    },
+    _footerStyle({ opts, style }) {
+      return Object.assign(style.footer, opts.footerStyle);
+    },
+    _contentStyle({ opts, style }) {
+      return Object.assign(style.content, opts.contentStyle);
+    },
+    _scrollStyle({ opts }) {
+      return Object.assign(
+        {
+          maxHeight: '60vh',
+        },
+        opts.scrollStyle,
+      );
+    },
+    _cancelProps({ opts }) {
+      return Object.assign({}, opts.buttonProps, opts.cancelProps, {
+        customStyle: Object.assign({}, opts.buttonProps.customStyle, opts.cancelProps.customStyle),
+      });
+    },
+    _confirmProps({ opts }) {
+      return Object.assign({}, opts.buttonProps, opts.confirmProps, {
+        customStyle: Object.assign({}, opts.buttonProps.customStyle, opts.confirmProps.customStyle),
+      });
+    },
+    _customStyle({ opts }) {
+      const style = {};
+      if (opts.mode === 'center') {
+        style.width = uni.$uv.addUnit(opts.width);
+      }
+      return Object.assign(style, opts.customStyle);
+    },
+  },
+  watch: {
+    options: {
+      immediate: true,
+      handler(e) {
+        this.opts = e;
+      },
+    },
+    value(e) {
+      this.visible = e;
+    },
+    visible(e) {
+      this.updateModel(e);
+      if (this.$refs.popup) {
+        this.$refs.popup[e ? 'open' : 'close']();
+      }
+    },
+  },
+  methods: {
+    change(e) {
+      this.$emit(e.show ? 'open' : 'close');
+      this.$emit('change', e);
+    },
+    close() {
+      this.visible = false;
+      this.resolve && this.resolve({ close: true });
+      this.resolve = null;
+    },
+    open(opts = {}) {
+      this.opts = Object.assign({}, this.options, opts);
+      return new Promise((res, rej) => {
+        this.resolve = res;
+        this.reject = rej;
+        this.visible = true;
+      });
+    },
+    cancel() {
+      if (this.closeOnCancel) {
+        this.visible = false;
+      }
+      this.$emit('cancel');
+      this.resolve && this.resolve({ cancel: true });
+      this.resolve = null;
+    },
+    confirm() {
+      if (this.closeOnConfirm) {
+        this.visible = false;
+      }
+      this.$emit('confirm');
+      this.resolve && this.resolve({ confirm: true });
+      this.resolve = null;
+    },
+  },
+  mounted() {
+    if (this.value) {
+      this.visible = true;
+    }
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.footer {
+  ::v-deep .uv-button-wrapper {
+    flex: 1;
+  }
+}
+</style>

package/lib/components/g-refresh-view/g-refresh-view.vue

@@ -0,0 +1,213 @@
+<template>
+  <scroll-view
+    class="scroll-view"
+    :refresher-default-style="mode"
+    :refresher-enabled="enabled"
+    :scroll-with-animation="animation"
+    :refresher-triggered="refreshing"
+    :scroll-y="true"
+    :refresher-threshold="threshold"
+    :style="[{ height }]"
+    :scroll-top="scrollTop"
+    :refresher-background="refresherBackground"
+    @refresherrefresh="refresherrefresh"
+    @refresherpulling="refresherpulling"
+    @scroll="scroll"
+    @scrolltoupper="scrolltoupper"
+    @scrolltolower="scrolltolower"
+    @refresherrestore="refresherrestore"
+    @refresherabort="refresherabort"
+  >
+    <slot v-if="mode === 'none' && enabled" name="refresher">
+      <view class="w-full flex flex-col justify-center text-tips" :style="[_loadingStyle]">
+        <slot v-if="completed" name="completeText" :text="completeText">
+          <text> {{ completeText }} </text>
+        </slot>
+        <slot v-else name="spinner">
+          <view class="spinner">
+            <text class="bounce1" :style="[spinnerStyle]"></text>
+            <text class="bounce2" :style="[spinnerStyle]"></text>
+            <text class="bounce3" :style="[spinnerStyle]"></text>
+          </view>
+        </slot>
+      </view>
+    </slot>
+    <slot name="default"></slot>
+  </scroll-view>
+</template>
+
+<script>
+export default {
+  props: {
+    enabled: {
+      type: Boolean,
+      default: true,
+    },
+    triggered: {
+      type: Boolean,
+      default: false,
+    },
+    completeText: {
+      type: String,
+      default: '刷新成功',
+    },
+    loadingStyle: {
+      type: Object,
+      default: () => ({}),
+    },
+    mode: {
+      type: String,
+      default: 'none',
+    },
+    height: {
+      type: String,
+      default: '100%',
+    },
+    scrollTop: {
+      type: Number,
+      default: 0,
+    },
+    threshold: {
+      type: Number,
+      default: 40,
+    },
+    background: {
+      type: String,
+      default: 'transparent',
+    },
+    spinnerColor: {
+      type: String,
+      default: '',
+    },
+    animation: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      refreshing: false,
+      completed: false,
+      pulling: false,
+      opacity: 0,
+    };
+  },
+  computed: {
+    spinnerStyle() {
+      if (this.spinnerColor) {
+        return {
+          backgroundColor: this.spinnerColor,
+        };
+      }
+      return {};
+    },
+    _loadingStyle() {
+      return Object.assign(
+        {
+          opacity: this.opacity,
+          height: `${this.threshold}px`,
+          marginTop: `-${this.threshold}px`,
+          fontSize: '13px',
+        },
+        this.loadingStyle,
+      );
+    },
+    refresherBackground() {
+      let background = this.background;
+      // #ifdef H5
+      background = `${background} !important`;
+      // #endif
+      return background;
+    },
+  },
+  watch: {
+    triggered(e) {
+      if (e) {
+        this.refreshing = true;
+        this.pulling = true;
+        this.completed = false;
+      } else {
+        this.completed = true;
+        setTimeout(() => {
+          this.refreshing = false;
+        }, 1000);
+      }
+    },
+    pulling(e) {
+      if (e) {
+        this.opacity = 1;
+      } else {
+        setTimeout(() => {
+          this.opacity = 0;
+        }, 300);
+      }
+    },
+  },
+  methods: {
+    refresherpulling(e) {
+      this.pulling = true;
+      this.completed = false;
+      this.$emit('pulling', e);
+    },
+    refresherrefresh(e) {
+      this.$emit('refresh', e);
+    },
+    refresherrestore(e) {
+      this.pulling = false;
+      this.$emit('restore', e);
+    },
+    refresherabort(e) {
+      this.pulling = false;
+      this.$emit('abort', e);
+    },
+    scroll(e) {
+      this.$emit('scroll', e);
+    },
+    scrolltoupper() {
+      this.$emit('scrolltop');
+    },
+    scrolltolower() {
+      this.$emit('scrollbottom');
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.spinner {
+  display: flex;
+  & > text {
+    width: 12rpx;
+    height: 12rpx;
+    margin: 0 8rpx;
+    background-color: $uv-primary;
+    border-radius: 100%;
+    -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
+    animation: bouncedelay 1.4s infinite ease-in-out;
+    -webkit-animation-fill-mode: both;
+    animation-fill-mode: both;
+  }
+  & > .bounce1 {
+    -webkit-animation-delay: -0.32s;
+    animation-delay: -0.32s;
+  }
+
+  & > .bounce2 {
+    -webkit-animation-delay: -0.16s;
+    animation-delay: -0.16s;
+  }
+}
+
+@keyframes bouncedelay {
+  0%,
+  80%,
+  100% {
+    transform: scale(0);
+    -webkit-transform: scale(0);
+  }
+  40% {
+    transform: scale(1);
+    -webkit-transform: scale(1);
+  }
+}
+</style>