create-weapp-vite 2.0.30 → 2.0.32

package/templates/wevu-retail/src/components/goods-card/index.vue

@@ -0,0 +1,219 @@
+<script lang="ts">
+Component({
+  options: {
+    addGlobalClass: true,
+  },
+
+  properties: {
+    id: {
+      type: String,
+      value: '',
+      observer(id) {
+        this.genIndependentID(id);
+        if (this.properties.thresholds?.length) {
+          this.createIntersectionObserverHandle();
+        }
+      },
+    },
+    data: {
+      type: Object,
+      observer(data) {
+        if (!data) {
+          return;
+        }
+        let isValidityLinePrice = true;
+        if (data.originPrice && data.price && data.originPrice < data.price) {
+          isValidityLinePrice = false;
+        }
+        this.setData({ goods: data, isValidityLinePrice });
+      },
+    },
+    currency: {
+      type: String,
+      value: '¥',
+    },
+
+    thresholds: {
+      type: Array,
+      value: [],
+      observer(thresholds) {
+        if (thresholds && thresholds.length) {
+          this.createIntersectionObserverHandle();
+        } else {
+          this.clearIntersectionObserverHandle();
+        }
+      },
+    },
+  },
+
+  data: {
+    independentID: '',
+    goods: { id: '' },
+    isValidityLinePrice: false,
+  },
+
+  lifetimes: {
+    ready() {
+      this.init();
+    },
+    detached() {
+      this.clear();
+    },
+  },
+
+  pageLifeTimes: {},
+
+  methods: {
+    clickHandle() {
+      this.triggerEvent('click', { goods: this.data.goods });
+    },
+
+    clickThumbHandle() {
+      this.triggerEvent('thumb', { goods: this.data.goods });
+    },
+
+    addCartHandle(e) {
+      const { id } = e.currentTarget;
+      const { id: cardID } = e.currentTarget.dataset;
+      this.triggerEvent('add-cart', {
+        ...e.detail,
+        id,
+        cardID,
+        goods: this.data.goods,
+      });
+    },
+
+    genIndependentID(id) {
+      let independentID;
+      if (id) {
+        independentID = id;
+      } else {
+        independentID = `goods-card-${~~(Math.random() * 10 ** 8)}`;
+      }
+      this.setData({ independentID });
+    },
+
+    init() {
+      const { thresholds, id } = this.properties;
+      this.genIndependentID(id);
+      if (thresholds && thresholds.length) {
+        this.createIntersectionObserverHandle();
+      }
+    },
+
+    clear() {
+      this.clearIntersectionObserverHandle();
+    },
+
+    intersectionObserverContext: null,
+
+    createIntersectionObserverHandle() {
+      if (this.intersectionObserverContext || !this.data.independentID) {
+        return;
+      }
+      this.intersectionObserverContext = this.createIntersectionObserver({
+        thresholds: this.properties.thresholds,
+      }).relativeToViewport();
+
+      this.intersectionObserverContext.observe(
+        `#${this.data.independentID}`,
+        (res) => {
+          this.intersectionObserverCB(res);
+        },
+      );
+    },
+
+    intersectionObserverCB() {
+      this.triggerEvent('ob', {
+        goods: this.data.goods,
+        context: this.intersectionObserverContext,
+      });
+    },
+
+    clearIntersectionObserverHandle() {
+      if (this.intersectionObserverContext) {
+        try {
+          this.intersectionObserverContext.disconnect();
+        } catch (e) {}
+        this.intersectionObserverContext = null;
+      }
+    },
+  },
+});
+</script>
+
+<template>
+<view
+  id="{{independentID}}"
+  class="goods-card [box-sizing:border-box] [font-size:24rpx] [border-radius:0_0_16rpx_16rpx] [border-bottom:none]"
+  bind:tap="clickHandle"
+  data-goods="{{ goods }}"
+>
+	<view class="goods-card__main [position:relative] [display:flex] [line-height:1] [padding:0] [background:transparent] [width:342rpx] [border-radius:0_0_16rpx_16rpx] [align-items:center] [justify-content:center] [margin-bottom:16rpx] [flex-direction:column]">
+		<view class="goods-card__thumb [flex-shrink:0] [position:relative] [width:340rpx] [height:340rpx] [&:empty]:[display:none] [&:empty]:[margin:0]" bind:tap="clickThumbHandle">
+			<t-image
+			  wx:if="{{ !!goods.thumb }}"
+			  t-class="goods-card__img [display:block] [width:100%] [height:100%] [border-radius:16rpx_16rpx_0_0] [overflow:hidden]"
+			  src="{{ goods.thumb }}"
+			  mode="aspectFill"
+			  lazy-load
+			/>
+		</view>
+		<view class="goods-card__body [display:flex] [flex:1_1_auto] [background:#fff] [border-radius:0_0_16rpx_16rpx] [padding:16rpx_24rpx_18rpx] [flex-direction:column]">
+			<view class="goods-card__upper [display:flex] [flex-direction:column] [overflow:hidden] [flex:1_1_auto]">
+				<view wx:if="{{ goods.title }}" class="goods-card__title [flex-shrink:0] [font-size:28rpx] [color:#333] [font-weight:400] [display:-webkit-box] [height:72rpx] [-webkit-box-orient:vertical] [-webkit-line-clamp:2] [overflow:hidden] [word-break:break-word] [line-height:36rpx]">
+					{{ goods.title }}
+				</view>
+				<view wx:if="{{ goods.tags && !!goods.tags.length }}" class="goods-card__tags [display:flex] [flex-direction:row] [flex-wrap:wrap] [margin:8rpx_0_0_0]">
+					<view
+					  wx:for="{{ goods.tags }}"
+					  wx:key="index"
+					  wx:for-item="tag"
+					  class="goods-card__tag [color:#fa4126] [background:transparent] [font-size:20rpx] [border:1rpx_solid_#fa4126] [padding:0_8rpx] [border-radius:16rpx] [line-height:30rpx] [margin:0_8rpx_8rpx_0] [display:block] [overflow:hidden] [white-space:nowrap] [word-break:keep-all] [text-overflow:ellipsis]"
+					  data-index="{{index}}"
+					>
+						{{tag}}
+					</view>
+				</view>
+			</view>
+			<view class="goods-card__down [display:flex] [position:relative] [flex-direction:row] [justify-content:flex-start] [align-items:baseline] [line-height:32rpx] [margin:8rpx_0_0_0]">
+				<price
+				  wx:if="{{ goods.price }}"
+				  wr-class="spec-for-price [font-size:36rpx] [white-space:nowrap] [font-weight:700] [order:1] [color:#fa4126] [margin:0]"
+				  symbol-class="spec-for-symbol [font-size:24rpx]"
+				  symbol="{{currency}}"
+				  price="{{goods.price}}"
+				/>
+				<price
+				  wx:if="{{ goods.originPrice && isValidityLinePrice }}"
+				  wr-class="goods-card__origin-price [white-space:nowrap] [font-weight:700] [order:2] [color:#bbbbbb] [font-size:24rpx] [margin:0_0_0_8rpx]"
+				  symbol="{{currency}}"
+				  price="{{goods.originPrice}}"
+				  type="delthrough"
+				/>
+				<t-icon
+				  class="goods-card__add-cart [order:3] [margin:auto_0_0_auto] [position:absolute] [bottom:0] [right:0]"
+				  prefix="wr"
+				  name="cartAdd"
+				  id="{{independentID}}-cart"
+				  data-id="{{independentID}}"
+				  catchtap="addCartHandle"
+				  size="48rpx"
+				  color="#FA550F"
+				/>
+			</view>
+		</view>
+	</view>
+</view>
+
+</template>
+
+<json>
+{
+    "component": true,
+    "usingComponents": {
+        "price": "/components/price/index",
+        "t-icon": "tdesign-miniprogram/icon/icon",
+        "t-image": "/components/webp-image/index"
+    }
+}</json>

