yicangzongtai_app_240321/pages/user/bankCard/bankCardList.vue

<template>
	<view class="container">
		<navbar :config="config" backColor="#666666"></navbar>
		
		<view class="u-plr30">
			<view class="bank-list" v-if="bankCardList.length > 0">
				<view class="item u-flex-center-sb" v-for="(item,index) in bankCardList" :key="item.id">
					<view class="bank u-flex" @click="cardLink(item)">
						<image :src="item.icon"></image>
						<view class="ml90 u-font28">
							<view class="u-1A1A1A">{{item.bank_name}}</view>
							<view class="u-999 u-mt5 u-flex">尾号<rich-text :nodes="$mUtil.cutOut(item.card_num)" ></rich-text>储蓄卡</view>
						</view>
					</view>
					<view class="unbind u-EC6044 u-font24" @click="del(item.id)">解绑</view>
					<view class="addcommodity" v-if="item.is_default" @click="onFlag(item)">
						<icon type="success" color="#ff0000"   size="17"></icon>
					</view>
					<view class="addcommodity" @click="onFlag(item)" v-else  style="  width: 30rpx; height: 30rpx; border-radius: 50%;border: 1rpx solid #333;">
						
					</view>
				</view>
			</view>
			<!-- 没有数据 -->
			<view class="nogoods u-mt30 u-flex-column-center" v-if="bankCardList.length==0">
				<nodata  :config="{top:5,content:'您还没有添加银行卡~'}"></nodata>
			</view>
			<view class="mt212" @click="goAddBankCard">
				<button class="u-btn">添加银行卡</button>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				config: {
					back: true, //false是tolbar页面 是则不写
					title: '银行卡',
					color: '#1A1A1A',
					//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
					backgroundColor: [1, "#FFFFFF"],
					statusBarFontColor: '#1A1A1A'
				},
				bankCardList:[],//银行卡列表
				flag:false
			}
		},
		onLoad() {
			
		},
		onShow() {
			let that = this;
			that.getBankCardList()
		},
		methods: {
			// 协议
			cardLink(item){
				var item = JSON.stringify(item);
				uni.navigateTo({
					url:`addBankCard?item=${encodeURIComponent(item)}`
				})
			},
			//获取银行卡列表
			async getBankCardList(){
				let that = this
				this.$http.get('/member/bankcard/bankCardList',{}).then(async res => {
					if(res.code ==200){
						that.bankCardList =  res.list
					}
				})
			},
			//添加银行卡
			goAddBankCard(){
				uni.navigateTo({
					url:"addBankCard"
				})
			},
			// 协议
			onFlag(item){
				let that = this
				uni.showModal({
					title:"是否选择为默认银行卡",
					success:function(res){
						if(res.confirm){
							that.$http.post("/member/bankcard/setDefaultBankCard/"+item.id,).then(res=>{
								if(res&&res.code==200){
									that.getBankCardList()
									that.$mUtil.toast("更换成功")
								}
							})
						}else if(res.cancel){
							that.$mUtil.toast("取消成功")
						}
					}
				})
				
	
			},
			//删除
			 del(id){
				let that = this
				uni.showModal({
				    title: '是否解绑该银行卡',
				    success: function (res) {
				        if (res.confirm) {
							 that.$http.delete('/member/bankcard/delete/'+id,)
								.then(async res => {
									if(res.code==200){
										uni.showToast({
											title:"解绑成功",
											icon:"none",
											duration:3000,
											success() {
												that.getBankCardList()
											}
										})
									}
								})
				        } else if (res.cancel) {
				            
				        }
				    }
				});
			},
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #F5F5F5;
	}
	.item{
		background-color: #FFFFFF;
		border-radius: 18rpx;
		padding: 46rpx 38rpx 48rpx;
		margin-top: 30rpx;
		.bank{
				image{
					width: 72rpx;
					height: 72rpx;
				}
			}
			.unbind{
				border: 1rpx solid #D65A5A;
				padding: 5rpx 16rpx;
				border-radius: 20rpx;
			}
	}
	.mt212{
		margin: 0 auto;
		margin-top: 212rpx;
		padding-bottom: 40rpx;
		display: flex;
		justify-content: center;
	}
	.ml90{
		margin-left: 90rpx;
	}
</style>