@hbisty/qj-common 5.0.4

package/src/views/pc/default/top-modules/topBar.vue

@@ -0,0 +1,305 @@
+<template>
+  <div class="common-top-bar">
+    <div class="inner w1200 m0a">
+      <div class="left">
+        <!-- <i class="el-icon-location-outline"></i> -->
+        <p class="top-left-con">
+          <span v-if="isLogin && userInfor">Hi,{{decodeURIComponent(userInfor.userName)}}</span>
+          <!-- <span v-else>Hi，欢迎来到商城！</span> -->
+        </p>
+        <ul class="top-left-ul">
+          <li class="rignt-line"></li>
+          <li v-if="!isLogin">
+            <a href="/paas/index/index.html#/loginPc">登录</a>
+          </li>
+          <li v-if="!isLogin" class="rignt-line">|</li>
+          <li v-if="!isLogin">
+            <a href="/paas/index/index.html#/regPc">注册</a>
+          </li>
+          <li v-if="isLogin">
+            <a href="javascript:;" @click="logout">退出</a>
+          </li>
+        </ul>
+      </div>
+      <div class="right">
+        <ul class>
+          <li>
+            <span v-if="isLogin && userInfor">您好,{{userInfor.userName}}</span>
+            <span v-else>Hi，欢迎来到商城！</span>
+          </li>
+          <li v-if="isLogin" class="rignt-line">|</li>
+          <li v-if="isLogin">
+            <a href="javascript:;" @click="logout">退出</a>
+          </li>
+          <li v-if="!isLogin">
+            <a href="/paas/index/index.html#/loginPc">登录</a>
+          </li>
+          <li v-if="!isLogin" class="rignt-line">|</li>
+          <li v-if="!isLogin">
+            <a href="/paas/index/index.html#/regPc">注册</a>
+          </li>
+          <!-- <li v-if="!isLogin">
+            <i class="iconfont icon-beixin5" ></i>
+            <a href="javascript:;">消息</a>
+          </li>-->
+          <li class="rignt-line">|</li>
+          <li>
+            <i class="iconfont icon-beixin8"></i>
+            <a href="/paas/order-manager/index.html#/order">我的订单</a>
+          </li>
+          <li class="rignt-line">|</li>
+          <li class="gw">
+            <i class="iconfont icon-beixin2"></i>
+            <a @click.stop="gwopen">我的顾问</a>
+            <div v-if="flaggw" class="triangle_border_up">
+              <span></span>
+            </div>
+            <div v-if="flaggw" class="mygw">{{gw}}</div>
+          </li>
+          <li class="rignt-line">|</li>
+          <li>
+            <i class="iconfont icon-beixin7"></i>
+            <a href="javascript:;">400-880-8260</a>
+          </li>
+          <li v-if="isLogin" class="rignt-line">|</li>
+          <li @mouseenter="enter" @mouseleave="leave">
+            <i class="iconfont icon-beixin"></i>
+            <a href="javascript:;">北新APP</a>
+            <div v-if="show" class="erwm">
+              <div>
+                <img :src="myerwm" alt />
+                <div>ios</div>
+              </div>
+              <div>
+                <img :src="myerwm" alt />
+                <div>Android</div>
+              </div>
+            </div>
+          </li>
+          <!-- <li class="rignt-line">|</li>
+          <li>
+            <a href="/">首页</a>
+          </li>-->
+          <!-- <li>
+            <a href>我要加盟</a>
+          </li>
+          <li>
+            <a href>技术支持</a>
+          </li>-->
+
+          <li class="rignt-line">|</li>
+          <li>
+            <a href="/paas/user-manager/index.html#/user">会员中心</a>
+          </li>
+          <!-- <li>
+            <a href>关于品牌</a>
+          </li>
+          <li>
+            <a href>移动版</a>
+          </li>-->
+        </ul>
+      </div>
+    </div>
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+import { logout } from "#/api/login";
+import { getToken, removeToken } from "#/utils/auth";
+import API from "#/api/common/index.js";
+import erwm from "#/assets/newerwei.png";
+
+export default {
+  data() {
+    return {
+      gw: "暂无顾问",
+      flaggw: false,
+      myerwm: erwm,
+      show: false
+    };
+  },
+  computed: {
+    isLogin() {
+      return this.getUserCookie() ? getToken(this.getUserCookie()) : false;
+    },
+    userInfor() {
+      let info =
+        this.getUserCookie() && getToken(this.getUserCookie())
+          ? JSON.parse(getToken(this.getUserCookie()))
+          : {};
+      return info;
+    }
+  },
+  mounted() {
+    window.addEventListener("click", this.gwhide);
+  },
+  methods: {
+    gwopen() {
+      API.getCustrelByEmployee().then(res => {
+        if (res) {
+          if (res.employeePhone) {
+            this.gw = res.employeePhone;
+          } else {
+            this.gw = "暂无顾问";
+          }
+        } else {
+          this.gw = "暂无顾问";
+        }
+      });
+      this.flaggw = true;
+    },
+    gwhide() {
+      this.flaggw = false;
+    },
+    enter() {
+      this.show = true;
+    },
+    leave() {
+      this.show = false;
+    },
+    logout() {
+      // 退出
+      logout().then(() => {
+        let newDomain = document.domain
+          .split(".")
+          .splice(-2)
+          .join(".");
+        removeToken("LOGININFO", newDomain, "/");
+        // removeToken("personalInfo", newDomain, "/");
+        // location.reload();
+        location.href = location.origin;
+      });
+    },
+    getUserCookie() {
+      let cookie = document.cookie;
+      let start = cookie.indexOf("saas-user-");
+      if (start > -1) {
+        let end = cookie.indexOf("=", start);
+        return cookie.substring(start, end);
+      } else {
+        return null;
+      }
+    }
+  }
+};
+</script>
+
+<style  rel="stylesheet/scss" lang="scss" scoped >
+.common-top-bar {
+  position: relative;
+}
+.gw {
+  position: relative;
+}
+.mygw {
+  // border: 1px solid #ccc;
+  border-radius: 5px;
+  text-align: center;
+  // display: none;
+  background-color: white;
+  z-index: 999;
+  width: 200px;
+  height: 30px;
+  line-height: 30px;
+  position: absolute;
+  left: -50%;
+  top: 40px;
+  box-shadow: 0px 0px 10px #ccc;
+}
+.triangle_border_up {
+  // display: none;
+  position: absolute;
+  left: 66%;
+  top: 30px;
+  width: 0;
+  height: 0;
+  border-width: 0 10px 10px;
+  border-style: solid;
+  border-color: transparent transparent white; /*透明 透明  灰*/
+}
+.erwm {
+  text-align: center;
+  width: 220px;
+  img {
+    width: 100px;
+    height: 100px;
+    display: block;
+  }
+  div {
+    display: inline-block;
+  }
+  position: absolute;
+  right: 0;
+  top: 40px;
+  z-index: 9999;
+}
+.top-left-con {
+  float: left;
+  // margin: 0 20px;
+}
+.top-left-ul {
+  // margin: 0 20px;
+  margin-left: 9px;
+  float: left;
+  li {
+    float: left;
+    margin: 0 10px;
+    a {
+      color: #666;
+      // &:hover {
+      //   color: #ff9e01;
+      // }
+    }
+  }
+}
+.common-top-bar {
+  color: #666;
+  font-size: 13px;
+  width: 100%;
+  height: 40px;
+  line-height: 40px;
+  background-color: #fff;
+  .inner {
+    .left {
+      float: left;
+    }
+    .right {
+      float: right;
+      position: relative;
+      ul {
+        margin-right: 1px;
+      }
+      ul li {
+        margin: 0 10px;
+        float: left;
+        float:left a {
+          color: #666;
+        }
+        // &:hover a {
+        //   color: #ff9e01;
+        // }
+      }
+      .line {
+        width: 1px;
+        height: 16px;
+        background: #ccc;
+        margin: 12px 28px;
+      }
+      .item {
+        vertical-align: top;
+        height: 20px;
+        margin-top: 12px;
+        line-height: 20px;
+      }
+    }
+  }
+}
+.common-top-bar .inner ul li.rignt-line {
+  // overflow: hidden;
+  // margin: 16px 20px 0;
+  // width: 1px;
+  // height: 10px;
+  // background-color: #ccc;
+}
+</style>

