diff --git a/src/subpackage/common/components/card_search.vue b/src/subpackage/common/components/card_search.vue
index 9d6c58f..8b66b63 100644
--- a/src/subpackage/common/components/card_search.vue
+++ b/src/subpackage/common/components/card_search.vue
@@ -1,276 +1,215 @@
 <template>
-	<view class="content" v-if="show">
-		<view class="win-mask"></view>
-		
-		<view class="win-operate">
-			<image mode="aspectFit" src="/static/images/icon/retail/close.png" @click="onClose"></image>
-			<text class="win-title">请选择储值卡</text>
-
-			<view class="win-card">
-				<view class="win-card-search">
-					<image v-if="searchCardValue?false:true" mode="aspectFit" src="/static/images/icon/retail/search.png"></image>
-					<input v-model="searchCardValue" @change="searchCardList" placeholder="请输入微信昵称/手机号码/储值卡号搜索" placeholder-style="win-card-search-input-placeholder">
-				</view>
-				<view class="win-card-list">
-					<view class="win-card-list-item" v-for="(item, index) in cardList" :key="index" @click="onCardClick(item)" :style="{borderColor:item.mark===choosePath?'#009874':'#979797'}">
-						<view>储值卡卡号：<text :style="{color:item.color.card_no}">{{ item.card_no }}</text></view>
-						<view>微信昵称：<text :style="{color:item.color.nickname}">{{ item.nickname }}</text></view>
-						<view>手机号码：<text :style="{color:item.color.mobile}">{{ item.mobile }}</text></view>
-						<view>卡名称：<text :style="{color:item.color.card_name}">{{ item.card_name }}</text></view>
-						<view>卡余额：<text :style="{color:item.color.balance}">￥{{ item.balance }}</text></view>
-						<image mode="aspectFit" :src="item.mark"></image>
+	<view class="card-search-modal" v-show="isShow">
+		<view class="csm-container">
+			<view class="cc-tit">请选择储值卡</view>
+			<image 
+				class="cc-close" 
+				mode="aspectFit" 
+				src="/subpackage/common/static/images/x_close.png"
+				@click="hide"
+			></image>
+			<view class="cc-search">
+				<input 
+					type="text" 
+					class="cs-input" 
+					placeholder="请输入微信昵称/手机号码/储值卡号搜索" 
+					confirm-type="search"
+					v-model="searchKey"
+					@confirm="getCanUseValueCardList"
+				/>
+			</view> 
+			<scroll-view class="cc-list" scroll-y>
+				<view class="cl-item" v-for="(e, i) in cardLs" :key="i" @click="selectedCard = e">
+					<view class="ci-content">
+						<view class="cc-line"><text class="cc-txt">储值卡卡号：</text>NO.{{ e.card_no || '-' }}</view>
+						<view class="cc-line green"><text class="cc-txt">微信昵称：</text>{{ e.nickname || '-' }}</view>
+						<view class="cc-line"><text class="cc-txt">手机号码：</text>{{ e.mobile || '-' }}</view>
+						<view class="cc-line"><text class="cc-txt">卡名称：</text>{{ e.card_name || '-' }}</view>
+						<view class="cc-line"><text class="cc-txt">卡余额：</text>￥{{ e.amount || '0' }}</view>
+					</view>
+					<view class="ci-icon" :class="[selectedCard.card_no==e.card_no?'active':'']">
+						<image class="ci-img" mode="aspectFit" src="/subpackage/common/static/images/choose.png"></image>
 					</view>
 				</view>
-			</view>
-			
-			<view class="win-way-confirm"><button hover-class="hover-active" @click="onConfirm">确定</button></view>
-			<view class="win-iphonex-block"></view>
+			</scroll-view> 
+			<view class="cc-btn" hover-class="hover-active" @click="confirmBtn">确定</view>
 		</view>
 	</view>
 </template>
 
 <script>
