refactor: Improve code formatting and structure in main.ts and Login.vue
- Standardized import statements in main.ts for better readability. - Enhanced the structure of the Vue component in Login.vue for improved clarity. - Updated event handling and state management in Login.vue. - Adjusted CSS styles for consistency and better organization.
This commit is contained in:
bighuixiang
@@ -1,277 +1,299 @@
|
||||
<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>
|
||||
<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 {
|
||||
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");
|
||||
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({
|
||||
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');
|
||||
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: {
|
||||
|
||||
},
|
||||
// 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;
|
||||
}
|
||||
:deep(.allUserPoeration_modal) {
|
||||
.ant-modal-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
<style lang="less" scoped>
|
||||
|
||||
.allUserPoeration_modal {
|
||||
.closeIcon {
|
||||
z-index: 2;
|
||||
.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_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_center {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user