@zfqh/uniapp 0.1.1

package/lib/components/g-render-image/g-render-image.vue

@@ -0,0 +1,222 @@
+<template>
+  <view class="render-image">
+    <view :prop="domId" :change:prop="renderImage.watchDomId">
+      <slot name="default"></slot>
+      <text :prop="count" :change:prop="renderImage.watchCount"></text>
+    </view>
+    <!-- #ifdef H5 -->
+    <uv-overlay :show="show" @click="show = false">
+      <view class="flex flex-col justify-center items-center h-full">
+        <view :style="[contentStyle]" class="overflow-hidden">
+          <image
+            v-if="path"
+            :src="path"
+            :style="[imageStyle]"
+            style="width: 80vw; max-height: 85vh"
+            show-menu-by-longpress
+            mode="widthFix"
+            @tap.stop
+          />
+        </view>
+        <text class="text-28rpx text-white mt-20rpx"> {{ saveTips }} </text>
+        <view style="transform: translateY(30rpx)">
+          <uv-icon name="close-circle" color="#fff" size="48rpx" @click.stop="show = false" />
+        </view>
+      </view>
+    </uv-overlay>
+    <!-- #endif -->
+  </view>
+</template>
+
+<script>
+import toast from '../../utils/toast';
+import { base64ToPath } from '../../utils/file';
+import { WEBVIEW_ENV } from '../../utils/consts';
+import { postMessage, requestDelay } from '../../utils';
+import { requestPermission } from '../../utils/permit';
+import { TYPES } from '../../utils/message';
+
+export default {
+  props: {
+    domId: {
+      type: String,
+      default: '',
+    },
+    name: {
+      type: String,
+      default: '',
+    },
+    successTips: {
+      type: String,
+      default: '已保存到相册',
+    },
+    saveTips: {
+      type: String,
+      default: '长按图片保存到相册',
+    },
+    contentStyle: {
+      type: Object,
+      default: () => ({}),
+    },
+    imageStyle: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  data() {
+    return {
+      path: '',
+      count: 0,
+      // #ifdef H5
+      show: false,
+      // #endif
+      // #ifndef H5
+      resolve: null,
+      reject: null,
+      // #endif
+    };
+  },
+  // #ifdef H5
+  watch: {
+    domId: {
+      immediate: true,
+      handler(...args) {
+        this.watchDomId(...args);
+      },
+    },
+  },
+  // #endif
+  methods: {
+    // #ifndef H5
+    setResolve(e) {
+      this.resolve(e);
+    },
+    setReject(e) {
+      this.reject(new Error(e));
+    },
+    // #endif
+    async getBase64() {
+      let base64 = '';
+      // #ifdef H5
+      base64 = await this.renderImage();
+      // #endif
+      // #ifndef H5
+      this.count++;
+      base64 = await new Promise((resolve, reject) => {
+        this.resolve = resolve;
+        this.reject = reject;
+      });
+      // #endif
+      return base64;
+    },
+    async download() {
+      try {
+        uni.showLoading({ mask: true });
+        await requestDelay(() => Promise.resolve());
+        const base64 = await this.getBase64();
+        let path = '';
+
+        if (WEBVIEW_ENV.mp || WEBVIEW_ENV.app) {
+          path = base64;
+        } else {
+          path = await base64ToPath(base64);
+        }
+
+        this.path = path;
+
+        if (WEBVIEW_ENV.mp) {
+          this.show = true;
+        } else if (WEBVIEW_ENV.app) {
+          postMessage({
+            type: TYPES.SAVE_IMAGE,
+            payload: {
+              data: path,
+            },
+          });
+          // 延迟1秒等待app保存图片
+          await requestDelay(() => Promise.resolve(), 1000);
+        } else {
+          // #ifdef H5
+          const node = document.createElement('a');
+          node.href = path;
+          node.download = `${this.name || uni.$uv.timeFormat(Date.now(), 'yyyymmddhhMMss')}.png`;
+          node.click();
+          // #endif
+          // #ifndef H5
+          await requestPermission('storage');
+          uni.saveImageToPhotosAlbum({
+            filePath: path,
+            success() {
+              uni.showToast({
+                title: this.successTips,
+                position: 'bottom',
+              });
+            },
+          });
+          // #endif
+        }
+      } catch (e) {
+        toast.message(e.message);
+      } finally {
+        uni.hideLoading();
+      }
+    },
+  },
+};
+</script>
+
+<script module="renderImage" lang="renderjs">
+import html2canvas from 'html2canvas';
+
+export default {
+  data() {
+    return {
+      renderDomId: '',
+    };
+  },
+  methods: {
+    async renderImage() {
+			try {
+        const el = document.getElementById(this.renderDomId);
+        if(!el) {
+          throw new Error('DOM未加载成功，请检查domId是否有误！');
+        }
+        const canvas = await html2canvas(el, {
+          width: el.offsetWidth,
+          height: el.offsetHeight,
+          x: 0,
+          y: 0,
+          useCORS: true,
+          scale: 2,
+        });
+        const base64 = canvas.toDataURL('image/png', 1.0);
+        // #ifndef H5
+        this.$ownerInstance.callMethod('setResolve', base64);
+        // #endif
+        // #ifdef H5
+        return base64;
+        // #endif
+      } catch(e) {
+        // #ifdef H5
+        throw e;
+        // #endif
+        // #ifndef H5
+        this.$ownerInstance.callMethod('setReject', e.message);
+        // #endif
+      }
+    },
+    watchDomId(newValue) {
+      this.renderDomId = newValue;
+    },
+    // #ifndef H5
+    watchCount(newValue) {
+      if(newValue !== 0) {
+        this.renderImage();
+      }
+    },
+    // #endif
+  }
+}
+</script>
+
+<style lang="scss" scoped></style>

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

@@ -0,0 +1,274 @@
+<template>
+  <view class="search-input flex" @tap="click()" :style="[style]" :class="[shape]">
+    <slot name="icon">
+      <uv-icon name="search" size="20" class="text-tips" />
+    </slot>
+    <swiper
+      v-if="keywords"
+      class="flex-1 h-full"
+      :current="current"
+      autoplay
+      vertical
+      circular
+      disable-touch
+      @change="change"
+    >
+      <swiper-item v-for="(keyword, index) in data" :key="index">
+        <text class="ml-16rpx flex h-full" :style="[_inputStyle, _placeholderStyle]"> {{ keyword }} </text>
+      </swiper-item>
+    </swiper>
+    <view v-else class="flex-1 ml-16rpx h-full relative">
+      <input
+        v-model.trim="keyword"
+        :placeholder="placeholder"
+        @tap.stop
+        :placeholder-style="inputPlaceholderStyle"
+        :placeholder-class="placeholderClass"
+        class="h-full search-input-text"
+        :style="[_inputStyle]"
+        :auto-focus="autoFocus"
+        confirm-type="search"
+        :maxlength="maxlength"
+        @confirm="search()"
+        @input="input()"
+      />
+      <view v-if="clearable" class="search-input-clear" @tap.stop="clear" :style="[closeStyle]">
+        <uv-icon v-if="keyword" name="close-circle-fill" class="flex text-tips" :size="clearSize" />
+      </view>
+    </view>
+    <view v-if="showButton" @tap.stop="search()">
+      <slot name="button">
+        <view class="flex" :style="[buttonStyle]">
+          <uv-line direction="col" :color="lineColor" length="26" margin="0 16rpx" />
+          <text class="text-26rpx"> 搜索 </text>
+        </view>
+      </slot>
+    </view>
+  </view>
+</template>
+
+<script>
+import color from '../../configs/color';
+import model from '../../mixins/model';
+
+export default {
+  mixins: [
+    model({
+      type: String,
+      default: '',
+    }),
+  ],
+  props: {
+    placeholder: String,
+    height: {
+      type: [String, Number],
+      default: 35,
+    },
+    customStyle: {
+      type: Object,
+      default: () => ({}),
+    },
+    inputStyle: {
+      type: Object,
+      default: () => ({}),
+    },
+    buttonStyle: {
+      type: Object,
+      default: () => ({}),
+    },
+    showButton: {
+      type: Boolean,
+      default: false,
+    },
+    fontSize: {
+      type: [String, Number],
+      default: 14,
+    },
+    bgColor: {
+      type: String,
+      default: '#fff',
+    },
+    lineColor: {
+      type: String,
+      default: '#ECEDF0',
+    },
+    borderColor: {
+      type: String,
+      default: () => color.primary,
+    },
+    placeholderStyle: {
+      type: Object,
+      default: () => ({}),
+    },
+    placeholderClass: {
+      type: String,
+      default: '',
+    },
+    border: {
+      type: [Boolean, Number],
+      default: true,
+    },
+    maxlength: {
+      type: [String, Number],
+      default: 100,
+    },
+    borderRadius: {
+      type: [String, Number],
+      default: 4,
+    },
+    clearSize: {
+      type: [String, Number],
+      default: 15,
+    },
+    shape: {
+      type: String,
+      default: 'square',
+    },
+    keywords: {
+      type: [Boolean, Array],
+      default: () => false,
+    },
+    params: {
+      type: Object,
+      default: () => ({}),
+    },
+    autoFocus: Boolean,
+    clearable: Boolean,
+  },
+  data() {
+    let keyword = '';
+    let data = [];
+    if (Array.isArray(this.keywords)) {
+      keyword = this.keywords[0] || '';
+      data = [...this.keywords];
+    } else {
+      // #ifdef VUE2
+      keyword = this.value;
+      // #endif
+      // #ifdef VUE3
+      keyword = this.modelValue;
+      // #endif
+    }
+    return {
+      current: 0,
+      keyword,
+      data,
+    };
+  },
+  watch: {
+    value(e) {
+      this.keyword = e;
+    },
+    keyword(e) {
+      this.updateModel(e);
+    },
+    current() {
+      this.setKeyword();
+    },
+    keywords: {
+      immediate: true,
+      handler(e) {
+        if (Array.isArray(e)) {
+          this.data = e;
+        } else if (e) {
+          this.data = [];
+        }
+      },
+    },
+    data() {
+      this.current = 0;
+      this.setKeyword();
+    },
+  },
+  computed: {
+    style() {
+      return Object.assign(
+        {
+          backgroundColor: this.bgColor,
+          borderColor: this.borderColor,
+          borderRadius: uni.$uv.addUnit(this.borderRadius),
+          height: uni.$uv.addUnit(this.height),
+          borderWidth: `${Number(this.border)}rpx`,
+        },
+        this.customStyle,
+      );
+    },
+    closeStyle() {
+      return {
+        background: this.bgColor,
+      };
+    },
+    _placeholderStyle() {
+      return Object.assign({ color: '#9a9a9a' }, this.placeholderStyle);
+    },
+    inputPlaceholderStyle() {
+      const styles = [];
+      const style = this._placeholderStyle;
+      Object.keys(style).forEach((key) => {
+        styles.push(`${key}:${style[key]}`);
+      });
+      return styles.join(';');
+    },
+    _inputStyle() {
+      return Object.assign(
+        {
+          fontSize: uni.$uv.addUnit(this.fontSize),
+        },
+        this.inputStyle,
+      );
+    },
+  },
+  methods: {
+    setKeyword() {
+      this.keyword = this.data[this.current] || '';
+    },
+    change({ detail }) {
+      this.current = detail.current;
+    },
+    click() {
+      this.$emit('search', this.keyword, 0);
+    },
+    search() {
+      this.$emit('search', this.keyword, 1);
+    },
+    input() {
+      this.$emit('input', this.keyword);
+    },
+    clear() {
+      this.$emit('input', (this.keyword = ''));
+      this.$emit('clear');
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.search-input {
+  width: 100%;
+  border-style: solid;
+  border-color: transparent;
+  padding: 0 20rpx;
+  overflow: hidden;
+  box-sizing: border-box;
+  & > input {
+    height: 100%;
+  }
+  &.square {
+    border-radius: 8rpx;
+  }
+  &.circle {
+    border-radius: 100rpx !important;
+  }
+  &-clear {
+    position: absolute;
+    right: -16rpx;
+    top: 4rpx;
+    bottom: 4rpx;
+    padding: 0 16rpx;
+    z-index: 2;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
+</style>

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

@@ -0,0 +1,75 @@
+<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>
+export default {
+  props: {
+    size: {
+      type: [Number, String],
+      default: 40,
+    },
+    url: {
+      type: String,
+      default:
+        'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAAe1BMVEVHcEz29vb29vb39/f39/f29vb29vb39/f29vb29vb29vb29vb29vb39/f29vb39/f29vb39/f6+vn49/f29vbw8PDp6ezb3eTQ0dO5xeGusLOZsOqjpKigoKSNj5Vmi+ODhYqAgoh9f4R3eX9zdXxvcXhEcd5rbXQaUdgrKM5JAAAAEnRSTlMABxMjOFVkdY2epaqwxdPc7feYI9LvAAAC+UlEQVR42rWZ23arIBCGVYwxadABBhNzbk7m/Z9wb7pXSrtABrvp34t69a2PkMDMmIWSF6ys6iVvAQRA2/BlXZWsyLOfpWCz+oOFnzFYXs9YMZ2Ws9miNSw3AtrFjOUTcXNuaT4mn7N8Cq4BJAJNNLKoOGBEgFdFjF65BIwMLMuc1msERkc0lCSrAScFahbilSuBEyNWZYDHBU6O4OU4D38UXhK8BETLS0dkxH4QO+PsdVETPIJYF995eQXoRMmxKPf7WOXfgGWDnnRj0eikKb8teClcP90fzyPZr91FL4vwghVu3oex3PZahhbNOHoEt/fh7s8wHDsHiJx9Cs7BD7wf9r4czl4gzF+KrEE/8LrRvnSHuw+IDXMEHaCUyvmTem+BPkXGcRSICp1IbQ29n+IMpgHVKBBmRrFYiFSGYlGYFbcYA1SKNsSWZVk+A0xgaNdc1CIGuN71WpGG5tBhHGmg0rvno5Okodnnso0ASgsMGmJbZhXEA2lDqLIaUhpCnb2JlIbiLeOY0hB51mJKQ2wzSGsIMUCpXkApKUPIBA3U+gXUmjIUEYbr007jB9A8KZT/BzS/uufuw3D9MNQgUEHWRhg+n33/fPSPv//pz7AhgcoQT8+H4ZG73MZ8saUhmvRI7jKP+empf8SH4RGG4i3qcFCyOz1OPSr6tKmjji8D6TpUEadNFXfAGknzRBq2JX0FOAkZckZfUk5k8JIirlEplROp94FrNHzR92tvAhd9sBS5DdfLK9erfb7chlApYtfsAm3u19vwJaFiye6zC/wsga/bzeZoS+QhWM7lc6CAt20n1fo8DKEa29bErKGAZrtldxyGoGHDbNFOAO+HDvXm4hg6grFtxXA79FvDC7cVROPTX4cvMZhXjLGv8SFas277pTV7v7yfbQ4bX2tGNY9Kd6MhmsfJ7a1UoQWnb8DTjwjSDzHSj1nsYCnxaEmk4VniCnBiYFWmHvelHkimH5mmH+qmHzunH4ynH93//ssF+vWHYcW8/vgDsk2pVS+emuAAAAAASUVORK5CYII=',
+    },
+    text: {
+      type: String,
+      default: '保存图片',
+    },
+    fontSize: {
+      type: [Number, String],
+      default: 13,
+    },
+    color: {
+      type: String,
+      default: '',
+    },
+    space: {
+      type: [Number, String],
+      default: 4,
+    },
+    data: {
+      type: Object,
+      default: () => ({}),
+    },
+    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 {
+        this.$emit('confirm');
+      }
+    },
+  },
+};
+</script>