ylrz_scrm_company_h5/pages/courseManage/manage/manageIndex.vue

<template>
	<view class="column flex-1 hb">
		<view class="header-box ptb52 pl20">
			<view class="justify-between align-center">
				<view class="justify-start">
					<u-avatar :src="user.avatar" size="50"></u-avatar>
					<view class="column colorf ml16" style="color: #666;">
						<text>{{user.userName}}</text>
						<text class="mt20 fs24">ID:{{user.companyId}}</text>
					</view>
				</view>
				<view class="column justify-between mr20 ">
					<view class="box-btn base-color mb16" @click="exportlist">审核详情</view>
					<!-- <view class="box-btn base-color centerV" @click="lableSetup">标签设置</view> -->
				</view>
			</view>
			<!-- <view class="bgf mr4 radius20 p32 mt32 justify-start pb32">
				<view class="flex-1 pb20" @click="userdataDetail">
					<view class="bold">账户可用余额</view>
					<view class="bold fs48 base-color">{{balanceuserDay.balance}}</view>
				</view>
				<view class="flex-1 pb20 pl40" style="border-left:4rpx solid #0cb2ff;" @click="showday=!showday">
					<view class="bold"><text class="base-color">
							{{PickerName}}</text>已发金额</view>
					<view class="bold fs48 base-color">{{balanceuserDay.todayMoney}}</view>
				</view>
			</view> -->
		</view>
		<view class="bgf centerV" style="border-radius: 10rpx 10rpx 0 0; margin-top: -8rpx;">
			<u-tabs :list="list1" @click="clickTab" lineColor='#1773ff' lineWidth='40'
				activeStyle="font-weight:bold"></u-tabs>
		</view>
		<view class="column flex-1 scrolly">
			<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 class="mtb20 ml20 mr8 p20 bgf radius20" v-for="(item,index) in redpacklist" :key="index"
					@click="managedetail(item.userId,item)">
					<view class="justify-start align-center">
						<u-avatar :src="item.avatar" size="50"></u-avatar>
						<view class="ml20" @click.passive.stop>
							<view class="justify-start align-center">
								<text class="fs28 bold">{{item.nickName}}</text>
								<image class="w40 h40" src="https://fbylive.obs.cn-southwest-2.myhuaweicloud.com:443/app/images/copy_icon.png" 
								@click="copyId(item.nickName)" mode="aspectFill">
							</view>
							<view class="fs24 base-color-6">备注:{{item.remark}}</view>
						</view>
					</view>
					<view class="justify-around mt32">
						<view class="column align-center">
							<view class="fs24 base-color-3">今日观看人数</view>
							<view class="base-color fs28">
								<text class="bold fs40 base-color">{{item.todayWatchCount}}</text>人
							</view>
						</view>
						<view class="column align-center">
							<view class="fs24 base-color-3">今日完播人数</view>
							<view class="base-color fs28">
								<text class="bold fs40 base-color">{{item.todayFinishCount}}</text>人
							</view>
						</view>
						<view class="column align-center">
							<view class="fs24 base-color-3">今日完播率</view>
							<view class="base-color fs28">
								<text class="bold fs40 base-color" >{{item.todayFinishRate.toFixed(2)}}</text>%
							</view>
						</view>
						<view class="column align-center">
							<view class="fs24 base-color-3">今日红包金额</view>
							<view class="base-color fs28">
								<text class="bold fs40 base-color">{{item.todayRedPacketAmount}}</text>元
							</view>
						</view>
					</view>
					<view class="base-bg-f8 pl20 fs24 ptb8 mt4 radius20" >
						<text class="base-color-6">更换归属状态：</text>
						<text style="color: orange;" v-if="item.applyStatus==0">待审核</text>
						<text style="color: green;" v-if="item.applyStatus==1">审核通过</text>
						<text class="base-color-red" v-if="item.applyStatus==2">审核未通过</text>
						<text class=" base-color" v-if="item.applyStatus==3">暂无</text>
					</view>
					
					<view class="justify-between fs24 mt20 align-center"  @click.passive.stop>
						<view >
							<text @click="showmoreA(item)">更多</text></view>
						<view @click.passive.stop>
							<view class="ptb16 plr32 base-bg-false radius50 base-color-red fs28 bold"
								@click="changevipDetail(item.userId)">更换会员归属</view>
						</view>
						
					</view>
	
				</view>
				<u-loadmore :status="status" />
				<view class="ptb20"></view>
			</scroll-view>
		</view>
		<!-- <image class="invite-member" src="https://fbylive.obs.cn-southwest-2.myhuaweicloud.com:443/app/images/invite-member-icon.png" mode="aspectFill" @click="vipInvite">
		</image> -->
		<!-- 不要写在v-for里面 点击存到data里面-->
		<view class="">
			<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==1"></u-input>
							<u-input :placeholder="contpl" v-model="changephone" v-if="selnum==2"></u-input>
							<u-input :placeholder="contpl" v-model="changeremark" v-if="selnum==3"></u-input>
						</view>
					</u-modal>
				</view>
			</u-popup>
		</view>
		<view class="">
			<u-picker :show="showday" :columns="columns" keyName="label" style="flex:0;" @cancel="cancel"
				@confirm='confirm'></u-picker>
		</view>
	</view>
