@zfqh/uniapp 0.1.1

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

@@ -0,0 +1,123 @@
+<template>
+  <template v-if="show">
+    <slot name="default" :open="open">
+      <text @tap.stop="open"> {{ prefix }}{{ env.name }}{{ suffix }} </text>
+    </slot>
+    <!-- #ifndef MP -->
+    <uv-action-sheet v-if="switchable" ref="actionSheet" :actions="list" title="切换环境" @select="select" />
+    <!-- #endif -->
+  </template>
+</template>
+
+<script>
+import color from '../../configs/color';
+import ver from '../../configs/ver';
+import update from '../../utils/update';
+import { requestDelay } from '../../utils';
+
+export default {
+  props: {
+    env: {
+      type: Object,
+      default: () => ({}),
+    },
+    data: {
+      type: Array,
+      default: () => [
+        {
+          name: '开发环境',
+          key: 'dev',
+        },
+        {
+          name: '测试环境',
+          key: 'sit',
+        },
+        {
+          name: '演示环境',
+          key: 'uat',
+        },
+        {
+          name: '预生产环境',
+          key: 'pre',
+        },
+      ],
+    },
+    prefix: {
+      type: String,
+      default: '',
+    },
+    suffix: {
+      type: String,
+      default: '',
+    },
+    switchable: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  computed: {
+    show() {
+      return this.env.name !== 'prod';
+    },
+    list() {
+      return this.data.map((item) => ({
+        ...item,
+        disabled: item.disabled || (item.key === this.env.name ? true : false),
+      }));
+    },
+  },
+  methods: {
+    open() {
+      if (this.switchable) {
+        // #ifdef MP-WEIXIN
+        uni.showModal({
+          title: '提示',
+          content: '请在"小程序助手"中切换环境',
+          showCancel: false,
+          confirmColor: color.primary,
+        });
+        // #endif
+        // #ifdef H5
+        if (!window.electron) {
+          return;
+        }
+        // #endif
+        // #ifndef MP
+        this.$refs.actionSheet.open();
+        // #endif
+      }
+    },
+    // #ifndef MP
+    select(e) {
+      this.$refs.actionSheet.close();
+      if (this.current !== e.key) {
+        uni.showModal({
+          title: '提示',
+          content: `是否切换到${e.name}并重启应用？`,
+          confirmColor: color.primary,
+          success: async (res) => {
+            if (res.confirm) {
+              this.env.set(e.key);
+              ver.code = -1;
+              try {
+                uni.showLoading({ title: '切换中...' });
+                await requestDelay(() => Promise.resolve());
+                uni.hideLoading();
+                await update.check(true);
+              } catch (e) {
+                // #ifdef APP
+                plus.runtime.restart();
+                // #endif
+                // #ifdef H5
+                window.location.reload();
+                // #endif
+              }
+            }
+          },
+        });
+      }
+    },
+    // #endif
+  },
+};
+</script>

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

@@ -0,0 +1,131 @@
+<template>
+  <view class="float" :style="[style]" @tap.stop="click">
+    <slot>
+      <g-icon :name="iconName" :font="iconFont" :size="iconSize" :color="iconColor" class="flex" />
+    </slot>
+  </view>
+</template>
+
+<script>
+import color from '../../configs/color';
+import navigate from '../../utils/navigate';
+
+export default {
+  props: {
+    size: {
+      type: [String, Number],
+      default: 40,
+    },
+    show: {
+      type: [String, Number],
+      default: 8,
+    },
+    offset: {
+      type: Array,
+      default: () => [10],
+    },
+    hasTabbar: {
+      type: Boolean,
+      default: false,
+    },
+    scrollTop: {
+      type: Number,
+      default: 0,
+    },
+    iconName: {
+      type: String,
+      default: '',
+    },
+    iconFont: {
+      type: String,
+      default: '',
+    },
+    iconSize: {
+      type: [String, Number],
+      default: 20,
+    },
+    customStyle: {
+      type: Object,
+      default: () => ({}),
+    },
+    iconColor: {
+      type: String,
+      default: () => color.mainColor,
+    },
+    bgColor: {
+      type: String,
+      default: '#fff',
+    },
+    url: {
+      type: String,
+      default: '',
+    },
+    delay: {
+      type: Number,
+      default: 1000,
+    },
+    opacity: {
+      type: Number,
+      default: 0.5,
+    },
+  },
+  data() {
+    return {
+      isScroll: false,
+    };
+  },
+  computed: {
+    style({ offset, hasTabbar, isScroll, size, bgColor, show, opacity }) {
+      let [bottom = 20, right] = offset;
+      if (right == null) {
+        right = bottom;
+      }
+      size = uni.$uv.addUnit(size);
+      const style = {
+        width: size,
+        height: size,
+        right: uni.$uv.addUnit(right),
+        bottom: `calc(${uni.$uv.addUnit(bottom)} + ${hasTabbar ? 'var(--window-bottom)' : '0px'})`,
+        opacity: isScroll ? opacity : 1,
+        transform: `translateX(${isScroll ? `calc(${size} - ${uni.$uv.addUnit(show)})` : '0'})`,
+        backgroundColor: bgColor,
+      };
+      return Object.assign(style, this.customStyle);
+    },
+  },
+  watch: {
+    scrollTop() {
+      this.scrolling();
+    },
+  },
+  methods: {
+    scrolling() {
+      this.isScroll = true;
+      uni.$uv.debounce(() => {
+        this.isScroll = false;
+      }, this.delay);
+    },
+    click() {
+      if (this.url) {
+        navigate({ url: this.url });
+      } else {
+        this.$emit('goto');
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.float {
+  position: fixed;
+  z-index: 11;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-shadow: 0rpx 8rpx 30rpx rgba(0, 0, 0, 0.08);
+  background-color: #fff;
+  transition: all 0.3s;
+}
+</style>

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

@@ -0,0 +1,84 @@
+<template>
+  <view class="grid" :style="[_style]">
+    <view v-for="(item, index) in list" :key="index" :style="[_imageStyle]" class="overflow-hidden" @tap.stop="click(item)">
+      <image :src="item.image" style="width: 100%; height: 100%" :mode="mode" class="flex" />
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  props: {
+    list: {
+      type: Array,
+      default: () => [],
+    },
+    margin: {
+      type: [Array, Number, String],
+      default: () => 15,
+    },
+    height: {
+      type: [String, Number],
+      default: 64,
+    },
+    customStyle: {
+      type: Object,
+      default: () => ({}),
+    },
+    imageStyle: {
+      type: Object,
+      default: () => ({}),
+    },
+    borderRadius: {
+      type: [String, Number],
+      default: 16,
+    },
+    col: {
+      type: [String, Number],
+      default: 2,
+    },
+    mode: {
+      type: String,
+      default: 'widthFix',
+    },
+  },
+  computed: {
+    gutter() {
+      return [].concat(this.margin);
+    },
+    _style() {
+      const [row, col] = this.gutter;
+      return Object.assign(
+        {
+          'grid-gap': `${uni.$uv.addUnit(row)} ${uni.$uv.addUnit(col || row)}`,
+          'grid-template-columns': new Array(Number(this.col))
+            .fill(undefined)
+            .map(() => '1fr')
+            .join(' '),
+        },
+        this.customStyle,
+      );
+    },
+    _imageStyle() {
+      return Object.assign(
+        {
+          height: uni.$uv.addUnit(this.height),
+          borderRadius: uni.$uv.addUnit(this.borderRadius),
+        },
+        this.imageStyle,
+      );
+    },
+  },
+  methods: {
+    click(e) {
+      this.$emit('click', e);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.grid {
+  display: grid;
+}
+</style>

package/lib/components/g-grid-swiper/g-grid-swiper.vue

@@ -0,0 +1,224 @@
+<template>
+  <view class="relative" v-if="dataList && dataList.length" :style="[customStyle]">
+    <swiper class="swiper" :current="cur" :style="[swiperStyle]" @change="change">
+      <swiper-item v-for="(list, index) in dataList" :key="index">
+        <uv-grid :col="col" :border="false" align="left">
+          <uv-grid-item v-for="(ele, i) in list" :key="i" bgColor="transparent" :customStyle="_colStyle">
+            <view class="flex justify-center flex-col" :style="[_itemStyle(ele)]" @tap.stop="click(index, i)">
+              <uv-image
+                v-if="ele[iconKey]"
+                :src="ele[iconKey]"
+                :width="iconStyle.width || iconStyle.height"
+                :height="iconStyle.height || iconStyle.width"
+                mode="heightFix"
+                errorIcon="photo"
+                :compress="false"
+              />
+              <text v-if="ele[titleKey]" class="text-24rpx text-main mt-12rpx" :style="[titleStyle]">
+                {{ ele[titleKey] }}
+              </text>
+              <text v-if="ele[descKey]" class="text-tips text-20rpx mt-4rpx" :style="[descStyle]">
+                {{ ele[descKey] }}
+              </text>
+            </view>
+          </uv-grid-item>
+        </uv-grid>
+      </swiper-item>
+    </swiper>
+    <slot name="indicator" :data="{ current: cur }">
+      <view v-if="dataList.length > 1" class="indicator" :style="[_indicatorStyle]">
+        <view v-for="(ele, i) in dataList" :key="i" class="indicator-dot" :class="{ current: cur === i }"></view>
+      </view>
+    </slot>
+  </view>
+</template>
+
+<script>
+export default {
+  props: {
+    list: {
+      type: Array,
+      default: () => [],
+    },
+    params: {
+      type: Object,
+      default: () => ({}),
+    },
+    customStyle: {
+      type: Object,
+      default: () => ({}),
+    },
+    itemStyle: {
+      type: [Object, Function],
+      default: () => ({}),
+    },
+    linkKey: {
+      type: [Boolean, String],
+      default: 'link',
+    },
+    titleKey: {
+      type: String,
+      default: 'title',
+    },
+    descKey: {
+      type: String,
+      default: 'desc',
+    },
+    iconKey: {
+      type: String,
+      default: 'icon',
+    },
+    indicator: {
+      type: String,
+      default: 'number',
+    },
+    indicatorPos: {
+      type: String,
+      default: 'bottomCenter',
+    },
+    indicatorStyle: {
+      type: Object,
+      default: () => ({}),
+    },
+    bgColor: {
+      type: String,
+      default: 'transparent',
+    },
+    rowHeight: {
+      type: [Number, String],
+      default: 114,
+    },
+    col: {
+      type: [Number, String],
+      default: 4,
+    },
+    row: {
+      type: [Number, String],
+      default: 3,
+    },
+    current: {
+      type: [Number, String],
+      default: 0,
+    },
+    iconStyle: {
+      type: Object,
+      default: () => ({
+        width: '72rpx',
+        height: '72rpx',
+      }),
+    },
+    titleStyle: {
+      type: Object,
+      default: () => ({}),
+    },
+    descStyle: {
+      type: Object,
+      default: () => ({}),
+    },
+    colStyle: {
+      type: [Object, Function],
+      default: () => ({}),
+    },
+  },
+  data() {
+    return {
+      cur: parseInt(this.current),
+    };
+  },
+  computed: {
+    dataList({ col, row, list }) {
+      const data = [];
+      const size = col * row;
+      list.forEach((e, i) => {
+        const j = Math.floor(i / size);
+        if (!data[j]) {
+          data[j] = [];
+        }
+        data[j].push(e);
+      });
+      return data;
+    },
+    swiperStyle({ cur, col, dataList, rowHeight }) {
+      const data = dataList[cur];
+      if (!data) {
+        return {};
+      }
+      return {
+        height: `${Math.ceil(data.length / col) * rowHeight}rpx`,
+      };
+    },
+    _indicatorStyle({ indicatorStyle, indicatorPos }) {
+      return Object.assign(
+        (() => {
+          switch (indicatorPos) {
+            case 'bottomCenter':
+              return {
+                bottom: '10rpx',
+                left: '50%',
+                transform: 'translateX(-50%)',
+              };
+            default:
+              return {};
+          }
+        })(),
+        indicatorStyle,
+      );
+    },
+    _itemStyle({ itemStyle }) {
+      return (e) => {
+        return typeof itemStyle === 'function' ? itemStyle(e) : itemStyle;
+      };
+    },
+    _colStyle({ colStyle }) {
+      return Object.assign({ padding: 0 }, colStyle);
+    },
+  },
+  watch: {
+    current() {
+      this.cur = parseInt(this.current);
+    },
+  },
+  methods: {
+    change(e) {
+      const { current } = e.detail;
+      this.cur = current;
+    },
+    click(i, j) {
+      let data = this.dataList[i];
+      if (j != null) {
+        data = data[j];
+      }
+      if (this.linkKey) {
+        const link = data[this.linkKey];
+        if (link) {
+          uni.navigateTo({
+            url: link,
+          });
+        }
+      }
+      this.$emit('click', data);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.swiper {
+  transition: all 0.3s;
+}
+.indicator {
+  position: absolute;
+  height: 8rpx;
+  border-radius: 100rpx;
+  background-color: #d8d8d8;
+  overflow: hidden;
+  display: flex;
+  &-dot {
+    width: 16rpx;
+    height: 100%;
+    &.current {
+      background-color: $uv-primary;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,72 @@
+<template>
+  <text :class="[classname, `${classname}-${name}`]" :style="[style]" @click="click" />
+</template>
+
+<script>
+export default {
+  props: {
+    type: {
+      type: String,
+      default: 'icon',
+    },
+    font: {
+      type: String,
+      default: '',
+    },
+    name: {
+      type: String,
+      default: '',
+    },
+    zoom: {
+      type: Boolean,
+      default: false,
+    },
+    bold: {
+      type: Boolean,
+      default: false,
+    },
+    size: {
+      type: [Number, String],
+      default: 12,
+    },
+    color: {
+      type: String,
+      default: '',
+    },
+  },
+  computed: {
+    classname({ font, type }) {
+      if (font) {
+        if (font.startsWith(`${type}-`)) {
+          return font;
+        }
+        return `${type}-${font}`;
+      }
+      return type;
+    },
+    style({ size, zoom, bold, color }) {
+      const style = {
+        fontSize: uni.$uv.addUnit(size),
+      };
+      if (bold) {
+        style.fontWeight = 'bold';
+      }
+      if (color) {
+        style.color = color;
+      }
+      if (zoom) {
+        const z = Number.parseFloat(size) / 24;
+        if (z < 1) {
+          style.zoom = z;
+        }
+      }
+      return style;
+    },
+  },
+  methods: {
+    click(e) {
+      this.$emit('click', e);
+    },
+  },
+};
+</script>