create-weapp-vite 2.0.31 → 2.0.32

package/templates/wevu-retail/src/components/promotion/ui-coupon-card/index.vue

@@ -0,0 +1,143 @@
+<script lang="ts">
+Component({
+  options: {
+    addGlobalClass: true,
+    multipleSlots: true,
+  },
+
+  externalClasses: ['coupon-class'],
+
+  properties: {
+    mask: {
+      type: Boolean,
+      value: false, // 是否添加遮罩
+    },
+    superposable: {
+      type: Boolean,
+      value: false, // 是否可叠加
+    },
+    type: {
+      type: String,
+      value: '', // 优惠券类型：CouponType
+    },
+    value: {
+      type: String,
+      value: '', // 优惠金额
+    },
+    tag: {
+      type: String,
+      value: '', // 优惠标签，优惠券名字标签，img
+    },
+    desc: {
+      type: String,
+      value: '', // 优惠金额描述，金额下方
+    },
+    title: {
+      type: String, // 优惠券名称
+      value: '',
+    },
+    timeLimit: {
+      type: String, // 优惠券时限
+      value: '',
+    },
+    ruleDesc: {
+      type: String, // 优惠券适用规则描述
+      value: '',
+    },
+    currency: {
+      type: String,
+      value: '¥', // 优惠货币
+    },
+    status: {
+      type: String,
+      value: 'default',
+    },
+    image: {
+      type: String,
+      value: '',
+    },
+  },
+
+  data: {
+    CouponType: {
+      MJ_COUPON: 1,
+      ZK_COUPON: 2,
+      MJF_COUPON: 3,
+      GIFT_COUPON: 4,
+    },
+    theme: 'primary',
+  },
+
+  observers: {
+    status: function (value) {
+      let theme = 'primary';
+      // 已过期或已使用的券 颜色置灰
+      if (value === 'useless' || value === 'disabled') {
+        theme = 'weak';
+      }
+
+      this.setData({ theme });
+    },
+  },
+
+  attached() {
+    this.setData({
+      color: `color${this.properties.colorStyle}`,
+    });
+  },
+});
+</script>
+
+<template>
+<wxs src="./tools.wxs" module="tools"></wxs>
+<view class="wr-coupon coupon-class theme-{{theme}} [display:flex] [background-image:url(https://tdesign.gtimg.com/miniprogram/template/retail/coupon/coupon-bg-nocorners.png)] [background-size:100%_100%] [background-repeat:no-repeat] [position:relative] [margin-bottom:24rpx] [overflow:hidden] [background-image:url('https://tdesign.gtimg.com/miniprogram/template/retail/coupon/coupon-bg-nocorners.png')]">
+  <view class="wr-coupon__left [width:200rpx] [height:180rpx] [display:flex] [flex-direction:column] [justify-content:center] [text-align:center] [color:#fa4126] [overflow:hidden] [position:relative]">
+    <view wx:if="{{type == CouponType.ZK_COUPON || type === CouponType.MERCHANT_ZK_COUPON}}">
+      <text class="wr-coupon__left--value [font-size:64rpx] [line-height:88rpx] [font-weight:bold] [font-family:\'DIN_Alternate\',_cursive] [font-family:'DIN_Alternate',_cursive]">{{value}}</text>
+      <text class="wr-coupon__left--unit [font-size:24rpx] [line-height:32rpx]">折</text>
+      <view class="wr-coupon__left--desc [font-size:24rpx] [line-height:32rpx] [color:#fa4126]">{{desc}}</view>
+    </view>
+    <view wx:if="{{type == CouponType.MJ_COUPON || type === CouponType.MERCHANT_MJ_COUPON}}">
+      <text class="wr-coupon__left--value [font-size:64rpx] [line-height:88rpx] [font-weight:bold] [font-family:\'DIN_Alternate\',_cursive] [font-family:'DIN_Alternate',_cursive]" wx:if="{{tools.isBigValue(value)}}">
+        <text class="wr-coupon__left--value-int [font-size:48rpx] [line-height:88rpx]">{{tools.getBigValues(value)[0]}}</text>
+        <text class="wr-coupon__left--value-decimal [font-size:36rpx] [line-height:48rpx]">.{{tools.getBigValues(value)[1]}}</text>
+      </text>
+      <text class="wr-coupon__left--value [font-size:64rpx] [line-height:88rpx] [font-weight:bold] [font-family:\'DIN_Alternate\',_cursive] [font-family:'DIN_Alternate',_cursive]" wx:else>{{value / 100}}</text>
+      <text class="wr-coupon__left--unit [font-size:24rpx] [line-height:32rpx]">元</text>
+      <view class="wr-coupon__left--desc [font-size:24rpx] [line-height:32rpx] [color:#fa4126]">{{desc}}</view>
+    </view>
+    <view wx:if="{{type === CouponType.MJF_COUPON || type === CouponType.MYF_COUPON}}">
+      <text class="wr-coupon__left--value [font-size:64rpx] [line-height:88rpx] [font-weight:bold] [font-family:\'DIN_Alternate\',_cursive] [font-family:'DIN_Alternate',_cursive]" style="font-family: PingFang SC; font-size: 44rpx">免邮</text>
+      <view class="wr-coupon__left--desc [font-size:24rpx] [line-height:32rpx] [color:#fa4126]">{{desc}}</view>
+    </view>
+    <view wx:if="{{type == CouponType.GIFT_COUPON}}">
+      <t-image t-class="wr-coupon__left--image [width:128rpx] [height:128rpx] [border-radius:8px] [margin-top:30rpx]" src="{{image}}" mode="aspectFill" />
+    </view>
+  </view>
+  <view class="wr-coupon__right [flex-grow:1] [padding:0_20rpx] [height:180rpx] [box-sizing:border-box] [overflow:hidden] [display:flex] [align-items:center]">
+    <view class="wr-coupon__right--title [display:flex] [-webkit-display:flex] [flex-direction:column] [align-items:flex-start] [color:#999999] [font-size:24rpx] [flex:1] [&_.coupon-title]:[max-width:320rpx] [&_.coupon-title]:[color:#333333] [&_.coupon-title]:[font-size:28rpx] [&_.coupon-title]:[line-height:40rpx] [&_.coupon-title]:[font-weight:bold] [&_.coupon-title]:[display:-webkit-box] [&_.coupon-title]:[-webkit-line-clamp:1] [&_.coupon-title]:[-webkit-box-orient:vertical] [&_.coupon-title]:[overflow:hidden] [&_.coupon-title]:[white-space:normal] [&_.coupon-time]:[margin-top:16rpx] [&_.coupon-desc]:[margin-top:8rpx] [&_.coupon-arrow]:[font-size:22rpx]">
+      <text class="coupon-title">{{title}}</text>
+      <view class="coupon-time">{{timeLimit}}</view>
+      <view class="coupon-desc">
+        <view wx:if="{{ruleDesc}}">{{ruleDesc}}</view>
+      </view>
+    </view>
+    <view class="wr-coupon__right--oper [display:flex] [justify-content:center] [align-items:center]">
+      <slot name="operator" />
+    </view>
+  </view>
+  <view wx:if="{{status === 'useless' || status === 'disabled'}}" class="wr-coupon__seal seal-{{status}}} [width:128rpx] [height:128rpx] [position:absolute] [top:0] [right:0] [background-size:100%_100%] [&_.seal-useless]:[background-image:url('https://tdesign.gtimg.com/miniprogram/template/retail/coupon/seal-used.png')] [&_.seal-disabled]:[background-image:url('https://tdesign.gtimg.com/miniprogram/template/retail/coupon/coupon-expired.png')]" />
+  <view wx:if="{{mask}}" class="wr-coupon__mask [width:702rpx] [height:182rpx] [position:absolute] [top:0] [left:0] [background-color:#ffffff] [opacity:0.5]" />
+  <view wx:if="{{superposable}}" class="wr-coupon__tag [position:absolute] [top:8px] [right:-24rpx] [text-align:center] [width:106rpx] [height:28rpx] [opacity:0.9] [font-size:20rpx] [line-height:28rpx] [color:#fa4126] [border:0.5px_solid_#fa4126] [box-sizing:border-box] [transform:rotate(45deg)]">可叠加</view>
+</view>
+</template>
+
+<json>
+{
+  "component": true,
+  "usingComponents": {
+    "t-icon": "tdesign-miniprogram/icon/icon",
+    "t-image": "/components/webp-image/index"
+  }
+}
+</json>

