From b9a58d08f868d5d91c90ed1f4df2a3a0beef7d43 Mon Sep 17 00:00:00 2001
From: pengda <1111@qq.com>
Date: Tue, 1 Jul 2025 14:02:12 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9C=8D=E5=8A=A1=E5=88=97=E8=A1=A8=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.js                 |  22 ++
 src/utils/common.js                 |  23 ++
 src/views/agent/siteServiceAdd.vue  | 196 ++++++++++++++
 src/views/agent/siteServiceEdit.vue | 508 ++++++++++++++++++++++++++++++++++++
 src/views/agent/siteServiceList.vue | 418 +++++++++++++++++------------
 5 files changed, 1001 insertions(+), 166 deletions(-)
 create mode 100644 src/views/agent/siteServiceAdd.vue
 create mode 100644 src/views/agent/siteServiceEdit.vue

diff --git a/src/router/index.js b/src/router/index.js
index 483d52b..83b7dbb 100755
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -91,6 +91,28 @@ const routes = [{
     }
   },
   {
+    path: '/agent/siteServiceAdd',
+    name: '服务列表-添加',
+    isFirst: true,
+    component: () => import( /* webpackChunkName: "siteList" */ '../views/agent/siteServiceAdd.vue'),
+    meta: {
+      title: '添加服务',
+      breadcrumbParent: '服务列表',
+      // hideBreadcrumb: true // 一级页面不显示面包屑
+    }
+  },
+  {
+    path: '/agent/siteServiceEdit',
+    name: '服务列表-修改',
+    isFirst: true,
+    component: () => import( /* webpackChunkName: "siteList" */ '../views/agent/siteServiceEdit.vue'),
+    meta: {
+      title: '修改服务',
+      breadcrumbParent: '服务列表',
+      // hideBreadcrumb: true // 一级页面不显示面包屑
+    }
+  },
+  {
     path: '/agent/siteBaseSetting',
     name: '站点基本设置',
     component: () => import( /* webpackChunkName: "siteList" */ '../views/agent/siteBaseSetting.vue'),
diff --git a/src/utils/common.js b/src/utils/common.js
index 988f2b4..f2af514 100644
--- a/src/utils/common.js
+++ b/src/utils/common.js
@@ -7,3 +7,26 @@ export function setHighActive(dom) {
         ele.classList.remove('ceshi')
     },1000)
 }
