修改提示信息

src/components/site/addSiteStep/step1.vue

@@ -6,36 +6,38 @@
                     <h3>站点信息</h3>
                     <div class="flex-wrap">
                         <div class="flex-left">
-                            <GuipFormItem column="column" class="mb24">
+                            <GuipInput label="站点简称" class="column" ref="GuipInput" prop="short_name"
-                                <div slot="formLeft">站点简称</div>
+                                desc="一个站点对应一个销售渠道，定义好名字好区分" :maxlength="10" :showWordLimit="true"
-                                <div slot="formRight" class="desc">一个站点对应一个销售渠道，定义好名字好区分</div>
-                                <GuipInput slot="formDom" ref="GuipInput" prop="short_name" :maxlength="10" :showWordLimit="true"
                                 v-model="formData.short_name" placeholder="仅自己区分站点销售渠道，客户看不到" />
-                            </GuipFormItem>
+                            <GuipRadio label="销售渠道" class="column" :desc="formData.sale_channel_label"
-                            <GuipFormItem column="column" class="channel-radio">
+                                v-model="formData.sale_channel" :options="formData.sale_channels" prop="sale_channel"
-                                <div slot="formLeft">销售渠道</div>
+                                :rules="formRules.sale_channel" @change="radioChange" />
-                                <span slot="formRight" class="desc">{{formData.sale_channel_label}}</span>
-                                <GuipRadio slot="formDom" v-model="formData.sale_channel" :options="formData.sale_channels"
-                                           prop="sale_channel" :rules="formRules.sale_channel" @change="radioChange" />
-                            </GuipFormItem>
                         </div>
                         <div class="flex-line"></div>
                         <div class="flex-right">
                             <GuipFormItem column="column" class="mb24">
                                 <div slot="formLeft">域名来源</div>
-                                <GuipRadio slot="formDom" v-model="formData.domain_type" :options="formData.domain_types" prop="domain"/>
+                                <GuipRadio slot="formDom" v-model="formData.domain_type"
+                                    :options="formData.domain_types" prop="domain" />
                             </GuipFormItem>
-                            <GuipFormItem column="column" v-if="formData.domain_type==='1'">
+                            <!-- <GuipFormItem column="column" v-if="formData.domain_type === '1'">
                                 <div slot="formLeft">域名设置</div>
-                                <GuipInput slot="formDom" ref="GuipInput" prop="domain_prefix" placeholder="仅支持数字、字母"
+                                <GuipInput slot="formDom" v-if="formData.domain_type === '1'" label="域名设置" ref="GuipInput" prop="domain_prefix" placeholder="仅支持数字、字母"
                                     v-model="formData.domain_prefix" :rules="formRules.domain_prefix" class="w540">
-                                    <i slot="suffix" v-if="formData.domain_prefix" class="el-icon-close" @click="handleClear"></i>
+                                    <i slot="suffix" v-if="formData.domain_prefix" class="el-icon-close"
+                                        @click="handleClear"></i>
                                     <span slot="appendshow">{{ formData.plat_domain }}</span>
                                 </GuipInput>
-                            </GuipFormItem>
+                            </GuipFormItem> -->
-                            <GuipFormItem column="column" v-if="formData.domain_type==='2'">
+                            <GuipInput v-if="formData.domain_type === '1'" label="域名设置" ref="GuipInput" prop="domain_prefix" placeholder="仅支持数字、字母"
-                                <div slot="formLeft">域名设置</div>
+                                v-model="formData.domain_prefix" :rules="formRules.domain_prefix" class="column w540">
-                                <domainBind ref="domainBind" slot="formDom" :defaultPrefix="formData.domain_prefix" :defaultDomain="formData.domain_name" @handleEvent="handleChangeDomain" />
+                                <i slot="suffix" v-if="formData.domain_prefix" class="el-icon-close"
+                                    @click="handleClear"></i>
+                                <span slot="appendshow">{{ formData.plat_domain }}</span>
+                            </GuipInput>
+                            <GuipFormItem column="column" :required="true" label="域名设置" v-if="formData.domain_type === '2'">
+                                <domainBind ref="domainBind" slot="formDom" :defaultPrefix="formData.domain_prefix"
+                                    :defaultDomain="formData.domain_name" @handleEvent="handleChangeDomain" />
                             </GuipFormItem>
                         </div>
                     </div>
@@ -46,11 +48,13 @@
                         <div class="flex-left">
                             <p class="flex-left-desc">销售方向</p>
                             <div class="flex mt12">
-                                <GuipRadio v-model="formData.site_type" :options="formData.site_types" :rules="formRules.sale_channel" prop="site_type" @change="radioTypeChange" />
+                                <GuipRadio v-model="formData.site_type" :options="formData.site_types"
+                                    :rules="formRules.sale_channel" prop="site_type" @change="radioTypeChange" />
                             </div>
                             <div class="tem-home">
                                 <div class="tem-home-top">
-                                    <img :src="formData.picture?formData.picture:require('@/assets/register/tem-img-normal.png')" alt="">
+                                    <img :src="formData.picture ? formData.picture : require('@/assets/register/tem-img-normal.png')"
+                                        alt="">
                                 </div>
                                 <div class="tem-home-bottom">
                                     <input type="hidden" v-model="formData.site_tpl">
@@ -89,8 +93,10 @@
                 </div>
             </div>
             <div class="register-btns">
