| | |
| | | <view class="bg-img"> |
| | | <view class="hero-content"> |
| | | <text class="hero-title"></text> |
| | | <text class="hero-subtitle"></text> |
| | | </view> |
| | | <view class="hero-wave"></view> |
| | | </view> |
| | |
| | | <!-- </view>--> |
| | | <!-- </view>--> |
| | | |
| | | <!-- 营销管理模块 --> |
| | | <view class="common-module marketing-module"> |
| | | <view class="module-header"> |
| | | <view class="module-title-container"> |
| | | <text class="module-title">营销管理</text> |
| | | <!-- 商机管理入口(小按钮) --> |
| | | <view class="opportunity-entry"> |
| | | <view class="opportunity-item" @click="goOpportunity"> |
| | | <view class="opportunity-icon-wrap"> |
| | | <image |
| | | class="opportunity-icon" |
| | | src="/static/images/icon/xiaoshoutaizhang@2x.png" |
| | | mode="aspectFit" |
| | | /> |
| | | </view> |
| | | </view> |
| | | <view class="module-content"> |
| | | <up-grid |
| | | :border="false" |
| | | col="4" |
| | | > |
| | | <up-grid-item |
| | | v-for="(item, index) in marketingItems" |
| | | :key="index" |
| | | @click="handleCommonItemClick(item)" |
| | | > |
| | | <view class="icon-container" :style="{ background: item.bgColor }"> |
| | | <up-icon |
| | | :name="item.icon" |
| | | :size="58" |
| | | color="#ffffff" |
| | | ></up-icon> |
| | | </view> |
| | | <text class="item-label">{{item.label}}</text> |
| | | </up-grid-item> |
| | | </up-grid> |
| | | <text class="opportunity-text small-title">商机管理</text> |
| | | </view> |
| | | </view> |
| | | |
| | | <!-- 采购管理模块 --> |
| | | <view class="common-module purchase-module"> |
| | | <view class="module-header"> |
| | | <view class="module-title-container"> |
| | | <text class="module-title">采购管理</text> |
| | | </view> |
| | | </view> |
| | | <view class="module-content"> |
| | | <up-grid |
| | | :border="false" |
| | | col="4" |
| | | > |
| | | <up-grid-item |
| | | v-for="(item, index) in purchaseItems" |
| | | :key="index" |
| | | @click="handleCommonItemClick(item)" |
| | | > |
| | | <view class="icon-container" :style="{ background: item.bgColor }"> |
| | | <up-icon |
| | | :name="item.icon" |
| | | :size="58" |
| | | color="#ffffff" |
| | | ></up-icon> |
| | | </view> |
| | | <text class="item-label">{{item.label}}</text> |
| | | </up-grid-item> |
| | | </up-grid> |
| | | </view> |
| | | </view> |
| | | |
| | | <!-- 协同办公模块 --> |
| | | <view class="common-module collaboration-module"> |
| | | <view class="module-header"> |
| | | <view class="module-title-container"> |
| | | <text class="module-title">协同办公</text> |
| | | </view> |
| | | </view> |
| | | <view class="module-content"> |
| | | <up-grid |
| | | :border="false" |
| | | col="4" |
| | | > |
| | | <up-grid-item |
| | | v-for="(item, index) in collaborationItems" |
| | | :key="index" |
| | | @click="handleCommonItemClick(item)" |
| | | > |
| | | <view class="icon-container" :style="{ background: item.bgColor }"> |
| | | <up-icon |
| | | :name="item.icon" |
| | | :size="58" |
| | | color="#ffffff" |
| | | ></up-icon> |
| | | </view> |
| | | <text class="item-label">{{item.label}}</text> |
| | | </up-grid-item> |
| | | </up-grid> |
| | | </view> |
| | | </view> |
| | | |
| | | <!-- 设备管理模块 --> |
| | | <view class="common-module equipment-module"> |
| | | <view class="module-header"> |
| | | <view class="module-title-container"> |
| | | <text class="module-title">设备管理</text> |
| | | </view> |
| | | </view> |
| | | <view class="module-content"> |
| | | <up-grid |
| | | :border="false" |
| | | col="4" |
| | | > |
| | | <up-grid-item |
| | | v-for="(item, index) in equipmentItems" |
| | | :key="index" |
| | | @click="handleCommonItemClick(item)" |
| | | > |
| | | <view class="icon-container" :style="{ background: item.bgColor }"> |
| | | <up-icon |
| | | :name="item.icon" |
| | | :size="58" |
| | | color="#ffffff" |
| | | ></up-icon> |
| | | </view> |
| | | <text class="item-label">{{item.label}}</text> |
| | | </up-grid-item> |
| | | </up-grid> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | </template> |
| | | |
| | |
| | | currentStatus.value = statusList[statusIndex] |
| | | }, 3000) |
| | | } |
| | | |
| | | // 营销管理功能数据 |
| | | const marketingItems = reactive([ |
| | | { |
| | | icon: '/static/images/icon/xiaoshoutaizhang@2x.png', |
| | | label: '销售台账', |
| | | }, |
| | | { |
| | | icon: '/static/images/icon/kaipiaodengji@2x.png', |
| | | label: '开票登记', |
| | | }, |
| | | { |
| | | icon: '/static/images/icon/kaipiaotaizhang@2x.png', |
| | | label: '开票台账', |
| | | }, |
| | | { |
| | | icon: '/static/images/icon/huikuandengji@2x.png', |
| | | label: '回款登记', |
| | | }, |
| | | { |
| | | icon: '/static/images/icon/huikuanliushui@2x.png', |
| | | label: '回款流水', |
| | | }, |
| | | { |
| | | icon: '/static/images/icon/kehuwanglai@2x.png', |
| | | label: '客户往来', |
| | | } |
| | | ]); |
| | | |
| | | // 采购管理功能数据 |
| | | const purchaseItems = reactive([ |
| | | { |
| | | icon: '/static/images/icon/caigoutaizhang@2x.png', |
| | | label: '采购台账', |
| | | }, |
| | | { |
| | | icon: '/static/images/icon/laipiaodengji@2x.png', |
| | | label: '来票登记', |
| | | }, |
| | | { |
| | | icon: '/static/images/icon/laipiaotaizhang@2x.png', |
| | | label: '来票台账', |
| | | }, |
| | | { |
| | | icon: '/static/images/icon/fukuanjingji@2x.png', |
| | | label: '付款登记', |
| | | }, |
| | | { |
| | | icon: '/static/images/icon/fukuanliushui@2x.png', |
| | | label: '付款流水', |
| | | }, |
| | | { |
| | | icon: '/static/images/icon/gongyingshangwanglai@2x.png', |
| | | label: '供应商往来', |
| | | }, |
| | | ]); |
| | | |
| | | // 协同办公功能数据 |
| | | const collaborationItems = reactive([ |
| | | { |
| | | icon: '/static/images/icon/xietongshenpi@2x.png', |
| | | label: '协同审批', |
| | | }, |
| | | { |
| | | icon: '/static/images/icon/kehubaifang@2x.png', |
| | | label: '客户拜访', |
| | | } |
| | | ]); |
| | | |
| | | // 设备管理功能数据 |
| | | const equipmentItems = reactive([ |
| | | { |
| | | icon: '/static/images/icon/shebeitaizhang@2x.png', |
| | | label: '设备台账', |
| | | }, |
| | | { |
| | | icon: '/static/images/icon/shbeibaoxiu@2x.png', |
| | | label: '设备报修', |
| | | }, |
| | | { |
| | | icon: '/static/images/icon/shbeibaoyang@2x.png', |
| | | label: '设备保养', |
| | | } |
| | | ]); |
| | | |
| | | // 处理常用功能点击 |
| | | const handleCommonItemClick = (item) => { |
| | | // 根据不同的功能项进行跳转 |
| | | switch (item.label) { |
| | | case '销售台账': |
| | | uni.navigateTo({ |
| | | url: '/pages/sales/salesAccount/index' |
| | | }); |
| | | break; |
| | | case '开票登记': |
| | | uni.navigateTo({ |
| | | url: '/pages/sales/invoicingRegistration/index' |
| | | }); |
| | | break; |
| | | case '开票台账': |
| | | uni.navigateTo({ |
| | | url: '/pages/sales/invoiceLedger/index' |
| | | }); |
| | | break; |
| | | case '回款登记': |
| | | uni.navigateTo({ |
| | | url: '/pages/sales/receiptPayment/index' |
| | | }); |
| | | break; |
| | | case '回款流水': |
| | | uni.navigateTo({ |
| | | url: '/pages/sales/receiptPaymentHistory/index' |
| | | }); |
| | | break; |
| | | case '客户往来': |
| | | uni.navigateTo({ |
| | | url: '/pages/sales/receiptPaymentLedger/index' |
| | | }); |
| | | break; |
| | | case '采购台账': |
| | | uni.navigateTo({ |
| | | url: '/pages/procurementManagement/procurementLedger/index' |
| | | }); |
| | | break; |
| | | case '来票登记': |
| | | uni.navigateTo({ |
| | | url: '/pages/procurementManagement/invoiceEntry/index' |
| | | }); |
| | | break; |
| | | case '来票台账': |
| | | uni.navigateTo({ |
| | | url: '/pages/procurementManagement/procurementInvoiceLedger/index' |
| | | }); |
| | | break; |
| | | case '付款登记': |
| | | uni.navigateTo({ |
| | | url: '/pages/procurementManagement/paymentEntry/index' |
| | | }); |
| | | break; |
| | | case '付款流水': |
| | | uni.navigateTo({ |
| | | url: '/pages/procurementManagement/receiptPaymentHistory/index' |
| | | }); |
| | | break; |
| | | case '供应商往来': |
| | | uni.navigateTo({ |
| | | url: '/pages/procurementManagement/paymentLedger/index' |
| | | }); |
| | | break; |
| | | case '协同审批': |
| | | uni.navigateTo({ |
| | | url: '/pages/cooperativeOffice/collaborativeApproval/index' |
| | | }); |
| | | break; |
| | | case '客户拜访': |
| | | uni.navigateTo({ |
| | | url: '/pages/cooperativeOffice/clientVisit/index' |
| | | }); |
| | | break; |
| | | case '设备台账': |
| | | uni.navigateTo({ |
| | | url: '/pages/equipmentManagement/ledger/index' |
| | | }); |
| | | break; |
| | | case '设备报修': |
| | | uni.navigateTo({ |
| | | url: '/pages/equipmentManagement/repair/index' |
| | | }); |
| | | break; |
| | | case '设备保养': |
| | | uni.navigateTo({ |
| | | url: '/pages/equipmentManagement/upkeep/index' |
| | | }); |
| | | break; |
| | | default: |
| | | uni.showToast({ |
| | | title: `点击了${item.label}`, |
| | | icon: 'none' |
| | | }); |
| | | } |
| | | }; |
| | | |
| | | // 创建对子组件的引用 |
| | | const uToastRef = ref(null); |
| | |
| | | } |
| | | }; |
| | | |
| | | // 跳转到商机管理 |
| | | const goOpportunity = () => { |
| | | uni.navigateTo({ |
| | | url: '/pages/opportunityManagement/index' |
| | | }); |
| | | }; |
| | | |
| | | onMounted(() => { |
| | | // 设置用户信息 |
| | | userStore.getInfo() |
| | |
| | | background: linear-gradient(135deg, #f8f9fa 0%, #e3f2fd 100%); |
| | | min-height: 100vh; |
| | | padding: 1.25rem; |
| | | padding-top: env(safe-area-inset-top); |
| | | /* 为所有设备设置基础padding-top */ |
| | | padding-top: 40px; |
| | | position: relative; |
| | | |
| | | /* iOS设备使用env()函数处理安全区域 */ |
| | | padding-top: env(safe-area-inset-top); |
| | | |
| | | /* 为安卓设备设置更大的顶部内边距 */ |
| | | /* #ifdef APP-PLUS && !MP && !H5 */ |
| | | padding-top: 45px; |
| | | /* #endif */ |
| | | |
| | | /* H5和小程序平台的通用样式 */ |
| | | /* #ifdef H5 || MP */ |
| | | padding-top: 30px; |
| | | /* #endif */ |
| | | |
| | | &::before { |
| | | content: ''; |
| | |
| | | } |
| | | } |
| | | |
| | | /* 本页不再定义 .safe-area-top,已移至全局样式 */ |
| | | |
| | | .header-section { |
| | | margin-bottom: 1rem; |
| | | animation: fadeInDown 0.6s ease-out; |
| | | /* 为安卓设备额外调整头部位置 */ |
| | | /* #ifdef APP-PLUS && !MP && !H5 */ |
| | | margin-top: 10px; |
| | | /* #endif */ |
| | | } |
| | | |
| | | .currentFactory { |
| | |
| | | .bg-img { |
| | | width: 100%; |
| | | height: 8.75rem; |
| | | background-image: url("../static/images/banner/view-background.png"); |
| | | background-image: url("../static/images/banner/backview.png"); |
| | | background-size: cover; |
| | | border-radius: 0.75rem; |
| | | position: relative; |
| | |
| | | .hero-content { |
| | | position: relative; |
| | | z-index: 1; |
| | | padding: 1.25rem; |
| | | padding: 1.25rem 1.25rem 1.6rem 1.25rem; |
| | | height: 100%; |
| | | display: flex; |
| | | flex-direction: column; |
| | | align-items: flex-start; |
| | | justify-content: center; |
| | | justify-content: flex-start; |
| | | } |
| | | |
| | | .hero-title { |
| | |
| | | font-size: 1.625rem; |
| | | font-weight: 700; |
| | | letter-spacing: 0.03125rem; |
| | | text-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.5); |
| | | } |
| | | .hero-subtitle { font-size: 0.8125rem; margin-top: 0.375rem; } |
| | | .hero-wave { height: 2.75rem; } |
| | |
| | | font-size: 0.8125rem; |
| | | margin-top: 0.375rem; |
| | | font-weight: 400; |
| | | text-shadow: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.5); |
| | | } |
| | | |
| | | .hero-wave { |
| | |
| | | --module-color: #4caf50; |
| | | } |
| | | |
| | | .production-module { |
| | | --module-color: #FF9800; |
| | | } |
| | | |
| | | .equipment-module { |
| | | --module-color: #9c27b0; |
| | | } |
| | |
| | | /* #endif */ |
| | | } |
| | | |
| | | .opportunity-icon { |
| | | width: 2.4rem; |
| | | height: 2.4rem; |
| | | } |
| | | |
| | | /* 商机管理小按钮样式 */ |
| | | .opportunity-entry { |
| | | margin-top: 0.5rem; |
| | | display: flex; |
| | | justify-content: flex-start; |
| | | } |
| | | |
| | | .opportunity-item { |
| | | flex-direction: row; |
| | | align-items: center; |
| | | justify-content: flex-start; |
| | | background: #ffffff; |
| | | border-radius: 999px; |
| | | padding: 0.4rem 0.9rem 0.4rem 0.5rem; |
| | | box-shadow: 0 0.125rem 0.75rem rgba(15, 23, 42, 0.12); |
| | | display: inline-flex; |
| | | } |
| | | |
| | | .opportunity-icon-wrap { |
| | | width: 2.4rem; |
| | | height: 2.4rem; |
| | | border-radius: 999px; |
| | | background: #e3f2ff; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | margin-right: 0.4rem; |
| | | } |
| | | |
| | | .opportunity-text { |
| | | font-size: 0.9rem; |
| | | color: #1f2933; |
| | | font-weight: 500; |
| | | } |
| | | |
| | | .small-title { |
| | | font-size: 0.78rem; |
| | | font-weight: 400; |
| | | color: #4b5563; |
| | | } |
| | | |
| | | /* 暗色模式适配 */ |
| | | @media (prefers-color-scheme: dark) { |
| | | .content { |
| | |
| | | --module-color: #4caf50; |
| | | } |
| | | |
| | | .production-module { |
| | | --module-color: #FF9800; |
| | | } |
| | | |
| | | .equipment-module { |
| | | --module-color: #9c27b0; |
| | | } |
| | |
| | | |
| | | .item-label { font-size: 0.8125rem; margin-top: 0.25rem; margin-bottom: 0.625rem; } |
| | | .grid-text { font-size: 0.875rem; } |
| | | .opportunity-icon { |
| | | width: 2.4rem; |
| | | height: 2.4rem; |
| | | } |
| | | |
| | | @media (prefers-color-scheme: dark) { |
| | | .common-module { box-shadow: 0 0.375rem 1.5rem rgba(0,0,0,0.35); } |