增加表单类组件提示时撑开高度

2 weeks ago · 05700b21d4
6 changed files with 97 additions and 24 deletions
--- a/src/assets/site/sitesem.svg
+++ b/src/assets/site/sitesem.svg
--- a/src/components/GuipInput.vue
+++ b/src/components/GuipInput.vue
@ -1,7 +1,8 @@
 <template>
-  <el-form-item :style="{ ...styleObject }" :required="required"
+  <el-form-item :style="{ ...styleObject, display: 'flex', flexDirection: 'column' }" :required="required"
    :class="[{ 'column': column }, { 'w510': addClass == 'w510' }, { 'w388': addClass == 'w388' }, 'form-item']" :label="label"
-    :prop="prop" :rules="rules">
+    :prop="prop" :rules="rules" class="custom-form-item">
+    <div class="input-wrapper">  <!-- 添加包裹层 -->
    <p v-if="desc" class="desc_right">{{ desc }}</p>
    <el-input :type="type" v-bind="$attrs" :placeholder="placeholder1" :disabled="disabled" :maxlength="maxlength1"
      :style="{ width: width, height: height }" :value="inputValue" :minLength="minLength1" :show-word-limit="showWordLimit"
@ -29,6 +30,7 @@
    </el-input>
    <!-- 单位 -->
    <span class="unit" v-if="unit">{{ unit }}</span>
+  </div>
  </el-form-item>

 </template>
@ -147,4 +149,23 @@ export default {
  pointer-events: none;
  /* 防止单位文本影响输入框的点击事件 */
 }
+.custom-form-item {
+  ::v-deep .el-form-item__content {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .input-wrapper {
+    position: relative;
+    width: 100%;
+  }
+
+  ::v-deep .el-form-item__error {
+    position: relative;
+    margin-top: 4px;
+    padding-top: 0;
+    line-height: 1;
+  }
+}
 </style>
--- a/src/components/GuipSelect.vue
+++ b/src/components/GuipSelect.vue
@ -1,7 +1,7 @@
 <template>
  <el-form-item :style="{ ...style, height: height, ...styleObject }" :required="required"
    :class="[{ 'column': column }, { 'w510': addClass == 'w510' }, { 'w388': addClass == 'w388' }, 'form-item']"
-    :label="label" :prop="prop" :rules="rules">
+    :label="label" :prop="prop" :rules="rules" class="custom-form-item">
    <p v-if="desc" class="desc_right">{{ desc }}</p>
    <el-select :style="{ width: width }" :placeholder="placeholder1" @change="handleChange" v-model="selectedValue"
      v-bind="$attrs">
@ -141,4 +141,27 @@ export default {
    }
  }
 }
-</script>
+</script>
+<style scoped lang="scss">
+.custom-form-item {
+  ::v-deep .el-form-item__content {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    min-height: auto;  /* 允许高度自由扩展 */
+  }
+
+  ::v-deep .el-form-item__error {
+    position: relative;  /* 改为相对定位 */
+    margin-top: 4px;    /* 与输入框保持间距 */
+    padding-top: 0;
+    line-height: 1;
+    white-space: normal; /* 允许错误信息换行 */
+  }
+
+  /* 确保 Select 组件宽度填满父容器 */
+  .el-select {
+    width: 100%;
+  }
+}
+</style>
--- a/src/components/SliderMenu.vue
+++ b/src/components/SliderMenu.vue
@ -24,7 +24,7 @@
                activeColor="#006AFF" :isActive="item.index == currentMenuItem && currentMenuItem['index'].substring(0,1) && isCollapse" />
              <span class="title_text" >{{ item.title }}</span>
            </template>
-            <el-menu-item style="padding: 0 22px 0 32px;" v-for="subItem in item.children" :key="subItem.index"
+            <el-menu-item style="padding: 0 22px 0 20px;" v-for="subItem in item.children" :key="subItem.index"
              :index="subItem.index" @click="handleSelect(subItem.index, [item.index, subItem.index], subItem)">
              {{ subItem.title }}
            </el-menu-item>
--- a/src/components/Tooltip.vue
+++ b/src/components/Tooltip.vue
@ -1,7 +1,8 @@
 <template>
    <transition name="fade">
        <div v-if="visible" :class="['position-message', type, position]" id="qq" :style="positionStyle">
-            <i :class="iconClass"></i>
+            <!-- <i :class="iconClass"></i>/ -->
+            <img :src="defaultImages[type]" class="message-image" />
            <span>{{ message }}</span>
        </div>
    </transition>