-                <GuipButton v-if="skip" type="ignore" :btnstyle="{ width: '144px', height: '46px' }" @click="jumpStep">跳过</GuipButton>
+                <GuipButton v-if="skip" type="ignore" :btnstyle="{ width: '144px', height: '46px' }" @click="jumpStep">
-                <GuipButton type="primary" :btnstyle="{ width: '144px', height: '46px' }" @click="saveConfirm">下一步</GuipButton>
+                    跳过</GuipButton>
+                <GuipButton ref="nextStepRef1" type="primary" :btnstyle="{ width: '144px', height: '46px' }"
+                    @click="saveConfirm">下一步</GuipButton>
             </div>
         </el-form>
     </div>
@@ -291,18 +297,53 @@ export default {
         jumpStep() {
             this.$router.push('/')
         },
+        validateFunc(fields){
+            const that = this
+            let flag = false
+            // 遍历每个表单项
+            if(Array.isArray(fields)){
+                fields.forEach(field => {
+                    if (flag) return
+                    // 验证单个字段
+                    field.validate('', (error) => {
+                        if (error) {
+                            // 获取字段的label
+                            const label = field.label;
+                            const prop = field.prop;
+    
+                            flag = true;
+                            console.log('label',prop, label);
+                            if (!label) return
+                            that.$positionMessage({
+                                type: 'error',
+                                message: label + '不得为空',
+                                target: that.$refs.nextStepRef1, // 可以是DOM元素或选择器
+                                position: 'top'
+                            })
+                        }
+                    });
+                });
+            }
+        },
         saveConfirm() {
             const that = this
             let formValid = false;
+            let fields = that.$refs.formRef.fields;
+            that.validateFunc(fields)
             that.$refs.formRef.validate((valid) => {
                 formValid = valid
             });
-
             let domainValid = false;
             if (that.formData.domain_type === '2') {
                 that.$refs.domainBind.$refs.bindFormRef.validate(valid => {
                     domainValid = valid
                 })
+                that.$positionMessage({
+                    type: 'error',
+                    message:  '域名设置不得为空',
+                    target: that.$refs.nextStepRef1, // 可以是DOM元素或选择器
+                    position: 'top'
+                })
             } else {
                 domainValid = true
             }
@@ -342,9 +383,11 @@ export default {
 .w540 {
     width: 540px;
 }
+
 .mt20 {
     margin-top: 20px;
 }
+
 .step1-wrap {
     padding-bottom: 12px;
 }
@@ -361,6 +404,7 @@ export default {
         width: 100%;
         height: 255px;
         overflow: hidden;
+
         img {
             width: 100%;
         }
@@ -396,6 +440,7 @@ export default {
     .channel-radio .el-radio-group {
         text-align: left;
     }
+
     .channel-radio .el-radio {
         min-width: 120px;
         line-height: 16px;

src/components/site/serviceSetting/domainSet.vue

@@ -6,16 +6,16 @@
 
         <div class="flex-common">
             <div class="domain-area">
+
                 <el-form class="el-row demo-ruleForm" ref="formRef">
+                    <div class="flex domain-info">
+                        <span>当前服务域名：</span><span>{{info.domain}}</span>
+                    </div>
                     <div class="domain-from">域名来源</div>
                     <div class="domain-radio">
                         <GuipRadio v-model="domain_type" :options="domain_types"/>
                     </div>
-                    <div class="flex domain-info">
+                    <domainBind ref="domainBind" v-if="domain_type === '2'" label="独立域名"
-                        <span>当前服务域名：</span><span>{{info.domain}}</span>
-                    </div>
-
-                    <domainBind ref="domainBind" v-if="domain_type === '2'" label="域名设置"
                                 :defaultPrefix="newDomain.prefix" :defaultDomain="newDomain.domain" @handleEvent="handleEvent"/>
                 </el-form>
             </div>
@@ -121,7 +121,7 @@ export default {
     font-size: 14px;
     letter-spacing: 0.08em;
     color: #1E2226;
-    margin-bottom: 12px;
+    margin-bottom: 16px;
   }
 
   .domain-radio{

src/style/theme/common.scss

@@ -78,7 +78,7 @@ body {
     cursor: pointer;
     transition: all .3s;
 
-    &:hover {
+    & > *:hover {
         transition: all .3s;
         color: #006AFF !important;
     }

src/views/agent/siteServiceList.vue

@@ -21,7 +21,7 @@
             <!-- page content -->
             <el-form>
                 <GuipTable :tableData="serviceList" ref="multipleTable" :loading="tableLoading"
-                @selection-change="handleSelectionChange" @select="handleSelect">
+                @selection-change="handleSelectionChange" @select="handleSelect" :row-class-name="setRowStyle">
                     <el-table-column type="selection" width="100">
                         <template slot="header">
                             <span class="selection-header-text">选择</span>
@@ -234,6 +234,15 @@ export default {
         },
     },
     methods: {
+        setRowStyle({ row }) {
+            // specialBack 类名
+            console.log(row);
+            // 根据row的某个属性判断 具体条件后续修改
+            // if (row.price === '2.00') {
+            //     return 'specialBack';
+            // }
+            return '';
+        },
         jumpAdd(prodid){
             this.$router.push(this.serviceAddUrl + '?uid=' + this.uid + '&prodid=' + prodid)
         },
@@ -515,6 +524,11 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
+::v-deep .specialBack{
+    background-color: #FAFAFA !important;
+    color: #626573;
+    opacity: .6;
+}
 ::v-deep .custom-popover {
   position: fixed !important;
   // max-height: 290px;