dev/dcp-web-gate/src_old/views/userCenter/userCenterView.vue

<template>
  <div>
    <div style="width: 100%; height: 190px; background: #fff">
      <div style="float: left; width: 20%; height: 100%; position: relative">
        <div
          style="
            width: 130px;
            height: 130px;
            position: absolute;
            left: 50%;
            top: 45%;
            transform: translate(-50%, -50%);
            border-radius: 65px;
            overflow: hidden;
          "
        >
          <img
            v-if="!showDefaultImg"
            :src="'api/file/pub/' + this.userPic"
            alt=""
            style="width: 100%; height: 130px"
            @error="showDefault()"
          />
          <img
            v-if="showDefaultImg"
            :src="require('@/assets/img/userCenter/user.png')"
            alt=""
            style="width: 100%; height: 130px"
          />
        </div>
      </div>
      <div style="float: left; width: 50%; height: 100%">
        <div
          style="width: 96.5%; margin-left: 10px; margin-top: 20px; height: 80%"
        >
          <div>
            <span style="font-size: 20px; color: #2c5589; font-weight: 700">{{
              realName
            }}</span>
            <span v-if="userInfor.userType" class="tagFA6400">{{
              userTypeDicts[this.userInfor.userType]
            }}</span>
            <span v-if="userInfor.tag1" class="tag6DD400">{{
              realStatusDicts[this.realStatus]
            }}</span>
            <span v-if="userInfor.tag1" class="tag00D4C3">{{
              userMobileStatusDicts[this.mobileStatus]
            }}</span>
            <span v-if="userInfor.tag1" class="tag00B9FF">{{
              userEmailStatusDicts[this.emailStatus]
            }}</span>
          </div>
          <div style="margin-top: 10px; font-size: 14px; color: #999">
            <div
              style="margin-top: 10px; font-size: 14px; color: #999"
              v-if="userInfor.unitName"
            >
              <span>
                <i class="el-icon-office-building" aria-hidden="true"></i>
                {{ userInfor.unitName }}
              </span>
            </div>
            <span style="margin-right: 25px">
              <i class="el-icon-message" aria-hidden="true"></i>
              {{ userInfor.Email }}
            </span>
            <div style="margin-top: 10px; font-size: 14px; color: #999">
              <span>
                <i class="el-icon-mobile-phone" aria-hidden="true"></i>
                {{ userInfor.tel }}
              </span>
            </div>
          </div>
        </div>
      </div>
      <div
        style="
          float: left;
          width: 19.8%;
          height: 100%;
          border-left: 1px solid #ebebeb;
        "
      >
        <div
          style="width: 96.4%; margin-left: 10px; margin-top: 20px; height: 80%"
        >
          <div>
            <span style="font-size: 18px; color: #2c5589; font-weight: 700">{{
              $t("common.MessageRemind")
            }}</span>
            <i
              class="fa fa-volume-up"
              aria-hidden="true"
              style="color: #2c5589; margin-left: 20px; font-size: 18px"
            ></i>
          </div>
          <div style="margin-top: 10px; font-size: 14px; color: #999">
            <span
              style="display: block; line-height: 30px"
              @click="toView('SystemMessage', '/SystemMessage')"
              class="cursor"
            >
              {{ $t("common.SystemRemind") }}：<span class="num1">{{
                SystemRemindNum
              }}</span>
            </span>
            <span
              style="display: block; line-height: 30px"
              @click="toView('notification', '/notification')"
              class="cursor"
            >
              {{ $t("common.Announcements") }}：<span class="num1">{{
                AnnouncementsNum
              }}</span>
            </span>
            <span
              style="display: block; line-height: 30px"
              @click="toView('myConsultingService', '/myConsultingService')"
              class="cursor"
            >
              {{ $t("common.MyAdvice") }}：<span class="num2">{{
                MyAdviceNum
              }}</span>
            </span>
            <span
              style="display: block; line-height: 30px"
              @click="toView('communication', '/communication')"
              class="cursor"
            >
              {{ $t("common.interactiveMessage") }}：<span class="num2">{{
                interactiveMessageNum
              }}</span>
            </span>
          </div>
        </div>
      </div>
    </div>
    <div style="width: 100%; height: 100px; background: #fff; margin-top: 15px">
      <div class="title">
        <span>
          <i
            class="el-icon-menu"
            aria-hidden="true"
            style="margin-right: 10px"
          ></i
          >{{ $t("common.FunctionRecommended") }}</span
        >
      </div>
      <div
        style="
          width: 100%;
          height: 50px;
          line-height: 50px;
          font-size: 15px;
          color: #666;
        "
      >
        <span
          style="padding: 3px 30px; border-right: 1px solid #2c5589"
          class="cursor"
          @click="toViewDevelopmentCooperation()"
        >
          <i
            class="el-icon-message"
            aria-hidden="true"
            style="margin-right: 5px; color: #2c5589"
          ></i
          >{{ $t("common.CooperationForum") }}</span
        >
        <span
          style="padding: 3px 30px; border-right: 1px solid #2c5589"
          class="cursor"
          @click="toOnlineMeeting()"
        >
          <i
            class="el-icon-microphone"
            aria-hidden="true"
            style="margin-right: 5px; color: #2c5589"
          ></i
          >{{ $t("common.OnlineMeeting") }}</span
        >
      </div>
    </div>
    <!--我的项目-->
    <div style="width: 100%; background: #fff; margin-top: 15px">
      <div class="title">
        <span>
          <i
            class="el-icon-office-building"
            aria-hidden="true"
            style="margin-right: 10px"
          ></i
          >{{ $t("common.UserMyProject") }}</span
        >
        <span
          style="float: right; font-size: 14px; color: #666; margin-top: 12px"
          class="cursor"
          @click="toMyProject()"
          >{{ $t("common.More") }}
          <i
            class="el-icon-arrow-right"
            aria-hidden="true"
            style="margin-right: 10px"
          ></i
        ></span>
      </div>
      <div style="width: 100%; height: 160px">
        <div class="recommend">
          <ul>
            <li
              v-for="(item, index) in myProject"
              v-if="index < 4"
              :key="index + 2"
              style="margin-left: 20px"
            >
              <img
                @click="
                  toViewProject('projectPresentationDetails', item, index)
                "
                :src="'api/file/pub/' + item.bannerImg"
                alt
                style="width: 100%; height: 115px; cursor: pointer"
              />
              <div
                style="
                  color: #bcbcbc;
                  font-size: 14px;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                "
              >
                {{ item.followName }}
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div style="width: 100%; background: #fff; margin-top: 15px">
      <div class="title">
        <span>
          <i
            class="el-icon-wind-power"
            aria-hidden="true"
            style="margin-right: 10px"
          ></i
          >{{ $t("common.UserMyActivities") }}</span
        >
        <span
          style="float: right; font-size: 14px; color: #666; margin-top: 12px"
          class="cursor"
          @click="toMyProject()"
          >{{ $t("common.More") }}
          <i
            class="el-icon-arrow-right"
            aria-hidden="true"
            style="margin-right: 10px"
          ></i
        ></span>
      </div>
      <div style="width: 100%; height: 160px">
        <div class="recommend">
          <ul>
            <li
              v-for="(item, index) in myActivity"
              v-if="index < 4"
              :key="index + 2"
              style="margin-left: 20px"
            >
              <img
                @click="
                  toViewActivity('cooperationExchangeListDetails', item, index)
                "
                :src="'api/file/pub/' + item.bannerImg"
                alt
                style="width: 100%; height: 115px; cursor: pointer"
              />
              <div
                style="
                  color: #bcbcbc;
                  font-size: 14px;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                "
              >
                {{ item.followName }}
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { selectPushMsgNum, selectNoticeInfoNum } from "@/api/userCenter";
import { getDicts } from "@/api/dict";
import { getPortalMyFollowMode } from "@/api/userCenter/myFollow";
import { saveFollowModelLanguage } from "@/api/operation/basePortalModelFollowInfo";
import { dropUmsUser } from "@/api/userCenter/ums";
import { getToken } from "@/utils/auth";
import {
  getUserInfoStatus,
  getUserInfoStatusByLanuage,
} from "@/api/userCenter";
import Base from "@/views/base/Base";

