479 lines
11 KiB
Vue
479 lines
11 KiB
Vue
<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" @click="gotoDetail(item.product.product_id)">
|
||
<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">抢购</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>
|