pc--vr/src/components/layouts/Header.vue

<script setup>
import { ref, onMounted } from "vue";
import { Search, Promotion, Avatar } from "@element-plus/icons-vue";
import { useUser } from "~/store/user.js";
import ActivateMembership from "~/components/ActivateMembership/index.vue";
import SvgIcon from "~/components/SvgIcon/index.vue";
import Login from "~/components/Login/Login.vue";
import Level from "~/components/Level/index.vue";
import * as qianApi from "~/api/qiandao";
import { getPicUrl } from "~/utils/util";
import * as taskApi from "~/api/task";
import { useRouter } from "vue-router";
const tosuccess = (type)=>{
  if(type=='browse'){
    router.replace({
      name:'Forum'
    })
  }
}

const router = useRouter();
// 弹出层
const dialogVisible = ref(false);
//退出
const clearLocalStorage = () => {
  localStorage.clear();
  dialogVisible.value = false;
  router.go(0);
};
//跳转到个人信息
const topersonal = () => {
  router.push({
    path: "/personal",
  });
};

//任务列表
let taskList = ref([]);
const __task__ = async () => {
  try {
    const { data } = await taskApi.list({
      is_page: 0,
      // type: "once_repeat",
    });
    taskList.value = data.reverse();
  } catch (error) {}
};
onMounted(__task__);

const User = useUser();
console.log("user", User.name);
let wid = User.already_upgrade_rate * 100 || 0;
console.log(User.already_upgrade_rate);

const keyword = ref(""); // Search keyword

//等级奖励
const levelList = ref([]);
const __level__ = async () => {
  try {
    const { data } = await qianApi.level({
      is_page: 0,
    });
    levelList.value = data;
  } catch (error) {}
};
onMounted(__level__);
//领取奖励
const toget = (id, type) => {
  __leve__(id, type);
};
//领取等级奖励接口
const __leve__ = async (id) => {
  try {
    const { data } = await qianApi.levelPrize({
      id: id,
      address_id: "",
    });
    __level__();
    ElMessage.success({
      message: "领取成功",
      type: "success",
    });
  } catch (error) {}
};

const momentList = ref([
  {
    label: "论坛",
    icon: getPicUrl("../../assets/cicons/send-01.png", import.meta.url),
    type: "", // 类型跳转发布时的type
  },
  {
    label: "文章",
    icon: getPicUrl("../../assets/cicons/send-02.png", import.meta.url),

    type: "", // 类型跳转发布时的type
  },
  {
    label: "资讯",
    icon: getPicUrl("../../assets/cicons/send-03.png", import.meta.url),

    type: "", // 类型跳转发布时的type
  },
  {
    label: "视频",
    icon: getPicUrl("../../assets/cicons/send-04.png", import.meta.url),

    type: "", // 类型跳转发布时的type
  },
  {
    label: "草稿箱",
    icon: getPicUrl("../../assets/cicons/send-05.png", import.meta.url),
    type: "", // 类型跳转发布时的type
  },
]);

const handleClickMoment = (moment) => {
  console.log(
    "%c click moment item >>>",
    "background: blue; color: #fff",
    moment
  );
};

//兑换
const toinform = (idx) => {
  if (idx == 0) {
    router.push({
      path: "/conversion",
      query: {},
    });
  }
};

//通知
const inform = (idx) => {
  router.push({
    path: "/inform",
    query: {},
  });
};

let pan = ref(false);
//开通会员
const member = () => {
  pan.value = true;
};

// Login logic
const visibilityLoginDialog = ref(false);
const handleLogin = () => {
  visibilityLoginDialog.value = true;
};

const attention = (idx) => {
  if (idx == 0) {
    router.replace({
      name: "Follow",
    });
  } else {
    router.replace({
      name: "Home",
    });
  }
};
</script>

