99 lines
4.3 KiB
Plaintext
99 lines
4.3 KiB
Plaintext
<!-- 服务页面 - 按照Figma设计实现 -->
|
|
<view class="page-container">
|
|
<!-- 顶部导航栏 -->
|
|
<view class="unified-header">
|
|
<view class="unified-header-left"></view>
|
|
<text class="unified-header-title">综合服务</text>
|
|
<view class="unified-header-right"></view>
|
|
</view>
|
|
|
|
<!-- 内容区域 -->
|
|
<scroll-view scroll-y class="content-scroll" style="padding-top: 194rpx;" enhanced show-scrollbar="{{false}}">
|
|
<!-- 轮播图 Banner -->
|
|
<view class="banner-section">
|
|
<swiper class="banner-swiper" style="height: {{swiperHeight || 400}}rpx" indicator-dots="{{true}}" indicator-color="rgba(255,255,255,0.4)" indicator-active-color="#fff" autoplay="{{true}}" interval="{{3000}}" circular="{{true}}">
|
|
<swiper-item wx:for="{{banners}}" wx:key="index">
|
|
<image src="{{item}}" class="banner-image" mode="widthFix" bindload="onBannerLoad"></image>
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
|
|
<!-- 服务类型 3宫格 -->
|
|
<view class="service-types">
|
|
<view class="service-type-item" wx:for="{{serviceTypes}}" wx:key="id" data-id="{{item.id}}" bindtap="onServiceType">
|
|
<image src="{{item.icon}}" class="service-type-icon" mode="aspectFit"></image>
|
|
<view class="service-type-name">{{item.name}}</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 精选服务区域 -->
|
|
<view class="featured-section">
|
|
<view class="section-header">
|
|
<text class="section-title">精选服务</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 商家列表 -->
|
|
<view class="provider-list">
|
|
<view class="provider-card" wx:for="{{listData}}" wx:key="id" data-id="{{item.id}}" bindtap="onItemTap">
|
|
<view class="provider-left">
|
|
<view class="avatar-container">
|
|
<view class="avatar-wrapper">
|
|
<image src="{{item.image}}" class="provider-avatar" mode="aspectFill"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="provider-right">
|
|
<view class="provider-header">
|
|
<text class="provider-name">{{item.name}}</text>
|
|
<view class="merchant-rating" wx:if="{{item.rating}}">
|
|
<image src="/images/service-star.png" class="star-icon" mode="aspectFit"></image>
|
|
<text class="rating-value">{{item.rating || '5.0'}}</text>
|
|
</view>
|
|
</view>
|
|
<text class="provider-desc">{{item.desc}}</text>
|
|
<view class="provider-skills" wx:if="{{item.tags && item.tags.length > 0}}">
|
|
<view class="skill-tag" wx:for="{{item.tags}}" wx:for-item="tag" wx:key="*this">{{tag}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 暂无内容提示 -->
|
|
<view class="empty-tip" wx:if="{{listData.length === 0 && !isLoading}}">
|
|
<image src="/images/icon-empty.png" mode="aspectFit"></image>
|
|
<text>暂无合作商家</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 底部占位 -->
|
|
<view class="bottom-placeholder"></view>
|
|
</scroll-view>
|
|
|
|
<!-- 自定义底部导航栏 -->
|
|
<view class="custom-tabbar">
|
|
<view class="tabbar-item" bindtap="switchTab" data-path="/pages/index/index" wx:if="{{auditStatus === 0}}">
|
|
<image src="/images/tab-listen.png" class="tabbar-icon" mode="aspectFit"></image>
|
|
<text class="tabbar-text">陪伴</text>
|
|
</view>
|
|
<view class="tabbar-item" bindtap="switchTab" data-path="/pages/entertainment/entertainment">
|
|
<image src="/images/tab-companion.png" class="tabbar-icon" mode="aspectFit"></image>
|
|
<text class="tabbar-text">文娱</text>
|
|
</view>
|
|
<view class="tabbar-item">
|
|
<image src="/images/tab-service-active.png" class="tabbar-icon" mode="aspectFit"></image>
|
|
<text class="tabbar-text active">服务</text>
|
|
</view>
|
|
<view class="tabbar-item" bindtap="switchTab" data-path="/pages/chat/chat">
|
|
<view class="message-icon-wrapper">
|
|
<image src="/images/tab-message-nodot.png" class="tabbar-icon" mode="aspectFit"></image>
|
|
<view class="message-dot" wx:if="{{totalUnread > 0}}"></view>
|
|
</view>
|
|
<text class="tabbar-text">消息</text>
|
|
</view>
|
|
<view class="tabbar-item" bindtap="switchTab" data-path="/pages/profile/profile">
|
|
<image src="/images/tab-profile.png" class="tabbar-icon" mode="aspectFit"></image>
|
|
<text class="tabbar-text">我的</text>
|
|
</view>
|
|
</view>
|
|
</view>
|