proginn-frontend/pages/frontend/skill/list.vue

<template>
  <div
    :class="mobile ? 'mobileMain' : ''"
    :style="{
      marginTop: mainMarginTop,
      marginBottom: mobile ? '0px' : '30px !important',
    }"
  >
    <div class="skill-page-main">
      <div class="skill-wrapper" v-if="!mobile">
        <div class="skill-top">
          <!-- <div class="tabs">
                    <div class="tabs-item active">技能服务</div>
                    <a href="/consult/" class="tabs-item">咨询服务</a>
                    <a href="/learn/" class="tabs-item">客栈学院</a>
                    <el-button class="add-btn" @click="handleClickAdd">添加技能赚钱</el-button>
                </div> -->
          <div class="skill-category-wrapper">
            <!-- <div class="category-title">技术分类</div> -->
            <!-- 一级分类内容 -->
            <div class="skill-category-wrapper-title">
              <img class="icon" src="~@/assets/img/skill/skill.png" />
              <span class="title">技能服务</span>
              <span class="desc">专业人才为你服务</span>
              <div class="expand"></div>
              <el-button class="add-btn" @click="handleClickAdd"
                >添加技能赚钱</el-button
              >
            </div>
            <div
              class="category-one-wrapper"
              :class="categoryExpanded ? 'expand' : ''"
            >
              <!-- 更多 -->
              <!-- <div
                            class="category-more"
                            @click="handleClickExpandCategory">{{ categoryExpanded ? '收起' : '更多' }}</div> -->
              <!-- 全部 -->
              <a
                href="/skill/"
                class="category-one-item"
                :class="pagination.selectedCateIdOne == '' ? 'active' : ''"
                >全部</a
              >
              <!-- 一级分类 -->
              <a
                v-for="categoryOne in skillCate"
                :key="categoryOne.value"
                class="category-one-item"
                :class="
                  pagination.selectedCateIdOne == categoryOne.value
                    ? 'active'
                    : ''
                "
                :href="`/skill/${categoryOne.value}/`"
                >{{ categoryOne.label }}</a
              >
            </div>
            <!-- 二级分类内容 -->
            <div class="category-two-wrapper">
              <div
                class="category-two-content"
                v-for="categoryOne in skillCate"
                :key="`cate-two-parnet${categoryOne.value}`"
                v-show="pagination.selectedCateIdOne == categoryOne.value"
              >
                <a
                  class="category-two-item"
                  :class="
                    pagination.selectedCateIdTwo == categoryTwo.value
                      ? 'active'
                      : ''
                  "
                  :href="`/skill/${categoryTwo.value}/`"
                  v-for="categoryTwo in categoryOne.children"
                  :key="`cate-two-${categoryTwo.value}`"
                  >{{ categoryTwo.label }}</a
                >
              </div>
            </div>
          </div>
        </div>
        <div class="skill-content">
          <div class="skill-list-wrapper" v-if="skillList.length">
            <div
              class="skill-item"
              v-for="item in skillList"
              :key="item.sale_id"
            >
              <a
                class="cover"
                :href="`/s/${item.sale_id}`"
                :style="{
                  backgroundImage:
                    'url(' +
                    item.coverImage +
                    '?x-oss-process=image/resize,w_800)',
                }"
              >
                <!-- <img
                  class="cover"
                  :src="`${item.coverImage}?x-oss-process=image/resize,w_800`"
                  alt="skillCover,cover"
                /> -->
              </a>
              <a class="title" :href="`/s/${item.sale_id}`">{{ item.title }}</a>
              <a class="owner-wrapper" :href="`/wo/${item.user.uid}/skill`">
                <img class="avatar" :src="item.user.icon_url" alt="avatar" />
                <div class="nickname">{{ item.user.nickname }}</div>
              </a>
              <div class="price-wrapper">
                <div class="price-text">￥{{ item.price }}</div>
                <div v-if="item.buy_num > 0" class="buy-num">
                  {{ item.buy_num }}人已学习
                </div>
              </div>
            </div>
          </div>
          <div class="result-empty-wrapper" v-else>
            <img src="@/assets/img/common/empty@2x.png" alt="empty" />
            <span>暂无搜索内容</span>
          </div>
          <div
            class="pagination-wrapper"
            v-if="pagination.total > pagination.pagesize"
          >
            <el-pagination
              background
              layout="prev, pager, next"
              :current-page="pagination.page"
              :total="pagination.total"
              :page-size="pagination.pagesize"
              @current-change="handlePageChange"
            >
            </el-pagination>
          </div>
        </div>
      </div>
      <div class="skill-wrapper-mobile" v-else>
        <div class="skill-category">
          <div class="skill-category-one">
            <div class="category-scroller">
              <div
                class="skill-category-one-item"
                :class="!pagination.selectedCateIdOne ? 'active' : ''"
                @click="handleClickCategoryOne(0)"
              >
                全部
              </div>
              <div
                class="skill-category-one-item"
                :class="
                  pagination.selectedCateIdOne == category.value ? 'active' : ''
                "
                v-for="category in skillCate"
                :key="`category-one-${category.value}`"
                @click="handleClickCategoryOne(category.value)"
              >
                {{ category.label }}
              </div>
            </div>
            <!-- filter -->
            <div class="filter-bg"></div>
            <div class="filter-wrapper" @click="handleShowCategoryDrawer">
              <img src="@/assets/img/works/filter-icon@2x.png" alt="filter" />
            </div>
          </div>
          <div class="skill-category-two">
            <!-- 全部二级分类 -->
            <div
              class="skill-category-two-wrapper"
              v-show="!pagination.selectedCateIdOne"
            >
              <div
                class="skill-category-two-item"
                :class="
                  pagination.selectedCateIdTwo == category.value ? 'active' : ''
                "
                v-for="category in skillCateAll"
                :key="`category-all-${category.value}`"
                @click="handleClickCategoryTwo(category.value)"
              >
                {{ category.label }}
              </div>
            </div>
            <!-- 接口返回的二级分类 -->
            <div
              class="skill-category-two-wrapper"
              v-for="category in skillCate"
              :key="`category-two-wrapper-${category.value}`"
              v-show="pagination.selectedCateIdOne === category.value"
            >
              <div
                class="skill-category-two-item"
                :class="
                  pagination.selectedCateIdTwo == categoryChild.value
                    ? 'active'
                    : ''
                "
                v-for="categoryChild in category.children"
                :key="`category-two-${categoryChild.value}`"
                @click="handleClickCategoryTwo(categoryChild.value)"
              >
                {{ categoryChild.label }}
              </div>
            </div>
          </div>
        </div>
        <div
          class="skill-list"
          :class="showWxHeader ? 'skill-list__showWxHeader' : ''"
        >
          <ul
            class="skill-list-wrapper"
            v-infinite-scroll="handleLoadMoreSkill"
            :infinite-scroll-disabled="pagination.noMore"
            :infinite-scroll-immediate="false"
          >
            <div
              class="skill-item"
              v-for="item in skillList"
              :key="item.sale_id"
              @click="handleClickSkillItem(item.sale_id)"
            >
              <img
                class="cover"
                v-lazy="`${item.coverImage}?x-oss-process=image/resize,w_800`"
                alt="skillCover,cover"
              />
              <div class="owner-wrapper">
                <img class="avatar" v-lazy="item.user.icon_url" alt="avatar" />
                <div class="nickname">{{ item.user.nickname }}</div>
              </div>
              <div class="title">{{ item.title }}</div>
              <div class="price-wrapper">
                <div class="price-text">￥{{ item.price }}</div>
                <div class="right-info">{{ item.buy_num }}人已学习</div>
              </div>
            </div>
            <!-- 空数据 -->
            <div
              class="result-empty-wrapper"
              v-if="!skillList.length && !pagination.loading"
            >
              <img src="@/assets/img/common/empty@2x.png" alt="empty" />
              <span>暂无搜索内容</span>
            </div>
            <p v-if="pagination.loading" class="skill-list-tips">加载中...</p>
            <p
              v-if="skillList.length && pagination.noMore"
              class="skill-list-tips"
            >
              没有更多了
            </p>
          </ul>
        </div>
        <!-- 弹出的分类选择 -->
        <el-drawer
          ref="categoryDrawer"
          class="category-drawer"
          :visible.sync="showCategoryDrawer"
          direction="ttb"
          :withHeader="false"
        >
          <div class="drawer-category-one">
            <div
              class="drawer-category-one-item"
              :class="currentDrawerCategoryIndex === 0 ? 'active' : ''"
              @click="handleClickDrawerCategoryOne(0)"
            >
              全部
            </div>
            <div
              class="drawer-category-one-item"
              :class="currentDrawerCategoryIndex === index + 1 ? 'active' : ''"
              v-for="(category, index) in skillCate"
              :key="`drawer-category-one-${category.value}`"
              @click="handleClickDrawerCategoryOne(index + 1)"
            >
              {{ category.label }}
            </div>
          </div>
          <div class="drawer-category-two">
            <!-- 全部二级分类 -->
            <div
              class="drawer-category-two-wrapper"
              v-show="currentDrawerCategoryIndex === 0"
            >
              <div
                class="drawer-category-two-item"
                :class="
                  currentDrawerCategoryId == category.value ? 'active' : ''
                "
                v-for="category in skillCateAll"
                :key="`drawer-category-all-${category.value}`"
                @click="handleClickDrawerCategoryTwo(category.value)"
              >
                {{ category.label }}
              </div>
            </div>
            <!-- 接口返回的二级分类 -->
            <div
              class="drawer-category-two-wrapper"
              v-for="(category, index) in skillCate"
              :key="`drawer-category-two-wrapper-${category.value}`"
              v-show="currentDrawerCategoryIndex === index + 1"
            >
              <div
                class="drawer-category-two-item"
                :class="
                  currentDrawerCategoryId == categoryChild.value ? 'active' : ''
                "
                v-for="categoryChild in category.children"
                :key="`drawer-category-two-${categoryChild.value}`"
                @click="handleClickDrawerCategoryTwo(categoryChild.value)"
              >
                {{ categoryChild.label }}
              </div>
            </div>
          </div>
        </el-drawer>
      </div>
      <!-- 
      <aside class="skill-side">
        <div class="section"></div>
        <div class="section"></div>
      </aside> -->
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import DealSeoList from "@/components/skill/dealSeoList";
import qs from "qs";

