CTEQishou/pages/tixian/Tixian.vue

<template>
	<view>
		<customNav :shownav="true" :title="$t('tixian.tixian')" tinColor="#006AFF" jiantou="0" titledetl=''></customNav>
		<view v-if="meiyouyhk" class="contentColumnC">
			<image class="weishimingImage" src="/static/imags/zhanwuyhk.png" mode="widthFix"></image>
			<text class="jiedanText">{{$t('tixian.bdyhk')}}</text>
			<view class="contentInRowC" @click="gotoyhkmanager" style="width:80%;height: 76rpx;border-radius: 10rpx;border: 2rpx solid darkgray;margin-bottom: 20rpx;margin-top: 100rpx;">
				<label class="tianjiaBT">{{$t('tixian.tianjayhk')}}</label>
			</view>
			
		</view>
		<view v-if="!meiyouyhk" class="contentColumn contenV">
			<view class="contentInRowS ItemContent" @click="qiehuanyhk">
				<view class="contentInRowL" style="align-items: center;">
					<image style="width: 60rpx;height: 60rpx;" src="/static/imags/yinhangkt.png" mode=""></image>
					<text class="tianjiaBT">{{txyhk}}</text>
				</view>
				<image style="width: 36rpx;height: 36rpx;" src="/static/imags/youjian@3x.png" mode="scaleToFill"></image>
			</view>
			
			<view class="contentInRowS ItemContent" >
				<view class="contentInRowL" style="align-items: center;background-color: aquamarine;width: 80%;">
					<input class="jiedanText"  type="number" :placeholder="$t('tixian.kezhuancdk')+': '+$formPr(ketixianJE)" :value="tixianje"  @input="tixianJEinput">
					<text class="huobidanwei">{{$t('api.huobidanwei')}}</text>
				</view>
				<text class="quanbuText" @click="quanbu">{{$t('tixian.quanbu')}}</text>
			</view>
			
			<view class="contentColumn" style="padding: 24rpx;">
				<text class="jiedanText">{{$t('tixian.kezhuancdk')+': '+$formPr(ketixianJE)}}</text>
				<view class="contentColumnC">
					<text :class="[tixianje>0?'tixianBt':'tixianBtH']" @click="querentixian">{{$t('tixian.querentixian')}}</text>
					<text class="jiedanText">{{$t('tixian.txdzts')}}</text>
				</view>
				
			</view>
			
		</view>
		<!-- 提示窗示例 -->
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog type="NOMLE" :cancelText="$t('index.quxiao')" :confirmText="$t('index.queren')" :title="$t('tixian.querentixian')" @confirm="dialogConfirm"
				@close="dialogClose"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import {
		getbankcard,
		getUsbalance
	} from '@/pages/api/basic.js';
	export default {
		data() {
			return {
				meiyouyhk:false,
				ketixianJE:0.00,
				tixianje:'',
				weishezhijymm:false,
				popmode:1,
				selectIndex:0,
				carList:'',
				txyhk:'',
				yongjinbl:0.1,
				yongjin:0,
				daozhangjine:0
			}
		},
		onShow() {
			this.selectIndex=uni.getStorageSync("defyanhangK");
			this.getbankcard();
			this.getUsbalance();
		},
		methods: {
			gotoyhkmanager(){
				uni.navigateTo({
					url:'/pages/tixian/YHkamanager'
				})
			},
			tixianJEinput(event){
				this.tixianje = event.target.value;
				this.yongjin = this.yongjinbl*this.tixianje;
				this.daozhangjine = this.tixianje-this.yongjin;
			},
			quanbu(){
				this.tixianje=this.ketixianJE;
				this.yongjin = this.yongjinbl*this.tixianje;
				this.daozhangjine = this.tixianje-this.yongjin;
			},
			qiehuanyhk(){
				uni.navigateTo({
					url:'/pages/tixian/Wodeyanhangka?state=1'
				})
			},
			querentixian(){
				if(this.weishezhijymm){
					uni.navigateTo({
						url:'/pages/tixian/Jioayimima'
					})
					return
				}
				this.$refs.alertDialog.open('center');
			},
			dialogConfirm() {
				console.log('点击确认!!!')
				uni.showToast({
				    title: '功能待完善',
				    icon: 'none',
				    duration: 2500
				})
			},
			dialogClose() {
				console.log('点击关闭')
			},
			async getbankcard(){
				//console.log('getUserMsg')
				await this.$http.get(`${getbankcard}`, {
				},true)
				.then(async r => {
					if(r.data.data.length>0){
						this.meiyouyhk=false;
						this.carList= r.data.data;
						var car = this.carList[this.selectIndex];
						this.txyhk=car.bankName+car.number.substr(-4,4); //or
					}
					else{
						this.meiyouyhk=true;
					}
				})
				.catch(err => {
					console.log(err)
				})
			},
			async getUsbalance(){
				//console.log('getUserMsg')
				await this.$http.get(`${getUsbalance}`, {
					type:'',
					sort:false,
					page:1,
					size:10,
				},true)
				.then(async r => {
					console.log(r);
					this.ketixianJE=r.data.data.sum;
				})
				.catch(err => {
					console.log(err)
				})
			},
		},
	}
</script>

<style lang="scss">
	@import '@/common/common.scss';
	page{
		background-color: whitesmoke;
	}
	
	.weishimingImage{
		width: 30%;
		margin-top: 40rpx;
	}
	
	.jiedanText{
		width: 88%;
		font-size: 26rpx;
		color: darkgray;
		text-align: center;
	}
	
	.tianjiaBT{
		font-size: 28rpx;
		font-weight: bold;
		color: #1A1A1A;
	}
	
	.huobidanwei{
		padding-right: 6rpx;
		font-size: 46rpx;
		font-weight: bold;
		color: #1A1A1A;
	}
	
	.contenV{
		margin-top: 30rpx;
		width: 94%;
		margin-left: 3%;
		border-radius: 10rpx;
		box-shadow: 0px 0rpx 10rpx 0rpx darkgray;
		background-color: white;
	}
	
	.ItemContent{
		align-items: center;
		padding: 24rpx;
		border: solid darkgray;
		border-width: 0px 0px 2rpx 0px;
	}
	
	.quanbuText{
		font-size: 32rpx;
		color: #006AFF;
	}
	
	.tixianBt{
		font-size: 30rpx;
		width: 80%;
		height: 68rpx;
		line-height: 68rpx;
		color: white;
		border-radius: 10rpx;
		text-align: center;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		background-color: #006AFF;
	}
	
	.tixianBtH{
		font-size: 30rpx;
		width: 80%;
		height: 68rpx;
		line-height: 68rpx;
		color: darkgray;
		border-radius: 10rpx;
		text-align: center;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		background-color:lightgray;
	}

</style>