pc--vr/src/views/personal/index.vue

<script setup>
import { placeholderPic } from "~/utils/util";

import ExperienceCard from "./components/ExperienceCard.vue";
import Routers from "./components/Routers.vue";
import MomentLayout from "~/components/MomentLayout/index.vue";
import Level from "~/components/Level/index.vue";
import { useUser } from "~/store/user";
import { onMounted, reactive, ref, watch, watchEffect } from "vue";
import {
  PERSONAL_SUB_NAV_LIST,
  PERSONAL_SECOND_SUB_NAV_LIST,
} from "~/utils/constance";
import { usePersonalIndexList } from "~/useHook/usePersonalIndex";
import debounce from "loadsh/debounce";
import * as follow from "~/api/user";
import * as collect from "~/api/gather";
import { useRoute, useRouter } from "vue-router";
import * as delApi from "~/api/forum";
import * as artivleApi from "~/api/article";
import * as videoApi from "~/api/video";
import * as infoApi from "~/api/news";
import { CaretBottom, Search } from "@element-plus/icons-vue";
const router = useRouter();
const subNavCurrent = ref("forum");
//勋章列表
const boutiqueList = ref([]);
const boutique_post = async (id) => {
  try {
    const { data } = await follow.badge({
      code: "boutique_post",
    });
    boutiqueList.value = data;
  } catch (error) {}
};
onMounted(boutique_post);
//点赞勋章
const likeList = ref([]);
const like = async (id) => {
  try {
    const { data } = await follow.badge({
      code: "like",
    });
    likeList.value = data;
  } catch (error) {}
};
onMounted(like);
//发帖/回帖勋章
const postList = ref([]);
const post = async (id) => {
  try {
    const { data } = await follow.badge({
      code: "post",
    });
    postList.value = data;
  } catch (error) {}
};
onMounted(post);
//拍摄勋章
const shootList = ref([]);
const shoot = async (id) => {
  try {
    const { data } = await follow.badge({
      code: "post",
    });
    shootList.value = data;
  } catch (error) {}
};
onMounted(shoot);

//删除
const delect = (id) => {
  if (subNavCurrent.value == "forum") {
    delecta(id);
  }
  if (subNavCurrent.value == "news") {
    //资讯
    delectd(id);
  }
  if (subNavCurrent.value == "article") {
    delectb(id);
  }
  if (subNavCurrent.value == "video") {
    delectc(id);
  }
};
//帖子删除
const delecta = async (id) => {
  try {
    const { data } = await delApi.del({
      id: id,
    });
    ElMessage({
      message: "删除成功",
      type: "success",
    });
    refrenshTableData();
  } catch (error) {}
};
//文章删除
const delectb = async (id) => {
  try {
    const { data } = await artivleApi.del({
      id: id,
    });
    ElMessage({
      message: "删除成功",
      type: "success",
    });
    refrenshTableData();
  } catch (error) {}
};
//视频删除
const delectc = async (id) => {
  try {
    const { data } = await videoApi.del({
      id: id,
    });
    ElMessage({
      message: "删除成功",
      type: "success",
    });
    refrenshTableData();
  } catch (error) {}
};
//咨询删除
const delectd = async (id) => {
  try {
    const { data } = await infoApi.del({
      id: id,
    });
    ElMessage({
      message: "删除成功",
      type: "success",
    });
    refrenshTableData();
  } catch (error) {}
};

