解决pc端个人中心跳转问题
lemon橪
parent
57ff6c8d70
commit
99ae898139
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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 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 {
|
||||
text-align: center;
|
||||
}
|
||||
.ivu-input-number-input {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue