create-weapp-vite 2.0.30 → 2.0.32

package/templates/wevu-retail/src/pages/order/components/noGoods/noGoods.vue

@@ -0,0 +1,125 @@
+<script lang="ts">
+Component({
+  properties: {
+    settleDetailData: {
+      type: Object,
+      value: {},
+      observer(settleDetailData) {
+        const {
+          outOfStockGoodsList,
+          abnormalDeliveryGoodsList,
+          inValidGoodsList,
+          limitGoodsList,
+        } = settleDetailData;
+        // 弹窗逻辑   限购  超出配送范围   失效    库存不足;
+        const tempList =
+          limitGoodsList ||
+          abnormalDeliveryGoodsList ||
+          inValidGoodsList ||
+          outOfStockGoodsList ||
+          [];
+
+        tempList.forEach((goods, index) => {
+          goods.id = index;
+          goods.unSettlementGoods &&
+            goods.unSettlementGoods.forEach((ele) => {
+              ele.name = ele.goodsName;
+              ele.price = ele.payPrice;
+              ele.imgUrl = ele.image;
+            });
+        });
+        this.setData({
+          // settleDetailData,
+          goodsList: tempList,
+        });
+      },
+    },
+  },
+
+  data: {
+    goodList: [],
+  },
+  methods: {
+    onCard(e) {
+      const { item } = e.currentTarget.dataset;
+      if (item === 'cart') {
+        // 购物车
+        Navigator.gotoPage('/cart');
+      } else if (item === 'orderSure') {
+        // 结算页
+        this.triggerEvent('change', undefined);
+      }
+    },
+    onDelive() {
+      // 修改配送地址
+      Navigator.gotoPage('/address', { type: 'orderSure' });
+    },
+  },
+});
+</script>
+
+<template>
+<wxs src="./noGood.wxs" module="order" />
+
+<view class="goods-fail [display:block] [background:#fff] [font-size:30rpx] [border-radius:20rpx_20rpx_0_0] [&_.title]:[display:inline-block] [&_.title]:[width:100%] [&_.title]:[text-align:center] [&_.title]:[margin-top:30rpx] [&_.title]:[line-height:42rpx] [&_.title]:[font-weight:bold] [&_.title]:[font-size:32rpx] [&_.info]:[display:block] [&_.info]:[font-size:26rpx] [&_.info]:[font-weight:400] [&_.info]:[line-height:36rpx] [&_.info]:[margin:20rpx_auto_10rpx] [&_.info]:[text-align:center] [&_.info]:[width:560rpx] [&_.info]:[color:#999] [&_.goods-fail-btn]:[display:flex] [&_.goods-fail-btn]:[padding:30rpx] [&_.goods-fail-btn]:[justify-content:space-between] [&_.goods-fail-btn]:[align-items:center] [&_.goods-fail-btn]:[font-size:30rpx] [&_.goods-fail-btn_.btn]:[width:330rpx] [&_.goods-fail-btn_.btn]:[height:80rpx] [&_.goods-fail-btn_.btn]:[line-height:80rpx] [&_.goods-fail-btn_.btn]:[border-radius:8rpx] [&_.goods-fail-btn_.btn]:[text-align:center] [&_.goods-fail-btn_.btn]:[border:1rpx_solid_#999] [&_.goods-fail-btn_.btn]:[background:#fff] [&_.goods-fail-btn_.btn]:[font-size:32rpx] [&_.goods-fail-btn_.btn]:[color:#666] [&_.goods-fail-btn_.btn_.origin]:[color:#fa550f] [&_.goods-fail-btn_.btn_.origin]:[color:var(--color-primary,_#fa550f)] [&_.goods-fail-btn_.btn_.origin]:[border:1rpx_solid_#fa550f] [&_.goods-fail-btn_.btn_.origin]:[border:1rpx_solid_var(--color-primary,_#fa550f)] [&_.goods-fail-btn_.btn_.limit]:[color:#fa550f] [&_.goods-fail-btn_.btn_.limit]:[color:var(--color-primary,_#fa550f)] [&_.goods-fail-btn_.btn_.limit]:[border:1rpx_solid_#fa550f] [&_.goods-fail-btn_.btn_.limit]:[border:1rpx_solid_var(--color-primary,_#fa550f)] [&_.goods-fail-btn_.btn_.limit]:[flex-grow:1]">
+  <block wx:if="{{settleDetailData.limitGoodsList && settleDetailData.limitGoodsList.length >0}}">
+    <view class="title">限购商品信息</view>
+    <view class="info">以下商品限购数量，建议您修改商品数量</view>
+  </block>
+  <block
+    wx:elif="{{settleDetailData.abnormalDeliveryGoodsList && settleDetailData.abnormalDeliveryGoodsList.length >0}}"
+  >
+    <view class="title">不支持配送</view>
+    <view class="info">以下店铺的商品不支持配送，请更改地址或去掉对应店铺商品再进行结算</view>
+  </block>
+  <block wx:elif="{{order.isShowKeepPay(settleDetailData)}}">
+    <view class="title">部分商品库存不足或失效</view>
+    <view class="info">请返回购物车重新选择商品，如果继续结算将自动忽略库存不足或失效的商品。</view>
+  </block>
+  <block wx:elif="{{settleDetailData.inValidGoodsList && settleDetailData.inValidGoodsList.length > 0}}">
+    <view class="title">全部商品库存不足或失效</view>
+    <view class="info">请返回购物车重新选择商品</view>
+  </block>
+  <scroll-view
+    scroll-y="true"
+    style="max-height: 500rpx"
+    bindscrolltoupper="upper"
+    bindscrolltolower="lower"
+    bindscroll="scroll"
+  >
+    <view class="goods-list" wx:for="{{goodsList}}" wx:for-item="goods" wx:key="index">
+      <wr-order-card wx:if="{{goods}}" order="{{goods}}">
+        <wr-order-goods-card
+          wx:for="{{goods.unSettlementGoods}}"
+          wx:key="id"
+          wx:for-item="goods"
+          wx:for-index="gIndex"
+          goods="{{goods}}"
+          no-top-line="{{gIndex === 0}}"
+        />
+      </wr-order-card>
+    </view>
+  </scroll-view>
+  <view class="goods-fail-btn">
+    <view bindtap="onCard" data-item="cart" class="btn {{order.isOnlyBack(settleDetailData) ? 'limit' : ''}}">
+      返回购物车
+    </view>
+    <view wx:if="{{order.isShowChangeAddress(settleDetailData)}}" bindtap="onDelive" class="btn origin">
+      修改配送地址
+    </view>
+    <view wx:elif="{{order.isShowKeepPay(settleDetailData)}}" bindtap="onCard" data-item="orderSure" class="btn origin">
+      继续结算
+    </view>
+  </view>
+</view>
+</template>
+
+<json>
+{
+  "component": true,
+  "usingComponents": {
+    "wr-order-card": "/pages/order/components/order-card/index",
+    "wr-goods-card": "/components/goods-card/index",
+    "wr-order-goods-card": "/pages/order/components/order-goods-card/index"
+  }
+}</json>

