月卡购买

apis/card.js

@@ -20,3 +20,13 @@ export function openCard(data) {
 		url: '/mobile/regUserCard/openCard'
 	})
 }
+
+export function cardList(data) {
+	 
+	return request({
+		method: 'get',
+		data:data ,
+		url: '/mobile/regUserCard/cardList'
+	})
+}
+

pages/monthlyCardActivity/monthlyCardBuy.vue

@@ -26,49 +26,44 @@
 		<!-- <view class="slogan-3" style="color: #ead9b4;" >
 			限时活动结束时间2022年8月8日0点结束
 		</view> -->
-		<!-- 营运车辆 -->
-		<view class="operating-coach">
-			<view class="type">
-				<view class="title">
-					<text class="img">
-						<img src="../../assets/img/antFill-crown@3x.png" alt="">
-					</text>非营运车专享卡
-				</view>
-				<view class="hint">
-					有效期内，每月优惠度数无上限
-				</view>
-
-			</view>
-			<view class="price">
-
-				<text class="num">59.90</text>
-				<text class="unit">元</text>
-			</view>
-		</view>
-		<!-- 非营运车辆 -->
-		<view class="non-operational-car">
-			<view class="type">
-				<view class="title">
-					<text class="img">
-						<img src="../../assets/img/antFill-crown Copy.svg" alt="">
-					</text>营运车包月卡
-				</view>
-				<view class="hint">
-					有效期内，每月优惠度数无上限
-				</view>
-				
-			</view>
-			<view class="price">
-				
-				<text class="num">199.00</text>
-				<text class="unit">元</text>
-			</view>
-		</view>
+		<!-- 营运车辆 -->
+		<template  v-for="(item,i) in cardList"  >
+			<view  class="operating" :class="{
+				'operating-coach':item.id==cardId,
+				'non-operational-car':item.id!=cardId,
+			}"
+			v-show="cardList.length>1"
+			@click="cardId=item.id,detail=item"
+			 :key="i">
+				<view class="type">
+					<view class="title">
+						<text class="img">
+							<img  v-if="item.id==cardId" src="../../assets/img/antFill-crown@3x.png" alt="">
+							<img   v-else src="../../assets/img/antFill-crown Copy.svg" alt="">
+							 
+						</text>{{item.name}}
+					</view>
+					<view class="hint">
+						{{item.remark}}
+					</view>
+			
+				</view>
+				<view class="price">
+			
+					<text class="num">{{item.price.toFixed(2)}}</text>
+					<text class="unit">元</text>
+				</view>
+			</view>
+		</template>
+		
+		 
 <view class="slogan-3">
 			<view v-html="ykgz"></view>
 
 
-			<view class="slogan-4" @click="gotoUrl('pages/monthlyCardActivity/monthlyCardList?cardId='+cardId)">
+			<view class="slogan-4"
+			 v-if="cardId||ispay"
+			 @click="gotoUrl('pages/monthlyCardActivity/monthlyCardList?cardId='+(ispay?userCard.rentCardId:cardId))">
 				查看本活动适用站点
 			</view>
 		</view>
@@ -105,14 +100,14 @@
 		</view>
 
 		<!-- 立即开通 -->
-		<view class="bottom" v-else-if="!ispay&&detail.price">
+		<view class="bottom" v-else-if="!ispay">
 			<button class="dredge" v-if="detail.putShelf&&!detail.isVip" @click="show = true">立即开通
 				￥{{detail.price.toFixed(2)}}/月</button>
 			<button class="dredge" v-if="detail.putShelf&&detail.isVip" @click="show = true">{{detail.platformText}}车主特惠
 				￥{{detail.price.toFixed(2)}}/月<span
 					style="font-size: 12px;    text-decoration: line-through;">￥{{detail.oldPrice.toFixed(2)}}</span></button>
 
-			<button class="dredge" v-if="!detail.putShelf" @click="putShelf"> 已下架</button>
+			<button class="dredge" v-if="!cardList.length" @click="putShelf"> 已下架</button>
 
 			<p>开通表示阅读并同意
 				<text class="agreement" @click="gotoUrl('pages/article/details?code=FWFZKXY')">《服务费折扣协议》</text>
