yoe-opm-web/src/views/diy/pccomponents/edit/navigation-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.styleType">
              <el-radio :value="1">固定显示</el-radio>
              <el-radio :value="2">单行滑动</el-radio>
              <el-radio :value="3">分页滑动</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="每行数量">
            <el-radio-group v-model="diyStore.editComponent.number">
              <el-radio :value="3">3个</el-radio>
              <el-radio :value="4">4个</el-radio>
              <el-radio :value="5">5个</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="每页行数" v-if="diyStore.editComponent.styleType == 3">
            <el-radio-group v-model="diyStore.editComponent.count">
              <el-radio :value="1">1个</el-radio>
              <el-radio :value="2">2个</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
      <div class="edit-attr-item-wrap">
        <div class="edit-attr-title flex-row-between">
          <div>
            <span>导航设置</span>
            <span class="title2">鼠标拖拽可以改变顺序</span>
          </div>
        </div>
        <el-form label-width="86px" class="px-[10px]">
          <draggable v-model="diyStore.editComponent.navlList" item-key="id">
            <template #item="{ element, index }">
              <div class="edit-attr-box">
                <el-icon @click="onDel(index)" color="#F56C6C" size="18px" class="circleClose" v-if="diyStore.editComponent.navlList.length > 3">
                  <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, index)">
                          <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="链接地址">
                  <WebLinkInput v-model="element.url" placeholder="请输入或选择链接" />
                </el-form-item>
              </div>
            </template>
          </draggable>
          <el-button @click="onAdd" style="width: 100%; margin-top: 10px">新增导航</el-button>
        </el-form>
      </div>
    </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="1" :max="50" />
          </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, index: any) => {
  diyStore.editComponent.navlList[index].imgType = res.imgType;
};
const onAdd = () => {
  diyStore.editComponent.navlList.push({
    imageUrl: '',
    title: '标题名称',
    subtitle: '副标题名称',
    url: '',
    imgType: 1,
    id: Date.now()
  });
};

const onDel = (index: any) => {
  diyStore.editComponent.navlList.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;
  }

  // :deep(.el-radio){
  //   margin-right: 10px;
  // }
}
</style>