code-image-backup-public/lilishop-ui
1
0
Fork 0
mirror of https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git synced 2025-12-20 18:05:53 +08:00
Code Issues Packages Projects Releases Wiki Activity

commit message

Browse Source
This commit is contained in:
Chopper
2021-05-13 10:56:04 +08:00
commit ec3e958037
728 changed files with 132685 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
buyer/src/components/indexDecorate/modelForm.vue Normal file
View File

@@ -0,0 +1,33 @@
<template>
<div class="model-form">
<div class="model-content">
<template v-for="(element, index) in data.list">
<model-form-item
v-if="element && element.key"
:key="element.key"
:element="element"
:index="index"
:data="data"
></model-form-item>
</template>
</div>
</div>
</template>
<script>
import ModelFormItem from './modelFormItem.vue';
export default {
name: 'modelForm',
components: {
ModelFormItem
},
props: ['data']
};
</script>
<style lang="scss" scoped>
.model-content {
width: 1200px;
margin: 0 auto;
background: #fff;
min-height: 1200px;
}
</style>

302
buyer/src/components/indexDecorate/modelFormItem.vue Normal file
View File

@@ -0,0 +1,302 @@
<template>
<div class="model-item" v-if="element && element.key">
<!-- 轮播图模块，包括个人信息，快捷导航模块 -->
<template v-if="element.type == 'carousel'">
<model-carousel :data="element"></model-carousel>
</template>
<!-- 热门广告 -->
<template v-if="element.type == 'hotAdvert'">
<div>
<img
style="display: block"
class="hover-pointer"
:src="element.options.list[0].img"
@click="linkTo(element.options.list[0].url)"
width="1200"
alt=""
/>
</div>
<ul class="advert-list">
<template v-for="(item, index) in element.options.list">
<li
v-if="index !== 0"
@click="linkTo(item.url)"
class="hover-pointer"
:key="index"
>
<img :src="item.img" width="230" height="190" alt="" />
</li>
</template>
</ul>
</template>
<!-- 限时秒杀 待完善 -->
<!-- <template v-if="element.type == 'seckill'">
<seckill :data="element"></seckill>
</template> -->
<!-- 折扣广告 -->
<template v-if="element.type == 'discountAdvert'">
<div
class="discountAdvert"
:style="{
'background-image': 'url(' + element.options.bgImg.img + ')',
}"
>
<img
@click="linkTo(item.url)"
class="hover-pointer"
v-for="(item, index) in element.options.classification"
:key="index"
:src="item.img"
width="190"
height="210"
alt=""
/>
<img
@click="linkTo(item.url)"
class="hover-pointer"
v-for="(item, index) in element.options.brandList"
:key="'discount' + index"
:src="item.img"
width="240"
height="105"
alt=""
/>
</div>
</template>
<!-- 好货推荐 -->
<template v-if="element.type == 'recommend'">
<recommend :data="element"></recommend>
</template>
<!-- 新品排行 -->
<template v-if="element.type == 'newGoodsSort'">
<new-goods-sort :data="element"></new-goods-sort>
</template>
<!-- 首页广告 -->
<template v-if="element.type == 'firstAdvert'">
<first-page-advert :data="element"></first-page-advert>
</template>
<!-- 横幅广告 -->
<template v-if="element.type == 'bannerAdvert'">
<img
width="1200"
class="hover-pointer"
@click="linkTo(element.options.url)"
:src="element.options.img"
alt=""
/>
</template>
<template v-if="element.type == 'notEnough'">
<not-enough :data="element"></not-enough>
</template>
</div>
</template>
<script>
import ModelCarousel from './modelList/carousel.vue';
import FirstPageAdvert from './modelList/firstPageAdvert.vue';
import NewGoodsSort from './modelList/newGoodsSort.vue';
import Recommend from './modelList/recommend.vue';
import NotEnough from './modelList/notEnough.vue';
import Seckill from './modelList/seckill.vue';
export default {
name: 'modelFormItem',
props: ['element', 'select', 'index', 'data'],
components: {
ModelCarousel,
Recommend,
NewGoodsSort,
FirstPageAdvert,
NotEnough,
Seckill
},
data () {
return {
showModal: false, // 控制模态框显隐
selected: {} // 已选数据
};
}
};
</script>
<style lang="scss" scoped>
.model-item {
position: relative;
margin-bottom: 20px;
&:hover {
.del-btn {
display: block;
}
}
}
.del-btn {
width: 100px;
height: 100px;
display: none;
position: absolute;
right: -100px;
top: 0;
&:hover {
display: block;
}
}
/** 热门广告 */
.advert-list {
background: $theme_color;
height: 200px;
display: flex;
justify-content: space-around;
padding: 3px 10px;
> li {
img {
cursor: pointer;
border-radius: 10px;
transition: all 150ms ease-in-out;
&:hover {
transform: translateY(-3px);
box-shadow: rgba(0, 0, 0, 0.4) 0px 5px 20px 0px;
}
}
}
}
/** 限时秒杀 */
.limit-img {
display: flex;
flex-direction: row;
img {
width: 300px;
height: 100px;
}
}
/** 折扣广告 */
.discountAdvert {
height: 566px;
background-repeat: no-repeat;
margin-left: -97px;
position: relative;
padding-left: 295px;
display: flex;
flex-wrap: wrap;
align-items: start;
img {
margin-top: 10px;
margin-right: 10px;
transition: all 150ms ease-in-out;
&:hover {
box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.4);
transform: translateY(-2px);
}
}
}
/** 首页品牌 */
.brand {
.brand-view {
display: flex;
margin-top: 10px;
.brand-view-content {
width: 470px;
margin-left: 10px;
img {
width: 100%;
height: 316px;
}
.brand-view-title {
height: 50px;
padding: 0 5px;
display: flex;
align-items: center;
justify-content: space-between;
}
}
.brand-view-content:first-child {
width: 240px;
margin-left: 0;
}
}
.brand-list {
margin-top: 10px;
display: flex;
align-items: center;
flex-wrap: wrap;
li {
width: 121px;
height: 112px;
position: relative;
overflow: hidden;
border: 1px solid #f5f5f5;
margin: -1px -1px 0 0;
&:hover {
.brand-mash {
display: flex;
}
}
.brand-img {
text-align: center;
margin-top: 30px;
img {
width: 100px;
height: auto;
}
}
.brand-mash {
display: none;
position: absolute;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
width: inherit;
height: inherit;
font-size: 12px;
font-weight: bold;
.ivu-icon {
position: absolute;
right: 10px;
top: 10px;
font-size: 15px;
}
align-items: center;
justify-content: center;
flex-direction: column;
color: #fff;
cursor: pointer;
div:last-child {
background-color: $theme_color;
border-radius: 9px;
padding: 0 10px;
margin-top: 5px;
}
}
}
.refresh {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
.ivu-icon {
font-size: 18px;
transition: all 0.3s ease-out;
}
&:hover {
background-color: $theme_color;
color: #fff;
.ivu-icon {
transform: rotateZ(360deg);
}
}
}
}
}
/** 装修模态框 内部样式start */
.modal-top-advert {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
> * {
margin-bottom: 10px;
}
}
</style>

