xuan_wechat/pages/mall/index.wxml

<view class="linearBack">
    <!-- 搜索 -->
    <navigator class="mall-search" url="/pages/search/search" hover-class="none">
        <image class="mall-search-icon" src="/static/icons/search.png" mode="widthFix"></image>搜索商品
    </navigator>

    <!-- 轮播 -->
    <view class="mallBanner-cont">
        <swiper class="mallBanner-see" autoplay="true" circular duration="1000" interval="6000" indicator-dots>
            <block wx:for="{{bannerArr}}" wx:key="bannerArr">
                <swiper-item>
                    <image src="{{item.cover}}" mode="aspectFill" class="mallBanner-img"></image>
                </swiper-item>
            </block>
        </swiper>
    </view>

    <!-- 分类 -->
    <view class="sort">
        <view class="sort-list">
            <navigator hover-class="none" url="/pages/mall/goods/goods?id={{item.category_id}}" class="sort-item" wx:for="{{categorieArr}}" wx:key="categorieArr">
                <image class="sort-item-icon" mode="widthFix" src="{{item.cover}}"></image>
                <view class="sort-item-name">{{item.name}}</view>
            </navigator>
        </view>
    </view>
</view>

<!-- 公告 -->
<view class="notice">
    <view class="noticeCont">
        <image class="noticeCont-icon" src="/static/icons/notice.png" mode="widthFix"></image>
        <swiper class="noticeCont-swiper" autoplay="true" circular duration="1000" interval="6000" vertical>
            <navigator wx:for="{{articlesArr}}" wx:key="articlesArr" hover-class="none" url="/pages/mall/article/article?id={{item.article_id}}">
                <swiper-item>
                    <view class="nowrap noticeCont-name">{{item.title}}</view>
                </swiper-item>
            </navigator>
        </swiper>
    </view>
</view>

<!-- 身份包产品 -->
<view class="capsule" wx:if="{{can_buy}}">
    <image class="capsule-src" src="/static/imgs/capsule.png" mode="widthFix" bind:tap="onCapsule"></image>
</view>

<!-- 开通vip -->
<view class="capsule" wx:if="{{certification}}">
    <image class="capsule-src" src="/static/imgs/vip.png" mode="widthFix" bind:tap="onVip"></image>
</view>

<!-- 推荐 -->
<view class="suggest">
    <view class="suggestLeft">
        <view class="suggestLeft-swiper">
            <swiper class="suggestLeft-see" autoplay="true" circular duration="1500" interval="8000" indicator-dots>
                <swiper-item>
                    <navigator url="/pages/user/about/about">
                        <image src="https://cdn.douhuofalv.com/images/2023/08/04/f5de3fbb2cddb9f2ab8158bdde0e3122.png" mode="aspectFill" class="suggestLeft-img"></image>
                    </navigator>
                </swiper-item>
                <swiper-item>
                    <navigator url="/pages/user/about/about">
                        <image src="https://cdn.douhuofalv.com/images/2023/08/04/f5de3fbb2cddb9f2ab8158bdde0e3122.png" mode="aspectFill" class="suggestLeft-img"></image>
                    </navigator>
                </swiper-item>
            </swiper>
        </view>
    </view>
    <view class="suggestRight">
        <view class="module">
            <view class="moduleWrite">
                <view class="moduleTitle">
                    <view class="moduleTitle-name">今日种草</view>
                    <view class="moduleTitle-text">教你挑选健康好物</view>
                </view>
                <view class="moduleList">
                    <view class="moduleList-item">
                        <image class="moduleList-item-img" mode="widthFix" src="/static/ls/11.png"></image>
                        <view class="moduleList-item-price">￥199.9</view>
                    </view>
                    <view class="moduleList-item">
                        <image class="moduleList-item-img" mode="widthFix" src="/static/ls/12.png"></image>
                        <view class="moduleList-item-price">￥199.9</view>
                    </view>
                </view>
            </view>
            <view class="moduleWrite">
                <view class="moduleTitle">
                    <view class="moduleTitle-name">超值好物</view>
                    <view class="moduleTitle-text">每日优选 限时抢购</view>
                </view>
                <view class="moduleList">
                    <view class="moduleList-item">
                        <image class="moduleList-item-img" mode="widthFix" src="/static/ls/13.png"></image>
                        <view class="moduleList-item-price">￥199.9</view>
                    </view>
                    <view class="moduleList-item">
                        <image class="moduleList-item-img" mode="widthFix" src="/static/ls/14.png"></image>
                        <view class="moduleList-item-price">￥199.9</view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</view>

<!-- 商品 -->
<view class="tabs">
    <scroll-view class="tabs-scroll" scroll-x="true" scroll-left="{{scrollLeft}}" scroll-with-animation>
        <view class="tabs-scroll-name active" bindtap="tabsTap">为你推荐</view>
        <view class="tabs-scroll-name" bindtap="tabsTap">面部护理</view>
        <view class="tabs-scroll-name" bindtap="tabsTap">口腔健康</view>
        <view class="tabs-scroll-name" bindtap="tabsTap">睡眠健康</view>
        <view class="tabs-scroll-name" bindtap="tabsTap">控卡美食</view>
    </scroll-view>
</view>

<!-- 商品 -->
<view class="goods">
    <view class="goodsList" wx:if="{{goodsArr.length > 0}}">
        <navigator hover-class="none" url="./details/details?id={{item.goods_id}}" class="goodsItem" wx:for="{{goodsArr}}" wx:key="goodsArr">
            <view class="goodsItem-img">
                <image mode="aspectFill" src="{{item.cover}}"></image>
            </view>
            <view class="goodsItem-cont">
                <view class="nowrap goodsItem-name">{{item.name}}</view>
                <view class="nowrap goodsItem-text">{{item.description}}</view>
                <view class="goodsItem-tips">
                    <view class="goodsItem-price">￥{{item.original_price}}</view>
                    <view class="goodsItem-sales">浏览 {{item.clicks}}</view>
                </view>
            </view>
        </navigator>
        <view class="pagesLoding" wx:if="{{lodingStats}}">
            <block wx:if="{{page.has_more}}">
                <image class="pagesLoding-icon" src="/static/icons/refresh_loding.gif" mode="widthFix"></image>加载中...
            </block>
            <block wx:else>
                <!-- 没有更多了~ -->
            </block>
        </view>
    </view>
    <view class="goodsList-no pages-hint" wx:else>
        <image src="/static/imgs/text_null.png"></image>
        <view>暂无商品</view>
    </view>
</view>

<!-- 增收赋能 -->
<view class="module" wx:if="{{empowerArr.length > 0}}">
    <view class="module-title">
        增收赋能类
    </view>
    <view class="enable-scroll">
        <view class="enable-label" wx:for="{{empowerArr}}" wx:key="empowerArr" bindtap="onEmpower" data-id="{{item.id}}">
            <image class="enable-img" src="{{item.cover}}" alt="" mode="widthFix"></image>
            <view class="enable-cont">
                <view class="nowrap enable-title">{{item.title}}</view>
                <view class="nowrap enable-text">{{item.sub_title}}</view>
             <view class="enable-price">￥{{item.price}}/年</view>
            </view>
        </view>
    </view>
</view>