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.
355 lines
8.2 KiB
355 lines
8.2 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="keyWord" @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">{{item.level}}级会员</view> |
|
</view> |
|
</label> |
|
</checkbox-group> |
|
</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, |
|
addMembers |
|
} from "@/api/serverTeacher" |
|
export default { |
|
data() { |
|
return { |
|
keyWord:'', |
|
searchType:false, |
|
courseId: '', |
|
isChecked: false, |
|
levelList: [], |
|
checkedArr: [], //复选框选中的值 |
|
allChecked: false, //是否全选 |
|
checkedAllArr: [], //所有选中 |
|
memberList: [], |
|
showMask: false |
|
} |
|
}, |
|
onLoad() { |
|
this.courseId = this.$yroute.query.id; |
|
this.getSellerMembers() |
|
}, |
|
methods: { |
|
search(){ |
|
console.log(this.checkedAllArr) |
|
let arr = [] |
|
this.checkedAllArr.forEach((item)=>{ |
|
arr.push(JSON.stringify(item)) |
|
}) |
|
this.checkedArr = arr; |
|
if(this.keyWord == '') { |
|
this.searchType = false; |
|
} else{ |
|
this.searchType = true; |
|
} |
|
this.getSellerMembers() |
|
}, |
|
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 = { |
|
courseId: this.courseId, |
|
memberIds: this.checkedAllArr |
|
} |
|
if(this.checkedAllArr.length == 0){ |
|
uni.showToast({ |
|
title:'请选择至少选择一个会员', |
|
icon:'none', |
|
duration:2000 |
|
}) |
|
return |
|
} |
|
addMembers(data).then((res)=>{ |
|
console.log('res',res) |
|
if(res.success){ |
|
uni.showToast({ |
|
title: "添加成功！" |
|
}) |
|
this.getSellerMembers(); |
|
this.checkedArr = []; |
|
this.checkedAllArr = []; |
|
} else{ |
|
uni.showToast({ |
|
title: res.msg, |
|
icon: 'none' |
|
}) |
|
} |
|
}) |
|
}, |
|
} |
|
} |
|
</script> |
|
|
|
<style lang="less" scoped> |
|
.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>
|
|
|