yoe-opm-web/src/views/diy/pccomponents/edit/brand-edit.vue

<template>
  <div class="pc-edit">
    <!-- 内容 -->
    <div class="content-wrap" v-show="diyStore.editTab == 'content'">
      <div class="edit-attr-item-wrap">
        <h3 class="mb-[10px]">品牌设置</h3>
        <el-form label-width="80px" class="px-[10px]">
          <el-form-item label="设置">
            <el-radio-group v-model="diyStore.editComponent.settings" fill="#409eff">
              <el-radio-button label="图片" :value="1" />
              <el-radio-button label="品牌" :value="2" />
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
      <template v-if="diyStore.editComponent.settings == 1">
        <div class="edit-attr-item-wrap">
          <h3 class="mb-[10px]">图片设置</h3>
          <el-form label-width="80px" class="px-[10px]">
            <div class="edit-attr-box">
              <el-form-item label="图片上传">
                <div class="flex-row-start">
                  <upload-image v-model="diyStore.editComponent.imageUrl" :limit="1" />
                  <div class="flex-column-between images-bos">
                    <div class="annotation3">(建议上传尺寸相同图片，推荐尺寸230*340)</div>
                    <div class="flex-row-between images-box">
                      <div>缩放模式</div>
                      <div class="flex-row-start" @click="openImageType({ imgType: diyStore.editComponent.imgType }, 1)">
                        <span style="margin-top: 2px" class="text-primary flex-1 cursor-pointer">{{
                          diyStore.editComponent.imgType == 1 ? '拉伸' : diyStore.editComponent.imgType == 2 ? '缩放' : '填充'
                        }}</span>
                        <el-icon class="cursor-pointer">
                          <ArrowRight />
                        </el-icon>
                      </div>
                    </div>
                  </div>
                </div>
              </el-form-item>
              <el-form-item label="链接地址">
                <el-input v-model="diyStore.editComponent.url" placeholder="请输入链接地址" />
              </el-form-item>
            </div>
          </el-form>
        </div>
      </template>
      <template v-if="diyStore.editComponent.settings == 2">
        <div class="edit-attr-item-wrap">
          <div class="edit-attr-title flex-row-between">
            <div>
              <span>品牌设置</span>
              <span class="title2">鼠标拖拽可以改变顺序</span>
            </div>
          </div>
          <draggable v-model="diyStore.editComponent.brandList" item-key="id">
            <template #item="{ element, index }">
              <el-form label-width="90px" class="px-[10px]">
                <div class="edit-attr-box">
                  <el-icon @click="onDel(index)" color="#F56C6C" size="18px" class="circleClose">
                    <CircleCloseFilled />
                  </el-icon>
                  <el-form-item label="图片上传">
                    <div class="flex-row-start">
                      <upload-image v-model="element.imageUrl" :limit="1" />
                      <div class="flex-column-between images-bos">
                        <div class="annotation3">(建议上传尺寸相同图片，推荐尺寸150*150)</div>
                        <div class="flex-row-between images-box">
                          <div>缩放模式</div>
                          <div class="flex-row-start" @click="openImageType(element, 2)">
                            <span style="margin-top: 2px" class="text-primary flex-1 cursor-pointer">{{
                              element.imgType == 1 ? '拉伸' : element.imgType == 2 ? '缩放' : '填充'
                            }}</span>
                            <el-icon class="cursor-pointer">
                              <ArrowRight />
                            </el-icon>
                          </div>
                        </div>
                      </div>
                    </div>
                  </el-form-item>
                  <el-form-item label="品牌名称">
                    <el-input v-model="element.title" placeholder="请输入品牌名称" :maxlength="10" show-word-limit />
                  </el-form-item>
                  <el-form-item label="副标题名称">
                    <el-input v-model="element.subtitle" placeholder="请输入副标题内容" />
                  </el-form-item>
                  <el-form-item label="链接地址">
                    <el-input v-model="element.url" placeholder="请输入链接地址" />
                  </el-form-item>
                </div>
              </el-form>
            </template>
          </draggable>
          <el-button @click="onAdd" style="width: 100%; margin-top: 10px">新增品牌</el-button>
        </div>
      </template>
    </div>
    <!-- 样式 -->
    <div class="style-wrap" v-show="diyStore.editTab == 'style'">
      <div class="edit-attr-item-wrap">
        <h3 class="mb-[10px]">样式设置</h3>
        <el-form label-width="80px" class="px-[10px]">
          <el-form-item label="文字大小">
            <el-slider size="small" v-model="diyStore.editComponent.titleSize" show-input :min="1" :max="50" />
          </el-form-item>
          <el-form-item label="文字加粗">
            <el-radio-group size="small" v-model="diyStore.editComponent.titleWeight" fill="#409eff">
              <el-radio-button label="加粗" :value="'bold'" />
              <el-radio-button label="不加粗" :value="'normal'" />
            </el-radio-group>
          </el-form-item>
          <el-form-item label="文字颜色">
            <span class="mr-[10px]">{{ diyStore.editComponent.titleColor }}</span>
            <el-color-picker class="mr-[10px]" v-model="diyStore.editComponent.titleColor" />
            <el-button @click="diyStore.editComponent.titleColor = '#101828'" size="small">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="edit-attr-item-wrap">
        <h3 class="mb-[10px]">副标题样式</h3>
        <el-form label-width="80px" class="px-[10px]">
          <el-form-item label="文字大小">
            <el-slider size="small" v-model="diyStore.editComponent.subtitleSize" show-input :min="1" :max="50" />
          </el-form-item>
          <el-form-item label="文字颜色">
            <span class="mr-[10px]">{{ diyStore.editComponent.subtitleColor }}</span>
            <el-color-picker class="mr-[10px]" v-model="diyStore.editComponent.subtitleColor" />
            <el-button @click="diyStore.editComponent.subtitleColor = '#101828'" size="small">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="edit-attr-item-wrap">
        <h3 class="mb-[10px]">图片设置</h3>
        <el-form label-width="80px" class="px-[10px]">
          <el-form-item label="图片圆角">
            <el-slider size="small" v-model="diyStore.editComponent.imageRadius" show-input :min="0" :max="100" />
          </el-form-item>
          <el-form-item label="模块圆角">
            <el-slider size="small" v-model="diyStore.editComponent.boxRadius" show-input :min="0" :max="100" />
          </el-form-item>
        </el-form>
      </div>
      <!-- 组件样式 -->
      <slot name="style"></slot>
    </div>
    <ImagesForm ref="ImagesFormRef" @confirmCallBack="confirmCallBack"></ImagesForm>
  </div>