180
buyer/src/components/indexDecorate/modelList/carousel.vue Normal file
View File

@@ -0,0 +1,180 @@
<template>
<div class="model-carousel">
<div class="nav-body clearfix">
<!-- 侧边导航占位 -->
<div class="nav-side"></div>
<div class="nav-content">
<!-- 轮播图 -->
<Carousel autoplay>
<CarouselItem v-for="(item, index) in data.options.list" :key="index">
<div style="overflow: hidden">
<img
:src="item.img"
width="790"
@click="linkTo(item.url)"
height="340"
class="hover-pointer"
/>
</div>
</CarouselItem>
</Carousel>
</div>
<div class="nav-right">
<div class="person-msg">
<img :src="userInfo.face" v-if="userInfo.face" alt />
<Avatar icon="ios-person" class="mb_10" v-else size="80" />
<div>Hi，{{ userInfo.nickName || "欢迎来到LiLi Shop" | secrecyMobile }}</div>
<div v-if="userInfo.id">
<Button type="error" shape="circle" @click="$router.push('home')">会员中心</Button>
</div>
<div v-else>
<Button type="error" @click="$router.push('login')" shape="circle"
>请登录</Button
>
</div>
</div>
<div class="shop-msg">
<div>
<span>常见问题</span>
<ul class="article-list">
<li class="ellipsis" :alt="article.title" v-for="(article, index) in articleList" :key="index" @click="goArticle(article.id)">
{{article.title}}
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import {articleList} from '@/api/common.js'
import storage from '@/plugins/storage';
export default {
name: 'modelCarousel',
props: ['data'],
data () {
return {
userInfo: {}, // 用户信息
articleList: [], // 常见问题
params: { // 请求常见问题参数
pageNumber: 1,
pageSize: 5,
type: 'ANNOUNCEMENT',
sort: 'sort'
}
};
},
methods: {
getArticleList () {
articleList(this.params).then(res => {
if (res.success) {
this.articleList = res.result.records
}
})
},
goArticle (id) {
let routeUrl = this.$router.resolve({
path: '/article',
query: {id}
});
window.open(routeUrl.href, '_blank');
}
},
mounted () {
if (storage.getItem('userInfo')) this.userInfo = JSON.parse(storage.getItem('userInfo'));
this.getArticleList()
}
};
</script>
<style scoped lang="scss">
.model-carousel {
width: 1200px;
height: 340px;
overflow: hidden;
}
/* 导航主体 */
.nav-body {
width: 1200px;
height: 340px;
margin: 0px auto;
}
.nav-side {
height: 100%;
width: 200px;
float: left;
padding: 0px;
color: #fff;
background-color: #6e6568;
}
/*导航内容*/
.nav-content {
width: 790px;
overflow: hidden;
float: left;
position: relative;
}
.nav-right {
float: left;
width: 210px;
.person-msg {
display: flex;
align-items: center;
flex-direction: column;
margin: 20px auto;
button {
height: 25px !important;
margin-top: 10px;
}
.ivu-btn-default {
color: $theme_color;
border-color: $theme_color;
}
img {
margin-bottom: 10px;
width: 80px;
height: 80px;
border-radius: 50%;
}
}
.shop-msg {
div {
width: 100%;
margin: 10px 27px;
span {
cursor: pointer;
text-align: center;
font-weight: bold;
margin-left: 5px;
}
span:nth-child(1) {
@include content_color($theme_color);
margin-left: 0;
}
span:nth-child(2) {
font-weight: normal;
}
span:nth-child(3):hover {
color: $theme_color;
}
}
ul {
li {
cursor: pointer;
margin: 5px 0;
color: #999395;
width: 150px;
font-size: 12px;
&:hover {
color: $theme_color;
}
}
}
}
}
</style>

