@10yun/cv-mobile-ui 0.5.44 → 0.5.45

package/uview-plus/components/u-goods-sku/style.scss

@@ -0,0 +1,120 @@
+.up-goods-sku {
+  background-color: #fff;
+  overflow: hidden;
+
+  .up-goods-sku-container {
+    padding: 4rpx 30rpx;
+  }
+
+  &__header {
+    display: flex;
+    flex-direction: row;
+    padding: 30rpx 0;
+    position: relative;
+
+    &__image {
+      width: 180rpx;
+      height: 180rpx;
+      border-radius: 10rpx;
+      overflow: hidden;
+      margin-right: 20rpx;
+
+      image {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    &__info {
+      flex: 1;
+
+      &__price {
+        display: flex;
+        flex-direction: row;
+        align-items: baseline;
+        margin-bottom: 20rpx;
+
+        &__symbol {
+          font-size: 24rpx;
+          color: #fa3534;
+          margin-right: 4rpx;
+        }
+
+        &__value {
+          font-size: 36rpx;
+          color: #fa3534;
+          font-weight: bold;
+        }
+      }
+
+      &__stock {
+        font-size: 26rpx;
+        color: #999;
+        margin-bottom: 20rpx;
+      }
+
+      &__selected {
+        font-size: 26rpx;
+        color: #333;
+      }
+    }
+  }
+
+  &__content {
+    max-height: 600rpx;
+    padding: 0 30rpx 30rpx 0;
+
+    &__item {
+      margin-bottom: 30rpx;
+
+      &__title {
+        font-size: 28rpx;
+        color: #333;
+        margin-bottom: 20rpx;
+      }
+
+      &__list {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+
+        &__item {
+          padding: 10rpx 20rpx;
+          border: 2rpx solid #eee;
+          border-radius: 10rpx;
+          margin-right: 20rpx;
+          margin-bottom: 20rpx;
+          font-size: 26rpx;
+          color: #333;
+
+          &--active {
+            border-color: #fa3534;
+            color: #fa3534;
+          }
+
+          &--disabled {
+            color: #ccc;
+            border-color: #eee;
+          }
+        }
+      }
+    }
+
+    &__count {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+      margin-top: 20rpx;
+
+      &__title {
+        font-size: 28rpx;
+        color: #333;
+      }
+    }
+  }
+
+  &__footer {
+    padding: 20rpx 0rpx 40rpx 0;
+  }
+}

package/uview-plus/components/u-goods-sku/u-goods-sku.vue

@@ -0,0 +1,287 @@
+<template>
+  <view class="up-goods-sku">
+    <view @click="open">
+      <slot name="trigger"></slot>
+    </view>
+    <up-popup
+      v-model:show="show"
+      mode="bottom"
+      :closeable="pageInline ? false : closeable"
+      :pageInline="pageInline"
+      :border-radius="20"
+      @close="close"
+    >
+      <view class="up-goods-sku-container" :style="{ padding: pageInline ? '0px' : '' }">
+        <view class="up-goods-sku__header">
+          <slot name="header">
+            <view class="up-goods-sku__header__image">
+              <image :src="goodsInfo.image || goodsInfo.picture" mode="aspectFill"></image>
+            </view>
+            <view class="up-goods-sku__header__info">
+              <view class="up-goods-sku__header__info__price">
+                <text class="up-goods-sku__header__info__price__symbol">¥</text>
+                <text class="up-goods-sku__header__info__price__value">{{ price }}</text>
+              </view>
+              <view class="up-goods-sku__header__info__stock">
+                {{ t('up.goodsSku.stock') }} {{ stock }} {{ t('up.goodsSku.amount') }}
+              </view>
+              <view class="up-goods-sku__header__info__selected">{{ t('up.goodsSku.choosed') }}: {{ selectedSkuText }}</view>
+            </view>
+          </slot>
+        </view>
+        <scroll-view class="up-goods-sku__content" scroll-y>
+          <view v-for="(treeItem, index) in skuTree" :key="index" class="up-goods-sku__content__item">
+            <view class="up-goods-sku__content__item__title">{{ treeItem.label }}</view>
+            <view class="up-goods-sku__content__item__list">
+              <view
+                v-for="(leafItem, leafIndex) in treeItem.children"
+                :key="leafIndex"
+                class="up-goods-sku__content__item__list__item"
+                :class="{
+                  'up-goods-sku__content__item__list__item--active': isSelected(treeItem.name, leafItem.id),
+                  'up-goods-sku__content__item__list__item--disabled': isDisabled(treeItem.name, leafItem.id)
+                }"
+                @click="onSkuClick(treeItem.name, leafItem)"
+              >
+                <text>{{ leafItem.name }}</text>
+              </view>
+            </view>
+          </view>
+          <view class="up-goods-sku__content__count">
+            <view class="up-goods-sku__content__count__title">{{ t('"up.goodsSku.buyAmount"') }}</view>
+            <view class="up-goods-sku__content__count__control">
+              <up-number-box v-model="buyNum" :min="1" :max="maxBuyNum" :disabled="!canBuy" @change="onNumChange"></up-number-box>
+            </view>
+          </view>
+        </scroll-view>
+        <view class="up-goods-sku__footer">
+          <up-button type="primary" :disabled="!canBuy" @click="onConfirm">
+            {{ confirmText }}
+          </up-button>
+        </view>
+      </view>
+    </up-popup>
+  </view>
+</template>
+<script>
+import { t } from '../../libs/i18n';
+export default {
+  name: 'up-goods-sku',
+  props: {
+    // 商品信息
+    goodsInfo: {
+      type: Object,
+      default: () => ({})
+    },
+    // SKU树形结构
+    skuTree: {
+      type: Array,
+      default: () => []
+    },
+    // SKU列表
+    skuList: {
+      type: Array,
+      default: () => []
+    },
+    // 最大购买数量
+    maxBuy: {
+      type: Number,
+      default: 999
+    },
+    // 确认按钮文字
+    confirmText: {
+      type: String,
+      default: '确定'
+    },
+    // 是否显示关闭弹窗按钮
+    closeable: {
+      type: Boolean,
+      default: true
+    },
+    // 是否页面内联模式
+    pageInline: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      show: false,
+      // 已选择的SKU
+      selectedSku: {},
+      // 购买数量
+      buyNum: 1
+    };
+  },
+  computed: {
+    // 当前价格
+    price() {
+      const selectedSkuComb = this.getSelectedSkuComb();
+      if (selectedSkuComb) {
+        return selectedSkuComb.price || selectedSkuComb.price_fee;
+      }
+      return this.goodsInfo.price || this.goodsInfo.price_fee || 0;
+    },
+    // 当前库存
+    stock() {
+      const selectedSkuComb = this.getSelectedSkuComb();
+      if (selectedSkuComb) {
+        return selectedSkuComb.stock || selectedSkuComb.quantity;
+      }
+      return this.goodsInfo.stock || this.goodsInfo.quantity || 0;
+    },
+    // 最大购买数量
+    maxBuyNum() {
+      const stock = this.stock;
+      return stock > this.maxBuy ? this.maxBuy : stock;
+    },
+    // 是否可以购买
+    canBuy() {
+      const selectedSkuCount = Object.keys(this.selectedSku).length;
+      const skuTreeCount = this.skuTree.length;
+      return selectedSkuCount === skuTreeCount && this.buyNum > 0 && this.stock > 0;
+    },
+    // 已选SKU文字描述
+    selectedSkuText() {
+      const selected = [];
+      Object.keys(this.selectedSku).forEach((key) => {
+        const value = this.selectedSku[key];
+        if (value) {
+          this.skuTree.forEach((treeItem) => {
+            if (treeItem.name === key) {
+              treeItem.children.forEach((leafItem) => {
+                if (leafItem.id === value) {
+                  selected.push(leafItem.name);
+                }
+              });
+            }
+          });
+        }
+      });
+      return selected.join(', ');
+    }
+  },
+  watch: {},
+  emits: ['open', 'confirm', 'close'],
+  created() {
+    if (this.pageInline) {
+      this.show = true;
+    }
+  },
+  methods: {
+    t,
+    // 判断SKU是否被选中
+    isSelected(skuKey, skuValueId) {
+      return this.selectedSku[skuKey] === skuValueId;
+    },
+    // 判断SKU是否禁用
+    isDisabled(skuKey, skuValueId) {
+      // 构造一个临时的已选中SKU对象
+      const tempSelected = { ...this.selectedSku, [skuKey]: skuValueId };
+      // 检查是否还有未选择的SKU维度
+      const selectedCount = Object.keys(tempSelected).filter((key) => tempSelected[key]).length;
+      const totalSkuCount = this.skuTree.length;
+      // 如果所有SKU都已选择，则检查组合是否存在
+      if (selectedCount === totalSkuCount) {
+        return !this.getSkuComb(tempSelected);
+      }
+      // 检查当前选择的SKU是否会导致无法组成有效组合
+      for (let i = 0; i < this.skuList.length; i++) {
+        const sku = this.skuList[i];
+        let match = true;
+        // 检查已选中的SKU是否匹配
+        for (const key in tempSelected) {
+          if (tempSelected[key] && sku[key] !== tempSelected[key]) {
+            match = false;
+            break;
+          }
+        }
+        if (match) {
+          return false;
+        }
+      }
+      return true;
+    },
+    // SKU点击事件
+    onSkuClick(skuKey, skuValue) {
+      // 如果是禁用状态，直接返回
+      if (this.isDisabled(skuKey, skuValue.id)) {
+        return;
+      }
+      // 如果已选中，则取消选中
+      if (this.selectedSku[skuKey] === skuValue.id) {
+        this.$set(this.selectedSku, skuKey, '');
+      } else {
+        this.$set(this.selectedSku, skuKey, skuValue.id);
+      }
+    },
+    // 数量改变事件
+    onNumChange(e) {
+      this.buyNum = e.value;
+    },
+    // 获取选中的SKU组合
+    getSelectedSkuComb() {
+      return this.getSkuComb(this.selectedSku);
+    },
+    // 根据已选SKU获取组合信息
+    getSkuComb(selectedSku) {
+      const selected = { ...selectedSku };
+      // 过滤掉空值
+      Object.keys(selected).forEach((key) => {
+        if (!selected[key]) {
+          delete selected[key];
+        }
+      });
+      // 检查是否所有SKU都已选择
+      if (Object.keys(selected).length !== this.skuTree.length) {
+        return null;
+      }
+      // 查找匹配的SKU组合
+      for (let i = 0; i < this.skuList.length; i++) {
+        const sku = this.skuList[i];
+        let match = true;
+        for (const key in selected) {
+          if (sku[key] !== selected[key]) {
+            match = false;
+            break;
+          }
+        }
+        if (match) {
+          return sku;
+        }
+      }
+      return null;
+    },
+    // 重置选择
+    reset() {
+      this.selectedSku = {};
+      this.buyNum = 1;
+    },
+    open() {
+      this.show = true;
+      this.$emit('open');
+    },
+    // 关闭弹窗
+    close() {
+      this.false = true;
+      this.$emit('close');
+    },
+    // 确认选择
+    onConfirm() {
+      if (!this.canBuy) {
+        return;
+      }
+      const selectedSkuComb = this.getSelectedSkuComb();
+      this.$emit('confirm', {
+        sku: selectedSkuComb,
+        goodsInfo: this.goodsInfo,
+        num: this.buyNum,
+        selectedText: this.selectedSkuText
+      });
+    }
+  }
+};
+</script>
+<style scoped>
+@import './style.css';
+</style>

