fbySrcm_uniapp/pages/courseManage/components/vipUserItem.vue

<template>
	<view class="pb130 column flex-1 hb">
		<scroll-view scroll-y="true" class="hb" :refresher-enabled="isEnabled" :refresher-triggered="triggered"
			refresher-background="rgba(0,0,0,0)" @refresherrefresh="pullDownRefresh"
			@refresherrestore="triggered = false" :upper-threshold="100" :lower-threshold="100"
			@refresherabort="triggered = false" @scrolltolower="reachBottom">
			<view v-for="(item,index) in viplist" :key="index" class="justify-start align-center">
				<u-checkbox-group @change="changeitem(index)" v-if="isShowSelectAll">
					<u-checkbox :checked="item.checked" shape="circle" activeColor="#FF6C47" :name="true"
						labelColor="#FF6C47" />
				</u-checkbox-group>
				<view class="list-item w100">
					<view class="list-item-head x-bc">
						<view class="x-f" style="flex: 1;overflow: hidden;">
							<u-avatar :src='item.avatar'></u-avatar>
							<view class="list-item-head-l">
								<view style="flex: 1;overflow: hidden;display: flex;">
									<text class="list-item-name one-t">{{item.nickName}}</text>
									<image class="list-item-copy" src="@/static/images/copy_icon.png" mode="aspectFill"
										@click="copyId(item.userId)">
									</image>
								</view>
								<view class="list-item-re">注册时间：{{item.createTime?item.createTime.substring(0,10):'--'}}
								</view>
							</view>
						</view>
						<image class="phone" src="@/static/manergevip/phone.png" mode="aspectFill"
							v-if="!isShowSelectAll" @click="tophone(item.phone)"></image>
					</view>
					<view class="list-item-desc">
						<view class="taglist">
							<!-- <view><u-tag text="停止看课三天" size="mini" color="#1677ff" bgColor="#fff" borderColor="#fff"></u-tag></view>
						
						<view v-for="(tag,i) in item.tags ? item.tags.split(',') : []" >
							<u-tag :text="tag" size="mini" color="#999" bgColor="#fff" borderColor="#fff"></u-tag>
						</view> -->
							<!-- <view class="base-color-red">停止看课 3 天</view>
						<view class="u-border-right u-border-left plr10 base-color-9">
							参与营期 <text class="bold pl6 base-color-3">1</text></view>
						<view class="base-color-9">缺课数量 <text class="base-color-red pl8">2</text></view> -->
						</view>
						<!-- <view style="margin-top: 5px;">
						<text class="label" style="color:red;margin-right: 20px;">停止看课{{item.watchCount || 0}}天</text>
						<text class="label">参与营期</text><text class="value-num">{{item.watchCount || 0}}</text>
						<text class="label">缺课数量</text><text class="value-num" style="color:red">{{item.watchComlpleteCount || 0}}</text>
					</view> -->
						<view class="justify-start">
							<view class="base-color mr8 pr8 u-border-right" v-if="user.userType==0">
								{{item.companyUsernickName}}
							</view>
							<view class="justify-around">
								<view v-for="(item,index) in item.tagsName" :key="index" class="mlr4">{{item}}</view>
							</view>
						</view>
					</view>
					<view class="justify-between" v-if="!isShowSelectAll">
						<view @click="morepage(item)">更多</view>
						<view class="justify-start">
							<view class="btn-box base-color base-bg-sure bor-blue" @click="openModel('label',item)"
								v-if="item.isBlack==0">改标签</view>
							<view class="btn-box base-color-red base-bg-false bor-red"
								@click="openModel('disable',item)" v-if="item.isBlack==0">禁用</view>
							<view class="btn-box base-color-red base-bg-false bor-red" @click="openModel('change',item)"
								v-if="item.isBlack==0 && user.userType==0">更换归属</view>
						</view>

					</view>
				</view>
			</view>
			<u-loadmore :status="status" />
		</scroll-view>
		<u-notify ref="uNotify" message=""></u-notify>
	</view>
</template>