export default {
  name: "userCenterView",
  extends: Base,
  data() {
    return {
      showDefaultImg: false,
      //系统提示
      SystemRemindNum: 0,
      //通知公告
      AnnouncementsNum: 0,
      //我的咨询
      MyAdviceNum: 0,
      //互动留言
      interactiveMessageNum: 0,
      projectNum: [],
      projectParams: {
        pageNo: 1,
        pageSize: 10,
        technicalCategories: "",
        technicalScope: "",
        phaseType: "",
        createBy: "",
        projectName: "",
        publishingChannels: "1",
        approveStatus: "",
        language: "",
      },
      userInfor: {
        userName: "",
        tag1: "1",
        tag2: "1",
        tag3: "1",
        enterpriseName: "common.threeGorgesCorporation",
        Email: "",
        tel: "",
        userType: "",
        userTypeDict: "",
        unitName: "",
      },
      userPic: "/def/user.png",
      mobileStatus: "",
      emailStatus: "",
      realStatus: "",
      userTypeDicts: {
        2: this.$t("common.UserUsertyp1"),
        5: this.$t("common.UserUsertyp2"),
        4: this.$t("common.UserUsertyp3"),
      },
      userMobileStatusDicts: {
        0: this.$t("common.PhoneNumberVerified"),
        1: this.$t("common.PhoneNumberNotVerified"),
      },
      userEmailStatusDicts: {
        0: this.$t("common.EmailVerified"),
        1: this.$t("common.EmailNotVerified"),
      },
      realStatusDicts: {
        true: this.$t("common.RealNameVerification"),
        false: this.$t("common.RealNameNotVerification"),
      },
      myProject: [],
      myActivity: [],
      recommend: [],
      user: {
        umsUser: {},
      },
    };
  },
  watch: {
    "$i18n.locale"() {
      this.userMobileStatusDicts = {
        0: this.$t("common.PhoneNumberVerified"),
        1: this.$t("common.PhoneNumberNotVerified"),
      };
      this.userEmailStatusDicts = {
        0: this.$t("common.EmailVerified"),
        1: this.$t("common.EmailNotVerified"),
      };
      this.realStatusDicts = {
        true: this.$t("common.RealNameVerification"),
        false: this.$t("common.RealNameNotVerification"),
      };
      this.userTypeDicts = {
        2: this.$t("common.UserUsertyp1"),
        5: this.$t("common.UserUsertyp2"),
        4: this.$t("common.UserUsertyp3"),
      };
      this.initData();
    },
  },
  mounted() {
    this.initData();
  },
  computed: {
    // 判断有无真名
    realName() {
      if (this.user.umsUser.userNickName) {
        return this.user.umsUser.userNickName;
      } else {
        return this.user.username;
      }
    },
  },
  methods: {
    exinfo() {
      let token = "" + getToken();
      this.resetToken();
      // 接口逻辑

      dropUmsUser(token)
        .then((result) => {
          // console.log(result);
          this.$message({
            message: result.data,
            type: "success",
          });
          this.getList();
        })
        .catch((error) => {
          // 此处你的业务代码
        });
    },
    //获取系统消息数量
    getMessageNum() {
      if (this.i != 1) {
        let readStatus = "unread";
        selectPushMsgNum(readStatus).then((res) => {
          if (res.data.page.totalCount > 0) {
            this.SystemRemindNum = res.data.page.totalCount;
          } else {
            this.SystemRemindNum = 0;
          }
        });
      }
    },
    //获取通知公告数量
    getNoticeNum() {
      if (this.i != 1) {
        let readStatus = "unread";
        selectNoticeInfoNum(readStatus).then((res) => {
          if (res.data.page.totalCount > 0) {
            this.AnnouncementsNum = res.data.page.totalCount;
          } else {
            this.AnnouncementsNum = 0;
          }
        });
      }
    },
    toView(router, json, index) {
      window.localStorage.setItem("router", router);
      this.$store.commit("modify", router);
      const { href } = this.$router.resolve({
        name: router,
        query: {
          key: json,
          dataIndex: index,
        },
      });
      window.open(href, "_blank");
    },
    //项目跳转
    toViewProject(router, json, index) {
      if ("已删除" == json.followName || "Deleted" == json.followName) {
        this.saveFollowModelDo("unfollow", json.id, "project");
        return;
      }
      window.localStorage.setItem("router", router);
      this.$store.commit("modify", router);
      const { href } = this.$router.resolve({
        name: router,
        query: {
          key: json.id,
          dataIndex: index,
        },
      });
      window.open(href, "_blank");
    },
    //活动跳转
    toViewActivity(router, json) {
      if ("已删除" == json.followName || "Deleted" == json.followName) {
        this.saveFollowModelDo("unfollow", json.id, "activity");
        return;
      }
      this.$store.commit("modify", router);
      window.localStorage.setItem("router", router);
      const { href } = this.$router.resolve({
        name: router,
        query: {
          key: json.id,
        },
      });
      window.open(href, "_blank");
    },
    //跳转到发展合作留言
    toViewDevelopmentCooperation() {
      var router = "developmentCooperation";
      this.toView(router);
    },
    //跳转到在线会议
    toOnlineMeeting() {
      var router = "onlineMeeting";
      this.toView(router);
    },
    //跳到我的项目
    toMyProject() {
      this.toView("myFollow");
    },
    //查看项目
    findProject(item, index) {
      this.toView("projectPresentationDetails", item.id, index);
    },
    //查看留言
    findLeavMesage(item) {
      alert("查看留言");
    },
    initData() {
      let language = this.$i18n.locale.toUpperCase();
      this.user = JSON.parse(window.localStorage.getItem("user"));
      //获取用户信息
      getUserInfoStatusByLanuage(language).then((result) => {
        var data = result.data;
        console.log(data);
        this.userInfor.userName = data.name;
        this.userInfor.Email = data.email;
        if (!this.userInfor.Email) {
          this.userInfor.Email = this.$t("common.noHave");
        }
        this.userInfor.tel = data.newMobile;
        if (!this.userInfor.tel) {
          this.userInfor.tel = this.$t("common.noHave");
        }
        this.mobileStatus = this.user.umsUser.userMobileStatus;
        this.emailStatus = data.userEmailStatus;
        this.realStatus = data.realStatus;
        this.userInfor.userType = data.userType;
        this.userInfor.userTypeDict = data.userTypeDict;
        this.userInfor.unitName = data.unitName;
        if (!data.userPic) {
          this.userPic = "/def/user.png";
        } else {
          this.userPic = data.userPic;
        }
      });
      //获取对应的项目数据
      this.projectParams.language = this.$i18n.locale.toUpperCase();
      let token = getToken();
      let list = {
        modelType: "project",
        language: this.$i18n.locale.toUpperCase(),
        pageNo: 1,
        pageSize: 4,
      };
      getPortalMyFollowMode(list, token).then((res) => {
        this.myProject = res.data ? res.data.models : [];
        if (this.myProject && this.myProject.length > 0) {
          this.myProject.forEach((element) => {
            if (
              element.bannerImg &&
              element.bannerImg instanceof Array &&
              element.bannerImg[0] != ""
            ) {
              var bannerImgs = element.bannerImg;
              element.bannerImg = bannerImgs[0];
            } else if (
              element.bannerImg &&
              element.bannerImg.constructor == String &&
              element.bannerImg != ""
            ) {
              var bannerImgs = element.bannerImg.split(",");
              element.bannerImg = bannerImgs[0];
            } else {
              element.bannerImg = "def/projectdefault.png";
            }
          });
        }
      });
      token = getToken();
      list = {
        modelType: "activity",
        language: this.$i18n.locale.toUpperCase(),
        pageNo: 1,
        pageSize: 4,
      };
      getPortalMyFollowMode(list, token).then((res) => {
        this.myActivity = res.data ? res.data.models : [];
        if (this.myActivity && this.myActivity.length > 0) {
          this.myActivity.forEach((element) => {
            if (element.bannerImg && element.bannerImg != "") {
              var bannerImgs = element.bannerImg.split(",");
              element.bannerImg = bannerImgs[0];
            }
          });
        }
      });
      //获取系统消息数量
      this.getMessageNum();
      this.getNoticeNum();
    },
    getIconUrl(url) {
      return require("@/assets/img/userCenter/" + url);
    },
    getPorjectUrl(url) {
      if (null == url) {
        url = "api/file/pub//def/projectdefault.png";
      }
      return url;
    },
    saveFollowModelDo: function (followType, projectId, modelType) {
      let user = window.localStorage.getItem("user");
      var users = JSON.parse(user);
      if (!user) {
        this.$message.warning("请先登录");
      } else {
        let token = "" + getToken();
        this.resetToken();
        // 接口逻辑
        this.submitHandler((token) => {
          saveFollowModelLanguage(
            this.$i18n.locale.toUpperCase(),
            projectId,
            modelType,
            users.userId,
            followType,
            token
          )
            .then((result) => {
              // console.log(result);
              this.$message({
                message: result.data,
                type: "success",
              });
              this.getList();
            })
            .catch((error) => {
              // 此处你的业务代码
            });
        });
      }
    },
    showDefault() {
      this.showDefaultImg = true;
    },
  },
};
</script>
<style scoped>
.tagFA6400,
.tag6DD400,
.tag00D4C3,
.tag00B9FF {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  color: #fff;
  font-size: 12px;
  margin-left: 15px;
}

