create-weapp-vite 2.0.30 → 2.0.32

package/templates/wevu-retail/src/pages/cart/index.vue

@@ -0,0 +1,342 @@
+<script lang="ts">
+import Dialog from 'tdesign-miniprogram/dialog/index';
+import Toast from 'tdesign-miniprogram/toast/index';
+import { fetchCartGroupData } from '../../services/cart/cart';
+
+Page({
+  data: {
+    cartGroupData: null,
+  },
+
+  // 调用自定义tabbar的init函数，使页面与tabbar激活状态保持一致
+  onShow() {
+    this.getTabBar().init();
+  },
+
+  onLoad() {
+    this.refreshData();
+  },
+
+  refreshData() {
+    this.getCartGroupData().then((res) => {
+      let isEmpty = true;
+      const cartGroupData = res.data;
+      // 一些组件中需要的字段可能接口并没有返回，或者返回的数据结构与预期不一致，需要在此先对数据做一些处理
+      // 统计门店下加购的商品是否全选、是否存在缺货/无货
+      for (const store of cartGroupData.storeGoods) {
+        store.isSelected = true; // 该门店已加购商品是否全选
+        store.storeStockShortage = false; // 该门店已加购商品是否存在库存不足
+        if (!store.shortageGoodsList) {
+          store.shortageGoodsList = []; // 该门店已加购商品如果库存为0需单独分组
+        }
+        for (const activity of store.promotionGoodsList) {
+          activity.goodsPromotionList = activity.goodsPromotionList.filter((goods) => {
+            goods.originPrice = undefined;
+
+            // 统计是否有加购数大于库存数的商品
+            if (goods.quantity > goods.stockQuantity) {
+              store.storeStockShortage = true;
+            }
+            // 统计是否全选
+            if (!goods.isSelected) {
+              store.isSelected = false;
+            }
+            // 库存为0（无货）的商品单独分组
+            if (goods.stockQuantity > 0) {
+              return true;
+            }
+            store.shortageGoodsList.push(goods);
+            return false;
+          });
+
+          if (activity.goodsPromotionList.length > 0) {
+            isEmpty = false;
+          }
+        }
+        if (store.shortageGoodsList.length > 0) {
+          isEmpty = false;
+        }
+      }
+      cartGroupData.invalidGoodItems = cartGroupData.invalidGoodItems.map((goods) => {
+        goods.originPrice = undefined;
+        return goods;
+      });
+      cartGroupData.isNotEmpty = !isEmpty;
+      this.setData({ cartGroupData });
+    });
+  },
+
+  findGoods(spuId, skuId) {
+    let currentStore;
+    let currentActivity;
+    let currentGoods;
+    const { storeGoods } = this.data.cartGroupData;
+    for (const store of storeGoods) {
+      for (const activity of store.promotionGoodsList) {
+        for (const goods of activity.goodsPromotionList) {
+          if (goods.spuId === spuId && goods.skuId === skuId) {
+            currentStore = store;
+            currentActivity = currentActivity;
+            currentGoods = goods;
+            return {
+              currentStore,
+              currentActivity,
+              currentGoods,
+            };
+          }
+        }
+      }
+    }
+    return {
+      currentStore,
+      currentActivity,
+      currentGoods,
+    };
+  },
+
+  // 注：实际场景时应该调用接口获取购物车数据
+  getCartGroupData() {
+    const { cartGroupData } = this.data;
+    if (!cartGroupData) {
+      return fetchCartGroupData();
+    }
+    return Promise.resolve({ data: cartGroupData });
+  },
+
+  // 选择单个商品
+  // 注：实际场景时应该调用接口更改选中状态
+  selectGoodsService({ spuId, skuId, isSelected }) {
+    this.findGoods(spuId, skuId).currentGoods.isSelected = isSelected;
+    return Promise.resolve();
+  },
+
+  // 全选门店
+  // 注：实际场景时应该调用接口更改选中状态
+  selectStoreService({ storeId, isSelected }) {
+    const currentStore = this.data.cartGroupData.storeGoods.find((s) => s.storeId === storeId);
+    currentStore.isSelected = isSelected;
+    currentStore.promotionGoodsList.forEach((activity) => {
+      activity.goodsPromotionList.forEach((goods) => {
+        goods.isSelected = isSelected;
+      });
+    });
+    return Promise.resolve();
+  },
+
+  // 加购数量变更
+  // 注：实际场景时应该调用接口
+  changeQuantityService({ spuId, skuId, quantity }) {
+    this.findGoods(spuId, skuId).currentGoods.quantity = quantity;
+    return Promise.resolve();
+  },
+
+  // 删除加购商品
+  // 注：实际场景时应该调用接口
+  deleteGoodsService({ spuId, skuId }) {
+    function deleteGoods(group) {
+      for (const gindex in group) {
+        const goods = group[gindex];
+        if (goods.spuId === spuId && goods.skuId === skuId) {
+          group.splice(gindex, 1);
+          return gindex;
+        }
+      }
+      return -1;
+    }
+    const { storeGoods, invalidGoodItems } = this.data.cartGroupData;
+    for (const store of storeGoods) {
+      for (const activity of store.promotionGoodsList) {
+        if (deleteGoods(activity.goodsPromotionList) > -1) {
+          return Promise.resolve();
+        }
+      }
+      if (deleteGoods(store.shortageGoodsList) > -1) {
+        return Promise.resolve();
+      }
+    }
+    if (deleteGoods(invalidGoodItems) > -1) {
+      return Promise.resolve();
+    }
+    return Promise.reject();
+  },
+
+  // 清空失效商品
+  // 注：实际场景时应该调用接口
+  clearInvalidGoodsService() {
+    this.data.cartGroupData.invalidGoodItems = [];
+    return Promise.resolve();
+  },
+
+  onGoodsSelect(e) {
+    const {
+      goods: { spuId, skuId },
+      isSelected,
+    } = e.detail;
+    const { currentGoods } = this.findGoods(spuId, skuId);
+    Toast({
+      context: this,
+      selector: '#t-toast',
+      message: `${isSelected ? '选择' : '取消'}"${
+        currentGoods.title.length > 5 ? `${currentGoods.title.slice(0, 5)}...` : currentGoods.title
+      }"`,
+      icon: '',
+    });
+    this.selectGoodsService({ spuId, skuId, isSelected }).then(() => this.refreshData());
+  },
+
+  onStoreSelect(e) {
+    const {
+      store: { storeId },
+      isSelected,
+    } = e.detail;
+    this.selectStoreService({ storeId, isSelected }).then(() => this.refreshData());
+  },
+
+  onQuantityChange(e) {
+    const {
+      goods: { spuId, skuId },
+      quantity,
+    } = e.detail;
+    const { currentGoods } = this.findGoods(spuId, skuId);
+    const stockQuantity = currentGoods.stockQuantity > 0 ? currentGoods.stockQuantity : 0; // 避免后端返回的是-1
+    // 加购数量超过库存数量
+    if (quantity > stockQuantity) {
+      // 加购数量等于库存数量的情况下继续加购
+      if (currentGoods.quantity === stockQuantity && quantity - stockQuantity === 1) {
+        Toast({
+          context: this,
+          selector: '#t-toast',
+          message: '当前商品库存不足',
+        });
+        return;
+      }
+      Dialog.confirm({
+        title: '商品库存不足',
+        content: `当前商品库存不足，最大可购买数量为${stockQuantity}件`,
+        confirmBtn: '修改为最大可购买数量',
+        cancelBtn: '取消',
+      })
+        .then(() => {
+          this.changeQuantityService({
+            spuId,
+            skuId,
+            quantity: stockQuantity,
+          }).then(() => this.refreshData());
+        })
+        .catch(() => {});
+      return;
+    }
+    this.changeQuantityService({ spuId, skuId, quantity }).then(() => this.refreshData());
+  },
+
+  goCollect() {
+    /** 活动肯定有一个活动ID，用来获取活动banner，活动商品列表等 */
+    const promotionID = '123';
+    wx.navigateTo({
+      url: `/pages/promotion/promotion-detail/index?promotion_id=${promotionID}`,
+    });
+  },
+
+  goGoodsDetail(e) {
+    const { spuId, storeId } = e.detail.goods;
+    wx.navigateTo({
+      url: `/pages/goods/details/index?spuId=${spuId}&storeId=${storeId}`,
+    });
+  },
+
+  clearInvalidGoods() {
+    // 实际场景时应该调用接口清空失效商品
+    this.clearInvalidGoodsService().then(() => this.refreshData());
+  },
+
+  onGoodsDelete(e) {
+    const {
+      goods: { spuId, skuId },
+    } = e.detail;
+    Dialog.confirm({
+      content: '确认删除该商品吗?',
+      confirmBtn: '确定',
+      cancelBtn: '取消',
+    }).then(() => {
+      this.deleteGoodsService({ spuId, skuId }).then(() => {
+        Toast({ context: this, selector: '#t-toast', message: '商品删除成功' });
+        this.refreshData();
+      });
+    });
+  },
+
+  onSelectAll(event) {
+    const { isAllSelected } = event?.detail ?? {};
+    Toast({
+      context: this,
+      selector: '#t-toast',
+      message: `${isAllSelected ? '取消' : '点击'}了全选按钮`,
+    });
+    // 调用接口改变全选
+  },
+
+  onToSettle() {
+    const goodsRequestList = [];
+    this.data.cartGroupData.storeGoods.forEach((store) => {
+      store.promotionGoodsList.forEach((promotion) => {
+        promotion.goodsPromotionList.forEach((m) => {
+          if (m.isSelected == 1) {
+            goodsRequestList.push(m);
+          }
+        });
+      });
+    });
+    wx.setStorageSync('order.goodsRequestList', JSON.stringify(goodsRequestList));
+    wx.navigateTo({ url: '/pages/order/order-confirm/index?type=cart' });
+  },
+  onGotoHome() {
+    wx.switchTab({ url: '/pages/home/home' });
+  },
+});
+</script>
+
+<template>
+<!-- 分层购物车 -->
+<block wx:if="{{cartGroupData.isNotEmpty}}">
+  <cart-group
+    store-goods="{{ cartGroupData.storeGoods }}"
+    invalid-good-items="{{ cartGroupData.invalidGoodItems }}"
+    bindselectgoods="onGoodsSelect"
+    bindselectstore="onStoreSelect"
+    bindchangequantity="onQuantityChange"
+    bindgocollect="goCollect"
+    bindgoodsclick="goGoodsDetail"
+    bindclearinvalidgoods="clearInvalidGoods"
+    binddelete="onGoodsDelete"
+  />
+
+  <view class="gap [height:100rpx] [width:100%]" />
+  <!-- 商品小计以及结算按钮 -->
+  <cart-bar
+    is-all-selected="{{cartGroupData.isAllSelected}}"
+    total-amount="{{cartGroupData.totalAmount}}"
+    total-goods-num="{{cartGroupData.selectedGoodsCount}}"
+    total-discount-amount="{{cartGroupData.totalDiscountAmount}}"
+    fixed="{{true}}"
+    bottomHeight="{{110}}"
+    bindhandleSelectAll="onSelectAll"
+    bindhandleToSettle="onToSettle"
+  />
+</block>
+<!-- 购物车空态 -->
+<cart-empty wx:else bind:handleClick="onGotoHome" />
+<t-toast id="t-toast" />
+<t-dialog id="t-dialog" />
+</template>
+
+<json>
+{
+  "navigationBarTitleText": "购物车",
+  "usingComponents": {
+    "cart-group": "./components/cart-group/index",
+    "cart-empty": "./components/cart-empty/index",
+    "cart-bar": "./components/cart-bar/index",
+    "t-toast": "tdesign-miniprogram/toast/toast",
+    "t-dialog": "tdesign-miniprogram/dialog/dialog"
+  }
+}</json>

