@zfqh/uniapp 0.1.1

package/lib/components/g-checkbox-list/g-checkbox-list.vue

@@ -0,0 +1,156 @@
+<template>
+  <view :style="[customStyle]">
+    <slot name="default" :data="dataList" :select="select" :checked="checked">
+      <view
+        v-for="(item, index) in dataList"
+        :key="item.key"
+        class="flex justify-between pr-20rpx"
+        :class="{ 'uv-border-top': border && index > 0 }"
+        :style="[style]"
+        @tap="select(item)"
+      >
+        <text class="flex-1 w-0 truncate text-main text-30rpx">{{ item[labelField] }}</text>
+        <uv-icon v-if="checked.includes(item[valueField])" :name="iconName" :size="icon.size" :color="iconColor" />
+      </view>
+    </slot>
+  </view>
+</template>
+
+<script>
+import model from '../../mixins/model';
+import color from '../../configs/color';
+
+export default {
+  mixins: [
+    model({
+      type: Array,
+      default: () => [],
+    }),
+  ],
+  props: {
+    list: {
+      type: Array,
+      default: () => [],
+    },
+    customStyle: {
+      type: Object,
+      default: () => ({}),
+    },
+    itemStyle: {
+      type: Object,
+      default: () => ({}),
+    },
+    itemHeight: {
+      type: [String, Number],
+      default: 32,
+    },
+    iconName: {
+      type: String,
+      default: 'checkmark',
+    },
+    fontSize: {
+      type: [String, Number],
+      default: 14,
+    },
+    iconSize: {
+      type: [String, Number],
+      default: 14,
+    },
+    iconColor: {
+      type: String,
+      default: () => color.primary,
+    },
+    border: {
+      type: Boolean,
+      default: true,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    multiple: {
+      type: Boolean,
+      default: false,
+    },
+    toggle: {
+      type: Boolean,
+      default: true,
+    },
+    labelField: {
+      type: String,
+      default: 'label',
+    },
+    valueField: {
+      type: String,
+      default: 'value',
+    },
+  },
+  data() {
+    return {
+      checked: [],
+    };
+  },
+  watch: {
+    value: {
+      immediate: true,
+      handler(e) {
+        this.checked = e;
+      },
+    },
+    checked(checked) {
+      this.updateModel(checked);
+    },
+  },
+  computed: {
+    dataList({ list, labelField, valueField }) {
+      return list.map((e) => {
+        if (typeof e !== 'object') {
+          return {
+            [labelField]: e,
+            [valueField]: e,
+            key: e,
+          };
+        }
+        return { key: e[valueField], ...e };
+      });
+    },
+    icon({ iconSize }) {
+      return {
+        size: uni.$uv.addUnit(iconSize),
+      };
+    },
+    style({ itemStyle, fontSize, itemHeight }) {
+      return Object.assign({ fontSize: uni.$uv.addUnit(fontSize), height: uni.$uv.addUnit(itemHeight) }, itemStyle);
+    },
+  },
+  methods: {
+    select(item) {
+      if (this.disabled) {
+        return;
+      }
+      const value = item[this.valueField];
+      if (this.multiple) {
+        if (this.checked.includes(value)) {
+          this.checked = this.checked.filter((val) => val !== value);
+        } else {
+          const checked = this.checked.concat(value);
+          this.checked = this.dataList
+            .filter((ele) => checked.includes(ele[this.valueField]))
+            .map((ele) => ele[this.valueField]);
+        }
+      } else {
+        if (this.checked.includes(value)) {
+          if (this.toggle) {
+            this.checked = [];
+          }
+        } else {
+          this.checked = [value];
+        }
+      }
+      this.$emit('change', value, this.checked);
+    },
+  },
+};
+</script>
+
+<style></style>

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

@@ -0,0 +1,159 @@
+<template>
+  <view class="container" :class="[customClass]" :style="[style]">
+    <view :style="[contentStyle]" :class="[contentClass]">
+      <slot name="default" />
+    </view>
+    <view v-if="showFooter" :style="[_footerStyle]" :class="[{ 'uv-border-top': footerBorder }, footerClass]">
+      <slot name="footer"></slot>
+    </view>
+  </view>
+</template>
+
+<script>
+import color from '../../configs/color';
+
+export default {
+  props: {
+    loading: {
+      type: [String, Boolean],
+      default: false,
+    },
+    // 背景色
+    bgColor: {
+      type: String,
+      default: () => color.bgColor,
+    },
+    // 是否开启安全区域
+    footerSafeArea: {
+      type: Boolean,
+      default: true,
+    },
+    // 是否显式footer
+    showFooter: {
+      type: Boolean,
+      default: false,
+    },
+    // 是否有原生Tabbar
+    hasTabbar: {
+      type: Boolean,
+      default: false,
+    },
+    // 是否显式footer边框
+    footerBorder: {
+      type: Boolean,
+      default: true,
+    },
+    // 是否显示footer阴影
+    footerShadow: {
+      type: Boolean,
+      default: false,
+    },
+    // 自定义class
+    customClass: {
+      type: String,
+      default: '',
+    },
+    // 自定义class
+    contentClass: {
+      type: String,
+      default: '',
+    },
+    // 自定义class
+    footerClass: {
+      type: String,
+      default: '',
+    },
+    // 自定义样式
+    customStyle: {
+      type: Object,
+      default: () => ({}),
+    },
+    // 自定义样式
+    contentStyle: {
+      type: Object,
+      default: () => ({}),
+    },
+    // 自定义footer样式
+    footerStyle: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  computed: {
+    systemInfo() {
+      return this.$store.state.system.info;
+    },
+    style() {
+      const style = Object.assign(
+        {
+          backgroundColor: this.bgColor,
+        },
+        this.customStyle,
+      );
+      if (this.hasTabbar) {
+        style.paddingBottom = 'var(--window-bottom) !important';
+      }
+      return style;
+    },
+    _footerStyle() {
+      const footerStyle = Object.assign(
+        {
+          padding: '16rpx 32rpx',
+          backgroundColor: '#fff',
+          position: 'sticky',
+          zIndex: 9,
+          bottom: 0,
+        },
+        this.footerStyle,
+      );
+      if (this.hasTabbar) {
+        footerStyle.bottom = 'var(--window-bottom)';
+      }
+      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: {
+    loading(value) {
+      this.setLoading(value);
+    },
+  },
+  methods: {
+    setLoading(loading) {
+      if (loading) {
+        uni.showLoading({
+          title: typeof loading === 'string' ? loading : '',
+          mask: true,
+        });
+      } else if (!loading) {
+        uni.hideLoading();
+      }
+    },
+  },
+  beforeMount() {
+    if (this.loading) {
+      this.setLoading(this.loading);
+    }
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.container {
+  min-height: calc(100vh - var(--window-top) - var(--window-bottom));
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  & > view {
+    box-sizing: border-box;
+    &:first-child {
+      flex: 1;
+    }
+  }
+}
+</style>

package/lib/components/g-data-list/g-data-list.vue

@@ -0,0 +1,192 @@
+<template>
+  <view :style="[customStyle]">
+    <slot v-if="value != null" name="default"></slot>
+    <slot v-else-if="data != null" name="default" :data="data"></slot>
+    <slot v-if="data && !data.length" name="empty">
+      <uv-empty text="暂无数据" marginTop="24vh" textSize="28rpx" iconSize="160rpx" />
+    </slot>
+    <slot name="loadmore" :status="stat">
+      <uv-load-more
+        v-if="stat !== 'nomore' && data?.length"
+        :customStyle="loadingStyle"
+        :status="showLoading ? 'loading' : stat"
+        :marginTop="loadingTop"
+        :marginBottom="loadingBottom"
+        @loadmore="loadMore"
+        :line="loadingLine"
+      />
+    </slot>
+  </view>
+</template>
+
+<script>
+import model from '../../mixins/model';
+
+export default {
+  mixins: [
+    model({
+      type: Array,
+      default: null,
+    }),
+  ],
+  props: {
+    request: {
+      type: Function,
+      default: () => {},
+    },
+    initLoad: {
+      type: Boolean,
+      default: false,
+    },
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+    loadingLine: {
+      type: Boolean,
+      default: true,
+    },
+    loadingTop: {
+      type: [String, Number],
+      default: 10,
+    },
+    loadingBottom: {
+      type: [String, Number],
+      default: 0,
+    },
+    customStyle: {
+      type: Object,
+      default: () => ({}),
+    },
+    pageSize: {
+      type: Number,
+      default: 12,
+    },
+    status: {
+      type: String,
+      default: 'nomore',
+    },
+  },
+  data() {
+    return {
+      stat: this.status,
+      page: 1,
+      total: 0,
+      data: null,
+      rawData: null,
+      showLoading: true,
+      timer: null,
+    };
+  },
+  watch: {
+    data(data) {
+      this.updateModel(data);
+    },
+    value(e) {
+      this.data = e;
+    },
+  },
+  computed: {
+    loadingStyle({ page }) {
+      return {
+        opacity: page > 1 ? 1 : 0,
+      };
+    },
+  },
+  methods: {
+    getParent() {
+      let parent = this;
+      // #ifdef VUE2
+      let i = 0;
+      while (i < 3) {
+        parent = parent.$parent;
+        if (parent && typeof parent.request === 'function') {
+          break;
+        } else {
+          i++;
+        }
+      }
+      // #endif
+      return parent;
+    },
+    async loadData(page = 0, pageSize = 0) {
+      try {
+        this.showLoading = true;
+        if (page > 1) {
+          this.stat = 'loading';
+        }
+        const params = {
+          pageSize: Math.max(pageSize, this.pageSize),
+          page: Math.max(page, 1),
+        };
+        this.page = params.page;
+
+        let { data, total, rawData } = await this.getParent().request(params);
+
+        if (!Array.isArray(data)) {
+          data = [];
+        }
+
+        if (!Array.isArray(rawData)) {
+          rawData = data;
+        }
+
+        this.total = total || 0;
+        if (params.page === 1) {
+          this.data = [].concat(data);
+          this.rawData = [].concat(rawData);
+        } else {
+          this.data = [].concat(this.data || [], data);
+          this.rawData = [].concat(this.rawData || [], rawData);
+        }
+        this.page = Math.ceil(this.rawData.length / this.pageSize);
+      } catch (e) {
+        if (!this.data) {
+          this.data = [];
+        }
+      } finally {
+        if (this.data.length < this.total) {
+          this.stat = 'loadmore';
+        } else {
+          this.stat = 'nomore';
+        }
+        // 解决文字闪烁问题
+        clearTimeout(this.timer);
+        this.timer = setTimeout(() => {
+          this.showLoading = false;
+        }, 1000);
+      }
+    },
+    async loadMore() {
+      if (this.stat === 'loadmore') {
+        await this.loadData(this.page + 1);
+      }
+    },
+    updateData() {
+      if (this.data && this.stat !== 'loading') {
+        this.loadData(0, this.data.length);
+      }
+    },
+    async initData() {
+      try {
+        if (this.loading) {
+          uni.showLoading();
+        }
+        await this.loadData();
+      } catch (e) {
+      } finally {
+        if (this.loading) {
+          uni.hideLoading();
+        }
+      }
+    },
+  },
+  mounted() {
+    if (this.initLoad) {
+      this.initData();
+    }
+  },
+};
+</script>
+
+<style></style>

package/lib/components/g-dot-text/g-dot-text.vue

@@ -0,0 +1,114 @@
+<template>
+  <view class="flex" :class="[{ 'items-start': align === 'top', 'items-end': align === 'bottom', 'items-center': align === 'center', 'items-stretch': align === 'stretch', 'items-baseline': align === 'baseline' }, customClass]" :style="[customStyle]">
+    <text v-if="show" :style="[_dotStyle]" />
+    <view class="flex-1 w-0" :style="[textStyle]" :class="textClass">
+      <slot name="default"></slot>
+    </view>
+  </view>
+</template>
+
+<script>
+import color from '../../configs/color';
+
+export default {
+  props: {
+    type: String,
+    space: {
+      type: [String, Number],
+      default: 6,
+    },
+    size: {
+      type: [String, Number],
+      default: 6,
+    },
+    width: {
+      type: [String, Number],
+      default: 0,
+    },
+    height: {
+      type: [String, Number],
+      default: 0,
+    },
+    fontSize: {
+      type: [String, Number],
+      default: 13,
+    },
+    color: {
+      type: String,
+      default: '',
+    },
+    textColor: {
+      type: String,
+      default: '',
+    },
+    borderRadius: {
+      type: [String, Number],
+      default: '50%',
+    },
+    top: {
+      type: [String, Number],
+      default: 0,
+    },
+    plain: {
+      type: Boolean,
+      default: false,
+    },
+    show: {
+      type: Boolean,
+      default: true,
+    },
+    customClass: String,
+    textClass: String,
+    textStyle: {
+      type: Object,
+      default: () => ({}),
+    },
+    customStyle: {
+      type: Object,
+      default: () => ({}),
+    },
+    dotStyle: {
+      type: Object,
+      default: () => ({}),
+    },
+    align: {
+      type: String,
+      default: 'center',
+    },
+  },
+  computed: {
+    _color() {
+      const { color: c, type } = this;
+      if (c) {
+        return c;
+      } else if (type) {
+        return color[type];
+      }
+      return '';
+    },
+    _dotStyle() {
+      const { size, borderRadius, plain, width, height, top, space, _color } = this;
+      const style = {
+        width: uni.$uv.addUnit(width || size),
+        height: uni.$uv.addUnit(height || size),
+        border: `1rpx solid ${_color}`,
+        borderRadius: uni.$uv.addUnit(borderRadius),
+        backgroundColor: plain ? 'transparent' : _color,
+        marginTop: uni.$uv.addUnit(top),
+        marginRight: uni.$uv.addUnit(space),
+      };
+      return Object.assign(style, this.dotStyle);
+    },
+    txtStyle() {
+      const { textColor, fontSize, textStyle } = this;
+      const style = {
+        color: textColor,
+        fontSize: uni.$uv.addUnit(fontSize),
+      };
+      return Object.assign(style, textStyle);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped></style>