.tagFA6400 {
  background: #fa6400;
}

.tag6DD400 {
  background: #6dd400;
}

.tag00D4C3 {
  background: #00d4c3;
}

.tag00B9FF {
  background: #00b9ff;
}

.num1 {
  color: #328cfc;
  font-weight: 700;
}

.num2 {
  font-weight: 700;
  color: #d8361d;
}

.title {
  height: 50px;
  margin-left: 30px;
  margin-right: 30px;
  border-bottom: 1px solid #ebebeb;
  line-height: 50px;
  font-size: 17px;
  color: #2c5589;
  font-weight: 700;
}

.init {
  /* padding:0 30px; */
  height: 450px;
  padding-bottom: 30px;
  width: 100%;
}

.init ul {
  text-align: top;
  height: 100%;
  display: flex;
  display: -webkit-flex; /* Safari */
  justify-content: space-between;
  flex-wrap: wrap;
}

.init li {
  width: 430px;
  height: 130px;
  text-align: top;
  margin-bottom: 10px;
}

.initLiItem {
  float: left;
  height: 100%;
  width: 230px;
  position: relative;
  display: flex;
  flex-direction: column;
}

.initLiItemFirst {
  text-align: center;
  margin-top: 40px;
  font-size: 18px;
  color: #666;
  font-weight: 600;
}

/* .initLiItem div, */
.initLiItem span:hover {
  color: #2c5589;
}

#myActivity li {
  float: left;
  width: 300px;
  height: 200px;
  margin-right: -80px;
  background: skyblue;
}

#myActivity ul {
  text-align: top;
  margin-top: 20px;
  height: 200px;
  display: flex;
  display: -webkit-flex; /* Safari */
  justify-content: space-between;
  flex-wrap: nowrap;
}

.swiper-container {
  width: 100%;
  height: 200px;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;

  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.swiper-slide {
  margin-right: 10px !important;
}

.recommend {
  margin-top: 16px;
  /* margin-left: 30px; */
}

.recommend li {
  display: inline-block;
  width: 170px;
  /* height: 130px; */
  text-align: center;
  margin-right: 16px;
}

.cursor:hover {
  color: red;
}
</style>