@zfqh/uniapp 0.1.1

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

@@ -0,0 +1,157 @@
+<template>
+  <view class="flex flex-col pt-20rpx pl-20rpx pr-20rpx" :style="[customStyle]">
+    <view v-if="title" class="w-full pl-20rpx">
+      <text class="font-bold" :style="[titleStyle]"> {{ title }} </text>
+    </view>
+    <view class="w-full flex flex-wrap">
+      <template v-for="item in buttons" :key="item.type">
+        <g-share-weixin
+          v-if="hasWeixin && item.type === 'weixin'"
+          :text="item.text"
+          :custom="item.custom"
+          :customStyle="itemStyle"
+          :data="item.data"
+          @confirm="click(item)"
+        />
+        <g-share-photo
+          v-else-if="hasPhoto && item.type === 'photo'"
+          :text="item.text"
+          :custom="item.custom"
+          :customStyle="itemStyle"
+          @confirm="click(item)"
+        />
+      </template>
+    </view>
+  </view>
+  <!-- #ifndef APP -->
+  <g-mask v-if="hasWeixin" :show="show" @click="show = false">
+    <view class="share-guide" :style="[guideStyle]">
+      <image :src="arrow" style="width: auto; height: 160rpx" mode="heightFix" />
+      <view class="pr-80rpx"> {{ shareTips }} </view>
+    </view>
+  </g-mask>
+  <!-- #endif -->
+  <g-render-image v-if="hasPhoto" :domId="domId" :successTips="successTips" :saveTips="saveTips"  ref="render" />
+</template>
+
+<script>
+import { WEBVIEW_ENV } from '../../utils/consts';
+
+export default {
+  props: {
+    domId: {
+      type: String,
+      default: '',
+    },
+    title: {
+      type: [String, Boolean],
+      default: '分享至：',
+    },
+    successTips: {
+      type: String,
+      default: '已保存到相册',
+    },
+    saveTips: {
+      type: String,
+      default: '长按图片保存到相册',
+    },
+    shareTips: {
+      type: String,
+      default: '点击分享至微信',
+    },
+    titleSize: {
+      type: [String, Number],
+      default: 14,
+    },
+    titleColor: {
+      type: String,
+      default: '',
+    },
+    gutter: {
+      type: [String, Number],
+      default: 20,
+    },
+    customStyle: {
+      type: Object,
+      default: () => ({}),
+    },
+    buttons: {
+      type: Array,
+      default: () => [
+        {
+          type: 'photo',
+        },
+        {
+          type: 'weixin',
+        },
+      ],
+    },
+  },
+  data() {
+    return {
+      arrow:
+        'data:image/png;base64,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',
+      show: false,
+    };
+  },
+  computed: {
+    hasPhoto({ buttons }) {
+      return buttons.find(({ type }) => type === 'photo') != null;
+    },
+    hasWeixin({ buttons }) {
+      // #ifdef H5
+      if (window.electron) {
+        return false;
+      }
+      // #endif
+      return buttons.find(({ type }) => ['weixin', 'timeline'].includes(type)) != null;
+    },
+    guideStyle() {
+      if (WEBVIEW_ENV.mp) {
+        return {
+          top: '80rpx',
+          right: '180rpx',
+        };
+      }
+      return {};
+    },
+    titleStyle({ titleColor, titleSize }) {
+      return {
+        color: titleColor,
+        fontSize: uni.$uv.addUnit(titleSize),
+      };
+    },
+    itemStyle({ gutter }) {
+      return {
+        padding: `${uni.$uv.addUnit(gutter)}`,
+      };
+    },
+  },
+  methods: {
+    click(data) {
+      // #ifndef APP
+      if (!WEBVIEW_ENV.app && ['weixin', 'timeline'].includes(data.type)) {
+        this.show = true;
+        setTimeout(() => {
+          this.show = false;
+        }, 1500);
+      }
+      // #endif
+      if (data.type === 'photo') {
+        this.$refs.render.download();
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.share-guide {
+  text-align: right;
+  position: fixed;
+  top: 80rpx;
+  right: 80rpx;
+  color: #fff;
+  z-index: 19920604;
+}
+</style>

package/lib/components/g-share-weixin/g-share-weixin.vue

@@ -0,0 +1,106 @@
+<template>
+  <view class="flex justify-center flex-col" :style="[customStyle]" @tap.stop="$uv.throttle(click)">
+    <image :src="url" :style="[style]" mode="heightFix" />
+    <text v-if="text" :style="[textStyle]"> {{ text }} </text>
+  </view>
+</template>
+
+<script>
+import { WEBVIEW_ENV } from '../../utils/consts';
+import { TYPES } from '../../utils/message';
+import toast from '../../utils/toast';
+import { postMessage } from '../../utils';
+
+export default {
+  props: {
+    size: {
+      type: [Number, String],
+      default: 40,
+    },
+    url: {
+      type: String,
+      default:
+        'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAATlBMVEVHcEz19fX39/f39/f29vb39/f29vb29vb39/f39/f39/f29vb39/f39/f6+Pr29vbk8uTQ7dC66LqZ4Jhv1W5OzU0wxS4YvxYIuwYFugSG7RHKAAAADnRSTlMAECM5WG2NpLbI2+rx+KBF4WsAAAO2SURBVHjaxZnrcoMgEIWNGg0i95u8/4sWUMPUJV5qZnp+WWfy9eyyuyJWu3rUTdv1aMAjGfEwoL5rm/pRnRSktd0rstgiwsaAfXVtYl6n9QHGCgrQHjAPcU+ESWZAJnpeQQYc8AaYAXnWXsYdIU+ZbHrMTgr3zQl7A2GnRYYjk3WH2SXhrt7lvQi7KPLaCbtBhF0WQc1nHvuTUHOXB4l3eTDqm+sBV6YG9dcRdkOk29bjE7Nbws9NAgd2T2RofgXcE3aX2D9OBExXXQy6RkVa5PAkxk4wUZ0nzFjCMS6U0sYYrZXk/JA5Ph87BgNOaevcFOWcs1pydkAc6mwQ2OPKuMkHTT4pUI3ilJ6xWCPIE9pFSlb8y2lBz2SxxSBcaaeMy8zJyN2wcVusQUqljTifPb6Dt5LSo1qsQZOIhefc5BfeNF/7yQq6vywwYsrN8luttPMzzyi13DWc7sUMxwxlKlG8U5yJlSKi7+U2o7tDp0bAoE+/tJxGeAJqRpf7Pt7fW2c4Z2RgbB1aGe5bH3RgcWi2c4HyNW/eaWXWHFqtbVwla4wJwKCPE6Ib4ZKsZZdX2YdLZ5QMUkqKj509dlVPSsCkX3XojBQytXf0qVUZSfqqvCarMk8JaWIxzvrY2agaTgGtFHqmJXyUK/bhUJXKeouLPDNth4W3ChJxNTJQ1wDolFi7+41LeYDEsSIM1uGGN2lhEmGKUa+L7pPzLZAEh0dJ9FYsDWN0TORcli4RQWeTmENo0W8MWj+DWSp77yTj6X/AoMd1lWGv5AxK5RYgZSoBBZ0zAy3iDRAutA8cnf6Ovais9/M0s9M6QjZlgxgk5hpJJqT17zHrfb4oAdHSevAZlVP4Bi6FnS/gMCN9Hg6FPPoMLAo6HLs8vkB5rzLS+DIROsTPPGBBMTprnQuhW6knf9Lh0JQ3SlS6yWrBpVJaawG7MdfobyCq54cUTGHErdsvmjq5HLGgYGfc4gJQyWXa0ShetggbBbf5QQ+goL+PA2ZDfXI7TIXxAJke+nArAmIuSxg3EzPOJX8gYridK4tvHgHQHyOozhvOQ1EutZ2ZsZVdGjRww3nBYtpza2ODjI57Jycp3G8eWIT7eC6E4JzHFFjFKDAILB4hV8WscmDw3psepfDF5/uvZvdfHvOc+frr7fdfwL9/RAAPMf79WATy4MHSd4+W/pTH3cOv13gVNwLeV4/7oB4tIlfS14L6A8TbR6b3D3W/f+x8/2CcpIPxfzu6hx8XsrM/f1yAnz8C69Tnjx/J3knKZLi2SwAAAABJRU5ErkJggg==',
+    },
+    text: {
+      type: String,
+      default: '微信好友',
+    },
+    fontSize: {
+      type: [Number, String],
+      default: 13,
+    },
+    color: {
+      type: String,
+      default: '',
+    },
+    data: {
+      type: Object,
+      default: () => ({}),
+    },
+    space: {
+      type: [Number, String],
+      default: 4,
+    },
+    custom: {
+      type: Function,
+      default: null,
+    },
+    customStyle: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  computed: {
+    style({ size }) {
+      const value = uni.$uv.addUnit(size);
+      return {
+        width: value,
+        height: value,
+      };
+    },
+    textStyle({ fontSize, color, space }) {
+      return {
+        fontSize: uni.$uv.addUnit(fontSize),
+        marginTop: uni.$uv.addUnit(space),
+        color,
+      };
+    },
+  },
+  methods: {
+    click() {
+      if (typeof this.custom === 'function') {
+        this.custom(this.data);
+      } else {
+        const options = {
+          ...this.data,
+          provider: 'weixin',
+          scene: 'WXSceneSession',
+        };
+        // #ifdef APP-PLUS
+        uni.share({
+          ...options,
+          fail: (res) => {
+            const { errCode } = res;
+            if (errCode === -100) {
+              toast.error('微信未安装');
+            } else {
+              toast.error('分享失败');
+            }
+          },
+        });
+        // #endif
+        // #ifdef H5
+        if (WEBVIEW_ENV.app) {
+          postMessage({
+            type: TYPES.SHARE_PAGE,
+            payload: options,
+          });
+        }
+        // #endif
+        this.$emit('confirm');
+      }
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,55 @@
+<template>
+  <view class="skeleton" :style="[style]">
+    <scroll-view scroll-y class="skeleton-scroll">
+      <slot name="default"></slot>
+    </scroll-view>
+  </view>
+</template>
+
+<script>
+import color from '../../configs/color';
+
+export default {
+  props: {
+    customStyle: {
+      type: Object,
+      default: () => ({}),
+    },
+    height: {
+      type: String,
+      default: 'auto',
+    },
+    bgColor: {
+      type: String,
+      default: () => color.bgColor,
+    },
+  },
+  computed: {
+    style() {
+      return Object.assign(
+        {
+          height: this.height,
+          backgroundColor: this.bgColor,
+        },
+        this.customStyle,
+      );
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.skeleton {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 999;
+  overflow: hidden;
+  &-scroll {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>

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

@@ -0,0 +1,78 @@
+<template>
+  <view class="skeletonView" :style="[style]">
+    <slot name="default"></slot>
+  </view>
+</template>
+
+<script>
+export default {
+  props: {
+    customStyle: {
+      type: Object,
+      default: () => ({}),
+    },
+    borderRadius: {
+      type: [String, Number],
+      default: 0,
+    },
+    bgColor: {
+      type: String,
+      default: '#e5e5e5',
+    },
+    width: {
+      type: [String, Number],
+      default: 'auto',
+    },
+    height: {
+      type: [String, Number],
+      default: 20,
+    },
+    marginTop: {
+      type: [String, Number],
+      default: 0,
+    },
+    marginLeft: {
+      type: [String, Number],
+      default: 0,
+    },
+    marginRight: {
+      type: [String, Number],
+      default: 0,
+    },
+  },
+  computed: {
+    style() {
+      return {
+        borderRadius: uni.$uv.addUnit(this.borderRadius),
+        backgroundColor: this.bgColor,
+        width: uni.$uv.addUnit(this.width),
+        height: uni.$uv.addUnit(this.height),
+        marginTop: uni.$uv.addUnit(this.marginTop),
+        marginLeft: uni.$uv.addUnit(this.marginLeft),
+        marginRight: uni.$uv.addUnit(this.marginRight),
+        ...this.customStyle,
+      };
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.skeletonView {
+  animation-duration: 1.5s;
+  animation-name: animate-fade;
+  animation-timing-function: ease-in-out;
+  animation-iteration-count: infinite;
+}
+@keyframes animate-fade {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+</style>