From f1bcbcb10006807787247219df78e0408742604b Mon Sep 17 00:00:00 2001 From: gaoluyang <2820782392@qq.com> Date: 星期五, 22 八月 2025 10:59:09 +0800 Subject: [PATCH] 1.采购台账开发联调 --- src/pages/index.vue | 826 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 826 insertions(+), 0 deletions(-) diff --git a/src/pages/index.vue b/src/pages/index.vue new file mode 100644 index 0000000..9578b19 --- /dev/null +++ b/src/pages/index.vue @@ -0,0 +1,826 @@ +<template> + <view class="content"> + <view class="header-section"> + <view class="currentFactory"> + <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" @cancel="show = false"></up-picker> + </view> + + <view class="hero-section"> + <view class="bg-img"> + <view class="hero-content"> + <text class="hero-title">浜у搧搴撳瓨绠$悊绯荤粺</text> + </view> + </view> + </view> + + <view class="notice-section"> + <view class="notice"> + <view class="notice-content"> + <view class="notice-left"> + <text class="notice-status">閫氱煡</text> + </view> + <view class="notice-separator"></view> + <view class="notice-right"> + <text class="notice-label">{{currentStatus}}</text> + <text class="notice-text">褰撴棩閿�鍞澶囨暟:<text class="notice-number">{{number}}<text class="notice-unit">涓�</text></text></text> + </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> + </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="26" + color="#ffffff" + ></up-icon> + </view> + <text class="item-label">{{item.label}}</text> + </up-grid-item> + </up-grid> + </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="26" + 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="26" + 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="26" + color="#ffffff" + ></up-icon> + </view> + <text class="item-label">{{item.label}}</text> + </up-grid-item> + </up-grid> + </view> + </view> + </view> +</template> + +<script setup> +import {ref, onMounted, nextTick, reactive} from 'vue'; +import {userLoginFacotryList} from "@/api/login"; +import modal from "@/plugins/modal"; +import useUserStore from "@/store/modules/user"; + +const userStore = useUserStore() +const factoryId = ref(''); +const show = ref(false); +const factoryList = ref([]); +const factoryListTem = ref([]); +const iconStyle = { + fontSize: '18px', + color: '#2979ff' +} + +// 閫氱煡鐘舵�佸垏鎹� +const statusList = ['閿�鍞�', '閲囪喘'] +let statusIndex = 0 +const currentStatus = ref(statusList[0]) +const number = ref(7643) + +// 瀹氭椂鍣ㄥ垏鎹㈤�氱煡鐘舵�� +const startStatusTimer = () => { + setInterval(() => { + statusIndex = (statusIndex + 1) % statusList.length + currentStatus.value = statusList[statusIndex] + }, 3000) +} + +// 钀ラ攢绠$悊鍔熻兘鏁版嵁 +const marketingItems = reactive([ + { + icon: 'account', + label: '閿�鍞彴璐�', + bgColor: '#2979ff' + }, + { + icon: 'home', + label: '寮�绁ㄧ櫥璁�', + bgColor: '#1976d2' + }, + { + icon: 'file-text', + label: '寮�绁ㄥ彴璐�', + bgColor: '#42a5f5' + }, + { + icon: 'shopping-cart', + label: '鍥炴鐧昏', + bgColor: '#64b5f6' + }, + { + icon: 'chat', + label: '鍥炴娴佹按', + bgColor: '#90caf9' + }, + { + icon: 'chat', + label: '瀹㈡埛寰�鏉�', + bgColor: '#90caf9' + } +]); + +// 閲囪喘绠$悊鍔熻兘鏁版嵁 +const purchaseItems = reactive([ + { + icon: 'order', + label: '閲囪喘鍙拌处', + bgColor: '#bbdefb' + }, + { + icon: 'truck', + label: '鏉ョエ鐧昏', + bgColor: '#e3f2fd' + }, + { + icon: 'box', + label: '鏉ョエ鍙拌处', + bgColor: '#f3e5f5' + }, + { + icon: 'chart-line', + label: '浠樻鐧昏', + bgColor: '#e8eaf6' + }, + { + icon: 'settings', + label: '浠樻娴佹按', + bgColor: '#f1f8e9' + }, + { + icon: 'settings', + label: '渚涘簲鍟嗗線鏉�', + bgColor: '#f1f8e9' + }, +]); + +// 鍗忓悓鍔炲叕鍔熻兘鏁版嵁 +const collaborationItems = reactive([ + { + icon: 'checkmark-circle', + label: '鍗忓悓瀹℃壒', + bgColor: '#4caf50' + }, + { + icon: 'map-pin', + label: '瀹㈡埛鎷滆', + bgColor: '#ff9800' + } +]); + +// 璁惧绠$悊鍔熻兘鏁版嵁 +const equipmentItems = reactive([ + { + icon: 'list', + label: '璁惧鍙拌处', + bgColor: '#9c27b0' + }, + { + icon: 'wrench', + label: '璁惧鎶ヤ慨', + bgColor: '#f44336' + }, + { + icon: 'shield-check', + label: '璁惧淇濆吇', + bgColor: '#00bcd4' + } +]); + +// 澶勭悊甯哥敤鍔熻兘鐐瑰嚮 +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/cooperativeOffice/collaborativeApproval/index' + }); + break; + case '瀹㈡埛鎷滆': + uni.navigateTo({ + url: '/pages/cooperativeOffice/clientVisit/index' + }); + break; + default: + uni.showToast({ + title: `鐐瑰嚮浜�${item.label}`, + icon: 'none' + }); + } +}; + +// 鍒涘缓瀵瑰瓙缁勪欢鐨勫紩鐢� +const uToastRef = ref(null); + +function getUserLoginFacotryList() { + userLoginFacotryList({userName: userStore.nickName}).then(res => { + // 妫�鏌es.data鏄惁涓烘暟缁� + factoryList.value[0] = [] + if (res.data && Array.isArray(res.data)) { + factoryListTem.value = res.data + res.data.forEach(item => { + factoryList.value[0].push(item.deptName) + }) + factoryId.value = userStore.currentDeptId + } else { + // 濡傛灉res.data涓嶆槸鏁扮粍锛岃缃负绌烘暟缁� + factoryList.value = [] + } + }).catch(error => { + modal.msgError('鑾峰彇鍏徃鍒楄〃澶辫触:', error) + factoryList.value = [] + }) +} +const changeFactory = async (arr) => { + show.value = false; + const factoryId = factoryListTem.value[arr.indexs[0]].deptId + const loginForm = { + username: userStore.name, + password: uni.getStorageSync('remembered_password'), + factoryId: factoryId, + } + modal.loading("鍒锋柊涓紝璇疯�愬績绛夊緟...") + userStore.loginCheckFactory(loginForm).then(() => { + modal.closeLoading() + nextTick(() => { + loginSuccess() + }); + }).catch(() => { + modal.closeLoading() + }) +} +function loginSuccess(result) { + uni.reLaunch({ + url: '/pages/index' + }); +} + +// 瀹氫箟鏂规硶 +const click = (name) => { + if (uToastRef.value) { + uToastRef.value.success(`鐐瑰嚮浜嗙${name + 1}涓猔); // 娉ㄦ剰锛氳繖閲屽姞1鏄洜涓洪�氬父鎴戜滑鏄粠绗�1涓紑濮嬭鏁扮殑 + } +}; + +onMounted(() => { + // 璁剧疆鐢ㄦ埛淇℃伅 + userStore.getInfo() + getUserLoginFacotryList() + // 鍚姩閫氱煡鐘舵�佸畾鏃跺櫒 + startStatusTimer() +}); +</script> + +<style scoped lang="scss"> +.content { + background: linear-gradient(135deg, #f8f9fa 0%, #e3f2fd 100%); + min-height: 100vh; + padding: 20px; + padding-top: env(safe-area-inset-top); + position: relative; + + &::before { + content: ''; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="dots" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1" fill="rgba(41, 121, 255, 0.03)"/></pattern></defs><rect width="100" height="100" fill="url(%23dots)"/></svg>'); + pointer-events: none; + z-index: -1; + } + + &::after { + content: ''; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: radial-gradient(circle at 20% 80%, rgba(41, 121, 255, 0.02) 0%, transparent 50%), + radial-gradient(circle at 80% 20%, rgba(156, 39, 176, 0.02) 0%, transparent 50%); + pointer-events: none; + z-index: -1; + } +} + +/* 鏈〉涓嶅啀瀹氫箟 .safe-area-top锛屽凡绉昏嚦鍏ㄥ眬鏍峰紡 */ + +.header-section { + margin-bottom: 16px; + animation: fadeInDown 0.6s ease-out; +} + +.currentFactory { + margin-top: 8px; + margin-left: 4px; + font-weight: 500; + display: flex; +} + +.factoryName { + width: auto; +} + +:deep(.u-text) { + align-items: center; +} + +.hero-section { + margin-bottom: 16px; + animation: fadeInUp 0.6s ease-out 0.1s both; +} + +.bg-img { + width: 100%; + height: 120px; + background: linear-gradient(135deg, #2979ff 0%, #1565c0 100%); + border-radius: 12px; + position: relative; + overflow: hidden; + box-shadow: 0 4px 20px rgba(41, 121, 255, 0.15); + + &::before { + content: ''; + position: absolute; + top: -50%; + left: -50%; + width: 200%; + height: 200%; + background: conic-gradient(from 0deg, transparent, rgba(255,255,255,0.1), transparent, rgba(255,255,255,0.05), transparent); + animation: rotate 20s linear infinite; + } + + &::after { + content: ''; + position: absolute; + top: 0; + right: 0; + width: 120px; + height: 120px; + background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%); + border-radius: 50%; + transform: translate(40px, -40px); + } +} + +.hero-content { + position: relative; + z-index: 1; + padding: 20px; + height: 100%; + display: flex; + align-items: center; +} + +.hero-title { + color: #ffffff; + font-size: 24px; + font-weight: 600; +} + + + +.notice-section { + margin-bottom: 16px; + animation: fadeInUp 0.6s ease-out 0.2s both; +} + +.notice { + width: 100%; + background: linear-gradient(135deg, #EAF2FF 0%, #BBDEFB 100%); + border: 1px solid #e3f2fd; + border-radius: 12px; + padding: 16px; + box-shadow: 0 4px 20px rgba(41, 121, 255, 0.08); + position: relative; + overflow: hidden; + + &::before { + content: ''; + position: absolute; + top: -50%; + left: -50%; + width: 200%; + height: 200%; + background: linear-gradient(45deg, transparent, rgba(255,255,255,0.6), transparent); + animation: shine 4s infinite; + } + + &::after { + content: ''; + position: absolute; + top: 0; + right: 0; + width: 80px; + height: 80px; + background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%); + border-radius: 50%; + transform: translate(30px, -30px); + } +} + + + +@keyframes shine { + 0% { + transform: translateX(-100%) translateY(-100%) rotate(45deg); + } + 100% { + transform: translateX(100%) translateY(100%) rotate(45deg); + } +} + +@keyframes fadeInDown { + from { + opacity: 0; + transform: translateY(-20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes fadeInUp { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes rotate { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + +.notice-content { + display: flex; + align-items: center; + height: 100%; + position: relative; + z-index: 1; +} + +.notice-left { + margin-right: 16px; +} + +.notice-status { + font-weight: 600; + font-size: 16px; + color: #1976d2; +} + +.notice-separator { + width: 1px; + height: 24px; + background: #e0e0e0; + margin-right: 16px; +} + +.notice-right { + display: flex; + align-items: center; + justify-content: space-between; + flex: 1; +} + +.notice-label { + color: #333; + font-size: 14px; + font-weight: 500; + margin-right: 12px; +} + +.notice-text { + font-weight: 400; + font-size: 14px; + color: #666666; +} + +.notice-number { + font-weight: 600; + font-size: 16px; + color: #1976d2; + margin-left: 4px; +} + +.notice-unit { + color: #666666; + font-size: 14px; + margin-left: 2px; +} + +/* 鍔熻兘妯″潡鏍峰紡 */ +.common-module { + margin-bottom: 24px; + background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%); + border-radius: 16px; + padding: 16px; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06); + border: none; + position: relative; + overflow: hidden; + transition: all 0.3s ease; + + &::after { + content: ''; + position: absolute; + top: 0; + right: 0; + width: 60px; + height: 60px; + background: radial-gradient(circle, rgba(0,0,0,0.02) 0%, transparent 70%); + border-radius: 50%; + transform: translate(30px, -30px); + } + + &:hover { + transform: translateY(-2px); + box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1); + + &::after { + background: radial-gradient(circle, rgba(0,0,0,0.04) 0%, transparent 70%); + } + } +} + +.marketing-module { + --module-color: #2979ff; +} + +.purchase-module { + --module-color: #1976d2; +} + +.collaboration-module { + --module-color: #4caf50; +} + +.equipment-module { + --module-color: #9c27b0; +} + +.module-header { + margin-bottom: 24px; + display: flex; + align-items: center; + justify-content: space-between; +} + +.module-title-container { + display: flex; + align-items: center; +} + +.module-title { + color: #333333; + font-size: 18px; + font-weight: 600; + position: relative; + + &::after { + content: ''; + position: absolute; + bottom: -4px; + left: 0; + width: 100%; + height: 2px; + background: linear-gradient(90deg, var(--module-color), rgba(255,255,255,0.9)); + border-radius: 1px; + transition: all 0.3s ease; + box-shadow: 0 0 8px rgba(0,0,0,0.1); + } + + &:hover::after { + width: 30px; + box-shadow: 0 0 12px rgba(0,0,0,0.15); + } +} + +.module-subtitle { + color: #666666; + font-size: 12px; + font-weight: 400; + margin-left: 8px; +} + +.module-content { + width: 100%; + display: grid; + gap: 16px; +} + +.icon-container { + width: 52px; + height: 52px; + border-radius: 12px; + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 6px; + box-shadow: 0 3px 12px rgba(0, 0, 0, 0.12); + transition: all 0.3s ease; + position: relative; + overflow: hidden; + + &::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 50%, rgba(255,255,255,0.05) 100%); + opacity: 0; + transition: opacity 0.3s ease; + } + + &::after { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + border-radius: 12px; + background: linear-gradient(45deg, transparent, rgba(255,255,255,0.2), transparent); + opacity: 0; + transition: opacity 0.3s ease; + } + + &:hover { + transform: translateY(-3px) scale(1.02); + box-shadow: 0 8px 25px rgba(0, 0, 0, 0.18); + + &::before, + &::after { + opacity: 1; + } + } +} + +.item-label { + font-size: 13px; + color: #555555; + text-align: center; + display: block; + line-height: 1.4; + font-weight: 500; + margin-top: 4px; + margin-bottom: 10px; +} + +.grid-text { + font-size: 14px; + color: #909399; + padding: 10rpx 0 20rpx 0rpx; + /* #ifndef APP-PLUS */ + box-sizing: border-box; + /* #endif */ +} + + +</style> -- Gitblit v1.9.3