<template>
  <div class="header-container flex-row flex-aic flex-jc-sb">
    <div class="logo">ny-logo</div>
    <div class="header__content flex-row flex-aic flex-jc-sb">
      <el-input
        v-model="keyword"
        class="searchbox"
        placeholder="VR拍摄"
        :suffix-icon="Search"
      />
      <el-button-group>
        <el-button @click="attention(0)">关注</el-button>
        <el-button @click="attention(1)" type="primary">最新</el-button>
      </el-button-group>
      <div class="header__content__right flex-row flex-aic">
        <el-popover
          popper-class="vip-poperclass"
          placement="bottom"
          :width="332"
          trigger="click"
        >
          <template #reference>
            <el-button class="vip-btn">
              <SvgIcon name="crown" :size="19" :rgap="3" color="#523618" />
              忆象会员
            </el-button>
          </template>
          <div class="vip-container">
            <div class="vip-card flex-col flex-jc-sb">
              <div class="vip-card__header flex-row">
                <div class="vip-avatar">
                  <img :src="User.avatar" :alt="User.name" class="circle" />
                </div>
                <div class="vip-userinfo">
                  <div class="vname">{{ User.name }}</div>
                  <div class="vdesc">{{ User.introduction }}</div>
                </div>
              </div>
              <div class="vip-card__footer flex-row flex-jc-sb">
                <template v-if="User.is_vip">
                  <span style="width: 170px"
                    >会员有效期至{{ User.vip_expired_at }}</span
                  >
                  <span @click="member">立即续费</span>
                </template>
                <template v-else>
                  <span>开通会员享权益</span>
                  <span @click="member">立即开通</span>
                </template>
              </div>
            </div>
            <!-- NOTE: VIP 签到奖励 -->
            <!-- NOTE: 三种状态, 已领取/领取/未达标 -->
            <div class="vip-sign-prizes">
              <div
                class="prize-box"
                v-for="(item, idx) in levelList"
                :key="idx"
              >
                <div class="prize-box__img"></div>
                <div class="prize-box__title">等级达到{{ item.level }}级</div>
                <div class="prize-box__sub-title">{{ item.prize_name }}</div>
                <el-button type="primary" disabled v-if="item.is_received == 1"
                  >已领取</el-button
                >
                <el-button
                  type="primary"
                  v-if="item.is_received == 0 && item.is_qualified == 1"
                  @click="toget(item.id, item.prize_type)"
                  >领取</el-button
                >
                <el-button link disabled v-if="item.is_qualified == 0"
                  >未达标</el-button
                >
              </div>
            </div>
            <div class="vip-footer">等级奖励</div>
          </div>
        </el-popover>
        <!-- NOTE: 邀请好友&发布 用户登录才有 -->
        <template v-if="User.token">
          <el-button type="primary">
            <SvgIcon name="people" :size="19" color="#ffffff" />
            邀请好友
          </el-button>
          <!-- NOTE: 发布内容 -->
          <el-popover placement="bottom" :width="120" trigger="click">
            <template #reference>
              <el-button type="primary" :icon="Promotion">发布</el-button>
            </template>
            <div class="moment-container">
              <ul>
                <li
                  v-for="(moment, idx) in momentList"
                  :key="idx"
                  class="flex-row flex-aic"
                  @click="handleClickMoment(moment)"
                >
                  <img :src="moment.icon" :alt="moment.label" class="icon" />
                  <span class="moment__label">{{ moment.label }}</span>
                </li>
              </ul>
            </div>
          </el-popover>

          <el-button link @click="inform">
            <SvgIcon name="ding" :size="24"></SvgIcon>
          </el-button>
          <!-- NOTE: User Avatar container -->
          <el-popover placement="bottom-start" :width="276" trigger="click">
            <template #reference>
              <div class="userinfo-avatar">
                <img class="circle" :src="User.avatar" :alt="User.name" />
              </div>
            </template>
            <div class="userinfo-container uc">
              <div class="uc__avatar" @click="topersonal">
                <img class="circle" :src="User.avatar" :alt="User.name" />
              </div>
              <div class="uc__name">{{ User.name }}</div>
              <!-- TODO: 用户徽章 -->
              <div class="uc__flags">
                <img src="" alt="" />
              </div>
              <div class="uc__integral flex-row flex-aic flex-jc-sb">
                <span class="integral_text"
                  >当前积分{{ User.integral_sum }}，差{{
                    User.left_upgrade
                  }}升级</span
                >
                <el-dropdown>
                  <el-button class="task-btn" link>任务列表</el-button>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <!-- 点赞 -->
                      <div v-for="(item, idx) in taskList" :key="idx">
                        <el-dropdown-item>
                          <div
                            style="
                              width: 320px;
                              padding: 12px 8px;
                              box-sizing: border-box;
                              display: flex;
                              justify-content: space-between;
                              align-items: center;
                            "
                          >
                            <div style="display: flex">
                              <img
                                style="width: 34px; height: 34px"
                                :src="item.image"
                                alt=""
                              />
                              <div style="margin-left: 8px">
                                <div class="title">
                                  {{ item.name }}({{ item.finished_times }}/{{
                                    item.times
                                  }})
                                </div>
                                <div
                                  v-if="item.status == 'finished'"
                                  class="bottom"
                                >
                                  +经验{{ item.integral }}
                                </div>
                                <div
                                  v-if="item.status == 'pending'"
                                  class="bottom"
                                  style="color: #777777"
                                >
                                  +经验{{ item.integral }}
                                </div>
                              </div>
                            </div>
                            <div
                              class="success"
                              v-if="item.status == 'pending'"
                              style="background: #00b0b0"
                              @click="tosuccess(item.source_type)"
                            >
                              去完成
                            </div>
                            <div class="success" v-else>已完成</div>
                          </div>
                        </el-dropdown-item>
                      </div>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
              <div class="uc__grade">
                <div class="uc__grade__show-bar">
                  <div class="sb-inside" :style="{ width: wid + '%' }"></div>
                </div>
                <div class="uc__grade_txt flex-row flex-jc-sb">
                  <Level :level="User.level" full />
                  <Level :level="User.level + 1" />
                </div>
              </div>
              <div class="uc__part">
                <div>
                  <div>{{ User.follow_count || 0 }}</div>
                  <div>关注</div>
                </div>
                <div>
                  <div>{{ User.fans_count || 0 }}</div>
                  <div>粉丝</div>
                </div>
                <div>
                  <div>{{ User.collect_count || 0 }}</div>
                  <div>收藏</div>
                </div>
                <div>
                  <div>{{ User.view_count || 0 }}</div>
                  <div>足迹</div>
                </div>
              </div>
              <div class="uc__gap"></div>
              <div class="uc__item">
                <div class="itembox" @click="toinform(0)">
                  <div class="icon">
                    <img
                      src="../../assets/cicons/header-01.png"
                      style="width: 20px; height: 20px"
                      alt=""
                    />
                  </div>
                  <div class="label">兑换记录</div>
                </div>
                <div class="itembox" @click="toinform(1)">
                  <div class="icon">
                    <img
                      src="../../assets/cicons/header-02.png"
                      style="width: 20px; height: 20px"
                      alt=""
                    />
                  </div>
                  <div class="label">预约记录</div>
                </div>
                <div class="itembox" @click="toinform(2)">
                  <div class="icon">
                    <img
                      src="../../assets/cicons/header-03.png"
                      style="width: 20px; height: 20px"
                      alt=""
                    />
                  </div>
                  <div class="label">租赁记录</div>
                </div>
                <div class="itembox" @click="toinform(3)">
                  <div class="icon">
                    <img
                      src="../../assets/cicons/header-04.png"
                      style="width: 20px; height: 20px"
                      alt=""
                    />
                  </div>
                  <div class="label" @click="toinform(4)">签到奖励</div>
                </div>
                <div class="itembox">
                  <div class="icon">
                    <img
                      src="../../assets/cicons/header-05.png"
                      style="width: 20px; height: 20px"
                      alt=""
                    />
                  </div>
                  <div class="label">积分明细</div>
                </div>
                <div class="itembox" @click="toinform(5)">
                  <div class="icon">
                    <img
                      src="../../assets/cicons/header-06.png"
                      style="width: 20px; height: 20px"
                      alt=""
                    />
                  </div>
                  <div class="label" @click="dialogVisible = true">
                    退出忆象
                  </div>
                </div>
              </div>
            </div>
          </el-popover>
        </template>
        <template v-else>
          <el-button type="primary" @click="handleLogin">登录/注册</el-button>
        </template>
      </div>
    </div>
  </div>
  <ActivateMembership :visiblePay="pan" />

  <Login v-model="visibilityLoginDialog" />
  <!-- 退出意向 -->
  <el-dialog title="提示" v-model="dialogVisible" width="416px">
    <div>确定要退出忆象吗？</div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="clearLocalStorage">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
