|
|
@@ -13,58 +13,41 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
- <!-- 搜索 -->
|
|
|
- <view class="searchBoxBg">
|
|
|
- <searchBox placeholder="手机号、车牌号、姓名、客户单位" @search='search($event)'></searchBox>
|
|
|
- </view>
|
|
|
+
|
|
|
|
|
|
- <view class="boxstate">
|
|
|
- <view class="typeBox">
|
|
|
- <view class="type" @click="changeType" v-if="selectTab==0">核销状态</view>
|
|
|
- <view class="type" @click="changeType" v-if="selectTab==1">未核销</view>
|
|
|
- <view class="type" @click="changeType" v-if="selectTab==3">已核销</view>
|
|
|
- <image src="../../static/img/arrow_down.png" mode="" style="width: 24rpx;height: 24rpx;"></image>
|
|
|
- </view>
|
|
|
- <view class="black" v-if="showSift==true">
|
|
|
- <view class="siftBox">
|
|
|
- <view class="siftItem" @click="tab(0)">
|
|
|
- <view class="item" :class="{blueColor:selectTab==0}">全部</view>
|
|
|
- <image v-if="selectTab==0" src="../../static/img/select_icon.png" mode=""
|
|
|
- style="width: 40rpx;height: 40rpx;"></image>
|
|
|
- </view>
|
|
|
- <view class="siftItem" @click="tab(3)">
|
|
|
- <view class="item" :class="{blueColor:selectTab==3}">已核销</view>
|
|
|
- <image v-if="selectTab==3" src="../../static/img/select_icon.png" mode=""
|
|
|
- style="width: 40rpx;height: 40rpx;"></image>
|
|
|
- </view>
|
|
|
- <view class="siftItem" @click="tab(1)">
|
|
|
- <view class="item" :class="{blueColor:selectTab==1}">未核销</view>
|
|
|
- <image v-if="selectTab==1" src="../../static/img/select_icon.png" mode=""
|
|
|
- style="width: 40rpx;height: 40rpx;"></image>
|
|
|
- </view>
|
|
|
+ <view class="contentBox">
|
|
|
+
|
|
|
+ <view class="title">活动数据</view>
|
|
|
+ <view class="countBox">
|
|
|
+ <view class="left">
|
|
|
+ <view class="count">
|
|
|
+ <view class="num">{{itemData.sumnum}}</view>
|
|
|
+ <view class="name">报名人数</view>
|
|
|
+ </view>
|
|
|
+ <view class="count">
|
|
|
+ <view class="num">{{itemData.num}}</view>
|
|
|
+ <view class="name">已核销人数</view>
|
|
|
+ </view>
|
|
|
+ <view class="count">
|
|
|
+ <view class="num">3928</view>
|
|
|
+ <view class="name">浏览人数</view>
|
|
|
</view>
|
|
|
-
|
|
|
+ </view>
|
|
|
+ <view>
|
|
|
+ <view class="count">
|
|
|
+ <view class="num">3928</view>
|
|
|
+ <view class="name">最多推广员工</view>
|
|
|
+ </view>
|
|
|
+ <view class="count">
|
|
|
+ <view class="num" style="color: #FF4F00;">{{itemData.rate}}</view>
|
|
|
+ <view class="name">核销率</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
-
|
|
|
-
|
|
|
- <view class="contentBox">
|
|
|
- <view class="itemHistory" v-for="(item,index) in itemData" :key="index">
|
|
|
- <view class="itemTop">
|
|
|
- <image :src="item.HeadImg" mode="" class="icon"></image>
|
|
|
- <view class="topRight">
|
|
|
- <view class="nickName">微信昵称</view>
|
|
|
- <view class="phone">{{item.str}}</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="timeBox"><span class="leftTitle">报名时间：</span>{{item.CreateTime}}</view>
|
|
|
- <view class="zhuangtaiBox" v-if="item.WriteoffState==1"><span class="leftTitle">核销状态：</span> 未核销</view>
|
|
|
- <view class="zhuangtaiBox" v-if="item.WriteoffState==3"><span class="leftTitle">核销状态：</span> 已核销 {{item.WriteoffTime}}</view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 上拉 加载更多 -->
|
|
|
- <view class="noMore" v-if="noMoreShow && (itemData.length!=0)">没有更多数据</view>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
<!-- 无数据空白页 -->
|
|
|
<nodata v-if="itemData.length==0"></nodata>
|
|
|
</view>
|
|
|
@@ -76,23 +59,20 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import searchBox from '@/components/searchBox/searchBox.vue'
|
|
|
+
|
|
|
import nodata from '../../components/nodata/nodata.vue'
|
|
|
export default {
|
|
|
components: {
|
|
|
nodata,
|
|
|
- searchBox
|
|
|
+
|
|
|
},
|
|
|
|
|
|
data() {
|
|
|
return {
|
|
|
activity: {},
|
|
|
page: 1,
|
|
|
- itemData: [],
|
|
|
- noMoreShow: false,
|
|
|
- searchValue: '',
|
|
|
- showSift: false,
|
|
|
- selectTab: 0,
|
|
|
+ itemData: {},
|
|
|
+
|
|
|
|
|
|
}
|
|
|
},
|
|
|
@@ -104,44 +84,21 @@
|
|
|
},
|
|
|
methods: {
|
|
|
|
|
|
- changeType() {
|
|
|
- this.showSift = !this.showSift
|
|
|
- // console.log('showSift==', this.showSift);
|
|
|
- },
|
|
|
- tab(state) {
|
|
|
- this.selectTab = state
|
|
|
- this.showSift = false
|
|
|
- this.page = 1
|
|
|
- this.myOrderCoupon()
|
|
|
- },
|
|
|
- search(val) {
|
|
|
- // console.log(val);
|
|
|
- this.searchValue = val
|
|
|
- this.page = 1
|
|
|
- this.myOrderCoupon()
|
|
|
- },
|
|
|
+
|
|
|
|
|
|
myOrderCoupon() {
|
|
|
uni.showLoading({
|
|
|
title: '加载中'
|
|
|
})
|
|
|
- this.$http('openH5SetTheGuest/registrationDetails', {
|
|
|
- itemId: this.activity.ID,
|
|
|
- name: this.searchValue,
|
|
|
- writeoffState: this.selectTab ? this.selectTab : '',
|
|
|
- page: this.page,
|
|
|
- limit: 10,
|
|
|
+ this.$http('openH5SetTheGuest/getDetails', {
|
|
|
+ id: this.activity.ID,
|
|
|
+
|
|
|
}, 'GET').then(res => {
|
|
|
uni.hideLoading();
|
|
|
// var list = res.data.Items
|
|
|
- var list = res.data.Items
|
|
|
+ var list = res.data
|
|
|
|
|
|
- //str 拼接字符串
|
|
|
- list.forEach((item, index) => {
|
|
|
-
|
|
|
- item.str = item.MobilePhone?item.MobilePhone:'' + item.PlateNumber?'/'+item.PlateNumber:'' + item.CustomerName?'/'+item.CustomerName+'/':'' + item.Unit?'/'+item.Unit:''
|
|
|
-
|
|
|
- })
|
|
|
+
|
|
|
|
|
|
if (this.page == 1) {
|
|
|
this.itemData = list
|
|
|
@@ -174,7 +131,7 @@
|
|
|
}, 1000);
|
|
|
},
|
|
|
onReachBottom() {
|
|
|
- this.page++;
|
|
|
+ // this.page++;
|
|
|
this.myOrderCoupon()
|
|
|
},
|
|
|
}
|
|
|
@@ -243,146 +200,58 @@
|
|
|
margin-left: 15rpx;
|
|
|
}
|
|
|
|
|
|
- .searchBoxBg {
|
|
|
-
|
|
|
- width: 100%;
|
|
|
- background-color: #FFFFFF;
|
|
|
- border: 1rpx solid #EEEEEE;
|
|
|
- }
|
|
|
-
|
|
|
- .searchBox {
|
|
|
- display: flex;
|
|
|
- height: 72rpx;
|
|
|
- margin: 24rpx;
|
|
|
- background-color: #F4F5F7;
|
|
|
- border-radius: 36rpx;
|
|
|
- padding: 30rpx 24rpx;
|
|
|
- }
|
|
|
- .boxstate{
|
|
|
- position: relative;
|
|
|
- width: 100vw;
|
|
|
- }
|
|
|
- .typeBox {
|
|
|
- background-color: #FFFFFF;
|
|
|
- padding: 30rpx 24rpx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
-
|
|
|
- .type {
|
|
|
- width: 114rpx;
|
|
|
- height: 40rpx;
|
|
|
- font-size: 28rpx;
|
|
|
- font-weight: 400;
|
|
|
- color: #666666;
|
|
|
- line-height: 40rpx;
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
+
|
|
|
|
|
|
.contentBox {
|
|
|
- padding: 20rpx 24rpx;
|
|
|
- height: calc(100vh - 415rpx);
|
|
|
- }
|
|
|
-
|
|
|
- .itemHistory {
|
|
|
-
|
|
|
- padding: 24rpx 20rpx;
|
|
|
+ padding: 30rpx 24rpx;
|
|
|
+ height: calc(100vh - 170rpx);
|
|
|
+ margin-top: 20rpx;
|
|
|
background-color: #FFFFFF;
|
|
|
- border-radius: 10rpx;
|
|
|
- margin-bottom: 20rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .itemTop {
|
|
|
- display: flex;
|
|
|
- padding-bottom: 24rpx;
|
|
|
- border-bottom: 1rpx solid #EEEEEE;
|
|
|
- }
|
|
|
-
|
|
|
- .icon {
|
|
|
- width: 72rpx;
|
|
|
- height: 72rpx;
|
|
|
- border-radius: 36rpx;
|
|
|
- margin-right: 20rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .nickName {
|
|
|
- height: 42rpx;
|
|
|
- font-size: 30rpx;
|
|
|
- font-weight: 400;
|
|
|
- color: #3C3C3C;
|
|
|
- line-height: 42rpx;
|
|
|
- margin-bottom: 8rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .phone {
|
|
|
- height: 33rpx;
|
|
|
- font-size: 24rpx;
|
|
|
- font-weight: 400;
|
|
|
- color: #666666;
|
|
|
- line-height: 33rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .timeBox {
|
|
|
- height: 33rpx;
|
|
|
- font-size: 24rpx;
|
|
|
- font-weight: 400;
|
|
|
- color: #3C3C3C;
|
|
|
- line-height: 33rpx;
|
|
|
- margin-top: 24rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .leftTitle {
|
|
|
- color: #999999;
|
|
|
- font-size: 24rpx;
|
|
|
}
|
|
|
-
|
|
|
- .zhuangtaiBox {
|
|
|
- height: 33rpx;
|
|
|
- font-size: 24rpx;
|
|
|
- font-weight: 400;
|
|
|
- color: #3C3C3C;
|
|
|
- line-height: 33rpx;
|
|
|
- margin-top: 16rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .black {
|
|
|
- width: 100vw;
|
|
|
- height: calc(100vh - 414rpx);
|
|
|
- background: rgba(0, 0, 0, 0.6000);
|
|
|
- z-index: 999;
|
|
|
- position: absolute;
|
|
|
+ .title{
|
|
|
+
|
|
|
+ height: 45rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #3C3C3C;
|
|
|
+ line-height: 45rpx;
|
|
|
}
|
|
|
-
|
|
|
- .siftBox {
|
|
|
- width: 100vw;
|
|
|
+ .countBox{
|
|
|
+ padding: 50rpx 50rpx;
|
|
|
background-color: #FFFFFF;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .siftItem {
|
|
|
- padding: 22rpx 24rpx;
|
|
|
- border-bottom: 1rpx solid #EEEEEE;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- }
|
|
|
-
|
|
|
- .item {
|
|
|
- height: 37rpx;
|
|
|
- font-size: 26rpx;
|
|
|
- font-weight: 400;
|
|
|
- color: #3C3C3C;
|
|
|
- line-height: 37rpx;
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+ .left{
|
|
|
+ margin-right: 62rpx;
|
|
|
+ }
|
|
|
+ .count{
|
|
|
+ width: 262rpx;
|
|
|
+ height: 83rpx;
|
|
|
+ background: #F7F7F7;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ border: 1rpx solid #EEEEEE;
|
|
|
+ margin-bottom: 30rpx;
|
|
|
+ padding: 26rpx 5rpx;
|
|
|
}
|
|
|
-
|
|
|
- .blueColor {
|
|
|
- color: #3F90F7;
|
|
|
+ .num{
|
|
|
+
|
|
|
+ height: 50rpx;
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #3C3C3C;
|
|
|
+ line-height: 50rpx;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .name{
|
|
|
+ height: 33rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #999999;
|
|
|
+ line-height: 33rpx;
|
|
|
+ text-align: center;
|
|
|
}
|
|
|
|
|
|
|
|
|
-
|
|
|
.noMore {
|
|
|
text-align: center;
|
|
|
line-height: 50rpx;
|
