277 lines
7.4 KiB
Vue
277 lines
7.4 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="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>{{ 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>End Time: <span>*</span></span>
|
|
<a-space direction="vertical" style="width:220px">
|
|
<a-date-picker v-model:value="rangePickerValue" :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';
|
|
const md5 = require("md5");
|
|
export default defineComponent({
|
|
components: {
|
|
},
|
|
emits: ['searchHistoryList'],
|
|
setup(props,{emit}) {
|
|
let operations = reactive({
|
|
operationsModal:false,
|
|
operationsEdit:false,
|
|
loadingShow:false,
|
|
title:''
|
|
})
|
|
let operationsData = reactive({
|
|
rangePickerValue:'',
|
|
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.rangePickerValue = dayjs(new Date(data.redeemBy * 1000).toISOString().split('T')[0],'YYYY/MM/DD');
|
|
|
|
// operationsData.rangePickerValue='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 timestampMs = new Date(operationsData.rangePickerValue).getTime() / 1000; // 直接获取毫秒时间戳
|
|
return {
|
|
"percentOff": operationsData.percentOff,
|
|
"maxRedemptions": operationsData.maxRedemptions,
|
|
"commissionRate": operationsData.commissionRate,
|
|
"timestamp": timestampMs,
|
|
cooperator:operationsData.cooperator,
|
|
remark:operationsData.remark,
|
|
}
|
|
}
|
|
let setEditData = ()=>{
|
|
const timestampMs = new Date(operationsData.rangePickerValue).getTime() / 1000; // 直接获取毫秒时间戳
|
|
return {
|
|
id: operationsData.id,
|
|
paidCommission: operationsData.commissionRate,
|
|
cooperator:operationsData.cooperator,
|
|
remark:operationsData.remark,
|
|
}
|
|
}
|
|
let cancelDsign = ()=>{
|
|
operationsData.rangePickerValue=''
|
|
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.timestamp || !data.percentOff)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> |