package/templates/wevu-retail/src/pages/category/components/goods-category/components/c-sidebar/README.md

@@ -0,0 +1,95 @@
+# Sidebar 侧边导航
+
+### 引入
+
+全局引入，在miniprogram根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
+
+```json
+// app.json 或 index.json
+"usingComponents": {
+  "wr-sidebar": "path/to/components/goods-category/wr-sidebar/index",
+  "wr-sidebar-item": "path/to/component/goods-category/wr-sidebar/wr-sidebar-item/index"
+}
+```
+
+## 代码演示
+
+### 基础用法
+
+通过在`wr-sidebar`上设置`activeKey`属性来控制选中项
+
+```html
+<wr-sidebar active-key="{{ activeKey }}" bind:change="onChange">
+  <wr-sidebar-item title="标签名称" />
+  <wr-sidebar-item title="标签名称" />
+  <wr-sidebar-item title="标签名称" />
+</wr-sidebar>
+```
+
+``` javascript
+Page({
+  data: {
+    activeKey: 0
+  },
+
+  onChange(event) {
+    wx.showToast({
+      icon: 'none',
+      title: `切换至第${event.detail}项`
+    });
+  }
+});
+```
+
+### 提示气泡（暂未实现）
+
+设置`dot`属性后，会在右上角展示一个小红点。设置`info`属性后，会在右上角展示相应的徽标
+
+```html
+<wr-sidebar active-key="{{ activeKey }}">
+  <wr-sidebar-item title="标签名称" dot />
+  <wr-sidebar-item title="标签名称" info="5" />
+  <wr-sidebar-item title="标签名称" info="99+" />
+</wr-sidebar>
+```
+
+## API
+
+### Sidebar Props
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+|-----------|-----------|-----------|-------------|-------------|
+| activeKey | 选中项的索引 | *string \| number* | `0` | - |
+
+### Sidebar Event
+
+| 事件名 | 说明 | 参数 |
+|------|------|------|
+| change | 切换选项时触发 | 当前选中选项的索引 |
+
+### Sidebar 外部样式类
+
+| 类名 | 说明 |
+|-----------|-----------|
+| custom-class | 根节点样式类 |
+
+### SidebarItem Props
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+|-----------|-----------|-----------|-------------|-------------|
+| title | 内容 | *string* | `''` | - |
+| disabled | 是否禁用 | | *boolean* | `false` | - |
+| dot | 是否显示右上角小红点 | *boolean* | `false` | - |
+| info | 提示消息 | *string \| number* | `''` | - |
+
+### SidebarItem Event
+
+| 事件名 | 说明 | 参数 |
+|------|------|------|
+| click | 点击徽章时触发 | 当前徽章的索引 |
+
+### SidebarItem 外部样式类
+
+| 类名 | 说明 |
+|-----------|-----------|
+| custom-class | 根节点样式类 |

