From 4c2511eaaa5ed44139f82b531dd2079aa4151d23 Mon Sep 17 00:00:00 2001
From: jiangweiguo <1578967617@qq.com>
Date: Tue, 5 Nov 2024 16:13:23 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=85=AC=E5=8F=B8=E5=90=8D?=
 =?UTF-8?q?=E7=A7=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/head.vue | 1072 ++++++++++++++++++++++++--------
 1 file changed, 799 insertions(+), 273 deletions(-)

diff --git a/src/components/common/head.vue b/src/components/common/head.vue
index b2496d5..d333c99 100644
--- a/src/components/common/head.vue
+++ b/src/components/common/head.vue
@@ -5,34 +5,64 @@
     <!-- 顶部 -->
     <div class="g_top">
       <div class="g_top_notice">
-        <div class="title">公告：</div>
-        <div class="text">情天可视化 1.0版本 已重磅发布，仅支持谷歌 Chrome 浏览器版本 56 以上。 </div>
+        <!-- <div class="title">公告：</div> -->
+        <div class="text">
+          <!-- 情天可视化 1.0版本 已重磅发布，仅支持谷歌 Chrome 浏览器版本 56 以上。 -->
+        </div>
       </div>
       <div class="g_top_user">
-        
+        <span
+          style="
+          line-height: 28px;
+          vertical-align: top;
+          padding-right: 30px;
+          font-size: 16px;
+          color: #fff;
+        "
+          >海南乐集优营养食品有限公司</span
+        >
         <div class="menu">
           <el-dropdown trigger="hover">
-            <span class="el-dropdown-link">{{userInfo.name}}<i class="el-icon-arrow-down el-icon--right"></i></span>
+            <span class="el-dropdown-link"
+              >{{ userInfo.name
+              }}<i class="el-icon-arrow-down el-icon--right"></i
+            ></span>
             <template #dropdown>
               <el-dropdown-menu class="hj2">
                 <div class="g_user_info">
                   <div class="user">
-                    <div class="img"><img src="../../assets/images/user_1.png" title="头像" width="54" height="54"></div>
+                    <div class="img">
+                      <img
+                        src="../../assets/images/user_1.png"
+                        title="头像"
+                        width="54"
+                        height="54"
+                      />
+                    </div>
                     <div class="phone">18668049687</div>
                     <div class="level">
-                      <div class="num"><em>L{{userInfo.level&&userInfo.level.id}}</em>{{userInfo.level&&userInfo.level.name}}</div>
+                      <div class="num">
+                        <em>L{{ userInfo.level && userInfo.level.id }}</em
+                        >{{ userInfo.level && userInfo.level.name }}
+                      </div>
                       <div class="but" @click="upLevel">提升权限</div>
                     </div>
                   </div>
                   <!-- <div class="time">服务于2022年8月26日到期</div> -->
-                  <div class="time">服务于{{userInfo.level_expiration_time}}到期</div>
+                  <div class="time">
+                    服务于{{ userInfo.level_expiration_time }}到期
+                  </div>
                   <div class="action">
                     <div class="but" @click="changePswd">
-                      <div class="link"><span class="iconfont iconjiesuo"></span> 修改密码</div>
+                      <div class="link">
+                        <span class="iconfont iconjiesuo"></span> 修改密码
+                      </div>
                       <div class="ico"><i class="el-icon-arrow-right"></i></div>
                     </div>
                     <div class="but" @click="logout">
-                      <div class="link"><span class="iconfont icontuichudenglu"></span> 退出登录</div>
+                      <div class="link">
+                        <span class="iconfont icontuichudenglu"></span> 退出登录
+                      </div>
                       <div class="ico"><i class="el-icon-arrow-right"></i></div>
                     </div>
                   </div>
@@ -41,12 +71,20 @@
             </template>
           </el-dropdown>
         </div>
-        <div class="phone"><span class="iconfont icongerenzhongxin"></span><em>{{userInfo.phone}}</em></div>
+        <div class="phone">
+          <span class="iconfont icongerenzhongxin"></span
+          ><em>{{ userInfo.phone }}</em>
+        </div>
       </div>
       <div class="clear"></div>
     </div>
     <!-- 广告 -->
-    <div class="g_banner"><img src="../../assets/images/welcome.png" title="Welcome to data visualization,Enterprise engine" width="664"> </div>
+    <!-- <div class="g_banner"><img src="../../assets/images/welcome.png" title="Welcome to data visualization,Enterprise engine" width="664"> </div> -->
+    <div class="g_banner" style="color: aliceblue;font-size: 40px;">
+      <span style="padding-left: 45px;"
+        >欢迎使用海南乐集优营养食品大数据可视化管理平台</span
+      >
+    </div>
     <!-- 导航 -->
     <div class="g_nav">
       <ul>
@@ -65,119 +103,277 @@
   </div>
   <!-- 提升权限弹窗 -->
   <div class="up_level">
-  <el-dialog  v-model="visible" custom-class="h-up-level yahei" width="90%">
-    <div class="up_level_box">
-      <div class="box">
+    <el-dialog v-model="visible" custom-class="h-up-level yahei" width="90%">
+      <div class="up_level_box">
+        <div class="box">
           <div class="level">
             <div class="title">免费版</div>
-            <div class="img"><img src="../../assets/images/level_1.png" title="免费版" width="100" height="100"></div>
+            <div class="img">
+              <img
+                src="../../assets/images/level_1.png"
+                title="免费版"
+                width="100"
+                height="100"
+              />
+            </div>
             <div class="line"></div>
             <div class="content">
