You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
245 lines
6.5 KiB
245 lines
6.5 KiB
4 months ago
|
<template>
|
||
|
|
<view>
|
||
|
|
<view class="w-full bg-top h-518 relative" :style="{backgroundImage:headerBg}">
|
||
|
|
<view class="fixed-lt w-full z-20" :style="{'padding-top': sysHeight + 'px','background': pageScrollStatus ? '#e93323' : 'transparent'}">
|
||
|
|
<view class="w-full px-20 pl-20 h-80 flex-between-center">
|
||
|
|
<text class="iconfont icon-ic_leftarrow fs-40 text--w111-fff" @click="goBack"></text>
|
||
|
|
<text class="fs-34 fw-500 text--w111-fff">预售</text>
|
||
|
|
<text></text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="px-20">
|
||
|
|
<view class="bg--w111-fff rd-16rpx relative " style="top: -24rpx;">
|
||
|
|
<view class="w-full h-112 bg-primary-light nav-bg" :style="{backgroundImage:navBg}">
|
||
|
|
<view class="w-full flex-between-center pl-16 pr-16">
|
||
|
|
<text class="fs-26 text--w111-666 lh-36rpx pt-22 pb-22 pl-56 pr-56"
|
||
|
|
v-for="(item, index) in timeList" :key="index"
|
||
|
|
:class="active == index? 'active':''"
|
||
|
|
@tap="settimeList(item.key)">{{item.name}}</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="w-full pl-20 pr-20 pb-40" v-if="presellList.length">
|
||
|
|
<view class="w-full flex justify-between pro-item"
|
||
|
|
v-for="(item,index) in presellList" :key="index"
|
||
|
|
@tap="goDetails(item)">
|
||
|
|
<easy-loadimage
|
||
|
|
:image-src="item.image"
|
||
|
|
width="240rpx"
|
||
|
|
height="240rpx"
|
||
|
|
borderRadius="16rpx"></easy-loadimage>
|
||
|
|
<view class="flex-1 flex-col justify-between pl-20">
|
||
|
|
<view class="w-full">
|
||
|
|
<view class="w-full fs-28 h-80 lh-40rpx line2">{{item.store_name}}</view>
|
||
|
|
<view class="w-full flex items-end flex-wrap mt-16" v-if="item.store_label.length">
|
||
|
|
<BaseTag
|
||
|
|
:text="label.label_name"
|
||
|
|
:color="label.color"
|
||
|
|
:background="label.bg_color"
|
||
|
|
:borderColor="label.border_color"
|
||
|
|
:circle="label.border_color ? true : false"
|
||
|
|
:imgSrc="label.icon"
|
||
|
|
v-for="(label, idx) in item.store_label" :key="idx"></BaseTag>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="flex w-full h-68 rd-8rpx btn-bg relative" :class="active == 2 ? 'opacity' : ''">
|
||
|
|
<view class="flex-y-center pl-20 fs-22 btn-left ">
|
||
|
|
<baseMoney
|
||
|
|
:money="item.price"
|
||
|
|
symbolSize="26"
|
||
|
|
integerSize="40"
|
||
|
|
decimalSize="26"
|
||
|
|
weight
|
||
|
|
preFix="预售:"
|
||
|
|
preFixSize="22"
|
||
|
|
textColor="#e93323"
|
||
|
|
color="#e93323"></baseMoney>
|
||
|
|
</view>
|
||
|
|
<image src="../static/yushou1.png" class="btn-right" v-if="active == 0"></image>
|
||
|
|
<image src="../static/yushou2.png" class="btn-right" v-else-if="active == 1"></image>
|
||
|
|
<image src="../static/yushou3.png" class="btn-right" v-else="active == 2"></image>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class='px-20' v-else>
|
||
|
|
<emptyPage title="暂无预售商品，去看看其他商品吧～" src="/statics/images/noActivity.gif"></emptyPage>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
let sysHeight = uni.getSystemInfoSync().statusBarHeight;
|
||
|
|
import { getAdvancellList } from '@/api/activity';
|
||
|
|
import dayjs from '@/plugin/dayjs/dayjs.min.js';
|
||
|
|
import {HTTP_REQUEST_URL} from '@/config/app';
|
||
|
|
import emptyPage from '@/components/emptyPage.vue';
|
||
|
|
export default {
|
||
|
|
name: "presell",
|
||
|
|
filters: {
|
||
|
|
dateFormat: function(value) {
|
||
|
|
return dayjs(value * 1000).format('MM/DD HH:mm');
|
||
|
|
},
|
||
|
|
},
|
||
|
|
components:{ emptyPage },
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
sysHeight:sysHeight,
|
||
|
|
presellList: [],
|
||
|
|
timeList: [
|
||
|
|
{name: '未开始',key: 0},
|
||
|
|
{name: '正在进行',key: 1},
|
||
|
|
{name: '已结束',key: 2},
|
||
|
|
],
|
||
|
|
active: 1,
|
||
|
|
page: 1,
|
||
|
|
limit: 8,
|
||
|
|
loading: false,
|
||
|
|
loadend: false,
|
||
|
|
loadTitle: '加载更多',
|
||
|
|
picUrl: '', //头部图片
|
||
|
|
imgHost:HTTP_REQUEST_URL,
|
||
|
|
pageScrollStatus:false,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed:{
|
||
|
|
headerBg(){
|
||
|
|
return 'url('+this.imgHost+'/statics/images/product/product_presale_header.png'+')'
|
||
|
|
},
|
||
|
|
navBg(){
|
||
|
|
return 'url('+this.imgHost+'/statics/images/product/presell-bg-' + this.active +'.png'+')'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onPageScroll(object) {
|
||
|
|
if (object.scrollTop > 130) {
|
||
|
|
this.pageScrollStatus = true;
|
||
|
|
} else if (object.scrollTop < 130) {
|
||
|
|
this.pageScrollStatus = false;
|
||
|
|
}
|
||
|
|
uni.$emit('scroll');
|
||
|
|
},
|
||
|
|
onLoad() {
|
||
|
|
this.getPresellProductList();
|
||
|
|
},
|
||
|
|
onShow(){
|
||
|
|
uni.removeStorageSync('form_type_cart');
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
getPresellProductList: function() {
|
||
|
|
let that = this;
|
||
|
|
let data = {
|
||
|
|
page: that.page,
|
||
|
|
limit: that.limit,
|
||
|
|
time_type: that.active + 1
|
||
|
|
};
|
||
|
|
if (that.loading) return;
|
||
|
|
if (that.loadend) return;
|
||
|
|
that.loading = true;
|
||
|
|
that.loadTitle = '';
|
||
|
|
getAdvancellList(data).then(res => {
|
||
|
|
let list = res.data.list;
|
||
|
|
let loadend = list.length < that.limit;
|
||
|
|
that.presellList = that.$util.SplitArray(list, that.presellList);
|
||
|
|
that.$set(that, 'presellList', that.presellList);
|
||
|
|
that.loadend = loadend;
|
||
|
|
that.loadTitle = loadend ? '没有更多内容啦~' : '加载更多';
|
||
|
|
that.page = that.page + 1;
|
||
|
|
that.loading = false;
|
||
|
|
}).catch(err => {
|
||
|
|
that.loading = false;
|
||
|
|
that.loadTitle = '加载更多';
|
||
|
|
});
|
||
|
|
},
|
||
|
|
settimeList(key) {
|
||
|
|
let that = this;
|
||
|
|
that.active = key;
|
||
|
|
that.loadend = false;
|
||
|
|
that.page = 1;
|
||
|
|
that.presellList = [];
|
||
|
|
that.getPresellProductList();
|
||
|
|
},
|
||
|
|
goDetails(item) {
|
||
|
|
uni.navigateTo({
|
||
|
|
url: `/pages/activity/goods_details/index?id=${item.id}&type=6`
|
||
|
|
})
|
||
|
|
},
|
||
|
|
goBack(){
|
||
|
|
uni.navigateBack()
|
||
|
|
}
|
||
|
|
},
|
||
|
|
/**
|
||
|
|
* 页面上拉触底事件的处理函数
|
||
|
|
*/
|
||
|
|
onReachBottom: function() {
|
||
|
|
this.getPresellProductList();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<style>
|
||
|
|
page{
|
||
|
|
background: linear-gradient(270deg, #6D4ADC 0%, #7033D7 98%);
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<style lang="scss">
|
||
|
|
.bg-top{
|
||
|
|
background-size: 100% 100%;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
}
|
||
|
|
.bg-primary-light{
|
||
|
|
background-color: rgba(109, 74, 220, 0.1);
|
||
|
|
}
|
||
|
|
.nav-bg{
|
||
|
|
background-size: 100% 100%;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
}
|
||
|
|
.active{
|
||
|
|
font-size: 32rpx;
|
||
|
|
font-weight: 500;
|
||
|
|
line-height: 44rpx;
|
||
|
|
color: #7033D7;
|
||
|
|
}
|
||
|
|
.btn-bg{
|
||
|
|
background: rgba(233, 51, 35, 0.1);
|
||
|
|
}
|
||
|
|
.btn-left{
|
||
|
|
flex: 1;
|
||
|
|
border-radius: 8rpx 0 0 8rpx;
|
||
|
|
}
|
||
|
|
.btn-right{
|
||
|
|
width: 180rpx;
|
||
|
|
height: 68rpx;
|
||
|
|
}
|
||
|
|
.shandian{
|
||
|
|
width: 42rpx;
|
||
|
|
height: 68rpx;
|
||
|
|
position: absolute;
|
||
|
|
transform: scale(1.1);
|
||
|
|
left: 56%;
|
||
|
|
top: 1px;
|
||
|
|
}
|
||
|
|
.pro-item ~ .pro-item{
|
||
|
|
margin-top: 32rpx;
|
||
|
|
}
|
||
|
|
.border-label {
|
||
|
|
display: inline-flex;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
flex-wrap: nowrap;
|
||
|
|
height: 26rpx;
|
||
|
|
padding: 0 6rpx;
|
||
|
|
border: 1rpx solid #e93323;
|
||
|
|
border-radius: 6rpx;
|
||
|
|
font-size: 18rpx;
|
||
|
|
color: #e93323;
|
||
|
|
}
|
||
|
|
/deep/ .empty-box{
|
||
|
|
width: 100%;
|
||
|
|
height: 280px;
|
||
|
|
}
|
||
|
|
.opacity{
|
||
|
|
opacity: 0.5;
|
||
|
|
}
|
||
|
|
</style>
|