From 1b23cb359fc4da2e1cef2269e3ba13f1b2a46108 Mon Sep 17 00:00:00 2001
From: pengda <1111@qq.com>
Date: Wed, 9 Jul 2025 14:40:38 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9C=8D=E5=8A=A1=E8=AE=BE=E7=BD=AE=20?=
 =?UTF-8?q?=E7=8B=AC=E7=AB=8B=E5=9F=9F=E5=90=8D=E8=AE=BE=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/domainBind.vue                    |  44 ++++---
 src/components/site/serviceSetting/domainSet.vue | 148 +++++------------------
 src/views/elementGroups.vue                      |   2 +-
 3 files changed, 54 insertions(+), 140 deletions(-)

diff --git a/src/components/domainBind.vue b/src/components/domainBind.vue
index f6770cb..9c94332 100644
--- a/src/components/domainBind.vue
+++ b/src/components/domainBind.vue
@@ -1,15 +1,15 @@
 <template>
     <div>
-        <el-form class="el-row demo-ruleForm" ref="formRef" v-if="domainOptions.length>0">
+        <el-form class="el-row demo-ruleForm" ref="formRef" v-if="domainOptions.length>0" :rules="rules" :model="data">
             <GuipFormItem column="column" class="combo-formItem w540" :label="label" :class="label ? '' : 'combo-formItem-nolabel'">
                 <div slot="formDom" class="self-drop-wrap flex w540">
-                    <GuipInput v-model="prefix" style="width: 60%;" placeholder="仅支持数字、字母" @blur="inputEnd"></GuipInput>
+                    <GuipInput prop="prefix"  v-model="data.prefix" style="width: 60%;" placeholder="仅支持数字、字母" @blur="inputEnd"></GuipInput>
                     <!-- 只用作选中内容展示 -->
-                    <div @click="toggleDrop" class="point flex appendDrop" style="width: 40%;">{{domain}}</div>
+                    <div @click="toggleDrop" class="point flex appendDrop" style="width: 40%;">{{data.domain}}</div>
                 </div>
                 <!--触发 真实下拉操作 -->
                 <!-- valueKey="id" displayKey="name" 不添加时，默认取值 value、label-->
-                <CustomDropdown slot="formDom" ref="dropDomain" width="100%" v-model="domain"
+                <CustomDropdown slot="formDom" ref="dropDomain" width="100%" v-model="data.domain"
                                 :options="domainOptions" @change="changeSelect" placeholder="请选择">
                     <template #normal>
                         <div class="flex flex-between noraml-jump">
@@ -30,7 +30,7 @@
         <GuipDialog :dialogVisible="dialogVisible" :show-close-button="false" :showFooterButton="false"
                     type="center" title="温馨提示">
             <div class="domain-wrap">
-                <el-form class="el-row demo-ruleForm" ref="formRef" :rules="rules" :model="formData">
+                <el-form class="el-row demo-ruleForm" ref="formRef" :rules="formRules" :model="formData">
                     <p class="p-info">设置自己的域名，需要做 2 步站外操作。如果暂时未准备好，或打算稍后设置，可以先选用平台免费域名，平台随时支持域名修改。 </p>
                     <p class="p-title"><span>1.</span>域名必须在阿里云完成 ICP 备案</p>
                     <p class="p-desc mb18">备案网址：https://beian.aliyun.com</p>