-	import util from '../../../utils/util.js';
-	import server from '../js/server';
-	import api from '../js/api';
-	
-	export default {
-		props: [
-			"show", "price", "storeId", "brandId"
-		],
-		data() { 
-			return {
-				cardList: [],		// 储值卡列表
-				choosePath: "/static/images/icon/retail/choose.png",
-				noChoosePath: "/static/images/icon/retail/noChoose.png",
-				curCardChoose: null,
-				searchCardValue: "",
-			}
+import util from '../../../utils/util.js';
+import server from '../js/server.js';
+import API from '../js/api.js';
+export default {
+	props: {
+		sid: {
+			type: String,
+			default: ''
 		},
-		created() {
-			
+		amount: {
+			type: String,
+			default: ''
 		},
-		methods: {
-			// 储值卡点击
-			onCardClick(item) {
-				this.curCardChoose = item;
-				for (let i = 0; i < this.cardList.length; ++i) this.cardList[i].mark = this.noChoosePath;
-				this.curCardChoose.mark = this.choosePath;
-			},
-			// 获取储值卡列表
-			searchCardList() {
-				if (!this.searchCardValue) {
-					this.cardList = [];
-					this.curCardChoose = null;
-					// util.showNone("请输入微信昵称/手机号码/储值卡号搜索");
-					return;
-				}
-				
-				let _this = this;
-				this.cardList = [];
-				
-				util.showLoad();
-				server.get({
-					url: api.assistantGetValueCardList,
-					data: {
-						brand_id: this.brandId,
-						stadium_id: this.storeId,
-						total_amount: this.price,
-						key: this.searchCardValue,
-					},
-					isDefaultGet: false,
-					failMsg: '搜索失败！'
-				}).then(res => {
-					util.hideLoad();
-					if (res.data.code == 0) {
-						let color = "#333";
-						for (let i = 0; i < res.data.data.length; ++i) {
-							_this.cardList.push(res.data.data[i]);
-							_this.cardList[i].mark = this.noChoosePath;
-							_this.cardList[i].color = {
-								card_no: color, nickname: color, mobile: color, card_name: color, balance: color
-							};
-							
-							for (let j = 0; j < res.data.data[i].match_key_fields.length; ++j)
-								_this.cardList[i].color[res.data.data[i].match_key_fields[j]] = "#009874";
-						}
-						
-						if (_this.cardList.length) {
-							_this.cardList[0].mark = _this.choosePath;
-							this.curCardChoose = _this.cardList[0];
-						}
-						else {
-							util.showNone("查询不到该储值卡信息，请检查重新输入");
-						}
-					}
-					else {
-						util.showNone(res.data.message || '操作失败！');
-					}
-				});
-			},
-			// 重置数据
-			resetData() {
-				this.curCardChoose = null;
-				this.cardList = [];
-				this.searchCardValue = "";
-			},
-			// 关闭窗口
-			onClose() {
-				this.$emit("update:onClose", false);
-			},
-			// 支付确定
-			onConfirm() {
-				if (!this.curCardChoose) {
-					util.showNone("请搜索选择储值卡！");
-					return;
-				}
-				this.$emit("update:onConfirm", this.curCardChoose);
-				this.onClose();
-			}
+	},
+	data(){
+		return {
+			isShow: false,
+			searchKey: '',
+			cardLs: [],
+			selectedCard: {},
 		}
-	}
+	},
+	methods: {
+		// 关闭
+		hide(){
+			this.isShow = false;
+			this.$emit('hide');
+		},
+		show(){
+			this.isShow = true;
+			this.$emit('show');
+		},
+		confirmBtn(){
+			let { selectedCard } = this;
+			if(!selectedCard?.card_no)return util.showNone('请选择储值卡');
+			this.hide();
+			this.$emit('confirm', selectedCard);
+		},
+		getCanUseValueCardList(){
+			let { sid, amount, searchKey } = this;
+			this.cardLs = [];
+			this.selectedCard = {};
+			util.showLoad();
+			server.get({
+				url: API.canUseValueCardList,
+				data: {
+					stadium_id: sid,
+					amount: amount,
+					key: searchKey,
+				},
+				isDefaultGet: false,
+			})
+			.then(res => {
+				util.hideLoad();
+				if(res.data.code == 0){
+					let _ls = res?.data?.data?.list || [];
+					if(!_ls.length)return util.showNone('暂无可用储值卡');
+					this.cardLs = _ls;
+				}else{
+					util.showNone(res.data.message || '获取储值卡列表失败');
+				}
+				console.log(res);
+			})
+			.catch(util.hideLoad);
+		},
+	},
+}
 </script>
 
 <style lang="scss">
-	@import '~style/public.scss';
-	.content {
-		width: 100vw;
-		height: 100vh;
-		overflow: hidden;
+	@import "~style/public.scss";
+	.card-search-modal{
+		width: 100%;
+		height: 100%;
+		background: rgba(0,0,0,0.5);
 		position: fixed;
 		top: 0;
 		left: 0;
+		z-index: 999;
 	}
-	.win-mask {
-		width: 100%;
-		height: 100%;
+	.csm-container{
 		position: absolute;
-		background-color: rgba(0, 0, 0, 0.5);
-	}
-	.win-operate {
+		left: 0;
+		bottom: 0;
+		padding: 46upx 24upx 0upx;
+		padding-bottom: calc( 0upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
+		padding-bottom: calc( 0upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */
 		width: 100%;
-		height: 964rpx;
-		position: fixed;
-		bottom: 0%;
-		@include centerFlex(flex-start);
-		flex-direction: column;
-		background-color: white;
-		padding-top: 46rpx;
-		
-		> image {
-			width: 34rpx;
-			height: 34rpx;
-			position: absolute;
-			top: 32rpx;
-			right: 28rpx;
-		}
-		> text {
-			width: 100%;
-			color: #333;
-			font-size: 32rpx;
+		background-color: #fff;
+		.cc-tit{
+			line-height: 44upx;
 			text-align: center;
-			margin-bottom: 54rpx;
+			font-size: 32upx;
+			font-weight: 500;
 		}
-		.win-way-confirm {
-			width: 100%;
-			padding: 0 20rpx;
+		.cc-close{
 			position: absolute;
-			bottom: 0%;
-			bottom: calc( 0% + constant(safe-area-inset-bottom));
-			bottom: calc( 0% + env(safe-area-inset-bottom));
-			
-			> button {
+			right: 30upx;
+			top: 30upx;
+			width: 34upx;
+			height: 34upx;
+		}
+		.cc-search{
+			margin-top: 54upx;
+			padding: 0 20upx;
+			height: 92upx;
+			border-radius: 10upx;
+			background-color: #F2F2F7;
+			.cs-input{
 				width: 100%;
-				height: 112rpx;
-				line-height: 112rpx;
-				border-radius: 10rpx;
-				padding: 0 0;
-				color: white;
-				background-color: $themeColor;
+				height: 100%;
+				font-size: 32upx;
+				color: #333;
 			}
 		}
-		.win-iphonex-block {
-			background-color: white;
+		.cc-list{
+			height: 548upx;
 			width: 100%;
-			height: constant(safe-area-inset-bottom);
-			height: env(safe-area-inset-bottom);
-			poisition: absolute;
-			bottom: 0%;
-		}
-		.win-card {
-			width: 100%;
-			height: 100%;
-			position: relative;
-			@include centerFlex(flex-start);
-			flex-direction: column;
-			padding: 0 20rpx;
-			
-			.win-card-search {
-				width: 100%;
-				border-radius: 10rpx;
-				background-color: #f2f2f7;
-				margin-bottom: 30rpx;
-				@include centerFlex(flex-start);
-				
-				> image {
-					width: 40rpx;
-					height: 40rpx;
-					flex-shrink: 0;
-					margin-left: 20rpx;
+			margin-top: 30upx;
+			.cl-item{
+				padding: 20upx;
+				border: 2upx solid #979797;
+				border-radius: 10upx;
+				@include centerFlex(space-between);
+				&:not(:first-child){
+					margin-top: 24upx;
 				}
-				> input {
-					font-size: 32rpx;
-					padding: 24rpx 20rpx;
+				.ci-content{
 					flex-grow: 1;
-				} 
-				.win-card-search-input-placeholder {
-					font-size: 32rpx;
-					color: #9c9c9f;
+					.cc-line{
+						line-height: 40upx;
+						font-size: 28upx;
+						color: #333;
+						@include textHide(1);
+						.cc-txt{
+							color: #9C9C9F;
+						}
+						&.green{
+							color: $themeColor;
+						}
+					}
 				}
-			}
-			.win-card-list {
-				width: 100%;
-				height: 100rpx;
-				overflow: scroll;
-				@include centerFlex(flex-start);
-				flex-direction: column;
-				flex-grow: 1;
-				position: relative;
-				margin-bottom: 112rpx;
-				
-				.win-card-list-item {
-					display: flex;
-					flex-direction: column;
-					flex-shrink: 0;
-					width: 100%;
-					border: 2rpx solid #979797;
-					border-color: #979797;
-					border-radius: 10rpx;
-					padding: 20rpx 0;
-					margin-bottom: 24rpx;
-					position: relative;
-					
-					> view {
-						color: #9c9c9f;
-						font-size: 28rpx;
-						margin-bottom: 5rpx;
-						
-						> text {
-							color: #333;
-							font-size: 28rpx;
+				.ci-icon{
+					flex-grow: 0;
+					margin-left: 10upx;
+					width: 36upx;
+					height: 36upx;
+					overflow: hidden;
+					border-radius: 50%;
+					border: 2upx solid #979797;
+					&.active{
+						border-color: transparent;
+						.ci-img{
+							visibility: visible;
 						}
 					}
-					
-					> image {
-						width: 36rpx;
-						height: 36rpx;
-						position: absolute;
-						top: 50%;
-						right: 20rpx;
-						transform: translate(0%, -50%);
+					.ci-img{
+						visibility: hidden;
+						width: 100%;
+						height: 100%;
 					}
 				}
 			}
 		}
+		.cc-btn{
+			margin-top: 14upx;
+			line-height: 112upx;
+			text-align: center;
+			font-size: 32upx;
+			border-radius: 10upx;
+			background-color: $themeColor;
+			color: #fff;
+		}
 	}
-</style>
+</style>
\ No newline at end of file
diff --git a/src/subpackage/common/js/api.js b/src/subpackage/common/js/api.js
index 2c68d23..e38485a 100644
--- a/src/subpackage/common/js/api.js
+++ b/src/subpackage/common/js/api.js
@@ -4,6 +4,7 @@ export const COMMON_API = {
     assistantGetValueCardList:`${ORIGIN}/admin/assistant/getValueCardList`,  //  搜索储蓄卡
     takeUpBbocPay:`${ORIGIN}/admin/stadium/venue/takeUpBbocPay`,  //  挂账收款的接口
     venueTakeUp: `${ORIGIN}/admin/stadium/venue/takeUp`,  // 商家助手-占用场地提交
+    canUseValueCardList: `${ORIGIN}/admin/stadium/canUseValueCard/list`,  // 商家助手-占用场地可用储值卡列表
 }
 
 export default COMMON_API;
\ No newline at end of file
diff --git a/src/subpackage/common/pages/pay_type_select.vue b/src/subpackage/common/pages/pay_type_select.vue
index 6936523..9be7a6d 100644
--- a/src/subpackage/common/pages/pay_type_select.vue
+++ b/src/subpackage/common/pages/pay_type_select.vue
@@ -6,9 +6,11 @@
                 <view>{{ stadiumInfo.name || '-' }}</view>
             </view>
             <view class="ph-type-text">订场支付金额</view>
-            <view class="ph-price"><text>¥</text>{{ optionsQuery.amount || 0 }}</view>
+            <view class="ph-price"><text>¥</text>{{ payAmount || 0 }}</view>
             <view class="ph-discount-tip">
-                <block v-if="payMethodsID == 3"><text>原价：¥99，</text>折扣金额¥9.9</block>
+                <block v-if="payMethodsID == 3&&selectedCard&&selectedCard.discount">
+                    <text>原价：¥{{ optionsQuery.amount || 0 }}，</text>折扣金额¥{{ discountAmount || 0 }}
+                </block>
             </view>
         </view>
         <view class="pts-container">
@@ -26,41 +28,43 @@
                                 <image mode="aspectFit" src="/subpackage/common/static/images/choose.png"></image>
                             </view>
                         </view>
-                        <view class="pr-content" v-if="e.id == 3">
+                        <view class="pr-content" v-if="e.id == 3&&selectedCard&&selectedCard.card_no">
                             <view class="pc-line">
-                                <view class="pl-txt">储值卡卡号：230316000</view>
-                                <view class="pl-tag">使用会员卡支付9折</view>
+                                <view class="pl-txt">储值卡卡号：{{ selectedCard.card_no || '-' }}</view>
+                                <view class="pl-tag" v-if="selectedCard.discount">使用会员卡支付{{ selectedCard.discount || '-' }}折</view>
                             </view>
                             <view class="pc-line">
-                                <view class="pl-txt">微信昵称：LLL</view>
+                                <view class="pl-txt">微信昵称：{{ selectedCard.nickname || '-' }}</view>
                             </view>
                             <view class="pc-line">
-                                <view class="pl-txt">手机号码：13711029033</view>
+                                <view class="pl-txt">手机号码：{{ selectedCard.mobile || '-' }}</view>
                             </view>
                             <view class="pc-line">
-                                <view class="pl-txt">卡名称：1000元送200元卡</view>
+                                <view class="pl-txt">卡名称：{{ selectedCard.card_name || '-' }}</view>
                             </view>
                             <view class="pc-line">
-                                <view class="pl-txt">卡余额：￥1050</view>
+                                <view class="pl-txt">卡余额：￥{{ selectedCard.amount || '0' }}</view>
                             </view>
                         </view>
                     </view>
                 </view>
             </view>
         </view>
-        <cover-view class="sc-fixed-bot">
+        <cover-view class="sc-fixed-bot" v-if="!isCardSelectModal">
             <cover-view 
                 class="sfb-view" 
                 hover-class="hover-active" 
                 @click="submitBtn"
             >立即支付</cover-view>
         </cover-view>
-        <storeCardSelect 
-            :show="isCardSearchModalShow" 
-            @update:onClose="isCardSearchModalShow = false"
-            @update:onConfirm="true"
-		>
-		</storeCardSelect>
+        <card-search 
+            ref="cardSearch"
+            :sid="stadiumInfo.id"
+            :amount="optionsQuery.amount"
+            @confirm="cardSelectConfirm"
+            @hide="isCardSelectModal = false"
+            @show="isCardSelectModal = true"
+        > </card-search>
     </view>
 </template>
 
@@ -68,10 +72,11 @@
 import server from '../js/server.js';
 import API from '../js/api.js';
 import util from '../../../utils/util.js';
-import storeCardSelect from '../components/card_search';
+import cardSearch from '../components/card_search';
+import numeral from 'numeral';
 export default {
     components: {
-        'storeCardSelect': storeCardSelect
+        'card-search': cardSearch
     },
     computed: {
         stadiumInfo(){
@@ -79,15 +84,30 @@ export default {
         },
         exQuery(){
             return this?.optionsQuery?.exQuery || {};
+        },
+        discountAmount(){
+            let { selectedCard, optionsQuery, payAmount, payMethodsID } = this;
+            if(selectedCard?.discount &&  payMethodsID == 3){
+                return Math.floor((optionsQuery?.amount * 100) - (payAmount * 100))/100;
+            }
+            return 0;
+        },
+        payAmount(){
+            let { selectedCard, optionsQuery, payMethodsID } = this;
+            if(selectedCard?.discount && payMethodsID == 3){
+                return Math.floor((optionsQuery?.amount * 100) * (selectedCard?.discount / 10))/100;
+            }
+            return optionsQuery?.amount;
         }
     },
     data() {
         return {
-            isCardSearchModalShow: false,
+            isCardSelectModal: false,
             payMethodsLs: this.getPayMethodsLs(),
             payMethodsID: 0,
             optionsQuery: {},
             otherTypeRemark: '',
+            selectedCard: {}
         }
     },
     /**
@@ -107,9 +127,13 @@ export default {
     onLoad(option){
         let optionsQuery = util.jsonPar(decodeURIComponent(option.query));
         this.optionsQuery = optionsQuery;
-        console.warn(optionsQuery)
     },
     methods: {
+        cardSelectConfirm(e){
+            if(!e?.card_no)return this.payMethodsID = 0;
+            this.selectedCard = e;
+            this.payMethodsID = 3;
+        },
         submitBtn: util.debounce(function(){
             let _type = this.optionsQuery?.type;
             if(+_type === 4)return this.takeUpBbocPay();
@@ -117,7 +141,7 @@ export default {
 
         }, 300, true),
         payMethodsChange(e){
-            if(e.id == 3)this.isCardSearchModalShow = true;
+            if(e.id == 3)return this.$refs.cardSearch.show();
             this.payMethodsID = e.id;
         },
         getPayMethodsLs(){
@@ -132,7 +156,7 @@ export default {
 
         // 挂账订单支付提交
         takeUpBbocPay(){
-            let { optionsQuery, payMethodsID, otherTypeRemark } = this;
+            let { optionsQuery, payMethodsID, otherTypeRemark, selectedCard } = this;
             let _data = {
                     brand_id: optionsQuery.brand_id || '',
                     amount: optionsQuery.amount || '',
@@ -141,6 +165,7 @@ export default {
                     take_up_pay_type: payMethodsID
                 }
             if(payMethodsID === 4)_data['remark'] = otherTypeRemark || '其它';
+            if(payMethodsID === 3&&selectedCard?.card_no)_data['card_no'] = selectedCard.card_no || '';
             server.post({
                 url: API.takeUpBbocPay,
                 data: _data,
@@ -156,12 +181,13 @@ export default {
 
         // 1 -> 客户订场， 2-> 散客， 3-> 锁场, 提交
         takeUpSubmit(){
-            let { exQuery, payMethodsID, otherTypeRemark } = this;
+            let { exQuery, payMethodsID, otherTypeRemark, selectedCard } = this;
             let _data = {
                     ...exQuery,
                     take_up_pay_type: payMethodsID || ''
                 }
             if(payMethodsID === 4)_data['remark'] = otherTypeRemark || '其它';
+            if(payMethodsID === 3&&selectedCard?.card_no)_data['card_no'] = selectedCard.card_no || '';
             util.showLoad();
             server.post({
                 url: API.venueTakeUp,
diff --git a/src/subpackage/common/static/images/x_close.png b/src/subpackage/common/static/images/x_close.png
new file mode 100644
index 0000000..d8cc22a
Binary files /dev/null and b/src/subpackage/common/static/images/x_close.png differ