aida_front/src/component/Pay/refund.vue

<template>
   <a-modal
		class="modal_component refund_reason"
		v-model:visible="showRefundReason"
		:footer="null"
		width="50%"
		:maskClosable="false"
		:mask="false"
		:centered="true"
		:closable="false"
		wrapClassName="#app"
		:keyboard="false"
	>
		<div class="closeIcon">
	
			<i class="fi fi-rr-cross-small" @click.stop="cancelRefundreason()"></i>
		</div>
		<div class="modal_title_text">
			Refund Reason
		</div>
		<div class="reason">
			<label>
				<div>
					<input name="reason" type="radio" @click="getReasonCategory" value="noLike" v-model="reason">
					<span>Dislike</span>
				</div>
			</label>
			<label>
				<div>
					<input name="reason" type="radio" @click="getReasonCategory" value="Rests" v-model="reason">
					<span>Rests</span>
				</div>
				
				<textarea v-show="reason == 'Rests'" name="" id="" cols="40" rows="10" v-model="reasonTextarea"></textarea>
			</label>
		</div>
		<div class="subitOkPreviewBtn" @click="setReason">OK</div>
	</a-modal>
</template>
<script lang="ts">
import { defineComponent, ref, createVNode, computed, nextTick } from "vue";
import { Https } from "@/tool/https";
import { formatTime } from "@/tool/util";
import { Modal, message } from "ant-design-vue";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import { useI18n } from "vue-i18n";
export default defineComponent({
    components: {
    },
    setup() {
        let showRefundReason: any = ref(false);
        let record: any = ref();//订单编号
        let reason: any = ref('noLike');//原因
        let reasonTextarea: any = ref();//原因
        let loadingShow: any = ref(false);
        let { t } = useI18n();
        return {
			showRefundReason,
			record,
			reason,
			reasonTextarea,
			loadingShow,
            t,
        };
    },
    data() {
        return {
          
        };
    },
    mounted() {},
    methods: {
		cancelRefundreason(){//关闭退款页面
			this.record = ''
            this.showRefundReason = false;
		},
        //删除分组
        // deleteGroup(record:any,index:number){
        //     let deleteGroupFun = (id:any,index:number) =>{
        //         let data = {
        //             userGroupId:id
        //         }
        //         Https.axiosPost(Https.httpUrls.deleteUserGroup,data).then(
        //             (rv: any) => {
        //                 message.success(this.t('HistoryPage.jsContent1'))
        //                 this.collectionList.splice(index,1)
        //             }
        //         );
        //     }
        //     Modal.confirm({
        //         title: this.t('HistoryPage.jsContent2'),
        //         icon: createVNode(ExclamationCircleOutlined),
        //         okText: 'Yes',
        //         cancelText: 'No',
        //         centered:true,
        // 		mask:false,
        //         onOk() {
        //             deleteGroupFun(record.id,index)
        //         }
        //     });
        // },

        refund(record: any) {
            // this.$router.push({name:'home',params: {id:record.id}})
			this.record = record
			this.showRefundReason = true
        },
		getReasonCategory(){
			if(this.reason == 'Rests'){
			}else{
				this.reasonTextarea = ''
			}
		},
		setReason(){
			let reason = this.reason
			this.loadingShow = true
			if(this.reason == 'Rests'){
				reason = this.reasonTextarea?this.reasonTextarea:this.reason
			}

			// return
			
			let httpsUrl = Https.httpUrls.tradeRefundAlipay
			if(this.record.paymentType == "PayPal"){
				httpsUrl = Https.httpUrls.tradeRefundPaypal
			}
			Https.axiosPost(
                httpsUrl + `/${this.record.orderNo}/${reason}`,
                {}
            ).then((rv: any) => {
				this.loadingShow = false
				this.showRefundReason = false
			})
			.catch((res) => {});
		},
    },
});
</script>
<style lang="less">
.refund_reason{
    // max-width: 1200px ;
    // max-width: 1150px ;
    .ant-modal-content {
        border-radius: calc(1rem * 1.2);
        overflow: hidden;
        .ant-modal-header {
            background-color: #fff;
            border-bottom: none;
        }
        .ant-modal-body {
            // height: calc(65vh - 6.4rem);
            height: calc(65rem * 1.2);
        }
        //进度完成字体颜色

        .ant-progress-circle.ant-progress-status-success .ant-progress-text {
            color: #000;
        }
        .ant-progress-circle .ant-progress-text {
            color: rgba(0, 0, 0, 0.55);
            font-size: calc(1.6rem * 1.2);
        }
    }
}

.modal_component.refund_reason{
    .ant-modal-content {
		.ant-modal-body {
			// height: calc(65vh - 6.4rem);
			padding: 3rem;
			height: calc(40rem * 1.2);
		}
	}
	
}
</style>
<style lang="less">
.refund_reason{
	.reason{
		height: calc(27rem * 1.2);
		display: flex;
		flex-direction: column;
		padding: 0 3rem;
		font-size: 1.6rem;
		label{
			display: flex;
			align-items: flex-start;
			flex-direction: column;
			overflow: hidden;
			div{
				display: flex;
				justify-content: center;
				margin-bottom: 1rem;
			}
			input,span{
				cursor: pointer;
			}
			span{
				margin: 0 1rem;
			}
			textarea{
				flex: 1;
				width: 100%;
				outline-color:#767676;
				resize: none;
			}
			textarea:focus-visible {
				border-color: #767676;
			}
		}
	}
	.subitOkPreviewBtn{
		margin-top: 1rem;
	}
}
</style>