|
@@ -1,41 +1,42 @@
|
|
<template>
|
|
<template>
|
|
- <view style="width: 100%;height: 100%;">
|
|
|
|
|
|
+ <view class="activity">
|
|
<u-navbar leftIconSize="0" :placeholder="true" bgColor="#ffffff">
|
|
<u-navbar leftIconSize="0" :placeholder="true" bgColor="#ffffff">
|
|
- <view class="u-nav-slot" slot="left">
|
|
|
|
- <u-tabs @change="changeTab" :scrollable="false" :list="statusArr" lineWidth="30" lineHeight="1"
|
|
|
|
- lineColor="#E96737" :activeStyle="{
|
|
|
|
- color: '#E96737',
|
|
|
|
- transform: 'scale(1)',
|
|
|
|
- width: '65px',
|
|
|
|
-
|
|
|
|
- }" :inactiveStyle="{
|
|
|
|
- color: '#333',
|
|
|
|
- transform: 'scale(1)',
|
|
|
|
- width: '65px'
|
|
|
|
- }" itemStyle="padding-left: 11px; padding-right: 11px; height: 44px;text-align: center;">
|
|
|
|
- </u-tabs>
|
|
|
|
- </view>
|
|
|
|
|
|
+ <view class="u-nav-slot" slot="left" style="font-size: 32rpx;">免费抽奖</view>
|
|
</u-navbar>
|
|
</u-navbar>
|
|
- <view class="list" style="padding: 0 10rpx;">
|
|
|
|
- <view v-for="(item,index) in list" :key="index" style="text-align: center;">
|
|
|
|
- <view class="" style="background-color: #FFFFFF;margin-bottom: 20rpx;">
|
|
|
|
- <view style="">
|
|
|
|
- <image :src="item.picUrl" mode="" style="width: 730rpx;height: 350rpx;"></image>
|
|
|
|
- </view>
|
|
|
|
- <view class="" style="width: 730rpx;height: 100rpx; margin: 0 auto;">
|
|
|
|
- <view style="text-align: left; float: left;">
|
|
|
|
- <view>活动名称:{{item.title}}</view>
|
|
|
|
- <view>开始时间:{{item.startTime}}</view>
|
|
|
|
|
|
+ <view class="u-nav-slot" slot="left" style="background-color: #ffffff;width: 100%;">
|
|
|
|
+ <u-tabs @change="changeTab" :scrollable="false" :list="statusArr" lineWidth="30" lineHeight="1"
|
|
|
|
+ lineColor="#E96737" :activeStyle="{
|
|
|
|
+ color: '#E96737',
|
|
|
|
+ transform: 'scale(1)',
|
|
|
|
+ width: '130rpx',
|
|
|
|
+
|
|
|
|
+ }" :inactiveStyle="{
|
|
|
|
+ color: '#999999',
|
|
|
|
+ transform: 'scale(1)',
|
|
|
|
+ width: '130rpx'
|
|
|
|
+ }" itemStyle="padding-left: 11px; padding-right: 11px; height: 44px;text-align: center; ">
|
|
|
|
+ </u-tabs>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="list">
|
|
|
|
+ <view v-for="(item,index) in list" :key="index" class="list-view">
|
|
|
|
+ <view class="list-view-slot">
|
|
|
|
+ <navigator :url="item.status.value == 4 ?`/packageOperate/activity/record?id=${ item.id }`:`/packageOperate/activity/index?id=${ item.id }`">
|
|
|
|
+ <view>
|
|
|
|
+ <image :src="item.picUrl" mode="" class="list-view-slot-img"></image>
|
|
</view>
|
|
</view>
|
|
- <view style="float: right;">
|
|
|
|
- <navigator :url="`/packageOperate/activity/index?id=${ item.id }`">
|
|
|
|
- <button v-if="item.status.value == 3"
|
|
|
|
- style="height: 65rpx;line-height: 65rpx;background-color:#901199;color: #fff;margin-top: 16rpx;">查看详情</button>
|
|
|
|
- <button v-else
|
|
|
|
- style="height: 65rpx;line-height: 65rpx;background-color:#901199;color: #fff;margin-top: 16rpx;">即将开始</button>
|
|
|
|
- </navigator>
|
|
|
|
|
|
+ <view class="list-view-slot-bor">
|
|
|
|
+ <view class="list-view-slot-bor-title">
|
|
|
|
+ <view class="time bor-title">{{item.title}}</view>
|
|
|
|
+ <view class="time" >开奖时间:{{ $parseTime(item.startTime, '{y}-{m}-{d} {h}:{i}:{s}')}}</view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="details">
|
|
|
|
+ <button class="details-button" v-if="item.status.value == 3" >查看详情</button>
|
|
|
|
+ <button class="details-buttonTwo" v-else-if="item.isHit == 0" >未中奖</button>
|
|
|
|
+ <button class="details-buttonTwo" v-else-if="item.isHit == 1">已中奖</button>
|
|
|
|
+ <button class="details-buttonTwo" v-else >即将开始</button>
|
|
|
|
+ </view>
|
|
</view>
|
|
</view>
|
|
- </view>
|
|
|
|
|
|
+ </navigator>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
</view>
|
|
</view>
|
|
@@ -56,10 +57,10 @@
|
|
return {
|
|
return {
|
|
list: [],
|
|
list: [],
|
|
statusArr: [{
|
|
statusArr: [{
|
|
- name: '待开奖'
|
|
|
|
|
|
+ name: '参与抽奖'
|
|
}, {
|
|
}, {
|
|
name: '已开奖',
|
|
name: '已开奖',
|
|
- }],
|
|
|
|
|
|
+ },{disabled: true},{disabled: true},{disabled: true}],
|
|
triggerStatus: 0,
|
|
triggerStatus: 0,
|
|
}
|
|
}
|
|
},
|
|
},
|
|
@@ -111,7 +112,73 @@
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
<style lang="scss" scoped>
|
|
- .list {}
|
|
|
|
|
|
+ .activity {
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 100%;
|
|
|
|
+ // 设置ios刘海屏底部横线安全区域
|
|
|
|
+ padding-bottom: constant(safe-area-inset-bottom);
|
|
|
|
+ padding-bottom: env(safe-area-inset-bottom);
|
|
|
|
+ }
|
|
|
|
+ .list {
|
|
|
|
+ padding: 0 20rpx;
|
|
|
|
+ &-view {
|
|
|
|
+ text-align: center;
|
|
|
|
+ height: 530rpx;
|
|
|
|
+ &-slot {
|
|
|
|
+ background-color: #FFFFFF;
|
|
|
|
+ // margin-bottom: 20rpx;
|
|
|
|
+ border-radius: 22rpx;
|
|
|
|
+ &-img {
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 370rpx;
|
|
|
|
+ border-radius: 22rpx 22rpx 0 0;
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ &-bor {
|
|
|
|
+ line-height: 50rpx;
|
|
|
|
+ width: 700rpx;
|
|
|
|
+ height: 120rpx;
|
|
|
|
+ margin: 0 auto;
|
|
|
|
+ padding:10rpx 20rpx 0 20rpx;
|
|
|
|
+ border-radius: 0 0 22rpx 22rpx ;
|
|
|
|
+ &-title {
|
|
|
|
+ text-align: left; float: left;
|
|
|
|
+ .time {
|
|
|
|
+ color: #333333;
|
|
|
|
+ }
|
|
|
|
+ .bor-title {
|
|
|
|
+ font-size: 34rpx;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .details {
|
|
|
|
+ float: right;
|
|
|
|
+ .details-button{
|
|
|
|
+ width: 200rpx;
|
|
|
|
+ height: 72rpx;
|
|
|
|
+ line-height: 72rpx;
|
|
|
|
+ background-color: #F9822C;
|
|
|
|
+ color: #fff;
|
|
|
|
+ margin-top: 18rpx;
|
|
|
|
+ font-size: 30rpx;
|
|
|
|
+ border-radius: 36rpx;
|
|
|
|
+ }
|
|
|
|
+ .details-buttonTwo{
|
|
|
|
+ width: 200rpx;
|
|
|
|
+ height: 72rpx;
|
|
|
|
+ line-height: 72rpx;
|
|
|
|
+ background-color: #BBBBBB;
|
|
|
|
+ color: #fff;
|
|
|
|
+ margin-top: 18rpx;
|
|
|
|
+ font-size: 30rpx;
|
|
|
|
+ border-radius: 36rpx;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
|
|
.empty {
|
|
.empty {
|
|
height: 60vh;
|
|
height: 60vh;
|