解决pc端个人中心跳转问题

buyer/src/components/header/Header.vue

@@ -2,26 +2,10 @@
   <div class="box">
     <div class="nav">
       <ul class="location">
-        <li><router-link to="/" v-if="$route.path !== '/'" class="home-page" ><Icon type="md-home" />首页</router-link></li>
         <li>
-          <Dropdown placement="bottom-start">
+          <router-link to="/" v-if="$route.path !== '/'" class="home-page">
-            <a href="javascript:void(0)">
+            <Icon type="md-home" />首页
-              <Icon type="ios-pin" class="icon"></Icon>
+          </router-link>
-              {{ city }}
-            </a>
-            <DropdownMenu slot="list">
-              <div class="city">
-                <p v-for="(items, index) in cityArr" :key="index">
-                  <span
-                    v-for="(item, index) in items"
-                    class="city-item"
-                    :key="index"
-                    @click="changeCity(item)"
-                    >{{ item }}</span>
-                </p>
-              </div>
-            </DropdownMenu>
-          </Dropdown>
         </li>
       </ul>
       <ul class="detail">
@@ -53,16 +37,12 @@
         </li>
         <li class="hover-color" @click="goUserCenter('/home/MyOrder')"><span class="nav-item">我的订单</span></li>
         <li class="hover-color" @click="goUserCenter('/home/MyTracks')"><span class="nav-item">我的足迹</span></li>
-        <li v-if="$route.name !== 'Cart'" style="position:relative;" >
+        <li v-if="$route.name !== 'Cart'" style="position:relative;">
           <i class="cart-badge" v-show="Number(cartNum)">{{cartNum < 100 ? cartNum : '99'}}</i>
           <Dropdown placement="bottom-start">
-            <router-link to="cart" target="_blank" >
+            <router-link to="/cart" target="_blank">
               <span @mouseenter="getCartList">
-                <Icon
+                <Icon size="18" class="cart-icon" type="ios-cart-outline"></Icon>
-                  size="18"
-                  class="cart-icon"
-                  type="ios-cart-outline"
-                ></Icon>
                 购物车
               </span>
 
@@ -75,12 +55,7 @@
                 <span>赶快去添加商品吧~</span>
               </div>
               <div class="shopping-cart-list" v-show="shoppingCart.length > 0">
-                <div
+                <div class="shopping-cart-box" v-for="(item, index) in shoppingCart" @click="goToPay" :key="index">
-                  class="shopping-cart-box"
-                  v-for="(item, index) in shoppingCart"
-                  @click="goToPay"
-                  :key="index"
-                >
                   <div class="shopping-cart-img">
                     <img :src="item.goodsSku.thumbnail" class="hover-pointer" />
                   </div>
@@ -117,112 +92,107 @@
 </template>
 
 <script>
