feat: 增加图片的预览

src/pages/ChatModule/LongTextGuideCardPreview/fullDoc.vue

@@ -21,7 +21,7 @@
               这是景区最完整的打法，全程顺着响水河往下游走，不用爬坡回头，把最精华的水景一次看个够。从古朴的石桥热身，一路走到碧蓝的卧龙潭收尾，节奏刚刚好。
             </view>
 
-            <image class="overview-image-card" :src="overviewImage" mode="widthFix" />
+            <image class="overview-image-card" :src="overviewImage" mode="widthFix" @click="previewPhoto(overviewImage)" />
 
             <view class="detail-section-title">这几个地方不能错过</view>
             <view class="detail-paragraph">
@@ -33,7 +33,7 @@
                 <text class="detail-highlight">{{ spot.index }} {{ spot.name }}</text>
                 {{ spot.desc }}
               </view>
-              <image class="overview-image-card" :src="spot.image" mode="aspectFill" />
+              <image class="overview-image-card" :src="spot.image" mode="aspectFill" @click="previewPhoto(spot.image)" />
             </template>
 
             <view class="detail-section-title">一天大概这样分</view>
@@ -166,6 +166,12 @@ const showToast = (title) => {
   });
 };
 
+const previewPhoto = (url) => {
+  uni.previewImage({
+    current: url,
+    urls: [url],
+  });
+};
 
 const goodsDetail = (item) => {
   uni.navigateTo({

src/pages/ChatModule/LongTextGuideCardPreview/guide.vue

@@ -21,6 +21,7 @@
               class="detail-main-image"
               src="https://one-feel-config-images-bucket.oss-cn-chengdu.aliyuncs.com/comp1.jpg"
               mode="aspectFill"
+              @click="previewPhoto('https://one-feel-config-images-bucket.oss-cn-chengdu.aliyuncs.com/comp1.jpg')"
             />
 
             <view class="detail-section-title">下水前，这几样别落下</view>
@@ -122,6 +123,13 @@ const showToast = (title) => {
   });
 };
 
+const previewPhoto = (url) => {
+  uni.previewImage({
+    current: url,
+    urls: [url],
+  });
+};
+
 const goodsDetail = (item) => {
   uni.navigateTo({
     url: `/pages/goods/index?commodityId=${item.commodityId}`,

src/pages/ChatModule/LongTextGuideCardPreview/photo.vue

@@ -37,7 +37,7 @@
 
           <view class="detail-action-zone">
             <view class="detail-action-label">查看机位图</view>
-            <view class="photo-card" @click="previewPhoto">
+            <view class="photo-card" @click="previewPhoto(photo.full)">
               <image class="photo-card-image" :src="photo.thumb" mode="aspectFill" />
               <view class="photo-card-caption">
                 <view class="photo-card-title">{{ photo.title }}</view>
@@ -100,10 +100,10 @@ const aigc = {
 
 const faq = ["几点光线最好", "船上能站起来拍吗", "穿什么颜色上镜"];
 
-const previewPhoto = () => {
+const previewPhoto = (url) => {
   uni.previewImage({
-    current: photo.full,
+    current: url,
-    urls: [photo.full],
+    urls: [url],
   });
 };
 

src/pages/ChatModule/LongTextGuideCardPreview/poi.vue

@@ -21,6 +21,7 @@
               class="detail-main-image"
               src="https://one-feel-config-images-bucket.oss-cn-chengdu.aliyuncs.com/preview/comp2.png"
               mode="aspectFill"
+              @click="previewPhoto('https://one-feel-config-images-bucket.oss-cn-chengdu.aliyuncs.com/preview/comp2.png')"
             />
 
             <view class="detail-section-title">站在这儿，看什么</view>
@@ -111,6 +112,14 @@ const openMap = () => {
   });
 };
 
+const previewPhoto = (url) => {
+  uni.previewImage({
+    current: url,
+    urls: [url],
+  });
+};
+
+
 const sendReply = (item) => {
   uni.navigateBack();
   uni.$emit(SEND_MESSAGE_CONTENT_TEXT, item);

src/pages/ChatModule/LongTextGuideCardPreview/styles/detail.scss

@@ -300,6 +300,8 @@
 
 .detail-faq-chip {
   display: inline-flex;
+  align-items: center;
+  gap: 5px;
   margin: 0 6px 8px 0;
   padding: 8px 13px;
   border: 1px solid #e2e8f0;
@@ -311,6 +313,22 @@
   line-height: 16px;
 }
 
+.detail-faq-chip::before {
+  content: "?";
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 11px;
+  height: 11px;
+  flex-shrink: 0;
+  border: 1px solid #10b981;
+  border-radius: 50%;
+  color: #10b981;
+  font-size: 8px;
+  font-weight: 900;
+  line-height: 11px;
+}
+
 .route-vs-wrap {
   display: flex;
   gap: 8px;