zh_order_food_xcx/pages-my/rule-info.vue

<template>
	<view class="flex-common-css iPhone-bottom">
		<Nav title="规则详情" titleColor="#333" bgckgroundBox='#fff'></Nav>
		<scroll-view :scroll-y="true" class="scroll-view-css" @scrolltolower="scrolltolower">
			<view class="contetn-box">
				<view class="item-box display-flex mb-20">
					<view class="item-left flex-direction align-items-center flex-justify-center"
						:class="ticketData.type == 0?'bgc-FCE7E2':'bgc-E6E6E6'">
						<view class="align-items-center">
							<view class="fs-30 fw-600" :class="ticketData.type == 0?'fc-FB3D03':'fc-9'">￥</view>
							<view class="fs-48 fw-600" :class="ticketData.type == 0?'fc-FB3D03':'fc-9'">10</view>
						</view>
						<view class="fs-24" :class="ticketData.type == 0?'fc-6':'fc-9'">
							满90元可用
						</view>
						<view class="ball"></view>
						<view class="ball-two"></view>
					</view>
					<view class="item-hr" :class="ticketData.type == 0?'':'item-hr-two'"></view>
					<view class="item-right flex-1 bgc-f">
						<view class="fs-28 mb-12 ticket-name text-overflow-ellipsis fw-600"
							:class="ticketData.type == 0?'fc-3':'fc-9'">
							{{ticketData.name}}
						</view>
						<view class="fs-24 mb-12" :class="ticketData.type == 0?'fc-FB3D03':'fc-9'">
							2024.05.08-2024.05.24
						</view>
						<view class="flex-justify-space">
							<view class="fs-24" :class="ticketData.type == 0?'fc-3':'fc-9'">
								券类型：外卖券
							</view>
						</view>
						<image class="item-img" src="@/static/img/my/ysy.png" mode="" v-if="ticketData.type == 1">
						</image>
						<image class="item-img" src="@/static/img/my/ysx.png" mode="" v-if="ticketData.type == 2"></image>
					</view>
				</view>
				<view class="but-box" v-if="ticketData.type == 0">
					<view class="but fs-32 fc-f fw-500" @click="goToUrl()">
						去使用
					</view>
				</view>
				<view class="fs-34 fw-600 fc-0 mb-12">
					使用范围
				</view>
				<view class="describe fs-28 fc-6" v-html=""></view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				ticketData: {
					type: 0,
					name: '优惠券名称优惠券名称惠券名'
				}
			};
		},
		onLoad(data) {},
		mounted() {},
		methods: {
			scrolltolower() {
				console.log('触底');
			},
		},
	}
</script>

<style lang="scss" scoped>
	.contetn-box {
		padding: 24rpx;
		box-sizing: border-box;
	}
	.item-hr {
		width: 0px;
		height: auto;
		border-right: 1rpx dashed #FB7850;
	}
	
	.item-hr-two {
		width: 0px;
		height: auto;
		border-right: 1rpx dashed #999;
	}
	
	.item-left {
		width: 200rpx;
		height: auto;
		padding: 34rpx 36rpx 44rpx;
		box-sizing: border-box;
		position: relative;
		border-radius: 20rpx 0 0 20rpx;
	}
	
	.ball {
		width: 24rpx;
		height: 24rpx;
		border-radius: 50%;
		position: absolute;
		top: -12rpx;
		right: -12rpx;
		background: #F5F5F5;
		z-index: 10;
	}
	
	.ball-two {
		width: 24rpx;
		height: 24rpx;
		border-radius: 50%;
		position: absolute;
		background: #F5F5F5;
		z-index: 10;
		bottom: -12rpx;
		right: -12rpx;
	}
	
	.item-right {
		padding: 24rpx;
		box-sizing: border-box;
		border-radius: 0 20rpx 20rpx 0;
		position: relative;
	}
	
	.ticket-name {
		max-width: 280rpx;
	}
	
	.item-img {
		width: 88rpx;
		height: 88rpx;
		position: absolute;
		bottom: 40%;
		right: 24rpx;
	}
	.but-box{
		padding: 12rpx 44rpx 46rpx;
		box-sizing: border-box;
		.but{
			width: 100%;
			height: 92rpx;
			line-height: 92rpx;
			text-align: center;
			background: linear-gradient( 144deg, #57CAFF 0%, #41ABF5 100%);
			border-radius: 380rpx;
		}
	}
	.describe{
		padding: 0 0 32rpx 0;
		border-bottom: 2rpx solid #EEEEEE;
	}
</style>