300 lines
7.2 KiB
Vue
300 lines
7.2 KiB
Vue
<template>
|
|
<a-modal
|
|
class="habitSetStyle_modal generalModel"
|
|
v-model:visible="habitSetStyle"
|
|
:footer="null"
|
|
width="50%"
|
|
:maskClosable="false"
|
|
:centered="true"
|
|
:closable="false"
|
|
:mask="true"
|
|
:keyboard="false"
|
|
:destroyOnClose="true"
|
|
:zIndex="1000"
|
|
>
|
|
<div class="generalModel_btn">
|
|
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
|
|
<svg width="100%" height="100%" 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="habitSetStyle_content" v-hoverAnmi>
|
|
<div class="modal_title_text">
|
|
<div>{{ $t('Habit.Style') }}</div>
|
|
<div class="modal_title_text_intro"></div>
|
|
</div>
|
|
<div class="habitSetStyle_content_bottom">
|
|
<div class="content_bottom_item" v-for="item in mannequinStyle">
|
|
<div class="content_bottom_item_border" :class="{active:item.name == selectStyle.name}" @click="setItemSelect(item)">
|
|
{{ item.name}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="habitSetStyle_ok">
|
|
<div class="started_btn" @click="setClear()">
|
|
{{ $t('Habit.Clear') }}
|
|
</div>
|
|
<div class="started_btn" @click="setOk()">
|
|
{{ $t('Habit.ok') }}
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="mark_loading" v-show="isShowMark">
|
|
<a-spin size="large" />
|
|
</div>
|
|
</a-modal>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent,watch,createVNode, h, ref ,toRefs,computed,reactive,triggerRef, nextTick} from "vue";
|
|
import { message,Modal } from "ant-design-vue";
|
|
import { LoadingOutlined ,ExclamationCircleOutlined} from "@ant-design/icons-vue";
|
|
|
|
import { Https } from "@/tool/https";
|
|
// import domTurnImg from '@/tool/domTurnImg'
|
|
import { downloadIamge } from "@/tool/util";
|
|
import { useI18n } from "vue-i18n";
|
|
export default defineComponent({
|
|
emits:['setParentData','setWorkspaceStyle'],
|
|
props:{
|
|
mannequinStyle:{
|
|
type:Array,
|
|
default:()=>[]
|
|
}
|
|
},
|
|
setup(props,{emit}) {
|
|
let habitSetStyle: any = ref(false);//弹窗
|
|
let habitSetStyleMask:any = ref(false)//弹窗遮罩
|
|
let oldDataId = ''
|
|
let habitSetStyleData:any = reactive({
|
|
styleList:[],
|
|
selectStyle:{
|
|
name:'',
|
|
id:'',
|
|
},
|
|
selectStyleName:'',
|
|
isShowMark:false,
|
|
})
|
|
const {t} = useI18n()
|
|
let getStyleList = ()=>{
|
|
habitSetStyleData.isShowMark = true
|
|
Https.axiosPost(Https.httpUrls.getStyleList, {}).then(
|
|
(rv) => {
|
|
habitSetStyleData.isShowMark = false
|
|
rv.forEach((item:any) => {
|
|
let name = item.value
|
|
item.value = item.name
|
|
item.name = name
|
|
});
|
|
habitSetStyleData.styleList = rv
|
|
}
|
|
).catch(res=>{
|
|
habitSetStyleData.isShowMark = false
|
|
});
|
|
}
|
|
let init = (data:any)=>{
|
|
habitSetStyle.value = true
|
|
// if(habitSetStyleData.styleList.length == 0){
|
|
// getStyleList()
|
|
// }
|
|
oldDataId = data.styleId
|
|
habitSetStyleData.selectStyle.id = data.styleId
|
|
habitSetStyleData.selectStyle.name = data.styleName
|
|
// habitSetStyleData.selectStyleId = 'feng2'
|
|
}
|
|
let setCover = (item:any)=>{
|
|
habitSetStyleData.subPublishDate.coverId = item.designOutfitId
|
|
habitSetStyleData.selectDate.url = item.url
|
|
|
|
}
|
|
let cleardata = ()=>{
|
|
habitSetStyle.value = false
|
|
habitSetStyleData.isShowMark = false
|
|
// setParentData()
|
|
|
|
}
|
|
let setParentData = ()=>{
|
|
emit('setParentData')
|
|
}
|
|
|
|
let cancelDsign = ()=>{
|
|
cleardata()
|
|
}
|
|
let setOk= ()=>{
|
|
let data = {
|
|
id:habitSetStyleData.selectStyle.id,
|
|
name:habitSetStyleData.selectStyle.name,
|
|
value:habitSetStyleData.selectStyle.value,
|
|
isRevampModel:false,
|
|
}
|
|
if(oldDataId == data.id){
|
|
cleardata()
|
|
}else{
|
|
// let _this = this
|
|
// Modal.confirm({
|
|
// title: t('Habit.jsContent3'),
|
|
// icon: createVNode(ExclamationCircleOutlined),
|
|
// okText: 'Yes',
|
|
// cancelText: 'No',
|
|
// mask:false,
|
|
// centered:true,
|
|
// zIndex:1050,
|
|
// onOk() {
|
|
// data.isRevampModel = true
|
|
// emit('setWorkspaceStyle',data)
|
|
// cleardata()
|
|
// },
|
|
// onCancel() {
|
|
// emit('setWorkspaceStyle',data)
|
|
// cleardata()
|
|
// },
|
|
// });
|
|
emit('setWorkspaceStyle',data)
|
|
cleardata()
|
|
}
|
|
}
|
|
let setClear = ()=>{
|
|
habitSetStyleData.selectStyle.id = ''
|
|
habitSetStyleData.selectStyle.name = ''
|
|
habitSetStyleData.selectStyle.value = ''
|
|
}
|
|
let setItemSelect = (item:any)=>{
|
|
habitSetStyleData.selectStyle = Object.assign({},item)
|
|
}
|
|
return {
|
|
habitSetStyle,
|
|
habitSetStyleMask,
|
|
...toRefs(habitSetStyleData),
|
|
init,
|
|
setCover,
|
|
cancelDsign,
|
|
setItemSelect,
|
|
setOk,
|
|
setClear,
|
|
};
|
|
},
|
|
data() {
|
|
return {
|
|
// moodTemplateId: "", //模板id
|
|
|
|
};
|
|
},
|
|
directives:{
|
|
hoverAnmi:{
|
|
updated (el) {
|
|
var elements = document.querySelectorAll(".habitSetStyle_modal .content_bottom_item");
|
|
el.addEventListener("mousemove", function (event:any) {
|
|
// 获取鼠标位置
|
|
var mouseX = event.pageX;
|
|
var mouseY = event.pageY;
|
|
|
|
// 遍历元素并输出距离鼠标的坐标
|
|
for (var i = 0; i < elements.length; i++) {
|
|
var element:any = elements[i];
|
|
var rect = element.getBoundingClientRect();
|
|
var elementX = rect.left + window.pageXOffset;
|
|
var elementY = rect.top + window.pageYOffset;
|
|
|
|
var distanceX = mouseX - elementX;
|
|
var distanceY = mouseY - elementY;
|
|
|
|
// 将距离值设置到每一个卡片元素上面
|
|
element.style.setProperty('--x', distanceX + 'px');
|
|
element.style.setProperty('--y', distanceY + 'px');
|
|
}
|
|
});
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
|
|
},
|
|
methods: {
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style lang="less">
|
|
.habitSetStyle_modal {
|
|
&.generalModel{
|
|
.ant-modal-body {
|
|
}
|
|
}
|
|
|
|
.habitSetStyle_content{
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
.habitSetStyle_content_bottom{
|
|
--border-color: #c4c4c4;
|
|
display: flex;
|
|
flex: 1;
|
|
flex-wrap: wrap;
|
|
align-content: flex-start;
|
|
.content_bottom_item{
|
|
width: calc((100% / 4) - (.8 * 1rem));
|
|
// width: calc(100% / 4);
|
|
// padding: 0 1rem;
|
|
border-radius: 2rem;
|
|
margin-right: 1rem;
|
|
margin-bottom: 1rem;
|
|
height: 10rem;
|
|
background: #f3f3f3;
|
|
position: relative;
|
|
cursor: pointer;
|
|
.content_bottom_item_border {
|
|
position: absolute;
|
|
inset: .2rem;
|
|
background: #f3f3f3;
|
|
border-radius: 2rem;
|
|
color: #595959;
|
|
font-weight: 600;
|
|
font-size: 2rem;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
}
|
|
.content_bottom_item:nth-child(4n){
|
|
margin-right: 0rem;
|
|
}
|
|
.content_bottom_item::before {
|
|
content: '';
|
|
position: absolute;
|
|
width: calc(100% + .2rem);
|
|
height: calc(100% + .2rem);
|
|
top: 50%;
|
|
left: 50%;
|
|
border-radius: 2rem;
|
|
transform: translate(-50%, -50%);
|
|
background: radial-gradient(50px circle at var(--x) var(--y),#000 0,transparent 100%);;
|
|
}
|
|
.content_bottom_item .active{
|
|
background: #000;
|
|
color: #fff;
|
|
}
|
|
}
|
|
.habitSetStyle_ok{
|
|
width: 100%;
|
|
text-align: center;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
justify-content: flex-end;
|
|
>div{
|
|
width: 12rem;
|
|
line-height: 6rem;
|
|
text-align: center;
|
|
border-radius: 3rem;
|
|
height: auto;
|
|
margin-left: 2rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
</style> |