medicine-xcx/pagesA/my_other_list/webmaster/wallet/index.vue

<template>
	<view class="wallte">
		<text class="title">钱包余额</text>
		<view class="money_num">
			<text>￥</text>
			<text class="num">{{user_info.wallet}}</text>
		</view>
		<view class="grid">
			<text class="title">提现到微信零钱</text>
			<view class="input_box">
				<text class="text_icon">￥</text>
				<input type="number" v-model="money" />
				<text class="withdraw_deposit" @click="allMoney">全部提现</text>
			</view>
			<text class="info_text">提现手续费为10%</text>
		</view>
		<view class="info flex align-center justify-between">
			<view>
				<text class="dit">·</text>
				<text>预计24小时到账</text>
			</view>
			<view class="theme-color" @click="toInfo">余额明细</view>
		</view>
		<view class="flex p-l-50">
			<text class="dit font-48" style="color: #FF0000;">·</text>
			<text class="flex " style="color: #FF0000;">温馨提示：如果要将兑购金提现，请您联系客服！</text>
		</view>

		<button class="btn_money" @click="addMoney">立即提现</button>

		<view class="buttom_btn">
			<text class="title">联系我们</text>
			<view class="card">
				<!-- 				<image @click="toWechat" :src="img_url+'leave_word/wechat.png'" mode=""></image>
						<image @click="toPhone" :src="img_url+'leave_word/phone.png'" mode=""></image> -->
				<view class="card-image" @click="handleClick(item.key)" v-for="(item,index) in contactList"
					:key="item.key">
					<button v-if="index == 0" open-type="contact" bindcontact="handleContact" session-from="sessionFrom"
						class="w-330 p-0" style="height: 82%;">
						<image class="w-330" :src="item.img" mode="widthFix"></image>
					</button>
					<button v-if="index == 1" @click="call('15388981678')" class="w-330 p-0 " style="height: 82%;">
						<image class="w-330" :src="item.img" mode="widthFix"></image>
					</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { IMG_URL } from '@/env.js'
	export default {
		data() {
			return {
				money: null,
				showMoney: '0',
				user_info: {},
				type: 0,
				contactList: [
					{key: 'wechat', img: `${IMG_URL}leave_word/wechat.png`},
					{key: 'phone', img: `${IMG_URL}leave_word/phone.png`},
				],
			}
		},
		onLoad(options) {
			this.type = options.type
			this.getUserInfo()
		},
		methods: {
			call(phone) {
				uni.makePhoneCall({
					phoneNumber: phone,
					success(res) {
						
					},
					fail(err) {
						
					}
				})
			},
			toInfo() {
				uni.navigateTo({
					// let url = key === 'money' ? '/pagesA/my_other_list/webmaster/reward_centers/index2?type=2' : '/pagesA/my_other_list/webmaster/reward_centers/index3?type=1'
					url: '/pagesA/my_other_list/webmaster/reward_centers/index2?title=余额明细&type=' + 2
				})
			},
			// 全部提现
			allMoney() {
				this.money = this.user_info.wallet
			},
			getUserInfo() {
				uni.showLoading();
				const that = this
				this.$api('getUserInfo', {
					money: this.money
				}).then(res => {
					let {
						code,
						result,
						message
					} = res;
					if (code == 200) {
						// that.$Toast(message);
						this.user_info = {
							...result.account,
							...result.userInfo
						}
					} else {
						that.$Toast(message);
					}
					uni.hideLoading();
				}).catch(err => {
					uni.hideLoading();
					that.$Toast(err.message);
				})
			},
			// 立即体现
			addMoney() {
				uni.showLoading();
				const that = this
				this.$api('getStationMoney', {
					money: this.money
				}).then(res => {
					let {
						code,
						result,
						message
					} = res;
					if (code == 200) {
						that.$Toast(result)
						that.user_info.wallet = 0
					} else {
						that.$Toast(message);
					}
					this.getUserInfo();
					uni.hideLoading();
				}).catch(err => {
					uni.hideLoading();
					that.$Toast(err.message);
				})
			},
			handleClick (key) {
				// 电话咨询
				if (key === 'phone') {
					
				} else { // 微信留言
					
				}
			}
		}
	}
</script>

<style lang="scss">
	.wallte {
		display: flex;
		flex-direction: column;
		text-align: center;

		.money_num {
			padding-top: 44rpx;
			padding-bottom: 40rpx;
			color: #DB0618;

			.num {
				font-size: 62rpx;
			}
		}

		.grid {
			width: 689rpx;
			height: 300rpx;
			margin: 0 auto;
			border-radius: 26rpx;
			padding-top: 23rpx;
			box-sizing: border-box;
			background-color: #F5F5F5;

			.title {
				font-size: 30rpx;
				font-weight: bold;
			}

			.input_box {
				width: 669rpx;
				margin-top: 78rpx;
				margin-bottom: 33rpx;
				display: flex;
				justify-content: flex-start;
				border-bottom: 1px solid #B5B0B0;

				.text_icon {
					color: #707070;
					font-size: 35rpx;
					font-weight: bold;
				}

				.withdraw_deposit {
					font-size: 26rpx;
					padding-right: 35rpx;
					color: #01AEEA;
				}

				input {
					flex: 1;
					text-align: left;
					font-size: 35rpx;
				}
			}

			.info_text {
				display: flex;
				justify-content: flex-start;
				margin-left: 28rpx;
				font-size: 26rpx;
				color: #707070;
			}
		}

		.info {
			display: flex;
			margin-top: 28rpx;
			padding: 0 50rpx;
			color: #707070;
		}

		.dit {
			font-size: 48rpx;
			font-weight: bold;
			line-height: 40rpx;
			padding-right: 20rpx;
		}
	}

	.title {
		padding-top: 60rpx;
		font-size: 32rpx;
	}

	.money_num {}

	.btn_money {
		width: 668rpx;
		height: 88rpx;
		font-size: 34rpx;
		line-height: 88rpx;
		// position: fixed;
		// left: 45rpx;
		// bottom: 66rpx;
		margin-top: 120rpx;
		background-color: #01AEEA;
		color: #fff;
		border-radius: 38rpx;
	}
	
	.buttom_btn{
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		.title{
			display: inline-block;
			font-size: 32rpx;
			color: #000;
			margin-top: 74rpx;
			margin-left: 42rpx;
		}
		.card{
			width: 100%;
			margin-top: 48rpx;
			box-sizing: border-box;
			padding-left: 25rpx;
			padding-right: 25rpx;
			display: flex;
			justify-content: space-between !important;
			&-image{
				width: 330rpx;
				border-radius: 12rpx;
			}
		}
	}
</style>