Merge branch 'dev_vite' of http://18.167.251.121:10003/aidlab/aida_front into dev_vite
This commit is contained in:
李志鹏
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 44 KiB After Width: | Height: | Size: 1.1 KiB |
@@ -1,319 +1,331 @@
|
||||
<template>
|
||||
<div class="allUserPoerationModal" ref="allUserPoerationModal"></div>
|
||||
<a-modal
|
||||
class="allUserPoeration_modal generalModel"
|
||||
v-model:visible="operationsModal"
|
||||
:footer="null"
|
||||
:get-container="() => $refs.allUserPoerationModal"
|
||||
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="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="black" 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>{{ title }} Coupon</div>
|
||||
</div>
|
||||
<div class="allUserPoeration_center admin_page">
|
||||
<div class="admin_state_item">
|
||||
<span>Cooperator:</span>
|
||||
<input
|
||||
v-model="cooperator"
|
||||
placeholder="Please enter cooperator"
|
||||
type="text"
|
||||
style="width: 220px"
|
||||
/>
|
||||
</div>
|
||||
<div class="admin_state_item">
|
||||
<span>percentOff(%): <span>*</span></span>
|
||||
<input
|
||||
:class="{ active: title != 'Add' }"
|
||||
:disabled="title != 'Add'"
|
||||
v-model="percentOff"
|
||||
placeholder="Please enter percentOff"
|
||||
type="text"
|
||||
style="width: 220px"
|
||||
/>
|
||||
</div>
|
||||
<div class="admin_state_item">
|
||||
<span>Commission Rate: <span>*</span></span>
|
||||
<input
|
||||
:class="{ active: title != 'Add' }"
|
||||
:disabled="title != 'Add'"
|
||||
v-model="commissionRate"
|
||||
placeholder="Please enter commission rate"
|
||||
type="text"
|
||||
style="width: 220px"
|
||||
/>
|
||||
</div>
|
||||
<div class="admin_state_item">
|
||||
<!-- <div class="admin_state_item" > -->
|
||||
<span>Start Time: <span>*</span></span>
|
||||
<a-space direction="vertical" style="width: 220px">
|
||||
<a-date-picker
|
||||
v-model:value="startTime"
|
||||
:disabled="title != 'Add'"
|
||||
style="width: 220px"
|
||||
/>
|
||||
</a-space>
|
||||
</div>
|
||||
<div class="admin_state_item">
|
||||
<!-- <div class="admin_state_item" > -->
|
||||
<span>End Time: <span>*</span></span>
|
||||
<a-space direction="vertical" style="width: 220px">
|
||||
<a-date-picker
|
||||
v-model:value="endTime"
|
||||
:disabled="title != 'Add'"
|
||||
style="width: 220px"
|
||||
/>
|
||||
</a-space>
|
||||
</div>
|
||||
<div class="admin_state_item">
|
||||
<span>MaxRedemptions:</span>
|
||||
<input
|
||||
:class="{ active: title != 'Add' }"
|
||||
:disabled="title != 'Add'"
|
||||
v-model="maxRedemptions"
|
||||
placeholder="Please enter maximum"
|
||||
type="text"
|
||||
style="width: 220px"
|
||||
/>
|
||||
</div>
|
||||
<div class="admin_state_item">
|
||||
<span>PaidCommission:</span>
|
||||
<input
|
||||
v-model="paidCommission"
|
||||
placeholder="Please enter paidCommission"
|
||||
type="text"
|
||||
style="width: 220px"
|
||||
/>
|
||||
</div>
|
||||
<div class="admin_state_item">
|
||||
<span>Remark:</span>
|
||||
<input
|
||||
v-model="remark"
|
||||
placeholder="Please enter remark"
|
||||
type="text"
|
||||
style="width: 220px"
|
||||
/>
|
||||
</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";
|
||||
import md5 from "md5";
|
||||
export default defineComponent({
|
||||
components: {},
|
||||
emits: ["searchHistoryList"],
|
||||
setup(props, { emit }) {
|
||||
let operations = reactive({
|
||||
operationsModal: false,
|
||||
operationsEdit: false,
|
||||
loadingShow: false,
|
||||
title: "",
|
||||
});
|
||||
let operationsData = reactive({
|
||||
endTime: "",
|
||||
startTime: "",
|
||||
percentOff: "",
|
||||
commissionRate: "",
|
||||
maxRedemptions: "",
|
||||
cooperator: "",
|
||||
paidCommission: "",
|
||||
remark: "",
|
||||
id: "",
|
||||
});
|
||||
let init = (funStr, data) => {
|
||||
operations.operationsModal = true;
|
||||
operations.operationsEdit = true;
|
||||
operations.title = funStr;
|
||||
if (funStr == "Add") operations.operationsEdit = false;
|
||||
if (funStr == "Edit") {
|
||||
operationsData.id = data.id;
|
||||
operationsData.percentOff = data.percentOff;
|
||||
operationsData.commissionRate = data.commissionRate;
|
||||
operationsData.maxRedemptions = data.maxRedemptions;
|
||||
operationsData.cooperator = data.cooperator;
|
||||
operationsData.paidCommission = data.paidCommission;
|
||||
operationsData.remark = data.remark;
|
||||
operationsData.endTime = dayjs(
|
||||
new Date(data.redeemBy * 1000).toISOString().split("T")[0],
|
||||
"YYYY/MM/DD"
|
||||
);
|
||||
operationsData.startTime = dayjs(
|
||||
new Date(data.startTime * 1000).toISOString().split("T")[0],
|
||||
"YYYY/MM/DD"
|
||||
);
|
||||
console.log(data)
|
||||
|
||||
// operationsData.endTime='2024-08-05T00:00:06'
|
||||
// operationsData.validEndTime='2024-08-05T00:00:06'
|
||||
// operationsData.commissionRate = data.commissionRate
|
||||
// operationsData.maxRedemptions = data.maxRedemptions
|
||||
// operationsData.validStartTime = formatTime(data.validStartTime)
|
||||
// operationsData.validEndTime = formatTime(data.validEndTime)
|
||||
}
|
||||
};
|
||||
let setAddData = () => {
|
||||
const emdTimeMs =
|
||||
new Date(operationsData.endTime).getTime() / 1000; // 直接获取毫秒时间戳
|
||||
const startTimeMs =
|
||||
new Date(operationsData.startTime).getTime() / 1000; // 直接获取毫秒时间戳
|
||||
return {
|
||||
percentOff: operationsData.percentOff,
|
||||
maxRedemptions: operationsData.maxRedemptions,
|
||||
commissionRate: operationsData.commissionRate,
|
||||
endTime: emdTimeMs,
|
||||
startTime: startTimeMs,
|
||||
cooperator: operationsData.cooperator,
|
||||
remark: operationsData.remark,
|
||||
};
|
||||
};
|
||||
let setEditData = () => {
|
||||
const timestampMs =
|
||||
new Date(operationsData.endTime).getTime() / 1000; // 直接获取毫秒时间戳
|
||||
return {
|
||||
id: operationsData.id,
|
||||
paidCommission: operationsData.commissionRate,
|
||||
cooperator: operationsData.cooperator,
|
||||
remark: operationsData.remark,
|
||||
};
|
||||
};
|
||||
let cancelDsign = () => {
|
||||
operationsData.endTime = "";
|
||||
operationsData.startTime = "";
|
||||
operationsData.percentOff = "";
|
||||
operationsData.commissionRate = "";
|
||||
operationsData.maxRedemptions = "";
|
||||
operationsData.cooperator = "";
|
||||
operationsData.paidCommission = "";
|
||||
operationsData.remark = "";
|
||||
operationsData.id = "";
|
||||
operations.operationsModal = false;
|
||||
};
|
||||
let setOk = () => {
|
||||
let data;
|
||||
if (operations.title == "Add") {
|
||||
data = setAddData();
|
||||
if (!data.commissionRate || !data.startTime || !data.percentOff || !data.endTime)
|
||||
return message.warning("Please check the input box marked with *");
|
||||
Https.axiosPost(Https.httpUrls.createCoupon, data).then((rv) => {
|
||||
if (rv) {
|
||||
cancelDsign();
|
||||
emit("searchHistoryList");
|
||||
}
|
||||
});
|
||||
} else {
|
||||
data = setEditData();
|
||||
Https.axiosGet(Https.httpUrls.updatePromCodeInfo, {
|
||||
params: 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(.allUserPoeration_modal) {
|
||||
.ant-modal-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
<div class="allUserPoerationModal" ref="allUserPoerationModal"></div>
|
||||
<a-modal
|
||||
class="allUserPoeration_modal generalModel"
|
||||
v-model:visible="operationsModal"
|
||||
:footer="null"
|
||||
:get-container="() => $refs.allUserPoerationModal"
|
||||
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="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="black" 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>{{ title }} Coupon</div>
|
||||
</div>
|
||||
<div class="allUserPoeration_center admin_page">
|
||||
<div class="admin_state_item">
|
||||
<span>Cooperator:</span>
|
||||
<input
|
||||
v-model="cooperator"
|
||||
placeholder="Please enter cooperator"
|
||||
type="text"
|
||||
style="width: 220px"
|
||||
/>
|
||||
</div>
|
||||
<div class="admin_state_item">
|
||||
<span>percentOff(%): <span>*</span></span>
|
||||
<input
|
||||
:class="{ active: title != 'Add' }"
|
||||
:disabled="title != 'Add'"
|
||||
v-model="percentOff"
|
||||
placeholder="Please enter percentOff"
|
||||
type="text"
|
||||
style="width: 220px"
|
||||
/>
|
||||
</div>
|
||||
<div class="admin_state_item">
|
||||
<span>Commission Rate: <span>*</span></span>
|
||||
<input
|
||||
:class="{ active: title != 'Add' }"
|
||||
:disabled="title != 'Add'"
|
||||
v-model="commissionRate"
|
||||
placeholder="Please enter commission rate"
|
||||
type="text"
|
||||
style="width: 220px"
|
||||
/>
|
||||
</div>
|
||||
<div class="admin_state_item">
|
||||
<!-- <div class="admin_state_item" > -->
|
||||
<span>Start Time: <span>*</span></span>
|
||||
<a-space direction="vertical" style="width: 220px">
|
||||
<a-date-picker
|
||||
v-model:value="startTime"
|
||||
:disabled="title != 'Add'"
|
||||
style="width: 220px"
|
||||
/>
|
||||
</a-space>
|
||||
</div>
|
||||
<div class="admin_state_item">
|
||||
<!-- <div class="admin_state_item" > -->
|
||||
<span>End Time: <span>*</span></span>
|
||||
<a-space direction="vertical" style="width: 220px">
|
||||
<a-date-picker
|
||||
v-model:value="endTime"
|
||||
:disabled="title != 'Add'"
|
||||
style="width: 220px"
|
||||
/>
|
||||
</a-space>
|
||||
</div>
|
||||
<div class="admin_state_item">
|
||||
<span>MaxRedemptions:</span>
|
||||
<input
|
||||
:class="{ active: title != 'Add' }"
|
||||
:disabled="title != 'Add'"
|
||||
v-model="maxRedemptions"
|
||||
placeholder="Please enter maximum"
|
||||
type="text"
|
||||
style="width: 220px"
|
||||
/>
|
||||
</div>
|
||||
<div class="admin_state_item">
|
||||
<span>PaidCommission:</span>
|
||||
<input
|
||||
v-model="paidCommission"
|
||||
placeholder="Please enter paidCommission"
|
||||
type="text"
|
||||
style="width: 220px"
|
||||
/>
|
||||
</div>
|
||||
<div class="admin_state_item">
|
||||
<span>Remark:</span>
|
||||
<input
|
||||
v-model="remark"
|
||||
placeholder="Please enter remark"
|
||||
type="text"
|
||||
style="width: 220px"
|
||||
/>
|
||||
</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";
|
||||
import md5 from "md5";
|
||||
export default defineComponent({
|
||||
components: {},
|
||||
emits: ["searchHistoryList"],
|
||||
setup(props, { emit }) {
|
||||
let operations = reactive({
|
||||
operationsModal: false,
|
||||
operationsEdit: false,
|
||||
loadingShow: false,
|
||||
title: "",
|
||||
});
|
||||
let operationsData = reactive({
|
||||
endTime: "",
|
||||
startTime: "",
|
||||
percentOff: "",
|
||||
commissionRate: "",
|
||||
maxRedemptions: "",
|
||||
cooperator: "",
|
||||
paidCommission: "",
|
||||
remark: "",
|
||||
id: "",
|
||||
});
|
||||
let init = (funStr, data) => {
|
||||
operations.operationsModal = true;
|
||||
operations.operationsEdit = true;
|
||||
operations.title = funStr;
|
||||
if (funStr == "Add") operations.operationsEdit = false;
|
||||
if (funStr == "Edit") {
|
||||
operationsData.id = data.id;
|
||||
operationsData.percentOff = data.percentOff;
|
||||
operationsData.commissionRate = data.commissionRate;
|
||||
operationsData.maxRedemptions = data.maxRedemptions;
|
||||
operationsData.cooperator = data.cooperator;
|
||||
operationsData.paidCommission = data.paidCommission;
|
||||
operationsData.remark = data.remark;
|
||||
operationsData.endTime = dayjs(
|
||||
new Date(data.redeemBy * 1000).toLocaleDateString('zh-CN', {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit'
|
||||
}).replace(/\//g, '/'),
|
||||
"YYYY/MM/DD"
|
||||
);
|
||||
// 确保格式一致
|
||||
// operationsData.startTime = dayjs(
|
||||
// new Date(data.startTime * 1000).toISOString().split("T")[0],
|
||||
// "YYYY/MM/DD"
|
||||
// );
|
||||
operationsData.startTime = dayjs(
|
||||
new Date(data.startTime * 1000).toLocaleDateString('zh-CN', {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit'
|
||||
}).replace(/\//g, '/'),
|
||||
"YYYY/MM/DD"
|
||||
);
|
||||
// operationsData.endTime='2024-08-05T00:00:06'
|
||||
// operationsData.validEndTime='2024-08-05T00:00:06'
|
||||
// operationsData.commissionRate = data.commissionRate
|
||||
// operationsData.maxRedemptions = data.maxRedemptions
|
||||
// operationsData.validStartTime = formatTime(data.validStartTime)
|
||||
// operationsData.validEndTime = formatTime(data.validEndTime)
|
||||
}
|
||||
};
|
||||
let setAddData = () => {
|
||||
const emdTimeMs =
|
||||
new Date(operationsData.endTime).getTime() / 1000; // 直接获取毫秒时间戳
|
||||
const startTimeMs =
|
||||
new Date(operationsData.startTime).getTime() / 1000; // 直接获取毫秒时间戳
|
||||
return {
|
||||
percentOff: operationsData.percentOff,
|
||||
maxRedemptions: operationsData.maxRedemptions,
|
||||
commissionRate: operationsData.commissionRate,
|
||||
endTime: emdTimeMs,
|
||||
startTime: startTimeMs,
|
||||
cooperator: operationsData.cooperator,
|
||||
remark: operationsData.remark,
|
||||
};
|
||||
};
|
||||
let setEditData = () => {
|
||||
const timestampMs =
|
||||
new Date(operationsData.endTime).getTime() / 1000; // 直接获取毫秒时间戳
|
||||
return {
|
||||
id: operationsData.id,
|
||||
paidCommission: operationsData.commissionRate,
|
||||
cooperator: operationsData.cooperator,
|
||||
remark: operationsData.remark,
|
||||
};
|
||||
};
|
||||
let cancelDsign = () => {
|
||||
operationsData.endTime = "";
|
||||
operationsData.startTime = "";
|
||||
operationsData.percentOff = "";
|
||||
operationsData.commissionRate = "";
|
||||
operationsData.maxRedemptions = "";
|
||||
operationsData.cooperator = "";
|
||||
operationsData.paidCommission = "";
|
||||
operationsData.remark = "";
|
||||
operationsData.id = "";
|
||||
operations.operationsModal = false;
|
||||
};
|
||||
let setOk = () => {
|
||||
let data;
|
||||
if (operations.title == "Add") {
|
||||
data = setAddData();
|
||||
if (!data.commissionRate || !data.startTime || !data.percentOff || !data.endTime)
|
||||
return message.warning("Please check the input box marked with *");
|
||||
Https.axiosPost(Https.httpUrls.createCoupon, data).then((rv) => {
|
||||
if (rv) {
|
||||
cancelDsign();
|
||||
emit("searchHistoryList");
|
||||
}
|
||||
});
|
||||
} else {
|
||||
data = setEditData();
|
||||
Https.axiosGet(Https.httpUrls.updatePromCodeInfo, {
|
||||
params: 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(.allUserPoeration_modal) {
|
||||
.ant-modal-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="less" scoped>
|
||||
.allUserPoeration_modal {
|
||||
.closeIcon {
|
||||
z-index: 2;
|
||||
</style>
|
||||
<style lang="less" scoped>
|
||||
.allUserPoeration_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;
|
||||
}
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -300,7 +300,11 @@ export default defineComponent({
|
||||
// ]
|
||||
let isCurrent = list[i].id == detailData?.selectDetail?.id
|
||||
console.log(isCurrent,newData)
|
||||
let color = (detailData.currentDetailType == 'color' && isCurrent)?(newData?.rgba?.r?`${newData.rgba.r} ${newData.rgba.g} ${newData.rgba.b}`:''):(list[i].color?.rgba?.r?`${list[i].color.rgba.r} ${list[i].color.rgba.g} ${list[i].color.rgba.b}`:'')
|
||||
let color = (detailData.currentDetailType == 'color' && isCurrent && !detailData.isEditPattern.value)?
|
||||
(newData?.rgba?.r?`${newData.rgba.r} ${newData.rgba.g} ${newData.rgba.b}`:''):
|
||||
(list[i].color?.rgba?.r?
|
||||
`${list[i].color.rgba.r} ${list[i].color.rgba.g} ${list[i].color.rgba.b}`:
|
||||
'')
|
||||
if(detailData.currentDetailType == 'sketch' && newData){
|
||||
color = detailData.designDetail.clothes[0].color?.rgba?.r?`${detailData.designDetail.clothes[0].color.rgba.r} ${detailData.designDetail.clothes[0].color.rgba.g} ${detailData.designDetail.clothes[0].color.rgba.b}`:''
|
||||
detailData.selectDetail.maskUrl = ''
|
||||
@@ -309,8 +313,8 @@ export default defineComponent({
|
||||
let data:any = {
|
||||
changed:false,
|
||||
color,
|
||||
designType:(newData && detailData.currentDetailType == 'sketch' && isCurrent)?newData.designType:list[i].designType,
|
||||
id:(newData && detailData.currentDetailType == 'sketch' && isCurrent)?newData.id:list[i].id,
|
||||
designType:(newData && detailData.currentDetailType == 'sketch' && isCurrent && !detailData.isEditPattern.value)?newData.designType:list[i].designType,
|
||||
id:(newData && detailData.currentDetailType == 'sketch' && isCurrent && !detailData.isEditPattern.value)?newData.id:list[i].id,
|
||||
maskMinioUrl:(newData && detailData.currentDetailType == 'sketch')?'':list[i]?.maskMinioUrl,
|
||||
// maskUrl:'',
|
||||
maskUrl:(newData && detailData.currentDetailType == 'sketch')?'':list[i]?.maskUrl,
|
||||
@@ -321,19 +325,19 @@ export default defineComponent({
|
||||
offset,
|
||||
partialDesign:list[i].partialDesign || {},
|
||||
// partialDesign:detailData.isEditPattern.value?list[i].partialDesign:{},
|
||||
path:(newData && detailData.currentDetailType == 'sketch' && isCurrent)?newData.minIOPath:list[i].minIOPath,
|
||||
printObject:(newData && detailData.currentDetailType == 'print' && isCurrent)?{prints:newData}:list[i].printObject?list[i].printObject:{prints:[]},
|
||||
path:(newData && detailData.currentDetailType == 'sketch' && isCurrent && !detailData.isEditPattern.value)?newData.minIOPath:list[i].minIOPath,
|
||||
printObject:(newData && detailData.currentDetailType == 'print' && isCurrent && !detailData.isEditPattern.value)?{prints:newData}:list[i].printObject?list[i].printObject:{prints:[]},
|
||||
priority,
|
||||
// scale:[
|
||||
// 0.5,
|
||||
// 0.35822305
|
||||
// ],
|
||||
scale:[scale[0]?scale[0]:1,scale[1]?scale[1]:1],
|
||||
type:(newData && detailData.currentDetailType == 'sketch' && isCurrent)?newData.level2Type || newData.categoryValue:list[i].type,
|
||||
type:(newData && detailData.currentDetailType == 'sketch' && isCurrent && !detailData.isEditPattern.value)?newData.level2Type || newData.categoryValue:list[i].type,
|
||||
sketchString:list[i].sketchString?list[i].sketchString:'',
|
||||
trims:(newData && detailData.currentDetailType == 'element' && isCurrent)?{prints:newData}:list[i].trims?.prints?list[i].trims:{prints:[]},
|
||||
trims:(newData && detailData.currentDetailType == 'element' && isCurrent && !detailData.isEditPattern.value)?{prints:newData}:list[i].trims?.prints?list[i].trims:{prints:[]},
|
||||
}
|
||||
if((list[i].color?.gradient || list[i].newDetail?.color?.gradient)){
|
||||
if((list[i].color?.gradient || list[i].newDetail?.color?.gradient) && !detailData.isEditPattern.value){
|
||||
gradient = list[i].newDetail?.color?.gradient || list[i].color.gradient
|
||||
gradient.colorImg = await setGradual(gradient,320,700)
|
||||
data.gradient = gradient
|
||||
@@ -389,7 +393,7 @@ export default defineComponent({
|
||||
designSingleItemDTOList:clothes,
|
||||
isPreview:false,
|
||||
// ifSubmit:designItemDetail.isPreview,
|
||||
gender:workspace?.sex == 'Male'?1:0,
|
||||
gender:workspace?.sex,
|
||||
sketchString:'',
|
||||
modelId:(detailData.currentDetailType == 'models' && detailData.designDetail.newModel)?detailData.designDetail.newModel.id:detailData.designDetail.oldModel?detailData.designDetail.oldModel.id:'',
|
||||
modelType:(detailData.currentDetailType == 'models' && detailData.designDetail.newModel)?detailData.designDetail.newModel.type:detailData.designDetail.oldModel?detailData.designDetail.oldModel.type:'',
|
||||
|
||||
@@ -16,8 +16,16 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="detailText">{{$t('DesignPrintOperation.Colorfromimage')}}</div>
|
||||
<div class="uploadImage">
|
||||
<upload @selectUplpadColor="selectUplpadColor"></upload>
|
||||
<div class="uploadImage flex flex-align-center flex-justify-around">
|
||||
<div class="upload-container flex flex-column flex-align-center" :class="{'hide': !showLibrary}">
|
||||
<upload ref="uploadRef" @selectUplpadColor="selectUplpadColor" @selectFile="showLibrary = false" @deleteColor="showLibrary = true"></upload>
|
||||
<div class="upload-text" v-show="showLibrary"> {{ $t('LibraryPage.Upload') }} </div>
|
||||
</div>
|
||||
<div class="upload-container flex flex-column flex-align-center" v-show="showLibrary">
|
||||
<!-- <i class="fi fi-rr-followcollection"></i> -->
|
||||
<SvgIcon name="CLibrary" size="40" @click="handleOpenLibrary" />
|
||||
<div class="upload-text"> {{ $t('LibraryPage.library') }} </div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="detailText">{{$t('DesignPrintOperation.ColorCode')}}</div>
|
||||
<div class="colorCode">
|
||||
@@ -30,7 +38,14 @@
|
||||
<!-- <div class="getTcxColorBtn" @click="getTcxColor">{{$t('DesignPrintOperation.ExtractColor')}}</div> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<SelectImages
|
||||
ref="selectImages"
|
||||
@select="handleImageSelect"
|
||||
radio
|
||||
full-data
|
||||
:api="Https.httpUrls.queryLibraryPage"
|
||||
isLibrary
|
||||
/>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent,computed,ref,watch,nextTick,toRefs, reactive, onMounted} from 'vue'
|
||||
@@ -39,14 +54,16 @@ import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import { useStore } from "vuex";
|
||||
import { Https } from "@/tool/https";
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { rgbaToHex,rgbToHsv } from "@/tool/util"
|
||||
import { rgbaToHex,rgbToHsv,UrlToFile } from "@/tool/util"
|
||||
import { message,Upload} from 'ant-design-vue';
|
||||
import SelectImages from '@/component/common/SelectImages.vue'
|
||||
|
||||
|
||||
import upload from './upload.vue'
|
||||
import pallet from './pallet.vue'
|
||||
export default defineComponent({
|
||||
components:{
|
||||
upload,pallet
|
||||
upload,pallet,SelectImages
|
||||
},
|
||||
setup(props,{emit}) {
|
||||
const store = useStore();
|
||||
@@ -243,6 +260,33 @@ export default defineComponent({
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
const uploadRef = ref<any>(null)
|
||||
const selectImages = ref<any>(null)
|
||||
const showLibrary = ref(true)
|
||||
const handleOpenLibrary = ()=>{
|
||||
selectImages.value.init()
|
||||
}
|
||||
const handleImageSelect = (item:any)=>{
|
||||
console.log('item',item)
|
||||
UrlToFile(item.url,item.name).then((file:any)=>{
|
||||
console.log('file',file)
|
||||
// 构造符合 fileUploadChange 期望的数据结构
|
||||
const fileData = {
|
||||
file: {
|
||||
originFileObj: file, // 将 File 对象放在 originFileObj 属性中
|
||||
status: 'done'
|
||||
}
|
||||
}
|
||||
uploadRef.value.fileUploadChange(fileData)
|
||||
})
|
||||
// uploadRef.value.selectColor(item)
|
||||
}
|
||||
const handleShowListChange=(val:boolean)=>{
|
||||
console.log('val',val)
|
||||
showLibrary.value = !val
|
||||
}
|
||||
|
||||
const selectUplpadColor = (item:any)=>{
|
||||
colorData.selectColor = JSON.parse(JSON.stringify(item))
|
||||
}
|
||||
@@ -301,6 +345,14 @@ export default defineComponent({
|
||||
selectUplpadColor,
|
||||
setSelectColor,
|
||||
getTcxColor,
|
||||
handleOpenLibrary,
|
||||
Https,
|
||||
showLibrary,
|
||||
selectImages,
|
||||
uploadRef,
|
||||
handleImageSelect,
|
||||
handleShowListChange,
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
@@ -312,6 +364,30 @@ export default defineComponent({
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
|
||||
.flex{
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.flex-column{
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.flex-align-center{
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.flex-justify-center{
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.flex-justify-between{
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.flex-justify-around{
|
||||
justify-content: space-around;
|
||||
}
|
||||
.color{
|
||||
// width: 34rem;
|
||||
width: 100%;
|
||||
@@ -374,6 +450,25 @@ export default defineComponent({
|
||||
height: 10rem;
|
||||
width: 100%;
|
||||
border-radius: .5rem;
|
||||
.upload-container{
|
||||
background-color: #EDEDED;
|
||||
padding: 1rem 2rem;
|
||||
border-radius: 1rem;
|
||||
width: 8rem;
|
||||
height: 8rem;
|
||||
&.hide{
|
||||
width: initial;
|
||||
height: initial;
|
||||
border: none;
|
||||
padding: 0;
|
||||
flex: 1;
|
||||
background-color: transparent;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
:deep(.ant-upload){
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .colorCode{
|
||||
margin-bottom: 3rem;
|
||||
|
||||
@@ -44,7 +44,7 @@ import { rgbaToHex } from "@/tool/util"
|
||||
export default defineComponent({
|
||||
components:{
|
||||
},
|
||||
emits:['selectUplpadColor'],
|
||||
emits:['selectUplpadColor','deleteColor','selectFile'],
|
||||
setup(props,{emit}) {
|
||||
const {t} = useI18n();
|
||||
const store = useStore();
|
||||
@@ -63,6 +63,8 @@ export default defineComponent({
|
||||
})
|
||||
|
||||
const fileUploadChange = (data:any)=>{
|
||||
emit('selectFile')
|
||||
console.log('fileUploadChange',data)
|
||||
let file:any = data.file
|
||||
let fileData = file.originFileObj
|
||||
var reader = new FileReader();
|
||||
@@ -157,6 +159,7 @@ export default defineComponent({
|
||||
const colorDeleteFile = ()=>{
|
||||
colorUpload.uploadList[colorUpload.selectDetail.id] = []
|
||||
colorUpload.colorList[colorUpload.selectDetail.id] = []
|
||||
emit('deleteColor')
|
||||
}
|
||||
return{
|
||||
...toRefs(colorUpload),
|
||||
|
||||
@@ -40,7 +40,8 @@
|
||||
</div>
|
||||
</div>
|
||||
<a-dropdown>
|
||||
<i class="fi fi-br-upload" :class="{ Guide_1_2_6:type_.type2 == 'Printboard'}"></i>
|
||||
<!-- <i class="fi fi-br-upload" :class="{ Guide_1_2_6:type_.type2 == 'Printboard'}"></i> -->
|
||||
<i class="fi fi-br-upload" :class="{ Guide_1_2_6:type_.type2 == 'Printboard'}" :title="$t('Generate.uploadTitle')" v-show="!isTextarea && upload.level1Type !== 'Moodboard' && scene?.value != 'Slogan' && scene?.value != 'Logo'"></i>
|
||||
<template #overlay>
|
||||
<a-menu>
|
||||
<a-menu-item>
|
||||
@@ -60,7 +61,7 @@
|
||||
@change="(file) => fileUploadChange(file)"
|
||||
>
|
||||
<div class="drop-container">
|
||||
<i class="fi fi-br-upload" :class="{ Guide_1_2_6:type_.type2 == 'Printboard'}" :title="$t('Generate.uploadTitle')" v-show="!isTextarea && upload.level1Type !== 'Moodboard' && scene?.value != 'Slogan' && scene?.value != 'Logo'"></i>
|
||||
<folder-outlined />
|
||||
<div>{{ $t('PrintboardUpload.Upload') }}</div>
|
||||
</div>
|
||||
</a-upload>
|
||||
@@ -248,6 +249,7 @@ import createSlogan from "@/component/HomePage/createSlogan.vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import sketchCategory from "@/component/HomePage/sketchCategory.vue";
|
||||
import SelectImages from '@/component/common/SelectImages.vue'
|
||||
import { FolderOutlined } from '@ant-design/icons-vue';
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
@@ -255,7 +257,8 @@ export default defineComponent({
|
||||
generalMenu,
|
||||
createSlogan,
|
||||
sketchCategory,
|
||||
SelectImages
|
||||
SelectImages,
|
||||
FolderOutlined
|
||||
},
|
||||
props: ["msg",'sketchCatecoryList','scene','gender'],
|
||||
emits:['setLibrary'],
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
|
||||
<div class="modal-content">
|
||||
<!-- 分类标签 -->
|
||||
<div class="image-categories">
|
||||
<div v-if="showCategories" class="image-categories">
|
||||
<div
|
||||
v-for="category in categories"
|
||||
:key="category"
|
||||
@@ -88,11 +88,6 @@ import { navTypeList } from '@/tool/listData'
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const libraryTypeList = [
|
||||
{ label: t('Canvas.all'), value: '' },
|
||||
...navTypeList(t).library.list
|
||||
]
|
||||
|
||||
// Props
|
||||
const props = defineProps({
|
||||
api: {
|
||||
@@ -110,35 +105,58 @@ const props = defineProps({
|
||||
fullData: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
level1Type: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
})
|
||||
|
||||
// Emits
|
||||
const emits = defineEmits(['select'])
|
||||
|
||||
// 响应式数据
|
||||
const libraryTypeList = ref([
|
||||
...navTypeList(t).library.list.filter(item => item.value !== 'MyBrand')
|
||||
])
|
||||
|
||||
// 根据传入的level1Type参数确定默认选中的分类
|
||||
const getDefaultCategory = () => {
|
||||
if (props.level1Type) {
|
||||
// 如果传入了level1Type，查找匹配的category
|
||||
const matchedCategory = libraryTypeList.value.find(
|
||||
item => item.value === props.level1Type
|
||||
)
|
||||
return matchedCategory ? matchedCategory.label : libraryTypeList.value[0]?.label || ''
|
||||
}
|
||||
// 如果没有传入参数，选择第一个
|
||||
return libraryTypeList.value[0]?.label || ''
|
||||
}
|
||||
|
||||
const showPanel = ref(false)
|
||||
const selectedCategory = ref(t('Canvas.all'))
|
||||
const selectedCategory = ref(getDefaultCategory())
|
||||
const selectList = ref([])
|
||||
const list = ref([])
|
||||
|
||||
// 新增：分页和加载状态
|
||||
const currentPage = ref(1)
|
||||
const hasMore = ref(true)
|
||||
const loading = ref(false)
|
||||
// 内部管理的分页大小
|
||||
const pageSize = ref(10)
|
||||
const total = ref(0)
|
||||
|
||||
// 计算属性：获取所有分类
|
||||
const categories = computed(() => {
|
||||
if (props.isLibrary) {
|
||||
return libraryTypeList.map(item => item.label)
|
||||
return libraryTypeList.value.map(item => item.label)
|
||||
} else {
|
||||
return []
|
||||
}
|
||||
})
|
||||
|
||||
// 计算属性：是否显示分类选择器
|
||||
const showCategories = computed(() => {
|
||||
return !props.level1Type // 如果没有传入level1Type参数，则显示分类选择器
|
||||
})
|
||||
|
||||
// 新增：API请求函数
|
||||
const fetchImages = async (
|
||||
page = 1,
|
||||
@@ -148,11 +166,10 @@ const fetchImages = async (
|
||||
if (!props.api) return
|
||||
loading.value = true
|
||||
|
||||
const type = libraryTypeList.find(item => item.label === category).value
|
||||
console.log('type', type)
|
||||
const type = libraryTypeList.value.find(item => item.label === category)?.value
|
||||
const params = {
|
||||
classificationIdList: [],
|
||||
level1Type: 'Printboard',
|
||||
level1Type: props.level1Type || type,
|
||||
level2Type: '',
|
||||
page,
|
||||
ageGroup: '',
|
||||
|
||||
@@ -306,6 +306,23 @@ export default defineComponent({
|
||||
data.isGenerate = false
|
||||
clearInterval(data.remGenerateTime)
|
||||
data.remGenerate = false
|
||||
if(res.errCode === 2){
|
||||
Modal.confirm({
|
||||
title: res.errMsg,
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
okText: 'Yes',
|
||||
cancelText: 'No',
|
||||
mask:false,
|
||||
zIndex:99999,
|
||||
centered:true,
|
||||
onOk() {
|
||||
store.commit("setUpgradePlan", true);
|
||||
},
|
||||
onCancel(){
|
||||
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
}
|
||||
const setGenerate = (dataList:any)=>{
|
||||
|
||||
@@ -155,6 +155,12 @@ const base64toFile = (dataurl, filename = 'file') => {//转换base64
|
||||
|
||||
}
|
||||
|
||||
const UrlToFile = async (url, imageName) => {
|
||||
const response = await fetch(url)
|
||||
const blob = await response.blob()
|
||||
return new File([blob], imageName, { type: 'image/png' })
|
||||
}
|
||||
|
||||
function rgbToHsv([R, G, B]) {//根据rgb获取hsv
|
||||
R /= 255
|
||||
G /= 255
|
||||
@@ -613,25 +619,26 @@ function segmentImage(markerImage,fullImage,size){
|
||||
})
|
||||
}
|
||||
export {
|
||||
isEmail,
|
||||
getUploadUrl,
|
||||
getUniversalZoomLevel,
|
||||
rgbaToHex,
|
||||
getMinioUrl,
|
||||
base64ToFile,
|
||||
dataURLtoFile,
|
||||
blobToFile,
|
||||
base64toFile,
|
||||
rgbToHsv,
|
||||
formatTime,
|
||||
dataURLtoBlob,
|
||||
isMoible,
|
||||
downloadIamge,
|
||||
downloadVideoWithFetch,
|
||||
getBrowserInfo,
|
||||
setPubDate,
|
||||
murmur,
|
||||
setGradual,
|
||||
calculateGradientCoordinate,
|
||||
segmentImage,
|
||||
isEmail,
|
||||
getUploadUrl,
|
||||
getUniversalZoomLevel,
|
||||
rgbaToHex,
|
||||
getMinioUrl,
|
||||
base64ToFile,
|
||||
dataURLtoFile,
|
||||
blobToFile,
|
||||
base64toFile,
|
||||
rgbToHsv,
|
||||
formatTime,
|
||||
dataURLtoBlob,
|
||||
isMoible,
|
||||
downloadIamge,
|
||||
downloadVideoWithFetch,
|
||||
getBrowserInfo,
|
||||
setPubDate,
|
||||
murmur,
|
||||
setGradual,
|
||||
calculateGradientCoordinate,
|
||||
segmentImage,
|
||||
UrlToFile
|
||||
}
|
||||
@@ -31,8 +31,8 @@
|
||||
<div
|
||||
class="operate_item"
|
||||
v-if="
|
||||
record.process !== 'TO_PRODUCT_IMAGE' &&
|
||||
record.process !== 'POSE_TRANSFER'
|
||||
record.process ==='SERIES_DESIGN' ||
|
||||
record.process ==='SINGLE_DESIGN'
|
||||
"
|
||||
@click="turnToDetail(record)"
|
||||
>
|
||||
@@ -41,8 +41,8 @@
|
||||
<div
|
||||
class="operate_item"
|
||||
v-if="
|
||||
record.process !== 'TO_PRODUCT_IMAGE' &&
|
||||
record.process !== 'POSE_TRANSFER'
|
||||
record.process ==='SERIES_DESIGN' ||
|
||||
record.process ==='SINGLE_DESIGN'
|
||||
"
|
||||
@click="renameCollection(record, index)"
|
||||
>
|
||||
@@ -97,6 +97,7 @@ import projectSetting from '@/component/home/newProject/setting.vue'
|
||||
import { useStore } from 'vuex'
|
||||
import router from '@/router'
|
||||
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
// HeaderComponent,
|
||||
@@ -315,8 +316,14 @@ export default defineComponent({
|
||||
searchHistoryList(value: any) {
|
||||
// console.log('value', value)
|
||||
this.currentPage = 1
|
||||
const process =
|
||||
value.currentPreset === ''
|
||||
? []
|
||||
: value.currentPreset === 'TO_PRODUCT_IMAGE'
|
||||
? ['TO_PRODUCT_IMAGE', 'RELIGHT']
|
||||
: [value.currentPreset]
|
||||
this.getHistoryList({
|
||||
process: value.currentPreset,
|
||||
process,
|
||||
projectName: value.searchText
|
||||
})
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user