From e68776c9c0c1aa45494e4b2b681fba2dd0f40618 Mon Sep 17 00:00:00 2001 From: rainbro <33367671@qq.com> Date: Tue, 22 Jul 2025 16:54:12 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BE=9B=E8=B4=A7=E5=88=97=E8=A1=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/router/index.js | 10 + src/views/agent/home.vue | 24 +- src/views/agent/supplyList.vue | 501 +++++++++++++++++++++++++++++------------ 3 files changed, 386 insertions(+), 149 deletions(-) diff --git a/src/router/index.js b/src/router/index.js index 040489d..31d23dc 100755 --- a/src/router/index.js +++ b/src/router/index.js @@ -52,6 +52,16 @@ const routes = [{ } }, { + path: '/agent/supplyList', + name: '首页', + component: () => import( /* webpackChunkName: "register" */ '../views/agent/supplyList.vue'), + isFirst: true, //是否属于一级路由 + meta: { + title: '首页', //面包屑名称（此页面确认不需要放置在面包屑可以不添加此属性；如果获取不到title 会自动 获取 name 作为面包屑名称） + hideBreadcrumb: true // 是否隐藏面包屑 + } + }, + { path: '/register', name: 'register', // this generates a separate chunk (about.[hash].js) for this route diff --git a/src/views/agent/home.vue b/src/views/agent/home.vue index de9657f..c46e606 100644 --- a/src/views/agent/home.vue +++ b/src/views/agent/home.vue @@ -57,18 +57,18 @@

供货价格

-
+
- - {{ classification_name }} + + {{ classifyId2Name[classify_id] }}
详情
-
-

{{ veritem.name }}

-

+

+

{{ ver2info[verid].name }}

+

{{ type2name[type] }} {{ supplyPriceList[type].price }}元 / {{ supplyPriceList[type].unit_format }}

@@ -158,8 +158,10 @@ export default { // 表格加载 tableLoading: true, type2name:[], - serviceClassifications: [], - serviceClassificationServices: [], + classifyId2Name: [], + classifyId2Vers: [], + ver2types: [], + ver2info: [], supplyPriceList: [], serviceList: [], @@ -231,9 +233,11 @@ export default { this.tableLoading = false this.$nextTick(() => { that.serviceList = response.data.list + this.classifyId2Name = response.data.classifyid2name; + this.classifyId2Vers = response.data.classifyid2vers; + this.ver2types = response.data.ver2types; + this.ver2info = response.data.ver2info; this.type2name = response.data.type2name; - this.serviceClassifications = response.data.service_classification; - this.serviceClassificationServices = response.data.service_classification_services; this.supplyPriceList = response.data.supply_price; }) }).catch(error => { diff --git a/src/views/agent/supplyList.vue b/src/views/agent/supplyList.vue index 25bbb3f..3fcaebf 100644 --- a/src/views/agent/supplyList.vue +++ b/src/views/agent/supplyList.vue @@ -3,24 +3,53 @@ - -
- 基本设置 -
+
+
+ {{ classifyId2Name[classify_id] }} + +
+ + {{ ver2info[verid].name }} + +
+ +
- -
-
-

站点信息

- -
-
+
+
+
+ + {{ ver2info[verid].name }} +
官方接口
+
{{ salePolicy[ver2info[verid].sale_policy] }}
+
{{ salePolicy[ver2info[verid].sale_policy] }}
+
{{ salePolicy[ver2info[verid].sale_policy] }}
+
+
{{ ver2info[verid].desc }}
+
+
+
{{ type2name[type] }}
+
+ + + {{ type2info[type].introduce }} + + +
+
￥{{ supplyPriceList[type].price }} / {{ supplyPriceList[type].unit_format }}
-
-
+
+
+
+ + + {{ ver2info[verid].desc }} + +
+
￥{{ supplyPriceList[ver2types[verid][0]].price }} / {{ supplyPriceList[ver2types[verid][0]].unit_format }}
- +
@@ -30,6 +59,7 @@ import store from '@/store'; import { mapState } from 'vuex'; import PromptText from '@/components/PromptText.vue'; +import GuipToolTip from '@/components/GuipToolTip.vue'; export default { // 站点设置 @@ -37,17 +67,20 @@ export default { props: [''], components: { PromptText, + GuipToolTip, }, data() { return { // AUTH token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3NTI2NDY1NDUsIm5iZiI6MTc1MjY0NjU0NSwiZXhwIjoxNzU1MjM4NTQ1LCJ1c2VyIjoic3VidXNlciIsImxvZ2luX3R5cGUiOjAsImFpZCI6IjEifQ.G-Is-x9qPMiV_urOlDPQVRjfAIozySxL5EK2k82d46k', - // 表格加载 - tableLoading: true, type2name:[], - serviceClassifications: [], - serviceClassificationServices: [], + classifyId2Name: [], + classifyId2Vers: [], + ver2types: [], + ver2info: [], + type2info: [], supplyPriceList: [], + salePolicy: [], } }, computed: { @@ -60,38 +93,39 @@ export default { mounted() { store.commit('SET_PAGETITLE', '基本设置'); - this.getSiteInfo(); - this.getPayList(); - this.getAddablePays(); + this.getSupplyServiceList(); }, methods: { - // 获取可添加的收款方式 + scrollToAnchor(ver) { + this.$nextTick(() => { + const element = document.getElementById('ver_'+ver); + if (element) { + element.scrollIntoView({ behavior: 'smooth' }); + } + }); + }, getSupplyServiceList() { + this.$http('POST', '/agentnew/ajax_get_supply_services', { - this.tableLoading = true - const that = this - that.serviceList = [] - this.$http('POST', '/agentnew/ajax_get_supply_services', { - - },{ - headers:{ - 'Auth': this.token - } - }).then(response => { - this.tableLoading = false - this.$nextTick(() => { - that.serviceList = response.data.list - this.type2name = response.data.type2name; - this.serviceClassifications = response.data.service_classification; - this.serviceClassificationServices = response.data.service_classification_services; - this.supplyPriceList = response.data.supply_price; - console.log(this.supplyPriceList[2].price) - console.log(this.supplyPriceList[2].unit_format) - }) - }).catch(error => { - console.error(error, 'error') + },{ + headers:{ + 'Auth': this.token + } + }).then(response => { + this.$nextTick(() => { + this.classifyId2Name = response.data.classifyid2name; + this.classifyId2Vers = response.data.classifyid2vers; + this.ver2types = response.data.ver2types; + this.ver2info = response.data.ver2info; + this.type2name = response.data.type2name; + this.type2info = response.data.type2info; + this.supplyPriceList = response.data.supply_price; + this.salePolicy = response.data.sale_policy; }) - }, + }).catch(error => { + console.error(error, 'error') + }) + }, } } @@ -100,129 +134,318 @@ export default { padding: 20px 48px; } -.pageheader { +.classify { display: flex; - justify-content: space-between; - /* 关键属性 */ - align-items: center; - margin: 16px 0px 16px 0px; + margin-bottom: 20px; + margin-top: 20px; } -.pagetitle { +.classify-title { + font-family: Microsoft YaHei UI; + font-size: 20px; + font-weight: bold; + line-height: 26px; + letter-spacing: 0.08em; + color: #1E2226; +} + +.ver-wrap { + width: 100%; + /* 自动布局 */ + display: flex; + flex-direction: column; + gap: 10px; + z-index: 0; + background: #FFFFFF; + margin-bottom: 10px; +} +.ver { + padding: 20px; +} +.ver-title-wrap { + height: 30px; + /* 自动布局 */ + display: flex; + justify-content: space-flex-start; + align-items: center; + padding: 0px; + align-self: stretch; + z-index: 0; +} +.ver-title { + /* body/body 1_bold */ + font-family: Microsoft YaHei UI; font-size: 16px; font-weight: bold; line-height: normal; + text-align: justify; /* 浏览器可能不支持 */ letter-spacing: 0.08em; + /* text/text_1 */ color: #1E2226; - margin-top: 8px; } -.siteMessage { +.ver-icon { + height: 30px; + width: 30px; +} + +.ver-anchor-point { + /* 自动布局子元素 */ + height: 28px; + /* 自动布局 */ + display: flex; + align-items: center; + padding: 4px 10px; + gap: 4px; + z-index: 0; + border-radius: 100px; + /* text/text_white_1 */ + background: #FFFFFF; + box-sizing: border-box; + /* main/main_stardard */ +} +.ver-anchor-point:hover { + border: 1px solid #006AFF; +} +.anchor { + text-decoration: none; + /* body/body 2_regular */ + font-family: Microsoft YaHei UI; + font-size: 14px; + font-weight: normal; + line-height: normal; + text-align: justify; /* 浏览器可能不支持 */ + letter-spacing: 0.08em; + /* text/text_4 */ + color: #8A9099; +} + +.ver-desc { + /* body/body 2_regular */ + font-family: Microsoft YaHei UI; + font-size: 14px; + font-weight: normal; + line-height: normal; + text-align: justify; /* 浏览器可能不支持 */ + letter-spacing: 0.08em; + color: #8A8C99; + margin-top: 10px; + margin-bottom: 20px; +} + +.ver-single { + font-family: Microsoft YaHei UI; + font-size: 14px; + font-weight: normal; + line-height: normal; + //text-align: justify; /* 浏览器可能不支持 */ + letter-spacing: 0.08em; + color: #8A8C99; + margin-top: 10px; +} + +.ver-single-desc { + font-family: Microsoft YaHei UI; + font-size: 14px; + font-weight: normal; + line-height: normal; + text-align: justify; /* 浏览器可能不支持 */ + letter-spacing: 0.08em; + color: #8A8C99; + width: 600px; + height: 18px; + display: -webkit-box; + -webkit-line-clamp: 1; + -webkit-box-orient: vertical; + overflow: hidden; + text-overflow: ellipsis; +} + +.ver-services-wrap { + width: 100%; + display: grid; + grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); + justify-items: flex-start; + gap: 14px 14px; + + padding: 0px; +} + +.ver-service { + width: 270px; border-radius: 4px; - transition: all .5s; - border: 1px solid transparent; + background: #FFFFFF; + box-sizing: border-box; + /* middle/middle_line_1 */ + border: 1px solid #DFE2E6; + padding: 14px 10px; + display: flex; + flex-direction: column; } -.combo-formItem { - ::v-deep { - .form-item-bottom { - position: relative; - } - .select-trigger { - background: #F6F7FA; - border-color: transparent; - } +.service-title { + /* body/body 2_regular */ + font-family: Microsoft YaHei UI; + font-size: 14px; + font-weight: normal; + line-height: normal; + text-align: justify; /* 浏览器可能不支持 */ + letter-spacing: 0.08em; + /* text/text_1 */ + color: #1E2226; + height: 18px; +} - .is-open .select-trigger { - border-color: #006AFF; - } +.service-desc { + font-family: Microsoft YaHei UI; + font-size: 12px; + font-weight: normal; + line-height: 17px; + text-align: justify; /* 浏览器可能不支持 */ + letter-spacing: 0.03em; + /* text/text_4 */ + color: #8A9099; + margin-top: 14px; + margin-bottom: 14px; + flex: 1; + height:34px; + overflow: hidden; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + text-overflow: ellipsis; +} - .el-input__inner { - border-radius: 2px 0 0 2px; - } - } - .self-drop-wrap { - position: absolute; - z-index: 1; - width: 100%; - } - .appendDrop { - height: 38px; - align-items: center; - border-radius: 0 2px 2px 0; - border: 1px solid #DFE2E6; - border-left-color: transparent; - justify-content: center; - box-sizing: border-box; - padding: 0 30px 0 12px; - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - &:hover { - border: 1px solid #006AFF; - } - } +.service-price { + /* 自动布局子元素 */ + height: 20px; + /* 自动布局 */ + display: flex; + align-items: flex-end; + padding: 0px; + gap: 2px; + z-index: 1; +} +.price { + font-family: Microsoft YaHei UI; + font-size: 20px; + font-weight: normal; + line-height: 20px; + text-align: center; + letter-spacing: normal; + /* text/text_1 */ + color: #1E2226; } -.addStore { - margin-top: 12px; - // border-radius: 4px; - // opacity: 1; - // /* text/text_white_2 */ - // border: 1px dashed #BABDC2; - // padding: 15px 20px; - // color: #626573; - // justify-content: center; - // img { - // margin-right: 12px; - // } +.unit { + font-family: Microsoft YaHei UI; + font-size: 12px; + font-weight: normal; + line-height: 16px; + text-align: right; + letter-spacing: 0.08em; + /* text/text_4 */ + color: #8A9099; } +.status-item { + height: 22px; + display: flex; + justify-content: center; + align-items: center; + gap: 6px; + z-index: 0; + padding: 2px 10px; + border-radius: 4px; -.site-setting-wrap { - width: 100%; +} - .siteMessage5_desc { - border-radius: 4px; - /* middle/middle_blue_1 */ - background: #F2F7FF; - /* middle/middle_blue_3 */ - border: 1px solid #BFDAFF; - padding: 8px 13px; - margin-bottom: 32px; - - img { - margin-right: 8px; - } +.divgreen { + background: rgba(239, 255, 224, 0.5); + box-sizing: border-box; + border: 1px solid rgba(0, 194, 97, 0.6); +} - } +.fontgreen { + font-family: Microsoft YaHei UI; + font-size: 14px; + font-weight: normal; + line-height: normal; + text-align: center; + letter-spacing: 0.08em; + color: #0DAF49; +} + +.divblue { + background: #F2F7FF; + box-sizing: border-box; + border: 1px solid #BFDAFF; +} + +.fontblue { + font-family: Microsoft YaHei UI; + font-size: 14px; + font-weight: normal; + line-height: normal; + text-align: center; + letter-spacing: 0.08em; + color: #006AFF; +} + +.divred { + background: #FFF1F0; + box-sizing: border-box; + border: 1px solid #FFA39E; +} + +.fontred { + font-family: Microsoft YaHei UI; + font-size: 14px; + font-weight: normal; + line-height: normal; + text-align: center; + letter-spacing: 0.08em; + color: #FF4D4F; } -#siteMessage2 { - margin: 12px 0; +.divgray { + background: #F6F7FA; + box-sizing: border-box; + border: 1px solid #DFE2E6; } -.domain-wrap { - .domain-item { - margin-bottom: 10px; - } +.fontgray { + color: #626573; +} +.divorange { + background: #FFFBF2; + box-sizing: border-box; + border: 1px solid rgba(251, 131, 45, 0.38); +} - .domain-item p:last-child { - padding-left: 23px; - color: #8A9099; - } +.fontorange { + color: #FB832D; +} - p { - text-align: left; - line-height: 18px; - margin-bottom: 8px; - } +.divpurple { + background: #F9F2FF; + box-sizing: border-box; + border: 1px solid rgba(126, 118, 253, 0.28); +} + +.fontpurple { + color: #6258FF; +} - .domain-box { - display: flex; - flex-direction: column; - justify-content: flex-start; - } +.mr-8 { + margin-right: 8px; +} +.mr-12 { + margin-right: 12px; +} +.mr-20 { + margin-right: 20px; } \ No newline at end of file