-import storage from '@/plugins/storage.js';
+import storage from "@/plugins/storage.js";
-import {cartGoodsAll} from '@/api/cart.js'
+import { cartGoodsAll } from "@/api/cart.js";
 export default {
-  name: 'M-Header',
+  name: "M-Header",
-  created () {
+  created() {
-    if (storage.getItem('userInfo')) {
+    if (storage.getItem("userInfo")) {
-      this.userInfo = JSON.parse(storage.getItem('userInfo'));
+      this.userInfo = JSON.parse(storage.getItem("userInfo"));
     }
   },
 
-  data () {
+  data() {
     return {
       // 主题颜色切换
-      themeType: 'light',
+      themeType: "light",
-      city: '珠海', // 展示城市
-      cityArr: [
-        ['北京', '上海', '天津', '重庆', '广州'],
-        ['深圳', '河南', '辽宁', '吉林', '江苏'],
-        ['江西', '四川', '海南', '贵州', '云南'],
-        ['西藏', '陕西', '甘肃', '青海', '珠海']
-      ],
       userInfo: {}, // 用户信息
-      shoppingCart: [] // 购物车
+      shoppingCart: [], // 购物车
     };
   },
   computed: {
-    cartNum () {
+    cartNum() {
-      return this.$store.state.cartNum
+      return this.$store.state.cartNum;
-    }
+    },
   },
   methods: {
-    handleClickTheme () {
+    handleClickTheme() {
-      this.themeType === 'light'
+      this.themeType === "light"
-        ? (this.themeType = 'dark')
+        ? (this.themeType = "dark")
-        : (this.themeType = 'light');
+        : (this.themeType = "light");
       window.document.documentElement.setAttribute(
-        'data-theme',
+        "data-theme",
         this.themeType
       );
     },
-    changeCity (city) {
+    changeCity(city) {
       this.city = city;
     },
-    goToPay () {
+    goToPay() {
       let url = this.$router.resolve({
-        path: '/cart'
+        path: "/cart",
-      })
+      });
-      window.open(url.href, '_blank')
+      window.open(url.href, "_blank");
     },
-    myInfo () {
+    myInfo() {
       let url = this.$router.resolve({
-        path: '/home'
+        path: "/home",
-      })
+      });
-      window.open(url.href, '_blank')
+      window.open(url.href, "_blank");
     },
-    signOutFun () {
+    signOutFun() {
-      storage.removeItem('accessToken');
+      storage.removeItem("accessToken");
-      storage.removeItem('refreshToken');
+      storage.removeItem("refreshToken");
-      storage.removeItem('userInfo');
+      storage.removeItem("userInfo");
-      storage.removeItem('cartNum');
+      storage.removeItem("cartNum");
-      this.$store.commit('SET_CARTNUM', 0)
+      this.$store.commit("SET_CARTNUM", 0);
-      this.$router.push('/login');
+      this.$router.push("/login");
     },
-    goUserCenter (path) { // 跳转我的订单，我的足迹
+    goUserCenter(path) {
+      // 跳转我的订单，我的足迹
       if (this.userInfo.username) {
-        this.$router.push({path: path})
+        this.$router.push({ path: path });
       } else {
         this.$Modal.confirm({
-          title: '请登录',
+          title: "请登录",
-          content: '<p>请登录后执行此操作</p>',
+          content: "<p>请登录后执行此操作</p>",
-          okText: '立即登录',
+          okText: "立即登录",
-          cancelText: '继续浏览',
+          cancelText: "继续浏览",
           onOk: () => {
             this.$router.push({
-              path: '/login',
+              path: "/login",
               query: {
                 rePath: this.$router.history.current.path,
-                query: JSON.stringify(this.$router.history.current.query)
+                query: JSON.stringify(this.$router.history.current.query),
-              }
+              },
             });
-          }
+          },
         });
       }
     },
-    shopEntry () { // 店铺入驻
+    shopEntry() {
-      if (storage.getItem('accessToken')) {
+      // 店铺入驻
+      if (storage.getItem("accessToken")) {
         let routeUrl = this.$router.resolve({
-          path: '/shopEntry',
+          path: "/shopEntry",
-          query: {id: 1}
+          query: { id: 1 },
         });
-        window.open(routeUrl.href, '_blank');
+        window.open(routeUrl.href, "_blank");
       } else {
-        this.$router.push('login');
+        this.$router.push("login");
       }
     },
-    getCartList () { // 获取购物车列表
+    getCartList() {
+      // 获取购物车列表
       if (this.userInfo.username) {
-          
+        cartGoodsAll().then((res) => {
-        cartGoodsAll().then(res => {
+          this.shoppingCart = res.result.skuList;
-          this.shoppingCart = res.result.skuList
+          this.$store.commit("SET_CARTNUM", this.shoppingCart.length);
-          this.$store.commit('SET_CARTNUM', this.shoppingCart.length)
+          this.Cookies.setItem("cartNum", this.shoppingCart.length);
-          this.Cookies.setItem('cartNum', this.shoppingCart.length)
+        });
-        })
       }
-    }
+    },
-  }
+  },
 };
 </script>
 
@@ -263,7 +233,8 @@ export default {
   margin-right: 15px;
   font-weight: bold;
 }
-.nav a,.nav-item {
+.nav a,
+.nav-item {
   text-decoration: none;
   padding-left: 15px;
   border-left: 1px solid #ccc;
@@ -406,7 +377,7 @@ export default {
 .sign-out p {
   font-size: 12px;
 }
-.cart-icon{
+.cart-icon {
   padding: 0 6px;
 }
 .goods-title:hover {

buyer/src/pages/Cart.vue

@@ -59,7 +59,7 @@
             <div class="promotion-notice">{{shop.promotionNotice}}</div>
           </div>
           <template v-for="(goods, goodsIndex) in shop.skuList">
-            <div class="goods-item"  :key="goodsIndex">
+            <div class="goods-item" :key="goodsIndex">
               <div class="width_60">
                 <Checkbox v-model="goods.checked" @on-change="changeChecked(goods.checked, 'goods', goods.goodsSku.id)"></Checkbox>
               </div>
@@ -93,7 +93,7 @@
               </div>
               <div class="error-goods" v-if="goods.errorMessage">
                 <div>{{goods.errorMessage}}</div>
-                <Button type="primary"  @click="delGoods(goods.goodsSku.id)">删除</Button>
+                <Button type="primary" @click="delGoods(goods.goodsSku.id)">删除</Button>
               </div>
             </div>
 
@@ -117,7 +117,7 @@
               已节省<span>{{ priceDetailDTO.discountPrice | unitPrice("￥") }}</span>
             </div>
             <div class="ml_20 total-price">
-              总价（不含运费）:<span>{{ priceDetailDTO.billPrice | unitPrice("￥") }}</span>
+              总价（不含运费）:<div>{{ priceDetailDTO.billPrice | unitPrice("￥") }}</div>
             </div>
             <div class="pay ml_20" @click="pay">去结算</div>
           </div>
@@ -136,26 +136,26 @@
 </template>
 
 <script>
-import Promotion from '@/components/goodsDetail/Promotion'
+import Promotion from "@/components/goodsDetail/Promotion";
-import Search from '@/components/Search';
+import Search from "@/components/Search";
-import ShowLikeGoods from '@/components/like';
+import ShowLikeGoods from "@/components/like";
-import * as APICart from '@/api/cart';
+import * as APICart from "@/api/cart";
-import * as APIMember from '@/api/member';
+import * as APIMember from "@/api/member";
-import {getLogo} from '@/api/common.js'
+import { getLogo } from "@/api/common.js";
 export default {
-  name: 'Cart',
+  name: "Cart",
-  beforeRouteEnter (to, from, next) {
+  beforeRouteEnter(to, from, next) {
     window.scrollTo(0, 0);
     next();
   },
   components: {
     Search,
     ShowLikeGoods,
-    Promotion
+    Promotion,
   },
-  data () {
+  data() {
     return {
-      logoImg: '', // logo图
+      logoImg: "", // logo图
       couponAvailable: false, // 展示优惠券
       stepIndex: 0, // 当前处于哪一步，购物车==0，填写订单信息==1，成功提交订单==2
       goodsTotal: 1, // 商品数量
@@ -165,45 +165,45 @@ export default {
       cartList: [], // 购物车列表
       couponList: [], // 优惠券列表
       priceDetailDTO: {}, // 价格明细
-      skuList: [] // sku列表
+      skuList: [], // sku列表
     };
   },
   computed: {},
   methods: {
     // 跳转商品详情
-    goGoodsDetail (skuId, goodsId) {
+    goGoodsDetail(skuId, goodsId) {
       let routeUrl = this.$router.resolve({
-        path: '/goodsDetail',
+        path: "/goodsDetail",
-        query: { skuId, goodsId }
+        query: { skuId, goodsId },
       });
-      window.open(routeUrl.href, '_blank');
+      window.open(routeUrl.href, "_blank");
     },
     // 跳转店铺首页
-    goShopPage (id) {
+    goShopPage(id) {
       let routeUrl = this.$router.resolve({
-        path: '/Merchant',
+        path: "/Merchant",
-        query: { id }
+        query: { id },
       });
-      window.open(routeUrl.href, '_blank');
+      window.open(routeUrl.href, "_blank");
     },
     // 收藏商品
-    collectGoods (id) {
+    collectGoods(id) {
       this.$Modal.confirm({
-        title: '收藏',
+        title: "收藏",
-        content: '<p>商品收藏后可在个人中心我的收藏查看</p>',
+        content: "<p>商品收藏后可在个人中心我的收藏查看</p>",
         onOk: () => {
-          APIMember.collectGoods('GOODS', id).then((res) => {
+          APIMember.collectGoods("GOODS", id).then((res) => {
             if (res.success) {
-              this.$Message.success('收藏商品成功');
+              this.$Message.success("收藏商品成功");
               this.getCartList();
             }
           });
         },
-        onCancel: () => { }
+        onCancel: () => {},
       });
     },
     // 删除商品
-    delGoods (id) {
+    delGoods(id) {
       const idArr = [];
       if (!id) {
         const list = this.cartList;
@@ -216,49 +216,50 @@ export default {
         idArr.push(id);
       }
       this.$Modal.confirm({
-        title: '删除',
+        title: "删除",
-        content: '<p>确定要删除该商品吗？</p>',
+        content: "<p>确定要删除该商品吗？</p>",
         onOk: () => {
           APICart.delCartGoods({ skuIds: idArr.toString() }).then((res) => {
             if (res.success) {
-              this.$Message.success('删除成功');
+              this.$Message.success("删除成功");
               this.getCartList();
             } else {
               this.$Message.error(res.message);
             }
           });
-        }
+        },
       });
     },
-    clearCart () { // 清空购物车
+    clearCart() {
+      // 清空购物车
       this.$Modal.confirm({
-        title: '提示',
+        title: "提示",
-        content: '<p>确定要清空购物车吗？清空后不可恢复</p>',
+        content: "<p>确定要清空购物车吗？清空后不可恢复</p>",
         onOk: () => {
           APICart.clearCart().then((res) => {
             if (res.success) {
-              this.$Message.success('清空购物车成功');
+              this.$Message.success("清空购物车成功");
               this.getCartList();
             } else {
               this.$Message.error(res.message);
             }
           });
-        }
+        },
       });
     },
     // 跳转支付页面
-    pay () {
+    pay() {
       if (this.checkedNum) {
-        this.$router.push({ path: '/pay', query: { way: 'CART' } });
+        this.$router.push({ path: "/pay", query: { way: "CART" } });
       } else {
-        this.$Message.warning('请至少选择一件商品');
+        this.$Message.warning("请至少选择一件商品");
       }
     },
     // 展示优惠券
-    showCoupon (storeId, index) {
+    showCoupon(storeId, index) {
       this.couponAvailable = index;
     },
-    changeNum (val, id) {
+    changeNum(val, id) {
       // 设置购买数量
       console.log(val, id);
       APICart.setCartGoodsNum({ skuId: id, num: val }).then((res) => {
@@ -268,13 +269,13 @@ export default {
         }
       });
     },
-    async changeChecked (status, type, id) {
+    async changeChecked(status, type, id) {
       // 设置商品选中状态
       const check = status ? 1 : 0;
-      if (type === 'all') {
+      if (type === "all") {
         // 全选
         await APICart.setCheckedAll({ checked: check });
-      } else if (type === 'shop') {
+      } else if (type === "shop") {
         // 选中店铺所有商品
         await APICart.setCheckedSeller({ checked: check, storeId: id });
       } else {
@@ -285,16 +286,17 @@ export default {
       this.getCartList();
     },
 
-    async receiveShopCoupon (item) { // 领取优惠券
+    async receiveShopCoupon(item) {
-      let res = await APIMember.receiveCoupon(item.id)
+      // 领取优惠券
+      let res = await APIMember.receiveCoupon(item.id);
       if (res.success) {
-        this.$set(item, 'disabled', true)
+        this.$set(item, "disabled", true);
-        this.$Message.success('领取成功')
+        this.$Message.success("领取成功");
       } else {
-        this.$Message.error(res.message)
+        this.$Message.error(res.message);
       }
     },
-    async getCartList () {
+    async getCartList() {
       // 购物车列表
       this.loading = true;
       try {
@@ -307,9 +309,9 @@ export default {
           this.checkedNum = 0;
           let allChecked = true;
           for (let k = 0; k < this.cartList.length; k++) {
-            let shop = this.cartList[k]
+            let shop = this.cartList[k];
-            let list = await APIMember.couponList({storeId: shop.storeId})
+            let list = await APIMember.couponList({ storeId: shop.storeId });
-            shop.couponList.push(...list.result.records)
+            shop.couponList.push(...list.result.records);
           }
           for (let i = 0; i < this.skuList.length; i++) {
             if (this.skuList[i].checked) {
@@ -318,30 +320,31 @@ export default {
               allChecked = false;
             }
           }
-          this.$forceUpdate()
+          this.$forceUpdate();
           this.allChecked = allChecked;
         }
       } catch (error) {
         this.loading = false;
       }
-    }
+    },
   },
-  mounted () {
+  mounted() {
     this.getCartList();
-    APICart.cartCount().then(res => { // 购物车商品数量
+    APICart.cartCount().then((res) => {
+      // 购物车商品数量
       if (res.success) this.goodsTotal = res.result;
     });
-    if (!this.Cookies.getItem('logo')) {
+    if (!this.Cookies.getItem("logo")) {
-      getLogo().then(res => {
+      getLogo().then((res) => {
         if (res.success) {
-          let logoObj = JSON.parse(res.result.settingValue)
+          let logoObj = JSON.parse(res.result.settingValue);
-          this.Cookies.setItem('logo', logoObj.buyerSideLogo)
+          this.Cookies.setItem("logo", logoObj.buyerSideLogo);
         }
-      })
+      });
     } else {
-      this.logoImg = this.Cookies.getItem('logo')
+      this.logoImg = this.Cookies.getItem("logo");
     }
-  }
+  },
 };
 </script>
 
@@ -544,7 +547,7 @@ export default {
           width: 70px;
           height: 70px;
         }
-        >div>p {
+        > div > p {
           @include content_color($light_content_color);
           font-size: 13px;
           text-align: left;
@@ -567,12 +570,12 @@ export default {
         }
       }
     }
-    .error-goods{
+    .error-goods {
       position: absolute;
       width: 100%;
       height: 100%;
       margin-left: -20px;
-      background-color: rgba($color: #999, $alpha: .5);
+      background-color: rgba($color: #999, $alpha: 0.5);
       z-index: 10;
       display: flex;
       align-items: center;
@@ -603,7 +606,7 @@ export default {
     .save-price span {
       color: #000;
     }
-    .total-price span {
+    .total-price div {
       color: $theme_color;
       font-size: 20px;
     }
@@ -651,23 +654,31 @@ export default {
   display: flex;
   margin-top: 5px;
   margin-left: 5px;
-  >span{
+  > span {
     border: 1px solid $theme_color;
     color: $theme_color;
     font-size: 12px;
     border-radius: 2px;
     padding: 0 2px;
   }
-  >p{
+  > p {
     font-size: 12px;
     margin-left: 10px;
     color: #999;
   }
 }
-
+.cart-goods-footer > div{
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+}
+.total-price{
+  display: flex;
+  align-items: center;
+}
 </style>
 <style>
-  .ivu-input-number-input {
+.ivu-input-number-input {
-    text-align: center;
+  text-align: center;
-  }
+}
 </style>