sange-bridge/pages/price/index.vue

<template>
	<app-layout>
		<view class="container dir-top-wrap cross-center">
			<view class="price-box dir-top-wrap cross-center ">
				<view class="title">账户剩余金额</view>
				<view class="price">¥{{overage}}</view>
				<view class="desc">微信线下打款</view>
			</view>
			<view class="tips dir-top-wrap cross-center">
				<text>提现说明：提现后将在7个工作日打款</text>
				<text>客服热线：32429</text>
			</view>
			<u-button shape="circle"
					  type="success"
					  hover-class="none"
					  :custom-style="btnStyle"
					  @click="handleWithdraw"
			>提现</u-button>
		</view>
	</app-layout>
</template>

<script>
	import appLayout from "@/components/app-layout"
	export default {
		components:{
			appLayout,
		},
		data() {
			return {
				overage: 0
			}
		},
		methods: {
			handleWithdraw(){
				if(this.overage > 0){
					this.$jump({url:'/pages/price/apply',type:'to'})
				}else{
					this.$u.toast("暂无可提现金额");
				}
			},
			getSetting(){
				this.$u.api.settingGet().then(data => {
					this.setting = data;
				})
			},
			getOverage(){
				this.$u.api.userOverage().then(res => {
					this.overage = res.overage
				})
			}
		},
		computed:{
			btnStyle() {
				return {
					border:'none',
					background:'linear-gradient(90deg, rgba(196,146,68,1) 0%, rgba(225,193,117,1) 100%, rgba(225,193,117,1) 100%)',
					width: '600rpx',
					padding: '36rpx 0',
					height: '100rpx',
					fontSize: '36rpx',
					fontWeight: 600
				};
			}
		},
		onLoad(){
			this.getOverage();
		}
	}
</script>

<style lang="scss" scoped>
	.price-box{
		background: #fff;
		width: 650rpx;
		border-radius: 16rpx;
		margin: 32rpx 0;
		padding: 48rpx 0;
		.title{
			color: #333333;
			font-weight: 600;
			font-size: 30rpx;
		}
		.price{
			color: #c49244;
			font-size: 64rpx;
			font-weight: bold;
			margin: 24rpx 0 12rpx;
			&:first-letter{
				font-size: .6em;
			}
		}
		.desc{
			color: #c49244;
			font-size: 28rpx;
		}
	}
	.tips{
		color: #666666;
		margin: 12rpx 0 52rpx;
		line-height: 1.8em;
	}
</style>