txCar/pages/me/discountDetail.vue

<template>
	<view class="content">
		<view style="background: #BE573F; height: 56rpx; width: 100%;"></view>

		<view class="whiteBg">

			<!-- firstView -->
			<view class="firstView">
				<view class="money">{{detailData.actName}}</view>
				<view class="condition" v-if="detailData.whereMoney != 0">满{{detailData.whereMoney}}元可用</view>
				<view class="condition" v-else>满任意金额可用</view>
			</view>
			<view class="point leftP"></view>
			<view class="point rightP"></view>

			<!-- secondView -->
			<view class="secondView">
				
				<view  v-if="detailData.endOffsetDays===null||detailData.endOffsetDays==='null'||detailData.endOffsetDays===''">
					
					<view class="valid same" >有效期：{{detailData.startTime.slice(0,detailData.startTime.length-8)}}至 {{detailData.endTime.slice(0,detailData.endTime.length-8)}}</view>
				</view>
				<view v-else>
				
					<view class="valid same" v-if="detailData.endOffsetDays>-1">有效期：自领取后，{{detailData.endOffsetDays}}天有效</view>
				     <view class="valid same" v-if="detailData.endOffsetDays==-1||detailData.endOffsetDays==null||detailData.endOffsetDays=='null'">有效期：{{detailData.startTime.slice(0,detailData.startTime.length-8)}}至 {{detailData.endTime.slice(0,detailData.endTime.length-8)}}</view>
				</view>
				
				
				<view class="same">可用次数：{{detailData.avaQty}}</view>
			</view>

			<!-- thirdView -->
			<view class="thirdView">
				<view class="thirdTitle">使用说明</view>
				<view class="store">
					<view class="grayPoint"></view>
					<view class="same">适用门店：{{detailData.shopNames}}</view>
				</view>
			</view>
			
			<!-- 列表 -->
			<view class="itemContent">
				<view class="thirdTitle">注意事项</view>
				<rich-text :nodes="couContent" style="color: #666666; font-size: 26rpx;"></rich-text>
				<!-- <view v-for="(item,index) in itemData" :key="index">
					<view class="store">
						<view class="grayPoint"></view>
						<view class="same">{{item}}</view>
					</view>
				</view> -->
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				detailData:{},
				couponId:'',
				couContent:'',
			}
		},
		onLoad(opt) {
			this.couponId = opt.couponId,
			this.page = 1
			this.getDetailData()
		},
		methods: {
			getDetailData() {
				uni.showLoading({
					title: '加载中'
				})
				let url = 'miniAppMyBMemberCar/queryMiniAppCouponDetail',
					params = {
						couponId: this.couponId,
						
					}
				this.$http(url, params, 'GET').then(res => {
					uni.hideLoading();
					var data = res.data
					
					if(res.data.couContent){
						 this.couContent=res.data.couContent.replace(/\<p/gi, '<p style="display: inline-block"');
					}
					// 处理 undefined和null转为空白字符串
					
						for (const key in data) {
							data[key] = this.$praseStrEmpty(data[key])
						}
					
					this.detailData = data
			
					
					
				})
			},
		}
	}
</script>

<style scoped>
	.content {
		background: #BE573F;
		min-height: 100vh;
	}

	.whiteBg {
		margin: 0rpx 24rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		min-height: 60vh;
	}

	.firstView {
		border-bottom: 1rpx #EEEEEE dashed;
		text-align: center;
		padding: 50rpx 20rpx;
		padding-bottom: 30rpx;
	}

	.money {
		font-size: 44rpx;
		color: #333333;
		font-weight: bold;
		margin-bottom: 10rpx;
	}

	.condition {
		font-size: 28rpx;
		color: #999999;
	}

	.point {
		width: 30rpx;
		height: 30rpx;
		background-color: #BE573F;
		border-radius: 15rpx;
	}

	.leftP {
		float: left;
		margin-left: -15rpx;
		margin-top: -15rpx;
	}

	.rightP {
		float: right;
		margin-right: -15rpx;
		margin-top: -15rpx;
	}

	.secondView {
		padding: 30rpx 40rpx;
	}

	.valid {
		margin-bottom: 20rpx;
	}

	.same {
		font-size: 28rpx;
		color: #666666;
	}

	.thirdView {
		padding: 30rpx 40rpx;
		border: 1rpx #EEEEEE solid;
	}

	.thirdTitle {
		font-size: 32rpx;
		color: #333333;
		margin-bottom: 20rpx;
	}

	.store {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.grayPoint {
		width: 12rpx;
		height: 12rpx;
		border-radius: 6rpx;
		background-color: #DDDDDD;
		margin-right: 15rpx;
	}
	.itemContent{
		padding: 30rpx 40rpx;
	}
</style>