package/templates/wevu-retail/src/pages/order/components/order-button-bar/index.vue

@@ -0,0 +1,262 @@
+<script lang="ts">
+import Toast from 'tdesign-miniprogram/toast/index';
+import Dialog from 'tdesign-miniprogram/dialog/index';
+import { OrderButtonTypes } from '../../config';
+
+Component({
+  options: {
+    addGlobalClass: true,
+  },
+  properties: {
+    order: {
+      type: Object,
+      observer(order) {
+        // 判定有传goodsIndex ，则认为是商品button bar, 仅显示申请售后按钮
+        if (this.properties?.goodsIndex !== null) {
+          const goods = order.goodsList[Number(this.properties.goodsIndex)];
+          this.setData({
+            buttons: {
+              left: [],
+              right: (goods.buttons || []).filter((b) => b.type == OrderButtonTypes.APPLY_REFUND),
+            },
+          });
+          return;
+        }
+        // 订单的button bar 不显示申请售后按钮
+        const buttonsRight = (order.buttons || [])
+          // .filter((b) => b.type !== OrderButtonTypes.APPLY_REFUND)
+          .map((button) => {
+            //邀请好友拼团按钮
+            if (button.type === OrderButtonTypes.INVITE_GROUPON && order.groupInfoVo) {
+              const {
+                groupInfoVo: { groupId, promotionId, remainMember, groupPrice },
+                goodsList,
+              } = order;
+              const goodsImg = goodsList[0] && goodsList[0].imgUrl;
+              const goodsName = goodsList[0] && goodsList[0].name;
+              return {
+                ...button,
+                openType: 'share',
+                dataShare: {
+                  goodsImg,
+                  goodsName,
+                  groupId,
+                  promotionId,
+                  remainMember,
+                  groupPrice,
+                  storeId: order.storeId,
+                },
+              };
+            }
+            return button;
+          });
+        // 删除订单按钮单独挪到左侧
+        const deleteBtnIndex = buttonsRight.findIndex((b) => b.type === OrderButtonTypes.DELETE);
+        let buttonsLeft = [];
+        if (deleteBtnIndex > -1) {
+          buttonsLeft = buttonsRight.splice(deleteBtnIndex, 1);
+        }
+        this.setData({
+          buttons: {
+            left: buttonsLeft,
+            right: buttonsRight,
+          },
+        });
+      },
+    },
+    goodsIndex: {
+      type: Number,
+      value: null,
+    },
+    isBtnMax: {
+      type: Boolean,
+      value: false,
+    },
+  },
+
+  data: {
+    order: {},
+    buttons: {
+      left: [],
+      right: [],
+    },
+  },
+
+  methods: {
+    // 点击【订单操作】按钮，根据按钮类型分发
+    onOrderBtnTap(e) {
+      const { type } = e.currentTarget.dataset;
+      switch (type) {
+        case OrderButtonTypes.DELETE:
+          this.onDelete(this.data.order);
+          break;
+        case OrderButtonTypes.CANCEL:
+          this.onCancel(this.data.order);
+          break;
+        case OrderButtonTypes.CONFIRM:
+          this.onConfirm(this.data.order);
+          break;
+        case OrderButtonTypes.PAY:
+          this.onPay(this.data.order);
+          break;
+        case OrderButtonTypes.APPLY_REFUND:
+          this.onApplyRefund(this.data.order);
+          break;
+        case OrderButtonTypes.VIEW_REFUND:
+          this.onViewRefund(this.data.order);
+          break;
+        case OrderButtonTypes.COMMENT:
+          this.onAddComment(this.data.order);
+          break;
+        case OrderButtonTypes.INVITE_GROUPON:
+          //分享邀请好友拼团
+          break;
+        case OrderButtonTypes.REBUY:
+          this.onBuyAgain(this.data.order);
+      }
+    },
+
+    onCancel() {
+      Toast({
+        context: this,
+        selector: '#t-toast',
+        message: '你点击了取消订单',
+        icon: 'check-circle',
+      });
+    },
+
+    onConfirm() {
+      Dialog.confirm({
+        title: '确认是否已经收到货？',
+        content: '',
+        confirmBtn: '确认收货',
+        cancelBtn: '取消',
+      })
+        .then(() => {
+          Toast({
+            context: this,
+            selector: '#t-toast',
+            message: '你确认了确认收货',
+            icon: 'check-circle',
+          });
+        })
+        .catch(() => {
+          Toast({
+            context: this,
+            selector: '#t-toast',
+            message: '你取消了确认收货',
+            icon: 'check-circle',
+          });
+        });
+    },
+
+    onPay() {
+      Toast({
+        context: this,
+        selector: '#t-toast',
+        message: '你点击了去支付',
+        icon: 'check-circle',
+      });
+    },
+
+    onBuyAgain() {
+      Toast({
+        context: this,
+        selector: '#t-toast',
+        message: '你点击了再次购买',
+        icon: 'check-circle',
+      });
+    },
+
+    onApplyRefund(order) {
+      const goods = order.goodsList[this.properties.goodsIndex];
+      const params = {
+        orderNo: order.orderNo,
+        skuId: goods?.skuId ?? '19384938948343',
+        spuId: goods?.spuId ?? '28373847384343',
+        orderStatus: order.status,
+        logisticsNo: order.logisticsNo,
+        price: goods?.price ?? 89,
+        num: goods?.num ?? 89,
+        createTime: order.createTime,
+        orderAmt: order.totalAmount,
+        payAmt: order.amount,
+        canApplyReturn: true,
+      };
+      const paramsStr = Object.keys(params)
+        .map((k) => `${k}=${params[k]}`)
+        .join('&');
+      wx.navigateTo({ url: `/pages/order/apply-service/index?${paramsStr}` });
+    },
+
+    onViewRefund() {
+      Toast({
+        context: this,
+        selector: '#t-toast',
+        message: '你点击了查看退款',
+        icon: '',
+      });
+    },
+
+    /** 添加订单评论 */
+    onAddComment(order) {
+      const imgUrl = order?.goodsList?.[0]?.thumb;
+      const title = order?.goodsList?.[0]?.title;
+      const specs = order?.goodsList?.[0]?.specs;
+      wx.navigateTo({
+        url: `/pages/goods/comments/create/index?specs=${specs}&title=${title}&orderNo=${order?.orderNo}&imgUrl=${imgUrl}`,
+      });
+    },
+  },
+});
+</script>
+
+<template>
+<view class="btn-bar [display:flex] [justify-content:space-between] [align-items:center] [line-height:1] [&_.order-btn]:[line-height:1] [&_.right]:[display:flex] [&_.right]:[align-items:center] [&_.t-button]:[width:160rpx] [&_.t-button]:[font-weight:400] [&_.t-button]:[margin-left:24rpx] [&_.t-button--max]:[width:176rpx] [&_.t-button--max]:[margin-left:24rpx] [&_.left_.delete-btn]:[font-size:22rpx]">
+  <view class="left">
+    <t-button
+      wx:for="{{buttons.left}}"
+      wx:key="type"
+      wx:for-item="leftBtn"
+      size="extra-small"
+      shape="round"
+      t-class="{{isBtnMax ? 't-button--max':'t-button'}}  order-btn delete-btn"
+      hover-class="order-btn--active"
+      catchtap="onOrderBtnTap"
+      data-type="{{leftBtn.type}}"
+    >
+      {{leftBtn.name}}
+    </t-button>
+  </view>
+  <view class="right">
+    <t-button
+      wx:for="{{buttons.right}}"
+      wx:key="type"
+      wx:for-item="rightBtn"
+      size="extra-small"
+      variant="{{ rightBtn.primary ? 'base' : 'outline'}}"
+      shape="round"
+      t-class="{{isBtnMax ? 't-button--max':'t-button'}} order-btn {{rightBtn.primary ? 'primary' : 'normal'}}"
+      hover-class="order-btn--active"
+      catchtap="onOrderBtnTap"
+      data-type="{{rightBtn.type}}"
+      open-type="{{ rightBtn.openType }}"
+      data-share="{{ rightBtn.dataShare }}"
+    >
+      {{rightBtn.name}}
+    </t-button>
+  </view>
+</view>
+<t-toast id="t-toast" />
+<t-dialog id="t-dialog" />
+</template>
+
+<json>
+{
+  "component": true,
+  "usingComponents": {
+    "t-button": "tdesign-miniprogram/button/button",
+    "t-toast": "tdesign-miniprogram/toast/toast",
+    "t-dialog": "tdesign-miniprogram/dialog/dialog"
+  }
+}</json>

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

