shop_uniapp/bundle_b/pages/exchange/exchange.vue

<template>
	<view class="exchange">
		<view class="exchange-header">
			<view class="exchange-record">
				<router-link to="/bundle_b/pages/exchange_record/exchange_record">
					兑换记录
				</router-link>
			</view>
			<view class="exchange-score">
				<view class="exchange-share text-center">
					我的共享价值
				</view>
				<view class="exchange-money text-center nr">
					￥{{widthDrawConfig.able_withdraw ? widthDrawConfig.able_withdraw : 0}}
				</view>
				<view>
					<button class="primary-btn white flex row-center" @click="nowWithdrawal">立即提现</button>
				</view>
		<!-- 		<view style="color: #CECCCD;text-align: center;margin-top: 20rpx;">
					我的共享价值=今日共享值价格 X 我的共享值数量
				</view> -->
			</view>
		</view>
		<view class="exchange-account exchange-item flex row-between">
			<view class="exchange-account-record">
				当前账户余额：<text class="bold lg">{{my_balance}}</text> 元
			</view>
	<!-- 		<view class="exchange-account-value">
				<navigator url="/bundle_b/pages/subsidy_withdrawal/index?type=balance" hover-class="none">
					充值到余额
				</navigator>
			</view> -->
		</view>
		
		<!-- <view class="exchang-body exchange-item">
			<view class="exchang-body-item">
				<view class="text-center">
					<view class="bold">￥1.888</view>
					<view class="xs exchang-body-color">今日共享值价格(元/个)</view>
					<view class="exchang-tips">xx1x</view>
				</view>
				<view class="text-center">
					<view class="bold">￥1.888</view>
					<view class="xs exchang-body-color">历史总涨幅(元/个)</view>
					<view class="exchang-tips">xx21x</view>
				</view>
			</view>
			<view class="exchang-border"></view>
			<view class="exchang-body-item">
				<view class="text-center">
					<view class="bold">1.888</view>
					<view class="xs exchang-body-color">我的共享值数量(个)</view>
					<view class="exchang-tips">xx31x</view>
				</view>
				<view class="text-center">
					<view class="bold">￥1.888</view>
					<view class="xs exchang-body-color">昨日涨幅(元/个)</view>
					<view class="exchang-tips">xx41x</view>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	import {
		getBillionsWithdrawConfig
	} from "@/api/user";
	
	export default {
		data() {
			return {
				widthDrawConfig: {},
				my_balance: 0
			}
		},
		onLoad(options) {
			this.getBillionsWithdrawConfigFun();
		},
		onUnload() {
			uni.$emit('refreshSubsidyPage')
		},
		methods: {
			async getBillionsWithdrawConfigFun() {
				const {
					code,
					data
				} = await getBillionsWithdrawConfig()
			
				if (code == 1) {
					this.widthDrawConfig = data
					this.tabsList = data.type
				}
			},
			
			// 开始提现
			nowWithdrawal() {
				uni.navigateTo({
					url: '/bundle_b/pages/subsidy_withdrawal/index?type=weixin'
				})
			}
		},
		watch: {
			widthDrawConfig() {
				if (this.widthDrawConfig.able_withdraw) {
					this.my_balance = (parseInt(this.widthDrawConfig.able_withdraw * 100) / 100).toFixed(2)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.exchange {
		.exchange-item {
			background-color: #fff;
			height: auto;
			border-radius: 20rpx;
			box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.06);
			padding: 32rpx;
		}
		
		.exchange-header {
			margin: 20rpx;
			
			.exchange-record {
				color: #A7A7A7;
				text-align: right;
			}
			
			.exchange-score {
				margin-top: 60rpx;
				
				.exchange-share {
					color: #4C4C4C;
				}
				
				.exchange-money {
					margin-top: 32rpx;
					font-weight: bold;
					color: #454547;
					font-size: 40rpx;
				}
				
				.primary-btn {
					margin-top: 46rpx;
					height: 80rpx;
					border-radius: 20rpx;
					background: linear-gradient(180deg, #FF3067 0%, #FF2C3C 100%);
					width: 80%;
					margin: 52rpx 10% 0 10%;
				}
			}
		}
		
		.exchange-account {
			margin: 60rpx 20rpx 0 20rpx;
			
			.exchange-account-record {
				text {
					margin-right: 12rpx;
				}
			}
			
			.exchange-account-value {
				color: #FF3067;
			}
		}
	
		.exchang-body {
			display: flex;
			justify-content: space-between;
			margin: 60rpx 20rpx 0 20rpx;
			padding: 20rpx 12rpx;
			
			.exchang-body-item {
				view {
					position: relative;
					margin: 12rpx;
					
					.exchang-body-color {
						color: #969696;
					}
					
					.exchang-tips {
						width: auto;
						color: #FFFFFF;
						padding: 12rpx 18rpx;
						border-radius: 14rpx;
						background: rgba(0, 0, 0, 0.7);
						position: relative;
						position: absolute;
						z-index: 9999;
						top: -74rpx;
						left: 50%;
						transform: translateX(-50%);
					}
					
					.exchang-tips::after {
						content: '';
						border-top: 14rpx solid rgba(0, 0, 0, 0.7);
						border-right: 14rpx solid transparent;
						border-left: 14rpx solid transparent;
						position: absolute;
						top: 100%;
						left: 50%;
						transform: translateX(-50%);
						border-bottom-width: 7px;
						border-bottom-style: solid;
						border-bottom-color: transparent;
						border-right-width: 7px;
						border-right-style: solid;
						border-right-color: transparent;
						border-left-width: 7px;
						border-left-style: solid;
						border-left-color: transparent;
						border-top-width: 7px;
						border-top-style: solid;
						border-top-color: rgba(0, 0, 0, 0.7);
					}
				}
			}
			
			.exchang-border {
				width: 2rpx;
				height: auto;
				background-color: #F0F0F0;
			}
		}
	}
</style>