331 lines
8.3 KiB
Vue
331 lines
8.3 KiB
Vue
<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).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;
|
|
}
|
|
.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>
|
|
|