服务设置 独立域名

src/components/site/serviceSetting/domainSet.vue

@@ -3,10 +3,60 @@
         <div class="pageheader">
             <span class="pagetitle">{{info.type_desc}}-独立域名</span>
         </div>
+
+        <div class="flex-common">
+            <div class="domain-area">
+                <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"/>
+                    </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>
+                </el-form>
+            </div>
+        </div>
+
+        <div class="save-button">
+            <GuipButton type="primary" :btnstyle="saveBtnStyleObj" @click="saveConfirm">保存</GuipButton>
+        </div>
     </div>
 </template>
 <script>
 
+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";
+
 export default {
   name: 'domainSet',
   props: {
@@ -16,6 +66,9 @@ export default {
     }
   },
   components: {
+      GuipInput, GuipFormItem,
+       CustomDropdown, GuipButton,
+      GuipRadio
 
   },
   data(){
@@ -29,16 +82,158 @@ export default {
             borderRadius: '4px',
             background: '#006AFF',
         },
+        defaultFrom: '0',
+        domainFromOptions: {
+            '0': '平台免费域名',
+            '1': '更换独立域名'
+        },
+        domainOptions: [],
+        form:{
+            'ext' : 'aa'
+        }
     }
   },
   mounted() {
-     this.info = this.serviceInfo
+    this.info = this.serviceInfo
+    this.domainOptions = this.info.domain_list.map(item => ({
+        label: item.ext,
+        value: item.ext
+    }));
+    console.log(this.domainOptions)
   },
   methods:{
+      radioChange(){
+
+      },
+      toggleDrop(e) {
+          this.$refs.dropDomain.toggleDropdown(e)
+      },
+      changeSelectIp(item) {
+          // 选中项
+          // this.selectedItem1 = { ...item };
+          console.log(item, this.form.domainSuffix, this.form.domainSuffix1, '选中的项-值-');
+      },
+      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
 
+          const that = this
+          this.$http('POST', '/agentnew/ajax_update_service_link', obj,{
+              headers:{
+                  'Auth': this.token
+              }
+          }).then(response => {
+              if(response.status){
+                  that.$message.success('保存成功');
+                  that.$emit('saveEvent', that.info)
+                  return true;
+              }
+              that.$message.success(response.info);
+          }).catch(error => {
+              console.error(error, 'error')
+          })
+      },
   }
 }
 </script>
 <style lang="scss">
+.domain-area{
+  text-align: left;
+  .domain-from{
+    font-size: 14px;
+    letter-spacing: 0.08em;
+    color: #1E2226;
+    margin-bottom: 12px;
+  }
+
+  .domain-radio{
+    .el-form-item{
+      margin-bottom: 12px;
+    }
+  }
+
+  .domain-info{
+    width: 540px;
+    font-size: 12px;
+    line-height: 13px;
+    letter-spacing: 0.08em;
+    background: #F2F7FF;
+    padding: 10px;
+    margin-right: 12px;
+    margin-bottom: 12px;
+    box-sizing: border-box;
+    span{
+      color: #1E2226;
+    }
+    span:first-child{
+      color: #626573;
+    }
+  }
+}
+
+.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>

src/views/agent/siteServiceEdit.vue

@@ -261,6 +261,7 @@ export default {
   align-items: center;
   justify-content: center;
   padding: 16px 0;
+  z-index: 9;
 }
 
 ::v-deep .payment-item{