aida_front/src/component/HomePage/index/model/cloudUploading/createCloud.vue

<template>
	<div class="createCloud" ref="createCloud"></div>
    <a-modal
        class="createCloud_modal generalModel"
        v-model:visible="operationsModal"
        :footer="null"
		:get-container="() => $refs.createCloud"
        width="50%"
		:height="'77rem'"
        :maskClosable="false"
        :centered="true"
        :closable="false"
		:mask="true"
        wrapClassName="#app"
        :keyboard="false"
    >
		<div class="generalModel_btn">
			<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
				<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
						<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
						<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
						<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
					</svg>
			</div>
		</div>
		<div class="modal_title_text">
			<div>Cloud generation task</div>
		</div>
		{{ cloudList }}
		<div class="allUserPoeration_center admin_page">
			<div class="admin_state_item">
				<span>Build type <span>*</span></span>
				<a-select
					v-model:value="buildType"
					show-search
					allowClear
					style="width: 220px"
					placeholder="Please select"
					:options="cloudList"
				></a-select>
			</div>
			<div class="admin_state_item" >
				<span>Image upload</span>
				<input
					v-model="percentOff"
					placeholder="Please enter percentOff"
					type="text"
					style="width: 220px"
				/>
			</div>
			<div class="admin_state_item" >
				<span>Number of images</span>
				<input
					v-model="numberOfImages"
					placeholder="Please enter number"
					type="text"
					style="width: 220px"
				/>
			</div>
			<div class="admin_state_item" style="width: 100%;">
				<span style="margin: 0;">Generation time：19min</span>
			</div>
			<div class="admin_state_item" style="width: 100%;">
				<span style="margin: 0;">Cost credit：500</span>
			</div>
		</div>
		<div class="allUserPoeration_btn admin_page">
			<div class="admin_search_item" @click="cancelDsign">
				Close
			</div>
			<div class="admin_search_item" @click="setOk">
				OK
			</div>
		
		</div>
    </a-modal>
	<div class="mark_loading" v-show="loadingShow">
		<a-spin size="large" />
	</div>
</template>
<script>
import { defineComponent, ref, reactive, watch, onMounted, nextTick, toRefs } from "vue";
import { Https } from "@/tool/https";
import { Modal, message } from "ant-design-vue";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import { formatTime,isEmail } from "@/tool/util";
import dayjs, { Dayjs } from 'dayjs';
const md5 = require("md5");
export default defineComponent({
    components: {
    },
	props:{
		cloudList:{
			type:Array,
			default:[]
		}	
	},
	emits: ['searchHistoryList'],
    setup(props,{emit}) {
		let operations = reactive({
			operationsModal:false,
			loadingShow:false,
		})
		let operationsData = reactive({
			buildType:'',
			commissionRate:'',
			numberOfImages:'',
		})
		let init = ()=>{
			operations.operationsModal = true

		}
		let setAddData = ()=>{
			return {
				"percentOff": operationsData.percentOff,
				"commissionRate": operationsData.commissionRate,
			}
		}
		let cancelDsign = ()=>{
			operationsData.percentOff=''
			operationsData.commissionRate=''
			operations.operationsModal = false
		}
		let setOk = ()=>{
			let data 
			data = setAddData()
			Https.axiosPost(Https.httpUrls.createCoupon, data).then(
			(rv) => {
				if (rv) {
					cancelDsign()
					emit('searchHistoryList')
				}
			})
		}
        return {
            ...toRefs(operations),
            ...toRefs(operationsData),
			cancelDsign,
			init,
			focus,
			blur,
			setOk,
        };
    },
    data() {
        return {
        };
    },
    mounted() {},
    methods: {
       
    },
});
</script>
<style lang="less" scoped>
:deep(.createCloud_modal){
	.ant-modal-body{
		display: flex;
		flex-direction: column;
	}
}

</style>
<style lang="less" scoped>

.createCloud_modal {
    .closeIcon {
        z-index: 2;
    }
	.allUserPoeration_btn{
		display: flex;
		flex-direction: row;
		height: auto;
		justify-content: flex-end;
		padding: 1rem 0;
		.admin_search_item{
			margin-bottom: 0;
		}
	}
	.allUserPoeration_center{
		flex: 1;
		overflow-y: auto;
		flex-direction: row;
		flex-wrap: wrap;
		align-content: flex-start;
		> .admin_state_item{
			width: auto;
			// width: 100%;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			> span{
				text-align: left;
				margin: 0;
				margin-bottom: 1.5rem;
				font-weight: 600;
			}
			:deep(> .ant-select > .ant-select-selector){
				border-radius: 1.6rem;
			}
			> input{
				border-radius: 1.6rem;
			}
		}
	}
}
</style>