99
buyer/src/components/indexDecorate/modelList/firstPageAdvert.vue Normal file
View File

@@ -0,0 +1,99 @@
<template>
<div class="first-page-advert">
<div
class="item hover-pointer"
@click="linkTo(item.url)"
:style="{
backgroundImage: `linear-gradient(to right, ${item.fromColor}, ${item.toColor})`,
}"
v-for="(item, index) in options.list"
:key="index"
>
<div>
<span class="line top-line"></span>
<p>{{ item.name }}</p>
<span class="line btm-line"></span>
<p>{{ item.describe }}</p>
</div>
<img :src="item.img" width="170" height="170" alt="" />
</div>
</div>
</template>
<script>
export default {
props: {
data: {
type: Object,
default: null
}
},
data () {
return {
options: this.data.options // 装修数据
};
},
methods: {}
};
</script>
<style lang="scss" scoped>
.first-page-advert {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
// margin-top: -10px;
.item {
width: 393px;
height: 170px;
margin-top: 10px;
display: flex;
align-items: center;
justify-content: center;
img {
margin-left: 20px;
transition: transform 0.5s, -webkit-transform 0.5s, -moz-transform 0.5s;
&:hover {
transform: translateX(-5px);
}
}
&:nth-of-type(1),
&:nth-of-type(2),
&:nth-of-type(3) {
margin-top: 0;
}
p:nth-of-type(1) {
margin: 3px 0;
font-size: 18px;
color: #fff;
}
p:nth-of-type(2) {
margin-top: 3px;
color: #fff;
}
}
.line {
position: relative;
display: block;
height: 2px;
background: url(../../../assets/images/festival_icon.png);
z-index: 1;
}
.top-line {
width: 78px;
background-position: -1px -3px;
}
.btm-line {
background-position: 0 -11px;
width: 154px;
}
}
.modal-top-advert {
align-items: start;
padding: 0 30px;
.exhibition {
width: 300px;
height: 50px;
}
}
</style>