@import "~/styles/variable.scss";
.bottom {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 10px;
  color: #ff6700;
  line-height: 14px;
  text-align: left;
  font-style: normal;
}
.title {
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 12px;
  color: #222222;
  line-height: 17px;
  text-align: left;
  font-style: normal;
}
.success {
  width: 56px;
  height: 24px;
  background: #d7d7d7;
  border-radius: 14px;
  line-height: 24px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 11px;
  color: #ffffff;
  line-height: 24px;
  text-align: center;
  font-style: normal;
}

.header {
  &-container {
    height: 66px;
    background: #ffffff;
    box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.06);
    padding-right: 20px;
    border-bottom: 1px solid rgba(240, 240, 240, 1);
    box-sizing: border-box;
  }

  &__content {
    width: 0;
    flex: 1;

    &__right {
      .vip-btn {
        background-color: rgba(255, 234, 203, 1);
        color: #523618;
      }
    }
  }

  .logo {
    width: 210px;
    height: 66px;
  }

  .searchbox {
    width: 346px;
    height: 36px;
    border-radius: 4px;

    :deep(.el-input__wrapper) {
      background-color: #f4f4f4;
    }
  }
}

.vip {
  &-container {
    width: 308px;
    padding: 4px;
    box-sizing: border-box;
  }

  &-poperclass {
    background: #ffffff;
    box-shadow: 0px 0px 20px -8px rgba(0, 0, 0, 0.4);
    border-radius: 8px;
  }

  &-card {
    width: 300px;
    height: 122px;
    border-radius: 10px;
    background-image: url("~/assets/vip/bgc.png");
    background-size: 300px 122px;
    padding: 14px 12px 18px 14px;
    box-sizing: border-box;
    overflow: hidden;

    &__header {
      .vip-avatar {
        width: 36px;
        height: 36px;
        background-color: #fff;
        border-radius: 36px;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }

      .vip-userinfo {
        padding-left: 10px;

        .vname {
          font-size: 14px;
          font-weight: 500;
          color: #ffffff;
          line-height: 16px;
        }

        .vdesc {
          font-size: 12px;
          font-weight: 400;
          color: #ffffff;
          line-height: 22px;
        }
      }
    }

    &__footer {
      span {
        &:last-child {
          color: $orange;
          cursor: pointer;
        }
      }
    }
  }

  &-sign-prizes {
    display: grid;
    grid-template-columns: repeat(3, 33.33%);
    padding: 0px 0 20px 0;

    .prize-box {
      text-align: center;
      margin-top: 20px;

      &__img {
        width: 48px;
        height: 48px;
        background: #ff7b15;
        border-radius: 8px;
        opacity: 0.1;
        margin: 0 auto 6px;
      }

      &__title {
        font-size: 14px;
        font-weight: 400;
        color: #333333;
        line-height: 26px;
      }

      &__sub-title {
        font-size: 12px;
        font-weight: 400;
        color: #888888;
        line-height: 18px;
        margin-bottom: 6px;
      }

      .el-button.el-button--primary.is-disabled {
        background-color: #d8d8d8;
      }
    }
  }

  &-footer {
    text-align: center;
    font-size: 14px;
    font-weight: 400;
    color: #57c3c2;
    // line-height: 40px;
    padding-top: 16px;
    border-top: 1px solid rgba(204, 204, 204, 0.4);
  }
}

