init

uni_modules/nutui-uni/components/categorypane/categorypane.ts

@@ -0,0 +1,37 @@
+import type { ExtractPropTypes } from 'vue'
+import { commonProps, isString, makeArrayProp, makeStringProp } from '../_utils'
+
+export interface ChildType {
+  catName?: string
+  catType?: number
+  [key: string]: any
+}
+export interface CustomType {
+  catName?: string
+  [key: string]: any
+}
+export const categorypaneProps = {
+  ...commonProps,
+  /**
+   * @description 分类模式：`classify`，`text`，`custom`
+   */
+  type: makeStringProp<'classify' | 'text' | 'custom'>('classify'),
+
+  /**
+   * @description 右侧展示当前分类数据
+   */
+  categoryChild: makeArrayProp<any>([]),
+
+  /**
+   * @description 自定义分类数据
+   */
+  customCategory: makeArrayProp<any>([]),
+}
+
+export type CategoryPaneProps = ExtractPropTypes<typeof categorypaneProps>
+
+export const categorypaneEmits = {
+  onChange: (sku: string | object) => isString(sku) || sku === undefined || sku instanceof Object,
+}
+
+export type CategoryPaneEmits = typeof categorypaneEmits

uni_modules/nutui-uni/components/categorypane/categorypane.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { computed, defineComponent } from 'vue'
+import { PREFIX } from '../_constants'
+import { getMainClass } from '../_utils'
+import { categorypaneEmits, categorypaneProps } from './categorypane'
+
+const props = defineProps(categorypaneProps)
+const emit = defineEmits(categorypaneEmits)
+const classes = computed(() => {
+  return getMainClass(props, componentName)
+})
+function onChange(sku: string) {
+  emit('onChange', sku)
+}
+</script>
+
+<script lang="ts">
+const componentName = `${PREFIX}-category-pane`
+
+export default defineComponent({
+  name: componentName,
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared',
+  },
+})
+</script>
+
+<template>
+  <div :class="classes">
+    <div v-if="type === 'classify'" class="nut-category-pane__cateListRight">
+      <slot />
+      <div v-for="(item, index) in categoryChild" :key="index">
+        <div class="nut-category-pane__childTitle">
+          {{ item?.catName }}
+        </div>
+
+        <div v-if="item?.catType === 1" class="nut-category-pane__childItemList">
+          <div
+            v-for="(sku, key) in item.childCateList"
+            :key="key"
+            class="nut-category-pane__childItem"
+            @click="onChange(sku)"
+          >
+            <image class="nut-category-pane__childImg" :src="sku.backImg" />
+            <div class="nut-category-pane__skuImg">
+              {{ sku?.catName }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- text -->
+    <div v-if="type === 'text'" class="nut-category-pane__cateListRight">
+      <slot />
+      <div v-for="(item, index) in categoryChild" :key="index">
+        <div class="nut-category-pane__childTitle">
+          {{ item?.catName }}
+        </div>
+
+        <div v-if="item?.catType === 1" class="nut-category-pane__childItemList">
+          <div
+            v-for="(sku, key) in item.childCateList"
+            :key="key"
+            class="nut-category-pane__childItem"
+            @click="onChange(sku)"
+          >
+            <div class="nut-category-pane__skuName">
+              {{ sku?.catName }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 自定义 -->
+
+    <div v-if="type === 'custom'" class="nut-category-pane__selfItemList">
+      <slot />
+      <div
+        v-for="(sku, key) in customCategory"
+        :key="key"
+        class="nut-category-pane__skuName"
+        @click="onChange(sku)"
+      >
+        {{ sku?.catName }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+@import './index';
+</style>

uni_modules/nutui-uni/components/categorypane/index.scss

@@ -0,0 +1,79 @@
+.nut-theme-dark {
+  .nut-category-pane {
+    &__childTitle {
+      color: $white;
+    }
+
+    &__cateListRight {
+      background: $dark-background2;
+    }
+  }
+}
+
+.nut-category-pane {
+  &__cateListRight {
+    padding-left: 15px;
+    background: $category-bg-color;
+  }
+
+  &__childTitle {
+    margin-top: 15px;
+    margin-bottom: 15px;
+    font-size: 13px;
+    font-weight: 500;
+    color: $category-pane-title-color;
+  }
+
+  &__childItemList {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  &__childItem {
+    margin-right: 10px;
+  }
+
+  &__childImg {
+    width: 75px;
+    height: 75px;
+    border-radius: 5px;
+  }
+
+  &__skuName {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 75px;
+    height: 40px;
+    margin-top: 15px;
+    margin-right: 10px;
+    margin-left: 15px;
+    font-size: 12px;
+    font-weight: normal;
+    color: $category-pane-gray-color;
+    border: 1px solid $category-pane-border-color;
+    border-radius: 5px;
+
+    &:nth-child(3n) {
+      margin-right: 0;
+    }
+
+    &:nth-child(n + 4) {
+      margin-top: 15px;
+    }
+  }
+
+  &__skuImg {
+    margin-top: 10px;
+    margin-bottom: 10px;
+    font-size: 12px;
+    font-weight: normal;
+    color: $category-pane-gray-color;
+    text-align: center;
+  }
+
+  &__selfItemList {
+    display: flex;
+    flex-wrap: wrap;
+  }
+}

uni_modules/nutui-uni/components/categorypane/index.ts

@@ -0,0 +1 @@
+export * from './categorypane'