You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
415 lines
9.6 KiB
415 lines
9.6 KiB
<template> |
|
<view class="member-box"> |
|
<view class="search-box"> |
|
<view class="search-input-box acea-row row-middle"> |
|
<text class="iconfont icon-xiazai5"></text> |
|
<input type="text" placeholder="请输入会员真实姓名" v-model="keywords" @input="search"> |
|
</view> |
|
</view> |
|
<uni-collapse accordion="true"> |
|
<uni-collapse-item title="会员列表" showAnimation="true" open="true" style="border-top: 1px solid #f3f3f3;"> |
|
<view style="padding: 20rpx;"> |
|
<view class="checkAll-box acea-row row-middle"> |
|
<checkbox-group @change="allChoose"> |
|
<label class="acea-row row-middle"> |
|
<checkbox value="all" :checked="allChecked?true:false" style="transform:scale(0.7);" |
|
color="#fff" /> |
|
<text>全选</text> |
|
</label> |
|
</checkbox-group> |
|
</view> |
|
<view class="member-list"> |
|
<checkbox-group @change="changeCheckbox"> |
|
<label class="member-item acea-row row-middle" v-for="item in memberList" :key="item.value" > |
|
<checkbox |
|
:value="JSON.stringify(item)" |
|
:checked="checkedArr.includes(JSON.stringify(item))" |
|
style="transform:scale(0.7);" |
|
color="#fff" class="member-item acea-row row-middle"></checkbox> |
|
<view class="img-box"> |
|
<image :src="item.avatar"></image> |
|
</view> |
|
<view class="memberInfo-box"> |
|
<view class="name">{{item.realName}}</view> |
|
<view class="jifen">uid:{{item.uid}}</view> |
|
</view> |
|
</label> |
|
</checkbox-group> |
|
</view> |
|
<view class="load-more">{{loadState}}</view> |
|
</view> |
|
</uni-collapse-item> |
|
</uni-collapse> |
|
<view class="footer-box"> |
|
<view class="selected-box acea-row row-middle"> |
|
<!-- <image :src="item.avatar" mode="" ></image> --> |
|
<view class="member-name-box" v-for="(item,index) in checkedAllArr" :key="index"> |
|
<text>{{item.realName}}</text> |
|
<view class="close" @click="delSelect(item)">×</view> |
|
</view> |
|
<text>已选择{{checkedAllArr.length}}名会员</text> |
|
</view> |
|
<view class="submit-btn" @click="submitAdd">确认添加</view> |
|
</view> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
import { |
|
getMyMemberLevels, |
|
getSellerMembers, |
|
getMemberList, |
|
addMembers, |
|
bindUser |
|
} from "@/api/serverTeacher" |
|
import { debounce } from "@/utils/index" |
|
export default { |
|
data() { |
|
return { |
|
keywords:'', |
|
searchType:false, |
|
courseId: '', |
|
isChecked: false, |
|
levelList: [], |
|
checkedArr: [], //复选框选中的值 |
|
allChecked: false, //是否全选 |
|
checkedAllArr: [], //所有选中 |
|
memberList: [], |
|
showMask: false, |
|
page: 1, |
|
size: 10, |
|
loading:true, |
|
loadState: '上拉加载更多...' |
|
} |
|
}, |
|
onLoad() { |
|
// this.getMemberList() |
|
}, |
|
onShow() { |
|
this.getMemberList() |
|
}, |
|
onReachBottom(){ |
|
this.page = this.page + 1 |
|
this.getMemberList() |
|
}, |
|
computed:{ |
|
list(){ |
|
const list = this.memberList.filter(item => item.seller == null) |
|
if(list.length < this.size){ |
|
this.loadState = '没有更多了' |
|
} |
|
return list |
|
} |
|
}, |
|
onPullDownRefresh(){ |
|
this.page = 1 |
|
this.loading = true |
|
this.memberList = [] |
|
this.getMemberList() |
|
}, |
|
methods: { |
|
search: debounce(function(){ |
|
this.memberList = [] |
|
let data = { |
|
keywords: this.keywords, |
|
sort: 'uid,asc', |
|
page: 1, |
|
size: 100 |
|
} |
|
this.loadState = '正在加载中...' |
|
getMemberList(data).then(res => { |
|
if (res.success) { |
|
this.memberList = res.data.records |
|
} |
|
}) |
|
}), |
|
getMemberList(){ |
|
if(!this.loading) return |
|
let data = { |
|
keywords: this.keywords, |
|
sort: 'uid,asc', |
|
page: this.page, |
|
size: this.size |
|
} |
|
this.loadState = '正在加载中...' |
|
getMemberList(data).then(res => { |
|
if (res.success) { |
|
this.memberList = this.memberList.concat(res.data.records) |
|
if(res.data.records.length < this.size) { |
|
this.loading = false |
|
this.loadState = '没有更多了...' |
|
} else{ |
|
this.loading = true |
|
this.loadState = '上拉加载更多...' |
|
} |
|
uni.stopPullDownRefresh() |
|
} |
|
}) |
|
}, |
|
// getSellerMembers() { |
|
// getSellerMembers({courseId:this.courseId,realName:this.keyWord}).then(res => { |
|
// if (res.success) { |
|
// this.memberList = res.data |
|
// } |
|
// }) |
|
// }, |
|
//删除选中 |
|
delSelect(item){ |
|
let info = JSON.stringify(item); |
|
let sele = item; |
|
this.checkedArr.splice(this.checkedArr.findIndex(item => item === info), 1); |
|
this.checkedAllArr.splice(this.checkedAllArr.findIndex(item => item === sele), 1); |
|
}, |
|
// 全选事件 |
|
allChoose(e){ |
|
let chooseItem = e.detail.value; |
|
// 全选 |
|
if(chooseItem[0]=='all'){ |
|
this.allChecked=true; |
|
for(let item of this.memberList){ |
|
let itemVal = JSON.stringify(item); |
|
if(!this.checkedArr.includes(itemVal)){ |
|
var arr = []; |
|
this.checkedArr.push(itemVal); |
|
this.checkedArr.forEach((item)=>{ |
|
arr.push(JSON.parse(item)) |
|
}) |
|
this.checkedAllArr = arr; |
|
} |
|
} |
|
}else{ |
|
// 取消全选 |
|
this.allChecked=false; |
|
this.checkedArr=[]; |
|
this.checkedAllArr = []; |
|
} |
|
}, |
|
// 多选复选框改变事件 |
|
changeCheckbox(e) { |
|
this.checkedArr = e.detail.value; |
|
let arr = [] |
|
this.checkedArr.forEach((item)=>{ |
|
arr.push(JSON.parse(item)) |
|
}) |
|
if(this.searchType){ |
|
let temp = this.checkedAllArr; |
|
temp.push(...arr); |
|
let obj = {}; |
|
this.checkedAllArr = temp.reduce((cur,next) => { |
|
obj[next.uid] ? "" : obj[next.uid] = true && cur.push(next); |
|
return cur; |
|
},[]) |
|
} else{ |
|
this.checkedAllArr = arr; |
|
} |
|
|
|
// 如果选择的数组中有值，并且长度等于列表的长度，就是全选 |
|
if (this.checkedArr.length > 0 && this.checkedArr.length == this.memberList.length) { |
|
this.allChecked = true; |
|
} else { |
|
this.allChecked = false; |
|
} |
|
}, |
|
submitAdd(){ |
|
let data = { |
|
userId: this.checkedAllArr.map(item=> item.uid).toString() |
|
} |
|
console.log(data.userId) |
|
if(this.checkedAllArr.length == 0){ |
|
uni.showToast({ |
|
title:'请选择至少选择一个会员', |
|
icon:'none', |
|
duration:2000 |
|
}) |
|
return |
|
} |
|
bindUser(data).then((res)=>{ |
|
console.log('res',res) |
|
if(res.success){ |
|
uni.showToast({ |
|
title: "添加成功！" |
|
}) |
|
this.memberList = [] |
|
this.checkedArr = []; |
|
this.checkedAllArr = []; |
|
this.getMemberList(); |
|
} else{ |
|
uni.showToast({ |
|
title: res.msg, |
|
icon: 'none' |
|
}) |
|
} |
|
}) |
|
}, |
|
} |
|
} |
|
</script> |
|
|
|
<style lang="less" scoped> |
|
.load-more{ |
|
text-align: center; |
|
margin: 20rpx; |
|
color: #333333; |
|
font-size: 28rpx; |
|
} |
|
.member-box { |
|
width: 100%; |
|
padding-bottom: 350rpx; |
|
.search-box { |
|
background: #fff; |
|
width: 100%; |
|
padding: 20rpx 30rpx; |
|
|
|
.search-input-box { |
|
width: 100%; |
|
height: 70rpx; |
|
background: #F2F2F2; |
|
font-size: 28rpx; |
|
color: #999999; |
|
border-radius: 25px; |
|
padding-left: 26rpx; |
|
input{ |
|
width: 70%; |
|
height: 100%; |
|
margin-left: 20rpx; |
|
} |
|
} |
|
} |
|
|
|
.checkAll-box { |
|
margin-bottom: 20rpx; |
|
} |
|
.member-list { |
|
.member-item { |
|
position: relative; |
|
background: #fff; |
|
padding: 28rpx 20rpx 10rpx; |
|
border-radius: 10rpx; |
|
margin-bottom: 20rpx; |
|
.img-box { |
|
width: 100rpx; |
|
height: 100rpx; |
|
margin: 0 20rpx; |
|
margin-top: -20rpx; |
|
image { |
|
width: 100%; |
|
height: 100%; |
|
border-radius: 50px; |
|
} |
|
} |
|
|
|
.memberInfo-box { |
|
font-size: 28rpx; |
|
color: #222; |
|
margin-top: -20rpx; |
|
|
|
.jifen { |
|
font-size: 24rpx; |
|
color: #fff; |
|
// padding:0 10rpx; |
|
text-align: center; |
|
width: 110rpx; |
|
padding: 0 10rpx; |
|
margin-top: 10rpx; |
|
box-sizing: content-box; |
|
height: 36rpx; |
|
line-height: 36rpx; |
|
background: linear-gradient(180deg, #FFCF61 0%, #FCA333 100%); |
|
box-shadow: 0px 4rpx 8rpx 0rpx rgba(253, 169, 57, 0.19); |
|
border-radius: 20rpx 20rpx 20rpx 0px; |
|
} |
|
|
|
.record-box { |
|
margin-top: 22rpx; |
|
} |
|
|
|
.course-record { |
|
color: #666; |
|
font-size: 28rpx; |
|
margin-right: 60rpx; |
|
|
|
image { |
|
width: 24rpx; |
|
height: 24rpx; |
|
margin-right: 8rpx; |
|
} |
|
} |
|
} |
|
|
|
.call-btn { |
|
position: absolute; |
|
right: 28rpx; |
|
top: 28rpx; |
|
width: 120rpx; |
|
height: 60rpx; |
|
line-height: 60rpx; |
|
font-size: 32rpx; |
|
color: #fff; |
|
text-align: center; |
|
background: #F4C076; |
|
border-radius: 30rpx; |
|
} |
|
} |
|
} |
|
|
|
/deep/.uni-collapse-cell__title { |
|
background: #fff !important; |
|
} |
|
|
|
.footer-box { |
|
background: #fff; |
|
padding: 44rpx; |
|
position: fixed; |
|
bottom: 0; |
|
left: 0; |
|
width: 100%; |
|
|
|
.selected-box { |
|
font-size: 28rpx; |
|
color: #999; |
|
.member-name-box{ |
|
position: relative; |
|
padding: 10rpx 16rpx; |
|
font-size: 24rpx; |
|
border: 1px solid #FDBF68; |
|
color: #FDBF68; |
|
border-radius: 6rpx; |
|
margin-right: 10rpx; |
|
margin-bottom: 10rpx; |
|
.close{ |
|
font-size: 28rpx; |
|
position: absolute; |
|
top: -20rpx; |
|
right: -10rpx; |
|
width: 30rpx; |
|
height: 30rpx; |
|
border-radius: 25px; |
|
color: #fff; |
|
background: #FDBF68; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
} |
|
} |
|
image { |
|
width: 60rpx; |
|
height: 60rpx; |
|
margin-right: 10rpx; |
|
margin-bottom: 10rpx; |
|
border-radius: 50px; |
|
} |
|
} |
|
|
|
.submit-btn { |
|
width: 646rpx; |
|
height: 80rpx; |
|
text-align: center; |
|
line-height: 80rpx; |
|
color: #fff; |
|
background: #FDBF68; |
|
border-radius: 44rpx; |
|
margin-top: 20rpx; |
|
} |
|
} |
|
} |
|
</style>
|
|
|