dykj-football/pages/user/compontents/discount.vue

<template>
	<view style="background-color: #e13977; height: 30vh; padding: 0 3%;">
		<view style="margin-bottom: 5%;">
			<u-icon name="arrow-left" color="#646668" size="28" style="float: left;margin-top:2%;" @click="gotoBack" />
			<view :style="{ paddingTop: safeAreaInsets.top + 'px' }" class="page-navbarOne">现实随机打折活动</view>
		</view>
		<view>
			<view style="font-weight: 700; font-size: 18px; margin-bottom: 3%;">
				最新打折方案
			</view>
			<view v-for="(item,index) in list" :key="index">
				<view class="content">
					<view class="moneyBuy">
						<view class="money-discount">
							<view class="money-top">
								<view class="money-text">
									<u-icon name="rmb" color="#e4b698" size="10" />
									<span style="color: #e4b698; font-size: 18px; font-weight: 600;">{{item.originalPrice}}</span>
									<u-tag :text="item.isNoBuy" type="warning" size="mini" plain plainFill></u-tag>
								</view>
								<view class="discounted">
									<span>{{item.currentPrice}}</span>
								</view>
							</view>
							<view class="discountNum">
								<span>{{item.discount}}</span>
							</view>
							<view class="btnStyle" style="margin-right: 10%;">
								<u-button v-if="item.isNoBuy !== '已购买'" size="small" text="立即购买" shape="circle" color=" #e13977">
								</u-button>
							</view>
						</view>
						<view class="money-content">
							<span>{{item.content}}</span>
						</view>
					</view>
					<u-line style="width: 95%;"></u-line>
					<view class="timeSession">
						<view>
							<span style="font-size: 14px; font-weight: 600; margin-right: 3%;">{{item.time}}</span>
							<u-tag :text="item.league" type="warning" size="mini" plain></u-tag>
						</view>
						<view class="teamVs">
							<view class="team">
								<u-avatar shape="circle" size="25" :src="src" customStyle="margin: -3px 5px -3px 0" />
								{{item.teamOne}}
							</view>
							<view>
								{{'vs'}}
							</view>
							<view class="team">
								<u-avatar shape="circle" size="25" :src="src" customStyle="margin: -3px 5px -3px 0" />
								{{item.teamTwo}}
							</view>
						</view>
					</view>
					<u-line style="width: 95%;"></u-line>
					<view class="userInfo">
						<view class="userName">
							<u-avatar shape="circle" size="25" :src="src" customStyle="margin: -3px 5px -3px 0" />
							{{item.name}}
						</view>
						<view class="userTag" >
							<view v-for="(item, index) in item.tagList" :key="index">
								<u-tag :text="item.name" type="warning" size="mini" plain></u-tag>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="font-weight: 700; font-size: 18px; margin-bottom: 3%;">
			历史打折方案
		</view>
		<view v-for="(item,index) in list" :key="index">
			<view class="content">
				<view class="moneyBuy" style="position: relative;">
					<view class="money-content">
						<span>{{item.content}}</span>
					</view>
					<view style="position: absolute; right: 0; top: 10px;">
						<u-tag :text="item.deadHeat" :type="item.deadHeat === '中' ? 'success' : item.deadHeat === '负' ? 'error' : 'warning' " size="mini"></u-tag>
					</view>
				</view>
				<u-line style="width: 95%;"></u-line>
				<view class="timeSession">
					<view>
						<span style="font-size: 14px; font-weight: 600; margin-right: 3%;">{{item.time}}</span>
						<u-tag :text="item.league" type="warning" size="mini" plain></u-tag>
					</view>
					<view class="teamVs">
						<view class="team">
							<u-avatar shape="circle" size="25" :src="src" customStyle="margin: -3px 5px -3px 0" />
							{{item.teamOne}}
						</view>
						<view>
							{{'vs'}}
						</view>
						<view class="team">
							<u-avatar shape="circle" size="25" :src="src" customStyle="margin: -3px 5px -3px 0" />
							{{item.teamTwo}}
						</view>
					</view>
				</view>
				<u-line style="width: 95%;"></u-line>
				<view class="userInfo">
					<view class="userName">
						<u-avatar shape="circle" size="25" :src="src" customStyle="margin: -3px 5px -3px 0" />
						{{item.name}}
					</view>
					<view class="userTag" >
						<view v-for="(item, index) in item.tagList" :key="index">
							<u-tag :text="item.name" type="warning" size="mini" plain></u-tag>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	const {
		safeAreaInsets
	} = uni.getSystemInfoSync();
	const src = ref('https://cdn.uviewui.com/uview/album/1.jpg');
	const gotoBack = () => {
		uni.navigateBack({
			delta: 1
		})
	}
	const list = [
		{
			originalPrice: '998.00',
			isNoBuy: '未购买',
			currentPrice: '496.00',
			discount: '5折',
			content: '我是内容',
			time: '2024-04-19 10:00:00',
			league: '殴足欧洲联赛',
			teamOne: '利叶古通',
			teamTwo: '高思维',
			name: '程博士',
			deadHeat: '中',
			tagList: [
				{name: '评级:掌门'},
				{name: 'AI提问工程师'},
				{name: '数字化及AI先行者'},
			]
		},
		{
			originalPrice: '998.00',
			isNoBuy: '已购买',
			currentPrice: '98.00',
			discount: '1折',
			content: '我是内容',
			time: '2024-04-19 10:00:00',
			league: '殴足欧洲联赛',
			teamOne: '宝飞加',
			teamTwo: '马赛',
			name: '老潘秘籍',
			deadHeat: '负',
			tagList: [
				{name: '评级:掌门'},
				{name: 'AI提问工程师'},
				{name: '数字化及AI先行者'},
			]
		}
	]
</script>

<style lang="scss" scoped>
	.page-navbarOne {
		height: 88rpx;
		line-height: 88rpx;
		padding: 0 30rpx;
		color: #fff;
		text-align: center;
	}

	.content {
		width: 100%;
		height: 35vh;
		background-color: #fff;
		border: 1px solid #f6f6f6;
		border-radius: 5px;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 5%;
		.moneyBuy {
			width: 94%;
			height: 30%;
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;

			.money-discount {
				width: 100%;
				height: 50%;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.money-top {
					width: 40%;
					position: relative;

					.money-text {
						display: flex;
						justify-content: space-around;
						position: relative;

						span::before {
							content: "";
							position: absolute;
							top: 50%;
							left: 18px;
							width: 48%;
							height: 1px;
							background-color: #e4b698;
							transform: translateY(-50%);
						}
					}

					.discounted {
						position: absolute;
						color: red;
						font-size: 18px;
						font-weight: 600;
						top: 10px;
						left: 22px;
					}
				}

				.discountNum {
					color: red;
					font-size: 20px;
					font-weight: 700;
					transform: skewy(10deg);
				}
			}

			.money-content {
				font-weight: 700;
				width: 90%;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		}

		.timeSession {
			width: 94%;
			height: 30%;
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;
			.teamVs{
				display: flex;
				justify-content: space-evenly;
				align-items: center;
				.team{
					width: 30%;
					font-size: 14px;
					font-weight: 600;
					display: flex;
					justify-content: space-around;
				}
			}
		}

		.userInfo {
			width: 94%;
			height: 30%;
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;
			.userName{
				width: 30%;
				display: flex;
				justify-content: space-around;
			}
			.userTag{
				display: flex;
				justify-content: space-evenly;
			}
		}
	}

	.btnStyle {
		width: 50px;
	}
</style>