包月卡购买页面新增卡片

assets/img/antFill-crown Copy.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="64 64 896 896" width="12" height="12" style="border-color: rgba(0,0,0,0);border-width: bpx;border-style: undefined" filter="none">
+    
+    <g>
+    <path d="M899.6 276.5L705 396.4 518.4 147.5a8.06 8.06 0 0 0-12.9 0L319 396.4 124.3 276.5c-5.7-3.5-13.1 1.2-12.2 7.9L188.5 865c1.1 7.9 7.9 14 16 14h615.1c8 0 14.9-6 15.9-14l76.4-580.6c.8-6.7-6.5-11.4-12.3-7.9zM512 734.2c-62.1 0-112.6-50.5-112.6-112.6S449.9 509 512 509s112.6 50.5 112.6 112.6S574.1 734.2 512 734.2zm0-160.9c-26.6 0-48.2 21.6-48.2 48.3 0 26.6 21.6 48.3 48.2 48.3s48.2-21.6 48.2-48.3c0-26.6-21.6-48.3-48.2-48.3z" fill="rgba(42.075,44.114999999999995,48.96,1)"></path>
+    </g>
+  </svg>

pages/monthlyCardActivity/monthlyCardBuy.vue

@@ -8,15 +8,15 @@
 					<view class="title-1">
 						充电服务费包月卡
 					</view>
-					<view class="title-2">
-						到期时间：{{userCard&&ispay?userCard.endTime:'未购买'}}<br/>
+					<view class="title-2">
+						到期时间：{{userCard&&ispay?userCard.endTime:'未购买'}}<br />
 						有效期内，合约充电站使用度数无上限
 					</view>
 				</view>
 				<img class="cover" src="../../assets/img/cover@3.png" alt="">
 			</view>
 		</view>
-		
+
 		<view class="slogan-1">
 			充电服务费包月卡
 		</view>
@@ -26,20 +26,56 @@
 		<!-- <view class="slogan-3" style="color: #ead9b4;" >
 			限时活动结束时间2022年8月8日0点结束
 		</view> -->
-		<view class="slogan-3" >
-			 <view  v-html="ykgz"></view>
-				
-			 
-			<view class="slogan-4" @click="gotoUrl('pages/monthlyCardActivity/monthlyCardList?cardId='+cardId)">
-				查看本活动适用站点
-			</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>
+<view class="slogan-3">
+			<view v-html="ykgz"></view>
+
+
+			<view class="slogan-4" @click="gotoUrl('pages/monthlyCardActivity/monthlyCardList?cardId='+cardId)">
+				查看本活动适用站点
+			</view>
 		</view>
-		
-		
-		
-		
+
 		<u-action-sheet :list="list" @click="click" v-model="show"></u-action-sheet>
-		<u-modal v-model="showModel" :show-cancel-button="true" @cancel="getUserInfo()" @confirm="confirm" confirm-text="支付成功？" title="扫码支付">
+		<u-modal v-model="showModel" :show-cancel-button="true" @cancel="getUserInfo()" @confirm="confirm"
+			confirm-text="支付成功？" title="扫码支付">
 			<view style="
 								text-align: center;
 							">
@@ -51,73 +87,60 @@
 
 		</u-modal>
 		<img id="qrcode" style="display: none;">
-		
-		<view class="bottom" v-if="!show2" @click="gotoGz" >
-			<button class="dredge" >关注公众号</button>
+
+		<view class="bottom" v-if="!show2" @click="gotoGz">
+			<button class="dredge">关注公众号</button>
 		</view>
-		<view class="bottom" v-else-if="!infoSet" @click="gotoUrl('pages/user/dataSet')" >
-			<button class="dredge" >完善个人信息</button>
+		<view class="bottom" v-else-if="!infoSet" @click="gotoUrl('pages/user/dataSet')">
+			<button class="dredge">完善个人信息</button>
 		</view>