@@ -0,0 +1,126 @@
+<script lang="ts">
+Component({
+  externalClasses: ['wr-class', 'header-class', 'title-class'],
+
+  options: {
+    multipleSlots: true,
+  },
+
+  relations: {
+    '../order-goods-card/index': {
+      type: 'descendant',
+      linked(target) {
+        this.children.push(target);
+        this.setHidden();
+      },
+      unlinked(target) {
+        this.children = this.children.filter((item) => item !== target);
+      },
+    },
+    '../goods-card/index': {
+      type: 'descendant',
+      linked(target) {
+        this.children.push(target);
+        this.setHidden();
+      },
+      unlinked(target) {
+        this.children = this.children.filter((item) => item !== target);
+      },
+    },
+    '../specs-goods-card/index': {
+      type: 'descendant',
+      linked(target) {
+        this.children.push(target);
+        this.setHidden();
+      },
+      unlinked(target) {
+        this.children = this.children.filter((item) => item !== target);
+      },
+    },
+  },
+
+  created() {
+    this.children = [];
+  },
+
+  properties: {
+    order: {
+      type: Object,
+      observer(order) {
+        if (!order?.goodsList) return;
+        const goodsCount = order.goodsList.length;
+        this.setData({
+          goodsCount,
+        });
+      },
+    },
+    useTopRightSlot: Boolean,
+    //  初始显示的商品数量，超出部分会隐藏。
+    defaultShowNum: {
+      type: null,
+      value: 10,
+    },
+    useLogoSlot: {
+      type: Boolean,
+      value: false,
+    },
+  },
+
+  data: {
+    showAll: true, // 是否展示所有商品，设置为false，可以使用展开更多功能
+    goodsCount: 0,
+  },
+
+  methods: {
+    setHidden() {
+      const isHidden = !this.data.showAll;
+      this.children.forEach(
+        (c, i) => i >= this.properties.defaultShowNum && c.setHidden(isHidden),
+      );
+    },
+
+    onOrderCardTap() {
+      this.triggerEvent('cardtap');
+    },
+
+    onShowMoreTap() {
+      this.setData({ showAll: true }, () => this.setHidden());
+      this.triggerEvent('showall');
+    },
+  },
+});
+</script>
+
+<template>
+<view class="order-card wr-class [margin:24rpx_0] [padding:24rpx_32rpx_24rpx] [background-color:white] [border-radius:8rpx] [&_.header]:[display:flex] [&_.header]:[justify-content:space-between] [&_.header]:[align-items:center] [&_.header]:[margin-bottom:24rpx] [&_.header_.store-name]:[font-size:28rpx] [&_.header_.store-name]:[font-weight:normal] [&_.header_.store-name]:[color:#333333] [&_.header_.store-name]:[display:flex] [&_.header_.store-name]:[align-items:center] [&_.header_.store-name]:[line-height:40rpx] [&_.header_.store-name__logo]:[margin-right:16rpx] [&_.header_.store-name__logo]:[font-size:40rpx] [&_.header_.store-name__logo]:[width:48rpx] [&_.header_.store-name__logo]:[height:48rpx] [&_.header_.store-name__label]:[max-width:500rpx] [&_.header_.store-name__label]:[overflow:hidden] [&_.header_.store-name__label]:[text-overflow:ellipsis] [&_.header_.store-name__label]:[word-break:break-all] [&_.header_.store-name__label]:[white-space:nowrap] [&_.header_.order-status]:[font-size:26rpx] [&_.header_.order-status]:[line-height:40rpx] [&_.header_.order-status]:[color:#fa4126] [&_.more-mask]:[padding:20rpx_0] [&_.more-mask]:[text-align:center] [&_.more-mask]:[background-color:white] [&_.more-mask]:[color:#fa4126] [&_.more-mask]:[font-size:24rpx]" bind:tap="onOrderCardTap">
+  <view class="header header-class">
+    <view class="store-name title-class">
+      <block wx:if="{{!useLogoSlot}}">
+        <t-image wx:if="{{order.storeLogo}}" t-class="store-name__logo" src="{{order.storeLogo}}" />
+        <t-icon wx:else prefix="wr" class="store-name__logo" name="store" size="40rpx" color="inherit" />
+        <view class="store-name__label">{{order.storeName}}</view>
+      </block>
+      <slot wx:else name="top-left" />
+    </view>
+    <view wx:if="{{!useTopRightSlot}}" class="order-status">{{order.statusDesc}}</view>
+    <slot wx:else name="top-right" />
+  </view>
+  <view class="slot-wrapper">
+    <slot />
+  </view>
+  <view wx:if="{{goodsCount > defaultShowNum && !showAll}}" class="more-mask" catchtap="onShowMoreTap">
+    展开商品信息（共 {{goodsCount}} 个）
+    <t-icon name="chevron-down" size="32rpx" />
+  </view>
+  <slot name="more" />
+</view>
+</template>
+
+<json>
+{
+  "component": true,
+  "usingComponents": {
+    "t-image": "/components/webp-image/index",
+    "t-icon": "tdesign-miniprogram/icon/icon"
+  }
+}</json>

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

