<template>
|
<view class="presale-product-wrap" :data-theme='theme()' :class="theme() || ''">
|
<!--活动广告-->
|
<view class="top-box">
|
<!-- 搜索框 -->
|
<view class="index-search-box d-b-c" id="searchBox">
|
<view class="index-search t-c flex-1">
|
<span class="icon iconfont icon-sousuo"></span>
|
<input type="text" v-model="searchForm" class="flex-1 ml10 f30 gray3" value=""
|
placeholder-class="f24 gray6" placeholder="输入你要的商品" confirm-type="search" @confirm="search()" />
|
</view>
|
<view class="f26" @click="gotoPage('/pages/order/myorder')">我的预定</view>
|
</view>
|
</view>
|
<view class="presale-list-wrap" v-if="!loading">
|
<scroll-view scroll-y="true" class="scroll-Y" :style="'height:' + scrollviewHigh + 'px;'"
|
lower-threshold="50" @scrolltolower="scrolltolowerFunc">
|
<view class="diy-banner-box pt20 mb20 pr square">
|
<swiper class="swiper" autoplay :interval="3000" :duration="500" @change="changeSwiper">
|
<swiper-item v-for="(item,index) in banner" :key="index" @click="gotoPages(item)">
|
<image :src="item.file_path"></image>
|
</swiper-item>
|
</swiper>
|
<view class="swiper-dots ww100 d-s-c square">
|
<view :class="current==index?'swiper-dot active':'swiper-dot'" v-for="(item,index) in banner"
|
:style="current==index?'background-color:#ffffff;':''" :key="index">
|
</view>
|
</view>
|
</view>
|
<!--活动类别-->
|
<!-- <view class="active-top-tab">
|
<scroll-view scroll-X="true" scroll-with-animation :scroll-into-view="'tab'+(type_active - 2)"
|
show-scrollbar="false" class="scroll-X mb30">
|
<view class="tab-list d-s-c">
|
<view class="logo" id="tab-2">
|
<image src="/static/presale.png" mode=""></image>
|
</view>
|
<view class="tab-item" id="tab-1">
|
<view class="actab-title">热卖中</view>
|
<view class="actab-status">不能错过 </view>
|
</view>
|
<view class="tab-item" :id="'tab'+index" :class="{ active: type_active == index }"
|
v-for="(item, index) in activeList" :key="index" @click="tabTypeFunc(index)">
|
<view class="actab-title">{{ item.title }}</view>
|
<view class="actab-status">即将开始</view>
|
</view>
|
</view>
|
</scroll-view>
|
</view> -->
|
<!--列表-->
|
<view class="list p-0-20">
|
<view class="item d-stretch" v-for="(item, index) in listData" :key="index">
|
<view class="product-cover">
|
<image :src="item.product_image" mode="aspectFit"></image>
|
</view>
|
<view class="d-b-c d-c flex-1 ml26">
|
<view class="product-title ww100">{{ item.product.product_name }}</view>
|
<view class="d-s-c ww100">
|
<Countdown ref="countdown" :color="'#999999'" :timeSize="'22rpx'"
|
:config="{startstamp: item.start_time,endstamp: item.end_time}"
|
@returnVal="returnValFunc"></Countdown>
|
</view>
|
<view class="ww100">
|
<text class="dj-text">定金:￥{{ item.money }}</text>
|
<text class="ml20 gray6 f20">尾款立减￥{{ item.sku[0].advance_price }}</text>
|
</view>
|
<view class="slider-box ww100 d-b-c">
|
<view>
|
<view class="f32 redF11"><text
|
class="f16 fb">￥</text>{{ (item.sku[0].product_price*1 - item.sku[0].advance_price*1).toFixed(2) }}
|
</view>
|
<view class="f20 gray9">预估到手价</view>
|
</view>
|
<view class="right-btn ml30"><button type="primary"
|
@click="gotoDetail(item.product.product_id)">抢购</button></view>
|
</view>
|
</view>
|
</view>
|
</view>
|
<!-- 没有记录 -->
|
<view class="d-c-c p30" v-if="listData.length == 0 && !loading">
|
<text class="iconfont icon-wushuju"></text>
|
<text class="cont">亲，暂无相关记录哦</text>
|
</view>
|
</scroll-view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import Countdown from '@/components/countdown/countdown-presale.vue';
|
export default {
|
components: {
|
Countdown
|
},
|
data() {
|
return {
|
current: 0,
|
banner: [],
|
/*手机高度*/
|
phoneHeight: 0,
|
/*可滚动视图区域高度*/
|
scrollviewHigh: 0,
|
/*活动列表*/
|
activeList: [],
|
/*当前活动角标*/
|
type_active: 0,
|
/*类别选中*/
|
currActive: {},
|
/*产品列表*/
|
listData: [],
|
/*当前页面*/
|
page: 1,
|
/*没有更多*/
|
no_more: false,
|
/*活动详情*/
|
detailData: {},
|
/*是否正在加载*/
|
loading: true,
|
/*倒计时配置*/
|
countdownConfig: {
|
/*开始时间*/
|
startstamp: 0,
|
/*结束时间*/
|
endstamp: 0
|
},
|
searchForm: ''
|
};
|
},
|
computed: {},
|
onLoad() {
|
this.getData();
|
},
|
mounted() {
|
this.init();
|
},
|
onPullDownRefresh() {},
|
methods: {
|
search() {
|
this.listData = [];
|
this.page = 1;
|
this.loading = true;
|
this.getData();
|
},
|
changeSwiper(e) {
|
this.current = e.detail.current;
|
},
|
/*初始化*/
|
init() {
|
let _this = this;
|
uni.getSystemInfo({
|
success(res) {
|
_this.phoneHeight = res.windowHeight;
|
// 计算组件的高度
|
let view = uni.createSelectorQuery().select('.top-box');
|
view.boundingClientRect(data => {
|
let h = _this.phoneHeight - data.height;
|
_this.scrollviewHigh = h;
|
}).exec();
|
}
|
});
|
},
|
|
/*类别切换*/
|
tabTypeFunc(e) {
|
this.type_active = e;
|
this.currActive = this.activeList[e];
|
this.getData();
|
},
|
goback() {
|
uni.navigateBack()
|
},
|
/*可滚动视图区域到底触发*/
|
scrolltolowerFunc() {
|
let self = this;
|
self.page++;
|
self.loading = true;
|
if (self.page > self.last_page) {
|
self.loading = false;
|
self.no_more = true;
|
return;
|
}
|
self.getData();
|
},
|
/*获取数据*/
|
getData() {
|
let self = this;
|
self.loading = true;
|
self._get(
|
'plus.advance.Product/index', {
|
search: self.searchForm,
|
page: self.page
|
},
|
function(res) {
|
self.banner = res.data.setting.image;
|
console.log(self.banner)
|
self.loading = false;
|
self.listData = self.listData.concat(res.data.list.data);
|
self.last_page = res.data.list.last_page;
|
if (res.data.list.last_page <= 1) {
|
self.no_more = true;
|
}
|
}
|
);
|
},
|
|
/*跳转产品详情*/
|
gotoDetail(e) {
|
// this.$refs.countdown.forEach(item=>{
|
// item.clear();
|
// })
|
this.gotoPage('/pages/product/detail/detail?product_id=' + e);
|
},
|
|
/*跳转搜索页面*/
|
gotoSearch() {
|
this.getData();
|
},
|
|
/*倒计时返回值*/
|
returnValFunc(e) {
|
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss">
|
page {
|
background-color: #F2F2F2;
|
}
|
|
.top-box {
|
position: relative;
|
}
|
|
.presale-product-wrap .tab-item {
|
flex: 0;
|
padding: 0 25rpx;
|
font-size: 33rpx;
|
height: 86rpx;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
flex-direction: column;
|
white-space: nowrap;
|
color: #333333;
|
}
|
|
.presale-product-wrap .logo {
|
width: 75rpx;
|
height: 69rpx;
|
margin-right: 18rpx;
|
padding-left: 24rpx;
|
flex-shrink: 0;
|
|
image {
|
width: 75rpx;
|
height: 69rpx;
|
}
|
}
|
|
.presale-product-wrap .tab-item .actab-title {
|
font-size: 30rpx;
|
font-weight: bold;
|
color: #333333;
|
}
|
|
.presale-product-wrap .tab-item .actab-status {
|
font-weight: bold;
|
color: #666666;
|
font-size: 17rpx;
|
height: 30rpx;
|
padding: 0 18rpx;
|
box-sizing: border-box;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
border-radius: 15rpx;
|
}
|
|
.presale-product-wrap .tab-item.active .actab-status {
|
background: linear-gradient(140deg, #F11E0B 0%, #F77737 100%);
|
color: #FFFFFF;
|
}
|
|
.presale-product-wrap .tab-item.active {
|
font-size: 30rpx;
|
opacity: 1;
|
position: relative;
|
margin-bottom: 0;
|
}
|
|
.presale-product-wrap .tab-item.active::after {
|
display: none;
|
}
|
|
.presale-product-wrap .tab-item .status1 {}
|
|
.presale-product-wrap .tab-item.active .status1 {
|
content: "";
|
width: 120rpx;
|
height: 4rpx;
|
background: linear-gradient(140deg, #F11E0B 0%, #F77737 100%);
|
border-radius: 2rpx;
|
position: absolute;
|
border: 30rpx;
|
|
}
|
|
.presale-product-wrap .every-day-time text {
|
padding: 8rpx 16rpx;
|
font-size: 26rpx;
|
color: #333;
|
opacity: 0.5;
|
}
|
|
.presale-product-wrap .ad-activity {
|
position: relative;
|
overflow: hidden;
|
}
|
|
.presale-product-wrap .ad-activity image {
|
width: 750rpx;
|
height: 367rpx;
|
border-radius: 12rpx;
|
}
|
|
.presale-list-wrap {}
|
|
.presale-list-wrap .list .item {
|
padding: 30rpx;
|
display: flex;
|
border-radius: 16rpx;
|
margin-bottom: 20rpx;
|
background: #ffffff;
|
}
|
|
.presale-list-wrap .product-cover,
|
.presale-list-wrap .product-cover image {
|
width: 212rpx;
|
height: 212rpx;
|
border-radius: 10rpx;
|
}
|
|
.active-top-tab .ad-datetime::v-deep .box {
|
height: 40rpx;
|
padding: 4rpx;
|
line-height: 40rpx;
|
text-align: center;
|
border-radius: 8rpx;
|
font-size: 28rpx;
|
background: #F6220C;
|
color: #FFFFFF;
|
}
|
|
.active-top-tab .ad-datetime::v-deep text {
|
color: #333;
|
font-size: 28rpx;
|
}
|
|
.presale-list-wrap .product-title {
|
display: -webkit-box;
|
overflow: hidden;
|
-webkit-line-clamp: 1;
|
-webkit-box-orient: vertical;
|
font-size: 24rpx;
|
}
|
|
.presale-list-wrap .already-sale {
|
padding: 4rpx 0;
|
color: #8228EB;
|
font-size: 22rpx;
|
}
|
|
.dj-text {
|
height: 31rpx;
|
background-color: rgba($color: #FF0000, $alpha: 0.2);
|
font-size: 20rpx;
|
padding: 0 18rpx;
|
color: #F11E0B;
|
border-radius: 15rpx;
|
}
|
|
.presale-list-wrap .right-btn button {
|
background: linear-gradient(140deg, #F11E0B 0%, #F77737 100%);
|
color: #ffffff;
|
height: 56rpx;
|
border-radius: 10rpx;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
padding: 0 33rpx;
|
}
|
|
.reg180 {
|
padding-right: 20rpx;
|
text-align: right;
|
transform: rotateY(180deg);
|
position: absolute;
|
bottom: 0;
|
}
|
|
.icon-jiantou {
|
color: #FFFFFF;
|
font-size: 30rpx;
|
}
|
|
.head_top {
|
position: absolute;
|
top: 0;
|
z-index: 20;
|
padding-top: var(--status-bar-height);
|
height: 30px;
|
line-height: 30px;
|
color: #FFFFFF;
|
font-size: 28rpx;
|
}
|
|
.tab-item.active::after {
|
content: '';
|
width: 60%;
|
height: 4rpx;
|
background: #F2F2F2;
|
border-radius: 2rpx;
|
position: absolute;
|
bottom: 5rpx;
|
}
|
|
.diy-banner-box {
|
overflow: hidden;
|
}
|
|
.diy-banner-box,
|
.diy-banner-box .swiper {
|
width: 750rpx;
|
|
/* background-color: #FFFFFF; */
|
}
|
|
.diy-banner-box image {
|
margin: 0 auto;
|
width: 702rpx;
|
height: 300rpx;
|
border-radius: 12rpx;
|
}
|
|
.diy-banner-box.square .swiper-dots {
|
position: absolute;
|
bottom: 20rpx;
|
left: 44rpx;
|
margin: auto;
|
}
|
|
.swiper-dots.square .swiper-dot {
|
width: 28rpx;
|
height: 6rpx;
|
border-radius: 3rpx;
|
margin: 0 4rpx;
|
background: #ffffff;
|
opacity: 0.4;
|
}
|
|
.swiper-dots.square .swiper-dot.active {
|
opacity: 0.8;
|
}
|
|
.index-search-box {
|
background-color: #FFFFFF;
|
|
.index-search {
|
height: 60rpx;
|
background: #FFFFFF;
|
border: 1rpx solid #DDDDDD;
|
border-radius: 30rpx;
|
margin-right: 15rpx;
|
}
|
}
|
</style>
|
