jiuyiUniapp/jiuyi2/pages/index/dataCenter/dataCenter.vue

<script setup>
	// 数据中心
	import {
		ref,
		reactive,
		computed,
	} from 'vue';
	import {
		onLoad,
		onReady,
		onHide,
		onUnload,
	} from '@dcloudio/uni-app'
	// 
	import api from '@/api/index.js'
	// 
	import util from '@/common/js/util.js'
	import {
		useStore
	} from 'vuex'
	// 顶部导航
	import apex from '@/components/header/apex.vue'
	// 支付密码
	import payPwd from '@/components/mine/payPwd.vue'
	// 
	const store = useStore()
	// 配置项
	const opts = reactive({
		color: ["#D8D8D8", "#C2ECFF", "#FFD2D2", "#C2FFCC", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
		padding: [0, 35, 0, 0],
		touchMoveLimit: 24,
		enableScroll: true,
		legend: {
			padding: 20,
			margin: 30,
			position: 'top',
			backgroundColor: 'rgb(0,0,0)',
			fontColor: '#fff',
			itemGap: 10,
		},
		xAxis: {
			titleFontSize: 16,
			disableGrid: true,
			scrollShow: true,
			itemCount: 10,
			showTitle: true,
			title: '秒数',
		},
		yAxis: {
			data: [{
				min: 0,
				titleFontSize: 16,
				title: '人数',
			}],
			showTitle: true,
		},
		extra: {
			column: {
				type: "group",
				width: 5,
				activeBgColor: "#000000",
				activeBgOpacity: 0.08
			},
		}
	})
	// 图表数据
	const chartData = reactive({})
	// 详情
	const detail = reactive({})
	// 视频id
	const videoId = ref('')
	// 是否解锁
	const isLock = ref(false)
	// 系统配置
	const config = computed(() => {
		return store.state.config
	})

	onLoad((option) => {
		if (option.videoId) videoId.value = option.videoId
		// 获取详情
		getDetail()
		// 获取流量统计
		getFlow()
	})

	// 查看流量
	function getFlow() {
		api.video.getFlow({
			data: {
				videoId: videoId.value,
			},
		}).then(res => {
			if (res.code === 200) {
				const result = res.data
				// 是否解锁
				if (result.isLock) Object.assign(chartData, {}, res.data)
				isLock.value = result.isLock
				return
			}
			util.alert({
				content: res.msg,
				showCancel: false,
			})
		})
	}

	// 详情
	function getDetail() {
		api.video.getStatistics({
			data: {
				videoId: videoId.value,
			},
		}).then(res => {
			if (res.code === 200) {
				// 详情
				Object.assign(detail, {}, res.data)
				return
			}
			util.alert({
				content: res.msg,
				showCancel: false,
			})
		})
	}

	// 解锁查看流量统计表
	function handleUnlock() {
		api.video.unlockStatistics({}).then(res => {
			if (res.code === 200) {
				// 获取流量统计
				getFlow()
				return
			}
			util.alert({
				content: res.msg,
				showCancel: false,
			})
		})
	}

	/**
	 * 跳转
	 * @param {Object} url 路径参数
	 */
	function link(url) {
		uni.navigateTo({
			url,
		})
	}
</script>

<template>
	<view class="app">
		<apex title="数据中心">
			<template #right>
				<view class="rows c999 f24" @click="link(util.setUrl('/pages/index/dataCenter/like',{videoId: videoId}))">
					<view class="ver mr10">
						<image class="wh26" src="/static/indexLike1.png" mode="aspectFit" />
						<view>公开赞</view>
					</view>
					<view class="ver mr10">
						<image class="wh26" src="/static/privateLike.png" mode="aspectFit" />
						<view>隐私赞</view>
					</view>
				</view>
			</template>
		</apex>

		<!-- 顶部 -->
		<view class="apex  ptb30 plr30 bfff">
			<view class="rows">
				<view class="title c333 f36 b">统计中心</view>
			</view>
			<!-- 查看时间 -->
			<view class="line mt20 c999 f26">统计时间：{{detail.statisticsTime}}</view>
		</view>

		<!-- 视频详情 -->
		<view class="video df mtb20 ptb20 plr30 bfff">
			<image class="poster br10" :src="detail.coverUrl" mode="aspectFill" />
			<view class="info df fdc jcsb f1 ml30">
				<view class="title t2hd f34 c111">{{detail.title}}</view>
				<view class="desc t2hd f28 c666">{{detail.description}}</view>
				<view class="time f26 c999">{{detail.createTime}}</view>
			</view>
		</view>

		<view class="container">
			<view class="rows">
				<view class="title">流量统计</view>

				<view class="lock rows ptb5 plr20 bar cfff f28" :class="{'active': !isLock}">
					<image class="lockImg wh30" src="/static/dataLock.png" mode="aspectFit" />
					<image class="unlockImg wh30" src="/static/dataUnlock.png" mode="aspectFit" />
					
					<view class="ml5" v-if="!isLock" @click="$refs.payPwdRef.open()">去解锁</view>
					<view class="ml5" v-else>已解锁</view>
				</view>
			</view>

			<view class="charts" v-if="isLock">
				<qiun-data-charts type="column" :opts="opts" :chartData="chartData" :ontouch="true" />
			</view>
			<view class="mtb30 fmid" v-else>
				<view>点击消耗榴莲果</view>
				<image class="wh30" src="/static/fruit.png" mode="aspectFit" />
				<view>{{config.UNLOCK_FLOW_STATISTICS}}解锁查看24h</view>
			</view>
		</view>

		<view class="container">
			<view class="title">数据统计</view>

			<view class="dataList">
				<view class="main">
					<!-- <view class="item tac">
						<view class="key">公开赞</view>
						<view class="value">1000</view>
					</view>
					<view class="item tac">
						<view class="key">隐私赞</view>
						<view class="value">20</view>
					</view> -->
					<view class="item tac">
						<view class="key">展播量推流</view>
						<view class="value">{{detail.exhibitionScreening}}</view>
					</view>
					<view class="item tac">
						<view class="key">完播量推流</view>
						<view class="value">{{detail.completeViewing}}</view>
					</view>
					<view class="item tac">
						<view class="key">评论</view>
						<view class="value">{{detail.commentCount}}</view>
					</view>
					<view class="item tac">
						<view class="key">收藏</view>
						<view class="value">{{detail.collectCount}}</view>
					</view>
				</view>
				<view class="item tac mt20" @click="link('/pages/index/dataCenter/otherPush')">
					<view class="key">他人推广</view>
					<view class="value">{{detail.othersPromotionCount}}</view>
				</view>
				<view class="item tac mt20">
					<view class="key">下单数量</view>
					<view class="value">{{detail.placeAnOrderCount}}</view>
				</view>
			</view>
		</view>

		<view class="fill" style="height: 30rpx;"></view>

		<!-- 支付密码 -->
		<payPwd ref="payPwdRef" :check="true" @confirm="handleUnlock" />
	</view>
</template>

<style lang="scss" scoped>
	// 页面标题
	.apex {
		border-bottom: 2rpx solid #eee;
	}

	// 视频
	.video {

		.poster {
			height: 288rpx;
			width: 162rpx;
		}
	}

	// 锁
	.lock {
		background-color: #FF9B27;

		.lockImg {
			display: none;
		}

		.unlockImg {
			display: block;
		}

		&.active {
			background-color: #ddd;

			.lockImg {
				display: block;
			}

			.unlockImg {
				display: none;
			}
		}
	}

	// 内容
	.container {
		margin: 30rpx;
		padding: 30rpx 20rpx;
		background-color: #fff;
		border-radius: 20rpx;

		// 标题
		.title {
			margin: 0 30rpx;
			font-size: 30rpx;
			font-weight: bold;
		}

		// 图表
		.charts {
			height: 700rpx;
		}

		// 数据列表
		.dataList {
			margin-top: 30rpx;

			.main {
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				grid-gap: 20rpx;
			}

			.item {
				padding: 30rpx 0;
				background-color: #f8f8f8;
				border-radius: 20rpx;

				.value {
					margin-top: 10rpx;
					font-size: 40rpx;
					font-weight: bold;
				}
			}
		}
	}
</style>