CTEQishou/pages/tixian/Wodeyanhangka.vue

<template>
	<view>
		<customNav :shownav="true" :title="$t('tixian.wodeyhk')" tinColor="#006AFF" jiantou="0" titledetl=''></customNav>
		<view class="contenV">
			<view v-for="(item,index) in carList">
				<view :class="[index==selectIndex?'contentInRowS ItemContentS':'contentInRowS ItemContent']">
					<view class="contentColumn" @click="xuanzeyhk(index)">
						<text class="tianjiaBT">{{$t('tixian.yinghang')}}</text>
						<text class="tianjiaBT">{{$t('tixian.kahao')}}</text>
					</view>
					<view class="contentColumn" @click="xuanzeyhk(index)">
						<text class="jiedanText">{{item.bankName}}</text>
						<text class="jiedanText">{{item.number}}</text>
					</view>
					<view class="" @click="xuanzeyhk(index)">
						<image style="width: 100rpx;height: 100rpx;" src="/static/imags/yinlian.png" mode="scaleToFill"></image>
					</view>
					<view class="" @click="jiebang(index)">
						<text class="jiebangText">{{$t('tixian.jiebang')}}</text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="bottomfloatV" @click="gotoyhkmanager">
			<label class="tianjiaBTC">{{$t('tixian.tianjayhk')}}</label>
		</view>
		
		<!-- 提示窗示例 -->
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog type="NOMLE" :cancelText="$t('index.quxiao')" :confirmText="$t('index.queren')" :title="noteMsgtitle" :content="noteMsgmsg" @confirm="dialogConfirm"
				@close="dialogClose"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import {
		getbankcard,
		delebankcard
	} from '@/pages/api/basic.js';
	export default {
		data() {
			return {
				noteMsgtitle:'',
				noteMsgmsg:'',
				isSelect:false,
				carList:'',
				selectIndex:0,
				jiebangid:-1,
				state:0
			}
		},
		onLoad(option) {
			this.state = option.state;
		},
		onShow() {
			this.getbankcard();
			this.selectIndex=uni.getStorageSync("defyanhangK");
		},
		methods: {
			jiebang(index){
				var car = this.carList[index];
				this.jiebangid=car.id;
				this.noteMsgtitle=this.$t('tixian.querenjieb');
				this.noteMsgmsg= car.bankName+':'+car.number;
				this.$refs.alertDialog.open('center');
			},
			dialogConfirm() {
				console.log('点击确认')
				if(this.jiebangid!=-1){
					this.delebankcard();
				}
			},
			dialogClose() {
				console.log('点击关闭')
			},
			gotoyhkmanager(){
				uni.navigateTo({
					url:'/pages/tixian/YHkamanager'
				})
			},
			xuanzeyhk(index){
				if(this.state==0){
					return;
				}
				this.selectIndex=index;
				uni.setStorageSync('defyanhangK',index);
				uni.navigateBack();
			},
			async getbankcard(){
				//console.log('getUserMsg')
				await this.$http.get(`${getbankcard}`, {
				},true)
				.then(async r => {
					console.log(r.data.data);
					this.carList= r.data.data;
				})
				.catch(err => {
					console.log(err)
				})
			},
			async delebankcard(){
				//console.log('getUserMsg')
				await this.$http.get(`${delebankcard}`, {
					id:this.jiebangid
				},true)
				.then(async r => {
					console.log(r.data.data);
					this.getbankcard();
				})
				.catch(err => {
					console.log(err)
				})
			},
			
		}
	}
</script>

<style lang="scss">
	@import '@/common/common.scss';
	
	page{
		background-color: whitesmoke;
	}
	.contenV{
		width: 94%;
		margin-left: 3%;
	}
	.ItemContent{
		margin-top: 30rpx;
		padding: 24rpx;
		border-radius: 10rpx;
		box-shadow: 0px 0rpx 10rpx 0rpx darkgray;
		background-color: white;
	}
	
	.ItemContentS{
		margin-top: 30rpx;
		padding: 24rpx;
		border-radius: 10rpx;
		box-shadow: 0px 0rpx 10rpx 0rpx #006AFF;
		background-color: white;
	}
	
	
	.jiedanText{
		font-size: 28rpx;
		color: darkgray;
	}
	
	.tianjiaBT{
		width: 160rpx;
		text-align: left;
		font-size: 28rpx;
		font-weight: bold;
		color: #1A1A1A;
	}
	
	.jiebangText{
		font-size: 30rpx;
		color:  #006AFF;
		text-decoration:underline;
	}
	
	
	.bottomfloatV{
		position: fixed;
		left: 10%;
		width:80%;
		right: 0;
		bottom: 40rpx;
		z-index: 999;
		background-color: white;
		height: 76rpx;
		line-height: 76rpx;
		border-radius: 10rpx;
		border: 2rpx solid darkgray;
		text-align: center;
	}
	.tianjiaBTC{
		text-align: center;
		font-size: 28rpx;
		font-weight: bold;
		color: #1A1A1A;
		width:100%;
	}
</style>