|
|
@@ -0,0 +1,392 @@
|
|
|
+<template>
|
|
|
+ <view class="box">
|
|
|
+
|
|
|
+ <view class="top">
|
|
|
+ <view class="activityName">{{activity.ActivityName}}</view>
|
|
|
+ <view class="stateBox">
|
|
|
+ <view class="jinxing" v-if="activity.state=='进行中'">进行中</view>
|
|
|
+ <view class="jieshu" v-if="activity.state=='已结束'">已结束</view>
|
|
|
+ <view class="weiqiyong" v-if="activity.state=='未启用'">未启用</view>
|
|
|
+ <view class="weiqiyong" v-if="activity.state=='未开始'">未开始</view>
|
|
|
+ <view class="date" v-if="activity.StartTime">
|
|
|
+ {{activity.StartTime.slice(0,10)}}-{{activity.EndTime.slice(0,10)}}</view>
|
|
|
+ </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>
|
|
|
+
|
|
|
+ </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>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+</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,
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(opt) {
|
|
|
+ this.activity = JSON.parse(opt.activity);
|
|
|
+ console.log('activity==', this.activity);
|
|
|
+ this.page = 1
|
|
|
+ this.myOrderCoupon()
|
|
|
+ },
|
|
|
+ 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,
|
|
|
+ }, 'GET').then(res => {
|
|
|
+ uni.hideLoading();
|
|
|
+ // var list = res.data.Items
|
|
|
+ var list = res.data.Items
|
|
|
+
|
|
|
+ //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
|
|
|
+ } else {
|
|
|
+ this.itemData = this.itemData.concat(list)
|
|
|
+ }
|
|
|
+
|
|
|
+ if (list.length < 10) {
|
|
|
+ this.noMoreShow = true
|
|
|
+ } else {
|
|
|
+ this.noMoreShow = false
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ // 下拉刷新 上拉加载更多
|
|
|
+ onPullDownRefresh() {
|
|
|
+ this.page = 1
|
|
|
+ this.myOrderCoupon()
|
|
|
+ setTimeout(function() {
|
|
|
+ uni.stopPullDownRefresh();
|
|
|
+ }, 1000);
|
|
|
+ },
|
|
|
+ onReachBottom() {
|
|
|
+ this.page++;
|
|
|
+ this.myOrderCoupon()
|
|
|
+ },
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style>
|
|
|
+ .box {
|
|
|
+ min-height: 100vh;
|
|
|
+ background-color: #F4F5F7;
|
|
|
+ width: 100vw;
|
|
|
+ }
|
|
|
+
|
|
|
+ .top {
|
|
|
+ padding: 30rpx 24rpx;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ }
|
|
|
+
|
|
|
+ .activityName {
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 42rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .stateBox {
|
|
|
+ margin-top: 4rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .jinxing {
|
|
|
+
|
|
|
+ font-size: 22rpx;
|
|
|
+ color: #00A040;
|
|
|
+ line-height: 30rpx;
|
|
|
+ width: 74rpx;
|
|
|
+ height: 30rpx;
|
|
|
+ background: #F2FBF6;
|
|
|
+ border-radius: 4rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .jieshu {
|
|
|
+ font-size: 22rpx;
|
|
|
+ color: #FF6010;
|
|
|
+ line-height: 30rpx;
|
|
|
+ width: 74rpx;
|
|
|
+ height: 30rpx;
|
|
|
+ background: #FFECE3;
|
|
|
+ border-radius: 4rpx;
|
|
|
+ }
|
|
|
+ .weiqiyong{
|
|
|
+ font-size: 22rpx;
|
|
|
+ color: #3C3C3C;
|
|
|
+ line-height: 30rpx;
|
|
|
+ width: 74rpx;
|
|
|
+ height: 30rpx;
|
|
|
+ background: #F4F5F7;
|
|
|
+ border-radius: 4rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .date {
|
|
|
+ height: 30rpx;
|
|
|
+ font-size: 22rpx;
|
|
|
+ color: #999999;
|
|
|
+ line-height: 30rpx;
|
|
|
+ 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;
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+
|
|
|
+ .siftBox {
|
|
|
+ width: 100vw;
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+
|
|
|
+ .blueColor {
|
|
|
+ color: #3F90F7;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ .noMore {
|
|
|
+ text-align: center;
|
|
|
+ line-height: 50rpx;
|
|
|
+ color: #999999;
|
|
|
+ font-size: 28rpx;
|
|
|
+ }
|
|
|
+</style>
|
guo
