feat: add virtual resource payments and optimize images

components/lun-bo-tu/lun-bo-tu.vue

@@ -1,8 +1,10 @@
 <template>
 	<view class="shape">
 		<swiper class="image-container example-body-item uni-swiper-wrapper" previous-margin="43rpx" next-margin="43rpx" circular  @change="swiperChange" :indicator-dots="false" interval="2500" autoplay>
-			<swiper-item :class="currentIndex == index ? 'swiper-item' : 'swiper-item-side'" v-for="(item, index) in imgList" :key="item[urlKey]">
-				<image  @click="clickImg(item)" :class="currentIndex == index ? 'item-img' : 'item-img-side'" :src="item.image" lazy-load :style="dontFirstAnimation ? 'animation: none;' : ''" mode="aspectFill"></image>
+			<swiper-item :class="currentIndex == index ? 'swiper-item' : 'swiper-item-side'" v-for="(item, index) in imgList" :key="index">
+				<navigator class="carousel-link" :url="item.url" open-type="navigate" hover-class="none">
+					<image :class="currentIndex == index ? 'item-img' : 'item-img-side'" :src="imageSource(item, index)" lazy-load :draggable="false" :style="dontFirstAnimation ? 'animation: none;' : ''" mode="aspectFill" @error="imageError(item, index)"></image>
+				</navigator>
 			</swiper-item>
 		</swiper>
 	</view>
@@ -16,27 +18,35 @@
 				default() {
 					return []
 				}
-			},
-			urlKey: {
-				type: String,
-				default() {
-					return ''
-				}
 			}
 		},
 		data() {
 			return {
 				currentIndex: 0,
 				dontFirstAnimation: true,
+				failedImages: {},
+			}
+		},
+		watch: {
+			imgList() {
+				this.failedImages = {}
 			}
 		},
 		methods: {
+			imageSource(item, index) {
+				if (this.failedImages[index] && item.fallbackImage) {
+					return item.fallbackImage
+				}
+				return item.image
+			},
+			imageError(item, index) {
+				if (!this.failedImages[index] && item.fallbackImage && item.fallbackImage !== item.image) {
+					this.$set(this.failedImages, index, true)
+				}
+			},
 			swiperChange(e) {
 				this.dontFirstAnimation = false
 				this.currentIndex = e.detail.current
-			},
-			clickImg(item) {
-				this.$emit('selected', item, this.currentIndex)
 			}
 		}
 	}
@@ -78,6 +88,13 @@
 	.image-container {
 		height: 360rpx;
 	}
+	.carousel-link {
+		width: 100%;
+		height: 100%;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
 
 	.item-img {
 		width: 650rpx;