wxThird/pages/index/discountCardDetail.vue

<template>
	<view class="box">
		<view style="width: 750rpx;height: 172rpx;background: #FF0000;"></view>

		<view class="detailBg">
			<view class="detailTop">
				<view class="leftB">
					<view class="use">￥<span class="use2">{{detail.actMoney}}</span></view>
					<!-- <view class="used" v-else>￥<span class="used2">{{detail.actMoney}}</span></view> -->
					<view class="tiaojian">{{detail.whereMoney!==0?'满'+detail.whereMoney+'元可用':'满任意金额可用'}}</view>
				</view>
				<view class="centerB">
					<view class="name">{{detail.actName}}</view>
					<view class="time" v-if="detail.startTime">
						有效期：{{detail.startTime.slice(0,10)}}-{{detail.endTime.slice(0,10)}}</view>
					<view class="time" v-else>有效期：</view>
				</view>

			</view>
		</view>


		<view class="comtentBox">
			<view style="margin-bottom: 30rpx;">
				<view class="titleBox">
					
					<image src="../../static/img/icon_youhui_red.png" mode="" class="redPoint"></image>
					<view class="title">可用次数</view>
				</view>
				<view class="content">{{detail.avaQty}}次</view>

			</view>
			<view style="margin-bottom: 30rpx;">
				<view class="titleBox">
					<image src="../../static/img/icon_youhui_red.png" mode="" class="redPoint"></image>
					<view class="title">适用门店</view>
					</view>

					<view v-for="(v,index) in detail.shopNames.split(',')">
						<view class="content">{{v}}</view>
					</view>

				
			</view>

			<view>
				<view class="titleBox">
					<image src="../../static/img/icon_youhui_red.png" mode="" class="redPoint"></image>
					<view class="title">使用说明</view>
					</view>
					<view v-if="detail.couContent" v-html="detail.couContent"></view>
					<view v-else class="content">暂无</view>
				</view>


			</view>

		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				detail: {},
			}
		},
		onLoad(opt) {
			this.id = opt.id;
			this.getData();
		},
		methods: {
			getData() {
				uni.showLoading({
					title: '加载中'
				});

				this.$http('opencoupon/detailsCoupon', {
					// lat: this.location.lat,
					// lng: this.location.lng,
					id: this.id,
				}, 'GET').then(res => {
					uni.hideLoading();
					this.detail = res.data;


				})
			},
		}
	}
</script>

<style>
	.box {
		min-height: 100vh;
		background: #F4F5F7;
	}

	.detailBg {
		margin: -100rpx 24rpx 0rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		padding: 40rpx 20rpx;
	}

	.detailTop {
		display: flex;
		justify-content: flex-start;
		
	}

	.use {

		font-size: 26rpx;
		color: #FF0000;
	}

	.use2 {

		font-size: 40rpx;
		font-weight: 500;
		color: #FF0000;
		line-height: 56rpx;
	}

	.used {

		font-size: 26rpx;
		color: #666666;
	}

	.used2 {

		font-size: 40rpx;
		font-weight: 500;
		color: #666666;
		line-height: 56rpx;
	}

	.tiaojian {

		font-size: 24rpx;

		color: #666666;

	}

	.name {

		font-size: 30rpx;

		font-weight: 500;
		color: #333333;
		line-height: 56rpx;
	}

	.time {
		font-size: 24rpx;

		color: #666666;
		
	}

	.leftB {
		margin-right: 15rpx;
	}

	.comtentBox {
		margin: 20rpx 24rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		padding: 20rpx;
	}

	.titleBox {
		display: flex;
		align-items: center;
	}

	.redPoint {
		width: 18rpx;
		height: 18rpx;
		margin-right: 10rpx;
	}

	.title {
		font-size: 30rpx;
		color: #333333;
		font-weight: bold;
	}

	.content {
		font-size: 26rpx;
		color: #666666;
		margin-top: 16rpx;
		margin-left: 28rpx;
	}
</style>