WeChatAppH5/pages/code/entitlementCard/cardDetails.vue

<template>
	<view class="">
		<navbar :config="config" backColor="#666"></navbar>
		<view class="card-content" v-if="dataVal">
			<card showCardNo :cardInfo="dataVal" />
			<view class="module">
				<view class="module-title">
					<text class="title-line title-line-left"></text>
					<text class="title-name">卡片说明</text>
					<text class="title-line title-line-right"></text>
				</view>
				<view class="module-content">
					<view class="module-item">
						<text class="module-lable">发卡单位：</text>
						<text class="module-text">{{ dataVal.csmNameList }}</text>
					</view>
					<view class="module-item">
						<text class="module-lable">发卡时间：</text>
						<text class="module-text">{{ dataVal.activeTime }}</text>
					</view>
					<view class="module-item">
						<text class="module-lable">可用范围：</text>
						<text class="module-text">{{ dataVal.orgName }}</text>
					</view>
				</view>
			</view>
			<view class="module">
				<view class="module-title">
					<text class="title-line title-line-left"></text>
					<text class="title-name">使用须知</text>
					<text class="title-line title-line-right"></text>
				</view>
				<view class="module-content">
					{{ dataVal.useNotice }}
				</view>
			</view>
		</view>
		<view class="card-btns" v-if="dataVal && dataVal.status === 'ACTIVED'">
			<view class="card-btn-box">
				<view class="card-btn" @click.stop="onEmploy()">
					使用
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getYimaCard } from "@/api/government.js"
	import card from "./card.vue"
	export default {
		components: { card },
		data() {
			return {
				cardNo: null,
				config: {
					back: true,
					title: '权益卡详情',
					color: '#1a1a1a',
					backgroundColor: [1, '#fff'],
					statusBarFontColor: 'black'
				},
				dataVal: null
			}
		},
		onLoad(opt) {
			this.cardNo = opt.cardNo;
			this.getCard();
		},
		onPullDownRefresh() {
			if (this.loadingStatus = 'loading') {
				uni.stopPullDownRefresh();
				return
			}
			this.getCard();
		},
		methods: {
			onEmploy() {
				uni.redirectTo({
					url: "/pages/code/index?codeType=市民码"
				});
			},
			getCard() {
				this.loadingStatus = 'loading'
				getYimaCard().then(res => {
					if (res.code == 200) {
						const { outAppCardVoList } = res.data || []
						try {
							outAppCardVoList.forEach(el => {
								if (el.cardNo == this.cardNo) {
									this.dataVal = el;
									throw new Error('')
								}
							})
						} catch (e) {
							//TODO handle the exception
						}

					}

				}).finally(() => {
					setTimeout(() => {
						this.loadingStatus = 'noMore';
						uni.stopPullDownRefresh();
					}, 300)
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.card-content {
		padding: 60rpx;

		.module {
			width: 100%;
			padding-top: 30rpx;

			.module-title {
				display: flex;
				justify-content: center;
				align-items: center;

				.title-line {
					width: 95rpx;
					height: 4rpx;
					border-radius: 2rpx;
				}

				.title-line-left {
					background: linear-gradient(90deg, rgba(41, 171, 168, 0.00) 13%, #29aba8);
				}

				.title-line-right {
					background: linear-gradient(270deg, rgba(41, 171, 168, 0.00) 13%, #29aba8);
				}

				.title-name {
					padding: 0 20rpx;
					font-size: 34rpx;
					font-family: PingFang SC, PingFang SC-Bold;
					font-weight: 700;
					color: #29aba8;
				}
			}

			.module-content {
				padding-top: 15rpx;

				line-height: 1.4;
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: 400;
				padding-bottom: 10rpx;
				color: #666666;

				.module-item {
					display: flex;
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC-Regular;
					font-weight: 400;
					padding-bottom: 10rpx;

					.module-lable {
						color: #1a1a1a;
						flex-shrink: 0;
					}

					.module-text {
						color: #666666;
					}
				}
			}
		}
	}

	.card-btns {
		width: 100%;
		height: 148rpx;

		.card-btn-box {
			position: fixed;
			left: 0;
			bottom: 0;
			right: 0;
			width: 100%;
			height: 148rpx;
			z-index: 1;

			.card-btn {
				width: 690rpx;
				height: 80rpx;
				background: linear-gradient(92deg, #3cb7d2 2%, #44c5d5 98%);
				border-radius: 40rpx;
				margin: 34rpx auto;
				text-align: center;
				line-height: 80rpx;
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: 400;
				color: #ffffff;
			}
		}
	}
</style>