💄 style(landing): 调整落地页步骤一样式

src/components/image-upload/index.vue

@@ -12,12 +12,13 @@
           </div>
         </template>
       </div>
+      <p class="tip-text" v-if="tips">{{ tips }}</p>
     </div>
   </a-upload>
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, toRefs,watch } from "vue";
+import { defineComponent, reactive, toRefs, watch } from "vue";
 import { message } from "ant-design-vue";
 import { LoadingOutlined, PlusOutlined } from "@ant-design/icons-vue";
 
@@ -42,21 +43,25 @@ const ImageUpload = defineComponent({
     value: {
       type: String,
       default: () => ""
+    },
+    tips: {
+      type: String,
+      default: () => "支持jpg、png、jpeg格式，600KB以内"
     }
   },
   emits: ["change"],
   setup(props, { emit }) {
-    console.log(props.value)
+    console.log(props.value);
     const state = reactive({
       uploading: false,
       cover: props.value ?? ""
     });
     watch(
-    () => props.value,
-    () => {
-     state.cover =  props.value
-    }
-  );
+      () => props.value,
+      () => {
+        state.cover = props.value;
+      }
+    );
     const onFileChange = async (file: { file: File }) => {
       try {
         state.uploading = true;
@@ -82,14 +87,24 @@ export default ImageUpload;
 .cover-upload {
   font-size: 0;
   position: relative;
-  border-radius: 6px;
   width: 128px;
   height: 128px;
-  overflow: hidden;
+  // overflow: hidden;
 
   img {
     width: 128px;
     height: 128px;
+    border-radius: 6px;
+  }
+
+  .tip-text {
+    position: absolute;
+    right: 0;
+    top: 0%;
+    transform: translate(105%, 0%);
+    font-size: 12px;
+    color: #999;
+    width: 250px;
   }
 
   .cover-edit-wrap {
@@ -107,6 +122,7 @@ export default ImageUpload;
     cursor: pointer;
     transition: opacity 0.3s;
     opacity: 1;
+    border-radius: 6px;
 
     // &:hover {
     //   opacity: 1;

src/views/put/landing/stepComp/step-one.vue

@@ -65,7 +65,14 @@
       <a-form-item label="公众号后缀">
         <a-radio-group v-model:value="forms.gzh_suffix_mode">
           <a-radio :value="0">无后缀</a-radio>
-          <a-radio :value="3">官方后缀(推荐)</a-radio>
+          <a-radio :value="3">
+            官方后缀(推荐)
+            <a-tooltip
+              title="使用官方后缀时请先设置微信号：系统设置->服务号设置->修改服务号名称->修改微信号同时保证公众号微信官方后台也设置了微信号"
+            >
+              <InfoCircleOutlined />
+            </a-tooltip>
+          </a-radio>
         </a-radio-group>
       </a-form-item>
       <a-form-item label="跳转类型">
@@ -103,6 +110,7 @@
 
 <script lang="ts">
 import { defineComponent, reactive, ref, toRefs } from "vue";
+import { InfoCircleOutlined } from "@ant-design/icons-vue";
 import { useForm } from "@ant-design-vue/use";
 import { useRouter } from "vue-router";
 
@@ -115,12 +123,13 @@ const StepOne = defineComponent({
   name: "StepOne",
   components: {
     ImageUpload,
+    InfoCircleOutlined
   },
   props: {
     content: Object,
     default() {
       return {};
-    },
+    }
   },
   emits: ["next"],
   setup(props, { emit }) {
@@ -144,43 +153,43 @@ const StepOne = defineComponent({
         jump_type: "copy_name",
         sub_img: "",
         gzh_img: "",
-        content: "",
-      },
+        content: ""
+      }
     });
 
     const formsRules = reactive({
       title: [{ required: true, trigger: "blur", message: "请输入落地页名称" }],
       gzh_name: [
-        { required: true, trigger: "change", message: "请选择公众号" },
+        { required: true, trigger: "change", message: "请选择公众号" }
       ],
       domain: [
         {
           required: true,
           trigger: "change",
-          message: "请选择域名",
-        },
+          message: "请选择域名"
+        }
       ],
       bid: [
         {
           required: true,
           type: "number",
           trigger: "change",
-          message: "请选择推广书籍",
-        },
+          message: "请选择推广书籍"
+        }
       ],
       link_source: [
         {
           required: true,
           trigger: "change",
-          message: "请选择渠道",
-        },
+          message: "请选择渠道"
+        }
       ],
       sub_img: [
         {
           required: true,
-          message: "请上传关注图片",
-        },
-      ],
+          message: "请上传关注图片"
+        }
+      ]
     });
 
     const { validate, validateInfos } = useForm(state.forms, formsRules);
@@ -191,18 +200,17 @@ const StepOne = defineComponent({
         const [
           { data: official },
           { data: domains },
-          { data: books },
+          { data: books }
         ] = await Promise.all([
           getLandingOfficials(),
           getLandingDomains(),
-          getLandingBooks(),
+          getLandingBooks()
         ]);
         state.officials = official.list;
         state.domains = domains.list;
         state.books = books.list;
         state.forms = Object.assign(state.forms, (props as any)?.content ?? {});
-        console.log(state.forms)
-
+        console.log(state.forms);
       } catch (error) {
         console.log("error happened in initLandingConfig:", error.message);
         router.back();
@@ -252,9 +260,9 @@ const StepOne = defineComponent({
       onDomainChange,
       onUploadChange,
       onBack,
-      onNextStep,
+      onNextStep
     };
-  },
+  }
 });
 
 export default StepOne;