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