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>{{ $t('cancelRenewal.cancelling') }}</div>
				</div>
				<div class="cause_list">
					<label class="cause_item" v-for="item in causeList" :key="item.vlaue">
						<input type="checkbox" name="cause" v-model="selectedOptions" :value="item.value">
						<div>{{ item.str }}</div>
					</label>
					<textarea v-model="textareaValue" placeholder="Share your feedback here..."></textarea>
				</div>
			</div>
			<div class="cancel_box_item cancel_box_item2">
				<div class="modal_title_text">
					<div>{{ $t('cancelRenewal.subscription') }}</div>
					<div>
						<i class="fi fi-sr-circle-xmark"></i>
						<div class="modal_title_text_assistant">{{ $t('cancelRenewal.looseDate') }}</div>
					</div>
					<div>
						<i class="fi fi-sr-circle-xmark"></i>
						<div class="modal_title_text_assistant">{{ $t('cancelRenewal.looseCustomizations') }}</div>
					</div>
				</div>
				<div class="tips">
					<i class="fi fi-sr-triangle-warning"></i>
					<div>{{ $t('cancelRenewal.DonWorry') }}</div>
				</div>
				<div class="button_box">
					<div class="gallery_btn white" @click="subscribe">{{ $t('cancelRenewal.Continue') }}</div>
					<div class="gallery_btn" @click="cancelSubscription">{{ $t('cancelRenewal.cancel') }}</div>
				</div>
			</div>
		</div>
		<div v-else class="no_renewal">
			{{ $t('cancelRenewal.subscriptionRenewal') }}
		</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();
		const {t} = useI18n()
		let userDetail:any= computed(()=>{
			return store.state.UserHabit.userDetail
		})
		let accountHomeData:any = reactive({
			textareaValue:'',
			isShowMark:false,
			causeList:[
				{
					vlaue:'Too expensive',
					str:t('account.jsContent1'),
				},{
					value:'Sytem not user friendly',
					str:t('account.jsContent2'),
				},{
					value:'Too Slowy',
					str:t('account.jsContent3'),
				},{
					value:'Difficult to edit',
					str:t('account.jsContent4'),
				},{
					value:'Insufficlent Tutorial/Support',
					str:t('account.jsContent5'),
				},{
					value:'Unable to generate what you need',
					str:t('account.jsContent6'),
				}
			],
			selectedOptions:[]
		})
		let renew = ref()
		const subscribe = ()=>{
			renew.value.init()
		}
		const cancelSubscription = ()=>{
			let str = ''
			accountHomeData.selectedOptions.forEach((item:any)=>{
				str += ' #' + item
			})

			let data = {
				subscriptionId:userDetail.value.subscriptionId,
				reason:accountHomeData.textareaValue + str,
			}
			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,
		   renew,
		   subscribe,
		   cancelSubscription,
        }
    },
    data(){
        return{
            
        }
    },
})
</script>
<style lang="less" scoped>
.cancelRenewal_page{
	height: 100%;
	overflow-y: auto;
	padding-bottom: 2rem;
	>div{
		display: flex;
		flex-direction: column;
		align-items: center;
		&.no_renewal{
			font-size: 2rem;
			font-weight: 400;
		}
	}
	.cancel_box_item{
		margin-bottom: 3rem;
		width: 100%;
		>.modal_title_text{
			margin: 0;
			>div{
				font-weight: 600;
			}
			.modal_title_text_assistant{
				margin-top: 1rem;
				font-weight: 600;
			}
		}
		>.gallerySelect{
			width: 100%;
			:deep(.ant-select-selector){
				border-radius: 1.4rem;
			}
		}	
		>.cause_list{
			> .cause_item{
				display: flex;
				input{
					margin-right: 1rem;
				}
			}
			>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;
			margin-top: 2.5rem;
			justify-content: flex-end;
			>div:nth-child(1){
				margin-right: 1rem;
				// width: calc((100% - 1rem) / 2);
			}
		}
	}
	.cancel_box_item:last-child{
		margin: 0;
	}
	.cancel_box_item2{
		.modal_title_text{
			>div:nth-child(1){
				margin-bottom: 2rem;
			}
			>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;
				}
			}
			>div:nth-child(3){
				margin-bottom: 2rem;
			}
		}
		.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>