.moment {
  &-container {
    ul {
      list-style: none;
      padding-inline-start: 0;
      margin: 0;

      li {
        user-select: none;
        cursor: pointer;
        padding: 8px 7px;

        .icon {
          width: 22px;
          height: 22px;
          margin-right: 10px;
        }

        &:nth-child(4) {
          border-bottom: 1px solid #eaeaea;
        }

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

  &__label {
    font-size: 14px;
    font-weight: 400;
    color: #333333;
    line-height: 20px;
    cursor: pointer;
  }
}

.userinfo {
  &-avatar {
    cursor: pointer;
    margin-left: 20px;
    display: inline-block;
    width: 36px;
    height: 36px;
    background-color: blue;
    border-radius: 50%;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  &-container {
    padding: 4px;

    .uc {
      &__avatar {
        width: 58px;
        height: 58px;
        margin: auto;
        border-radius: 50%;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }

      &__name {
        font-size: 12px;
        font-weight: 600;
        color: #222222;
        line-height: 17px;
        text-align: center;
        padding: 8px 0;
      }

      &__flags {
        text-align: center;

        img {
          width: 12px;
          height: 12px;
          background-color: green;
          margin-right: 4px;

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

      &__integral {
        .task-btn {
          font-size: 12px;
          font-weight: 400;
          color: #00b0b0;
          line-height: 14px;
        }
      }

      &__grade {
        padding: 10px 0;

        &__show-bar {
          position: relative;
          z-index: 1;
          height: 3px;
          width: 100%;
          background-color: #ccc;

          &::after,
          &::before {
            position: absolute;
            z-index: 2;
            top: 50%;
            transform: translate(-50%, -50%);
            content: "";
            width: 8px;
            height: 8px;
            border-radius: 8px;
            background: #efefef;
          }

          &::before {
            left: 0;
            background-color: #00b0b0;
          }

          &::after {
            right: -8px;
          }

          .sb-inside {
            width: 0%;
            height: 3px;
            background-color: rgba(0, 176, 176, 1);
          }
        }

        &_txt {
          padding: 6px 0;
        }
      }

      &__part {
        display: flex;
        justify-content: space-between;
        padding-bottom: 10px;

        > div {
          text-align: center;

          div:first-child {
            font-size: 16px;
            font-weight: 400;
            color: #222222;
            line-height: 17px;
          }

          div:last-child {
            padding-top: 4px;
            font-size: 12px;
            font-weight: 400;
            color: #666666;
            line-height: 17px;
          }
        }
      }

      &__gap {
        height: 1px;
        background-color: rgba(225, 225, 225, 0.546);
      }

      &__item {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding-top: 10px;

        .itembox {
          width: 33%;
          margin-bottom: 10px;
          text-align: center;
          cursor: pointer;
        }
      }
    }
  }
}
</style>