msb-mca
/
shop-pc
2.1k
2
Code Issues Pull Requests Projects Releases Wiki Activity

feat: 修改头部购物车面板UI,获取用户信息时机修改

Browse Source
merge-requests/64/head
xiaoguang 2 years ago
parent 5b5710caa9
commit 0d4dc2b0e6
4 changed files with 96 additions and 75 deletions
Show Stats Download Patch File Download Diff File

150
layouts/module/header/HeaderCart.vue
Unescape View File

@ -14,7 +14,11 @@
> >
<img src="~/assets/img/layout/icon-shop.png" /> <img src="~/assets/img/layout/icon-shop.png" />
<span>购物车</span> <span>购物车</span>
<div v-if="cartCount > 0" class="wrap-right-cart__tip"> <div
v-if="cartCount > 0"
class="wrap-right-cart__tip flex flex-middle flex-center"
:class="{ 'wrap-right-cart__tip--more': cartCount > 10 }"
>
{{ cartCount }} {{ cartCount }}
</div> </div>
</div> </div>
@ -23,27 +27,27 @@
v-for="item in products" v-for="item in products"
:key="item.id" :key="item.id"
@click="onJumpGoodsDetail(item.product.id)" @click="onJumpGoodsDetail(item.product.id)"
class="header-cart-products__wrap flex flex-middle flex-between" class="header-cart-products__wrap flex flex-middle"
> >
<div class="cart-products-wrap__left flex felx-middle"> <div class="cart_products-wrap_cover">
<div class="products-wrap-left__cover"> <img :src="item.productMainPicture" />
<img :src="item.productMainPicture" /> </div>
<div class="cart-products-wrap_info">
<div class="products-wrap-info__top flex flex-between">
<p class="wrap-info-top__title">{{ item.productName }}</p>
<UiMoney
class="wrap-info-top__price"
:float="true"
:money="item.product.startingPrice"
/>
</div> </div>
<div class="products-wrap-left__info"> <div class="products-wrap-info__bottom flex flex-between">
<p class="wrap-left-info__title">{{ item.productName }}</p> <span class="wrap-info-bottom__skuname">{{
<div class="wrap-left-info__detail flex"> item.productSku.name
<span class="left-info-detail__skuname">{{ }}</span>
item.productSku.name <span class="wrap-info-bottom__count">{{ item.number }}</span>
}}</span>
<span class="left-info-detail__count">{{ item.number }}</span>
</div>
</div> </div>
</div> </div>
<UiMoney
class="cart-products-wrap__right"
:float="true"
:money="item.product.startingPrice"
/>
</div> </div>
<!-- 失效商品 --> <!-- 失效商品 -->
<template v-if="failureProducts.length > 0"> <template v-if="failureProducts.length > 0">
@ -52,31 +56,31 @@
v-for="item in failureProducts" v-for="item in failureProducts"
:key="item.id" :key="item.id"
@click="onJumpGoodsDetail(item.product.id)" @click="onJumpGoodsDetail(item.product.id)"
class="header-cart-products__wrap flex flex-middle flex-between" class="header-cart-products__wrap flex flex-middle"
> >
<div class="cart-products-wrap__left flex felx-middle"> <div class="cart_products-wrap_cover">
<div class="products-wrap-left__cover"> <img :src="item.productMainPicture" />
<img :src="item.productMainPicture" /> </div>
</div> <div class="cart-products-wrap_info">
<div class="products-wrap-left__info"> <div class="products-wrap-info__top flex flex-between">
<p <p
class="wrap-left-info__title header-cart-products--failure-color" class="wrap-info-top__title header-cart-products--failure-color"
> >
{{ item.productName }} {{ item.productName }}
</p> </p>
<div class="wrap-left-info__detail flex"> <UiMoney
<span class="left-info-detail__skuname">{{ class="header-cart-products--failure-color"
item.productSku && item.productSku.name :float="true"
}}</span> :money="item.product.startingPrice"
<span class="left-info-detail__count">{{ item.number }}</span> />
</div> </div>
<div class="products-wrap-info__bottom flex flex-between">
<span class="wrap-info-bottom__skuname">{{
item.productSku.name
}}</span>
<span class="wrap-info-bottom__count">{{ item.number }}</span>
</div> </div>
</div> </div>
<UiMoney
class="header-cart-products--failure-color"
:float="true"
:money="item.product.startingPrice"
/>
</div> </div>
</template> </template>
</div> </div>
@ -157,7 +161,7 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
.header-cart-popover { .header-cart-popover {
padding: 16px 20px; padding: 16px 20px !important;
} }
</style> </style>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -170,15 +174,18 @@ export default {
border: 1px solid #eeeeee; border: 1px solid #eeeeee;
cursor: pointer; cursor: pointer;
.wrap-right-cart__tip { .wrap-right-cart__tip {
min-width: 14px; width: 16px;
height: 14px; height: 16px;
padding: 0 3px;
font-size: 10px; font-size: 10px;
line-height: 14px;
text-align: center;
background: #ff512b; background: #ff512b;
border-radius: 50%; border-radius: 50%;
color: #ffffff; color: #ffffff;
margin-left: 4px;
&--more {
width: unset;
padding: 0 4px;
border-radius: 7px;
}
} }
img { img {
width: 16px; width: 16px;
@ -189,7 +196,7 @@ export default {
.header-cart-popover { .header-cart-popover {
padding: 20px 16px; padding: 20px 16px;
.header-cart-products { .header-cart-products {
padding: 0 10px 50px 0; padding: 0 10px 20px 0;
max-height: 360px; max-height: 360px;
overflow: auto; overflow: auto;
&--failure-color { &--failure-color {
@ -198,23 +205,24 @@ export default {
.header-cart-products__wrap { .header-cart-products__wrap {
margin-bottom: 20px; margin-bottom: 20px;
cursor: pointer; cursor: pointer;
.cart-products-wrap__left { .cart_products-wrap_cover {
.products-wrap-left__cover { width: 60px;
height: 60px;
padding: 3px;
border: 1px solid #eeeeee;
border-radius: 4px;
margin-right: 11px;
img {
width: 54px; width: 54px;
height: 54px; height: 54px;
padding: 3px;
border: 1px solid #eeeeee;
border-radius: 4px;
margin-right: 11px;
img {
width: 100%;
height: 100%;
}
} }
.products-wrap-left__info { }
font-size: 12px; .cart-products-wrap_info {
color: #999999; font-size: 12px;
.wrap-left-info__title { color: #999999;
width: 100%;
.products-wrap-info__top {
.wrap-info-top__title {
display: block; display: block;
width: 120px; width: 120px;
@include ellipsis; @include ellipsis;
@ -222,24 +230,24 @@ export default {
color: #333333; color: #333333;
margin-bottom: 10px; margin-bottom: 10px;
} }
.wrap-left-info__detail { .wrap-info-top__price {
.left-info-detail__skuname { color: #ff512b;
display: block; }
width: 70px; }
@include ellipsis; .products-wrap-info__bottom {
} .wrap-info-bottom__skuname {
.left-info-detail__count { display: block;
&::before { width: 145px;
content: "X"; @include ellipsis;
font-size: 8px; }
} .wrap-info-bottom__count {
&::before {
content: "X";
font-size: 8px;
} }
} }
} }
} }
.cart-products-wrap__right {
color: #ff512b;
}
} }
.header-cart-products__bar { .header-cart-products__bar {
font-size: 14px; font-size: 14px;

8
pages/account/index/userInfo.vue
Unescape View File

@ -19,6 +19,7 @@
<el-form-item label="头像"> <el-form-item label="头像">
<div class="user-info-content__avatar flex flex-middle"> <div class="user-info-content__avatar flex flex-middle">
<el-image <el-image
v-loading="uploadLoading"
fit="cover" fit="cover"
:src="form.avatar" :src="form.avatar"
:preview-src-list="[form.avatar]" :preview-src-list="[form.avatar]"
@ -30,6 +31,7 @@
:show-file-list="false" :show-file-list="false"
:on-success="handleUploadSuccess" :on-success="handleUploadSuccess"
:before-upload="handleBeforeUpload" :before-upload="handleBeforeUpload"
:on-error="handleUploadError"
> >
<el-button>修改头像</el-button> <el-button>修改头像</el-button>
</el-upload> </el-upload>
@ -84,6 +86,7 @@ export default {
ossDirName: "", // oss路径名 ossDirName: "", // oss路径名
fileName: "", // 图片文件名 fileName: "", // 图片文件名
uploadData: {}, // oss上传图片参数 uploadData: {}, // oss上传图片参数
uploadLoading: false,
}; };
}, },
computed: { computed: {
@ -124,6 +127,7 @@ export default {
// 获取文件名 // 获取文件名
handleBeforeUpload(file) { handleBeforeUpload(file) {
this.uploadLoading = true;
this.fileName = file.name; this.fileName = file.name;
Object.assign(this.uploadData, { Object.assign(this.uploadData, {
key: `${this.ossDirName}${"${filename}"}`, key: `${this.ossDirName}${"${filename}"}`,
@ -131,8 +135,12 @@ export default {
}); });
}, },
handleUploadSuccess() { handleUploadSuccess() {
this.uploadLoading = false;
this.form.avatar = `${this.ossUploadUrl}/${this.ossDirName}${this.fileName}`; this.form.avatar = `${this.ossUploadUrl}/${this.ossDirName}${this.fileName}`;
}, },
handleUploadError() {
this.uploadLoading = false;
},
onSubmit() { onSubmit() {
this.$refs.ruleForm.validate(async (valid) => { this.$refs.ruleForm.validate(async (valid) => {
if (valid) { if (valid) {

12
plugins/router.js
Unescape View File

@ -1,12 +1,18 @@
export default ({ app }) => { export default ({ app }) => {
app.router.beforeEach((to, from, next) => { app.router.beforeEach((to, from, next) => {
if (app.store.state.token) { const { token, userInfo } = app.store.state;
if (token) {
if (Object.keys(userInfo).length === 0) {
app.store.dispatch("getUserInfo");
}
next(); next();
return; return;
} }
// 未登录打开个人中心相关页面，跳首页 // 未登录打开需要登录的页面，跳首页
if (/\/account/.test(to.path)) { const needLoginPage = [/\/account/, /\/cart/];
const result = needLoginPage.some((item) => item.test(to.path));
if (result) {
next("/"); next("/");
return; return;
} }

1
store/index.js
Unescape View File

@ -54,7 +54,6 @@ const actions = {
const token = this.$cookies.get(TOKEN_KEY); const token = this.$cookies.get(TOKEN_KEY);
if (!state.token && token) { if (!state.token && token) {
commit("setToken", token); commit("setToken", token);
dispatch("getUserInfo");
} }
// 获取分类数据 // 获取分类数据
const { result } = await ApiGetCategoryOneList(); const { result } = await ApiGetCategoryOneList();

Write Preview
Loading…
Cancel
Save