提交修改

pages/center/Piabodata/index.vue

@@ -1,19 +1,14 @@
 <template>
 	<view class="box">
-		<view class="boxtittab">
-			<view class="tabbox">
-				<view :class="{ activecllasscet: activeTotal == 4 }" @click="tabtimetap(4)">近七天</view>
+		<view class="boxtittabs">
+			<view class="items" @tap="screenShow = true">{{ showTimeText }}
+				<u-icon name="arrow-down" size="24" style="padding-left: 12rpx"></u-icon>
 			</view>
-			<view class="tabbox">
-				<view :class="{ activecllasscet: activeTotal == 5 }" @click="tabtimetap(5)">近15天</view>
-			</view>
-			<view class="tabbox">
-				<view :class="{ activecllasscet: activeTotal == 6 }" @click="tabtimetap(6)">近30天</view>
-			</view>
-			<view class="tabbox">
-				<view :class="{ activecllasscet: activeTotal == 3 }" @click="tabtimetap(3)">自定义</view>
+			<view class="items" @tap="showTemplate = true">{{ showBeText }}
+				<u-icon name="arrow-down" size="24" style="padding-left: 12rpx"></u-icon>
 			</view>
 		</view>
+
 		<view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>
 		<view class="boxzonglan" style="min-height: 400rpx;">
 			<view class="zonglantit">简报</view>
@@ -172,6 +167,34 @@
 
 		<!-- 加载组件 -->
 		<u-loadings v-model="LOADING"></u-loadings>
+
+
+
+		<!-- 更多筛选 -->
+		<u-popup v-model="screenShow" mode="bottom" height="400">
+			<view class="screen">
+				<view class="boxtittab">
+					<view class="tabbox">
+						<view :class="{ activecllasscet: activeTotal == 4 }" @click="tabtimetap(4, '近七天')">近七天</view>
+					</view>
+					<view class="tabbox">
+						<view :class="{ activecllasscet: activeTotal == 5 }" @click="tabtimetap(5, '近15天')">近15天</view>
+					</view>
+					<view class="tabbox">
+						<view :class="{ activecllasscet: activeTotal == 6 }" @click="tabtimetap(6, '近30天')">近30天</view>
+					</view>
+					<view class="tabbox">
+						<view :class="{ activecllasscet: activeTotal == 3 }" @click="tabtimetap(3, '自定义')">自定义</view>
+					</view>
+				</view>
+			</view>
+		</u-popup>
+
+
+		<!-- 销讲业务 -->
+		<u-select :mask-close-able="false" label-name="templateName" value-name="id" v-model="showTemplate"
+			mode="single-column" :list="templateList" @cancel="templateCancel" @confirm="templateConfirm"></u-select>
+
 	</view>
 </template>
 
@@ -328,7 +351,15 @@
 						itemCount: 8
 					}
 				},
