aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: Improve code formatting and structure in main.ts and Login.vue

Browse Source 
- 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
2025-06-18 21:47:27 +08:00
parent 5f4e1176f0
commit 88866d9ea4
16 changed files with 7387 additions and 7023 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
components.d.ts vendored
View File

@@ -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']
}

252
src/component/Administrator/SE/allUser/addAllUser.vue
View File

@@ -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">
<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
<svg
width="46"
height="46"
viewBox="0 0 46 46"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3" />
<rect
x="32.5063"
y="12"
width="3"
height="29"
rx="1.5"
transform="rotate(45 32.5063 12)"
fill="white"
/>
<rect
x="34.6274"
y="32.5059"
width="3"
height="29"
rx="1.5"
transform="rotate(135 34.6274 32.5059)"
fill="white"
/>
</svg>
</div>
</div>
<div class="modal_title_text">
@@ -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 { formatTime, isEmail } from "@/tool/util";
import md5 from "md5";
export default defineComponent({
components: {
},
emits: ['searchHistoryList'],
setup(props,{emit}) {
components: {},
emits: ["searchHistoryList"],
setup(props, { emit }) {
let operations = reactive({
operationsModal:false,
operationsEdit:false,
loadingShow:false,
title:''
})
operationsModal: false,
operationsEdit: false,
loadingShow: false,
title: "",
});
let operationsData = reactive({
accountId:-1,
userName:'',
userEmail:'',
password:'',
oldPassword:'',
credits:'',
})
accountId: -1,
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
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;
// 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 = "";
}
let focus = (event) =>{
if(operationsData.password == operationsData.oldPassword){
operationsData.password = ''
};
let blur = (event) => {
console.log(operationsData.password == "" && operationsData.oldPassword);
if (operationsData.password == "" && operationsData.oldPassword) {
operationsData.password = operationsData.oldPassword;
}
}
let blur = (event) =>{
console.log((operationsData.password == '' && operationsData.oldPassword))
if(operationsData.password == '' && operationsData.oldPassword){
operationsData.password = operationsData.oldPassword
}
}
let setAddData = ()=>{
};
let setAddData = () => {
return {
"creditsUsageLimit": operationsData.credits,
"userEmail": operationsData.userEmail,
"userPassword": md5(operationsData.password + 'abc'),
"userName": operationsData.userName,
}
}
let setEditData = ()=>{
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'),
}
}
let cancelDsign = ()=>{
operationsData.accountId=-1
operationsData.userName=''
operationsData.userEmail=''
operationsData.password=''
operationsData.credits=''
operations.operationsModal = false
}
let setOk = ()=>{
let data
if(operations.title == 'Add'){
data = setAddData()
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;
};
let setOk = () => {
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()
} else {
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 *')
Https.axiosPost(Https.httpUrls.addOrUpdateSubAccount,data).then(
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,41 +261,36 @@ export default defineComponent({
};
},
data() {
return {
};
return {};
},
mounted() {},
methods: {
},
methods: {},
});
</script>
<style lang="less" scoped>
:deep(.allUserPoeration_modal){
.ant-modal-body{
:deep(.allUserPoeration_modal) {
.ant-modal-body {
display: flex;
flex-direction: column;
}
}
</style>
<style lang="less" scoped>
.allUserPoeration_modal {
.closeIcon {
z-index: 2;
}
.allUserPoeration_btn{
.allUserPoeration_btn {
display: flex;
flex-direction: row;
height: auto;
justify-content: flex-end;
padding: 1rem 0;
.admin_search_item{
.admin_search_item {
margin-bottom: 0;
}
}
.allUserPoeration_center{
.allUserPoeration_center {
flex: 1;
overflow-y: auto;
flex-direction: row;

266
src/component/Administrator/coupons/addAllUser.vue
View File

@@ -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">
<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
<svg
width="46"
height="46"
viewBox="0 0 46 46"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3" />
<rect
x="32.5063"
y="12"
width="3"
height="29"
rx="1.5"
transform="rotate(45 32.5063 12)"
fill="white"
/>
<rect
x="34.6274"
y="32.5059"
width="3"
height="29"
rx="1.5"
transform="rotate(135 34.6274 32.5059)"
fill="white"
/>
</svg>
</div>
</div>
<div class="modal_title_text">
@@ -37,10 +58,10 @@
style="width: 220px"
/>
</div>
<div class="admin_state_item" >
<div class="admin_state_item">
<span>percentOff(%): <span>*</span></span>
<input
:class="{active:title != 'Add'}"
:class="{ active: title != 'Add' }"
:disabled="title != 'Add'"
v-model="percentOff"
placeholder="Please enter percentOff"
@@ -48,10 +69,10 @@
style="width: 220px"
/>
</div>
<div class="admin_state_item" >
<div class="admin_state_item">
<span>Commission Rate: <span>*</span></span>
<input
:class="{active:title != 'Add'}"
:class="{ active: title != 'Add' }"
:disabled="title != 'Add'"
v-model="commissionRate"
placeholder="Please enter commission rate"
@@ -59,17 +80,21 @@
style="width: 220px"
/>
</div>
<div class="admin_state_item" >
<div class="admin_state_item">
<!-- <div class="admin_state_item" > -->
<span>End Time: <span>*</span></span>
<a-space direction="vertical" style="width:220px">
<a-date-picker v-model:value="rangePickerValue" :disabled="title != 'Add'" style="width:220px" />
<a-space direction="vertical" style="width: 220px">
<a-date-picker
v-model:value="rangePickerValue"
:disabled="title != 'Add'"
style="width: 220px"
/>
</a-space>
</div>
<div class="admin_state_item" >
<div class="admin_state_item">
<span>MaxRedemptions:</span>
<input
:class="{active:title != 'Add'}"
:class="{ active: title != 'Add' }"
:disabled="title != 'Add'"
v-model="maxRedemptions"
placeholder="Please enter maximum"
@@ -77,7 +102,7 @@
style="width: 220px"
/>
</div>
<div class="admin_state_item" >
<div class="admin_state_item">
<span>PaidCommission:</span>
<input
v-model="paidCommission"
@@ -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 { formatTime, isEmail } from "@/tool/util";
import dayjs, { Dayjs } from "dayjs";
import md5 from "md5";
export default defineComponent({
components: {
},
emits: ['searchHistoryList'],
setup(props,{emit}) {
components: {},
emits: ["searchHistoryList"],
setup(props, { emit }) {
let operations = reactive({
operationsModal:false,
operationsEdit:false,
loadingShow:false,
title:''
})
operationsModal: false,
operationsEdit: false,
loadingShow: false,
title: "",
});
let operationsData = reactive({
rangePickerValue:'',
percentOff:'',
commissionRate:'',
maxRedemptions:'',
cooperator:'',
paidCommission:'',
remark:'',
id:''
})
let init = (funStr,data)=>{
operations.operationsModal = true
operations.operationsEdit = true
operations.title = funStr
if(funStr == 'Add') operations.operationsEdit = false
if(funStr == 'Edit'){
operationsData.id=data.id
operationsData.percentOff=data.percentOff
operationsData.commissionRate=data.commissionRate
operationsData.maxRedemptions=data.maxRedemptions
operationsData.cooperator=data.cooperator
operationsData.paidCommission=data.paidCommission
operationsData.remark=data.remark
operationsData.rangePickerValue = dayjs(new Date(data.redeemBy * 1000).toISOString().split('T')[0],'YYYY/MM/DD');
rangePickerValue: "",
percentOff: "",
commissionRate: "",
maxRedemptions: "",
cooperator: "",
paidCommission: "",
remark: "",
id: "",
});
let init = (funStr, data) => {
operations.operationsModal = true;
operations.operationsEdit = true;
operations.title = funStr;
if (funStr == "Add") operations.operationsEdit = false;
if (funStr == "Edit") {
operationsData.id = data.id;
operationsData.percentOff = data.percentOff;
operationsData.commissionRate = data.commissionRate;
operationsData.maxRedemptions = data.maxRedemptions;
operationsData.cooperator = data.cooperator;
operationsData.paidCommission = data.paidCommission;
operationsData.remark = data.remark;
operationsData.rangePickerValue = dayjs(
new Date(data.redeemBy * 1000).toISOString().split("T")[0],
"YYYY/MM/DD"
);
// operationsData.rangePickerValue='2024-08-05T00:00:06'
// operationsData.validEndTime='2024-08-05T00:00:06'
@@ -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; // 直接获取毫秒时间戳
};
let setAddData = () => {
const timestampMs =
new Date(operationsData.rangePickerValue).getTime() / 1000; // 直接获取毫秒时间戳
return {
"percentOff": operationsData.percentOff,
"maxRedemptions": operationsData.maxRedemptions,
"commissionRate": operationsData.commissionRate,
"timestamp": timestampMs,
cooperator:operationsData.cooperator,
remark:operationsData.remark,
}
}
let setEditData = ()=>{
const timestampMs = new Date(operationsData.rangePickerValue).getTime() / 1000; // 直接获取毫秒时间戳
percentOff: operationsData.percentOff,
maxRedemptions: operationsData.maxRedemptions,
commissionRate: operationsData.commissionRate,
timestamp: timestampMs,
cooperator: operationsData.cooperator,
remark: operationsData.remark,
};
};
let setEditData = () => {
const timestampMs =
new Date(operationsData.rangePickerValue).getTime() / 1000; // 直接获取毫秒时间戳
return {
id: operationsData.id,
paidCommission: operationsData.commissionRate,
cooperator:operationsData.cooperator,
remark:operationsData.remark,
}
}
let cancelDsign = ()=>{
operationsData.rangePickerValue=''
operationsData.percentOff=''
operationsData.commissionRate=''
operationsData.maxRedemptions=''
operationsData.cooperator=''
operationsData.paidCommission=''
operationsData.remark=''
operationsData.id=''
operations.operationsModal = false
}
let setOk = ()=>{
let data
if(operations.title == 'Add'){
data = setAddData()
if(!data.commissionRate || !data.timestamp || !data.percentOff)return message.warning('Please check the input box marked with *')
Https.axiosPost(Https.httpUrls.createCoupon, data).then(
(rv) => {
cooperator: operationsData.cooperator,
remark: operationsData.remark,
};
};
let cancelDsign = () => {
operationsData.rangePickerValue = "";
operationsData.percentOff = "";
operationsData.commissionRate = "";
operationsData.maxRedemptions = "";
operationsData.cooperator = "";
operationsData.paidCommission = "";
operationsData.remark = "";
operationsData.id = "";
operations.operationsModal = false;
};
let setOk = () => {
let data;
if (operations.title == "Add") {
data = setAddData();
if (!data.commissionRate || !data.timestamp || !data.percentOff)
return message.warning("Please check the input box marked with *");
Https.axiosPost(Https.httpUrls.createCoupon, data).then((rv) => {
if (rv) {
cancelDsign()
emit('searchHistoryList')
cancelDsign();
emit("searchHistoryList");
}
}
);
}else{
data = setEditData()
Https.axiosGet(Https.httpUrls.updatePromCodeInfo,{params:data}).then(
(rv) => {
});
} else {
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,41 +260,36 @@ export default defineComponent({
};
},
data() {
return {
};
return {};
},
mounted() {},
methods: {
},
methods: {},
});
</script>
<style lang="less" scoped>
:deep(.allUserPoeration_modal){
.ant-modal-body{
:deep(.allUserPoeration_modal) {
.ant-modal-body {
display: flex;
flex-direction: column;
}
}
</style>
<style lang="less" scoped>
.allUserPoeration_modal {
.closeIcon {
z-index: 2;
}
.allUserPoeration_btn{
.allUserPoeration_btn {
display: flex;
flex-direction: row;
height: auto;
justify-content: flex-end;
padding: 1rem 0;
.admin_search_item{
.admin_search_item {
margin-bottom: 0;
}
}
.allUserPoeration_center{
.allUserPoeration_center {
flex: 1;
overflow-y: auto;
flex-direction: row;

696
src/component/HomePage/renew.vue
View File

File diff suppressed because it is too large Load Diff

269
src/component/LoginPage/login/enterprise.vue
View File

@@ -8,19 +8,19 @@
<!-- 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"
:options="schoolList"
@change="schoolListChange"
style="width:100%"
style="width: 100%"
show-search
size="large"
:fieldNames="{ label: 'name', value: 'value' }"
@@ -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>
@@ -245,7 +215,7 @@
</template>
<script lang="ts">
import { defineComponent, ref, onMounted, reactive,toRefs } from "vue";
import { defineComponent, ref, onMounted, reactive, toRefs } from "vue";
import { Https } from "@/tool/https";
import { isEmail } from "@/tool/util";
import { setCookie, WriteCookie } from "@/tool/cookie";
@@ -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:'',
schoolList:[] as any,
})
const schoolListChange = (e:any)=>{
}
const filterOption = (e:any)=>{
selectEnterprise: "",
schoolList: [] as 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)=>{
data.schoolList = rv.map((item:any)=>{
name: e,
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('')
}
label: item,
value: item,
};
});
});
};
const handleFocus = () => {
if (data.schoolList.length == 0) {
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,16 +431,14 @@ 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,
organizationName: this.selectEnterprise,
email: this.email,
operationType: "LOGIN",
ip: "",
@@ -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,44 +479,44 @@ 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"
);
isCheckAgreement() {
message.info("Agree to all terms, privacy fees and policies");
},
//微信登录
wechatLogin(value:any) {
wechatLogin(value: any) {
let data = {
code : value.code,
type:2
}
this.loadingShow = true
Https.axiosGet(Https.httpUrls.parseWeChatCode, {params:data})
code: value.code,
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}
Https.axiosGet(Https.httpUrls.parseGoogleCredential, {params:data})
googelLogin(value: any) {
let data = { credential: value, type: 2 };
Https.axiosGet(Https.httpUrls.parseGoogleCredential, { params: data })
.then((rv: any) => {
this.setSuccessLogin(rv)
this.setSuccessLogin(rv);
})
.catch((res) => {});
},
//登陆成功设置参数
setSuccessLogin(rv:any){
setSuccessLogin(rv: any) {
if (rv) {
if (rv.systemUser == 4) {
rv.systemUser = 1;
@@ -568,11 +531,11 @@ export default defineComponent({
setCookie("isBeginner", isBeginner);
setCookie("isBeginnerNum", 0); //从第一步开始，机器人开始的话就是从第二部开始
setCookie("userInfo", JSON.stringify(rv));
let userid:any = {
ueserId:rv.userId,
systemUser:rv.systemUser,
}
if(rv.email)userid.email = rv.email
let userid: any = {
ueserId: rv.userId,
systemUser: rv.systemUser,
};
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);
}
},
});
@@ -729,15 +686,15 @@ export default defineComponent({
}
}
}
.generalModel_state{
>.generalModel_state_item{
:deep(.ant-select-selector){
.generalModel_state {
> .generalModel_state_item {
:deep(.ant-select-selector) {
border: 0.1rem solid #dfdfdf;
border-radius: 2.5rem;
height: 5rem !important;
width: 100%;
box-sizing: border-box;
&:hover{
&:hover {
border: 0.1rem solid #000;
}
}
@@ -778,8 +735,8 @@ export default defineComponent({
font-size: 1.4rem;
box-sizing: border-box;
outline: none;
transition: all .3s;
&:hover{
transition: all 0.3s;
&:hover {
border: 0.1rem solid #000;
}
&::placeholder {
@@ -832,9 +789,9 @@ export default defineComponent({
font-weight: 500;
color: #ffffff;
cursor: pointer;
transition: all .3s;
&:hover{
background: #3C3C3C;
transition: all 0.3s;
&:hover {
background: #3c3c3c;
}
&[state="2"] {
cursor: not-allowed;
@@ -980,13 +937,13 @@ export default defineComponent({
.marign_top40 {
margin-top: 4rem;
}
.thirdPartyLogin{
.thirdPartyLogin {
display: flex;
// justify-content: flex-start;
> div{
> div {
position: relative;
margin-right: 1rem;
> .mask{
> .mask {
position: absolute;
width: 100%;
height: 100%;

213
src/component/LoginPage/login/personal.vue
View File

@@ -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,40 +469,40 @@ 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"
);
isCheckAgreement() {
message.info("Agree to all terms, privacy fees and policies");
},
//微信登录
wechatLogin(value:any) {
wechatLogin(value: any) {
let data = {
code : value.code,
type:2
}
this.loadingShow = true
Https.axiosGet(Https.httpUrls.parseWeChatCode, {params:data})
code: value.code,
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}
Https.axiosGet(Https.httpUrls.parseGoogleCredential, {params:data})
googelLogin(value: any) {
let data = { credential: value, type: 2 };
Https.axiosGet(Https.httpUrls.parseGoogleCredential, { params: data })
.then((rv: any) => {
this.setSuccessLogin(rv)
this.setSuccessLogin(rv);
})
.catch((res) => {});
},
//登陆成功设置参数
setSuccessLogin(rv:any){
setSuccessLogin(rv: any) {
if (rv) {
if (rv.systemUser == 4) {
rv.systemUser = 1;
@@ -554,11 +517,11 @@ export default defineComponent({
setCookie("isBeginner", isBeginner);
setCookie("isBeginnerNum", 0); //从第一步开始，机器人开始的话就是从第二部开始
setCookie("userInfo", JSON.stringify(rv));
let userid:any = {
ueserId:rv.userId,
systemUser:rv.systemUser,
}
if(rv.email)userid.email = rv.email
let userid: any = {
ueserId: rv.userId,
systemUser: rv.systemUser,
};
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,8 +706,8 @@ export default defineComponent({
font-size: 1.4rem;
box-sizing: border-box;
outline: none;
transition: all .3s;
&:hover{
transition: all 0.3s;
&:hover {
border: 0.1rem solid #000;
}
&::placeholder {
@@ -803,9 +760,9 @@ export default defineComponent({
font-weight: 500;
color: #ffffff;
cursor: pointer;
transition: all .3s;
&:hover{
background: #3C3C3C;
transition: all 0.3s;
&:hover {
background: #3c3c3c;
}
&[state="2"] {
cursor: not-allowed;
@@ -951,13 +908,13 @@ export default defineComponent({
.marign_top40 {
margin-top: 4rem;
}
.thirdPartyLogin{
.thirdPartyLogin {
display: flex;
// justify-content: flex-start;
> div{
> div {
position: relative;
margin-right: 1rem;
> .mask{
> .mask {
position: absolute;
width: 100%;
height: 100%;

265
src/component/LoginPage/login/school.vue
View File

@@ -8,19 +8,19 @@
<!-- 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"
:options="schoolList"
@change="schoolListChange"
style="width:100%"
style="width: 100%"
show-search
size="large"
:fieldNames="{ label: 'name', value: 'value' }"
@@ -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>
@@ -244,7 +215,7 @@
</template>
<script lang="ts">
import { defineComponent, ref, onMounted, reactive,toRefs } from "vue";
import { defineComponent, ref, onMounted, reactive, toRefs } from "vue";
import { Https } from "@/tool/https";
import { isEmail } from "@/tool/util";
import { setCookie, WriteCookie } from "@/tool/cookie";
@@ -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:'',
schoolList:[] as any,
})
const schoolListChange = (e:any)=>{
}
const filterOption = (e:any)=>{
selectSchool: "",
schoolList: [] as 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)=>{
data.schoolList = rv.map((item:any)=>{
name: e,
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('')
}
label: item,
value: item,
};
});
});
};
const handleFocus = () => {
if (data.schoolList.length == 0) {
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,16 +431,14 @@ 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,
organizationName: this.selectSchool,
email: this.email,
operationType: "LOGIN",
ip: "",
@@ -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,44 +482,44 @@ 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"
);
isCheckAgreement() {
message.info("Agree to all terms, privacy fees and policies");
},
//微信登录
wechatLogin(value:any) {
wechatLogin(value: any) {
let data = {
code : value.code,
type:2
}
this.loadingShow = true
Https.axiosGet(Https.httpUrls.parseWeChatCode, {params:data})
code: value.code,
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}
Https.axiosGet(Https.httpUrls.parseGoogleCredential, {params:data})
googelLogin(value: any) {
let data = { credential: value, type: 2 };
Https.axiosGet(Https.httpUrls.parseGoogleCredential, { params: data })
.then((rv: any) => {
this.setSuccessLogin(rv)
this.setSuccessLogin(rv);
})
.catch((res) => {});
},
//登陆成功设置参数
setSuccessLogin(rv:any){
setSuccessLogin(rv: any) {
if (rv) {
if (rv.systemUser == 4) {
rv.systemUser = 1;
@@ -569,11 +534,11 @@ export default defineComponent({
setCookie("isBeginner", isBeginner);
setCookie("isBeginnerNum", 0); //从第一步开始，机器人开始的话就是从第二部开始
setCookie("userInfo", JSON.stringify(rv));
let userid:any = {
ueserId:rv.userId,
systemUser:rv.systemUser,
}
if(rv.email)userid.email = rv.email
let userid: any = {
ueserId: rv.userId,
systemUser: rv.systemUser,
};
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);
}
},
});
@@ -730,15 +689,15 @@ export default defineComponent({
}
}
}
.generalModel_state{
>.generalModel_state_item{
:deep(.ant-select-selector){
.generalModel_state {
> .generalModel_state_item {
:deep(.ant-select-selector) {
border: 0.1rem solid #dfdfdf;
border-radius: 2.5rem;
height: 5rem !important;
width: 100%;
box-sizing: border-box;
&:hover{
&:hover {
border: 0.1rem solid #000;
}
}
@@ -779,8 +738,8 @@ export default defineComponent({
font-size: 1.4rem;
box-sizing: border-box;
outline: none;
transition: all .3s;
&:hover{
transition: all 0.3s;
&:hover {
border: 0.1rem solid #000;
}
&::placeholder {
@@ -833,9 +792,9 @@ export default defineComponent({
font-weight: 500;
color: #ffffff;
cursor: pointer;
transition: all .3s;
&:hover{
background: #3C3C3C;
transition: all 0.3s;
&:hover {
background: #3c3c3c;
}
&[state="2"] {
cursor: not-allowed;
@@ -981,13 +940,13 @@ export default defineComponent({
.marign_top40 {
margin-top: 4rem;
}
.thirdPartyLogin{
.thirdPartyLogin {
display: flex;
// justify-content: flex-start;
> div{
> div {
position: relative;
margin-right: 1rem;
> .mask{
> .mask {
position: absolute;
width: 100%;
height: 100%;

46
src/component/LoginPage/phoneLogin.vue
View File

@@ -1,40 +1,46 @@
<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 phoneModel from "./phoneModel.vue";
export default defineComponent({
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
})
const openphoneModel = ()=>{
phoneDom.phoneModel.init()
}
onMounted(()=>{
})
phoneModel: null,
});
const openphoneModel = () => {
phoneDom.phoneModel.init();
};
onMounted(() => {});
return {
...toRefs(phoneDom),
openphoneModel,
}
};
},
})
});
</script>
<style scoped lang="less">
.Container{
.Container {
position: relative;
.icon{
.icon {
width: 40px;
height: 40px;
display: flex;
@@ -43,15 +49,15 @@
border: 1px solid #dadce0;
border-radius: 50%;
cursor: pointer;
&:hover{
&:hover {
background: #f8faff;
}
img{
img {
width: 18px;
height: 18px;
}
}
&.Container:hover{
&.Container:hover {
}
}
</style>

72
src/component/LoginPage/phoneModel.vue
View File

@@ -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">
<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
<svg
width="46"
height="46"
viewBox="0 0 46 46"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3" />
<rect
x="32.5063"
y="12"
width="3"
height="29"
rx="1.5"
transform="rotate(45 32.5063 12)"
fill="white"
/>
<rect
x="34.6274"
y="32.5059"
width="3"
height="29"
rx="1.5"
transform="rotate(135 34.6274 32.5059)"
fill="white"
/>
</svg>
</div>
</div>
<div class="phoneLogin">
@@ -32,45 +53,42 @@
<a-spin size="large" />
</div>
</a-modal>
</template>
<script>
import { defineComponent,ref,reactive,toRefs, onMounted} from "vue";
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,
},
setup(){
setup() {
let phoneModel = reactive({
phoneModel:false,
phoneModelMask:true,
pageWidth:'50%',
})
phoneModel: false,
phoneModelMask: true,
pageWidth: "50%",
});
let data = reactive({
loadingShow:false,
})
const init = async ()=>{
phoneModel.phoneModel = true
}
const cancelDsign = ()=>{
phoneModel.phoneModel = false
}
return{
loadingShow: false,
});
const init = async () => {
phoneModel.phoneModel = true;
};
const cancelDsign = () => {
phoneModel.phoneModel = false;
};
return {
...toRefs(phoneModel),
...toRefs(data),
init,
cancelDsign,
}
},
data() {
return {
};
},
methods: {
data() {
return {};
},
methods: {},
});
</script>
<style lang="less" scoped>

54
src/component/LoginPage/weiXinLogin.vue
View File

@@ -1,47 +1,53 @@
<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 weiXinModel from "./weiXinModel.vue";
export default defineComponent({
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
})
const openWeiXinModel = ()=>{
weiXinDom.weiXinModel.init()
}
onMounted(()=>{
})
weiXinModel: null,
});
const openWeiXinModel = () => {
weiXinDom.weiXinModel.init();
};
onMounted(() => {});
return {
...toRefs(weiXinDom),
openWeiXinModel,
}
};
},
})
});
</script>
<style scoped lang="less">
.Container{
.Container {
position: relative;
.icon{
.icon {
// width: 40px;
width: auto;
display: flex;
@@ -49,22 +55,22 @@
justify-content: center;
border: 1px solid #dadce0;
border-radius: 4rem;
padding: .5rem 3rem;
padding: 0.5rem 3rem;
cursor: pointer;
box-sizing: border-box;
&:hover{
&:hover {
background: #f8faff;
}
img{
img {
width: 3.8rem;
height: 3.8rem;
}
span{
span {
font-size: 1.4rem;
margin-left: 1.4rem;
}
}
&.Container:hover{
&.Container:hover {
}
}
</style>

382
src/component/Pay/payMethod.vue
View File

@@ -18,74 +18,140 @@
<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">
<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
<svg
width="46"
height="46"
viewBox="0 0 46 46"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3" />
<rect
x="32.5063"
y="12"
width="3"
height="29"
rx="1.5"
transform="rotate(45 32.5063 12)"
fill="white"
/>
<rect
x="34.6274"
y="32.5059"
width="3"
height="29"
rx="1.5"
transform="rotate(135 34.6274 32.5059)"
fill="white"
/>
</svg>
</div>
</div>
<div class="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">
import { defineComponent,ref,reactive,toRefs ,onMounted} from "vue";
import { defineComponent, ref, reactive, toRefs, onMounted } from "vue";
import { Https } from "@/tool/https";
import { isEmail } from "@/tool/util";
import { message } from "ant-design-vue";
@@ -93,119 +159,133 @@ 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,
},
props:{
type:{
type:String,
default:''
}
props: {
type: {
type: String,
default: "",
},
emits: ['completePayment'],
setup(prop,{emit}){
},
emits: ["completePayment"],
setup(prop, { emit }) {
const store = useStore();
let payMethod = reactive({
payMethodModel:false,
payMethodModelMask:true,
pageWidth:'50%'
})
payMethodModel: false,
payMethodModelMask: true,
pageWidth: "50%",
});
let payMethodData = reactive({
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
}
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;
};
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')
if (!payMethodData.clause) {
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为月费
wallet:payMethodData.modeOfPaymentDetail,
}
if(payMethodData.modeOfPayment == 'paypal'){
httpsUrl = Https.httpUrls.payPaypal
}else if (payMethodData.modeOfPayment == 'stripe') {
httpsUrl = Https.httpUrls.payStripe
autoRenewal: payAffirmData.autoRenewal, //false为不自动续费
productName: payAffirmData.productName,
quantity: payAffirmData.quantity ? payAffirmData.quantity : 1,
returnUrl: url,
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;
// data.
}else{
httpsUrl = Https.httpUrls.payAlipayHK
} else {
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}`
} else {
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
}else{
if (payMethodData.newWindow) {
payMethodData.newWindow.location.href = herf;
} else {
// window.open(herf, '_blank');
window.location.href=herf;
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'
}
const completePayment = ()=>{
setPaidBack()
emit('completePayment')
}
return{
};
const setPaidBack = () => {
payMethod.payMethodModel = false;
payMethodData.isShowMark = false;
payMethodData.clause = false;
payMethodData.modeOfPayment =
prop.type == "credits" ? "paypal" : "stripe";
payMethodData.modeOfPaymentDetail = "ALIPAYHK";
};
const completePayment = () => {
setPaidBack();
emit("completePayment");
};
return {
store,
...toRefs(payMethod),
...toRefs(payMethodData),
@@ -214,14 +294,13 @@ export default defineComponent({
payAffirm,
setPaidBack,
completePayment,
}
},
data() {
return {
};
},
data() {
return {};
},
methods: {
turnToWindow(url:any) {
turnToWindow(url: any) {
window.open(url);
},
},
@@ -229,126 +308,126 @@ export default defineComponent({
</script>
<style lang="less" scoped>
.payMethod {
.payMethodContent{
.payMethodContent {
display: flex;
flex-direction: column;
align-items: center;
width: 60rem;
margin: 0 auto;
position: relative;
.generalModelTitle,.generalModelInfo{
.generalModelTitle,
.generalModelInfo {
width: 100%;
}
.payMethod_list{
.payMethod_list {
margin-bottom: 4rem;
display: flex;
flex-direction: column;
width: 100%;
>label{
> label {
display: flex;
align-items: center;
padding: 0 2rem;
margin-bottom: 3rem;
cursor: pointer;
border: 2px solid #EFEFEF;
border: 2px solid #efefef;
border-radius: 2rem;
height: 8rem;
width: 100%;
img{
img {
margin: 0rem 2rem;
// max-width: 4rem;
width: 4rem;
}
.payAffirm_detail{
.payAffirm_detail {
margin-left: auto;
display: flex;
>label{
> label {
cursor: pointer;
display: flex;
align-items: center;
margin-right: 1rem;
span{
margin-left: .5rem;
span {
margin-left: 0.5rem;
}
}
}
}
>label:last-child{
> label:last-child {
margin: 0;
}
}
.payMethod_payAffirm_clause{
.payMethod_payAffirm_clause {
margin-bottom: 4rem;
label{
label {
cursor: pointer;
input{
input {
margin-right: 1rem;
cursor: pointer;
vertical-align: middle;
}
span{
span {
vertical-align: top;
a{
a {
color: #000;
text-decoration: underline;
}
}
}
&.animation{
animation: shake .3s linear;
&.animation {
animation: shake 0.3s linear;
@keyframes shake {
0%{
0% {
transform: translateX(0px);
}
25%{
25% {
transform: translateX(-10px);
}
50%{
50% {
transform: translateX(10px);
}
75%{
75% {
transform: translateX(-10px);
}
100%{
100% {
transform: translateX(0px);
}
}
}
}
.payMethod_payAffirm_btn{
.payMethod_payAffirm_btn {
display: flex;
justify-content: space-between;
width: 100%;
>div{
> div {
width: 29rem;
}
}
}
.mark_loading{
.mark_loading {
position: absolute;
z-index: 2;
background: #fff;
.mark_loading_title{
.mark_loading_title {
font-size: 3rem;
// text-decoration: underline;
font-weight: 600;
margin-bottom: 2rem;
// color: #fff;
}
.mark_loading_intro{
.mark_loading_intro {
color: rgba(0, 0, 0, 0.6);
font-size: 1.4rem;
margin-bottom: 2rem;
text-align: center;
width: 80%;
}
.mark_loading_title_box{
.mark_loading_title_box {
display: flex;
}
.mark_loading_btn,.mark_loading_btn2{
.mark_loading_btn,
.mark_loading_btn2 {
// border: #000;
// color: #fff;
display: flex;
@@ -358,19 +437,18 @@ export default defineComponent({
padding: 0 20px;
border-radius: 10px;
cursor: pointer;
padding: .3rem 4rem;
padding: 0.3rem 4rem;
background: #39215b;
color: #fff;
border: none;
margin: 0 2rem;
align-items: center;
}
.mark_loading_btn2{
.mark_loading_btn2 {
border: 2px solid #000;
color: #000;
background: rgba(0,0,0,0);
background: rgba(0, 0, 0, 0);
}
}
}
</style>

269
src/component/WorksPage/Falls.vue
View File

@@ -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,20 +21,22 @@
height: item.style.imgHeihgt + 'px',
}"
/>
<div v-if="item.original == 1" class="falls_item_user_Original">{{$t('newScaleImage.Original')}}</div>
<div v-if="item.original == 1" class="falls_item_user_Original">
{{ $t("newScaleImage.Original") }}
</div>
</div>
<!-- 文字 -->
<div class="falls_item_bottom" v-if="isText">
<div class="falls_item_text" :title="item.text">
{{item.text}}
{{ item.text }}
</div>
<div class="falls_item_content">
<div class="falls_item_user">
<!-- <img src="http://121.40.53.210:3000/falls/5.png" alt=""> -->
<div class="falls_item_user_detail">
<span>@{{ item.userName }}</span>
<div :title="item.portfolioName">{{item.portfolioName}}</div>
<div :title="item.portfolioName">{{ item.portfolioName }}</div>
<!-- <span :title="item.portfolioDes">{{item.portfolioDes}}</span> -->
</div>
</div>
@@ -42,9 +48,13 @@
<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>
<span>{{ item.likeNum }}</span>
</label>
<div>
<!-- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" role="img" style="color: #9e9ea7;fill: currentColor;">
@@ -52,7 +62,7 @@
<path d="M8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10Z" fill="white"></path>
</svg> -->
<i class="fi fi-sr-eye"></i>
<span>{{item.viewNums}}</span>
<span>{{ item.viewNums }}</span>
</div>
</div>
</div>
@@ -62,36 +72,46 @@
</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({
props:{
isScroll:{
type:Boolean,
default:true,
props: {
isScroll: {
type: Boolean,
default: true,
},
isText:{
type:Boolean,
default:true,
isText: {
type: Boolean,
default: true,
},
itemWidth:{
type:Number,
default:300,
}
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()
return{
},
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();
return {
list,
wait_list,
width,
@@ -102,29 +122,29 @@ export default defineComponent({
loading,
computedHeight,
imgDom,
}
};
},
directives:{
fadeIn:{
mounted (el,binding) {
let dom
if(binding.value){
dom = document.querySelector('.works_page .page_content')
}else{
dom = document.querySelector('.homeRecommend_content_body')
directives: {
fadeIn: {
mounted(el, binding) {
let dom;
if (binding.value) {
dom = document.querySelector(".works_page .page_content");
} else {
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,
scroller:dom,//设置指定元素为滚动依据
scrub:2,
animation: tl1,
scroller: dom, //设置指定元素为滚动依据
scrub: 2,
// onUpdate:(v)=>{
// if(v.progress < 0.1){
// v.trigger?.classList.remove('active')
@@ -134,41 +154,46 @@ export default defineComponent({
// }
// }
});
}
},
},
mounted () {
this.resize()
},
mounted() {
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;
if(this.$props.isText){
this.computedHeight = paddingBottom + textMarginTop + textHeight + contentHeight;
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;
}
},
beforeDestroy () {
this.wait_list = []
beforeDestroy() {
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()
if(this.imgDom){
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();
if (this.imgDom) {
this.imgDom.remove();
this.imgDom = null
this.imgDom = null;
}
},
push(arr) {
@@ -178,11 +203,11 @@ export default defineComponent({
this.loadImg();
}
},
deleteItem(id){
deleteItem(id) {
for (let index = 0; index < this.list.length; index++) {
if(this.list[index].id == id){
this.list.splice(index,1)
this.resize()
if (this.list[index].id == id) {
this.list.splice(index, 1);
this.resize();
break;
}
}
@@ -195,16 +220,16 @@ 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";
this.imgDom.style.maxHeight = this.itemWidth+330 + "px";
this.imgDom.style.maxHeight = this.itemWidth + 330 + "px";
this.imgDom.style.position = "absolute";
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++) {
@@ -215,22 +240,21 @@ export default defineComponent({
}
// this.computedHeight = 0
let width = this.imgDom.offsetWidth;
let height = this.imgDom.offsetHeight+this.computedHeight;
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,
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++) {
@@ -276,26 +299,26 @@ export default defineComponent({
}
this.$el.style.height = Math.max(...this.poss) + this.gap_y + "px";
},
setItemDetail(data){
this.$emit('getImgScale',data)
setItemDetail(data) {
this.$emit("getImgScale", data);
},
portfolioLike(data){
this.$emit('setPortfolioLike',data)
}
portfolioLike(data) {
this.$emit("setPortfolioLike", data);
},
})
},
});
</script>
<style lang='less' scoped>
.Falls {
<style lang="less" scoped>
.Falls {
width: 100%;
height: auto;
position: relative;
--paddingBottom:10px;
--textMarginTop:10px;
--textHeight:25px;
--contentHeight:35px;
.falls_item{
--paddingBottom: 10px;
--textMarginTop: 10px;
--textHeight: 25px;
--contentHeight: 35px;
.falls_item {
position: absolute;
transition: all 0.15s;
display: flex;
@@ -304,24 +327,24 @@ export default defineComponent({
border-radius: 2rem;
overflow: hidden;
padding-bottom: var(--paddingBottom);
&.falls_item:hover{
.falls_item_img{
img{
&.falls_item:hover {
.falls_item_img {
img {
transform: scale(1.1);
}
}
}
.falls_item_img{
.falls_item_img {
cursor: pointer;
width: 100%;
overflow: hidden;
img{
img {
width: 100%;
object-fit: cover;
height: 100%;
transition: all .3s;
transition: all 0.3s;
}
.falls_item_user_Original{
.falls_item_user_Original {
font-weight: 600;
font-size: 12px;
color: #39215b;
@@ -335,9 +358,9 @@ export default defineComponent({
left: auto;
}
}
.falls_item_bottom{
.falls_item_bottom {
padding: 0 10px;
.falls_item_text{
.falls_item_text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@@ -346,25 +369,25 @@ export default defineComponent({
margin-top: var(--textMarginTop);
height: var(--textHeight);
}
.falls_item_content{
.falls_item_content {
display: flex;
justify-content: space-between;
align-items: center;
color: #525252;
height: var(--contentHeight);
.falls_item_user{
.falls_item_user {
width: 50%;
display: flex;
align-items: center;
flex: 1;
overflow: hidden;
img{
img {
width: 25px;
height: 25px;
border-radius: 50%;
margin-right: 10px;
}
.falls_item_user_detail{
.falls_item_user_detail {
line-height: 1;
width: 60%;
width: 100%;
@@ -373,20 +396,20 @@ export default defineComponent({
flex-direction: column;
align-items: flex-start;
>div{
> div {
width: 100%;
font-size: 16px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
span{
span {
font-size: 12px;
color: #525252;
}
}
}
.falls_item_detail{
.falls_item_detail {
display: flex;
// width: 40%;
// width: 20%;
@@ -394,27 +417,29 @@ export default defineComponent({
// width: 70px;
width: auto;
justify-content: space-between;
>label:nth-child(1){
> label:nth-child(1) {
margin-right: 2rem;
}
>label{
> label {
// cursor: pointer;
}
>label,>div{
> label,
> div {
display: flex;
align-items: center;
i{
i {
// font-size: 1.8rem;
font-size: 12px;
}
svg,i{
svg,
i {
color: #9e9ea7;
display: flex;
// width: 10px;
// height: 10px;
margin-right: 5px;
}
span{
span {
margin-left: 3px;
font-size: 12px;
}
@@ -422,8 +447,6 @@ export default defineComponent({
}
}
}
}
}
}
</style>

803
src/component/home/batchGeneration/createCloud.vue
View File

File diff suppressed because it is too large Load Diff

533
src/component/mainPage/signUp/registerModel.vue
View File

File diff suppressed because it is too large Load Diff

53
src/main.ts
View File

@@ -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");

146
src/views/Login.vue
View File

@@ -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";
@@ -57,124 +76,133 @@ import personal from "@/component/LoginPage/login/personal.vue";
import school from "@/component/LoginPage/login/school.vue";
import enterprise from "@/component/LoginPage/login/enterprise.vue";
export default defineComponent({
components:{
Works,personal,school,enterprise
components: {
Works,
personal,
school,
enterprise,
},
props:{
},
emits:[],
setup(props,{emit}) {
props: {},
emits: [],
setup(props, { emit }) {
const store = useStore();
const loginData = reactive({
loginType:'',
isMask:true,
})
const dataDom = reactive({
})
const setLoginType = (str:any)=>{
loginData.loginType = str
}
return{
loginType: "",
isMask: true,
});
const dataDom = reactive({});
const setLoginType = (str: any) => {
loginData.loginType = str;
};
return {
...toRefs(dataDom),
...toRefs(loginData),
setLoginType,
}
};
},
provide() {
return {
}
return {};
},
})
});
</script>
<style lang="less" scoped>
.loginPage{
.loginPage {
width: 100%;
height: 100%;
position: relative;
display: flex;
> .left,>.right{
> .left,
> .right {
height: 100%;
}
> .left{
> .left {
width: 60%;
background: #f7f8fa;
position: relative;
> .mask{
> .mask {
position: absolute;
width: 100%;
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;
color: #fff;
cursor: pointer;
> .content{
> .content {
text-align: center;
padding: 15rem;
//黑色径向渐变
background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 70%);
.userNum{
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;
> .title{
> .title {
font-size: 8rem;
font-weight: 900;
}
> div{
> div {
font-size: 3rem;
font-weight: 500;
}
}
> .info{
> .info {
font-size: 4rem;
font-weight: 500;
}
}
}
}
> .right{
> .right {
display: flex;
width: 40%;
align-items: center;
justify-content: center;
flex-direction: column;
> .Text{
> .Text {
width: 60rem;
text-align: center;
> .title{
> .title {
font-size: 4rem;
font-weight: 900;
line-height: 1.2;
margin-bottom: 2rem;
}
> .info{
> .info {
font-size: 1.8rem;
margin-bottom: 2rem;
line-height: 1.2;
}
> .continue{
> i{
> .continue {
> i {
margin-left: 1rem;
}
}
}
> .loginBox{
> .loginBox {
width: 60rem;
> .selectType{
> .selectType {
width: 100%;
text-align: center;
> .text{
> .text {
font-size: 2.5rem;
font-weight: 600;
}
> .typeList{
> div{
> .typeList {
> div {
margin: 0 auto;
width: 33rem;
margin-top: .8rem;
margin-top: 0.8rem;
border-radius: 1rem;
border: 2px solid;
display: flex;
@@ -183,14 +211,14 @@ export default defineComponent({
}
}
}
> .login{
> .login {
position: relative;
> .title{
> .title {
font-size: 4rem;
font-weight: 900;
display: flex;
align-items: center;
> i{
> i {
margin-right: 2rem;
font-size: 3rem;
display: flex;
@@ -201,5 +229,5 @@ export default defineComponent({
}
}
}
}
}
</style>