package/templates/wevu-retail/src/components/goods-list/index.vue

@@ -0,0 +1,91 @@
+<script lang="ts">
+Component({
+  externalClasses: ['wr-class'],
+
+  properties: {
+    goodsList: {
+      type: Array,
+      value: [],
+    },
+    id: {
+      type: String,
+      value: '',
+      observer: (id) => {
+        this.genIndependentID(id);
+      },
+    },
+    thresholds: {
+      type: Array,
+      value: [],
+    },
+  },
+
+  data: {
+    independentID: '',
+  },
+
+  lifetimes: {
+    ready() {
+      this.init();
+    },
+  },
+
+  methods: {
+    onClickGoods(e) {
+      const { index } = e.currentTarget.dataset;
+      this.triggerEvent('click', { ...e.detail, index });
+    },
+
+    onAddCart(e) {
+      const { index } = e.currentTarget.dataset;
+      this.triggerEvent('addcart', { ...e.detail, index });
+    },
+
+    onClickGoodsThumb(e) {
+      const { index } = e.currentTarget.dataset;
+      this.triggerEvent('thumb', { ...e.detail, index });
+    },
+
+    init() {
+      this.genIndependentID(this.id || '');
+    },
+
+    genIndependentID(id) {
+      if (id) {
+        this.setData({ independentID: id });
+      } else {
+        this.setData({
+          independentID: `goods-list-${~~(Math.random() * 10 ** 8)}`,
+        });
+      }
+    },
+  },
+});
+</script>
+
+<template>
+<view class="goods-list-wrap wr-class [display:flex] [flex-flow:row_wrap] [justify-content:space-between] [padding:0] [background:#fff]" id="{{independentID}}">
+	<block wx:for="{{goodsList}}" wx:for-item="item" wx:key="index">
+		<goods-card
+		  id="{{independentID}}-gd-{{index}}"
+		  data="{{item}}"
+		  currency="{{item.currency || '¥'}}"
+		  thresholds="{{thresholds}}"
+		  class="goods-card-inside"
+		  data-index="{{index}}"
+		  bind:thumb="onClickGoodsThumb"
+		  bind:click="onClickGoods"
+		  bind:add-cart="onAddCart"
+		/>
+	</block>
+</view>
+
+</template>
+
+<json>
+{
+    "component": true,
+    "usingComponents": {
+        "goods-card": "/components/goods-card/index"
+    }
+}</json>

