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

feat: 页头吸顶添加点击事件

Browse Source
merge-requests/20/head
xiaoguang 3 years ago
parent ac8ea65e89
commit 8c9866507e
5 changed files with 170 additions and 83 deletions
Show Stats Download Patch File Download Diff File

BIN
assets/img/layout/icon-shop-sticky.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 846 B

After

Width:  |  Height:  |  Size: 815 B

20
layouts/module/header/index.vue
Unescape View File

@ -1,7 +1,7 @@
<template> <template>
<div class="layout-header"> <div class="layout-header">
<!-- 滚动吸顶头部 --> <!-- 滚动吸顶头部 -->
<template v-if="isSticky"> <div v-show="isSticky">
<div class="sticky-bar-header"> <div class="sticky-bar-header">
<div class="sticky-bar-header__wrap flex flex-middle flex-between"> <div class="sticky-bar-header__wrap flex flex-middle flex-between">
<div class="flex flex-middle"> <div class="flex flex-middle">
@ -23,12 +23,19 @@
</el-menu> </el-menu>
</div> </div>
<div class="bar-header-wrap__icons flex flex-middle"> <div class="bar-header-wrap__icons flex flex-middle">
<img src="~/assets/img/layout/icon-search-sticky.png" /> <img
<div class="header-wrap-icons__shop"> src="~/assets/img/layout/icon-search-sticky.png"
@click="$router.push('/goods/list')"
/>
<div class="header-wrap-icons__shop" @click="$router.push('/cart')">
<img src="~/assets/img/layout/icon-shop-sticky.png" /> <img src="~/assets/img/layout/icon-shop-sticky.png" />
<span class="">3</span> <span class="">3</span>
</div> </div>
<div v-if="token" class="header-wrap-icons__login"> <div
v-if="token"
class="header-wrap-icons__login"
@click="$router.push('/account/home')"
>
<img :src="userInfo.avatar" /> <img :src="userInfo.avatar" />
</div> </div>
<div <div
@ -41,7 +48,7 @@
</div> </div>
</div> </div>
</div> </div>
</template> </div>
<template> <template>
<HeaderInfoBar /> <HeaderInfoBar />
<div class="default-bar-header"> <div class="default-bar-header">
@ -207,7 +214,7 @@ export default {
label: "开发书籍", label: "开发书籍",
value: `/goods/list?id=6&levelType=${CATEGROY_LEVEL.ONE}`, value: `/goods/list?id=6&levelType=${CATEGROY_LEVEL.ONE}`,
}, },
{ label: "限时秒杀", value: "/sckill" }, { label: "限时秒杀", value: "/seckill" },
], ],
categroyTwoVisible: false, // 是否展示二级分类 categroyTwoVisible: false, // 是否展示二级分类
categroyVisible: false, // 是否展示一级分类 categroyVisible: false, // 是否展示一级分类
@ -343,6 +350,7 @@ export default {
width: 34px; width: 34px;
height: 34px; height: 34px;
border-radius: 50%; border-radius: 50%;
object-fit: cover;
} }
} }
.header-wrap-icons__unlogin { .header-wrap-icons__unlogin {

1
pages/account/index/home/index.vue
Unescape View File

@ -135,6 +135,7 @@ export default {
height: 65px; height: 65px;
border-radius: 50%; border-radius: 50%;
margin-right: 16px; margin-right: 16px;
object-fit: cover;
} }
.home-head-info__wrap { .home-head-info__wrap {
color: #666666; color: #666666;

153
pages/seckill/index.vue
Unescape View File

@ -6,51 +6,50 @@
* @Description: file content * @Description: file content
--> -->
<template> <template>
<div class="sckill"> <div class="seckill">
<div v-show="isSticky" class="seckill-header-sticky">
<TabBar
v-model="query.activityTimeId"
:list="tabList"
@tab-click="getGoodsList"
/>
</div>
<!-- 秒杀时间段 --> <!-- 秒杀时间段 -->
<div <div
class="sckill-header" class="seckill-header"
:style="{ backgroundImage: `url(${bkgSckill})` }" :style="{ backgroundImage: `url(${bkgSckill})` }"
> >
<div class="sckill-header-tabbar flex"> <div class="seckill-header-tabbar">
<div <TabBar
v-for="item in tabList" v-model="query.activityTimeId"
:key="item.id" :list="tabList"
@click="onTabSelect(item.id)" @tab-click="getGoodsList"
class="sckill-header-tabbar__item flex flex-middle flex-center" />
:class="{
'sckill-header-tabbar__item--active':
item.id === query.activityTimeId,
}"
>
<strong class="header-tabbar-item__time">18:00</strong>
<div class="header-tabbar-item__tip">抢购中</div>
</div>
</div> </div>
</div> </div>
<div class="sckill-bar flex flex-middle flex-center"> <div class="seckill-bar flex flex-middle flex-center">
<p>本场秒杀即将开抢，距开始还剩</p> <p>本场秒杀即将开抢，距开始还剩</p>
<div class="sckill-bar-countdown flex flex-middle"> <div class="seckill-bar-countdown flex flex-middle">
<div class="sckill-bar-countdown__time">{{ countdown.hour }}</div> <div class="seckill-bar-countdown__time">{{ countdown.hour }}</div>
<span class="sckill-bar-countdown--mark">:</span> <span class="seckill-bar-countdown--mark">:</span>
<div class="sckill-bar-countdown__time">{{ countdown.minute }}</div> <div class="seckill-bar-countdown__time">{{ countdown.minute }}</div>
<span class="sckill-bar-countdown--mark">:</span> <span class="seckill-bar-countdown--mark">:</span>
<div class="sckill-bar-countdown__time">{{ countdown.second }}</div> <div class="seckill-bar-countdown__time">{{ countdown.second }}</div>
</div> </div>
</div> </div>
<!-- 秒杀商品列表 --> <!-- 秒杀商品列表 -->
<div v-loading="loading" class="sckill-products flex flex-wrap"> <div v-loading="loading" class="seckill-products flex flex-wrap">
<div <div
v-for="item in goodsList" v-for="item in goodsList"
:key="item.productId" :key="item.productId"
@click="onJumpGoodsDetail(item.productId)" @click="onJumpGoodsDetail(item.productId)"
class="sckill-products-wrap" class="seckill-products-wrap"
> >
<img <img
:src="item.productMainPicture" :src="item.productMainPicture"
class="sckill-products-wrap__cover" class="seckill-products-wrap__cover"
/> />
<div class="sckill-products-wrap__content"> <div class="seckill-products-wrap__content">
<p class="products-wrap-content__title">{{ item.productName }}</p> <p class="products-wrap-content__title">{{ item.productName }}</p>
<div class="products-wrap-content__price"> <div class="products-wrap-content__price">
<strong>￥{{ item.activityPrice }}</strong> <strong>￥{{ item.activityPrice }}</strong>
@ -69,7 +68,7 @@
</div> </div>
</div> </div>
<!-- 分页 --> <!-- 分页 -->
<div class="sckill-pagination flex flex-right"> <div class="seckill-pagination flex flex-right">
<el-pagination <el-pagination
background background
:current-page="currentPage" :current-page="currentPage"
@ -86,21 +85,26 @@
</template> </template>
<script> <script>
import { ApiGetSeckillTimes, ApiGetSeckillGoods } from "@/plugins/api/seckill"; import { ApiGetSeckillTimes, ApiGetSeckillGoods } from "@/plugins/api/seckill";
import TabBar from "./module/TabBar.vue";
export default { export default {
name: "Sckill", name: "Sckill",
components: { TabBar },
data() { data() {
return { return {
bkgSckill: require("~/assets/img/sckill/bkg-large.png"), bkgSckill: require("~/assets/img/sckill/bkg-large.png"),
tabList: [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }], // 秒杀时间段 tabList: [], // 秒杀时间段
goodsList: [], // 商品列表 goodsList: [], // 商品列表
total: 0, total: 0,
currentPage: 0, currentPage: 0,
loading: false, loading: false,
query: { query: {
pageIndex: 1, pageIndex: 1,
length: 12, length: 16,
activityTimeId: 1, activityTimeId: 1,
}, },
ticking: false,
isSticky: false,
}; };
}, },
computed: { computed: {
@ -115,7 +119,25 @@ export default {
created() { created() {
this.getSeckillTimes(); this.getSeckillTimes();
}, },
mounted() {
// 监听滚动事件
window.addEventListener("scroll", this.scrollEventMethod);
},
destroyed() {
window.removeEventListener("scroll", this.scrollEventMethod);
},
methods: { methods: {
scrollEventMethod() {
const that = this;
// 节流
if (!that.ticking) {
window.requestAnimationFrame(function () {
that.ticking = false;
that.isSticky = window.scrollY > 400;
});
that.ticking = true;
}
},
async getSeckillTimes() { async getSeckillTimes() {
const { result } = await ApiGetSeckillTimes(); const { result } = await ApiGetSeckillTimes();
if (result && result.length > 0) { if (result && result.length > 0) {
@ -144,72 +166,48 @@ export default {
this.query.pageIndex = page; this.query.pageIndex = page;
this.getGoodsList(); this.getGoodsList();
}, },
onTabSelect(id) { handleTabSelect(id) {
this.query.activityTimeId = id; this.query.activityTimeId = id;
Object.assign(this.query, { Object.assign(this.query, {
pageIndex: 1, pageIndex: 1,
length: 10, length: 16,
}); });
}, },
}, },
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.sckill { .seckill {
background: #f8f8f8; background: #f8f8f8;
padding-bottom: 42px; padding-bottom: 42px;
.sckill-header { .seckill-header-sticky {
position: fixed;
left: 50%;
transform: translate(-50%);
top: 50px;
z-index: 1;
@include layout-box;
}
.seckill-header {
position: relative; position: relative;
width: 100%; width: 100%;
height: 156px; height: 156px;
background-size: 100% 100%; background-size: 100% 100%;
.sckill-header-tabbar { .seckill-header-tabbar {
@include layout-box;
position: absolute; position: absolute;
left: 50%; left: 50%;
bottom: 0; bottom: 0;
transform: translate(-50%); transform: translate(-50%);
height: 60px;
border-radius: 4px 4px 0px 0px;
overflow: hidden;
cursor: pointer;
.sckill-header-tabbar__item {
width: 240px;
font-size: 12px;
background: #ffffff;
color: #666666;
.header-tabbar-item__time {
font-size: 18px;
color: #333333;
margin-right: 22px;
} }
.header-tabbar-item__tip {
width: 69px;
height: 22px;
text-align: center;
border: 1px solid #999999;
border-radius: 2px;
} }
&--active { .seckill-bar {
background: linear-gradient(270deg, #ffa25a 0%, #ff7f39 100%);
color: #ffffff;
.header-tabbar-item__time {
font-size: 24px;
color: #ffffff;
}
.header-tabbar-item__tip {
border-color: #ffffff;
}
}
}
}
}
.sckill-bar {
height: 60px; height: 60px;
line-height: 60px; line-height: 60px;
text-align: center; text-align: center;
font-size: 14px; font-size: 14px;
color: #666666; color: #666666;
.sckill-bar-countdown { .seckill-bar-countdown {
margin-left: 25px; margin-left: 25px;
font-weight: bold; font-weight: bold;
&__time { &__time {
@ -228,23 +226,24 @@ export default {
} }
} }
} }
.sckill-products, .seckill-products,
.sckill-pagination { .seckill-pagination {
@include layout-box; @include layout-box;
} }
.sckill-products { .seckill-products {
.sckill-products-wrap { .seckill-products-wrap {
width: 24%; width: 24%;
background: #ffffff; background: #ffffff;
margin: 15px 0 60px 0; margin: 15px 0 60px 0;
cursor: pointer;
&:not(:nth-child(4n)) { &:not(:nth-child(4n)) {
margin-right: calc(4% / 3); margin-right: calc(4% / 3);
} }
.sckill-products-wrap__cover { .seckill-products-wrap__cover {
width: 100%; width: 100%;
height: 288px; height: 288px;
} }
.sckill-products-wrap__content { .seckill-products-wrap__content {
padding: 20px 16px; padding: 20px 16px;
.products-wrap-content__title { .products-wrap-content__title {
@include ellipsis; @include ellipsis;
@ -287,7 +286,7 @@ export default {
} }
} }
} }
.sckill-pagination { .seckill-pagination {
margin-top: 60px; margin-top: 60px;
/deep/.el-pagination { /deep/.el-pagination {
.btn-prev, .btn-prev,

79
pages/seckill/module/TabBar.vue
Unescape View File

@ -0,0 +1,79 @@
<template>
<div class="seckill-tabbar flex flex-between">
<div
v-for="item in list"
:key="item.id"
@click="onTabClick(item.id)"
class="sckill-header-tabbar__item flex flex-middle flex-center"
:class="{
'sckill-header-tabbar__item--active': item.id === value,
}"
>
<strong class="header-tabbar-item__time">18:00</strong>
<div class="header-tabbar-item__tip">抢购中</div>
</div>
</div>
</template>
<script>
export default {
name: "SeckillTabBar",
props: {
list: {
type: Array,
default: () => [],
},
value: {
type: Number,
default: 0,
},
},
methods: {
onTabClick(id) {
// 点击同一个tab
if (id === this.value) {
return;
}
this.$emit("input", id);
this.$emit("tab-click");
},
},
};
</script>
<style lang="scss" scoped>
.seckill-tabbar {
width: 100%;
height: 60px;
cursor: pointer;
overflow: hidden;
.sckill-header-tabbar__item {
width: 100%;
font-size: 12px;
background: #ffffff;
color: #666666;
.header-tabbar-item__time {
font-size: 18px;
color: #333333;
margin-right: 22px;
}
.header-tabbar-item__tip {
width: 69px;
height: 22px;
line-height: 22px;
text-align: center;
border: 1px solid #999999;
border-radius: 2px;
}
&--active {
background: linear-gradient(270deg, #ffa25a 0%, #ff7f39 100%);
color: #ffffff;
.header-tabbar-item__time {
font-size: 24px;
color: #ffffff;
}
.header-tabbar-item__tip {
border-color: #ffffff;
}
}
}
}
</style>
Write Preview
Loading…
Cancel
Save