machine/yuan ma/mp-shop/pages/details/details.wxml

<!-- 商品详情页面的根容器 -->
<view class="details">
    <!-- 商品顶部图片，使用宽度自适应模式 -->
    <image class="topimage" mode="widthFix" src="{{ goodsDetails.topimage }}"></image>

    <!-- 商品基本信息容器 -->
    <view class="content">
        <!-- 商品价格显示 -->
        <view class="price">
            ￥<text>{{ goodsDetails.price }}</text>.00
        </view>

        <!-- 商品标题显示 -->
        <view class="title">
            <text>{{ goodsDetails.title }}</text>
        </view>
    </view>

    <!-- 商品详细介绍图片，使用宽度自适应模式 -->
    <view class="introduce">
        <image mode="widthFix" src="{{ goodsDetails.details }}"></image>
    </view>

    <!-- 商品操作栏容器 -->
    <view class="cart">
        <!-- Vant 商品操作栏组件 -->
        <van-goods-action>
            <!-- 客服图标按钮，点击时触发 onClickKF 事件 -->
            <van-goods-action-icon icon="chat-o" text="客服" bind:click="onClickKF" />

            <!-- 购物车图标按钮，点击时触发 onClickCart 事件 -->
            <van-goods-action-icon icon="cart-o" text="购物车" bind:click="onClickCart" />

            <!-- 加入购物车按钮，点击时触发 onClickAddCart 事件 -->
            <van-goods-action-button text="加入购物车" type="warning" bind:click="onClickAddCart" />

            <!-- 立即购买按钮，点击时触发 onClickBuy 事件，并传递商品 ID -->
            <van-goods-action-button data-id="{{ goodsDetails.id }}" text="立即购买" bind:click="onClickBuy" />
        </van-goods-action>
    </view>
</view>