feat: 添加预览组件

src/pages/ChatModule/LongTextGuideCardPreview/index.vue

@@ -0,0 +1,87 @@
+<template>
+  <view class="w-full bg-white border-box border-ff overflow-hidden rounded-20 flex flex-col">
+    <!-- 占位撑开 -->
+    <view class="w-vw"></view>
+    <view class="flex flex-col px-16 pt-16 pb-12 border-box">
+
+      <view class="long-text-guide-card__badge font-size-12 font-900" :class="`is-${item.badgeTone}`">
+        {{ item.badge }}
+      </view>
+
+      <view class="long-text-guide-card__summary-title color-1E293B font-size-18 font-900">
+        {{ item.title }}
+      </view>
+      <view class="long-text-guide-card__summary-text color-94A3B8 font-size-14 font-500 ellipsis-2">
+        {{ item.summary }}
+      </view>
+      <view class="long-text-guide-card__summary-footer flex flex-items-center flex-justify-between">
+        <text class="color-CBD5E1 font-size-12 font-800">{{ item.footer }}</text>
+        <uni-icons type="right" size="16" color="#CBD5E1"></uni-icons>
+      </view>
+
+    </view>
+  </view>
+
+</template>
+
+<script setup>
+import { defineProps,computed } from "vue";
+const props = defineProps({
+  componentName: {
+    type: String,
+    default: 'longTextCard',
+  },
+});
+
+const longTextCard = {
+  badge: "漂流攻略",
+  badgeTone: "amber",
+  title: "下水之前，先听小七唠两句",
+  summary: "卧龙潭漂流值得冲，全程四十分钟、三段激流，但晕水的人要掂量…",
+  footer: "点击查看完整攻略",
+}
+
+const longTextCardSnap = {
+  badge: "景点故事",
+  badgeTone: "blue",
+  title: "小七孔古桥 · 走了三百年的石拱",
+  summary: "小七孔古桥是一座三百岁的七孔石桥，小七孔的名字就从这儿来…",
+  footer: "点击查看完整介绍",
+}
+
+const longTextCardRoute = {
+  badge: "路线指引",
+  badgeTone: "green",
+  title: "漂完卧龙潭，顺道去鸳鸯湖",
+  summary: "卧龙潭到鸳鸯湖坐观光车约二十分钟。要紧的是鸳鸯湖分上下湖…",
+  footer: "点击查看完整路线",
+}
+
+const longTextCardScenicSpot = {
+  badge: "拍照攻略",
+  badgeTone: "indigo",
+  title: "鸳鸯湖玻璃船，这样拍才不亏",
+  summary: "玻璃船拍照，关键是拍水下那抹通透的绿，顺光时段最出片…",
+  footer: "点击查看完整攻略",
+}
+
+const item = computed(() => {
+  switch (props.componentName) {
+    case 'longTextCard':
+      return longTextCard;
+    case 'longTextCardSnap':
+      return longTextCardSnap;
+    case 'longTextCardRoute':
+      return longTextCardRoute;
+    case 'longTextCardScenicSpot':
+      return longTextCardScenicSpot;
+    default:
+      return longTextCard;
+  }
+});
+
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>