ylrz_scrm_company_h5/components/vipUserItem.vue

<template>
	<view class=" column flex-1 hb" style="height: 100%;">
		<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" @click="morepage(item)" >
					<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;" @click.passive.stop>
									<text class="list-item-name one-t single-line-ellipsis" 
									style="width: fit-content;">{{item.nickname}}</text>
									<image class="list-item-copy" src="@/static/images/copy_icon.png" mode="aspectFill"
										@click="copyId(item.nickname)">
									</image>
								</view>
								<text class="list-item-name one-t fs24 base-color-9 ">备注：{{item.remark}}</text>
								<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)" @click.passive.stop></image>
					</view>
					<view class="list-item-desc">
						<view class="taglist  ">
							<view><u-tag :text="item.companyUserNickName" 
							size="mini" color="#029aff" bgColor="#fff" borderColor="#fff"></u-tag></view>
						<view v-for="(tag,i) in item.tag ? item.tag.split(',') : []" :key="index">
							<u-tag :text="tag" size="mini" color="#999" bgColor="#fff" borderColor="#fff"></u-tag>
						</view>
						</view>
						<view style="margin-top: 5px;" v-if="item.status==1">
							<text class="label u-border-right pr20" style="color:#00af05;" v-if="item.courseCountStatus==1">正常看课</text>
							<text class="label u-border-right pr20" style="color:#ff8921;" 
							v-else-if="item.courseCountStatus==2">停止看课{{item.stopWatchDays || 0}}天</text>
							<text class="label u-border-right pr20" style="color:#f00;" v-else>未看过课</text>
							<text class="label pl20 ">参与营期</text><text class="value-num ">{{item.partCourseCount || 0}}</text>
							<text class="label u-border-left pl20">缺课数量</text><text class="value-num" style="color:red">{{item.missCourseCount || 0}}</text>
						</view>
					</view>
					<view class="justify-between align-center" v-if="!isShowSelectAll" @click.passive.stop>
						<view @click="changemore(item)" 
						 class="fs24 u-border ptb4 plr18 radius40 base-color-6">更多</view>
						<view class="justify-start">
							<view class="btn-box base-color base-bg-sure bor-blue" @click="openModel('label',item)"
								v-if="item.status==1">改标签</view>
							<view class="btn-box base-color-red base-bg-false bor-red"
								@click="openModel('disable',item)" v-if="item.status==1">禁用</view>
							<view class="btn-box base-color-red base-bg-false bor-red"
								@click="openModel('disabled',item)" v-if="item.status==0">取消禁用</view>
							<!-- <view class="btn-box base-color-red base-bg-false bor-red" @click="openModel('change',item)"
								v-if="item.status!=7 && user.userType==0">更换归属</view> -->
						</view>

					</view>
				</view>
			</view>
			<u-loadmore :status="status" />
		</scroll-view>
		<u-popup :show="showmore" @close="closemore" @open="openmore" >
			<view class="column align-center">
				<view class="m20" v-for="(items,index) in morelist"
				 :key="items.value" @click="nameMore(items)">
					{{items.name}}</view>
				<u-modal :show="showlist" :title="titlelist" @confirm="confirmchange" >
					<view class="slot-content">
						<u-input :placeholder="contpl" v-model="changelist" v-if="selnum==0"></u-input>
						<u-input :placeholder="contpl" v-model="changeremark" v-if="selnum==1"></u-input>
					</view>
				</u-modal>
			</view>
		</u-popup>
		<u-notify ref="uNotify" message=""></u-notify>
	</view>
</template>

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

		},
		data() {
			return {
				checkList: [],
				cccc: [false],
				user: [],
				isEnabled: true,
				triggered: false,
				stopWatchDays:'停止看课三天',
				showmore:false,
				contpl:'',
				changelist:'',
				changeremark:'',
				selnum:'',
				titlelist:'',
				showlist:false,
				groupid:'',
				openData:[],
				morelist:[
					{
						name:'改姓名',
						value:0,
						text:'请输入姓名'
					},
					{
						name:'改备注',
						value:1,
						text:'请输入备注'
					}
				],
			}
		},
		mounted() {
			this.user = uni.getStorageSync("companyUserInfo") ? JSON.parse(uni.getStorageSync("companyUserInfo")) : {}
		},
		methods: {
			changemore(data){
				this.openData=data
				this.groupid=data.userId,
				this.showmore=!this.showmore
			},
			confirmchange(){
				this.updatagroup()
				console.log(this.openData.userId)
				console.log(this.changeremark)
				console.log(this.changelist)
				this.showlist=false
				setTimeout(()=>{
					this.showmore=false
				},200)
			},
			updatagroup(){
				const data={
					fsUserId:this.openData.userId,
					remark:this.changeremark,
					nickName:this.changelist
				}
				getchangesUserInfo(data).then(res=>{
					if(res.code==200){
						uni.showToast({
							icon: 'none',
							title: "修改成功"
						})
						this.$emit('changelistname')
					}else{
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			},
			nameMore(item){
				console.log(item)
				this.titlelist=item.name
				this.contpl=item.text
				this.selnum=item.value
				console.log(this.openData)
				if(item.value==0){
					this.changelist=this.openData.nickname
					this.changeremark=this.openData.remark
					this.showlist=true
				}else if(item.value==1){
					this.changelist=this.openData.nickname
					this.changeremark=this.openData.remark
					this.showlist=true
				}
			},
			closemore(){
				this.showmore=!this.showmore
			},
			openmore(){},
			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?id='+item.userId
				})
				uni.setStorageSync('detailUser', item)
			},
			openModel(tag, item) {
				if (tag == 'label') {
					this.$emit('getlableId', item.userId)
				} else if (tag == 'disable') {
					this.$emit('getuserId', item.userId)
				}else if (tag == 'disabled') {
					this.$emit('getuserIds', 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 0 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>