zhywpt-sp/subpackage/after-sale/account-recharge/index.vue

<template>
	<view class='content'>
		<view class="money_wrap">
			<view>账户余额</view>
			<view>￥{{state.money/100}}</view>
		</view>
		<view class='item_wrap'>
			<view class='item' @click='navTo(`/pages/bluetooth/bluetooth?routeType=8&&accountId=${state.name}`)'>
				<view class='left_content'>
					<image :src="fileURL + 'image/index/item-1.png'" mode="aspectFill"></image>
					<view>去圈存</view>
				</view>
				<u-icon name="arrow-right" color='#ccc'></u-icon>
			</view>
			<view class='item'
				@click='navTo(`/subpackage/after-sale/account-recharge/consumption-record?name=${state.name}`)'>
				<view class='left_content'>
					<image :src="fileURL + 'image/index/item-1.png'" mode="aspectFill"></image>
					<view>消费明细</view>
				</view>
				<u-icon name="arrow-right" color='#ccc'></u-icon>
			</view>
			<view class='item'
				@click='navTo(`/subpackage/after-sale/account-recharge/recharge-record?name=${state.name}`)'>
				<view class='left_content'>
					<image :src="fileURL + 'image/index/item-1.png'" mode="aspectFill"></image>
					<view>充值明细</view>
				</view>
				<u-icon name="arrow-right" color='#ccc'></u-icon>
			</view>
			<view class='item'
				@click='navTo(`/subpackage/personal-center/setting/bank-card/bank-card?name=${state.name}`)'>
				<view class='left_content'>
					<image :src="fileURL + 'image/index/item-1.png'" mode="aspectFill"></image>
					<view>银行卡管理</view>
				</view>
				<u-icon name="arrow-right" color='#ccc'></u-icon>
			</view>
			<view class='item' @click='navTo(`/subpackage/after-sale/account-recharge/recharge?name=${state.name}`)'>
				<view class='left_content'>
					<image :src="fileURL + 'image/index/item-1.png'" mode="aspectFill"></image>
					<view>充值服务</view>
				</view>
				<u-icon name="arrow-right" color='#ccc'></u-icon>
			</view>
		</view>
		<view class='item item_wrap' @click='navTo(`/subpackage/after-sale/account-recharge/login`)'>
			<view class='left_content'>
				<image :src="fileURL + 'image/index/item-1.png'" mode="aspectFill"></image>
				<view>退出</view>
			</view>
		</view>
	</view>

</template>

<script setup lang='ts'>
	import {
		navTo
	} from "@/utils/utils";
	import {
		fileURL
	} from "@/datas/fileURL.js";
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app";
	import {
		reactive
	} from "vue";
	import {
		request
	} from "@/utils/network/request.js";
	import {
		accountMoneyApi
	} from "@/utils/network/api.js";
	import {
		stringToJson
	} from "@/utils/network/encryption";
	const state = reactive({
		money: 0,
		name: '' //name就是accountId
	})
	onLoad((option: any) => {
		state.name = option.name;
		console.log("option", option)
		getMoney()
	})
	onShow(() => {
		getMoney()
	})
	const getMoney = () => {
		let options = {
			type: 2, //type: 2,JSON格式提交数据(默认表单形式提交)
			data: {
				accountId: state.name
			}, //请求参数
			method: "POST", //提交方式(默认POST)
			showLoading: true, //是否显示加载中(默认显示)
		};

		//调用方式
		request(accountMoneyApi, options).then((res) => {
				const data = stringToJson(res.bizContent);
				state.money = data.money
			})
			.catch((err) => {
				console.log(err);
			});
	}
</script>

<style scoped>
	.content {
		background-color: #EEF7F7;
		width: 100%;
		height: 100vh;
		overflow: hidden;
	}

	.money_wrap {
		background-color: white;
		padding: 8rpx 0 16rpx 0;
	}

	.money_wrap>view:first-child {
		text-align: center;
		font-size: 30rpx;
	}

	.money_wrap>view:last-child {
		text-align: center;
		font-size: 44rpx;
		margin-top: 14rpx;
		color: red;
	}

	.item_wrap {
		margin-top: 26rpx;
	}

	.item {
		background-color: white;
		border-bottom: 1rpx solid rgb(239, 239, 239);
		display: flex;
		font-size: 30rpx;
		padding: 34rpx 30rpx;
		align-items: center;
		justify-content: space-between;
	}

	.item image {
		width: 60rpx;
		height: 60rpx;
		margin-right: 30rpx;
	}

	.left_content {
		display: flex;
		align-items: center;
	}
</style>