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

<template>
    <div class="cancelRenewal_page">
		<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="searchPictureName" placeholder="Share your feedback here..."></textarea>
			<div class="button_box">
				<div class="gallery_btn white gallery_btn_radius" @click="subscribe">Styt subscribed</div>
				<div class="gallery_btn gallery_btn_radius">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">What is your reason for cancelling AiDA?</div>
				</div>
				<div>
					<i class="fi fi-sr-circle-xmark"></i>
					<div class="modal_title_text_assistant">What is your reason for cancelling AiDA?</div>
				</div>
			</div>
			<div class="tips">
				<i class="fi fi-sr-triangle-warning"></i>
				<div>Don’t worry!The data you have in Notion will be 
					safe.</div>
			</div>
			<div class="button_box">
				<div class="gallery_btn white gallery_btn_radius" @click="subscribe">Styt subscribed</div>
				<div class="gallery_btn gallery_btn_radius">Yes, cancel it</div>
			</div>
		</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 { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
import { useI18n } from 'vue-i18n'
import renew from "@/component/HomePage/renew.vue";
export default defineComponent({
    components:{
		renew,
    },
    setup() {
        const store = useStore();
		let userInfo:any= computed(()=>{
			return store.state.UserHabit.userInfo
		})
		let cookieUserInfo = JSON.parse(getCookie('userInfo') as any)
		let accountHomeData:any = reactive({
            currentState:{value:'income'}, //裁剪的原始文件数据
		})
		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()
		}
        return{
           ...toRefs(accountHomeData),
		   userInfo,
		   cookieUserInfo,
		   state,
		   renew,
		   subscribe,
        }
    },
    data(){
        return{
            
        }
    },
})
</script>
<style lang="less" scoped>
.cancelRenewal_page{
	display: flex;
    justify-content: center;
	align-items: flex-start;
	.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>