crs-double-resistance/src/components/userInfo.vue

<template>
  <div class="userInfo_top-box">
    <div class="go_landing">
      <div class="center_landing">
        <div class="center_landingl">
          <p class="center_text">
            <span class="telnum">{{ $t("homePage.CallName") }}</span
            >{{ $t("taps.Telnum") }} <br /><router-link
              class="contact"
              to="/contact"
              >{{ $t("homePage.us") }}</router-link
            >
          </p>
          <el-row class="block-col-2">
            <el-col>
              <el-select v-model="locale" placeholder="" @change="changeLocale">
                <el-option
                  v-for="item in list"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-col>
          </el-row>
        </div>
        <div class="center_landingr">
          <el-row class="block-col-2" v-if="tokenShow">
            <el-col>
              <el-dropdown trigger="click">
                <span class="el-dropdown-link">
                  {{ info.name || info.nickname
                  }}<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item
                    @click.native="$router.push({ name: 'address' })"
                    >{{ $t("checkout.Addre") }}</el-dropdown-item
                  >
                  <el-dropdown-item
                    @click.native="$router.push({ name: 'orderList' })"
                    >{{ $t("checkout.Order") }}</el-dropdown-item
                  >
                  <el-dropdown-item @click.native="signOut">{{
                    $t("checkout.Sign")
                  }}</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-col>
          </el-row>

          <div class="login_b" v-if="!tokenShow">
            <el-button
              class="buttom"
              type="primary"
              icon="el-icon-user-solid"
              @click="$router.push({ name: 'login' })"
              >{{ $t("landing.registration") }}</el-button
            >
          </div>
          <div
            class="goshopping_box"
            @click="$router.push({ name: 'mycart' })"
            @mouseenter="mouseenterMycar"
          >
            <p class="center_text mycart_t">
              <!-- <i class="el-icon-shopping-cart-2"></i> -->
              <img
                src="@/assets/img/gouwugouwuchedinggou.png"
                class="images-mycar"
              />
              {{ $t("homePage.basket") }}
              <span class="goshopping_text" v-if="num > 0">({{ num }})</span>
            </p>
            <div
              class="taps_cart"
              :class="mycartShow ? 'mycart_aps' : ''"
              @mouseleave="mouseleaveMycar"
            >
              <dissMycart
                v-show="mycartShow"
                :list="listCart"
                :count="cartTotal"
                ref="dissMycart"
              ></dissMycart>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Bus from "@/js/bus";
