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.status == 1?'bgc-FCE7E2':'bgc-E6E6E6'">
						<view class="align-items-center">
							<view class="fs-30 fw-600" :class="ticketData.status == 1?'fc-FB3D03':'fc-9'">￥</view>
							<view class="fs-48 fw-600" :class="ticketData.status == 1?'fc-FB3D03':'fc-9'">{{ticketData.money||''}}</view>
						</view>
						<view class="fs-24" :class="ticketData.status == 1?'fc-6':'fc-9'">
							需满{{ticketData.full_money || ''}}元
						</view>
						<view class="ball"></view>
						<view class="ball-two"></view>
					</view>
					<view class="item-hr" :class="ticketData.status == 1?'':'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.status == 1?'fc-3':'fc-9'">
							{{ticketData.name||''}}
						</view>
						<view class="fs-24 mb-12" :class="ticketData.status == 1?'fc-FB3D03':'fc-9'">
							{{ticketData.time_str||''}}
						</view>
						<view class="flex-justify-space">
							<view class="fs-24" :class="ticketData.status == 1?'fc-3':'fc-9'">
								券类型：{{ticketData.scene_str||''}}
							</view>
						</view>
						<image class="item-img" src="@/static/img/my/ysy.png" mode="" v-if="ticketData.status == 2">
						</image>
						<image class="item-img" src="@/static/img/my/ysx.png" mode="" v-if="ticketData.status == 3"></image>
					</view>
				</view>
				<view class="but-box" v-if="ticketData.status == 1">
					<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">{{ticketData.str||''}}</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {couponRule} from '@/api/coupon.js';
	import tools from "@/service/tools";
	
	export default {
		components: {},
		data() {
			return {
				ticketData: {},
				id:"",
			};
		},
		onLoad(e) {
			if(e.id){
				this.id = e.id;
				this.getRole();
			}
		},
		methods: {
			getRole(){
				couponRule({id:this.id}).then((res)=>{
					if(res.code === 1){
						this.ticketData = res.data
					}
				})
			},
			goToUrl(){
				if(this.ticketData.scene == 1){
					// 去外卖
				}else{
					uni.navigateTo({
						url:'/pages-takeout/replace-take'
					})
				}
			},
			scrolltolower() {},
		},
	}
</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 32rpx 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>