feat: 门票组件封装

components/SumCard/index.vue

@@ -0,0 +1,29 @@
+<template>
+  <view class="sum-wrapper">
+    <view class="sum-item">
+      <text class="sum-label">价格</text>
+      <text class="sum-value">¥{{ referencePrice }}</text>
+    </view>
+    <view class="sum-item">
+      <text class="sum-label">折扣优惠</text>
+      <text class="sum-discount">-¥{{ discount }}</text>
+    </view>
+  </view>
+</template>
+
+<script setup>
+defineProps({
+  referencePrice: {
+    type: Number,
+    default: 0,
+  },
+  discount: {
+    type: Number,
+    default: 0,
+  },
+});
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>

components/SumCard/propmt.md

@@ -0,0 +1,12 @@
+## 价格组件
+
+## 提示词：
+
+使用 uniapp + vue3 组合式 api 开发微信小程序，要求如下：
+1、参考图片，高度还原交互设计，完成组件封装
+2、要求布局样式结构简洁明了，class 命名请按照模块名称来命名，例如：.sum-wrapper
+3、可以使用 uniapp 内置的组件
+
+## 备注
+
+仅供学习、交流使用，请勿用于商业用途。

components/SumCard/styles/index.scss

@@ -0,0 +1,26 @@
+.sum-wrapper {
+  border-radius: 8px;
+  background-color: #fff;
+}
+
+.sum-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 13px 15px;
+}
+
+.sum-label {
+  font-size: 15px;
+  color: #333;
+}
+
+.sum-value {
+  font-size: 14px;
+  color: #999;
+}
+
+.sum-discount {
+  font-size: 14px;
+  color: #ff5722;
+}