import dissMycart from "./diss-mycart";
var that = this;
export default {
  name: "userInfo",
  components: {
    dissMycart
  },
  data() {
    return {
      listCart: [],
      cartTotal: 0,
      mycartShow: localStorage.getItem("cartTap") === "1",
      info: "",
      // locale: this.$util.localeStorage() ? 'English': 'Chinese',
      locale: this.$util.localeStorage()
        ? this.$t("homePage.English")
        : this.$t("homePage.Chinese"),
      tokenShow: !!localStorage.getItem("token"),
      list: [
        {
          id: 1,
          value: "en",
          // name: 'English'
          name: this.$t("homePage.English")
        },
        {
          id: 2,
          value: "cn",
          // name: 'Chinese'
          name: this.$t("homePage.Chinese")
        }
      ],
      num: JSON.parse(localStorage.getItem("shoppingNum")) // 购物车数量
    };
  },
  // watch: {
  //   '$store.state.tapscart' (newVal, oldVal) {
  //     // console.log(newVal, '==========', oldVal)
  //     if (oldVal > 0) {
  //       console.log(newVal, '==========', oldVal)
  //       // that.mycartShow = true
  //       // this.getList()
  //       this.mouseenterMycar()
  //     } else {
  //       that.mycartShow = false
  //     }
  //   }
  // },
  created() {
    this.info = JSON.parse(localStorage.getItem("info"));
    this.getList();
  },
  mounted() {
    let _this = this;
    Bus.$on("onmycar", val => {
      // this.mouseenterMycar()
      // console.log(val, '3333333333')
      if (val == 1) {
        // console.log(val, '88888')
        this.showList = false;
        this.mouseenterMycar();
        // console.log(val, '444444')
      } else {
        _this.mouseleaveMycar();
      }
    });
    window.addEventListener("setItemEvent", function(e) {
      // let key = e.key
      // console.log(key, '======')
      if (e.key === "shoppingNum") {
        _this.num = e.newValue;
      }
      // if (e.key === 'cartTap') {
      //   let cartTap = localStorage.getItem('cartTap')
      //   if (cartTap) {
      //     _this.mouseenterMycar()
      //   } else {
      //     _this.mouseleaveMycar()
      //   }
      // }
    });
  },
  methods: {
    changeLocale(e) {
      sessionStorage.removeItem("tdk");
      localStorage.removeItem("token");
      if (e == "en") {
        window.location.href = "https://crs.sanyoubio.com";
      } else {
        window.location.href = "https://crs.sanyoubio.com.cn";
      }
    },
    signOut() {
      let data = JSON.parse(localStorage.getItem("shoppingCart"));
      if (data) {
        localStorage.setItem("shoppingNum", JSON.stringify(data.length));
      } else {
        localStorage.setItem("shoppingNum", JSON.stringify(0));
      }
      localStorage.removeItem("user");
      localStorage.removeItem("token");
      localStorage.removeItem("info");
      this.$router.push({
        name: "login"
      });
    },
    mouseenterMycar() {
      this.mycartShow = true;
      this.getList();
    },
    mouseleaveMycar() {
      this.mycartShow = false;
    },
    getList() {
      let that = this;
      let data = JSON.parse(localStorage.getItem("shoppingCart"));
      let arry = [];
      if (JSON.parse(localStorage.getItem("token"))) {
        if (data && data.length > 0) {
          data.forEach(item => {
            var obj = {
              checked: true,
              id: item.id,
              number: item.number,
              productCatalog: item.productCatalog,
              skuId: item.skuId
            };
            arry.push(obj);
          });
        } else {
          arry = null;
        }
        this.$api
          .post("cart/index", {
            cartList: arry
          })
          .then(res => {
            if (res.code == 0) {
              this.listCart = res.data.cartList;
              that.cartTotal = res.data.cartTotal.checkedGoodsDiscount;
            } else {
              // this.$message(res.msg)
            }
          });
      } else {
        if (data && data.length > 0) {
          that.listCart = [];
          that.cartTotal = 0;
          data.forEach(item => {
            that.listCart.push(item);
            if (this.$util.localeStorage()) {
              that.cartTotal += item.number * item.discountPrice;
            } else {
              that.cartTotal += item.number * item.cnDiscountPrice;
            }
          });
        }
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@media screen and (min-width: 751px) and (max-width: 9999px) {
  .userInfo_top-box {
    .go_landing {
      // background-color: #273949;
      .center_landing {
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        // align-items: center;
        align-content: center;
        .center_landingl {
          text-align: center;
          font-weight: 500;
          .block-col-2 /deep/ {
            cursor: pointer;
            .el-col {
              .el-select {
                width: 100px;
                height: 30px;
                .el-input__inner {
                  border: none;
                  height: 26px;
                  line-height: 26px;
                  font-size: 12px;
                  // background-color: rgba(0, 0, 0, 0);
                }
                .el-input__suffix {
                  .el-input__suffix-inner {
                    display: block;
                    height: 100%;
                    .el-input__icon {
                      line-height: 26px;
                    }
                  }
                }
              }
            }
            .el-dropdown {
              height: 50px;
              line-height: 50px;
              width: 100px;
              display: block;
            }
            .el-dropdown-link {
              color: #fff;
              margin-left: 20px;
            }
            .el-icon-arrow-down {
              margin-left: 10px;
              // color: red;
            }
            .el-dropdown:hover {
              background: #005bab;
              // color: red;
            }
          }
          .center_text {
            color: #005bab;
            cursor: pointer;
            font-weight: 600;
            font-size: 12px;
            .telnum {
              color: #000;
              margin-right: 4px;
              font-weight: 500;
            }
            .contact {
              color: #005bab;
            }
          }
        }
        .center_landingr {
          margin-left: 20px;
          .block-col-2 /deep/ {
            cursor: pointer;
            .el-dropdown {
              height: 28px;
              line-height: 28px;
              width: 100px;
              display: block;
              text-align: right;
            }
            .el-dropdown-link {
              color: #000;
              margin-left: 20px;
              font-size: 12px;
            }
            .el-icon-arrow-down {
              margin-left: 6px;
            }
            .el-dropdown:hover {
              background: #fff;
            }
          }
          .center_text {
            color: #fff;
            cursor: pointer;
          }
          .login_b {
            display: block;
            color: #000;
            .buttom /deep/ {
              background-color: rgba(0, 0, 0, 0);
              border: none;
              color: #000 !important;
              padding: 6px 8px !important;
              font-size: 12px;
              .el-icon-user-solid {
                color: #005bab !important;
              }
            }
          }
        }
      }
    }
  }
  .goshopping_box {
    position: relative;
    .goshopping_text {
      font-size: 14px;
    }
    .taps_cart {
      display: none;
      position: absolute;
      top: 35px;
      z-index: 1000;
      // left: 50%;
      right: 0;
      // transform: translateX(-50%);
    }
    .mycart_aps {
      display: block !important;
    }
  }
  .cardpmd {
    display: none;
  }
  .landingpmd_imgf {
    display: none;
  }
  .center_text {
    color: #fff;
    a {
      color: #fff;
      cursor: pointer;
      text-decoration: none;
    }
    a:hover {
      color: #005bab;
      cursor: pointer;
      text-decoration: none;
    }
  }
  .mycart_t /deep/ {
    display: flex;
    align-items: center;
    color: #000 !important;
    justify-content: right;
    padding-right: 8px;
    font-weight: 500;
    font-size: 12px;
    .images-mycar {
      width: 30px;
      margin-right: 6px;
    }
    .el-icon-shopping-cart-2 {
      // color: #005BAB;
      color: red;
      font-weight: 600;
      font-size: 30px;
      margin-right: 6px;
    }
    .goshopping_text {
      margin-left: 6px;
      color: #005bab;
    }
  }
}
// @media screen and (min-width: 751px) and (max-width: 1600px) {
//   .taps_cart{
//       display: none;
//       position: absolute;
//       top: 30px;
//       z-index: 99;
//       left: -50% !important;
//       // transform: translateX(-50%);

//     }
// }
</style>