用Uniapp写一个含插槽的支付账单明细组件

好的，以下是一个基础的含插槽的支付账单明细组件示例：

<template>
  <div class="bill">
    <div class="bill-header">{{ title }}</div>
    <div class="bill-body">
      <slot name="item"></slot>
    </div>
    <div class="bill-footer">
      <div class="bill-total">{{ total }}</div>
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      required: true
    },
    total: {
      type: Number,
      required: true
    }
  }
};
</script>

<style scoped>
.bill {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 10px;
}

.bill-header {
  font-size: 16px;
}

.bill-body {
  margin: 10px 0;
}

.bill-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
}

.bill-total {
  font-weight: bold;
}
</style>

在模板中，我们定义了三个插槽：`item`、默认插槽和`total`。`item`插槽用于渲染账单明细项，`total`用于渲染总计金额。默认插槽用于插入其他元素，例如支付按钮等。

在脚本中，我们定义了两个props属性：`title`和`total`。`title`用于渲染账单标题，`total`用于渲染总计金额。

使用示例：

<template>
  <div class="container">
    <bill title="支付账单" :total="total">
      <template #item>
        <div class="bill-item">
          <div class="bill-item-name">商品名称</div>
          <div class="bill-item-amount">100</div>
        </div>
        <div class="bill-item">
          <div class="bill-item-name">商品名称</div>
          <div class="bill-item-amount">200</div>
        </div>
      </template>
      <button @click="pay">支付</button>
    </bill>
  </div>
</template>

<script>
import Bill from "@/components/Bill.vue";

export default {
  components: {
    Bill
  },
  data() {
    return {
      total: 300
    };
  },
  methods: {
    pay() {
      // 支付逻辑
    }
  }
};
</script>

<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.bill-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.bill-item-name {
  flex: 1;
}
.bill-item-amount {
  margin-left: 10px;
}
</style>

在使用示例中，我们将`Bill`组件引入，并传递了`title`和`total`属性。在`item`插槽内，我们渲染了两个账单明细项。在默认插槽内，我们插入了一个支付按钮，并定义了支付逻辑。