-              <div class="remark"><span class="iconfont iconduigou-cu"></span>全部图表组件</div>
-              <div class="remark"><span class="iconfont iconduigou-cu"></span>数据源上限 5个</div>
-              <div class="remark"><span class="iconfont iconduigou-cu"></span>excel文件大小 100KB</div>
-              <div class="remark"><span class="iconfont iconduigou-cu"></span>excel行数 1万行</div>
-              <div class="remark"><span class="iconfont iconduigou-cu"></span>数据模型上限20个</div>
-              <div class="remark"><span class="iconfont iconduigou-cu"></span>定时模型数量：0个</div>
-              <div class="remark"><span class="iconfont iconduigou-cu"></span>大屏数量 1个</div>
+              <div class="remark">
+                <span class="iconfont iconduigou-cu"></span>全部图表组件
+              </div>
+              <div class="remark">
+                <span class="iconfont iconduigou-cu"></span>数据源上限 5个
+              </div>
+              <div class="remark">
+                <span class="iconfont iconduigou-cu"></span>excel文件大小 100KB
+              </div>
+              <div class="remark">
+                <span class="iconfont iconduigou-cu"></span>excel行数 1万行
+              </div>
+              <div class="remark">
+                <span class="iconfont iconduigou-cu"></span>数据模型上限20个
+              </div>
+              <div class="remark">
+                <span class="iconfont iconduigou-cu"></span>定时模型数量：0个
+              </div>
+              <div class="remark">
+                <span class="iconfont iconduigou-cu"></span>大屏数量 1个
+              </div>
             </div>
             <div class="price"></div>
             <div class="but bg">免费使用</div>
           </div>
           <div class="level">
             <div class="title">基础版</div>
-            <div class="img"><img src="../../assets/images/level_2.png" title="基础版" width="100" height="100"></div>
+            <div class="img">
+              <img
+                src="../../assets/images/level_2.png"
+                title="基础版"
+                width="100"
+                height="100"
+              />
+            </div>
             <div class="line"></div>
             <div class="content">
-              <div class="remark"><span class="iconfont iconduigou-cu"></span>全部图表组件</div>
-              <div class="remark"><span class="iconfont iconduigou-cu"></span>数据源上限 100个</div>
-              <div class="remark"><span class="iconfont iconduigou-cu"></span>excel文件大小 500KB</div>
-              <div class="remark"><span class="iconfont iconduigou-cu"></span>excel行数 50万行</div>
-              <div class="remark"><span class="iconfont iconduigou-cu"></span>数据模型上限200个</div>
-              <div class="remark"><span class="iconfont iconduigou-cu"></span>定时模型数量：20个</div>
-              <div class="remark"><span class="iconfont iconduigou-cu"></span>大屏数量 10个</div>
+              <div class="remark">
+                <span class="iconfont iconduigou-cu"></span>全部图表组件
+              </div>
+              <div class="remark">
+                <span class="iconfont iconduigou-cu"></span>数据源上限 100个
+              </div>
+              <div class="remark">
+                <span class="iconfont iconduigou-cu"></span>excel文件大小 500KB
+              </div>
+              <div class="remark">
+                <span class="iconfont iconduigou-cu"></span>excel行数 50万行
+              </div>
+              <div class="remark">
+                <span class="iconfont iconduigou-cu"></span>数据模型上限200个
+              </div>
+              <div class="remark">
+                <span class="iconfont iconduigou-cu"></span>定时模型数量：20个
+              </div>
+              <div class="remark">
+                <span class="iconfont iconduigou-cu"></span>大屏数量 10个
+              </div>
+            </div>
+            <div class="price">98元/月 年付八折</div>
+            <div
+              class="but"
+              v-if="userInfo.level && userInfo.level.id < 2"
+              @click="upLevelApi(2, 98)"
+            >
+              购买升级
+            </div>
+            <div class="but bg" v-if="userInfo.level && userInfo.level.id >= 2">
+              已经拥有
             </div>
-            <div class="price">98元/月  年付八折</div>
-            <div class="but" v-if="userInfo.level&&userInfo.level.id<2" @click="upLevelApi(2,98)">购买升级</div>
-            <div class="but bg" v-if="userInfo.level&&userInfo.level.id>=2">已经拥有</div>
           </div>
           <div class="level">
             <div class="title">精英版</div>
-            <div class="img"><img src="../../assets/images/level_3.png" title="精英版" width="100" height="100"></div>
+            <div class="img">
+              <img
+                src="../../assets/images/level_3.png"
+                title="精英版"
+                width="100"
+                height="100"
+              />
+            </div>
             <div class="line"></div>
             <div class="content">
-              <div class="remark"><span class="iconfont iconduigou-cu"></span>全部图表组件</div>
-              <div class="remark"><span class="iconfont iconduigou-cu"></span>数据源上限 200个</div>
-              <div class="remark"><span class="iconfont iconduigou-cu"></span>excel文件大小 1MB</div>
-              <div class="remark"><span class="iconfont iconduigou-cu"></span>excel行数 100万行</div>
-              <div class="remark"><span class="iconfont iconduigou-cu"></span>数据模型上限500个</div>
-              <div class="remark"><span class="iconfont iconduigou-cu"></span>定时模型数量：50个</div>
-              <div class="remark"><span class="iconfont iconduigou-cu"></span>大屏数量 30个</div>
+              <div class="remark">
+                <span class="iconfont iconduigou-cu"></span>全部图表组件
+              </div>
+              <div class="remark">
+                <span class="iconfont iconduigou-cu"></span>数据源上限 200个
+              </div>
+              <div class="remark">
+                <span class="iconfont iconduigou-cu"></span>excel文件大小 1MB
+              </div>
+              <div class="remark">
+                <span class="iconfont iconduigou-cu"></span>excel行数 100万行
+              </div>
+              <div class="remark">
+                <span class="iconfont iconduigou-cu"></span>数据模型上限500个
+              </div>
+              <div class="remark">
+                <span class="iconfont iconduigou-cu"></span>定时模型数量：50个
+              </div>
+              <div class="remark">
+                <span class="iconfont iconduigou-cu"></span>大屏数量 30个
+              </div>
+            </div>
+            <div class="price">198元/月 年付八折</div>
+            <div
+              class="but"
+              v-if="userInfo.level && userInfo.level.id < 3"
+              @click="upLevelApi(3, 198)"
+            >
+              购买升级
+            </div>
+            <div class="but bg" v-if="userInfo.level && userInfo.level.id >= 3">
+              已经拥有
             </div>