package/templates/wevu-retail/src/pages/category/components/goods-category/components/c-sidebar/c-sidebar-item/index.vue

@@ -0,0 +1,73 @@
+<script lang="ts">
+Component({
+  relations: {
+    '../../c-sidebar/index': {
+      type: 'ancestor',
+      linked(target) {
+        this.parent = target;
+      },
+    },
+  },
+
+  externalClasses: ['custom-class'],
+  properties: {
+    title: String,
+    disabled: Boolean,
+  },
+
+  data: {
+    topRightRadius: false,
+    bottomRightRadius: false,
+  },
+
+  methods: {
+    setActive(selected) {
+      return this.setData({ selected });
+    },
+    onClick() {
+      const { parent } = this;
+
+      if (!parent || this.properties.disabled) {
+        return;
+      }
+
+      const index = parent.children.indexOf(this);
+
+      parent.setActive(index).then(() => {
+        this.triggerEvent('click', index);
+        parent.triggerEvent('change', { index });
+      });
+    },
+    setTopRightRadius(val) {
+      return this.setData({
+        topRightRadius: val,
+      });
+    },
+    setBottomRightRadius(val) {
+      return this.setData({
+        bottomRightRadius: val,
+      });
+    },
+  },
+});
+</script>
+
+<template>
+<view class="c-sidebar-item-container [background-color:white]">
+  <view
+    class="c-sidebar-item {{ selected ? 'active' : '' }} {{ disabled ? 'disabled' : '' }} {{topRightRadius ? 'top-right-radius' : ''}} {{bottomRightRadius ? 'bottom-right-radius' : ''}} custom-class [display:flex] [justify-content:center] [text-align:center] [background-color:#f5f5f5] [color:#222427] [padding:20rpx_0] [font-size:26rpx] [&_.active]:[position:relative] [&_.active]:[background:white] [&_.active_.c-sidebar-item__text]:[background-color:white] [&_.active_.c-sidebar-item__text]:[border-radius:36rpx] [&_.active_.c-sidebar-item__text]:[color:#fa4126] [border-top-right-radius:16rpx] [border-bottom-right-radius:16rpx]"
+    hover-class="c-sidebar-item--hover"
+    hover-stay-time="70"
+    bind:tap="onClick"
+  >
+    <view class="c-sidebar-item__text text-overflow [width:136rpx] [height:36rpx] [padding:8rpx_0] [line-height:36rpx] [text-align:center] [font-size:28rpx] [color:#666666] [overflow:hidden] [text-overflow:ellipsis] [white-space:nowrap]"> {{ title }} </view>
+  </view>
+</view>
+</template>
+
+<json>
+{
+  "component": true,
+  "usingComponents": {}
+}
+</json>

