first/pages/menu/bankCard/index.vue

<template>
	<view class="">
		<navigation>
			Bank Card
			<view class="bread" slot="bread">
				<image src="../../../static/bankCard/[email protected]" mode="aspectFit"
					@click="goAddCard()"></image>
			</view>
		</navigation>

		<!-- v-for="item,index in record_list" :key="item.id" -->
		<view class="record_body">
			<view class="record_item flex" v-for="item,index in record_list" :key="index">
				<view class="numcon flex">
					<image src="../../../static/bankCard/[email protected]" mode="aspectFit" class="img1">
					</image>
					<view class="num">
						<view class="rec">
							{{item.bankName}}
						</view>
						<view class="cpay">
							{{item.acctId}}
						</view>
					</view>
				</view>
				<view class="time" @click="keepId(item,item.id)">
					i
				</view>
			</view>

			<u-mask :z-index="10" :show="show" @click="show = false"></u-mask>
			
			<!-- 下拉选择 -->
			<view class="select_con" v-show="show">
                <view class="select">
                	Select
                </view>
				
				<view class="ed_con" >
					<view class="ed">
						<image src="/static/bankCard/[email protected]" mode="aspectFill" class="img"></image>  
						<text class="text" @click="goAddCard2(card)">Edit</text>
					</view>
					<view class="ed">
						<image src="/static/bankCard/[email protected]" mode="aspectFill" class="img"></image>
						<text class="text" @click="deleCard()">Delete</text>
					</view>
				</view>
			 </view>

           <u-modal cancel-text="cancel" confirm-color="#954DE3"   confirm-text="confirm" :show-title="false"  :show-cancel-button="true"   v-model="show2" :content="content" @confirm="confirm"></u-modal>
		</view>


		<tab-bar :selectActive="5"></tab-bar>
	</view>

</template>

<script>
	import cont from "@/components/navigation/navigation.vue"
	import Vue from 'vue';
	import api from '@/utils/api'
	export default {
		data() {
			return {
				show2: false,
				content: 'Are you sure to delete',
				record_list: [],
				show: false,
				// ÄÃÒøÐп¨item
				card:null,
				cardId:'',
			}
		},
		onLoad() {
this.init();

		},
		methods: {
			init(){
			const post = api.bankcardList({
						"ticket": uni.getStorageSync('logInfo').data,
					})
					post.then(res => {
					   // for(var i=0;i<res.data.length;i++){
					// 
					// res.data[i].acctId=res.data[i].acctId.replaceAll('%20',' ')
					// res.data[i].acctName=res.data[i].acctName.replaceAll('%20',' ')
						  // 
						  // res.data[i].acctId=res.data[i].acctId.replace(new RegExp('%20',"gm"),' ')
					     
					   //    res.data[i].bankName=res.data[i].acctName.replace(new RegExp('%20',"gm"),' ')
						
												 
					   // }
	
					  this.record_list=res.data
						})
						.catch(e => {
							uni.showToast({
								title: e,
								icon: 'none',
								duration: 2500
							})
						})	
			},
			// Äÿ¨id
			keepId(i,c){
				this.show=true;
				this.card=i;
				this.cardId=c;
				
			},
			deleCard(){
				this.show2=true;
			},
			confirm(){
				const post = api.delBankCard({
							"ticket": uni.getStorageSync('logInfo').data,
							"cardId":this.cardId
						})
						uni.showLoading({})
						post.then(res => {
						  if(res.errCode=='SUCCESS'){
							  uni.showToast({
							  		title: 'Succeeded',
							  		icon: 'success',
							  		duration: 2500
							  	})
								this.show=false;
								this.init();
						  }else{
							  uni.showToast({
							  		title: 'Failed',
							  		icon: 'none',
							  		duration: 2500
							  	})
						  }
							})
							.catch(e => {
								uni.showToast({
									title: e,
									icon: 'none',
									duration: 2500
								})
							})
			},
			goAddCard() {
        uni.navigateTo({
        	url:'addBankCard/index',
        })
			},
			
			// ¸øeditרÓÃ
			goAddCard2(i) {
				console.log(i,22222)
				var data=JSON.stringify(i)
				console.log(data,22222)
			uni.navigateTo({
				url:'addBankCard/index?card='+data,
			})
				},
			
		}
	}
</script>

<style scoped lang="scss">
	@import './index.css';
	/* #ifdef APP-PLUS */
	.bread image {
		width: 28rpx;
		height: 28rpx;
		position: absolute;
		right: 36rpx;
		top: 60%;
		transform: translateY(-50%);
	}
		/* #endif */
		.bread image {
			width: 28rpx;
			height: 28rpx;
			position: absolute;
			right: 36rpx;
			top: 50%;
			transform: translateY(-50%);
		}

</style>