pet-front/otherPages/myOrdersManage/bond/refund.vue

<template>
	<!-- <div>保证金退还</div> -->
	<view class="container">
		<view class="top" :style="{ borderRadius: '8rpx' }">
			<view class="level account">
				<view class="">
					账户总览
				</view>
			</view>
			<view class="level Recharge">
				<view class="money level">
					<text>¥</text>
					<input v-model="money" type="text" />
				</view>
			</view>
		</view>
		<view class="center">
			<view class="text">
				退还前提
			</view>
			<p>账户中无未完成/未结算的服务订单，无待提现的余额退还规则</p>
			<view class="text">
				余额退还规则
			</view>
			<p>1.履约保证金退还即注销喂养师身份;</p>
			<p>2.退还过程产生的手续费由平台承担;</p>
			<p>3.只可全额退还账户中履约保证金余额，不可分批退还;</p>
			<p>4.如果认证成功后未成功接单，认证费全额退款;</p>
			<p>5.成功接单并赚取酬劳后，认证费正式收取，收取后不予退款;</p>
			<p>6.成为喂养员后无违规行为且没有未完成的任务;退还缴纳的全部履约保证金;</p>
			<p>7.成为喂养员后有违规行为或仍有未完成的任务;退还账户中剩余履约保证金;</p>
		</view>
		<view class="level text1">
			有关履约保证金的其他规则，详见
			<view class="text4">
				《履约保证金&认证费协议》
			</view>
		</view>
		<view class="buttom level" :style="{ borderRadius: '41rpx' }" @click="onRefund">
			<text>退还并注销伴宠师</text>
		</view>

		<up-popup 
			:show="popupVisible"
			mode="center" 
			bgColor="transparent"
			@close="onPopupClose" 
		>
			<view class="popup">
				<image class="popup-bg" src="../static/bond/bg-popup.png"></image>

				<view class="flex-colc popup-content">
					<text>您已申请退还，请联系服务顾问</text>

					<image class="qr" :src="qrCodeImage" mode="widthFix"></image>
				</view>

				<view class="btn-close" @click="popupVisible = false">
					<up-icon name="close-circle-fill" color="#ffffff" size="60rpx"></up-icon>
				</view>
			</view>
		</up-popup>
	</view>
</template>

<script setup>
	import { ref } from 'vue'

	const money = ref()
	const qrCodeImage = ref()

	const popupVisible = ref(false)

	const onPopupClose = () => {
		uni.reLaunch({
			 url: '/pages/workbenchManage/index'
		})
	}

	
	const onRefund = () => {
		// todo: subimt refund and fetch qrcode and open popup 

		popupVisible.value = true
	}

</script>

<style scoped lang="scss">
	.container {
		width: 100%;
		height: 150rpx;
		padding: 7% 3% 0 4%;
		box-sizing: border-box;
		background-image: linear-gradient(to bottom, #FFBF60, #F2F2F2);
	}

	.top {
		width: 702rpx;
		height: 227rpx;
		background-color: #FFFFFF;
		padding: 3% 6% 0 6%;
		box-sizing: border-box;
		font-size: 30rpx;
	}

	.level {
		display: flex;
	}

	.account {
		justify-content: space-between;
		color: #000000;
		font-size: 30rpx;
	}

	.Recharge {
		width: auto;
		height: 71rpx;
		justify-content: space-between;
		margin: 30rpx 0 0 30rpx;
		color: #FFFFFF;
		font-size: 22rpx;
		align-items: center;
	}

	.text2 {
		color: #BDBDBD;
		font-size: 22rpx;
	}

	.line {
		position: relative;
		padding: 0 0 0 20rpx;

		&::before {
			position: absolute;
			top: 7rpx;
			left: 10rpx;
			content: "";
			width: 3rpx;
			height: 26rpx;
			border-radius: 9rpx;
			background-color: #BDBDBD;
		}
	}

	.money {
		width: 450rpx;
		height: 71rpx;
		/* background-color: #FFBF60; */
		color: #FFBF60 !important;
		font-size: 54rpx !important;
	}

	.money input {
		margin-left: 5%;
		font-size: 61rpx;
		height: 71rpx;
	}

	.text3 {
		width: 131rpx;
		height: 47rpx;
		background-color: #FFBF60;
		line-height: 47rpx;
		display: flex;
		justify-content: center;
	}

	.center {
		width: 100%;
		height: 800rpx;
		padding: 3% 4%;
		box-sizing: border-box;
		color: #707070;
		font-size: 28rpx;
		line-height: 45rpx;
	}

	.text {
		color: black;
		font-size: 30rpx;
		font-weight: 700;
		margin: 3% 0;
	}

	.text1 {
		color: #BDBDBD;
		font-size: 22rpx;
		padding: 0 4%;
		box-sizing: border-box;
	}

	.text4 {
		color: #FFBF60;
	}

	.buttom {
		width: 594rpx;
		height: 94rpx;
		background-color: #FFBF60;
		margin: 25% 3% 0 7%;
		justify-content: center;
		align-items: center;
		color: #FFFFFF;
		font-size: 30rpx;
	}

	.popup {
		width: 632rpx;
		height: 835rpx;
		position: relative;

		&-bg,
		&-content {
			width: 100%;
			height: 100%;
		}

		&-content {
			position: absolute;
			top: 0;
			left: 0;

			padding-top: 276rpx;
			box-sizing: border-box;
			color: #707070;
			font-size: 28rpx;
			line-height: 37rpx;

			.qr {
				margin-top: 89rpx;
				width: 307rpx;
				height: auto;
			}
		}

		.btn-close {
			position: absolute;
			top: -27rpx;
			right: -13rpx;
		}
	}
</style>