zh_order_food_xcx/pages-buy/ticket-det.vue

<template>
	<view class="ticket-det-box iPhone-bottom flex-common-css box-border-box">
		<view class="nav-box">
			<Nav :leftShow='false' :customNav='true' bgckgroundBox='transparent'>
				<template>
					<view slot="custom" class="align-items-center">
						<view class="yuan-bg">
							<uni-icons type="left" size="20" @click="toBack()" color="#000"></uni-icons>
						</view>
					</view>
				</template>
			</Nav>
		</view>

		<view class="scroll-view-css">
			<swiper class="swiper " circular :autoplay="true" :interval="3000" :duration="500" @change="onSwiperChange">
				<swiper-item v-for="(item,i) in obj.image" :key="i">
					<image class="swiper-item" :src="item" mode="aspectFill" @click="lookImg(obj.image,i)"></image>
					<view class="swiper-num fc-f">{{BanenerCurrent}}/{{obj.image.length}}</view>
				</swiper-item>
			</swiper>

			<view class="box-border-box p-24">
				<view class="box-card box-border-box p-24">
					<view class="mb-12">
						<span class="fs-28 fc-FB3D03 fw-600">￥</span>
						<span class="fs-44 fc-FB3D03 fw-600">{{obj.price||''}}</span>
					</view>
					<view class="fs-36 fw-600">{{obj.title||''}}</view>
				</view>
			</view>

			<image class="pwxq" src="@/static/img/buy/pwxq.png" mode="scaleToFill"></image>

			<view class="box-border-box richText plr-24">
				<!-- <view class="box-card box-border-box p-24 fs-30 fc-0" v-html="obj.content"></view> -->
				<rich-text :nodes="obj.content"></rich-text>
			</view>
		</view>

		<view class="bottom-box box-border-box p-24">
			<view class="flex-justify-space">
				<view class="align-items-flex-end box-1">
					<span class="fs-28 fc-f fw-600">￥</span>
					<span class="fs-44 fc-f fw-600">{{obj.price||''}}</span>
				</view>
				<view class="text-align-center box-2 fs-32 fc-f fw-600" @click="toSave()">立即抢购</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		ticketInfo
	} from '@/api/ticket.js';
	import tools from "@/service/tools";
	export default {
		data() {
			return {
				BanenerCurrent: 1,
				id: "",
				obj: {
					image: [],
				},
			}
		},
		onLoad(e) {
			if (e.id) {
				this.id = e.id;
				this.getInfo();
			}
		},
		methods: {
			getInfo() {
				ticketInfo({
					id: this.id
				}).then((res) => {
					if (res.code === 1) {
						this.obj = res.data;
						let zfc = res.data.content
						let a = zfc.replace(/font color="#c24f4a"/g, "p style='color:#c24f4a'")
						this.obj.content = a.replace(/\font/g, "\p")
					}
				})
			},
			lookImg(list, i) {
				tools.lookBigImg(i, list);
			},
			toBack() {
				tools.leftClick()
			},
			onSwiperChange(e) {
				this.BanenerCurrent = (e.detail.current + 1);
			},
			toSave() {
				if (!this.isTimeEnd) {
					let goodsData = {
						title: this.obj.title,
						cover_img: this.obj.cover_img,
						price: this.obj.price,
						id: this.obj.id,
					}
					uni.navigateTo({
						url: '/pages-buy/save-ticket?goodsData=' + encodeURIComponent(JSON.stringify(goodsData))
					})
				}
			},
		},
	}
</script>

<style scoped lang="scss">
	::deep .richText p {
		color: red;
	}

	.ticket-det-box {
		position: relative;

		.nav-box {
			position: absolute;

			.yuan-bg {
				width: 60rpx;
				height: 60rpx;
				background-color: #B3B3B4;
				border-radius: 50%;
				text-align: center;
				line-height: 62rpx;
			}
		}

		.bottom-box {
			.box-1 {
				flex: 1;
				height: 100rpx;
				background: #333333;
				border-radius: 200rpx 0rpx 0rpx 200rpx;
				box-sizing: border-box;
				padding-left: 32rpx;
				padding-bottom: 20rpx;
			}

			.box-2 {
				width: 200rpx;
				height: 100rpx;
				line-height: 100rpx;
				background: #41ABF5;
				border-radius: 0rpx 200rpx 200rpx 0rpx;
				text-align: center;
			}
		}

		.swiper {
			width: 100%;
			height: 750rpx;
			position: relative;

			.swiper-item {
				width: 100%;
				height: 750rpx;
			}

			.swiper-num {
				position: absolute;
				right: 24rpx;
				bottom: 24rpx;
				width: 120rpx;
				height: 48rpx;
				background: rgba(51, 51, 51, 0.6);
				border-radius: 200rpx;
				text-align: center;
				line-height: 48rpx;
			}
		}

		.box-card {
			width: 100%;
			min-height: 100rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
		}

		.pwxq {
			width: 146rpx;
			height: 46rpx;
			margin: 38rpx auto 24rpx auto;
		}
	}
</style>