完善表单样式

src/views/mine/ReleaseWebcast.vue

@@ -5,14 +5,18 @@
             <a-form-item label="直播标题">
                 <a-input size="small" v-model:value="form.title" placeholder="请输入您的直播标题" />
             </a-form-item>
-            <a-form-item label="直播封面">
+            <a-form-item label="直播封面" class="item-cover">
                 <a-upload
                     list-type="picture"
+                    @change="coverChange"
                     action="//jsonplaceholder.typicode.com/posts/"
                 >
-                    <div class="upload-image">
+                    <div class="upload-image" v-if="!viewCover">
                         <PlusOutlined style="fontSize: 22px;" />
                     </div>
+                    <div class="preview-image" v-else>
+                        <img style="width: 100%" :src="previewImage" />
+                    </div>
                 </a-upload>
             </a-form-item>
             <a-form-item label="视频介绍" class="video-introduction">
@@ -42,7 +46,8 @@
                 <a-input size="small" v-model:value="form.number" placeholder="请输入直播人数" />
             </a-form-item>
             <a-form-item label="直播简介" class="brief">
-                <a-textarea v-model:value="form.brief" maxlength="200" placeholder="请输入您的直播简介" />
+                <a-textarea v-model:value="form.brief" :autosize="true" class="brief-textarea" maxlength="200" placeholder="请输入您的直播简介" />
+                <span class="words-number">{{ form.brief.length }}/200</span>
             </a-form-item>
             <a-form-item :wrapper-col="{ span: 4, offset: 0 }">
                 <a-button @click="onSubmit">发布直播</a-button>
@@ -52,10 +57,11 @@
     </div>
 </template>
 <script lang="ts">
-import { defineComponent, reactive, toRaw } from 'vue';
+import { defineComponent, reactive, Ref, ref, toRaw } from 'vue';
 import { PlaySquareOutlined, PlusOutlined } from '@ant-design/icons-vue';
 import { useForm } from '@ant-design-vue/use';
 import NavBottom from '@/components/NavBottom.vue';
+import { previewCover } from '@/static/js/common';
 
 export default defineComponent({
     name: 'ReleaseWebcast',
@@ -78,13 +84,13 @@ export default defineComponent({
         /**
          * 验证直播时间
          */
-        const validateDuration = async (rule: object, value: number): Promise<string | void> => {
+        async function validateDuration (rule: object, value: number): Promise<string | void> {
             if (value < 30 || value > 120) {
                 return Promise.reject('*最短30min 最长120min');
             } else {
                 return Promise.resolve();
             }
-        };
+        }
         /**
          * 验证直播人数
          */
@@ -110,6 +116,22 @@ export default defineComponent({
                 },
             ],
         });
+
+        // 是否显示封面预览 封面的路径
+        const viewCover: Ref<boolean> = ref(false),
+            previewImage: Ref<string> = ref('');
+
+        /**
+         * 封面改变触发事件
+         */
+        function coverChange(info: any): void {
+            // console.log(info);
+            // 获取预览图片
+            previewCover(info.file).then(url => previewImage.value = url);
+            viewCover.value = true;
+            // form.cover = fileList;
+        }
+
         const { resetFields, validate, validateInfos } = useForm(form, rules);
         /**
          * 表单提交
@@ -127,6 +149,9 @@ export default defineComponent({
             wrapperCol: { span: 14 },
             validateInfos,
             resetFields,
+            viewCover,
+            previewImage,
+            coverChange,
             form,
             onSubmit,
         }
@@ -141,7 +166,7 @@ export default defineComponent({
     padding: 46px;
     border-radius: 17px;
     position: relative;
-    /deep/ .ant-form {
+    ::v-deep .ant-form {
         .title {
             font-size: 12px;
             font-weight: bold;
@@ -177,6 +202,7 @@ export default defineComponent({
                 border-radius: 3px;
                 border: 1px solid #DCDFE0;
                 font-size: 11px;
+                color: #3F3F3F;
                 &::-webkit-input-placeholder{
                     font-size: 12px;
                     color: #808080;
@@ -193,6 +219,9 @@ export default defineComponent({
                 font-weight: 500;
                 color: #D22D2E;
             }
+            .ant-upload-list {
+                display: none;
+            }
             .ant-btn {
                 padding: 0;
                 width: 63px;
@@ -204,6 +233,12 @@ export default defineComponent({
                 color: #FFFFFF;
             }
         }
+        .item-cover {
+            .preview-image {
+                width: 171px;
+                height: 96px;
+            }
+        }
         .video-introduction {
             .ant-form-item-control-wrapper {
                 .ant-form-item-children {
@@ -231,9 +266,23 @@ export default defineComponent({
             }
         }
         .brief {
+            position: relative;
             .ant-input {
                 width: 359px;
             }
+            .brief-textarea {
+                min-height: 85px;
+                padding-bottom: 30px;
+            }
+            .words-number {
+                position: absolute;
+                right: 11px;
+                bottom: -11px;
+                font-size: 11px;
+                font-weight: 500;
+                color: #7F7F7F;
+                user-select: none;
+            }
         }
     }
 }