234
buyer/src/components/indexDecorate/modelList/newGoodsSort.vue Normal file
View File

@@ -0,0 +1,234 @@
<template>
<div class="new-goods">
<div class="left">
<div class="top-header" :style="{ background: options.left.bgColor }">
<span>{{ options.left.title }}</span>
<span @click="linkTo(options.left.url)" class="hover-pointer"
>{{ options.left.secondTitle }} &gt;</span
>
</div>
<div class="content">
<div
class="con-item hover-pointer"
v-for="(item, index) in options.left.list"
:key="index"
@click="linkTo(item.url)"
>
<div>
<p>{{ item.name }}</p>
<p class="describe">{{ item.describe }}</p>
</div>
<img :src="item.img" alt="" />
</div>
</div>
</div>
<div class="middle">
<div class="top-header" :style="{ background: options.middle.bgColor }">
<span>{{ options.middle.title }}</span>
<span class="hover-pointer" @click="linkTo(options.middle.url)"
>{{ options.middle.secondTitle }} &gt;</span
>
</div>
<div class="content">
<div
class="con-item hover-pointer"
v-for="(item, index) in options.middle.list"
:key="index"
@click="linkTo(item.url)"
>
<div>
<p>{{ item.name }}</p>
<p class="describe">{{ item.describe }}</p>
</div>
<img :src="item.img" alt="" />
</div>
</div>
</div>
<div class="right">
<div class="top-header" :style="{ background: options.right.bgColor }">
<span>{{ options.right.title }}</span>
<span @click="linkTo(options.right.url)" class="hover-pointer"
>{{ options.right.secondTitle }} &gt;</span
>
</div>
<div class="content">
<div
v-for="(item, index) in options.right.list"
:key="index"
class="hover-pointer"
@click="linkTo(item.url)"
>
<img :src="item.img" alt="" />
<p>{{ item.name }}</p>
<p>{{ item.price | unitPrice("￥") }}</p>
<div class="jiaobiao" :class="'jiaobiao' + (index + 1)">
{{ index + 1 }}
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
data: {
type: Object,
default: null
}
},
data () {
return {
options: this.data.options // 装修数据
};
},
methods: {}
};
</script>
<style lang="scss" scoped>
.new-goods {
display: flex;
justify-content: space-between;
> div {
width: 393px;
height: 440px;
}
.left > .content {
> div:nth-child(1) {
height: 240px;
flex-direction: column;
border: 1px solid #eee;
border-top: none;
border-left: none;
justify-content: space-between;
img {
width: 160px;
height: 160px;
}
.describe {
margin-top: 10px;
}
}
> div:nth-child(2) {
border-right: 1px solid #eee;
}
> div:nth-child(3),
> div:nth-child(4) {
border-bottom: 1px solid #eee;
}
}
.middle > .content {
> div {
border-style: solid;
border-color: #eee;
border-width: 0;
border-bottom-width: 1px;
}
> div:nth-child(1),
> div:nth-child(2),
> div:nth-child(3) {
border-right-width: 1px;
}
> div:nth-child(6),
> div:nth-child(3) {
border-bottom-width: 0;
}
}
.right > .content {
display: flex;
flex-wrap: wrap;
flex-direction: row;
font-size: 12px;
> div {
position: relative;
width: 120px;
padding: 5px 10px 0 10px;
img {
width: 100px;
height: 100px;
}
border-bottom: 1px solid #eee;
:nth-child(2) {
height: 38px;
overflow: hidden;
}
:nth-child(3) {
color: $theme_color;
margin-top: 5px;
}
.jiaobiao {
position: absolute;
width: 23px;
height: 23px;
top: 10px;
right: 16px;
background: url(../../../assets/images/festival_icon.png);
color: #fff;
text-align: center;
}
.jiaobiao1,
.jiaobiao4 {
background-position: -2px -30px;
}
.jiaobiao2,
.jiaobiao5 {
background-position: -31px -30px;
}
.jiaobiao3,
.jiaobiao6 {
background-position: -60px -30px;
}
}
> div:nth-child(4),
> div:nth-child(5),
> div:nth-child(6) {
border: none;
}
}
.top-header {
display: flex;
align-items: center;
justify-content: space-between;
height: 50px;
padding: 0 10px;
background: #c43d7e;
color: #fff;
span:nth-child(1) {
font-size: 20px;
}
span:nth-child(2) {
font-size: 12px;
}
}
.content {
padding: 10px 12px 0;
display: flex;
flex-wrap: wrap;
flex-direction: column;
height: 370px;
}
.con-item {
width: 185px;
height: 120px;
display: flex;
padding-left: 10px;
padding-top: 10px;
img {
width: 90px;
height: 90px;
margin-top: 10px;
}
}
.describe {
color: #999;
font-size: 12px;
margin-top: 15px;
}
}
</style>