-				
+
+				screenShow: false, // 时间筛选弹窗
+				showTimeText: '近七天', // 展示文字
+				showBeText: '全部业务', // 
+				templateList: [], // 销讲业务
+				showTemplate: false, // 展示选择销讲业务弹窗
+				marketingBusiness: '', // 选择的业务id
+
+				showTemplates: false, // 展示选择销讲业务弹窗
 			};
 		},
 		onShow() {
@@ -344,7 +375,7 @@
 			// 获取项目id
 			this.houseId = uni.getStorageSync('buildingID').id;
 			// 获取数据看板
-
+			this.getMarketingBusiness()
 			// 获取员工
 			this.getStaffList()
 			// 获取团队
@@ -359,6 +390,7 @@
 			this.getindexZxl()
 		},
 		onPullDownRefresh() {
+			this.getMarketingBusiness()
 			// 获取员工
 			this.getStaffList()
 			// 获取团队
@@ -376,6 +408,32 @@
 			}, 1000);
 		},
 		methods: {
+			// 销讲业务方法
+			templateCancel() {
+				this.showTemplate = false;
+			},
+
+			// 确认选择销讲业务
+			templateConfirm(e) {
+				this.showTemplate = false;
+				this.marketingBusiness = e[0].value
+				this.showBeText = e[0].label
+				this.getdata()
+			},
+
+
+			// 获取销讲业务
+			getMarketingBusiness() {
+				this.$u.get('/customer/marketingBusiness', {
+					houseId: this.houseId,
+				}).then(res => {
+					this.templateList = res
+					this.templateList.unshift({
+						templateName: '全部业务',
+						id: ''
+					})
+				})
+			},
 			getPercent(num) {
 				console.log(num)
 				return num || 0
@@ -404,7 +462,8 @@
 						houseId: this.houseId,
 						timeType: this.lastEndDate ? null : this.activeTotal,
 						lastEndDate: this.lastEndDate,
-						lastStartDate: this.lastStartDate
+						lastStartDate: this.lastStartDate,
+						marketingBusiness: this.marketingBusiness,
 					})
 					.then(res => {
 						// console.log(res)
@@ -419,7 +478,8 @@
 						houseId: this.houseId,
 						timeType: this.lastEndDate ? null : this.activeTotal,
 						lastEndDate: this.lastEndDate,
-						lastStartDate: this.lastStartDate
+						lastStartDate: this.lastStartDate,
+						marketingBusiness: this.marketingBusiness,
 					})
 					.then(res => {
 						this.LOADING = false
@@ -451,7 +511,8 @@
 						houseId: this.houseId,
 						timeType: this.lastEndDate ? null : this.activeTotal,
 						lastEndDate: this.lastEndDate,
-						lastStartDate: this.lastStartDate
+						lastStartDate: this.lastStartDate,
+						marketingBusiness: this.marketingBusiness,
 					})
 					.then(res => {
 						res.fraction = (res.fraction || 0) + '%'
@@ -490,7 +551,8 @@
 						houseId: this.houseId,
 						timeType: this.lastEndDate ? null : this.activeTotal + '',
 						lastEndDate: this.lastEndDate,
-						lastStartDate: this.lastStartDate
+						lastStartDate: this.lastStartDate,
+						marketingBusiness: this.marketingBusiness,
 					})
 					.then(res => {
 						this.allnum1 = res.avg[0]
@@ -523,7 +585,8 @@
 						houseId: this.houseId,
 						timeType: this.lastEndDate ? null : this.activeTotal + '',
 						lastEndDate: this.lastEndDate,
-						lastStartDate: this.lastStartDate
+						lastStartDate: this.lastStartDate,
+						marketingBusiness: this.marketingBusiness,
 					})
 					.then(res => {
 						// console.log(res)
@@ -552,11 +615,15 @@
 					})
 			},
 			//时间切换
-			tabtimetap(index) {
+			tabtimetap(index, text) {
 				this.activeTotal = index;
 				if (index == 3) {
 					this.totalTimeShow = true;
+					this.screenShow = false
 				} else {
+					this.screenShow = false
+					this.showTimeText = text
+					this.activeTotal = index;
 					this.lastEndDate = ''
 					this.lastStartDate = ''
 					this.getdata()
@@ -583,6 +650,8 @@
 			//自定义时间
 			totalTimeChange(e) {
 				console.log(e.startDate, e.endDate)
+				this.screenShow = false
+				this.showTimeText = `${e.startDate}-${e.endDate}`
 				this.activeTotal = 3;
 				this.lastEndDate = e.endDate
 				this.lastStartDate = e.startDate
@@ -668,17 +737,66 @@
 	};
 </script>
 <style lang="scss" scoped>
-	.box {
+	.boxtittabs {
+		width: 100%;
+		height: 92rpx;
+		background: #FFFFFF;
+		display: flex;
+		align-items: center;
+		position: sticky;
+		top: var(--window-top);
+
+		.items {
+			padding: 0 24rpx;
+			width: 50%;
+			height: 100%;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			overflow: hidden;
+			white-space: nowrap;
+			text-overflow: ellipsis;
+		}
+	}
+
+	.screen {
 		width: 100%;
 		height: 100%;
-		background: #FAFAFA;
+		display: flex;
+		//时间切换的样式
+		.boxtittab {
+			width: 100%;
+			height: 100%;
+			background: #FFFFFF;
+			display: flex;
+			flex-direction: column;
+			border: none;
+
+			.tabbox {
+				flex: 1;
+				height: 100%;
+				text-align: center;
+				line-height: 92rpx;
+				color: #666666;
+				font-size: 28rpx;
+				font-weight: 400;
+				display: flex;
+				justify-content: center;
+
+				.activecllasscet {
+					width: 96rpx;
+					color: #2671E2;
+					font-weight: 600;
+					border-bottom: 4rpx solid #2671E2;
+				}
+			}
+		}
 	}
 
-	.boxtittab {
-		position: sticky;
-		top: var(--window-top);
-		z-index: 999;
-		background: #fff;
+	.box {
+		width: 100%;
+		height: 100%;
+		background: #FAFAFA;
 	}
 
 	.Piabodata-box {
@@ -724,13 +842,14 @@
 	.grid:nth-child(3) {
 		border-right: 1rpx solid #E0E0E0;
 	}
-	
+
 	.tabbox {
 		overflow: hidden;
+
 		.activecllasscet {
 			width: 100%;
 		}
-		
-		
+
+
 	}
 </style>