xinyongguanlishi/pages/realTime/realTime.vue

<template>
	<view class="main">
		<view class="head_bgs">
			<view class="text-xl text-bold text-white u-margin-right-10">
				实时列表
			</view>
			<u-icon name="list-dot" color="#fff" size="45"></u-icon>
		</view>
		<transition-group name="list-complete" tag="p">
			<view class="list_item margin-lr-sm u-margin-top-30 list-complete-item" v-for="(item,index) in arr"
				:key="item.id">
				<view class="text-right text-red">
					<text>{{item.time}}分钟前{{item.name}}抢到此单</text>
				</view>
				<view class="order-num u-font-28 u-padding-bottom-10 u-border-bottom" style="color:#909399;">
					<text>订单号：{{item.order_sn}}</text>
				</view>
				<view class="order-num u-margin-top-15 flex align-center u-padding-bottom-10 u-border-bottom">
					<u-avatar src="" size="100"></u-avatar>
					<view class="u-margin-left-20 flex-sub" style="color: #505559;">
						<view class="u-font-28" v-if="index%2==0">
							评估类型：企业信用问题咨询
						</view>
						<view class="u-font-28" v-else>
							评估类型：个人信用问题咨询
						</view>
						<view class="u-font-28">
							评估用户：{{item.orderName}}
						</view>
						<view class="u-font-28">
							咨询项目个数：{{item.orderNum}}
						</view>
						<view class="u-font-28 flex justify-between">
							<text>咨询总金额：{{item.orderMoney}}</text>
							<text class="u-font-30" style="color: #F1C453;">佣金：{{item.orderyong}}元</text>
						</view>
					</view>
				</view>
			</view>
		</transition-group>
		<view class="cu-tabbar-height"></view>
	</view>
</template>

<script>
	import util from '@/common/util.js'
	export default {
		data() {
			return {
				arr: [{
						id: 1,
						order_sn: '1567996498547206650',
						orderNum: '10',
						orderName: '阿某某',
						orderMoney: '85472',
						orderyong: '34188',
						time: '3',
						name: '吴某'
					}, {
						id: 2,
						order_sn: '1567996498547206650',
						orderNum: '5',
						orderName: '小某某',
						orderMoney: '48512',
						orderyong: '19404',
						time: '3',
						name: '琦某'
					},
					{
						id: 3,
						order_sn: '1567996498547206650',
						orderNum: '3',
						orderName: '刚某某',
						orderMoney: '58712',
						orderyong: '23484',
						time: '1',
						name: '吴某'
					},
					{
						id: 4,
						order_sn: '1567996498547206650',
						orderNum: '9',
						orderName: '雨某某',
						orderMoney: '98755',
						orderyong: '39502',
						time: '4',
						name: '美某某'
					}
				],
				timeOut: null
			}
		},
		onShow() {
			this.timeOut = setInterval(() => {
				let count = this.$u.random(10000, 100000)
				this.arr.unshift({
					id: this.$u.random(1000, 100000),
					order_sn: this.orderCode(),
					orderNum: this.$u.random(1, 7),
					orderName: this.getNames(),
					orderMoney: count,
					orderyong: parseInt(count * 0.4),
					time: this.$u.random(1, 10),
					name: this.getNames()
				})
				if (this.arr.length > 15) {
					this.arr.pop()
				}
			}, this.$u.random(2000, 3000))
		},
		onHide() {
			clearInterval(this.timeOut)
		},
		methods: {
			//随机订单
			orderCode() {
				let orderCode = '';
				for (let i = 0; i < 6; i++) //6位随机数，用以加在时间戳后面。
				{
					orderCode += Math.floor(Math.random() * 10);
				}
				orderCode = new Date().getTime() + orderCode; //时间戳，用来生成订单号。
				return orderCode;
			},
			//随机姓名
			getNames() {
				let name1 = util.getName().familyNames[this.$u.random(0, (util.getName().familyNames.length - 1))]
				let name2 = util.getName().givenNames[this.$u.random(0, (util.getName().givenNames.length - 1))]
				return name1 + '某某'
			}
		}
	}
</script>

<style>
	.main {
		min-height: 100vh;
	}

	.head_bgs {
		background: #F1C453;
		height: 100rpx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.list_item {
		padding: 20rpx;
		border-radius: 16rpx;
		box-shadow: 6rpx 6rpx 10rpx rgba(122, 122, 122, 0.2);
		background: #fff;
	}

	.order-num::after {
		border-color: #bbb;
	}

	button::after {
		display: none;
	}

	.list-complete-item {
		transition: all 1s;
		/* display: inline-block; */
		/* margin-right: 20rpx; */
	}

	.list-complete-enter,
	.list-complete-leave-to

	/* .list-complete-leave-active for below version 2.1.8 */
		{
		opacity: 0;
		transform: translateX(60rpx);

	}

	.list-complete-leave-active {
		position: absolute;
	}
</style>