-            <div class="price">198元/月  年付八折</div>
-            <div class="but" v-if="userInfo.level&&userInfo.level.id<3" @click="upLevelApi(3,198)">购买升级</div>
-            <div class="but bg" v-if="userInfo.level&&userInfo.level.id>=3">已经拥有</div>
           </div>
           <div class="level">
             <div class="title">豪华版</div>
-            <div class="img"><img src="../../assets/images/level_4.png" title="豪华版" width="100" height="100"></div>
+            <div class="img">
+              <img
+                src="../../assets/images/level_4.png"
+                title="豪华版"
+                width="100"
+                height="100"
+              />
+            </div>
             <div class="line"></div>
             <div class="content">
-              <div class="remark"><span class="iconfont iconduigou-cu"></span>全部图表组件</div>
-              <div class="remark"><span class="iconfont iconduigou-cu"></span>数据源上限 500个</div>
-              <div class="remark"><span class="iconfont iconduigou-cu"></span>excel文件大小 1MB</div>
-              <div class="remark"><span class="iconfont iconduigou-cu"></span>excel行数 100万行</div>
-              <div class="remark"><span class="iconfont iconduigou-cu"></span>数据模型上限1000个</div>
-              <div class="remark"><span class="iconfont iconduigou-cu"></span>定时模型数量：100个</div>
-              <div class="remark"><span class="iconfont iconduigou-cu"></span>大屏数量 100个</div>
+              <div class="remark">
+                <span class="iconfont iconduigou-cu"></span>全部图表组件
+              </div>
+              <div class="remark">
+                <span class="iconfont iconduigou-cu"></span>数据源上限 500个
+              </div>
+              <div class="remark">
+                <span class="iconfont iconduigou-cu"></span>excel文件大小 1MB
+              </div>
+              <div class="remark">
+                <span class="iconfont iconduigou-cu"></span>excel行数 100万行
+              </div>
+              <div class="remark">
+                <span class="iconfont iconduigou-cu"></span>数据模型上限1000个
+              </div>
+              <div class="remark">
+                <span class="iconfont iconduigou-cu"></span>定时模型数量：100个
+              </div>
+              <div class="remark">
+                <span class="iconfont iconduigou-cu"></span>大屏数量 100个
+              </div>
+            </div>
+            <div class="price">398元/月 年付八折</div>
+            <div
+              class="but"
+              v-if="userInfo.level && userInfo.level.id < 4"
+              @click="upLevelApi(4, 398)"
+            >
+              购买升级
+            </div>
+            <div class="but bg" v-if="userInfo.level && userInfo.level.id >= 4">
+              已经拥有
             </div>
-            <div class="price">398元/月  年付八折</div>
-            <div class="but" v-if="userInfo.level&&userInfo.level.id<4" @click="upLevelApi(4,398)">购买升级</div>
-            <div class="but bg" v-if="userInfo.level&&userInfo.level.id>=4">已经拥有</div>
           </div>
           <div class="level">
             <div class="title">至尊版</div>
-            <div class="img"><img src="../../assets/images/level_5.png" title="至尊版" width="100" height="100"></div>
+            <div class="img">
+              <img
+                src="../../assets/images/level_5.png"
+                title="至尊版"
+                width="100"
+                height="100"
+              />
+            </div>
             <div class="line"></div>
             <div class="content">
-              <div class="remark"><span class="iconfont iconduigou-cu"></span>全部图表组件</div>
-              <div class="remark"><span class="iconfont iconduigou-cu"></span>数据源上限 2000个</div>
-              <div class="remark"><span class="iconfont iconduigou-cu"></span>excel文件大小 1MB</div>
-              <div class="remark"><span class="iconfont iconduigou-cu"></span>excel行数 100万行</div>
-              <div class="remark"><span class="iconfont iconduigou-cu"></span>数据模型上限5000个</div>
-              <div class="remark"><span class="iconfont iconduigou-cu"></span>定时模型数量：500个</div>
-              <div class="remark"><span class="iconfont iconduigou-cu"></span>大屏数量 500个</div>
+              <div class="remark">
+                <span class="iconfont iconduigou-cu"></span>全部图表组件
+              </div>
+              <div class="remark">
+                <span class="iconfont iconduigou-cu"></span>数据源上限 2000个
+              </div>
+              <div class="remark">
+                <span class="iconfont iconduigou-cu"></span>excel文件大小 1MB
+              </div>
+              <div class="remark">
+                <span class="iconfont iconduigou-cu"></span>excel行数 100万行
+              </div>
+              <div class="remark">
+                <span class="iconfont iconduigou-cu"></span>数据模型上限5000个
+              </div>
+              <div class="remark">
+                <span class="iconfont iconduigou-cu"></span>定时模型数量：500个
+              </div>
+              <div class="remark">
+                <span class="iconfont iconduigou-cu"></span>大屏数量 500个
+              </div>
+            </div>
+            <div class="price">1998元/月 年付八折</div>
+            <div
+              class="but"
+              v-if="userInfo.level && userInfo.level.id < 5"
+              @click="upLevelApi(5, 1998)"
+            >
+              购买升级
+            </div>
+            <div class="but bg" v-if="userInfo.level && userInfo.level.id >= 5">
+              已经拥有
             </div>
-            <div class="price">1998元/月  年付八折</div>
-            <div class="but" v-if="userInfo.level&&userInfo.level.id<5" @click="upLevelApi(5,1998)">购买升级</div>
-            <div class="but bg" v-if="userInfo.level&&userInfo.level.id>=5">已经拥有</div>
           </div>