package/templates/wevu-retail/src/pages/category/components/goods-category/components/c-sidebar/index.vue

@@ -0,0 +1,121 @@
+<script lang="ts">
+Component({
+  relations: {
+    './c-sidebar-item/index': {
+      type: 'descendant',
+      linked(target) {
+        this.children.push(target);
+        this.setActive(this.properties.activeKey, true);
+      },
+      unlinked(target) {
+        this.children = this.children.filter((item) => item !== target);
+        this.setActive(this.properties.activeKey, true);
+      },
+    },
+  },
+
+  externalClasses: ['custom-class'],
+
+  properties: {
+    activeKey: {
+      type: Number,
+      value: 0,
+    },
+  },
+  observers: {
+    activeKey(newVal) {
+      this.setActive(newVal);
+    },
+  },
+
+  created() {
+    this.children = [];
+    this.currentActive = -1;
+    this.topRightRadiusItemIndexs = [];
+    this.bottomRightRadiusItemIndexs = [];
+  },
+
+  methods: {
+    setActive(activeKey, isChildrenChange) {
+      const {
+        children,
+        currentActive,
+        topRightRadiusItemIndexs: preTopRightRadiusItemIndexs,
+        bottomRightRadiusItemIndexs: preBottomRightRadiusItemIndexs,
+      } = this;
+
+      if (!children.length) {
+        return Promise.resolve();
+      }
+
+      if (activeKey === currentActive && !isChildrenChange) {
+        return Promise.resolve();
+      }
+
+      this.currentActive = activeKey;
+      this.topRightRadiusItemIndexs = this.getTopRightRadiusItemIndexs(activeKey, children);
+      this.bottomRightRadiusItemIndexs = this.getBottomRightRadiusItemIndexs(activeKey, children);
+
+      const stack = []; // 任务列表，存放调用子组件的setActive后返回的一堆promise
+      const pushChildTask = (itemIndex, method, value) => {
+        const child = children[itemIndex];
+        if (!child || typeof child[method] !== 'function') {
+          return;
+        }
+        stack.push(child[method](value));
+      };
+
+      // 将旧的选中项改为false
+      if (currentActive !== activeKey && children[currentActive]) {
+        stack.push(children[currentActive].setActive(false));
+      }
+
+      // 将新的选中项改为true
+      if (children[activeKey]) {
+        stack.push(children[activeKey].setActive(true));
+      }
+
+      preTopRightRadiusItemIndexs.forEach((item) => {
+        pushChildTask(item, 'setTopRightRadius', false);
+      });
+
+      preBottomRightRadiusItemIndexs.forEach((item) => {
+        pushChildTask(item, 'setBottomRightRadius', false);
+      });
+
+      this.topRightRadiusItemIndexs.forEach((item) => {
+        pushChildTask(item, 'setTopRightRadius', true);
+      });
+
+      this.bottomRightRadiusItemIndexs.forEach((item) => {
+        pushChildTask(item, 'setBottomRightRadius', true);
+      });
+
+      return Promise.all(stack);
+    },
+    getTopRightRadiusItemIndexs(activeKey, children) {
+      const { length } = children;
+      if (activeKey !== 0 && activeKey < length - 1) return [0, activeKey + 1];
+      if (activeKey !== 0) return [0];
+      if (activeKey < length - 1) return [activeKey + 1];
+      return [];
+    },
+    getBottomRightRadiusItemIndexs(activeKey) {
+      if (activeKey !== 0) return [activeKey - 1];
+      return [];
+    },
+  },
+});
+</script>
+
+<template>
+<scroll-view class="c-sidebar custom-class [width:176rpx] [height:100vh]" scroll-y>
+  <slot />
+</scroll-view>
+</template>
+
+<json>
+{
+  "component": true
+}
+</json>

