@hbisty/qj-common 5.0.4

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

@@ -0,0 +1,197 @@
+<template>
+  <div class="common-top-bar">
+    <div class="inner w1200 m0a">
+      <div v-if="userInfo.userPhone" class="login-name">
+        <span>{{ userInfo.userName }}</span>
+        <a href="javascript:;" @click="logout">[ {{ th('loginOut') }}]</a>
+      </div>
+      <div v-else class="login-name login-names">
+        <a href="/paas/index/index.html#/loginPc">[{{ th('login') }}]</a>
+        <!-- <a href="/paas/index/index.html#/regPc">[{{th('signUp')}}]</a> -->
+      </div>
+      <div class="right">
+        <ul class>
+          <li>
+            <a href="/paas/welfare-bus-pc/index.html#/user" class="iconfont icon-wode-copy" style="font-size: 18px"></a>
+          </li>
+          <li class="rignt-line">|</li>
+          <li class="cars">
+            <a href="/paas/welfare-cli-pc/index.html#/car" class="iconfont icon-gouwudai6"></a>
+            <span class="bg-theme">{{ total }}</span>
+          </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,
+      total: 0,
+      logins: null,
+      userInfo: {},
+    };
+  },
+  updated() {
+    this.gw = this.th('none');
+  },
+  computed: {},
+  watch: {},
+  mounted() {
+    if (window.sessionStorage.getItem('personalInfo')) {
+      this.userInfo = JSON.parse(window.sessionStorage.getItem('personalInfo'));
+      this.getCarNum();
+    }
+  },
+  methods: {
+    th(key) {
+      return this.$th('common.pc.default.topModules.topDefault.', key);
+    },
+    getCarNum() {
+      API.shoppingList().then((res) => {
+        this.total = res && res.total;
+      });
+    },
+    gwopen() {
+      API.getCustrelByEmployee().then((res) => {
+        if (res) {
+          if (res.employeePhone) {
+            this.gw = res.employeePhone;
+          } else {
+            this.gw = this.th('none');
+          }
+        } else {
+          this.gw = this.th('none');
+        }
+      });
+      this.flaggw = true;
+    },
+
+    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';
+    },
+    logout() {
+      // 退出
+      logout().then(() => {
+        this.$message.success('退出登陆成功');
+        localStorage.clear();
+        sessionStorage.clear();
+        this.userInfo = {};
+        location.href = location.origin;
+      });
+    },
+  },
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.common-top-bar {
+  position: relative;
+  .right {
+    .cars {
+      position: relative;
+    }
+    span {
+      display: inline-block;
+      color: #fff;
+      border-radius: 50%;
+      top: 5px;
+      right: -15px;
+      width: 18px;
+      height: 18px;
+      text-align: center;
+      line-height: 18px;
+      position: absolute;
+      font-size: 12px;
+    }
+  }
+}
+.login-name {
+  float: left;
+  font-size: 14px;
+  color: #333;
+  span {
+    margin-right: 17px;
+  }
+  a {
+    color: #333;
+    margin: 0 7px;
+  }
+}
+.login-names {
+  color: #666;
+  span {
+    cursor: pointer;
+  }
+  a {
+    color: #666;
+  }
+}
+
+.common-top-bar {
+  .rignt-line {
+    color: #ccc;
+  }
+  color: #666;
+  font-size: 13px;
+  width: 100%;
+  height: 38px;
+  line-height: 38px;
+  background-color: #fafafa;
+  .inner {
+    .left {
+      float: left;
+    }
+    .right {
+      float: right;
+      position: relative;
+      ul {
+        margin-right: 1px;
+      }
+      ul li {
+        margin: 0 7px;
+        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;
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,479 @@
+<template>
+  <div style="padding-bottom: 20px; border-bottom: 1px solid #f5f5f5">
+    <div class="headerclass">
+      <div class="headertop">
+        <ul>
+          <li @click="toIndex('logo')" style="cursor: pointer">
+            <img src="https://qjstatic.oss-cn-shanghai.aliyuncs.com/HDB/hdblogonew.jpg" alt="" />
+          </li>
+
+          <!-- <li>
+          <span style="color:#00427A"> [请选择城市]</span>
+        </li> -->
+        </ul>
+        <div>
+          <ul>
+            <li>
+              欢迎光临{{ flagSale ? '销售端,' : '网上商城,' }}
+              <span v-if="userInfo.userPhone"></span>
+              <span v-else>请</span>
+              <span class="tologin" @click="outLogin" v-if="userInfo.userPhone">{{ userInfo.userPhone }} 退出登录</span>
+              <span class="tologin" @click="toLogin" v-else-if="!userInfo.userPhone">登录</span>
+            </li>
+            <li v-if="!flagSale">|</li>
+            <li v-if="!flagSale">
+              <span @click="tosale"> 销售端 </span>
+            </li>
+            <!-- 海德堡 -->
+            <li v-if="!flagSale">|</li>
+            <li @click="open" v-if="!flagSale">
+              <el-popover placement="top" height="200" v-model="visible">
+                <img style="width: 200px" src="http://uatb2bcockpit.heidelbergchina.com//paas/shop/2020063000000001/2021-12-06/f389f0d5bcd746498fb81e31188ab2c8.jpg" />              
+                <!-- <div style="text-align: right; margin: 0">
+                <el-button type="text" size="mini" @click="visible = false">确定</el-button>
+              </div> -->
+                <el-button slot="reference" type="text">
+                  <span style="color: #000; font-size: 13px">手机订货更快捷</span>
+                </el-button>
+                           
+              </el-popover>
+              <img style="width: 12px; margin-top: -1px; padding-left: 3px" src="http://uatb2b.heidelbergchina.com/paas/shop/2020063000000001/2021-11-30/506a230b082e4381990398fa2613155f.png" alt="" />
+            </li>
+            <li v-if="flagSale" @click="goToShop" style="cursor: pointer">| 进入商城</li>
+          </ul>
+        </div>
+        <!-- <div v-if="flagSale"   class="shopGoToGo">
+            <div @click="goToShop" class="shoppingGo">
+           <span class="gogoShop">
+          进入商城
+        </span>
+        </div>
+    </div> -->
+      </div>
+      <div class="headerbot" v-if="!flagSale">
+        <ul>
+          <li>
+            <span @click="toIndex">首页</span>
+          </li>
+
+          <li>
+            <span @click="toPromotionZone">
+              促销专区
+              <img style="width: 35px" src="http://uatb2b.heidelbergchina.com/paas/shop/2020063000000001/2021-11-30/c5b4ee400df04e39ac1c738524a3cc48.png" alt="" />
+            </span>
+          </li>
+
+          <li>
+            <span @click="toClassification"> 产品中心 </span>
+          </li>
+          <li>
+            <span @click="toUsermain"> 会员中心 </span>
+          </li>
+          <li style="width: 400px; height: 40px">
+            <div class="searchBox">
+              <input v-model="searchValue" @keyup.enter="search" style="width: 400px; height: 27px; background: #fafafa" />
+              <div class="searchImg" @click="search()">
+                <span class="serchOther">|</span>
+                <img style="heigth: 14px" src="http://uatb2bcockpit.heidelbergchina.com/paas/shop/2020063000000001/2021-12-01/5719528c51d74fbf80bf3c810a86c6ae.png" alt="" />
+              </div>
+            </div>
+          </li>
+        </ul>
+        <ul v-if="showFlag">
+          <li style="display: flex; align-items: center; margin-right: 0">
+            <img src="http://uatb2b.heidelbergchina.com/paas/shop/2020063000000001/2021-11-30/8d0b576a53e149de9e677296bf8f1e46.png" alt="" style="heigth: 18px" />
+            <p class="shopCar" @click="toShop">
+              购物车
+              <span class="numberShop" v-if="this.userInfo">({{ goodsNum ? goodsNum : 0 }})</span>
+              <span class="numberShop" v-if="!this.userInfo">(0)</span>
+            </p>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { flowClickFn } from '#/utils/routeMapping.js';
+import { queryShoppingPageNew, getPersonal, loginOut } from '#/api/login.js';
+const querystring = require('querystring');
+export default {
+  data() {
+    return {
+      jsonData: require('#/utils/routeMapping.json'),
+      // open: false,
+      goodsNum: 0,
+      searchValue: '',
+      showFlag: true,
+      flag: false,
+      userInfo: {
+        userinfoQuality: '',
+      },
+      flagSale: false, // 销售状态
+    };
+  },
+  created() {
+    if (window.sessionStorage.getItem('personalInfo')) {
+      this.userInfo = JSON.parse(window.sessionStorage.getItem('personalInfo'));
+    } else {
+      this.$store.dispatch('GetInfo');
+    }
+    if (window.localStorage.getItem('flagSale')) {
+      this.flagSale = JSON.parse(window.localStorage.getItem('flagSale'));
+    }
+
+    this.getCar();
+  },
+  mounted() {
+    setInterval(() => {
+      setTimeout(() => {
+        this.watchShoppingNum();
+      }, 0);
+    }, 1000);
+  },
+  watch: {
+    // userInfo(newV, old) {
+    //   if (this.userInfo) {
+    //     this.getCar();
+    //   }
+    // },
+    // valls: {
+    //   handler(newVal) {
+    //     this.getCar();
+    //   },
+    //   deep: true,
+    // },
+  },
+  // computed: {
+  //   valls() {asds
+  //     return this.getCar(this.goodsNum);
+  //   },
+  //
+  // },
+  methods: {
+    open() {
+      flowClickFn("NAV", "-", "手机订货更便捷");
+      // this.$alert('http://uatb2bcockpit.heidelbergchina.com/paas/shop/2020063000000001/2021-12-06/f389f0d5bcd746498fb81e31188ab2c8.jpg', {
+      //   confirmButtonText: '确定',
+      //   callback: (action) => {
+      //     this.$message({
+      //       type: 'info',
+      //       message: `action: ${action}`,
+      //     });
+      //   },
+      // });
+    },
+    watchShoppingNum() {
+      if (window.sessionStorage.getItem('personalInfo')) {
+        if (!this.userInfo.userInfoCode) {
+          this.userInfo = JSON.parse(window.sessionStorage.getItem('personalInfo'));
+          this.getCar();
+        }
+        this.goodsNum = Number(window.sessionStorage.getItem('shoppingTotalNum') || 0);
+      }
+    },
+    search() {
+      flowClickFn("NAV", "-", "搜索");
+      this.searchButtonClickFn();
+      // searchResult?searchParam=1
+      this.isLogin('/paas/pc-mall/index.html#/searchResult?searchParam=' + this.searchValue);
+      // location.href = '/paas/pc-mall/index.html#/searchResult?searchParam=' + this.searchValue;
+    },
+    // 埋点 搜索按钮点击
+    searchButtonClickFn() {
+      let path = this.$route.path;
+      let pageObj = null;
+      this.jsonData.forEach(ele => {
+        if (ele.name == path) {
+          pageObj = ele;
+        }
+      })
+      let utmObj = JSON.parse(sessionStorage.getItem("utmObj"));
+      gio('track', "searchButtonClick", {
+        "pageType_var": pageObj.pageType ? pageObj.pageType : "-",
+        "pageName_var": pageObj.pageName ? pageObj.pageName : "-",
+        "pageId_var": "-",
+        "searchWords_var": this.searchValue ? this.searchValue : "-",
+        ...utmObj
+      })
+    },
+    getCar() {
+      let shopGoodsNum = 0;
+      let shoppingTotalNum = window.sessionStorage.getItem('shoppingTotalNum');
+      if (this.userInfo && this.userInfo.userInfoCode && (!shoppingTotalNum || shoppingTotalNum === '0')) {
+        let data = {
+          shoppingType: '00,01,6',
+          memberBcode: this.userInfo.userInfoCode,
+        };
+        queryShoppingPageNew(data).then((res) => {
+          if (res.list && Array.isArray(res.list)) {
+            res.list.forEach((ele) => {
+              ele.shoppingpackageList.forEach((item) => {
+                item.shoppingGoodsList.forEach((val) => {
+                  shopGoodsNum = Number(shopGoodsNum) + Number(val.goodsCamount);
+                });
+              });
+            });
+          }
+          console.log(shopGoodsNum, 'shoppingTotalNum');
+          window.sessionStorage.setItem('shoppingTotalNum', shopGoodsNum);
+        });
+      }
+    },
+    tosale() {
+      flowClickFn("NAV", "-", "销售端");
+      if (window.sessionStorage.getItem('personalInfo')) {
+        this.userInfo = JSON.parse(window.sessionStorage.getItem('personalInfo'));
+        if (this.userInfo.userinfoQuality == 'sales') {
+          window.localStorage.setItem('flagSale', true);
+          window.location.href = '/paas/pc-mall/index.html#/userIndexHDB';
+          if (window.localStorage.getItem('flagSale')) {
+            this.flagSale = true;
+            this.flagSale = JSON.parse(window.localStorage.getItem('flagSale'));
+          }
+        } else {
+          window.location.href = '/paas/index/index.html#/choice';
+        }
+      } else {
+        window.location.href = '/paas/index/index.html#/choice';
+      }
+    },
+    toLogin() {
+      // this.$router.push({
+      //   path: '/loginPc',
+      // });
+      window.location.href = '/paas/index/index.html#/loginPc';
+      flowClickFn("NAV", "-", "登录");
+    },
+    outLogin() {
+      flowClickFn("NAV", "-", "退出登录");
+      loginOut().then((res) => {
+        if (res.success) {
+          this.$message.success('退出登陆成功');
+          localStorage.clear();
+          sessionStorage.clear();
+          this.userInfo = {};
+          // 埋点 清楚登录用户id
+          gio('clearUserId');
+          // 销售端 判断登录
+          if (this.flagSale) {
+            location.href = '/paas/index/index.html#/choice';
+          } else {
+            location.href = '/paas/index/index.html#/loginPc';
+          }
+        } else if (res.success == false) {
+          this.$message.success('退出登陆成功');
+          localStorage.clear();
+          sessionStorage.clear();
+          this.userInfo = {};
+          // 销售端 判断登录
+          if (this.flagSale) {
+            location.href = '/paas/index/index.html#/choice';
+          } else {
+            location.href = '/paas/index/index.html#/loginPc';
+          }
+        }
+      });
+    },
+
+    toShop() {
+      flowClickFn("NAV", "-", "购物车");
+      this.isLogin(`/paas/pc-mall/index.html#/shoppcart`);
+    },
+    toUsermain() {
+      flowClickFn("NAV", "-", "会员中心");
+      this.isLogin(`/paas/user-manager/index.html#/user`);
+    },
+    goToShop() {
+      // window.open('/paas/pc-mall/index.html#/indeshdb', '_blank');
+      window.location.href = `/paas/pc-mall/index.html#/indeshdb`;
+      window.localStorage.setItem('flagSale', false);
+      if (window.localStorage.getItem('flagSale')) {
+        this.flagSale = JSON.parse(window.localStorage.getItem('flagSale'));
+      }
+    },
+    //判断是否用户登录
+    isLogin(url) {
+      const personalInfoStr = window.sessionStorage.getItem('personalInfo');
+      if (personalInfoStr) {
+        const personalInfoObj = JSON.parse(personalInfoStr);
+        if (!personalInfoObj.userInfoCode) {
+          window.location.href = `/paas/index/index.html#/loginPc`;
+        } else {
+          window.location.href = url;
+        }
+      } else {
+        window.location.href = `/paas/index/index.html#/loginPc`;
+      }
+    },
+    toPromotionZone() {
+      flowClickFn("NAV", "-", "促销专区");
+      window.location.href = `/paas/pc-mall/index.html#/promotionIndexHDB`;
+    },
+    toIndex(data) {
+      if (data && data === "logo") {
+        flowClickFn("NAV", "-", "LOGO");
+      } else {
+        flowClickFn("NAV", "-", "首页");
+      }
+      let url;
+      if (this.flagSale) {
+        url = '/paas/pc-mall/index.html#/userIndexHDB';
+      } else {
+        url = '/paas/pc-mall/index.html#/indeshdb';
+      }
+      window.location.href = url;
+    },
+    toClassification() {
+      flowClickFn("NAV", "-", "产品中心");
+      window.location.href = `/paas/pc-mall/index.html#/productClassification`;
+    },
+  },
+  // computed: {
+  //   proappEnvLogo() {
+  //     let proappEnvLogo = sessionStorage.getItem('proappEnvLayout') ? JSON.parse(sessionStorage.getItem('proappEnvLayout')) : null;
+  //     return proappEnvLogo;
+  //   },
+  // },
+};
+</script>
+
+<style lang="scss" scoped>
+.shoppingGo {
+  display: table-cell;
+  vertical-align: middle;
+  margin-top: 15px;
+  border-radius: 6px;
+  cursor: pointer;
+  width: 121px;
+  height: 30px;
+  background-color: #00427a;
+  color: #ffff;
+  text-align: center;
+}
+.shopGoToGo {
+  margin-top: 15px;
+}
+.headerclass {
+  width: 1200px;
+  margin: 0 auto;
+  // background-color: red;
+  .headertop {
+    display: flex;
+    justify-content: space-between;
+    .tologin {
+      cursor: pointer;
+      text-decoration: underline;
+    }
+    a:link {
+      color: #000;
+    }
+    a:visited {
+      color: #000;
+    }
+    a:hover {
+      color: #000;
+    }
+    a:active {
+      color: #000;
+    }
+    ul {
+      margin: 0px;
+      align-items: center;
+      display: flex;
+      padding-left: 0;
+      li {
+        font-size: 14px;
+        color: #000;
+        img {
+          width: 230px;
+        }
+        span {
+          cursor: pointer;
+        }
+      }
+    }
+    ul li:nth-child(2n) {
+      margin: 0 10px;
+    }
+    ul,
+    li {
+      list-style: none;
+    }
+  }
+  .headerbot {
+    display: flex;
+    justify-content: space-between;
+    ul {
+      align-items: center;
+      margin: 0px;
+      padding-left: 0;
+      display: flex;
+      li {
+        span {
+          cursor: pointer;
+        }
+        .searchBox {
+          line-height: 40px;
+          position: relative;
+          input {
+            border: 1px solid #ccc;
+            border-radius: 3px;
+            text-indent: 10px;
+            outline: none;
+          }
+          .searchImg {
+            cursor: pointer;
+            position: absolute;
+            right: -1px;
+            display: flex;
+            align-items: center;
+
+            top: 0;
+            .serchOther {
+              font-size: 11px;
+              padding-right: 10px;
+              color: #ccc;
+              margin-top: -1px;
+            }
+            img {
+              padding: 0 10px;
+            }
+          }
+        }
+        p {
+          color: #00427a;
+          font-size: 14px;
+          margin-left: 8px;
+          .numberShop {
+            font-size: 14px;
+          }
+        }
+
+        span {
+          font-size: 18px;
+          color: #00427a;
+        }
+        list-style: none;
+        margin-right: 38px;
+      }
+      .shopCar {
+        cursor: pointer;
+      }
+    }
+    ul li:first-child {
+      padding-left: 10px;
+    }
+  }
+}
+</style>
+<style lang="scss">
+.headerclass {
+  .el-popover {
+    img {
+      width: 300px;
+    }
+  }
+}
+</style>