Feat：旅居团购产品详情

pkg_product/views/groupBuyDetails.vue

@@ -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%;