precise_delivery_distribution_front/src/views/put/landing/stepComp/step-two.vue

<template>
  <div class="edit-content">
    <div class="edit-form">
      <div class="edit-form-item">
        <p class="edit-label">正文</p>
        <div class="charpt-list form-content">
          <template v-for="(item, idx) in charptList" :key="idx">
            <div class="charpt-list-item">
              <p class="item-label">文章标题</p>
              <div class="item-input">
                <a-input
                  v-model:value="item.title"
                  placeholder="请输入标题"
                  style="width:638px"
                />
              </div>
              <a
                href="javascript:;"
                class="delete-text"
                v-show="idx > 0"
                @click="deleteLine(idx)"
                >删除</a
              >
            </div>
            <div class="charpt-list-item bor-line">
              <p class="item-label">正文内容</p>
              <div class="item-input">
                <a-textarea
                  v-model:value="item.content"
                  placeholder="请输入正文"
                  :auto-size="{ minRows: 5, maxRows: 10 }"
                />
              </div>
            </div>
            <hr />
          </template>
          <div class="add-item" @click="addNewCharpt">
            添加新章节+
          </div>
        </div>
      </div>
      <div class="edit-form-item">
        <p class="edit-label">顶部图片</p>
        <div class="choose-img">
          <div v-show="!selectImg" class="black-chos" @click="showModel">
            选择
          </div>
          <div class="img" v-show="selectImg">
            <img :src="chooseImgUrl" style="width:100%" @click="showModel" />
          </div>
        </div>
      </div>
      <div class="edit-form-item">
        <p class="edit-label">正文模板</p>
        <div class="template-list">
          <div
            v-for="(item, index) in templateList"
            v-html="item.content"
            :key="index"
            :class="[
              'template-item',
              index == templateChecked ? 'current' : '',
            ]"
            @click="chooseTemplate(item, index)"
          ></div>
        </div>
      </div>
    </div>
    <a-modal
      v-model:visible="modelShow"
      title="顶部图片"
      @ok="handleSumbit"
      :width="1000"
    >
      <a-tabs v-model:activeKey="activeKey" @change="loadMore(1, true)">
        <a-tab-pane key="10" tab="女频"></a-tab-pane>
        <a-tab-pane key="11" tab="男频"></a-tab-pane>
        <a-tab-pane key="12" tab="活动"></a-tab-pane>
      </a-tabs>
      <div class="radio-grouped">
        <a-radio-group
          v-model:value="chooseType"
          style="margin: 0 auto"
          @change="loadMore(1, true)"
        >
          <a-radio-button value="1">现代</a-radio-button>
          <a-radio-button value="2">古代</a-radio-button>
        </a-radio-group>
      </div>
      <a-list
        class="loadmore-list"
        :loading="listLoading"
        item-layout="horizontal"
        :grid="{ gutter: 10, xs: 1, sm: 2, md: 4, lg: 4, xl: 6, xxl: 6 }"
        :data-source="dataList"
      >
        <template #loadMore>
          <div
            :style="{
              textAlign: 'center',
              marginTop: '12px',
              height: '32px',
              lineHeight: '32px',
            }"
          >
            <a-button
              v-show="!listLoading && showLoaderMore"
              @click="loadMore()"
              >加载更多</a-button
            >
          </div>
        </template>
        <template #renderItem="{ item, index }">
          <a-list-item>
            <div :class="['img-item', index == temChecked ? 'current' : '']">
              <a-popover title="预览" trigger="click">
                <template #content>
                  <img :src="item.link" />
                </template>
                <img :src="item.link" @click="chooseImg(item, index)" />
              </a-popover>
            </div>
          </a-list-item>
        </template>
      </a-list>
    </a-modal>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, toRefs, onMounted } from "vue";