@@ -98,11 +98,20 @@ export default {
         prefix: '',
         domain: '',
         dialogVisible: false,
+        data: {
+            prefix: '',
+            domain: '',
+        },
+        rules:{
+            prefix: [
+                { required: true, message: '请输入域名前缀', trigger: 'blur' }
+            ],
+        },
         formData: {
             domain: '',
             beian: '',
         },
-        rules: {
+        formRules: {
             domain: [
                 { required: true, message: '请输入域名', trigger: 'blur' },
                 {
@@ -142,10 +151,10 @@ export default {
               }
           }).then(response => {
               if(response.status){
-                  this.domain = response.data[0]
+                  this.data.domain = '.'+response.data[0]
                   that.domainOptions = response.data.map(item => ({
-                      label: item,
-                      value: item
+                      label: '.'+item,
+                      value: '.'+item
                   }));
                   return true
               }
@@ -158,16 +167,10 @@ export default {
           this.$refs.dropDomain.toggleDropdown(e)
       },
       inputEnd(){
-          this.$emit('handleEvent', {
-              prefix: this.prefix,
-              domain: this.domain,
-          })
+          this.$emit('handleEvent', this.data)
       },
       changeSelect() {
-          this.$emit('handleEvent', {
-              prefix: this.prefix,
-              domain: this.domain,
-          })
+          this.$emit('handleEvent', this.data)
       },
       bindNewDomain(){
           this.dialogVisible = true
@@ -232,10 +235,10 @@ export default {
               }
           }).then(response => {
               if(response.status){
-                  that.domain = that.formData.domain
+                  that.data.domain = that.formData.domain
                   that.domainOptions.unshift({
-                      label: that.formData.domain,
-                      value: that.formData.domain
+                      label: '.'+that.formData.domain,
+                      value: '.'+that.formData.domain
                   })
                   that.show_step = false
                   that.dialogVisible = false
@@ -281,6 +284,7 @@ export default {
 }
 
 .combo-formItem {
+  letter-spacing: 0.08em;
   ::v-deep {
     .form-item-bottom {
       position: relative;
diff --git a/src/components/site/serviceSetting/domainSet.vue b/src/components/site/serviceSetting/domainSet.vue
index f35862c..bbe23e1 100644
--- a/src/components/site/serviceSetting/domainSet.vue
+++ b/src/components/site/serviceSetting/domainSet.vue
@@ -9,41 +9,18 @@
                 <el-form class="el-row demo-ruleForm" ref="formRef">
                     <div class="domain-from">域名来源</div>
                     <div class="domain-radio">
-                        <GuipRadio v-model="defaultFrom" :options="domainFromOptions" @change="radioChange"/>
+                        <GuipRadio v-model="domainFrom" :options="domainFromOptions"/>
                     </div>
                     <div class="flex domain-info">
                         <span>当前服务域名：</span><span>{{info.domain}}</span>
                     </div>
 
-                    <GuipFormItem column="column" class="combo-formItem w540" v-if="domainOptions">
-                        <div slot="formDom" class="self-drop-wrap flex w540">
-                            <GuipInput style="width: 60%;" placeholder="仅支持数字、字母">
-                            </GuipInput>
-                            <!-- 只用作选中内容展示 -->
-                            <div @click="toggleDrop" class="point flex appendDrop" style="width: 40%;">{{form.ext}}</div>
-                        </div>
-                        <!--触发 真实下拉操作 -->
-                        <!-- valueKey="id" displayKey="name" 不添加时，默认取值 value、label-->
-                        <CustomDropdown slot="formDom" ref="dropDomain" width="100%" v-model="form.ext"
-                                        :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>
+                    <domainBind v-show="domainFrom === '1'" label="域名设置" @handleEvent="handleEvent"/>
                 </el-form>
             </div>
         </div>
 
+
         <div class="save-button">
             <GuipButton type="primary" :btnstyle="saveBtnStyleObj" @click="saveConfirm">保存</GuipButton>
         </div>
@@ -53,9 +30,7 @@
 
 import GuipRadio from "@/components/GuipRadio.vue";
 import GuipButton from "@/components/GuipButton.vue";
-import CustomDropdown from "@/components/CustomDropdown.vue";
-import GuipFormItem from "@/components/GuipFormItem.vue";
-import GuipInput from "@/components/GuipInput.vue";
+import domainBind from "@/components/domainBind.vue";
 
 export default {
   name: 'domainSet',
@@ -66,10 +41,9 @@ export default {
     }
   },
   components: {
-      GuipInput, GuipFormItem,
-       CustomDropdown, GuipButton,
-      GuipRadio
-
+     domainBind,
+     GuipButton,
+     GuipRadio
   },
   data(){
     return {
@@ -82,58 +56,52 @@ export default {
             borderRadius: '4px',
             background: '#006AFF',
         },
-        defaultFrom: '0',
+        domainFrom: '0',
         domainFromOptions: {
             '0': '平台免费域名',
-            '1': '更换独立域名'
+            '1': '我自己有域名'
         },
-        domainOptions: [],
-        form:{
-            'ext' : 'aa'
-        }
+        newDomain: {}
     }
   },
   mounted() {
-    this.info = JSON.parse(JSON.stringify(this.serviceInfo))
-    this.domainOptions = this.info.domain_list.map(item => ({
-        label: item.ext,
-        value: item.ext
-    }));
-    console.log(this.domainOptions)
+      this.info = JSON.parse(JSON.stringify(this.serviceInfo))
+      if(this.info.ser_domain) this.domainFrom = '1'
   },
   methods:{
-      radioChange(){
-
-      },
-      toggleDrop(e) {
-          this.$refs.dropDomain.toggleDropdown(e)
-      },
-      changeSelectIp(item) {
-          // 选中项
-          // this.selectedItem1 = { ...item };
-          console.log(item, this.form.domainSuffix, this.form.domainSuffix1, '选中的项-值-');
+      handleEvent(data){
+          this.newDomain = data
       },
       saveConfirm() {
           let obj = {}
           obj.uid = this.info.uid
           obj.type = this.info.type
-          obj.return_home_url = this.info.return_homepage_url
-          obj.go_check_url = this.info.go_check_url
-          obj.is_sync_home = this.syncHome ? 1 : 0
-          obj.is_sync_check = this.syncCheck ? 1 : 0
+          if(this.domainFrom === '1'){
+              if(!this.newDomain.prefix || !this.newDomain.domain) return false
+              obj.domain = this.newDomain.prefix + this.newDomain.domain
+
+          }else{
+              obj.domain = ''
+          }
 
           const that = this
-          this.$http('POST', '/agentnew/ajax_update_service_link', obj,{
+          this.$http('POST', '/agentnew/ajax_update_service_domain', obj,{
               headers:{
                   'Auth': this.token
               }
           }).then(response => {
               if(response.status){
                   that.$message.success('保存成功');
+
+                  //替换域名
+                  const protocol = new URL(that.info.domain).protocol;
+                  that.info.domain = protocol + "//" +obj.domain;
+                  that.info.ser_domain = protocol + "//" +obj.domain;
+
                   that.$emit('saveEvent', that.info)
                   return true;
               }
-              that.$message.success(response.info);
+              that.$message.error(response.info);
           }).catch(error => {
               console.error(error, 'error')
           })
@@ -176,64 +144,6 @@ export default {
   }
 }
 
-.w540 {
-  width: 540px!important;
-}
-
-.combo-formItem {
-  .form-item-top{
-    display: none;
-    height: 0;
-    margin: 0;
-  }
-
-  ::v-deep {
-    .form-item-top{
-      display: none;
-      height: 0;
-      margin: 0;
-    }
-
-    .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;
-    }
-  }
-}
 </style>
\ No newline at end of file
diff --git a/src/views/elementGroups.vue b/src/views/elementGroups.vue
index ace998c..9c7f618 100644
--- a/src/views/elementGroups.vue
+++ b/src/views/elementGroups.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="main-content12">
         <div class="elementWrap">
-            <domainBind label="域名设置" :options="domainOptions" @handleEvent="handleEvent" @handleOptions="handleOptions"/>
+            <domainBind label="域名设置" @handleEvent="handleEvent" />
             <PromptText text='这是一个提示框' :type="1" />
             <PromptText text='这是一个提示框' :type="2" />
             <PromptText text='这是一个提示框' :type="3" />