package/templates/wevu-retail/src/pages/category/components/goods-category/components/c-tabbar/c-tabbar-more/index.vue

@@ -0,0 +1,74 @@
+<script lang="ts">
+Component({
+  externalClasses: ['custom-class'],
+
+  properties: {
+    tabList: Array,
+  },
+
+  data: {
+    unfolded: false,
+    boardMaxHeight: null,
+  },
+  attached() {
+    wx.createSelectorQuery()
+      .in(this)
+      .select('.c-tabbar-more')
+      .boundingClientRect((rect) => {
+        this.setData({ boardMaxHeight: rect.height });
+      })
+      .exec();
+  },
+
+  methods: {
+    changeFold() {
+      this.setData({
+        unfolded: !this.data.unfolded,
+      });
+      const { unfolded } = this.data;
+      this.triggerEvent('change', { unfolded });
+    },
+
+    onSelect(event) {
+      const activeKey = event.currentTarget.dataset.index;
+      this.triggerEvent('select', activeKey);
+      this.changeFold();
+    },
+  },
+});
+</script>
+
+<template>
+<view class="c-tabbar-more [width:100%] [height:calc(100%_-_var(--tabbar-height,_100rpx))] [position:absolute] [top:var(--tabbar-height,_100rpx)]">
+  <view class="c-tabbar-more__btn [position:absolute] [top:calc(0rpx_-_var(--tabbar-height,_100rpx))] [right:0] [width:80rpx] [height:var(--tabbar-height,_100rpx)] [line-height:var(--tabbar-height,_100rpx)] [background-color:var(--tabbar-background-color,_white)] [box-shadow:-20rpx_0_20rpx_-10rpx_var(--tabbar-background-color,_white)] [text-align:center] [&_.market]:[font-size:20rpx]" bind:tap="changeFold">
+    <view class="wr {{unfolded ? 'wr-arrow-up':'wr-arrow-down'}}"></view>
+  </view>
+  <view class="t-tabbar-more__boardwrapper [position:absolute] [top:0] [left:0] [width:100%] [height:100%]" wx:if="{{ unfolded }}">
+    <view class="t-tabbar-more__mask [width:100%] [height:100%] [background-color:rgba(0,_0,_0,_0.5)]"></view>
+    <scroll-view
+      class="c-tabbar-more__board [position:absolute] [top:0] [left:0] [width:100%] [max-height:100%]"
+      style="{{ boardMaxHeight ? 'height:' + boardMaxHeight + 'px;' : '' }}"
+      scroll-y
+    >
+      <view class="c-tabbar-more__boardinner [padding:20rpx_0_20rpx_20rpx] [background-color:var(--tabbar-background-color,_white)] [display:flex] [flex-flow:row_wrap]">
+        <view
+          class="c-tabbar-more__item text-overflow [margin:0_20rpx_20rpx_0] [flex:0_0_calc((100%_-_60rpx)_/_3)] [box-sizing:border-box] [padding:0_10rpx] [border-radius:30rpx] [height:60rpx] [line-height:60rpx] [text-align:center] [font-size:22rpx] [color:#5d5d5d] [background-color:#eee] [overflow:hidden] [text-overflow:ellipsis] [white-space:nowrap]"
+          wx:for="{{ tabList }}"
+          wx:key="index"
+          data-index="{{ index }}"
+          bind:tap="onSelect"
+        >
+          {{ item.name }}
+        </view>
+      </view>
+    </scroll-view>
+  </view>
+</view>
+</template>
+
+<json>
+{
+  "component": true,
+  "usingComponents": {}
+}
+</json>