cgst/pages/dp/infoOne.vue

<template>
	<view class="center">
		<view class="dz"><image src="../../static/dp/dz.png" mode=""></image></view>
		<view class="top"><image src="../../static/dp/top.png" mode=""></image></view>
		<view class="logo"><image src="../../static/dp/logo.png" mode=""></image></view>
		<view class="title">可视化数据大屏</view>
		<view class="xl-wrap flex">
			<view class="xl-item" v-for="(xlitem, xlindex) in xl.split('')" :key="xlindex">
				<view class="xl-item-bg"><image src="../../static/dp/num.png" class="" /></view>
				<view class="xl-val">{{ xlitem }}</view>
			</view>
		</view>
		<view class="time-box flex">
			<view class="nowdate">{{ newTime }}</view>
			<view class="djs">活动倒计时{{ end }}</view>
		</view>
		<view class="tongzi flex">
			<view class="tongzi-title">系统通知</view>
			<view class="tongzi-main" v-if="orderlist">
				恭喜{{ orderlist[0].store_for_big_screen ? orderlist[0].store_for_big_screen.name : '总店' }}[{{ orderlist[0].waiter.user.nickname }}][￥{{
					orderlist[0]._info[0].cart_info.productInfo.price
				}}]成交一笔“{{ orderlist[0]._info[0].cart_info.productInfo.store_name }}”订单(订单编号：{{ orderlist[0].order_id }}) {{ orderlist[0].add_time }} 购买用户：
				<text>{{ orderlist[0].user_for_big_screen.nickname }}</text>
			</view>
		</view>
		<view class="glx-box flex">
			<view class="glx-item">
				<view class="glx-item-num">{{ project }}</view>
				<view class="glx-item-font">热卖项目数</view>
			</view>
			<view class="glx-item">
				<view class="glx-item-num">{{ explode_num }}</view>
				<view class="glx-item-font">已裂变新客</view>
			</view>
			<!-- <view class="glx-item">
				<view class="glx-item-num">80</view>
				<view class="glx-item-font">待裂变新客</view>
			</view> -->
			<view class="glx-item">
				<view class="glx-item-num">{{ user }}</view>
				<view class="glx-item-font">会员数</view>
			</view>
			<view class="glx-item">
				<view class="glx-item-num">{{ order }}</view>
				<view class="glx-item-font">订单数</view>
			</view>
			<view class="glx-item">
				<view class="glx-item-num">{{ visit }}</view>
				<view class="glx-item-font">曝光量</view>
			</view>
		</view>
		<view class="bottom"><image src="../../static/dp/bottom.png" mode=""></image></view>
	</view>
</template>

<script>
import { getnewTime, timeComputed } from '@/utils/rocessor.js';
import { loadIndexs, play, order } from '@/api/info.js';
import Voice from '@/utils/QS-baiduyy.js';
export default {
	data() {
		return {
			newTime: '2022.08.22',
			end: '',
			xl: '000000',
			explode_num: '',
			order: '',
			project: '',
			user: '',
			visit: '',
			list: '',
			orderlist: '',
			active_end_time: '',
			time: ''
		};
	},
	onHide() {
		clearTimeout(this.time);
	},
	// 监听页面卸载
	onUnload() {
		// 关闭倒计时
		clearTimeout(this.time);
	},
	// 监听页面后退
	onBackPress() {
		// 关闭倒计时
		clearTimeout(this.time);
	},
	onShow() {
		console.log(this.xl.split());
		this.open();
	},
	methods: {
		open() {
			const obj = this;
			uni.showModal({
				title: '您好',
				content: '欢迎来到城攻闪拓',
				success: function(res) {
					if (res.confirm) {
						obj.loadData();
					} else if (res.cancel) {
						obj.loadData();
					}
				}
			});
		},
		loadData() {
			const obj = this;
			loadIndexs().then(({ data }) => {
				this.active_end_time = data.active_end_time;
				this.newTime = getnewTime();
				this.xl = data.activity_order_pay;
				this.explode_num = data.explode_num;
				this.order = data.order;
				this.project = data.project;
				this.user = data.user;
				this.visit = data.visit;
				this.list = data.store_order[0];
				if (this.list) {
					Voice({
						voiceSet: {
							tex: '恭喜拼团成功' + +this.list._info[0].cart_info.productInfo.price + '元'
						},
						audioSet: {
							volume: 1
						},
						lineUp: true // 加入语音队列
					});
					play({}, this.list.id).then(e => {});
				}
				this.djs();
				this.time = setTimeout(this.loadData, 1000);
			});
		},
		djs() {
			console.log('1111');
			let date = new Date(this.active_end_time);
			let time1 = date.getTime();
			let info = timeComputed(time1);
			if (info.day != 0) {
				this.end = info.day + '天 ' + info.hours + ':' + info.minutes + ':' + info.seconds;
			} else {
				this.end = info.hours + ':' + info.minutes + ':' + info.seconds;
			}
			order({ page: 1, limit: 1, store_id: 0, status: 3 }).then(({ data }) => {
				this.orderlist = data;
			});
		}
	}
};
</script>

