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
5
components.d.ts
vendored
5
components.d.ts
vendored
@@ -8,6 +8,11 @@ export {}
|
|||||||
/* prettier-ignore */
|
/* prettier-ignore */
|
||||||
declare module 'vue' {
|
declare module 'vue' {
|
||||||
export interface GlobalComponents {
|
export interface GlobalComponents {
|
||||||
|
AImage: typeof import('ant-design-vue/es')['Image']
|
||||||
|
AModal: typeof import('ant-design-vue/es')['Modal']
|
||||||
|
APopover: typeof import('ant-design-vue/es')['Popover']
|
||||||
|
ASelect: typeof import('ant-design-vue/es')['Select']
|
||||||
|
ASpin: typeof import('ant-design-vue/es')['Spin']
|
||||||
RouterLink: typeof import('vue-router')['RouterLink']
|
RouterLink: typeof import('vue-router')['RouterLink']
|
||||||
RouterView: typeof import('vue-router')['RouterView']
|
RouterView: typeof import('vue-router')['RouterView']
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -16,12 +16,33 @@
|
|||||||
>
|
>
|
||||||
<div class="generalModel_btn">
|
<div class="generalModel_btn">
|
||||||
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
|
<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">
|
<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" />
|
<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
|
||||||
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
|
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>
|
</svg>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal_title_text">
|
<div class="modal_title_text">
|
||||||
@@ -66,17 +87,10 @@
|
|||||||
style="width: 250px"
|
style="width: 250px"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="allUserPoeration_btn admin_page">
|
<div class="allUserPoeration_btn admin_page">
|
||||||
<div class="admin_search_item" @click="cancelDsign">
|
<div class="admin_search_item" @click="cancelDsign">Close</div>
|
||||||
Close
|
<div class="admin_search_item" @click="setOk">OK</div>
|
||||||
</div>
|
|
||||||
<div class="admin_search_item" @click="setOk">
|
|
||||||
OK
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</a-modal>
|
</a-modal>
|
||||||
<div class="mark_loading" v-show="loadingShow">
|
<div class="mark_loading" v-show="loadingShow">
|
||||||
@@ -84,142 +98,157 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<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 { Https } from "@/tool/https";
|
||||||
import { Modal, message } from "ant-design-vue";
|
import { Modal, message } from "ant-design-vue";
|
||||||
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
|
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
|
||||||
import { formatTime, isEmail } from "@/tool/util";
|
import { formatTime, isEmail } from "@/tool/util";
|
||||||
const md5 = require("md5");
|
import md5 from "md5";
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
components: {
|
components: {},
|
||||||
},
|
emits: ["searchHistoryList"],
|
||||||
emits: ['searchHistoryList'],
|
|
||||||
setup(props, { emit }) {
|
setup(props, { emit }) {
|
||||||
let operations = reactive({
|
let operations = reactive({
|
||||||
operationsModal: false,
|
operationsModal: false,
|
||||||
operationsEdit: false,
|
operationsEdit: false,
|
||||||
loadingShow: false,
|
loadingShow: false,
|
||||||
title:''
|
title: "",
|
||||||
})
|
});
|
||||||
let operationsData = reactive({
|
let operationsData = reactive({
|
||||||
accountId: -1,
|
accountId: -1,
|
||||||
userName:'',
|
userName: "",
|
||||||
userEmail:'',
|
userEmail: "",
|
||||||
password:'',
|
password: "",
|
||||||
oldPassword:'',
|
oldPassword: "",
|
||||||
credits:'',
|
credits: "",
|
||||||
})
|
});
|
||||||
let state = ref([
|
let state = ref([
|
||||||
{
|
{
|
||||||
label:'visitor',
|
label: "visitor",
|
||||||
value:'0',
|
value: "0",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label:'yearly',
|
label: "yearly",
|
||||||
value:'1',
|
value: "1",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label:'monthly',
|
label: "monthly",
|
||||||
value:'2',
|
value: "2",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label:'trial',
|
label: "trial",
|
||||||
value:'3',
|
value: "3",
|
||||||
},
|
},
|
||||||
]);
|
]);
|
||||||
let init = (funStr, data) => {
|
let init = (funStr, data) => {
|
||||||
operations.operationsModal = true
|
operations.operationsModal = true;
|
||||||
operations.operationsEdit = true
|
operations.operationsEdit = true;
|
||||||
operations.title = funStr
|
operations.title = funStr;
|
||||||
if(funStr == 'Add') operations.operationsEdit = false
|
if (funStr == "Add") operations.operationsEdit = false;
|
||||||
if(funStr == 'Edit'){
|
if (funStr == "Edit") {
|
||||||
operationsData.accountId=data.id
|
operationsData.accountId = data.id;
|
||||||
operationsData.userName=data.userName
|
operationsData.userName = data.userName;
|
||||||
operationsData.userEmail=data.userEmail
|
operationsData.userEmail = data.userEmail;
|
||||||
operationsData.password=data.userPassword
|
operationsData.password = data.userPassword;
|
||||||
operationsData.oldPassword=data.userPassword
|
operationsData.oldPassword = data.userPassword;
|
||||||
// operationsData.validStartTime='2024-08-05T00:00:06'
|
// operationsData.validStartTime='2024-08-05T00:00:06'
|
||||||
// operationsData.validEndTime='2024-08-05T00:00:06'
|
// operationsData.validEndTime='2024-08-05T00:00:06'
|
||||||
operationsData.credits=data.creditsUsageLimit
|
operationsData.credits = data.creditsUsageLimit;
|
||||||
// operationsData.accountId = data.accountId
|
// operationsData.accountId = data.accountId
|
||||||
// operationsData.userName = data.userName
|
// operationsData.userName = data.userName
|
||||||
// operationsData.userEmail = data.userEmail
|
// operationsData.userEmail = data.userEmail
|
||||||
// operationsData.validStartTime = formatTime(data.validStartTime)
|
// operationsData.validStartTime = formatTime(data.validStartTime)
|
||||||
// operationsData.validEndTime = formatTime(data.validEndTime)
|
// operationsData.validEndTime = formatTime(data.validEndTime)
|
||||||
}
|
}
|
||||||
|
};
|
||||||
}
|
|
||||||
let focus = (event) => {
|
let focus = (event) => {
|
||||||
if (operationsData.password == operationsData.oldPassword) {
|
if (operationsData.password == operationsData.oldPassword) {
|
||||||
operationsData.password = ''
|
operationsData.password = "";
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
};
|
||||||
let blur = (event) => {
|
let blur = (event) => {
|
||||||
console.log((operationsData.password == '' && operationsData.oldPassword))
|
console.log(operationsData.password == "" && operationsData.oldPassword);
|
||||||
if(operationsData.password == '' && operationsData.oldPassword){
|
if (operationsData.password == "" && operationsData.oldPassword) {
|
||||||
operationsData.password = operationsData.oldPassword
|
operationsData.password = operationsData.oldPassword;
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
};
|
||||||
let setAddData = () => {
|
let setAddData = () => {
|
||||||
return {
|
return {
|
||||||
"creditsUsageLimit": operationsData.credits,
|
creditsUsageLimit: operationsData.credits,
|
||||||
"userEmail": operationsData.userEmail,
|
userEmail: operationsData.userEmail,
|
||||||
"userPassword": md5(operationsData.password + 'abc'),
|
userPassword: md5(operationsData.password + "abc"),
|
||||||
"userName": operationsData.userName,
|
userName: operationsData.userName,
|
||||||
}
|
};
|
||||||
}
|
};
|
||||||
let setEditData = () => {
|
let setEditData = () => {
|
||||||
return {
|
return {
|
||||||
"id": operationsData.accountId,
|
id: operationsData.accountId,
|
||||||
"creditsUsageLimit": operationsData.credits,
|
creditsUsageLimit: operationsData.credits,
|
||||||
"userName": operationsData.userName,
|
userName: operationsData.userName,
|
||||||
"userEmail": operationsData.userEmail,
|
userEmail: operationsData.userEmail,
|
||||||
"userPassword": (operationsData.password == operationsData.oldPassword)?'':md5(operationsData.password + 'abc'),
|
userPassword:
|
||||||
}
|
operationsData.password == operationsData.oldPassword
|
||||||
}
|
? ""
|
||||||
|
: md5(operationsData.password + "abc"),
|
||||||
|
};
|
||||||
|
};
|
||||||
let cancelDsign = () => {
|
let cancelDsign = () => {
|
||||||
operationsData.accountId=-1
|
operationsData.accountId = -1;
|
||||||
operationsData.userName=''
|
operationsData.userName = "";
|
||||||
operationsData.userEmail=''
|
operationsData.userEmail = "";
|
||||||
operationsData.password=''
|
operationsData.password = "";
|
||||||
operationsData.credits=''
|
operationsData.credits = "";
|
||||||
operations.operationsModal = false
|
operations.operationsModal = false;
|
||||||
}
|
};
|
||||||
let setOk = () => {
|
let setOk = () => {
|
||||||
let data
|
let data;
|
||||||
if(operations.title == 'Add'){
|
if (operations.title == "Add") {
|
||||||
data = setAddData()
|
data = setAddData();
|
||||||
if (!isEmail(data.userEmail)) {
|
if (!isEmail(data.userEmail)) {
|
||||||
message.info("The email format is incorrect");
|
message.info("The email format is incorrect");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
if(!data.userName || !data.userEmail || !data.userPassword || !data.creditsUsageLimit)return message.warning('Please check the input box marked with *')
|
if (
|
||||||
|
!data.userName ||
|
||||||
|
!data.userEmail ||
|
||||||
|
!data.userPassword ||
|
||||||
|
!data.creditsUsageLimit
|
||||||
|
)
|
||||||
|
return message.warning("Please check the input box marked with *");
|
||||||
Https.axiosPost(Https.httpUrls.addOrUpdateSubAccount, data).then(
|
Https.axiosPost(Https.httpUrls.addOrUpdateSubAccount, data).then(
|
||||||
(rv) => {
|
(rv) => {
|
||||||
if (rv) {
|
if (rv) {
|
||||||
cancelDsign()
|
cancelDsign();
|
||||||
emit('searchHistoryList')
|
emit("searchHistoryList");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
} else {
|
} else {
|
||||||
data = setEditData()
|
data = setEditData();
|
||||||
if (!isEmail(data.userEmail)) {
|
if (!isEmail(data.userEmail)) {
|
||||||
message.info("The email format is incorrect");
|
message.info("The email format is incorrect");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
if(!data.userName || !data.userEmail || !data.creditsUsageLimit)return message.warning('Please check the input box marked with *')
|
if (!data.userName || !data.userEmail || !data.creditsUsageLimit)
|
||||||
|
return message.warning("Please check the input box marked with *");
|
||||||
Https.axiosPost(Https.httpUrls.addOrUpdateSubAccount, data).then(
|
Https.axiosPost(Https.httpUrls.addOrUpdateSubAccount, data).then(
|
||||||
(rv) => {
|
(rv) => {
|
||||||
if (rv) {
|
if (rv) {
|
||||||
cancelDsign()
|
cancelDsign();
|
||||||
emit('searchHistoryList')
|
emit("searchHistoryList");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
};
|
||||||
}
|
|
||||||
return {
|
return {
|
||||||
...toRefs(operations),
|
...toRefs(operations),
|
||||||
...toRefs(operationsData),
|
...toRefs(operationsData),
|
||||||
@@ -232,13 +261,10 @@ export default defineComponent({
|
|||||||
};
|
};
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {};
|
||||||
};
|
|
||||||
},
|
},
|
||||||
mounted() {},
|
mounted() {},
|
||||||
methods: {
|
methods: {},
|
||||||
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
@@ -248,10 +274,8 @@ export default defineComponent({
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
|
|
||||||
.allUserPoeration_modal {
|
.allUserPoeration_modal {
|
||||||
.closeIcon {
|
.closeIcon {
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
|
|||||||
@@ -16,12 +16,33 @@
|
|||||||
>
|
>
|
||||||
<div class="generalModel_btn">
|
<div class="generalModel_btn">
|
||||||
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
|
<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">
|
<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" />
|
<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
|
||||||
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
|
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>
|
</svg>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal_title_text">
|
<div class="modal_title_text">
|
||||||
@@ -63,7 +84,11 @@
|
|||||||
<!-- <div class="admin_state_item" > -->
|
<!-- <div class="admin_state_item" > -->
|
||||||
<span>End Time: <span>*</span></span>
|
<span>End Time: <span>*</span></span>
|
||||||
<a-space direction="vertical" style="width: 220px">
|
<a-space direction="vertical" style="width: 220px">
|
||||||
<a-date-picker v-model:value="rangePickerValue" :disabled="title != 'Add'" style="width:220px" />
|
<a-date-picker
|
||||||
|
v-model:value="rangePickerValue"
|
||||||
|
:disabled="title != 'Add'"
|
||||||
|
style="width: 220px"
|
||||||
|
/>
|
||||||
</a-space>
|
</a-space>
|
||||||
</div>
|
</div>
|
||||||
<div class="admin_state_item">
|
<div class="admin_state_item">
|
||||||
@@ -95,17 +120,10 @@
|
|||||||
style="width: 220px"
|
style="width: 220px"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="allUserPoeration_btn admin_page">
|
<div class="allUserPoeration_btn admin_page">
|
||||||
<div class="admin_search_item" @click="cancelDsign">
|
<div class="admin_search_item" @click="cancelDsign">Close</div>
|
||||||
Close
|
<div class="admin_search_item" @click="setOk">OK</div>
|
||||||
</div>
|
|
||||||
<div class="admin_search_item" @click="setOk">
|
|
||||||
OK
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</a-modal>
|
</a-modal>
|
||||||
<div class="mark_loading" v-show="loadingShow">
|
<div class="mark_loading" v-show="loadingShow">
|
||||||
@@ -113,48 +131,58 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<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 { Https } from "@/tool/https";
|
||||||
import { Modal, message } from "ant-design-vue";
|
import { Modal, message } from "ant-design-vue";
|
||||||
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
|
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
|
||||||
import { formatTime, isEmail } from "@/tool/util";
|
import { formatTime, isEmail } from "@/tool/util";
|
||||||
import dayjs, { Dayjs } from 'dayjs';
|
import dayjs, { Dayjs } from "dayjs";
|
||||||
const md5 = require("md5");
|
import md5 from "md5";
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
components: {
|
components: {},
|
||||||
},
|
emits: ["searchHistoryList"],
|
||||||
emits: ['searchHistoryList'],
|
|
||||||
setup(props, { emit }) {
|
setup(props, { emit }) {
|
||||||
let operations = reactive({
|
let operations = reactive({
|
||||||
operationsModal: false,
|
operationsModal: false,
|
||||||
operationsEdit: false,
|
operationsEdit: false,
|
||||||
loadingShow: false,
|
loadingShow: false,
|
||||||
title:''
|
title: "",
|
||||||
})
|
});
|
||||||
let operationsData = reactive({
|
let operationsData = reactive({
|
||||||
rangePickerValue:'',
|
rangePickerValue: "",
|
||||||
percentOff:'',
|
percentOff: "",
|
||||||
commissionRate:'',
|
commissionRate: "",
|
||||||
maxRedemptions:'',
|
maxRedemptions: "",
|
||||||
cooperator:'',
|
cooperator: "",
|
||||||
paidCommission:'',
|
paidCommission: "",
|
||||||
remark:'',
|
remark: "",
|
||||||
id:''
|
id: "",
|
||||||
})
|
});
|
||||||
let init = (funStr, data) => {
|
let init = (funStr, data) => {
|
||||||
operations.operationsModal = true
|
operations.operationsModal = true;
|
||||||
operations.operationsEdit = true
|
operations.operationsEdit = true;
|
||||||
operations.title = funStr
|
operations.title = funStr;
|
||||||
if(funStr == 'Add') operations.operationsEdit = false
|
if (funStr == "Add") operations.operationsEdit = false;
|
||||||
if(funStr == 'Edit'){
|
if (funStr == "Edit") {
|
||||||
operationsData.id=data.id
|
operationsData.id = data.id;
|
||||||
operationsData.percentOff=data.percentOff
|
operationsData.percentOff = data.percentOff;
|
||||||
operationsData.commissionRate=data.commissionRate
|
operationsData.commissionRate = data.commissionRate;
|
||||||
operationsData.maxRedemptions=data.maxRedemptions
|
operationsData.maxRedemptions = data.maxRedemptions;
|
||||||
operationsData.cooperator=data.cooperator
|
operationsData.cooperator = data.cooperator;
|
||||||
operationsData.paidCommission=data.paidCommission
|
operationsData.paidCommission = data.paidCommission;
|
||||||
operationsData.remark=data.remark
|
operationsData.remark = data.remark;
|
||||||
operationsData.rangePickerValue = dayjs(new Date(data.redeemBy * 1000).toISOString().split('T')[0],'YYYY/MM/DD');
|
operationsData.rangePickerValue = dayjs(
|
||||||
|
new Date(data.redeemBy * 1000).toISOString().split("T")[0],
|
||||||
|
"YYYY/MM/DD"
|
||||||
|
);
|
||||||
|
|
||||||
// operationsData.rangePickerValue='2024-08-05T00:00:06'
|
// operationsData.rangePickerValue='2024-08-05T00:00:06'
|
||||||
// operationsData.validEndTime='2024-08-05T00:00:06'
|
// operationsData.validEndTime='2024-08-05T00:00:06'
|
||||||
@@ -163,65 +191,64 @@ export default defineComponent({
|
|||||||
// operationsData.validStartTime = formatTime(data.validStartTime)
|
// operationsData.validStartTime = formatTime(data.validStartTime)
|
||||||
// operationsData.validEndTime = formatTime(data.validEndTime)
|
// operationsData.validEndTime = formatTime(data.validEndTime)
|
||||||
}
|
}
|
||||||
|
};
|
||||||
}
|
|
||||||
let setAddData = () => {
|
let setAddData = () => {
|
||||||
const timestampMs = new Date(operationsData.rangePickerValue).getTime() / 1000; // 直接获取毫秒时间戳
|
const timestampMs =
|
||||||
|
new Date(operationsData.rangePickerValue).getTime() / 1000; // 直接获取毫秒时间戳
|
||||||
return {
|
return {
|
||||||
"percentOff": operationsData.percentOff,
|
percentOff: operationsData.percentOff,
|
||||||
"maxRedemptions": operationsData.maxRedemptions,
|
maxRedemptions: operationsData.maxRedemptions,
|
||||||
"commissionRate": operationsData.commissionRate,
|
commissionRate: operationsData.commissionRate,
|
||||||
"timestamp": timestampMs,
|
timestamp: timestampMs,
|
||||||
cooperator: operationsData.cooperator,
|
cooperator: operationsData.cooperator,
|
||||||
remark: operationsData.remark,
|
remark: operationsData.remark,
|
||||||
}
|
};
|
||||||
}
|
};
|
||||||
let setEditData = () => {
|
let setEditData = () => {
|
||||||
const timestampMs = new Date(operationsData.rangePickerValue).getTime() / 1000; // 直接获取毫秒时间戳
|
const timestampMs =
|
||||||
|
new Date(operationsData.rangePickerValue).getTime() / 1000; // 直接获取毫秒时间戳
|
||||||
return {
|
return {
|
||||||
id: operationsData.id,
|
id: operationsData.id,
|
||||||
paidCommission: operationsData.commissionRate,
|
paidCommission: operationsData.commissionRate,
|
||||||
cooperator: operationsData.cooperator,
|
cooperator: operationsData.cooperator,
|
||||||
remark: operationsData.remark,
|
remark: operationsData.remark,
|
||||||
}
|
};
|
||||||
}
|
};
|
||||||
let cancelDsign = () => {
|
let cancelDsign = () => {
|
||||||
operationsData.rangePickerValue=''
|
operationsData.rangePickerValue = "";
|
||||||
operationsData.percentOff=''
|
operationsData.percentOff = "";
|
||||||
operationsData.commissionRate=''
|
operationsData.commissionRate = "";
|
||||||
operationsData.maxRedemptions=''
|
operationsData.maxRedemptions = "";
|
||||||
operationsData.cooperator=''
|
operationsData.cooperator = "";
|
||||||
operationsData.paidCommission=''
|
operationsData.paidCommission = "";
|
||||||
operationsData.remark=''
|
operationsData.remark = "";
|
||||||
operationsData.id=''
|
operationsData.id = "";
|
||||||
operations.operationsModal = false
|
operations.operationsModal = false;
|
||||||
}
|
};
|
||||||
let setOk = () => {
|
let setOk = () => {
|
||||||
let data
|
let data;
|
||||||
if(operations.title == 'Add'){
|
if (operations.title == "Add") {
|
||||||
data = setAddData()
|
data = setAddData();
|
||||||
if(!data.commissionRate || !data.timestamp || !data.percentOff)return message.warning('Please check the input box marked with *')
|
if (!data.commissionRate || !data.timestamp || !data.percentOff)
|
||||||
Https.axiosPost(Https.httpUrls.createCoupon, data).then(
|
return message.warning("Please check the input box marked with *");
|
||||||
(rv) => {
|
Https.axiosPost(Https.httpUrls.createCoupon, data).then((rv) => {
|
||||||
if (rv) {
|
if (rv) {
|
||||||
cancelDsign()
|
cancelDsign();
|
||||||
emit('searchHistoryList')
|
emit("searchHistoryList");
|
||||||
}
|
}
|
||||||
}
|
});
|
||||||
);
|
|
||||||
} else {
|
} else {
|
||||||
data = setEditData()
|
data = setEditData();
|
||||||
Https.axiosGet(Https.httpUrls.updatePromCodeInfo,{params:data}).then(
|
Https.axiosGet(Https.httpUrls.updatePromCodeInfo, {
|
||||||
(rv) => {
|
params: data,
|
||||||
|
}).then((rv) => {
|
||||||
if (rv) {
|
if (rv) {
|
||||||
cancelDsign()
|
cancelDsign();
|
||||||
emit('searchHistoryList')
|
emit("searchHistoryList");
|
||||||
}
|
}
|
||||||
|
});
|
||||||
}
|
}
|
||||||
);
|
};
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
return {
|
return {
|
||||||
...toRefs(operations),
|
...toRefs(operations),
|
||||||
...toRefs(operationsData),
|
...toRefs(operationsData),
|
||||||
@@ -233,13 +260,10 @@ export default defineComponent({
|
|||||||
};
|
};
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {};
|
||||||
};
|
|
||||||
},
|
},
|
||||||
mounted() {},
|
mounted() {},
|
||||||
methods: {
|
methods: {},
|
||||||
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
@@ -249,10 +273,8 @@ export default defineComponent({
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
|
|
||||||
.allUserPoeration_modal {
|
.allUserPoeration_modal {
|
||||||
.closeIcon {
|
.closeIcon {
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
|
|||||||
@@ -18,12 +18,33 @@
|
|||||||
<div class="generalModel_btn">
|
<div class="generalModel_btn">
|
||||||
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
|
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
|
||||||
<!-- <i class="fi fi-rr-cross-small"></i> -->
|
<!-- <i class="fi fi-rr-cross-small"></i> -->
|
||||||
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<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" />
|
<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
|
||||||
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
|
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>
|
</svg>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="renewContent">
|
<div class="renewContent">
|
||||||
@@ -40,11 +61,15 @@
|
|||||||
<div class="benefitsItem">
|
<div class="benefitsItem">
|
||||||
<div class="describe">
|
<div class="describe">
|
||||||
<div class="icon">
|
<div class="icon">
|
||||||
<img src="https://storage.googleapis.com/chatapp-website-assets/stars.webp" >
|
<img
|
||||||
|
src="https://storage.googleapis.com/chatapp-website-assets/stars.webp"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="text">
|
<div class="text">
|
||||||
<p class="title">GPT-4o - DeepSeek-R1 - Gemini Pro and more</p>
|
<p class="title">GPT-4o - DeepSeek-R1 - Gemini Pro and more</p>
|
||||||
<p class="info">More accurate answers with multiple latest AI models</p>
|
<p class="info">
|
||||||
|
More accurate answers with multiple latest AI models
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="contrast">
|
<div class="contrast">
|
||||||
@@ -55,11 +80,15 @@
|
|||||||
<div class="benefitsItem">
|
<div class="benefitsItem">
|
||||||
<div class="describe">
|
<div class="describe">
|
||||||
<div class="icon">
|
<div class="icon">
|
||||||
<img src="https://storage.googleapis.com/chatapp-website-assets/stars.webp" >
|
<img
|
||||||
|
src="https://storage.googleapis.com/chatapp-website-assets/stars.webp"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="text">
|
<div class="text">
|
||||||
<p class="title">GPT-4o - DeepSeek-R1 - Gemini Pro and more</p>
|
<p class="title">GPT-4o - DeepSeek-R1 - Gemini Pro and more</p>
|
||||||
<p class="info">More accurate answers with multiple latest AI models</p>
|
<p class="info">
|
||||||
|
More accurate answers with multiple latest AI models
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="contrast">
|
<div class="contrast">
|
||||||
@@ -70,11 +99,15 @@
|
|||||||
<div class="benefitsItem">
|
<div class="benefitsItem">
|
||||||
<div class="describe">
|
<div class="describe">
|
||||||
<div class="icon">
|
<div class="icon">
|
||||||
<img src="https://storage.googleapis.com/chatapp-website-assets/stars.webp" >
|
<img
|
||||||
|
src="https://storage.googleapis.com/chatapp-website-assets/stars.webp"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="text">
|
<div class="text">
|
||||||
<p class="title">GPT-4o - DeepSeek-R1 - Gemini Pro and more</p>
|
<p class="title">GPT-4o - DeepSeek-R1 - Gemini Pro and more</p>
|
||||||
<p class="info">More accurate answers with multiple latest AI models</p>
|
<p class="info">
|
||||||
|
More accurate answers with multiple latest AI models
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="contrast">
|
<div class="contrast">
|
||||||
@@ -85,11 +118,15 @@
|
|||||||
<div class="benefitsItem">
|
<div class="benefitsItem">
|
||||||
<div class="describe">
|
<div class="describe">
|
||||||
<div class="icon">
|
<div class="icon">
|
||||||
<img src="https://storage.googleapis.com/chatapp-website-assets/stars.webp" >
|
<img
|
||||||
|
src="https://storage.googleapis.com/chatapp-website-assets/stars.webp"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="text">
|
<div class="text">
|
||||||
<p class="title">GPT-4o - DeepSeek-R1 - Gemini Pro and more</p>
|
<p class="title">GPT-4o - DeepSeek-R1 - Gemini Pro and more</p>
|
||||||
<p class="info">More accurate answers with multiple latest AI models</p>
|
<p class="info">
|
||||||
|
More accurate answers with multiple latest AI models
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="contrast">
|
<div class="contrast">
|
||||||
@@ -101,11 +138,20 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="right">
|
<div class="right">
|
||||||
<div class="title">
|
<div class="title">
|
||||||
{{ $t('Renew.title') }}
|
{{ $t("Renew.title") }}
|
||||||
</div>
|
</div>
|
||||||
<div class="info">Get started today for unlimited access!</div>
|
<div class="info">Get started today for unlimited access!</div>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<div class="productItem" :class="{active:item.price == current.price,sellWell:item.sellWell}" v-for="item in personage" :key="item.price" @click="setPromotionData(item)">
|
<div
|
||||||
|
class="productItem"
|
||||||
|
:class="{
|
||||||
|
active: item.price == current.price,
|
||||||
|
sellWell: item.sellWell,
|
||||||
|
}"
|
||||||
|
v-for="item in personage"
|
||||||
|
:key="item.price"
|
||||||
|
@click="setPromotionData(item)"
|
||||||
|
>
|
||||||
<div class="popular" v-show="item.sellWell">MOST POPULAR</div>
|
<div class="popular" v-show="item.sellWell">MOST POPULAR</div>
|
||||||
<div class="priceBox">
|
<div class="priceBox">
|
||||||
<div class="left">
|
<div class="left">
|
||||||
@@ -114,17 +160,47 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="right">
|
<div class="right">
|
||||||
<div class="promotion">
|
<div class="promotion">
|
||||||
<div class="succeed" v-show="item.promotionData.error == 'true'">
|
<div
|
||||||
|
class="succeed"
|
||||||
|
v-show="item.promotionData.error == 'true'"
|
||||||
|
>
|
||||||
{{ item.promotionData.code }}
|
{{ item.promotionData.code }}
|
||||||
<i class="fi fi-sr-times-hexagon" @click="clearPromotionCode"></i>
|
<i
|
||||||
|
class="fi fi-sr-times-hexagon"
|
||||||
|
@click="clearPromotionCode"
|
||||||
|
></i>
|
||||||
</div>
|
</div>
|
||||||
<div class="input" @click.stop v-show="!item.promotionData.error || item.promotionData.error == 'false'">
|
<div
|
||||||
<input type="text" :placeholder="$t('Renew.promotionCode')" v-model="item.promotionData.code">
|
class="input"
|
||||||
<div style="cursor: pointer;" @click="examine(item)">{{ $t('Renew.use') }}</div>
|
@click.stop
|
||||||
|
v-show="
|
||||||
|
!item.promotionData.error ||
|
||||||
|
item.promotionData.error == 'false'
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
:placeholder="$t('Renew.promotionCode')"
|
||||||
|
v-model="item.promotionData.code"
|
||||||
|
/>
|
||||||
|
<div style="cursor: pointer" @click="examine(item)">
|
||||||
|
{{ $t("Renew.use") }}
|
||||||
</div>
|
</div>
|
||||||
<div class="error" v-show="item.promotionData.error == 'false'">{{item.promotionData.str}}</div>
|
|
||||||
</div>
|
</div>
|
||||||
<p class="discountsPrice" v-show="item.promotionData.price" style="text-align: center;">${{ item.promotionData.price }}</p>
|
<div
|
||||||
|
class="error"
|
||||||
|
v-show="item.promotionData.error == 'false'"
|
||||||
|
>
|
||||||
|
{{ item.promotionData.str }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p
|
||||||
|
class="discountsPrice"
|
||||||
|
v-show="item.promotionData.price"
|
||||||
|
style="text-align: center"
|
||||||
|
>
|
||||||
|
${{ item.promotionData.price }}
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -132,14 +208,26 @@
|
|||||||
<div class="payment">
|
<div class="payment">
|
||||||
<div class="allocation">
|
<div class="allocation">
|
||||||
<div class="selectType">
|
<div class="selectType">
|
||||||
<div class="text">{{ $t('Renew.Payment') }}:</div>
|
<div class="text">{{ $t("Renew.Payment") }}:</div>
|
||||||
<label>
|
<label>
|
||||||
<input name="payment" type="radio" value="CreditCard" v-model="current.PaymentType" @change="setPaymentType('CreditCard')">
|
<input
|
||||||
{{ $t('Renew.CreditCard') }}
|
name="payment"
|
||||||
|
type="radio"
|
||||||
|
value="CreditCard"
|
||||||
|
v-model="current.PaymentType"
|
||||||
|
@change="setPaymentType('CreditCard')"
|
||||||
|
/>
|
||||||
|
{{ $t("Renew.CreditCard") }}
|
||||||
</label>
|
</label>
|
||||||
<label>
|
<label>
|
||||||
<input name="payment" type="radio" value="Alipay" v-model="current.PaymentType" @change="setPaymentType('Alipay')">
|
<input
|
||||||
{{ $t('Renew.Alipay') }}
|
name="payment"
|
||||||
|
type="radio"
|
||||||
|
value="Alipay"
|
||||||
|
v-model="current.PaymentType"
|
||||||
|
@change="setPaymentType('Alipay')"
|
||||||
|
/>
|
||||||
|
{{ $t("Renew.Alipay") }}
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -148,8 +236,20 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="payMethod_payAffirm_clause" ref="labelDisclaimer">
|
<div class="payMethod_payAffirm_clause" ref="labelDisclaimer">
|
||||||
<label>
|
<label>
|
||||||
<input type="checkbox" v-model="clause">
|
<input type="checkbox" v-model="clause" />
|
||||||
<span class="generalModelDescription">{{ $t('upgradePlan.policy1') }}<a href="https://code-create.com.hk/aida-terms-and-conditions/" target="_blank">{{ $t('upgradePlan.policy2') }}</a>{{ $t('upgradePlan.policy3') }}<a href="https://code-create.com.hk/aida-subscription-agreement/" target="_blank">{{ $t('upgradePlan.policy4') }}</a>. *</span>
|
<span class="generalModelDescription"
|
||||||
|
>{{ $t("upgradePlan.policy1")
|
||||||
|
}}<a
|
||||||
|
href="https://code-create.com.hk/aida-terms-and-conditions/"
|
||||||
|
target="_blank"
|
||||||
|
>{{ $t("upgradePlan.policy2") }}</a
|
||||||
|
>{{ $t("upgradePlan.policy3")
|
||||||
|
}}<a
|
||||||
|
href="https://code-create.com.hk/aida-subscription-agreement/"
|
||||||
|
target="_blank"
|
||||||
|
>{{ $t("upgradePlan.policy4") }}</a
|
||||||
|
>. *</span
|
||||||
|
>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<!-- <div class="paySecure">
|
<!-- <div class="paySecure">
|
||||||
@@ -163,15 +263,21 @@
|
|||||||
<a-spin size="large" />
|
<a-spin size="large" />
|
||||||
</div>
|
</div>
|
||||||
<div class="mark_loading" v-show="isShowMark" state="true">
|
<div class="mark_loading" v-show="isShowMark" state="true">
|
||||||
<div class="mark_loading_title">{{ $t('upgradePlan.completed') }}</div>
|
<div class="mark_loading_title">{{ $t("upgradePlan.completed") }}</div>
|
||||||
<div class="mark_loading_intro">{{ $t('upgradePlan.hint') }}</div>
|
<div class="mark_loading_intro">{{ $t("upgradePlan.hint") }}</div>
|
||||||
<div class="mark_loading_title_box">
|
<div class="mark_loading_title_box">
|
||||||
<div class="mark_loading_btn mark_loading_btn2" @click="setPaidBack">{{ $t('upgradePlan.Back') }}</div>
|
<div class="mark_loading_btn mark_loading_btn2" @click="setPaidBack">
|
||||||
|
{{ $t("upgradePlan.Back") }}
|
||||||
|
</div>
|
||||||
<div class="mark_loading_btn" @click="completePayment">OK</div>
|
<div class="mark_loading_btn" @click="completePayment">OK</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</a-modal>
|
</a-modal>
|
||||||
<payMethod ref="payMethod" @completePayment="cancelDsign" type="renew"></payMethod>
|
<payMethod
|
||||||
|
ref="payMethod"
|
||||||
|
@completePayment="cancelDsign"
|
||||||
|
type="renew"
|
||||||
|
></payMethod>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
@@ -181,60 +287,59 @@ import payMethod from "@/component/Pay/payMethod.vue";
|
|||||||
import { useStore } from "vuex";
|
import { useStore } from "vuex";
|
||||||
import { useI18n } from "vue-i18n";
|
import { useI18n } from "vue-i18n";
|
||||||
import { Https } from "@/tool/https";
|
import { Https } from "@/tool/https";
|
||||||
const md5 = require("md5");
|
import md5 from "md5";
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
components: {
|
components: {
|
||||||
payMethod,
|
payMethod,
|
||||||
},
|
},
|
||||||
setup() {
|
setup() {
|
||||||
const store = useStore();
|
const store = useStore();
|
||||||
const {t} = useI18n()
|
const { t } = useI18n();
|
||||||
let renew = reactive({
|
let renew = reactive({
|
||||||
renewModel: false,
|
renewModel: false,
|
||||||
renewModelMask: true,
|
renewModelMask: true,
|
||||||
pageWidth:'50%'
|
pageWidth: "50%",
|
||||||
})
|
});
|
||||||
let payMethodData = reactive({
|
let payMethodData = reactive({
|
||||||
clause: false,
|
clause: false,
|
||||||
labelDisclaimer: null as any,
|
labelDisclaimer: null as any,
|
||||||
newWindow: null as any,
|
newWindow: null as any,
|
||||||
isShowMark: false,
|
isShowMark: false,
|
||||||
isShowMark_: false,
|
isShowMark_: false,
|
||||||
})
|
});
|
||||||
let renewData = reactive({
|
let renewData = reactive({
|
||||||
|
|
||||||
personage: [
|
personage: [
|
||||||
{
|
{
|
||||||
price:'500',
|
price: "500",
|
||||||
sellWell: true,
|
sellWell: true,
|
||||||
activity: false, //活动打折
|
activity: false, //活动打折
|
||||||
type: {
|
type: {
|
||||||
value:'Month',
|
value: "Month",
|
||||||
label:'Month',
|
label: "Month",
|
||||||
},
|
},
|
||||||
PaymentType:'',
|
PaymentType: "",
|
||||||
promotionData: {
|
promotionData: {
|
||||||
code:'',
|
code: "",
|
||||||
error:'',
|
error: "",
|
||||||
str:'',
|
str: "",
|
||||||
price:'',
|
price: "",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
price:'5,000',
|
price: "5,000",
|
||||||
sellWell: false,
|
sellWell: false,
|
||||||
activity: false, //活动打折
|
activity: false, //活动打折
|
||||||
typeValue:'year',
|
typeValue: "year",
|
||||||
type: {
|
type: {
|
||||||
value:'Year',
|
value: "Year",
|
||||||
label:'Year',
|
label: "Year",
|
||||||
},
|
},
|
||||||
PaymentType:'',
|
PaymentType: "",
|
||||||
promotionData: {
|
promotionData: {
|
||||||
code:'',
|
code: "",
|
||||||
error:'',
|
error: "",
|
||||||
str:'',
|
str: "",
|
||||||
price:'',
|
price: "",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
@@ -257,154 +362,167 @@ export default defineComponent({
|
|||||||
// }),
|
// }),
|
||||||
firm: computed(() => {
|
firm: computed(() => {
|
||||||
return {
|
return {
|
||||||
title:'Education Edition',
|
title: "Education Edition",
|
||||||
price: {
|
price: {
|
||||||
year:'500',
|
year: "500",
|
||||||
},
|
},
|
||||||
unit: {
|
unit: {
|
||||||
year:'HKD / Year',
|
year: "HKD / Year",
|
||||||
},
|
},
|
||||||
type:'year',
|
type: "year",
|
||||||
autoRenewal: {
|
autoRenewal: {
|
||||||
text:t('Renew.automatically'),
|
text: t("Renew.automatically"),
|
||||||
value: true,
|
value: true,
|
||||||
},
|
},
|
||||||
typeList:['year'],
|
typeList: ["year"],
|
||||||
info:'Customised plan',
|
info: "Customised plan",
|
||||||
|
};
|
||||||
}
|
|
||||||
}),
|
}),
|
||||||
education: computed(() => {
|
education: computed(() => {
|
||||||
return {
|
return {
|
||||||
title:'Enterprise Edition',
|
title: "Enterprise Edition",
|
||||||
price: {
|
price: {
|
||||||
year:'500',
|
year: "500",
|
||||||
},
|
},
|
||||||
unit: {
|
unit: {
|
||||||
year:'HKD / Year',
|
year: "HKD / Year",
|
||||||
},
|
},
|
||||||
type:'year',
|
type: "year",
|
||||||
autoRenewal: {
|
autoRenewal: {
|
||||||
text:t('Renew.automatically'),
|
text: t("Renew.automatically"),
|
||||||
value: true,
|
value: true,
|
||||||
},
|
},
|
||||||
typeList:['year'],
|
typeList: ["year"],
|
||||||
info:'Customised plan',
|
info: "Customised plan",
|
||||||
}
|
};
|
||||||
}),
|
}),
|
||||||
current:{
|
current: {} as any,
|
||||||
|
|
||||||
} as any,
|
|
||||||
payMethod: null as any,
|
payMethod: null as any,
|
||||||
})
|
});
|
||||||
const init = () => {
|
const init = () => {
|
||||||
renew.renewModel = true
|
renew.renewModel = true;
|
||||||
renewData.current = renewData.personage[0]
|
renewData.current = renewData.personage[0];
|
||||||
}
|
};
|
||||||
const cancelDsign = () => {
|
const cancelDsign = () => {
|
||||||
renew.renewModel = false
|
renew.renewModel = false;
|
||||||
}
|
};
|
||||||
const setPaymentType = (str: any) => {
|
const setPaymentType = (str: any) => {
|
||||||
renewData.current.PaymentType = str
|
renewData.current.PaymentType = str;
|
||||||
}
|
};
|
||||||
const payment = () => {
|
const payment = () => {
|
||||||
if (!payMethodData.clause) {
|
if (!payMethodData.clause) {
|
||||||
let labelDisclaimer:any = payMethodData.labelDisclaimer
|
let labelDisclaimer: any = payMethodData.labelDisclaimer;
|
||||||
if(!labelDisclaimer.classList.contains('animation')){
|
if (!labelDisclaimer.classList.contains("animation")) {
|
||||||
labelDisclaimer.classList.add('animation')
|
labelDisclaimer.classList.add("animation");
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
labelDisclaimer.classList.remove('animation')
|
labelDisclaimer.classList.remove("animation");
|
||||||
}, 1000);
|
}, 1000);
|
||||||
}
|
}
|
||||||
return
|
return;
|
||||||
}
|
}
|
||||||
if(!renewData.current.PaymentType)return message.info(t('Renew.PleaseSelectPayment'))
|
if (!renewData.current.PaymentType)
|
||||||
|
return message.info(t("Renew.PleaseSelectPayment"));
|
||||||
// let data = {
|
// let data = {
|
||||||
// autoRenewal:renewData.current.PaymentType != 'Alipay',//one_time为不自动续费
|
// autoRenewal:renewData.current.PaymentType != 'Alipay',//one_time为不自动续费
|
||||||
// productName:'Subscription',
|
// productName:'Subscription',
|
||||||
// subscribeType,//yearly为年费，monthly为月费
|
// subscribeType,//yearly为年费，monthly为月费
|
||||||
// }
|
// }
|
||||||
let url = window.location.origin+'/paySucceed'
|
let url = window.location.origin + "/paySucceed";
|
||||||
let data = {
|
let data = {
|
||||||
autoRenewal:renewData.current.PaymentType != 'Alipay',//false为不自动续费
|
autoRenewal: renewData.current.PaymentType != "Alipay", //false为不自动续费
|
||||||
productName:'Subscription',
|
productName: "Subscription",
|
||||||
quantity: 1,
|
quantity: 1,
|
||||||
returnUrl: url,
|
returnUrl: url,
|
||||||
subscribeType: renewData.current.type.value, //yearly为年费，monthly为月费
|
subscribeType: renewData.current.type.value, //yearly为年费，monthly为月费
|
||||||
wallet:'ALIPAYHK',
|
wallet: "ALIPAYHK",
|
||||||
promotionCode: renewData.current.promotionData.code,
|
promotionCode: renewData.current.promotionData.code,
|
||||||
}
|
};
|
||||||
let httpsUrl = Https.httpUrls.payStripe
|
let httpsUrl = Https.httpUrls.payStripe;
|
||||||
payMethodData.isShowMark_ = true
|
payMethodData.isShowMark_ = true;
|
||||||
Https.axiosPost(httpsUrl,data).then(
|
Https.axiosPost(httpsUrl, data)
|
||||||
(rv: any) => {
|
.then((rv: any) => {
|
||||||
var width = 800;
|
var width = 800;
|
||||||
var height = 600;
|
var height = 600;
|
||||||
var left = (screen.width - width) / 2;
|
var left = (screen.width - width) / 2;
|
||||||
var top = (screen.height - height) / 2;
|
var top = (screen.height - height) / 2;
|
||||||
payMethodData.newWindow = window.open("", "_blank", "width=" + width + ", height=" + height + ", left=" + left + ", top=" + top);
|
payMethodData.newWindow = window.open(
|
||||||
let herf = rv
|
"",
|
||||||
|
"_blank",
|
||||||
|
"width=" +
|
||||||
|
width +
|
||||||
|
", height=" +
|
||||||
|
height +
|
||||||
|
", left=" +
|
||||||
|
left +
|
||||||
|
", top=" +
|
||||||
|
top
|
||||||
|
);
|
||||||
|
let herf = rv;
|
||||||
if (payMethodData.newWindow) {
|
if (payMethodData.newWindow) {
|
||||||
payMethodData.newWindow.location.href = herf
|
payMethodData.newWindow.location.href = herf;
|
||||||
} else {
|
} else {
|
||||||
// window.open(herf, '_blank');
|
// window.open(herf, '_blank');
|
||||||
window.location.href = herf;
|
window.location.href = herf;
|
||||||
}
|
}
|
||||||
payMethodData.newWindow = null
|
payMethodData.newWindow = null;
|
||||||
payMethodData.isShowMark = true
|
payMethodData.isShowMark = true;
|
||||||
payMethodData.isShowMark_ = false
|
payMethodData.isShowMark_ = false;
|
||||||
}
|
})
|
||||||
).catch(res=>{
|
.catch((res) => {
|
||||||
payMethodData.isShowMark_ = false
|
payMethodData.isShowMark_ = false;
|
||||||
});
|
});
|
||||||
|
|
||||||
// renewData.payMethod.init(data)
|
// renewData.payMethod.init(data)
|
||||||
}
|
};
|
||||||
const setPaidBack = () => {
|
const setPaidBack = () => {
|
||||||
payMethod.payMethodModel = false
|
payMethod.payMethodModel = false;
|
||||||
payMethodData.isShowMark = false
|
payMethodData.isShowMark = false;
|
||||||
payMethodData.clause = false
|
payMethodData.clause = false;
|
||||||
}
|
};
|
||||||
const completePayment = () => {
|
const completePayment = () => {
|
||||||
renew.renewModel = false
|
renew.renewModel = false;
|
||||||
setPaidBack()
|
setPaidBack();
|
||||||
}
|
};
|
||||||
const examine = (item: any) => {
|
const examine = (item: any) => {
|
||||||
// renewData.promotionData.error
|
// renewData.promotionData.error
|
||||||
let price = item?.price
|
let price = item?.price;
|
||||||
const normalNumber = Number(price.replace(/,/g, ''));
|
const normalNumber = Number(price.replace(/,/g, ""));
|
||||||
if (!item.promotionData.code) {
|
if (!item.promotionData.code) {
|
||||||
return
|
return;
|
||||||
}
|
}
|
||||||
let data = {
|
let data = {
|
||||||
promotionCode: item.promotionData.code,
|
promotionCode: item.promotionData.code,
|
||||||
price: normalNumber,
|
price: normalNumber,
|
||||||
}
|
};
|
||||||
Https.axiosGet(Https.httpUrls.checkCoupon,{params:data}).then((rv:any)=>{
|
Https.axiosGet(Https.httpUrls.checkCoupon, { params: data }).then(
|
||||||
|
(rv: any) => {
|
||||||
if (rv) {
|
if (rv) {
|
||||||
renewData.personage.forEach((personageItem: any) => {
|
renewData.personage.forEach((personageItem: any) => {
|
||||||
if (personageItem.price == item.price) {
|
if (personageItem.price == item.price) {
|
||||||
if (rv.status == "valid") {
|
if (rv.status == "valid") {
|
||||||
item.promotionData.error = 'true'
|
item.promotionData.error = "true";
|
||||||
item.promotionData.price = (Number(rv.discountedPrice)).toLocaleString()
|
item.promotionData.price = Number(
|
||||||
|
rv.discountedPrice
|
||||||
|
).toLocaleString();
|
||||||
} else {
|
} else {
|
||||||
item.promotionData.error = 'false'
|
item.promotionData.error = "false";
|
||||||
item.promotionData.str = rv.message
|
item.promotionData.str = rv.message;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
} else {
|
} else {
|
||||||
}
|
}
|
||||||
})
|
|
||||||
}
|
}
|
||||||
|
);
|
||||||
|
};
|
||||||
const clearPromotionCode = () => {
|
const clearPromotionCode = () => {
|
||||||
renewData.current.promotionData.error = '';
|
renewData.current.promotionData.error = "";
|
||||||
renewData.current.promotionData.code = ''
|
renewData.current.promotionData.code = "";
|
||||||
renewData.current.promotionData.price = ''
|
renewData.current.promotionData.price = "";
|
||||||
}
|
};
|
||||||
const setPromotionData = (item: any) => {
|
const setPromotionData = (item: any) => {
|
||||||
renewData.current = item
|
renewData.current = item;
|
||||||
}
|
};
|
||||||
return {
|
return {
|
||||||
store,
|
store,
|
||||||
...toRefs(renew),
|
...toRefs(renew),
|
||||||
@@ -418,13 +536,11 @@ export default defineComponent({
|
|||||||
completePayment,
|
completePayment,
|
||||||
examine,
|
examine,
|
||||||
clearPromotionCode,
|
clearPromotionCode,
|
||||||
setPromotionData
|
setPromotionData,
|
||||||
}
|
};
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {};
|
||||||
|
|
||||||
};
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
turnToWindow(url: any) {
|
turnToWindow(url: any) {
|
||||||
@@ -442,7 +558,8 @@ export default defineComponent({
|
|||||||
display: flex;
|
display: flex;
|
||||||
border-radius: 3rem;
|
border-radius: 3rem;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
> .left,> .right{
|
> .left,
|
||||||
|
> .right {
|
||||||
> .title {
|
> .title {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 3.2rem;
|
font-size: 3.2rem;
|
||||||
@@ -451,9 +568,9 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
> .info {
|
> .info {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
opacity: .6;
|
opacity: 0.6;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
margin-top: .8rem;
|
margin-top: 0.8rem;
|
||||||
font-size: 1.6rem;
|
font-size: 1.6rem;
|
||||||
}
|
}
|
||||||
> .content {
|
> .content {
|
||||||
@@ -468,10 +585,11 @@ export default defineComponent({
|
|||||||
color: #fff;
|
color: #fff;
|
||||||
padding: 4rem 3.2rem;
|
padding: 4rem 3.2rem;
|
||||||
> .title {
|
> .title {
|
||||||
opacity: .6;
|
opacity: 0.6;
|
||||||
}
|
}
|
||||||
> .content {
|
> .content {
|
||||||
> .benefits,> .benefitsItem{
|
> .benefits,
|
||||||
|
> .benefitsItem {
|
||||||
display: flex;
|
display: flex;
|
||||||
> .contrast {
|
> .contrast {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
@@ -483,7 +601,7 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
> div:nth-child(1) {
|
> div:nth-child(1) {
|
||||||
margin-right: 2.4rem;
|
margin-right: 2.4rem;
|
||||||
opacity: .5;
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
> div:nth-child(2) {
|
> div:nth-child(2) {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
@@ -494,7 +612,7 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
> .benefits {
|
> .benefits {
|
||||||
> div:nth-child(1) {
|
> div:nth-child(1) {
|
||||||
opacity: .5;
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-size: 2rem;
|
font-size: 2rem;
|
||||||
@@ -530,9 +648,9 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
> .info {
|
> .info {
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
margin-top: .4rem;
|
margin-top: 0.4rem;
|
||||||
font-size: 1.6rem;
|
font-size: 1.6rem;
|
||||||
opacity: .5;
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -559,7 +677,7 @@ export default defineComponent({
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
padding: .8rem 1.2rem;
|
padding: 0.8rem 1.2rem;
|
||||||
}
|
}
|
||||||
> .priceBox {
|
> .priceBox {
|
||||||
height: 11rem;
|
height: 11rem;
|
||||||
@@ -567,21 +685,23 @@ export default defineComponent({
|
|||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
> .left,> .right{
|
> .left,
|
||||||
|
> .right {
|
||||||
p {
|
p {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
> .discountsPrice ,> .price{
|
> .discountsPrice,
|
||||||
|
> .price {
|
||||||
font-size: 1.8rem;
|
font-size: 1.8rem;
|
||||||
margin-top: .4rem;
|
margin-top: 0.4rem;
|
||||||
opacity: .4;
|
opacity: 0.4;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
> .left {
|
> .left {
|
||||||
> p:nth-child(1) {
|
> p:nth-child(1) {
|
||||||
font-size: 2rem;
|
font-size: 2rem;
|
||||||
opacity: .7;
|
opacity: 0.7;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -679,7 +799,7 @@ export default defineComponent({
|
|||||||
display: flex;
|
display: flex;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
input {
|
input {
|
||||||
margin-right: .5rem;
|
margin-right: 0.5rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -707,7 +827,7 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.animation {
|
&.animation {
|
||||||
animation: shake .3s linear;
|
animation: shake 0.3s linear;
|
||||||
@keyframes shake {
|
@keyframes shake {
|
||||||
0% {
|
0% {
|
||||||
transform: translateX(0px);
|
transform: translateX(0px);
|
||||||
@@ -774,7 +894,8 @@ export default defineComponent({
|
|||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mark_loading_btn,.mark_loading_btn2{
|
.mark_loading_btn,
|
||||||
|
.mark_loading_btn2 {
|
||||||
// border: #000;
|
// border: #000;
|
||||||
// color: #fff;
|
// color: #fff;
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -784,7 +905,7 @@ export default defineComponent({
|
|||||||
padding: 0 20px;
|
padding: 0 20px;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
padding: .3rem 4rem;
|
padding: 0.3rem 4rem;
|
||||||
background: #39215b;
|
background: #39215b;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
border: none;
|
border: none;
|
||||||
@@ -798,5 +919,4 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
@@ -8,13 +8,13 @@
|
|||||||
<!-- v-show="loginType == 'username'" -->
|
<!-- v-show="loginType == 'username'" -->
|
||||||
<div>
|
<div>
|
||||||
<div class="login_form_content" :state="emailStap">
|
<div class="login_form_content" :state="emailStap">
|
||||||
|
|
||||||
<div v-show="emailStap === 1">
|
<div v-show="emailStap === 1">
|
||||||
<div class="login_form_title marign_top30">
|
<div class="login_form_title marign_top30">Enterprise</div>
|
||||||
Enterprise
|
|
||||||
</div>
|
|
||||||
<div class="generalModel_state">
|
<div class="generalModel_state">
|
||||||
<div class="generalModel_state_item" style="width: 100%; margin: 0;">
|
<div
|
||||||
|
class="generalModel_state_item"
|
||||||
|
style="width: 100%; margin: 0"
|
||||||
|
>
|
||||||
<a-select
|
<a-select
|
||||||
placeholder="Select a school"
|
placeholder="Select a school"
|
||||||
v-model:value="selectEnterprise"
|
v-model:value="selectEnterprise"
|
||||||
@@ -36,9 +36,7 @@
|
|||||||
</a-select>
|
</a-select>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="login_form_title marign_top30">
|
<div class="login_form_title marign_top30">Email</div>
|
||||||
Email
|
|
||||||
</div>
|
|
||||||
<input
|
<input
|
||||||
class="login_form_input"
|
class="login_form_input"
|
||||||
placeholder="Enter your email address"
|
placeholder="Enter your email address"
|
||||||
@@ -63,21 +61,16 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<!-- 邮箱登录 start -->
|
<!-- 邮箱登录 start -->
|
||||||
<div
|
<div
|
||||||
v-show="emailStap === 2"
|
v-show="emailStap === 2"
|
||||||
class="login_form_email"
|
class="login_form_email"
|
||||||
:class="{ active: emailStap === 2 }"
|
:class="{ active: emailStap === 2 }"
|
||||||
>
|
>
|
||||||
<div
|
<div v-show="emailStap === 2" class="email_last_step">
|
||||||
v-show="emailStap === 2"
|
|
||||||
class="email_last_step"
|
|
||||||
>
|
|
||||||
<div class="email_last_step_block">
|
<div class="email_last_step_block">
|
||||||
<span class="email_last_step_content"
|
<span class="email_last_step_content"
|
||||||
>Verify with one-time verification
|
>Verify with one-time verification code</span
|
||||||
code</span
|
|
||||||
>
|
>
|
||||||
<i
|
<i
|
||||||
class="fi fi-br-cross email_last_step_block_icon"
|
class="fi fi-br-cross email_last_step_block_icon"
|
||||||
@@ -86,34 +79,23 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="email_last_step_bottom">
|
<div class="email_last_step_bottom">
|
||||||
<div class="email_last_step_des">
|
<div class="email_last_step_des">
|
||||||
<div class="sent_email_content">
|
<div class="sent_email_content">Sent to {{ email }}</div>
|
||||||
Sent to {{ email }}
|
|
||||||
</div>
|
|
||||||
<div class="tip_content">
|
<div class="tip_content">
|
||||||
<span v-show="time"
|
<span v-show="time">{{ time }}s</span>
|
||||||
>{{ time }}s</span
|
<span v-show="!time" @click="emailNextStepFun()"
|
||||||
>
|
|
||||||
<span
|
|
||||||
v-show="!time"
|
|
||||||
@click="emailNextStepFun()"
|
|
||||||
>Resend</span
|
>Resend</span
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<VerificationCodeInput
|
<VerificationCodeInput
|
||||||
:ct="emailCode"
|
:ct="emailCode"
|
||||||
@sendCaptcha="
|
@sendCaptcha="submitEmailLogin($event)"
|
||||||
submitEmailLogin($event)
|
|
||||||
"
|
|
||||||
></VerificationCodeInput>
|
></VerificationCodeInput>
|
||||||
|
|
||||||
<div class="email_last_step_des">
|
<div class="email_last_step_des">
|
||||||
<div
|
<div class="sent_email_content email_tip_content">
|
||||||
class="sent_email_content email_tip_content"
|
Please check the junk box if you haven't received
|
||||||
>
|
verification code
|
||||||
Please check the junk box if you
|
|
||||||
haven't received verification
|
|
||||||
code
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -123,15 +105,8 @@
|
|||||||
|
|
||||||
<div class="login_form_title marign_top30">
|
<div class="login_form_title marign_top30">
|
||||||
<label :class="{ active: emailStap == 2 }">
|
<label :class="{ active: emailStap == 2 }">
|
||||||
<input
|
<input :state="emailStap" type="checkbox" v-model="checked" />
|
||||||
:state="emailStap"
|
<span>I agree to all Term, Privacy Policy and Fees</span>
|
||||||
type="checkbox"
|
|
||||||
v-model="checked"
|
|
||||||
/>
|
|
||||||
<span
|
|
||||||
>I agree to all Term, Privacy Policy and
|
|
||||||
Fees</span
|
|
||||||
>
|
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<!-- <div class="thirdPartyLogin marign_top30">
|
<!-- <div class="thirdPartyLogin marign_top30">
|
||||||
@@ -165,7 +140,6 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 邮箱登录 end -->
|
<!-- 邮箱登录 end -->
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 忘记密码 start -->
|
<!-- 忘记密码 start -->
|
||||||
@@ -175,9 +149,7 @@
|
|||||||
@click="forgetPasswordLastStepFun()"
|
@click="forgetPasswordLastStepFun()"
|
||||||
>
|
>
|
||||||
<i class="fi fi-br-arrow-left"></i>
|
<i class="fi fi-br-arrow-left"></i>
|
||||||
<span class="forget_password_content_title"
|
<span class="forget_password_content_title">Retrieve password</span>
|
||||||
>Retrieve password</span
|
|
||||||
>
|
|
||||||
</div>
|
</div>
|
||||||
<div v-show="frogetPasswordStep === 1">
|
<div v-show="frogetPasswordStep === 1">
|
||||||
<div class="forget_passored_form_content">
|
<div class="forget_passored_form_content">
|
||||||
@@ -205,9 +177,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="tip_content">
|
<div class="tip_content">
|
||||||
<span v-show="time">{{ time }}s</span>
|
<span v-show="time">{{ time }}s</span>
|
||||||
<span
|
<span v-show="!time" @click="forgetPasswordNextStepFun()"
|
||||||
v-show="!time"
|
|
||||||
@click="forgetPasswordNextStepFun()"
|
|
||||||
>Resend</span
|
>Resend</span
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
@@ -257,42 +227,47 @@ import phoneLogin from "@/component/LoginPage/phoneLogin.vue";
|
|||||||
import { useStore } from "vuex";
|
import { useStore } from "vuex";
|
||||||
import { useI18n } from "vue-i18n";
|
import { useI18n } from "vue-i18n";
|
||||||
import { setLang } from "@/tool/guide";
|
import { setLang } from "@/tool/guide";
|
||||||
const md5 = require("md5");
|
import md5 from "md5";
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
components: {
|
components: {
|
||||||
VerificationCodeInput,googleLogin,weiXinLogin,phoneLogin
|
VerificationCodeInput,
|
||||||
|
googleLogin,
|
||||||
|
weiXinLogin,
|
||||||
|
phoneLogin,
|
||||||
},
|
},
|
||||||
setup() {
|
setup() {
|
||||||
let timer: any = 0;
|
let timer: any = 0;
|
||||||
const { locale } = useI18n();
|
const { locale } = useI18n();
|
||||||
const store = useStore();
|
const store = useStore();
|
||||||
let loadingShow = ref(false)
|
let loadingShow = ref(false);
|
||||||
const data = reactive({
|
const data = reactive({
|
||||||
selectEnterprise:'',
|
selectEnterprise: "",
|
||||||
schoolList: [] as any,
|
schoolList: [] as any,
|
||||||
})
|
});
|
||||||
const schoolListChange = (e:any)=>{
|
const schoolListChange = (e: any) => {};
|
||||||
}
|
|
||||||
const filterOption = (e: any) => {
|
const filterOption = (e: any) => {
|
||||||
let params = {
|
let params = {
|
||||||
name: e,
|
name: e,
|
||||||
type:'Enterprise'
|
type: "Enterprise",
|
||||||
}
|
};
|
||||||
Https.axiosPost(Https.httpUrls.organizationNameSearch,{},{params:params}).then((rv:any)=>{
|
Https.axiosPost(
|
||||||
|
Https.httpUrls.organizationNameSearch,
|
||||||
|
{},
|
||||||
|
{ params: params }
|
||||||
|
).then((rv: any) => {
|
||||||
data.schoolList = rv.map((item: any) => {
|
data.schoolList = rv.map((item: any) => {
|
||||||
return {
|
return {
|
||||||
label: item,
|
label: item,
|
||||||
value: item,
|
value: item,
|
||||||
}
|
};
|
||||||
})
|
});
|
||||||
})
|
});
|
||||||
|
};
|
||||||
}
|
|
||||||
const handleFocus = () => {
|
const handleFocus = () => {
|
||||||
if (data.schoolList.length == 0) {
|
if (data.schoolList.length == 0) {
|
||||||
filterOption('')
|
filterOption("");
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
};
|
||||||
return {
|
return {
|
||||||
...toRefs(data),
|
...toRefs(data),
|
||||||
store,
|
store,
|
||||||
@@ -300,7 +275,8 @@ export default defineComponent({
|
|||||||
locale,
|
locale,
|
||||||
loadingShow,
|
loadingShow,
|
||||||
schoolListChange,
|
schoolListChange,
|
||||||
filterOption,handleFocus
|
filterOption,
|
||||||
|
handleFocus,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
@@ -312,8 +288,8 @@ export default defineComponent({
|
|||||||
emailCode: ["", "", "", "", "", ""], //邮箱验证码
|
emailCode: ["", "", "", "", "", ""], //邮箱验证码
|
||||||
emailNextStep: true,
|
emailNextStep: true,
|
||||||
username: "",
|
username: "",
|
||||||
password: localStorage.getItem("loginPassword") || '',
|
password: localStorage.getItem("loginPassword") || "",
|
||||||
email: localStorage.getItem("loginEmail") || '', //邮箱登录邮箱
|
email: localStorage.getItem("loginEmail") || "", //邮箱登录邮箱
|
||||||
frogetPasswordStep: 1, //忘记密码的步骤
|
frogetPasswordStep: 1, //忘记密码的步骤
|
||||||
forgetPasswordEmail: "",
|
forgetPasswordEmail: "",
|
||||||
forgetEmailCode: ["", "", "", "", "", ""], //忘记密码的邮箱验证码
|
forgetEmailCode: ["", "", "", "", "", ""], //忘记密码的邮箱验证码
|
||||||
@@ -358,16 +334,14 @@ export default defineComponent({
|
|||||||
email: this.email,
|
email: this.email,
|
||||||
operationType: "LOGIN",
|
operationType: "LOGIN",
|
||||||
};
|
};
|
||||||
Https.axiosPost(Https.httpUrls.accountSendEmail, data).then(
|
Https.axiosPost(Https.httpUrls.accountSendEmail, data).then((rv: any) => {
|
||||||
(rv: any) => {
|
|
||||||
if (rv) {
|
if (rv) {
|
||||||
this.emailStap = 2;
|
this.emailStap = 2;
|
||||||
this.time = 60;
|
this.time = 60;
|
||||||
this.emailCode = ["", "", "", "", "", ""];
|
this.emailCode = ["", "", "", "", "", ""];
|
||||||
this.createTimer();
|
this.createTimer();
|
||||||
}
|
}
|
||||||
}
|
});
|
||||||
);
|
|
||||||
},
|
},
|
||||||
|
|
||||||
//邮箱登录的上一步
|
//邮箱登录的上一步
|
||||||
@@ -390,15 +364,12 @@ export default defineComponent({
|
|||||||
email: this.forgetPasswordEmail,
|
email: this.forgetPasswordEmail,
|
||||||
operationType: "FORGET_PWD",
|
operationType: "FORGET_PWD",
|
||||||
};
|
};
|
||||||
Https.axiosPost(Https.httpUrls.accountSendEmail, data).then(
|
Https.axiosPost(Https.httpUrls.accountSendEmail, data).then((rv: any) => {
|
||||||
(rv: any) => {
|
|
||||||
if (rv) {
|
if (rv) {
|
||||||
this.frogetPasswordStep = 2;
|
this.frogetPasswordStep = 2;
|
||||||
(this.forgetEmailCode = ["", "", "", "", "", ""]),
|
(this.forgetEmailCode = ["", "", "", "", "", ""]), this.createTimer();
|
||||||
this.createTimer();
|
|
||||||
}
|
}
|
||||||
}
|
});
|
||||||
);
|
|
||||||
},
|
},
|
||||||
//忘记密码的上一步
|
//忘记密码的上一步
|
||||||
forgetPasswordLastStepFun() {
|
forgetPasswordLastStepFun() {
|
||||||
@@ -407,8 +378,7 @@ export default defineComponent({
|
|||||||
} else {
|
} else {
|
||||||
this.frogetPasswordStep = this.frogetPasswordStep - 1;
|
this.frogetPasswordStep = this.frogetPasswordStep - 1;
|
||||||
this.forgetPasswordEmail = "";
|
this.forgetPasswordEmail = "";
|
||||||
(this.forgetEmailCode = ["", "", "", "", "", ""]),
|
(this.forgetEmailCode = ["", "", "", "", "", ""]), this.clearTimer();
|
||||||
this.clearTimer();
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
@@ -421,15 +391,13 @@ export default defineComponent({
|
|||||||
password: "",
|
password: "",
|
||||||
verifyEmail: true,
|
verifyEmail: true,
|
||||||
};
|
};
|
||||||
Https.axiosPost(Https.httpUrls.accountResetPwd, data).then(
|
Https.axiosPost(Https.httpUrls.accountResetPwd, data).then((rv: any) => {
|
||||||
(rv: any) => {
|
|
||||||
if (rv) {
|
if (rv) {
|
||||||
this.forgetEmailValue = emailVerifyCode;
|
this.forgetEmailValue = emailVerifyCode;
|
||||||
this.frogetPasswordStep = 3;
|
this.frogetPasswordStep = 3;
|
||||||
this.clearTimer();
|
this.clearTimer();
|
||||||
}
|
}
|
||||||
}
|
});
|
||||||
);
|
|
||||||
},
|
},
|
||||||
|
|
||||||
//改变勾选是否是机器人
|
//改变勾选是否是机器人
|
||||||
@@ -444,9 +412,7 @@ export default defineComponent({
|
|||||||
return;
|
return;
|
||||||
} else {
|
} else {
|
||||||
if (!this.password) {
|
if (!this.password) {
|
||||||
message.info(
|
message.info("Please enter your account number or password");
|
||||||
"Please enter your account number or password"
|
|
||||||
);
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
//输入邮箱
|
//输入邮箱
|
||||||
@@ -465,14 +431,12 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
//判断是否同意隐私政策
|
//判断是否同意隐私政策
|
||||||
if (!this.checked) {
|
if (!this.checked) {
|
||||||
message.info(
|
message.info("Agree to all terms, privacy fees and policies");
|
||||||
"Agree to all terms, privacy fees and policies"
|
|
||||||
);
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
let data = {
|
let data = {
|
||||||
password: md5(this.password + "abc"),
|
password: md5(this.password + "abc"),
|
||||||
userName: 'a',
|
userName: "a",
|
||||||
// userName: this.username,
|
// userName: this.username,
|
||||||
organizationName: this.selectEnterprise,
|
organizationName: this.selectEnterprise,
|
||||||
email: this.email,
|
email: this.email,
|
||||||
@@ -484,7 +448,7 @@ export default defineComponent({
|
|||||||
Https.axiosPost(Https.httpUrls.enterpriseLogin, data)
|
Https.axiosPost(Https.httpUrls.enterpriseLogin, data)
|
||||||
.then((rv: any) => {
|
.then((rv: any) => {
|
||||||
if (rv) {
|
if (rv) {
|
||||||
this.clearTimer()
|
this.clearTimer();
|
||||||
this.time = 60;
|
this.time = 60;
|
||||||
this.emailStap = 2;
|
this.emailStap = 2;
|
||||||
this.emailCode = ["", "", "", "", "", ""];
|
this.emailCode = ["", "", "", "", "", ""];
|
||||||
@@ -495,8 +459,7 @@ export default defineComponent({
|
|||||||
localStorage.setItem("loginPassword", this.password);
|
localStorage.setItem("loginPassword", this.password);
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.catch((res) => {
|
.catch((res) => {});
|
||||||
});
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
this.loginTime = true;
|
this.loginTime = true;
|
||||||
}, 2000);
|
}, 2000);
|
||||||
@@ -516,39 +479,39 @@ export default defineComponent({
|
|||||||
emailVerifyCode: emailVerifyCode,
|
emailVerifyCode: emailVerifyCode,
|
||||||
loginType: "EMAIL",
|
loginType: "EMAIL",
|
||||||
userId: this.userId,
|
userId: this.userId,
|
||||||
organizationName:this.selectEnterprise
|
organizationName: this.selectEnterprise,
|
||||||
};
|
};
|
||||||
Https.axiosPost(Https.httpUrls.accountLogin, data)
|
Https.axiosPost(Https.httpUrls.accountLogin, data)
|
||||||
.then((rv: any) => {
|
.then((rv: any) => {
|
||||||
this.setSuccessLogin(rv)
|
this.setSuccessLogin(rv);
|
||||||
})
|
})
|
||||||
.catch((res) => {});
|
.catch((res) => {});
|
||||||
},
|
},
|
||||||
isCheckAgreement() {
|
isCheckAgreement() {
|
||||||
message.info(
|
message.info("Agree to all terms, privacy fees and policies");
|
||||||
"Agree to all terms, privacy fees and policies"
|
|
||||||
);
|
|
||||||
},
|
},
|
||||||
//微信登录
|
//微信登录
|
||||||
wechatLogin(value: any) {
|
wechatLogin(value: any) {
|
||||||
let data = {
|
let data = {
|
||||||
code: value.code,
|
code: value.code,
|
||||||
type:2
|
type: 2,
|
||||||
}
|
};
|
||||||
this.loadingShow = true
|
this.loadingShow = true;
|
||||||
Https.axiosGet(Https.httpUrls.parseWeChatCode, { params: data })
|
Https.axiosGet(Https.httpUrls.parseWeChatCode, { params: data })
|
||||||
.then((rv: any) => {
|
.then((rv: any) => {
|
||||||
this.loadingShow = false
|
this.loadingShow = false;
|
||||||
this.setSuccessLogin(rv)
|
this.setSuccessLogin(rv);
|
||||||
})
|
})
|
||||||
.catch((res) => {this.loadingShow = false});
|
.catch((res) => {
|
||||||
|
this.loadingShow = false;
|
||||||
|
});
|
||||||
},
|
},
|
||||||
//谷歌登录
|
//谷歌登录
|
||||||
googelLogin(value: any) {
|
googelLogin(value: any) {
|
||||||
let data = {credential : value,type:2}
|
let data = { credential: value, type: 2 };
|
||||||
Https.axiosGet(Https.httpUrls.parseGoogleCredential, { params: data })
|
Https.axiosGet(Https.httpUrls.parseGoogleCredential, { params: data })
|
||||||
.then((rv: any) => {
|
.then((rv: any) => {
|
||||||
this.setSuccessLogin(rv)
|
this.setSuccessLogin(rv);
|
||||||
})
|
})
|
||||||
.catch((res) => {});
|
.catch((res) => {});
|
||||||
},
|
},
|
||||||
@@ -571,8 +534,8 @@ export default defineComponent({
|
|||||||
let userid: any = {
|
let userid: any = {
|
||||||
ueserId: rv.userId,
|
ueserId: rv.userId,
|
||||||
systemUser: rv.systemUser,
|
systemUser: rv.systemUser,
|
||||||
}
|
};
|
||||||
if(rv.email)userid.email = rv.email
|
if (rv.email) userid.email = rv.email;
|
||||||
this.store.commit("upUserDetail", userid);
|
this.store.commit("upUserDetail", userid);
|
||||||
|
|
||||||
if (window.innerWidth < 768) {
|
if (window.innerWidth < 768) {
|
||||||
@@ -583,13 +546,9 @@ export default defineComponent({
|
|||||||
} else {
|
} else {
|
||||||
this.turnToHomePage("/home");
|
this.turnToHomePage("/home");
|
||||||
}
|
}
|
||||||
sessionStorage.setItem(
|
sessionStorage.setItem("isTimeOne", JSON.stringify(false)); //是否需要公告 提示 弹窗
|
||||||
"isTimeOne",
|
|
||||||
JSON.stringify(false)
|
|
||||||
); //是否需要公告 提示 弹窗
|
|
||||||
let randomNum: any =
|
let randomNum: any =
|
||||||
Math.floor(Math.random() * 9000000000000000) +
|
Math.floor(Math.random() * 9000000000000000) + 1000000000000000;
|
||||||
1000000000000000;
|
|
||||||
sessionStorage.setItem("sessionId", randomNum);
|
sessionStorage.setItem("sessionId", randomNum);
|
||||||
sessionStorage.setItem("record", JSON.stringify([]));
|
sessionStorage.setItem("record", JSON.stringify([]));
|
||||||
}
|
}
|
||||||
@@ -602,14 +561,12 @@ export default defineComponent({
|
|||||||
password: md5(this.newPassword + "abc"),
|
password: md5(this.newPassword + "abc"),
|
||||||
verifyEmail: false,
|
verifyEmail: false,
|
||||||
};
|
};
|
||||||
Https.axiosPost(Https.httpUrls.accountResetPwd, data).then(
|
Https.axiosPost(Https.httpUrls.accountResetPwd, data).then((rv: any) => {
|
||||||
(rv: any) => {
|
|
||||||
if (rv) {
|
if (rv) {
|
||||||
message.success("Changing the password successfully");
|
message.success("Changing the password successfully");
|
||||||
this.changeIsLogin(1);
|
this.changeIsLogin(1);
|
||||||
}
|
}
|
||||||
}
|
});
|
||||||
);
|
|
||||||
},
|
},
|
||||||
|
|
||||||
//创建定时器
|
//创建定时器
|
||||||
@@ -655,9 +612,9 @@ export default defineComponent({
|
|||||||
// },
|
// },
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
const data = this.$route.query
|
const data = this.$route.query;
|
||||||
if(data?.state == 'weiXin'){
|
if (data?.state == "weiXin") {
|
||||||
this.wechatLogin(data)
|
this.wechatLogin(data);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
@@ -778,7 +735,7 @@ export default defineComponent({
|
|||||||
font-size: 1.4rem;
|
font-size: 1.4rem;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
outline: none;
|
outline: none;
|
||||||
transition: all .3s;
|
transition: all 0.3s;
|
||||||
&:hover {
|
&:hover {
|
||||||
border: 0.1rem solid #000;
|
border: 0.1rem solid #000;
|
||||||
}
|
}
|
||||||
@@ -832,9 +789,9 @@ export default defineComponent({
|
|||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: all .3s;
|
transition: all 0.3s;
|
||||||
&:hover {
|
&:hover {
|
||||||
background: #3C3C3C;
|
background: #3c3c3c;
|
||||||
}
|
}
|
||||||
&[state="2"] {
|
&[state="2"] {
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
|
|||||||
@@ -4,7 +4,6 @@
|
|||||||
<!-- 账号密码和邮箱登录 start-->
|
<!-- 账号密码和邮箱登录 start-->
|
||||||
<div class="login_content" v-if="isLogin === 1">
|
<div class="login_content" v-if="isLogin === 1">
|
||||||
<div class="login_content_left">
|
<div class="login_content_left">
|
||||||
|
|
||||||
<!-- v-show="loginType == 'username'" -->
|
<!-- v-show="loginType == 'username'" -->
|
||||||
<div>
|
<div>
|
||||||
<div class="login_form_content" :state="emailStap">
|
<div class="login_form_content" :state="emailStap">
|
||||||
@@ -15,9 +14,7 @@
|
|||||||
v-model="username"
|
v-model="username"
|
||||||
/> -->
|
/> -->
|
||||||
<div v-show="emailStap === 1">
|
<div v-show="emailStap === 1">
|
||||||
<div class="login_form_title marign_top30">
|
<div class="login_form_title marign_top30">Email</div>
|
||||||
Email
|
|
||||||
</div>
|
|
||||||
<input
|
<input
|
||||||
class="login_form_input"
|
class="login_form_input"
|
||||||
placeholder="Enter your email address"
|
placeholder="Enter your email address"
|
||||||
@@ -42,21 +39,16 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<!-- 邮箱登录 start -->
|
<!-- 邮箱登录 start -->
|
||||||
<div
|
<div
|
||||||
v-show="emailStap === 2"
|
v-show="emailStap === 2"
|
||||||
class="login_form_email"
|
class="login_form_email"
|
||||||
:class="{ active: emailStap === 2 }"
|
:class="{ active: emailStap === 2 }"
|
||||||
>
|
>
|
||||||
<div
|
<div v-show="emailStap === 2" class="email_last_step">
|
||||||
v-show="emailStap === 2"
|
|
||||||
class="email_last_step"
|
|
||||||
>
|
|
||||||
<div class="email_last_step_block">
|
<div class="email_last_step_block">
|
||||||
<span class="email_last_step_content"
|
<span class="email_last_step_content"
|
||||||
>Verify with one-time verification
|
>Verify with one-time verification code</span
|
||||||
code</span
|
|
||||||
>
|
>
|
||||||
<i
|
<i
|
||||||
class="fi fi-br-cross email_last_step_block_icon"
|
class="fi fi-br-cross email_last_step_block_icon"
|
||||||
@@ -65,34 +57,23 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="email_last_step_bottom">
|
<div class="email_last_step_bottom">
|
||||||
<div class="email_last_step_des">
|
<div class="email_last_step_des">
|
||||||
<div class="sent_email_content">
|
<div class="sent_email_content">Sent to {{ email }}</div>
|
||||||
Sent to {{ email }}
|
|
||||||
</div>
|
|
||||||
<div class="tip_content">
|
<div class="tip_content">
|
||||||
<span v-show="time"
|
<span v-show="time">{{ time }}s</span>
|
||||||
>{{ time }}s</span
|
<span v-show="!time" @click="emailNextStepFun()"
|
||||||
>
|
|
||||||
<span
|
|
||||||
v-show="!time"
|
|
||||||
@click="emailNextStepFun()"
|
|
||||||
>Resend</span
|
>Resend</span
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<VerificationCodeInput
|
<VerificationCodeInput
|
||||||
:ct="emailCode"
|
:ct="emailCode"
|
||||||
@sendCaptcha="
|
@sendCaptcha="submitEmailLogin($event)"
|
||||||
submitEmailLogin($event)
|
|
||||||
"
|
|
||||||
></VerificationCodeInput>
|
></VerificationCodeInput>
|
||||||
|
|
||||||
<div class="email_last_step_des">
|
<div class="email_last_step_des">
|
||||||
<div
|
<div class="sent_email_content email_tip_content">
|
||||||
class="sent_email_content email_tip_content"
|
Please check the junk box if you haven't received
|
||||||
>
|
verification code
|
||||||
Please check the junk box if you
|
|
||||||
haven't received verification
|
|
||||||
code
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -102,24 +83,25 @@
|
|||||||
|
|
||||||
<div class="login_form_title marign_top30">
|
<div class="login_form_title marign_top30">
|
||||||
<label :class="{ active: emailStap == 2 }">
|
<label :class="{ active: emailStap == 2 }">
|
||||||
<input
|
<input :state="emailStap" type="checkbox" v-model="checked" />
|
||||||
:state="emailStap"
|
<span>I agree to all Term, Privacy Policy and Fees</span>
|
||||||
type="checkbox"
|
|
||||||
v-model="checked"
|
|
||||||
/>
|
|
||||||
<span
|
|
||||||
>I agree to all Term, Privacy Policy and
|
|
||||||
Fees</span
|
|
||||||
>
|
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="thirdPartyLogin marign_top30">
|
<div class="thirdPartyLogin marign_top30">
|
||||||
<div class="label">
|
<div class="label">
|
||||||
<div class="mask" v-show="!checked" @click="isCheckAgreement"></div>
|
<div
|
||||||
|
class="mask"
|
||||||
|
v-show="!checked"
|
||||||
|
@click="isCheckAgreement"
|
||||||
|
></div>
|
||||||
<googleLogin @googelLogin="googelLogin"></googleLogin>
|
<googleLogin @googelLogin="googelLogin"></googleLogin>
|
||||||
</div>
|
</div>
|
||||||
<div class="label">
|
<div class="label">
|
||||||
<div class="mask" v-show="!checked" @click="isCheckAgreement"></div>
|
<div
|
||||||
|
class="mask"
|
||||||
|
v-show="!checked"
|
||||||
|
@click="isCheckAgreement"
|
||||||
|
></div>
|
||||||
<weiXinLogin></weiXinLogin>
|
<weiXinLogin></weiXinLogin>
|
||||||
</div>
|
</div>
|
||||||
<!-- <phoneLogin></phoneLogin> -->
|
<!-- <phoneLogin></phoneLogin> -->
|
||||||
@@ -133,10 +115,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="login_text">
|
<div class="login_text">
|
||||||
<div
|
<div class="forget_password_text" @click="changeIsLogin(2)">
|
||||||
class="forget_password_text"
|
|
||||||
@click="changeIsLogin(2)"
|
|
||||||
>
|
|
||||||
Forgot your password
|
Forgot your password
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -156,9 +135,7 @@
|
|||||||
<!-- <span class="icon iconfont fi-br-arrow-left"></span
|
<!-- <span class="icon iconfont fi-br-arrow-left"></span
|
||||||
> -->
|
> -->
|
||||||
<i class="fi fi-br-arrow-left"></i>
|
<i class="fi fi-br-arrow-left"></i>
|
||||||
<span class="forget_password_content_title"
|
<span class="forget_password_content_title">Retrieve password</span>
|
||||||
>Retrieve password</span
|
|
||||||
>
|
|
||||||
</div>
|
</div>
|
||||||
<div v-show="frogetPasswordStep === 1">
|
<div v-show="frogetPasswordStep === 1">
|
||||||
<div class="forget_passored_form_content">
|
<div class="forget_passored_form_content">
|
||||||
@@ -186,9 +163,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="tip_content">
|
<div class="tip_content">
|
||||||
<span v-show="time">{{ time }}s</span>
|
<span v-show="time">{{ time }}s</span>
|
||||||
<span
|
<span v-show="!time" @click="forgetPasswordNextStepFun()"
|
||||||
v-show="!time"
|
|
||||||
@click="forgetPasswordNextStepFun()"
|
|
||||||
>Resend</span
|
>Resend</span
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
@@ -220,8 +195,6 @@
|
|||||||
<!-- 忘记密码 end -->
|
<!-- 忘记密码 end -->
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- <div class="login_footer">
|
<!-- <div class="login_footer">
|
||||||
<div class="login_footer_item">
|
<div class="login_footer_item">
|
||||||
<div class="login_footer_item_text">
|
<div class="login_footer_item_text">
|
||||||
@@ -271,16 +244,19 @@ import phoneLogin from "@/component/LoginPage/phoneLogin.vue";
|
|||||||
import { useStore } from "vuex";
|
import { useStore } from "vuex";
|
||||||
import { useI18n } from "vue-i18n";
|
import { useI18n } from "vue-i18n";
|
||||||
import { setLang } from "@/tool/guide";
|
import { setLang } from "@/tool/guide";
|
||||||
const md5 = require("md5");
|
import md5 from "md5";
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
components: {
|
components: {
|
||||||
VerificationCodeInput,googleLogin,weiXinLogin,phoneLogin
|
VerificationCodeInput,
|
||||||
|
googleLogin,
|
||||||
|
weiXinLogin,
|
||||||
|
phoneLogin,
|
||||||
},
|
},
|
||||||
setup() {
|
setup() {
|
||||||
let timer: any = 0;
|
let timer: any = 0;
|
||||||
const { locale } = useI18n();
|
const { locale } = useI18n();
|
||||||
const store = useStore();
|
const store = useStore();
|
||||||
let loadingShow = ref(false)
|
let loadingShow = ref(false);
|
||||||
return {
|
return {
|
||||||
store,
|
store,
|
||||||
timer,
|
timer,
|
||||||
@@ -297,8 +273,8 @@ export default defineComponent({
|
|||||||
emailCode: ["", "", "", "", "", ""], //邮箱验证码
|
emailCode: ["", "", "", "", "", ""], //邮箱验证码
|
||||||
emailNextStep: true,
|
emailNextStep: true,
|
||||||
username: "",
|
username: "",
|
||||||
password: localStorage.getItem("loginPassword") || '',
|
password: localStorage.getItem("loginPassword") || "",
|
||||||
email: localStorage.getItem("loginEmail") || '', //邮箱登录邮箱
|
email: localStorage.getItem("loginEmail") || "", //邮箱登录邮箱
|
||||||
frogetPasswordStep: 1, //忘记密码的步骤
|
frogetPasswordStep: 1, //忘记密码的步骤
|
||||||
forgetPasswordEmail: "",
|
forgetPasswordEmail: "",
|
||||||
forgetEmailCode: ["", "", "", "", "", ""], //忘记密码的邮箱验证码
|
forgetEmailCode: ["", "", "", "", "", ""], //忘记密码的邮箱验证码
|
||||||
@@ -343,16 +319,14 @@ export default defineComponent({
|
|||||||
email: this.email,
|
email: this.email,
|
||||||
operationType: "LOGIN",
|
operationType: "LOGIN",
|
||||||
};
|
};
|
||||||
Https.axiosPost(Https.httpUrls.accountSendEmail, data).then(
|
Https.axiosPost(Https.httpUrls.accountSendEmail, data).then((rv: any) => {
|
||||||
(rv: any) => {
|
|
||||||
if (rv) {
|
if (rv) {
|
||||||
this.emailStap = 2;
|
this.emailStap = 2;
|
||||||
this.time = 60;
|
this.time = 60;
|
||||||
this.emailCode = ["", "", "", "", "", ""];
|
this.emailCode = ["", "", "", "", "", ""];
|
||||||
this.createTimer();
|
this.createTimer();
|
||||||
}
|
}
|
||||||
}
|
});
|
||||||
);
|
|
||||||
},
|
},
|
||||||
|
|
||||||
//邮箱登录的上一步
|
//邮箱登录的上一步
|
||||||
@@ -375,15 +349,12 @@ export default defineComponent({
|
|||||||
email: this.forgetPasswordEmail,
|
email: this.forgetPasswordEmail,
|
||||||
operationType: "FORGET_PWD",
|
operationType: "FORGET_PWD",
|
||||||
};
|
};
|
||||||
Https.axiosPost(Https.httpUrls.accountSendEmail, data).then(
|
Https.axiosPost(Https.httpUrls.accountSendEmail, data).then((rv: any) => {
|
||||||
(rv: any) => {
|
|
||||||
if (rv) {
|
if (rv) {
|
||||||
this.frogetPasswordStep = 2;
|
this.frogetPasswordStep = 2;
|
||||||
(this.forgetEmailCode = ["", "", "", "", "", ""]),
|
(this.forgetEmailCode = ["", "", "", "", "", ""]), this.createTimer();
|
||||||
this.createTimer();
|
|
||||||
}
|
}
|
||||||
}
|
});
|
||||||
);
|
|
||||||
},
|
},
|
||||||
//忘记密码的上一步
|
//忘记密码的上一步
|
||||||
forgetPasswordLastStepFun() {
|
forgetPasswordLastStepFun() {
|
||||||
@@ -392,8 +363,7 @@ export default defineComponent({
|
|||||||
} else {
|
} else {
|
||||||
this.frogetPasswordStep = this.frogetPasswordStep - 1;
|
this.frogetPasswordStep = this.frogetPasswordStep - 1;
|
||||||
this.forgetPasswordEmail = "";
|
this.forgetPasswordEmail = "";
|
||||||
(this.forgetEmailCode = ["", "", "", "", "", ""]),
|
(this.forgetEmailCode = ["", "", "", "", "", ""]), this.clearTimer();
|
||||||
this.clearTimer();
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
@@ -406,15 +376,13 @@ export default defineComponent({
|
|||||||
password: "",
|
password: "",
|
||||||
verifyEmail: true,
|
verifyEmail: true,
|
||||||
};
|
};
|
||||||
Https.axiosPost(Https.httpUrls.accountResetPwd, data).then(
|
Https.axiosPost(Https.httpUrls.accountResetPwd, data).then((rv: any) => {
|
||||||
(rv: any) => {
|
|
||||||
if (rv) {
|
if (rv) {
|
||||||
this.forgetEmailValue = emailVerifyCode;
|
this.forgetEmailValue = emailVerifyCode;
|
||||||
this.frogetPasswordStep = 3;
|
this.frogetPasswordStep = 3;
|
||||||
this.clearTimer();
|
this.clearTimer();
|
||||||
}
|
}
|
||||||
}
|
});
|
||||||
);
|
|
||||||
},
|
},
|
||||||
|
|
||||||
//改变勾选是否是机器人
|
//改变勾选是否是机器人
|
||||||
@@ -429,9 +397,7 @@ export default defineComponent({
|
|||||||
return;
|
return;
|
||||||
} else {
|
} else {
|
||||||
if (!this.password) {
|
if (!this.password) {
|
||||||
message.info(
|
message.info("Please enter your account number or password");
|
||||||
"Please enter your account number or password"
|
|
||||||
);
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
//输入邮箱
|
//输入邮箱
|
||||||
@@ -446,14 +412,12 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
//判断是否同意隐私政策
|
//判断是否同意隐私政策
|
||||||
if (!this.checked) {
|
if (!this.checked) {
|
||||||
message.info(
|
message.info("Agree to all terms, privacy fees and policies");
|
||||||
"Agree to all terms, privacy fees and policies"
|
|
||||||
);
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
let data = {
|
let data = {
|
||||||
password: md5(this.password + "abc"),
|
password: md5(this.password + "abc"),
|
||||||
userName: 'a',
|
userName: "a",
|
||||||
// userName: this.username,
|
// userName: this.username,
|
||||||
email: this.email,
|
email: this.email,
|
||||||
operationType: "LOGIN",
|
operationType: "LOGIN",
|
||||||
@@ -469,7 +433,7 @@ export default defineComponent({
|
|||||||
// this.loginType = 'email'
|
// this.loginType = 'email'
|
||||||
// }
|
// }
|
||||||
if (rv) {
|
if (rv) {
|
||||||
this.clearTimer()
|
this.clearTimer();
|
||||||
this.time = 60;
|
this.time = 60;
|
||||||
this.emailStap = 2;
|
this.emailStap = 2;
|
||||||
this.emailCode = ["", "", "", "", "", ""];
|
this.emailCode = ["", "", "", "", "", ""];
|
||||||
@@ -482,8 +446,7 @@ export default defineComponent({
|
|||||||
localStorage.setItem("loginPassword", this.password);
|
localStorage.setItem("loginPassword", this.password);
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.catch((res) => {
|
.catch((res) => {});
|
||||||
});
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
this.loginTime = true;
|
this.loginTime = true;
|
||||||
}, 2000);
|
}, 2000);
|
||||||
@@ -506,35 +469,35 @@ export default defineComponent({
|
|||||||
};
|
};
|
||||||
Https.axiosPost(Https.httpUrls.accountLogin, data)
|
Https.axiosPost(Https.httpUrls.accountLogin, data)
|
||||||
.then((rv: any) => {
|
.then((rv: any) => {
|
||||||
this.setSuccessLogin(rv)
|
this.setSuccessLogin(rv);
|
||||||
})
|
})
|
||||||
.catch((res) => {});
|
.catch((res) => {});
|
||||||
},
|
},
|
||||||
isCheckAgreement() {
|
isCheckAgreement() {
|
||||||
message.info(
|
message.info("Agree to all terms, privacy fees and policies");
|
||||||
"Agree to all terms, privacy fees and policies"
|
|
||||||
);
|
|
||||||
},
|
},
|
||||||
//微信登录
|
//微信登录
|
||||||
wechatLogin(value: any) {
|
wechatLogin(value: any) {
|
||||||
let data = {
|
let data = {
|
||||||
code: value.code,
|
code: value.code,
|
||||||
type:2
|
type: 2,
|
||||||
}
|
};
|
||||||
this.loadingShow = true
|
this.loadingShow = true;
|
||||||
Https.axiosGet(Https.httpUrls.parseWeChatCode, { params: data })
|
Https.axiosGet(Https.httpUrls.parseWeChatCode, { params: data })
|
||||||
.then((rv: any) => {
|
.then((rv: any) => {
|
||||||
this.loadingShow = false
|
this.loadingShow = false;
|
||||||
this.setSuccessLogin(rv)
|
this.setSuccessLogin(rv);
|
||||||
})
|
})
|
||||||
.catch((res) => {this.loadingShow = false});
|
.catch((res) => {
|
||||||
|
this.loadingShow = false;
|
||||||
|
});
|
||||||
},
|
},
|
||||||
//谷歌登录
|
//谷歌登录
|
||||||
googelLogin(value: any) {
|
googelLogin(value: any) {
|
||||||
let data = {credential : value,type:2}
|
let data = { credential: value, type: 2 };
|
||||||
Https.axiosGet(Https.httpUrls.parseGoogleCredential, { params: data })
|
Https.axiosGet(Https.httpUrls.parseGoogleCredential, { params: data })
|
||||||
.then((rv: any) => {
|
.then((rv: any) => {
|
||||||
this.setSuccessLogin(rv)
|
this.setSuccessLogin(rv);
|
||||||
})
|
})
|
||||||
.catch((res) => {});
|
.catch((res) => {});
|
||||||
},
|
},
|
||||||
@@ -557,8 +520,8 @@ export default defineComponent({
|
|||||||
let userid: any = {
|
let userid: any = {
|
||||||
ueserId: rv.userId,
|
ueserId: rv.userId,
|
||||||
systemUser: rv.systemUser,
|
systemUser: rv.systemUser,
|
||||||
}
|
};
|
||||||
if(rv.email)userid.email = rv.email
|
if (rv.email) userid.email = rv.email;
|
||||||
this.store.commit("upUserDetail", userid);
|
this.store.commit("upUserDetail", userid);
|
||||||
|
|
||||||
if (window.innerWidth < 768) {
|
if (window.innerWidth < 768) {
|
||||||
@@ -569,13 +532,9 @@ export default defineComponent({
|
|||||||
} else {
|
} else {
|
||||||
this.turnToHomePage("/home");
|
this.turnToHomePage("/home");
|
||||||
}
|
}
|
||||||
sessionStorage.setItem(
|
sessionStorage.setItem("isTimeOne", JSON.stringify(false)); //是否需要公告 提示 弹窗
|
||||||
"isTimeOne",
|
|
||||||
JSON.stringify(false)
|
|
||||||
); //是否需要公告 提示 弹窗
|
|
||||||
let randomNum: any =
|
let randomNum: any =
|
||||||
Math.floor(Math.random() * 9000000000000000) +
|
Math.floor(Math.random() * 9000000000000000) + 1000000000000000;
|
||||||
1000000000000000;
|
|
||||||
sessionStorage.setItem("sessionId", randomNum);
|
sessionStorage.setItem("sessionId", randomNum);
|
||||||
sessionStorage.setItem("record", JSON.stringify([]));
|
sessionStorage.setItem("record", JSON.stringify([]));
|
||||||
}
|
}
|
||||||
@@ -588,14 +547,12 @@ export default defineComponent({
|
|||||||
password: md5(this.newPassword + "abc"),
|
password: md5(this.newPassword + "abc"),
|
||||||
verifyEmail: false,
|
verifyEmail: false,
|
||||||
};
|
};
|
||||||
Https.axiosPost(Https.httpUrls.accountResetPwd, data).then(
|
Https.axiosPost(Https.httpUrls.accountResetPwd, data).then((rv: any) => {
|
||||||
(rv: any) => {
|
|
||||||
if (rv) {
|
if (rv) {
|
||||||
message.success("Changing the password successfully");
|
message.success("Changing the password successfully");
|
||||||
this.changeIsLogin(1);
|
this.changeIsLogin(1);
|
||||||
}
|
}
|
||||||
}
|
});
|
||||||
);
|
|
||||||
},
|
},
|
||||||
|
|
||||||
//创建定时器
|
//创建定时器
|
||||||
@@ -641,9 +598,9 @@ export default defineComponent({
|
|||||||
// },
|
// },
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
const data = this.$route.query
|
const data = this.$route.query;
|
||||||
if(data?.state == 'weiXin'){
|
if (data?.state == "weiXin") {
|
||||||
this.wechatLogin(data)
|
this.wechatLogin(data);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
@@ -749,7 +706,7 @@ export default defineComponent({
|
|||||||
font-size: 1.4rem;
|
font-size: 1.4rem;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
outline: none;
|
outline: none;
|
||||||
transition: all .3s;
|
transition: all 0.3s;
|
||||||
&:hover {
|
&:hover {
|
||||||
border: 0.1rem solid #000;
|
border: 0.1rem solid #000;
|
||||||
}
|
}
|
||||||
@@ -803,9 +760,9 @@ export default defineComponent({
|
|||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: all .3s;
|
transition: all 0.3s;
|
||||||
&:hover {
|
&:hover {
|
||||||
background: #3C3C3C;
|
background: #3c3c3c;
|
||||||
}
|
}
|
||||||
&[state="2"] {
|
&[state="2"] {
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
|
|||||||
@@ -8,13 +8,13 @@
|
|||||||
<!-- v-show="loginType == 'username'" -->
|
<!-- v-show="loginType == 'username'" -->
|
||||||
<div>
|
<div>
|
||||||
<div class="login_form_content" :state="emailStap">
|
<div class="login_form_content" :state="emailStap">
|
||||||
|
|
||||||
<div v-show="emailStap === 1">
|
<div v-show="emailStap === 1">
|
||||||
<div class="login_form_title marign_top30">
|
<div class="login_form_title marign_top30">School</div>
|
||||||
School
|
|
||||||
</div>
|
|
||||||
<div class="generalModel_state">
|
<div class="generalModel_state">
|
||||||
<div class="generalModel_state_item" style="width: 100%; margin: 0;">
|
<div
|
||||||
|
class="generalModel_state_item"
|
||||||
|
style="width: 100%; margin: 0"
|
||||||
|
>
|
||||||
<a-select
|
<a-select
|
||||||
placeholder="Select a school"
|
placeholder="Select a school"
|
||||||
v-model:value="selectSchool"
|
v-model:value="selectSchool"
|
||||||
@@ -36,9 +36,7 @@
|
|||||||
</a-select>
|
</a-select>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="login_form_title marign_top30">
|
<div class="login_form_title marign_top30">Email</div>
|
||||||
Email
|
|
||||||
</div>
|
|
||||||
<input
|
<input
|
||||||
class="login_form_input"
|
class="login_form_input"
|
||||||
placeholder="Enter your email address"
|
placeholder="Enter your email address"
|
||||||
@@ -63,21 +61,16 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<!-- 邮箱登录 start -->
|
<!-- 邮箱登录 start -->
|
||||||
<div
|
<div
|
||||||
v-show="emailStap === 2"
|
v-show="emailStap === 2"
|
||||||
class="login_form_email"
|
class="login_form_email"
|
||||||
:class="{ active: emailStap === 2 }"
|
:class="{ active: emailStap === 2 }"
|
||||||
>
|
>
|
||||||
<div
|
<div v-show="emailStap === 2" class="email_last_step">
|
||||||
v-show="emailStap === 2"
|
|
||||||
class="email_last_step"
|
|
||||||
>
|
|
||||||
<div class="email_last_step_block">
|
<div class="email_last_step_block">
|
||||||
<span class="email_last_step_content"
|
<span class="email_last_step_content"
|
||||||
>Verify with one-time verification
|
>Verify with one-time verification code</span
|
||||||
code</span
|
|
||||||
>
|
>
|
||||||
<i
|
<i
|
||||||
class="fi fi-br-cross email_last_step_block_icon"
|
class="fi fi-br-cross email_last_step_block_icon"
|
||||||
@@ -86,34 +79,23 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="email_last_step_bottom">
|
<div class="email_last_step_bottom">
|
||||||
<div class="email_last_step_des">
|
<div class="email_last_step_des">
|
||||||
<div class="sent_email_content">
|
<div class="sent_email_content">Sent to {{ email }}</div>
|
||||||
Sent to {{ email }}
|
|
||||||
</div>
|
|
||||||
<div class="tip_content">
|
<div class="tip_content">
|
||||||
<span v-show="time"
|
<span v-show="time">{{ time }}s</span>
|
||||||
>{{ time }}s</span
|
<span v-show="!time" @click="emailNextStepFun()"
|
||||||
>
|
|
||||||
<span
|
|
||||||
v-show="!time"
|
|
||||||
@click="emailNextStepFun()"
|
|
||||||
>Resend</span
|
>Resend</span
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<VerificationCodeInput
|
<VerificationCodeInput
|
||||||
:ct="emailCode"
|
:ct="emailCode"
|
||||||
@sendCaptcha="
|
@sendCaptcha="submitEmailLogin($event)"
|
||||||
submitEmailLogin($event)
|
|
||||||
"
|
|
||||||
></VerificationCodeInput>
|
></VerificationCodeInput>
|
||||||
|
|
||||||
<div class="email_last_step_des">
|
<div class="email_last_step_des">
|
||||||
<div
|
<div class="sent_email_content email_tip_content">
|
||||||
class="sent_email_content email_tip_content"
|
Please check the junk box if you haven't received
|
||||||
>
|
verification code
|
||||||
Please check the junk box if you
|
|
||||||
haven't received verification
|
|
||||||
code
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -123,15 +105,8 @@
|
|||||||
|
|
||||||
<div class="login_form_title marign_top30">
|
<div class="login_form_title marign_top30">
|
||||||
<label :class="{ active: emailStap == 2 }">
|
<label :class="{ active: emailStap == 2 }">
|
||||||
<input
|
<input :state="emailStap" type="checkbox" v-model="checked" />
|
||||||
:state="emailStap"
|
<span>I agree to all Term, Privacy Policy and Fees</span>
|
||||||
type="checkbox"
|
|
||||||
v-model="checked"
|
|
||||||
/>
|
|
||||||
<span
|
|
||||||
>I agree to all Term, Privacy Policy and
|
|
||||||
Fees</span
|
|
||||||
>
|
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<!-- <div class="thirdPartyLogin marign_top30">
|
<!-- <div class="thirdPartyLogin marign_top30">
|
||||||
@@ -174,9 +149,7 @@
|
|||||||
@click="forgetPasswordLastStepFun()"
|
@click="forgetPasswordLastStepFun()"
|
||||||
>
|
>
|
||||||
<i class="fi fi-br-arrow-left"></i>
|
<i class="fi fi-br-arrow-left"></i>
|
||||||
<span class="forget_password_content_title"
|
<span class="forget_password_content_title">Retrieve password</span>
|
||||||
>Retrieve password</span
|
|
||||||
>
|
|
||||||
</div>
|
</div>
|
||||||
<div v-show="frogetPasswordStep === 1">
|
<div v-show="frogetPasswordStep === 1">
|
||||||
<div class="forget_passored_form_content">
|
<div class="forget_passored_form_content">
|
||||||
@@ -204,9 +177,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="tip_content">
|
<div class="tip_content">
|
||||||
<span v-show="time">{{ time }}s</span>
|
<span v-show="time">{{ time }}s</span>
|
||||||
<span
|
<span v-show="!time" @click="forgetPasswordNextStepFun()"
|
||||||
v-show="!time"
|
|
||||||
@click="forgetPasswordNextStepFun()"
|
|
||||||
>Resend</span
|
>Resend</span
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
@@ -256,42 +227,47 @@ import phoneLogin from "@/component/LoginPage/phoneLogin.vue";
|
|||||||
import { useStore } from "vuex";
|
import { useStore } from "vuex";
|
||||||
import { useI18n } from "vue-i18n";
|
import { useI18n } from "vue-i18n";
|
||||||
import { setLang } from "@/tool/guide";
|
import { setLang } from "@/tool/guide";
|
||||||
const md5 = require("md5");
|
import md5 from "md5";
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
components: {
|
components: {
|
||||||
VerificationCodeInput,googleLogin,weiXinLogin,phoneLogin
|
VerificationCodeInput,
|
||||||
|
googleLogin,
|
||||||
|
weiXinLogin,
|
||||||
|
phoneLogin,
|
||||||
},
|
},
|
||||||
setup() {
|
setup() {
|
||||||
let timer: any = 0;
|
let timer: any = 0;
|
||||||
const { locale } = useI18n();
|
const { locale } = useI18n();
|
||||||
const store = useStore();
|
const store = useStore();
|
||||||
let loadingShow = ref(false)
|
let loadingShow = ref(false);
|
||||||
const data = reactive({
|
const data = reactive({
|
||||||
selectSchool:'',
|
selectSchool: "",
|
||||||
schoolList: [] as any,
|
schoolList: [] as any,
|
||||||
})
|
});
|
||||||
const schoolListChange = (e:any)=>{
|
const schoolListChange = (e: any) => {};
|
||||||
}
|
|
||||||
const filterOption = (e: any) => {
|
const filterOption = (e: any) => {
|
||||||
let params = {
|
let params = {
|
||||||
name: e,
|
name: e,
|
||||||
type:'School'
|
type: "School",
|
||||||
}
|
};
|
||||||
Https.axiosPost(Https.httpUrls.organizationNameSearch,{},{params:params}).then((rv:any)=>{
|
Https.axiosPost(
|
||||||
|
Https.httpUrls.organizationNameSearch,
|
||||||
|
{},
|
||||||
|
{ params: params }
|
||||||
|
).then((rv: any) => {
|
||||||
data.schoolList = rv.map((item: any) => {
|
data.schoolList = rv.map((item: any) => {
|
||||||
return {
|
return {
|
||||||
label: item,
|
label: item,
|
||||||
value: item,
|
value: item,
|
||||||
}
|
};
|
||||||
})
|
});
|
||||||
})
|
});
|
||||||
|
};
|
||||||
}
|
|
||||||
const handleFocus = () => {
|
const handleFocus = () => {
|
||||||
if (data.schoolList.length == 0) {
|
if (data.schoolList.length == 0) {
|
||||||
filterOption('')
|
filterOption("");
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
};
|
||||||
return {
|
return {
|
||||||
...toRefs(data),
|
...toRefs(data),
|
||||||
store,
|
store,
|
||||||
@@ -299,7 +275,8 @@ export default defineComponent({
|
|||||||
locale,
|
locale,
|
||||||
loadingShow,
|
loadingShow,
|
||||||
schoolListChange,
|
schoolListChange,
|
||||||
filterOption,handleFocus
|
filterOption,
|
||||||
|
handleFocus,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
@@ -311,8 +288,8 @@ export default defineComponent({
|
|||||||
emailCode: ["", "", "", "", "", ""], //邮箱验证码
|
emailCode: ["", "", "", "", "", ""], //邮箱验证码
|
||||||
emailNextStep: true,
|
emailNextStep: true,
|
||||||
username: "",
|
username: "",
|
||||||
password: localStorage.getItem("loginPassword") || '',
|
password: localStorage.getItem("loginPassword") || "",
|
||||||
email: localStorage.getItem("loginEmail") || '', //邮箱登录邮箱
|
email: localStorage.getItem("loginEmail") || "", //邮箱登录邮箱
|
||||||
frogetPasswordStep: 1, //忘记密码的步骤
|
frogetPasswordStep: 1, //忘记密码的步骤
|
||||||
forgetPasswordEmail: "",
|
forgetPasswordEmail: "",
|
||||||
forgetEmailCode: ["", "", "", "", "", ""], //忘记密码的邮箱验证码
|
forgetEmailCode: ["", "", "", "", "", ""], //忘记密码的邮箱验证码
|
||||||
@@ -357,16 +334,14 @@ export default defineComponent({
|
|||||||
email: this.email,
|
email: this.email,
|
||||||
operationType: "LOGIN",
|
operationType: "LOGIN",
|
||||||
};
|
};
|
||||||
Https.axiosPost(Https.httpUrls.accountSendEmail, data).then(
|
Https.axiosPost(Https.httpUrls.accountSendEmail, data).then((rv: any) => {
|
||||||
(rv: any) => {
|
|
||||||
if (rv) {
|
if (rv) {
|
||||||
this.emailStap = 2;
|
this.emailStap = 2;
|
||||||
this.time = 60;
|
this.time = 60;
|
||||||
this.emailCode = ["", "", "", "", "", ""];
|
this.emailCode = ["", "", "", "", "", ""];
|
||||||
this.createTimer();
|
this.createTimer();
|
||||||
}
|
}
|
||||||
}
|
});
|
||||||
);
|
|
||||||
},
|
},
|
||||||
|
|
||||||
//邮箱登录的上一步
|
//邮箱登录的上一步
|
||||||
@@ -389,15 +364,12 @@ export default defineComponent({
|
|||||||
email: this.forgetPasswordEmail,
|
email: this.forgetPasswordEmail,
|
||||||
operationType: "FORGET_PWD",
|
operationType: "FORGET_PWD",
|
||||||
};
|
};
|
||||||
Https.axiosPost(Https.httpUrls.accountSendEmail, data).then(
|
Https.axiosPost(Https.httpUrls.accountSendEmail, data).then((rv: any) => {
|
||||||
(rv: any) => {
|
|
||||||
if (rv) {
|
if (rv) {
|
||||||
this.frogetPasswordStep = 2;
|
this.frogetPasswordStep = 2;
|
||||||
(this.forgetEmailCode = ["", "", "", "", "", ""]),
|
(this.forgetEmailCode = ["", "", "", "", "", ""]), this.createTimer();
|
||||||
this.createTimer();
|
|
||||||
}
|
}
|
||||||
}
|
});
|
||||||
);
|
|
||||||
},
|
},
|
||||||
//忘记密码的上一步
|
//忘记密码的上一步
|
||||||
forgetPasswordLastStepFun() {
|
forgetPasswordLastStepFun() {
|
||||||
@@ -406,8 +378,7 @@ export default defineComponent({
|
|||||||
} else {
|
} else {
|
||||||
this.frogetPasswordStep = this.frogetPasswordStep - 1;
|
this.frogetPasswordStep = this.frogetPasswordStep - 1;
|
||||||
this.forgetPasswordEmail = "";
|
this.forgetPasswordEmail = "";
|
||||||
(this.forgetEmailCode = ["", "", "", "", "", ""]),
|
(this.forgetEmailCode = ["", "", "", "", "", ""]), this.clearTimer();
|
||||||
this.clearTimer();
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
@@ -420,15 +391,13 @@ export default defineComponent({
|
|||||||
password: "",
|
password: "",
|
||||||
verifyEmail: true,
|
verifyEmail: true,
|
||||||
};
|
};
|
||||||
Https.axiosPost(Https.httpUrls.accountResetPwd, data).then(
|
Https.axiosPost(Https.httpUrls.accountResetPwd, data).then((rv: any) => {
|
||||||
(rv: any) => {
|
|
||||||
if (rv) {
|
if (rv) {
|
||||||
this.forgetEmailValue = emailVerifyCode;
|
this.forgetEmailValue = emailVerifyCode;
|
||||||
this.frogetPasswordStep = 3;
|
this.frogetPasswordStep = 3;
|
||||||
this.clearTimer();
|
this.clearTimer();
|
||||||
}
|
}
|
||||||
}
|
});
|
||||||
);
|
|
||||||
},
|
},
|
||||||
|
|
||||||
//改变勾选是否是机器人
|
//改变勾选是否是机器人
|
||||||
@@ -443,9 +412,7 @@ export default defineComponent({
|
|||||||
return;
|
return;
|
||||||
} else {
|
} else {
|
||||||
if (!this.password) {
|
if (!this.password) {
|
||||||
message.info(
|
message.info("Please enter your account number or password");
|
||||||
"Please enter your account number or password"
|
|
||||||
);
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
//输入邮箱
|
//输入邮箱
|
||||||
@@ -464,14 +431,12 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
//判断是否同意隐私政策
|
//判断是否同意隐私政策
|
||||||
if (!this.checked) {
|
if (!this.checked) {
|
||||||
message.info(
|
message.info("Agree to all terms, privacy fees and policies");
|
||||||
"Agree to all terms, privacy fees and policies"
|
|
||||||
);
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
let data = {
|
let data = {
|
||||||
password: md5(this.password + "abc"),
|
password: md5(this.password + "abc"),
|
||||||
userName: 'a',
|
userName: "a",
|
||||||
// userName: this.username,
|
// userName: this.username,
|
||||||
organizationName: this.selectSchool,
|
organizationName: this.selectSchool,
|
||||||
email: this.email,
|
email: this.email,
|
||||||
@@ -484,7 +449,7 @@ export default defineComponent({
|
|||||||
Https.axiosPost(Https.httpUrls.schoolLogin, data)
|
Https.axiosPost(Https.httpUrls.schoolLogin, data)
|
||||||
.then((rv: any) => {
|
.then((rv: any) => {
|
||||||
if (rv) {
|
if (rv) {
|
||||||
this.clearTimer()
|
this.clearTimer();
|
||||||
this.time = 60;
|
this.time = 60;
|
||||||
this.emailStap = 2;
|
this.emailStap = 2;
|
||||||
this.emailCode = ["", "", "", "", "", ""];
|
this.emailCode = ["", "", "", "", "", ""];
|
||||||
@@ -517,39 +482,39 @@ export default defineComponent({
|
|||||||
emailVerifyCode: emailVerifyCode,
|
emailVerifyCode: emailVerifyCode,
|
||||||
loginType: "EMAIL",
|
loginType: "EMAIL",
|
||||||
userId: this.userId,
|
userId: this.userId,
|
||||||
organizationName:this.selectSchool
|
organizationName: this.selectSchool,
|
||||||
};
|
};
|
||||||
Https.axiosPost(Https.httpUrls.accountLogin, data)
|
Https.axiosPost(Https.httpUrls.accountLogin, data)
|
||||||
.then((rv: any) => {
|
.then((rv: any) => {
|
||||||
this.setSuccessLogin(rv)
|
this.setSuccessLogin(rv);
|
||||||
})
|
})
|
||||||
.catch((res) => {});
|
.catch((res) => {});
|
||||||
},
|
},
|
||||||
isCheckAgreement() {
|
isCheckAgreement() {
|
||||||
message.info(
|
message.info("Agree to all terms, privacy fees and policies");
|
||||||
"Agree to all terms, privacy fees and policies"
|
|
||||||
);
|
|
||||||
},
|
},
|
||||||
//微信登录
|
//微信登录
|
||||||
wechatLogin(value: any) {
|
wechatLogin(value: any) {
|
||||||
let data = {
|
let data = {
|
||||||
code: value.code,
|
code: value.code,
|
||||||
type:2
|
type: 2,
|
||||||
}
|
};
|
||||||
this.loadingShow = true
|
this.loadingShow = true;
|
||||||
Https.axiosGet(Https.httpUrls.parseWeChatCode, { params: data })
|
Https.axiosGet(Https.httpUrls.parseWeChatCode, { params: data })
|
||||||
.then((rv: any) => {
|
.then((rv: any) => {
|
||||||
this.loadingShow = false
|
this.loadingShow = false;
|
||||||
this.setSuccessLogin(rv)
|
this.setSuccessLogin(rv);
|
||||||
})
|
})
|
||||||
.catch((res) => {this.loadingShow = false});
|
.catch((res) => {
|
||||||
|
this.loadingShow = false;
|
||||||
|
});
|
||||||
},
|
},
|
||||||
//谷歌登录
|
//谷歌登录
|
||||||
googelLogin(value: any) {
|
googelLogin(value: any) {
|
||||||
let data = {credential : value,type:2}
|
let data = { credential: value, type: 2 };
|
||||||
Https.axiosGet(Https.httpUrls.parseGoogleCredential, { params: data })
|
Https.axiosGet(Https.httpUrls.parseGoogleCredential, { params: data })
|
||||||
.then((rv: any) => {
|
.then((rv: any) => {
|
||||||
this.setSuccessLogin(rv)
|
this.setSuccessLogin(rv);
|
||||||
})
|
})
|
||||||
.catch((res) => {});
|
.catch((res) => {});
|
||||||
},
|
},
|
||||||
@@ -572,8 +537,8 @@ export default defineComponent({
|
|||||||
let userid: any = {
|
let userid: any = {
|
||||||
ueserId: rv.userId,
|
ueserId: rv.userId,
|
||||||
systemUser: rv.systemUser,
|
systemUser: rv.systemUser,
|
||||||
}
|
};
|
||||||
if(rv.email)userid.email = rv.email
|
if (rv.email) userid.email = rv.email;
|
||||||
this.store.commit("upUserDetail", userid);
|
this.store.commit("upUserDetail", userid);
|
||||||
|
|
||||||
if (window.innerWidth < 768) {
|
if (window.innerWidth < 768) {
|
||||||
@@ -584,13 +549,9 @@ export default defineComponent({
|
|||||||
} else {
|
} else {
|
||||||
this.turnToHomePage("/home");
|
this.turnToHomePage("/home");
|
||||||
}
|
}
|
||||||
sessionStorage.setItem(
|
sessionStorage.setItem("isTimeOne", JSON.stringify(false)); //是否需要公告 提示 弹窗
|
||||||
"isTimeOne",
|
|
||||||
JSON.stringify(false)
|
|
||||||
); //是否需要公告 提示 弹窗
|
|
||||||
let randomNum: any =
|
let randomNum: any =
|
||||||
Math.floor(Math.random() * 9000000000000000) +
|
Math.floor(Math.random() * 9000000000000000) + 1000000000000000;
|
||||||
1000000000000000;
|
|
||||||
sessionStorage.setItem("sessionId", randomNum);
|
sessionStorage.setItem("sessionId", randomNum);
|
||||||
sessionStorage.setItem("record", JSON.stringify([]));
|
sessionStorage.setItem("record", JSON.stringify([]));
|
||||||
}
|
}
|
||||||
@@ -603,14 +564,12 @@ export default defineComponent({
|
|||||||
password: md5(this.newPassword + "abc"),
|
password: md5(this.newPassword + "abc"),
|
||||||
verifyEmail: false,
|
verifyEmail: false,
|
||||||
};
|
};
|
||||||
Https.axiosPost(Https.httpUrls.accountResetPwd, data).then(
|
Https.axiosPost(Https.httpUrls.accountResetPwd, data).then((rv: any) => {
|
||||||
(rv: any) => {
|
|
||||||
if (rv) {
|
if (rv) {
|
||||||
message.success("Changing the password successfully");
|
message.success("Changing the password successfully");
|
||||||
this.changeIsLogin(1);
|
this.changeIsLogin(1);
|
||||||
}
|
}
|
||||||
}
|
});
|
||||||
);
|
|
||||||
},
|
},
|
||||||
|
|
||||||
//创建定时器
|
//创建定时器
|
||||||
@@ -656,9 +615,9 @@ export default defineComponent({
|
|||||||
// },
|
// },
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
const data = this.$route.query
|
const data = this.$route.query;
|
||||||
if(data?.state == 'weiXin'){
|
if (data?.state == "weiXin") {
|
||||||
this.wechatLogin(data)
|
this.wechatLogin(data);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
@@ -779,7 +738,7 @@ export default defineComponent({
|
|||||||
font-size: 1.4rem;
|
font-size: 1.4rem;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
outline: none;
|
outline: none;
|
||||||
transition: all .3s;
|
transition: all 0.3s;
|
||||||
&:hover {
|
&:hover {
|
||||||
border: 0.1rem solid #000;
|
border: 0.1rem solid #000;
|
||||||
}
|
}
|
||||||
@@ -833,9 +792,9 @@ export default defineComponent({
|
|||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: all .3s;
|
transition: all 0.3s;
|
||||||
&:hover {
|
&:hover {
|
||||||
background: #3C3C3C;
|
background: #3c3c3c;
|
||||||
}
|
}
|
||||||
&[state="2"] {
|
&[state="2"] {
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
|
|||||||
@@ -1,35 +1,41 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="Container">
|
<div class="Container">
|
||||||
<div class="icon" @click="openphoneModel">
|
<div class="icon" @click="openphoneModel">
|
||||||
<img src="@/assets/images/loginPage/phone.svg" alt="">
|
<img src="@/assets/images/loginPage/phone.svg" alt="" />
|
||||||
</div>
|
</div>
|
||||||
<phoneModel ref="phoneModel"></phoneModel>
|
<phoneModel ref="phoneModel"></phoneModel>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import { defineComponent, ref, reactive, watch, onMounted, nextTick, toRefs,router } from "vue";
|
import {
|
||||||
|
defineComponent,
|
||||||
|
ref,
|
||||||
|
reactive,
|
||||||
|
watch,
|
||||||
|
onMounted,
|
||||||
|
nextTick,
|
||||||
|
toRef,
|
||||||
|
} from "vue";
|
||||||
import phoneModel from "./phoneModel.vue";
|
import phoneModel from "./phoneModel.vue";
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
name: "login",
|
name: "login",
|
||||||
components: {
|
components: {
|
||||||
phoneModel
|
phoneModel,
|
||||||
},
|
},
|
||||||
setup() {
|
setup() {
|
||||||
let phoneDom = reactive({
|
let phoneDom = reactive({
|
||||||
phoneModel:null
|
phoneModel: null,
|
||||||
})
|
});
|
||||||
const openphoneModel = () => {
|
const openphoneModel = () => {
|
||||||
phoneDom.phoneModel.init()
|
phoneDom.phoneModel.init();
|
||||||
}
|
};
|
||||||
onMounted(()=>{
|
onMounted(() => {});
|
||||||
|
|
||||||
})
|
|
||||||
return {
|
return {
|
||||||
...toRefs(phoneDom),
|
...toRefs(phoneDom),
|
||||||
openphoneModel,
|
openphoneModel,
|
||||||
}
|
};
|
||||||
},
|
},
|
||||||
})
|
});
|
||||||
</script>
|
</script>
|
||||||
<style scoped lang="less">
|
<style scoped lang="less">
|
||||||
.Container {
|
.Container {
|
||||||
|
|||||||
@@ -17,12 +17,33 @@
|
|||||||
<div class="generalModel_btn">
|
<div class="generalModel_btn">
|
||||||
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
|
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
|
||||||
<!-- <i class="fi fi-rr-cross-small"></i> -->
|
<!-- <i class="fi fi-rr-cross-small"></i> -->
|
||||||
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<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" />
|
<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
|
||||||
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
|
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>
|
</svg>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="phoneLogin">
|
<div class="phoneLogin">
|
||||||
@@ -32,13 +53,12 @@
|
|||||||
<a-spin size="large" />
|
<a-spin size="large" />
|
||||||
</div>
|
</div>
|
||||||
</a-modal>
|
</a-modal>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { defineComponent, ref, reactive, toRefs, onMounted } from "vue";
|
import { defineComponent, ref, reactive, toRefs, onMounted } from "vue";
|
||||||
import VerificationCodeInput from "@/component/LoginPage/verificationCodeInput.vue";
|
import VerificationCodeInput from "@/component/LoginPage/verificationCodeInput.vue";
|
||||||
const md5 = require("md5");
|
import md5 from "md5";
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
components: {
|
components: {
|
||||||
VerificationCodeInput,
|
VerificationCodeInput,
|
||||||
@@ -47,30 +67,28 @@ export default defineComponent({
|
|||||||
let phoneModel = reactive({
|
let phoneModel = reactive({
|
||||||
phoneModel: false,
|
phoneModel: false,
|
||||||
phoneModelMask: true,
|
phoneModelMask: true,
|
||||||
pageWidth:'50%',
|
pageWidth: "50%",
|
||||||
})
|
});
|
||||||
let data = reactive({
|
let data = reactive({
|
||||||
loadingShow: false,
|
loadingShow: false,
|
||||||
})
|
});
|
||||||
const init = async () => {
|
const init = async () => {
|
||||||
phoneModel.phoneModel = true
|
phoneModel.phoneModel = true;
|
||||||
}
|
};
|
||||||
const cancelDsign = () => {
|
const cancelDsign = () => {
|
||||||
phoneModel.phoneModel = false
|
phoneModel.phoneModel = false;
|
||||||
}
|
};
|
||||||
return {
|
return {
|
||||||
...toRefs(phoneModel),
|
...toRefs(phoneModel),
|
||||||
...toRefs(data),
|
...toRefs(data),
|
||||||
init,
|
init,
|
||||||
cancelDsign,
|
cancelDsign,
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
data() {
|
||||||
|
return {};
|
||||||
},
|
},
|
||||||
|
methods: {},
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
|
|||||||
@@ -1,42 +1,48 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="Container">
|
<div class="Container">
|
||||||
<div class="icon" @click="openWeiXinModel">
|
<div class="icon" @click="openWeiXinModel">
|
||||||
<img src="@/assets/images/loginPage/weiXinIcon.svg" alt="">
|
<img src="@/assets/images/loginPage/weiXinIcon.svg" alt="" />
|
||||||
<span>{{ $props.text }}</span>
|
<span>{{ $props.text }}</span>
|
||||||
</div>
|
</div>
|
||||||
<weiXinModel ref="weiXinModel"></weiXinModel>
|
<weiXinModel ref="weiXinModel"></weiXinModel>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import { defineComponent, ref, reactive, watch, onMounted, nextTick, toRefs,router } from "vue";
|
import {
|
||||||
|
defineComponent,
|
||||||
|
ref,
|
||||||
|
reactive,
|
||||||
|
watch,
|
||||||
|
onMounted,
|
||||||
|
nextTick,
|
||||||
|
toRefs,
|
||||||
|
} from "vue";
|
||||||
import weiXinModel from "./weiXinModel.vue";
|
import weiXinModel from "./weiXinModel.vue";
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
name: "login",
|
name: "login",
|
||||||
components: {
|
components: {
|
||||||
weiXinModel
|
weiXinModel,
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
text: {
|
text: {
|
||||||
type: String,
|
type: String,
|
||||||
default: 'Sign in with Wechat'
|
default: "Sign in with Wechat",
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
setup() {
|
setup() {
|
||||||
let weiXinDom = reactive({
|
let weiXinDom = reactive({
|
||||||
weiXinModel:null
|
weiXinModel: null,
|
||||||
})
|
});
|
||||||
const openWeiXinModel = () => {
|
const openWeiXinModel = () => {
|
||||||
weiXinDom.weiXinModel.init()
|
weiXinDom.weiXinModel.init();
|
||||||
}
|
};
|
||||||
onMounted(()=>{
|
onMounted(() => {});
|
||||||
|
|
||||||
})
|
|
||||||
return {
|
return {
|
||||||
...toRefs(weiXinDom),
|
...toRefs(weiXinDom),
|
||||||
openWeiXinModel,
|
openWeiXinModel,
|
||||||
}
|
};
|
||||||
},
|
},
|
||||||
})
|
});
|
||||||
</script>
|
</script>
|
||||||
<style scoped lang="less">
|
<style scoped lang="less">
|
||||||
.Container {
|
.Container {
|
||||||
@@ -49,7 +55,7 @@
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
border: 1px solid #dadce0;
|
border: 1px solid #dadce0;
|
||||||
border-radius: 4rem;
|
border-radius: 4rem;
|
||||||
padding: .5rem 3rem;
|
padding: 0.5rem 3rem;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
&:hover {
|
&:hover {
|
||||||
|
|||||||
@@ -18,70 +18,136 @@
|
|||||||
<div class="generalModel_btn">
|
<div class="generalModel_btn">
|
||||||
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
|
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
|
||||||
<!-- <i class="fi fi-rr-cross-small"></i> -->
|
<!-- <i class="fi fi-rr-cross-small"></i> -->
|
||||||
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<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" />
|
<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
|
||||||
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
|
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>
|
</svg>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="payMethodContent">
|
<div class="payMethodContent">
|
||||||
<div class="generalModelTitle">
|
<div class="generalModelTitle">
|
||||||
{{ $t('upgradePlan.paymentmethod') }}
|
{{ $t("upgradePlan.paymentmethod") }}
|
||||||
</div>
|
</div>
|
||||||
<div class="payMethod_list">
|
<div class="payMethod_list">
|
||||||
<label class="payMethod_item" v-show="$props.type == 'credits'">
|
<label class="payMethod_item" v-show="$props.type == 'credits'">
|
||||||
<input name="payAffirm" type="radio" value="paypal" v-model="modeOfPayment">
|
<input
|
||||||
<img src="../../assets/images/homePage/paypal.svg" alt="">
|
name="payAffirm"
|
||||||
|
type="radio"
|
||||||
|
value="paypal"
|
||||||
|
v-model="modeOfPayment"
|
||||||
|
/>
|
||||||
|
<img src="../../assets/images/homePage/paypal.svg" alt="" />
|
||||||
<span>PayPal</span>
|
<span>PayPal</span>
|
||||||
</label>
|
</label>
|
||||||
<label class="payMethod_item">
|
<label class="payMethod_item">
|
||||||
<input name="Stripe" type="radio" value="stripe" v-model="modeOfPayment">
|
<input
|
||||||
<img src="../../assets/images/homePage/stripe.svg" alt="">
|
name="Stripe"
|
||||||
<span>Stripe ({{ $t('Renew.CreditCard') }}、{{ $t('Renew.Alipay') }})</span>
|
type="radio"
|
||||||
|
value="stripe"
|
||||||
|
v-model="modeOfPayment"
|
||||||
|
/>
|
||||||
|
<img src="../../assets/images/homePage/stripe.svg" alt="" />
|
||||||
|
<span
|
||||||
|
>Stripe ({{ $t("Renew.CreditCard") }}、{{
|
||||||
|
$t("Renew.Alipay")
|
||||||
|
}})</span
|
||||||
|
>
|
||||||
</label>
|
</label>
|
||||||
<label class="payMethod_item" v-show="$props.type == 'credits'">
|
<label class="payMethod_item" v-show="$props.type == 'credits'">
|
||||||
<input name="payAffirm" type="radio" value="alipay" v-model="modeOfPayment">
|
<input
|
||||||
<img src="../../assets/images/homePage/alipay.svg" alt="">
|
name="payAffirm"
|
||||||
<span>{{ $t('upgradePlan.Alipay') }}</span>
|
type="radio"
|
||||||
|
value="alipay"
|
||||||
|
v-model="modeOfPayment"
|
||||||
|
/>
|
||||||
|
<img src="../../assets/images/homePage/alipay.svg" alt="" />
|
||||||
|
<span>{{ $t("upgradePlan.Alipay") }}</span>
|
||||||
<div v-show="modeOfPayment == 'alipay'" class="payAffirm_detail">
|
<div v-show="modeOfPayment == 'alipay'" class="payAffirm_detail">
|
||||||
<label>
|
<label>
|
||||||
<input name="location" type="radio" value="ALIPAYHK" v-model="modeOfPaymentDetail">
|
<input
|
||||||
<span>{{ $t('upgradePlan.HongKong') }}</span>
|
name="location"
|
||||||
|
type="radio"
|
||||||
|
value="ALIPAYHK"
|
||||||
|
v-model="modeOfPaymentDetail"
|
||||||
|
/>
|
||||||
|
<span>{{ $t("upgradePlan.HongKong") }}</span>
|
||||||
</label>
|
</label>
|
||||||
<label>
|
<label>
|
||||||
<input name="location" type="radio" value="ALIPAYCN" v-model="modeOfPaymentDetail">
|
<input
|
||||||
<span>{{ $t('upgradePlan.MainlandChina') }}</span>
|
name="location"
|
||||||
|
type="radio"
|
||||||
|
value="ALIPAYCN"
|
||||||
|
v-model="modeOfPaymentDetail"
|
||||||
|
/>
|
||||||
|
<span>{{ $t("upgradePlan.MainlandChina") }}</span>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="payMethod_payAffirm_clause" ref="labelDisclaimer">
|
<div class="payMethod_payAffirm_clause" ref="labelDisclaimer">
|
||||||
<label>
|
<label>
|
||||||
<input type="checkbox" v-model="clause">
|
<input type="checkbox" v-model="clause" />
|
||||||
<span class="generalModelDescription">{{ $t('upgradePlan.policy1') }}<a href="https://code-create.com.hk/aida-terms-and-conditions/" target="_blank">{{ $t('upgradePlan.policy2') }}</a>{{ $t('upgradePlan.policy3') }}<a href="https://code-create.com.hk/aida-subscription-agreement/" target="_blank">{{ $t('upgradePlan.policy4') }}</a>. *</span>
|
<span class="generalModelDescription"
|
||||||
|
>{{ $t("upgradePlan.policy1")
|
||||||
|
}}<a
|
||||||
|
href="https://code-create.com.hk/aida-terms-and-conditions/"
|
||||||
|
target="_blank"
|
||||||
|
>{{ $t("upgradePlan.policy2") }}</a
|
||||||
|
>{{ $t("upgradePlan.policy3")
|
||||||
|
}}<a
|
||||||
|
href="https://code-create.com.hk/aida-subscription-agreement/"
|
||||||
|
target="_blank"
|
||||||
|
>{{ $t("upgradePlan.policy4") }}</a
|
||||||
|
>. *</span
|
||||||
|
>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="payMethod_payAffirm_btn">
|
<div class="payMethod_payAffirm_btn">
|
||||||
<div class="gallery_btn white" @click="cancelDsign">{{ $t('upgradePlan.Cancel') }}</div>
|
<div class="gallery_btn white" @click="cancelDsign">
|
||||||
<div class="gallery_btn" @click="payAffirm">{{ $t('upgradePlan.Payment') }}</div>
|
{{ $t("upgradePlan.Cancel") }}
|
||||||
|
</div>
|
||||||
|
<div class="gallery_btn" @click="payAffirm">
|
||||||
|
{{ $t("upgradePlan.Payment") }}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="mark_loading" v-show="isShowMark_">
|
<div class="mark_loading" v-show="isShowMark_">
|
||||||
<a-spin size="large" />
|
<a-spin size="large" />
|
||||||
</div>
|
</div>
|
||||||
<div class="mark_loading" v-show="isShowMark" state="true">
|
<div class="mark_loading" v-show="isShowMark" state="true">
|
||||||
<div class="mark_loading_title">{{ $t('upgradePlan.completed') }}</div>
|
<div class="mark_loading_title">{{ $t("upgradePlan.completed") }}</div>
|
||||||
<div class="mark_loading_intro">{{ $t('upgradePlan.hint') }}</div>
|
<div class="mark_loading_intro">{{ $t("upgradePlan.hint") }}</div>
|
||||||
<div class="mark_loading_title_box">
|
<div class="mark_loading_title_box">
|
||||||
<div class="mark_loading_btn mark_loading_btn2" @click="setPaidBack">{{ $t('upgradePlan.Back') }}</div>
|
<div class="mark_loading_btn mark_loading_btn2" @click="setPaidBack">
|
||||||
|
{{ $t("upgradePlan.Back") }}
|
||||||
|
</div>
|
||||||
<div class="mark_loading_btn" @click="completePayment">OK</div>
|
<div class="mark_loading_btn" @click="completePayment">OK</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</a-modal>
|
</a-modal>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
@@ -93,7 +159,7 @@ import VerificationCodeInput from "@/component/LoginPage/verificationCodeInput.v
|
|||||||
import { useStore } from "vuex";
|
import { useStore } from "vuex";
|
||||||
import { useI18n } from "vue-i18n";
|
import { useI18n } from "vue-i18n";
|
||||||
import { setLang } from "@/tool/guide";
|
import { setLang } from "@/tool/guide";
|
||||||
const md5 = require("md5");
|
import md5 from "md5";
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
components: {
|
components: {
|
||||||
VerificationCodeInput,
|
VerificationCodeInput,
|
||||||
@@ -101,110 +167,124 @@ export default defineComponent({
|
|||||||
props: {
|
props: {
|
||||||
type: {
|
type: {
|
||||||
type: String,
|
type: String,
|
||||||
default:''
|
default: "",
|
||||||
}
|
|
||||||
},
|
},
|
||||||
emits: ['completePayment'],
|
},
|
||||||
|
emits: ["completePayment"],
|
||||||
setup(prop, { emit }) {
|
setup(prop, { emit }) {
|
||||||
const store = useStore();
|
const store = useStore();
|
||||||
let payMethod = reactive({
|
let payMethod = reactive({
|
||||||
payMethodModel: false,
|
payMethodModel: false,
|
||||||
payMethodModelMask: true,
|
payMethodModelMask: true,
|
||||||
pageWidth:'50%'
|
pageWidth: "50%",
|
||||||
})
|
});
|
||||||
let payMethodData = reactive({
|
let payMethodData = reactive({
|
||||||
modeOfPayment:prop.type == 'credits'?'paypal':'stripe',
|
modeOfPayment: prop.type == "credits" ? "paypal" : "stripe",
|
||||||
modeOfPaymentDetail:'ALIPAYHK',
|
modeOfPaymentDetail: "ALIPAYHK",
|
||||||
labelDisclaimer: null, //dom
|
labelDisclaimer: null, //dom
|
||||||
payAffirmData: {} as any,
|
payAffirmData: {} as any,
|
||||||
clause: false,
|
clause: false,
|
||||||
newWindow: null as any,
|
newWindow: null as any,
|
||||||
isShowMark: false,
|
isShowMark: false,
|
||||||
isShowMark_: false,
|
isShowMark_: false,
|
||||||
})
|
});
|
||||||
const init = (data: any) => {
|
const init = (data: any) => {
|
||||||
payMethod.payMethodModel = true
|
payMethod.payMethodModel = true;
|
||||||
payMethodData.payAffirmData = data
|
payMethodData.payAffirmData = data;
|
||||||
}
|
};
|
||||||
const cancelDsign = () => {
|
const cancelDsign = () => {
|
||||||
payMethod.payMethodModel = false
|
payMethod.payMethodModel = false;
|
||||||
}
|
};
|
||||||
const payAffirm = () => {
|
const payAffirm = () => {
|
||||||
if (!payMethodData.clause) {
|
if (!payMethodData.clause) {
|
||||||
let labelDisclaimer:any = payMethodData.labelDisclaimer
|
let labelDisclaimer: any = payMethodData.labelDisclaimer;
|
||||||
if(!labelDisclaimer.classList.contains('animation')){
|
if (!labelDisclaimer.classList.contains("animation")) {
|
||||||
labelDisclaimer.classList.add('animation')
|
labelDisclaimer.classList.add("animation");
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
labelDisclaimer.classList.remove('animation')
|
labelDisclaimer.classList.remove("animation");
|
||||||
}, 1000);
|
}, 1000);
|
||||||
}
|
}
|
||||||
return
|
return;
|
||||||
}
|
}
|
||||||
payMethodData.isShowMark_ = true
|
payMethodData.isShowMark_ = true;
|
||||||
let httpsUrl
|
let httpsUrl;
|
||||||
let url = window.location.origin+'/paySucceed'
|
let url = window.location.origin + "/paySucceed";
|
||||||
let payAffirmData = payMethodData.payAffirmData
|
let payAffirmData = payMethodData.payAffirmData;
|
||||||
let data = {
|
let data = {
|
||||||
autoRenewal: payAffirmData.autoRenewal, //false为不自动续费
|
autoRenewal: payAffirmData.autoRenewal, //false为不自动续费
|
||||||
productName: payAffirmData.productName,
|
productName: payAffirmData.productName,
|
||||||
quantity: payAffirmData.quantity ? payAffirmData.quantity : 1,
|
quantity: payAffirmData.quantity ? payAffirmData.quantity : 1,
|
||||||
returnUrl: url,
|
returnUrl: url,
|
||||||
subscribeType:payAffirmData.subscribeType?payAffirmData.subscribeType:'',//yearly为年费，monthly为月费
|
subscribeType: payAffirmData.subscribeType
|
||||||
|
? payAffirmData.subscribeType
|
||||||
|
: "", //yearly为年费，monthly为月费
|
||||||
wallet: payMethodData.modeOfPaymentDetail,
|
wallet: payMethodData.modeOfPaymentDetail,
|
||||||
}
|
};
|
||||||
if(payMethodData.modeOfPayment == 'paypal'){
|
if (payMethodData.modeOfPayment == "paypal") {
|
||||||
httpsUrl = Https.httpUrls.payPaypal
|
httpsUrl = Https.httpUrls.payPaypal;
|
||||||
}else if (payMethodData.modeOfPayment == 'stripe') {
|
} else if (payMethodData.modeOfPayment == "stripe") {
|
||||||
httpsUrl = Https.httpUrls.payStripe
|
httpsUrl = Https.httpUrls.payStripe;
|
||||||
// data.
|
// data.
|
||||||
} else {
|
} else {
|
||||||
httpsUrl = Https.httpUrls.payAlipayHK
|
httpsUrl = Https.httpUrls.payAlipayHK;
|
||||||
}
|
}
|
||||||
Https.axiosPost(httpsUrl,data).then(
|
Https.axiosPost(httpsUrl, data)
|
||||||
(rv: any) => {
|
.then((rv: any) => {
|
||||||
var width = 800;
|
var width = 800;
|
||||||
var height = 600;
|
var height = 600;
|
||||||
var left = (screen.width - width) / 2;
|
var left = (screen.width - width) / 2;
|
||||||
var top = (screen.height - height) / 2;
|
var top = (screen.height - height) / 2;
|
||||||
payMethodData.newWindow = window.open("", "_blank", "width=" + width + ", height=" + height + ", left=" + left + ", top=" + top);
|
payMethodData.newWindow = window.open(
|
||||||
let herf
|
"",
|
||||||
if(payMethodData.modeOfPayment == 'paypal'){
|
"_blank",
|
||||||
|
"width=" +
|
||||||
|
width +
|
||||||
|
", height=" +
|
||||||
|
height +
|
||||||
|
", left=" +
|
||||||
|
left +
|
||||||
|
", top=" +
|
||||||
|
top
|
||||||
|
);
|
||||||
|
let herf;
|
||||||
|
if (payMethodData.modeOfPayment == "paypal") {
|
||||||
// 在新窗口中写入内容
|
// 在新窗口中写入内容
|
||||||
herf = rv.approve;
|
herf = rv.approve;
|
||||||
// payMethodData.newWindow.location.href = rv.approve;
|
// payMethodData.newWindow.location.href = rv.approve;
|
||||||
}else if(payMethodData.modeOfPayment == 'stripe'){
|
} else if (payMethodData.modeOfPayment == "stripe") {
|
||||||
herf = rv
|
herf = rv;
|
||||||
// payMethodData.newWindow.location.href = rv
|
// payMethodData.newWindow.location.href = rv
|
||||||
} else {
|
} else {
|
||||||
let data = JSON.parse(rv)
|
let data = JSON.parse(rv);
|
||||||
herf = `${data.url}?${data.alipay_order_string}`
|
herf = `${data.url}?${data.alipay_order_string}`;
|
||||||
// payMethodData.newWindow.location.href = herf;
|
// payMethodData.newWindow.location.href = herf;
|
||||||
}
|
}
|
||||||
if (payMethodData.newWindow) {
|
if (payMethodData.newWindow) {
|
||||||
payMethodData.newWindow.location.href = herf
|
payMethodData.newWindow.location.href = herf;
|
||||||
} else {
|
} else {
|
||||||
// window.open(herf, '_blank');
|
// window.open(herf, '_blank');
|
||||||
window.location.href = herf;
|
window.location.href = herf;
|
||||||
}
|
}
|
||||||
payMethodData.newWindow = null
|
payMethodData.newWindow = null;
|
||||||
payMethodData.isShowMark = true
|
payMethodData.isShowMark = true;
|
||||||
payMethodData.isShowMark_ = false
|
payMethodData.isShowMark_ = false;
|
||||||
}
|
})
|
||||||
).catch(res=>{
|
.catch((res) => {
|
||||||
payMethodData.isShowMark_ = false
|
payMethodData.isShowMark_ = false;
|
||||||
});
|
});
|
||||||
}
|
};
|
||||||
const setPaidBack = () => {
|
const setPaidBack = () => {
|
||||||
payMethod.payMethodModel = false
|
payMethod.payMethodModel = false;
|
||||||
payMethodData.isShowMark = false
|
payMethodData.isShowMark = false;
|
||||||
payMethodData.clause = false
|
payMethodData.clause = false;
|
||||||
payMethodData.modeOfPayment = prop.type == 'credits'?'paypal':'stripe'
|
payMethodData.modeOfPayment =
|
||||||
payMethodData.modeOfPaymentDetail = 'ALIPAYHK'
|
prop.type == "credits" ? "paypal" : "stripe";
|
||||||
}
|
payMethodData.modeOfPaymentDetail = "ALIPAYHK";
|
||||||
|
};
|
||||||
const completePayment = () => {
|
const completePayment = () => {
|
||||||
setPaidBack()
|
setPaidBack();
|
||||||
emit('completePayment')
|
emit("completePayment");
|
||||||
}
|
};
|
||||||
return {
|
return {
|
||||||
store,
|
store,
|
||||||
...toRefs(payMethod),
|
...toRefs(payMethod),
|
||||||
@@ -214,11 +294,10 @@ export default defineComponent({
|
|||||||
payAffirm,
|
payAffirm,
|
||||||
setPaidBack,
|
setPaidBack,
|
||||||
completePayment,
|
completePayment,
|
||||||
}
|
};
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {};
|
||||||
};
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
turnToWindow(url: any) {
|
turnToWindow(url: any) {
|
||||||
@@ -236,7 +315,8 @@ export default defineComponent({
|
|||||||
width: 60rem;
|
width: 60rem;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
position: relative;
|
position: relative;
|
||||||
.generalModelTitle,.generalModelInfo{
|
.generalModelTitle,
|
||||||
|
.generalModelInfo {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
.payMethod_list {
|
.payMethod_list {
|
||||||
@@ -250,7 +330,7 @@ export default defineComponent({
|
|||||||
padding: 0 2rem;
|
padding: 0 2rem;
|
||||||
margin-bottom: 3rem;
|
margin-bottom: 3rem;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border: 2px solid #EFEFEF;
|
border: 2px solid #efefef;
|
||||||
border-radius: 2rem;
|
border-radius: 2rem;
|
||||||
height: 8rem;
|
height: 8rem;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@@ -268,10 +348,9 @@ export default defineComponent({
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
margin-right: 1rem;
|
margin-right: 1rem;
|
||||||
span {
|
span {
|
||||||
margin-left: .5rem;
|
margin-left: 0.5rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
> label:last-child {
|
> label:last-child {
|
||||||
@@ -296,7 +375,7 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.animation {
|
&.animation {
|
||||||
animation: shake .3s linear;
|
animation: shake 0.3s linear;
|
||||||
@keyframes shake {
|
@keyframes shake {
|
||||||
0% {
|
0% {
|
||||||
transform: translateX(0px);
|
transform: translateX(0px);
|
||||||
@@ -324,7 +403,6 @@ export default defineComponent({
|
|||||||
width: 29rem;
|
width: 29rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
.mark_loading {
|
.mark_loading {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@@ -348,7 +426,8 @@ export default defineComponent({
|
|||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mark_loading_btn,.mark_loading_btn2{
|
.mark_loading_btn,
|
||||||
|
.mark_loading_btn2 {
|
||||||
// border: #000;
|
// border: #000;
|
||||||
// color: #fff;
|
// color: #fff;
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -358,7 +437,7 @@ export default defineComponent({
|
|||||||
padding: 0 20px;
|
padding: 0 20px;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
padding: .3rem 4rem;
|
padding: 0.3rem 4rem;
|
||||||
background: #39215b;
|
background: #39215b;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
border: none;
|
border: none;
|
||||||
@@ -372,5 +451,4 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
@@ -1,6 +1,10 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="Falls">
|
<div class="Falls">
|
||||||
<div class="falls_item" v-fadeIn="isScroll" v-for="item in list" :key="item.id"
|
<div
|
||||||
|
class="falls_item"
|
||||||
|
v-fadeIn="isScroll"
|
||||||
|
v-for="item in list"
|
||||||
|
:key="item.id"
|
||||||
:style="{
|
:style="{
|
||||||
width: item.style.width + 'px',
|
width: item.style.width + 'px',
|
||||||
height: item.style.height + 'px',
|
height: item.style.height + 'px',
|
||||||
@@ -17,7 +21,9 @@
|
|||||||
height: item.style.imgHeihgt + 'px',
|
height: item.style.imgHeihgt + 'px',
|
||||||
}"
|
}"
|
||||||
/>
|
/>
|
||||||
<div v-if="item.original == 1" class="falls_item_user_Original">{{$t('newScaleImage.Original')}}</div>
|
<div v-if="item.original == 1" class="falls_item_user_Original">
|
||||||
|
{{ $t("newScaleImage.Original") }}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 文字 -->
|
<!-- 文字 -->
|
||||||
@@ -42,7 +48,11 @@
|
|||||||
<span>{{item.viewNums}}</span>
|
<span>{{item.viewNums}}</span>
|
||||||
</div> -->
|
</div> -->
|
||||||
<label @click="portfolioLike(item)">
|
<label @click="portfolioLike(item)">
|
||||||
<i v-if="true" class="fi fi-sr-thumbs-up" style="color:rgba(158, 158, 167);"></i>
|
<i
|
||||||
|
v-if="true"
|
||||||
|
class="fi fi-sr-thumbs-up"
|
||||||
|
style="color: rgba(158, 158, 167)"
|
||||||
|
></i>
|
||||||
<i v-else class="fi fi-rr-social-network"></i>
|
<i v-else class="fi fi-rr-social-network"></i>
|
||||||
<span>{{ item.likeNum }}</span>
|
<span>{{ item.likeNum }}</span>
|
||||||
</label>
|
</label>
|
||||||
@@ -62,7 +72,17 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { defineComponent,h ,toRefs,ref,reactive,onMounted,onBeforeDestroy,nextTick,provide,computed} from 'vue'
|
import {
|
||||||
|
defineComponent,
|
||||||
|
h,
|
||||||
|
toRefs,
|
||||||
|
ref,
|
||||||
|
reactive,
|
||||||
|
onMounted,
|
||||||
|
nextTick,
|
||||||
|
provide,
|
||||||
|
computed,
|
||||||
|
} from "vue";
|
||||||
import { gsap, TweenMax } from "gsap";
|
import { gsap, TweenMax } from "gsap";
|
||||||
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
@@ -78,19 +98,19 @@ export default defineComponent({
|
|||||||
itemWidth: {
|
itemWidth: {
|
||||||
type: Number,
|
type: Number,
|
||||||
default: 300,
|
default: 300,
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
setup() {
|
setup() {
|
||||||
let list = ref([])
|
let list = ref([]);
|
||||||
let wait_list = ref([])
|
let wait_list = ref([]);
|
||||||
let width = ref(300)
|
let width = ref(300);
|
||||||
let num_x = ref(1)
|
let num_x = ref(1);
|
||||||
let gap_x = ref(0)
|
let gap_x = ref(0);
|
||||||
let gap_y = ref(0)
|
let gap_y = ref(0);
|
||||||
let poss = ref([])
|
let poss = ref([]);
|
||||||
let loading = ref(false)
|
let loading = ref(false);
|
||||||
let computedHeight = 0
|
let computedHeight = 0;
|
||||||
let imgDom = ref()
|
let imgDom = ref();
|
||||||
return {
|
return {
|
||||||
list,
|
list,
|
||||||
wait_list,
|
wait_list,
|
||||||
@@ -102,24 +122,24 @@ export default defineComponent({
|
|||||||
loading,
|
loading,
|
||||||
computedHeight,
|
computedHeight,
|
||||||
imgDom,
|
imgDom,
|
||||||
}
|
};
|
||||||
},
|
},
|
||||||
directives: {
|
directives: {
|
||||||
fadeIn: {
|
fadeIn: {
|
||||||
mounted(el, binding) {
|
mounted(el, binding) {
|
||||||
let dom
|
let dom;
|
||||||
if (binding.value) {
|
if (binding.value) {
|
||||||
dom = document.querySelector('.works_page .page_content')
|
dom = document.querySelector(".works_page .page_content");
|
||||||
} else {
|
} else {
|
||||||
dom = document.querySelector('.homeRecommend_content_body')
|
dom = document.querySelector(".homeRecommend_content_body");
|
||||||
}
|
}
|
||||||
gsap.registerPlugin(ScrollTrigger);
|
gsap.registerPlugin(ScrollTrigger);
|
||||||
let tl1 = gsap.timeline();
|
let tl1 = gsap.timeline();
|
||||||
tl1.from(el,1, {y:'30px',opacity:0},)
|
tl1.from(el, 1, { y: "30px", opacity: 0 });
|
||||||
ScrollTrigger.create({
|
ScrollTrigger.create({
|
||||||
trigger: el, // 触发器元素
|
trigger: el, // 触发器元素
|
||||||
start: "top 90%", // 滚动触发器的起始滚动位置
|
start: "top 90%", // 滚动触发器的起始滚动位置
|
||||||
end: '100% 80%', // 滚动触发器的结束滚动位置
|
end: "100% 80%", // 滚动触发器的结束滚动位置
|
||||||
// markers: true, // 开启标注功能
|
// markers: true, // 开启标注功能
|
||||||
scrub: true,
|
scrub: true,
|
||||||
animation: tl1,
|
animation: tl1,
|
||||||
@@ -134,41 +154,46 @@ export default defineComponent({
|
|||||||
// }
|
// }
|
||||||
// }
|
// }
|
||||||
});
|
});
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.resize()
|
this.resize();
|
||||||
window.addEventListener("resize", this.resize);
|
window.addEventListener("resize", this.resize);
|
||||||
let domFalls = document.querySelector('.Falls')
|
let domFalls = document.querySelector(".Falls");
|
||||||
let domCss = getComputedStyle(domFalls);
|
let domCss = getComputedStyle(domFalls);
|
||||||
const paddingBottom = domCss.getPropertyValue('--paddingBottom').split('px')[0]*1;
|
const paddingBottom =
|
||||||
const textMarginTop = domCss.getPropertyValue('--textMarginTop').split('px')[0]*1;
|
domCss.getPropertyValue("--paddingBottom").split("px")[0] * 1;
|
||||||
const textHeight = domCss.getPropertyValue('--textHeight').split('px')[0]*1;
|
const textMarginTop =
|
||||||
const contentHeight = domCss.getPropertyValue('--contentHeight').split('px')[0]*1;
|
domCss.getPropertyValue("--textMarginTop").split("px")[0] * 1;
|
||||||
|
const textHeight =
|
||||||
|
domCss.getPropertyValue("--textHeight").split("px")[0] * 1;
|
||||||
|
const contentHeight =
|
||||||
|
domCss.getPropertyValue("--contentHeight").split("px")[0] * 1;
|
||||||
if (this.$props.isText) {
|
if (this.$props.isText) {
|
||||||
this.computedHeight = paddingBottom + textMarginTop + textHeight + contentHeight;
|
this.computedHeight =
|
||||||
|
paddingBottom + textMarginTop + textHeight + contentHeight;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
this.wait_list = []
|
this.wait_list = [];
|
||||||
window.removeEventListener("resize", this.resize);
|
window.removeEventListener("resize", this.resize);
|
||||||
},
|
},
|
||||||
// 挂载方法
|
// 挂载方法
|
||||||
methods: {
|
methods: {
|
||||||
clearData() {
|
clearData() {
|
||||||
this.wait_list = []
|
this.wait_list = [];
|
||||||
this.width = this.itemWidth
|
this.width = this.itemWidth;
|
||||||
this.num_x = 1
|
this.num_x = 1;
|
||||||
this.gap_x = 0
|
this.gap_x = 0;
|
||||||
this.gap_y = 0
|
this.gap_y = 0;
|
||||||
this.poss = []
|
this.poss = [];
|
||||||
this.loading = false
|
this.loading = false;
|
||||||
this.list = []
|
this.list = [];
|
||||||
this.resize()
|
this.resize();
|
||||||
if (this.imgDom) {
|
if (this.imgDom) {
|
||||||
this.imgDom.remove();
|
this.imgDom.remove();
|
||||||
this.imgDom = null
|
this.imgDom = null;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
push(arr) {
|
push(arr) {
|
||||||
@@ -181,8 +206,8 @@ export default defineComponent({
|
|||||||
deleteItem(id) {
|
deleteItem(id) {
|
||||||
for (let index = 0; index < this.list.length; index++) {
|
for (let index = 0; index < this.list.length; index++) {
|
||||||
if (this.list[index].id == id) {
|
if (this.list[index].id == id) {
|
||||||
this.list.splice(index,1)
|
this.list.splice(index, 1);
|
||||||
this.resize()
|
this.resize();
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -195,7 +220,7 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
|
|
||||||
let url = this.wait_list[0].canvasUrl || this.wait_list[0].url;
|
let url = this.wait_list[0].canvasUrl || this.wait_list[0].url;
|
||||||
let data = this.wait_list[0]
|
let data = this.wait_list[0];
|
||||||
this.imgDom = document.createElement("img");
|
this.imgDom = document.createElement("img");
|
||||||
this.imgDom.src = url;
|
this.imgDom.src = url;
|
||||||
this.imgDom.style.width = this.itemWidth + "px";
|
this.imgDom.style.width = this.itemWidth + "px";
|
||||||
@@ -204,7 +229,7 @@ export default defineComponent({
|
|||||||
this.imgDom.style.top = "-99999px";
|
this.imgDom.style.top = "-99999px";
|
||||||
document.body.appendChild(this.imgDom);
|
document.body.appendChild(this.imgDom);
|
||||||
this.imgDom.addEventListener("load", () => {
|
this.imgDom.addEventListener("load", () => {
|
||||||
if(!this.imgDom) return
|
if (!this.imgDom) return;
|
||||||
var idx = 0;
|
var idx = 0;
|
||||||
var pos_num = this.poss[idx];
|
var pos_num = this.poss[idx];
|
||||||
for (var i = 1; i < this.poss.length; i++) {
|
for (var i = 1; i < this.poss.length; i++) {
|
||||||
@@ -218,19 +243,18 @@ export default defineComponent({
|
|||||||
let height = this.imgDom.offsetHeight + this.computedHeight;
|
let height = this.imgDom.offsetHeight + this.computedHeight;
|
||||||
let top = this.poss[idx] + this.gap_y;
|
let top = this.poss[idx] + this.gap_y;
|
||||||
let left = (idx + 1) * this.gap_x + idx * width;
|
let left = (idx + 1) * this.gap_x + idx * width;
|
||||||
let imgHeight = height - this.computedHeight
|
let imgHeight = height - this.computedHeight;
|
||||||
this.poss[idx] = top + height;
|
this.poss[idx] = top + height;
|
||||||
let obj = {
|
let obj = {
|
||||||
canvasUrl: url,
|
canvasUrl: url,
|
||||||
style: { width, height, top, left, imgHeight },
|
style: { width, height, top, left, imgHeight },
|
||||||
...data
|
...data,
|
||||||
};
|
};
|
||||||
this.list.push(obj);
|
this.list.push(obj);
|
||||||
this.imgDom.remove();
|
this.imgDom.remove();
|
||||||
this.imgDom = null
|
this.imgDom = null;
|
||||||
this.wait_list.splice(0, 1);
|
this.wait_list.splice(0, 1);
|
||||||
this.$el.style.height =
|
this.$el.style.height = Math.max(...this.poss) + this.gap_y + "px";
|
||||||
Math.max(...this.poss) + this.gap_y + "px";
|
|
||||||
if (this.wait_list.length <= 0) {
|
if (this.wait_list.length <= 0) {
|
||||||
this.loading = false;
|
this.loading = false;
|
||||||
this.$emit("loadend");
|
this.$emit("loadend");
|
||||||
@@ -254,8 +278,7 @@ export default defineComponent({
|
|||||||
for (var i = 0; i < num_x; i++) poss.push(0);
|
for (var i = 0; i < num_x; i++) poss.push(0);
|
||||||
this.poss = poss;
|
this.poss = poss;
|
||||||
this.reset();
|
this.reset();
|
||||||
})
|
});
|
||||||
|
|
||||||
},
|
},
|
||||||
reset() {
|
reset() {
|
||||||
for (let i = 0; i < this.list.length; i++) {
|
for (let i = 0; i < this.list.length; i++) {
|
||||||
@@ -277,16 +300,16 @@ export default defineComponent({
|
|||||||
this.$el.style.height = Math.max(...this.poss) + this.gap_y + "px";
|
this.$el.style.height = Math.max(...this.poss) + this.gap_y + "px";
|
||||||
},
|
},
|
||||||
setItemDetail(data) {
|
setItemDetail(data) {
|
||||||
this.$emit('getImgScale',data)
|
this.$emit("getImgScale", data);
|
||||||
},
|
},
|
||||||
portfolioLike(data) {
|
portfolioLike(data) {
|
||||||
this.$emit('setPortfolioLike',data)
|
this.$emit("setPortfolioLike", data);
|
||||||
}
|
|
||||||
},
|
},
|
||||||
})
|
},
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang='less' scoped>
|
<style lang="less" scoped>
|
||||||
.Falls {
|
.Falls {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: auto;
|
height: auto;
|
||||||
@@ -319,7 +342,7 @@ export default defineComponent({
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
transition: all .3s;
|
transition: all 0.3s;
|
||||||
}
|
}
|
||||||
.falls_item_user_Original {
|
.falls_item_user_Original {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
@@ -400,14 +423,16 @@ export default defineComponent({
|
|||||||
> label {
|
> label {
|
||||||
// cursor: pointer;
|
// cursor: pointer;
|
||||||
}
|
}
|
||||||
>label,>div{
|
> label,
|
||||||
|
> div {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
i {
|
i {
|
||||||
// font-size: 1.8rem;
|
// font-size: 1.8rem;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
svg,i{
|
svg,
|
||||||
|
i {
|
||||||
color: #9e9ea7;
|
color: #9e9ea7;
|
||||||
display: flex;
|
display: flex;
|
||||||
// width: 10px;
|
// width: 10px;
|
||||||
@@ -422,8 +447,6 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@@ -16,10 +16,32 @@
|
|||||||
>
|
>
|
||||||
<div class="generalModel_btn">
|
<div class="generalModel_btn">
|
||||||
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
|
<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">
|
<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" />
|
<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="#000"/>
|
<rect
|
||||||
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="#000"/>
|
x="32.5063"
|
||||||
|
y="12"
|
||||||
|
width="3"
|
||||||
|
height="29"
|
||||||
|
rx="1.5"
|
||||||
|
transform="rotate(45 32.5063 12)"
|
||||||
|
fill="#000"
|
||||||
|
/>
|
||||||
|
<rect
|
||||||
|
x="34.6274"
|
||||||
|
y="32.5059"
|
||||||
|
width="3"
|
||||||
|
height="29"
|
||||||
|
rx="1.5"
|
||||||
|
transform="rotate(135 34.6274 32.5059)"
|
||||||
|
fill="#000"
|
||||||
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -39,7 +61,15 @@
|
|||||||
></a-select>
|
></a-select>
|
||||||
</div>
|
</div>
|
||||||
<div class="admin_state_item">
|
<div class="admin_state_item">
|
||||||
<span>Project <span v-show="buildType == 'SERIES_DESIGN' || buildType == 'SINGLE_DESIGN'">*</span></span>
|
<span
|
||||||
|
>Project
|
||||||
|
<span
|
||||||
|
v-show="
|
||||||
|
buildType == 'SERIES_DESIGN' || buildType == 'SINGLE_DESIGN'
|
||||||
|
"
|
||||||
|
>*</span
|
||||||
|
></span
|
||||||
|
>
|
||||||
<a-select
|
<a-select
|
||||||
v-model:value="projectData"
|
v-model:value="projectData"
|
||||||
show-search
|
show-search
|
||||||
@@ -82,7 +112,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<!-- toProductimg -->
|
<!-- toProductimg -->
|
||||||
<div v-show="buildType == 'TO_PRODUCT_IMAGE'" class="admin_state_item">
|
<div v-show="buildType == 'TO_PRODUCT_IMAGE'" class="admin_state_item">
|
||||||
<span>{{$t('ProductImg.Similarity')}}</span>
|
<span>{{ $t("ProductImg.Similarity") }}</span>
|
||||||
<div class="sliderAndImput" style="width: 200px">
|
<div class="sliderAndImput" style="width: 200px">
|
||||||
<!-- <a-slider class="system_silder"
|
<!-- <a-slider class="system_silder"
|
||||||
v-model:value="similarity"
|
v-model:value="similarity"
|
||||||
@@ -90,33 +120,40 @@
|
|||||||
:step="5"
|
:step="5"
|
||||||
>
|
>
|
||||||
</a-slider> -->
|
</a-slider> -->
|
||||||
<div style="display: flex;">
|
<div style="display: flex">
|
||||||
<input type="number" readonly v-model="similarity[0]">
|
<input type="number" readonly v-model="similarity[0]" />
|
||||||
<div style="margin: 0 1rem;">-</div>
|
<div style="margin: 0 1rem">-</div>
|
||||||
<input type="number" readonly v-model="similarity[1]">
|
<input type="number" readonly v-model="similarity[1]" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-show="buildType == 'RELIGHT'" class="admin_state_item">
|
<div v-show="buildType == 'RELIGHT'" class="admin_state_item">
|
||||||
<span>{{$t('ProductImg.RelightDirection')}}</span>
|
<span>{{ $t("ProductImg.RelightDirection") }}</span>
|
||||||
<a-select style="width: 200px" v-model:value="relightDirection" :options="relightDirectionList"></a-select>
|
<a-select
|
||||||
|
style="width: 200px"
|
||||||
|
v-model:value="relightDirection"
|
||||||
|
:options="relightDirectionList"
|
||||||
|
></a-select>
|
||||||
</div>
|
</div>
|
||||||
<div v-show="buildType == 'RELIGHT'" class="admin_state_item">
|
<div v-show="buildType == 'RELIGHT'" class="admin_state_item">
|
||||||
<span>{{$t('ProductImg.Highlight')}}</span>
|
<span>{{ $t("ProductImg.Highlight") }}</span>
|
||||||
<div class="sliderAndImput" style="width: 200px">
|
<div class="sliderAndImput" style="width: 200px">
|
||||||
<a-slider class="system_silder"
|
<a-slider
|
||||||
|
class="system_silder"
|
||||||
v-model:value="brightenValue"
|
v-model:value="brightenValue"
|
||||||
:tooltipVisible="false"
|
:tooltipVisible="false"
|
||||||
|
|
||||||
:max="3"
|
:max="3"
|
||||||
:min="1"
|
:min="1"
|
||||||
:step="0.1"
|
:step="0.1"
|
||||||
>
|
>
|
||||||
</a-slider>
|
</a-slider>
|
||||||
<input type="number" readonly v-model="brightenValue">
|
<input type="number" readonly v-model="brightenValue" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-show="buildType == 'TO_PRODUCT_IMAGE' || buildType == 'relight'" class="admin_state_item">
|
<div
|
||||||
|
v-show="buildType == 'TO_PRODUCT_IMAGE' || buildType == 'relight'"
|
||||||
|
class="admin_state_item"
|
||||||
|
>
|
||||||
<span>Keyword</span>
|
<span>Keyword</span>
|
||||||
<input
|
<input
|
||||||
v-model="generateText"
|
v-model="generateText"
|
||||||
@@ -131,33 +168,60 @@
|
|||||||
<img :src="item.designOutfitUrl||item.url" alt="">
|
<img :src="item.designOutfitUrl||item.url" alt="">
|
||||||
</div>
|
</div>
|
||||||
</div> -->
|
</div> -->
|
||||||
<div class="productImg_content_item_imgBox generalScroll upload_item" v-if="buildType && buildType != 'SERIES_DESIGN' && buildType != 'SINGLE_DESIGN'" v-mousewheel>
|
|
||||||
<div class="content_item_imgBox_itemImg" v-for="item in uploadElement" :key="item">
|
|
||||||
<div
|
<div
|
||||||
class="imgBox"
|
class="productImg_content_item_imgBox generalScroll upload_item"
|
||||||
@click="()=>item.isChecked = !item.isChecked"
|
v-if="
|
||||||
|
buildType &&
|
||||||
|
buildType != 'SERIES_DESIGN' &&
|
||||||
|
buildType != 'SINGLE_DESIGN'
|
||||||
|
"
|
||||||
|
v-mousewheel
|
||||||
>
|
>
|
||||||
<img :class="[item?.isChecked?'active':'']" :src="item?.url" class="upload_img"/>
|
<div
|
||||||
|
class="content_item_imgBox_itemImg"
|
||||||
|
v-for="item in uploadElement"
|
||||||
|
:key="item"
|
||||||
|
>
|
||||||
|
<div class="imgBox" @click="() => (item.isChecked = !item.isChecked)">
|
||||||
|
<img
|
||||||
|
:class="[item?.isChecked ? 'active' : '']"
|
||||||
|
:src="item?.url"
|
||||||
|
class="upload_img"
|
||||||
|
/>
|
||||||
<a-checkbox v-model:checked="item.isChecked"></a-checkbox>
|
<a-checkbox v-model:checked="item.isChecked"></a-checkbox>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="content_item_imgBox_itemImg" v-for="(file, index) in fileList" :key="file">
|
<div
|
||||||
<div class="upload_file_item_content" v-show="file?.status === 'uploading'" style="display: flex;align-items: center;">
|
class="content_item_imgBox_itemImg"
|
||||||
|
v-for="(file, index) in fileList"
|
||||||
|
:key="file"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="upload_file_item_content"
|
||||||
|
v-show="file?.status === 'uploading'"
|
||||||
|
style="display: flex; align-items: center"
|
||||||
|
>
|
||||||
<a-spin size="large" />
|
<a-spin size="large" />
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="imgBox"
|
class="imgBox"
|
||||||
v-show="file?.status === 'done'"
|
v-show="file?.status === 'done'"
|
||||||
@click="()=>file.isChecked = !file.isChecked"
|
@click="() => (file.isChecked = !file.isChecked)"
|
||||||
>
|
>
|
||||||
<img :class="[file?.isChecked?'active':'']" :src="file?.imgUrl" class="upload_img"/>
|
<img
|
||||||
|
:class="[file?.isChecked ? 'active' : '']"
|
||||||
|
:src="file?.imgUrl"
|
||||||
|
class="upload_img"
|
||||||
|
/>
|
||||||
<a-checkbox v-model:checked="file.isChecked"></a-checkbox>
|
<a-checkbox v-model:checked="file.isChecked"></a-checkbox>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="upload_file_item upload_component">
|
<div class="upload_file_item upload_component">
|
||||||
<!-- :action="uploadUrl + '/api/history/toProductImageElementUpload'" -->
|
<!-- :action="uploadUrl + '/api/history/toProductImageElementUpload'" -->
|
||||||
<a-upload
|
<a-upload
|
||||||
:action="getUploadUrl() + '/api/history/toProductImageElementUpload'"
|
:action="
|
||||||
|
getUploadUrl() + '/api/history/toProductImageElementUpload'
|
||||||
|
"
|
||||||
list-type="picture-card"
|
list-type="picture-card"
|
||||||
:capture="null"
|
:capture="null"
|
||||||
:headers="{ Authorization: getCookie('token') }"
|
:headers="{ Authorization: getCookie('token') }"
|
||||||
@@ -171,31 +235,27 @@
|
|||||||
accept=".jpg,.png,.jpeg,.bmp"
|
accept=".jpg,.png,.jpeg,.bmp"
|
||||||
@change="(file) => fileUploadChange(file)"
|
@change="(file) => fileUploadChange(file)"
|
||||||
>
|
>
|
||||||
<div
|
<div class="upload_tip_block">
|
||||||
class="upload_tip_block"
|
|
||||||
>
|
|
||||||
<i class="fi fi-br-upload"></i>
|
<i class="fi fi-br-upload"></i>
|
||||||
<!-- <img class="upload_img_icon" src="@/assets/images/homePage/add_file.png"> -->
|
<!-- <img class="upload_img_icon" src="@/assets/images/homePage/add_file.png"> -->
|
||||||
</div>
|
</div>
|
||||||
</a-upload>
|
</a-upload>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<!-- <div class="admin_state_item" style="width: 100%;">
|
<!-- <div class="admin_state_item" style="width: 100%;">
|
||||||
<span style="margin: 0;">Generation time：19min</span>
|
<span style="margin: 0;">Generation time：19min</span>
|
||||||
</div> -->
|
</div> -->
|
||||||
<div v-show="buildType" class="admin_state_item" style="width: 100%;">
|
<div v-show="buildType" class="admin_state_item" style="width: 100%">
|
||||||
<span style="margin: 0;">Cost credit：{{credits * numberOfImages}}</span>
|
<span style="margin: 0"
|
||||||
|
>Cost credit：{{ credits * numberOfImages }}</span
|
||||||
|
>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="allUserPoeration_btn admin_page">
|
<div class="allUserPoeration_btn admin_page">
|
||||||
<!-- <div class="admin_search_item" @click="cancelDsign">
|
<!-- <div class="admin_search_item" @click="cancelDsign">
|
||||||
Close
|
Close
|
||||||
</div> -->
|
</div> -->
|
||||||
<div class="admin_search_item" @click="setOk">
|
<div class="admin_search_item" @click="setOk">OK</div>
|
||||||
OK
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</a-modal>
|
</a-modal>
|
||||||
<div class="mark_loading" v-show="loadingShow">
|
<div class="mark_loading" v-show="loadingShow">
|
||||||
@@ -203,267 +263,315 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import { defineComponent, computed, reactive, watch, onMounted, h, nextTick, toRefs } from "vue";
|
import {
|
||||||
|
defineComponent,
|
||||||
|
computed,
|
||||||
|
reactive,
|
||||||
|
watch,
|
||||||
|
onMounted,
|
||||||
|
h,
|
||||||
|
nextTick,
|
||||||
|
toRefs,
|
||||||
|
} from "vue";
|
||||||
import { LoadingOutlined } from "@ant-design/icons-vue";
|
import { LoadingOutlined } from "@ant-design/icons-vue";
|
||||||
import { Https } from "@/tool/https";
|
import { Https } from "@/tool/https";
|
||||||
import { Modal, message } from "ant-design-vue";
|
import { Modal, message } from "ant-design-vue";
|
||||||
import { getCookie, setCookie } from "@/tool/cookie";
|
import { getCookie, setCookie } from "@/tool/cookie";
|
||||||
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
|
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
|
||||||
import { getUploadUrl, isMoible } from "@/tool/util";
|
import { getUploadUrl, isMoible } from "@/tool/util";
|
||||||
import dayjs, { Dayjs } from 'dayjs';
|
import dayjs, { Dayjs } from "dayjs";
|
||||||
import { useStore } from "vuex";
|
import { useStore } from "vuex";
|
||||||
import { useI18n } from "vue-i18n";
|
import { useI18n } from "vue-i18n";
|
||||||
import {getMinioUrl} from '@/tool/util'
|
import { getMinioUrl } from "@/tool/util";
|
||||||
const md5 = require("md5");
|
import md5 from "md5";
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
components: {
|
components: {},
|
||||||
},
|
|
||||||
props: {
|
props: {
|
||||||
cloudList: {
|
cloudList: {
|
||||||
type: Array,
|
type: Array,
|
||||||
default:[]
|
default: [],
|
||||||
}
|
|
||||||
},
|
},
|
||||||
emits: ['getContentList'],
|
},
|
||||||
|
emits: ["getContentList"],
|
||||||
setup(props, { emit }) {
|
setup(props, { emit }) {
|
||||||
const store = useStore();
|
const store = useStore();
|
||||||
let operations = reactive({
|
let operations = reactive({
|
||||||
operationsModal: false,
|
operationsModal: false,
|
||||||
loadingShow: false,
|
loadingShow: false,
|
||||||
})
|
});
|
||||||
let operationsData = reactive({
|
let operationsData = reactive({
|
||||||
buildType:'',
|
buildType: "",
|
||||||
numberOfImages:'',
|
numberOfImages: "",
|
||||||
credits: 0,
|
credits: 0,
|
||||||
exhibitionImgList: [], //选择的图片
|
exhibitionImgList: [], //选择的图片
|
||||||
projectData: null, //批量id
|
projectData: null, //批量id
|
||||||
objectList: [],
|
objectList: [],
|
||||||
porjectName:'',//任务名字
|
porjectName: "", //任务名字
|
||||||
//toProduct
|
//toProduct
|
||||||
generateText:'',//输入的内容
|
generateText: "", //输入的内容
|
||||||
similarity: [20, 40],
|
similarity: [20, 40],
|
||||||
brightenValue: 1, //亮度
|
brightenValue: 1, //亮度
|
||||||
relightDirection:'Right Light',//打光方向
|
relightDirection: "Right Light", //打光方向
|
||||||
relightDirectionList: [
|
relightDirectionList: [
|
||||||
{
|
{
|
||||||
value:'Right Light',
|
value: "Right Light",
|
||||||
label:useI18n().t('ProductImg.RightLight')
|
label: useI18n().t("ProductImg.RightLight"),
|
||||||
},{
|
},
|
||||||
value:'Left Light',
|
{
|
||||||
label:useI18n().t('ProductImg.LeftLight')
|
value: "Left Light",
|
||||||
},{
|
label: useI18n().t("ProductImg.LeftLight"),
|
||||||
value:'Top Light',
|
},
|
||||||
label:useI18n().t('ProductImg.TopLight')
|
{
|
||||||
},{
|
value: "Top Light",
|
||||||
value:'Bottom Light',
|
label: useI18n().t("ProductImg.TopLight"),
|
||||||
label:useI18n().t('ProductImg.BottomLight')
|
},
|
||||||
}
|
{
|
||||||
|
value: "Bottom Light",
|
||||||
|
label: useI18n().t("ProductImg.BottomLight"),
|
||||||
|
},
|
||||||
],
|
],
|
||||||
fileList: [],
|
fileList: [],
|
||||||
uploadElement: [],
|
uploadElement: [],
|
||||||
placeholder:'',
|
placeholder: "",
|
||||||
})
|
});
|
||||||
const getUploadElement = () => {
|
const getUploadElement = () => {
|
||||||
operations.loadingShow = true
|
operations.loadingShow = true;
|
||||||
let value = {
|
let value = {
|
||||||
id: operationsData.projectData,
|
id: operationsData.projectData,
|
||||||
moduleList:['uploadElement']
|
moduleList: ["uploadElement"],
|
||||||
}
|
};
|
||||||
operationsData.placeholder = 'Batch_' + setPlaceholder()
|
operationsData.placeholder = "Batch_" + setPlaceholder();
|
||||||
Https.axiosPost(Https.httpUrls.getModuleContent,value).then(async (rv)=>{
|
Https.axiosPost(Https.httpUrls.getModuleContent, value)
|
||||||
operationsData.uploadElement = rv.uploadElement
|
.then(async (rv) => {
|
||||||
operations.loadingShow = false
|
operationsData.uploadElement = rv.uploadElement;
|
||||||
}).catch((err)=>{
|
operations.loadingShow = false;
|
||||||
operations.loadingShow = false
|
|
||||||
})
|
})
|
||||||
}
|
.catch((err) => {
|
||||||
|
operations.loadingShow = false;
|
||||||
|
});
|
||||||
|
};
|
||||||
let init = (projectData, buildType) => {
|
let init = (projectData, buildType) => {
|
||||||
operations.operationsModal = true
|
operations.operationsModal = true;
|
||||||
clearData()
|
clearData();
|
||||||
if (projectData?.id) {
|
if (projectData?.id) {
|
||||||
operationsData.projectData = {label:projectData.name,value:projectData.id}
|
operationsData.projectData = {
|
||||||
getUploadElement()
|
label: projectData.name,
|
||||||
}
|
value: projectData.id,
|
||||||
if(buildType.value)operationsData.buildType = buildType
|
};
|
||||||
|
getUploadElement();
|
||||||
}
|
}
|
||||||
|
if (buildType.value) operationsData.buildType = buildType;
|
||||||
|
};
|
||||||
const clearData = () => {
|
const clearData = () => {
|
||||||
operationsData.porjectName = ''
|
operationsData.porjectName = "";
|
||||||
operationsData.generateText = ''
|
operationsData.generateText = "";
|
||||||
operationsData.similarity = [20,40]
|
operationsData.similarity = [20, 40];
|
||||||
operationsData.brightenValue = 1
|
operationsData.brightenValue = 1;
|
||||||
operationsData.fileList = []
|
operationsData.fileList = [];
|
||||||
operationsData.uploadElement = []
|
operationsData.uploadElement = [];
|
||||||
}
|
};
|
||||||
const changeProject = () => {
|
const changeProject = () => {
|
||||||
getUploadElement()
|
getUploadElement();
|
||||||
}
|
};
|
||||||
const changeBuildType = () => {
|
const changeBuildType = () => {
|
||||||
// operationsData.exhibitionImgList = []
|
// operationsData.exhibitionImgList = []
|
||||||
operationsData.projectData = null
|
operationsData.projectData = null;
|
||||||
props.cloudList.forEach((item) => {
|
props.cloudList.forEach((item) => {
|
||||||
if (item.value == operationsData.buildType) {
|
if (item.value == operationsData.buildType) {
|
||||||
operationsData.credits = item.consumption
|
operationsData.credits = item.consumption;
|
||||||
}
|
|
||||||
})
|
|
||||||
getHistoryProjectList()
|
|
||||||
}
|
}
|
||||||
|
});
|
||||||
|
getHistoryProjectList();
|
||||||
|
};
|
||||||
const getGenerateCloudImgList = (type) => {
|
const getGenerateCloudImgList = (type) => {
|
||||||
let list = []
|
let list = [];
|
||||||
if(type == 'SINGLE_DESIGN'|| type == 'SERIES_DESIGN')return list
|
if (type == "SINGLE_DESIGN" || type == "SERIES_DESIGN") return list;
|
||||||
let selectList = []
|
let selectList = [];
|
||||||
let fileList = operationsData.fileList.filter((item)=>item.isChecked)
|
let fileList = operationsData.fileList.filter((item) => item.isChecked);
|
||||||
let uploadElement = operationsData.uploadElement.filter((item)=>item.isChecked)
|
let uploadElement = operationsData.uploadElement.filter(
|
||||||
if(fileList)selectList.push(...fileList)
|
(item) => item.isChecked
|
||||||
if(uploadElement)selectList.push(...uploadElement)
|
);
|
||||||
|
if (fileList) selectList.push(...fileList);
|
||||||
|
if (uploadElement) selectList.push(...uploadElement);
|
||||||
|
|
||||||
selectList.forEach((item) => {
|
selectList.forEach((item) => {
|
||||||
let obj = {
|
let obj = {};
|
||||||
|
if (type == "POSE_TRANSFER") {
|
||||||
}
|
|
||||||
if(type == 'POSE_TRANSFER'){
|
|
||||||
obj = {
|
obj = {
|
||||||
poseId: 1,
|
poseId: 1,
|
||||||
productImage:getMinioUrl(item.imgUrl)
|
productImage: getMinioUrl(item.imgUrl),
|
||||||
}
|
};
|
||||||
} else {
|
} else {
|
||||||
obj = {
|
obj = {
|
||||||
elementId: item.id,
|
elementId: item.id,
|
||||||
elementType:item.type||'ProductElement'
|
elementType: item.type || "ProductElement",
|
||||||
}
|
};
|
||||||
}
|
|
||||||
list.push(obj)
|
|
||||||
})
|
|
||||||
return list
|
|
||||||
}
|
}
|
||||||
|
list.push(obj);
|
||||||
|
});
|
||||||
|
return list;
|
||||||
|
};
|
||||||
let getPorductImg = () => {
|
let getPorductImg = () => {
|
||||||
let modularData = store.state.UploadFilesModule.modularData
|
let modularData = store.state.UploadFilesModule.modularData;
|
||||||
let list = []
|
let list = [];
|
||||||
if(operationsData.buildType == 'toProductImage' || operationsData.buildType == 'relight'){
|
if (
|
||||||
let productOrRelight = []
|
operationsData.buildType == "toProductImage" ||
|
||||||
if(operationsData.buildType == 'toProductImage')productOrRelight = modularData.design.likeData
|
operationsData.buildType == "relight"
|
||||||
if(operationsData.buildType == 'relight')productOrRelight = modularData.toProduct
|
) {
|
||||||
|
let productOrRelight = [];
|
||||||
|
if (operationsData.buildType == "toProductImage")
|
||||||
|
productOrRelight = modularData.design.likeData;
|
||||||
|
if (operationsData.buildType == "relight")
|
||||||
|
productOrRelight = modularData.toProduct;
|
||||||
|
|
||||||
productOrRelight.forEach((item) => {
|
productOrRelight.forEach((item) => {
|
||||||
if(!item.id)return
|
if (!item.id) return;
|
||||||
let obj = {
|
let obj = {
|
||||||
"createTime": "",
|
createTime: "",
|
||||||
"elementId": 0,
|
elementId: 0,
|
||||||
"elementType": "",
|
elementType: "",
|
||||||
"id": 0,
|
id: 0,
|
||||||
"isLike": 0,
|
isLike: 0,
|
||||||
"taskId": "",
|
taskId: "",
|
||||||
"toProductImageRecordId": 0,
|
toProductImageRecordId: 0,
|
||||||
"url": "",
|
url: "",
|
||||||
|
};
|
||||||
|
obj.elementId = item.designOutfitId;
|
||||||
|
obj.elementType = "DesignOutfit";
|
||||||
|
if (operationsData.buildType == "relight") {
|
||||||
|
obj.elementId = item.id;
|
||||||
|
obj.elementType = "ToProductImage";
|
||||||
}
|
}
|
||||||
obj.elementId = item.designOutfitId
|
list.push(obj);
|
||||||
obj.elementType = 'DesignOutfit'
|
});
|
||||||
if(operationsData.buildType == 'relight'){
|
|
||||||
obj.elementId = item.id
|
|
||||||
obj.elementType = 'ToProductImage'
|
|
||||||
}
|
|
||||||
list.push(obj)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
return list
|
|
||||||
}
|
}
|
||||||
|
return list;
|
||||||
|
};
|
||||||
const getImageStrength = (num) => {
|
const getImageStrength = (num) => {
|
||||||
let imageStrength = num == 100? 95 :num
|
let imageStrength = num == 100 ? 95 : num;
|
||||||
return imageStrength;
|
return imageStrength;
|
||||||
};
|
};
|
||||||
const getPoseTransformData = () => {
|
const getPoseTransformData = () => {
|
||||||
let list = []
|
let list = [];
|
||||||
let toProduct = store.state.UploadFilesModule.modularData.toProduct
|
let toProduct = store.state.UploadFilesModule.modularData.toProduct;
|
||||||
toProduct.forEach((item) => {
|
toProduct.forEach((item) => {
|
||||||
let obj = {
|
let obj = {
|
||||||
poseId: 1,
|
poseId: 1,
|
||||||
productImage:getMinioUrl(item.url)
|
productImage: getMinioUrl(item.url),
|
||||||
}
|
};
|
||||||
list.push(obj)
|
list.push(obj);
|
||||||
})
|
});
|
||||||
return list
|
return list;
|
||||||
}
|
};
|
||||||
let setAddData = () => {
|
let setAddData = () => {
|
||||||
let buildTypeCorresponding = {
|
let buildTypeCorresponding = {
|
||||||
SINGLE_DESIGN: "design",
|
SINGLE_DESIGN: "design",
|
||||||
SERIES_DESIGN: "design",
|
SERIES_DESIGN: "design",
|
||||||
TO_PRODUCT_IMAGE: "toProductImage",
|
TO_PRODUCT_IMAGE: "toProductImage",
|
||||||
RELIGHT: "relight",
|
RELIGHT: "relight",
|
||||||
POSE_TRANSFER:"poseTransfer"
|
POSE_TRANSFER: "poseTransfer",
|
||||||
}
|
};
|
||||||
return {
|
return {
|
||||||
"buildType": buildTypeCorresponding[operationsData.buildType],
|
buildType: buildTypeCorresponding[operationsData.buildType],
|
||||||
nums: operationsData.numberOfImages,
|
nums: operationsData.numberOfImages,
|
||||||
projectId: operationsData.projectData,
|
projectId: operationsData.projectData,
|
||||||
name: operationsData.porjectName || operationsData.projectData,
|
name: operationsData.porjectName || operationsData.projectData,
|
||||||
//productimg
|
//productimg
|
||||||
toProductImage: {
|
toProductImage: {
|
||||||
prompt: operationsData.generateText, //输入的内容
|
prompt: operationsData.generateText, //输入的内容
|
||||||
toProductImageVOList:getGenerateCloudImgList(operationsData.buildType),//选择的图片
|
toProductImageVOList: getGenerateCloudImgList(
|
||||||
|
operationsData.buildType
|
||||||
|
), //选择的图片
|
||||||
// toProductImageVOList:getPorductImg(),//选择的图片
|
// toProductImageVOList:getPorductImg(),//选择的图片
|
||||||
projectId: operationsData.projectData,
|
projectId: operationsData.projectData,
|
||||||
direction: operationsData.relightDirection, //打光方向
|
direction: operationsData.relightDirection, //打光方向
|
||||||
brightenValue: operationsData.brightenValue,
|
brightenValue: operationsData.brightenValue,
|
||||||
imageStrength: (100 - getImageStrength()) / 100,
|
imageStrength: (100 - getImageStrength()) / 100,
|
||||||
imageStrengthMin:(100 - getImageStrength(operationsData.similarity[1]))/100,
|
imageStrengthMin:
|
||||||
imageStrengthMax:(100 - getImageStrength(operationsData.similarity[0]))/100,
|
(100 - getImageStrength(operationsData.similarity[1])) / 100,
|
||||||
|
imageStrengthMax:
|
||||||
|
(100 - getImageStrength(operationsData.similarity[0])) / 100,
|
||||||
},
|
},
|
||||||
//poseTransform
|
//poseTransform
|
||||||
// poseTransform:getPoseTransformData(),
|
// poseTransform:getPoseTransformData(),
|
||||||
poseTransform:operationsData.buildType == 'POSE_TRANSFER'?getGenerateCloudImgList('POSE_TRANSFER'):[],
|
poseTransform:
|
||||||
|
operationsData.buildType == "POSE_TRANSFER"
|
||||||
|
? getGenerateCloudImgList("POSE_TRANSFER")
|
||||||
|
: [],
|
||||||
private: operationsData.projectData,
|
private: operationsData.projectData,
|
||||||
ToProductImageDTO: operationsData.projectData,
|
ToProductImageDTO: operationsData.projectData,
|
||||||
}
|
};
|
||||||
}
|
};
|
||||||
let cancelDsign = () => {
|
let cancelDsign = () => {
|
||||||
operationsData.buildType=''
|
operationsData.buildType = "";
|
||||||
operationsData.numberOfImages=''
|
operationsData.numberOfImages = "";
|
||||||
operations.operationsModal = false
|
operations.operationsModal = false;
|
||||||
}
|
};
|
||||||
let setOk = () => {
|
let setOk = () => {
|
||||||
let data
|
let data;
|
||||||
data = setAddData()
|
data = setAddData();
|
||||||
if(operationsData.buildType == 'TO_PRODUCT_IMAGE'){
|
if (operationsData.buildType == "TO_PRODUCT_IMAGE") {
|
||||||
if(data.toProductImage.toProductImageVOList.length == 0)return message.warning("Please upload the picture first.")
|
if (data.toProductImage.toProductImageVOList.length == 0)
|
||||||
|
return message.warning("Please upload the picture first.");
|
||||||
// if(data.toProductImage.toProductImageVOList.length == 0)return message.warning("You need to go to the Design module and generate a design result first before you can use the 'To Product Image' cloud generation feature.")
|
// if(data.toProductImage.toProductImageVOList.length == 0)return message.warning("You need to go to the Design module and generate a design result first before you can use the 'To Product Image' cloud generation feature.")
|
||||||
}else if(operationsData.buildType == 'RELIGHT'){
|
} else if (operationsData.buildType == "RELIGHT") {
|
||||||
if(data.toProductImage.toProductImageVOList.length == 0)return message.warning("Please upload the picture first.")
|
if (data.toProductImage.toProductImageVOList.length == 0)
|
||||||
|
return message.warning("Please upload the picture first.");
|
||||||
// if(data.toProductImage.toProductImageVOList.length == 0)return message.warning("You need to go to the 'To Product Image' module and generate a result first before you can use the 'Relight' cloud generation feature.")
|
// if(data.toProductImage.toProductImageVOList.length == 0)return message.warning("You need to go to the 'To Product Image' module and generate a result first before you can use the 'Relight' cloud generation feature.")
|
||||||
}else if(operationsData.buildType == 'POSE_TRANSFER'){
|
} else if (operationsData.buildType == "POSE_TRANSFER") {
|
||||||
if(data.poseTransform.length == 0)return message.warning("Please upload the picture first.")
|
if (data.poseTransform.length == 0)
|
||||||
|
return message.warning("Please upload the picture first.");
|
||||||
// if(data.poseTransform.length == 0)return message.warning("You must first generate results in the 'To Product Image' module before you can use the 'Transfer Pose' cloud generation feature.")
|
// if(data.poseTransform.length == 0)return message.warning("You must first generate results in the 'To Product Image' module before you can use the 'Transfer Pose' cloud generation feature.")
|
||||||
}
|
}
|
||||||
if(operationsData.buildType == 'DESIGN' && !operationsData.projectData)return message.warning('Please select a project')
|
if (operationsData.buildType == "DESIGN" && !operationsData.projectData)
|
||||||
if(!data.buildType || !data.nums || !data.name || (operationsData.buildType == 'DESIGN' && !operationsData.projectData))return message.warning('Please check the input box marked with *')
|
return message.warning("Please select a project");
|
||||||
operations.loadingShow = true
|
if (
|
||||||
Https.axiosPost(Https.httpUrls.designCloud, data).then(
|
!data.buildType ||
|
||||||
(rv) => {
|
!data.nums ||
|
||||||
|
!data.name ||
|
||||||
|
(operationsData.buildType == "DESIGN" && !operationsData.projectData)
|
||||||
|
)
|
||||||
|
return message.warning("Please check the input box marked with *");
|
||||||
|
operations.loadingShow = true;
|
||||||
|
Https.axiosPost(Https.httpUrls.designCloud, data)
|
||||||
|
.then((rv) => {
|
||||||
if (rv) {
|
if (rv) {
|
||||||
operations.loadingShow = false
|
operations.loadingShow = false;
|
||||||
cancelDsign()
|
cancelDsign();
|
||||||
let porjectData = operationsData.objectList.find(item => item.id === operationsData.projectData)
|
let porjectData = operationsData.objectList.find(
|
||||||
|
(item) => item.id === operationsData.projectData
|
||||||
|
);
|
||||||
let project = {
|
let project = {
|
||||||
value: porjectData?.id,
|
value: porjectData?.id,
|
||||||
label: porjectData?.name,
|
label: porjectData?.name,
|
||||||
|
};
|
||||||
|
emit("getContentList", project);
|
||||||
}
|
}
|
||||||
emit('getContentList',project)
|
|
||||||
}
|
|
||||||
}).catch((error) => {
|
|
||||||
operations.loadingShow = false
|
|
||||||
})
|
})
|
||||||
}
|
.catch((error) => {
|
||||||
|
operations.loadingShow = false;
|
||||||
|
});
|
||||||
|
};
|
||||||
const changeNumberOfImages = () => {
|
const changeNumberOfImages = () => {
|
||||||
if(operationsData.buildType =='relight' || operationsData.buildType == 'poseTransfer'){
|
if (
|
||||||
if(operationsData.exhibitionImgList.length < Number(operationsData.numberOfImages)){
|
operationsData.buildType == "relight" ||
|
||||||
operationsData.numberOfImages = operationsData.exhibitionImgList.length
|
operationsData.buildType == "poseTransfer"
|
||||||
|
) {
|
||||||
|
if (
|
||||||
|
operationsData.exhibitionImgList.length <
|
||||||
|
Number(operationsData.numberOfImages)
|
||||||
|
) {
|
||||||
|
operationsData.numberOfImages =
|
||||||
|
operationsData.exhibitionImgList.length;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
let getHistoryTime = null
|
let getHistoryTime = null;
|
||||||
const getHistoryProjectList = (event) => {
|
const getHistoryProjectList = (event) => {
|
||||||
clearTimeout(getHistoryTime)
|
clearTimeout(getHistoryTime);
|
||||||
if (!event && !operationsData.buildType) {
|
if (!event && !operationsData.buildType) {
|
||||||
operationsData.objectList = []
|
operationsData.objectList = [];
|
||||||
return
|
return;
|
||||||
}
|
}
|
||||||
getHistoryTime = setTimeout(() => {
|
getHistoryTime = setTimeout(() => {
|
||||||
let value = {
|
let value = {
|
||||||
@@ -472,16 +580,16 @@ export default defineComponent({
|
|||||||
size: 9999,
|
size: 9999,
|
||||||
asc: 0,
|
asc: 0,
|
||||||
process: operationsData.buildType,
|
process: operationsData.buildType,
|
||||||
}
|
};
|
||||||
Https.axiosPost(Https.httpUrls.historyProject, value).then((rv) => {
|
Https.axiosPost(Https.httpUrls.historyProject, value).then((rv) => {
|
||||||
rv.content.forEach((item) => {
|
rv.content.forEach((item) => {
|
||||||
item.value = item.id
|
item.value = item.id;
|
||||||
item.label = item.name
|
item.label = item.name;
|
||||||
})
|
});
|
||||||
operationsData.objectList = rv.content
|
operationsData.objectList = rv.content;
|
||||||
})
|
});
|
||||||
},1000)
|
}, 1000);
|
||||||
}
|
};
|
||||||
let beforeUpload = async (file) => {
|
let beforeUpload = async (file) => {
|
||||||
const isJpgOrPng =
|
const isJpgOrPng =
|
||||||
file.type === "image/jpeg" ||
|
file.type === "image/jpeg" ||
|
||||||
@@ -489,46 +597,48 @@ export default defineComponent({
|
|||||||
file.type === "image/jpg" ||
|
file.type === "image/jpg" ||
|
||||||
file.type === "image/bmp";
|
file.type === "image/bmp";
|
||||||
if (!isJpgOrPng) {
|
if (!isJpgOrPng) {
|
||||||
message.info(useI18n().t('MoodboardUpload.jsContent3'));
|
message.info(useI18n().t("MoodboardUpload.jsContent3"));
|
||||||
}
|
}
|
||||||
const isLt2M = file.size / 1024 / 1024 < 5;
|
const isLt2M = file.size / 1024 / 1024 < 5;
|
||||||
if (!isLt2M) {
|
if (!isLt2M) {
|
||||||
message.info(useI18n().t('MoodboardUpload.jsContent4'));
|
message.info(useI18n().t("MoodboardUpload.jsContent4"));
|
||||||
}
|
}
|
||||||
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
|
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
|
||||||
}
|
};
|
||||||
let fileUploadChange = (data) => {
|
let fileUploadChange = (data) => {
|
||||||
let file = data.file;
|
let file = data.file;
|
||||||
let bor = true
|
let bor = true;
|
||||||
if (file.status === "done") {
|
if (file.status === "done") {
|
||||||
let res = JSON.parse(file.xhr.response);
|
let res = JSON.parse(file.xhr.response);
|
||||||
if (res.errCode == 0) {
|
if (res.errCode == 0) {
|
||||||
file.imgUrl = res.data.url;
|
file.imgUrl = res.data.url;
|
||||||
file.id = res.data.id
|
file.id = res.data.id;
|
||||||
file.isChecked = true
|
file.isChecked = true;
|
||||||
file.type = 'ProductElement'
|
file.type = "ProductElement";
|
||||||
operationsData.fileList.filter((v) => v.status === "done");
|
operationsData.fileList.filter((v) => v.status === "done");
|
||||||
} else {
|
} else {
|
||||||
bor = false
|
bor = false;
|
||||||
}
|
}
|
||||||
// this.showFileList = productImgData.fileList
|
// this.showFileList = productImgData.fileList
|
||||||
} else if (file.status === "error") {
|
} else if (file.status === "error") {
|
||||||
bor = false
|
bor = false;
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
};
|
||||||
const setPlaceholder = () => {
|
const setPlaceholder = () => {
|
||||||
if(!operationsData.projectData)return ''
|
if (!operationsData.projectData) return "";
|
||||||
let index = operationsData.objectList.findIndex(item => item.id === operationsData.projectData)
|
let index = operationsData.objectList.findIndex(
|
||||||
return operationsData.objectList[index].name
|
(item) => item.id === operationsData.projectData
|
||||||
}
|
);
|
||||||
|
return operationsData.objectList[index].name;
|
||||||
|
};
|
||||||
const focus = () => {
|
const focus = () => {
|
||||||
if(operationsData.porjectName)return
|
if (operationsData.porjectName) return;
|
||||||
operationsData.porjectName = operationsData.placeholder
|
operationsData.porjectName = operationsData.placeholder;
|
||||||
}
|
};
|
||||||
const blur = () => {
|
const blur = () => {
|
||||||
if(operationsData.porjectName != operationsData.placeholder)return
|
if (operationsData.porjectName != operationsData.placeholder) return;
|
||||||
operationsData.porjectName = ''
|
operationsData.porjectName = "";
|
||||||
}
|
};
|
||||||
return {
|
return {
|
||||||
...toRefs(operations),
|
...toRefs(operations),
|
||||||
...toRefs(operationsData),
|
...toRefs(operationsData),
|
||||||
@@ -558,32 +668,34 @@ export default defineComponent({
|
|||||||
};
|
};
|
||||||
},
|
},
|
||||||
mounted() {},
|
mounted() {},
|
||||||
methods: {
|
methods: {},
|
||||||
|
|
||||||
},
|
|
||||||
directives: {
|
directives: {
|
||||||
mousewheel: {
|
mousewheel: {
|
||||||
mounted(el) {
|
mounted(el) {
|
||||||
el.addEventListener('mouseenter', (e)=> {
|
el.addEventListener("mouseenter", (e) => {
|
||||||
if (el.scrollWidth > el.clientWidth) {
|
if (el.scrollWidth > el.clientWidth) {
|
||||||
el.parentElement.style.overflowY = 'hidden';
|
el.parentElement.style.overflowY = "hidden";
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// 鼠标移出事件
|
// 鼠标移出事件
|
||||||
el.addEventListener('mouseleave', ()=> {
|
el.addEventListener("mouseleave", () => {
|
||||||
el.parentElement.style.overflowY = 'auto';
|
el.parentElement.style.overflowY = "auto";
|
||||||
});
|
});
|
||||||
el.addEventListener('wheel',(e)=>{
|
el.addEventListener(
|
||||||
let num = 0
|
"wheel",
|
||||||
|
(e) => {
|
||||||
|
let num = 0;
|
||||||
if (e.deltaY > 0) {
|
if (e.deltaY > 0) {
|
||||||
num = 25
|
num = 25;
|
||||||
} else {
|
} else {
|
||||||
num = -25
|
num = -25;
|
||||||
}
|
}
|
||||||
el.scrollBy(num, 0);
|
el.scrollBy(num, 0);
|
||||||
},{ passive: true })
|
},
|
||||||
}
|
{ passive: true }
|
||||||
|
);
|
||||||
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
@@ -593,16 +705,13 @@ export default defineComponent({
|
|||||||
background: rgba(0, 0, 0, 0.2);
|
background: rgba(0, 0, 0, 0.2);
|
||||||
}
|
}
|
||||||
:deep(.createCloud_modal) {
|
:deep(.createCloud_modal) {
|
||||||
|
|
||||||
.ant-modal-body {
|
.ant-modal-body {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
|
|
||||||
.createCloud_modal {
|
.createCloud_modal {
|
||||||
.closeIcon {
|
.closeIcon {
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
@@ -628,7 +737,7 @@ export default defineComponent({
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
opacity: .5;
|
opacity: 0.5;
|
||||||
&.active {
|
&.active {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
@@ -648,7 +757,7 @@ export default defineComponent({
|
|||||||
display: none;
|
display: none;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background: rgba(0,0,0,.2);
|
background: rgba(0, 0, 0, 0.2);
|
||||||
position: absolute;
|
position: absolute;
|
||||||
i {
|
i {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@@ -658,7 +767,6 @@ export default defineComponent({
|
|||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
:deep(.upload_file_item) {
|
:deep(.upload_file_item) {
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
@@ -740,7 +848,6 @@ export default defineComponent({
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -17,12 +17,33 @@
|
|||||||
<div class="generalModel_btn">
|
<div class="generalModel_btn">
|
||||||
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
|
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
|
||||||
<!-- <i class="fi fi-rr-cross-small"></i> -->
|
<!-- <i class="fi fi-rr-cross-small"></i> -->
|
||||||
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<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" />
|
<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
|
||||||
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
|
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>
|
</svg>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="login_page">
|
<div class="login_page">
|
||||||
@@ -33,7 +54,8 @@
|
|||||||
<div class="login_type_list">
|
<div class="login_type_list">
|
||||||
<div
|
<div
|
||||||
:class="[
|
:class="[
|
||||||
'login_type_item','username_login_item',
|
'login_type_item',
|
||||||
|
'username_login_item',
|
||||||
'login_active',
|
'login_active',
|
||||||
]"
|
]"
|
||||||
>
|
>
|
||||||
@@ -61,40 +83,70 @@
|
|||||||
<div v-show="passwordConditionShow" class="conditionShow">
|
<div v-show="passwordConditionShow" class="conditionShow">
|
||||||
<div class="item">
|
<div class="item">
|
||||||
<div class="icon">
|
<div class="icon">
|
||||||
<i v-show="!passwordCondition.length" class="fi fi-br-cross-small"></i>
|
<i
|
||||||
<i v-show="passwordCondition.length" class="fi fi-br-check"></i>
|
v-show="!passwordCondition.length"
|
||||||
|
class="fi fi-br-cross-small"
|
||||||
|
></i>
|
||||||
|
<i
|
||||||
|
v-show="passwordCondition.length"
|
||||||
|
class="fi fi-br-check"
|
||||||
|
></i>
|
||||||
</div>
|
</div>
|
||||||
<div class="text">At least 8 characters long</div>
|
<div class="text">At least 8 characters long</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="item">
|
<div class="item">
|
||||||
<div class="icon">
|
<div class="icon">
|
||||||
<i v-show="!passwordCondition.special" class="fi fi-br-cross-small"></i>
|
<i
|
||||||
<i v-show="passwordCondition.special" class="fi fi-br-check"></i>
|
v-show="!passwordCondition.special"
|
||||||
|
class="fi fi-br-cross-small"
|
||||||
|
></i>
|
||||||
|
<i
|
||||||
|
v-show="passwordCondition.special"
|
||||||
|
class="fi fi-br-check"
|
||||||
|
></i>
|
||||||
</div>
|
</div>
|
||||||
<div class="text">Must contain special characters</div>
|
<div class="text">Must contain special characters</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="item">
|
<div class="item">
|
||||||
<div class="icon">
|
<div class="icon">
|
||||||
<i v-show="!passwordCondition.group" class="fi fi-br-cross-small"></i>
|
<i
|
||||||
<i v-show="passwordCondition.group" class="fi fi-br-check"></i>
|
v-show="!passwordCondition.group"
|
||||||
|
class="fi fi-br-cross-small"
|
||||||
|
></i>
|
||||||
|
<i
|
||||||
|
v-show="passwordCondition.group"
|
||||||
|
class="fi fi-br-check"
|
||||||
|
></i>
|
||||||
|
</div>
|
||||||
|
<div class="text">
|
||||||
|
Mix of uppercase, lowercase and numbers
|
||||||
</div>
|
</div>
|
||||||
<div class="text">Mix of uppercase, lowercase and numbers</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<input
|
<input
|
||||||
class="login_form_input"
|
class="login_form_input"
|
||||||
:class="{active:Object.values(passwordCondition).filter(value => value === true).length<3}"
|
:class="{
|
||||||
|
active:
|
||||||
|
Object.values(passwordCondition).filter(
|
||||||
|
(value) => value === true
|
||||||
|
).length < 3,
|
||||||
|
}"
|
||||||
:type="passwordType"
|
:type="passwordType"
|
||||||
placeholder="Enter your password"
|
placeholder="Enter your password"
|
||||||
v-model="password"
|
v-model="password"
|
||||||
@keydown.enter="submitPerLogin()"
|
@keydown.enter="submitPerLogin()"
|
||||||
@input="passwordInput"
|
@input="passwordInput"
|
||||||
@focus="()=>passwordConditionShow = true"
|
@focus="() => (passwordConditionShow = true)"
|
||||||
@blur="()=>passwordConditionShow = false"
|
@blur="() => (passwordConditionShow = false)"
|
||||||
/>
|
/>
|
||||||
<div class="icon iconfont icon-yanjing_yincang_o password_show_icon" @click="changePasswordType()"></div>
|
<div
|
||||||
|
class="icon iconfont icon-yanjing_yincang_o password_show_icon"
|
||||||
|
@click="changePasswordType()"
|
||||||
|
></div>
|
||||||
</div>
|
</div>
|
||||||
<span style="font-weight: 400;opacity: .7;">You must satisfy ALL password conditions to register.</span>
|
<span style="font-weight: 400; opacity: 0.7"
|
||||||
|
>You must satisfy ALL password conditions to register.</span
|
||||||
|
>
|
||||||
<div class="login_form_title marign_top30">Email</div>
|
<div class="login_form_title marign_top30">Email</div>
|
||||||
<input
|
<input
|
||||||
class="login_form_input"
|
class="login_form_input"
|
||||||
@@ -104,7 +156,10 @@
|
|||||||
/>
|
/>
|
||||||
|
|
||||||
<!-- 邮箱登录 start -->
|
<!-- 邮箱登录 start -->
|
||||||
<div class="login_form_email" :class="{active:emailStap===2}">
|
<div
|
||||||
|
class="login_form_email"
|
||||||
|
:class="{ active: emailStap === 2 }"
|
||||||
|
>
|
||||||
<!-- <div v-show="loginType == 'email'" class="login_form_email"> -->
|
<!-- <div v-show="loginType == 'email'" class="login_form_email"> -->
|
||||||
<!-- <div v-show="emailStap === 1" class="forget_password_content">
|
<!-- <div v-show="emailStap === 1" class="forget_password_content">
|
||||||
<div class="forget_password_content_block" @click="changeLoginType('username')">
|
<div class="forget_password_content_block" @click="changeLoginType('username')">
|
||||||
@@ -131,12 +186,14 @@
|
|||||||
</div> -->
|
</div> -->
|
||||||
|
|
||||||
<div v-show="emailStap === 2" class="email_last_step">
|
<div v-show="emailStap === 2" class="email_last_step">
|
||||||
|
|
||||||
<div class="email_last_step_block">
|
<div class="email_last_step_block">
|
||||||
<span class="email_last_step_content"
|
<span class="email_last_step_content"
|
||||||
>Verify with one-time verification code</span
|
>Verify with one-time verification code</span
|
||||||
>
|
>
|
||||||
<i class="fi fi-br-cross email_last_step_block_icon" @click="emailLastStepFun()"></i>
|
<i
|
||||||
|
class="fi fi-br-cross email_last_step_block_icon"
|
||||||
|
@click="emailLastStepFun()"
|
||||||
|
></i>
|
||||||
</div>
|
</div>
|
||||||
<div class="email_last_step_bottom">
|
<div class="email_last_step_bottom">
|
||||||
<div class="email_last_step_des">
|
<div class="email_last_step_des">
|
||||||
@@ -157,7 +214,8 @@
|
|||||||
|
|
||||||
<div class="email_last_step_des">
|
<div class="email_last_step_des">
|
||||||
<div class="sent_email_content email_tip_content">
|
<div class="sent_email_content email_tip_content">
|
||||||
Please check the junk box if you haven't received verification code
|
Please check the junk box if you haven't received
|
||||||
|
verification code
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -167,24 +225,35 @@
|
|||||||
|
|
||||||
<div class="login_form_title marign_top30">
|
<div class="login_form_title marign_top30">
|
||||||
<label :class="{ active: emailStap == 2 }">
|
<label :class="{ active: emailStap == 2 }">
|
||||||
<input :state="emailStap" type="checkbox" v-model="checked">
|
<input :state="emailStap" type="checkbox" v-model="checked" />
|
||||||
<span>I agree to all Term, Privacy Policy and Fees</span>
|
<span>I agree to all Term, Privacy Policy and Fees</span>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="thirdPartyLogin marign_top30">
|
<div class="thirdPartyLogin marign_top30">
|
||||||
<div class="label">
|
<div class="label">
|
||||||
<div class="mask" v-show="!checked" @click="isCheckAgreement"></div>
|
<div
|
||||||
<googleLogin @googelLogin="googelLogin" text="Register with Google"></googleLogin>
|
class="mask"
|
||||||
|
v-show="!checked"
|
||||||
|
@click="isCheckAgreement"
|
||||||
|
></div>
|
||||||
|
<googleLogin
|
||||||
|
@googelLogin="googelLogin"
|
||||||
|
text="Register with Google"
|
||||||
|
></googleLogin>
|
||||||
</div>
|
</div>
|
||||||
<div class="label">
|
<div class="label">
|
||||||
<div class="mask" v-show="!checked" @click="isCheckAgreement"></div>
|
<div
|
||||||
|
class="mask"
|
||||||
|
v-show="!checked"
|
||||||
|
@click="isCheckAgreement"
|
||||||
|
></div>
|
||||||
<weiXinLogin text="Register with wechat"></weiXinLogin>
|
<weiXinLogin text="Register with wechat"></weiXinLogin>
|
||||||
</div>
|
</div>
|
||||||
<!-- <phoneLogin></phoneLogin> -->
|
<!-- <phoneLogin></phoneLogin> -->
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="login_submit_button marign_top40"
|
class="login_submit_button marign_top40"
|
||||||
style="width: 100%;"
|
style="width: 100%"
|
||||||
:state="emailStap"
|
:state="emailStap"
|
||||||
@click="submitPerLogin()"
|
@click="submitPerLogin()"
|
||||||
>
|
>
|
||||||
@@ -194,10 +263,8 @@
|
|||||||
<!-- <div class="login_text" >
|
<!-- <div class="login_text" >
|
||||||
<div class="forget_password_text" @click="changeIsLogin(2)">Forgot your password</div>
|
<div class="forget_password_text" @click="changeIsLogin(2)">Forgot your password</div>
|
||||||
</div> -->
|
</div> -->
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<!-- 账号密码登录 end -->
|
<!-- 账号密码登录 end -->
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 邮箱登录 end -->
|
<!-- 邮箱登录 end -->
|
||||||
@@ -205,13 +272,14 @@
|
|||||||
|
|
||||||
<!-- 忘记密码 start -->
|
<!-- 忘记密码 start -->
|
||||||
<div class="forget_password_content" v-else>
|
<div class="forget_password_content" v-else>
|
||||||
<div class="forget_password_content_block" @click="forgetPasswordLastStepFun()">
|
<div
|
||||||
|
class="forget_password_content_block"
|
||||||
|
@click="forgetPasswordLastStepFun()"
|
||||||
|
>
|
||||||
<!-- <span class="icon iconfont fi-br-arrow-left"></span
|
<!-- <span class="icon iconfont fi-br-arrow-left"></span
|
||||||
> -->
|
> -->
|
||||||
<i class="fi fi-br-arrow-left"></i>
|
<i class="fi fi-br-arrow-left"></i>
|
||||||
<span class="forget_password_content_title"
|
<span class="forget_password_content_title">Retrieve password</span>
|
||||||
>Retrieve password</span
|
|
||||||
>
|
|
||||||
</div>
|
</div>
|
||||||
<div v-show="frogetPasswordStep === 1">
|
<div v-show="frogetPasswordStep === 1">
|
||||||
<div class="forget_passored_form_content">
|
<div class="forget_passored_form_content">
|
||||||
@@ -239,9 +307,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="tip_content">
|
<div class="tip_content">
|
||||||
<span v-show="time">{{ time }}s</span>
|
<span v-show="time">{{ time }}s</span>
|
||||||
<span
|
<span v-show="!time" @click="forgetPasswordNextStepFun()"
|
||||||
v-show="!time"
|
|
||||||
@click="forgetPasswordNextStepFun()"
|
|
||||||
>Resend</span
|
>Resend</span
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
@@ -267,11 +333,9 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- 忘记密码 end -->
|
<!-- 忘记密码 end -->
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</a-modal>
|
</a-modal>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
@@ -287,32 +351,35 @@ import phoneLogin from "@/component/LoginPage/phoneLogin.vue";
|
|||||||
import { useStore } from "vuex";
|
import { useStore } from "vuex";
|
||||||
import { useI18n } from "vue-i18n";
|
import { useI18n } from "vue-i18n";
|
||||||
import { setLang } from "@/tool/guide";
|
import { setLang } from "@/tool/guide";
|
||||||
const md5 = require("md5");
|
import md5 from "md5";
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
components: {
|
components: {
|
||||||
VerificationCodeInput,googleLogin,weiXinLogin,phoneLogin
|
VerificationCodeInput,
|
||||||
|
googleLogin,
|
||||||
|
weiXinLogin,
|
||||||
|
phoneLogin,
|
||||||
},
|
},
|
||||||
setup() {
|
setup() {
|
||||||
let timer: any = 0;
|
let timer: any = 0;
|
||||||
const {locale} = useI18n()
|
const { locale } = useI18n();
|
||||||
const store = useStore();
|
const store = useStore();
|
||||||
let register = reactive({
|
let register = reactive({
|
||||||
registerModel: false,
|
registerModel: false,
|
||||||
registerModelMask: true,
|
registerModelMask: true,
|
||||||
pageWidth:'50%',
|
pageWidth: "50%",
|
||||||
passwordConditionShow: false,
|
passwordConditionShow: false,
|
||||||
passwordCondition: {
|
passwordCondition: {
|
||||||
length: false,
|
length: false,
|
||||||
special: false,
|
special: false,
|
||||||
group: false,
|
group: false,
|
||||||
},
|
},
|
||||||
})
|
});
|
||||||
return {
|
return {
|
||||||
store,
|
store,
|
||||||
timer,
|
timer,
|
||||||
...toRefs(register),
|
...toRefs(register),
|
||||||
locale
|
locale,
|
||||||
}
|
};
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
@@ -332,22 +399,21 @@ export default defineComponent({
|
|||||||
newPassword: "", //新密码
|
newPassword: "", //新密码
|
||||||
isCheckRobot: false,
|
isCheckRobot: false,
|
||||||
time: 60, //60秒倒计时
|
time: 60, //60秒倒计时
|
||||||
passwordType:'password',
|
passwordType: "password",
|
||||||
userId:'',
|
userId: "",
|
||||||
loginTime:true
|
loginTime: true,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
const data = this.$route.query
|
const data = this.$route.query;
|
||||||
if(data?.state == 'weiXin'){
|
if (data?.state == "weiXin") {
|
||||||
this.wechatLogin(data)
|
this.wechatLogin(data);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
init() {
|
init() {
|
||||||
this.registerModel = true
|
this.registerModel = true;
|
||||||
this.emailLastStepFun()
|
this.emailLastStepFun();
|
||||||
|
|
||||||
},
|
},
|
||||||
changeLoginType(type: string) {
|
changeLoginType(type: string) {
|
||||||
this.loginType = type;
|
this.loginType = type;
|
||||||
@@ -380,27 +446,24 @@ export default defineComponent({
|
|||||||
operationType: "LOGIN",
|
operationType: "LOGIN",
|
||||||
};
|
};
|
||||||
|
|
||||||
Https.axiosPost(Https.httpUrls.accountSendEmail, data).then(
|
Https.axiosPost(Https.httpUrls.accountSendEmail, data).then((rv: any) => {
|
||||||
(rv: any) => {
|
|
||||||
if (rv) {
|
if (rv) {
|
||||||
this.emailStap = 2;
|
this.emailStap = 2;
|
||||||
this.time = 60;
|
this.time = 60;
|
||||||
this.emailCode = ["", "", "", "", "", ""]
|
this.emailCode = ["", "", "", "", "", ""];
|
||||||
this.createTimer();
|
this.createTimer();
|
||||||
}
|
}
|
||||||
}
|
});
|
||||||
);
|
|
||||||
},
|
},
|
||||||
|
|
||||||
//邮箱登录的上一步
|
//邮箱登录的上一步
|
||||||
emailLastStepFun() {
|
emailLastStepFun() {
|
||||||
this.emailStap = 1;
|
this.emailStap = 1;
|
||||||
this.username = "",
|
(this.username = ""), (this.password = ""), (this.email = "");
|
||||||
this.password = "",
|
(this.checked = false),
|
||||||
this.email = "";
|
(this.loginType = "username"),
|
||||||
this.checked=false,
|
(this.emailCode = ["", "", "", "", "", ""]),
|
||||||
this.loginType = "username",
|
this.clearTimer();
|
||||||
(this.emailCode = ["", "", "", "", "", ""]), this.clearTimer();
|
|
||||||
},
|
},
|
||||||
|
|
||||||
//忘记密码的下一步
|
//忘记密码的下一步
|
||||||
@@ -413,15 +476,12 @@ export default defineComponent({
|
|||||||
email: this.forgetPasswordEmail,
|
email: this.forgetPasswordEmail,
|
||||||
operationType: "FORGET_PWD",
|
operationType: "FORGET_PWD",
|
||||||
};
|
};
|
||||||
Https.axiosPost(Https.httpUrls.accountSendEmail, data).then(
|
Https.axiosPost(Https.httpUrls.accountSendEmail, data).then((rv: any) => {
|
||||||
(rv: any) => {
|
|
||||||
if (rv) {
|
if (rv) {
|
||||||
this.frogetPasswordStep = 2;
|
this.frogetPasswordStep = 2;
|
||||||
(this.forgetEmailCode = ["", "", "", "", "", ""]),
|
(this.forgetEmailCode = ["", "", "", "", "", ""]), this.createTimer();
|
||||||
this.createTimer();
|
|
||||||
}
|
}
|
||||||
}
|
});
|
||||||
);
|
|
||||||
},
|
},
|
||||||
//忘记密码的上一步
|
//忘记密码的上一步
|
||||||
forgetPasswordLastStepFun() {
|
forgetPasswordLastStepFun() {
|
||||||
@@ -430,35 +490,37 @@ export default defineComponent({
|
|||||||
} else {
|
} else {
|
||||||
this.frogetPasswordStep = this.frogetPasswordStep - 1;
|
this.frogetPasswordStep = this.frogetPasswordStep - 1;
|
||||||
this.forgetPasswordEmail = "";
|
this.forgetPasswordEmail = "";
|
||||||
(this.forgetEmailCode = ["", "", "", "", "", ""]),
|
(this.forgetEmailCode = ["", "", "", "", "", ""]), this.clearTimer();
|
||||||
this.clearTimer();
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
//改变勾选是否是机器人
|
//改变勾选是否是机器人
|
||||||
checkRobot() {
|
checkRobot() {
|
||||||
this.isCheckRobot = !this.isCheckRobot;
|
this.isCheckRobot = !this.isCheckRobot;
|
||||||
},
|
},
|
||||||
passwordInput() {
|
passwordInput() {
|
||||||
this.isPassword(this.password)
|
this.isPassword(this.password);
|
||||||
},
|
},
|
||||||
isPassword(password: any) {
|
isPassword(password: any) {
|
||||||
this.passwordCondition.length = /.{8,}/.test(password)
|
this.passwordCondition.length = /.{8,}/.test(password);
|
||||||
this.passwordCondition.special = /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/.test(password)
|
this.passwordCondition.special =
|
||||||
this.passwordCondition.group = /[a-z]/.test(password) && /[A-Z]/.test(password) && /\d/.test(password)
|
/[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/.test(password);
|
||||||
return Object.values(this.passwordCondition).filter(value => value === true).length;
|
this.passwordCondition.group =
|
||||||
|
/[a-z]/.test(password) && /[A-Z]/.test(password) && /\d/.test(password);
|
||||||
|
return Object.values(this.passwordCondition).filter(
|
||||||
|
(value) => value === true
|
||||||
|
).length;
|
||||||
},
|
},
|
||||||
//提交账号密码预先登录
|
//提交账号密码预先登录
|
||||||
submitPerLogin() {
|
submitPerLogin() {
|
||||||
|
|
||||||
|
|
||||||
//输入账号密码
|
//输入账号密码
|
||||||
if (this.emailStap >= 2) {
|
if (this.emailStap >= 2) {
|
||||||
return;
|
return;
|
||||||
} else {
|
} else {
|
||||||
if (/aida/i.test(this.username)) {
|
if (/aida/i.test(this.username)) {
|
||||||
message.info('The name cannot contain "AiDA" or any combination of its uppercase and lowercase forms.');
|
message.info(
|
||||||
|
'The name cannot contain "AiDA" or any combination of its uppercase and lowercase forms.'
|
||||||
|
);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
if (!this.username || !this.password) {
|
if (!this.username || !this.password) {
|
||||||
@@ -482,79 +544,77 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
if (this.isPassword(this.password) < 3) {
|
if (this.isPassword(this.password) < 3) {
|
||||||
message.info("You must satisfy ALL password conditions to register.");
|
message.info("You must satisfy ALL password conditions to register.");
|
||||||
return
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
let data = {
|
let data = {
|
||||||
userPassword: md5(this.password + "abc"),
|
userPassword: md5(this.password + "abc"),
|
||||||
userName: this.username,
|
userName: this.username,
|
||||||
userEmail: this.email,
|
userEmail: this.email,
|
||||||
"browserIdentifiers": "",
|
browserIdentifiers: "",
|
||||||
"country": "",
|
country: "",
|
||||||
"createDate": "",
|
createDate: "",
|
||||||
"credits": 0,
|
credits: 0,
|
||||||
"id": 0,
|
id: 0,
|
||||||
"isBeginner": 0,
|
isBeginner: 0,
|
||||||
"isTrial": 0,
|
isTrial: 0,
|
||||||
"language": "",
|
language: "",
|
||||||
"systemUser": 0,
|
systemUser: 0,
|
||||||
"updateDate": "",
|
updateDate: "",
|
||||||
"validEndTime": 0,
|
validEndTime: 0,
|
||||||
"validStartTime": 0
|
validStartTime: 0,
|
||||||
};
|
};
|
||||||
// this.loginType = 'email'
|
// this.loginType = 'email'
|
||||||
if (this.loginTime) {
|
if (this.loginTime) {
|
||||||
this.loginTime = false
|
this.loginTime = false;
|
||||||
Https.axiosPost(Https.httpUrls.designWorksRegister, data).then(
|
Https.axiosPost(Https.httpUrls.designWorksRegister, data)
|
||||||
(rv: any) => {
|
.then((rv: any) => {
|
||||||
// if (rv) {
|
// if (rv) {
|
||||||
// this.loginType = 'email'
|
// this.loginType = 'email'
|
||||||
// }
|
// }
|
||||||
this.emailStap = 2;
|
this.emailStap = 2;
|
||||||
if (rv) {
|
if (rv) {
|
||||||
this.userId = rv.userId
|
this.userId = rv.userId;
|
||||||
this.loginType = 'email'
|
this.loginType = "email";
|
||||||
this.time = 60;
|
this.time = 60;
|
||||||
this.emailCode = ["", "", "", "", "", ""]
|
this.emailCode = ["", "", "", "", "", ""];
|
||||||
this.createTimer();
|
this.createTimer();
|
||||||
}
|
}
|
||||||
}
|
})
|
||||||
).catch(res=>{
|
.catch((res) => {
|
||||||
this.emailStap = 1;
|
this.emailStap = 1;
|
||||||
});
|
});
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
this.loginTime = true
|
this.loginTime = true;
|
||||||
}, 2000);
|
}, 2000);
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
isCheckAgreement() {
|
isCheckAgreement() {
|
||||||
message.info(
|
message.info("Agree to all terms, privacy fees and policies");
|
||||||
"Agree to all terms, privacy fees and policies"
|
|
||||||
);
|
|
||||||
},
|
},
|
||||||
changePasswordType() {
|
changePasswordType() {
|
||||||
this.passwordType = this.passwordType === 'password' ? 'text' : 'password'
|
this.passwordType =
|
||||||
|
this.passwordType === "password" ? "text" : "password";
|
||||||
},
|
},
|
||||||
//微信登录
|
//微信登录
|
||||||
wechatLogin(value: any) {
|
wechatLogin(value: any) {
|
||||||
let data = {
|
let data = {
|
||||||
code: value.code,
|
code: value.code,
|
||||||
type:1
|
type: 1,
|
||||||
}
|
};
|
||||||
Https.axiosGet(Https.httpUrls.parseWeChatCode, { params: data })
|
Https.axiosGet(Https.httpUrls.parseWeChatCode, { params: data })
|
||||||
.then((rv: any) => {
|
.then((rv: any) => {
|
||||||
this.setSuccessLogin(rv)
|
this.setSuccessLogin(rv);
|
||||||
})
|
})
|
||||||
.catch((res) => {});
|
.catch((res) => {});
|
||||||
},
|
},
|
||||||
//谷歌登录
|
//谷歌登录
|
||||||
googelLogin(value: any) {
|
googelLogin(value: any) {
|
||||||
let data = {credential : value,type:1}
|
let data = { credential: value, type: 1 };
|
||||||
Https.axiosGet(Https.httpUrls.parseGoogleCredential, { params: data })
|
Https.axiosGet(Https.httpUrls.parseGoogleCredential, { params: data })
|
||||||
.then((rv: any) => {
|
.then((rv: any) => {
|
||||||
this.setSuccessLogin(rv)
|
this.setSuccessLogin(rv);
|
||||||
})
|
})
|
||||||
.catch((res) => {});
|
.catch((res) => {});
|
||||||
},
|
},
|
||||||
@@ -574,9 +634,9 @@ export default defineComponent({
|
|||||||
setCookie("userInfo", JSON.stringify(rv));
|
setCookie("userInfo", JSON.stringify(rv));
|
||||||
let userid: any = {
|
let userid: any = {
|
||||||
ueserId: rv.userId,
|
ueserId: rv.userId,
|
||||||
systemUser:rv.systemUser
|
systemUser: rv.systemUser,
|
||||||
}
|
};
|
||||||
if(rv.email)userid.email = rv.email
|
if (rv.email) userid.email = rv.email;
|
||||||
this.store.commit("upUserDetail", userid);
|
this.store.commit("upUserDetail", userid);
|
||||||
|
|
||||||
if (window.innerWidth < 768) {
|
if (window.innerWidth < 768) {
|
||||||
@@ -587,36 +647,31 @@ export default defineComponent({
|
|||||||
} else {
|
} else {
|
||||||
this.turnToHomePage("/home");
|
this.turnToHomePage("/home");
|
||||||
}
|
}
|
||||||
sessionStorage.setItem(
|
sessionStorage.setItem("isTimeOne", JSON.stringify(false)); //是否需要公告 提示 弹窗
|
||||||
"isTimeOne",
|
|
||||||
JSON.stringify(false)
|
|
||||||
); //是否需要公告 提示 弹窗
|
|
||||||
let randomNum: any =
|
let randomNum: any =
|
||||||
Math.floor(Math.random() * 9000000000000000) +
|
Math.floor(Math.random() * 9000000000000000) + 1000000000000000;
|
||||||
1000000000000000;
|
|
||||||
sessionStorage.setItem("sessionId", randomNum);
|
sessionStorage.setItem("sessionId", randomNum);
|
||||||
sessionStorage.setItem("record", JSON.stringify([]));
|
sessionStorage.setItem("record", JSON.stringify([]));
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
//邮箱登录提交
|
//邮箱登录提交
|
||||||
submitEmailLogin(emailVerifyCode: any) {
|
submitEmailLogin(emailVerifyCode: any) {
|
||||||
let affiliateRef = sessionStorage.getItem('affiliateRef');
|
let affiliateRef = sessionStorage.getItem("affiliateRef");
|
||||||
let data = {
|
let data = {
|
||||||
email: this.email,
|
email: this.email,
|
||||||
emailVerifyCode: emailVerifyCode,
|
emailVerifyCode: emailVerifyCode,
|
||||||
loginType: "EMAIL",
|
loginType: "EMAIL",
|
||||||
userId: this.userId,
|
userId: this.userId,
|
||||||
"userEmail": this.email,
|
userEmail: this.email,
|
||||||
"userName": this.username,
|
userName: this.username,
|
||||||
"userPassword": md5(this.password + "abc"),
|
userPassword: md5(this.password + "abc"),
|
||||||
invitationCode:affiliateRef?affiliateRef:'',
|
invitationCode: affiliateRef ? affiliateRef : "",
|
||||||
};
|
};
|
||||||
Https.axiosPost(Https.httpUrls.designWorksRegisterCode, data).then(
|
Https.axiosPost(Https.httpUrls.designWorksRegisterCode, data)
|
||||||
(rv: any) => {
|
.then((rv: any) => {
|
||||||
this.setSuccessLogin(rv)
|
this.setSuccessLogin(rv);
|
||||||
}
|
})
|
||||||
).catch(res=>{
|
.catch((res) => {});
|
||||||
});
|
|
||||||
},
|
},
|
||||||
|
|
||||||
//修改密码提交
|
//修改密码提交
|
||||||
@@ -627,14 +682,12 @@ export default defineComponent({
|
|||||||
password: md5(this.newPassword + "abc"),
|
password: md5(this.newPassword + "abc"),
|
||||||
verifyEmail: false,
|
verifyEmail: false,
|
||||||
};
|
};
|
||||||
Https.axiosPost(Https.httpUrls.accountResetPwd, data).then(
|
Https.axiosPost(Https.httpUrls.accountResetPwd, data).then((rv: any) => {
|
||||||
(rv: any) => {
|
|
||||||
if (rv) {
|
if (rv) {
|
||||||
message.success("Changing the password successfully");
|
message.success("Changing the password successfully");
|
||||||
this.changeIsLogin(1);
|
this.changeIsLogin(1);
|
||||||
}
|
}
|
||||||
}
|
});
|
||||||
);
|
|
||||||
},
|
},
|
||||||
|
|
||||||
//创建定时器
|
//创建定时器
|
||||||
@@ -657,7 +710,7 @@ export default defineComponent({
|
|||||||
|
|
||||||
//跳转到首页
|
//跳转到首页
|
||||||
turnToHomePage(str: any) {
|
turnToHomePage(str: any) {
|
||||||
this.getLang()
|
this.getLang();
|
||||||
// this.$router.push("/home");
|
// this.$router.push("/home");
|
||||||
// console.log(window.location.search.substring(1));
|
// console.log(window.location.search.substring(1));
|
||||||
this.store.commit("clearAllData");
|
this.store.commit("clearAllData");
|
||||||
@@ -668,22 +721,20 @@ export default defineComponent({
|
|||||||
},
|
},
|
||||||
//获取当前语言
|
//获取当前语言
|
||||||
getLang() {
|
getLang() {
|
||||||
let data ={}
|
let data = {};
|
||||||
Https.axiosPost(Https.httpUrls.getUserLanguage, data).then(
|
Https.axiosPost(Https.httpUrls.getUserLanguage, data).then((rv: any) => {
|
||||||
(rv: any) => {
|
|
||||||
if (rv) {
|
if (rv) {
|
||||||
this.locale = rv
|
this.locale = rv;
|
||||||
setLang(rv)
|
setLang(rv);
|
||||||
}
|
}
|
||||||
}
|
});
|
||||||
);
|
|
||||||
},
|
},
|
||||||
turnToWindow(url: any) {
|
turnToWindow(url: any) {
|
||||||
window.open(url);
|
window.open(url);
|
||||||
},
|
},
|
||||||
cancelDsign() {
|
cancelDsign() {
|
||||||
this.registerModel = false
|
this.registerModel = false;
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
@@ -719,7 +770,7 @@ export default defineComponent({
|
|||||||
// transform: translate(-50%,-50%);
|
// transform: translate(-50%,-50%);
|
||||||
// width: 60rem;
|
// width: 60rem;
|
||||||
// width: 80%;
|
// width: 80%;
|
||||||
background: #FFFFFF;
|
background: #ffffff;
|
||||||
// box-shadow: -0.3rem 2rem 5.9rem 0px rgba(200,200,200,0.3);
|
// box-shadow: -0.3rem 2rem 5.9rem 0px rgba(200,200,200,0.3);
|
||||||
padding: 2rem 6rem 2rem;
|
padding: 2rem 6rem 2rem;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
@@ -739,7 +790,7 @@ export default defineComponent({
|
|||||||
top: 0;
|
top: 0;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
transform: scale(0);
|
transform: scale(0);
|
||||||
transition: .3s all;
|
transition: 0.3s all;
|
||||||
border: 2px solid;
|
border: 2px solid;
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
.email_last_step {
|
.email_last_step {
|
||||||
@@ -762,7 +813,7 @@ export default defineComponent({
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 3.6rem;
|
font-size: 3.6rem;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: #D7D7D7;
|
color: #d7d7d7;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
height: 4rem;
|
height: 4rem;
|
||||||
line-height: 4rem;
|
line-height: 4rem;
|
||||||
@@ -824,14 +875,14 @@ export default defineComponent({
|
|||||||
left: auto;
|
left: auto;
|
||||||
transform: translateY(-5rem);
|
transform: translateY(-5rem);
|
||||||
background: #404040;
|
background: #404040;
|
||||||
color: #FFF;
|
color: #fff;
|
||||||
font-size: 1.4rem;
|
font-size: 1.4rem;
|
||||||
padding: 2rem;
|
padding: 2rem;
|
||||||
border-radius: 2rem;
|
border-radius: 2rem;
|
||||||
> .item {
|
> .item {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-bottom: .5rem;
|
margin-bottom: 0.5rem;
|
||||||
&:last-child {
|
&:last-child {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
@@ -859,7 +910,7 @@ export default defineComponent({
|
|||||||
font-size: 1.4rem;
|
font-size: 1.4rem;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
outline: none;
|
outline: none;
|
||||||
transition: all .3s;
|
transition: all 0.3s;
|
||||||
&:hover {
|
&:hover {
|
||||||
border: 0.1rem solid #000;
|
border: 0.1rem solid #000;
|
||||||
}
|
}
|
||||||
@@ -904,8 +955,6 @@ export default defineComponent({
|
|||||||
transform: translateY(1rem);
|
transform: translateY(1rem);
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.login_submit_button {
|
.login_submit_button {
|
||||||
@@ -918,9 +967,9 @@ export default defineComponent({
|
|||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: all .3s;
|
transition: all 0.3s;
|
||||||
&:hover {
|
&:hover {
|
||||||
background: #3C3C3C;
|
background: #3c3c3c;
|
||||||
}
|
}
|
||||||
&[state="2"] {
|
&[state="2"] {
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
@@ -945,7 +994,7 @@ export default defineComponent({
|
|||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
||||||
width: 60rem;
|
width: 60rem;
|
||||||
background: #FFFFFF;
|
background: #ffffff;
|
||||||
box-shadow: -0.3rem 2rem 5.9rem 0px rgba(200, 200, 200, 0.3);
|
box-shadow: -0.3rem 2rem 5.9rem 0px rgba(200, 200, 200, 0.3);
|
||||||
border-radius: 1rem;
|
border-radius: 1rem;
|
||||||
padding: 3rem 6rem 6.5rem;
|
padding: 3rem 6rem 6.5rem;
|
||||||
@@ -985,7 +1034,7 @@ export default defineComponent({
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: 5rem;
|
height: 5rem;
|
||||||
margin-top: 1rem;
|
margin-top: 1rem;
|
||||||
border: 0.1rem solid #DFDFDF;
|
border: 0.1rem solid #dfdfdf;
|
||||||
border-radius: 2.5rem;
|
border-radius: 2.5rem;
|
||||||
padding-left: 2.1rem;
|
padding-left: 2.1rem;
|
||||||
line-height: 5rem;
|
line-height: 5rem;
|
||||||
@@ -1020,7 +1069,6 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.marign_top20 {
|
.marign_top20 {
|
||||||
margin-top: 2rem;
|
margin-top: 2rem;
|
||||||
}
|
}
|
||||||
@@ -1078,5 +1126,4 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
53
src/main.ts
53
src/main.ts
@@ -1,35 +1,42 @@
|
|||||||
import { createApp,defineComponent,h } from 'vue'
|
import { createApp, defineComponent, h } from "vue";
|
||||||
import App from './App.vue'
|
import App from "./App.vue";
|
||||||
import router from './router'
|
import router from "./router";
|
||||||
import store from './store'
|
import store from "./store";
|
||||||
import './assets/iconfont/iconfont.css'
|
import "./assets/iconfont/iconfont.css";
|
||||||
import './assets/iconfont/iconfont.js'
|
import "./assets/iconfont/iconfont.js";
|
||||||
import './assets/iconfont2/iconfont.css'
|
import "./assets/iconfont2/iconfont.css";
|
||||||
import flexible from './tool/flexible.js'
|
import flexible from "./tool/flexible.js";
|
||||||
import 'ant-design-vue/dist/antd.css';
|
import "ant-design-vue/dist/antd.css";
|
||||||
import Antd from 'ant-design-vue';
|
import Antd from "ant-design-vue";
|
||||||
import './assets/style/style.less';
|
import "./assets/style/style.less";
|
||||||
import VueLazyload from "vue-lazyload";
|
import VueLazyload from "vue-lazyload";
|
||||||
import i18n from './lang/index'
|
import i18n from "./lang/index";
|
||||||
import { getBrowserInfo, murmur } from './tool/util'
|
import { getBrowserInfo, murmur } from "./tool/util";
|
||||||
import "../node_modules/@flaticon/flaticon-uicons/css/all/all.css"
|
import "../node_modules/@flaticon/flaticon-uicons/css/all/all.css";
|
||||||
// import { Https } from "@/tool/https";
|
// import { Https } from "@/tool/https";
|
||||||
import 'swiper/css';
|
import "swiper/css";
|
||||||
import 'swiper/css/pagination';
|
import "swiper/css/pagination";
|
||||||
|
|
||||||
// import "@/tool/color-thief.js";
|
// import "@/tool/color-thief.js";
|
||||||
// import "@/tool/fabric.brushes.js";
|
// import "@/tool/fabric.brushes.js";
|
||||||
// import "@/tool/fabric.min.js";
|
// import "@/tool/fabric.min.js";
|
||||||
const app = createApp(App);
|
const app = createApp(App);
|
||||||
flexible()
|
flexible();
|
||||||
|
|
||||||
import { getCookie, setCookie } from "@/tool/cookie";
|
import { getCookie, setCookie } from "@/tool/cookie";
|
||||||
document.addEventListener('touchstart', function(event) {
|
import loadingGif from "./assets/images/homePage/loading.gif";
|
||||||
|
|
||||||
|
document.addEventListener("touchstart", function (event) {
|
||||||
event.preventDefault(); // 阻止长按选中
|
event.preventDefault(); // 阻止长按选中
|
||||||
});
|
});
|
||||||
let loadingParam = {
|
let loadingParam = {
|
||||||
loading: require('./assets/images/homePage/loading.gif'),
|
loading: loadingGif,
|
||||||
attempt: 1
|
attempt: 1,
|
||||||
}
|
};
|
||||||
app.use(store).use(router).use(Antd).use(VueLazyload, loadingParam).use(i18n).mount('#app')
|
app
|
||||||
|
.use(store)
|
||||||
|
.use(router)
|
||||||
|
.use(Antd)
|
||||||
|
.use(VueLazyload, loadingParam)
|
||||||
|
.use(i18n)
|
||||||
|
.mount("#app");
|
||||||
|
|||||||
@@ -3,7 +3,7 @@
|
|||||||
<div class="left">
|
<div class="left">
|
||||||
<!-- :isScroll="!isMask" -->
|
<!-- :isScroll="!isMask" -->
|
||||||
<Works :autoscroll="true" :position="'login'"></Works>
|
<Works :autoscroll="true" :position="'login'"></Works>
|
||||||
<div class="mask" v-show="isMask" @click="()=>isMask = !isMask">
|
<div class="mask" v-show="isMask" @click="() => (isMask = !isMask)">
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<div class="userNum">
|
<div class="userNum">
|
||||||
<div class="title">5 000 000 +</div>
|
<div class="title">5 000 000 +</div>
|
||||||
@@ -16,22 +16,32 @@
|
|||||||
<div class="right">
|
<div class="right">
|
||||||
<div class="Text" v-show="!loginType">
|
<div class="Text" v-show="!loginType">
|
||||||
<div class="title">Join millions <br />using AI every day</div>
|
<div class="title">Join millions <br />using AI every day</div>
|
||||||
<div class="info">Experience secure,spam-free support that empowers you to grow, create,and succeed with confidence</div>
|
<div class="info">
|
||||||
|
Experience secure,spam-free support that empowers you to grow,
|
||||||
|
create,and succeed with confidence
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="loginBox">
|
<div class="loginBox">
|
||||||
<div class="selectType" v-show="!loginType">
|
<div class="selectType" v-show="!loginType">
|
||||||
<div class="text">
|
<div class="text">Continue with one of these:</div>
|
||||||
Continue with one of these:
|
|
||||||
</div>
|
|
||||||
<div class="typeList">
|
<div class="typeList">
|
||||||
<div class="gallery_btn white" @click="setLoginType('personal')">personal</div>
|
<div class="gallery_btn white" @click="setLoginType('personal')">
|
||||||
<div class="gallery_btn white" @click="setLoginType('school')">school</div>
|
personal
|
||||||
<div class="gallery_btn white" @click="setLoginType('enterprise')">enterprise</div>
|
</div>
|
||||||
|
<div class="gallery_btn white" @click="setLoginType('school')">
|
||||||
|
school
|
||||||
|
</div>
|
||||||
|
<div class="gallery_btn white" @click="setLoginType('enterprise')">
|
||||||
|
enterprise
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="login" v-show="loginType">
|
<div class="login" v-show="loginType">
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<i class="fi fi-br-angle-small-left" @click="()=>loginType = ''"></i>
|
<i
|
||||||
|
class="fi fi-br-angle-small-left"
|
||||||
|
@click="() => (loginType = '')"
|
||||||
|
></i>
|
||||||
<!-- <i class="fi fi-rr-arrow-left" @click="()=>loginType = ''"></i> -->
|
<!-- <i class="fi fi-rr-arrow-left" @click="()=>loginType = ''"></i> -->
|
||||||
<span>Log on to AiDA 3.0</span>
|
<span>Log on to AiDA 3.0</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -44,12 +54,21 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
|
import {
|
||||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
defineComponent,
|
||||||
|
computed,
|
||||||
|
ref,
|
||||||
|
provide,
|
||||||
|
nextTick,
|
||||||
|
createVNode,
|
||||||
|
toRefs,
|
||||||
|
reactive,
|
||||||
|
} from "vue";
|
||||||
|
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
|
||||||
import { Https } from "@/tool/https";
|
import { Https } from "@/tool/https";
|
||||||
import { useStore } from "vuex";
|
import { useStore } from "vuex";
|
||||||
import { useI18n } from 'vue-i18n'
|
import { useI18n } from "vue-i18n";
|
||||||
const md5 = require("md5");
|
import md5 from "md5";
|
||||||
import Works from "@/views/HomeView/Works.vue";
|
import Works from "@/views/HomeView/Works.vue";
|
||||||
import { message } from "ant-design-vue";
|
import { message } from "ant-design-vue";
|
||||||
import { isEmail } from "@/tool/util";
|
import { isEmail } from "@/tool/util";
|
||||||
@@ -58,33 +77,33 @@ import school from "@/component/LoginPage/login/school.vue";
|
|||||||
import enterprise from "@/component/LoginPage/login/enterprise.vue";
|
import enterprise from "@/component/LoginPage/login/enterprise.vue";
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
components: {
|
components: {
|
||||||
Works,personal,school,enterprise
|
Works,
|
||||||
},
|
personal,
|
||||||
props:{
|
school,
|
||||||
|
enterprise,
|
||||||
},
|
},
|
||||||
|
props: {},
|
||||||
emits: [],
|
emits: [],
|
||||||
setup(props, { emit }) {
|
setup(props, { emit }) {
|
||||||
const store = useStore();
|
const store = useStore();
|
||||||
const loginData = reactive({
|
const loginData = reactive({
|
||||||
loginType:'',
|
loginType: "",
|
||||||
isMask: true,
|
isMask: true,
|
||||||
})
|
});
|
||||||
const dataDom = reactive({
|
const dataDom = reactive({});
|
||||||
})
|
|
||||||
const setLoginType = (str: any) => {
|
const setLoginType = (str: any) => {
|
||||||
loginData.loginType = str
|
loginData.loginType = str;
|
||||||
}
|
};
|
||||||
return {
|
return {
|
||||||
...toRefs(dataDom),
|
...toRefs(dataDom),
|
||||||
...toRefs(loginData),
|
...toRefs(loginData),
|
||||||
setLoginType,
|
setLoginType,
|
||||||
}
|
};
|
||||||
},
|
},
|
||||||
provide() {
|
provide() {
|
||||||
return {
|
return {};
|
||||||
}
|
|
||||||
},
|
},
|
||||||
})
|
});
|
||||||
</script>
|
</script>
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
.loginPage {
|
.loginPage {
|
||||||
@@ -92,7 +111,8 @@ export default defineComponent({
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
> .left,>.right{
|
> .left,
|
||||||
|
> .right {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
> .left {
|
> .left {
|
||||||
@@ -105,7 +125,11 @@ export default defineComponent({
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, .8) 100%);
|
background: linear-gradient(
|
||||||
|
to bottom,
|
||||||
|
rgba(255, 255, 255, 0) 0%,
|
||||||
|
rgba(0, 0, 0, 0.8) 100%
|
||||||
|
);
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -115,7 +139,11 @@ export default defineComponent({
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 15rem;
|
padding: 15rem;
|
||||||
//黑色径向渐变
|
//黑色径向渐变
|
||||||
background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 70%);
|
background: radial-gradient(
|
||||||
|
ellipse at center,
|
||||||
|
rgba(0, 0, 0, 0.3) 0%,
|
||||||
|
rgba(0, 0, 0, 0) 70%
|
||||||
|
);
|
||||||
.userNum {
|
.userNum {
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
margin-bottom: 3rem;
|
margin-bottom: 3rem;
|
||||||
@@ -174,7 +202,7 @@ export default defineComponent({
|
|||||||
> div {
|
> div {
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
width: 33rem;
|
width: 33rem;
|
||||||
margin-top: .8rem;
|
margin-top: 0.8rem;
|
||||||
border-radius: 1rem;
|
border-radius: 1rem;
|
||||||
border: 2px solid;
|
border: 2px solid;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|||||||
Reference in New Issue
Block a user