-		<view class="bottom" v-else-if="!endCardBool" >
-			<button class="dredge" >已下架</button>
-			
+		<view class="bottom" v-else-if="!endCardBool">
+			<button class="dredge">已下架</button>
+
 		</view>
-		
+
 		<!-- 立即开通 -->
-		<view class="bottom" v-else-if="ispay" >
-			<button class="dredge" >已购买</button>
+		<view class="bottom" v-else-if="ispay">
+			<button class="dredge">已购买</button>
 		</view>
-		
+
 		<!-- 立即开通 -->
-		<view class="bottom" v-else-if="!ispay&&detail.price" >
-			<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>
-		
+		<view class="bottom" v-else-if="!ispay&&detail.price">
+			<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>
+
 			<p>开通表示阅读并同意
 				<text class="agreement" @click="gotoUrl('pages/article/details?code=FWFZKXY')">《服务费折扣协议》</text>
 			</p>
 		</view>
-		
-		
-		<u-modal v-model="show1" @confirm="gotoGz"
-		cancel-text="暂不关注"  
-		confirm-text="前往关注"
-		
-		 confirm-color="#53b56b"
-			:show-cancel-button="true" 
-			ref="uModal2" :asyncClose="true" 
-			 >
-			<view style="padding: 15px;"
-			
-			>请先关注<span style=" color:  #53b56b;">{{projectName}}</span>公众号，购买月卡</view>
-			
-			
+
+
+		<u-modal v-model="show1" @confirm="gotoGz" cancel-text="暂不关注" confirm-text="前往关注" confirm-color="#53b56b"
+			:show-cancel-button="true" ref="uModal2" :asyncClose="true">
+			<view style="padding: 15px;">请先关注<span style=" color:  #53b56b;">{{projectName}}</span>公众号，购买月卡</view>
+
+
 		</u-modal>
-		 
-		 
-		 <u-modal v-model="infoSet1" @confirm="infoSet1=false,gotoUrl('pages/user/dataSet')"
-		 cancel-text="取消"  
-		 confirm-text="完善个人信息"
-		 
-		  confirm-color="#53b56b"
-		 	:show-cancel-button="true" 
-		 	ref="uModal2" :asyncClose="true" 
-		 	 >
-		 	<view style="padding: 15px;"
-		 	
-		 	>购买月卡需要完善以下2点<br/>
-			1.填写真实姓名<br/>
-			2.填写车牌号<br/>
+
+
+		<u-modal v-model="infoSet1" @confirm="infoSet1=false,gotoUrl('pages/user/dataSet')" cancel-text="取消"
+			confirm-text="完善个人信息" confirm-color="#53b56b" :show-cancel-button="true" ref="uModal2" :asyncClose="true">
+			<view style="padding: 15px;">购买月卡需要完善以下2点<br />
+				1.填写真实姓名<br />
+				2.填写车牌号<br />
 			</view>
-		 </u-modal>
+		</u-modal>
 	</view>
 </template>
 
 <script>
 	import * as API_weixin from '@/apis/weixin.js'
-	
+
 	import * as Pay from '@/apis/weixin.js'
 	import * as API from '@/apis/card.js'
 	import * as loginApi from '@/apis/login.js'
