From 80ca024e9ae633df0dc9f4e8f533f33b526afb3d Mon Sep 17 00:00:00 2001 From: p-honggang.li <p-honggang.li@pcitc.com> Date: 星期一, 08 九月 2025 16:24:38 +0800 Subject: [PATCH] 修复文件上传获取不到用户信息的BUG --- src/views/productManage/productPriceViewer/index.vue | 1082 ++++++++++++++++++++++++++++++++++++++++++-------------- 1 files changed, 810 insertions(+), 272 deletions(-) diff --git a/src/views/productManage/productPriceViewer/index.vue b/src/views/productManage/productPriceViewer/index.vue index a559117..2d9b05c 100644 --- a/src/views/productManage/productPriceViewer/index.vue +++ b/src/views/productManage/productPriceViewer/index.vue @@ -1,12 +1,5 @@ <template> - <el-dialog - v-model="visible" - :title="dialogTitle" - :before-close="handleClose" - destroy-on-close - class="product-price-dialog" - :width="dialogWidth" - > + <div> <div class="price-viewer-container" v-loading="loading"> <!-- 浠锋牸瀵规瘮琛ㄦ牸 --> <div class="pricing-table-container" v-if="showPricePanel && priceList.length > 0"> @@ -19,7 +12,7 @@ > <div class="pricing-table-wrapper"> <table class="pricing-table"> - <thead> + <thead> <tr> <th class="feature-column">鍔熻兘瀵规瘮</th> <th @@ -30,18 +23,19 @@ {{ group.productSuite }} </th> </tr> - <tr class="sub-header"> - <th>閿�鍞舰寮�</th> - <th - v-for="priceItem in tabData" - :key="priceItem.id" - :colspan="getColspan(priceItem)" - > - {{ getSalesFormText(priceItem.salesForm) }} - </th> - </tr> </thead> <tbody> + <tr> + <td class="feature-label">閿�鍞舰寮�</td> + <td + v-for="priceItem in tabData" + :key="priceItem.id" + :colspan="getColspan(priceItem)" + class="feature-value" + > + {{ getSalesFormText(priceItem.salesForm) }} + </td> + </tr> <tr> <td class="feature-label">瀹㈡埛瀵硅薄</td> <td @@ -113,16 +107,16 @@ </div> <span class="price-value points">{{ formatNumber(priceItem.pointsAmount) }} / {{ getPriceUnitText(priceItem.priceUnit) }}</span> </div> - <div - v-if="priceItem.priceSettings.includes('CURRENCY') && priceItem.currencyAmount > 0" - class="price-item" - > - <div class="price-lable-icon"> - <el-icon class="price-icon currency"><Money /></el-icon> - <span class="price-label">璐у竵</span> - </div> - <span class="price-value currency">{{ formatNumber(priceItem.currencyAmount) }} / {{ getPriceUnitText(priceItem.priceUnit) }}</span> - </div> + <div + v-if="priceItem.priceSettings.includes('CURRENCY') && priceItem.currencyAmount > 0" + class="price-item" + > + <div class="price-lable-icon"> + <span class="price-icon currency">楼</span> + <span class="price-label">璐у竵</span> + </div> + <span class="price-value currency">{{ formatNumber(priceItem.currencyAmount) }} / {{ getPriceUnitText(priceItem.priceUnit) }}</span> + </div> <div v-if="priceItem.priceSettings.includes('FREE')" class="price-item" @@ -174,19 +168,19 @@ <span class="label">浜у搧鍚嶇О锛�</span><span class="value strong">{{ productHeader.name }}</span> </div> <div class="grid-item"> - <span class="label">琛屼笟鏉垮潡锛�</span><span class="value">{{ productHeader.industry }}</span> + <span class="label">琛屼笟鏉垮潡锛�</span><span class="value">{{ productHeader.industrialChainName }}</span> </div> <div class="grid-item"> - <span class="label">鎻愪緵鑰咃細</span><span class="value">{{ productHeader.provider }}</span> + <span class="label">鎻愪緵鑰咃細</span><span class="value">{{ productHeader.submissionUnit }}</span> </div> <div class="grid-item"> <span class="label">鐢ㄦ埛濮撳悕锛�</span><span class="value">{{ userInfo.name }}</span> </div> <div class="grid-item"> - <span class="label">鍗曚綅锛�</span><span class="value">{{ userInfo.unit }}</span> + <span class="label">鍗曚綅锛�</span><span class="value">{{ userInfo.unitName }}</span> </div> <div class="grid-item"> - <span class="label">閮ㄩ棬锛�</span><span class="value">{{ userInfo.department }}</span> + <span class="label">閮ㄩ棬锛�</span><span class="value">{{ userInfo.departmentName }}</span> </div> </div> </el-card> @@ -198,12 +192,12 @@ <table class="suite-table"> <thead> <tr> - <th class="th-left">璇︽儏</th> - <th class="th-left">瑙勬牸</th> - <th class="th-left">鍗曚环</th> - <th class="th-center">鏁伴噺</th> - <th class="th-center">骞撮檺</th> - <th class="th-center">鎿嶄綔</th> + <th class="th-detail">璇︽儏</th> + <th class="th-spec">瑙勬牸</th> + <th class="th-price">鍗曚环</th> + <th class="th-quantity">鏁伴噺</th> + <th class="th-years">骞撮檺</th> + <th class="th-action">鎿嶄綔</th> </tr> </thead> <tbody> @@ -216,12 +210,12 @@ </td> <td class="cell-spec cell-spec-gg"> <div class="spec-line-gg"> - <div class="spec-line">閿�鍞舰寮忥細{{ getSalesFormText(suite.salesForm) }}</div> - <div class="spec-line">瀹㈡埛瀵硅薄锛歿{ getCustomerObjectText(suite.customerObject) }}</div> + <div class="spec-line">閿�鍞舰寮忥細<span class="spec-value">{{ getSalesFormText(suite.salesForm) }}</span></div> + <div class="spec-line">瀹㈡埛瀵硅薄锛�<span class="spec-value">{{ getCustomerObjectText(suite.customerObject) }}</span></div> </div> <div class="spec-line-gg"> - <div class="spec-line">璐︽埛鏁伴噺锛歿{ suite.accountQuantityUnlimited ? '涓嶉檺' : suite.accountQuantity }}</div> - <div class="spec-line">骞跺彂鑺傜偣鏁帮細{{ suite.concurrentNodeQuantityUnlimited ? '涓嶉檺' : suite.concurrentNodeQuantity }}</div> + <div class="spec-line">璐︽埛鏁伴噺锛�<span class="spec-value">{{ suite.accountQuantityUnlimited ? '涓嶉檺' : suite.accountQuantity }}</span></div> + <div class="spec-line">骞跺彂鑺傜偣鏁帮細<span class="spec-value">{{ suite.concurrentNodeQuantityUnlimited ? '涓嶉檺' : suite.concurrentNodeQuantity }}</span></div> </div> </td> @@ -255,7 +249,8 @@ :max="999" :controls="true" size="large" - @change="(value) => handleQuantityChange(suite.id, value?value:1)" + class="quantity-input" + @change="(value) => handleQuantityChange(suite.id,value?value:1)" /> </td> <td class="th-center"> @@ -265,6 +260,7 @@ :max="100" :controls="true" size="large" + class="duration-input" :disabled="suite.priceType === 'FREE'" @change="(value) => handleDurationChange(suite.id, value?value:1)" /> @@ -325,7 +321,7 @@ <td class="value">{{ statusText(orderStatus.status) }}</td> <td></td> <td class="value link"> - <el-link type="primary" @click="viewOrder">鏌ョ湅璁㈠崟淇℃伅</el-link> +<!-- <el-link type="primary" @click="viewOrder">鏌ョ湅璁㈠崟淇℃伅</el-link>--> </td> </tr> </tbody> @@ -338,32 +334,29 @@ <el-empty description="鏆傛棤浠锋牸淇℃伅" /> </div> </div> - - <template #footer v-if="!showOrderStatus"> - <span class="dialog-footer"> - <template v-if="showPricePanel"> - <el-button @click="handleClose">鍏抽棴</el-button> - <el-button type="primary" @click="handleOrder">绔嬪嵆璁㈣喘</el-button> - </template> - <template v-else> - <el-button @click="returnPricePanel">杩斿洖浠锋牸瀵规瘮</el-button> - <el-button type="primary" @click="submitOrder">鎻愪氦鐢宠</el-button> - </template> - </span> - </template> - </el-dialog> + <div class="footer" v-if="showPricePanel"> + <el-button type="primary" @click="handleOrder">绔嬪嵆璁㈣喘</el-button> + </div> + <div class="footer" v-if="showOrderPanel"> + <el-button @click="returnPricePanel">杩斿洖浠锋牸瀵规瘮</el-button> + <el-button type="primary" @click="submitOrder">鎻愪氦鐢宠</el-button> + </div> + </div> <!-- 浜у搧璁㈣喘瀵硅瘽妗嗙Щ闄わ紝鏀逛负鍐呭祵灞曠ず --> </template> <script setup lang="ts"> -import { ref, watch, computed } from 'vue' +import { ref, watch, computed, onMounted } from 'vue' import { ElMessage } from 'element-plus' import { useRoute } from 'vue-router' import productPricingApi from '@/api/productPricingApi' import cartApi from '@/api/cartApi' import orderApi from '@/api/orderApi' -import { ShoppingCart, Coin, Money } from '@element-plus/icons-vue' +import { useUserInfo } from '@/stores/modules/userInfo' +import { queryUserDetail } from '@/api/userInfo' +import productApi from '@/api/productApi' +import workFlowApi from '@/api/workFlowApi' const route = useRoute() @@ -384,36 +377,11 @@ enableStatus: 'ENABLED' | 'DISABLED' } -interface Props { - modelValue: boolean - productId?: string - width?: string -} - -interface Emits { - (e: 'update:modelValue', value: boolean): void - (e: 'order', selectedItems: PriceItem[]): void -} - // 鍏煎 path 鍙傛暟 productId 涓� query 鍙傛暟 id/productId const currentProductId = computed<string | undefined>(() => { return (route.params.productId as string) || (route.query.productId as string) || (route.query.id as string) }) - -const props = withDefaults(defineProps<Props>(), { - modelValue: false, - productId: '', - width: '90%' -}) - - -const emit = defineEmits<Emits>() - -const visible = computed({ - get: () => props.modelValue, - set: (value) => emit('update:modelValue', value) -}) const loading = ref(false) const activeTab = ref('enterprise') @@ -424,8 +392,34 @@ const showPricePanel = ref(true) const showOrderStatus = ref(false) // 妯℃嫙鐢ㄦ埛淇℃伅锛堝疄闄呭簲浠庣敤鎴风姸鎬佽幏鍙栵級 -const currentUserId = ref(1) -const currentUnitId = ref(1) +const userStore = useUserInfo() +const currentUserId = computed(() => userStore.getUserId || userStore.getUserInfo?.userId) +const currentUnitId = computed(() => userStore.getUnitId || userStore.getUserInfo?.unitId || '') + +onMounted(async () => { + if (!currentUserId.value) { + try { + const res: any = await queryUserDetail() + if (res?.code === 200 && res.data) { + userStore.updateUserDetail(res.data) + // currentUserId.value = res.data.id || res.data.userId + console.log(currentUserId.value) + userInfo.value = res.data + } else { + ElMessage.error(res?.msg || '鏃犳硶鑾峰彇鐢ㄦ埛淇℃伅锛岃鍏堢櫥褰�') + return + } + } catch (e) { + console.error('鑾峰彇鐢ㄦ埛璇︽儏澶辫触:', e) + ElMessage.error('鑾峰彇鐢ㄦ埛淇℃伅澶辫触锛岃绋嶅悗閲嶈瘯') + return + } + }else{ + userInfo.value = userStore.getUserInfos + } + // 鑾峰彇璁㈣喘淇℃伅 + fetchProductData(currentProductId.value ? currentProductId.value : '') +}) type PriceTypeKey = 'POINTS' | 'CURRENCY' | 'AGREEMENT' | 'FREE' interface OrderSuite extends PriceItem { selected: boolean @@ -513,14 +507,15 @@ // 浜у搧淇℃伅/鐢ㄦ埛淇℃伅锛堥潤鎬侊級 const productHeader = ref({ - name: '涓氦鏂硅繙鏅鸿兘瀹炴祴瀹為噺绠$悊绯荤粺', - industry: '鍏矾,甯傛斂,寤虹瓚', - provider: '涓氦寤虹瓚闆嗗洟绗竴宸ョ▼鏈夐檺鍏徃' + name: '', + industrialChainName: '', + submissionUnit: '', + createUserId: '' }) const userInfo = ref({ - name: '寮犻潤', - unit: '淇$闆嗗洟', - department: '闂ㄦ埛绯荤粺涓存椂缁�' + name: '', + departmentName: '', + unitName: '' }) // 鍏ㄩ�� @@ -551,7 +546,7 @@ const suite = orderSuites.value[index] if (!suite) return try { - await removeFromCart(suite.id) + await removeFromCart(String(suite.id)) orderSuites.value.splice(index, 1) } catch (e) { } @@ -563,8 +558,6 @@ ElMessage.success('璁㈣喘鐢宠鎻愪氦鎴愬姛锛�') // 娓呯┖閫夋嫨鐘舵�� selectedSuiteIds.value.clear() - // 鍏抽棴浠锋牸鏌ョ湅鍣� - visible.value = false } // 寮圭獥鏍囬 @@ -572,10 +565,6 @@ return `銆�${productName.value}銆戜骇鍝佸畾浠穈 }) -// 寮圭獥瀹藉害 -const dialogWidth = computed(() => { - return props.width -}) // 鎸夊鎴峰璞″垎缁勭殑浠锋牸鏁版嵁 const groupedPriceData = computed(() => { @@ -650,7 +639,8 @@ loading.value = true try { - const res: any = await productPricingApi.listByProductId(productId) + // 鍙煡璇㈠凡鍚敤鐨勫畾浠� + const res: any = await productPricingApi.listBycondition({ productId: productId,isActive: true }) if (res?.code === 200) { const list = Array.isArray(res.data) ? res.data : [] const mapped: PriceItem[] = list.map((it: any) => { @@ -701,31 +691,40 @@ } finally { loading.value = false } + //鑾峰彇浜у搧璇︽儏淇℃伅 + try { + // productDetail.value = mockProductMap[productId] || null + const data = { + id: productId + } + const detailRes: any = await productApi.getProductById(data) + if (detailRes?.code === 200) { + productHeader.value = detailRes.data || { name: '', industrialChainName: '', submissionUnit: '', createUserId: '' } + } else { + productHeader.value = { name: '', industrialChainName: '', submissionUnit: '', createUserId: '' } + ElMessage.error(detailRes?.msg || '鑾峰彇浜у搧璇︽儏澶辫触') + } + } catch (e) { + productHeader.value = { name: '', industrialChainName: '', submissionUnit: '', createUserId: '' } + ElMessage.error('鑾峰彇浜у搧璇︽儏澶辫触') + } finally { + loading.value = false + } + // 淇敼activeTab 榛樿鍊� + if(priceList.value.length > 0){ + + activeTab.value = groupedPriceData.value.hasOwnProperty('enterprise') ? 'enterprise' + : groupedPriceData.value.hasOwnProperty('project') ? 'project' : 'personal' + } + } // 鐩戝惉浜у搧ID鍙樺寲 -watch(() => props.productId, (newProductId) => { - if (newProductId && visible.value) { +watch(currentProductId, (newProductId) => { + if (newProductId) { fetchProductData(newProductId) } }) - -// 鐩戝惉寮圭獥鏄剧ず鐘舵�� -watch(() => visible.value, (newVisible) => { - if (newVisible && props.productId) { - fetchProductData(props.productId) - } -}) - -// 鍏抽棴寮圭獥 -const handleClose = () => { - visible.value = false - showOrderPanel.value = false - showOrderStatus.value = false - showPricePanel.value = true - orderSuites.value = [] - selectedSuiteIds.value.clear() -} // 濂椾欢閫夋嫨澶勭悊 const handleSuiteSelect = (suiteId: number, checked: any) => { @@ -740,7 +739,7 @@ } else { selectedSuiteIds.value.delete(suiteId) // 浠庤喘鐗╄溅绉婚櫎 - removeFromCart(suiteId) + removeFromCart(String(suiteId)) } } @@ -784,9 +783,31 @@ ElMessage.error('鏆備笉鏀寔璐у竵浜ゆ槗锛岃閫夋嫨绉垎鎴栧崗璁敮浠樻柟寮�') return } - + if (!idempotencyToken.value) { ElMessage.error('涓嬪崟Token鑾峰彇澶辫触锛岃杩斿洖閲嶈瘯') + return + } + const hasPoints = items.some(item => item.priceType === 'POINTS') + const hasAGREEMENT = items.some(item => item.priceType === 'AGREEMENT') + let paymentType = '' + if(hasPoints){ + paymentType = '绉垎' + }else{ + paymentType = '鍗忚' + } + let processdefId: string = '' + const type = hasAGREEMENT ? 'trade_agreement' : 'trade_point'; + // 鑾峰彇宸ヤ綔娴佸弬鏁� + const wkParamsRes: any = await workFlowApi.getWorkFlowParams({ + type: type, + // unitId: '1', + businessKey: type + }) + if(wkParamsRes?.code === 200 && wkParamsRes.data?.processTemplateId){ + processdefId = wkParamsRes.data.processTemplateId + }else { + ElMessage.error('鑾峰彇宸ヤ綔娴佸弬鏁板け璐�!') return } @@ -795,13 +816,14 @@ userId: currentUserId.value, unitId: currentUnitId.value, productName: productHeader.value.name, - providerName: productHeader.value.provider, - providerId: 3, - paymentType: '绉垎', + providerName: productHeader.value.submissionUnit, + providerId: productHeader.value.createUserId, + paymentType: paymentType, buyerRemarks: '', + processdefId: processdefId, items: items.map(it => ({ pricingId: it.id, - productId: Number(it.productId), + productId: it.productId, suiteName: getProductSuiteText(it.productSuite), salesForm: getSalesFormText(it.salesForm), customerType: getCustomerObjectText(it.customerObject), @@ -813,8 +835,8 @@ quantity: it.quantity, duration: it.duration, totalPrice: undefined, - providerId: 3, - providerName: productHeader.value.provider, + providerId: productHeader.value.createUserId, + providerName: productHeader.value.submissionUnit, remarks: '' })) } @@ -827,14 +849,41 @@ orderStatus.value = { id: data.orderId || '鈥�', productName: data.productName || productHeader.value.name, - provider: data.providerName || productHeader.value.provider, + provider: data.providerName || productHeader.value.submissionUnit, status: 'SUBMITTED', submitTime: data.applyTime ? String(data.applyTime) : new Date().toLocaleString(), applyTime: data.applyTime ? String(data.applyTime) : new Date().toLocaleString() } + // 璋冪敤宸ヤ綔娴佹帴鍙e彂璧峰鎵规祦绋嬶紝鎷垮埌娴佺▼瀹炰緥ID鍚庡洖鍐欒鍗晈orkflow_id + // 鏀惧悗绔鐞� + // try { + // // 鏍规嵁鏄惁鍖呭惈鍗忚鏄庣粏锛岄厤缃笉鍚屾祦绋嬪畾涔変笌涓氬姟Key锛堝厛鐢ㄩ潤鎬佸�煎崰浣嶏級 + // // const processdefId = hasAGREEMENT ? 'Process_Agreement_Static' : 'Process_Points_Static' + // const businessKey = hasAGREEMENT ? 'agreement_biz_key' : 'points_biz_key' + // const type = hasAGREEMENT ? 'trade_agreement' : 'trade_point'; + // // 鑾峰彇宸ヤ綔娴佸弬鏁� + // const wkParamsRes: any = await workFlowApi.getWorkFlowParams({ + // type: type, + // unitId: '1' + // }) + // if(wkParamsRes?.code === 200 && wkParamsRes.data?.processTemplateId){ + // const wfRes: any = await workFlowApi.startWorkflowAndComplete({ + // processdefId: wkParamsRes.data.processTemplateId, + // userid: String(currentUserId.value || ''), + // businessKey: businessKey + // }) + // if (wfRes?.code === 200 && wfRes.data?.processinstId) { + // await orderApi.updateWorkflowId(data.orderId, wfRes.data.processinstId) + // } + // } + // + // } catch (e) { + // console.warn('鍚姩宸ヤ綔娴佸け璐ユ垨鏇存柊workflow_id澶辫触', e) + // } + // 娓呯┖璐墿杞︼紙鍚庣 + 鏈湴鐘舵�侊級 try { - const clearRes: any = await cartApi.clearCart(currentUserId.value, currentUnitId.value) + const clearRes: any = await cartApi.clearCart(currentUserId.value, currentUnitId.value,currentProductId.value ? currentProductId.value : '') if (clearRes?.code === 200) { cartItems.value = [] orderSuites.value = [] @@ -859,7 +908,7 @@ try { const cartData = { pricingId: priceItem.id, - productId: Number(priceItem.productId), + productId: priceItem.productId, productName: productName.value, suiteName: getProductSuiteText(priceItem.productSuite), salesForm: getSalesFormText(priceItem.salesForm), @@ -885,9 +934,9 @@ } } -const removeFromCart = async (pricingId: number) => { +const removeFromCart = async (pricingId: string) => { try { - const res: any = await cartApi.removeFromCart(currentUserId.value, currentUnitId.value, pricingId) + const res: any = await cartApi.removeFromCart(currentUserId.value, currentUnitId.value, currentProductId.value? currentProductId.value : '',pricingId) if (res?.code === 200) { ElMessage.success('宸蹭粠璐墿杞︾Щ闄�') } else { @@ -899,10 +948,16 @@ } } -const updateCartItem = async (pricingId: number, quantity: number, duration: number) => { +const updateCartItem = async (pricingId: number, quantity: number | null, duration: number | null) => { try { // 杩欓噷闇�瑕佹牴鎹疄闄呮帴鍙h皟鏁达紝鍙兘闇�瑕佷紶閫掓洿澶氬弬鏁� - const res: any = await cartApi.updateCartItem(currentUserId.value, currentUnitId.value, pricingId, quantity) + let res: any = {} + if(quantity){ + res = await cartApi.updateCartItem(currentUserId.value, currentUnitId.value, currentProductId.value? currentProductId.value : '', pricingId, quantity) + } + if(duration){ + res = await cartApi.updateCartItemDuration(currentUserId.value, currentUnitId.value, currentProductId.value? currentProductId.value : '', pricingId, duration) + } if (res?.code === 200) { ElMessage.success('璐墿杞﹀凡鏇存柊') } else { @@ -917,7 +972,7 @@ const fetchCartItems = async () => { cartLoading.value = true try { - const res: any = await cartApi.getCartItems(currentUserId.value, currentUnitId.value) + const res: any = await cartApi.getCartItems(currentUserId.value, currentUnitId.value, currentProductId.value? currentProductId.value : '') if (res?.code === 200) { cartItems.value = res.data || [] // 灏嗚喘鐗╄溅鏁版嵁杞崲涓鸿鍗曞浠舵牸寮� @@ -959,7 +1014,7 @@ // 澶勭悊鏁伴噺鍙樺寲 const handleQuantityChange = async (pricingId: number, quantity: number) => { try { - await updateCartItem(pricingId, quantity, 1) // 鏆傛椂浼犻�掗粯璁uration涓�1 + await updateCartItem(pricingId, quantity, null) // 鏆傛椂浼犻�掗粯璁uration涓�1 } catch (error) { console.error('鏇存柊鏁伴噺澶辫触:', error) } @@ -969,7 +1024,7 @@ const handleDurationChange = async (pricingId: number, duration: number) => { try { // 杩欓噷鍙兘闇�瑕佹牴鎹疄闄呮帴鍙h皟鏁达紝浼犻�抎uration鍙傛暟 - await updateCartItem(pricingId, 1, duration) // 鏆傛椂浼犻�掗粯璁uantity涓�1 + await updateCartItem(pricingId, null, duration) // 鏆傛椂浼犻�掗粯璁uantity涓�1 } catch (error) { console.error('鏇存柊骞撮檺澶辫触:', error) } @@ -1080,121 +1135,301 @@ </script> <style scoped lang="scss"> +.default-main { + padding: 20px; + background-color: #f5f5f5; + min-height: 100vh; + position: relative; + z-index: 1; +} + +// 鍏ㄥ眬琛ㄥご鏂囧瓧澶у皬璋冩暣 +:deep(.el-table__header) { + th { + .cell { + font-size: 14px !important; + font-weight: 700; + } + } +} + +.search-card { + margin-bottom: 20px; +} + +.mt15 { + margin-top: 15px; +} + .price-viewer-container { .pricing-table-container { - .pricing-tabs { - :deep(.el-tabs__header) { - margin-bottom: 5px; + .pricing-tabs { + :deep(.el-tabs__header) { + margin-bottom: 2px; + } + /* 灞呬腑 tabs 瀵艰埅 */ + :deep(.el-tabs__nav-wrap) { + display: flex; + justify-content: center; } - - :deep(.el-tabs__item.is-active) { - font-weight: bold; + :deep(.el-tabs__nav) { + margin: 0 auto; + border: none !important; } + /* 鏅�� tabs 鏍峰紡 */ + :deep(.el-tabs--card > .el-tabs__header .el-tabs__nav) { + border: none; + border-radius: 0; + background: transparent; + box-shadow: none; + display: flex; + gap: 8px; + } + :deep(.el-tabs--card > .el-tabs__header .el-tabs__item) { + border: 1px solid #e4e7ed; + border-radius: 6px; + margin: 0; + padding: 14px 24px; + color: #606266; + background: #fff; + transition: all .2s ease; + font-size: 14px; + font-weight: 500; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); + + &:hover { + border-color: #409eff; + box-shadow: 0 4px 8px rgba(64, 158, 255, 0.15); + } + } + :deep(.el-tabs__item:hover) { + color: #409eff; + background: #f5f7fa; + } + :deep(.el-tabs__item.is-active) { + font-weight: 600; + color: #409eff; + background: #ecf5ff; + border-color: #409eff; + box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2); + + &::after { + content: ''; + position: absolute; + bottom: -1px; + left: 0; + right: 0; + height: 3px; + background: #409eff; + border-radius: 0 0 6px 6px; + } + } } - .pricing-table-wrapper { - overflow-x: auto; + .pricing-table-wrapper { + overflow-x: auto; + background: #fff; + border-radius: 8px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); + padding: 0; + border: 1px solid #e4e7ed; + margin-top: 2px; - .pricing-table { - width: 100%; - border-collapse: collapse; - border: 1px solid #e4e7ed; - background: #fff; - - th, td { - border: 1px solid #e4e7ed; - padding: 6px 8px; - text-align: center; - vertical-align: middle; - font-size: 16px; - } - tr th:first-child, td:first-child{ - font-weight: 700; - color: #303133; - } - - th { - background-color: #f5f7fa; - font-weight: 600; - color: #303133; - } - - .feature-column { - width: 120px; - background-color: #f5f7fa; - } - - .sub-header { - th { - background-color: #fafafa; - font-weight: 500; - font-size: 16px; - color: #606266; + .pricing-table { + width: 100%; + border-collapse: collapse; + background: #fff; + border: 1px solid #e4e7ed; + border-radius: 8px; + overflow: visible; + + // 缁熶竴鎵�鏈夊崟鍏冩牸鏍峰紡 + th, td { + border-top: 1px solid #e4e7ed !important; + border-bottom: 1px solid #e4e7ed !important; + border-left: none !important; + border-right: none !important; + padding: 8px 10px; + text-align: center; + vertical-align: middle; + font-size: 14px; + line-height: 1.5; + color: #303133; + background: #fff; + transition: all 0.2s ease; } - } - - .feature-label { - background-color: #f5f7fa; - font-weight: 500; - color: #606266; - text-align: center; - } - - .feature-value { - color: #606266; - background: #fafafa; /* 琛屼负鐏拌壊 */ - } + + // 绗竴鍒楁牱寮� + tr th:first-child, td:first-child{ + font-weight: 700; + color: #303133; + background: #f8fafc; + text-align: left; + padding-left: 16px; + } + + // 琛ㄥご鏍峰紡 + th { + background: linear-gradient(180deg, #f7f9fc 0%, #eef2f7 100%); + font-weight: 600; + color: #303133; + border-bottom: 2px solid #e4e7ed !important; + border-left: none !important; + border-right: none !important; + position: relative; + } + + .feature-column { + width: 140px; + min-width: 140px; + } + + // 瀛愯〃澶存牱寮忓凡绉婚櫎锛岄攢鍞舰寮忚鐜板湪鏄櫘閫氳 + + // 鍔熻兘鏍囩鏍峰紡 + .feature-label { + font-weight: 600; + color: #303133; + text-align: left; + background: #f8fafc; + border-right: none !important; + } + + // 鍔熻兘鍊兼牱寮� + .feature-value { + color: #303133; + background: #fff; + font-weight: 500; + } + + // 琛屾偓鍋滄晥鏋� + tbody tr:hover td { + background: #f0f7ff; + border-color: #b3d8ff !important; + } + + // 鍋舵暟琛岃儗鏅� + tbody tr:nth-child(even) td { + background: #fafbfc; + } + + tbody tr:nth-child(even):hover td { + background: #e6f3ff; + } + + // 寮哄埗纭繚鏈�鍚庝竴琛屾湁瀹屾暣鐨勮竟妗� + tbody tr:last-child td { + border-bottom: 1px solid #e4e7ed !important; + } + + // 寮哄埗纭繚鎵�鏈夊崟鍏冩牸閮芥湁瀹屾暣鐨勮竟妗� + tbody td { + border: 1px solid #e4e7ed !important; + } + + // 鐗瑰埆澶勭悊琛ㄦ牸搴曢儴杈规 + tbody tr:last-child { + border-bottom: 1px solid #e4e7ed !important; + } + + // 浣跨敤鏇村叿浣撶殑閫夋嫨鍣ㄧ‘淇濊竟妗嗘樉绀� + .pricing-table tbody tr:last-child td { + border-bottom: 1px solid #e4e7ed !important; + } + + // 纭繚琛ㄦ牸鏈韩鏈夊畬鏁寸殑杈规 + .pricing-table { + border: 1px solid #e4e7ed !important; + } + + // 鐗瑰埆澶勭悊濂椾欢閫夋嫨琛岀殑杈规 + .pricing-table tbody tr:last-child .feature-label, + .pricing-table tbody tr:last-child .feature-value { + border-bottom: 1px solid #e4e7ed !important; + } + + // 纭繚鎵�鏈夎閮芥湁瀹屾暣鐨勮竟妗� + .pricing-table tbody tr td { + border-top: 1px solid #e4e7ed !important; + border-bottom: 1px solid #e4e7ed !important; + border-left: none !important; + border-right: none !important; + } .order-methods { display: flex; flex-direction: column; - gap: 4px; + gap: 6px; align-items: center; .method-item { - font-size: 16px; - color: #409eff; + font-size: 12px; + color: #3a7afe; + background: #f4f7ff; + border: 1px solid #e3ebff; + border-radius: 999px; + padding: 2px 10px; } } - .price-info { - display: flex; - flex-direction: column; /* 绔栨帓 */ - gap: 8px; - align-items: center; - - .price-item { - display: flex; - align-items: flex-start; - flex-direction: column; - gap: 6px; - .price-lable-icon{ + .price-info { + display: flex; + flex-direction: column; + gap: 8px; + align-items: center; + + .price-item { display: flex; + align-items: center; gap: 6px; - } - .price-label { - font-size: 16px; - color: #606266; - } - - .price-value { - font-weight: 500; - font-size: 20px; - &.points { - color: #e7900d; - } - - &.currency { - color: #e7900d; - } - - &.free { - color: #67c23a; - } - } - .price-icon.points { color: #e6a23c; } - .price-icon.currency { color: #e7900d; } - } + padding: 6px 10px; + border: 1px solid #f0f2f5; + border-radius: 6px; + background: #fff; + box-shadow: inset 0 -1px 0 rgba(0,0,0,0.02); + + .price-lable-icon { + display: flex; + align-items: center; + gap: 4px; + } + + .price-label { + font-size: 12px; + color: #909399; + white-space: nowrap; + } + + .price-value { + font-weight: 600; + font-size: 16px; + white-space: nowrap; + + &.points { + color: #e7900d; + } + + &.currency { + color: #10b981; + } + + &.free { + color: #67c23a; + } + } + + .price-icon.points { + color: #e6a23c; + font-size: 14px; + } + + .price-icon.currency { + color: #16a34a; + font-size: 16px; + font-weight: 600; + font-family: "Microsoft YaHei", "PingFang SC", sans-serif; + } + } .add-checkbox { margin-top: 4px; @@ -1206,7 +1441,7 @@ justify-content: center; align-items: center; padding: 8px 0; - .add-cart-icon { color: #409eff; font-size:22px} + .add-cart-icon { color: #3a7afe; font-size:22px} } } } @@ -1221,7 +1456,11 @@ .no-price-data { text-align: center; - padding: 40px 0; + padding: 60px 0; + background: #fff; + border-radius: 8px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); + margin: 20px 0; } .price-value.agreement { @@ -1248,14 +1487,23 @@ } .order-header-card { - :deep(.el-card__body) { padding: 10px; } - .basic-grid { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 16px;} - .grid-item { font-size: 16px; color:#606266; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } - .label { color:#606266; } + :deep(.el-card__body) { padding: 16px; } + .basic-grid { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 16px;} + .grid-item { + font-size: 14px; + color:#606266; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + line-height: 2; + } + .label { color:#606266; font-weight: 500; } .value { color:#303133; } .value.strong { font-weight: 600; } - margin-bottom: 20px; + margin-bottom: 10px; margin-top: 10px; + border-radius: 8px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); } .points-info-card { @@ -1274,6 +1522,8 @@ .selected-suites-card { :deep(.el-card__body) { padding: 8px; } + border-radius: 8px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); } .suite-table-wrapper { overflow-x: auto; width: 100%; } @@ -1282,63 +1532,255 @@ border-collapse: collapse; background: #fff; table-layout: fixed; + border: 1px solid #e4e7ed; + border-radius: 8px; + overflow: hidden; + box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); } .suite-table th, .suite-table td { border: 1px solid #e4e7ed; - padding: 6px 8px; + padding: 8px 10px; vertical-align: middle; - font-size: 16px; + font-size: 14px; + line-height: 1.5; + color: #303133; + background: #fff; + transition: all 0.2s ease; + text-align: center; } -.suite-table thead th { background: #f0f2f5; color: #303133; font-weight: 600; font-size: 16px;} -.table-toolbar { display:flex; justify-content: space-between; align-items:center; padding: 4px 0 8px; } -.toolbar-left { display:flex; align-items:center; gap: 12px; width: 100%;justify-content: space-between;} -.toolbar-right { display:flex; align-items:center; gap: 12px; } -.summary-info { font-size: 14px; color: #606266; } -.summary-count { color: #409eff; font-weight: 600; } -.summary-points { color: #e6a23c; font-weight: 600; } +.suite-table thead th { + background: linear-gradient(180deg, #f7f9fc 0%, #eef2f7 100%); + color: #303133; + font-weight: 600; + font-size: 14px; + border-bottom: 2px solid #e4e7ed; + position: relative; +} -.suite-table .th-left { text-align: center; width: 21%;} -.suite-table .th-center { text-align: center; } +.suite-table tbody tr:hover td { + background: #f0f7ff; + border-color: #b3d8ff; +} + +.suite-table tbody tr:nth-child(even) td { + background: #fafbfc; +} + +.suite-table tbody tr:nth-child(even):hover td { + background: #e6f3ff; +} + +// 纭繚濂椾欢琛ㄦ牸鏈�鍚庝竴琛屾湁瀹屾暣鐨勮竟妗� +.suite-table tbody tr:last-child td { + border-bottom: 1px solid #e4e7ed; +} + +// 纭繚濂椾欢琛ㄦ牸鎵�鏈夊崟鍏冩牸閮芥湁瀹屾暣鐨勮竟妗� +.suite-table tbody td { + border: 1px solid #e4e7ed; +} + +.table-toolbar { + display: flex; + justify-content: space-between; + align-items: center; + padding: 12px 16px; + background: #f8fafc; + border-top: 1px solid #e4e7ed; + border-radius: 0 0 8px 8px; +} +.toolbar-left { + display: flex; + align-items: center; + gap: 16px; + width: 100%; + justify-content: space-between; +} +.toolbar-right { + display: flex; + align-items: center; + gap: 12px; +} +.summary-info { + font-size: 14px; + color: #606266; + display: flex; + align-items: center; + gap: 8px; +} +.summary-count { + color: #409eff; + font-weight: 600; + background: #ecf5ff; + padding: 4px 8px; + border-radius: 4px; +} +.summary-points { + color: #e6a23c; + font-weight: 600; + background: #fdf6ec; + padding: 4px 8px; + border-radius: 4px; +} + +.suite-table .th-detail { text-align: center; width: 25%;} +.suite-table .th-spec { text-align: center; width: 25%;} +.suite-table .th-price { text-align: center; width: 18%;} +.suite-table .th-quantity { text-align: center; width: 12%;} +.suite-table .th-years { text-align: center; width: 12%;} +.suite-table .th-action { text-align: center; width: 8%;} + +// 璇︽儏銆佽鏍笺�佷环鏍煎垪鐨勫唴瀹瑰乏瀵归綈 +.suite-table .cell-detail, +.suite-table .cell-spec, +.suite-table .cell-price { + text-align: left !important; +} + .cell-detail .detail-content { display: inline-flex; align-items: center; gap: 8px; } .suite-name { font-weight: 600; color: #303133; } -.cell-spec .spec-line { color: #606266; font-size: 16px; line-height: 20px; } -.cell-spec-gg {display: flex; flex-direction: column; gap: 16px; - .spec-line-gg{ - display: flex; - gap: 30px; +.cell-spec .spec-line { + color: #606266; + font-size: 13px; + line-height: 18px; + padding: 2px 0; + + // 瑙勬牸鍒椾腑鏁板�肩殑缁熶竴棰滆壊 + .spec-value { + color: #409eff; + font-weight: 500; } } -.cell-price .price-inline { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; } -.cell-price .price-tag.points { color: #E6A23C; font-weight: 600; } -.cell-price .price-tag.currency { color: #F56C6C; font-weight: 600; } -.cell-price .price-free { color: #67C23A; font-weight: 600; } -.cell-price .price-agreement { color: #409EFF; } +.cell-spec-gg { + display: flex; + flex-direction: column; + gap: 12px; + + .spec-line-gg{ + display: flex; + gap: 24px; + } +} +.cell-price .price-inline { + display: inline-flex; + align-items: center; + gap: 8px; + white-space: nowrap; +} +.cell-price .price-tag.points { + color: #E6A23C; + font-weight: 600; + background: #fdf6ec; + padding: 4px 8px; + border-radius: 4px; +} +.cell-price .price-tag.currency { + color: #F56C6C; + font-weight: 600; + background: #fef0f0; + padding: 4px 8px; + border-radius: 4px; +} +.cell-price .price-free { + color: #67C23A; + font-weight: 600; + background: #f0f9ff; + padding: 4px 8px; + border-radius: 4px; +} +.cell-price .price-agreement { + color: #409EFF; + background: #ecf5ff; + padding: 4px 8px; + border-radius: 4px; +} .cell-summary .summary-item { font-size: 14px; color: #606266; line-height: 1.5; } .order-status-panel { - .steps-wrapper { padding: 6px 8px 0 8px; } - .result-text { text-align: center; margin: 18px 0 12px; font-size: 18px; color: #303133; } + .steps-wrapper { + padding: 20px 16px; + background: #fff; + border-radius: 8px 8px 0 0; + border-bottom: 1px solid #e4e7ed; + } + .result-text { + text-align: center; + margin: 24px 0 20px; + font-size: 18px; + color: #303133; + font-weight: 500; + } .order-info-card { :deep(.el-card__body) { padding: 0; } + border-radius: 0 0 8px 8px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); } .order-info-title { - background: #f5f7fa; - padding: 12px 16px; + background: linear-gradient(180deg, #f7f9fc 0%, #eef2f7 100%); + padding: 16px 20px; font-weight: 600; - border-bottom: 1px solid #ebeef5; + border-bottom: 1px solid #e4e7ed; + color: #303133; } .order-info-table { width: 100%; border-collapse: collapse; + border: 1px solid #e4e7ed; + border-radius: 8px; + overflow: hidden; + td { - padding: 12px 16px; - border-bottom: 1px solid #ebeef5; + padding: 10px 12px; + border-bottom: 1px solid #e4e7ed; + border-right: 1px solid #e4e7ed; + vertical-align: middle; + font-size: 14px; + line-height: 1.5; + color: #303133; + background: #fff; + transition: all 0.2s ease; } - .label { width: 120px; color: #606266; } - .value { color: #303133; } - .link { text-align: right; } + + td:last-child { + border-right: none; + } + + tr:last-child td { + border-bottom: none; + } + + .label { + width: 120px; + color: #606266; + font-weight: 500; + background: #f8fafc; + text-align: center; + } + + .value { + color: #303133; + background: #fff; + } + + .link { + text-align: right; + background: #fff; + } + + tr:hover td { + background: #f0f7ff; + border-color: #b3d8ff; + } + + tr:nth-child(even) td { + background: #fafbfc; + } + + tr:nth-child(even):hover td { + background: #e6f3ff; + } } } @@ -1348,4 +1790,100 @@ .order-summary .summary-value.highlight{ color:#409eff; } .order-summary .summary-value.total{ color:#e6a23c; } .order-summary .summary-value.currency{ color:#f56c6c; } +.footer { + display: flex; + flex-direction: row-reverse; + margin-right: 50px; + gap: 20px; + margin-top: 10px; + padding: 10px 0; + + .el-button { + border-radius: 6px; + font-weight: 500; + padding: 12px 24px; + + &.el-button--primary { + background: linear-gradient(135deg, #409eff 0%, #3a7afe 100%); + border: none; + box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3); + + &:hover { + background: linear-gradient(135deg, #66b1ff 0%, #5a8cff 100%); + box-shadow: 0 6px 16px rgba(64, 158, 255, 0.4); + } + } + + &:not(.el-button--primary) { + border: 1px solid #dcdfe6; + background: #fff; + + &:hover { + border-color: #409eff; + color: #409eff; + } + } + } +} + +// 纭繚椤甸潰鏁翠綋灞傜骇姝g‘ +:deep(.el-card) { + position: relative; + z-index: 1; +} + +// 淇鍙兘鐨勫叏灞�z-index鍐茬獊 +:deep(.el-table__body-wrapper) { + z-index: 1 !important; +} + +:deep(.el-table__header-wrapper) { + z-index: 1 !important; +} + +// 鏁伴噺鍜屽勾闄愯緭鍏ユ鏍峰紡 +.quantity-input, +.duration-input { + width: 100px !important; + height: 35px !important; + + :deep(.el-input__wrapper) { + padding: 0 8px !important; + } + + :deep(.el-input__inner) { + width: 30px !important; + text-align: center !important; + min-width: 30px !important; + max-width: 30px !important; + } + + :deep(.el-input-number__decrease), + :deep(.el-input-number__increase) { + width: 32px !important; + height: 32px !important; + } +} + +// 浣跨敤鏇村己鐨勯�夋嫨鍣ㄧ‘淇濇牱寮忕敓鏁� +.suite-table .quantity-input, +.suite-table .duration-input { + :deep(.el-input__inner) { + width: 40px !important; + text-align: center !important; + min-width: 40px !important; + max-width: 40px !important; + box-sizing: border-box !important; + } +} + +// 鍏ㄥ眬鏍峰紡瑕嗙洊锛岀‘淇濊緭鍏ユ鍐呴儴瀹藉害鐢熸晥 +:deep(.el-input-number.quantity-input .el-input__inner), +:deep(.el-input-number.duration-input .el-input__inner) { + width: 40px !important; + text-align: center !important; + min-width: 40px !important; + max-width: 40px !important; + box-sizing: border-box !important; +} </style> -- Gitblit v1.8.0