package/src/views/pc/default/top-modules/topBulk.vue

@@ -0,0 +1,281 @@
+<template>
+  <!-- 鞍钢的顶部 -->
+  <div class="ans-header">
+    <div class="ans-header__top">
+      <div class="auto flex">
+        <div class="ans-header__top--login flex flex-item1">
+          <div v-if="personalInfo" class="ans-header__top--user flex">
+            <p
+              @click="userHandler"
+            >你好,{{personalInfo.merberCompname}}</p>
+            <p class="quit" @click="logout">退出登录</p>
+          </div>
+          <div v-else class="ans-header__top--noLogin flex">
+            <a class="reg-href"  >您好，欢迎来到大宗交易平台！</a>
+           
+            <a class="login-href c-theme" href="/paas/index/index.html#/loginPcA">请登录</a>
+            <span>|</span>
+             <a class="reg-href" href="/paas/index/index.html#/choice" style="padding-left:10px;color:red">注册</a>
+          </div>
+        </div>
+        <div class="ans-header__top--list">
+          <ul class="flex">
+            <li>
+              <a href="/">首页</a>
+              <span>|</span>
+            </li>
+            <li>
+              <a href="/paas/user-manager/index.html#/user">买家中心</a>
+              <span>|</span>
+            </li>
+            <li>
+              <!-- <a href='http://mem.xh.dllg56.com'>卖家中心</a> -->
+              <a href='http://ctpmerchant.qjdemo.qjclouds.com/paas/index/index.html#/login'>卖家中心</a>
+              <span>|</span>
+            </li>
+            <li>
+              <a href='/paas/pc-mall/index.html#/publicDetails?id=suggestedBrowser'>帮助中心</a>
+              <span>|</span>
+            </li>
+            <li>
+              <a href>客服热线：<span style='color:#f23a3a'> 400-9855-888</span>   </a>
+              <span>|</span>
+            </li>
+            <li>
+              <a>
+                <i class="iconfont icon-weixin"></i>
+                微信
+              </a>
+              <span>|</span>
+              <div class="er-box">
+                <img src="../assets/dllgwap.png" alt />
+              </div>
+            </li>
+            <li>
+              <a href="http://wpa.qq.com/msgrd?v=3&uin=631502245&site=qq&menu=yes">
+                <i class="iconfont icon-QQ "></i>
+                QQ
+              </a>
+              <!--<div class="er-box">
+                <img src="../../../../assets/WeChat.png" alt />
+              </div>-->
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+import { logout } from "#/api/login";
+import { getToken, removeToken } from "#/utils/auth";
+import API from "#/api/common/index.js";
+import erwm from "#/assets/newerwei.png";
+
+export default {
+  data() {
+    return {
+      gw: "暂无顾问",
+      flaggw: false,
+      myerwm: erwm,
+      show: false,
+      userInfor: {},
+      personalInfo:"",
+      name: ""
+    };
+  },
+  computed: {
+    isLogin() {
+      return this.getUserCookie() ? true : false;
+    }
+  },
+  mounted() {
+    window.addEventListener("click", this.gwhide);
+    this.personalInfo = JSON.parse(this.getCookie('personalInfo'))
+      ? JSON.parse(this.getCookie('personalInfo'))
+      : '';
+    console.log("=====personalInfo=====", this.personalInfo)
+    this.userInfor =
+      this.getUserCookie() && this.getCookieDecodeURI(this.getUserCookie())
+        ? JSON.parse(this.getCookieDecodeURI(this.getUserCookie()))
+        : {};
+        console.log("=====userInfor=====", this.userInfor)
+  },
+  methods: {
+    gwopen() {
+      API.getCustrelByEmployee().then(res => {
+        if (res) {
+          if (res.employeePhone) {
+            this.gw = res.employeePhone;
+          } else {
+            this.gw = "暂无顾问";
+          }
+        } else {
+          this.gw = "暂无顾问";
+        }
+      });
+      this.flaggw = true;
+    },
+    getCookie(name) {
+      // 拆分 cookie 字符串
+      var cookieArr = document.cookie.split(';')
+      // 循环遍历数组元素
+      for (var i = 0; i < cookieArr.length; i++) {
+        var cookiePair = cookieArr[i].split('=')
+        /* 删除 cookie 名称开头的空白并将其与给定字符串进行比较 */
+        if (name == cookiePair[0].trim()) {
+          // 解码cookie值并返回
+          return decodeURIComponent(cookiePair[1])
+        }
+      }
+      // 如果未找到，则返回null
+      return null
+    },
+    // 获取用户登录信息
+    getCookieDecodeURI(name) {
+      let arr,
+        reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
+      if ((arr = document.cookie.match(reg))) {
+        return decodeURIComponent(arr[2]);
+      } else {
+        return null;
+      }
+    },
+    gwhide() {
+      this.flaggw = false;
+    },
+    enter() {
+      this.show = true;
+    },
+    leave() {
+      this.show = false;
+    },
+    login() {
+      location.href = "/paas/pc-mall/index.html#/loginPc";
+    },
+    register() {
+      location.href = "/paas/pc-mall/index.html#/regPc";
+    },
+    userHandler() {
+      location.href = "/paas/user-manager/index.html#/user";
+    },
+    indexHandler() {
+      location.href = location.origin;
+    },
+    logout() {
+      // 退出
+      logout({}).then((res) => {
+        const newDomain = document.domain.split('.').splice(-2).join('.')
+        removeToken('LOGININFO', newDomain, '/')
+        removeToken('personalInfo', newDomain, '/')
+        removeToken('saas-user-pc', newDomain, '/')
+        location.reload()
+      })
+    },
+    getUserCookie() {
+      let cookie = document.cookie;
+      let start = cookie.indexOf("saas-user-");
+      if (start > -1) {
+        let end = cookie.indexOf("=", start);
+        return cookie.substring(start, end);
+      } else {
+        return null;
+      }
+    }
+  }
+};
+</script>
+
+<style  rel="stylesheet/scss" lang="scss" scoped>
+@import "../assets/flex";
+
+.ans-header {
+  position: relative;
+  &__top {
+    border-bottom: 1px solid #eee;
+    height: 36px;
+    line-height: 36px;
+    background: #fff;
+    font-size: 14px;
+    color: #253554;
+    &--user {
+      p {
+        margin-right: 12px;
+        cursor: pointer;
+        &:hover {
+          color: #f23a3a;
+        }
+      }
+    }
+    &--noLogin {
+      a {
+        margin-right: 12px;
+      }
+    }
+    &--login {
+      a {
+        margin-right: 12px;
+        cursor: pointer;
+        display: block;
+
+        &:hover {
+          color: #ee4b3f;
+        }
+      }
+    }
+
+    &--list {
+      li {
+        position: relative;
+
+        &:hover {
+          a {
+            color: #ee4b3f;
+          }
+
+          .er-box {
+            display: block;
+          }
+        }
+
+        .er-box {
+          background: url("../../../../assets/er_bg.png");
+          width: 56px;
+          height: 64px;
+          position: absolute;
+          top: 44px;
+          left: 0px;
+          display: none;
+          z-index: 10;
+
+          img {
+            width: 52px;
+            height: 52px;
+            display: block;
+            margin: 10px 2px 2px 2px;
+          }
+        }
+      }
+
+      a {
+        color: #253554;
+
+        i {
+          color: #253554;
+        }
+      }
+
+      span {
+        color: #d8d8d8;
+        margin: 0 12px;
+      }
+    }
+  }
+}
+.auto {
+  margin: 0 auto;
+  width: 1200px;
+}
+</style>