@@ -133,10 +156,10 @@
 	export default {
 		data() {
 			return {
-				cardId:'3e1b0f8f-61b0-405f-a285-929b5346479f',
+				cardId: '3e1b0f8f-61b0-405f-a285-929b5346479f',
 				qrCodeImg: "",
 				showModel: false,
-				projectName:"",
+				projectName: "",
 				list: [{
 					text: '微信',
 
@@ -144,126 +167,126 @@
 					text: '支付宝'
 				}],
 				show: false,
-				submitForm:{},
-				ykgz:'',
-				detail:{},
-				ispay:true,
-				show2:false,
-				show1:false,
-				infoSet:false,
-				infoSet1:false,
-				userCard:null,
-				
+				submitForm: {},
+				ykgz: '',
+				detail: {},
+				ispay: true,
+				show2: false,
+				show1: false,
+				infoSet: false,
+				infoSet1: false,
+				userCard: null,
+
 			}
 		},
 		onLoad() {
-			this.projectName=process.car.ProjectName;
-			
+			this.projectName = process.car.ProjectName;
+
 		},
 		onReady() {
-			this.ykgz=this.carhelp.getConfig().ykgz
+			this.ykgz = this.carhelp.getConfig().ykgz
 			//this.checkSubscribe()
-			
+
 		},
-		 onShow(){
-			 this.checkSubscribe();
-		 },
-		 computed:{
-			 endCardBool(){
-			
-			 	var date=new Date().getTime()
-				if(!this.detail.endTime){
-					return true;
+		onShow() {
+			this.checkSubscribe();
+		},
+		computed: {
+			endCardBool() {
+
+				var date = new Date().getTime()
+				if (!this.detail.endTime) {
+					return true;
+				}
+				var date2 = newDate(this.detail.endTime).getTime();
+
+				if (date < date2) {
+					return true;
+				} else {
+					return false;
 				}
-			 	var date2=newDate(this.detail.endTime).getTime();
-			 
-			 	if(date<date2){
-			 		return true;
-			 	}else{
-			 		return false;
-			 	}
-			 }
-		 },
+			}
+		},
 		methods: {
-			gotoGz(){
+			gotoGz() {
 				this.carhelp.setGzDate()
-				var url="https://mp.weixin.qq.com/s/mCHz1nNvg0xAICiBeIyKRQ";
-				window.location.href=url
-				
+				var url = "https://mp.weixin.qq.com/s/mCHz1nNvg0xAICiBeIyKRQ";
+				window.location.href = url
+
 			},
-			checkSubscribe(){
+			checkSubscribe() {
 				API_weixin.checkSubscribe({
-					openId: this.carhelp.getOpenId() 
+					openId: this.carhelp.getOpenId()
 				}).then((res) => {
-					
-					if(res.data=="0"){
-						this.show1=true
-						
-					}else{
+
+					if (res.data == "0") {
+						this.show1 = true
+
+					} else {
 						this.getInfo();
 						this.getUserInfo()
-						this.show2=true;
+						this.show2 = true;
 						//this.carhelp.setGzDate() 
 					}
-					
+
 					//setGzDate
 				}).catch(error => {
 					uni.showToast({
 						title: error
 					})
 				})
-				
+
 			},
-			userCardBool(userCard){
-				
-				
-				if(userCard){
-					var date=new Date().getTime()
-					var date2=newDate(userCard.endTime).getTime();
-					if(date<date2){
+			userCardBool(userCard) {
+
+
+				if (userCard) {
+					var date = new Date().getTime()
+					var date2 = newDate(userCard.endTime).getTime();
+					if (date < date2) {
 						return true;
 					}
 				}
 				return false
 			},
-		
-			getUserInfo(){
+
+			getUserInfo() {
 				uni.showLoading({
 					title: "加载中",
 					mask: true,
-				})		
+				})
 				loginApi.findByOpenId({
 					openId: this.carhelp.getOpenId(),
-					noerror:true
+					noerror: true
 				}).then((res) => {
 					uni.hideLoading();
-					
-					if (res.code == 200&&res.result) {
-						
-						if(res.data.regUser){
-							var userInfo=res.data.regUser
-							
-							if(userInfo.carId&&userInfo.realName){
-								this.infoSet=true;
-								
-							}else{
-								this.infoSet=false;
-								this.infoSet1=true;
+
+					if (res.code == 200 && res.result) {
+
+						if (res.data.regUser) {
+							var userInfo = res.data.regUser
+
+							if (userInfo.carId && userInfo.realName) {
+								this.infoSet = true;
+
+							} else {
+								this.infoSet = false;
+								this.infoSet1 = true;
 							}
-							
-							var userCard=res.data.userCard;
-							this.userCard=userCard
-							this.ispay=	this.userCardBool(userCard)
-							
-						}else{
-							
+
+							var userCard = res.data.userCard;
+							this.userCard = userCard
+							this.ispay = this.userCardBool(userCard)
+
+						} else {
+
 						}
-					
+
 					}
-					
-					
-					
-				
+
+
+
+
 				}).catch(error => {
 					uni.showToast({
 						title: error,
@@ -271,26 +294,26 @@
 					})
 				})
 			},
-			putShelf2(){
+			putShelf2() {
 				uni.showToast({
-					title:"暂不支持重复购买"
+					title: "暂不支持重复购买"
 				})
 			},
-			putShelf(){
+			putShelf() {
 				uni.showToast({
-					title:"已下架，暂不支持购买"
+					title: "已下架，暂不支持购买"
 				})
 			},
-			getInfo(){
+			getInfo() {
 				uni.showLoading({
 					title: "加载中",
 					mask: true,
 				})
 				API.cardDetail({
-					cardId:this.cardId
+					cardId: this.cardId
 				}).then((response) => {
 					console.log(response)
-					this.detail=response.data.monthlyRentCard
+					this.detail = response.data.monthlyRentCard
 					uni.hideLoading()
 				}).catch(error => {
 					uni.showToast({
@@ -298,8 +321,8 @@
 					})
 				})
 			},
-			submit(type){
-				if(!this.endCardBool){
+			submit(type) {
+				if (!this.endCardBool) {
 					return
 				}
 				uni.showLoading({
@@ -307,14 +330,14 @@
 					mask: true,
 				})
 				API.openCard({
-					cardId:this.cardId
+					cardId: this.cardId
 				}).then((response) => {
-					this.submitForm.id=response.data.orderInfoId
-					
-					if(type==0){			
+					this.submitForm.id = response.data.orderInfoId
+
+					if (type == 0) {
 						this.wxpy()
 					}
-					if(type==1){
+					if (type == 1) {
 						this.alpy()
 					}
 				}).catch(error => {
@@ -322,7 +345,7 @@
 						title: error
 					})
 				})
-				
+
 			},
 			alpy() {
 				uni.showLoading({
@@ -392,8 +415,10 @@
 <style lang="scss" scoped>
 	page {
 		background-color: #2a2c31;
+		padding-bottom: 200px;
 	}
-	.monthly-card-bgc{
+
+	.monthly-card-bgc {
 		padding: 20px;
 		background-color: #101010;
 		height: 150px;
@@ -402,11 +427,11 @@
 
 	// 卡片
 	.monthly-card {
-		
+
 		border-radius: 16px;
 		height: 150px;
 		background: linear-gradient(#F2E6CA, #C9A87B);
-		
+
 
 		.main {
 			padding: 24px 0 24px 24px;
@@ -417,6 +442,7 @@
 			background-size: cover;
 			color: rgba(255, 255, 255, 100);
 			border-radius: 6px;
+
 			.title-1 {
 				line-height: 28px;
 
@@ -457,22 +483,136 @@
 		margin-bottom: 12px;
 	}
 
-	.slogan-3 {
-		    text-align: initial;
+	.slogan-3 {
+		text-align: initial;
 		padding: 0 40px;
-		height: 20px;
+		line-height: 24px;
 		color: #CCCCCC;
 		font-size: 28rpx;
-		
+
 	}
-	.slogan-4 {
+
+	.slogan-4 {
 		margin-top: 10px;
-		text-decoration:underline;
+		text-decoration: underline;
 		height: 20px;
 		color: #9F9C99;
 		font-size: 32rpx;
 		text-align: center;
 	}
+
+
+	// 营运车辆,非营业车辆
+	.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;
+				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;
+	
+		.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;
+			}
+		}
+	}
+	
+	.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;
+		}
+	}
+}
+
 	// 立即开通
 	.bottom {
 
@@ -503,4 +643,4 @@
 			color: #897a69;
 		}
 	}
-</style>
+</style>