yoe-opm-web/src/views/diy/pcEdit/textTitle-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="90px" class="px-[10px]">
          <el-form-item label="风格选择" class="flex">
            <span class="text-primary flex-1 cursor-pointer" @click="showStyle">风格{{ diyStore.editComponent.styleType }}</span>
            <el-icon @click="showStyle" class="cursor-pointer">
              <ArrowRight />
            </el-icon>
          </el-form-item>
        </el-form>
      </div>
      <div class="edit-attr-item-wrap">
        <h3 class="mb-[10px]">标题内容</h3>
        <el-form label-width="90px" class="px-[10px]">
          <el-form-item label="标题名称" class="flex">
            <el-input v-model="diyStore.editComponent.title" placeholder="请输入标题内容" />
          </el-form-item>
          <el-form-item label="链接地址">
            <WebLinkInput v-model="diyStore.editComponent.titleUrl" placeholder="请输入或选择链接" />
            <!-- <el-input v-model="diyStore.editComponent.titleUrl" placeholder="请输入链接地址" /> -->
          </el-form-item>
          <el-form-item label="对齐方式" class="flex" v-if="diyStore.editComponent.styleType == 1">
            <el-radio-group v-model="diyStore.editComponent.titleAlign">
              <el-radio :value="'left'">居左</el-radio>
              <el-radio :value="'center'">居中</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
      <div
        class="edit-attr-item-wrap"
        v-if="
          diyStore.editComponent.styleType == 10 ||
          diyStore.editComponent.styleType == 11 ||
          diyStore.editComponent.styleType == 12 ||
          diyStore.editComponent.styleType == 14
        "
      >
        <h3 class="mb-[10px]">副标题内容</h3>
        <el-form label-width="90px" class="px-[10px]">
          <el-form-item label="副标题名称" class="flex">
            <el-input v-model="diyStore.editComponent.subtitle" placeholder="请输入副标题内容" />
          </el-form-item>
        </el-form>
      </div>
      <div class="edit-attr-item-wrap" v-if="diyStore.editComponent.styleType == 12 || diyStore.editComponent.styleType == 14">
        <h3 class="mb-[10px]">"更多"按钮</h3>
        <el-form label-width="90px" class="px-[10px]">
          <el-form-item label="按钮文字" class="flex">
            <el-input v-model="diyStore.editComponent.more" placeholder="请输入按钮文字" />
          </el-form-item>
          <el-form-item label="链接地址" class="flex">
            <el-input v-model="diyStore.editComponent.moreUrl" placeholder="请输入链接地址" />
          </el-form-item>
        </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"
        v-if="
          diyStore.editComponent.styleType == 10 ||
          diyStore.editComponent.styleType == 11 ||
          diyStore.editComponent.styleType == 12 ||
          diyStore.editComponent.styleType == 14
        "
      >
        <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 = '#b7bcd2'" size="small">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="edit-attr-item-wrap" v-if="diyStore.editComponent.styleType == 12 || diyStore.editComponent.styleType == 14">
        <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.moreSize" show-input :min="1" :max="50" />
          </el-form-item>
          <el-form-item label="文字颜色">
            <span class="mr-[10px]">{{ diyStore.editComponent.moreColor }}</span>
            <el-color-picker class="mr-[10px]" v-model="diyStore.editComponent.moreColor" />
            <el-button @click="diyStore.editComponent.moreColor = '#b7bcd2'" size="small">重置</el-button>
          </el-form-item>
          <el-form-item label="是否显示">
            <el-switch v-model="diyStore.editComponent.moreShow" />
          </el-form-item>
        </el-form>
      </div>
      <!-- 组件样式 -->
      <slot name="style"></slot>
    </div>
    <!-- 风格弹窗 -->
    <el-dialog v-model="showDialog" title="风格选择">
      <div class="data-bos">
        <template v-for="(item, index) in styleList" :key="index">
          <div
            :class="{ 'border-primary': styleId == item.id }"
            @click="changeTitleStyle(item)"
            class="data-list flex items-center justify-center overflow-hidden w-[200px] h-[100px] mr-[12px] mb-[12px] cursor-pointer border bg-[#eee]"
          >
            <img :src="item.img" />
          </div>
        </template>
      </div>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showDialog = false">取消</el-button>
          <el-button type="primary" @click="confirmTitleStyle">确认</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="Index" lang="ts">
import usePcdiyStore from '@/store/modules/pcdiy';
import titlle1 from '@/assets/images/pcdiy/titlle1.png';
import titlle2 from '@/assets/images/pcdiy/titlle2.png';
import titlle3 from '@/assets/images/pcdiy/titlle3.png';
import titlle4 from '@/assets/images/pcdiy/titlle4.png';
import titlle5 from '@/assets/images/pcdiy/titlle5.png';
import titlle6 from '@/assets/images/pcdiy/titlle6.png';
import titlle7 from '@/assets/images/pcdiy/titlle7.png';
import titlle8 from '@/assets/images/pcdiy/titlle8.png';
import titlle9 from '@/assets/images/pcdiy/titlle9.png';
import titlle10 from '@/assets/images/pcdiy/titlle10.png';
import titlle11 from '@/assets/images/pcdiy/titlle11.png';
import titlle12 from '@/assets/images/pcdiy/titlle12.png';
import titlle13 from '@/assets/images/pcdiy/titlle13.png';
import titlle14 from '@/assets/images/pcdiy/titlle14.png';
import titlle15 from '@/assets/images/pcdiy/titlle15.png';

const diyStore = usePcdiyStore();
const styleId = ref<any>(1);
const showDialog = ref(false);

const styleList = [
  {
    img: titlle1,
    id: 1
  },
  {
    img: titlle2,
    id: 2
  },
  {
    img: titlle3,
    id: 3
  },
  {
    img: titlle4,
    id: 4
  },
  {
    img: titlle5,
    id: 5
  },
  {
    img: titlle6,
    id: 6
  },
  {
    img: titlle7,
    id: 7
  },
  {
    img: titlle8,
    id: 8
  },
  {
    img: titlle9,
    id: 9
  },
  {
    img: titlle10,
    id: 10
  },
  {
    img: titlle11,
    id: 11
  },
  {
    img: titlle12,
    id: 12
  },
  {
    img: titlle13,
    id: 13
  },
  {
    img: titlle14,
    id: 14
  },
  {
    img: titlle15,
    id: 15
  }
];

//打开弹窗
const showStyle = () => {
  showDialog.value = true;
  styleId.value = diyStore.editComponent.styleType;
};
//选择弹窗
const changeTitleStyle = (item: any) => {
  styleId.value = item.id;
};

//确定弹窗
const confirmTitleStyle = () => {
  diyStore.editComponent.styleType = styleId.value;
  showDialog.value = false;
};
</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;
    }
  }

  .data-bos {
    display: flex;
    flex-wrap: wrap;
    gap: 0 12px;
    .data-list {
      background-color: #f9fafb;
      border: 1px solid #e5e7eb;
      &.border-primary {
        border-color: var(--el-color-primary);
      }
      img {
        width: 100%;
      }
    }
  }

  :deep(.el-form-item__label) {
    font-weight: 400;
  }
}
</style>