145
buyer/src/components/indexDecorate/modelList/notEnough.vue Normal file
View File

@@ -0,0 +1,145 @@
<template>
<div class="not-enough">
<ul class="nav-bar">
<li
v-for="(item, index) in conData.options.navList"
:class="currentIndex === index ? 'curr' : ''"
@click="changeCurr(index)"
:key="index"
>
<p>{{ item.title }}</p>
<p>{{ item.desc }}</p>
</li>
</ul>
<div class="content" v-if="showContent">
<div
v-for="(item, index) in conData.options.list[currentIndex]"
:key="index"
class="hover-pointer"
@click="linkTo(item.url)"
>
<img :src="item.img" width="210" height="210" :alt="item.name" />
<p>{{ item.name }}</p>
<p>
<span>{{ Number(item.price) | unitPrice("￥") }}</span>
</p>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
data: {
type: Object,
default: null
}
},
data () {
return {
currentIndex: 0, // 当前分类下标
conData: this.data, // 装修数据
showContent: true // 是否展示内容
};
},
watch: {
data: function (val) {
this.conData = val;
},
conData: function (val) {
this.$emit('content', val);
}
},
mounted () {},
methods: {
changeCurr (index) {
this.currentIndex = index;
}
}
};
</script>
<style lang="scss" scoped>
.nav-bar {
display: flex;
justify-content: center;
width: 100%;
margin-bottom: 10px;
background-color: rgb(218, 217, 217);
height: 60px;
align-items: center;
position: relative;
li {
padding: 0 30px;
text-align: center;
p:nth-child(1) {
font-size: 16px;
border-radius: 50px;
padding: 0 7px;
}
p:nth-child(2) {
font-size: 14px;
color: #999;
}
&:hover {
p {
color: $theme_color;
}
cursor: pointer;
}
border-right: 1px solid #eee;
}
li:last-of-type {
border: none;
}
.curr {
p:nth-child(1) {
background-color: $theme_color;
color: #fff;
}
p:nth-child(2) {
color: $theme_color;
}
}
}
.content {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
> div {
padding: 10px;
box-sizing: border-box;
border: 1px solid #eee;
margin-bottom: 10px;
&:hover {
border-color: $theme_color;
color: $theme_color;
}
p:nth-of-type(1) {
overflow: hidden;
width: 210px;
white-space: nowrap;
text-overflow: ellipsis;
margin: 10px 0 5px 0;
}
p:nth-of-type(2) {
color: $theme_color;
font-size: 16px;
display: flex;
justify-content: space-between;
align-items: center;
span:nth-child(2) {
text-decoration: line-through;
font-size: 12px;
color: #999;
}
}
}
}
</style>