</template>

<script>
	import {
		getusergroup,
		getuserbalance,
		updategroupinfo
	} from "@/api/courseManage.js"
	export default {
		data() {
			return {
				list1: [{
						name: '销售员(0)',
					},
					// {
					// 	name: '待审群管(0)'
					// }, {
					// 	name: '已拒绝(0)'
					// }
				],
				user: [],
				showmore:false,
				showlist:false,
				contpl:'',
				changelist:'',
				changephone:'',
				changeremark:'',
				titlelist:'',
				selnum:0,
				showday: false,
				columns: [
					[{
							label: '今日',
							id: 1
						},
						{
							label: '昨日',
							id: 2
						},
						{
							label: '近七日',
							id: 3
						},
						{
							label: '本月',
							id: 4
						},
					],
				],
				redpacklist: [],
				triggered: false,
				status: 'loadmore',
				isEnabled: true,
				pageNum: 1,
				pageSize: 5,
				startTime: '',
				endTime: '',
				balanceuserDay: [],
				pickered: '',
				todayday: uni.$u.timeFormat(new Date(), 'yyyy-mm-dd'),
				PickerName: "今日",
				morelist:[
					{
						name:'复制ID',
						value:0,
						text:''
					},
					{
						name:'改姓名',
						value:1,
						text:'请输入姓名'
					},
					{
						name:'改手机号码',
						value:2,
						text:'请输入手机号码'
					},
					{
						name:'改备注',
						value:3,
						text:'请输入备注'
					}
				],
				openData:{}
			}
		},
		mounted() {
			this.user = uni.getStorageSync("companyUserInfo") ? JSON.parse(uni.getStorageSync("companyUserInfo")) : {}
			this.getredlist()
			// this.getuserbalancelist()
		},
		methods: {
			showmoreA(data){
				this.openData=data
				this.groupid=data.userId,
				this.showmore=!this.showmore
			},
			closemore(){
				this.showmore=false
			},
			openmore(){
				
			},
			updatagroup(){
				console.log( Number(this.groupid))
				const param={
					nickName:this.changelist,
					phoneNumber:this.changephone,
					remark:this.changeremark,
					userId: this.groupid
				}
				updategroupinfo(param).then(res=>{
					if(res.code==200){
						uni.showToast({
							icon: 'none',
							title: "修改成功"
						})
						this.getredlist('refresh')
					}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
				if(item.value==0){
					uni.setClipboardData({
						data: String(this.openData.userId),
						success: () => {
						  uni.showToast({
							title: '复制成功',
							icon: 'none',
							duration: 2000
						  });
						  },
					})
				}else if(item.value==1){
					this.changelist=this.openData.nickName
					this.showlist=true
				}else if(item.value==2){
					console.log(this.openData.phonenumber)
					this.changephone=this.openData.phonenumber
					this.showlist=true
				}else{
					this.changeremark=this.openData.remark
					this.showlist=true
				}
			},
			confirmchange(){
				this.updatagroup()
				this.showlist=false
				setTimeout(()=>{
					this.showmore=false
				},200)
			},
			copyId(id) {
				uni.setClipboardData({
					data: String(id),
					success: () => {
					  uni.showToast({
						title: '复制成功',
						icon: 'none',
						duration: 2000
					  });
					  },
				})
			},
			getuserbalancelist() {
				const params = {
					companyId: this.user.companyId,
					endTime: this.endTime,
					startTime: this.startTime,
				}
				getuserbalance(params).then(res => {
					if (res.code == 200) {
						this.balanceuserDay = res.data
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			},
			pullDownRefresh() {
				// 下拉刷新
				this.triggered = true; //下拉了状态为true
				setTimeout(() => {
					this.triggered = false;
					uni.stopPullDownRefresh()
					this.pageNum = 1;
					this.getredlist('refresh') //触底  不穿执行else
					// 请求接口里面需要判断是不是最后一页   是最后一页 status赋值为‘loadmore’没有更多了
					// 请求接口
				}, 1000)
			},
			reachBottom() {
				// status这个是加载状态
				console.log(111);
				if (this.status === 'loadmore') {
					this.status = 'loading'
					uni.showNavigationBarLoading()
					setTimeout(() => {
						this.pageNum++
						this.getredlist() //触底  不穿执行else
						uni.hideNavigationBarLoading()
					}, 1000);
				}
			},
			 getredlist(type) {
				const params = {
					pageNum: this.pageNum,
					pageSize: this.pageSize,
				}
				 getusergroup(params).then(res => {
					if (res.code == 200) {
						console.log(res)
						this.list1[0].name = '销售员(' + res.data.total + ')'
						// refresh 下拉
						if (type == 'refresh') {
							this.redpacklist = res.data.list
						} else {
							// 加载更多 当前页和下一页合并
							this.redpacklist = [...this.redpacklist, ...res.data.list]
						}
						if (this.pageNum >= res.data.pages) {
							this.status = 'nomore'
						} else {
							this.status = 'loadmore'
						}
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			},
			cancel() {
				this.showday = !this.showday
			},
			close() {
				this.showday = !this.showday
			},
			confirm(e) {
				this.pickered = e.indexs[0]
				this.PickerName = e.value[0].label
				if (this.pickered == 0) {
					this.startTime = this.todayday
					this.endTime = this.todayday
				} else if (this.pickered == 1) {
					let yesterday = new Date();
					yesterday.setDate(yesterday.getDate() - 1);

					this.startTime = uni.$u.timeFormat(yesterday, 'yyyy-mm-dd')
					this.endTime = uni.$u.timeFormat(yesterday, 'yyyy-mm-dd')
				} else if (this.pickered == 2) {
					let yesterday = new Date();
					yesterday.setDate(yesterday.getDate() - 6);

					this.startTime = uni.$u.timeFormat(yesterday, 'yyyy-mm-dd')
					this.endTime = uni.$u.timeFormat(this.todayday, 'yyyy-mm-dd')
				} else {
					let today = new Date();
					let lastDayOfMonth = new Date(today.getFullYear(), today.getMonth() + 1, 0);

					this.startTime = uni.$u.timeFormat(this.todayday, 'yyyy-mm') + '-01'
					this.endTime = uni.$u.timeFormat(lastDayOfMonth, 'yyyy-mm-dd')
				}
				this.startTime = this.startTime + ' 00:00:00'
				this.endTime = this.endTime + ' 23:59:59'
				this.showday = !this.showday
				this.getuserbalancelist()
			},
			clickTab(item) {
				// console.log('item', item);  
			},
			exportlist() {
				uni.navigateTo({
					url: "/pages/courseManage/manage/exprotList"
				})
			},
			lableSetup() {
				uni.navigateTo({
					url: "/pages/courseManage/manage/lableSetup"
				})
			},
			userdataDetail() {
				uni.navigateTo({
					url: "/pages/courseManage/manage/userDataDetail"
				})
			},
			managedetail(id,item) {
				uni.setStorageSync('grouplist', item)
				uni.navigateTo({
					url: "/pages/courseManage/manage/manageDetail?id="+id
				})
			},
			changevipDetail(id) {
				uni.navigateTo({
					url: '/pages/courseManage/manage/changeVip?id='+id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header-box {
		// background: linear-gradient(to right, rgba(66, 144, 240, 1.0), rgba(39, 107, 254, 1));
		background: linear-gradient(to bottom, #dae9ff, #e1e1fd);
		
	}

	.box-btn {
		font-size: 28rpx;
		background-color: #fff;
		border-radius: 8rpx;
		padding: 4rpx 20rpx;
		width: fit-content;
	}

	.invite-member {
		height: 55px;
		width: 50px;
		position: fixed;
		bottom: 80px;
		right: 10px;
		cursor: pointer;
	}
</style>