From a5049b2d0440a69b6ec8153edff3b67589d7b036 Mon Sep 17 00:00:00 2001
From: zq <136432190602163.com>
Date: Wed, 25 Jun 2025 15:21:58 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=8B=E6=8B=89=E8=BE=93=E5=85=A5=E7=BB=84?=
 =?UTF-8?q?=E5=90=88=E6=A1=86=E5=AE=9E=E7=8E=B0=E3=80=81=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E7=A4=BA=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                         |   8 +-
 src/components/Breadcrumb.vue       |   1 -
 src/components/CustomDropdown.vue   |  73 +++++++------
 src/views/agent/siteBaseSetting.vue | 172 +++++++++++++++++++++++------
 src/views/elementGroups.vue         | 209 ++++++++++++++++++++++++++++++++++--
 5 files changed, 379 insertions(+), 84 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 7efc269..128a3ce 100755
--- a/src/App.vue
+++ b/src/App.vue
@@ -8,17 +8,18 @@
         <div class="bg"></div>
       </el-header>
       <el-container :class="(showHeader ? 'short-container' : '')">
+        <!-- 侧边栏 -->
         <SliderMenu v-if="showSidebar" :menuData="slidermenu" :customize="customize"></SliderMenu>
-        <!-- <SliderMenu v-if="showSidebar" :menuData="menuData"></SliderMenu> -->
         <el-container class="main-right-content">
           <!-- 面包屑导航 -->
           <Breadcrumb />
           <el-main class="app-content">
+            <!-- loading -->
               <global-loading>
+                <!-- 页面内容 -->
                 <router-view />
               </global-loading>
             </el-main>
-            <!-- <Footer v-if="showFooter"></Footer> -->
         </el-container>
       </el-container>
     </el-container>