export default {
  name: "SeoSkillList",
  data() {
    return {
      baseUrl: "",
      // firstLoad: true,
      isWeixinApp: true,
      categoryExpanded: true, // 更多按钮不要，默认为展开状态
      showCategoryDrawer: false,
      currentDrawerCategoryId: 0,
      currentDrawerCategoryIndex: 0,
    };
  },
  head() {
    const {
      title = "",
      keyword = "",
      description = "",
      h1 = "",
      canonical = "",
      metaLocation,
    } = this.head || {};
    let obj = {
      title: title,
      meta: [
        {
          name: "keywords",
          content: keyword,
        },
        {
          name: "description",
          content: description,
        },
        {
          name: "h1",
          content: h1,
        },
      ],
      link: [{ rel: "canonical", href: canonical }],
    };
    if (metaLocation) {
      obj.meta.push({ name: "location", content: metaLocation });
    }
    return obj;
  },
  computed: {
    ...mapState(["deviceType"]),
    showWxHeader() {
      return (
        !this.deviceType.app &&
        !this.isWeixinApp &&
        (this.deviceType.android || this.deviceType.ios)
      );
    },
    mainMarginTop() {
      if (this.mobile && this.showWxHeader) {
        return "64px !important";
      } else if (this.mobile) {
        return "0px !important";
      } else {
        return "20px !important";
      }
    },
  },
  async asyncData({ ...params }) {
    let dealDataObj = new DealSeoList(params);
    let ans = await dealDataObj.dealData();

    return {
      ...ans,
    };
  },
  mounted() {
    this.baseUrl = this.$store.state.domainConfig.siteUrl;
    this.isWeixinApp = navigator.userAgent.indexOf("miniProgram") > -1;
  },
  methods: {
    /** 分页获取技能列表数据 */
    _getSkillList() {
      const self = this;
      const data = {
        type: 1,
        page: this.pagination.page,
        page_size: this.pagination.pagesize,
        cate_id: this.pagination.selectedCateIdTwo,
        status: 2,
        owner_type: 1,
        root_type: this.root_type,
      };

      this.pagination.loading = true;
      this.pagination.noMore = false;

      this.$axios
        .$post("/api/sale/saleList", data)
        .then((res) => {
          if (Number(res.status) === 1) {
            let skillList = res.data.list || [];
            skillList.forEach((item) => {
              let imageList = item.image.split(",");
              item.coverImage = imageList[0] || "";
              imageList.splice(0, 1);
              item.imageList = imageList;
            });

            if (self.mobile) {
              self.skillList = self.skillList.concat(skillList);
            } else {
              self.skillList = skillList;
            }

            self.pagination.total = res.data.total;
            self.pagination.pagesize = res.data.page_size || 9;
            if (
              self.pagination.page * self.pagination.pagesize >=
              self.pagination.total
            ) {
              console.log("noMore true", self.pagination);
              self.pagination.noMore = true;
            } else {
              console.log("noMore false", self.pagination);
              self.pagination.noMore = false;
            }
          }
        })
        .then(() => {
          self.pagination.loading = false;
        });
    },
    /** 点击展开、收起 */
    handleClickExpandCategory() {
      this.categoryExpanded = !this.categoryExpanded;
    },
    /** 点击一级分类时 */
    handleClickCategoryOne(id) {
      if (id === 0) {
        // 点击全部时，移除筛选分类
        this.pagination.selectedCateIdOne = id;
        this.pagination.selectedCateIdTwo = "";
        this.currentDrawerCategoryId = "";
        this.pagination.page = 1;
        this.skillList = [];
        window.scroll(0, 0);

        this._getSkillList();
        return;
      }
      if (this.pagination.selectedCateIdOne !== id) {
        this.pagination.selectedCateIdOne = id;
      }
    },
    /** 点击二级分类时：移动端 */
    handleClickCategoryTwo(id) {
      if (this.pagination.selectedCateIdTwo === id) {
        this.pagination.selectedCateIdTwo = "";
        this.currentDrawerCategoryId = "";
      } else {
        this.pagination.selectedCateIdTwo = id;
        this.currentDrawerCategoryId = id;
      }
      this.pagination.page = 1;
      this.skillList = [];
      window.scroll(0, 0);

      this._getSkillList();
    },
    /** 分页页码改变时 */
    handlePageChange(val) {
      let query = {
        page: val,
      };
      if (this.root_type && Number(this.root_type) > 0) {
        query.root_type = this.root_type;
      }
      window.location.href = `${window.location.origin}${
        window.location.pathname
      }?${qs.stringify(query)}`;
    },
    /** mobile 加载更多 */
    handleLoadMoreSkill() {
      if (this.pagination.loading) {
        return;
      }

      this.pagination.page++;
      this._getSkillList();
    },
    /** 点击筛选时 */
    handleShowCategoryDrawer() {
      this.showCategoryDrawer = true;
    },
    /**
     * 点击 mobile 分类 drawer 一级分类
     */
    handleClickDrawerCategoryOne(id) {
      if (id === 0) {
        this.showCategoryDrawer = false;
        return;
      }
      if (id !== this.currentDrawerCategoryIndex) {
        this.currentDrawerCategoryIndex = id;
      }
    },
    /**
     * 点击 mobile 分类 drawer 二级分类
     */
    handleClickDrawerCategoryTwo(id) {
      if (this.currentDrawerCategoryId === id) {
        this.pagination.selectedCateIdTwo = "";
      } else {
        this.pagination.selectedCateIdTwo = id;
      }
      this.currentDrawerCategoryId = id;
      this.showCategoryDrawer = false;
      this.pagination.page = 1;
      this.skillList = [];
      window.scroll(0, 0);

      this._getSkillList();
    },
    /**
     * 点击 mobile 的一项技能时
     */
    handleClickSkillItem(saleId) {
      if (this.deviceType.android || this.deviceType.ios) {
        // 端跳转
        let jumpUrl = `${this.baseUrl}/s/${saleId}`;
        location.href = `proginn://webview?url=${jumpUrl}`;
      } else {
        // web 跳转
        location.href = `/s/${saleId}`;
      }
    },
    /**
     * 点击成为讲师
     */
    handleClickAdd() {
      location.href = "/workbench/skill/index";
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/css/skill/list.scss";
</style>
<style lang="scss">
.category-drawer {
  .el-drawer {
    height: 100vh !important;
    .el-drawer__body {
      position: relative;
      width: 100%;
      display: flex;
    }
  }
  .drawer-category-one {
    width: 100px;
    height: 100vh;
    padding-bottom: 34px;
    background: #f4f5f9;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    &::-webkit-scrollbar {
      display: none;
    }
    .drawer-category-one-item {
      width: 100%;
      height: 50px;
      line-height: 50px;
      text-align: center;
      font-size: 15px;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 500;
      color: #222222;
      background: inherit;
      &.active {
        color: #308eff;
        background: #ffffff;
      }
    }
  }
  .drawer-category-two {
    width: calc(100% - 100px);
    height: 100vh;
    padding: 4px 10px 34px;
    background: #ffffff;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    &::-webkit-scrollbar {
      display: none;
    }
    .drawer-category-two-wrapper {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      .drawer-category-two-item {
        margin: 8px 8px 0 0;
        padding: 0 12px;
        height: 35px;
        line-height: 35px;
        background: rgba(244, 245, 249, 0.8);
        border-radius: 4px;
        // opacity: 0.8;
        font-size: 13px;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        color: #222222;
        &.active {
          height: 33px;
          line-height: 33px;
          border: 1px solid #308eff;
          background: #ffffff;
          font-size: 12px;
          font-family: PingFangSC, PingFangSC-Medium;
          font-weight: 500;
          color: #308eff;
        }
      }
    }
  }
}
.wx-header-custom-list {
  position: fixed !important;
  z-index: 11 !important;
}
</style>