注册第一步优化

src/views/agent/siteBaseSetting.vue

@@ -33,7 +33,7 @@
             <div class="siteMessage flex-common" id="siteMessage2">
                 <h3>域名设置</h3>
                 <p class="flex siteMessage5_desc"> <img src="@/assets/tip_blue.svg" alt="">当前站点域名：{{ siteInfo.domain }}</p>
-                <el-form>
+                <el-form ref="domainFormRef" :rules="domainRules" :model="domainData">
                     <div class="flex-wrap">
                         <div class="flex-left">
                             <p class="flex-left-desc">域名来源</p>
@@ -43,15 +43,15 @@
                         </div>
                         <div class="flex-line"></div>
                         <div class="flex-right">
-                            <domainBind v-if="domainType==2" label="修改域名" @handleEvent="handleEvent2" />
+                            <domainBind v-if="domainType==2" ref="domainBind" :defaultPrefix="domainPrefix" :defaultDomain="domainName" label="修改域名" @handleEvent="handleEvent2" />
 
                             <div v-if="domainType==1">
                                 <p class="flex-left-desc">修改域名</p>
-                                <GuipInput class="mt12" v-model="domainPrefix">
+                                <GuipInput class="mt12 w540" v-model="domainPrefix" prop="domainPrefix" :rules="domainRules.domainPrefix" @change="domainChange">
                                     <!-- <span slot="prependshow">http:</span> -->
                                     <!-- <img slot="prefix" src="../assets/radio_checked.svg" alt=""> -->
                                     <!-- 输入框后面小图标 -事件自定义 -->
-                                    <i slot="suffix" class="el-icon-close" @click="handleClear"></i>
+                                    <i slot="suffix" v-if="domainPrefix" class="el-icon-close" @click="handleClear"></i>
                                     <!-- <img slot="suffix" src="../assets/radio_nochecked.svg" alt="" @click="handleClear"> -->
 
                                     <!-- 这个 appendshow 宽度 居中方式 自定义添加类名修改-->
@@ -384,7 +384,16 @@ export default {
             domainType: 0, 
             domainTypes: [],
             domainPrefix: '',
+            domainName: '',
             siteDomain: '',
+            domainData: {
+                domainPrefix: ''
+            },
+            domainRules: {
+                domainPrefix: [
+                    { required: true, message: '请设置站点域名', trigger: [] }
+                ],
+            },
         }
     },
     computed: {
@@ -505,6 +514,8 @@ export default {
                     this.domainType = String(that.siteInfo.domain_type);
                     this.domainTypes = that.siteInfo.domain_types;
                     this.siteDomain = response.data.domain;
+                    this.domainPrefix = response.data.domain_prefix
+                    this.domainName = response.data.domain_name
 
                     if (
                         response.data &&
@@ -514,7 +525,6 @@ export default {
                         this.bindWxpayId = response.data.site_pays[this.payTypeWeixin].payid;
                         this.selectWxpay = response.data.site_pays[this.payTypeWeixin];
                     }
-                    console.log(this.selectWxpay, 'selectWxpay');
 
                     if (
                         response.data &&
@@ -630,6 +640,9 @@ export default {
             console.log(this.domainType, 'this.domainType');
             console.log(typeof this.domainType, 'domainTypeChange'); 
         },
+        domainChange(){
+            this.domainData.domainPrefix = this.domainPrefix
+        },
         onSwitchChange(data) {
             console.log(data, '---');
         },
@@ -675,15 +688,14 @@ export default {
             })
         },
         handleEvent(data) {
-            console.log(data, 'handleEvent');
             this.isShowAddPay = data
         },
         handleEvent2(data) {
-            console.log(data, 'handleEvent2');
             this.siteDomain = data.prefix + data.domain;
+            this.domainPrefix = data.prefix
+            this.domainName = data.domain
         },
-        handleClear(value) {
-            console.log(value, 'value===qinghcu');
+        handleClear() {
             this.domainPrefix = '';
         },
         updateSiteDomain() {
@@ -694,6 +706,22 @@ export default {
                 domain = this.siteDomain;
             }
 
+            const that = this
+            let formValid = false;
+            that.$refs.domainFormRef.validate((valid) => {
+                formValid = valid
+            });
+
+            let domainValid = false;
+            if(this.domainType === '2'){
+                that.$refs.domainBind.$refs.bindFormRef.validate(valid => {
+                    domainValid = valid
+                })
+            }else{
+                domainValid = true
+            }
+
+            if(formValid && domainValid){
                 this.$http('POST', '/agentnew/ajax_update_site_domain', {
                     uid: this.$route.query.uid,
                     domain: domain,
@@ -712,9 +740,14 @@ export default {
             }
 
         }
+
+    }
 }
 </script>
 <style lang="scss" scoped>
+.w540{
+  width: 540px;
+}
 .pageheader {
     display: flex;
     justify-content: space-between;
@@ -840,4 +873,11 @@ export default {
         justify-content: flex-start;
     }
 }
+
+::v-deep{
+  .el-input-group__append{
+    width: 175px;
+    letter-spacing: 0.08em;
+  }
+}
 </style>