package/templates/wevu-retail/src/components/promotion/ui-coupon-card/tools.wxs

@@ -0,0 +1,18 @@
+function isBigValue(value) {
+  var values = (value + '').split('.');
+  if (values[1] && values[0].length >= 3) {
+    return true;
+  }
+  else {
+    return false;
+  }
+}
+
+function getBigValues(value) {
+  return value.split('.');
+}
+
+module.exports = {
+  isBigValue: isBigValue,
+  getBigValues: getBigValues,
+};

package/templates/wevu-retail/src/components/swipeout/index.vue

@@ -0,0 +1,118 @@
+<script lang="ts">
+let ARRAY = [];
+Component({
+  externalClasses: ['wr-class'],
+
+  options: {
+    multipleSlots: true,
+  },
+  properties: {
+    disabled: Boolean,
+    leftWidth: {
+      type: Number,
+      value: 0,
+    },
+    rightWidth: {
+      type: Number,
+      value: 0,
+    },
+    asyncClose: Boolean,
+  },
+  attached() {
+    ARRAY.push(this);
+  },
+
+  detached() {
+    ARRAY = ARRAY.filter((item) => item !== this);
+  },
+
+  /**
+   * Component initial data
+   */
+  data: {
+    wrapperStyle: '',
+    asyncClose: false,
+    closed: true,
+  },
+
+  /**
+   * Component methods
+   */
+  methods: {
+    open(position) {
+      this.setData({ closed: false });
+      this.triggerEvent('close', {
+        position,
+        instance: this,
+      });
+    },
+
+    close() {
+      this.setData({ closed: true });
+    },
+
+    closeOther() {
+      ARRAY.filter((item) => item !== this).forEach((item) => item.close());
+    },
+
+    noop() {
+      return;
+    },
+
+    onClick(event) {
+      const { key: position = 'outside' } = event.currentTarget.dataset;
+      this.triggerEvent('click', position);
+
+      if (this.data.closed) {
+        return;
+      }
+
+      if (this.data.asyncClose) {
+        this.triggerEvent('close', {
+          position,
+          instance: this,
+        });
+      } else {
+        this.close();
+      }
+    },
+  },
+});
+</script>
+
+<template>
+<wxs src="./swipe.wxs" module="swipe"></wxs>
+
+<view
+  class="wr-class wr-swipeout [position:relative] [overflow:hidden]"
+  data-key="cell"
+  capture-bind:tap="onClick"
+  bindtouchstart="{{disabled || swipe.startDrag}}"
+  capture-bind:touchmove="{{disabled || swipe.onDrag}}"
+  bindtouchend="{{disabled || swipe.endDrag}}"
+  bindtouchcancel="{{disabled || swipe.endDrag}}"
+  closed="{{closed}}"
+  change:closed="{{swipe.onCloseChange}}"
+  leftWidth="{{leftWidth}}"
+  rightWidth="{{rightWidth}}"
+  change:leftWidth="{{swipe.initLeftWidth}}"
+  change:rightWidth="{{swipe.initRightWidth}}"
+>
+  <view id="wrapper">
+    <view wx:if="{{ leftWidth }}" class="wr-swipeout__left [position:absolute] [top:0] [height:100%] [left:0] [transform:translate3d(-100%,_0,_0)]" data-key="left" catch:tap="onClick">
+      <slot name="left" />
+    </view>
+    <slot />
+    <view wx:if="{{ rightWidth }}" class="wr-swipeout__right [position:absolute] [top:0] [height:100%] [right:0] [transform:translate3d(100%,_0,_0)]" data-key="right" catch:tap="onClick">
+      <slot name="right" />
+    </view>
+  </view>
+</view>
+</template>
+
+<json>
+{
+  "component": true,
+  "usingComponents": {}
+}
+</json>

