Feat:旅居团购产品详情

This commit is contained in:
linxi
2026-03-30 17:13:53 +08:00
parent 2d964da4e3
commit cdece3d92f
+53 -1
View File
@@ -75,6 +75,7 @@
</view>
</view>
</view>
<!-- 套餐详情模拟 -->
<view class="v12-px-3 v12-mt-3" v-if="detail.packageDetails && detail.packageDetails.length > 0">
@@ -115,7 +116,30 @@
</view>
</view>
</view>
<view class="v12-mt-3 v12-px-3" v-if="detail.experienceCouponRule">
<view class="section v12-radius-60 v12-white v12-px-3 v12-pt-3 experience-card">
<view class="v12-mt-2 v12-pl-2 v12-font-bold v12-font-36 v12-align-center title-wrap">
<text class="v12-mr-1">{{ detail.experienceCouponRule.ruleTitle1 }}</text>
</view>
<view class="v12-mt-2">
<view class="grid-txt v12-justify-between v12-align-center">
<view class="v12-px-2 v12-py-1"><u-icon :name="webUrl + '/icon/gift.png'" size="18"></u-icon></view>
<text class="v12-px-2 v12-py-1 v12-white v12-radius-100">{{ detail.experienceCouponRule.ruleSubTitle1 }}</text>
</view>
</view>
<view class="v12-mt-3 image-grid">
<view class="image-item" v-for="(img, idx) in detail.experienceCouponRule.ruleImages" :key="idx">
<image :src="img" mode="aspectFill" />
</view>
</view>
<view class="v12-mt-3 v12-pl-2 v12-font-bold v12-font-36 v12-align-center title-wrap">
<text class="v12-mr-1">{{ detail.experienceCouponRule.ruleTitle2 }}</text>
</view>
<view class="v12-mt-2 v12-font-26">
<rich-text :nodes="detail.experienceCouponRule.ruleContent"></rich-text>
</view>
</view>
</view>
<view class="v12-px-3 v12-mt-3">
<view class="section v12-radius-60 v12-white v12-px-3 v12-pt-3">
<view class="v12-mt-2 v12-pl-2 v12-font-bold v12-font-36 v12-align-center title-wrap">
@@ -566,6 +590,34 @@ export default {
height: 34rpx;
margin-right: 10rpx;
}
.experience-card .benefit-chip{
display: inline-flex;
align-items: center;
background: #FADE9F;
border: 1rpx solid #FADE9F;
color: #333;
border-radius: 100rpx;
padding: 8rpx 16rpx;
font-size: 24rpx;
}
.experience-card .image-grid{
display: flex;
gap: 16rpx;
overflow-x: auto;
padding-bottom: 8rpx;
}
.experience-card .image-item{
flex: 0 0 auto;
width: 200rpx;
height: 200rpx;
border-radius: 20rpx;
overflow: hidden;
background: #f5f5f5;
}
.experience-card .image-item image{
width: 100%;
height: 100%;
}
.page-scroll { height: calc(100vh - 120rpx); }
.hero-swiper {
width: 100%;