//跳转到详情
const todetail = (id) => {
  //帖子
  if (subNavCurrent.value == "forum") {
    router.push({
      name: "post",
      query: {
        id: id,
      },
    });
  }
  if (subNavCurrent.value == "news") {
    router.push({
      name: "news",
      query: {
        id: id,
      },
    });
  }
  if (subNavCurrent.value == "article") {
    router.push({
      name: "articles",
      query: {
        id: id,
      },
    });
  }
  if (subNavCurrent.value == "video") {
    router.push({
      name: "videos",
      query: {
        id: id,
      },
    });
  }
};
//跳转到详情
const todetails = (id) => {
  //帖子
  if (secondSubNavCurrent.value == "post") {
    router.push({
      name: "post",
      query: {
        id: id,
      },
    });
  }
  if (secondSubNavCurrent.value == "info") {
    router.push({
      name: "news",
      query: {
        id: id,
      },
    });
  }
  if (secondSubNavCurrent.value == "article") {
    router.push({
      name: "articles",
      query: {
        id: id,
      },
    });
  }
  if (secondSubNavCurrent.value == "video") {
    router.push({
      name: "videos",
      query: {
        id: id,
      },
    });
  }
  if (secondSubNavCurrent.value == "integral_goods") {
    router.push({
      path: "/store/pointshoping/:id",
      query: {
        id: id,
      },
    });
  }
};

const route = useRoute();
//弹出层
const dialogVisible = ref(false);
const User = useUser();
console.log("User", User.id);

const backgroud_image = ref();
backgroud_image.value = User.backgroud_image;
//修改背景图
const handleRemove = (value) => {
  backgroud_image.value = value.data.url;
  __image__();
};
//更换背景图接口
const __image__ = async () => {
  try {
    const { data } = await follow.updata({
      backgroud_image: backgroud_image.value,
    });
    ElMessage.success({
      message: "更改成功",
      type: "success",
    });
  } catch (error) {}
};

//弹出层
const attention = () => {
  dialogVisible.value = true;
};

//关注
const atten = async (id) => {
  try {
    const { data } = await follow.userfollow({
      id: id,
    });
    ElMessage({
      message: "操作成功",
      type: "success",
    });
    if (inde.value == 0) {
      __articles__();
    } else {
      __fans__();
    }
  } catch (error) {}
};

const inde = ref(0);
//关注列表
const guan = (id) => {
  inde.value = id;
  if (id == 0) {
    __articles__();
  } else {
    __fans__();
  }
};
//关注列表
const fllowlist = ref([]);
const __fans__ = async () => {
  try {
    const { data } = await follow.fans({
      is_page: 0,
    });
    fllowlist.value = data;
  } catch (error) {}
};
//粉丝列表
const __articles__ = async () => {
  try {
    const { data } = await follow.follow({
      is_page: 0,
    });
    fllowlist.value = data;
  } catch (error) {}
};
onMounted(__articles__);

console.log("user see>>", User);

// forum, news, article, video, collect
if (route.query.subNavCurrent) {
  subNavCurrent.value = "collect";
}
// default value 'forum'
const subNavList = PERSONAL_SUB_NAV_LIST;

const handleSwitchSubNav = debounce((type) => {
  if (subNavCurrent.value === type) return;
  subNavCurrent.value = type;
}, 160);

// news, article, video, forum, goods
const secondSubNavCurrent = ref("info"); // second nav
const secondSubNavList = PERSONAL_SECOND_SUB_NAV_LIST;
const subList = ref([]);
const __subnav__ = async () => {
  try {
    const { data } = await collect.summary({
      is_page: 0,
      source_type: secondSubNavCurrent.value,
      type: "collect",
    });
    subList.value = data;
    console.log(subList.value);
  } catch (error) {}
};
onMounted(__subnav__);
// 防抖
const handleSwitchSecondSubNav = debounce((type) => {
  if (secondSubNavCurrent.value === type) return;
  secondSubNavCurrent.value = type;
  __subnav__();
}, 240);

// 首页列表数据
const params = reactive({
  // page: 1,
  limit: 999,
  is_page: 0,
  source_type: "",
  type: "single",
  title: "",
  author_id: "",
  topic_id: "",
  is_boutique: 0, // 是否精品: 0.否, 1.是
  // order: "", // 排序字段: id. ID, published_at.发布时间, 默认发布时间
  order_type: "", // 排序类型: desc.降序, asc.升序
});

const __reset_params__ = () =>
  Object.assign(params, {
    // page: 1,
    limit: 999,
    is_page: 0,
    source_type: "",
    type: "single",
    title: "",
    author_id: User.id,
    topic_id: "",
    is_boutique: 0, // 是否精品: 0.否, 1.是
    // order: "id", // 排序字段: id. ID, published_at.发布时间, 默认发布时间
    order_type: "desc", // 排序类型: desc.降序, asc.升序
  });