import { getLandingPic, getLandingTempalte } from "@/api";
const StepTwo = defineComponent({
  name: "StepTwo",
  setup(props, { emit }) {
    const state = reactive({
      charptList: ref<Array<{ content: string; title: string }>>([
        {
          title: "大苏打萨达速度阿萨德阿萨德阿士大夫撒方式打发的撒范德萨飞",
          content: "sadassssssssssssssssasdsaddasdas",
        },
      ]),
      modelShow: false,
      selectImg: false,
      activeKey: "10",
      chooseType: "1",
      currentPage: 1,
      listLoading: false,
      showLoaderMore: true,
      dataList: [],
      chooseImgUrl: "",
      temItem: ref<any>({}),
      temChecked: ref<any>(null),
      templateItemChecked: ref<any>({}),
      templateChecked: ref<any>(null),
      templateList: ref<any[]>([]),
    });
    const addNewCharpt = () => {
      let data = {
        title: "",
        content: "",
      };
      state.charptList.push(data);
    };
    const deleteLine = (idx: number) => {
      state.charptList.splice(idx, 1);
    };
    //弹窗
    const showModel = () => {
      state.modelShow = true;
      loadMore();
    };
    //选择图片
    const chooseImg = (item: any, idx: number) => {
      state.temItem = item;
      state.temChecked = idx;
    };
    onMounted(() => {
      getTemList();
    });
    //模板列表
    const getTemList = () => {
      getLandingTempalte().then((res: any) => {
        state.templateList = res.data.list;
      });
    };
    //选择正文模板
    const chooseTemplate = (item: any, index: number) => {
      state.templateItemChecked = item;
      state.templateChecked = index;
    };
    //加载更多
    const loadMore = (page?: number, clear?: boolean) => {
      if (clear) {
        state.temItem = {};
        state.temChecked = null;
        state.dataList = [];
      }
      getLandingPic(
        state.activeKey,
        state.chooseType,
        page ?? state.currentPage
      ).then((res: any) => {
        state.dataList = state.dataList.concat(res.data.list);
        state.currentPage = res.data.meta.current_page + 1;
        if (res.data.meta.is_end) state.showLoaderMore = false;
      });
    };
    //选择顶部图
    const handleSumbit = () => {
      state.chooseImgUrl = state.temItem.link;
      state.selectImg = true;
      state.modelShow = false;
    };
    return {
      ...toRefs(state),
      addNewCharpt,
      deleteLine,
      handleSumbit,
      showModel,
      loadMore,
      chooseImg,
      chooseTemplate,
    };
  },
});

export default StepTwo;
</script>
<style lang="scss" scoped>
.loadmore-list {
  margin-top: 30px;
  .img-item {
    width: 144px;
    height: 144px;
    background: #ffffff;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    image {
      width: 144px;
    }
    &.current {
      border: 2px solid #006eff;
      &::after {
        position: absolute;
        width: 0;
        height: 0;
        border-top: 20px solid #006eff;
        border-left: 20px solid transparent;
        display: block;
        content: "";
        top: 0;
        right: 0;
      }
    }
  }
}
.template-list {
  width: 726px;
  height: 366px;
  background: #f7f7f7;
  max-height: 366px;
  overflow-y: scroll;
  position: relative;
  padding: 24px 110px;
  .template-item {
    margin: 25px 0;
    background: #fff;
    position: relative;
    &.current {
      border-radius: 6px;
      border: 2px solid #006eff;
      &::after {
        display: block;
        content: "";
        position: absolute;
        right: 8px;
        top: 8px;
        width: 20px;
        height: 20px;
        z-index: 10;
        background-image: url('../../../../assets/checked.png');
        background-repeat: no-repeat;
        background-size: cover;
      }
    }    
  }
}
.choose-img {
  .img {
    width: 144px;
    height: 144px;
    overflow: hidden;
    line-height: 144px;
    image {
      display: inline-block;
      vertical-align: middle;
      line-height: initial;
    }
  }
}
.radio-grouped {
  text-align: center;
}
.edit-form {
  .add-item {
    width: 270px;
    height: 40px;
    line-height: 35px;
    color: #006eff;
    font-size: 14px;
    text-align: center;
    background: #ffffff;
    border-radius: 3px;
    border: 2px solid #006eff;
    margin: 15px auto 0;
  }
  .edit-form-item {
    font-size: 14px;
    display: flex;
    align-items: center;
    margin-bottom: 40px;
    .black-chos {
      background-color: #f7f7f7;
      width: 100px;
      height: 100px;
      text-align: center;
      line-height: 100px;
      color: #d8d8d8;
    }
    hr {
      margin-bottom: 25px;
      border: none;
      height: 1px;
      background-color: #e5e5e5;
    }
    .edit-label {
      margin-right: 15px;
      width: 100px;
    }
    .form-content {
      padding: 30px 50px;
      background: #f7f7f7;
    }

    .charpt-list-item {
      display: flex;
      align-items: center;
      margin-bottom: 30px;
      overflow: hidden;
      &.bor-line {
        margin-bottom: 25px;
      }
      .item-label {
        margin-right: 18px;
      }
      .delete-text {
        display: block;
        margin-left: 15px;
      }
    }
  }
}
</style>
<style lang="scss">
.bor-line {
  .item-input {
    textarea {
      width: 638px;
    }
  }
}
</style>