package/uview-plus/components/u-grid/style.css

@@ -1,29 +1,3 @@
-/* #ifndef APP-NVUE */
-.u-empty,
-.u-empty__wrap,
-.u-tabs,
-.u-tabs__wrapper,
-.u-tabs__wrapper__scroll-view-wrapper,
-.u-tabs__wrapper__scroll-view,
-.u-tabs__wrapper__nav,
-.u-tabs__wrapper__nav__line,
-.up-empty,
-.up-empty__wrap,
-.up-tabs,
-.up-tabs__wrapper,
-.up-tabs__wrapper__scroll-view-wrapper,
-.up-tabs__wrapper__scroll-view,
-.up-tabs__wrapper__nav,
-.up-tabs__wrapper__nav__line {
-  display: flex;
-  flex-direction: column;
-  flex-shrink: 0;
-  flex-grow: 0;
-  flex-basis: auto;
-  align-items: stretch;
-  align-content: flex-start;
-}
-/* #endif */
 .u-grid {
   /* #ifdef APP-NVUE */
   width: 100%;
@@ -40,7 +14,7 @@
   flex-wrap: wrap;
   align-items: center;
   /* #ifndef APP-NVUE */
-  display: grid;
+  display: grid !important;
   grid-gap: v-bind(gap);
   grid-template-columns: repeat(v-bind(col), 1fr);
   /* #endif */

package/uview-plus/components/u-grid/style.scss

@@ -1,4 +1,3 @@
-@import '../../libs/css/components.scss';
 $u-grid-width: 100% !default;
 .u-grid {
   /* #ifdef APP-NVUE */
@@ -15,7 +14,7 @@ $u-grid-width: 100% !default;
   // 在uni-app中应尽量避免使用flex布局以外的方式,因为nvue/uvue等方案都支持flex布局
   // 这里使用grid布局使用为目前20240409uni-app在抖音小程序开启virtualHost时有bug，存在事件失效问题。
   /* #ifndef APP-NVUE */
-  display: grid;
+  display: grid !important;
   grid-gap: v-bind(gap);
   grid-template-columns: repeat(v-bind(col), 1fr);
   /* #endif */

package/uview-plus/components/u-grid/u-grid.vue

@@ -11,7 +11,7 @@ import { addStyle, deepMerge } from '../../libs/function/index';
 /**
  * grid 宫格布局
  * @description 宫格组件一般用于同时展示多个同类项目的场景，可以给宫格的项目设置徽标组件(badge)，或者图标等，也可以扩展为左右滑动的轮播形式。
- * @tutorial https://ijry.github.io/uview-plus/components/grid.html
+ * @tutorial https://uview-plus.jiangruyi.com/components/grid.html
  * @property {String | Number}	col			宫格的列数（默认 3 ）
  * @property {Boolean}			border		是否显示宫格的边框（默认 false ）
  * @property {String}			align		宫格对齐方式，表现为数量少的时候，靠左，居中，还是靠右 （默认 'left' ）

package/uview-plus/components/u-grid-item/style.css

@@ -1,29 +1,3 @@
-/* #ifndef APP-NVUE */
-.u-empty,
-.u-empty__wrap,
-.u-tabs,
-.u-tabs__wrapper,
-.u-tabs__wrapper__scroll-view-wrapper,
-.u-tabs__wrapper__scroll-view,
-.u-tabs__wrapper__nav,
-.u-tabs__wrapper__nav__line,
-.up-empty,
-.up-empty__wrap,
-.up-tabs,
-.up-tabs__wrapper,
-.up-tabs__wrapper__scroll-view-wrapper,
-.up-tabs__wrapper__scroll-view,
-.up-tabs__wrapper__nav,
-.up-tabs__wrapper__nav__line {
-  display: flex;
-  flex-direction: column;
-  flex-shrink: 0;
-  flex-grow: 0;
-  flex-basis: auto;
-  align-items: stretch;
-  align-content: flex-start;
-}
-/* #endif */
 .u-grid-item {
   align-items: center;
   justify-content: center;

package/uview-plus/components/u-grid-item/style.scss

@@ -1,4 +1,3 @@
-@import '../../libs/css/components.scss';
 $u-grid-item-hover-class-opcatiy: 0.5 !default;
 $u-grid-item-margin-top: 1rpx !default;
 $u-grid-item-border-right-width: 0.5px !default;

package/uview-plus/components/u-grid-item/u-grid-item.vue

@@ -26,7 +26,7 @@ import { addStyle, deepMerge } from '../../libs/function/index';
 /**
  * gridItem 提示
  * @description 宫格组件一般用于同时展示多个同类项目的场景，可以给宫格的项目设置徽标组件(badge)，或者图标等，也可以扩展为左右滑动的轮播形式。搭配u-grid使用
- * @tutorial https://ijry.github.io/uview-plus/components/grid.html
+ * @tutorial https://uview-plus.jiangruyi.com/components/grid.html
  * @property {String | Number}	name		宫格的name ( 默认 null )
  * @property {String}			bgColor		宫格的背景颜色 （默认 'transparent' ）
  * @property {Object}			customStyle	自定义样式，对象形式

package/uview-plus/components/u-icon/_doc/readme.md

@@ -4,7 +4,7 @@
 
 基于字体的图标集，包含了大多数常见场景的图标，支持自定义(包括nvue)文字与图片图标等。
 
-## <a href="https://ijry.github.io/uview-plus/components/icon" target="_blank">查看文档</a>
+## <a href="https://uview-plus.jiangruyi.com/components/icon" target="_blank">查看文档</a>
 
 ## [更多插件，请关注u-ui组件库](https://ext.dcloud.net.cn/plugin?name=wuui) <small>（请不要 下载插件ZIP）</small>
-**如使用过程中有任何问题，或者您对u-ui有一些好的建议。<br>欢迎加入 [u-ui 交流群](https://ijry.github.io/uview-plus/components/qqFeedBack.html)**
+**如使用过程中有任何问题，或者您对u-ui有一些好的建议。<br>欢迎加入 [u-ui 交流群](https://uview-plus.jiangruyi.com/components/qqFeedBack.html)**

package/uview-plus/components/u-icon/icon.js

@@ -7,28 +7,30 @@
  * @lastTime     : 2021-08-20 18:00:14
  * @FilePath     : /u-view2.0/uview-ui/libs/config/props/icon.js
  */
-import config from '../../libs/config/config';
+import config from '../../libs/config/config'
 
-const { color } = config;
+const {
+    color
+} = config
 export default {
-  // icon组件
-  icon: {
-    name: '',
-    color: color['u-content-color'],
-    size: '16px',
-    bold: false,
-    index: '',
-    hoverClass: '',
-    customPrefix: 'uicon',
-    label: '',
-    labelPos: 'right',
-    labelSize: '15px',
-    labelColor: color['u-content-color'],
-    space: '3px',
-    imgMode: '',
-    width: '',
-    height: '',
-    top: 0,
-    stop: false
-  }
-};
+    // icon组件
+    icon: {
+        name: '',
+        color: color['u-content-color'],
+        size: '16px',
+        bold: false,
+        index: '',
+        hoverClass: '',
+        customPrefix: 'uicon',
+        label: '',
+        labelPos: 'right',
+        labelSize: '15px',
+        labelColor: color['u-content-color'],
+        space: '3px',
+        imgMode: '',
+        width: '',
+        height: '',
+        top: 0,
+        stop: false
+    }
+}