mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-uniapp.git
synced 2025-12-17 16:05:53 +08:00
优化楼层装修
This commit is contained in:
paulGao
49
pages/tabbar/home/template/tpl_notice.vue
Normal file
49
pages/tabbar/home/template/tpl_notice.vue
Normal file
@@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<div class="layout">
|
||||
<div class="background">
|
||||
<u-notice-bar mode="vertical" :bg-color="res.list[0].bk_color" :color="res.list[0].color" :list="list"></u-notice-bar>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
title: "公告",
|
||||
props: ["res"],
|
||||
data() {
|
||||
return {
|
||||
list: []
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.list = this.res.list[0].title.map(i => i.context);
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "./tpl.scss";
|
||||
.background {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
height: 84rpx;
|
||||
text-align: left;
|
||||
font-size: 20rpx;
|
||||
background-size: cover;
|
||||
}
|
||||
.layout {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
height: 84rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
background: #ffffff;
|
||||
}
|
||||
.title {
|
||||
line-height: 84rpx;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
271
pages/tabbar/home/template/tpl_promotions_detail.vue
Normal file
271
pages/tabbar/home/template/tpl_promotions_detail.vue
Normal file
@@ -0,0 +1,271 @@
|
||||
<template>
|
||||
<div class="layout">
|
||||
<div class="join-list">
|
||||
<div
|
||||
v-for="(item, index) in res.list"
|
||||
:key="index"
|
||||
class="join-list-item"
|
||||
@click="goToDetail(item.type)"
|
||||
>
|
||||
<div>
|
||||
<div class="join-title">
|
||||
<div>{{ item.title }}</div>
|
||||
<div
|
||||
class="sub"
|
||||
v-if="item.type !== 'SECKILL'"
|
||||
:style="{
|
||||
backgroundColor: item.bk_color,
|
||||
color: item.color1,
|
||||
borderColor: item.bk_color,
|
||||
}"
|
||||
>
|
||||
{{ item.title1 }}
|
||||
</div>
|
||||
<div class="sub-seckill" v-else>
|
||||
<div class="sub-seckill-block flex">
|
||||
<div class="sub-seckill-block-text">
|
||||
{{ timeLine[0] ? timeLine[0].timeLine : "x" }}点场
|
||||
</div>
|
||||
{{ times.hours == "00" ? "0" : times.hours }}:{{
|
||||
times.minutes
|
||||
}}:{{ times.seconds }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="join-box">
|
||||
<div
|
||||
class="join-item"
|
||||
v-for="(i, _index) in item.data"
|
||||
:key="_index"
|
||||
>
|
||||
<div class="item-img-box">
|
||||
<img
|
||||
class="item-img"
|
||||
:src="i.thumbnail ? i.thumbnail : i.goodsImage"
|
||||
alt
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ellipsis"
|
||||
:class="{ 'max-width': res.list.length <= 1 }"
|
||||
>
|
||||
{{ i.goodsName ? i.goodsName : i.name }}
|
||||
</div>
|
||||
<div class="item-price">
|
||||
<span>￥{{ i.price ? i.price : i.originalPrice }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import * as API_Promotions from "@/api/promotions";
|
||||
import Foundation from "@/utils/Foundation.js";
|
||||
export default {
|
||||
props: ["res"],
|
||||
data() {
|
||||
return {
|
||||
timeLine: "", //获取几个点活动
|
||||
resTime: 0, //当前时间
|
||||
time: 0, //距离下一个活动的时间值
|
||||
times: {}, //时间集合
|
||||
onlyOne: "", //是否最后一个商品
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
let params = {
|
||||
pageNumber: 1,
|
||||
pageSize: 2,
|
||||
status: "START",
|
||||
promotionStatus: "START",
|
||||
};
|
||||
this._setTimeInterval = setInterval(() => {
|
||||
if (this.time <= 0) {
|
||||
clearInterval(this._setTimeInterval);
|
||||
} else {
|
||||
this.times = Foundation.countTimeDown(this.time);
|
||||
this.time--;
|
||||
}
|
||||
}, 1000);
|
||||
this.res.list.forEach((ele) => {
|
||||
switch (ele.type) {
|
||||
case "PINTUAN":
|
||||
API_Promotions.getAssembleList(params).then((response) => {
|
||||
const data = response.data.result.records;
|
||||
if (data) {
|
||||
ele.data = data;
|
||||
}
|
||||
});
|
||||
break;
|
||||
case "SECKILL":
|
||||
API_Promotions.getSeckillTimeLine().then((response) => {
|
||||
if (response.data.success && response.data.result) {
|
||||
ele.data = response.data.result[0].seckillGoodsList.slice(0, 2);
|
||||
let timeLine = response.data.result.sort(
|
||||
(x, y) => Number(x.timeLine) - Number(y.timeLine)
|
||||
);
|
||||
this.timeLine = timeLine.slice(0, 5);
|
||||
this.resTime = parseInt(new Date().getTime() / 1000);
|
||||
this.onlyOne = response.data.result.length === 1;
|
||||
this.diffTime = parseInt(new Date().getTime() / 1000) - this.resTime;
|
||||
|
||||
this.time =
|
||||
this.timeLine[0].distanceStartTime ||
|
||||
(this.timeLine[1] && this.timeLine[1].distanceStartTime) ||
|
||||
Foundation.theNextDayTime() - this.diffTime;
|
||||
this.times = Foundation.countTimeDown(this.time);
|
||||
console.log(this.timeLine);
|
||||
}
|
||||
});
|
||||
break;
|
||||
case "LIVE":
|
||||
API_Promotions.getLiveList(params).then((response) => {
|
||||
if (response.success && response.result.records) {
|
||||
ele.data = response.result.records[0].commodityList.slice(0, 2);
|
||||
}
|
||||
});
|
||||
break;
|
||||
case "KANJIA":
|
||||
API_Promotions.getBargainList(params).then((response) => {
|
||||
if (response.success && response.result) {
|
||||
ele.data = response.result.records(0, 2);
|
||||
}
|
||||
});
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
//跳转详情
|
||||
goToDetail(type) {
|
||||
switch(type) {
|
||||
case "SECKILL":
|
||||
uni.navigateTo({
|
||||
url: `/pages/promotion/seckill`,
|
||||
});
|
||||
break;
|
||||
case "PINTUAN":
|
||||
uni.navigateTo({
|
||||
url: `/pages/promotion/joinGroup`,
|
||||
});
|
||||
break;
|
||||
case "LIVE":
|
||||
uni.navigateTo({
|
||||
url: `/pages/promotion/lives`,
|
||||
});
|
||||
break;
|
||||
case "KANJIA":
|
||||
uni.navigateTo({
|
||||
url: `/pages/promotion/bargain/list`,
|
||||
});
|
||||
break;
|
||||
};
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "./tpl.scss";
|
||||
.join-box {
|
||||
display: flex;
|
||||
}
|
||||
.join-list {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
}
|
||||
.join-list-item {
|
||||
flex: 1;
|
||||
}
|
||||
.ellipsis {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
width: 108rpx; // 大于1个活动
|
||||
font-size: 22rpx;
|
||||
}
|
||||
.max-width {
|
||||
width: 316rpx !important;
|
||||
}
|
||||
.item-price {
|
||||
> span {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #e1212b;
|
||||
}
|
||||
}
|
||||
.join-item {
|
||||
flex: 1;
|
||||
}
|
||||
.item-img {
|
||||
width: 150rpx;
|
||||
height: 150rpx;
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
}
|
||||
.item-img-box {
|
||||
position: relative;
|
||||
}
|
||||
.item-line-through {
|
||||
> span {
|
||||
font-size: 20rpx;
|
||||
font-weight: 400;
|
||||
text-decoration: line-through;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
.item-position-tips {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
color: #fff;
|
||||
font-size: 24rpx;
|
||||
bottom: 0;
|
||||
}
|
||||
.join-title {
|
||||
display: flex;
|
||||
|
||||
align-items: center;
|
||||
background: #fff;
|
||||
height: 100rpx;
|
||||
> div:nth-of-type(1) {
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
> div:nth-of-type(2) {
|
||||
font-size: 20rpx;
|
||||
line-height: 1.75;
|
||||
border-radius: 16rpx;
|
||||
text-align: center;
|
||||
padding: 0 16rpx;
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
.sub {
|
||||
background-color: #e1212b;
|
||||
margin-right: 80rpx;
|
||||
}
|
||||
.sub-seckill {
|
||||
white-space: nowrap;
|
||||
padding: 0 !important;
|
||||
}
|
||||
.sub-seckill-block {
|
||||
background: rgba($main-color, 0.3);
|
||||
border-radius: 100px !important;
|
||||
color: rgba($main-color, 0.7);
|
||||
overflow: hidden;
|
||||
padding-right: 8rpx;
|
||||
}
|
||||
.sub-seckill-block-text {
|
||||
background-color: $main-color;
|
||||
color: #fff;
|
||||
border-top-right-radius: 100px;
|
||||
border-bottom-right-radius: 100px;
|
||||
padding: 0 12rpx !important;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,13 +1,17 @@
|
||||
<template>
|
||||
<div class="layout">
|
||||
<div class="background">
|
||||
<div class="layout" :style="{textAlign: res.list[0].textAlign}">
|
||||
<div class="background" :style="{ backgroundColor: res.list[0].bk_color}">
|
||||
<div class="title" :style="{ color: res.list[0].color }">
|
||||
{{ res.list[0].title }}
|
||||
</div>
|
||||
<div style="position: absolute;right: 10px;top:2px;color: #fff;line-height: 42px;font-size: 10px">
|
||||
<a :href="res.list[0].url" :style="{ color: res.list[0].color1 }" style="text-decoration: none">{{ res.list[0].title1 }}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
export default {
|
||||
title: "标题栏",
|
||||
@@ -18,7 +22,7 @@ export default {
|
||||
<style lang="scss" scoped>
|
||||
@import "./tpl.scss";
|
||||
.background {
|
||||
background: url("/static/title.png") no-repeat;
|
||||
// background: url("/static/title.png") no-repeat;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
@@ -43,5 +47,6 @@ export default {
|
||||
line-height: 84rpx;
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user