zhywpt-sp/subpackage/service/equityInfo/equityInfo.vue

<template>
	<!-- <view style="height: 100%;">
		<rich-text style="flex: 1" :nodes="richText" />
	</view> -->
	<view style="background-color:#E9EDF0;overflow: hidden;min-height: 100vh;font-size: 28rpx;">
		<view class="title" :style="{'--bgimg':`url(${$imgUrl}equiet-bg2.png)`}">
			<view class="name">
				<text>{{params.productName}}</text>
				<view><text>￥</text><text class="money">{{params.discountPrice/100}}</text></view>
			</view>
			<view class="date">有效期至{{params.endDate}}</view>
		</view>
		<view class="explain">
			<view class="use">使用说明</view>
			<view class="tips">
				<view class="one">权益领取方式</view>
				<view class="list">
					<text class="point"></text>
					<view>用户激活ETC后通过贵州黔通九州ETC小程序-服务模块-我的权益中主动领取兑换码。</view>
				</view>
				<view class="list">
					<text class="point"></text>
					<view>领取时限:自激活起180天内。</view>
				</view>
			</view>
			<view class="tips">
				<view class="one">权益使用方式</view>
				<view class="list">
					<text class="point"></text>
					<view>进入途虎养车APP或途虎养车小程序，点击“我的”.“集团客户”-将兑换码添加到提示框-根据页面提示填入车牌-点击确认后显示兑换。</view>
				</view>
				<view class="list">
					<text class="point"></text>
					<view>点击已兑换的洗车卡券，选择就近门店，点击“导航”，到店说明使用途虎券码兑换服务，出示服务二维码即可使用服务。</view>
				</view>
			</view>
			<view class="tips">
				<view class="one">权益注意事项</view>
				<view class="list">
					<text class="point"></text>
					<view>服务使用范围为7座(含)以下家用非营运客车，暂不支持面包车、商务车等中大型车辆。</view>
				</view>
				<view class="list">
					<text class="point"></text>
					<view>春节期间部分门店不能提供服务，具体可使用的服务门店请以卡券展示的门店;门店遇高峰期会排队，请注意合理安排时间或咨询途虎养车客服。</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script setup lang='ts'>
	import {
		ref
	} from 'vue';
	import {
		requestNew
	} from "@/utils/network/request.js";
	import {
		onLoad
	} from '@dcloudio/uni-app'
import { singleEquityDetail } from "@/utils/network/api.js";
	let richText = ref('')
	let singleEquityId = ref('')
	let couponAgencyType = ref('')
	let couponId = ref('')
	let params = ref('')

	onLoad((options) => {
		console.log("参数",options)
		singleEquityId.value = options.singleEquityId
		couponAgencyType.value = options.couponAgencyType
		//卡券渠道类型获取单项权益列表
		requestNew(singleEquityDetail, {
			type: 2,
			data: {
				singleEquityId: singleEquityId.value
			},
			method: "POST",
			showLoading: true,
		}).then((item) => {
			let res = item
			console.log(res, '=========');
			richText.value = res.productIntro
			couponId.value = res.couponId
			params.value=res
		})
	})
</script>
<style lang='scss' scoped>
	.copy-btn {
		background-color: #4caf50;
		color: #fff;
		border: none;
		width: 100%;
		border-radius: 10rpx;
		font-size: 24rpx;
		box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
	}
	.title{
		background-size: 100% 100%;
		background-repeat: no-repeat;
		height: 250rpx;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
		background-image: var(--bgimg);
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		align-items: center;
		justify-content: space-evenly;
		margin: 20rpx;
		box-sizing: border-box;
		.name{
			font-weight: 400;
			font-size: 30rpx;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			flex: 1;
			padding: 0 30rpx 0 30rpx;
			box-sizing: border-box;
			.money{
				font-size: 92rpx;
				color: #F2DBAC;
			}
		}
		.date{
			color: #666666;
			display: flex;
			justify-content: flex-start;
			width: 100%;
			flex: 1;
			align-items: center;
			padding-left: 30rpx;
			box-sizing: border-box;
			padding-top: 13rpx;
		}
	}
	.explain{
		width: 100%;
		background-color: white;
		margin-top: 20rpx;
		padding: 20rpx;
		box-sizing: border-box;
		height: calc(100vh - 250rpx);
		.use{
			font-size: 32rpx;
			color: #111111;
			line-height: 35rpx;
			font-family: MicrosoftYaHei;
			font-weight: bold;
		}
		.tips{
			.one{
				font-size: 28rpx;
				color: #111111;
				line-height: 35rpx;
				margin: 26rpx 0;
			}
			.list{
				font-size: 28rpx;
				color: #999999;
				display: flex;
				margin-bottom: 10rpx;
				.point{
					width: 10rpx;
					height: 10rpx;
					background: #A0A0A0;
					display: inline-block;
					border-radius: 100%;
					margin-right: 20rpx;
					margin-top: 10rpx;
				}
			}
		}
	}
</style>