package/templates/wevu-retail/src/components/load-more/index.vue

@@ -0,0 +1,99 @@
+<script lang="ts">
+Component({
+  externalClasses: ['wr-class', 'wr-class--no-more'],
+
+  options: { multipleSlots: true },
+
+  properties: {
+    status: {
+      type: Number,
+      value: 0,
+    },
+    loadingText: {
+      type: String,
+      value: '加载中...',
+    },
+    noMoreText: {
+      type: String,
+      value: '没有更多了',
+    },
+    failedText: {
+      type: String,
+      value: '加载失败，点击重试',
+    },
+    color: {
+      type: String,
+      value: '#BBBBBB',
+    },
+    failedColor: {
+      type: String,
+      value: '#FA550F',
+    },
+    size: {
+      type: null,
+      value: '40rpx',
+    },
+    loadingBackgroundColor: {
+      type: String,
+      value: '#F5F5F5',
+    },
+    listIsEmpty: {
+      type: Boolean,
+      value: false,
+    },
+  },
+
+  methods: {
+    /** 点击处理 */
+    tapHandle() {
+      // 失败重试
+      if (this.data.status === 3) {
+        this.triggerEvent('retry');
+      }
+    },
+  },
+});
+</script>
+
+<template>
+<view
+  class="load-more wr-class [font-size:24rpx] [height:100rpx] [display:flex] [flex-direction:column] [justify-content:center] [&_.t-class-loading]:[display:flex] [&_.t-class-loading]:[justify-content:center] [&_.t-class-loading-text]:[color:#bbbbbb] [&_.t-class-indicator]:[color:#b9b9b9]"
+  style="{{listIsEmpty && (status === 0 || status === 2) ? 'display: none' : '' }}"
+  bindtap="tapHandle"
+>
+  <!-- 加载中 -->
+
+  <t-loading
+    t-class="t-class-loading"
+    t-class-text="t-class-loading-text"
+    t-class-indicator="t-class-indicator"
+    loading="{{status === 1}}"
+    text="加载中..."
+    theme="circular"
+    size="40rpx"
+  />
+
+  <!-- 已全部加载 -->
+  <t-divider wx:if="{{status === 2}}" t-class="t-class-divider" t-class-content="t-class-divider-content">
+    <text slot="content">{{noMoreText}}</text>
+  </t-divider>
+
+  <!-- 加载失败 -->
+  <view class="load-more__error [margin:auto]" wx:if="{{status===3}}">
+    加载失败
+    <text class="load-more__refresh-btn [margin-left:16rpx] [color:#fa4126]" bind:tap="tapHandle">刷新</text>
+  </view>
+</view>
+
+<!-- 支持通过slot传入页面/列表的空态，load-more来控制空态的显示状态 -->
+<slot wx:if="{{listIsEmpty && (status === 0 || status === 2)}}" name="empty" />
+</template>
+
+<json>
+{
+    "component": true,
+    "usingComponents": {
+        "t-loading": "tdesign-miniprogram/loading/loading",
+        "t-divider": "tdesign-miniprogram/divider/divider"
+    }
+}</json>

package/templates/wevu-retail/src/components/loading-content/index.vue

@@ -0,0 +1,48 @@
+<script lang="ts">
+Component({
+  externalClasses: ['wr-class'],
+  properties: {
+    position: {
+      type: String,
+      value: 'static',
+    },
+    noMask: Boolean,
+    type: {
+      type: String,
+      value: 'circular',
+    },
+    vertical: Boolean,
+    size: {
+      type: String,
+      value: '50rpx',
+    },
+    backgroundColor: {
+      type: String,
+      value: 'rgba(0, 0, 0, .6)',
+    },
+  },
+});
+</script>
+
+<template>
+<view class="t-class loading-content {{position}} [width:100%] [height:100%] [background-color:rgba(0,_0,_0,_0.6)] [position:relative] [&_.absolute]:[position:absolute] [&_.absolute]:[z-index:1] [&_.absolute]:[left:0] [&_.absolute]:[top:0] [&_.fixed]:[position:fixed] [&_.fixed]:[z-index:1] [&_.fixed]:[left:0] [&_.fixed]:[top:0] [&_.loading]:[width:100%] [&_.loading]:[height:100%] [&_.loading]:[visibility:visible]" style="{{(position === 'static' || noMask) ? 'visibility: hidden;' : ''}} background-color: {{backgroundColor}}">
+	<t-loading
+	 t-class="loading"
+	 theme="{{type}}"
+	 layout="{{vertical}}"
+	 size="{{size}}"
+	>
+		<slot/>
+	</t-loading>
+</view>
+
+</template>
+
+<json>
+{
+  "component": true,
+  "usingComponents": {
+    "t-loading": "tdesign-miniprogram/loading/loading"
+  }
+}
+</json>

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