@@ -47,10 +48,9 @@ export default {
     Breadcrumb
   },
   computed: {
-    ...mapState(['showSidebar', 'showFooter', 'showHeader','slidermenu','customize']) // 从Vuex映射showSidebar状态到组件的计算属性中
+    ...mapState(['showSidebar','showHeader','slidermenu','customize']) // 从Vuex映射showSidebar状态到组件的计算属性中
   },
   mounted() {
-    console.log(this.showFooter,'showFooter----');
     window.addEventListener('beforeunload', this.clearStorage);
   },
   beforeUnmount() {
diff --git a/src/components/Breadcrumb.vue b/src/components/Breadcrumb.vue
index 718be04..84655a6 100644
--- a/src/components/Breadcrumb.vue
+++ b/src/components/Breadcrumb.vue
@@ -8,7 +8,6 @@
           <template v-if="index !== breadcrumbs.length - 1">
             <router-link to="/" v-if="item.title == '首页'">
               <SvgIcon1 :iconPath="require(`@/assets/menu/home-bread.svg`)" defaultColor="#8A9099" :size="16" activeColor="#006AFF"/>
-              <!-- <img class="home-icon" src="@/assets/menu/home-bread.svg" alt="首页"> -->
             </router-link>
             <router-link v-else :to="item.path">{{ item.title }}</router-link>
             <img class="separator" src="@/assets/separator.png" alt="">
diff --git a/src/components/CustomDropdown.vue b/src/components/CustomDropdown.vue
index 2b89d54..29879fc 100644
--- a/src/components/CustomDropdown.vue
+++ b/src/components/CustomDropdown.vue
@@ -1,36 +1,41 @@
 <template>
-    <div class="custom-select"  v-clickaway="closeDropdown" ref="dropdown"  :class="{ 'is-open': isOpen }" :style="{width}">
+    <div class="custom-select" v-clickaway="closeDropdown" ref="dropdown" :class="{ 'is-open': isOpen }" :style="{width}">
         <!-- 触发按钮 -->
         <div class="select-trigger" @click="toggleDropdown">
             <slot name="trigger">
-                {{ selectedItem ? selectedItem.label : placeholder }}
+                {{ selectedItem ? selectedItem[displayKey] : placeholder }}
             </slot>
             <img class="arrow-icon" :src="isOpen? require('../assets/dropDown_open.png'):require('../assets/dropDown_expand.png')" alt="">
-            <!-- <span class="arrow-icon">{{ isOpen ? img : "▼" }}</span> -->
         </div>
 
-        <!-- 自定义内容 -->
         <!-- 下拉内容 -->
         <transition name="slide-fade">
             <div v-if="isOpen" class="select-dropdown">
                 <slot v-if="isOpen" name="normal"></slot>
                 <div v-if="options">
-                    <div  v-for="(item, index) in options" :key="index" class="dropdown-item"
+                    <div v-for="(item, index) in options" :key="index" class="dropdown-item "
                         :class="{ 'is-selected': isSelected(item) }" @click="selectItem(item)">
-                        <slot name="item" :item="item">
-                            {{ item.label }}
+                        <slot name="item" :item="item" >
+                            <div class="flex-between">
+                                <div class="left">
+                                    <p class="one">{{ item[displayKey] }}</p>
+                                </div>
+                                <div class="right">
+                                    <img v-if="selectedItem[displayKey] == item[displayKey]"
+                                        src="../assets/register/drop-selected.svg" alt="">
+                                </div>
+                            </div>
                         </slot>
                     </div>
                 </div>
 
-                <!-- <slot v-if="isOpen" name="options_null"></slot> -->
-                <div class="flex-between dropdown-item" v-if="options_null"  @click="selectNullItem">
+                <div class="flex-between dropdown-item" v-if="options_null" @click="selectNullItem">
                     <div class="left">
-                    <p class="one">暂无收款账号</p>
-                    <p>暂时没有收款账号，我想稍后配置</p>
+                        <p class="one">暂无收款账号</p>
+                        <p>暂时没有收款账号，我想稍后配置</p>
                     </div>
                     <div class="right">
-                    <img src="../assets/register/drop-selected.svg" alt="">
+                        <img src="../assets/register/drop-selected.svg" alt="">
                     </div>
                 </div>
             </div>
@@ -39,16 +44,14 @@
 </template>
 
 <script>
-// import { mixin as clickaway } from 'vue-clickaway';
 export default {
     props: {
-        width:{
+        width: {
             type: String,
             default: "200px",
         },
         options: {
             type: Array,
-            // required: true,
             default: () => [],
         },
         options_null: {
@@ -63,27 +66,26 @@ export default {
             type: [String, Number, Object],
             default: null,
         },
-
+        valueKey: {
+            type: String,
+            default: "value", 
+        },
+        displayKey: {
+            type: String,
+            default: "label",
+        },
     },
-    // mixins: [clickaway],
     data() {
         return {
             isOpen: false,
             selectedItem: null,
         };
     },
-    mounted(){
-        // document.addEventListener('click', this.handleClickOutside);
-    },
-    beforeUnmount() {
-        // 移除监听
-        // document.removeEventListener('click', this.handleClickOutside);
-    },
     watch: {
         value: {
             immediate: true,
             handler(newVal) {
-                this.selectedItem = this.options.find((item) => item.value === newVal);
+                this.selectedItem = this.options.find((item) => item[this.valueKey] === newVal);
             },
         },
     },
@@ -91,21 +93,23 @@ export default {
         closeDropdown() {
             this.isOpen = false;
         },
-        toggleDropdown() {
+        toggleDropdown(e) {
+            if(e) {
+                e.stopPropagation();
+            }
             this.isOpen = !this.isOpen;
         },
         selectItem(item) {
             this.selectedItem = item;
-            this.$emit("input", item.value); // 更新 v-model 的值
-            this.$emit("change", item); // 触发 change 事件
+            this.$emit("input", item[this.valueKey]); // Use the specified valueKey
+            this.$emit("change", item);
             this.isOpen = false;
         },
         isSelected(item) {
-            return this.selectedItem && this.selectedItem.value === item.value;
+            return this.selectedItem && this.selectedItem[this.valueKey] === item[this.valueKey];
         },
-        selectNullItem(){
-            // this.$emit("input", null); // 更新 v-model 的值
-            this.$emit("changeNormal", ''); // 触发 change 事件
+        selectNullItem() {
+            this.$emit("changeNormal", '');
             this.isOpen = false;
         }
     },
@@ -113,6 +117,7 @@ export default {
 </script>
 
 <style scoped>
+/* Your existing styles remain the same */
 .custom-select {
     height: 38px;
     position: relative;
@@ -176,8 +181,8 @@ export default {
 }
 
 .dropdown-item.is-selected {
-    background-color: transparent;
-    color: #fff;
+    background-color: #F6F7FA;
+    color: #006AFF;
 }
 
 /* 展开收起动画 */
diff --git a/src/views/agent/siteBaseSetting.vue b/src/views/agent/siteBaseSetting.vue
index 3b73bed..c656959 100644
--- a/src/views/agent/siteBaseSetting.vue
+++ b/src/views/agent/siteBaseSetting.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="main-content12">
         <!-- page header -->
-        <div class="pageheader"> 
+        <div class="pageheader">
             <span class="pagetitle">基本设置</span>
         </div>
 
@@ -12,18 +12,18 @@
                 <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="站点简称" :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 />
+                            <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>
@@ -42,10 +42,47 @@
                         </div>
                         <div class="flex-line"></div>
                         <div class="flex-right">
-                            <GuipFormItem column="column" label="域名设置" required="true">
+                            <!-- <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>
@@ -63,9 +100,9 @@
                                     <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">
+                                <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"
@@ -109,9 +146,9 @@
                                 </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">
+                                <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"
@@ -200,8 +237,20 @@ export default {
                 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: '',
@@ -215,6 +264,7 @@ export default {
             // },
             siteForm1: {
                 domain_set: '',
+                domainSuffix:'.chachongz.com',
                 domain_source: '平台免费域名',
             },
             siteForm2: {
@@ -244,9 +294,9 @@ export default {
     computed: {
         ...mapState(['pageTitle']) // 从Vuex映射showSidebar状态到组件的计算属性中
     },
-    created(){
-        store.commit('SET_CUSTOMIZE', true); 
-        store.commit('SET_SLIDER_MENU','siteSettingData'); 
+    created() {
+        store.commit('SET_CUSTOMIZE', true);
+        store.commit('SET_SLIDER_MENU', 'siteSettingData');
     },
     mounted() {
         store.commit('SET_PAGETITLE', '基本设置');
@@ -254,14 +304,22 @@ export default {
         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:{
+            }, {
+                headers: {
                     'Auth': this.token
                 }
             }).then(response => {
@@ -278,8 +336,8 @@ export default {
                 short_name: this.siteInfo.short_name,
                 company_name: this.siteInfo.company_name,
                 company_phone: this.siteInfo.phone_num,
-            },{
-                headers:{
+            }, {
+                headers: {
                     'Auth': this.token
                 }
             }).then(response => {
@@ -336,26 +394,70 @@ export default {
     }
 }
 </script>
-<style lang="scss">
-.pageheader { 
-    display: flex; 
-    justify-content: space-between; /* 关键属性 */ 
-    align-items: center; 
+<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;
+    margin-top: 8px;
 }
-.siteMessage{
+
+.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;
@@ -372,12 +474,14 @@ export default {
 }
 
 
-.site-setting-wrap{
+.site-setting-wrap {
     width: 100%;
 }
-#siteMessage2{
+
+#siteMessage2 {
     margin: 12px 0;
 }
+
 .domain-wrap {
     .domain-item {
         margin-bottom: 10px;
diff --git a/src/views/elementGroups.vue b/src/views/elementGroups.vue
index 48d738f..0af0ccf 100644
--- a/src/views/elementGroups.vue
+++ b/src/views/elementGroups.vue
@@ -11,8 +11,8 @@
                 </div>
                 <div class="ele-item">
                     <label for="">下拉框：</label>
-                    <GuipSelect width="600px" v-model="form.card" clearable label="卡片" :default-value="form.card" prop="card"
-                        :options="options" valueKey="id1" labelKey="id2" />
+                    <GuipSelect width="600px" v-model="form.card" clearable label="卡片" :default-value="form.card"
+                        prop="card" :options="options" valueKey="id1" labelKey="id2" />
                 </div>
                 <div>
                     <h3 for="">表格：(表头自定义、自定义渲染、固定列)</h3>
@@ -120,7 +120,7 @@
 
                 <div class="ele-item">
                     <label for="">文本域：固定行数</label>
-                    <GuipTextarea :styleObject="{ width: '450px' }" placeholder="固定行数" :rows="4" />
+                    <GuipTextarea :styleObject="{ width: '450px' }" placeholder="固定行数" :rows="2" />
                 </div>
                 <div class="ele-item">
                     <label for="">文本域：自适应高度</label>
@@ -128,9 +128,8 @@
                 </div>
                 <div class="ele-item">
                     <label for="">文本域：自定义label、描述</label>
-                    <GuipTextarea label="详细介绍" column="column" prop="doctor_detail"
-                                width="400px" height="90px" placeholder="请输入描述内容" desc="啊哈哈哈哈哈哈哈哈" 
-                                show-word-limit />
+                    <GuipTextarea label="详细介绍" column="column" prop="doctor_detail" width="400px" height="90px"
+                        placeholder="请输入描述内容" desc="啊哈哈哈哈哈哈哈哈" show-word-limit />
                 </div>
 
                 <div class="ele-item">
@@ -283,8 +282,8 @@
                         <!-- <b slot="formLeft">自定义左侧</b> -->
                         <span class="desc" slot="formRight"><a href="https://www.baidu.com/">跳转一下</a> 自定义右侧</span>
                         <!-- 自定义下方内容 -->
-                        <GuipInput slot="formDom" ref="GuipInput" column="column" v-model="form.age"
-                            prop="age" placeholder="请输入" />
+                        <GuipInput slot="formDom" ref="GuipInput" column="column" v-model="form.age" prop="age"
+                            placeholder="请输入" />
                     </GuipFormItem>
                 </div>
 
@@ -293,6 +292,105 @@
                     <GuipSwitch :modelValue="switchValue" activeText="开启" inactiveText="关闭" @change="onSwitchChange">
                     </GuipSwitch>
                 </div>
+                <div class="flex ele-item">
+                    <label for="">input、drop组合使用(默认使用)</label>
+                    <GuipFormItem column="column" class="combo-formItem w510" label="域名设置" required="true">
+                        <div slot="formDom" class="self-drop-wrap flex">
+                            <GuipInput style="width: 60%;" v-model="form.domain_set" placeholder="仅支持数字、字母">
+                            </GuipInput>
+                            <!-- 只用作选中内容展示 -->
+                            <div @click="toggleDrop" class="point flex appendDrop" style="width: 40%;">
+                                {{ currentDomainItem.name }}</div>
+                        </div>
+                        <!--触发 真实下拉操作 -->
+                        <!-- valueKey="id" displayKey="name" 不添加时，默认取值 value、label-->
+                        <CustomDropdown slot="formDom" ref="dropDomain" width="100%" v-model="form.domainSuffix1"
+                            :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>
+                        </CustomDropdown>
+                    </GuipFormItem>
+                </div>
+                <div class="flex ele-item">
+                    <label for="">input、drop组合使用(自定义下拉选择项)</label>
+                    <GuipFormItem column="column" class="combo-formItem w510" label="域名设置" required="true">
+                        <div slot="formDom" class="self-drop-wrap flex">
+                            <GuipInput style="width: 60%;" v-model="form.domain_set" placeholder="仅支持数字、字母">
+                            </GuipInput>
+                            <!-- 只用作选中内容展示 -->
+                            <div @click="toggleDrop1" class="point flex appendDrop" style="width: 40%;">
+                                {{ currentDomainItem.name }}
+                            </div>
+                        </div>
+                        <!--触发 真实下拉操作 -->
+                        <!-- valueKey="id" displayKey="name" 不添加时，默认取值 value、label-->
+                        <CustomDropdown slot="formDom" ref="dropDomain1" width="100%" v-model="form.domainSuffix"
+                            :options="domainOptions" @change="changeSelectIp" valueKey="id" 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>
+                            <!-- 自定义下拉选项 选中条件-->
+                            <!-- 不添加这个 默认普通选中格式  单独取值 display-key
+                                        自定义渲染项 渲染的内容自定义 ，display-key 属性不再生效-->
+                            <template #item="{ item }">
+                                <div class="flex-between">
+                                    <div class="left">
+                                        <p class="one">{{ item.label }}</p>
+                                    </div>
+                                    <div class="right">
+                                        <img v-if="form.domainSuffix == item.id"
+                                            src="@/assets/register/drop-selected.svg" alt="">
+                                    </div>
+                                </div>
+                            </template>
+                        </CustomDropdown>
+                    </GuipFormItem>
+                </div>
+                <div class="flex ele-item">
+                    <label for="">单独实现自定义内容下拉选择</label>
+                    <CustomDropdown width="500px" v-model="form.domainSuffix" :options="domainOptions"
+                        @change="changeSelectIp" valueKey="id" 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">
+                                    <p>测试一下自定义内容{{ item. id}} + {{ item.label }}</p>
+                                    <p>易烊千玺/田栩宁</p>
+                                </div>
+                            </template>
+                    </CustomDropdown>
+                </div>
+
                 <el-button type="primary" @click="submitForm">Submit</el-button>
 
             </el-form>
@@ -327,6 +425,7 @@
                 <GuipButton type="primary" @click="openDialog">打开弹框</GuipButton>
                 <GuipButton type="primary" @click="openLoading" size="page">展示加载动画 2s</GuipButton>
             </div>
+
             <div class="flex ele-item">
                 <label for="">提示信息</label>
                 <GuipToolTip content="这是一个提示">
@@ -364,7 +463,7 @@
 <script>
 
 import { rules } from "../assets/vabForm";
-// @ is an alias to /src
+import CustomDropdown from '@/components/CustomDropdown.vue';
 import GuipSwitch from '@/components/GuipSwitch.vue';
 import GuipDialog from '@/components/GuipDialog.vue';
 import GuipRadio from '@/components/GuipRadio.vue';
@@ -394,10 +493,31 @@ export default {
         GuipToolTip,
         HoverButton,
         SvgIcon,
-        GuipFormItem
+        GuipFormItem,
+        CustomDropdown
     },
     data() {
         return {
+            domainOptions: [
+                {
+                    value: '.chachongz.com',
+                    label: '111.chachongz.com',
+                    id: '11',
+                    name: '测试一下自定义名称111'
+                },
+                {
+                    value: '.turnitin.org.cn',
+                    label: '222.turnitin.org.cn',
+                    id: '22',
+                    name: '测试一下自定义名称222'
+                },
+                {
+                    value: '.jishu.chachongz.com',
+                    label: '333.jishu.chachongz.com',
+                    id: '33',
+                    name: '测试一下自定义名称333'
+                },
+            ],
             tableData3: [{
                 id: '12987122',
                 name: '王小虎',
@@ -443,7 +563,10 @@ export default {
             form: {
                 username: '',
                 language: '',
-                card:'1',
+                domain_set: '',
+                domainSuffix: '11',
+                domainSuffix1: '.chachongz.com',
+                card: '1',
                 input1: '',
                 input2: '',
                 input3: '',
@@ -706,10 +829,30 @@ export default {
         // this.timer = null;
 
     },
+    computed: {
+        currentDomainItem() {
+            return this.findItemById('id', 'domainSuffix');
+        }
+    },
     methods: {
+        findItemById(valueKey, key) {
+            // 自动查找选中项 
+            return this.domainOptions.find(item => item[valueKey] === this.form[key]);
+        },
+        toggleDrop1(e) {
+            this.$refs.dropDomain1.toggleDropdown(e)
+        },
+        toggleDrop(e) {
+            this.$refs.dropDomain.toggleDropdown(e)
+        },
         changeInputtest(e) {
             console.log(e, '---000changeInputtest');
         },
+        changeSelectIp(item) {
+            // 选中项
+            // this.selectedItem1 = { ...item };
+            console.log(item, this.form.domainSuffix,this.form.domainSuffix1, '选中的项-值-');
+        },
         arraySpanMethod({ row, column, rowIndex, columnIndex }) {
             console.log(row, column);
             if (rowIndex % 2 === 0) {
@@ -974,7 +1117,51 @@ export default {
         }
     }
 }
+// 组合框样式 start
+// input drop组合使用
+.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;
+        }
+    }
+}
 
+// 组合框样式 end
 
 .ScaleBox {
     width: 1000px;