mini_rabot/pages/selfInfo/payList/payList.vue

<template>
	<view class="content" :style="{height:nowHeight}">
		
		<view class="pay-list-box">
			<view class="pay-title">
				<image src="../../../static/icon/moneyIcon.png" mode=""></image>
				<text>购买查询次数</text>
			</view>
			
			<view class="pay-content" :class="{'border-select':selectId === search.searchId}"
			 v-for="search in searchList" :key='search.searchId' @click="selectPackage(search)">
				 <view style="margin-left: 3%;">可查询次数 {{search.searchCount}}</view>
				 <view style="margin-right: 5%;">¥ {{search.searchMoney}}</view>
			</view>						
		</view>
		
		<view class="pay-box">
			<view style="margin-left: 5%;">{{packageMoney}}</view>
			<button type="primary" class="submit-message" @click="payPackage()">购买</button>
		</view>
	
	</view>
</template>

<script>
	export default {
		data() {
			return { 
				nowHeight:getApp().globalData.glbalHeight,
				selectId:'',
				packageMoney:'',
				searchList:[
					{
						searchCount:'100',
						searchMoney:'10',
						searchId:'A1',	
					},
					{
						searchCount:'200',
						searchMoney:'20',
						searchId:'A2',	
					},{
						searchCount:'300',
						searchMoney:'30',
						searchId:'A3',	
					},
				],
			}
		},
		methods: {
			selectPackage(param){
				this.selectId  = param.searchId;
				this.packageMoney = param.searchMoney + '元';
			}
		}
	}
	
</script>

<style>
     .content {
     	display: flex;
     	flex-direction: column;
     	align-items: center;
     	justify-content: flex-start;
     	background: #f4f5f7;
     }
	 
	 .pay-list-box {
		 width: 95%;
		 min-height:400upx;
		 background: #fff;
		 margin-top: 3%;
		 border-radius: 10rpx;
	 }
	 .pay-title {
		 width: 95%;
		 height: 80rpx;
		 font-size: 30rpx;
		 margin: 0 auto;
		 border-bottom: 1px solid #d9d9d9;
		 display: flex;
		 align-items: center;

	 }
	 .pay-title image {
		 width: 50upx;
		 height: 50upx;
		 margin-right: 2%;
	 }
	 .pay-content {
		 width: 95%;
		 height: 90rpx;
		 font-size: 30rpx;
		 margin: 3% auto;
		 border: 1px solid #d9d9d9;
		 display: flex;
		 align-items: center;
		 justify-content: space-between;
		 border-radius: 10rpx;
	 }
	 .pay-box {
	 	width: 100%;
	 	height: 100rpx;
	 	position: fixed;
	 	bottom: 0;
	 	background: #fff;
	 	display: flex;
	 	align-items: center;
	 }
	 
	 .pay-box button {
		 margin-right: 5%;
		 height: 55rpx;
		 line-height: 55rpx;
		 font-size: 28rpx;
         background: #27BCEF;
	 }
	 .border-select {
		 border:2px solid #27BCEF !important;
	 }
</style>