217
buyer/src/components/indexDecorate/modelList/recommend.vue Normal file
View File

@@ -0,0 +1,217 @@
<template>
<div class="recommend">
<div class="recommend-left">
<div class="head-recommend" :style="{ background: msgLeft.bgColor }">
<span>{{ msgLeft.title }}</span>
<span class="hover-pointer" @click="linkTo(msgLeft.url)">{{ msgLeft.secondTitle }}&gt;</span>
</div>
<div class="content-left">
<div>
<img class="hover-pointer" @click="linkTo(msgLeft.list[0].url)" :src="msgLeft.list[0].img" width="160" height="160" alt="" />
<div class="margin-left">{{ msgLeft.list[0].name }}</div>
<div class="margin-left">{{ msgLeft.list[0].describe }}</div>
<Button
size="small"
:style="{ background: msgLeft.bgColor }"
@click="linkTo(msgLeft.list[0].url)"
class="fz_12 view-btn"
>点击查看</Button
>
</div>
<div>
<template v-for="(item, index) in msgLeft.list">
<div v-if="index != 0" :key="index" @click="linkTo(item.url)" class="hover-pointer">
<img :src="item.img" width="80" height="80" alt="" />
<div>
<div>{{ item.name }}</div>
<div>{{ item.describe }}</div>
</div>
</div>
</template>
</div>
</div>
</div>
<div class="recommend-right">
<div class="head-recommend" :style="{ background: msgRight.bgColor }">
<span>{{ msgRight.title }}</span>
<span @click="linkTo(msgRight.url)" class="hover-pointer"
>{{ msgRight.secondTitle }}&gt;</span
>
</div>
<div class="content-right">
<div
v-for="(item, index) in msgRight.list"
:key="index"
@click="linkTo(item.url)" class="hover-pointer"
>
<div class="right-item" :style="{'border': index===2 || index===3 ?'none': ''}">
<div>
<span :style="{ background: msgRight.bgColor }">{{item.name}}</span>
<span>{{ item.describe }}</span>
</div>
<div class="right-img">
<img :src="item.img" alt="" />
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
data: {
type: Object,
default: {}
}
},
data () {
return {
msgLeft: this.data.options.contentLeft, // 左侧数据
msgRight: this.data.options.contentRight // 右侧数据
};
},
methods: {}
};
</script>
<style lang="scss" scoped>
.recommend {
display: flex;
justify-content: space-between;
.recommend-left {
width: 595px;
.content-left {
display: flex;
padding-top: 10px;
font-size: 12px;
> div:nth-child(1) {
width: 189px;
border-right: 1px solid #eee;
height: 360px;
img {
margin: 40px 0 0 15px;
}
.margin-left {
margin-left: 15px;
width: 145px;
}
div:nth-of-type(1) {
font-weight: bold;
border-top: 1px solid #eee;
padding-top: 10px;
padding-bottom: 10px;
}
div:nth-of-type(2) {
color: #999;
}
.view-btn {
margin-left: 15px;
margin-top: 10px;
color: #fff;
}
}
> div:nth-child(2) {
width: 405px;
display: flex;
flex-wrap: wrap;
> div {
display: flex;
align-items: center;
width: 200px;
height: 120px;
img {
margin: 0 10px;
}
> div:nth-child(2) {
:nth-child(2) {
color: #449dae;
}
}
}
}
}
}
.recommend-right {
width: 595px;
height: 360px;
.head-recommend {
background: #a25684;
}
.content-right {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
padding-top: 10px;
> div {
width: 50%;
text-align: center;
height: 180px;
padding-top: 10px;
.right-item {
border-bottom: 1px solid #eee;
display: flex;
margin-top: 30px;
margin-left: 5px;
margin-right: 5px;
height: 150px;
padding: 0 10px;
font-size: 12px;
>div:nth-child(1) {
width: 130px;
margin-top: 30px;
span:nth-child(1){
color: #fff;
border-radius: 10px;
padding: 0 5px;
background-color: #a25684;
display: block;
width: 120px;
overflow: hidden;
white-space: nowrap;
margin: 0 10px 10px 0;
}
span:nth-child(2) {
font-size: 12px;
color: #666;
display: block;
}
}
.right-img {
width: 100;
height: 100px;
text-align: center;
margin: 0 auto;
img{
max-height: 100px;
max-width: 100px;
}
}
}
}
> div:nth-child(n + 1) {
border-right: 1px solid #eee;
}
}
}
.head-recommend {
display: flex;
align-items: center;
justify-content: space-between;
height: 50px;
padding: 0 10px;
background: #449dae;
color: #fff;
span:nth-child(1) {
font-size: 20px;
}
span:nth-child(2) {
font-size: 12px;
}
}
}
</style>

