优化楼层装修
paulGao
parent
4ed3832a5f
commit
14d12d90e3
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,12 @@
|
|||
<!-- uni 中不能使用 vue component 所以用if判断每个组件 -->
|
||||
<div v-for="(item, index) in pageData.list" :key="index">
|
||||
<!-- 搜索栏，如果在楼层装修顶部则会自动浮动，否则不浮动 -->
|
||||
<u-navbar class="navbar" v-if="item.type == 'search'" :is-back="false" :is-fixed="index ===1 ? false : true">
|
||||
<u-navbar
|
||||
class="navbar"
|
||||
v-if="item.type == 'search'"
|
||||
:is-back="false"
|
||||
:is-fixed="index === 1 ? false : true"
|
||||
>
|
||||
<search style="width: 100%" :res="item.options" />
|
||||
<!-- #ifndef H5 -->
|
||||
<!-- 扫码功能 不兼容h5 详情文档: https://uniapp.dcloud.io/api/system/barcode?id=scancode -->
|
||||
|
|
@ -14,10 +19,22 @@
|
|||
</u-navbar>
|
||||
<carousel v-if="item.type == 'carousel'" :res="item.options" />
|
||||
<titleLayout v-if="item.type == 'title'" :res="item.options" />
|
||||
<leftOneRightTwo v-if="item.type == 'leftOneRightTwo'" :res="item.options" />
|
||||
<leftTwoRightOne v-if="item.type == 'leftTwoRightOne'" :res="item.options" />
|
||||
<topOneBottomTwo v-if="item.type == 'topOneBottomTwo'" :res="item.options" />
|
||||
<topTwoBottomOne v-if="item.type == 'topTwoBottomOne'" :res="item.options" />
|
||||
<leftOneRightTwo
|
||||
v-if="item.type == 'leftOneRightTwo'"
|
||||
:res="item.options"
|
||||
/>
|
||||
<leftTwoRightOne
|
||||
v-if="item.type == 'leftTwoRightOne'"
|
||||
:res="item.options"
|
||||
/>
|
||||
<topOneBottomTwo
|
||||
v-if="item.type == 'topOneBottomTwo'"
|
||||
:res="item.options"
|
||||
/>
|
||||
<topTwoBottomOne
|
||||
v-if="item.type == 'topTwoBottomOne'"
|
||||
:res="item.options"
|
||||
/>
|
||||
<flexThree v-if="item.type == 'flexThree'" :res="item.options" />
|
||||
<flexFive v-if="item.type == 'flexFive'" :res="item.options" />
|
||||
<flexFour v-if="item.type == 'flexFour'" :res="item.options" />
|
||||
|
|
@ -25,14 +42,13 @@
|
|||
<textPicture v-if="item.type == 'textPicture'" :res="item.options" />
|
||||
<menuLayout v-if="item.type == 'menu'" :res="item.options" />
|
||||
<flexOne v-if="item.type == 'flexOne'" :res="item.options" />
|
||||
|
||||
<goods v-if="item.type == 'goods'" :res="item.options" />
|
||||
|
||||
<group v-if="item.type == 'group'" :res="item.options" />
|
||||
<notice v-if="item.type == 'notice'" :res="item.options" />
|
||||
<promotions v-if="item.type == 'promotionDetail'" :res="item.options" />
|
||||
<!-- <joinGroup v-if="item.type == 'joinGroup'" :res="item.options" /> -->
|
||||
<!-- <integral v-if="item.type == 'integral'" :res="item.options" /> -->
|
||||
<!-- <spike v-if="item.type == 'spike'" :res="item.options" /> -->
|
||||
|
||||
</div>
|
||||
<u-no-network></u-no-network>
|
||||
</div>
|
||||
|
|
@ -60,10 +76,8 @@ import tpl_goods from "@/pages/tabbar/home/template/tpl_goods"; //商品分类
|
|||
import { getFloorData } from "@/api/home"; //获取楼层装修接口
|
||||
import permision from "@/js_sdk/wa-permission/permission.js"; //权限工具类
|
||||
import config from "@/config/config";
|
||||
// TODO 后续开发
|
||||
// import tpl_join_group from "@/pages/tabbar/home/template/tpl_join_group";
|
||||
// import tpl_integral from "@/pages/tabbar/home/template/tpl_integral";
|
||||
// import tpl_spike from "@/pages/tabbar/home/template/tpl_spike";
|
||||
import tpl_notice from "@/pages/tabbar/home/template/tpl_notice"; //标题栏模块
|
||||
import tpl_promotions from "@/pages/tabbar/home/template/tpl_promotions_detail"; //标题栏模块
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -90,9 +104,8 @@ export default {
|
|||
flexOne: tpl_flex_one,
|
||||
goods: tpl_goods,
|
||||
group: tpl_group,
|
||||
// spike: tpl_spike,
|
||||
// joinGroup: tpl_join_group,
|
||||
// integral: tpl_integral,
|
||||
notice: tpl_notice,
|
||||
promotions: tpl_promotions,
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
|
@ -131,7 +144,7 @@ export default {
|
|||
|
||||
// WX_CODE 为小程序码
|
||||
if (res.scanType == "WX_CODE") {
|
||||
console.log(res)
|
||||
console.log(res);
|
||||
uni.navigateTo({
|
||||
url: `/${res.path}`,
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue