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

<template>
	<!-- <div>保证金退还</div> -->
	<view class="container">
		<view class="top" :style="{ borderRadius: '8rpx' }">
			<view class="level account">
				<view >
					账户总览
				</view>
			</view>
			<view class="level Recharge">
				<view class="money level">
					<text>¥</text>
					<input v-model="money" type="text" />
				</view>
			</view>
		</view>
		<view class="center">
			<up-parse class="size-28" :content="configList.pet_mmoney_text.paramValueArea"></up-parse>
		</view>
		<view class="level text1">
			有关履约保证金的其他规则，详见
			<view class="text4" @click="openPopup('pet_lv_yue')">
				《履约保证金&认证费协议》
			</view>
		</view>
		<view class="buttom level" :style="{ borderRadius: '41rpx' }" @click="onRefund">
			<text>退还并注销伴宠师</text>
		</view>

		
		<up-popup :show="popupData.show" @close="closePopup" :round="10">
			<view style="max-height: 80vh; overflow-y: auto; padding: 20rpx;">
				<up-parse class="size-28" :content="popupData.content"></up-parse>
			</view>
		</up-popup>

		<up-popup 
			:show="codePopupVisible"
			mode="center" 
			bgColor="transparent"
			@close="onCodePopupClose" 
		>
			<view class="popup">
				<image class="popup-bg" :src="configList.pet_mmoney_back.paramValueImage"></image>

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

					<image class="qr" :src="configList.pet_code.paramValueImage" mode="widthFix"></image>
				</view>

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

<script setup>
	import { ref, reactive, computed } from 'vue'
	import { useStore } from 'vuex'

	const store = useStore()

	const configList = computed(() => {
		return store.getters.configList
	})

	const money = ref()

	const codePopupVisible = ref(false)

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

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

		codePopupVisible.value = true
	}

	const popupData = reactive({
		show: false,
		content: null,
	})

	const openPopup = (key) => {
		popupData.content = configList.value[key]?.paramValueArea || "";
		popupData.show = true;
	}

	const closePopup = () => {
		popupData.show = false
	}

</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>