330 lines
7.7 KiB
Vue
330 lines
7.7 KiB
Vue
<template>
|
|
<view class="container-box">
|
|
<navigation-bar-vue title="查看报名" style="width: 100%;" background-color="#ffffff"
|
|
title-color="#000000"></navigation-bar-vue>
|
|
<view class="content">
|
|
<!-- 操作按钮 -->
|
|
<view class="dl-opt-box">
|
|
<view class="dl-menu-box" v-for="(item,index) in menus">
|
|
<view @click="itemClick(index,item)" class="dl-menu"
|
|
:class="index==menuIndex?'dl-menu click':'dl-menu'">
|
|
{{item}}({{0==menuIndex?waitingTotal:checkedTotal}})
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 待定的列表 -->
|
|
<view class="data-list-box" v-if="0==menuIndex">
|
|
<scroll-view style="height: 100%;" scroll-y="true" @scrolltolower="onReachBottomCus" refresher-enabled
|
|
@refresherrefresh="onRefresherrefresh" :refresher-triggered="isTriggered">
|
|
<card-item :dataList="waitingList" ifChoose="true" @goIndex="goIndex()"
|
|
@chooseCardVal="chooseCardVal()"></card-item>
|
|
<view style="text-align: center" v-if="waitingList.length==0">
|
|
<image class="" src="@/static/images/nothing.png"></image>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
<!-- 合适的列表 -->
|
|
<view class="data-list-box" v-if="1==menuIndex">
|
|
<scroll-view style="height: 100%;" scroll-y="true" @scrolltolower="onReachBottomCus" refresher-enabled
|
|
@refresherrefresh="onRefresherrefresh" :refresher-triggered="isTriggered">
|
|
<card-item :dataList="checkedList" ifChoose="true" @goIndex="goIndex()"
|
|
@chooseCardVal="chooseCardVal()"></card-item>
|
|
<view style="text-align: center" v-if="checkedList.length==0">
|
|
<image class="" src="@/static/images/nothing.png"></image>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
<view class="footer-box">
|
|
<view class="left-radio">
|
|
<uni-data-checkbox v-if="0==menuIndex" @change="chooseAllFun()" multiple :localdata="chooseAll" />
|
|
<uni-data-checkbox v-else @change="chooseAllFun()" multiple :localdata="chooseAll" />
|
|
</view>
|
|
<view class="right-button">
|
|
<text v-if="0==menuIndex" style="color: #929292;">可在“合适”列表导出名单</text>
|
|
<text v-if="1==menuIndex">已选择{{getChooseNum}}人</text>
|
|
<view v-if="0==menuIndex" class="button-dom" @click="chooseOk">划为合适</view>
|
|
<view v-if="1==menuIndex" class="button-dom" @click="exportList">导出名单</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import navigationBarVue from '@/components/navigation/navigationBar.vue';
|
|
import cardItem from '@/pages/notice/card-item.vue';
|
|
import {
|
|
toast,
|
|
hasRights
|
|
} from '@/utils/common.js'
|
|
export default {
|
|
components: {
|
|
navigationBarVue,
|
|
cardItem
|
|
},
|
|
data() {
|
|
return {
|
|
chooseAll: [{
|
|
text: '全选',
|
|
value: true
|
|
}],
|
|
globalConfig: getApp().globalData.config,
|
|
menus: ['待定', '合适'],
|
|
menuIndex: 0,
|
|
queryParams: {
|
|
pageNum: 1,
|
|
pageSize: 10
|
|
},
|
|
//待定的数组
|
|
waitingList: [{
|
|
id: "",
|
|
//是否选中
|
|
choosed: [],
|
|
//是否合适
|
|
ifChecked: false,
|
|
platformCode: "xiaohongshu",
|
|
platformName: "小红书",
|
|
accountName: "mark",
|
|
fansNum: 1000
|
|
}, {
|
|
id: "",
|
|
//是否选中
|
|
choosed: [],
|
|
//是否合适
|
|
ifChecked: false,
|
|
platformCode: "xiaohongshu",
|
|
platformName: "小红书",
|
|
accountName: "mark",
|
|
fansNum: 1000
|
|
}],
|
|
// 合适的数组
|
|
checkedList: [{
|
|
id: "",
|
|
//是否选中
|
|
choosed: [],
|
|
//是否合适
|
|
ifChecked: true,
|
|
platformCode: "xiaohongshu",
|
|
platformName: "小红书",
|
|
accountName: "mark",
|
|
fansNum: 1000
|
|
}, {
|
|
id: "",
|
|
//是否选中
|
|
choosed: [],
|
|
//是否合适
|
|
ifChecked: true,
|
|
platformCode: "xiaohongshu",
|
|
platformName: "小红书",
|
|
accountName: "mark",
|
|
fansNum: 1000
|
|
}],
|
|
//待定的总数
|
|
waitingTotal: 0,
|
|
//合适的总数
|
|
checkedTotal: 0,
|
|
//下来刷新状态
|
|
isTriggered: false,
|
|
}
|
|
},
|
|
computed: {
|
|
getChooseNum() {
|
|
return this.checkedList.filter((item) => item.choosed.length > 0).length
|
|
}
|
|
},
|
|
methods: {
|
|
/**
|
|
* 菜单点击
|
|
* @param {Object} index
|
|
* @param {Object} item
|
|
*/
|
|
itemClick(index, item) {
|
|
this.menuIndex = index
|
|
|
|
},
|
|
/**
|
|
* 上滑加载数据
|
|
*/
|
|
onReachBottomCus() {
|
|
//判断 如果页码*页容量大于等于总条数，提示该页数据加载完毕
|
|
let total = (0 == this.menuIndex ? this.waitingTotal : this.checkedTotal)
|
|
if (this.queryParams.pageNum * this.queryParams.pageSize >= total) {
|
|
toast("没有更多数据了")
|
|
return
|
|
}
|
|
//页码+1,调用获取数据的方法获取第二页数据
|
|
this.queryParams.pageNum++
|
|
},
|
|
/**
|
|
* 下拉刷新数据
|
|
*/
|
|
onRefresherrefresh() {
|
|
this.isTriggered = true
|
|
this.queryParams.pageNum = 1
|
|
if (0 == this.menuIndex) {
|
|
this.waitingTotal = 0
|
|
} else {
|
|
this.checkedTotal = 0
|
|
}
|
|
},
|
|
/**
|
|
* 全选
|
|
* @param {Object} e
|
|
*/
|
|
chooseAllFun(e) {
|
|
if (e.detail.value.length > 0) {
|
|
if (0 == this.menuIndex) {
|
|
this.waitingList.map((item) => {
|
|
item.choosed = [true]
|
|
})
|
|
} else {
|
|
this.checkedList.map((item) => {
|
|
item.choosed = [true]
|
|
})
|
|
}
|
|
|
|
} else {
|
|
if (0 == this.menuIndex) {
|
|
this.waitingList.map((item) => {
|
|
item.choosed = []
|
|
})
|
|
} else {
|
|
this.checkedList.map((item) => {
|
|
item.choosed = []
|
|
})
|
|
}
|
|
}
|
|
},
|
|
/**
|
|
* 批量划为合适
|
|
*/
|
|
chooseOk() {},
|
|
/**
|
|
* 导出名单
|
|
*/
|
|
exportList() {},
|
|
/**
|
|
* 去名片所有者主页
|
|
*/
|
|
goIndex(item) {},
|
|
/**
|
|
* 将名片置为合适或不合适
|
|
*/
|
|
chooseCardVal(value) {}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.container-box {
|
|
padding-top: calc(90rpx + var(--status-bar-height));
|
|
border-top: 1rpx solid #F4F4F4;
|
|
background-color: white;
|
|
width: 100%;
|
|
color: #363636;
|
|
font-size: 30rpx;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: self-start;
|
|
justify-content: center;
|
|
position: relative;
|
|
|
|
.content {
|
|
border-top: 1rpx solid #F4F4F4;
|
|
height: calc(100vh - var(--status-bar-height) - var(--window-bottom) - 195rpx);
|
|
overflow-y: scroll;
|
|
width: 100%;
|
|
background-color: #F2F2F2;
|
|
border-radius: 20rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: self-start;
|
|
justify-content: start;
|
|
position: relative;
|
|
|
|
.dl-opt-box {
|
|
background-color: white;
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.dl-menu-box {
|
|
color: #929292;
|
|
display: flex;
|
|
flex: 1;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
padding-top: 20rpx;
|
|
|
|
.dl-menu {
|
|
width: auto;
|
|
font-size: 30rpx;
|
|
margin: 0 20rpx;
|
|
padding-bottom: 15rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.click {
|
|
color: #FF434E;
|
|
font-weight: bold;
|
|
border-bottom: 2px solid #FF434E;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.data-list-box {
|
|
flex: 1;
|
|
padding: 20rpx 30rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: self-start;
|
|
justify-content: start;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.footer-box {
|
|
z-index: 999;
|
|
padding: 20rpx 30rpx;
|
|
background-color: white;
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: start;
|
|
position: fixed;
|
|
bottom: var(--window-bottom);
|
|
|
|
.left-radio {
|
|
text-align: left;
|
|
width: 30%;
|
|
}
|
|
|
|
.right-button {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
|
|
text {
|
|
margin-right: 15rpx;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.button-dom {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 10rpx 40rpx;
|
|
background-color: #FC1F3E;
|
|
border-radius: 15rpx;
|
|
color: white;
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
</style> |