From 79c895eceb6343e440f758cf43a858a1a683241f Mon Sep 17 00:00:00 2001
From: zq <136432190602163.com>
Date: Fri, 22 Aug 2025 18:23:46 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=9C=8D=E5=8A=A1=E6=94=B9?=
 =?UTF-8?q?=E7=89=88=E9=83=A8=E5=88=86=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/serviceIcon/activeImg_choose.svg |   1 +
 src/components/SliderScondThree.vue         | 406 ++++++++++++++++++++++++++++
 src/router/index.js                         |  21 +-
 src/views/agent/siteAddChooseService.vue    | 375 +++++++++++++++++++++++++
 src/views/agent/siteServiceAdd.vue          | 163 +++++++++--
 src/views/agent/siteServiceList.vue         |   2 +-
 6 files changed, 936 insertions(+), 32 deletions(-)
 create mode 100644 src/assets/serviceIcon/activeImg_choose.svg
 create mode 100644 src/components/SliderScondThree.vue
 create mode 100644 src/views/agent/siteAddChooseService.vue

diff --git a/src/assets/serviceIcon/activeImg_choose.svg b/src/assets/serviceIcon/activeImg_choose.svg
new file mode 100644
index 0000000..af36492
--- /dev/null
+++ b/src/assets/serviceIcon/activeImg_choose.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="14" height="14" viewBox="0 0 14 14"><g><g><rect x="0" y="0" width="14" height="14" rx="7" fill="#006AFF" fill-opacity="1"/><rect x="0.5" y="0.5" width="13" height="13" rx="6.5" fill-opacity="0" stroke-opacity="1" stroke="#FFFFFF" fill="none" stroke-width="1"/></g><g><rect x="2.380126953125" y="2.3798828125" width="9.239999771118164" height="9.239999771118164" rx="4.619999885559082" fill="#FFFFFF" fill-opacity="1"/><rect x="2.710126966238022" y="2.709882825613022" width="8.57999974489212" height="8.57999974489212" rx="4.28999987244606" fill-opacity="0" stroke-opacity="1" stroke="#006AFF" fill="none" stroke-width="0.6600000262260437"/></g></g></svg>
\ No newline at end of file
diff --git a/src/components/SliderScondThree.vue b/src/components/SliderScondThree.vue
new file mode 100644
index 0000000..3442ac2
--- /dev/null
+++ b/src/components/SliderScondThree.vue
@@ -0,0 +1,406 @@
+<template>
+    <el-collapse v-model="activeNames" @change="handleChange">
+        <el-collapse-item v-for="(item, index) in menuList" :key="index" :name="item[renderKeyNew.domName]">
+            <template #title>
+                <div class="flex-between gap8 collapse-item">
+                    <div class="flex gap8 ">
+                        <GuipToolTip :content="item[renderKeyNew.menuTitle]">
+                            <div class="flex gap8 menu-name"><img width="20px" :src="require('@/assets/serviceIcon/ver_'+item.type+'.svg')" alt=""><span >{{ item[renderKeyNew.menuTitle] }}</span></div>
+                        </GuipToolTip>
+                    </div>
+                </div>
+            </template>
+            <div v-for="(item1, index1) in item.list" @click="setActiveCur(item1, item, index)"
+                :class="['flex-between point gap8', activeFloor == item1[renderKeyNew.subtitle] ? 'curActive' : '']"
+                :key="index1">
+                <span class="l-menu-name">{{ item1[renderKeyNew.subtitle] }}</span>
+                <span class="l-price-ing" v-if="!currentMenuItem.unit_price && !currentMenuItem.unit_num">设置价格中</span>
+                <!-- <span class="l-price-ed">{{unit_desc(item)}}</span> -->
+                <!-- <img v-if="item1[renderKeyNew.SubSelected]" class="selected" src="../assets/menu/is_selected.png" alt=""> -->
+            </div>
+        </el-collapse-item>
+    </el-collapse>
+</template>
+
+<script>
+import store from '../store';
+import GuipToolTip from "@/components/GuipToolTip.vue";
+
+export default {
+    options: { styleIsolation: "shared" },
+    props: {
+        menuData: {
+            type: [Array, Object],
+            required: true
+        },
+        // 后续如果渲染的值不同可以通过调整这个修改取值
+        renderKey: {
+            type: [Object],
+            default: () => {}
+        }
+    },
+    data() {
+        return {
+            activeNames: [],//获取到的值 同 绑定的name属性
+            curIndex: 0,
+            activeFloor: '',
+            scrollLock: false,
+            componentsName: '',
+            currentMenuItem:{}
+        };
+    },
+    computed: {
+        // 处理options为空的情况
+        menuList() {
+            let flag = Array.isArray(this.menuData || []);
+            let data = this.menuData || []
+            if (!flag) {
+                data = Object.values(this.menuData)
+                return data
+            }
+            return this.menuData;
+        },
+        renderKeyNew() {
+            return Object.assign({
+                menuTitle: 'name',//渲染标题
+                subtitle: 'name',//二级标题
+                selected: 'is_select',//大标题：是否展示绿色状态
+                SubSelected: 'is_select',//二级标题：是否展示绿色状态
+                domName: 'type',//未来获取dom绑定依据
+                domAppend: 'section_' //dom 前缀
+                // 后续获取dom =》 domAppend + domName 在元素上绑定的 id名称
+            }, this.renderKey);
+        },
+        
+    },
+    components: {
+        GuipToolTip
+    },
+    watch: {
+        menuList:{
+            handler(newVal, oldVal) {
+                this.activeNames = newVal.map(item => item.type)
+                console.log( this.activeNames,' this.activeNames=');
+                // console.log(newVal, oldVal,'---====val');
+                // 初次加载或强制刷新时，oldVal为空
+                if (!oldVal || oldVal.length === 0) {
+                    this.setDefaultActive(newVal);
+                    return;
+                }
+                // console.log(newVal,'newVal===');
+                // 检查当前高亮的菜单项是否仍然存在于新的menuList中
+                const currentItemExists = this.checkCurrentItem(newVal);
+                // console.log(currentItemExists,'currentItemExists--');
+                // 不存在默认高亮第一项
+                if (!currentItemExists) {
+                    this.setDefaultActive(newVal);
+                }
+            },
+            immediate: true
+        }
+    },
+    mounted() {
+        this.$nextTick(() => {
+            // 更可靠的获取滚动容器方式
+            this.scrollContainer = document.querySelector('.main-content') ||
+                document.getElementById('main-content') ||
+                window;
+
+            if (this.scrollContainer) {
+                this.scrollContainer.addEventListener('scroll', this.handleScroll);
+                this.calculateFloorOffsets();
+            } else {
+                console.error('未找到滚动容器');
+            }
+        });
+      
+    },
+    beforeDestroy() {
+        if (this.scrollContainer) {
+            this.scrollContainer.removeEventListener('scroll', this.handleScroll);
+        }
+    },
+    methods: {
+        unit_desc(item){
+            console.log(item,'====item');
+            let str = ''
+            return str
+        },
+        checkCurrentItem(newMenuList) {
+            const subtitle = this.renderKeyNew.subtitle;
+            // 如果当前没有高亮的菜单项，返回
+            if (!this.activeFloor) return false;
+            // 遍历新的menuList，先检查高亮的菜单项是否存在
+            for (const item of newMenuList) {
+                if (item.list) {
+                    const found = item.list.some(subItem => 
+                        subItem[subtitle] === this.activeFloor || 
+                        subItem.componentsName === this.activeFloor
+                    );
+                    if (found) return true;
+                }
+            }
+            return false;
+        },
+        setDefaultActive(menuList) {
+            // 设置默认高亮项
+            if (menuList && menuList.length > 0 && menuList[0].list && menuList[0].list.length > 0) {
+                const subtitle = this.renderKeyNew.subtitle;
+                this.activeFloor = menuList[0].list[0][subtitle] || menuList[0].list[0]?.componentsName || '';
+                this.componentsName = menuList[0].list[0]?.componentsName || '';
+                this.currentMenuItem = menuList[0].list[0]
+                store.commit('SET_CURRENTMENUITEM', menuList[0].list[0]);
+                this.curIndex = 0;
+            }
+        },
+        handleChange(val) {
+            console.log("面板状态变化:", val);
+        },
+        handleTitleClick() {
+            console.log("标题点击");
+        },
+        random() {
+            var randomNumber = Math.random();
+            return randomNumber
+        },
+        calculateFloorOffsets() {
+            this.menuList.forEach(item => {
+                item.list?.forEach(every => {
+                    const el = document.getElementById(every.desc);
+                    if (el) {
+                        // 获取元素相对于视口顶部的距离
+                        every.offsetTop = el.getBoundingClientRect().top + window.pageYOffset;
+                    }
+                });
+            });
+        },
+
+        handleScroll() {
+            if (this.scrollLock || !this.menuList[this.curIndex]?.list) return;
+
+            const scrollPosition = this.getScrollPosition();
+            let activeFloor = null;
+            console.log(this.curIndex, scrollPosition, 'this.curIndex===');
+
+            // 从下往上查找当前可见区域对应的楼层
+            // for (let i = this.menuList[this.curIndex].list.length - 1; i >= 0; i--) {
+            //   const item = this.menuList[this.curIndex].list[i];
+            //   if (scrollPosition + 100 >= (item.offsetTop || 0)) { // 100是提前量
+            //     activeFloor = item.desc;
+            //     break;
+            //   }
+            // }
+            // 从上往下
+            for (let i = 0; i < this.menuList[this.curIndex].list.length; i++) {
+                const item = this.menuList[this.curIndex].list[i];
+                if (scrollPosition + 100 >= (item.offsetTop || 0)) { // 100是提前量
+                    activeFloor = item.desc;
+                    break;
+                }
+            }
+
+            if (activeFloor && this.activeFloor !== activeFloor) {
+                this.activeFloor = activeFloor;
+            }
+        },
+
+        getScrollPosition() {
+            if (this.scrollContainer === window) {
+                return window.pageYOffset || document.documentElement.scrollTop;
+            }
+            return this.scrollContainer.scrollTop;
+        },
+        // setActiveCur(dom, item) {
+        //   if (this.$route.path != item.path) {
+        //     this.$router.push(item.path)
+        //     store.commit('SET_PAGETITLE', item.name);
+        //   }
+        //   setTimeout(() => {
+        //     this.activeFloor = dom;
+        //     this.setHighActive(dom)
+        //   }, 500)
+        // },
+
+        // setHighActive(dom) {
+        //   this.scrollLock = true;
+        //   const ele = document.getElementById(dom)
+        //   if (!ele) return
+        //   ele.classList.add('ceshi')
+        //   ele.scrollIntoView({ behavior: 'smooth', block: 'start' })
+        //   setTimeout(() => {
+        //     ele.classList.remove('ceshi')
+        //   }, 1000)
+        // }
+        setActiveCur(item1, item, index) {
+            store.commit('SET_CURRENTMENUITEM', item1);
+            this.currentMenuItem = item1;
+            this.curIndex = index;
+            let subtitle = this.renderKeyNew.subtitle;
+            let domName = this.renderKeyNew.domName;
+            let componentsName = item1?.componentsName;
+            // 如果采用的是 组件切换显示的办法
+            if (componentsName) {
+                this.activeFloor = componentsName;
+                // 同步 当前切换的组件名称
+                store.commit('SET_COMPONENTS_NAME', componentsName);
+                return
+            }
+            this.scrollLock = true;
+            this.activeFloor = item1[subtitle];
+            this.$nextTick(() => {
+                this.setHighActive(item1[domName]);
+                setTimeout(() => {
+                    this.scrollLock = false;
+                }, 1000);
+            });
+        },
+
+        setHighActive(dom) {
+            const ele = document.getElementById(this.renderKeyNew.domAppend + dom);
+            if (ele) {
+                ele.scrollIntoView({
+                    behavior: 'smooth',
+                    block: 'start'
+                });
+            }
+        }
+    }
+};
+</script>
+
+<style scoped lang="scss">
+/* 自定义折叠图标 */
+::v-deep .el-collapse-item__header .el-collapse-item__arrow {
+    display: none !important;
+}
+
+::v-deep .el-collapse-item__header {
+    max-width: 162px;
+}
+
+.arrow_img {
+    width: 14px;
+    height: 14px;
+}
+
+.arrow_img.is-active {
+    transform: rotate(90deg);
+}
+
+.collapse-item {
+    width: 100%;
+}
+
+.menu-name {
+    font-size: 14px;
+    font-weight: normal;
+    letter-spacing: 0.08em;
+    color: #1E2226;
+    padding: 11px 0;
+    height: 40px;
+    line-height: 18px;
+    width: 120px;
+    // max-width: 96px;
+    box-sizing: border-box;
+    span{
+        // max-width: 50px;
+        // width: 50px;
+        text-align: left;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+}
+
+.l-menu-name {
+    // max-width: 90px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    color: #8A9099;
+    padding: 7px 0;
+    height: 36px;
+    box-sizing: border-box;
+}
+.l-price-ing{
+    display: none;
+    width: 84px;
+    height: 23px;
+    display: flex;
+    flex-direction: column;
+    padding: 5px 8px;
+    box-sizing: border-box;
+    gap: 10px;
+    border-radius: 4px;
+    background: #BFDAFF;
+    font-size: 12px;
+    font-weight: normal;
+    line-height: 13px;
+    opacity: 0;
+    letter-spacing: 0.08em;
+}
+.l-price-ed{
+    width: auto;
+    height: 23px;
+    display: flex;
+    flex-direction: column;
+    padding: 5px 8px;
+    gap: 10px;
+    z-index: 1;
+    border-radius: 4px;
+    background: #F2F3F5;
+}
+
+.curActive {
+    .l-menu-name {
+        color: #006AFF;
+        font-weight: bold;
+    }
+    .l-price-ing{
+        opacity: 1;
+        display: block;
+        color: #006AFF;
+        background: #BFDAFF;
+    }
+    .l-price-ed{
+        color: #006AFF;
+        background: #BFDAFF;
+    }
+}
+
+.menu-select {
+    width: 8px;
+    height: 8px;
+    border-radius: 100%;
+    background: #00C261;
+}
+
+.el-collapse {
+    min-width: 210px;
+    max-width: 210px;
+    background-color: #fff;
+    height: 100%;
+    overflow-y: auto;
+    padding: 21px 15px 21px 16px;
+    box-sizing: border-box;
+    box-shadow: 0px 0px 11px 2px rgba(147, 147, 147, 0.11);
+}
+
+.selected {
+    width: 20px;
+    height: 14px;
+}
+
+::v-deep .el-collapse-item__header {
+    height: 40px;
+    border-bottom: none;
+}
+
+::v-deep .el-collapse-item__content {
+    padding-bottom: 0;
+}
+
+::v-deep .el-collapse-item__wrap {
+    border-bottom: none;
+}
+</style>
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index 09a519f..116a572 100755
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -9,7 +9,7 @@ const whiteSecondSider = [
 ];
 const blackSliderList = [
   '/franchise', '/agreement', '/customizeDoc', '/agent/siteAdd', '/agent/siteServiceList', '/agent/siteTemplate','/agent/siteAddFinally','/agent/siteServiceAdd', '/agent/supplyList',
-  '/agent/domainList'
+  '/agent/domainList','/agent/siteAddChooseService'
   , '/agent/noticeList'
 ];
 // 一级路由
@@ -24,7 +24,7 @@ const blackHeaderRightList = [
 ];
 const blackFooterList = [
   '/', '/franchise','/agreement', '/customizeDoc','/agent/siteAdd', '/agent/payInfoSetting','/agent/siteServiceEdit','/agent/siteAddFinally','/agent/siteServiceAdd',
-  '/agent/siteTemplate'
+  '/agent/siteTemplate','/agent/siteAddChooseService'
 ];
 // const whiteSlideList = ['/', '/ui', 
 //   '/agent/siteList', 
@@ -184,12 +184,23 @@ const routes = [{
     }
   },
   {
+    path: '/agent/siteAddChooseService',
+    name: '服务列表-添加',
+    isFirst: true,
+    component: () => import( /* webpackChunkName: "siteServiceAdd" */ '../views/agent/siteAddChooseService.vue'),
+    meta: {
+      title: '添加服务',
+      breadcrumbParent: '服务列表',
+      // hideBreadcrumb: true // 一级页面不显示面包屑
+    }
+  },
+  {
     path: '/agent/siteServiceAdd',
     name: '服务列表-添加',
     isFirst: true,
     component: () => import( /* webpackChunkName: "siteServiceAdd" */ '../views/agent/siteServiceAdd.vue'),
     meta: {
-      title: '添加服务',
+      title: '设置价格',
       breadcrumbParent: '服务列表',
       // hideBreadcrumb: true // 一级页面不显示面包屑
     }
@@ -529,7 +540,7 @@ const router = new VueRouter({
 })
 router.beforeEach((to, from, next) => {
   // 有关路由跳转时，部分状态重置
-  store.commit('SET_SECOND_MENU', []);
+  // store.commit('SET_SECOND_MENU', []);
   if(store.state.componentsName){
     store.commit('SET_COMPONENTS_NAME', '');
   }
@@ -581,7 +592,7 @@ router.beforeEach((to, from, next) => {
 router.afterEach(() => {
   // 清除存储的currentMenuItem
   if(!store.state.showSecondSide && store.state.currentMenuItem){
-    store.commit('SET_CURRENTMENUITEM',null);
+    // store.commit('SET_CURRENTMENUITEM',null);
   }
 
   // 添加延迟确保过渡效果
diff --git a/src/views/agent/siteAddChooseService.vue b/src/views/agent/siteAddChooseService.vue
new file mode 100644
index 0000000..dd2e8c2
--- /dev/null
+++ b/src/views/agent/siteAddChooseService.vue
@@ -0,0 +1,375 @@
+<template>
+    <div class="">
+        <div class="addService_wrap">
+            <div class="addServicetop">
+                    <h3>添加查重服务</h3>
+                    <!-- 分类导航 -->
+                    <el-scrollbar>
+                        <ul>
+                            <li v-for="(item, index) in menuList" :key="item.name" @click="scrollToCategory(index)"
+                                :class="['normal_service', activeCategory == index ? 'active_service' : '']">
+                                <span class="flex">
+                                    <img :src="require('@/assets/serviceIcon/ver_'+item.type+'.svg')" alt="">
+                                    {{ item.name }}
+                                </span>
+                                <img class="activeImg" src="@/assets/serviceIcon/activeImg_choose.svg" alt="">
+                            </li>
+                        </ul>
+                    </el-scrollbar>
+            </div>
+            <!-- 内容 -->
+            <div class="addServicebot" ref="content">
+                <ul :key="datenow">
+                    <li v-for="item in addlist" :key="item.name"
+                        :class="item.checked ? 'service-active' : ''">
+                        <div class="service-name-item flex-between">
+                            <span>{{ item.name }}</span>
+                            <input type="checkbox" :id="`item-${item.id}`" v-model="item.checked"
+                                @change="updateSelectedCount" />
+                        </div>
+                        <p class="service-desc-item">看见啊还是看见阿水</p>
+                        <p class="service-price-item"><i>¥</i><span>{{ item.price }}</span> / {{ item.word }}</p>
+                    </li>
+                </ul>
+            </div>
+        </div>
+        <div class="bottom flex">
+            <GuipButton type="system" size="page" @click="cancel">取消</GuipButton>
+            <GuipButton type="primary" size="page" @click="nextGoSettingPrice">确定，去设置售价</GuipButton>
+            <p>已选<b>{{ serviceTotal }}</b>项服务</p>
+        </div>
+    </div>
+</template>
+<script>
+import store from '@/store';
+import GuipButton from '@/components/GuipButton.vue';
+export default {
+    name: 'siteServiceAdd',
+    props: [''],
+    components: {
+        GuipButton,
+    },
+    data() {
+        return {
+            datenow:Date.now(),
+            serviceTotal:0,
+            activeCategory:0,
+            uid: 0,
+            type: 0,
+            prodid: 0,
+            menuList:[],
+            addlist:[],
+            serviceAddUrl: '/agent/siteServiceAdd',
+
+        }
+    },
+    watch: {
+
+    },
+    created() {
+        if (!this.$route.query.uid && !this.$route.query.prodid) {
+            this.$message.error('非法请求');
+            this.$router.push('/agent/siteAdd')
+        }
+        this.uid = this.$route.query.uid
+        this.prodid = this.$route.query.prodid
+        // this.loadPddSDK()
+    },
+    mounted() {
+        store.commit('SET_PAGETITLE', '站点信息');
+        this.getAddServiceList();
+    },
+    computed: {
+      // 计算选中的总数
+      selectedCount() {
+        const newaddlist = JSON.parse(JSON.stringify(this.addlist))
+        let list = []
+        newaddlist.forEach(item => {
+            if (item.checked) {
+              list.push(item)
+            }
+        })
+        console.log(list, 'list----', this.addlist);
+        // store.commit('SET_ADDSERVICELIST', list);
+        return list.length;
+      },
+    },
+    methods: {
+        cancel(){
+            this.$router.go(-1)
+        },
+        updateSelectedCount() {
+            this.serviceTotal = this.addlist.filter(item => item.checked).length;
+            this.$set(this.menuList[this.activeCategory],'list',this.addlist)
+            this.datenow = Date.now()
+        },
+        nextGoSettingPrice() {
+            const result = {};
+            Object.entries(this.menuList).forEach(([key, category]) => {
+                // 筛选出选中的子项
+                const selectedList = category.list.filter(item => item.checked);
+                // 只有当分类被选中或有选中的子项时才添加到结果中
+                if (category.checked || selectedList.length > 0) {
+                result[key] = {
+                    ...category,
+                    list: selectedList
+                };
+                }
+            });
+            // console.log(this.menuList,result,'result===筛选出来的数据');
+            store.commit('SET_SECOND_MENU', result);
+            localStorage.setItem('selectedServices',JSON.stringify(result))
+            this.$router.push(this.serviceAddUrl + '?uid=' + this.uid + '&prodid=' + this.prodid)
+        },
+        getAddServiceList() {
+            const that = this
+            that.$http('POST', '/agentnew/ajax_get_service_add_list', {
+                uid: that.uid,
+                prodid: that.prodid,
+            }).then(response => {
+                that.$nextTick(() => {
+                    that.menuList = response.data
+                    that.activeCategory = Object.keys(response.data)[0];
+                    // store.commit('SET_SECOND_MENU', response.data);
+                    that.setMenuList()
+                })
+            }).catch(error => {
+                console.error(error, 'error')
+            })
+        },
+        setMenuList(type, status) {
+            this.addNum = 0
+            Object.values(this.menuList).forEach((item) => {
+                let ver_select = false
+                item.list.forEach((item1) => {
+                    item1.checked = false
+                    if (item1.type === type) {
+                        item1.is_select = status
+                    }
+                    if (item1.is_select === true) {
+                        ver_select = true
+                        this.addNum++
+                    }
+                })
+
+                if (ver_select) item.is_select = true
+            })
+            this.serviceTotal = 0;
+           this.scrollToCategory(this.activeCategory)
+        },
+        scrollToCategory(index) {
+            this.activeCategory = index;
+            this.addlist = this.menuList[index]['list']
+            this.serviceTotal = this.addlist.filter(item => item.checked).length;
+            console.log(this.addlist,'addlist===');
+            // const element = this.$refs[`category-${index}`][0];
+            // element.scrollIntoView({ behavior: 'smooth' });
+      },
+    }
+}
+</script>
+<style lang="scss">
+.addService_wrap {
+    text-align: left;
+    background-color: #fff;
+    padding: 36px;
+    margin: 12px;
+
+    .addServicetop {
+        // display: flex;
+        // justify-content: space-between;
+        // align-items: center;
+        // position: absolute;
+        // top: 12px;
+        // left: 24px;
+        // width: 963.43px;
+
+        b {
+            font-size: 20px;
+            font-weight: bold;
+            line-height: 26px;
+            letter-spacing: 0.08em;
+            font-variation-settings: "opsz" auto;
+            color: #1E2226;
+        }
+
+        ul {
+            display: flex;
+            padding-left: 0px;
+            gap: 8px;
+
+            li {
+                cursor: pointer;
+                list-style-type: none;
+                display: flex;
+                align-items: center;
+                display: flex;
+                white-space: nowrap;
+                min-width: 181.71px;
+                box-sizing: border-box;
+            }
+
+            .normal_service {
+                letter-spacing: 0.08em;
+                color: #23242B;
+                border-radius: 6px;
+                background: #F2F7FF;
+                justify-content: space-between;
+                padding: 14px 10px;
+                img {
+                    width: 30px;
+                    height: 30px;
+                    margin-right: 8px;
+                }
+                .activeImg{
+                    width: 14px;
+                    height: 14px;
+                    display: none;
+                }
+            }
+
+            .active_service {
+                transition: all .3s;
+                color: #fff;
+                font-weight: bold;
+                box-sizing: border-box;
+                background: linear-gradient(285deg, #006AFF 4%, #4D97FF 92%);
+                box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.16);
+                .activeImg{
+                    display: block;
+                }
+            }
+        }
+    }
+
+    .addServicebot {
+        overflow-y: auto;
+        max-height: 380px;
+        margin-top: 24px;
+
+        ul {
+            display: grid;
+            grid-gap: 14px;
+            grid-template-columns: repeat(auto-fit, 260px);
+            padding-left: 0;
+            margin: 20px 0 0;
+
+            li {
+                list-style-type: none;
+                width: 260px;
+                height: 126px;
+                border-radius: 4px;
+                opacity: 1;
+                padding: 14px 10px;
+                background: #FFFFFF;
+                box-sizing: border-box;
+                border: 1px solid #DFE2E6;
+                cursor: pointer;
+                transition: all .3s;
+            }
+
+            li:hover {
+                background: #F6F7FA;
+                transition: all .3s;
+            }
+        }
+
+        .service-active {
+            border: 1px solid #006AFF;
+        }
+
+        .service-desc {
+            font-size: 14px;
+            font-weight: normal;
+            letter-spacing: 0.08em;
+            font-variation-settings: "opsz" auto;
+            color: #8A8C99;
+            margin: 6px 0 8px;
+        }
+
+        .service-name-item {
+            font-size: 14px;
+            letter-spacing: 0.08em;
+            color: #1E2226;
+        }
+
+        .service-desc-item {
+            font-size: 12px;
+            font-weight: normal;
+            line-height: 17px;
+            letter-spacing: 0.03em;
+            font-variation-settings: "opsz" auto;
+            color: #8A9099;
+            margin: 14px 0 12px;
+            display: -webkit-box;
+            -webkit-line-clamp: 2;
+            /* 注意：这不是一个标准的CSS属性，仅在WebKit浏览器中有效 */
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            height: 34px;
+        }
+
+        .service-price-item {
+            font-size: 12px;
+            line-height: 16px;
+            letter-spacing: 0.08em;
+            font-variation-settings: "opsz" auto;
+            color: #8A9099;
+
+            i {
+                font-style: normal;
+                color: #1E2226;
+
+            }
+
+            span {
+                color: #1E2226;
+                font-size: 20px;
+                font-weight: normal;
+                line-height: 20px;
+            }
+        }
+
+        .category-section {
+            padding: 20px;
+
+            h3 {
+                margin: 0;
+                font-size: 16px;
+                font-weight: normal;
+                letter-spacing: 0.08em;
+                color: #1E2226;
+
+                img {
+                    width: 30px;
+                    height: 30px;
+                    margin-right: 8px;
+                }
+            }
+        }
+
+    }
+}
+
+.bottom {
+    justify-content: center;
+    align-items: center;
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    background: #fff;
+    padding: 16px 44px;
+    box-sizing: border-box;
+    p {
+        font-size: 14px;
+        font-weight: normal;
+        line-height: normal;
+        text-align: center;
+        letter-spacing: 0.08em;
+        font-variation-settings: "opsz" auto;
+        display: inline-block;
+        margin-left: 24px;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/agent/siteServiceAdd.vue b/src/views/agent/siteServiceAdd.vue
index 1bd5b03..bd51467 100644
--- a/src/views/agent/siteServiceAdd.vue
+++ b/src/views/agent/siteServiceAdd.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="serviceAdd-wrap">
         <div class="ml12 mr12 overFlow-wrap">
-            <PromptText text="如何添加服务？" :type="2" class="add-info">
+            <!-- <PromptText text="如何添加服务？" :type="2" class="add-info">
                 <template #next_desc>
                     <div class="alert-more flex gap12" :class="alertShow ? '' : 'alert-more-hide'" @click="handleAlert">
                         <div v-if="alertShow">收起</div>
@@ -17,7 +17,68 @@
                         <div class="flex gap10">3.全部开启后，点击底部 [返回服务列表] 。</div>
                     </div>
                 </template>
-            </PromptText>
+            </PromptText> -->
+            <div class="flex-common service_info">
+                <div class="service_info_wrap common_scss">
+                    <div class="title flex">
+                        <img src="" alt="">
+                        <b class="blue">服务信息</b>
+                    </div>
+                    <div class="flex">
+                        <label for="">品牌名称：</label>
+                        <p>
+                            <b>{{  }}</b>
+                            {{  }}dsfdsfsdfds
+                        </p>
+                    </div>
+                    <div class="flex">
+                        <label for="">服务名称：</label>
+                        <p>
+                            <b>{{  }}</b>
+                            {{  }}
+                        </p>
+                    </div>
+                </div>
+                <div class="flex-between gap24">
+                    <div class="common_scss">
+                        <div class="flex">
+                            <img src="" alt="">
+                            <b class="blue">价格信息</b>
+                        </div>
+                        <div class="flex">
+                            <label for="">进货价格：</label>
+                            <p>
+                                {{  }}
+                            </p>
+                        </div>
+                        <div class="flex">
+                            <label for="">售价规则：</label>
+                            <p>
+                                {{  }}
+                            </p>
+                        </div>
+                    </div>
+                    <div class="common_scss green_back">
+                        <div class="flex">
+                            <img src="" alt="">
+                            <b class="green">利润分析</b>
+                        </div>
+                        <div class="flex">
+                            <label for="">利润率：</label>
+                            <p>
+                                {{  }}
+                            </p>
+                        </div>
+                        <div class="flex">
+                            <label for="">利润水平：</label>
+                            <p>
+                                {{  }}
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
 
             <div class="service-title flex-between" v-if="serviceAddInfo && serviceAddInfo.ver_type">
                 <div class="service-name flex gap12">
@@ -288,15 +349,21 @@ export default {
         }
     },
     computed: {
-        ...mapState(['pageTitle']) // 从Vuex映射showSidebar状态到组件的计算属性中
+        ...mapState(['pageTitle','secondMenu']), // 从Vuex映射showSidebar状态到组件的计算属性中
+        menuItem() {
+            return this.$store.state.currentMenuItem;
+        }
     },
     watch: {
-        '$store.state.currentMenuItem'(newVal) {
-            this.type = newVal.type
-            //查询是否添加了此服务
-            this.getServiceInfo()
-            this.getServiceAddInfo();
-        },
+        '$store.state.currentMenuItem': {
+            handler(newVal) {
+                this.type = newVal.type
+                //查询是否添加了此服务
+                this.getServiceInfo()
+                this.getServiceAddInfo();
+            },
+            deep: true // 添加深度监听
+        }
     },
     created() {
         if (!this.$route.query.uid && !this.$route.query.prodid) {
@@ -305,33 +372,38 @@ export default {
         }
         this.uid = this.$route.query.uid
         this.prodid = this.$route.query.prodid
-
         this.loadPddSDK()
     },
     mounted() {
+        if(this.menuItem){
+            this.type = this.menuItem.type
+            //查询是否添加了此服务
+            this.getServiceInfo()
+            this.getServiceAddInfo();
+        }
         store.commit('SET_PAGETITLE', '站点信息');
-        this.getAddServiceList();
+        // this.getAddServiceList();
     },
     methods: {
         handleAlert() {
             this.alertShow = !this.alertShow
         },
         //获得左侧菜单导航
-        getAddServiceList() {
-            const that = this
-            that.$http('POST', '/agentnew/ajax_get_service_add_list', {
-                uid: that.uid,
-                prodid: that.prodid,
-            }).then(response => {
-                that.$nextTick(() => {
-                    that.menuList = response.data
-                    store.commit('SET_SECOND_MENU', response.data);
-                    that.setMenuList()
-                })
-            }).catch(error => {
-                console.error(error, 'error')
-            })
-        },
+        // getAddServiceList() {
+        //     const that = this
+        //     that.$http('POST', '/agentnew/ajax_get_service_add_list', {
+        //         uid: that.uid,
+        //         prodid: that.prodid,
+        //     }).then(response => {
+        //         that.$nextTick(() => {
+        //             that.menuList = response.data
+        //             store.commit('SET_SECOND_MENU', response.data);
+        //             that.setMenuList()
+        //         })
+        //     }).catch(error => {
+        //         console.error(error, 'error')
+        //     })
+        // },
         //获得要添加的服务信息
         getServiceAddInfo() {
             this.serviceAddInfo = {}
@@ -621,6 +693,45 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
+.service_info{
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+}
+.service_info_wrap{
+}
+.common_scss{
+    width: 100%;
+    flex: 1;
+    color: #626573;
+    font-size: 12px;
+    letter-spacing: 0.08em;
+    background: #F2F7FF;
+    display: flex;
+    flex-direction: column;
+    padding: 14px 16px;
+    gap: 10px;
+    box-sizing: border-box;
+    b{
+        color: #23242B;
+    }
+    p{
+        color: #23242B;
+    }
+    .blue{
+        color: #006AFF;
+    }
+    .green{
+        color: #00C261;
+    }
+}
+.gap24{
+    gap: 24px;
+    width: 100%;
+}
+.green_back{
+    background: #EFFFE0;
+}
 .serviceAdd-wrap{
     height: 100%;
     display: flex;
diff --git a/src/views/agent/siteServiceList.vue b/src/views/agent/siteServiceList.vue
index ab794f5..adfacb5 100644
--- a/src/views/agent/siteServiceList.vue
+++ b/src/views/agent/siteServiceList.vue
@@ -211,7 +211,7 @@ export default {
             delRows:[],
 
             // 服务列表url
-            serviceAddUrl: '/agent/siteServiceAdd',
+            serviceAddUrl: '/agent/siteAddChooseService',
             // 站点设置url
             serviceEditUrl: '/agent/siteServiceEdit',
             // 新增站点url