@ -30,7 +31,13 @@ export default {
    data() {
        return {
            visible: false,
-            positionStyle: {}
+            positionStyle: {},
+            defaultImages:{
+                success: require('@/assets/message_Success.png'),
+                info: require('@/assets/message_Warning.png'),
+                warning: require('@/assets/message_Warning.png'),
+                error: require('@/assets/message_error.png')
+            }
        }
    },
    computed: {
@ -93,40 +100,49 @@ export default {
 }
 </script>

-<style scoped>
+<style scoped lang="scss">
 .position-message {
    position: absolute;
    min-width: 100px;
-    padding: 8px 12px;
+    padding: 14px 21px;
    border-radius: 4px;
-    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    z-index: 9999;
    display: flex;
    align-items: center;
-    background: red;
+    background: #FFFFFF;
+    box-sizing: border-box;
+    box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.16);
+    span{
+        letter-spacing: 0.08em;
+        color: #626573;
+    }
+}
+.message-image {
+  width: 18px;
+  height: 18px;
+  margin-right: 10px;
 }
-
 .position-message i {
    margin-right: 6px;
    font-size: 16px;
 }

 .position-message.info {
-    background-color: #f4f4f5;
+    /* background-color: #f4f4f5;
    color: #909399;
-    border: 1px solid #e9e9eb;
+    border: 1px solid #e9e9eb; */
 }

 .position-message.success {
-    background-color: #f0f9eb;
+    /* background-color: #f0f9eb;
    color: #67c23a;
-    border: 1px solid #e1f3d8;
+    border: 1px solid #e1f3d8; */
 }

 .position-message.error {
-    background-color: #fef0f0;
+    /* background-color: #fef0f0;
    color: #f56c6c;
-    border: 1px solid #fde2e2;
+    border: 1px solid #fde2e2; */
 }

 .fade-enter-active,
--- a/src/components/site/addSiteStep/step2.vue
+++ b/src/components/site/addSiteStep/step2.vue
@ -76,7 +76,7 @@
                                        <template #trigger>
                                            <span v-if="selectWxpay && (selectWxpay.short_name || selectWxpay.account)">{{ selectWxpay.short_name }} {{ selectWxpay.account }}</span>
                                            <span v-else-if="wxpayList.length === 0">暂无收款账号，稍后配置</span>
-                                            <span v-else>未绑定微信收款</span>
+                                            <span class="trigger_placeholder" v-else>未绑定微信收款</span>
                                        </template>

                                        <!-- 自定义下拉选项 -->
@ -121,7 +121,7 @@
                                        <template #trigger>
                                            <span v-if="selectAlipay && (selectAlipay.short_name || selectAlipay.account)">{{ selectAlipay.short_name }} {{ selectAlipay.account }}</span>
                                            <span v-else-if="alipayList.length === 0">暂无收款账号，稍后配置</span>
-                                            <span v-else>未绑定支付宝收款</span>
+                                            <span class="trigger_placeholder" v-else>未绑定支付宝收款</span>
                                        </template>

                                        <template #normal>
@ -289,7 +289,7 @@
        </div>
        <div class="register-btns">
            <GuipButton type="system" :btnstyle="{ width: '144px', height: '46px' }" @click="jumpStep">跳过</GuipButton>
-            <GuipButton type="primary" :btnstyle="{ width: '144px', height: '46px' }" @click="nextStep">下一步</GuipButton>
+            <GuipButton ref="nextStepRef" type="primary" :btnstyle="{ width: '144px', height: '46px' }" @click="nextStep">下一步</GuipButton>
        </div>
    </div>
 </template>
@ -602,7 +602,13 @@ export default {
              if(this.bindPddId) data.pay_config = { 11: this.bindPddId }
          }
          if(Object.keys(data.pay_config).length === 0) {
-              this.$Message.error('请绑定收款方式');
+            //   this.$Message.error('请绑定收款方式');
+            this.$positionMessage({
+                type: 'error',
+                message: '请绑定收款方式',
+                target: this.$refs['nextStepRef'], // 可以是DOM元素或选择器
+                position: 'top'
+            })
              return false
          }

@ -649,7 +655,14 @@ export default {
    }
  }
 }
-
+.trigger_placeholder{
+    font-family: Microsoft YaHei UI;
+    color: #8A9099;
+    font-size: 14px;
+    font-weight: normal;
+    line-height: normal;
+    letter-spacing: 0.08em;
+}
 .register-btns {
  position: fixed;
  left: 0;