+        </div>
       </div>
-      
-    </div>
-</el-dialog>
-</div>
-<!-- 修改密码弹窗 -->
-<el-dialog title="修改密码"  v-model="visible2" custom-class="h-AddGroup" width="400px">
-  <el-form ref="elForm" :model="pswd" :rules="rules" size="medium">
-    <el-form-item label="旧密码" prop="name">
-      <el-input v-model="pswd.oldPswd" placeholder="请输入旧密码" type="password" clearable
-         :style="{width: '100%'}"></el-input>
-    </el-form-item>
-    <el-form-item label="新密码" prop="name">
-      <el-input v-model="pswd.newPswd1" placeholder="请输入新密码" type="password" clearable
-         :style="{width: '100%'}"></el-input>
-    </el-form-item>
-    <el-form-item label="确认密码" prop="name">
-      <el-input v-model="pswd.newPswd2" placeholder="请再次输入新密码" type="password" clearable
-         :style="{width: '100%'}"></el-input>
-    </el-form-item>
-  </el-form>
-  <template #footer>
-    <el-button @click="visible2=false" class="h-but_1">取消</el-button>
-    <el-button type="primary" @click="changePswdApi" class="h-but_2">确定</el-button>
-  </template>
-</el-dialog>
+    </el-dialog>
+  </div>
+  <!-- 修改密码弹窗 -->
+  <el-dialog
+    title="修改密码"
+    v-model="visible2"
+    custom-class="h-AddGroup"
+    width="400px"
+  >
+    <el-form ref="elForm" :model="pswd" :rules="rules" size="medium">
+      <el-form-item label="旧密码" prop="name">
+        <el-input
+          v-model="pswd.oldPswd"
+          placeholder="请输入旧密码"
+          type="password"
+          clearable
+          :style="{ width: '100%' }"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="新密码" prop="name">
+        <el-input
+          v-model="pswd.newPswd1"
+          placeholder="请输入新密码"
+          type="password"
+          clearable
+          :style="{ width: '100%' }"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="确认密码" prop="name">
+        <el-input
+          v-model="pswd.newPswd2"
+          placeholder="请再次输入新密码"
+          type="password"
+          clearable
+          :style="{ width: '100%' }"
+        ></el-input>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="visible2 = false" class="h-but_1">取消</el-button>
+      <el-button type="primary" @click="changePswdApi" class="h-but_2"
+        >确定</el-button
+      >
+    </template>
+  </el-dialog>
 </template>
 
 <script>