289
buyer/src/components/indexDecorate/modelList/seckill.vue Normal file
View File

@@ -0,0 +1,289 @@
<template>
<div class="seckill">
<div class="aside hover-pointer" @click="goPromotion">
<div class="title">{{ actName }}</div>
<div class="hour">
<span>{{ currHour }}:00</span>点场 倒计时
</div>
<div class="count-down" v-if="actStatus === 1">
<span>{{ hours }}</span
><span>{{ minutes }}</span
><span>{{ seconds }}</span>
</div>
<div class="act-status" v-else>
{{ actStatus == 0 ? "未开始" : "已结束" }}
</div>
</div>
<div class="section">
<swiper ref="mySwiper" :options="swiperOptions">
<swiper-slide
v-for="(item, index) in options.list[0].goodsList"
:key="index"
class="swiper-slide"
>
<div class="content hover-pointer" @click="goPromotion">
<img :src="item.img" width="140" height="140" :alt="item.name" />
<div class="ellipsis">{{ item.name }}</div>
<div>
<span>{{ item.price | unitPrice("￥") }}</span>
<span>{{ item.originalPrice | unitPrice("￥") }}</span>
</div>
</div>
</swiper-slide>
</swiper>
</div>
</div>
</template>
<script>
import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper';
import 'swiper/swiper-bundle.css';
export default {
components: {
Swiper,
SwiperSlide
},
directives: {
swiper: directive
},
props: {
data: {
type: Object,
default: null
}
},
data () {
return {
options: this.data.options, // 装修数据
actStatus: 0, // 0 未开始 1 进行中 2 已结束
actName: '限时秒杀', // 活动名称
currHour: '00', // 当前秒杀场
diffSeconds: 0, // 倒计时秒数
days: 0, // 天
hours: 0, // 小时
minutes: 0, // 分钟
seconds: 0, // 秒
interval: undefined, // 定时器
swiperOptions: { // 轮播图参数
slidesPerView: 5,
autoplay: true,
loop: true
}
};
},
watch: {
diffSeconds (val) {
const hours = Math.floor(val / 3600);
// 当前秒数 / 60，向下取整
// 获取到所有分钟数 3600 / 60 = 60分钟
// 对60取模，超过小时数的分钟数
const minutes = Math.floor(val / 60) % 60;
// 当前的秒数 % 60，获取到 超过小时数、分钟数的秒数（秒数）
const seconds = val % 60;
this.hours = hours < 10 ? '0' + hours : hours;
this.minutes = minutes < 10 ? '0' + minutes : minutes;
this.seconds = seconds < 10 ? '0' + seconds : seconds;
if (val === 0) {
clearInterval(this.interval);
this.hours = 0;
this.minutes = 0;
this.seconds = 0;
this.countDown(this.options.list);
}
}
},
mounted () {
this.countDown(this.options.list);
},
beforeDestroy () {
clearInterval(this.interval);
},
methods: {
// 倒计时
countDown (list) {
/**
* 默认倒计时两小时
* 如果没有开始，则显示未开始
* 进行中显示倒计时 + 时间
* 今天的秒杀结束则显示已结束
*/
let nowHour = new Date().getHours();
if (nowHour < Number(list[0].time)) {
// 活动未开始
this.currHour = list[0].time;
this.actStatus = 0;
} else if (nowHour >= Number(list[list.length - 1].time + 2)) {
// 活动已结束
this.actStatus = 2;
this.currHour = list[list.length - 1].time;
} else {
// 活动进行中
this.actStatus = 1;
for (let i = 0; i < list.length; i++) {
if (nowHour === Number(list[i].time)) {
this.currHour = list[i].time;
}
if (
nowHour > Number(list[i].time) &&
nowHour < Number(list[i].time + 2)
) {
this.currHour = list[i].time;
}
}
// 当前0点时间戳
let zeroTime = new Date(new Date().toLocaleDateString()).getTime();
// 活动倒计时
this.diffSeconds = Math.floor((zeroTime + 3600 * 1000 * (this.currHour + 2) - new Date().getTime()) / 1000);
this.interval = setInterval(() => {
this.diffSeconds--;
}, 1000);
}
},
goPromotion () {
let routeUrl = this.$router.resolve({
path: '/seckill'
});
window.open(routeUrl.href, '_blank');
}
}
};
</script>
<style lang="scss" scoped>
.seckill {
width: 100%;
height: 260px;
display: flex;
.aside {
overflow: hidden;
width: 190px;
height: 100%;
color: #fff;
background-image: url("../../../assets/images/seckillBg.png");
.title {
width: 100%;
text-align: center;
font-size: 28px;
margin-top: 31px;
}
.hour {
margin-top: 90px;
text-align: center;
span {
font-size: 18px;
}
}
.count-down {
margin: 10px 0 0 30px;
> span {
position: relative;
float: left;
width: 30px;
height: 30px;
text-align: center;
background-color: #2f3430;
margin-right: 20px;
color: white;
font-size: 20px;
&::after {
content: ":";
display: block;
position: absolute;
right: -20px;
font-weight: bolder;
font-size: 18px;
width: 20px;
height: 100%;
top: 0;
}
}
> span:last-child::after {
content: "";
}
}
.act-status {
margin: 10px 0 0 65px;
font-size: 20px;
}
}
.section {
width: 1000px;
// background: #efefef;
.swiper-slide {
height: 260px;
.content {
width: 200px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: relative;
&::after {
content: "";
display: block;
position: absolute;
top: 50%;
right: 0;
width: 1px;
height: 200px;
transform: translateY(-50%);
background: linear-gradient(180deg, white, #eeeeee, white);
}
img {
margin-top: 30px;
}
> div {
width: 160px;
margin-top: 10px;
font-size: 12px;
position: relative;
}
> div:nth-of-type(1):hover {
color: $theme_color;
cursor: pointer;
}
> div:nth-of-type(2) {
border: 1px solid $theme_color;
line-height: 24px;
display: flex;
text-align: center;
span:nth-child(1) {
color: #fff;
font-size: 16px;
width: 92px;
background-color: $theme_color;
position: relative;
&::before {
content: " ";
width: 0;
height: 0;
border-color: transparent white transparent transparent;
border-style: solid;
border-width: 24px 8px 0 0;
position: absolute;
top: 0;
left: 84px;
}
}
span:nth-child(2) {
color: #999;
width: 66px;
text-decoration: line-through;
}
}
}
}
}
}
.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>