shijiplus-web-plugin 0.1.10 → 0.1.12

package/src/components/plus-comp/plus-icon/plus-icon.vue

@@ -0,0 +1,91 @@
+<template>
+  <Icon v-if="type" :type="type" :size="size" :color="color" />
+  <span v-else-if="src" ref="plusIconInnerRef" class="plus-icon">
+    <img :src="handleSrc(src)" />
+  </span>
+</template>
+<script>
+export default {
+  props: {
+    type: {
+      type: String,
+      default: ''
+    },
+    src: {
+      type: String,
+      default: ''
+    },
+    color: {
+      type: String,
+      default: ''
+    },
+    size: {
+      type: Number,
+      default: 16
+    }
+  },
+  watch: {
+    size: {
+      handler(val) {
+        if (val) {
+          this.$nextTick(() => {
+            if (this.$refs.plusIconInnerRef) {
+              this.$refs.plusIconInnerRef.style.setProperty(
+                '--size',
+                val + 'px'
+              )
+            }
+          })
+        }
+      },
+      deep: true,
+      immediate: true
+    },
+    color: {
+      handler(val) {
+        if (val) {
+          this.$nextTick(() => {
+            if (this.$refs.plusIconInnerRef) {
+              this.$refs.plusIconInnerRef.style.setProperty(
+                '--filterColor',
+                val
+              )
+              this.$refs.plusIconInnerRef.style.setProperty('--vector', -1)
+            }
+          })
+        }
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  computed: {},
+  data() {
+    return {}
+  },
+  methods: {
+    handleSrc(src) {
+      const ss = src.replace('@/assets', '')
+      return require(`@/assets` + ss)
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.plus-icon {
+  display: block;
+  overflow: hidden;
+  --size: 16px;
+  --filterColor: transparent;
+  --vector: 0;
+  width: var(--size);
+  height: var(--size);
+  img {
+    position: relative;
+    width: var(--size);
+    height: var(--size);
+    left: ~'calc(var(--size) * var(--vector))';
+    filter: drop-shadow(var(--size) 0px var(--filterColor));
+  }
+}
+</style>

package/src/components/plus-comp/plus-modal/plus-modal.vue

@@ -0,0 +1,281 @@
+<template>
+  <Modal
+    id="plus-modal"
+    ref="modal"
+    v-model="visiable"
+    :closable="closable"
+    :mask-closable="false"
+    :width="width"
+    :transfer="transfer"
+    :styles="modalStyles"
+    :class-name="className"
+    @on-visible-change="visibleChange"
+  >
+    <div
+      v-if="title"
+      :style="headerStyles"
+      class="plus-modal-header f-s-16 f-w-600"
+      slot="header"
+    >
+      {{ title }}
+    </div>
+    <div ref="editslotRef" id="editslot" :style="editSlotStyle">
+      <slot></slot>
+    </div>
+    <div
+      slot="footer"
+      ref="footerRef"
+      :class="['plus-modal-footer', 'i-flex-wrap justify-center align-center']"
+    >
+      <slot name="footer">
+        <Button type="primary" @click="handlerClose"> 关闭 </Button>
+      </slot>
+    </div>
+    <Spin v-if="showLoading" fix>
+      <Icon type="ios-loading" size="18" class="demo-spin-icon-load"></Icon>
+      <div>{{ loadingTip || '正在处理...' }}</div>
+    </Spin>
+  </Modal>
+</template>
+<script>
+export default {
+  name: 'edit-modal',
+  props: {
+    props: {
+      type: Object,
+      default() {
+        return {
+          show: false
+        }
+      }
+    },
+    closable: {
+      type: Boolean,
+      default: false
+    },
+    footerHide: {
+      type: Boolean,
+      default: false
+    },
+    title: {
+      default: null
+    },
+    showLoading: {
+      default: false
+    },
+    loadingTip: {
+      default: '正在处理...'
+    },
+    width: {
+      default: 520
+    },
+    headerCenter: {
+      default: false
+    },
+    transfer: {
+      default: true
+    },
+    fillParent: {
+      type: Boolean,
+      default: false
+    },
+    styles: {
+      type: Object,
+      default() {
+        return {
+          height: 'fit-content'
+        }
+      }
+    },
+    padding: {
+      type: String,
+      default: '16px 24px'
+    }
+  },
+  watch: {
+    'props.show': {
+      handler(nValue) {
+        this.visiable = nValue
+        this.$nextTick(() => {
+          if (this.$slots.footer) {
+            if (this.$slots.footer[0] && this.$slots.footer[0].elm) {
+              if (!this.$slots.footer[0].elm.clientHeight) {
+                let height = window
+                  .getComputedStyle(this.$slots.footer[0].elm)
+                  .getPropertyValue('height')
+                if (!height || parseInt(height) == 0) {
+                  this.$refs.footerRef.parentElement.style.display = 'none'
+                } else {
+                  this.$refs.footerRef.parentElement.style.display = 'block'
+                }
+              } else {
+                this.$refs.footerRef.parentElement.style.display = 'block'
+              }
+            }
+          }
+        })
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  data() {
+    return {
+      visiable: false,
+      headerStyles: {
+        'text-align': 'center'
+      },
+      computedPadding: ''
+    }
+  },
+  computed: {
+    modalStyles() {
+      return {
+        ...this.styles
+      }
+    },
+    className() {
+      return (
+        'vertical-center-modal fill-parent' +
+        (this.footerHide ? ' footerHide' : '') +
+        (this.title ? '' : ' headerHide')
+      )
+    },
+    editSlotStyle() {
+      let maxHeight =
+        document.body.clientHeight -
+        (this.footerHide ? 0 : 80) -
+        (this.title ? 60 : 0) -
+        60 +
+        'px'
+      return {
+        'overflow-y': 'auto',
+        'max-height': maxHeight,
+        padding: this.computedPadding || this.padding
+      }
+    }
+  },
+  methods: {
+    handlerClose() {
+      this.props.show = false
+      this.$emit('on-close')
+    },
+    visibleChange(e) {
+      this.props.show = e
+      if (!e) {
+        this.$emit('on-close')
+      } else {
+        this.$nextTick(() => {
+          if (
+            this.$refs.editslotRef.scrollHeight >
+            this.$refs.editslotRef.clientHeight
+          ) {
+            var styles = window.getComputedStyle(this.$refs.editslotRef)
+
+            // 如果您只想获取特定方向的padding值，例如padding-top
+            var paddingLeft = parseFloat(
+              styles.getPropertyValue('padding-left')
+            )
+            var paddingRight = parseFloat(
+              styles.getPropertyValue('padding-right')
+            )
+            var paddingTop = parseFloat(styles.getPropertyValue('padding-top'))
+            var paddingBottom = parseFloat(
+              styles.getPropertyValue('padding-bottom')
+            )
+            this.$refs.editslotRef.style.width = `calc(100% + ${paddingRight}px)`
+            this.$refs.editslotRef.style.marginLeft = `-${paddingRight}px`
+            this.$refs.editslotRef.style.paddingRight = 0
+            this.$refs.editslotRef.style.paddingLeft = `${
+              paddingLeft + paddingRight
+            }px`
+            this.computedPadding = `${paddingTop}px ${0}px ${paddingBottom}px ${
+              paddingLeft + paddingRight
+            }px`
+          }
+        })
+      }
+    }
+  },
+  mounted() {}
+}
+</script>
+<style lang="less">
+#plus-modal {
+  height: 100%;
+  .vertical-center-modal {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .ivu-modal {
+      top: 0;
+      /*flex: 0;*/
+    }
+  }
+  .fill-parent {
+    overflow: hidden;
+    .ivu-modal {
+      height: 98%;
+      max-height: 100vh;
+      .ivu-modal-content {
+        max-height: 100vh;
+        height: 100%;
+        .ivu-modal-body {
+          display: flex;
+          flex-direction: column;
+          height: calc(~'100% - 50px');
+          padding: 0;
+          #editslot {
+            position: relative;
+            flex-grow: 1;
+            max-height: calc(~'100% - 35px');
+            overflow: auto;
+            padding: 16px 24px;
+          }
+          .bottom {
+            flex-shrink: 0;
+          }
+        }
+      }
+    }
+  }
+  .ivu-modal-header {
+    padding: 0;
+    line-height: 60px;
+    height: 60px;
+    padding: 0;
+    // border-bottom: none;
+    .plus-modal-header {
+      font-family: PingFangSC-SNaNpxibold;
+      color: #17233d;
+      letter-spacing: 0.44px;
+      text-align: center;
+      line-height: 60px;
+      height: 60px;
+    }
+  }
+  .ivu-modal-footer {
+    text-align: center;
+    // border-top: none;
+    min-height: 80px;
+    padding: 0 24px;
+    .plus-modal-footer {
+      min-height: 80px;
+      &.i-flex-wrap {
+        * {
+          margin-top: 0;
+          margin-right: 5px;
+          &:last-child {
+            margin-right: 0;
+          }
+        }
+      }
+    }
+  }
+  .footerHide {
+    .ivu-modal-footer {
+      display: none;
+    }
+  }
+}
+</style>

package/src/components/plus-comp/plus-poptip/plus-poptip.vue

@@ -0,0 +1,42 @@
+<template>
+  <Poptip
+    class="plus-poptip"
+    popper-class="plus-poptip-content"
+    :trigger="trigger"
+    :padding="padding"
+    :width="width"
+  >
+    <slot></slot>
+    <div slot="content">
+      <slot name="content"></slot>
+    </div>
+  </Poptip>
+</template>
+<script>
+export default {
+  props: {
+    width: {
+      type: String,
+      default: '150px'
+    },
+    padding: {
+      type: String,
+      default: '8px 16px'
+    },
+    trigger: {
+      default: 'hover'
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.plus-poptip {
+  z-index: 1100;
+}
+/deep/.plus-poptip-content {
+  &.ivu-poptip-popper {
+    min-width: initial;
+  }
+  z-index: 9999;
+}
+</style>

package/src/components/plus-comp/plus-qr-code/plus-qr-code.vue

@@ -0,0 +1,110 @@
+<template>
+  <div
+    :ref="myRef"
+    class="plus-qr-code"
+    style="display: flex; justify-content: center"
+  >
+    <div
+      class="qrcodeEl"
+      :ref="'qrcodeEl'"
+      :style="`height:${size}px;width:${size}px;`"
+    ></div>
+  </div>
+</template>
+<script>
+import html2canvas from 'html2canvas'
+import QRCode from 'qrcodejs2'
+export default {
+  props: {
+    type: {
+      type: String,
+      default: 'qrcode' // miniapp
+    },
+    size: {
+      default: 100
+    },
+    codeContent: {
+      default: 'asdasdasdasdasd'
+    }
+  },
+  watch: {
+    codeContent: {
+      handler(value) {
+        this.$nextTick(() => {
+          if (value) {
+            if (this.type == 'qrcode') {
+              new QRCode(this.$refs.qrcodeEl, {
+                width: this.size * 2,
+                height: this.size * 2 // 高度
+              }).makeCode(value) // 二维码内容 // https://h5-dev.shijiplus.com/shop-events
+            } else {
+              const img = new Image()
+              img.src = value
+              this.$refs.qrcodeEl.append(img)
+            }
+          } else {
+            this.$refs.qrcodeEl.innerHTML = ''
+          }
+        })
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  data() {
+    const timeStamp = new Date().getTime()
+    return {
+      myRef: String(timeStamp)
+    }
+  },
+  methods: {
+    saveCode(name) {
+      return new Promise((resolve, reject) => {
+        if (this.type != 'qrcode') {
+          var a = document.createElement('a')
+          var event = new MouseEvent('click')
+          a.download = `${name || '二维码'}.png`
+          a.href = this.codeContent
+          a.dispatchEvent(event)
+          resolve()
+        } else {
+          html2canvas(this.$refs[this.myRef], {
+            allowTaint: false,
+            // taintTest: false,
+            dpi: window.devicePixelRatio * 4,
+            useCORS: true,
+            scale: 6
+            // width: 200,
+            // height: 200
+          })
+            .then((canvas) => {
+              var a = document.createElement('a')
+              var event = new MouseEvent('click')
+              a.download = `${name || '二维码'}.png`
+              a.href = canvas.toDataURL('image/png')
+              a.dispatchEvent(event)
+              resolve()
+            })
+            .catch((err) => {
+              console.error('savecode error', err)
+              reject(err)
+            })
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.plus-qr-code {
+  width: fit-content;
+  .qrcodeEl {
+    overflow: hidden;
+    /deep/img {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+</style>

package/src/components/plus-comp/plus-remote-selector/plus-remote-selector.vue

@@ -0,0 +1,126 @@
+<template>
+  <Select
+    ref="select"
+    filterable
+    clearable
+    remote
+    label-in-value
+    :placeholder="placeholder"
+    @on-change="valueChange"
+    @on-open-change="openChange"
+    :remote-method="remoteMethod"
+    :loading="loading"
+  >
+    <Option
+      v-for="(option, index) in options"
+      :value="option[valueKey]"
+      :key="index"
+      :label="option.showLabel"
+    />
+  </Select>
+</template>
+<script>
+import { throttle } from '../../../libs/util'
+export default {
+  name: 'plus-remote-selector',
+  model: {
+    prop: 'modelValue',
+    event: 'change'
+  },
+  props: {
+    modelValue: [Number, String],
+    showName: {
+      type: [String, Number],
+      default: ''
+    },
+    valueKey: {
+      type: String,
+      default: 'id'
+    },
+    labelKeys: {
+      type: [String, Array],
+      default: 'name'
+    },
+    placeholder: {
+      default: '输入关键字搜索'
+    },
+    remoteFun: Function
+  },
+  watch: {
+    modelValue: {
+      handler(val) {
+        if (val) {
+          this.$nextTick(() => {
+            this.$refs.select.$data.query = this.showName
+          })
+        }
+      },
+      immediate: true
+    }
+  },
+  data() {
+    return {
+      loading: false,
+      options: [],
+      keyword: null
+    }
+  },
+  methods: {
+    valueChange(e) {
+      if (e) {
+        this.$emit('change', e.value)
+        this.$emit('change-option', { ...e })
+        this.$refs.select.$data.query = e.label
+      } else {
+        this.$emit('change', null)
+        this.$emit('change-option', {})
+      }
+    },
+    openChange(e) {
+      if (!e) {
+        this.$refs.select.isFocused = false
+        if (this.showName) {
+          this.$nextTick(() => {
+            this.$refs.select.$data.query = this.showName
+          })
+        }
+      }
+    },
+    remoteMethod(query) {
+      const fun = () => {
+        this.searchLoading = true
+        const result = this.remoteFun(query)
+        if (result instanceof Promise) {
+          result
+            .then((resp) => {
+              if (resp.data) {
+                resp.data.forEach((item) => {
+                  item.showLabel = ''
+                  if (this.labelKeys) {
+                    let tempKeys = this.labelKeys
+                    if (typeof tempKeys == 'string') {
+                      tempKeys = this.labelKeys.split(',')
+                    }
+                    tempKeys.forEach((key) => {
+                      item.showLabel += item[key]
+                    })
+                  }
+                })
+                this.options = resp.data
+              }
+            })
+            .catch((err) => {
+              console.log('-------remoteMethod-------', err)
+            })
+            .finally(() => {
+              this.searchLoading = false
+            })
+        } else if (!result) {
+          throw Error('remoteFun must return promise')
+        }
+      }
+      throttle(fun, 1000)
+    }
+  }
+}
+</script>

package/src/components/plus-comp/plus-scrollview/plus-scrollview.vue

@@ -0,0 +1,58 @@
+<template>
+  <div :id="scrollId" class="scroll-wrap">
+    <slot>
+      <div class="empty-wrap">暂无数据</div>
+    </slot>
+    <div v-if="showLoadingBar" class="i-flex-wrap justify-center loading-bar">
+      {{ loadText }}
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    loadText: {
+      default: '数据加载中...'
+    }
+  },
+  data() {
+    return { scrollId: null, showLoadingBar: false }
+  },
+  mounted() {
+    this.scrollId = new Date().getTime()
+    this.$nextTick(() => {
+      const scrollEle = document.getElementById(this.scrollId)
+      scrollEle.addEventListener('scroll', () => {
+        if (
+          scrollEle.scrollTop > 0 &&
+          scrollEle.scrollHeight -
+            (scrollEle.scrollTop + scrollEle.clientHeight) <
+            1
+        ) {
+          this.showLoadingBar = true
+          this.$emit('on-reach-bottom')
+          console.log('已滑动到底部')
+          // 执行到达底部后的操作
+        }
+      })
+    })
+  }
+}
+</script>
+<style lang="less" scoped>
+.scroll-wrap {
+  overflow: auto;
+  .empty-wrap {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    align-content: center;
+    align-items: center;
+    justify-items: center;
+    justify-content: center;
+  }
+  .loading-bar {
+    display: none;
+  }
+}
+</style>