crm-uniapp/pages/components/pages/performanceSet/list.vue

<template>
	<uv-navbar :fixed="false" @leftClick="$onClickLeft" bgColor="#09b4f1">
		<template v-slot:left>
			<uv-icon name="arrow-left" size="19" color="#ffffff"></uv-icon>
		</template>
		<template v-slot:center>
			<text style="color:#ffffff">{{title}}</text>
		</template>
	</uv-navbar>
	<view class="container">
		<view class="pb-2 flex px-5" style="background-color: #09b4f1;">
			<uv-search placeholder="搜索用户名称" v-model="keyword" bgColor="#ffffff" :customStyle="customStyle"
				:show-action="false" @change="onSearch"></uv-search>
			<uv-icon name="http://sys.znkjfw.com/imgs/crmimages/screen.png" :size="26" @click="openSearch"></uv-icon>
		</view>
		<view class="wrap">
			<scroll-view scroll-y class="sv" :style="{height:scrollHeight+'px'}" :scroll-top="scrollTop" lower-threshold="20"
				@scroll="scroll" @scrolltolower="reachBottom">
				<view class="page-box" @touchmove="handletouchstart" @touchend="handletouchend">
					<block v-if="dataList.length > 0">
						<view class="client" v-for="(item, index) in dataList" :key="index">
							<view style="display: flex;align-items: center;justify-content: space-between;">
								<view class="content">
									<view class="title ">用户名称：</view>
									<view class="value ">{{item.nickname}}</view>
								</view>
								<div @click.stop="toDetail(item)">
									<uv-text color="#09b4f1" suffixIcon="arrow-right" iconStyle="font-size: 18px;color:#09b4f1"
										text="查看详情"></uv-text>
								</div>
							</view>
							<view class="content">
								<view class="title ">日期：</view>
								<view class="value ">{{item.year}}-{{item.month}}</view>
							</view>
							<view class="content">
								<view class="title ">实际回款额：</view>
								<view class="value ">{{item.actualPayment}}元</view>
							</view>
							<view class="content">
								<view class="title ">实际销售额：</view>
								<view class="value ">{{item.actualSale}}元</view>
							</view>
							<view class="content">
								<view class="title ">销售任务：</view>
								<view class="value ">{{item.saleTask||0}}%</view>
							</view>
							<view class="content">
								<view class="title ">回款任务：</view>
								<view class="value ">{{item.paymentTask||0}}%</view>
							</view>
							<view class="content">
								<view class="title ">评分任务：</view>
								<view class="value ">{{item.scoreTask||0}}%</view>
							</view>
							<view class="content">
								<view class="title ">评分：</view>
								<view class="value ">{{item.score||0}}分</view>
							</view>
							<view style="display: flex;align-items: center;justify-content: space-between;">
								<view class="content">
									<view class="title ">总分：</view>
									<view class="value ">{{item.totalScore||0}}分</view>
								</view>
								<view @click.stop="onSubmitItem(item)"
									v-if="userInfo.id == item.userId && item.canConfirmFlag === 1 && item.confirmFlag === 0">
									<button type="primary" style="background-color: #09b4f1;width: 120rpx;">确定</button>
								</view>
							</view>
						</view>
						<uv-load-more :status=" listStatus" />
					</block>
					<uv-empty text="暂无数据" v-else margin-top="100" mode="list"></uv-empty>
				</view>
			</scroll-view>
		</view>
		<uv-popup ref="popup" @change="change" mode="top" bgColor="" :customStyle="customStyle2" :overlay="true">
			<view class="p-2">
				<uv-form labelPosition="top" ref="form" labelWidth="70">
					<uv-form-item label="年份" @click="showYearSelect">
						<uv-input v-model="dealYearName" disabled disabledColor="#ffffff" placeholder="请选择年份">
							<template v-slot:suffix>
								<uv-icon name="arrow-right"></uv-icon>
							</template>
						</uv-input>
					</uv-form-item>
					<uv-form-item label="月份" @click="showMonthSelect">
						<uv-input v-model="dealMonthName" disabled disabledColor="#ffffff" placeholder="请选择月份">
							<template v-slot:suffix>
								<uv-icon name="arrow-right"></uv-icon>
							</template>
						</uv-input>
					</uv-form-item>
					<view class="flex mt-2">
						<view class="flex-1" style="margin-right: 8rpx;">
							<uv-button type="success" :plain="true" text="确定" @click="onSubmit"></uv-button>
						</view>
						<view class="flex-1" style="margin-left: 8rpx;">
							<uv-button type="error" :plain="true" text="重置" @click="onReset"></uv-button>
						</view>
					</view>
				</uv-form>
			</view>
		</uv-popup>
		<uv-action-sheet ref="yearSelect" :actions="yearActions" title="请选择年份" @select="onYearSelect">
		</uv-action-sheet>
		<uv-action-sheet ref="monthSelect" :actions="monthActions" title="请选择月份" @select="onMonthSelect">
		</uv-action-sheet>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue'
	import {
		onLoad,
		onShow,
		onReady
	} from '@dcloudio/uni-app'
	import {
		getSalesPerformancePage,
		updateSalesPerformance
	} from '@/api/customer'
	import {
		userGetUserInfo
	} from '@/api/user'
	import {
		formatDateTime
	} from '@/utils/util'
	import {
		useMainStore
	} from '@/store/store'
	import {
		storeToRefs
	} from 'pinia'
	import {
		handleLoginFailure
	} from '@/utils'
	const main = useMainStore()
	const {
		isLogin,
	} = storeToRefs(main)
	const title = ref('业绩结算')
	const keyword = ref('')
	const scrollHeight = ref(0)
	const pH = ref(0)
	const scrollTop = ref(-1)
	const specClass = ref('hide')
	const oldScrollTop = ref(0)
	const dataList = ref([])
	const dx = ref(0)
	const page = ref(1)
	const pageSize = ref(10)
	const lastPage = ref(false)
	const listStatus = ref('loadmore')
	const isRefresh = ref(false)
	const yearActions = ref(
		[{
				name: '2022',
				value: 2020
			}, {
				name: '2023',
				value: 2023
			},
			{
				name: '2024',
				value: 2024
			},
			{
				name: '2025',
				value: 2025
			},
			{
				name: '2026',
				value: 2026
			},
			{
				name: '2027',
				value: 2027
			}, {
				name: '2028',
				value: 2028
			}
		]
	)
	const monthActions = ref(
		[{
				name: "一月",
				value: 1
			},
			{
				name: "二月",
				value: 2
			},
			{
				name: "三月",
				value: 3
			},
			{
				name: "四月",
				value: 4
			},
			{
				name: "五月",
				value: 5
			},
			{
				name: "六月",
				value: 6
			},
			{
				name: "七月",
				value: 7
			},
			{
				name: "八月",
				value: 8
			},
			{
				name: "九月",
				value: 9
			},
			{
				name: "十月",
				value: 10
			},
			{
				name: "十一月",
				value: 11
			},
			{
				name: "十二月",
				value: 12
			}
		]
	)

	defineExpose({
		isRefresh
	})
	const customStyle = computed(() => {
		return {
			paddingLeft: '10rpx',
			paddingRight: '120rpx'
		}
	})
	const statusBarHeight = ref(0)
	statusBarHeight.value = uni.getSystemInfoSync().statusBarHeight
	const customStyle2 = computed(() => {
		return {
			paddingTop: (uni.getSystemInfoSync().statusBarHeight + 40) + 'px',
			paddingBottom: 15 + 'px',
			backgroundColor: '#ffffff'
		}
	})
	const popup = ref()

	onReady(() => {
		uni.getSystemInfo({
			success(res) {
				pH.value = res.windowHeight
				let scrollH = uni.createSelectorQuery().select(".sv")
				scrollH.boundingClientRect(data => {
					let pH0 = pH.value
					scrollHeight.value = pH0 - data.top - 5
				}).exec()
			}
		})
	})

	onLoad(async (e) => {
		await isConfirmShow()
		await getCustomerList();
	})

	onShow(() => {
		if (isRefresh.value) {
			isRefresh.value = false
			page.value = 1
			lastPage.value = false
			scrollTop.value = 0
			dataList.value = []
			getCustomerList()
		}
	})

	const userInfo = ref()
	const isConfirmShow = async () => {
		if (uni.getStorageSync('userinfo')) {
			userInfo.value = uni.getStorageSync('userinfo')
		} else {
			userInfo.value = await userGetUserInfo()
			main.SET_MEMBER(userInfo.value)
		}
	}
	const onSubmitItem = (item) => {
		item.confirmFlag = 1
		updateSalesPerformance(item).then(res => {
			uni.showToast({
				title: '确认成功',
				icon: 'success',
				duration: 2000
			})
			getCustomerList()
		})
	}

	const openSearch = () => {
		popup.value.open()
	}

	//详情
	const toDetail = (item) => {
		uni.navigateTo({
			url: `/pages/components/pages/performanceSet/detail?id=${item.id}`
		})
	}

	//年份切换
	const yearSelect = ref()
	const dealYearName = ref()
	const dealYear = ref('')
	const showYearSelect = () => {
		yearSelect.value.open()
	}
	const onYearSelect = (val) => {
		dealYearName.value = val.name
		dealYear.value = val.value
	}
	//月份切换
	const monthSelect = ref()
	const dealMonthName = ref()
	const dealMonth = ref('')
	const showMonthSelect = () => {
		monthSelect.value.open()
	}
	const onMonthSelect = (val) => {
		dealMonthName.value = val.name
		dealMonth.value = val.value
	}


	const onReset = () => {
		dealMonth.value = undefined
		dealYear.value = undefined
		dealMonthName.value = ''
		dealYearName.value = ''
	}

	const onSubmit = () => {
		page.value = 1
		lastPage.value = false
		getCustomerList()
		popup.value.close()
	}
	const handletouchstart = () => {
		specClass.value = 'show'
	}
	const handletouchend = () => {
		specClass.value = 'hide'
	}

	// 页面数据
	const getCustomerList = async (isNextPage, pages) => {
		await getSalesPerformancePage({
			pageNo: page.value,
			pageSize: pageSize.value,
			nickname: keyword.value,
			month: dealMonth.value,
			year: dealYear.value,
			userId: userInfo.value.id
		}).then(res => {
			res.list.forEach((item, index) => {
				if (item.tags) {
					item.tagsArr = item.tags.split(',')
				}
			})
			if (res) {
				// 不够一页
				if (res.list.length < 10) {
					listStatus.value = 'nomore'
				}
				// 最后一页
				if (res.list.length == 0) {
					lastPage.value = true
				}
				// 第二页开始
				if (isNextPage) {
					dataList.value = dataList.value.concat(res.list)
					return
				}
				dataList.value = res.list
			}
		})
	}
	// scroll 滚动记录
	const scroll = (e) => {
		oldScrollTop.value = e.detail.scrollTop; // 必要
	}
	// 滚动到底部
	const reachBottom = () => {
		if (lastPage.value || listStatus.value == 'loading') return;
		if (!lastPage.value) {
			listStatus.value = 'loading';
			setTimeout(() => {
				listStatus.value = 'loadmore'
				getCustomerList(true, ++page.value)
			}, 500)
		}
	}
	// 点击搜索
	const onSearch = () => {
		page.value = 1
		lastPage.value = false
		getCustomerList()
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: #F7F7F7;
	}

	.page-box {
		padding: 20rpx 20rpx 45rpx;
	}


	.client {
		width: 710rpx;
		background-color: #ffffff;
		padding: 14px 24rpx;
		border-radius: 20rpx;
		box-sizing: border-box;
		font-size: 28rpx;
		margin-bottom: 22rpx;

		.content {
			display: flex;
			align-items: center;
			padding: 8rpx 0;

			.title {
				font-size: 28rpx;
				color: #000;
			}

			.value {
				font-size: 28rpx;
				color: #666;
			}

		}

	}

	.wrap {
		display: flex;
		flex-direction: column;
		width: 100%;
	}
</style>