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

master
lemon橪 2021-06-17 15:24:34 +08:00
parent 57ff6c8d70
commit 99ae898139
2 changed files with 159 additions and 177 deletions

View File

@ -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">
<a href="javascript:void(0)">
<Icon type="ios-pin" class="icon"></Icon>
{{ 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>
<router-link to="/" v-if="$route.path !== '/'" class="home-page">
<Icon type="md-home" />首页
</router-link>
</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
size="18"
class="cart-icon"
type="ios-cart-outline"
></Icon>
<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
class="shopping-cart-box"
v-for="(item, index) in shoppingCart"
@click="goToPay"
:key="index"
>
<div 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 {cartGoodsAll} from '@/api/cart.js'
import storage from "@/plugins/storage.js";
import { cartGoodsAll } from "@/api/cart.js";
export default {
name: 'M-Header',
created () {
if (storage.getItem('userInfo')) {
this.userInfo = JSON.parse(storage.getItem('userInfo'));
name: "M-Header",
created() {
if (storage.getItem("userInfo")) {
this.userInfo = JSON.parse(storage.getItem("userInfo"));
}
},
data () {
data() {
return {
//
themeType: 'light',
city: '珠海', //
cityArr: [
['北京', '上海', '天津', '重庆', '广州'],
['深圳', '河南', '辽宁', '吉林', '江苏'],
['江西', '四川', '海南', '贵州', '云南'],
['西藏', '陕西', '甘肃', '青海', '珠海']
],
themeType: "light",
userInfo: {}, //
shoppingCart: [] //
shoppingCart: [], //
};
},
computed: {
cartNum () {
return this.$store.state.cartNum
}
cartNum() {
return this.$store.state.cartNum;
},
},
methods: {
handleClickTheme () {
this.themeType === 'light'
? (this.themeType = 'dark')
: (this.themeType = 'light');
handleClickTheme() {
this.themeType === "light"
? (this.themeType = "dark")
: (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'
})
window.open(url.href, '_blank')
path: "/cart",
});
window.open(url.href, "_blank");
},
myInfo () {
myInfo() {
let url = this.$router.resolve({
path: '/home'
})
window.open(url.href, '_blank')
path: "/home",
});
window.open(url.href, "_blank");
},
signOutFun () {
storage.removeItem('accessToken');
storage.removeItem('refreshToken');
storage.removeItem('userInfo');
storage.removeItem('cartNum');
this.$store.commit('SET_CARTNUM', 0)
this.$router.push('/login');
signOutFun() {
storage.removeItem("accessToken");
storage.removeItem("refreshToken");
storage.removeItem("userInfo");
storage.removeItem("cartNum");
this.$store.commit("SET_CARTNUM", 0);
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: '请登录',
content: '<p>请登录后执行此操作</p>',
okText: '立即登录',
cancelText: '继续浏览',
title: "请登录",
content: "<p>请登录后执行此操作</p>",
okText: "立即登录",
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 () { //
if (storage.getItem('accessToken')) {
shopEntry() {
//
if (storage.getItem("accessToken")) {
let routeUrl = this.$router.resolve({
path: '/shopEntry',
query: {id: 1}
path: "/shopEntry",
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 => {
this.shoppingCart = res.result.skuList
this.$store.commit('SET_CARTNUM', this.shoppingCart.length)
this.Cookies.setItem('cartNum', this.shoppingCart.length)
})
}
}
cartGoodsAll().then((res) => {
this.shoppingCart = res.result.skuList;
this.$store.commit("SET_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 {

View File

@ -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 Search from '@/components/Search';
import ShowLikeGoods from '@/components/like';
import * as APICart from '@/api/cart';
import * as APIMember from '@/api/member';
import {getLogo} from '@/api/common.js'
import Promotion from "@/components/goodsDetail/Promotion";
import Search from "@/components/Search";
import ShowLikeGoods from "@/components/like";
import * as APICart from "@/api/cart";
import * as APIMember from "@/api/member";
import { getLogo } from "@/api/common.js";
export default {
name: 'Cart',
beforeRouteEnter (to, from, next) {
name: "Cart",
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',
query: { skuId, goodsId }
path: "/goodsDetail",
query: { skuId, goodsId },
});
window.open(routeUrl.href, '_blank');
window.open(routeUrl.href, "_blank");
},
//
goShopPage (id) {
goShopPage(id) {
let routeUrl = this.$router.resolve({
path: '/Merchant',
query: { id }
path: "/Merchant",
query: { id },
});
window.open(routeUrl.href, '_blank');
window.open(routeUrl.href, "_blank");
},
//
collectGoods (id) {
collectGoods(id) {
this.$Modal.confirm({
title: '收藏',
content: '<p>商品收藏后可在个人中心我的收藏查看</p>',
title: "收藏",
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: '删除',
content: '<p>确定要删除该商品吗?</p>',
title: "删除",
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: '提示',
content: '<p>确定要清空购物车吗?清空后不可恢复</p>',
title: "提示",
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) { //
let res = await APIMember.receiveCoupon(item.id)
async receiveShopCoupon(item) {
//
let res = await APIMember.receiveCoupon(item.id);
if (res.success) {
this.$set(item, 'disabled', true)
this.$Message.success('领取成功')
this.$set(item, "disabled", true);
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 list = await APIMember.couponList({storeId: shop.storeId})
shop.couponList.push(...list.result.records)
let shop = this.cartList[k];
let list = await APIMember.couponList({ storeId: shop.storeId });
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')) {
getLogo().then(res => {
if (!this.Cookies.getItem("logo")) {
getLogo().then((res) => {
if (res.success) {
let logoObj = JSON.parse(res.result.settingValue)
this.Cookies.setItem('logo', logoObj.buyerSideLogo)
let logoObj = JSON.parse(res.result.settingValue);
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;
}
}
</style>