// 监听 `subNavCurrent` 进行数据请求
watchEffect(() => {
  let temporary = {};
  switch (subNavCurrent.value) {
    case "forum":
      temporary.source_type = "post";
      break;
    case "news":
      temporary.source_type = "info";
      break;
    case "article":
      temporary.source_type = "article";
      break;
    case "video":
      temporary.source_type = "video";
      break;
    // case "collect":
    //   // temporary.source_type = '<++>'
    //   break;
  }

  console.log(
    "%c ----- >>>",
    "background: blue; color: #fff",
    subNavCurrent.value
  );

  // 收藏接口不走接口
  if (subNavCurrent.value === "collect") {
    __subnav__();
  } else {
    Object.assign(params, __reset_params__(), temporary);
  }
});

// onMounted()
const { tableData, pagination, refrenshTableData } =
  usePersonalIndexList(params);

const handleRefreshListData = () => {
  refrenshTableData();
  usePersonalIndexList();
};
//其他用户信息接口
const __other__ = async (id) => {
  try {
    const { data } = await user.other({
      user_id: id,
    });
    userInfo.value = data;
  } catch (error) {}
};
//其他用户信息
const other = (id) => {
  type.value = "other";
  __other__(id);
};
</script>

<template>
  <div class="personal-container">
    <!-- header -->
    <div class="personal-header">
      <div
        :style="
          User.backgroud_image
            ? `background-image: url(${backgroud_image})`
            : ''
        "
        class="pheader"
        style="display: flex; justify-content: space-between; height: 184px"
      >
        <div class="pinfo flex-row flex-aic" style="margin-top: 50px">
          <div>
            <div class="flex-row flex-aic">
              <img :src="User.avatar" alt="" class="avatar circle" />
              <div class="pinfo__info">
                <div class="rheader flex-row flex-aic">
                  <div class="name">{{ User.name || "匿名用户" }}</div>
                  <Level :level="User.level" full />
                  <div class="tags flex-row flex-aic">
                    <div v-if="User.is_vip == 1">
                      <img
                        src="../../assets/bage/icon3.png"
                        style="width: 22px; height: 22px"
                        alt=""
                      />
                    </div>
                    <el-dropdown>
                      <div v-if="User.boutique_post_badge != ''">
                        <img
                          :src="User.boutique_post_badge"
                          style="width: 22px; height: 22px"
                          alt=""
                        />
                      </div>
                      <template #dropdown>
                        <el-dropdown-menu>
                          <el-dropdown-item
                            v-for="(item, idx) in boutiqueList"
                            :key="idx"
                          >
                            {{ item.full_name }}
                            <span style="margin-left: 10px"
                              >({{ item.complete_time }}/{{ item.times }})
                            </span>
                          </el-dropdown-item>
                        </el-dropdown-menu>
                      </template>
                    </el-dropdown>
                    <el-dropdown>
                      <div v-if="User.like_badge != ''">
                        <img
                          :src="User.like_badge"
                          style="width: 22px; height: 22px"
                          alt=""
                        />
                      </div>
                      <template #dropdown>
                        <el-dropdown-menu>
                          <el-dropdown-item
                            v-for="(item, idx) in likeList"
                            :key="idx"
                          >
                            {{ item.full_name }}
                            <span style="margin-left: 10px"
                              >({{ item.complete_time }}/{{ item.times }})
                            </span>
                          </el-dropdown-item>
                        </el-dropdown-menu>
                      </template>
                    </el-dropdown>
                    <el-dropdown>
                      <div v-if="User.post_badge != ''">
                        <img
                          :src="User.post_badge"
                          style="width: 22px; height: 22px"
                          alt=""
                        />
                      </div>
                      <template #dropdown>
                        <el-dropdown-menu>
                          <el-dropdown-item
                            v-for="(item, idx) in postList"
                            :key="idx"
                          >
                            {{ item.full_name }}
                            <span style="margin-left: 10px"
                              >({{ item.complete_time }}/{{ item.times }})
                            </span>
                          </el-dropdown-item>
                        </el-dropdown-menu>
                      </template>
                    </el-dropdown>
                    <el-dropdown>
                      <div v-if="User.shoot_badge != ''">
                        <img
                          :src="User.shoot_badge"
                          style="width: 22px; height: 22px"
                          alt=""
                        />
                      </div>
                      <template #dropdown>
                        <el-dropdown-menu>
                          <el-dropdown-item
                            v-for="(item, idx) in shootList"
                            :key="idx"
                          >
                            {{ item.full_name }}
                            <span style="margin-left: 10px"
                              >({{ item.complete_time }}/{{ item.times }})
                            </span>
                          </el-dropdown-item>
                        </el-dropdown-menu>
                      </template>
                    </el-dropdown>
                  </div>
                </div>
                <div class="rdesc">{{ User.introduction }}</div>
              </div>
            </div>
            <div class="register">注册日期：{{ User.created_at.slice(0,10) }}</div>
          </div>
        </div>
        <!-- bg-image -->
        <!-- <div>
          <el-upload
            class="upload-demo"
            action="https://www.yixiangvr.com/api/upload/file"
            :on-success="handleRemove"
            :show-file-list="false"
          >
            <span class="change-bgc">更换背景图</span>
          </el-upload>
        </div> -->
      </div>
      <div class="sub-nav">
        <div class="sub-nav__main flex-row flex-jc-sb">
          <div class="snm-left">
            <ul class="flex-row flex-aic">
              <li
                :class="subNavCurrent === nav.value ? 'active' : ''"
                v-for="(nav, idx) in subNavList"
                @click="handleSwitchSubNav(nav.value)"
                :key="idx"
              >
                <span>{{ nav.label }}</span>
              </li>
            </ul>
          </div>
          <ul class="snm-right flex-row flex-aic">
            <li
              @click="attention()"
              style="
                cursor: pointer;
                display: flex;
                flex-direction: column;
                align-items: center;
              "
            >
              <div class="xtit" @click="dialogVisible = true">已关注</div>
              <span>{{ User.follow_count }}</span>
            </li>
            <li
              @click="attention()"
              style="
                cursor: pointer;
                display: flex;
                flex-direction: column;
                align-items: center;
              "
            >
              <div class="xtit">被关注</div>
              <span>{{ User.fans_count }}</span>
            </li>
          </ul>
        </div>
        <div class="sub-nav__footer" v-show="subNavCurrent === 'collect'">
          <ul class="flex-row flex-aic">
            <li
              :class="secondSubNavCurrent === nav.value ? 'active' : ''"
              v-for="(nav, idx) in secondSubNavList"
              @click="handleSwitchSecondSubNav(nav.value)"
              :key="idx"
            >
              <span>{{ nav.label }}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <!-- main -->
    <div class="personal-main flex-row flex-jc-sb">
      <div class="pm-content">
        <!-- 理应只有4种适配 -->
        <template
          v-if="['forum', 'news', 'article', 'video'].includes(subNavCurrent)"
        >
          <template v-for="(item, idx) in tableData" :key="idx">
            <MomentLayout
              @delec="delect(item.id)"
              @other="other(item.id)"
              :type="subNavCurrent"
              :detail="item"
              @refresh="handleRefreshListData"
              @detail="todetail(item.id)"
            />
          </template>
        </template>
        <!-- 收藏 -->
        <div v-else>
          <div
            v-if="
              secondSubNavCurrent == 'info' ||
              secondSubNavCurrent == 'article' ||
              secondSubNavCurrent == 'video'
            "
            class="flex-row"
            style="column-gap: 16px; flex-wrap: wrap"
          >
            <template v-for="(item, idx) in subList" :key="idx">
              <IndexNews
                style="width: 260px"
                @update="todetails(item.id)"
                :title="item.title"
                :time-ago="item.published_at"
                :like-count="item.like_count || '0'"
                :comment-count="item.comment_count || '0'"
                :image="item.image"
                :is_like="item.is_like"
                :is_collect="item.is_collect"
              />
            </template>
          </div>
          <div
            v-if="secondSubNavCurrent == 'post'"
            class="flex-row"
            style="column-gap: 20px; flex-wrap: wrap"
          >
            <template v-for="(item, idx) in subList" :key="idx">
              <div @click="todetails(item.id)" class="lunbox">
                <img
                  :src="item.images[0] || ''"
                  style="width: 112px; height: 112px"
                  alt=""
                />
                <div style="margin-left: 10px">
                  <div class="cont">{{ item.content }}</div>
                  <div class="smell">
                    <span>{{ item.like_count }}喜欢·</span>
                    <span>{{ item.comment_count }}评论</span>
                  </div>
                </div>
              </div>
            </template>
          </div>
          <div
            v-if="secondSubNavCurrent == 'integral_goods'"
            class="flex-row"
            style="column-gap: 20px; flex-wrap: wrap"
          >
            <template v-for="(item, idx) in subList" :key="idx">
              <div
                @click="todetails(item.id)"
                class="goodsbox"
                style="margin-bottom: 20px"
              >
                <img
                  :src="item.image"
                  style="width: 182px; height: 182px"
                  alt=""
                />
                <div style="margin-left: 10px">
                  <div
                    style="margin-top: 14px; text-align: center"
                    class="name"
                  >
                    {{ item.name }}
                  </div>
                  <div
                    style="margin-top: 10px; text-align: center"
                    class="price"
                  >
                    {{ item.price }}积分
                  </div>
                </div>
              </div>
            </template>
          </div>
        </div>
      </div>
      <div class="pm-side">
        <ExperienceCard />
        <div class="gap"></div>
        <Routers />
      </div>
    </div>
  </div>

  <!-- 弹出层 -->
  <el-dialog
    v-model="dialogVisible"
    width="500px"
    style="height: 560px; border-radius: 10px"
    :show-close="true"
  >
    <div style="padding: 0px 24px; box-sizing: border-box">
      <div style="display: flex; margin-top: -20px">
        <div :class="inde == 0 ? 'active' : 'toptitle'" @click="guan(0)">
          已关注
        </div>
        <div
          :class="inde == 1 ? 'active' : 'toptitle'"
          style="margin-left: 46px"
          @click="guan(1)"
        >
          被关注
        </div>
      </div>
      <div v-if="fllowlist.length > 0">
        <div class="boxa" v-for="(item, idx) in fllowlist" :key="idx">
          <div style="display: flex">
            <img
              :src="item.avatar"
              style="width: 46px; height: 46px; border-radius: 50%"
              alt=""
            />
            <div style="margin-left: 12px">
              <div class="name">{{ item.username }}</div>
              <div class="info">{{ item.introduction || "" }}</div>
            </div>
          </div>
          <div>
            <div
              class="attention"
              @click="atten(item.id)"
              v-if="item.is_follow == 0"
            >
              关注
            </div>
            <div
              class="atten"
              @click="atten(item.id)"
              v-if="item.is_follow == 1"
            >
              已关注
            </div>
          </div>
        </div>
      </div>
      <div
        v-else
        style="
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          height: 450px;
        "
      >
        <div>还没有内容</div>
      </div>
    </div>
  </el-dialog>
