init

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

@@ -0,0 +1,47 @@
+import type { ExtractPropTypes } from 'vue'
+import { commonProps, makeStringProp, truthProp } from '../_utils'
+
+export const cardProps = {
+  ...commonProps,
+  /**
+   * @description 左侧图片 `Url`
+   */
+  imgUrl: makeStringProp(''),
+
+  /**
+   * @description 标题
+   */
+  title: makeStringProp(''),
+
+  /**
+   * @description 商品价格
+   */
+  price: makeStringProp(''),
+
+  /**
+   * @description 会员价格
+   */
+  vipPrice: makeStringProp(''),
+
+  /**
+   * @description 店铺介绍
+   */
+  shopDesc: makeStringProp(''),
+
+  /**
+   * @description 配送方式
+   */
+  delivery: makeStringProp(''),
+
+  /**
+   * @description 店铺名称
+   */
+  shopName: makeStringProp(''),
+
+  /**
+   * @description 是否需要价格展示
+   */
+  isNeedPrice: truthProp,
+}
+
+export type CardProps = ExtractPropTypes<typeof cardProps>

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

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { computed, defineComponent } from 'vue'
+import { PREFIX } from '../_constants'
+import { getMainClass } from '../_utils'
+import NutPrice from '../price/price.vue'
+import NutTag from '../tag/tag.vue'
+import { cardProps } from './card'
+
+const props = defineProps(cardProps)
+const classes = computed(() => {
+  return getMainClass(props, componentName)
+})
+</script>
+
+<script lang="ts">
+const componentName = `${PREFIX}-card`
+
+export default defineComponent({
+  name: componentName,
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared',
+  },
+})
+</script>
+
+<template>
+  <div :class="classes" :style="customStyle">
+    <div class="nut-card__left">
+      <image :src="imgUrl" alt="" />
+    </div>
+    <div class="nut-card__right">
+      <div class="nut-card__right__title">
+        {{ title }}
+      </div>
+      <slot name="prolist" />
+      <div v-if="isNeedPrice" class="nut-card__right__price">
+        <slot name="price">
+          <NutPrice v-if="price" :price="price" />
+        </slot>
+        <slot name="origin">
+          <view class="nut-card__right__price__origin">
+            <NutPrice v-if="vipPrice" :price="vipPrice" />
+          </view>
+        </slot>
+      </div>
+      <div class="nut-card__right__other">
+        <slot name="shopTag">
+          <NutTag type="danger">
+            {{ shopDesc }}
+          </NutTag>
+          <NutTag plain>
+            {{ delivery }}
+          </NutTag>
+        </slot>
+      </div>
+      <div class="nut-card__right__shop">
+        <slot name="shopName">
+          <div class="nut-card__right__shop__name">
+            {{ shopName }}
+          </div>
+        </slot>
+        <slot name="footer" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+@import './index';
+</style>

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

@@ -0,0 +1,112 @@
+@import '../price/index';
+@import '../tag/index';
+
+.nut-theme-dark {
+  .nut-card {
+    .nut-card__right {
+      color: $dark-color;
+    }
+  }
+}
+
+.nut-card {
+  display: flex;
+  width: 100%;
+
+  .nut-card__left {
+    flex-shrink: 0;
+    width: 120px;
+    height: 120px;
+    background-color: $card-left-background-color;
+    border-radius: $card-left-border-radius;
+
+    > image {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .nut-card__right {
+    flex: 1;
+    padding: 0 10px 8px;
+
+    .nut-card__right__title {
+      display: -webkit-box;
+      overflow: hidden;
+      font-size: 14px;
+      line-height: 1.5;
+      word-break: break-all;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 2;
+    }
+
+    .nut-card__right__price {
+      display: flex;
+      align-items: center;
+      height: 18px;
+      margin-top: 9px;
+      line-height: 18px;
+
+      .nut-price {
+        .nut-price--symbol-large {
+          font-size: 12px;
+        }
+
+        .nut-price--large {
+          font-size: 18px;
+        }
+
+        .nut-price--decimal-large {
+          font-size: 12px;
+        }
+      }
+
+      .nut-card__right__price__origin {
+        :deep(.nut-price) {
+          margin-left: 2px;
+          color: #d2a448;
+
+          .nut-price--symbol-large {
+            font-size: 12px;
+          }
+
+          .nut-price--large {
+            font-size: 12px;
+          }
+
+          .nut-price--decimal-large {
+            font-size: 12px;
+          }
+        }
+      }
+        
+    }
+
+    .nut-card__right__other {
+      display: flex;
+      align-items: center;
+      padding: 5px 0 2px;
+
+      .nut-tag {
+        padding: 0 2px;
+        margin-right: 5px;
+        font-size: $card-font-size-0;
+        border: none;
+      }
+    }
+
+    .nut-card__right__shop {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-top: 4px;
+
+      .nut-card__right__shop__name {
+        font-size: 12px;
+        line-height: 1.5;
+        color: #999;
+      }
+    }
+  }
+}

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

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