PKR/pages/user/shareQrCode.vue

<template>
	<view class="all">
		<view class="list" v-for="item in list">
			<view class="flex padding-b-20">
				<view class="li">{{$t('set.a7')}}{{item.room.no}}{{$t('set.a8')}}</view>
				<view class="lis" v-if="item.result === 1">
					<view class="liss green">{{$t('enter.a5')}}</view>
				</view>
				<view class="lis" v-if="item.result === 0">
					<view class="liss red">{{$t('enter.a6')}}</view>
				</view>
				<view class="lis" v-if="item.status === 0">
					<view class="liss primary">{{$t('enter.a4')}}</view>
				</view>
			</view>
			<view class="listT">
				<!-- <view class="TT flex">
					<view class="lsT">{{$t('gameList.a2')}}</view>
					<view class="lisT">{{item.room.game.timebar}}</view>
				</view> -->
				<view class="TT flex">
					<view class="lsT">{{$t('gameList.a4')}}</view>
					<view class="lisT">{{item.num}}U</view>
				</view>
				<view class="TT flex">
					<view class="lsT">{{$t('gameList.a7')}}</view>
					<view class="lisT green" v-if="item.bet==1">{{ $t("enter.u6") }}</view>
					<view class="lisT red" v-if="item.bet==2">{{ $t("enter.u4") }}</view>
					<view class="lisT green" v-if="item.bet==3">{{ $t("enter.u5") }}</view>
					<view class="lisT red" v-if="item.bet==4">{{ $t("enter.u7") }}</view>
				</view>
				<view class="TT flex">
					<view class="lsT">{{$t('gameList.a8')}}</view>
					<view class="lisT">{{item.get}}U</view>
				</view>
				<view class="TT flex">
					<view class="lsT">{{$t('gameList.a9')}}</view>
					<view class="flex-start">
						<template v-for="it in item.room.arr " v-if="it.value==1">
							<view class="lisT green" v-if="it.type==1">{{ $t("enter.u6") }}</view>
							<view class="lisT green" v-if="it.type==3">{{ $t("enter.u5") }}</view>
							<view class="lisT red" v-if="it.type==2">{{ $t("enter.u4") }}</view>
							<view class="lisT red" v-if="it.type==4">{{ $t("enter.u7") }}</view>
						</template>
					</view>
				</view>
				<view class="TT flex">
					<view class="lsT">{{$t('gameList.a10')}}</view>
					<view class="lisT flex" v-if="item.room.result_info">
					<image v-for="ls in item.room.result_info" class="dice"
						:src="`../../static/img/dice${ls}.png`" mode="scaleToFill"></image>
					</view>
				</view>
				<view class="TT flex">
					<view class="lsT">{{$t('gameList.a5')}}</view>
					<view class="lisT">{{item.open_time}}</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		gameBetList
	} from '@/api/game.js'
	import {
		getTime
	} from '@/utils/rocessor.js';
	export default {
		data() {
			return {
				id: 0,
				page: 1,
				limit: 10,
				list: []
			};
		},
		onLoad() {
			this.gameBetList()
			uni.setNavigationBarTitle({
				title: this.$t("tab.a9"),
			});
		},
		onReachBottom() {
			this.gameBetList()
		},
		//下拉刷新
		methods: {
			// 互娱记录
			gameBetList() {
				let that = this
				if (that.loadingType == 'loading' || that.loadingType == 'noMore') {
					return
				}
				gameBetList({
					page: that.page,
					limit: that.limit,
					id: that.id,
				}).then(res => {
					let list = res.data.bet_log.map((res) => {
						res.num = +res.num;
						res.get = +res.get;
						res.room.result_info =  res.room.result_info.split(",");
						let result = res.room.result
						if (result) {
							let arr = [];
							const ar = result.split(",")
							for (let i = 0; i < ar.length; i++) {
								const s = ar[i].split(':');
								arr.push({
									type: s[0],
									value: s[1]
								})
							}
							res.room.arr = arr;
						}
						res.open_time = getTime(res.open_time);
						return res
					})
					that.list = that.list.concat(list)
					console.log('1111111', list);
					that.page++
					if (list.length == that.limit) {
						that.loadingType = 'more'
					} else {
						that.loadingType = 'noMore'
					}
					that.loaded = true
				})
			}

		}
	};
</script>

<style lang="scss">
	.all {
		color: #FFFFFF;
		padding: 30rpx;
		line-height: 1;
	}

	.list {
		background: #191A1F;
		box-shadow: 0rpx 5rpx 24rpx 0rpx rgba(4, 0, 0, 0.06);
		border-radius: 15rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;

		.li {
			font-size: $font-lg;
			font-weight: bold;
		}

		.lis {
			.liss {
				border-radius: 5rpx;
				padding: 10rpx 20rpx;
				font-size: 22rpx;
				font-weight: 500;

				&.red {
					background: $color-yellow;
				}

				&.green {
					background: $color-green;
				}

				&.primary {
					background: #01ebf6;
				}
			}
		}

	}

	.listT {
		.TT {
			margin-top: 20rpx;

			.lsT {
				font-weight: 500;
				color: #999999;
				font-size: $font-base;
				min-width: 140rpx;
			}

			.lisT {
				font-size: $font-lg;
				font-weight: bold;
				.dice {
					width: 54rpx;
					height: 54rpx;
					margin-left: 10rpx;
				}
				&.red {
					color: #df5660;
				}

				&.green {
					color: $color-green;
				}
			}
		}
	}
</style>