</template>

<script lang="ts" setup>
import draggable from 'vuedraggable';
import usePcdiyStore from '@/store/modules/pcdiy';
import uploadImage from '@/components/upload-image/index.vue';
import ImagesForm from '@/components/ImagesForm/index.vue';
const diyStore = usePcdiyStore();
const ImagesFormRef = ref();

// 打开图片类型
const openImageType = (element: any, type: any) => {
  const datas = JSON.parse(JSON.stringify(element));
  ImagesFormRef.value.onOpen(datas, type);
};
// 图片类型返回
const confirmCallBack = (res: any, type: any) => {
  if (type == 1) {
    diyStore.editComponent.imgType = res.imgType;
  } else {
    diyStore.editComponent.brandList.forEach((item: any) => {
      if (item.id == res.id) {
        item.imgType = res.imgType;
      }
    });
  }
};

const onAdd = () => {
  diyStore.editComponent.brandList.push({
    imageUrl: '',
    title: '品牌名称',
    subtitle: '品牌介绍',
    url: '',
    imgType: 1,
    id: Date.now()
  });
};

const onDel = (index: any) => {
  diyStore.editComponent.brandList.splice(index, 1);
};
</script>

<style lang="scss" scoped>
.pc-edit {
  .edit-attr-item-wrap {
    border-top: 2px solid var(--el-color-info-light-8);
    padding-top: 20px;

    &:first-of-type {
      border-top: none;
      padding-top: 0;
    }

    .edit-attr-title {
      display: flex;

      .title2 {
        font-size: 12px;
        color: #666;
        margin-left: 6px;
      }
    }

    .edit-attr-box {
      padding: 18px 10px 0 10px;
      border: 1px solid #e5e6eb;
      border-radius: 4px;
      position: relative;
      margin-top: 18px;

      .images-bos {
        flex: 1;
        height: 98px;
        padding: 5px 0;
      }

      .images-box {
        font-size: 13px;
        color: #666;
      }

      .circleClose {
        position: absolute;
        top: -9px;
        right: -9px;
        cursor: pointer;
      }

      .annotation3 {
        font-size: 12px;
        color: #666;
        line-height: 14px;
      }
    }
  }

  :deep(.el-form-item__label) {
    font-weight: 400;
  }

  :deep(.file-selector) {
    display: none;
  }
}
</style>