aida_front/src/component/Account/frontPage/cancelRenewal.vue

<template>
    <div class="cancelRenewal_page">
		<div v-if="userDetail.status != 'canceled'">
			<div class="cancel_box_item">
				<div class="modal_title_text">
					<div>Sorry to see you go</div>
					<div class="modal_title_text_assistant">What is your reason for cancelling AiDA?</div>
				</div>
				<a-select class="gallerySelect" v-model:value="currentState.value" size="large" optionFilterProp="label" :options="state" placeholder="Select a reason" allowClear show-search></a-select>
				<textarea v-model="textareaValue" placeholder="Share your feedback here..."></textarea>
				<div class="button_box">
					<div class="gallery_btn white gallery_btn_radius" @click="subscribe">stay subscribed</div>
					<div class="gallery_btn gallery_btn_radius" @click="cancelSubscription">Yes, cancel it</div>
				</div>
			</div>
			<div class="cancel_box_item cancel_box_item2">
				<div class="modal_title_text">
					<div>You’re about to cancel your subscription</div>
					<div>
						<i class="fi fi-sr-circle-xmark"></i>
						<div class="modal_title_text_assistant">You will loose all your date</div>
					</div>
					<div>
						<i class="fi fi-sr-circle-xmark"></i>
						<div class="modal_title_text_assistant">You will loose your settings and customizations</div>
					</div>
				</div>
				<div class="tips">
					<i class="fi fi-sr-triangle-warning"></i>
					<div>Don’t worry! The data you have in AiDA will be 
						safe.</div>
				</div>
				<div class="button_box">
					<div class="gallery_btn white gallery_btn_radius" @click="subscribe">stay subscribed</div>
					<div class="gallery_btn gallery_btn_radius" @click="cancelSubscription">Yes, cancel it</div>
				</div>
			</div>
		</div>
		<div v-else class="no_renewal">
			There are no subscription plans with automatic renewal.
		</div>
		<div class="mark_loading" v-show="isShowMark">
			<a-spin size="large" />
		</div>
		<renew ref="renew"></renew>
    </div>
</template>
<script lang="ts">
import { defineComponent,computed,ref,reactive,nextTick,toRefs,createVNode, onMounted} from 'vue'
import { Https } from "@/tool/https";
import { Modal,message } from 'ant-design-vue';
import { useStore } from "vuex";
import { useI18n } from 'vue-i18n'
import renew from "@/component/HomePage/renew.vue";
export default defineComponent({
    components:{
		renew,
    },
    setup() {
        const store = useStore();
		let userDetail:any= computed(()=>{
			return store.state.UserHabit.userDetail
		})
		let accountHomeData:any = reactive({
            currentState:{value:'income'}, //裁剪的原始文件数据
			textareaValue:'',
			isShowMark:false,
		})
		let state:any = ref([
			{
				label:useI18n().t('allOrder.Income'),
				value:'income',
			},
			{
				label:useI18n().t('allOrder.Expend'),
				value:'expend',
			},
		])
		let renew = ref()
		const subscribe = ()=>{
			renew.value.init()
		}
		const cancelSubscription = ()=>{
			let data = {
				subscriptionId:userDetail.value.subscriptionId,
				reason:'',
			}
			accountHomeData.isShowMark = true
			Https.axiosGet(Https.httpUrls.cancelSubscription, {params:data})
                .then((rv: any) => {
					message.success(rv)
					let value = {
						status:'canceled',
					}
					accountHomeData.isShowMark = false
					store.commit("upUserDetail", value)
                })
                .catch((res) => {
					accountHomeData.isShowMark = false
				});
		}
        return{
           ...toRefs(accountHomeData),
		   userDetail,
		   state,
		   renew,
		   subscribe,
		   cancelSubscription,
        }
    },
    data(){
        return{
            
        }
    },
})
</script>
<style lang="less" scoped>
.cancelRenewal_page{
	
	>div{
		display: flex;
		justify-content: center;
		align-items: flex-start;
		height: 45rem;
		align-items: center;
		&.no_renewal{
			font-size: 2rem;
			font-weight: 400;
		}
	}
	.cancel_box_item{
		border: 2px solid #000;
		border-radius: 2rem;
		padding: 3rem;
		margin-right: 3rem;
		width: 48rem;
		height: 45rem;
		>.modal_title_text{
			>div{
				font-weight: 600;
			}
			.modal_title_text_assistant{
				margin-top: 1rem;
			}
		}
		>.gallerySelect{
			width: 100%;
			:deep(.ant-select-selector){
				border-radius: 1.4rem;
			}
		}	
		>textarea{
			margin-top: 1.5rem;
			width: 100%;
			border-radius: 1.4rem;
			border: 1px solid #D0D0D0;
			height: 11rem !important;
			font-size: 1.6rem;
			transition: border .3s;
			padding: 1.5rem;
		}
		>textarea:hover{
			border: 1px solid #000;
		}
		>.button_box{
			display: flex;
		    justify-content: space-between;
			margin-top: 2.5rem;
			>div{
				width: calc((100% - 1rem) / 2);
			}
		}
	}
	.cancel_box_item:last-child{
		margin: 0;
	}
	.cancel_box_item2{
		.modal_title_text{
			>div:nth-child(1){
			margin-bottom: 3.4rem;
			}
			>div:nth-child(2){
				margin-bottom: 1.5rem;
			}
			>div:nth-child(2),>div:nth-child(3){
				display: flex;
				align-items: center;
				>.modal_title_text_assistant{
					margin: 0;
				}
				>i{
					margin-right: 1.5rem;
					display: flex;
				}
			}
		}
		.tips{
			padding: 1.5rem 1rem;
			display: flex;
			align-items: center;
			margin-bottom: 3rem;
			background: #f3f3f6;
			border-radius: 1.4rem;
			border: 1px solid #D0D0D0;
			>i{
				margin-right: 1.3rem;
			}
			>div{
				font-size: 1.6rem;
				font-weight: 400;
			}
		}
	
	}
}
</style>