<script>
	export default {
		props: {
			viplist: {
				type: Array,
				default: () => []
			},
			isShowSelectAll: {
				type: Boolean,
				default: false, //是否显示全选  由外部控制
			},
			pageOptions: {
				type: Object,
				default: () => ({
					pageNum: 1,
					pageSize: 10,
				})
			},
			status: {
				type: String,
				default: 'loadmore'
			}

		},
		data() {
			return {
				checkList: [],
				cccc: [false],
				user: [],
				isEnabled: true,
				triggered: false,
			}
		},
		mounted() {
			this.user = uni.getStorageSync("companyUserInfo") ? JSON.parse(uni.getStorageSync("companyUserInfo")) : {}
		},
		methods: {
			tophone(phone){
				console.log(phone)
				if(phone==null){
					uni.showToast({
						title: '用户暂时没有录入电话',
						icon: 'none',
						duration: 2000
					});
				}else{
					uni.setClipboardData({
						data: String(phone),
						success: () => {
							// 拨号跳转
							  uni.makePhoneCall({
								phoneNumber: phone, // 电话号码
								success: () => {
								  console.log('拨号成功');
								},
								fail: () => {
								  console.log('拨号失败');
								}
							  });
						},
					})
				}
			},
			copyId(id) {
				uni.setClipboardData({
					data: String(id),
					success: () => {
						uni.showToast({
							title: '复制成功',
							icon: 'none',
							duration: 2000
						});
					},
				})
			},
			pullDownRefresh() {
				// 下拉
				this.triggered = true; //下拉了状态为true
				setTimeout(() => {
					this.triggered = false;
					uni.stopPullDownRefresh()
					this.$emit('changePageOptions', {
						...this.pageOptions,
						pageNum: 1
					})
					// listParmas.page = 1;//页码为1
					// reSetList()
					// 请求接口里面需要判断是不是最后一页   是最后一页 status赋值为‘loadmore’没有更多了
					// 请求接口
					this.$emit('pullDownRefresh')
				}, 1000)
			},
			reachBottom() {
				// status这个是加载状态
				if (this.status === 'loadmore') {
					this.$emit('changeStatus', 'loading')
					uni.showNavigationBarLoading()
					setTimeout(() => {
						//触底页码+1 
						// listParmas.page += 1;
						this.$emit('changePageOptions', {
							...this.pageOptions,
							pageNum: this.pageOptions.pageNum + 1
						})
						//请求接口
						this.$emit('reachBottom')
						uni.hideNavigationBarLoading()
					}, 1000);
				}
			},
			morepage(item) {
				uni.navigateTo({
					url: '/pages/courseManage/vip/ManageDetail'
				})
				uni.setStorageSync('detailUser', item)
			},
			openModel(tag, item) {
				if (tag == 'label') {
					this.$emit('getlableId', item.userId)
				} else if (tag == 'disable') {
					this.$emit('getuserId', item.userId)
					console.log(item.userId)
				} else {
					this.$emit('change', item.userId)
				}
			},
			// 单选
			changeitem(index) {
				this.$emit('changeItem', index) //传参
			}
			// api请求参考
			/* v3写法  你改一下
			type=refresh表示刷新
			 	const getListData = async (type = 'refresh') => {
			 		loadStatus.value = 'loading'//加载状态变成正在加载中  ‘loading’
					// 开始请求接口
			 		const result = await getDataFn({
			 			...parmas,
			 			...listParmas.value,
			 		})
			 		if (result) {
			 			returnData.value = result.data
			 			const {
			 				last_page,//最后一页是第几页
			 				data,
			 			} = result.data
						// 如果下拉  数据为第一页的
			 			if (type == 'refresh') {
			 				listData.value = data
			 			} else {
							// 否则是触底  数据等于当前页然后追加下一页的
			 				listData.value = [...listData.value, ...data]
			 			}
						// 如果当前页》=最后一页  nomore  没有更多了
			 			if (listParmas.value.page >= last_page) {
			 				loadStatus.value = 'nomore';
			 			} else {//不然就是还有下一页   loadmore加载更多
			 				loadStatus.value = 'loadmore';
			 			}
			 		}
			 	}
			 
			 
			 */

		}
	}
</script>

<style lang="scss" scoped>
	.btn-box {
		height: 26px;
		padding: 0 10px;
		margin-left: 10px;
		border-radius: 25px;
		font-weight: 400;
		font-size: 10px;
		line-height: 26px;
		box-sizing: border-box;
	}

	.list-item {
		padding: 10px;
		margin-bottom: 10px;
		background-color: #fff;
		border-radius: 12px;

		&-head {
			.phone {
				flex-shrink: 0;
				width: 30px;
				height: 30px;
			}

			&-l {
				flex: 1;
				overflow: hidden;
				margin-left: 10px;
				margin-right: 10px;
			}
		}

		&-copy {
			width: 20px;
			height: 20px;
		}

		&-re {
			font-size: 10px;
			margin-top: 5px;
		}

		&-desc {
			padding: 5px;
			color: #999;
			font-size: 12px;
		}

		.label {
			margin-right: 4px;
		}

		.value-num {
			margin-right: 18px;
			color: #222;
			font-weight: bold;
		}

		.taglist {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			color: #555;
			padding-top: 5px;

			view {
				margin: 0 5px 5px 0;
			}
		}

		&-footer {
			justify-content: flex-end;
			padding: 6px 0;

			.footer-tagbtn {
				color: #1677ff;
				background-color: #e7f2fe;
				border: 1px solid #c9e1fb;
			}

			.footer-red {
				color: #f93e3e;
				background-color: #fae7e7;
				border: 1px solid #f7a1a1;
			}

			&-btn {
				height: 26px;
				padding: 0 10px;
				margin-left: 10px;
				background-color: #f5f5f5;
				border-radius: 25px;
				font-weight: 400;
				font-size: 10px;
				line-height: 26px;
				border: 1px solid #f5f5f5;
				box-sizing: border-box;
			}
		}
	}
</style>