ox_zhiNengZhuShou/src/subpackage/common/components/card_search.vue

<template>
	<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.balance || '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>
			</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.js';
import API from '../js/api.js';
export default {
	props: {
		sid: {
			type: String,
			default: ''
		},
		amount: {
			type: String,
			default: ''
		},
	},
	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";
	.card-search-modal{
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.5);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
	}
	.csm-container{
		position: absolute;
		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%;
		background-color: #fff;
		.cc-tit{
			line-height: 44upx;
			text-align: center;
			font-size: 32upx;
			font-weight: 500;
		}
		.cc-close{
			position: absolute;
			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: 100%;
				font-size: 32upx;
				color: #1A1A1A;
			}
		}
		.cc-list{
			height: 548upx;
			width: 100%;
			margin-top: 30upx;
			.cl-item{
				padding: 20upx;
				border: 2upx solid #979797;
				border-radius: 10upx;
				@include centerFlex(space-between);
				&:not(:first-child){
					margin-top: 24upx;
				}
				.ci-content{
					flex-grow: 1;
					.cc-line{
						line-height: 40upx;
						font-size: 28upx;
						color: #1A1A1A;
						@include textHide(1);
						.cc-txt{
							color: #9C9C9F;
						}
						&.green{
							color: $themeColor;
						}
					}
				}
				.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;
						}
					}
					.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>