<style lang="scss">
page,
.center {
	position: relative;
	height: auto;
	min-height: 100%;
	background: linear-gradient(180deg, #0b1c9d 0%, #02004d 18%, #02004d 100%);
}
.top {
	height: 62rpx;
	width: 750rpx;
	image {
		width: 100%;
		height: 100%;
	}
}
.dz {
	position: absolute;
	top: 209rpx;
	left: 0;
	right: 0;
	width: 640rpx;
	height: 480rpx;
	margin: 0 auto;
	image {
		width: 100%;
		height: 100%;
	}
}
.logo {
	width: 166rpx;
	height: 210rpx;
	margin: 44rpx auto 0;
	image {
		width: 100%;
		height: 100%;
	}
}
.title {
	margin-top: 22rpx;
	text-align: center;
	font-size: 38rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #ffffff;
}
.xl-wrap {
	margin-top: 60rpx;
	justify-content: space-around;
	.xl-item {
		position: relative;
		width: 106rpx;
		height: 140rpx;
		text-align: center;
		.xl-item-bg {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			width: 106rpx;
			height: 140rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.xl-val {
			position: relative;
			z-index: 2;
			font-size: 86rpx;
			font-family: SourceHanSansSC;
			font-weight: bold;
			color: #66ffff;
			line-height: 140rpx;
		}
	}
}
.time-box {
	margin: 32rpx 22rpx 0;
	font-size: 26rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #ffffff;
}
.tongzi {
	justify-content: start;
	margin: 36rpx auto 0;
	width: 700rpx;
	border: 5px solid #060c76;
	padding: 12rpx;
	.tongzi-title {
		flex-shrink: 0;
		width: 74rpx;
		font-size: 25rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #66ffff;
		padding-right: 20rpx;
		border-right: 1px solid #396bb5;
	}
	.tongzi-main {
		margin-left: 10rpx;
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #ffffff;
		text {
			color: #66ffff;
		}
	}
}
.glx-box {
	position: relative;
	z-index: 2;
	flex-wrap: wrap;
	margin-top: 32rpx;
	padding: 0 22rpx 160rpx;
	.glx-item {
		position: relative;
		z-index: 2;
		line-height: 1;
		margin-top: 20rpx;
		width: 342rpx;
		height: 203rpx;
		background: rgba(102, 255, 255, 0.2);
		border: 2px solid #66ffff;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		.glx-item-num {
			font-size: 71rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #fdae3f;
		}
		.glx-item-font {
			margin-top: 28rpx;
			font-size: 34rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #ffffff;
		}
	}
}
.bottom {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	width: 750rpx;
	height: 820rpx;
	image {
		width: 100%;
		height: 100%;
	}
}
</style>