|
|
@@ -0,0 +1,122 @@
|
|
|
+<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>
|