@@ -156,9 +151,10 @@
 	export default {
 		data() {
 			return {
-				cardId: '3e1b0f8f-61b0-405f-a285-929b5346479f',
+				cardId: '',
 				qrCodeImg: "",
-				showModel: false,
+				showModel: false,
+				cardList:[],
 				projectName: "",
 				list: [{
 					text: '微信',
@@ -223,8 +219,9 @@
 						this.show1 = true
 
 					} else {
-						this.getInfo();
-						this.getUserInfo()
+						//this.getInfo();
+						this.getUserInfo()
+						this.getCardList();
 						this.show2 = true;
 						//this.carhelp.setGzDate() 
 					}
@@ -238,7 +235,7 @@
 
 			},
 			userCardBool(userCard) {
-
+				return false
 
 				if (userCard) {
 					var date = new Date().getTime()
@@ -249,7 +246,30 @@
 				}
 				return false
 			},
-
+			getCardList(){
+				uni.showLoading({
+					title: "加载中",
+					mask: true,
+				})
+				API.cardList({
+					
+				}).then((response) => {
+					
+					
+					this.cardList=response.data.monthlyRentCardList;
+					if(this.cardList.length){
+						this.detail = this.cardList[0]
+						this.cardId=this.detail.id;
+					}
+					console.log(this.cardList)
+					//cardId: this.cardId
+					uni.hideLoading()
+				}).catch(error => {
+					uni.showToast({
+						title: error
+					})
+				})
+			},
 			getUserInfo() {
 				uni.showLoading({
 					title: "加载中",
@@ -501,115 +521,90 @@
 		text-align: center;
 	}
 
-
+	.operating{
+		
+		border: 1px solid rgba(100, 90, 77, 100);
+			padding: 30rpx;
+			margin: 32rpx 40rpx 0;
+			//background: linear-gradient(to right, #bc9663, #79674d);
+			display: flex;
+			justify-content: space-between;
+			color: #fff;
+			border-radius: 12px;
+		
+			.title {
+				color: rgba(255, 255, 255, 100);
+				font-size: 18px;
+				line-height: 20px;
+		
+				.img {
+					display: inline-block;
+					background-color: #fff;
+					width: 40rpx;
+					height: 40rpx;
+					border-radius: 8rpx;
+					line-height: 36rpx;
+					margin-right: 8rpx;
+		
+					img {
+						width: 24rpx;
+						height: 24rpx;
+						margin-left: 8rpx;
+					}
+				}
+			}
+		
+			.hint {
+				color: rgba(255, 255, 255, 100);
+				font-size: 12px;
+				line-height: 24px;
+				margin-top: 4px;
+			}
+		
+			.price {
+				color: rgba(255, 255, 255, 100);
+		
+				margin: auto 0;
+		
+				.num {
+					font-size:56rpx;
+				}
+		
+				.unit {
+					font-size: 32rpx;
+					margin-left: 8rpx;
+				}
+			}
+		
+	}
 	// 营运车辆,非营业车辆
 	.operating-coach {
-
-		padding: 16px;
-		width: 89.3%;
-		margin: 16px auto 0;
+		
 		background: linear-gradient(to right, #bc9663, #79674d);
-		display: flex;
-		justify-content: space-between;
-		color: #fff;
-		border-radius: 12px;
-
+		
 		.title {
-			color: rgba(255, 255, 255, 100);
-			font-size: 18px;
-			line-height: 20px;
-
-			.img {
-				display: inline-block;
+			
+			.img {		
 				background-color: #fff;
-				width: 20px;
-				height: 20px;
-				border-radius: 4px;
-				line-height: 18px;
-				margin-right: 4px;
-
-				img {
-					width: 12px;
-					height: 12px;
-					margin-left: 4px;
-				}
 			}
 		}
 
-		.hint {
-			color: rgba(255, 255, 255, 100);
-			font-size: 12px;
-			line-height: 24px;
-			margin-top: 4px;
-		}
-
 		.price {
 			color: rgba(255, 255, 255, 100);
 
-			margin: auto 0;
-
-			.num {
-				font-size: 28px;
-			}
-
-			.unit {
-				font-size: 16px;
-				margin-left: 4px;
-			}
 		}
 	}
 
 .non-operational-car{
-	padding: 16px;
-	width: 89.3%;
-	border: 1px solid rgba(100, 90, 77, 100);
-	margin: 12px auto 16px;
-	display: flex;
-	justify-content: space-between;
-	color: #fff;
-	border-radius: 12px;
-	.title {
-		color: rgba(255, 255, 255, 100);
-		font-size: 18px;
-		line-height: 20px;
 	
+	.title {
 		.img {
-			display: inline-block;
-			background:linear-gradient(#f2e6ca,#c9a87b) ;
-			width: 20px;
-			height: 20px;
-			border-radius: 4px;
-			line-height: 18px;
-			margin-right: 4px;
-	
-			img {
-				width: 12px;
-				height: 12px;
-				margin-left: 4px;
-			}
+		 
+			background:linear-gradient(#f2e6ca,#c9a87b) ;	 
 		}
 	}
-	
-	.hint {
-		color: rgba(255, 255, 255, 100);
-		font-size: 12px;
-		line-height: 24px;
-		margin-top: 4px;
-	}
-	
 	.price {
 		color: rgba(211, 189, 158, 100);
-	
-		margin: auto 0;
-	
-		.num {
-			font-size: 28px;
-		}
-	
-		.unit {
-			font-size: 16px;
-			margin-left: 4px;
-		}
 	}
 }