浮层卡片

src/components/businessMoudle/batchGdt/configArea/originalityBasic/components/floatingZoneStruct.vue

@@ -3,24 +3,48 @@
     <div class="form-block-item-title">浮层卡片</div>
     <div class="marT15 flex_1">
       <el-switch v-model="floating_zone_switch" @change="radioChange"/>
-      <div class="flex marT15" v-if="floating_zone_struct.child.type">
-        <div class="form-block-item-title" style="width:120px">浮层卡片类型</div>
-        <el-radio-group class="flex_1" v-model="type" size="default" @change="radioChange">
-          <template v-for="list_item in floating_zone_struct.child.type?.enum_property?.enumeration">
-            <el-radio-button :label="list_item.value" style="margin:2px 0;">{{ list_item.description }}</el-radio-button>
-          </template>
-        </el-radio-group>
-      </div>
-      <div class="flex marT15" v-if="floating_zone_struct.child?.name">
-        <div class="form-block-item-title" style="width:120px">文案一</div>
-        <div class="flex"><el-input v-model="name" placeholder="请输入文案一" max="10" style="width:300px" @input="radioChange"/><span
-          style="color:#666;font-size:14px;margin-left:4px;">{{ name?.length }}/10</span></div>
-      </div>
-      <div class="flex marT15" v-if="floating_zone_struct.child?.desc">
-        <div class="form-block-item-title" style="width:120px">文案二(选填)</div>
-        <div class="flex"><el-input v-model="desc" placeholder="请输入文案一" max="10" style="width:300px" @input="radioChange"/><span
-          style="color:#666;font-size:14px;margin-left:4px;">{{ desc?.length }}/14</span></div>
-      </div>
+      <template v-if="floating_zone_switch">
+        <div class="flex marT15" v-if="floating_zone_struct.child.type">
+          <div class="form-block-item-title" style="width:120px">浮层卡片类型</div>
+          <el-radio-group class="flex_1" v-model="type" size="default" @change="radioChange">
+            <template v-for="list_item in floating_zone_struct.child.type?.enum_property?.enumeration">
+              <el-radio-button :label="list_item.value" style="margin:2px 0;">{{ list_item.description }}</el-radio-button>
+            </template>
+          </el-radio-group>
+        </div>
+        <div class="flex marT15" v-if="floating_zone_struct.child?.image_id" style="align-items: flex-start;">
+          <div class="form-block-item-title" style="width:120px">创意图片</div>
+          <div class="upload-content">
+            <div class="upload-area">
+              <div class="upload-empty">
+                <el-icon size="18px"><UploadFilled /></el-icon>上传图片
+              </div>
+            </div>
+            <p class="card-tips">图片尺寸必须为800x800，小于400KB，格式：JPG/PNG</p>
+          </div>
+        </div>
+        <div class="flex marT15" v-if="floating_zone_struct.child?.name">
+          <div class="form-block-item-title" style="width:120px">文案一</div>
+          <div class="flex"><el-input v-model="name" placeholder="请输入文案一" max="10" style="width:300px" @input="radioChange"/><span
+            style="color:#666;font-size:14px;margin-left:4px;">{{ name?.length }}/10</span></div>
+        </div>
+        <div class="flex marT15" v-if="floating_zone_struct.child?.desc">
+          <div class="form-block-item-title" style="width:120px">文案二(选填)</div>
+          <div class="flex"><el-input v-model="desc" placeholder="请输入文案一" max="10" style="width:300px" @input="radioChange"/><span
+            style="color:#666;font-size:14px;margin-left:4px;">{{ desc?.length }}/14</span></div>
+        </div>
+        <div class="flex marT15" v-if="floating_zone_struct.child?.button_text">
+          <div class="form-block-item-title" style="width:120px">按钮文案(选填)</div>
+          <el-select v-model="selectValue" clearable placeholder="请选择" size="small" @change="radioChange">
+            <el-option
+              v-for="item in floating_zone_struct.child?.button_text?.enum_property?.enumeration"
+              :key="item.value"
+              :label="item.value"
+              :value="item.value"
+            />
+          </el-select>
+        </div>
+      </template>
     </div>
   </div>
 </template>
@@ -35,14 +59,16 @@ const props = defineProps({
   }
 })
 import { onBeforeMount, ref } from 'vue';
-const floating_zone_switch = ref(true)
+const floating_zone_switch = ref(false)
 const floating_zone_struct = ref()
 const type = ref('')
 const name = ref('')
 const desc = ref('')
+const selectValue = ref('')
 onBeforeMount(()=>{
   floating_zone_struct.value = props.adTemplateItem?.adcreative_elements?.floating_zone_struct;
   type.value = floating_zone_struct.value?.child.type?.enum_property?.default
+  selectValue.value = floating_zone_struct.value.child?.button_text?.enum_property?.enumeration[0]?.value
   radioChange()
 })
 const radioChange = () => {
@@ -52,13 +78,69 @@ const radioChange = () => {
       'copywriting': [],
       'postion': 'adcreative_elements'
     }
-    obj.api_value['floating_zone_switch'] = floating_zone_switch.value ? 1 : 0
     if(floating_zone_switch.value){
-    }else{
-      
+      if(floating_zone_struct.value.child?.name && (name.value == '' || !name.value)) {
+        obj['required'] = true;
+        obj['description'] = `请输入文案一，长度1-10`;
+      }else{
+        obj.api_value['floating_zone_struct'] = {}
+        obj.api_value['floating_zone_struct']['floating_desczone_switch'] = floating_zone_switch.value ? 1 : 0
+        obj.api_value['floating_zone_struct']['name'] = name.value
+        if(desc.value){
+          obj.api_value['floating_zone_struct']['desc'] = desc.value
+        }
+        if(type.value){
+          obj.api_value['floating_zone_struct']['type'] = type.value
+        }
+        if(selectValue.value) {
+          obj.api_value['floating_zone_struct']['button_text'] = selectValue.value
+        }
+      }
     }
     emit('backhaul', {'floating_zone_struct': obj})
   }
 }
 </script>
-<style lang="scss" scoped>@import "@/assets/style/batchDialogGdt.scss";</style>
+<style lang="scss" scoped>
+@import "@/assets/style/batchDialogGdt.scss";
+.upload-content{
+  position: relative;
+  display: inline-block;
+  margin-right: 20px;
+  .upload-area{
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 124px;
+    height: 124px;
+    background-color: #fff;
+    border: 0.758865px solid #dadfe3;
+    border-radius: 4px;
+    .upload-empty{
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 108px;
+      height: 108px;
+      font-size: 14px;
+      color: #666;
+      cursor: pointer;
+      background-color: #f8f8f8;
+      border: 1px dashed #d6d6d6;
+      border-radius: 4px;
+    }
+    &:hover{
+      .upload-empty{
+        border-color: #3173FF;
+      }
+    }
+  }
+  .card-tips{
+    display: block;
+    padding-top: 4px;
+    font-size: 12px;
+    line-height: 1;
+    color: #999;
+  }
+}
+</style>