用户故事图片固定大小，增加弹窗查看

pages/home/story/detail.vue

@@ -1,6 +1,6 @@
 <template>
   <view class="story-detail-container">
-    <image :src="detail.titleImg" class="detail-img" mode="widthFix"/>
+    <image :src="detail.titleImg" class="detail-img" mode="aspectFill" @click="previewImage(detail.titleImg)"/>
     <view class="detail-content">
       <view class="detail-title">{{ detail.title }}</view>
       <view class="detail-user">
@@ -13,6 +13,10 @@
       </view>
       <view class="detail-desc">{{ detail.content }}</view>
     </view>
+
+    <uni-popup ref="popup" type="center">
+      <image :src="previewImageUrl" class="preview-img" mode="widthFix"/>
+    </uni-popup>
   </view>
 </template>
 
@@ -30,7 +34,8 @@ export default {
         userName: '',
         likes: 0,
         liked: false
-      }
+      },
+      previewImageUrl: ''
     }
   },
   onLoad(options) {
@@ -40,9 +45,13 @@ export default {
     }
   },
   methods: {
+    previewImage(url) {
+      this.previewImageUrl = url;
+      this.$refs.popup.open();
+    },
     toggleLike() {
       this.detail.liked = !this.detail.liked
-      let num =  this.detail.liked ? 1 : -1
+      let num = this.detail.liked ? 1 : -1
       this.detail.likes = this.detail.likes + num
       likeStory(this.detail.id, (this.detail.liked ? 1 : 0));
     },
@@ -67,8 +76,17 @@ export default {
 
 .detail-img {
   width: 100%;
+  height: 300rpx;
   border-radius: 10rpx;
   margin-bottom: 20rpx;
+  cursor: pointer;
+}
+
+.preview-img {
+  max-width: 90%;
+  max-height: 80vh;
+  border-radius: 10rpx;
+  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.5);
 }
 
 .detail-content {