@@ -188,229 +384,559 @@ import { ElMessage } from 'element-plus'
 export default {
   name: 'head',
   data() {
-        return {
-            userInfo: {},
-            visible:false,
-            visible2:false,
-            pswd: {
-              oldPswd: "",
-              newPswd1: "",
-              newPswd2: "",
-            },
-        }
-    },
-  mounted(){
-    this.navSelected();//导航选中效果
-    this.getUserInfo();//获得登录用户信息
+    return {
+      userInfo: {},
+      visible: false,
+      visible2: false,
+      pswd: {
+        oldPswd: '',
+        newPswd1: '',
+        newPswd2: ''
+      }
+    }
   },
-  methods:{
-    navSelected(){
-      var path=this.$route.path;
-      if(path.indexOf("/dataSource")==0){
-        $("#dataSource").addClass("bg");
+  mounted() {
+    this.navSelected() //导航选中效果
+    this.getUserInfo() //获得登录用户信息
+  },
+  methods: {
+    navSelected() {
+      var path = this.$route.path
+      if (path.indexOf('/dataSource') == 0) {
+        $('#dataSource').addClass('bg')
+      }
+      if (path.indexOf('/dataModel') == 0) {
+        $('#dataModel').addClass('bg')
+      }
+      if (path.indexOf('/visualization') == 0) {
+        $('#visualization').addClass('bg')
       }
-      if(path.indexOf("/dataModel")==0){
-        $("#dataModel").addClass("bg");
-      } 
-      if(path.indexOf("/visualization")==0){
-        $("#visualization").addClass("bg");
-      } 
     },
     //打开数据库连接
-    openLink(linkPath){
-        this.$router.push(linkPath);
+    openLink(linkPath) {
+      this.$router.push(linkPath)
     },
     logout() {
-        window.localStorage.clear()
-        this.$router.push('/login')
-        // this.$dialog.confirm({
-        // message: '确定退出登录吗？',
-        // }).then(() => {
-        //     window.localStorage.clear()
-        //     this.$router.push('/login')
-        //     // window.location.reload()
-        // });
+      window.localStorage.clear()
+      this.$router.push('/login')
+      // this.$dialog.confirm({
+      // message: '确定退出登录吗？',
+      // }).then(() => {
+      //     window.localStorage.clear()
+      //     this.$router.push('/login')
+      //     // window.location.reload()
+      // });
     },
-    async getUserInfo(){
-        const res =await axios({url:'user/getUserInfo',method: 'get'});
-        // console.log("getUserInfo",res);
-        //登录成功
-        if(res.code==1){
-            this.userInfo=res.data;
-            this.$store.state.uid=this.userInfo.userId;
-            this.$store.state.username=this.userInfo.name;
-            this.$store.state.level=this.userInfo.level;
-        }else{
-          ElMessage(res.message);
-        }
+    async getUserInfo() {
+      const res = await axios({ url: 'user/getUserInfo', method: 'get' })
+      // console.log("getUserInfo",res);
+      //登录成功
+      if (res.code == 1) {
+        this.userInfo = res.data
+        this.$store.state.uid = this.userInfo.userId
+        this.$store.state.username = this.userInfo.name
+        this.$store.state.level = this.userInfo.level
+      } else {
+        ElMessage(res.message)
+      }
     },
     //提示权限弹窗
-    upLevel(){
-      this.visible=true;
+    upLevel() {
+      this.visible = true
     },
     //提升权限
-    async upLevelApi(level,price){
+    async upLevelApi(level, price) {
       //校验参数
-      if(this.pswd.oldPswd.length >= level){
-        this.$message({ type: 'success', message:"已经获得该vip等级的权限，不需要再购买"});
-        return false;
+      if (this.pswd.oldPswd.length >= level) {
+        this.$message({
+          type: 'success',
+          message: '已经获得该vip等级的权限，不需要再购买'
+        })
+        return false
       }
-      this.$confirm('确定花费'+price+'元购买该权限吗？<br><br><br>', '提示', {
-            confirmButtonText: '确定购买',
-            cancelButtonText: '取消',
-            dangerouslyUseHTMLString: true,
-            type: 'warning'
-            }).then(async () => {
-                this.loading = this.$loading({
-                    lock: true,
-                    text: "提升权限中....",
-                    spinner: 'el-icon-loading',
-                    background: 'rgba(0, 0, 0, 0.7)'
-                });
-                
-                var data={
-                  level:level
-                }
-                
-                const res =await axios({url:'user/upLevel', data: data,method: 'post'});
-                  this.loading.close();
-                  //成功
-                  if(res.code==1){
-                    this.$message({ type: 'success', message:"恭喜，提升权限成功！"});
-                    this.getUserInfo();
-                    // this.visible=false;
-                  }else{
-                    // ElMessage(res.message);
-                    this.$message({ type: 'error', message:res.message});
-                  }
-            })
+      this.$confirm(
+        '确定花费' + price + '元购买该权限吗？<br><br><br>',
+        '提示',
+        {
+          confirmButtonText: '确定购买',
+          cancelButtonText: '取消',
+          dangerouslyUseHTMLString: true,
+          type: 'warning'
+        }
+      ).then(async () => {
+        this.loading = this.$loading({
+          lock: true,
+          text: '提升权限中....',
+          spinner: 'el-icon-loading',
+          background: 'rgba(0, 0, 0, 0.7)'
+        })
+
+        var data = {
+          level: level
+        }
+
+        const res = await axios({
+          url: 'user/upLevel',
+          data: data,
+          method: 'post'
+        })
+        this.loading.close()
+        //成功
+        if (res.code == 1) {
+          this.$message({ type: 'success', message: '恭喜，提升权限成功！' })
+          this.getUserInfo()
+          // this.visible=false;
+        } else {
+          // ElMessage(res.message);
+          this.$message({ type: 'error', message: res.message })
+        }
+      })
     },
     //修改密码弹窗
-    changePswd(){
-      this.pswd= {
-              oldPswd: "",
-              newPswd1: "",
-              newPswd2: "",
-            };
-      this.visible2=true;
+    changePswd() {
+      this.pswd = {
+        oldPswd: '',
+        newPswd1: '',
+        newPswd2: ''
+      }
+      this.visible2 = true
     },
     //修改密码
-    async changePswdApi(){
+    async changePswdApi() {
       //校验参数
-      if(this.pswd.oldPswd.length < 1){
-        this.$message({ type: 'error', message:"旧密码必填"});
-        return false;
+      if (this.pswd.oldPswd.length < 1) {
+        this.$message({ type: 'error', message: '旧密码必填' })
+        return false
       }
-      if(this.pswd.newPswd1.length < 1){
-        this.$message({ type: 'error', message:"新密码必填"});
-        return false;
+      if (this.pswd.newPswd1.length < 1) {
+        this.$message({ type: 'error', message: '新密码必填' })
+        return false
       }
-      if(this.pswd.newPswd1 != this.pswd.newPswd2){
-        this.$message({ type: 'error', message:"两次输入密码不一致！"});
-        return false;
+      if (this.pswd.newPswd1 != this.pswd.newPswd2) {
+        this.$message({ type: 'error', message: '两次输入密码不一致！' })
+        return false
       }
-      const res =await axios({url:'user/changePswd', data: this.pswd,method: 'post'});
-        // console.log("res",res);
-        //登录成功
-        if(res.code==1){
-          this.$message({ type: 'success', message:"恭喜，密码修改成功！"});
-          this.visible2=false;
-        }else{
-			    // ElMessage(res.message);
-          this.$message({ type: 'error', message:res.message});
-        }
-    },
+      const res = await axios({
+        url: 'user/changePswd',
+        data: this.pswd,
+        method: 'post'
+      })
+      // console.log("res",res);
+      //登录成功
+      if (res.code == 1) {
+        this.$message({ type: 'success', message: '恭喜，密码修改成功！' })
+        this.visible2 = false
+      } else {
+        // ElMessage(res.message);
+        this.$message({ type: 'error', message: res.message })
+      }
+    }
   }
 }
 </script>
 
 <style lang="scss">
-
 // 头部
-.g_head{ width: 100%; height: 400px; overflow: hidden; background: url(../../assets/images/head_bg.png) no-repeat 50% 50%; background-size:auto 100%;}
+.g_head {
+  width: 100%;
+  height: 400px;
+  overflow: hidden;
+  background: url(../../assets/images/head_bg.png) no-repeat 50% 50%;
+  background-size: auto 100%;
+}
 // 顶部
-.g_top{ width: 100%; height: 28px; background: url(../../assets/images/top_bg.png) repeat-x 50% 50%; line-height: 28px; color: #ddd; font-size: 12px;}
-.g_top_notice{ float: left; height: 28px;}
-.g_top_notice .title{ float: left; height: 28px; width: 100px; text-align: right; overflow: hidden;}
-.g_top_notice .text{ float: left; height: 28px; width: 500px; overflow: hidden;}
-.g_top_user{ float: right; height: 28px; margin: 0 20px 0 0;}
-.g_top_user .menu{ float: right;}
+.g_top {
+  width: 100%;
+  height: 28px;
+  background: url(../../assets/images/top_bg.png) repeat-x 50% 50%;
+  line-height: 28px;
+  color: #ddd;
+  font-size: 12px;
+}
+.g_top_notice {
+  float: left;
+  height: 28px;
+}
+.g_top_notice .title {
+  float: left;
+  height: 28px;
+  width: 100px;
+  text-align: right;
+  overflow: hidden;
+}
+.g_top_notice .text {
+  float: left;
+  height: 28px;
+  width: 500px;
+  overflow: hidden;
+}
+.g_top_user {
+  float: right;
+  height: 28px;
+  margin: 0 20px 0 0;
+}
+.g_top_user .menu {
+  float: right;
+}
 //element-ui---下拉菜单
 //菜单文字
-.g_top_user .menu .el-dropdown{ height: 20px;}//可以调整箭头的距离
-.g_top_user .menu .el-dropdown-link {cursor: pointer;color: #ddd; font-size: 12px;}
+.g_top_user .menu .el-dropdown {
+  height: 20px;
+} //可以调整箭头的距离
+.g_top_user .menu .el-dropdown-link {
+  cursor: pointer;
+  color: #ddd;
+  font-size: 12px;
+}
 //菜单选项
-.el-dropdown-menu.hj2{ background: #262c33; color: #ddd; border: none; border-radius: 0; padding: 0px 0;}
-.el-dropdown-menu.hj2 li{ color: #ddd; line-height: 26px; border-bottom: #1a1b1d 1px solid; font-size: 12px;}
-.el-dropdown-menu.hj2 li:hover{ color: #2681ff; background: none;}
-.el-dropdown-menu.hj2 li:last-child{ border: none;}
+.el-dropdown-menu.hj2 {
+  background: #262c33;
+  color: #ddd;
+  border: none;
+  border-radius: 0;
+  padding: 0px 0;
+}
+.el-dropdown-menu.hj2 li {
+  color: #ddd;
+  line-height: 26px;
+  border-bottom: #1a1b1d 1px solid;
+  font-size: 12px;
+}
+.el-dropdown-menu.hj2 li:hover {
+  color: #2681ff;
+  background: none;
+}
+.el-dropdown-menu.hj2 li:last-child {
+  border: none;
+}
 //小箭头
-.el-dropdown__popper.el-popper[role=tooltip] .el-popper__arrow::before{ border: none;}
+.el-dropdown__popper.el-popper[role='tooltip'] .el-popper__arrow::before {
+  border: none;
+}
 //下拉框
-.el-dropdown__popper.el-popper[role=tooltip]{ background: none; border: none;}
-.el-popper.is-light .el-popper__arrow::before{ border: none; background: #171b22;}
+.el-dropdown__popper.el-popper[role='tooltip'] {
+  background: none;
+  border: none;
+}
+.el-popper.is-light .el-popper__arrow::before {
+  border: none;
+  background: #171b22;
+}
 
-.g_top_user .phone{ float: right;}
-.g_top_user .phone span{font-size: 14px;}
-.g_top_user .phone em{ margin: 0 5px; font-size: 12px;}
+.g_top_user .phone {
+  float: right;
+}
+.g_top_user .phone span {
+  font-size: 14px;
+}
+.g_top_user .phone em {
+  margin: 0 5px;
+  font-size: 12px;
+}
 
 //个人中心
-.g_user_info{ width: 267px; overflow: hidden; background: #171b22;}
-.g_user_info .user{ float: left; width: 250px; margin: 20px 0 0 16px;}
-.g_user_info .user .img{ float: left; width: 55px; height: 55px; overflow: hidden;}
-.g_user_info .user .phone{ float: left; width: 150px; height: 24px; margin: 0 0 0 9px; line-height: 24px; font-size: 14px; color: #eee; overflow: hidden;}
-.g_user_info .user .level{ float: left; width: 180px; height: 29px; margin: 0 0 0 9px; overflow: hidden;}
-.g_user_info .user .level .num{ float: left; width: 80px; height: 23px; line-height: 23px; margin: 2px 0 0 0; font-size: 12px; color: #3489ff; overflow: hidden; background:#344153 url(../../assets/images/user_2.png) no-repeat 0 50%; border-radius: 10px;}
-.g_user_info .user .level .num em{ margin: 0 10px 0 5px; color: #fff; font-size: 10px; line-height: 25px;}
-.g_user_info .user .level .but{ float: right; width: 60px; height: 29px; line-height: 29px; text-align: right; font-size: 14px; color: #18bfc5; overflow: hidden; text-decoration: underline; cursor: pointer;}
-.g_user_info .user .level .but:hover{ color: #26f7ff;}
-.g_user_info .time{ float: left; width: 238px; height: 31px; line-height: 31px; text-align: center; background: #232831; font-size: 12px; color: #a9a9a9; margin: 24px 0 0 16px; overflow: hidden; border-radius: 5px;}
-.g_user_info .action{ float: left; width: 238px; margin: 22px 0 0 16px; overflow: hidden; padding: 0 0 10px 0;}
-.g_user_info .action .but{ float: left; width: 238px; height: 40px; line-height: 40px; overflow: hidden; cursor: pointer;}
-.g_user_info .action .but .link{ float: left;height: 40px; overflow: hidden; color: #aaaaaa; font-size: 14px;}
-.g_user_info .action .but .link span{ color: #aaaaaa; font-size: 18px; vertical-align: middle; margin: 0 15px 0 5px;}
-.g_user_info .action .but .ico{ float: right;height: 40px; overflow: hidden; color: #aaaaaa; font-size: 14px;}
-.g_user_info .action .but .link i{ color: #aaaaaa; font-size: 20px; vertical-align: middle; margin: 0 3px 0 0px;}
-.g_user_info .action .but:hover .link{ color: #ddd;}
-.g_user_info .action .but:hover .ico{ color: #ddd;}
-.g_user_info .action .but:hover .link span{ color: #ddd;}
-
-
+.g_user_info {
+  width: 267px;
+  overflow: hidden;
+  background: #171b22;
+}
+.g_user_info .user {
+  float: left;
+  width: 250px;
+  margin: 20px 0 0 16px;
+}
+.g_user_info .user .img {
+  float: left;
+  width: 55px;
+  height: 55px;
+  overflow: hidden;
+}
+.g_user_info .user .phone {
+  float: left;
+  width: 150px;
+  height: 24px;
+  margin: 0 0 0 9px;
+  line-height: 24px;
+  font-size: 14px;
+  color: #eee;
+  overflow: hidden;
+}
+.g_user_info .user .level {
+  float: left;
+  width: 180px;
+  height: 29px;
+  margin: 0 0 0 9px;
+  overflow: hidden;
+}
+.g_user_info .user .level .num {
+  float: left;
+  width: 80px;
+  height: 23px;
+  line-height: 23px;
+  margin: 2px 0 0 0;
+  font-size: 12px;
+  color: #3489ff;
+  overflow: hidden;
+  background: #344153 url(../../assets/images/user_2.png) no-repeat 0 50%;
+  border-radius: 10px;
+}
+.g_user_info .user .level .num em {
+  margin: 0 10px 0 5px;
+  color: #fff;
+  font-size: 10px;
+  line-height: 25px;
+}
+.g_user_info .user .level .but {
+  float: right;
+  width: 60px;
+  height: 29px;
+  line-height: 29px;
+  text-align: right;
+  font-size: 14px;
+  color: #18bfc5;
+  overflow: hidden;
+  text-decoration: underline;
+  cursor: pointer;
+}
+.g_user_info .user .level .but:hover {
+  color: #26f7ff;
+}
+.g_user_info .time {
+  float: left;
+  width: 238px;
+  height: 31px;
+  line-height: 31px;
+  text-align: center;
+  background: #232831;
+  font-size: 12px;
+  color: #a9a9a9;
+  margin: 24px 0 0 16px;
+  overflow: hidden;
+  border-radius: 5px;
+}
+.g_user_info .action {
+  float: left;
+  width: 238px;
+  margin: 22px 0 0 16px;
+  overflow: hidden;
+  padding: 0 0 10px 0;
+}
+.g_user_info .action .but {
+  float: left;
+  width: 238px;
+  height: 40px;
+  line-height: 40px;
+  overflow: hidden;
+  cursor: pointer;
+}
+.g_user_info .action .but .link {
+  float: left;
+  height: 40px;
+  overflow: hidden;
+  color: #aaaaaa;
+  font-size: 14px;
+}
+.g_user_info .action .but .link span {
+  color: #aaaaaa;
+  font-size: 18px;
+  vertical-align: middle;
+  margin: 0 15px 0 5px;
+}
+.g_user_info .action .but .ico {
+  float: right;
+  height: 40px;
+  overflow: hidden;
+  color: #aaaaaa;
+  font-size: 14px;
+}
+.g_user_info .action .but .link i {
+  color: #aaaaaa;
+  font-size: 20px;
+  vertical-align: middle;
+  margin: 0 3px 0 0px;
+}
+.g_user_info .action .but:hover .link {
+  color: #ddd;
+}
+.g_user_info .action .but:hover .ico {
+  color: #ddd;
+}
+.g_user_info .action .but:hover .link span {
+  color: #ddd;
+}
 
 // 广告
-.g_banner{ width: 100%; height: 200px; overflow: hidden; margin: 75px 0 0 0;}
+.g_banner {
+  width: 100%;
+  height: 200px;
+  overflow: hidden;
+  margin: 75px 0 0 0;
+}
 
 // 导航
-.g_nav{ width: 100%; margin: 40px 0 0 0; height: 80px; background: url(../../assets/images/nav_bg.png) repeat-x 50% 50%;}
-.g_nav ul{ float: left; height: 56px; margin: -20px 0 0 0;}
-.g_nav ul li{ float: left; width: 280px; height: 56px; line-height: 56px; text-align: center; color: #aaa; font-size: 18px; cursor: pointer;}
-.g_nav ul li span{ margin: 0 13px 0 0; display: inline-block; vertical-align: middle;}
-.g_nav ul li span.iconshujuyuan{ font-size: 16px; margin: -3px 13px 0 0;}
-.g_nav ul li span.iconshujuyuanmoxing{ font-size: 18px; margin: -3px 13px 0 0;}
-.g_nav ul li span.iconshujukeshihua{ font-size: 20px; margin: 0px 13px 0 0;}
-.g_nav ul li.bg{ color: #fff; background: url(../../assets/images/nav_active.png) no-repeat 50% 50%;}
-
+.g_nav {
+  width: 100%;
+  margin: 40px 0 0 0;
+  height: 80px;
+  background: url(../../assets/images/nav_bg.png) repeat-x 50% 50%;
+}
+.g_nav ul {
+  float: left;
+  height: 56px;
+  margin: -20px 0 0 0;
+}
+.g_nav ul li {
+  float: left;
+  width: 280px;
+  height: 56px;
+  line-height: 56px;
+  text-align: center;
+  color: #aaa;
+  font-size: 18px;
+  cursor: pointer;
+}
+.g_nav ul li span {
+  margin: 0 13px 0 0;
+  display: inline-block;
+  vertical-align: middle;
+}
+.g_nav ul li span.iconshujuyuan {
+  font-size: 16px;
+  margin: -3px 13px 0 0;
+}
+.g_nav ul li span.iconshujuyuanmoxing {
+  font-size: 18px;
+  margin: -3px 13px 0 0;
+}
+.g_nav ul li span.iconshujukeshihua {
+  font-size: 20px;
+  margin: 0px 13px 0 0;
+}
+.g_nav ul li.bg {
+  color: #fff;
+  background: url(../../assets/images/nav_active.png) no-repeat 50% 50%;
+}
 
-.h-up-level.el-dialog{ background: #171b22;}
-.h-up-level.el-dialog .el-dialog__body{ margin: -18px 0 0 0;padding: 17px 20px 20px 20px;}
-.h-up-level.el-dialog .el-dialog__header{ border-top:none; padding: 12px 20px 10px;}
-.h-up-level.el-dialog .el-dialog__title{ color: #2681ff; font-size: 14px; margin: 0 0 0 0px;}
-.h-up-level.el-dialog .el-dialog__close{ color: #fff;}
-.up_level .el-overlay{ background-color: rgba(0,0,0,.9);}
+.h-up-level.el-dialog {
+  background: #171b22;
+}
+.h-up-level.el-dialog .el-dialog__body {
+  margin: -18px 0 0 0;
+  padding: 17px 20px 20px 20px;
+}
+.h-up-level.el-dialog .el-dialog__header {
+  border-top: none;
+  padding: 12px 20px 10px;
+}
+.h-up-level.el-dialog .el-dialog__title {
+  color: #2681ff;
+  font-size: 14px;
+  margin: 0 0 0 0px;
+}
+.h-up-level.el-dialog .el-dialog__close {
+  color: #fff;
+}
+.up_level .el-overlay {
+  background-color: rgba(0, 0, 0, 0.9);
+}
 
 //提升权限弹窗--内容
-.up_level_box{ width: 90%; margin: 40px auto;overflow: auto;}
-.up_level_box .box{ width: 1480px; overflow: hidden;}
-.up_level_box .box .level{ float: left; width: 256px; height: 620px; background: #20252d; margin: 0 38px 0 0;}
-.up_level_box .box .level .title{ float: left; width: 100%; height: 44px; line-height: 44px; text-align: center; margin: 26px 0 0 0; color: #fff; font-size: 18px;}
-.up_level_box .box .level .img{ float: left; width: 100%; height: 100px; text-align: center; margin: 15px 0 0 0;}
-.up_level_box .box .level .img img{ width: 100px; height: 100px; border-radius: 50px; background: #16191f;}
-.up_level_box .box .level .line{ float: left; width: 85%; height: 1px; margin: 33px 0 0 19px; background: #374054;}
-.up_level_box .box .level .content{ float: left; width: 100%; margin: 22px 0 0 0; overflow: hidden;}
-.up_level_box .box .level .content .remark{ float: left; width: 186px; height: 30px; line-height: 30px; overflow: hidden; margin: 0 0 0 58px; color: #a4a4a4; font-size: 14px;}
-.up_level_box .box .level .content .remark span{ color: #a4a4a4; font-size: 14px; margin: 0 15px 0 0; vertical-align: middle;}
-.up_level_box .box .level .price{ float: left; width: 100%; height: 40px; line-height: 40px; text-align: center; margin: 27px 0 0 0; overflow: hidden; font-size: 14px; color: #0bdcd0;}
-.up_level_box .box .level .but{ float: left; width: 122px; height: 34px; line-height: 34px; text-align: center; margin: 20px 0 0 68px; overflow: hidden; font-size: 14px; color: #fff; cursor: pointer; background: #2681ff;}
-.up_level_box .box .level .but:hover{ background: #1a6fe6;}
-.up_level_box .box .level .but.bg{ background: #272d36;}
+.up_level_box {
+  width: 90%;
+  margin: 40px auto;
+  overflow: auto;
+}
+.up_level_box .box {
+  width: 1480px;
+  overflow: hidden;
+}
+.up_level_box .box .level {
+  float: left;
+  width: 256px;
+  height: 620px;
+  background: #20252d;
+  margin: 0 38px 0 0;
+}
+.up_level_box .box .level .title {
+  float: left;
+  width: 100%;
+  height: 44px;
+  line-height: 44px;
+  text-align: center;
+  margin: 26px 0 0 0;
+  color: #fff;
+  font-size: 18px;
+}
+.up_level_box .box .level .img {
+  float: left;
+  width: 100%;
+  height: 100px;
+  text-align: center;
+  margin: 15px 0 0 0;
+}
+.up_level_box .box .level .img img {
+  width: 100px;
+  height: 100px;
+  border-radius: 50px;
+  background: #16191f;
+}
+.up_level_box .box .level .line {
+  float: left;
+  width: 85%;
+  height: 1px;
+  margin: 33px 0 0 19px;
+  background: #374054;
+}
+.up_level_box .box .level .content {
+  float: left;
+  width: 100%;
+  margin: 22px 0 0 0;
+  overflow: hidden;
+}
+.up_level_box .box .level .content .remark {
+  float: left;
+  width: 186px;
+  height: 30px;
+  line-height: 30px;
+  overflow: hidden;
+  margin: 0 0 0 58px;
+  color: #a4a4a4;
+  font-size: 14px;
+}
+.up_level_box .box .level .content .remark span {
+  color: #a4a4a4;
+  font-size: 14px;
+  margin: 0 15px 0 0;
+  vertical-align: middle;
+}
+.up_level_box .box .level .price {
+  float: left;
+  width: 100%;
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  margin: 27px 0 0 0;
+  overflow: hidden;
+  font-size: 14px;
+  color: #0bdcd0;
+}
+.up_level_box .box .level .but {
+  float: left;
+  width: 122px;
+  height: 34px;
+  line-height: 34px;
+  text-align: center;
+  margin: 20px 0 0 68px;
+  overflow: hidden;
+  font-size: 14px;
+  color: #fff;
+  cursor: pointer;
+  background: #2681ff;
+}
+.up_level_box .box .level .but:hover {
+  background: #1a6fe6;
+}
+.up_level_box .box .level .but.bg {
+  background: #272d36;
+}
 </style>