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.
300 lines
7.2 KiB
300 lines
7.2 KiB
<template>
|
|
<view class="presale" :id="`presale${styleIndex}`">
|
|
<view class="presale-hd">
|
|
<image v-if="styleIndex > 0" :src="`${$picUrl}/static/news/banner${styleIndex}.png`" class="banner"></image>
|
|
<view class="rule" @click="openPage()">规则</view>
|
|
</view>
|
|
<view class="presale-bd">
|
|
<view class="tab">
|
|
<u-tabs :list="menuList" :is-scroll="true" :show-bar="false" active-color="#222222"
|
|
bg-color="rgba(255,255,255,0)" inactive-color="#C3BCB4" v-model="current"
|
|
@change='onChosed'></u-tabs>
|
|
</view>
|
|
<view class="title">
|
|
<image :src="`${$picUrl}/static/news/newPresale${styleIndex}${styleIndex > 0 ? '' : '-1'}.png`"></image>
|
|
正在进行中
|
|
<image :src="`${$picUrl}/static/news/newPresale${styleIndex}${styleIndex > 0 ? '' : '-1'}.png`"></image>
|
|
</view>
|
|
<view class="list" :isLoading="isLoading">
|
|
<view class="item" v-for="(item,index) in goodList" :key="index" @click="goPre(item)">
|
|
<image class="pic" :src="item.image" mode="widthFix"></image>
|
|
<view class="info">
|
|
<view class="t">{{item.goods_name}}</view>
|
|
<view class="d">
|
|
<u-count-down :timestamp="item.end_time*1000" format="HH:mm:ss"></u-count-down>
|
|
<text>后失效</text>
|
|
</view>
|
|
<view class="p">
|
|
<image :src="$picUrl+'/static/news/newPresale-2.png'"></image>
|
|
<view class="s">预约价¥{{item.goods_price_min?Number(item.goods_price_min):''}}</view>
|
|
<view class="n">去预约</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view style="margin-top: 250rpx;" v-if="goodList.length==0">
|
|
<u-empty text="暂无信息" mode="list">
|
|
</u-empty>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import * as Api from '@/api/activity'
|
|
export default {
|
|
data() {
|
|
return {
|
|
timestamp: '',
|
|
current: 0,
|
|
isLoading: true,
|
|
goodList: [],
|
|
menuList: [],
|
|
info: ''
|
|
}
|
|
},
|
|
computed: {
|
|
styleIndex() {
|
|
const index = uni.getStorageSync('styleIndex') || '';
|
|
return index;
|
|
},
|
|
},
|
|
/**
|
|
* 生命周期函数--监听页面显示
|
|
*/
|
|
onShow(options) {
|
|
this.getListCharts()
|
|
},
|
|
methods: {
|
|
goPre(item) {
|
|
uni.navigateTo({
|
|
url: '/pages/goods/detail?goodsId=' + item.goods_id + '&isPre=' + true + '&pre_id=' + this.info
|
|
.id + '&isBuy=' + this.info.end_time
|
|
})
|
|
},
|
|
openPage() {
|
|
uni.navigateTo({
|
|
url: '/pages/activity/presaleRule?type=5'
|
|
})
|
|
},
|
|
getListgoodData(categoryId) {
|
|
let app = this;
|
|
let pamars = {
|
|
category_id: categoryId?categoryId:"",
|
|
}
|
|
Api.presaleGoodsList(pamars)
|
|
.then(result => {
|
|
app.goodList = result.data.list ||[];
|
|
})
|
|
.finally(() => app.isLoading = false)
|
|
},
|
|
onChosed(index) {
|
|
let app = this;
|
|
app.current = index;
|
|
app.getListgoodData(app.menuList[index].category_id)
|
|
},
|
|
beginTime(end) {
|
|
const now = new Date();
|
|
const year = now.getFullYear();
|
|
const month = now.getMonth() + 1;
|
|
const day = now.getDate();
|
|
const hour = now.getHours();
|
|
const minute = now.getMinutes();
|
|
const second = now.getSeconds();
|
|
let start = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second
|
|
return (Date.parse(end.replace(/-/g, '/')) - Date.parse(start.replace(/-/g, '/')))
|
|
},
|
|
// 分类
|
|
getListCharts() {
|
|
let app = this
|
|
app.menuList = []
|
|
let pamars = {
|
|
|
|
}
|
|
Api.presaleCateList(pamars)
|
|
.then(result => {
|
|
app.timestamp = this.beginTime(result.data.info.p_time);
|
|
app.info = result.data.info
|
|
app.menuList = result.data.category;
|
|
if(result.data.category && result.data.category.length > 0) {
|
|
app.getListgoodData(result.data.category[0].category_id)
|
|
}else{
|
|
app.getListgoodData()
|
|
}
|
|
|
|
})
|
|
.finally(() => app.isLoading = false)
|
|
},
|
|
goDetail(orderId) {
|
|
uni.navigateTo({
|
|
url: '/pages/goods/detail?goodsId=' + orderId
|
|
})
|
|
},
|
|
goDetailMore(categoryId, name) {
|
|
uni.navigateTo({
|
|
url: '/pages/activity/charts?categoryId=' + categoryId + '&name=' + name
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import './presaleStyle.scss';
|
|
.presale {
|
|
background-image: linear-gradient(#ffeaed,#f6f6f6);
|
|
.presale-img{text-align: center;}
|
|
.presale-img image{height:380rpx;width:750rpx;}
|
|
// background: #ff7b79 url(https://www.royaum.com.cn/static/news/newPresale-bg.png) center top no-repeat;
|
|
// background-size: 100% auto;
|
|
overflow: hidden;
|
|
min-height: 100vh;
|
|
|
|
&-hd {
|
|
position: relative;
|
|
height: 460rpx;
|
|
.banner {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
.rule {
|
|
right: 0;
|
|
top: 74rpx;
|
|
z-index: 999;
|
|
width: 100rpx;
|
|
height: 60rpx;
|
|
background-color: rgba(0, 0, 0, 0.3);
|
|
font-size: 24rpx;
|
|
font-weight: 400;
|
|
color: #FFFFFF;
|
|
line-height: 60rpx;
|
|
text-align: center;
|
|
position: absolute;
|
|
border-radius: 50rpx 0 0 50rpx;
|
|
}
|
|
}
|
|
|
|
&-bd {
|
|
width: 678rpx;
|
|
margin: 0 auto;
|
|
padding-bottom: 30rpx;
|
|
margin-top: 20rpx;
|
|
|
|
.title {
|
|
width: 100%;
|
|
height: 90rpx;
|
|
font-size: 28rpx;
|
|
font-weight: 500;
|
|
color: #222222;
|
|
border-radius: 10rpx;
|
|
border: 1px solid #838992;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 24rpx;
|
|
|
|
image {
|
|
width: 71rpx;
|
|
height: 30rpx;
|
|
margin: 0 50rpx;
|
|
}
|
|
}
|
|
|
|
.list {
|
|
background-color: #fff;
|
|
border-radius: 0 0 12rpx 12rpx;
|
|
overflow: hidden;
|
|
|
|
.item {
|
|
padding: 45rpx 40rpx 45rpx 30rpx;
|
|
overflow: hidden;
|
|
border-top: 1px solid #F1F1F1;
|
|
|
|
&:first-child {
|
|
border-top-color: #fff;
|
|
}
|
|
|
|
display: flex;
|
|
|
|
image {
|
|
width: 220rpx;
|
|
height: 220rpx;
|
|
margin-right: 30rpx;
|
|
}
|
|
|
|
.info {
|
|
flex: 1;
|
|
max-width: 400rpx;
|
|
|
|
.t {
|
|
height: 80rpx;
|
|
line-height: 40rpx;
|
|
font-size: 32rpx;
|
|
font-weight: 500;
|
|
color: #626262;
|
|
word-break: break-all;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
}
|
|
|
|
.d {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 44rpx;
|
|
font-size: 32rpx;
|
|
font-weight: 500;
|
|
color: #F94021;
|
|
|
|
text {
|
|
color: #9E9E9E;
|
|
margin-left: 15rpx;
|
|
}
|
|
}
|
|
|
|
.p {
|
|
width: 396rpx;
|
|
height: 88rpx;
|
|
position: relative;
|
|
|
|
image {
|
|
width: 396rpx;
|
|
height: 88rpx;
|
|
}
|
|
|
|
.s {
|
|
width: 240rpx;
|
|
line-height: 88rpx;
|
|
position: absolute;
|
|
text-align: center;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: 2;
|
|
font-size: 32rpx;
|
|
font-weight: 500;
|
|
color: #FF584D;
|
|
}
|
|
|
|
.n {
|
|
width: 150rpx;
|
|
line-height: 88rpx;
|
|
text-align: center;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
z-index: 2;
|
|
font-size: 32rpx;
|
|
font-weight: 500;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|