From 04e21fe58d42c6803459df478076e3321928bb69 Mon Sep 17 00:00:00 2001
From: liudianxin <liudianxin@bd-apaas.com>
Date: Wed, 24 Jun 2020 15:40:23 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=AA=E4=BA=BA=E4=B8=AD=E5=BF=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/menu-copy.vue | 478 +++++++++++++++++++++++++++++++++++
 src/pages/user/user_info.vue |  75 ++++--
 src/request/api/general.js   |   3 +
 3 files changed, 538 insertions(+), 18 deletions(-)
 create mode 100644 src/components/menu-copy.vue

diff --git a/src/components/menu-copy.vue b/src/components/menu-copy.vue
new file mode 100644
index 0000000..e9a2454
--- /dev/null
+++ b/src/components/menu-copy.vue
@@ -0,0 +1,478 @@
+<template>
+<!-- 
+    this page will be destoryed after userRoles is available
+ -->
+  <div class="menu">
+    <img src="../assets/imgs/home_img_logo.png" alt class="logo" />
+    <div style="float:right;cursor: pointer;position:relative;" class="user_hover">
+      <span
+        v-if="userInfo.user_name && userInfo.user_name !=''"
+        class="user"
+      >{{ userInfo.user_name }}</span>
+      <span v-else @click="gotopage('login')" class="user">请登录</span>
+      <img
+        :class="userInfo.picture_path ? 'user_pic': 'user_default'"
+        :src="
+          userInfo.picture_path || require('../assets/imgs/home_ic_user.png')
+        "
+      />
+      <div v-if="userInfo.user_name && userInfo.user_name !=''" class="user_menu">
+        <div
+          v-for="(item, index) in user_arr"
+          :key="index + 700"
+          @click="gotopage(item.path)"
+        >{{ item.name }}</div>
+      </div>
+      <div v-if="userInfo.user_name && userInfo.user_name !=''" class="sj"></div>
+    </div>
+    <div
+      style="float:right;cursor: pointer;position:relative;"
+      class="shop_hover"
+      @click="gotopage('/shop/shopping_cart')"
+    >
+      <div class="car">
+        <el-badge v-if="menuCartNum != 0" :value="menuCartNum" :max="99" class="number"></el-badge>
+        <img src="../assets/imgs/home_ic_shop.png" alt class="car_img" />
+      </div>
+      <div v-if="userInfo.user_name && userInfo.user_name !=''" class="shop_menu">
+        <div class="shop_list_title">最近加入的服务：</div>
+        <div
+          v-for="(item, index) in shopping_list"
+          :key="'shopping' + index"
+          class="shop_list_cell shop_line"
+        >
+          <img :src="item.service.cover" class="shop_img" />
+          <div class="shop_cell_msgs">
+            <p @click="getDetail(item.id)" class="shop_cell_name over_one">
+              {{
+              item.service_id == 0
+              ? item.application.app_name
+              : item.service.name
+              }}
+            </p>
+            <p class="shop_cell_msg bover_one">
+              {{
+              item.service_id == 0
+              ? item.application.ywly
+              : item.service.sectors_name
+              }}
+            </p>
+            <p class="shop_cell_msg over_one">
+              {{
+              item.service_id == 0
+              ? item.application.org
+              : item.service.organization_name
+              }}
+            </p>
+          </div>
+          <div>
+            <img @click.stop="deleteItem(item.id)" src="../assets/imgs/ic_delete.png" alt />
+          </div>
+        </div>
+        <div class="shop_footer">
+          <el-button @click="settlement" size="small" class="shop_settlement">去购物车申请结算</el-button>
+        </div>
+      </div>
+      <div v-if="userInfo.user_name && userInfo.user_name !=''" class="shop_sj"></div>
+    </div>
+
+    <div style="float:right">
+      <div
+        v-for="(item, index) in menu_arr"
+        :key="index + 200"
+        class="menu_box user_hover"
+        @click="navAction(index, item.visit_url)"
+        :style="{ color: now_menu == index ? '#fff' : '' }"
+      >
+        {{ item.menu_name }}
+        <div class="user_menu" v-if="item.Child && item.Child.length" style="left: 30px;">
+          <div
+            v-for="(v, indexs) in item.Child"
+            :key="indexs + 700"
+            @click.stop="gotoChildPage(v, index)"
+          >{{ v.menu_name }}</div>
+        </div>
+        <div class="sj" v-if="item.Child && item.Child.length" style="left: 60px;"></div>
+        <div class="bottom_show" v-if="now_menu == index"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      menu_arr: [
+        // {
+        //   name: "工作台",
+        //   path: "/workplace",
+        //   children: [
+        //     {
+        //       name: "服务注册",
+        //       path: "/fwzc/fwcs"
+        //     },
+        //     {
+        //       name: "服务管理",
+        //       path: "/fwgl/"
+        //     },
+        //     {
+        //       name: "应用管理",
+        //       path: "/yygl/"
+        //     }
+        //   ]
+        // },
+        // {
+        //   name: "技术支持",
+        //   path: "/xxx"
+        // },
+        // {
+        //   name: "服务超市",
+        //   path: "/services_shop",
+        //   children: [
+        //     {
+        //       name: "数据服务",
+        //       path: "/shop/data_service_list/5"
+        //     },
+        //     {
+        //       name: "时空服务",
+        //       path: "/shop/space_time_service_list/6"
+        //     },
+        //     {
+        //       name: "视频服务",
+        //       path: "/shop/video_service_list/7"
+        //     },
+        //     {
+        //       name: "感知服务",
+        //       path: "/shop/perception_service_list/10"
+        //     },
+        //     {
+        //       name: "综合应用",
+        //       path: "/shop/comprehensive_app_list/11"
+        //     },
+        //     {
+        //       name: "云资源服务",
+        //       path: "/shop/cloud"
+        //     },
+        //     {
+        //       name: "应用商店",
+        //       path: "/shop/app_store_list/12"
+        //     }
+        //   ]
+        // }
+      ],
+      now_menu: 2,
+      user_arr: [
+        { name: "个人档案", path: "/user/user_info" },
+        { name: "消息通知", path: "/user/message" },
+        { name: "收银中心", path: "" },
+        { name: "关于BD-aPaaS", path: "" },
+        { name: "退出登录", path: "logout" }
+      ],
+      shopping_list: [],
+      menuCartNum: 0
+    };
+  },
+  mounted() {
+    this.getNowMenu();
+    this.getList();
+  },
+  computed: {
+    getMenuCartState() {
+      return this.$store.state.menuCartState;
+    },
+    userInfo() {
+      return this.$store.state.userInfo || {};
+    }
+  },
+  watch: {
+    getMenuCartState(newVal) {
+      this.getList();
+    }
+  },
+  methods: {
+    gotopage(n) {
+      if (n == "logout") {
+        window.location.href = "/iam/api/logout";
+      } else if (n == "login") {
+        let path = this.$route.path;
+        window.location.href = "/iam/login/#/login?ReturnUrl=" + path;
+      } else {
+        this.$router.push(n);
+      }
+    },
+    settlement() {
+      this.$router.push({ name: "shoppingCart" });
+    },
+    deleteItem(id) {
+      let query = [id];
+      this.$api.serviceShop.delShoppingCart(query).then(response => {
+        this.getList();
+      });
+    },
+    getDetail() {
+      // if you want goto detail page, you should give me the type at first
+      // at here, we will goto shopping cart
+      this.$router.push({ name: "shoppingCart" });
+    },
+    navAction(index, path) {
+      this.$router.push(path);
+      this.now_menu = index;
+      window.sessionStorage.setItem("menuIndex", index);
+    },
+    gotoChildPage(v, parent) {
+      if (v.visit_url) {
+        if (v.visit_url == "/fwgl/" || v.visit_url == "/yygl/") {
+          this.$router.push(v.visit_url + this.$store.getters.level);
+        } else if (parent == 2) {
+          this.$router.push(v.visit_url);
+          this.$store.commit("serviceShopMenuAct", v.visit_url);
+        } else {
+          this.$router.push(v.visit_url);
+        }
+        this.now_menu = parent;
+        window.sessionStorage.setItem("menuIndex", parent);
+      }
+    },
+    getList() {
+      this.$api.serviceShop.getShoppingCart().then(response => {
+        if (response.data.success == "1") {
+          this.menuCartNum = response.data.data.valid
+            ? response.data.data.valid.length
+            : 0;
+          this.shopping_list = response.data.data.valid
+            ? response.data.data.valid.slice(0, 3)
+            : [];
+        } else {
+          console.log(response.data.message);
+        }
+      });
+    },
+    getMenuIndex() {
+      let index = window.sessionStorage.getItem("menuIndex");
+      console.log(index);
+      this.now_menu = index ? index : 2;
+    },
+    getNowMenu() {
+      this.$api.general.getNowMenu({ teamName: "APAAS3" }).then(response => {
+        if (response.data.success == 1) {
+          this.menu_arr = response.data.data[0].Child;
+          this.getMenuIndex();
+        }
+      });
+    }
+  }
+};
+</script>
+
+<style scoped>
+.menu {
+  width: 100%;
+  height: 84px;
+  background-color: #0f2683;
+  color: #8390ee;
+  line-height: 84px;
+}
+.logo {
+  float: left;
+  margin: 30px 0 0 40px;
+}
+.user {
+  float: right;
+  display: inline-block;
+  width: 140px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-right: 20px;
+  font-size: 16px;
+}
+.user_pic {
+  float: right;
+  margin-right: 10px;
+  margin-top: 26px;
+  width: 30px;
+  height: 30px;
+}
+.user_default {
+  float: right;
+  margin-right: 10px;
+  margin-top: 30px;
+}
+.car {
+  float: right;
+  width: 50px;
+  text-align: center;
+  position: relative;
+}
+.number {
+  position: absolute;
+  background-color: #e56600;
+  border-radius: 11px;
+  color: #fcefd6;
+  line-height: 18px;
+  height: 20px;
+  text-align: center;
+  left: 38px;
+  top: 26px;
+  z-index: 2;
+}
+.car_img {
+  position: relative;
+  top: 7px;
+}
+.menu_box {
+  float: right;
+  width: 185px;
+  text-align: center;
+  cursor: pointer;
+  position: relative;
+}
+.menu_box:nth-of-type(1) {
+  margin-right: 52px;
+}
+.bottom_show {
+  width: 24px;
+  height: 5px;
+  background-color: #e56600;
+  border-radius: 3px;
+  position: absolute;
+  bottom: 0px;
+  left: calc(50% - 12px);
+}
+.user_menu {
+  width: 135px;
+  background-color: #ffffff;
+  box-shadow: 0px 3px 6px 0px #f4f7fc;
+  border-radius: 8px;
+  position: absolute;
+  top: 80px;
+  left: -20px;
+  overflow: hidden;
+  display: none;
+  z-index: 1;
+}
+.shop_menu {
+  width: 280px;
+  background-color: #ffffff;
+  box-shadow: 0px 3px 6px 0px #f4f7fc;
+  border-radius: 8px;
+  position: absolute;
+  top: 80px;
+  left: -20px;
+  overflow: hidden;
+  display: none;
+  z-index: 1;
+  padding: 10px 20px;
+}
+.user_hover:hover .user_menu {
+  display: block;
+}
+.user_hover:hover .sj {
+  display: block;
+}
+.shop_hover {
+  height: 100%;
+  margin-right: 50px;
+}
+.shop_hover:hover .shop_menu {
+  display: block;
+}
+.shop_hover:hover .shop_sj {
+  display: block;
+}
+.user_menu div {
+  width: 135px;
+  height: 44px;
+  line-height: 44px;
+  text-align: center;
+  color: #0d1847;
+}
+.user_menu div:hover {
+  background-color: #e56600;
+  color: #fff;
+}
+.sj {
+  width: 16px;
+  height: 16px;
+  background-color: #e56600;
+  position: absolute;
+  top: 72px;
+  transform: rotate(45deg);
+  display: none;
+}
+.shop_sj {
+  width: 16px;
+  height: 16px;
+  background-color: #fff;
+  position: absolute;
+  top: 72px;
+  left: 20px;
+  transform: rotate(45deg);
+  display: none;
+}
+.shop_list_title {
+  color: #8890a7;
+  font-size: 14px;
+  height: 30px;
+  line-height: 30px;
+}
+.shop_list_cell {
+  height: 80px;
+  padding: 10px 0;
+  display: flex;
+  line-height: 26px;
+}
+.shop_line {
+  border-bottom: #f4f7fc 2px solid;
+}
+.shop_line:nth-last-child(2) {
+  border-bottom: 0;
+}
+.shop_img {
+  width: 60px;
+  height: 60px;
+  border-radius: 8px;
+}
+.shop_footer {
+  width: 100%;
+  height: 50px;
+  text-align: right;
+  padding: 15px 0;
+  line-height: 30px;
+}
+.shop_settlement {
+  background-color: #e56600;
+  color: #fcefd6;
+}
+.shop_cell_msgs {
+  width: calc(100% - 80px);
+  margin-left: 10px;
+}
+.shop_cell_name {
+  color: #2d3867;
+  font-size: 14px;
+  line-height: 24px;
+}
+.shop_cell_name:hover {
+  color: #0d0807;
+}
+.shop_cell_msg {
+  color: #8890a7;
+  font-size: 12px;
+  line-height: 18px;
+}
+.over_one {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>
+<style>
+.number .el-badge__content {
+  background-color: #e56600;
+  border: 0;
+  line-height: 18px;
+  padding: 0 7px;
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/user/user_info.vue b/src/pages/user/user_info.vue
index 289272c..baa4533 100644
--- a/src/pages/user/user_info.vue
+++ b/src/pages/user/user_info.vue
@@ -58,12 +58,13 @@
             <el-input v-model="user_data.userTypeName" :disabled="true"></el-input>
             <el-button
               v-if="(user_data.userType == 3 || user_data.userType == 4) && couldUp"
-              :class="option_btn"
+              class="option_btn"
               @click="upLevel"
             >升级为开发者</el-button>
             <el-button
               v-else-if="(user_data.userType == 3 || user_data.userType == 4) && !couldUp"
               type="info"
+              class="option_btn_gray_dis"
               disabled
             >升级为开发者</el-button>
           </el-form-item>
@@ -184,6 +185,7 @@ export default {
   },
   data: () => ({
     activeName: "0",
+    userId: "",
     is_admin: 0,
     user_data: {
       accountNo: "",
@@ -227,14 +229,15 @@ export default {
       this.$api.user.getNowUser().then(response => {
         if (response.data.success == 1) {
           this.is_admin = response.data.data.is_admin;
-          this.getUserInfo(response.data.data.user_id);
+          this.userId = response.data.data.user_id;
+          this.getUserInfo();
         } else {
           console.log(response.data.errMsg);
         }
       });
     },
     getUserInfo(id) {
-      this.$api.user.getUserDetail({ id: id }).then(response => {
+      this.$api.user.getUserDetail({ id: this.userId }).then(response => {
         if (response.data.success == 1) {
           let data = response.data.data;
           this.user_data.accountNo = data.user_id;
@@ -298,6 +301,7 @@ export default {
             message: "修改个人信息成功",
             type: "success"
           });
+          this.getUserInfo();
         } else {
           this.$message({
             message: "修改个人信息失败",
@@ -333,6 +337,7 @@ export default {
             type: "success"
           });
           this.diaPassWord = false;
+          this.getUserInfo();
         } else {
           this.$message({
             message: "修改密码失败",
@@ -342,20 +347,36 @@ export default {
       });
     },
     resetKey() {
-      this.$api.authority
-        .resetUserKey({ user_id: this.user_data.accountNo })
-        .then(response => {
-          if (response.data.success == 1) {
-            this.$message({
-              message: "重置密钥成功",
-              type: "success"
+      this.$confirm("此操作将重置您的密钥, 是否继续?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        cancelButtonClass: "msg_btn_gray",
+        confirmButtonClass: "msg_btn",
+        type: "warning"
+      })
+        .then(() => {
+          this.$api.authority
+            .resetUserKey({ user_id: this.user_data.accountNo })
+            .then(response => {
+              if (response.data.success == 1) {
+                this.$message({
+                  message: "重置密钥成功",
+                  type: "success"
+                });
+                this.getUserInfo();
+              } else {
+                this.$message({
+                  message: "重置密钥失败",
+                  type: "error"
+                });
+              }
             });
-          } else {
-            this.$message({
-              message: "重置密钥失败",
-              type: "error"
-            });
-          }
+        })
+        .catch(() => {
+          this.$message({
+            type: "info",
+            message: "已取消重置"
+          });
         });
     },
     upLevel() {
@@ -366,6 +387,7 @@ export default {
             type: "success"
           });
           this.couldUp = false;
+          this.getUserInfo();
         } else {
           this.$message({
             message: "申请升级开发者失败",
@@ -458,9 +480,7 @@ export default {
 }
 .option_btn_gray_dis {
   width: 124px;
-  background-color: #e3e5ef;
   border-radius: 8px;
-  color: #0f2683;
 }
 .info_item {
   width: 70%;
@@ -586,4 +606,23 @@ export default {
   line-height: 24px;
   height: 24px;
 }
+.msg_btn {
+  width: 70px;
+  background-color: #495feb;
+  border-radius: 8px;
+  color: #f8f9fd;
+}
+.msg_btn:hover {
+  background-color: #596ffb;
+}
+.msg_btn_gray {
+  width: 70px;
+  background-color: #e3e5ef;
+  border-radius: 8px;
+  color: #0f2683;
+}
+.msg_btn_gray:hover {
+  background-color: #e8eaf4;
+  color: #0f2683;
+}
 </style>
\ No newline at end of file
diff --git a/src/request/api/general.js b/src/request/api/general.js
index a9c942e..648e059 100644
--- a/src/request/api/general.js
+++ b/src/request/api/general.js
@@ -6,6 +6,9 @@ const general = {
     logout(params) {
         return axios.get(`/iam/api/logout?ReturnUrl=${encodeURIComponent(params.returnUrl)}`);
     },
+    getNowMenu(params) {
+        return axios.get(`/apaas/backmgt/menu/user/menu?teamName=${params.teamName}`);
+    },
 }
 
 export default general;
-- 
2.26.0