+
+export function getServicePriceDesc(price, price_unit, unit_num) {
+    let unit = 0;
+    let unit_str = "";
+
+    if (unit_num == 1) return price + price_unit +'/篇';
+
+    if (unit_num/10000 < 10) {
+        unit = Math.ceil(unit_num/10000);
+        unit_str = unit == 1 ? '万' : unit+'万';
+    }
+    if (unit_num/1000 < 10) {
+        unit = Math.ceil(unit_num/1000);
+        unit_str = unit == 1 ? '千' : unit+'千';
+    }
+    if (unit_num/100 < 10) {
+        unit = Math.ceil(unit_num/100);
+        unit_str = unit == 1 ? '百' : unit+'百';
+    }
+
+    return price + price_unit + "/" +unit_str + "字符";
+}
+
diff --git a/src/views/agent/siteServiceAdd.vue b/src/views/agent/siteServiceAdd.vue
new file mode 100644
index 0000000..2c07a13
--- /dev/null
+++ b/src/views/agent/siteServiceAdd.vue
@@ -0,0 +1,196 @@
+<template>
+    <div class="main-content12">
+        <!-- page content -->
+        <div class="site-setting-wrap min-flex-right">
+            <div class="siteMessage flex-common" id="siteMessage1">
+                <h3>站点信息</h3>
+                <el-form>
+                    <div class="flex-wrap">
+                        <div class="flex-left">
+                            <GuipInput ref="GuipInput" column="column" label="站点简称" :maxlength="10"
+                                :showWordLimit="true" desc="一个站点对应一个销售渠道，定义好名字好区分" v-model="siteInfo.short_name"
+                                prop="short_name" placeholder="仅自己区分站点销售渠道，客户看不到" />
+
+                            <GuipInput ref="GuipInput" column="column" label="公司电话" desc="在站点首页底部“关于我们”展示"
+                                v-model="siteInfo.phone_num" prop="company_phone" placeholder="非必填" />
+                        </div>
+                        <div class="flex-line"></div>
+                        <div class="flex-right">
+                            <GuipTextarea v-model="siteInfo.company_name" label="详细介绍" column="column"
+                                prop="doctor_detail" width="100%" height="90px" placeholder="请输入描述内容"
+                                desc="在站点首页底部“关于我们”展示" show-word-limit />
+                        </div>
+                    </div>
+                </el-form>
+                <GroupFormBtns @cancel="cancleUpdateSiteInfo()" @confirm="updateSiteInfo()" />
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import store from '@/store';
+import { mapState } from 'vuex';
+import GuipInput from '@/components/GuipInput.vue';
+import GuipTextarea from '@/components/GuipTextarea.vue';
+import GroupFormBtns from '@/components/GroupFormBtns.vue';
+export default {
+    name: 'siteServiceAdd',
+    props: [''],
+    components: {
+        GuipInput,
+        GuipTextarea,
+        GroupFormBtns
+
+    },
+    data() {
+        return {
+            // AUTH
+            token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3NTAwNTM3MjQsIm5iZiI6MTc1MDA1MzcyNCwiZXhwIjoxNzUyNjQ1NzI0LCJ1c2VyIjoic3VidXNlciIsImxvZ2luX3R5cGUiOjAsImFpZCI6IjEifQ.xyIqBLelB-k6jCifgRevBJTyg_Qrm6m1e4OcHhOpepU',
+        }
+    },
+    computed: {
+        ...mapState(['pageTitle']) // 从Vuex映射showSidebar状态到组件的计算属性中
+    },
+    created() {
+        store.commit('SET_CUSTOMIZE', true);
+        store.commit('SET_SLIDER_MENU', 'siteSettingData');
+    },
+    mounted() {
+        store.commit('SET_PAGETITLE', '基本设置');
+
+        this.getSiteInfo();
+    },
+    methods: {
+        // 获取站点信息
+        getSiteInfo() {
+            const that = this
+            that.siteInfo = []
+            this.$http('POST', '/agentnew/ajax_get_site_info', {
+                uid: this.$route.query.uid,
+            }, {
+                headers: {
+                    'Auth': this.token
+                }
+            }).then(response => {
+                this.$nextTick(() => {
+                    that.siteInfo = response.data
+                })
+            }).catch(error => {
+                console.error(error, 'error')
+            })
+        },
+    }
+}
+</script>
+<style lang="scss" scoped>
+.pageheader {
+    display: flex;
+    justify-content: space-between;
+    /* 关键属性 */
+    align-items: center;
+    margin: 16px 0px 16px 0px;
+}
+
+.pagetitle {
+    font-size: 18px;
+    font-weight: bold;
+    line-height: normal;
+    letter-spacing: 0.08em;
+    color: #1E2226;
+    margin-top: 8px;
+}
+
+.siteMessage {
+    border-radius: 4px;
+    transition: all .5s;
+    border: 1px solid transparent;
+}
+.combo-formItem {
+    ::v-deep {
+        .form-item-bottom {
+            position: relative;
+        }
+
+        .select-trigger {
+            background: #F6F7FA;
+            border-color: transparent;
+        }
+
+        .is-open .select-trigger {
+            border-color: #006AFF;
+        }
+
+        .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;
+        }
+    }
+}
+.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;
+    // }
+}
+
+
+.site-setting-wrap {
+    width: 100%;
+}
+
+#siteMessage2 {
+    margin: 12px 0;
+}
+
+.domain-wrap {
+    .domain-item {
+        margin-bottom: 10px;
+    }
+
+
+    .domain-item p:last-child {
+        padding-left: 23px;
+        color: #8A9099;
+    }
+
+    p {
+        text-align: left;
+        line-height: 18px;
+        margin-bottom: 8px;
+    }
+
+    .domain-box {
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/agent/siteServiceEdit.vue b/src/views/agent/siteServiceEdit.vue
new file mode 100644
index 0000000..c656959
--- /dev/null
+++ b/src/views/agent/siteServiceEdit.vue
@@ -0,0 +1,508 @@
+<template>
+    <div class="main-content12">
+        <!-- page header -->
+        <div class="pageheader">
+            <span class="pagetitle">基本设置</span>
+        </div>
+
+        <!-- page content -->
+        <div class="site-setting-wrap min-flex-right">
+            <div class="siteMessage flex-common" id="siteMessage1">
+                <h3>站点信息</h3>
+                <el-form>
+                    <div class="flex-wrap">
+                        <div class="flex-left">
+                            <GuipInput ref="GuipInput" column="column" label="站点简称" :maxlength="10"
+                                :showWordLimit="true" desc="一个站点对应一个销售渠道，定义好名字好区分" v-model="siteInfo.short_name"
+                                prop="short_name" placeholder="仅自己区分站点销售渠道，客户看不到" />
+
+                            <GuipInput ref="GuipInput" column="column" label="公司电话" desc="在站点首页底部“关于我们”展示"
+                                v-model="siteInfo.phone_num" prop="company_phone" placeholder="非必填" />
+                        </div>
+                        <div class="flex-line"></div>
+                        <div class="flex-right">
+                            <GuipTextarea v-model="siteInfo.company_name" label="详细介绍" column="column"
+                                prop="doctor_detail" width="100%" height="90px" placeholder="请输入描述内容"
+                                desc="在站点首页底部“关于我们”展示" show-word-limit />
+                        </div>
+                    </div>
+                </el-form>
+                <GroupFormBtns @cancel="cancleUpdateSiteInfo()" @confirm="updateSiteInfo()" />
+
+            </div>
+            <div class="siteMessage flex-common" id="siteMessage2">
+                <h3>站点信息</h3>
+                <el-form :model="siteForm1" :rules="siteFormrules1" ref="siteForm1">
+                    <div class="flex-wrap">
+                        <div class="flex-left">
+                            <GuipFormItem column="column" class="mb24" label="域名来源" required="true">
+                                <GuipRadio slot="formDom" v-model="siteForm1.domain_source" :options="domain_source"
+                                    prop="domain_source" @change="domain_radioChange" />
+                            </GuipFormItem>
+                        </div>
+                        <div class="flex-line"></div>
+                        <div class="flex-right">
+                            <!-- <GuipFormItem column="column" label="域名设置" required="true">
+                                <GuipInput slot="formDom" v-model="siteForm1.domain_set" placeholder="仅支持数字、字母">
+                                    <span slot="appendshow">.chachongz.com</span>
+                                </GuipInput>
+                            </GuipFormItem> -->
+                            <GuipFormItem column="column" class="combo-formItem" label="域名设置" required="true">
+                                <div slot="formDom" class="self-drop-wrap flex" style="width: 100%;">
+                                    <GuipInput style="width: 60%;" v-model="siteForm1.domain_set"
+                                        placeholder="仅支持数字、字母">
+                                    </GuipInput>
+                                    <div @click="toggleDrop" class="point flex appendDrop" style="width: 40%;">{{
+                                        siteForm1.domainSuffix }}</div>
+                                </div>
+                                <CustomDropdown slot="formDom" ref="dropDomain" width="100%"
+                                    v-model="siteForm1.domainSuffix" :options="domainOptions" @change="changeSelectIp"
+                                    placeholder="请选择">
+                                    <template #normal>
+                                        <div class="flex flex-between noraml-jump">
+                                            <div class="left">
+                                                <b>添加新域名</b>
+                                                <p class="one ft12">域名需要在阿里云完成ICP备案并解析到平台服务器</p>
+                                                <p class="ft12">如果暂时未准备好，可先选用平台免费域名，随时支持域名修改。 </p>
+                                            </div>
+                                            <div class="right">
+                                                <GuipButton size="form">前往绑定</GuipButton>
+                                            </div>
+                                        </div>
+                                    </template>
+                                    <!-- 自定义下拉选项 -->
+                                    <!-- <template #item="{ item }">
+                                        <div class="flex-between">
+                                            <div class="left">
+                                                <p class="one">{{ item.label }}</p>
+                                            </div>
+                                            <div class="right">
+                                                <img v-if="siteForm1.domainSuffix == item.value"
+                                                    src="@/assets/register/drop-selected.svg" alt="">
+                                            </div>
+                                        </div>
+                                    </template> -->
+                                </CustomDropdown>
+                            </GuipFormItem>
+                        </div>
+                    </div>
+                </el-form>
+                <GroupFormBtns @cancel="cancelClick" @confirm="submitForm('siteForm1')" />
+
+            </div>
+            <div class="siteMessage flex-common" id="siteMessage3">
+                <h3>店铺收款</h3>
+                <el-form :model="siteForm2" ref="formRef">
+                    <div class="flex-wrap">
+                        <div class="flex-left">
+                            <GuipFormItem column="column" class="mb24">
+                                <div slot="formLeft" class="form-top-icon">
+                                    <img src="@/assets/register/weixin.svg" style="width: 26px;height: 26px;"
+                                        alt=""><span>微信收款</span>
+                                </div>
+                                <CustomDropdown slot="formDom" width="100%" v-model="siteForm1.weixin_pay"
+                                    :options="options_weixin" @change="changeSelectWeixin" placeholder="请选择"
+                                    :options_null="options_weixin_null" @changeNormal="changeNormalWeixin">
+                                    <!-- 自定义触发按钮 -->
+                                    <template #trigger>
+                                        <span v-if="selectedItemWeixin"
+                                            style="color: #1E2226;font-family: Microsoft YaHei UI;">{{
+                                                select_placeholder_weixin ? select_placeholder_weixin :
+                                                    selectedItemWeixin.desc }}</span>
+                                        <span v-else>请选择</span>
+                                    </template>
+                                    <template #normal>
+                                        <div class="flex flex-between noraml-jump">
+                                            <div class="left">
+                                                <b>绑定新微信收款</b>
+                                                <p class="one">需要使用您公司的微信支付</p>
+                                                <p>需在微信商户平台-产品中心开通Native支付</p>
+                                            </div>
+                                            <div class="right">
+                                                <GuipButton type="primary" size="medium">前往绑定</GuipButton>
+                                            </div>
+                                        </div>
+                                    </template>
+
+                                    <!-- 自定义下拉选项 -->
+                                    <template #item="{ item }">
+                                        <div class="flex-between">
+                                            <div class="left">
+                                                <p class="one">{{ item.label }}</p>
+                                                <p>{{ item.desc }}</p>
+                                            </div>
+                                            <div class="right">
+                                                <img v-if="selectedItem.value == item.value"
+                                                    src="@/assets/register/drop-selected.svg" alt="">
+                                            </div>
+                                        </div>
+                                    </template>
+                                </CustomDropdown>
+                            </GuipFormItem>
+                            <GuipFormItem column="column">
+                                <div slot="formLeft" class="form-top-icon">
+                                    <img src="@/assets/register/zhifubao.svg" style="width: 26px;height: 26px;"
+                                        alt=""><span>支付宝收款</span>
+                                </div>
+                                <!-- <GuipSelect slot="formDom" v-model="siteForm2.zhifubao_pay" prop="zhifubao_pay"
+                                            :options="options_zhifubao" placeholder="未绑定支付宝收款" /> -->
+                                <CustomDropdown slot="formDom" width="100%" v-model="siteForm1.zhifubao_pay"
+                                    :options="options_weixin" @change="changeSelectWeixin" placeholder="请选择"
+                                    :options_null="options_weixin_null" @changeNormal="changeNormalWeixin">
+                                    <!-- 自定义触发按钮 -->
+                                    <template #trigger>
+                                        <span v-if="selectedItemWeixin"
+                                            style="color: #1E2226;font-family: Microsoft YaHei UI;">{{
+                                                select_placeholder_weixin ? select_placeholder_weixin :
+                                                    selectedItemWeixin.desc }}</span>
+                                        <span v-else>请选择</span>
+                                    </template>
+                                    <template #normal>
+                                        <div class="flex flex-between noraml-jump">
+                                            <div class="left">
+                                                <b>绑定新支付宝收款</b>
+                                                <p class="one">需要使用您公司的支付宝支付</p>
+                                                <p>需在支付宝商户平台-产品中心开通Native支付</p>
+                                            </div>
+                                            <div class="right">
+                                                <GuipButton type="primary" size="medium">前往绑定</GuipButton>
+                                            </div>
+                                        </div>
+                                    </template>
+
+                                    <!-- 自定义下拉选项 -->
+                                    <template #item="{ item }">
+                                        <div class="flex-between">
+                                            <div class="left">
+                                                <p class="one">{{ item.label }}</p>
+                                                <p>{{ item.desc }}</p>
+                                            </div>
+                                            <div class="right">
+                                                <img v-if="selectedItem.value == item.value"
+                                                    src="@/assets/register/drop-selected.svg" alt="">
+                                            </div>
+                                        </div>
+                                    </template>
+                                </CustomDropdown>
+                            </GuipFormItem>
+                        </div>
+                        <div class="flex-line"></div>
+                        <div class="flex-right">
+                            <!-- <div>{{ input1 }}</div> -->
+                            <div class="addStore flex">
+                                <div></div>
+                                添加其他收款方式
+                            </div>
+                        </div>
+                    </div>
+                </el-form>
+                <GroupFormBtns @cancel="cancelClick" @confirm="submitForm('siteForm2')" />
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+// import GuipInput from '@/components/GuipInput.vue';
+import store from '@/store';
+import { mapState } from 'vuex';
+import GuipFormItem from '@/components/GuipFormItem.vue';
+import GuipInput from '@/components/GuipInput.vue';
+import GuipTextarea from '@/components/GuipTextarea.vue';
+import GuipRadio from '@/components/GuipRadio.vue';
+import CustomDropdown from '@/components/CustomDropdown.vue';
+import GuipButton from '@/components/GuipButton.vue';
+import GroupFormBtns from '@/components/GroupFormBtns.vue';
+// import {setHighActive} from '@/utils/common';
+export default {
+    // 站点设置
+    name: '',
+    props: [''],
+    components: {
+        GuipRadio,
+        GuipFormItem,
+        GuipInput,
+        GuipTextarea,
+        CustomDropdown,
+        GuipButton,
+        GroupFormBtns
+
+    },
+    data() {
+        return {
+            // AUTH
+            token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3NTAwNTM3MjQsIm5iZiI6MTc1MDA1MzcyNCwiZXhwIjoxNzUyNjQ1NzI0LCJ1c2VyIjoic3VidXNlciIsImxvZ2luX3R5cGUiOjAsImFpZCI6IjEifQ.xyIqBLelB-k6jCifgRevBJTyg_Qrm6m1e4OcHhOpepU',
+            // 站点信息
+            siteInfo: {
+                short_name: '',
+                company_name: '',
+                phone_num: '',
+            },
+            domainOptions: [
+                {
+                    value: '.chachongz.com',
+                    label: '.chachongz.com'
+                },
+                {
+                    value: '.turnitin.org.cn',
+                    label: '.turnitin.org.cn'
+                },
+                {
+                    value: '.jishu.chachongz.com',
+                    label: '.jishu.chachongz.com'
+                },
+            ],
+            siteForm: {
+                company_name: '',
+                company_address: '',
+                company_phone: '',
+                site_alias: '',
+            },
+            // siteFormrules: {
+            //     site_alias: [
+            //         { required: true, message: '请输入站点简称', trigger: 'blur' }
+            //     ]
+            // },
+            siteForm1: {
+                domain_set: '',
+                domainSuffix:'.chachongz.com',
+                domain_source: '平台免费域名',
+            },
+            siteForm2: {
+                zhifubao_pay: '',
+                weixin_pay: '',
+            },
+            siteFormrules1: {
+                domain_source: [
+                    { required: true, message: '请输入站点简称', trigger: 'blur' }
+                ]
+            },
+            domain_source: [
+                { label: '平台免费域名', value: '平台免费域名', selectedLabel: "平台免费域名" },
+                { label: '我自己有域名', value: '我自己有域名', selectedLabel: "我自己有域名" },
+            ],
+            options_weixin_null: {
+                label: '暂无收款账号',
+                value: '暂时没有收款账号，我想稍后配置',
+                desc: '暂无收款账号，稍后配置'
+            },
+            select_placeholder_weixin: '暂无收款账号，稍后配置',
+            selectedItemWeixin: {},//微信收款方式
+            options_weixin: [],
+            options_zhifubao: [],
+        }
+    },
+    computed: {
+        ...mapState(['pageTitle']) // 从Vuex映射showSidebar状态到组件的计算属性中
+    },
+    created() {
+        store.commit('SET_CUSTOMIZE', true);
+        store.commit('SET_SLIDER_MENU', 'siteSettingData');
+    },
+    mounted() {
+        store.commit('SET_PAGETITLE', '基本设置');
+
+        this.getSiteInfo();
+    },
+    methods: {
+        // 操作下拉框
+        toggleDrop(e){
+            this.$refs.dropDomain.toggleDropdown(e)
+        },
+        changeSelectIp(item) {
+            //内容真实绑定在    
+            this.selectedItem1 = { ...item };
+        },
+        // 获取站点信息
+        getSiteInfo() {
+            const that = this
+            that.siteInfo = []
+            this.$http('POST', '/agentnew/ajax_get_site_info', {
+                uid: this.$route.query.uid,
+            }, {
+                headers: {
+                    'Auth': this.token
+                }
+            }).then(response => {
+                this.$nextTick(() => {
+                    that.siteInfo = response.data
+                })
+            }).catch(error => {
+                console.error(error, 'error')
+            })
+        },
+        updateSiteInfo() {
+            this.$http('POST', '/agentnew/ajax_update_site_info', {
+                uid: this.$route.query.uid,
+                short_name: this.siteInfo.short_name,
+                company_name: this.siteInfo.company_name,
+                company_phone: this.siteInfo.phone_num,
+            }, {
+                headers: {
+                    'Auth': this.token
+                }
+            }).then(response => {
+                this.$nextTick(() => {
+                    if (response.status) {
+                        this.$Message.success(response.info);
+                    } else {
+                        this.$Message.error(response.info);
+                    }
+                })
+            }).catch(error => {
+                console.error(error, 'error')
+            })
+        },
+        cancleUpdateSiteInfo() {
+            this.getSiteInfo();
+        },
+        changeNormalWeixin() {
+
+        },
+        changeSelectWeixin(item, flag) {
+            if (flag) {
+                this.select_placeholder_weixin = this.options_weixin_null.desc;
+                return
+            }
+            this.selectedItem = { ...item };
+            console.log(this.selectedItem, 'this.selectedItem====');
+        },
+        //  销售渠道
+        domain_radioChange(type) {
+            console.log(type, '--');
+        },
+        onSwitchChange(data) {
+            console.log(data, '---');
+        },
+        submitForm(form) {
+            console.log(this.$refs[form], '-----');
+            this.$refs[form].validate((valid) => {
+                console.log(this[form], '======formxinxi');
+                if (valid) {
+                    alert('提交成功!');
+                } else {
+                    return false;
+                }
+            });
+        },
+        cancelClick() {
+            console.log('quxiao');
+        },
+        confirmClick(type) {
+            console.log(type, '确认');
+        }
+
+    }
+}
+</script>
+<style lang="scss" scoped>
+.pageheader {
+    display: flex;
+    justify-content: space-between;
+    /* 关键属性 */
+    align-items: center;
+    margin: 16px 0px 16px 0px;
+}
+
+.pagetitle {
+    font-size: 18px;
+    font-weight: bold;
+    line-height: normal;
+    letter-spacing: 0.08em;
+    color: #1E2226;
+    margin-top: 8px;
+}
+
+.siteMessage {
+    border-radius: 4px;
+    transition: all .5s;
+    border: 1px solid transparent;
+}
+.combo-formItem {
+    ::v-deep {
+        .form-item-bottom {
+            position: relative;
+        }
+
+        .select-trigger {
+            background: #F6F7FA;
+            border-color: transparent;
+        }
+
+        .is-open .select-trigger {
+            border-color: #006AFF;
+        }
+
+        .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;
+        }
+    }
+}
+.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;
+    // }
+}
+
+
+.site-setting-wrap {
+    width: 100%;
+}
+
+#siteMessage2 {
+    margin: 12px 0;
+}
+
+.domain-wrap {
+    .domain-item {
+        margin-bottom: 10px;
+    }
+
+
+    .domain-item p:last-child {
+        padding-left: 23px;
+        color: #8A9099;
+    }
+
+    p {
+        text-align: left;
+        line-height: 18px;
+        margin-bottom: 8px;
+    }
+
+    .domain-box {
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/agent/siteServiceList.vue b/src/views/agent/siteServiceList.vue
index 0022cab..1155b25 100644
--- a/src/views/agent/siteServiceList.vue
+++ b/src/views/agent/siteServiceList.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="main-content12">
         <div class="flex-common">
-            <h3>服务列表</h3>
+            <h3 class="flex-service-title">服务列表</h3>
             <div class="warning-text">
                 <img class="warning-icon" src="@/assets/site/info_filled.svg" alt="">
                 <span>PC端站点使用的“科技清新蓝”模板仅支持AI相关服务，列表中置灰的服务不支持。可编辑置灰服务，但需更换模板才能在PC端站点显示。</span>
@@ -15,15 +15,15 @@
                     <GuipButton type="ignore" :btnstyle="btnInfostyleObj">批量删除</GuipButton>
                 </div>
                 <div class="pageheader-right">
-                    <GuipButton type="primary" :btnstyle="btnstyleObj">添加查重服务</GuipButton>
-                    <GuipButton type="primary" :btnstyle="btnstyleObj">添加写作辅助</GuipButton>
-                    <GuipButton type="primary" :btnstyle="btnstyleObj">添加AIGC</GuipButton>
+                    <GuipButton type="primary" :btnstyle="btnstyleObj" @click="jumpAdd(1)">添加查重服务</GuipButton>
+                    <GuipButton type="primary" :btnstyle="btnstyleObj" @click="jumpAdd(2)">添加写作辅助</GuipButton>
+                    <GuipButton type="primary" :btnstyle="btnstyleObj" @click="jumpAdd(3)">添加AIGC</GuipButton>
                 </div>
             </div>
 
             <!-- page content -->
             <el-form>
-                <GuipTable :tableData="serviceList" ref="multipleTable" @selectChange="handleSelectionChange" autoColumn="true" :loading="tableLoading">
+                <GuipTable :tableData="serviceList" ref="multipleTable" autoColumn="true" :loading="tableLoading">
 
                     <el-table-column label="选择" width="70" header-align="center" align="center">
                         <template slot-scope="scope">
@@ -32,20 +32,36 @@
                     </el-table-column>
 
                     <el-table-column prop="type_desc" label="服务版本"></el-table-column>
-                    <el-table-column prop="supply_price_desc" label="今日供货价">
-                        <template slot-scope="scope">
-                            <div class="flex cell_render">
-                                {{ scope.row.supply_price_desc }}
-                                <svg-icon :size="16" :path="require('@/assets/site/tableEdit.svg')" :color="'#8A9099'" :hoverColor="'#006AFF'" />
-                            </div>
-                        </template>
-                    </el-table-column>
+
+                    <el-table-column prop="supply_price_desc" label="今日供货价"></el-table-column>
+
                     <el-table-column prop="price_desc" label="售价">
-                        <template slot-scope="scope">
-                            <div class="flex cell_render">
-                                {{ scope.row.price_desc }}
-                                <svg-icon :size="16" :path="require('@/assets/site/tableEdit.svg')" :color="'#8A9099'" :hoverColor="'#006AFF'" />
-                            </div>
+                        <template #default="{ row,$index }">
+                            <el-popover v-model="row.pricePopoverVisible" :ref="`pricePopover-${row.type}`"
+                                        placement="bottom" trigger="manual" :append-to-body="false"  :visible-arrow="true"
+                                        popper-class="custom-popover"  @show="popshow" >
+                                <div style="text-align: center">
+                                    <div class="flex">
+                                        <GuipInput ref="GuipInput" width="133px" v-model="row.price" label="售价" placeholder="请输入售价" :unit="row.price_unit"></GuipInput>
+                                        <template  v-if="row.price_unit_num>1">
+                                            <span class="shortspan">/</span>
+                                            <GuipInput ref="GuipInput" width="133px" v-model="row.price_unit_num" unit="字符">
+                                            </GuipInput>
+                                        </template>
+                                    </div>
+                                    <div class="flex" style="text-align: right; margin-top: 32px;justify-content: flex-end;">
+                                        <GuipButton size="medium" @click="cancelEdit(row, 'price')">取消</GuipButton>
+                                        <GuipButton type="primary" @click="saveEdit(row, 'price')" size="medium">确定</GuipButton>
+                                    </div>
+                                </div>
+                                <template #reference>
+                                    <div class="flex cell_render" @click="handleEditClick(row,$index,'price')">
+                                        <span :key="random()">{{ row.price_desc }}</span>
+                                        <svg-icon :size="16" :path="require('@/assets/site/tableEdit.svg')" :color="'#8A9099'"
+                                                  :hoverColor="'#006AFF'" />
+                                    </div>
+                                </template>
+                            </el-popover>
                         </template>
                     </el-table-column>
 
@@ -56,33 +72,69 @@
                                 <svg-icon :size="16" :path="require('@/assets/site/tableEdit.svg')" :color="'#8A9099'" :hoverColor="'#006AFF'" />
                             </div>
                         </template>
-                    </el-table-column>
 
-                    <el-table-column prop="sort_id" label="排序">
                         <template slot-scope="scope">
                             <div class="flex cell_render">
-                                {{ scope.row.sort_id }}
-                                <svg-icon :size="16" :path="require('@/assets/site/tableEdit.svg')" :color="'#8A9099'" :hoverColor="'#006AFF'" />
+                                <span :class="(scope.row.payment_method_desc == '默认站点支付' ? 'normal_payment' : 'self_payment')">
+                                    {{ scope.row.payment_method_desc == '默认站点支付' ? '默认站点支付' : '自定义支付' }}
+                                </span>
+                                <svg-icon :size="16" :path="require('@/assets/register/tableEdit.svg')"
+                                          @click="popPayMentModal(scope.row)" :color="'#8A9099'" :hoverColor="'#006AFF'" />
                             </div>
                         </template>
                     </el-table-column>
 
+                    <el-table-column prop="sort_id" label="排序">
+                        <template #default="{ row,$index }">
+                            <el-popover v-model="row.sortPopoverVisible" :ref="`popover-${row.type}`"
+                                        placement="bottom" trigger="manual" :append-to-body="false"  :visible-arrow="true"
+                                        popper-class="custom-popover"  @show="popshow" >
+                                <div style="text-align: center">
+                                    <GuipInput ref="GuipInput" width="252px" v-model="row.sort_id" label="排序" placeholder="请输入数字"></GuipInput>
+                                    <p style="width: 252px;margin-left: 40px;text-align: right;color: #8A9099;letter-spacing: 0.08em;">输入＞0的数，越小排序越前；重复则新者优先；0则默认排序</p>
+                                    <div class="flex" style="text-align: right; margin-top: 32px;justify-content: flex-end;">
+                                        <GuipButton size="medium" @click="cancelEdit(row, 'sort')">取消</GuipButton>
+                                        <GuipButton type="primary" @click="saveEdit(row, 'sort')" size="medium">确定</GuipButton>
+                                    </div>
+                                </div>
+                                <template #reference>
+                                    <div class="flex cell_render" @click="handleEditClick(row,$index,'sort')">
+                                        <span :key="random()">{{ row.sort_id }}</span>
+                                        <svg-icon :size="16" :path="require('@/assets/site/tableEdit.svg')" :color="'#8A9099'"
+                                                  :hoverColor="'#006AFF'" />
+                                    </div>
+                                </template>
+                            </el-popover>
+                        </template>
+                    </el-table-column>
+
                     <el-table-column prop="sort_id" label="上首页">
                         <template slot-scope="scope">
                             <div class="flex cell_render">
-                                <GuipSwitch :modelValue="scope.row.sort_id" @change="onSwitchChange"></GuipSwitch>
+                                <GuipSwitch :modelValue="scope.row.is_display" active-value="1" inactive-value="0" @change="onSwitchChange(scope.row)"></GuipSwitch>
                             </div>
                         </template>
                     </el-table-column>
 
                     <el-table-column label="操作" fixed="right">
                         <template slot-scope="scope">
-                            <el-link type="primary" :href="serviceListUrl+'?uid='+scope.row.uid" target="_blank" class="mr-16">编辑</el-link>
-                            <el-link type="primary" :href="siteSettingUrl+'?uid='+scope.row.uid" target="_blank">删除</el-link>
+                            <el-link type="primary" :href="serviceEditUrl+'?type='+scope.row.type" target="_blank" class="mr-16">编辑</el-link>
+                            <el-link type="primary" @click="handleDelClick(scope.row, scope.$index)">删除</el-link>
                         </template>
                     </el-table-column>
 
                 </GuipTable>
+
+                <GuipDialog :dialogVisible="dialogVisible" :title="dialogTitle" :show-close-button="false"
+                            :show-cancel-button="showCancelButton" @confirm="handleConfirm" @cancel="handleCancel" @close="handleClose"
+                            @dialogVisibleChange="dialogVisibleChange">
+                    <PaymentMethod :paymentList="payList" />
+                </GuipDialog>
+
+                <GuipDialog :dialogVisible="dialogDelConfim" title="提示" :show-close-button="false" @confirm="handleDelConfirm"
+                            @cancel="handleDelCancel">
+                    确定要移除服务吗?
+                </GuipDialog>
             </el-form>
         </div>
     </div>
@@ -97,10 +149,13 @@ import GuipDialog from "@/components/GuipDialog.vue";
 import SvgIcon from "@/components/SvgIcon.vue";
 import GuipInput from "@/components/GuipInput.vue";
 import GuipSwitch from "@/components/GuipSwitch.vue";
+import {getServicePriceDesc} from "@/utils/common";
+import PaymentMethod from "@/components/paymentMethod.vue";
 
 export default {
     name: 'siteServiceList',
     components: {
+        PaymentMethod,
         GuipSwitch,
         // eslint-disable-next-line vue/no-unused-components
         GuipInput, SvgIcon, GuipDialog, GuipTable,
@@ -132,41 +187,26 @@ export default {
             siteShortName: "",
             // 站点列表
             serviceList: [],
+            //支付方式
+            payList: [],
+            //编辑图片展示
+            popoverFlag:false,
+            //弹框
+            dialogVisible: false,   //是否展示弹框
+            dialogTitle: "",    //弹框标题
+            showCancelButton: true, // 控制是否显示取消按钮
+            showCloseButton: true, // 控制是否显示关闭按钮
 
+            //二次确认
+            dialogDelConfim: false,
+            delRow:{},
 
-
-
-            // 站点分组
-            siteGroups: [],
-            // 分组id
-            gid: 0,
             // 服务列表url
-            serviceListUrl: '/ui',
+            serviceAddUrl: '/agent/siteServiceAdd',
             // 站点设置url
-            siteSettingUrl: '/agent/siteBaseSetting',
+            serviceEditUrl: '/agent/siteServiceEdit',
             // 新增站点url
             addNewSiteUrl: '/ui',
-            popoverFlag:false,
-            // 站点分组名称
-            selected_group: '',
-            isUpIco: false,
-            currentIcon: require('@/assets/site/drop_icon.svg'),
-            currentGroup: '',
-            fitlerIcon: require('@/assets/site/filter.svg'),
-            // 手机服务
-            phoneServices: [
-                {'id': 0,  value: '不限' },
-                {'id': 1,  value: '微信H5' },
-                {'id': 2,  value: '小程序' },
-            ],
-            // 当前选中的手机服务
-            currentPhoneService: '',
-            // 添加分组弹框显示标识
-            addGroupDialogVisible: false,
-            // 取消按钮显示
-            showCancelButton: true,
-            // 确定按钮显示
-            groupname: '',
         }
     },
     created() {
@@ -177,10 +217,12 @@ export default {
         this.uid = this.$route.query.uid;
     },
     mounted() {
-        store.commit('SET_BREADRIGHTTEXT', '跳转链接');
         this.getSiteServiceList();
     },
     methods: {
+        jumpAdd(type){
+            this.$router.push(this.serviceAddUrl + '?type=' + type)
+        },
         toggleAllSelection() {
             this.$refs.multipleTable.$refs.guiptable.toggleAllSelection();
         },
@@ -202,164 +244,188 @@ export default {
                 this.tableLoading = false
                 this.$nextTick(() => {
                     that.serviceList = response.data.service_list
+                    store.commit('SET_BREADRIGHTTEXT', response.data.site_short_name);
                 })
             }).catch(error => {
                 console.error(error, 'error')
             })
         },
-        // 获取站点分组
-        getSiteGroups() {
-            const that = this
-            that.siteGroups = []
-            this.$http('POST', '/agentnew/ajax_get_site_groups', {
-                gid: this.gid,
-            },{
-                headers:{
-                    'Auth': this.token
-                }
-            }).then(response => {
-                this.$nextTick(() => {
-                    that.siteGroups = response.data
-                })
-            }).catch(error => {
-                console.error(error, 'error')
-            })
-        },
-        // 点击站点分组单元格时触发
-        groupSetting(row, index) {
-            // 如果已经打开当前行的弹框，则关闭
-            if (row.showPopover === true) {
-                row['showPopover'] = false;
-                // 切换图标
-                this.toggleIcon();
-
-                return;
-            }
-
-            // 如果存在分组 则显示已设置分组
-            if (row.group) {
-                this.selected_group = row.group;
-            }
+        onSwitchChange(row){
+            row.is_display = row.is_display == 1 ? 0 : 1
 
+            let obj = {}
+            obj.uid = this.uid
+            obj.type = row.type
+            obj.is_display = row.is_display
+            this.saveRequest('/agentnew/ajax_set_service_display_index', obj, row)
+        },
+        // 点击价格单元格时触发
+        handleEditClick(row, index, type) {
             // 关闭其他行的弹框
             this.popoverFlag = true;
-            this.siteList.forEach((item, i) => {
+            this.serviceList.forEach((item, i) => {
                 if (i !== index) {
-                    item['showPopover'] = false;
+                    item[type + 'PopoverVisible'] = false;
                 }
             });
             // 打开当前行的弹框
-            row['showPopover'] = true;
-
-            // 切换图标
-            this.toggleIcon();
+            row[type + 'PopoverVisible'] = true;
         },
-        // 保存站点分组
-        addSiteGroupIndex(row) {
-            this.$http('POST', '/agentnew/ajax_add_site_group_index', {
-                groupid: this.selected_group,
-                uid: row.uid,
-            },{
-                headers:{
-                    'Auth': this.token
-                }
-            }).then(response => {
-                if (response.status) {
-                    // 保存成功弹层提示
-                    this.$Message.success(response.info);
+        popshow() {
+            var ariaEls = document.querySelectorAll('.el-popover')
+            ariaEls.forEach((item) => {
+                item.removeAttribute('aria-hidden')
+            })
 
-                    // 更新分组名称
-                    this.siteGroups.forEach((item) => {
-                        if (item.id === this.selected_group) {
-                            row['group'] = item.name;
-                        }
-                    });
-                    row['groupid'] = this.selected_group; // 更新价格
-                    row['showPopover'] = false; // 关闭弹框
-                    this.$set(this.siteList, row)
-                    this.currentIcon = require('@/assets/site/drop_icon.svg');
-                } else {
-                    this.$Message.error(response.info);
-                }
-            }).catch(error => {
-                console.error(error, 'error')
+            ariaEls = document.querySelectorAll('.el-radio__original')
+            ariaEls.forEach((item) => {
+                item.removeAttribute('aria-hidden')
             })
         },
+        // 保存价格
+        saveEdit(row, type) {
+            row[type + 'PopoverVisible'] = false; // 关闭弹框
+            if(type == 'price') this.savePrice(row)
+            if(type == 'sort') this.saveSort(row)
+        },
         // 取消编辑
-        cancleGroupIndexSetting(row) {
-            // 关闭弹框
-            row['showPopover'] = false;
+        cancelEdit(row, type) {
+            row[type + 'PopoverVisible'] = false;
             this.popoverFlag = false
             // row[type + '_popover'] = false; // 关闭弹框
-            this.currentIcon = require('@/assets/site/drop_icon.svg');
             this.$Message.info('已取消编辑');
-
         },
-        toggleIcon() {
-            this.isUpIco = !this.isUpIco; // 切换状态
+        random() {
+            var randomNumber = Math.random();
+            return randomNumber
+        },
+        savePrice(row){
+            if (row.price === '') {
+                this.$message.warning('价格不能为空');
+                return;
+            }
+            row.price_desc = getServicePriceDesc(row.price, row.price_unit, row.price_unit_num);
 
-            // 根据状态更新图标和颜色
-            if (this.isUpIco) {
-                this.currentIcon = require('@/assets/site/up_icon.svg'); // 向上图标
-            } else {
-                this.currentIcon = require('@/assets/site/drop_icon.svg'); // 向下图标
+            let obj = {}
+            obj.uid = this.uid
+            obj.type = row.type
+            obj.unit_num = row.price_unit_num
+            if(row.price_unit == '元'){
+                obj.unit_price = row.price
+            }else{
+                obj.unit_piece = row.price
             }
+
+            this.saveRequest('/agentnew/ajax_set_service_price', obj, row)
+        },
+        saveSort(row){
+            let obj = {}
+            obj.uid = this.uid
+            obj.type = row.type
+            obj.sort_num = row.sort_id
+            this.saveRequest('/agentnew/ajax_set_service_sort', obj, row)
         },
-        // 表格点击、选择
-        handleSelectionChange(data) {
-            // 多选模式下的时候 data 为数组格式
-            // 单选的时候是 对象
-            console.log(data, '表格行信息');
+        saveRequest(url, obj, row){
+            const that = this
+            this.$http('POST', url, obj,{
+                headers:{
+                    'Auth': this.token
+                }
+            }).then(response => {
+                if(response.status){
+                    that.$message.success('保存成功');
+                    this.$nextTick(() => {
+                        that.$set(that.serviceList, row)
+                    })
+                    return true;
+                }
+                that.$message.success(response.info);
+            }).catch(error => {
+                console.error(error, 'error')
+            })
         },
-        // 弹框相关方法---start
-        showAddGroup() {
-            this.addGroupDialogVisible = true;
+        popPayMentModal(row){
+            this.dialogVisible = true;
+            this.dialogTitle = row.type_desc + '-收款方式'
+            this.getPayList(row.type)
         },
-        // 确认按钮事件
-        addGroup() {
-            this.addGroupDialogVisible = false;
-
-            this.$http('POST', '/agentnew/ajax_add_site_group', {
-                name: this.groupname,
+        // 获取支付列表
+        getPayList(type) {
+            const that = this
+            that.payList = []
+            this.$http('POST', '/agentnew/ajax_get_service_pay_list', {
+                uid: that.uid,
+                type: type,
             },{
                 headers:{
                     'Auth': this.token
                 }
             }).then(response => {
                 this.$nextTick(() => {
-                    if (response.status) {
-                        this.$Message.success(response.info);
-                        // 更新分组
-                        this.getSiteGroups()
-                        // 清空分组名称
-                        this.groupname = ''
-                    } else {
-                        this.$Message.error(response.info);
-                    }
+                    that.payList = response.data.paylist
                 })
             }).catch(error => {
                 console.error(error, 'error')
             })
         },
+        // 确认按钮事件
+        handleConfirm() {
+            this.$message.success('点击了确认按钮');
+            this.dialogVisible = false;
+        },
         // 取消按钮事件
-        cancleAddGroup() {
-            this.addGroupDialogVisible = false;
+        handleCancel() {
+            this.$message.warning('点击了取消按钮');
+            this.dialogVisible = false;
         },
         // 关闭弹框事件
-        closeAddGroup() {
-            this.addGroupDialogVisible = false;
+        handleClose() {
+            this.$message.info('弹框已关闭');
+            this.dialogVisible = false;
         },
-        addGroupDialogVisibleChange(data) {
+        dialogVisibleChange(data) {
             console.log(data, 'data098908090');
         },
-        // 弹框相关方法---end
-        addNewSite() {
-            window.open(this.addNewSiteUrl, '_blank');
-        }
+
+        //删除
+        handleDelClick(row, index) {
+            this.dialogDelConfim = true
+            this.delRow.index = index
+            this.delRow.type = row.type
+        },
+        handleDelConfirm(){
+            const that = this
+            that.dialogDelConfim = false
+            this.$http('POST', '/agentnew/ajax_del_service', {
+                uid: that.uid,
+                type: that.delRow.type
+            },{
+                headers:{
+                    'Auth': this.token
+                }
+            }).then(response => {
+                if(response.status){
+                    that.$message.success('删除成功');
+                    this.$nextTick(() => {
+                        that.serviceList.splice(that.delRow.index, 1);
+                    })
+                    return true;
+                }
+                that.$message.success(response.info);
+            }).catch(error => {
+                console.error(error, 'error')
+            })
+        },
+        handleDelCancel(){
+            this.dialogDelConfim = false
+        },
     },
 }
 </script>
 <style lang="scss" scoped>
+.flex-service-title{
+  margin-bottom: 12px;
+}
 .warning-text{
   display: flex;
   align-items: center;
@@ -425,4 +491,24 @@ export default {
 .mr-16 {
   margin-right: 16px;
 }
+.normal_payment,
+.self_payment {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  padding: 2px 10px;
+  border-radius: 4px;
+  background: #F6F7FA;
+  box-sizing: border-box;
+  border: 1px solid #DFE2E6;
+  letter-spacing: 0.08em;
+  color: #626573;
+}
+
+.self_payment {
+  border: 1px solid #BFDAFF;
+  background: #F2F7FF;
+  color: #006AFF;
+}
 </style>
\ No newline at end of file