@@ -0,0 +1,86 @@
+<script lang="ts">
+Component({
+  options: {
+    addGlobalClass: true,
+    multipleSlots: true, // 在组件定义时的选项中启用多slot支持
+  },
+
+  relations: {
+    '../order-card/index': {
+      type: 'ancestor',
+      linked(target) {
+        this.parent = target;
+      },
+    },
+  },
+
+  properties: {
+    goods: Object,
+    thumbWidth: Number,
+    thumbHeight: Number,
+    thumbWidthInPopup: Number,
+    thumbHeightInPopup: Number,
+    noTopLine: Boolean,
+    step: Boolean,
+    stepDisabled: Boolean,
+  },
+
+  data: {
+    goods: {},
+    hidden: false,
+  },
+
+  methods: {
+    setHidden(hidden) {
+      if (this.data.hidden === hidden) return;
+      this.setData({ hidden });
+    },
+
+    onNumChange(e) {
+      const { value } = e.detail;
+      this.triggerEvent('num-change', { value });
+    },
+  },
+});
+</script>
+
+<template>
+<goods-card
+  class="order-goods-card {{ step ? 'order-goods-card--step' : '' }}"
+  wx:if="{{!hidden}}"
+  data="{{goods}}"
+  thumb-width="{{thumbWidth}}"
+  thumb-height="{{thumbHeight}}"
+  thumb-width-in-popup="{{thumbWidthInPopup}}"
+  thumb-height-in-popup="{{thumbHeightInPopup}}"
+>
+  <t-stepper
+    wx:if="{{ step }}"
+    slot="append-body"
+    disabled="{{ step ? stepDisabled : ''}}"
+    value="{{goods.quantity}}"
+    min="{{ 1 }}"
+    theme="filled"
+    bindminus="onNumChange"
+    bindplus="onNumChange"
+    bindblur="onNumChange"
+  />
+  <!-- 透传good-card组件的slot -->
+  <slot name="thumb-cover" slot="thumb-cover" />
+  <slot name="after-title" slot="after-title" />
+  <slot name="after-desc" slot="after-desc" />
+  <slot name="price-prefix" slot="price-prefix" />
+  <slot name="append-body" slot="append-body" />
+  <slot name="footer" slot="footer" />
+  <slot name="append-card" slot="append-card" />
+</goods-card>
+</template>
+
+<json>
+{
+  "component": true,
+  "usingComponents": {
+    "t-stepper": "tdesign-miniprogram/stepper/stepper",
+    "goods-card": "../specs-goods-card/index"
+  }
+}</json>