430 lines
10 KiB
Vue
430 lines
10 KiB
Vue
<template>
|
|
<view>
|
|
<view class="m-product-all">
|
|
<view class="m-tab">
|
|
<view class="m-navbar">
|
|
<view :class="'m-navbar-item ' + (tapindex==1?'m-navbar-item-on':'')" @click="groupLists">
|
|
{{__('进行中')}}
|
|
</view>
|
|
<view :class="'m-navbar-item ' + (tapindex==2?'m-navbar-item-on':'')" @click="toBeGroupLists">
|
|
{{__('即将开始')}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view :class="(tapindex==1?'':'hide')" style="font-size:28rpx;">
|
|
<scroll-view scroll-y="true" v-if="(pdlist.length>0)" class="m-orderlist" @scrolltolower="scrollbottom" style="width:100%;height:100%;position:absolute;padding-top:80rpx;box-sizing: border-box;">
|
|
<block v-for="(item, i) in pdlist" :key="i">
|
|
|
|
<navigator :url="(item.activity_type==2 ? '/activity/smashgoldeneggs/detail?activity_id=' : '/activity/luckydraw/detail?activity_id=') + (item.activity_id)" class="m-product-item m-product-GP">
|
|
<view class="m-product-img">
|
|
<image lazy-load :src="(item.activity_rule.lottery_image)" />
|
|
</view>
|
|
<view class="m-product-info">
|
|
<view class="m-product-name">
|
|
<label><text class='u-tuan-label'>{{(item.activity_type==2 ? '砸' : '幸')}}</text>{{item.activity_name}}</label>
|
|
<view class="groupNumber">
|
|
</view>
|
|
</view>
|
|
<view class="m-product-price" style='font-size:38rpx'>
|
|
<label><day-countdown :timer="(item.activity_endtime)" :Type="1"></day-countdown></label>
|
|
<button class="u-btn u-btn-default">{{__('立即参与')}}</button>
|
|
</view>
|
|
</view>
|
|
</navigator>
|
|
</block>
|
|
<view class="m-loading-box">
|
|
<block v-if="(ispage)">
|
|
<view class="u-loadmore">
|
|
<label class="u-loading"></label>
|
|
<text class="u-loadmore-tips">{{__('正在加载')}}</text>
|
|
</view>
|
|
</block>
|
|
<block v-else>
|
|
<view class="u-loadmore u-loadmore-line">
|
|
<text class="u-loadmore-tips">{{__('没有更多数据啦！')}}</text>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
</scroll-view>
|
|
<view redirect="true" class="m-nullpage" v-else>
|
|
<view class="m-nullpage-middle">
|
|
<view class="m-null-tip">
|
|
<text>{{__('亲，活动正在准备中~')}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view :class="(tapindex==2?'':'hide')" style="font-size:28rpx">
|
|
<scroll-view scroll-y="true" v-if="(fglist.length>0)" class="m-orderlist" @scrolltolower="scrollbottomtwo" style="width:100%;height:100%;position:absolute;padding-top:66rpx;box-sizing: border-box;">
|
|
<block v-for="(item , i) in fglist" :key="i">
|
|
<view class="m-product-item m-product-GP">
|
|
<view class="m-product-img">
|
|
<image lazy-load :src="(item.activity_rule.product_image)" />
|
|
</view>
|
|
<view class="m-product-info">
|
|
<view class="m-product-name">
|
|
<label><text class='u-tuan-label'>拼</text>{{item.activity_rule.item_name}}</label>
|
|
<view class="groupNumber">
|
|
<day-countdown :timer="(item.activity_endtime)" :Type="0"></day-countdown>
|
|
</view>
|
|
</view>
|
|
<view class="m-product-price">
|
|
<label>{{__('￥')}}</label>{{item.activity_rule.group_sale_price}}
|
|
<label class="u-del-price">{{__('￥')}}{{item.activity_rule.item_unit_price}}</label>
|
|
<button class="u-btn u-btn-default" style='background:#bdbdbd'>{{__('立即开团')}}</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
<view class="m-loading-box">
|
|
<block v-if="(ispage1)">
|
|
<view class="u-loadmore">
|
|
<label class="u-loading"></label>
|
|
<text class="u-loadmore-tips">{{__('正在加载')}}</text>
|
|
</view>
|
|
</block>
|
|
<block v-else>
|
|
<view class="u-loadmore u-loadmore-line">
|
|
<text class="u-loadmore-tips">{{__('没有更多数据啦！')}}</text>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
</scroll-view>
|
|
<view redirect="true" class="m-nullpage" v-else>
|
|
<view class="m-nullpage-middle">
|
|
<view class="m-null-tip">
|
|
<text>{{__('亲，活动正在准备中~')}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import $ from "../../helpers/util";
|
|
|
|
import dayCountdown from "../../components/day-countdown.vue";
|
|
|
|
import {
|
|
mapState,
|
|
mapMutations
|
|
} from 'vuex'
|
|
|
|
export default {
|
|
data: function() {
|
|
return {
|
|
viewtype: 0,
|
|
pdlist: [],
|
|
fglist: [],
|
|
flag: true,
|
|
ispage: true,
|
|
scposition: "",
|
|
page: 1,
|
|
istop: false,
|
|
isdata: false,
|
|
tapindex: 1,
|
|
activity_state: 1
|
|
}
|
|
},
|
|
components: {
|
|
dayCountdown
|
|
},
|
|
computed: mapState(['Config', 'StateCode', 'notice', 'plantformInfo', 'shopInfo', 'userInfo', 'hasLogin']),
|
|
onLoad: function(options) {
|
|
uni.setNavigationBarTitle({
|
|
title: this.__('抽奖活动')
|
|
});
|
|
|
|
this.InitData()
|
|
},
|
|
methods: {
|
|
...mapMutations(['login', 'logout', 'getPlantformInfo', 'forceUserInfo', 'getUserInfo']),
|
|
|
|
InitData: function() {
|
|
var that = this;
|
|
that.setData({
|
|
pdlist: []
|
|
});
|
|
var params = {
|
|
//store_id : this.shopInfo.store_id,
|
|
activity_type_id: this.StateCode.ACTIVITY_TYPE_LOTTERY,
|
|
activity_state: this.activity_state,
|
|
page: this.page
|
|
};
|
|
$.request({
|
|
url: this.Config.URL.store.activity,
|
|
data: params,
|
|
success: function(data, status, msg, code) {
|
|
if (200 == status && data.items.length > 0) {
|
|
var $now = (new Date).getTime();
|
|
data.items.forEach(function(v, k) {
|
|
var $end = (new Date(v.activity_endtime.replace(/-/g, "/"))).getTime();
|
|
data.items[k].Time = $end - $now;
|
|
})
|
|
if (data.page >= data.total) {
|
|
that.setData({
|
|
flag: false,
|
|
ispage: false,
|
|
isdata: true,
|
|
pdlist: that.pdlist.concat(data.items)
|
|
});
|
|
} else {
|
|
that.setData({
|
|
flag: true,
|
|
ispage: true,
|
|
isdata: true,
|
|
pdlist: that.pdlist.concat(data.items)
|
|
});
|
|
}
|
|
} else {
|
|
that.setData({
|
|
flag: false,
|
|
ispage: false,
|
|
isdata: false
|
|
});
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
},
|
|
groupLists: function() {
|
|
this.setData({
|
|
tapindex: 1,
|
|
page: 1,
|
|
rows: 10,
|
|
orderlist: [],
|
|
activity_state: this.StateCode.ACTIVITY_STATE_NORMAL
|
|
}), this.InitData()
|
|
},
|
|
toBeGroupLists: function() {
|
|
this.setData({
|
|
tapindex: 2,
|
|
page: 1,
|
|
rows: 10,
|
|
orderlist: [],
|
|
activity_state: this.StateCode.ACTIVITY_STATE_WAITING
|
|
}), this.InitPaging()
|
|
},
|
|
//saas,调用当前参与的团
|
|
InitPaging: function() {
|
|
|
|
var params = {
|
|
store_id: this.shopInfo.store_id,
|
|
activity_type_id: this.StateCode.ACTIVITY_TYPE_GROUPBOOKING,
|
|
activity_state: this.activity_state,
|
|
page: this.page
|
|
};
|
|
var that = this;
|
|
|
|
$.request({
|
|
url: this.Config.URL.store.activity,
|
|
data: params,
|
|
success: function(data, status, msg, code) {
|
|
if (200 == status && data.items.length > 0) {
|
|
var $now = (new Date).getTime();
|
|
data.items.forEach(function(v, k) {
|
|
var $end = (new Date(v.activity_endtime.replace(/-/g, "/"))).getTime();
|
|
data.items[k].Time = $end - $now;
|
|
})
|
|
if (data.page >= data.total) {
|
|
that.setData({
|
|
flag: false,
|
|
ispage: false,
|
|
isdata: true,
|
|
fglist: that.fglist.concat(data.items)
|
|
})
|
|
} else {
|
|
that.setData({
|
|
flag: true,
|
|
ispage: true,
|
|
isdata: true,
|
|
fglist: that.fglist.concat(data.items)
|
|
})
|
|
}
|
|
} else {
|
|
that.setData({
|
|
flag: false,
|
|
ispage: false,
|
|
isdata: false,
|
|
})
|
|
}
|
|
}
|
|
});
|
|
},
|
|
viewType: function(e) {
|
|
this.viewtype == 0 ? this.setData({
|
|
viewtype: 1
|
|
}) : this.setData({
|
|
viewtype: 0
|
|
})
|
|
},
|
|
scrollbottom: function(e) {
|
|
var that = this;
|
|
if (this.flag) {
|
|
e.setData({
|
|
flag: false
|
|
}), clearTimeout(n);
|
|
var n = setTimeout(function() {
|
|
that.setData({
|
|
page: parseInt(that.page) + 1
|
|
});
|
|
if (that.activity_state == that.StateCode.ACTIVITY_STATE_NORMAL) {
|
|
this.InitData();
|
|
}
|
|
if (that.activity_state == that.StateCode.ACTIVITY_STATE_WAITING) {
|
|
this.InitPaging();
|
|
}
|
|
},
|
|
500);
|
|
}
|
|
},
|
|
returnTop: function() {
|
|
this.setData({
|
|
scposition: 0
|
|
})
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss">
|
|
@import "../../styles/_variables";
|
|
|
|
/*全部商品 start*/
|
|
.groupNumber {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
font-size: 24rpx;
|
|
color: #db384c;
|
|
background: #fbebeb;
|
|
text-align: center;
|
|
padding: 0 10rpx
|
|
}
|
|
|
|
.groupNumber .icon-icon {
|
|
font-size: 24rpx;
|
|
display: inline
|
|
}
|
|
|
|
.groupNumber text {
|
|
color: #ffc001;
|
|
margin: 0 2rpx
|
|
}
|
|
|
|
.progressBarBox {
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 0;
|
|
color: #888;
|
|
font-size: 24rpx;
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
.u-progressBar {
|
|
display: inline-block;
|
|
width: 140rpx;
|
|
height: 20rpx;
|
|
background-color: #d5d5d5;
|
|
border-radius: 20rpx;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.u-progressBar-cont {
|
|
height: 20rpx;
|
|
background-color: #ffc001;
|
|
}
|
|
|
|
.m-product-price .u-btn {
|
|
padding: 0;
|
|
margin: 0 20rpx;
|
|
width: 160rpx;
|
|
float: right;
|
|
font-size: 24rpx;
|
|
line-height: 50rpx;
|
|
margin-top: 10rpx;
|
|
}
|
|
|
|
.m-product-GP {
|
|
height: 232rpx;
|
|
}
|
|
|
|
.m-product-GP .m-product-img {
|
|
height: 223rpx;
|
|
width: 223rpx;
|
|
}
|
|
|
|
.m-product-GP .m-product-price {
|
|
line-height: 80rpx;
|
|
margin-top: 5rpx;
|
|
}
|
|
|
|
.m-product-GP .m-product-info {
|
|
height: 232rpx;
|
|
width: 518rpx;
|
|
}
|
|
|
|
.u-del-price {
|
|
color: #888888;
|
|
font-size: 20rpx;
|
|
text-decoration: line-through;
|
|
}
|
|
|
|
/*全部商品 end*/
|
|
/*顶部提示*/
|
|
.u-toptip {
|
|
height: 60rpx;
|
|
}
|
|
|
|
.u-toptip .u-loadmore {
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
position: relative;
|
|
top: 20rpx;
|
|
}
|
|
|
|
/*顶部提示*/
|
|
.m-navbar-item {
|
|
padding: 20rpx 0;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.m-navbar-item:after {
|
|
border: none;
|
|
}
|
|
|
|
.m-navbar-item.m-navbar-item-on {
|
|
background-color: #fff;
|
|
color: #DB384C;
|
|
}
|
|
|
|
.m-navbar-item.m-navbar-item-on::before {
|
|
content: " ";
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
height: 6rpx;
|
|
border-bottom: 6rpx solid #DB384C;
|
|
color: #CCCCCC;
|
|
-webkit-transform-origin: 0 100%;
|
|
transform-origin: 0 100%;
|
|
-webkit-transform: scaleY(0.5);
|
|
transform: scaleY(0.5);
|
|
z-index: 3;
|
|
}
|
|
|
|
.m-tab {
|
|
position: fixed;
|
|
width: 100%;
|
|
top: var(--window-top);
|
|
z-index: 999;
|
|
}
|
|
</style> |