package/templates/wevu-retail/src/components/swipeout/swipe.wxs

@@ -0,0 +1,151 @@
+var THRESHOLD = 0.3;
+var MIN_DISTANCE = 10;
+var owner;
+var state;
+
+var getState = function(ownerInstance) {
+  owner = ownerInstance;
+  state = owner.getState();
+  state.leftWidth = state.leftWidth || 0;
+  state.rightWidth = state.rightWidth || 0;
+  state.offset = state.offset || 0;
+  state.startOffset = state.startOffset || 0;
+};
+
+var initRightWidth = function(newVal, oldVal, ownerInstance) {
+  getState(ownerInstance);
+  state.rightWidth = newVal;
+  if (state.offset < 0) {
+    swipeMove(-state.rightWidth);
+  }
+};
+
+var initLeftWidth = function(newVal, oldVal, ownerInstance) {
+  getState(ownerInstance);
+  state.leftWidth = newVal;
+  if (state.offset > 0) {
+    swipeMove(state.leftWidth);
+  }
+};
+
+var resetTouchStatus = function() {
+  state.direction = '';
+  state.deltaX = 0;
+  state.deltaY = 0;
+  state.offsetX = 0;
+  state.offsetY = 0;
+};
+
+var touchMove = function(event) {
+  var touchPoint = event.touches[0];
+  state.deltaX = touchPoint.clientX - state.startX;
+  state.deltaY = touchPoint.clientY - state.startY;
+  state.offsetX = Math.abs(state.deltaX);
+  state.offsetY = Math.abs(state.deltaY);
+  state.direction = state.direction || getDirection(state.offsetX, state.offsetY);
+};
+
+var getDirection = function(x, y) {
+  if (x > y && x > MIN_DISTANCE) {
+    return 'horizontal';
+  }
+  if (y > x && y > MIN_DISTANCE) {
+    return 'vertical';
+  }
+  return '';
+};
+
+var range = function(num, min, max) {
+  return Math.min(Math.max(num, min), max);
+};
+
+var swipeMove = function(_offset) {
+  if (_offset == null) {
+    _offset = 0;
+  }
+  state.offset = range(
+    _offset,
+    -state.rightWidth,
+    +state.leftWidth
+  );
+
+  var transform = 'translate3d(' + state.offset + 'px, 0, 0)';
+  var transition = state.dragging
+    ? 'none'
+    : 'transform .6s cubic-bezier(0.18, 0.89, 0.32, 1)';
+  owner.selectComponent('#wrapper').setStyle({
+    '-webkit-transform': transform,
+    '-webkit-transition': transition,
+    'transform': transform,
+    'transition': transition,
+  });
+};
+
+var close = function() {
+  swipeMove(0);
+};
+
+var onCloseChange = function(newVal, oldVal, ownerInstance) {
+  getState(ownerInstance);
+  if (newVal === oldVal) return;
+  if (newVal) {
+    close();
+  }
+};
+
+var touchStart = function(event) {
+  resetTouchStatus();
+  state.startOffset = state.offset;
+  var touchPoint = event.touches[0];
+  state.startX = touchPoint.clientX;
+  state.startY = touchPoint.clientY;
+  owner.callMethod('closeOther');
+};
+
+var startDrag = function(event, ownerInstance) {
+  getState(ownerInstance);
+  touchStart(event);
+};
+
+var onDrag = function(event, ownerInstance) {
+  getState(ownerInstance);
+  touchMove(event);
+  if (state.direction !== 'horizontal') {
+    return;
+  }
+  state.dragging = true;
+  swipeMove(state.startOffset + state.deltaX);
+};
+
+var open = function(position) {
+  var _offset = position === 'left' ? +state.leftWidth : -state.rightWidth;
+  owner.callMethod('open', { position: position });
+  swipeMove(_offset);
+};
+
+var endDrag = function(event, ownerInstance) {
+  getState(ownerInstance);
+  state.dragging = false;
+  // 左/右侧有可滑动区域，且当前不是已open状态，且滑动幅度超过阈值时open左/右侧（滚动到该侧的最边上）
+  if (+state.rightWidth > 0 && -state.startOffset < +state.rightWidth && -state.offset > +state.rightWidth * THRESHOLD) {
+    open('right');
+  }
+  else if (+state.leftWidth > 0 && state.startOffset < +state.leftWidth && state.offset > +state.leftWidth * THRESHOLD) {
+    open('left');
+  }
+  else {
+    // 仅在有发生侧滑的情况下自动关闭（由js控制是否异步关闭）
+    if (state.startOffset !== state.offset) {
+      close();
+    }
+  }
+};
+
+module.exports = {
+  initLeftWidth: initLeftWidth,
+  initRightWidth: initRightWidth,
+  startDrag: startDrag,
+  onDrag: onDrag,
+  endDrag: endDrag,
+  onCloseChange: onCloseChange,
+};

