init

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

@@ -0,0 +1,37 @@
+.nut-theme-dark {
+  .nut-sku {
+    &-operate {
+      &-btn {
+        background: $dark-background2;
+      }
+    }
+  }
+}
+
+.nut-sku-header {
+    display: flex;
+    flex-shrink: 0;
+    height: 100px;
+    padding: 0 18px;
+    margin-top: 18px;
+
+    .nut-sku-header-img {
+      flex-shrink: 0;
+      width: $sku-product-img-width;
+      height: $sku-product-img-height;
+      margin-right: 12px;
+      border-radius: $sku-product-img-border-radius;
+    }
+
+    &-right {
+      display: flex;
+      flex: 1;
+      flex-direction: column;
+      justify-content: flex-end;
+
+      &-extra {
+        font-size: 12px;
+        color: $text-color;
+      }
+    }
+  }

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

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { defineComponent, useSlots } from 'vue'
+import { PREFIX } from '../_constants'
+import { isH5 } from '../_utils'
+import { useTranslate } from '../../locale'
+import NutPrice from '../price/price.vue'
+
+defineProps({
+  /**
+   * @description 商品
+   */
+  goods: {
+    type: Object,
+    default: () => {},
+  },
+})
+
+const slots = useSlots()
+const getSlots = (name: string) => slots[name]
+</script>
+
+<script  lang="ts">
+const componentName = `${PREFIX}-sku-header`
+const { translate } = useTranslate(componentName)
+export default defineComponent ({
+  name: componentName,
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared',
+  },
+})
+</script>
+
+<template>
+  <view class="nut-sku-header">
+    <image v-if="!isH5" class="nut-sku-header-img" :src="goods.imagePath" />
+    <image v-else class="nut-sku-header-img" :src="goods.imagePath" />
+    <view class="nut-sku-header-right">
+      <template v-if="getSlots('skuHeaderPrice')">
+        <slot name="skuHeaderPrice" />
+      </template>
+      <NutPrice
+        v-else
+        :price="goods.price"
+        :need-symbol="true"
+        :thousands="false"
+      />
+
+      <template v-if="getSlots('skuHeaderExtra')">
+        <slot name="skuHeaderExtra" />
+      </template>
+      <view v-if="goods.skuId && !getSlots('skuHeaderExtra')" class="nut-sku-header-right-extra">
+        {{ translate('skuId')
+        }}&nbsp;:&nbsp;{{ goods.skuId }}
+      </view>
+    </view>
+  </view>
+</template>
+
+<style lang="scss">
+@import './index';
+</style>