1.样式修改

gaoluyang

3 天以前 7eebd7981c1f5d2c569556d1e87f7818cef18cce

1.样式修改

 src/components/PageHeader.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,103 @@
<template>
    <view class="page-header">
        <view class="header-left">
            <up-icon 
                name="arrow-left" 
                size="20" 
                color="#333" 
                @click="handleBack"
            ></up-icon>
        </view>
        <view class="header-center">
            <text class="page-title">{{ title }}</text>
        </view>
        <view class="header-right" v-if="$slots.right">
            <slot name="right"></slot>
        </view>
    </view>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

// å®šä¹‰ç»„件属性
const props = defineProps({
    // é¡µé¢æ ‡é¢˜
    title: {
        type: String,
        default: ''
    },
    // æ˜¯å¦æ˜¾ç¤ºè¿”回按钮
    showBack: {
        type: Boolean,
        default: true
    },
    // è‡ªå®šä¹‰è¿”回事件
    customBack: {
        type: Function,
        default: null
    }
});

// å®šä¹‰äº‹ä»¶
const emit = defineEmits(['back']);

// å¤„理返回事件
const handleBack = () => {
    if (props.customBack) {
        props.customBack();
    } else {
        emit('back');
        uni.navigateBack();
    }
};
</script>

<style scoped lang="scss">
.page-header {
    background: #ffffff;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #f0f0f0;
    position: sticky;
    /* å…¼å®¹ iOS åˆ˜æµ·/灵动岛安全区 */
    padding-top: calc(env(safe-area-inset-top));
    top: 0;
    z-index: 100;
    position: relative;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 30px; /* ç¡®ä¿ç‚¹å‡»åŒºåŸŸè¶³å¤Ÿå¤§ */
}

.header-center {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 0;
    right: 0;
    pointer-events: none;
}

.page-title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    pointer-events: auto;
}

.header-right {
    display: flex;
    align-items: center;
    min-width: 44px; /* ç¡®ä¿å³ä¾§åŒºåŸŸæœ‰è¶³å¤Ÿç©ºé—´ */
    justify-content: flex-end;
}
</style>

 src/components/index.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,22 @@
// å…¨å±€ç»„件注册
import PageHeader from './PageHeader.vue'

// ç»„件列表
const components = [
  {
    name: 'PageHeader',
    component: PageHeader
  }
]

// å®‰è£…函数
export function setupGlobalComponents(app) {
  components.forEach(({ name, component }) => {
    app.component(name, component)
  })
}

// å¯¼å‡ºç»„件
export {
  PageHeader
}

 src/main.js

@@ -4,6 +4,7 @@
import uviewPlus from 'uview-plus'
import Vant from 'vant';
import 'vant/lib/index.css';
import { setupGlobalComponents } from './components'


import { createSSRApp } from 'vue'
@@ -24,6 +25,9 @@
  app.use(plugins)
  app.use(Vant)

  // æ³¨å†Œå…¨å±€ç»„件
  setupGlobalComponents(app)

  // #ifndef MP-WEIXIN
  // å¾®ä¿¡å°ç¨‹åºä¸­ä¸æ”¯æŒè‡ªå®šä¹‰æŒ‡ä»¤
  directive(app)

 src/pages.json

@@ -94,7 +94,7 @@
    {
      "path": "pages/sales/invoiceLedger/index",
      "style": {
        "navigationBarTitleText": "开票台账",
        "navigationBarTitleText": "",
        "navigationStyle": "custom"
      }
    },

 src/pages/cooperativeOffice/clientVisit/index.vue

@@ -34,6 +34,7 @@
  justify-content: space-between;
  padding: 10px 20px;
  background-color: #f5f5f5;
  position: relative;
}
.header-left {
  display: flex;
@@ -41,11 +42,18 @@
}
.header-center {
  flex: 1;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
}
.page-title {
  font-size: 18px;
  font-weight: bold;
  pointer-events: auto;
}
</style>


 src/pages/cooperativeOffice/collaborativeApproval/index.vue

@@ -1,15 +1,8 @@
// å®¡æ‰¹ç®¡ç†ä¸»é¡µé¢
<template>
    <view class="sales-account">
        <!-- é¡µé¢å¤´éƒ¨ -->
        <view class="page-header">
            <view class="header-left">
                <up-icon name="arrow-left" size="20" color="#333" @click="goBack"></up-icon>
            </view>
            <view class="header-center">
                <text class="page-title">审批管理</text>
            </view>
        </view>
        <!-- ä½¿ç”¨é€šç”¨é¡µé¢å¤´éƒ¨ç»„件 -->
        <PageHeader title="审批管理" @back="goBack" />

        <!-- æœç´¢å’Œç­›é€‰åŒºåŸŸ -->
        <view class="search-filter-section">