@@ -0,0 +1,104 @@
+<script lang="ts">
+Component({
+  externalClasses: ['wr-class', 'symbol-class', 'decimal-class'],
+  useStore: [],
+  properties: {
+    priceUnit: {
+      type: String,
+      value: 'fen',
+    }, // 价格单位，分 | 元, fen，yuan
+    price: {
+      type: null,
+      value: '',
+      observer(price) {
+        this.format(price);
+      },
+    }, // 价格, 以分为单位
+    type: {
+      type: String,
+      value: '', //
+    }, //  main 粗体, lighter 细体, mini 黑色, del 中划线, delthrough 中划线，包括货币符号
+    symbol: {
+      type: String,
+      value: '¥', // '￥',
+    }, // 货币符号，默认是人民币符号￥
+    fill: Boolean, // 是否自动补齐两位小数
+    decimalSmaller: Boolean, // 小数字号小一点
+    lineThroughWidth: {
+      type: null,
+      value: '0.12em',
+    }, // 划线价线条高度
+  },
+
+  data: {
+    pArr: [],
+  },
+
+  methods: {
+    format(price) {
+      price = parseFloat(`${price}`);
+      const pArr = [];
+      if (!isNaN(price)) {
+        const isMinus = price < 0;
+        if (isMinus) {
+          price = -price;
+        }
+        if (this.properties.priceUnit === 'yuan') {
+          const priceSplit = price.toString().split('.');
+          pArr[0] = priceSplit[0];
+          pArr[1] = !priceSplit[1]
+            ? '00'
+            : priceSplit[1].length === 1
+            ? `${priceSplit[1]}0`
+            : priceSplit[1];
+        } else {
+          price = Math.round(price * 10 ** 8) / 10 ** 8; // 恢复精度丢失
+          price = Math.ceil(price); // 向上取整
+          pArr[0] = price >= 100 ? `${price}`.slice(0, -2) : '0';
+          pArr[1] = `${price + 100}`.slice(-2);
+        }
+        if (!this.properties.fill) {
+          // 如果 fill 为 false， 不显示小数末尾的0
+          if (pArr[1] === '00') pArr[1] = '';
+          else if (pArr[1][1] === '0') pArr[1] = pArr[1][0];
+        }
+        if (isMinus) {
+          pArr[0] = `-${pArr[0]}`;
+        }
+      }
+      this.setData({ pArr });
+    },
+  },
+});
+</script>
+
+<template>
+<wxs module="utils">
+	var REGEXP = getRegExp('^\\d+(\\.\\d+)?$');
+	function addUnit(value) {
+	if (value == null) {
+	return '';
+	}
+	return REGEXP.test('' + value) ? value + 'rpx' : value;
+	}
+	module.exports = {
+	addUnit: addUnit
+	};
+</wxs>
+<view class="price {{type}} wr-class [display:inline] [color:inherit] [font-size:inherit] [text-decoration:inherit] [white-space:nowrap]">
+	<view wx:if="{{type === 'delthrough'}}" class="line" style="height:{{utils.addUnit(lineThroughWidth)}};" />
+	<view class="symbol symbol-class [display:inline] [color:inherit] [font-size:inherit] [font-size:0.8em] [white-space:nowrap]">{{symbol}}</view>
+	<view class="pprice [display:inline] [margin:0_0_0_4rpx] [white-space:nowrap]">
+		<view class="integer inline [display:inline] [white-space:nowrap] [color:inherit] [font-size:inherit]">{{pArr[0]}}</view>
+		<view wx:if="{{pArr[1]}}" class="decimal inline {{decimalSmaller ? 'smaller' : ''}} decimal-class [display:inline] [white-space:nowrap] [color:inherit] [font-size:inherit] [&_.smaller]:[font-size:0.8em] [&_.smaller]:[vertical-align:baseline]">.{{pArr[1]}}</view>
+	</view>
+</view>
+
+</template>
+
+<json>
+{
+  "component": true,
+  "usingComponents": {}
+}
+</json>