3d添加印花 等
This commit is contained in:
X1627315083
275
src/component/Administrator/coupons/addAllUser.vue
Normal file
275
src/component/Administrator/coupons/addAllUser.vue
Normal file
@@ -0,0 +1,275 @@
|
||||
<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>*</span></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'}"
|
||||
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'}"
|
||||
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>Maximum: <span>*</span></span>
|
||||
<input
|
||||
:class="{active:title != 'Add'}"
|
||||
v-model="maxRedemptions"
|
||||
placeholder="Please enter maximum"
|
||||
type="text"
|
||||
style="width: 220px"
|
||||
/>
|
||||
</div>
|
||||
<div class="admin_state_item" >
|
||||
<span>PaidCommission: <span>*</span></span>
|
||||
<input
|
||||
v-model="paidCommission"
|
||||
placeholder="Please enter paidCommission"
|
||||
type="text"
|
||||
style="width: 220px"
|
||||
/>
|
||||
</div>
|
||||
<div class="admin_state_item">
|
||||
<span>Remark: <span>*</span></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.maxRedemptions || !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()
|
||||
if(!data.cooperator || !data.paidCommission || !data.remark )return message.warning('Please check the input box marked with *')
|
||||
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>
|
||||
Reference in New Issue
Block a user