@@ -86,6 +79,7 @@
    import {
        ledgerListPage
    } from "@/api/cooperativeOffice/collaborativeApproval";
    import PageHeader from "@/components/PageHeader.vue";

    // æœç´¢å…³é”®è¯
    const searchKeyword = ref("");
@@ -157,72 +151,7 @@
        position: relative;
    }

    .page-header {
        background: #ffffff;
        padding: 16px 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #f0f0f0;
        position: sticky;
        /* å…¼å®¹ iOS åˆ˜æµ·/灵动岛安全区 */
        padding-top: env(safe-area-inset-top);
        top: 0;
        z-index: 100;
    }

    .header-left {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .nav-icon {
        width: 24px;
        height: 24px;
        background: #2979ff;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .nav-text {
        font-size: 14px;
        color: #2979ff;
        font-weight: 500;
    }

    .header-center {
        flex: 1;
        text-align: center;
    }

    .page-title {
        font-size: 18px;
        font-weight: 600;
        color: #333;
    }

    .header-right {
        display: flex;
        align-items: center;
    }

    .status-bar {
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .signal,
    .wifi,
    .battery {
        width: 16px;
        height: 8px;
        background: #333;
        border-radius: 2px;
    }

    .search-filter-section {
        padding: 10px 20px;

 src/pages/index.vue

@@ -5,7 +5,7 @@
                <up-text type="primary" :text="userStore.currentFactoryName" @click="show = true" size="18"
                                 class="factoryName" suffixIcon="arrow-right" :iconStyle="iconStyle"></up-text>
            </view>
            <up-picker :show="show" :columns="factoryList" @confirm="changeFactory"></up-picker>
            <up-picker :show="show" :columns="factoryList" @confirm="changeFactory" @cancel="show = false"></up-picker>
        </view>
        
        <view class="hero-section">

 src/pages/sales/invoiceLedger/detail.vue

@@ -1,13 +1,7 @@
<template>
    <view class="account-detail">
        <van-nav-bar
            title="编辑开票台账"
            left-text="返回"
            left-arrow
            @click-left="goBack"
            fixed
            placeholder
        />
        <!-- ä½¿ç”¨é€šç”¨é¡µé¢å¤´éƒ¨ç»„件 -->
        <PageHeader title="编辑开票台账" @back="goBack" />

        <van-form @submit="submitForm" ref="formRef" label-width="110px" input-align="right" error-message-align="right" scroll-to-error scroll-to-error-position="center">
            <van-cell-group title="基本信息" inset>

 src/pages/sales/invoiceLedger/index.vue

@@ -1,14 +1,7 @@
<template>
    <view class="sales-account">
        <!-- é¡µé¢å¤´éƒ¨ -->
        <van-nav-bar
            title="开票台账"
            left-text="返回"
            left-arrow
            @click-left="goBack"
            fixed
            placeholder
        />
        <!-- ä½¿ç”¨é€šç”¨é¡µé¢å¤´éƒ¨ç»„件 -->
        <PageHeader title="开票台账" @back="goBack" />

        <!-- æœç´¢å’Œç­›é€‰åŒºåŸŸï¼ˆä¿æŒä¸Žé”€å”®å°è´¦é£Žæ ¼ä¸€è‡´ï¼‰ -->
        <view class="search-filter-section">
@@ -103,6 +96,7 @@
                        <van-button
                            type="danger"
                            size="small"
                            plain
                            class="action-btn"
                            :disabled="item.invoicePerson !== userStore.nickName"
                            @click="handleDelete(item)"
@@ -112,6 +106,7 @@
                        <van-button
                            type="default"
                            size="small"
                            plain
                            class="action-btn"
                            v-if="item.invoiceFileName"
                            @click="openFileActions(item.commonFiles || [])"
@@ -121,7 +116,6 @@
                        <van-button
                            type="primary"
                            size="small"
                            plain
                            class="action-btn"
                            v-else
                            :disabled="item.invoicePerson !== userStore.nickName"

 src/pages/sales/invoicingRegistration/add.vue

@@ -1,14 +1,7 @@
<template>
  <view class="account-detail">
    <!-- é¡µé¢å¤´éƒ¨ -->
    <van-nav-bar
      title="新增开票登记"
      left-text="返回"
      left-arrow
      @click-left="goBack"
      fixed
      placeholder
    />
    <!-- ä½¿ç”¨é€šç”¨é¡µé¢å¤´éƒ¨ç»„件 -->
    <PageHeader title="新增开票登记" @back="goBack" />
    
    <!-- è¡¨å•å†…容 -->
    <van-form @submit="submitForm" ref="formRef" label-width="110px" input-align="right" error-message-align="right" scroll-to-error scroll-to-error-position="center">

 src/pages/sales/invoicingRegistration/index.vue

@@ -1,14 +1,7 @@
<template>
    <view class="sales-account">
        <!-- é¡µé¢å¤´éƒ¨ -->
        <van-nav-bar
            title="开票登记"
            left-text="返回"
            left-arrow
            @click-left="goBack"
            fixed
            placeholder
        />
        <!-- ä½¿ç”¨é€šç”¨é¡µé¢å¤´éƒ¨ç»„件 -->
        <PageHeader title="开票登记" @back="goBack" />
        
        <!-- æœç´¢å’Œç­›é€‰åŒºåŸŸ -->
        <view class="search-filter-section">
@@ -246,13 +239,20 @@

.header-center {
    flex: 1;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 0;
    right: 0;
    pointer-events: none;
}

.page-title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    pointer-events: auto;
}

.header-right {

 src/pages/sales/invoicingRegistration/view.vue

@@ -1,14 +1,7 @@
<template>
  <view class="account-view">
    <!-- é¡¶éƒ¨æ ‡é¢˜æ  -->
        <van-nav-bar
            title="开票登记详情"
            left-text="返回"
            left-arrow
            @click-left="goBack"
            fixed
            placeholder
        />
    <!-- ä½¿ç”¨é€šç”¨é¡µé¢å¤´éƒ¨ç»„件 -->
        <PageHeader title="开票登记详情" @back="goBack" />

    <!-- åŸºæœ¬ä¿¡æ¯å±•ç¤º -->
    <view class="info-section">

 src/pages/sales/receiptPayment/add.vue

@@ -1,14 +1,7 @@
<template>
  <view class="account-detail">
    <!-- é¡µé¢å¤´éƒ¨ -->
    <van-nav-bar
      title="新增回款"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
      fixed
      placeholder
    />
    <!-- ä½¿ç”¨é€šç”¨é¡µé¢å¤´éƒ¨ç»„件 -->
    <PageHeader title="新增回款" @back="onClickLeft" />
    
    <!-- è¡¨å•å†…容 -->
    <van-form @submit="onSubmit" ref="formRef" label-width="110px" input-align="right" error-message-align="right" scroll-to-error scroll-to-error-position="center">

 src/pages/sales/receiptPayment/index.vue

@@ -1,14 +1,7 @@
<template>
    <view class="receipt-payment">
        <!-- é¡µé¢å¤´éƒ¨ -->
        <van-nav-bar
            title="回款登记"
            left-text="返回"
            left-arrow
            @click-left="goBack"
            fixed
            placeholder
        />
        <!-- ä½¿ç”¨é€šç”¨é¡µé¢å¤´éƒ¨ç»„件 -->
        <PageHeader title="回款登记" @back="goBack" />

        <!-- æœç´¢å’Œç­›é€‰åŒºåŸŸ -->
        <view class="search-filter-section">

 src/pages/sales/receiptPaymentHistory/index.vue

@@ -1,14 +1,7 @@
<template>
    <view class="receipt-payment-history">
        <!-- é¡µé¢å¤´éƒ¨ -->
        <van-nav-bar
            title="回款历史"
            left-text="返回"
            left-arrow
            @click-left="goBack"
            fixed
            placeholder
        />
        <!-- ä½¿ç”¨é€šç”¨é¡µé¢å¤´éƒ¨ç»„件 -->
        <PageHeader title="回款历史" @back="goBack" />
        
        <!-- æœç´¢åŒºåŸŸ -->
        <view class="search-section">
@@ -289,7 +282,7 @@
}

.tag-text {
    font-size: 11px;
    font-size: 14px;
    color: #ffffff;
    font-weight: 500;
}

 src/pages/sales/receiptPaymentLedger/detail.vue

@@ -1,14 +1,7 @@
<template>
    <view class="receipt-payment-detail">
        <!-- é¡µé¢å¤´éƒ¨ -->
        <van-nav-bar
            title="客户往来详情"
            left-text="返回"
            left-arrow
            @click-left="goBack"
            fixed
            placeholder
        />
        <!-- ä½¿ç”¨é€šç”¨é¡µé¢å¤´éƒ¨ç»„件 -->
        <PageHeader title="客户往来详情" @back="goBack" />
        
        <!-- ç»Ÿè®¡ä¿¡æ¯ -->
        <view class="summary-info" v-if="tableData.length > 0">

 src/pages/sales/receiptPaymentLedger/index.vue

@@ -1,14 +1,7 @@
<template>
  <view class="receipt-payment-ledger">
    <!-- é¡µé¢å¤´éƒ¨ -->
    <van-nav-bar
      title="客户往来"
      left-text="返回"
      left-arrow
      @click-left="goBack"
      fixed
      placeholder
    />
    <!-- ä½¿ç”¨é€šç”¨é¡µé¢å¤´éƒ¨ç»„件 -->
    <PageHeader title="客户往来" @back="goBack" />
    
    <!-- æœç´¢åŒºåŸŸ -->
    <view class="search-section">

 src/pages/sales/salesAccount/detail.vue

@@ -1,14 +1,7 @@
<template>
  <view class="account-detail">
    <!-- é¡¶éƒ¨æ ‡é¢˜æ  -->
        <van-nav-bar
            title="台账详情"
            left-text="返回"
            left-arrow
            @click-left="goBack"
            fixed
            placeholder
        />
    <!-- ä½¿ç”¨é€šç”¨é¡µé¢å¤´éƒ¨ç»„件 -->
        <PageHeader title="台账详情" @back="goBack" />

         <!-- è¡¨å•åŒºåŸŸ -->
        <van-form @submit="onSubmit" label-width="110px" input-align="right" style="margin-top: 10px" error-message-align="right" scroll-to-error scroll-to-error-position="center">
@@ -796,9 +789,6 @@
  font-weight: 600;
  color: #333;
}
.add-btn {
  border-radius: 0.25rem;
}
.product-card {
    background: #FFFFFF;
    box-shadow: 0 0 1.25rem 0 rgba(0,57,117,0.08);
@@ -846,9 +836,6 @@
}
.product-form {
  margin-bottom: 1rem;
}
.del-btn {
  border-radius: 0.25rem;
}
.footer-btns {
  position: fixed;

 src/pages/sales/salesAccount/index.vue

@@ -1,14 +1,7 @@
<template>
    <view class="sales-account">
        <!-- é¡µé¢å¤´éƒ¨ -->
        <van-nav-bar
            title="销售台账"
            left-text="返回"
            left-arrow
            @click-left="goBack"
            fixed
            placeholder
        />
        <!-- ä½¿ç”¨é€šç”¨é¡µé¢å¤´éƒ¨ç»„件 -->
        <PageHeader title="销售台账" @back="goBack" />
        
        <!-- æœç´¢å’Œç­›é€‰åŒºåŸŸ -->
        <view class="search-filter-section">
@@ -103,6 +96,7 @@
import { onShow } from '@dcloudio/uni-app';
import {ledgerListPage} from "@/api/salesManagement/salesLedger";
import useUserStore from "@/store/modules/user";
import PageHeader from "@/components/PageHeader.vue";
const userStore = useUserStore()

// æœç´¢å…³é”®è¯
@@ -195,70 +189,7 @@
    position: relative;
}

.page-header {
    background: #ffffff;
  padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #f0f0f0;
    position: sticky;
  /* å…¼å®¹ iOS åˆ˜æµ·/灵动岛安全区 */
  padding-top: env(safe-area-inset-top);
  top: 0;
    z-index: 100;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-icon {
    width: 24px;
    height: 24px;
    background: #2979ff;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-text {
    font-size: 14px;
    color: #2979ff;
    font-weight: 500;
}

.header-center {
    flex: 1;
    text-align: center;
}

.page-title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

.header-right {
    display: flex;
    align-items: center;
}

.status-bar {
    display: flex;
    align-items: center;
    gap: 4px;
}

.signal, .wifi, .battery {
    width: 16px;
    height: 8px;
    background: #333;
    border-radius: 2px;
}

.search-filter-section {
    padding: 10px 20px;
@@ -405,7 +336,7 @@

.fab-button {
    position: fixed;
    bottom: 30px;
    bottom: calc(30px + env(safe-area-inset-bottom));
    right: 30px;
    width: 56px;
    height: 56px;
@@ -416,5 +347,6 @@
    justify-content: center;
    box-shadow: 0 4px 16px rgba(41, 121, 255, 0.3);
    z-index: 1000;
    /* ç¡®ä¿æµ®åŠ¨æŒ‰é’®ä¸è¢«åº•éƒ¨å®‰å…¨åŒºåŸŸé®æŒ¡ */
}
</style>

 src/pages/sales/salesAccount/view.vue

@@ -1,14 +1,7 @@
<template>
  <view class="account-view">
    <!-- é¡¶éƒ¨æ ‡é¢˜æ  -->
        <van-nav-bar
            title="台账详情"
            left-text="返回"
            left-arrow
            @click-left="goBack"
            fixed
            placeholder
        />
    <!-- ä½¿ç”¨é€šç”¨é¡µé¢å¤´éƒ¨ç»„件 -->
        <PageHeader title="台账详情" @back="goBack" />

    <!-- åŸºæœ¬ä¿¡æ¯å±•ç¤º -->
    <view class="info-section">

 src/static/scss/global.scss

@@ -2,6 +2,21 @@
    text-align: center;
}

/* ç§»åŠ¨ç«¯å¯é çš„居中方法 */
.center-absolute {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 0;
    right: 0;
    pointer-events: none;
}

.center-absolute > * {
    pointer-events: auto;
}

.font-13 {
    font-size: 13px;
}