package/templates/wevu-retail/src/components/webp-image/index.vue

@@ -0,0 +1,105 @@
+<script lang="ts">
+const systemInfo = wx.getSystemInfoSync();
+Component({
+  externalClasses: ['t-class', 't-class-load'],
+  properties: {
+    loadFailed: {
+      type: String,
+      value: 'default',
+    },
+    loading: {
+      type: String,
+      value: 'default',
+    },
+    src: {
+      type: String,
+      value: '',
+    },
+    mode: {
+      type: String,
+      value: 'aspectFill',
+    },
+    webp: {
+      type: Boolean,
+      value: true,
+    },
+    lazyLoad: {
+      type: Boolean,
+      value: false,
+    },
+    showMenuByLongpress: {
+      type: Boolean,
+      value: false,
+    },
+  },
+  data: {
+    thumbHeight: 375,
+    thumbWidth: 375,
+    systemInfo,
+  },
+  lifetimes: {
+    ready() {
+      const { mode } = this.properties;
+      // 获取容器的真实宽高，设置图片的裁剪宽度
+      this.getRect('.J-image').then((res) => {
+        if (res) {
+          const { width, height } = res;
+          this.setData(
+            mode === 'heightFix'
+              ? {
+                  thumbHeight: this.px2rpx(height) || 375,
+                }
+              : {
+                  thumbWidth: this.px2rpx(width) || 375,
+                },
+          );
+        }
+      });
+    },
+  },
+  methods: {
+    px2rpx(px) {
+      return (750 / (systemInfo.screenWidth || 375)) * px;
+    },
+    getRect(selector) {
+      return new Promise((resolve) => {
+        if (!this.selectorQuery) {
+          this.selectorQuery = this.createSelectorQuery();
+        }
+        this.selectorQuery.select(selector).boundingClientRect(resolve).exec();
+      });
+    },
+    onLoad(e) {
+      this.triggerEvent('load', e.detail);
+    },
+    onError(e) {
+      this.triggerEvent('error', e.detail);
+    },
+  },
+});
+</script>
+
+<template>
+<wxs src="./utils.wxs" module="Utils" />
+<t-image
+  class="J-image"
+  src="{{Utils.getSrc({src, thumbWidth: thumbWidth || 0, thumbHeight: thumbHeight || 0, systemInfo, webp, mode})}}"
+  t-class="t-class"
+  t-class-load="t-class-load"
+  mode="{{ mode }}"
+  lazy="{{ lazyLoad }}"
+  show-menu-by-longpress="{{showMenuByLongpress}}"
+  error="{{loadFailed}}"
+  loading="{{loading}}"
+  binderror="onError"
+  bindload="onLoad"
+/>
+</template>
+
+<json>
+{
+  "component": true,
+  "usingComponents": {
+    "t-image": "tdesign-miniprogram/image/image"
+  }
+}</json>

