newEdition/pages/center/prohibited/first.vue

<template>
	<view class="pages">
		<view class="header">
			<view class="items" @tap="totalTimeShow = true">
				{{ showTimeCalender }}
				<u-icon name="arrow-down" size="24" style="padding-left: 12rpx;"></u-icon>
			</view>
			<view class="items" style="color: #1890FF;" @tap="jumpPage">
				明细
			</view>
		</view>
		<view class="wordslist">
			<!-- block -->
			<block v-for="(data, index) in pageData">
				<view class="item" :key="data.id" @click="jumpPage(data, index)">
					<view :class="{noneColor: index == 0 }" class="lside blue">{{ data.words }}</view>
					<view class="rside">{{ data.sumNum }}</view>
				</view>
			</block>

		</view>

		<u-calendar v-model="totalTimeShow" mode="range" @change="totalTimeChange"></u-calendar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageParams: {
					statDateStart: '', //开始时间
					statDateEnd: '', //结束时间
					projectId: uni.getStorageSync("buildingID").id, //项目id
				},
				showTimeCalender: '选择日期', //
				totalTimeShow: false, // 自定义时间

				pageData: [], // 页面数据
				inParams: '', // 入参
			};
		},

		onLoad(option) {
			if (option) {
				this.inParams = this.params(option)
			}

			this.findSensitiveWordsData()
		},

		methods: {

			// 对象转url参数F
			params(json) {
				return Object.keys(json).map(key => key + '=' + json[key]).join('&');
			},
			
			jumpPage(data) {
				uni.navigateTo({
					url: `/pages/center/prohibited/index?refresh=refresh&staTime=${this.pageParams.statDateStart}&endtime=${this.pageParams.statDateEnd}&words=${data.words}`
				});
			},

			// findSensitiveWordsData
			findSensitiveWordsData() {
				this.$u.post('/customer/findSensitiveWordsData', this.pageParams).then(res => {
					console.log(res)
					res.unshift({
						words: '违禁词',
						id: new Date().getTime(),
						sumNum: '违禁次数'
					})
					this.pageData = res
					console.log(this.pageData, '123321s')
				})
			},

			// 自定义时间
			totalTimeChange(e) {
				console.log(e)
				this.pageParams.statDateStart = e.startDate
				this.pageParams.statDateEnd = e.endDate
				this.showTimeCalender = `${e.startDate}-${e.endDate}`
				this.findSensitiveWordsData()
			},
		}
	}
</script>

<style lang="scss">
	.pages {
		width: 100vw;
		min-height: 100vh;
		display: flex;
		flex-direction: column;

		.header {
			width: 100%;
			height: 90rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.items {
				height: 100%;
				flex-grow: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #666666;
				font-size: 28rpx;
			}
		}

		.wordslist {
			width: 100%;
			padding: 20rpx;

			.item {
				width: 100%;
				height: 90rpx;
				font-size: 32rpx;
				display: flex;
				align-items: center;


				.lside {
					flex-grow: 1;

					&.blue {
						color: #1890FF;
					}


					&.noneColor {
						color: #333;
					}
				}

				.rside {
					flex-shrink: 0;
					width: 200rpx;
					text-align: right;
				}


			}
		}
	}
</style>