4
This commit is contained in:
@@ -1,59 +1,55 @@
|
||||
<template>
|
||||
<view class="selected_item">
|
||||
<view class="left_info">
|
||||
<my-avatar
|
||||
:src="source.faceURL"
|
||||
:desc="source.nickname || source.showName"
|
||||
:isGroup="Boolean(source.groupID)"
|
||||
size="42"
|
||||
/>
|
||||
<text>{{ source.nickname || source.groupName || source.showName }}</text>
|
||||
</view>
|
||||
<view>
|
||||
<u-button @click="action" plain text="移除" type="primary" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="selected_item">
|
||||
<view class="left_info">
|
||||
<my-avatar :src="source.faceURL" :desc="source.nickname || source.showName"
|
||||
:isGroup="Boolean(source.groupID)" size="42" />
|
||||
<text>{{ source.nickname || source.groupName || source.showName }}</text>
|
||||
</view>
|
||||
<view>
|
||||
<u-button @click="action" plain text="移除" type="primary" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MyAvatar from "@/components/MyAvatar/index.vue";
|
||||
export default {
|
||||
name: "",
|
||||
components: {
|
||||
MyAvatar,
|
||||
},
|
||||
props: {
|
||||
source: Object,
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
methods: {
|
||||
action() {
|
||||
this.$emit("removeItem");
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
console.log(this.source);
|
||||
},
|
||||
};
|
||||
import MyAvatar from "@/components/MyAvatar/index.vue";
|
||||
export default {
|
||||
name: "",
|
||||
components: {
|
||||
MyAvatar,
|
||||
},
|
||||
props: {
|
||||
source: Object,
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
methods: {
|
||||
action() {
|
||||
this.$emit("removeItem");
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
console.log(this.source);
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.selected_item {
|
||||
@include btwBox();
|
||||
padding: 20rpx 0;
|
||||
.selected_item {
|
||||
@include btwBox();
|
||||
padding: 20rpx 0;
|
||||
|
||||
.left_info {
|
||||
@include vCenterBox();
|
||||
.left_info {
|
||||
@include vCenterBox();
|
||||
|
||||
.u-avatar {
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
}
|
||||
.u-avatar {
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.u-button {
|
||||
height: 48rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
.u-button {
|
||||
height: 48rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,143 +1,130 @@
|
||||
<template>
|
||||
<view class="member_checked_desc">
|
||||
<view @click="showSelected = true" class="left_info">
|
||||
<view class="select_num">
|
||||
<text class="text">{{ `已选择(${choosedData.length})` }}</text>
|
||||
<u-icon name="arrow-up" size="14" color="#007aff" />
|
||||
</view>
|
||||
<view class="select_list">{{ selectedStr }}</view>
|
||||
</view>
|
||||
<view class="">
|
||||
<u-button
|
||||
:loading="comfirmLoading"
|
||||
@click="clickComfirm"
|
||||
:disabled="choosedData.length === 0"
|
||||
type="primary"
|
||||
:text="
|
||||
isRemove
|
||||
? '移除'
|
||||
: `确定(${choosedData.length}${
|
||||
maxLength > 0 ? `/${maxLength}` : ``
|
||||
})`
|
||||
"
|
||||
/>
|
||||
<u-popup round="24" :show="showSelected" mode="bottom" @close="close">
|
||||
<view class="selected_container">
|
||||
<view class="top_desc">
|
||||
<text>{{ `已选择(${choosedData.length})` }}</text>
|
||||
<text @click="close" class="comfirm_text">确认</text>
|
||||
</view>
|
||||
<u-list class="selected_list">
|
||||
<u-list-item
|
||||
v-for="item in choosedData"
|
||||
:key="item.userID || item.groupID"
|
||||
>
|
||||
<selected-member @removeItem="removeItem(item)" :source="item" />
|
||||
</u-list-item>
|
||||
</u-list>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</view>
|
||||
<view class="member_checked_desc">
|
||||
<view @click="showSelected = true" class="left_info">
|
||||
<view class="select_num">
|
||||
<text class="text">{{ `已选择(${choosedData.length})` }}</text>
|
||||
<u-icon name="arrow-up" size="14" color="#007aff" />
|
||||
</view>
|
||||
<view class="select_list">{{ selectedStr }}</view>
|
||||
</view>
|
||||
<view class="">
|
||||
<u-button :loading="comfirmLoading" @click="clickComfirm" :disabled="choosedData.length === 0"
|
||||
type="primary"
|
||||
:text="isRemove? '移除': `确定(${choosedData.length}${maxLength > 0 ? `/${maxLength}` : ``})`" />
|
||||
<u-popup round="24" :show="showSelected" mode="bottom" @close="close">
|
||||
<view class="selected_container">
|
||||
<view class="top_desc">
|
||||
<text>{{ `已选择(${choosedData.length})` }}</text>
|
||||
<text @click="close" class="comfirm_text">确认</text>
|
||||
</view>
|
||||
<u-list class="selected_list">
|
||||
<u-list-item v-for="item in choosedData" :key="item.userID || item.groupID">
|
||||
<selected-member @removeItem="removeItem(item)" :source="item" />
|
||||
</u-list-item>
|
||||
</u-list>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SelectedMember from "./SelectedMember.vue";
|
||||
export default {
|
||||
name: "ChooseIndexFooter",
|
||||
components: {
|
||||
SelectedMember,
|
||||
},
|
||||
props: {
|
||||
isRemove: Boolean,
|
||||
choosedData: Array,
|
||||
comfirmLoading: Boolean,
|
||||
maxLength: Number,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showSelected: false,
|
||||
showConfirmModal: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
selectedStr() {
|
||||
return this.choosedData
|
||||
.map((item) => item.nickname || item.showName || item.groupName)
|
||||
.join("、");
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
close() {
|
||||
this.showSelected = false;
|
||||
},
|
||||
removeItem(item) {
|
||||
this.$emit("removeItem", item);
|
||||
},
|
||||
clickComfirm() {
|
||||
this.$emit("confirm");
|
||||
},
|
||||
},
|
||||
};
|
||||
import SelectedMember from "./SelectedMember.vue";
|
||||
export default {
|
||||
name: "ChooseIndexFooter",
|
||||
components: {
|
||||
SelectedMember,
|
||||
},
|
||||
props: {
|
||||
isRemove: Boolean,
|
||||
choosedData: Array,
|
||||
comfirmLoading: Boolean,
|
||||
maxLength: Number,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showSelected: false,
|
||||
showConfirmModal: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
selectedStr() {
|
||||
return this.choosedData
|
||||
.map((item) => item.nickname || item.showName || item.groupName)
|
||||
.join("、");
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
close() {
|
||||
this.showSelected = false;
|
||||
},
|
||||
removeItem(item) {
|
||||
this.$emit("removeItem", item);
|
||||
},
|
||||
clickComfirm() {
|
||||
this.$emit("confirm");
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.member_checked_desc {
|
||||
@include btwBox();
|
||||
background-color: #fff;
|
||||
align-items: flex-start;
|
||||
padding: 24rpx 44rpx 0;
|
||||
height: 60px;
|
||||
max-height: 60px;
|
||||
box-shadow: 0px -1px 4px 1px rgba(0, 0, 0, 0.04);
|
||||
.member_checked_desc {
|
||||
@include btwBox();
|
||||
background-color: #fff;
|
||||
align-items: flex-start;
|
||||
padding: 24rpx 44rpx 0;
|
||||
height: 60px;
|
||||
max-height: 60px;
|
||||
box-shadow: 0px -1px 4px 1px rgba(0, 0, 0, 0.04);
|
||||
|
||||
.left_info {
|
||||
@include colBox(false);
|
||||
.left_info {
|
||||
@include colBox(false);
|
||||
|
||||
.select_num {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: $uni-color-primary;
|
||||
}
|
||||
.select_num {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: $uni-color-primary;
|
||||
}
|
||||
|
||||
.select_list {
|
||||
font-size: 24rpx;
|
||||
color: #8e9ab0;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 50vw;
|
||||
}
|
||||
.select_list {
|
||||
font-size: 24rpx;
|
||||
color: #8e9ab0;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 50vw;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 30rpx;
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
}
|
||||
.text {
|
||||
font-size: 30rpx;
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.u-button {
|
||||
background-color: #0089ff;
|
||||
height: 40px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.u-button {
|
||||
background-color: #0089ff;
|
||||
height: 40px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.selected_container {
|
||||
padding: 44rpx;
|
||||
.selected_container {
|
||||
padding: 44rpx;
|
||||
|
||||
.top_desc {
|
||||
@include btwBox();
|
||||
margin-bottom: 20rpx;
|
||||
.top_desc {
|
||||
@include btwBox();
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.comfirm_text {
|
||||
color: $uni-color-primary;
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
}
|
||||
.comfirm_text {
|
||||
color: $uni-color-primary;
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.selected_list {
|
||||
height: 60vh !important;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
.selected_list {
|
||||
height: 60vh !important;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,91 +1,77 @@
|
||||
<template>
|
||||
<u-index-list
|
||||
@scrolltolower="scrolltolower"
|
||||
class="user_list"
|
||||
:style="{ height: height }"
|
||||
:index-list="indexList"
|
||||
>
|
||||
<template v-for="(item, index) in itemArr">
|
||||
<u-index-item :key="index">
|
||||
<u-index-anchor
|
||||
class="user_anchor"
|
||||
:text="indexList[index]"
|
||||
></u-index-anchor>
|
||||
<user-item
|
||||
@itemClick="itemClick"
|
||||
@updateCheck="updateCheck"
|
||||
:checked="checkedIDList.includes(cell.userID)"
|
||||
:disabled="disabledIDList.includes(cell.userID)"
|
||||
:checkVisible="showCheck"
|
||||
v-for="cell in item"
|
||||
:item="cell"
|
||||
:key="cell.userID"
|
||||
/>
|
||||
</u-index-item>
|
||||
</template>
|
||||
</u-index-list>
|
||||
<u-index-list @scrolltolower="scrolltolower" class="user_list" :style="{ height: height }" :index-list="indexList">
|
||||
<template v-for="(item, index) in itemArr">
|
||||
<u-index-item :key="index">
|
||||
<u-index-anchor class="user_anchor" :text="indexList[index]"></u-index-anchor>
|
||||
<user-item @itemClick="itemClick" @updateCheck="updateCheck"
|
||||
:checked="checkedIDList.includes(cell.userID)" :disabled="disabledIDList.includes(cell.userID)"
|
||||
:checkVisible="showCheck" v-for="cell in item" :item="cell" :key="cell.userID" />
|
||||
</u-index-item>
|
||||
</template>
|
||||
</u-index-list>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import UserItem from "../UserItem/index.vue";
|
||||
export default {
|
||||
name: "ChooseIndexList",
|
||||
components: {
|
||||
UserItem,
|
||||
},
|
||||
props: {
|
||||
height: {
|
||||
type: String,
|
||||
default: "0px",
|
||||
},
|
||||
indexList: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
itemArr: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
checkedIDList: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
disabledIDList: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
showCheck: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
methods: {
|
||||
itemClick(item) {
|
||||
this.$emit("itemClick", item);
|
||||
},
|
||||
updateCheck(item) {
|
||||
this.$emit("updateCheck", item);
|
||||
},
|
||||
scrolltolower() {
|
||||
this.$emit("scrolltolower");
|
||||
},
|
||||
},
|
||||
};
|
||||
import UserItem from "../UserItem/index.vue";
|
||||
export default {
|
||||
name: "ChooseIndexList",
|
||||
components: {
|
||||
UserItem,
|
||||
},
|
||||
props: {
|
||||
height: {
|
||||
type: String,
|
||||
default: "0px",
|
||||
},
|
||||
indexList: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
itemArr: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
checkedIDList: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
disabledIDList: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
showCheck: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
methods: {
|
||||
itemClick(item) {
|
||||
this.$emit("itemClick", item);
|
||||
},
|
||||
updateCheck(item) {
|
||||
this.$emit("updateCheck", item);
|
||||
},
|
||||
scrolltolower() {
|
||||
this.$emit("scrolltolower");
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.user_list {
|
||||
flex: 1;
|
||||
::v-deep uni-scroll-view {
|
||||
max-height: 100% !important;
|
||||
}
|
||||
}
|
||||
.user_list {
|
||||
flex: 1;
|
||||
|
||||
.user_anchor {
|
||||
background-color: #f8f8f8 !important;
|
||||
border: none !important;
|
||||
}
|
||||
</style>
|
||||
::v-deep uni-scroll-view {
|
||||
max-height: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
.user_anchor {
|
||||
background-color: #f8f8f8 !important;
|
||||
border: none !important;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user