zhywpt-sp/after-sale/refund-order-balance/refund-order-balance.vue

<template>
	<view class="oderPage">
		<view v-for="(item,index) in state.list" class="details">
			<view class="header">
				<image :src="`${$imgUrl}order/no1.png`" mode=""></image>
				<text>{{item.id}}</text>
			</view>
			<view class="hr">

			</view>
			<view class="row">
				<view class="">
					订单车牌号：
				</view>
				<text>{{item.vehiclePlate}}</text>
			</view>
			<view class="row">
				<view class="">
					旧卡号：
				</view>
				<text>{{item.cardId}}</text>
			</view>
			<view class="row">
				<view class="">
					旧卡金额：
				</view>
				<text>{{item.cardBalance}}</text>
			</view>
			<view class="line">
			</view>

			<button @click="refundTypeAction(item)">余额补领</button>
		</view>

	</view>

</template>

<script setup lang="ts">
	import {
		reactive,
		ref
	} from "vue"
	import {
		navTo
	} from "@/utils/utils"
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app";
	import {
		queryRefund,
		queryRefundApply
	} from "@/utils/network/api.js";
	import {
		request
	} from "@/utils/network/request.js";
	import {
		msg
	} from "@/utils/utils";

	import {
		stringToJson
	} from "@/utils/network/encryption";

	const state = reactive({
		vehicleId: '',
		list: []
	});

	/*视图进入后操作*/
	onLoad((option) => {
		state.vehicleId = option.vehicleId
		queryRefundAction().then(val => {
			state.list = val.data
		})
	});
	const reason = ref('')

	// 单选数据列表
	const radiolist1 = reactive([{
			name: '退货原因1',
			disabled: false
		},
		{
			name: '退货原因2',
			disabled: false
		},
		{
			name: '退货原因3',
			disabled: false
		},
		{
			name: '退货原因4',
			disabled: false
		},
		{
			name: '退货原因5',
			disabled: false
		},
	], )

	const refundTypeAction = (val) => {
		if (val.refundType === 'GLYQR') {
			queryRefundApplyAction(val.id).then(value => {
				console.log(value)
			})
		}
	}
	// 单选
	const radioChange = (n) => {
		console.log('radioChange', n);
	}

	const queryRefundAction = () => {
		var data = {
			vehicleId: state.vehicleId
		};
		const options = {
			type: 2,
			data: data,
			method: "POST",
			showLoading: true,
		};

		return new Promise(async (resolve, reject) => {
			const res = await request(queryRefund, options);
			const data = stringToJson(res.bizContent);
			resolve(data);
		}).catch((error) => {
			reject(error);
		});
	}
	const queryRefundApplyAction = (id) => {
		var data = {
			id: id
		};
		const options = {
			type: 2,
			data: data,
			method: "POST",
			showLoading: true,
		};

		return new Promise(async (resolve, reject) => {
			const res = await request(queryRefundApply, options);
			const data = stringToJson(res.bizContent);
			resolve(data);
		}).catch((error) => {
			reject(error);
		});
	}
</script>


<style>
	page {
		/* width: 100%;
		height: 100%; */
		display: flex;
		flex-direction: column;
		background-color: #F3F3F3;
		box-sizing: border-box;
	}
</style>
<style lang="scss" scoped>
	.oderPage {
		background-color: #EEF7F7;
		margin: 30rpx;

		.details {
			margin-top: 30rpx;
			position: relative;
			background: #fff;
			border-radius: 20rpx;
			padding: 30rpx;
			height: 370rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(223, 223, 223, 0.8);
			border-radius: 20rpx;

			.header {
				align-items: center;
				display: flex;
				padding-bottom: 30rpx;
				// border-bottom: 1px solid #DCDCDC;

				image {
					width: 51rpx;
					height: 31rpx;
				}

				text {
					font-size: 30rpx;
					margin-left: 20rpx;
					font-weight: 600;
				}
			}

			.hr {
				height: 1rpx;
				background: #DCDCDC;
				width: 100%;
				position: absolute;
				left: 50%;
				transform: translate(-50%);
			}

			.row {
				display: flex;
				margin: 34rpx 0;
				font-size: 26rpx;
				font-family: Noto Sans S Chinese;
				font-weight: 400;
				color: #333333;
				line-height: 30rpx;

				view {
					font-size: 26rpx;
					font-family: Noto Sans S Chinese;
					font-weight: 400;
					color: #999999;
					line-height: 30rpx;

				}
			}

			.line {
				width: 100%;
				height: 1rpx;
				background: #DCDCDC;

			}

			button {
				width: 141rpx;
				height: 61rpx;
				background: #FFFFFF;
				border: 1px solid #00B38B;
				border-radius: 30rpx;
				font-size: 26rpx;
				font-family: Noto Sans S Chinese;
				font-weight: 400;
				color: #00B38B;
				line-height: 61rpx;
				position: absolute;
				right: 30rpx;
				bottom: 20rpx;
				padding: 0;
			}
		}

	}
</style>