This commit is contained in:
X1627315083
2025-04-16 15:08:59 +08:00
parent c2288a30b2
commit d59d942c8f
5 changed files with 248 additions and 34 deletions

View File

@@ -1,41 +1,207 @@
<template>
<div class="createCloud">
<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 time19min</span>
</div>
<div class="admin_state_item" style="width: 100%;">
<span style="margin: 0;">Cost credit500</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 lang="ts">
import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
<script>
import { defineComponent, ref, reactive, watch, onMounted, nextTick, toRefs } from "vue";
import { Https } from "@/tool/https";
import { useStore } from "vuex";
import { useI18n } from 'vue-i18n'
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:{
},
components: {
},
props:{
cloudList:{
type:Array,
default:[]
}
},
emits:[],
setup(props,{emit}) {
const store = useStore();
const data = reactive({
emits: ['searchHistoryList'],
setup(props,{emit}) {
let operations = reactive({
operationsModal:false,
loadingShow:false,
})
const dataDom = reactive({
let operationsData = reactive({
buildType:'',
commissionRate:'',
numberOfImages:'',
})
return{
...toRefs(dataDom),
...toRefs(data),
let init = ()=>{
operations.operationsModal = true
}
},
provide() {
return {
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>
.createCloud{
width: 100%;
height: 100%;
position: relative;
: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>