模板 (Template / HTML)

1. 页面结构化

使用 <section> 标签作为页面的顶层语义化容器，用于划分独立功能区域。<view> 作为通用块级容器。

<template>
    <view class="view">
        <!-- 导航栏区域 -->
        <section class="navbar">
            <c-navBar isPerch title="标题" :isBack="true"></c-navBar>
        </section>
        <!-- 详细信息区域 -->
        <section class="content">
            <!-- ... -->
        </section>
        <!-- 列表区域 -->
        <section class="list">
            <!-- ... -->
        </section>
        <!-- 底部操作栏 -->
        <section class="footer flex flex-center" v-if="isSelf">
            <!-- ... -->
        </section>
    </view>
</template>

2. 组件使用

• 命名: 自定义业务组件以 c- 前缀开头，UI 框架（如 uView）组件以 u- 前缀开头。
• 属性: 组件属性（Props）推荐使用 kebab-case（短横线分隔）风格，例如 :is-back="true"。

<!-- 自定义业务组件 -->
<c-navBar isPerch title="审批详情" :isBack="true"></c-navBar>

<!-- UI框架组件 -->
<u-popup :show="showRefusePopup" mode="center" round="16rpx">
    <!-- ... -->
</u-popup>

<u-image :src="img" width="200rpx" height="200rpx" radius="8rpx"></u-image>

3. 样式与类名 (Class & Style)

• 功能优先: 优先使用原子化/功能类来定义通用样式，保持一致性。
• 组件级样式: 对于组件内部的复杂样式，使用 BEM（块、元素、修饰符）的命名思想，以组件名为前缀，用短横线连接。
• 动态样式: 使用 :style 进行动态样式绑定。

<!-- 功能类 -->
<view class="flex align-center justify-between">
    <view class="info-item-label mf-font-28 mf-weight-bold" style="color: #333">{{ item.label }}</view>
</view>

<!-- BEM-like 命名 -->
<view class="refuse-popup">
    <view class="refuse-popup-title">请假驳回</view>
    <view class="refuse-popup-footer flex">
        <view class="refuse-popup-btn refuse-popup-btn-cancel">取消</view>
        <view class="refuse-popup-btn refuse-popup-btn-confirm">提交</view>
    </view>
</view>

<!-- 动态样式绑定 -->
<view
    class="mf-font-20"
    :style="{
        color: item.status && item.status.value === 2 ? '#fd0100' : '#999',
    }"
>
    {{ item.status && item.status.name ? item.status.name : "--" }}
</view>

4. 指令使用 (Directives)

• v-for 和 v-if 应避免在同一元素上使用。如果需要，可将 v-if 置于父级容器或 <template> 标签上。

<!-- v-for 循环 -->
<view class="info-item" v-for="item in info.data" :key="item.label">
    <!-- v-if 条件渲染 -->
    <view class="flex align-center justify-between" v-if="item.type === 'text'">
        <!-- ... -->
    </view>
</view>