</template>

<style lang="scss" scoped>
.register {
  font-family: SFPro, SFPro;
  font-weight: 400;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  line-height: 14px;
  text-align: left;
  font-style: normal;
  margin-top: 12px;
}
@import "~/styles/variable.scss";
.name {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 12px;
  color: #444444;
  line-height: 17px;
  text-align: justify;
  font-style: normal;
  height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.goodsbox {
  width: 222px;
  height: 276px;
  border: 1px solid #e3e3e3;
  padding: 20px 20px 13px;
  box-sizing: border-box;
}
.smell {
  font-family: SFPro, SFPro;
  font-weight: 400;
  font-size: 12px;
  color: #777777;
  line-height: 14px;
  text-align: left;
  font-style: normal;
  margin-top: 16px;
}
.lunbox {
  width: 374px;
  height: 132px;
  background: #ffffff;
  border-radius: 6px;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  margin-bottom: 20px;
}
.cont {
  width: 232px;
  height: 72px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 13px;
  color: #333333;
  line-height: 18px;
  text-align: justify;
  font-style: normal;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.active {
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 18px;
  color: #222222;
  line-height: 25px;
  text-align: justify;
  font-style: normal;
}
.toptitle {
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 18px;
  color: #999999;
  line-height: 25px;
  text-align: justify;
  font-style: normal;
}
.atten {
  width: 92px;
  height: 38px;
  background: #c7cbcc;
  border-radius: 4px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #ffffff;
  line-height: 38px;
  text-align: center;
  font-style: normal;
  cursor: pointer;
}
.attention {
  background: #00b0b0;
  border-radius: 4px;
  width: 92px;
  height: 38px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #ffffff;
  line-height: 38px;
  text-align: center;
  font-style: normal;
  cursor: pointer;
}
.name {
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 14px;
  color: #333333;
  line-height: 20px;
  text-align: justify;
  font-style: normal;
}
.info {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 10px;
  color: #777777;
  line-height: 14px;
  text-align: justify;
  font-style: normal;
  margin-top: 4px;
  width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.boxa {
  display: flex;
  justify-content: space-between;
  margin-top: 32px;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.personal {
  // &-container {}

  &-header {
    background-color: #fff;
    margin-bottom: 16px;

    .change-bgc {
      width: 74px;
      height: 26px;
      background: rgba(255, 255, 255, 0.16);
      border-radius: 2px;
      font-size: 12px;
      font-weight: 400;
      color: #ffffff;
      float: right;
      line-height: 26px;
      text-align: center;
      cursor: pointer;
    }

    .pheader {
      padding: 20px;
      background-color: rgba(0, 0, 0, 0.18);
      box-sizing: border-box;
      background-repeat: no-repeat;
      background-position: cover;
      background-attachment: fixed;
      background-size: 100% 100%;
      .pinfo {
        .avatar {
          width: 60px;
          height: 60px;
          margin-right: 16px;
        }

        .rheader {
          column-gap: 10px;
        }

        .name {
          font-size: 18px;
          font-weight: 500;
          color: #ffffff;
        }

        .rdesc {
          margin-top: 10px;
          font-size: 13px;
          font-weight: 400;
          color: rgba(255, 255, 255, 0.5);
        }

        .tags {
          column-gap: 6px;
        }
      }
    }

    .sub-nav {
      &__main {
        padding: 12px 24px;

        .snm-left {
          ul {
            column-gap: 36px;
          }

          li {
            cursor: pointer;
            padding: 10px 0;

            &.active {
              border-bottom: 3px solid $color-primary;
            }
          }
        }

        .snm-right {
          column-gap: 50px;

          .xtit {
            font-size: 12px;
            font-weight: 400;
            color: #555555;
            line-height: 17px;
          }

          span {
            font-size: 18px;
            font-weight: 400;
            color: #333333;
            line-height: 22px;
          }
        }
      }

      &__footer {
        padding: 10px 14px;
        column-gap: 20px;

        li {
          padding: 8px 10px;
          font-size: 14px;
          font-weight: 500;
          color: #555555;
          border-radius: 3px;
          cursor: pointer;

          &.active {
            color: #fff;
            background-color: $color-primary;
          }
        }
      }
    }
  }

  &-main {
    column-gap: 16px;

    .pm-content {
      width: 0;
      flex: 1;
      // background-color: rgba(255, 255, 255, 0.46);

      .moment-layout-container {
        border-radius: 8px;
        margin-bottom: 20px;

        &:last-child {
          margin-bottom: initial;
        }
      }
    }

    .pm-side {
      width: 314px;

      .gap {
        height: 16px;
      }
    }
  }
}
</style>