lanan-repair/pages/my/cardRoll.vue

<template>
	<view class="container">
		<v-navigation-bar title-color="#333" background-color="#fff" title="卡券包">
		</v-navigation-bar>
<!--		<view class="tabbar">-->
<!--			<view v-for="item in tabList" :key="item.value" class="tabItem" :class="{active: activeKey === item.value}">-->
<!--				{{item.title}}-->
<!--				<view v-if="activeKey === item.value" class="activeLine">-->

<!--				</view>-->
<!--			</view>-->
<!--		</view>-->
		<view class="body">
			<view class="cardItem">
				<view class="cardItemTop" v-for="item in customInfo.couponList">
					<!-- <image class="cardImg" src="" mode="aspectFill"></image> -->
					<view class="cardImg">
						<view v-if="item.couponType == 'lbq'" class="cardImgText">礼包券</view>
						<view v-if="item.couponType == 'byk'" class="cardImgText">保养卡</view>
						<image class="cardImgBg" src="../../static/images/cardRollBg.png" mode="aspectFit"></image>
					</view>
					<view class="cardInfo">
						<view class="cardName">{{ item.couponName }}</view>
<!--						<view class="cardEndDate">2024-09-20</view>-->
					</view>
					<view v-if="item.outRule != 'mehx'" class="cardInfoRight">
						<view class="cardNum">
							<text class="cardNumValue">{{ item.balance }}</text>次
						</view>
						<view class="cardLabel">可用次数</view>
					</view>
          <view v-if="item.outRule == 'mehx'" class="cardInfoRight">
            <view class="cardNum">
              <text class="cardNumValue">{{ item.balance }}</text>元
            </view>
            <view class="cardLabel">余额</view>
          </view>
				</view>
<!--				<view class="cardItemBottom">-->
<!--					<view class="useSm">使用说明</view>-->
<!--					<view class="useBtn">去使用</view>-->
<!--				</view>-->
			</view>
		</view>
	</view>
</template>

<script>
	import VNavigationBar from '@/components/VNavigationBar.vue'

	export default {
		components: {
			VNavigationBar,
		},
		data() {
			return {
        customInfo:{},
				tabList: [{
						value: 0,
						title: '礼包券'
					},
					{
						value: 1,
						title: '卡包'
					}
				],
				activeKey: 0
			};
		},
    onLoad(data) {
      //当前登录用户信息
      this.customInfo = JSON.parse(uni.getStorageSync('customerInfo'))
      console.log(this.customInfo,66)
    },
	}
</script>

<style lang="less" scoped>
	.container {
		height: 100%;
		background-color: #F0F1F5;

		display: flex;
		flex-direction: column;

		.body {
			flex: 1;
			height: 0;
			box-sizing: border-box;
			padding: 30rpx 0;
			margin: 0 32rpx;

			display: flex;
			flex-direction: column;
			row-gap: 20rpx;

			overflow: auto;


			.cardItem {
				background: #FFFFFF;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				padding: 30rpx;
			}

			.cardItemTop {
				display: flex;
				align-items: center;
				column-gap: 16rpx;
				padding-bottom: 32rpx;
				border-bottom: 1px solid #ddd;
			}

			.cardImg {
				width: 136rpx;
				height: 100rpx;
				background-color: #efefef;
				
				display: flex;
				align-items: center;
				justify-content: center;
				
				position: relative;
				
				.cardImgText {
					color: #fff;
					font-size: 24rpx;
					position: relative;
					z-index: 2;
				}
				
				.cardImgBg {
					position: absolute;
					width: 100%;
					height: 100%;
					top: 0;
					left: 0;
					z-index: 1;
				}
			}

			.cardInfo {
				flex: 1;
				width: 0;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				padding: 6rpx 0;

				.cardName {
					font-size: 32rpx;
					color: #333333;
				}

				.cardEndDate {
					font-size: 24rpx;
					color: #999999;
				}
			}

			.cardInfoRight {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				font-size: 24rpx;
				color: #FC4D4A;

				.cardNumValue {
					font-size: 64rpx;
				}

				.cardLabel {
					color: #999999;
				}
			}
		}

		.cardItemBottom {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30rpx 0 0;

			.useSm {
				font-size: 24rpx;
				color: #999999;
			}

			.useBtn {
				width: 144rpx;
				height: 60rpx;
				border-radius: 30rpx 30rpx 30rpx 30rpx;
				border: 1rpx solid #FC4D4A;
				font-size: 28rpx;
				color: #FC4D4A;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}

	.tabbar {
		background-color: #fff;
		display: flex;
		align-items: center;

		.tabItem {
			flex: 1;
			width: 0;

			display: flex;
			justify-content: center;
			padding: 30rpx 0;

			position: relative;
		}

		.activeLine {
			width: 52rpx;
			height: 8rpx;
			background: #009EDA;
			border-radius: 4rpx 4rpx 4rpx 4rpx;
			
			position: absolute;
			left: 50%;
			bottom: 2rpx;
			transform: translate(-50%, 0);
		}
	}
</style>