package/templates/wevu-retail/src/components/webp-image/utils.wxs

@@ -0,0 +1,140 @@
+var isString = function (value) {
+  return typeof value === 'string';
+};
+
+var isNumber = function (value) {
+  return typeof value === 'number';
+};
+
+var getFileExt = function (src) {
+  var fileUrl = src.split('?')[0];
+  var splitUlr = fileUrl.split('/');
+  var filepath = splitUlr[splitUlr.length - 1];
+  return filepath.split('.')[1] || 'jpg';
+};
+
+function isUrl(url) {
+  // NOCC:ToolNameCheck(非敏感词)
+  var urlReg = getRegExp(
+    '/[(http(s)?)://(www.)?a-zA-Z0-9@:%._+~#=]{2,256}.[a-z]{2,6}\b([-a-zA-Z0-9@:%_+.~#?&//=]*)/',
+    'ig',
+  );
+
+  return urlReg.test(url);
+}
+
+function rpx2px(rpx, screenWidth) {
+  // px / systemWidth = rpx / 750
+  var result = (rpx * (screenWidth || 375)) / 750;
+
+  return Math.round(result);
+}
+
+function imageMogr(url, options) {
+  if (!isString(url) || !url) return '';
+
+  if (
+    url.indexOf('qlogo.cn') !== -1 ||
+    url.indexOf('wxfile://') === 0 ||
+    url.indexOf('http://tmp/wx') === 0 ||
+    url.indexOf('imageMogr2') !== -1
+  ) {
+    //qlogo.cn域名或者本地图片不做转换
+    return url;
+  } //强制转https
+
+  if (url.indexOf('http://') === 0) {
+    url = url.replace('http://', 'https://');
+  } else if (url.indexOf('//') === 0) {
+    url = 'https:' + url;
+  }
+
+  if (!options) return url;
+
+  var width = Math.ceil(options.width),
+    height = Math.ceil(options.height),
+    format = options.format,
+    _optionsQuality = options.quality,
+    quality = _optionsQuality === undefined ? 70 : _optionsQuality,
+    _optionsStrip = options.strip,
+    strip = _optionsStrip === undefined ? true : _optionsStrip,
+    crop = options.crop;
+  var isValidWidth = isNumber(width) && width > 0;
+  var isValidHeight = isNumber(height) && height > 0;
+  var imageMogrStr = '';
+  var size = '';
+
+  if (isValidWidth && isValidHeight) {
+    size = ''.concat(width, 'x').concat(height);
+  } else if (isValidWidth) {
+    size = ''.concat(width, 'x');
+  } else if (isValidHeight) {
+    size = 'x'.concat(height);
+  }
+
+  if (size) {
+    //缩放或者裁剪
+    imageMogrStr += '/'.concat(crop ? 'crop' : 'thumbnail', '/').concat(size);
+
+    if (crop) {
+      //裁剪目前需求只有以图片中心为基准
+      imageMogrStr += '/gravity/center';
+    }
+  }
+
+  if (isNumber(quality)) {
+    //质量变换
+    imageMogrStr += '/quality/'.concat(quality);
+  }
+
+  if (strip) {
+    //去除元信息
+    imageMogrStr += '/strip';
+  }
+
+  var ext = getFileExt(url);
+
+  // gif 图片不做格式转换，否则会损坏动图
+  if (ext === 'gif') {
+    imageMogrStr += '/cgif/1';
+  } else if (format) {
+    //格式转换
+    imageMogrStr += '/format/'.concat(format);
+  }
+
+  if (format === 'jpg' || (!format && (ext === 'jpg' || ext === 'jpeg'))) {
+    //渐进式 jpg 加载
+    imageMogrStr += '/interlace/1';
+  }
+  if (!imageMogrStr) return url;
+  return ''
+    .concat(url)
+    .concat(url.indexOf('?') !== -1 ? '&' : '?', 'imageMogr2')
+    .concat(imageMogrStr);
+}
+function getSrc(options) {
+  if (!options.src) return '';
+
+  if (options.thumbWidth || options.thumbHeight) {
+    return imageMogr(options.src, {
+      width:
+        options.mode !== 'heightFix'
+          ? rpx2px(options.thumbWidth, options.systemInfo.screenWidth) *
+            options.systemInfo.pixelRatio
+          : null,
+      height:
+        options.mode !== 'widthFix'
+          ? rpx2px(options.thumbHeight, options.systemInfo.screenWidth) *
+            options.systemInfo.pixelRatio
+          : null,
+      format: options.webp ? 'webp' : null,
+    });
+  }
+
+  return '';
+}
+
+module.exports = {
+  imageMogr: imageMogr,
+  getSrc: getSrc,
+};