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 */ /* prettier-ignore */
declare module 'vue' { declare module 'vue' {
export interface GlobalComponents { export interface GlobalComponents {
AImage: typeof import('ant-design-vue/es')['Image']
AModal: typeof import('ant-design-vue/es')['Modal']
APopover: typeof import('ant-design-vue/es')['Popover']
ASelect: typeof import('ant-design-vue/es')['Select']
ASpin: typeof import('ant-design-vue/es')['Spin']
RouterLink: typeof import('vue-router')['RouterLink'] RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView'] RouterView: typeof import('vue-router')['RouterView']
} }

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

@@ -1,276 +1,300 @@
<template> <template>
<div class="allUserPoerationModal" ref="allUserPoerationModal"></div> <div class="allUserPoerationModal" ref="allUserPoerationModal"></div>
<a-modal <a-modal
class="allUserPoeration_modal generalModel" class="allUserPoeration_modal generalModel"
v-model:visible="operationsModal" v-model:visible="operationsModal"
:footer="null" :footer="null"
:get-container="() => $refs.allUserPoerationModal" :get-container="() => $refs.allUserPoerationModal"
width="50%" width="50%"
height="55rem" height="55rem"
:maskClosable="false" :maskClosable="false"
:centered="true" :centered="true"
:closable="false" :closable="false"
:mask="true" :mask="true"
wrapClassName="#app" wrapClassName="#app"
:keyboard="false" :keyboard="false"
> >
<div class="generalModel_btn"> <div class="generalModel_btn">
<div class="generalModel_closeIcon" @click.stop="cancelDsign()"> <div class="generalModel_closeIcon" @click.stop="cancelDsign()">
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg
<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/> width="46"
<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/> height="46"
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/> viewBox="0 0 46 46"
</svg> fill="none"
xmlns="http://www.w3.org/2000/svg"
</div> >
</div> <circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3" />
<div class="modal_title_text"> <rect
<div>{{ title }} User</div> x="32.5063"
</div> y="12"
<div class="allUserPoeration_center admin_page"> width="3"
<div class="admin_state_item"> height="29"
<span>User Name: <span>*</span></span> rx="1.5"
<input transform="rotate(45 32.5063 12)"
v-model="userName" fill="white"
placeholder="Please enter user name" />
type="text" <rect
style="width: 250px" x="34.6274"
/> y="32.5059"
</div> width="3"
<div class="admin_state_item"> height="29"
<span>User Email: <span>*</span></span> rx="1.5"
<input transform="rotate(135 34.6274 32.5059)"
v-model="userEmail" fill="white"
placeholder="Please enter email" />
type="text" </svg>
style="width: 250px" </div>
/> </div>
</div> <div class="modal_title_text">
<div class="admin_state_item"> <div>{{ title }} User</div>
<span>Password: <span>*</span></span> </div>
<input <div class="allUserPoeration_center admin_page">
@focus="focus" <div class="admin_state_item">
@blur="blur" <span>User Name: <span>*</span></span>
v-model="password" <input
placeholder="Please enter password" v-model="userName"
type="password" placeholder="Please enter user name"
style="width: 250px" type="text"
/> style="width: 250px"
</div> />
<div class="admin_state_item"> </div>
<span>Maximum Credits:</span> <div class="admin_state_item">
<input <span>User Email: <span>*</span></span>
v-model="credits" <input
placeholder="Please enter credits" v-model="userEmail"
type="text" placeholder="Please enter email"
style="width: 250px" type="text"
/> style="width: 250px"
</div> />
</div>
<div class="admin_state_item">
</div> <span>Password: <span>*</span></span>
<div class="allUserPoeration_btn admin_page"> <input
<div class="admin_search_item" @click="cancelDsign"> @focus="focus"
Close @blur="blur"
</div> v-model="password"
<div class="admin_search_item" @click="setOk"> placeholder="Please enter password"
OK type="password"
</div> style="width: 250px"
/>
</div> </div>
</a-modal> <div class="admin_state_item">
<div class="mark_loading" v-show="loadingShow"> <span>Maximum Credits:</span>
<a-spin size="large" /> <input
</div> v-model="credits"
placeholder="Please enter credits"
type="text"
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>
</a-modal>
<div class="mark_loading" v-show="loadingShow">
<a-spin size="large" />
</div>
</template> </template>
<script> <script>
import { defineComponent, ref, reactive, watch, onMounted, nextTick, toRefs } from "vue"; import {
defineComponent,
ref,
reactive,
watch,
onMounted,
nextTick,
toRefs,
} from "vue";
import { Https } from "@/tool/https"; import { Https } from "@/tool/https";
import { Modal, message } from "ant-design-vue"; import { Modal, message } from "ant-design-vue";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue"; import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import { formatTime,isEmail } from "@/tool/util"; import { formatTime, isEmail } from "@/tool/util";
const md5 = require("md5"); import md5 from "md5";
export default defineComponent({ export default defineComponent({
components: { components: {},
}, emits: ["searchHistoryList"],
emits: ['searchHistoryList'], setup(props, { emit }) {
setup(props,{emit}) { let operations = reactive({
let operations = reactive({ operationsModal: false,
operationsModal:false, operationsEdit: false,
operationsEdit:false, loadingShow: false,
loadingShow:false, title: "",
title:'' });
}) let operationsData = reactive({
let operationsData = reactive({ accountId: -1,
accountId:-1, userName: "",
userName:'', userEmail: "",
userEmail:'', password: "",
password:'', oldPassword: "",
oldPassword:'', credits: "",
credits:'', });
}) let state = ref([
let state = ref([ {
{ label: "visitor",
label:'visitor', value: "0",
value:'0', },
}, {
{ label: "yearly",
label:'yearly', value: "1",
value:'1', },
}, {
{ label: "monthly",
label:'monthly', value: "2",
value:'2', },
}, {
{ label: "trial",
label:'trial', value: "3",
value:'3', },
}, ]);
]); let init = (funStr, data) => {
let init = (funStr,data)=>{ operations.operationsModal = true;
operations.operationsModal = true operations.operationsEdit = true;
operations.operationsEdit = true operations.title = funStr;
operations.title = funStr if (funStr == "Add") operations.operationsEdit = false;
if(funStr == 'Add') operations.operationsEdit = false if (funStr == "Edit") {
if(funStr == 'Edit'){ operationsData.accountId = data.id;
operationsData.accountId=data.id operationsData.userName = data.userName;
operationsData.userName=data.userName operationsData.userEmail = data.userEmail;
operationsData.userEmail=data.userEmail operationsData.password = data.userPassword;
operationsData.password=data.userPassword operationsData.oldPassword = data.userPassword;
operationsData.oldPassword=data.userPassword // operationsData.validStartTime='2024-08-05T00:00:06'
// operationsData.validStartTime='2024-08-05T00:00:06' // operationsData.validEndTime='2024-08-05T00:00:06'
// operationsData.validEndTime='2024-08-05T00:00:06' operationsData.credits = data.creditsUsageLimit;
operationsData.credits=data.creditsUsageLimit // operationsData.accountId = data.accountId
// operationsData.accountId = data.accountId // operationsData.userName = data.userName
// operationsData.userName = data.userName // operationsData.userEmail = data.userEmail
// operationsData.userEmail = data.userEmail // operationsData.validStartTime = formatTime(data.validStartTime)
// operationsData.validStartTime = formatTime(data.validStartTime) // operationsData.validEndTime = formatTime(data.validEndTime)
// operationsData.validEndTime = formatTime(data.validEndTime) }
} };
let focus = (event) => {
} if (operationsData.password == operationsData.oldPassword) {
let focus = (event) =>{ operationsData.password = "";
if(operationsData.password == operationsData.oldPassword){ }
operationsData.password = '' };
} let blur = (event) => {
} console.log(operationsData.password == "" && operationsData.oldPassword);
let blur = (event) =>{ if (operationsData.password == "" && operationsData.oldPassword) {
console.log((operationsData.password == '' && operationsData.oldPassword)) operationsData.password = operationsData.oldPassword;
if(operationsData.password == '' && operationsData.oldPassword){ }
operationsData.password = operationsData.oldPassword };
} let setAddData = () => {
} return {
let setAddData = ()=>{ creditsUsageLimit: operationsData.credits,
return { userEmail: operationsData.userEmail,
"creditsUsageLimit": operationsData.credits, userPassword: md5(operationsData.password + "abc"),
"userEmail": operationsData.userEmail, userName: operationsData.userName,
"userPassword": md5(operationsData.password + 'abc'), };
"userName": operationsData.userName, };
} let setEditData = () => {
} return {
let setEditData = ()=>{ id: operationsData.accountId,
return { creditsUsageLimit: operationsData.credits,
"id": operationsData.accountId, userName: operationsData.userName,
"creditsUsageLimit": operationsData.credits, userEmail: operationsData.userEmail,
"userName": operationsData.userName, userPassword:
"userEmail": operationsData.userEmail, operationsData.password == operationsData.oldPassword
"userPassword": (operationsData.password == operationsData.oldPassword)?'':md5(operationsData.password + 'abc'), ? ""
} : md5(operationsData.password + "abc"),
} };
let cancelDsign = ()=>{ };
operationsData.accountId=-1 let cancelDsign = () => {
operationsData.userName='' operationsData.accountId = -1;
operationsData.userEmail='' operationsData.userName = "";
operationsData.password='' operationsData.userEmail = "";
operationsData.credits='' operationsData.password = "";
operations.operationsModal = false operationsData.credits = "";
} operations.operationsModal = false;
let setOk = ()=>{ };
let data let setOk = () => {
if(operations.title == 'Add'){ let data;
data = setAddData() if (operations.title == "Add") {
if (!isEmail(data.userEmail)) { data = setAddData();
message.info("The email format is incorrect"); if (!isEmail(data.userEmail)) {
return; 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 *') }
Https.axiosPost(Https.httpUrls.addOrUpdateSubAccount, data).then( if (
(rv) => { !data.userName ||
if (rv) { !data.userEmail ||
cancelDsign() !data.userPassword ||
emit('searchHistoryList') !data.creditsUsageLimit
} )
} return message.warning("Please check the input box marked with *");
); Https.axiosPost(Https.httpUrls.addOrUpdateSubAccount, data).then(
}else{ (rv) => {
data = setEditData() if (rv) {
if (!isEmail(data.userEmail)) { cancelDsign();
message.info("The email format is incorrect"); emit("searchHistoryList");
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( } else {
(rv) => { data = setEditData();
if (rv) { if (!isEmail(data.userEmail)) {
cancelDsign() message.info("The email format is incorrect");
emit('searchHistoryList') 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(
(rv) => {
} if (rv) {
return { cancelDsign();
...toRefs(operations), emit("searchHistoryList");
...toRefs(operationsData), }
state, }
cancelDsign, );
init, }
focus, };
blur, return {
setOk, ...toRefs(operations),
}; ...toRefs(operationsData),
}, state,
data() { cancelDsign,
return { init,
}; focus,
}, blur,
mounted() {}, setOk,
methods: { };
},
}, data() {
return {};
},
mounted() {},
methods: {},
}); });
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
:deep(.allUserPoeration_modal){ :deep(.allUserPoeration_modal) {
.ant-modal-body{ .ant-modal-body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
} }
</style> </style>
<style lang="less" scoped> <style lang="less" scoped>
.allUserPoeration_modal { .allUserPoeration_modal {
.closeIcon { .closeIcon {
z-index: 2; z-index: 2;
}
.allUserPoeration_btn {
display: flex;
flex-direction: row;
height: auto;
justify-content: flex-end;
padding: 1rem 0;
.admin_search_item {
margin-bottom: 0;
} }
.allUserPoeration_btn{ }
display: flex; .allUserPoeration_center {
flex-direction: row; flex: 1;
height: auto; overflow-y: auto;
justify-content: flex-end; flex-direction: row;
padding: 1rem 0; flex-wrap: wrap;
.admin_search_item{ }
margin-bottom: 0;
}
}
.allUserPoeration_center{
flex: 1;
overflow-y: auto;
flex-direction: row;
flex-wrap: wrap;
}
} }
</style> </style>

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

@@ -1,277 +1,299 @@
<template> <template>
<div class="allUserPoerationModal" ref="allUserPoerationModal"></div> <div class="allUserPoerationModal" ref="allUserPoerationModal"></div>
<a-modal <a-modal
class="allUserPoeration_modal generalModel" class="allUserPoeration_modal generalModel"
v-model:visible="operationsModal" v-model:visible="operationsModal"
:footer="null" :footer="null"
:get-container="() => $refs.allUserPoerationModal" :get-container="() => $refs.allUserPoerationModal"
width="50%" width="50%"
:height="'77rem'" :height="'77rem'"
:maskClosable="false" :maskClosable="false"
:centered="true" :centered="true"
:closable="false" :closable="false"
:mask="true" :mask="true"
wrapClassName="#app" wrapClassName="#app"
:keyboard="false" :keyboard="false"
> >
<div class="generalModel_btn"> <div class="generalModel_btn">
<div class="generalModel_closeIcon" @click.stop="cancelDsign()"> <div class="generalModel_closeIcon" @click.stop="cancelDsign()">
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg
<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/> width="46"
<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/> height="46"
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/> viewBox="0 0 46 46"
</svg> fill="none"
xmlns="http://www.w3.org/2000/svg"
</div> >
</div> <circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3" />
<div class="modal_title_text"> <rect
<div>{{ title }} Coupon</div> x="32.5063"
</div> y="12"
<div class="allUserPoeration_center admin_page"> width="3"
<div class="admin_state_item"> height="29"
<span>Cooperator:</span> rx="1.5"
<input transform="rotate(45 32.5063 12)"
v-model="cooperator" fill="white"
placeholder="Please enter cooperator" />
type="text" <rect
style="width: 220px" x="34.6274"
/> y="32.5059"
</div> width="3"
<div class="admin_state_item" > height="29"
<span>percentOff(%): <span>*</span></span> rx="1.5"
<input transform="rotate(135 34.6274 32.5059)"
:class="{active:title != 'Add'}" fill="white"
:disabled="title != 'Add'" />
v-model="percentOff" </svg>
placeholder="Please enter percentOff" </div>
type="text" </div>
style="width: 220px" <div class="modal_title_text">
/> <div>{{ title }} Coupon</div>
</div> </div>
<div class="admin_state_item" > <div class="allUserPoeration_center admin_page">
<span>Commission Rate: <span>*</span></span> <div class="admin_state_item">
<input <span>Cooperator:</span>
:class="{active:title != 'Add'}" <input
:disabled="title != 'Add'" v-model="cooperator"
v-model="commissionRate" placeholder="Please enter cooperator"
placeholder="Please enter commission rate" type="text"
type="text" style="width: 220px"
style="width: 220px" />
/> </div>
</div> <div class="admin_state_item">
<div class="admin_state_item" > <span>percentOff(%): <span>*</span></span>
<!-- <div class="admin_state_item" > --> <input
<span>End Time: <span>*</span></span> :class="{ active: title != 'Add' }"
<a-space direction="vertical" style="width:220px"> :disabled="title != 'Add'"
<a-date-picker v-model:value="rangePickerValue" :disabled="title != 'Add'" style="width:220px" /> v-model="percentOff"
</a-space> placeholder="Please enter percentOff"
</div> type="text"
<div class="admin_state_item" > style="width: 220px"
<span>MaxRedemptions:</span> />
<input </div>
:class="{active:title != 'Add'}" <div class="admin_state_item">
:disabled="title != 'Add'" <span>Commission Rate: <span>*</span></span>
v-model="maxRedemptions" <input
placeholder="Please enter maximum" :class="{ active: title != 'Add' }"
type="text" :disabled="title != 'Add'"
style="width: 220px" v-model="commissionRate"
/> placeholder="Please enter commission rate"
</div> type="text"
<div class="admin_state_item" > style="width: 220px"
<span>PaidCommission:</span> />
<input </div>
v-model="paidCommission" <div class="admin_state_item">
placeholder="Please enter paidCommission" <!-- <div class="admin_state_item" > -->
type="text" <span>End Time: <span>*</span></span>
style="width: 220px" <a-space direction="vertical" style="width: 220px">
/> <a-date-picker
</div> v-model:value="rangePickerValue"
<div class="admin_state_item"> :disabled="title != 'Add'"
<span>Remark:</span> style="width: 220px"
<input />
v-model="remark" </a-space>
placeholder="Please enter remark" </div>
type="text" <div class="admin_state_item">
style="width: 220px" <span>MaxRedemptions:</span>
/> <input
</div> :class="{ active: title != 'Add' }"
:disabled="title != 'Add'"
v-model="maxRedemptions"
</div> placeholder="Please enter maximum"
<div class="allUserPoeration_btn admin_page"> type="text"
<div class="admin_search_item" @click="cancelDsign"> style="width: 220px"
Close />
</div> </div>
<div class="admin_search_item" @click="setOk"> <div class="admin_state_item">
OK <span>PaidCommission:</span>
</div> <input
v-model="paidCommission"
</div> placeholder="Please enter paidCommission"
</a-modal> type="text"
<div class="mark_loading" v-show="loadingShow"> style="width: 220px"
<a-spin size="large" /> />
</div> </div>
<div class="admin_state_item">
<span>Remark:</span>
<input
v-model="remark"
placeholder="Please enter remark"
type="text"
style="width: 220px"
/>
</div>
</div>
<div class="allUserPoeration_btn admin_page">
<div class="admin_search_item" @click="cancelDsign">Close</div>
<div class="admin_search_item" @click="setOk">OK</div>
</div>
</a-modal>
<div class="mark_loading" v-show="loadingShow">
<a-spin size="large" />
</div>
</template> </template>
<script> <script>
import { defineComponent, ref, reactive, watch, onMounted, nextTick, toRefs } from "vue"; import {
defineComponent,
ref,
reactive,
watch,
onMounted,
nextTick,
toRefs,
} from "vue";
import { Https } from "@/tool/https"; import { Https } from "@/tool/https";
import { Modal, message } from "ant-design-vue"; import { Modal, message } from "ant-design-vue";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue"; import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import { formatTime,isEmail } from "@/tool/util"; import { formatTime, isEmail } from "@/tool/util";
import dayjs, { Dayjs } from 'dayjs'; import dayjs, { Dayjs } from "dayjs";
const md5 = require("md5"); import md5 from "md5";
export default defineComponent({ export default defineComponent({
components: { components: {},
}, emits: ["searchHistoryList"],
emits: ['searchHistoryList'], setup(props, { emit }) {
setup(props,{emit}) { let operations = reactive({
let operations = reactive({ operationsModal: false,
operationsModal:false, operationsEdit: false,
operationsEdit:false, loadingShow: false,
loadingShow:false, title: "",
title:'' });
}) let operationsData = reactive({
let operationsData = reactive({ rangePickerValue: "",
rangePickerValue:'', percentOff: "",
percentOff:'', commissionRate: "",
commissionRate:'', maxRedemptions: "",
maxRedemptions:'', cooperator: "",
cooperator:'', paidCommission: "",
paidCommission:'', remark: "",
remark:'', id: "",
id:'' });
}) let init = (funStr, data) => {
let init = (funStr,data)=>{ operations.operationsModal = true;
operations.operationsModal = true operations.operationsEdit = true;
operations.operationsEdit = true operations.title = funStr;
operations.title = funStr if (funStr == "Add") operations.operationsEdit = false;
if(funStr == 'Add') operations.operationsEdit = false if (funStr == "Edit") {
if(funStr == 'Edit'){ operationsData.id = data.id;
operationsData.id=data.id operationsData.percentOff = data.percentOff;
operationsData.percentOff=data.percentOff operationsData.commissionRate = data.commissionRate;
operationsData.commissionRate=data.commissionRate operationsData.maxRedemptions = data.maxRedemptions;
operationsData.maxRedemptions=data.maxRedemptions operationsData.cooperator = data.cooperator;
operationsData.cooperator=data.cooperator operationsData.paidCommission = data.paidCommission;
operationsData.paidCommission=data.paidCommission operationsData.remark = data.remark;
operationsData.remark=data.remark operationsData.rangePickerValue = dayjs(
operationsData.rangePickerValue = dayjs(new Date(data.redeemBy * 1000).toISOString().split('T')[0],'YYYY/MM/DD'); new Date(data.redeemBy * 1000).toISOString().split("T")[0],
"YYYY/MM/DD"
);
// operationsData.rangePickerValue='2024-08-05T00:00:06' // operationsData.rangePickerValue='2024-08-05T00:00:06'
// operationsData.validEndTime='2024-08-05T00:00:06' // operationsData.validEndTime='2024-08-05T00:00:06'
// operationsData.commissionRate = data.commissionRate // operationsData.commissionRate = data.commissionRate
// operationsData.maxRedemptions = data.maxRedemptions // operationsData.maxRedemptions = data.maxRedemptions
// operationsData.validStartTime = formatTime(data.validStartTime) // operationsData.validStartTime = formatTime(data.validStartTime)
// operationsData.validEndTime = formatTime(data.validEndTime) // operationsData.validEndTime = formatTime(data.validEndTime)
} }
};
} let setAddData = () => {
let setAddData = ()=>{ const timestampMs =
const timestampMs = new Date(operationsData.rangePickerValue).getTime() / 1000; // 直接获取毫秒时间戳 new Date(operationsData.rangePickerValue).getTime() / 1000; // 直接获取毫秒时间戳
return { return {
"percentOff": operationsData.percentOff, percentOff: operationsData.percentOff,
"maxRedemptions": operationsData.maxRedemptions, maxRedemptions: operationsData.maxRedemptions,
"commissionRate": operationsData.commissionRate, commissionRate: operationsData.commissionRate,
"timestamp": timestampMs, timestamp: timestampMs,
cooperator:operationsData.cooperator, cooperator: operationsData.cooperator,
remark:operationsData.remark, remark: operationsData.remark,
} };
} };
let setEditData = ()=>{ let setEditData = () => {
const timestampMs = new Date(operationsData.rangePickerValue).getTime() / 1000; // 直接获取毫秒时间戳 const timestampMs =
return { new Date(operationsData.rangePickerValue).getTime() / 1000; // 直接获取毫秒时间戳
id: operationsData.id, return {
paidCommission: operationsData.commissionRate, id: operationsData.id,
cooperator:operationsData.cooperator, paidCommission: operationsData.commissionRate,
remark:operationsData.remark, cooperator: operationsData.cooperator,
} remark: operationsData.remark,
} };
let cancelDsign = ()=>{ };
operationsData.rangePickerValue='' let cancelDsign = () => {
operationsData.percentOff='' operationsData.rangePickerValue = "";
operationsData.commissionRate='' operationsData.percentOff = "";
operationsData.maxRedemptions='' operationsData.commissionRate = "";
operationsData.cooperator='' operationsData.maxRedemptions = "";
operationsData.paidCommission='' operationsData.cooperator = "";
operationsData.remark='' operationsData.paidCommission = "";
operationsData.id='' operationsData.remark = "";
operations.operationsModal = false operationsData.id = "";
} operations.operationsModal = false;
let setOk = ()=>{ };
let data let setOk = () => {
if(operations.title == 'Add'){ let data;
data = setAddData() if (operations.title == "Add") {
if(!data.commissionRate || !data.timestamp || !data.percentOff)return message.warning('Please check the input box marked with *') data = setAddData();
Https.axiosPost(Https.httpUrls.createCoupon, data).then( if (!data.commissionRate || !data.timestamp || !data.percentOff)
(rv) => { return message.warning("Please check the input box marked with *");
if (rv) { Https.axiosPost(Https.httpUrls.createCoupon, data).then((rv) => {
cancelDsign() if (rv) {
emit('searchHistoryList') cancelDsign();
} emit("searchHistoryList");
} }
); });
}else{ } else {
data = setEditData() data = setEditData();
Https.axiosGet(Https.httpUrls.updatePromCodeInfo,{params:data}).then( Https.axiosGet(Https.httpUrls.updatePromCodeInfo, {
(rv) => { params: data,
if (rv) { }).then((rv) => {
cancelDsign() if (rv) {
emit('searchHistoryList') cancelDsign();
} emit("searchHistoryList");
} }
); });
} }
};
} return {
return { ...toRefs(operations),
...toRefs(operations), ...toRefs(operationsData),
...toRefs(operationsData), cancelDsign,
cancelDsign, init,
init, focus,
focus, blur,
blur, setOk,
setOk, };
}; },
}, data() {
data() { return {};
return { },
}; mounted() {},
}, methods: {},
mounted() {},
methods: {
},
}); });
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
:deep(.allUserPoeration_modal){ :deep(.allUserPoeration_modal) {
.ant-modal-body{ .ant-modal-body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
} }
</style> </style>
<style lang="less" scoped> <style lang="less" scoped>
.allUserPoeration_modal { .allUserPoeration_modal {
.closeIcon { .closeIcon {
z-index: 2; z-index: 2;
}
.allUserPoeration_btn {
display: flex;
flex-direction: row;
height: auto;
justify-content: flex-end;
padding: 1rem 0;
.admin_search_item {
margin-bottom: 0;
} }
.allUserPoeration_btn{ }
display: flex; .allUserPoeration_center {
flex-direction: row; flex: 1;
height: auto; overflow-y: auto;
justify-content: flex-end; flex-direction: row;
padding: 1rem 0; flex-wrap: wrap;
.admin_search_item{ }
margin-bottom: 0;
}
}
.allUserPoeration_center{
flex: 1;
overflow-y: auto;
flex-direction: row;
flex-wrap: wrap;
}
} }
</style> </style>

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

File diff suppressed because it is too large Load Diff

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

File diff suppressed because it is too large Load Diff

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

File diff suppressed because it is too large Load Diff

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

File diff suppressed because it is too large Load Diff

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

@@ -1,57 +1,63 @@
<template> <template>
<div class="Container"> <div class="Container">
<div class="icon" @click="openphoneModel"> <div class="icon" @click="openphoneModel">
<img src="@/assets/images/loginPage/phone.svg" alt=""> <img src="@/assets/images/loginPage/phone.svg" alt="" />
</div>
<phoneModel ref="phoneModel"></phoneModel>
</div> </div>
<phoneModel ref="phoneModel"></phoneModel>
</div>
</template> </template>
<script> <script>
import { defineComponent, ref, reactive, watch, onMounted, nextTick, toRefs,router } from "vue"; import {
import phoneModel from "./phoneModel.vue"; defineComponent,
export default defineComponent({ ref,
name: "login", reactive,
components: { watch,
phoneModel onMounted,
}, nextTick,
setup() { toRef,
let phoneDom = reactive({ } from "vue";
phoneModel:null import phoneModel from "./phoneModel.vue";
}) export default defineComponent({
const openphoneModel = ()=>{ name: "login",
phoneDom.phoneModel.init() components: {
} phoneModel,
onMounted(()=>{ },
setup() {
}) let phoneDom = reactive({
return { phoneModel: null,
...toRefs(phoneDom), });
openphoneModel, const openphoneModel = () => {
} phoneDom.phoneModel.init();
}, };
}) onMounted(() => {});
return {
...toRefs(phoneDom),
openphoneModel,
};
},
});
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
.Container{ .Container {
position: relative; position: relative;
.icon{ .icon {
width: 40px; width: 40px;
height: 40px; height: 40px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border: 1px solid #dadce0; border: 1px solid #dadce0;
border-radius: 50%; border-radius: 50%;
cursor: pointer; cursor: pointer;
&:hover{ &:hover {
background: #f8faff; background: #f8faff;
} }
img{ img {
width: 18px; width: 18px;
height: 18px; height: 18px;
} }
} }
&.Container:hover{ &.Container:hover {
} }
} }
</style> </style>

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

@@ -1,81 +1,99 @@
<template> <template>
<div ref="phoneModelDom"></div> <div ref="phoneModelDom"></div>
<a-modal <a-modal
class="phoneModel generalModel" class="phoneModel generalModel"
:get-container="() => $refs.phoneModelDom" :get-container="() => $refs.phoneModelDom"
v-model:visible="phoneModel" v-model:visible="phoneModel"
:footer="null" :footer="null"
:width="pageWidth" :width="pageWidth"
:maskClosable="false" :maskClosable="false"
:centered="true" :centered="true"
:closable="false" :closable="false"
:mask="phoneModelMask" :mask="phoneModelMask"
:keyboard="false" :keyboard="false"
:destroyOnClose="true" :destroyOnClose="true"
:zIndex="1000" :zIndex="1000"
> >
<div class="generalModel_btn"> <div class="generalModel_btn">
<div class="generalModel_closeIcon" @click.stop="cancelDsign()"> <div class="generalModel_closeIcon" @click.stop="cancelDsign()">
<!-- <i class="fi fi-rr-cross-small"></i> --> <!-- <i class="fi fi-rr-cross-small"></i> -->
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg
<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/> width="46"
<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/> height="46"
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/> viewBox="0 0 46 46"
</svg> fill="none"
xmlns="http://www.w3.org/2000/svg"
</div> >
</div> <circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3" />
<div class="phoneLogin"> <rect
<!-- <div id="wx_id_signin"></div> --> x="32.5063"
</div> y="12"
<div class="mark_loading" v-show="loadingShow"> width="3"
<a-spin size="large" /> height="29"
</div> rx="1.5"
</a-modal> 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">
<!-- <div id="wx_id_signin"></div> -->
</div>
<div class="mark_loading" v-show="loadingShow">
<a-spin size="large" />
</div>
</a-modal>
</template> </template>
<script> <script>
import { defineComponent,ref,reactive,toRefs, onMounted} from "vue"; import { defineComponent, ref, reactive, toRefs, onMounted } from "vue";
import VerificationCodeInput from "@/component/LoginPage/verificationCodeInput.vue"; import VerificationCodeInput from "@/component/LoginPage/verificationCodeInput.vue";
const md5 = require("md5"); import md5 from "md5";
export default defineComponent({ export default defineComponent({
components: { components: {
VerificationCodeInput, VerificationCodeInput,
}, },
setup(){ setup() {
let phoneModel = reactive({ let phoneModel = reactive({
phoneModel:false, phoneModel: false,
phoneModelMask:true, phoneModelMask: true,
pageWidth:'50%', pageWidth: "50%",
}) });
let data = reactive({ let data = reactive({
loadingShow:false, loadingShow: false,
}) });
const init = async ()=>{ const init = async () => {
phoneModel.phoneModel = true phoneModel.phoneModel = true;
} };
const cancelDsign = ()=>{ const cancelDsign = () => {
phoneModel.phoneModel = false phoneModel.phoneModel = false;
} };
return{ return {
...toRefs(phoneModel), ...toRefs(phoneModel),
...toRefs(data), ...toRefs(data),
init, init,
cancelDsign, cancelDsign,
} };
}, },
data() { data() {
return { return {};
}; },
}, methods: {},
methods: {
},
}); });
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.phoneLogin { .phoneLogin {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
</style> </style>

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

@@ -1,70 +1,76 @@
<template> <template>
<div class="Container"> <div class="Container">
<div class="icon" @click="openWeiXinModel"> <div class="icon" @click="openWeiXinModel">
<img src="@/assets/images/loginPage/weiXinIcon.svg" alt=""> <img src="@/assets/images/loginPage/weiXinIcon.svg" alt="" />
<span>{{ $props.text }}</span> <span>{{ $props.text }}</span>
</div>
<weiXinModel ref="weiXinModel"></weiXinModel>
</div> </div>
<weiXinModel ref="weiXinModel"></weiXinModel>
</div>
</template> </template>
<script> <script>
import { defineComponent, ref, reactive, watch, onMounted, nextTick, toRefs,router } from "vue"; import {
import weiXinModel from "./weiXinModel.vue"; defineComponent,
export default defineComponent({ ref,
name: "login", reactive,
components: { watch,
weiXinModel onMounted,
}, nextTick,
props: { toRefs,
text: { } from "vue";
type: String, import weiXinModel from "./weiXinModel.vue";
default: 'Sign in with Wechat' export default defineComponent({
} name: "login",
}, components: {
setup() { weiXinModel,
let weiXinDom = reactive({ },
weiXinModel:null props: {
}) text: {
const openWeiXinModel = ()=>{ type: String,
weiXinDom.weiXinModel.init() default: "Sign in with Wechat",
} },
onMounted(()=>{ },
setup() {
}) let weiXinDom = reactive({
return { weiXinModel: null,
...toRefs(weiXinDom), });
openWeiXinModel, const openWeiXinModel = () => {
} weiXinDom.weiXinModel.init();
}, };
}) onMounted(() => {});
return {
...toRefs(weiXinDom),
openWeiXinModel,
};
},
});
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
.Container{ .Container {
position: relative; position: relative;
.icon{ .icon {
// width: 40px; // width: 40px;
width: auto; width: auto;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border: 1px solid #dadce0; border: 1px solid #dadce0;
border-radius: 4rem; border-radius: 4rem;
padding: .5rem 3rem; padding: 0.5rem 3rem;
cursor: pointer; cursor: pointer;
box-sizing: border-box; box-sizing: border-box;
&:hover{ &:hover {
background: #f8faff; background: #f8faff;
} }
img{ img {
width: 3.8rem; width: 3.8rem;
height: 3.8rem; height: 3.8rem;
} }
span{ span {
font-size: 1.4rem; font-size: 1.4rem;
margin-left: 1.4rem; margin-left: 1.4rem;
} }
} }
&.Container:hover{ &.Container:hover {
} }
} }
</style> </style>

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

@@ -1,91 +1,157 @@
<template> <template>
<div class="payMethod" ref="payMethod"></div> <div class="payMethod" ref="payMethod"></div>
<a-modal <a-modal
class="generalModel" class="generalModel"
:get-container="() => $refs.payMethod" :get-container="() => $refs.payMethod"
v-model:visible="payMethodModel" v-model:visible="payMethodModel"
:footer="null" :footer="null"
:width="pageWidth" :width="pageWidth"
height="auto" height="auto"
:maskClosable="false" :maskClosable="false"
:centered="true" :centered="true"
:closable="false" :closable="false"
:mask="payMethodModelMask" :mask="payMethodModelMask"
:keyboard="false" :keyboard="false"
:destroyOnClose="true" :destroyOnClose="true"
:zIndex="1000" :zIndex="1000"
> >
<div class="generalModel_btn"> <div class="generalModel_btn">
<div class="generalModel_closeIcon" @click.stop="cancelDsign()"> <div class="generalModel_closeIcon" @click.stop="cancelDsign()">
<!-- <i class="fi fi-rr-cross-small"></i> --> <!-- <i class="fi fi-rr-cross-small"></i> -->
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg
<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/> width="46"
<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/> height="46"
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/> viewBox="0 0 46 46"
</svg> fill="none"
xmlns="http://www.w3.org/2000/svg"
</div> >
</div> <circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3" />
<div class="payMethodContent"> <rect
<div class="generalModelTitle"> x="32.5063"
{{ $t('upgradePlan.paymentmethod') }} y="12"
</div> width="3"
<div class="payMethod_list"> height="29"
<label class="payMethod_item" v-show="$props.type == 'credits'"> rx="1.5"
<input name="payAffirm" type="radio" value="paypal" v-model="modeOfPayment"> transform="rotate(45 32.5063 12)"
<img src="../../assets/images/homePage/paypal.svg" alt=""> fill="white"
<span>PayPal</span> />
</label> <rect
<label class="payMethod_item"> x="34.6274"
<input name="Stripe" type="radio" value="stripe" v-model="modeOfPayment"> y="32.5059"
<img src="../../assets/images/homePage/stripe.svg" alt=""> width="3"
<span>Stripe ({{ $t('Renew.CreditCard') }}、{{ $t('Renew.Alipay') }})</span> height="29"
</label> rx="1.5"
<label class="payMethod_item" v-show="$props.type == 'credits'"> transform="rotate(135 34.6274 32.5059)"
<input name="payAffirm" type="radio" value="alipay" v-model="modeOfPayment"> fill="white"
<img src="../../assets/images/homePage/alipay.svg" alt=""> />
<span>{{ $t('upgradePlan.Alipay') }}</span> </svg>
<div v-show="modeOfPayment == 'alipay'" class="payAffirm_detail"> </div>
<label> </div>
<input name="location" type="radio" value="ALIPAYHK" v-model="modeOfPaymentDetail"> <div class="payMethodContent">
<span>{{ $t('upgradePlan.HongKong') }}</span> <div class="generalModelTitle">
</label> {{ $t("upgradePlan.paymentmethod") }}
<label> </div>
<input name="location" type="radio" value="ALIPAYCN" v-model="modeOfPaymentDetail"> <div class="payMethod_list">
<span>{{ $t('upgradePlan.MainlandChina') }}</span> <label class="payMethod_item" v-show="$props.type == 'credits'">
</label> <input
</div> name="payAffirm"
</label> type="radio"
</div> value="paypal"
<div class="payMethod_payAffirm_clause" ref="labelDisclaimer"> v-model="modeOfPayment"
<label> />
<input type="checkbox" v-model="clause"> <img src="../../assets/images/homePage/paypal.svg" alt="" />
<span class="generalModelDescription">{{ $t('upgradePlan.policy1') }}<a href="https://code-create.com.hk/aida-terms-and-conditions/" target="_blank">{{ $t('upgradePlan.policy2') }}</a>{{ $t('upgradePlan.policy3') }}<a href="https://code-create.com.hk/aida-subscription-agreement/" target="_blank">{{ $t('upgradePlan.policy4') }}</a>. *</span> <span>PayPal</span>
</label> </label>
</div> <label class="payMethod_item">
<div class="payMethod_payAffirm_btn"> <input
<div class="gallery_btn white" @click="cancelDsign">{{ $t('upgradePlan.Cancel') }}</div> name="Stripe"
<div class="gallery_btn" @click="payAffirm">{{ $t('upgradePlan.Payment') }}</div> type="radio"
</div> value="stripe"
v-model="modeOfPayment"
</div> />
<div class="mark_loading" v-show="isShowMark_"> <img src="../../assets/images/homePage/stripe.svg" alt="" />
<a-spin size="large" /> <span
</div> >Stripe ({{ $t("Renew.CreditCard") }}、{{
<div class="mark_loading" v-show="isShowMark" state="true"> $t("Renew.Alipay")
<div class="mark_loading_title">{{ $t('upgradePlan.completed') }}</div> }})</span
<div class="mark_loading_intro">{{ $t('upgradePlan.hint') }}</div> >
<div class="mark_loading_title_box"> </label>
<div class="mark_loading_btn mark_loading_btn2" @click="setPaidBack">{{ $t('upgradePlan.Back') }}</div> <label class="payMethod_item" v-show="$props.type == 'credits'">
<div class="mark_loading_btn" @click="completePayment">OK</div> <input
</div> name="payAffirm"
</div> type="radio"
</a-modal> 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>
</label>
<label>
<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
>
</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>
</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_box">
<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> </template>
<script lang="ts"> <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 { Https } from "@/tool/https";
import { isEmail } from "@/tool/util"; import { isEmail } from "@/tool/util";
import { message } from "ant-design-vue"; import { message } from "ant-design-vue";
@@ -93,284 +159,296 @@ import VerificationCodeInput from "@/component/LoginPage/verificationCodeInput.v
import { useStore } from "vuex"; import { useStore } from "vuex";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
import { setLang } from "@/tool/guide"; import { setLang } from "@/tool/guide";
const md5 = require("md5"); import md5 from "md5";
export default defineComponent({ export default defineComponent({
components: { components: {
VerificationCodeInput, VerificationCodeInput,
},
props: {
type: {
type: String,
default: "",
}, },
props:{ },
type:{ emits: ["completePayment"],
type:String, setup(prop, { emit }) {
default:'' const store = useStore();
} let payMethod = reactive({
}, payMethodModel: false,
emits: ['completePayment'], payMethodModelMask: true,
setup(prop,{emit}){ pageWidth: "50%",
const store = useStore(); });
let payMethod = reactive({ let payMethodData = reactive({
payMethodModel:false, modeOfPayment: prop.type == "credits" ? "paypal" : "stripe",
payMethodModelMask:true, modeOfPaymentDetail: "ALIPAYHK",
pageWidth:'50%' labelDisclaimer: null, //dom
}) payAffirmData: {} as any,
let payMethodData = reactive({ clause: false,
modeOfPayment:prop.type == 'credits'?'paypal':'stripe', newWindow: null as any,
modeOfPaymentDetail:'ALIPAYHK', isShowMark: false,
labelDisclaimer:null,//dom isShowMark_: false,
payAffirmData:{} as any, });
clause:false, const init = (data: any) => {
newWindow:null as any, payMethod.payMethodModel = true;
isShowMark:false, payMethodData.payAffirmData = data;
isShowMark_:false, };
}) const cancelDsign = () => {
const init = (data:any)=>{ payMethod.payMethodModel = false;
payMethod.payMethodModel = true };
payMethodData.payAffirmData = data const payAffirm = () => {
} if (!payMethodData.clause) {
const cancelDsign = () => { let labelDisclaimer: any = payMethodData.labelDisclaimer;
payMethod.payMethodModel = false if (!labelDisclaimer.classList.contains("animation")) {
} labelDisclaimer.classList.add("animation");
const payAffirm = () => { setTimeout(() => {
if(!payMethodData.clause){ labelDisclaimer.classList.remove("animation");
let labelDisclaimer:any = payMethodData.labelDisclaimer }, 1000);
if(!labelDisclaimer.classList.contains('animation')){
labelDisclaimer.classList.add('animation')
setTimeout(() => {
labelDisclaimer.classList.remove('animation')
}, 1000);
}
return
}
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
// data.
}else{
httpsUrl = Https.httpUrls.payAlipayHK
}
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'){
// 在新窗口中写入内容
herf = rv.approve;
// payMethodData.newWindow.location.href = rv.approve;
}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}`
// payMethodData.newWindow.location.href = herf;
}
if(payMethodData.newWindow){
payMethodData.newWindow.location.href = herf
}else{
// window.open(herf, '_blank');
window.location.href=herf;
}
payMethodData.newWindow = null
payMethodData.isShowMark = true
payMethodData.isShowMark_ = false
}
).catch(res=>{
payMethodData.isShowMark_ = false
});
}
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),
init,
cancelDsign,
payAffirm,
setPaidBack,
completePayment,
} }
return;
}
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;
// data.
} else {
httpsUrl = Https.httpUrls.payAlipayHK;
}
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") {
// 在新窗口中写入内容
herf = rv.approve;
// payMethodData.newWindow.location.href = rv.approve;
} 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}`;
// payMethodData.newWindow.location.href = herf;
}
if (payMethodData.newWindow) {
payMethodData.newWindow.location.href = herf;
} else {
// window.open(herf, '_blank');
window.location.href = herf;
}
payMethodData.newWindow = null;
payMethodData.isShowMark = true;
payMethodData.isShowMark_ = false;
})
.catch((res) => {
payMethodData.isShowMark_ = false;
});
};
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),
init,
cancelDsign,
payAffirm,
setPaidBack,
completePayment,
};
},
data() {
return {};
},
methods: {
turnToWindow(url: any) {
window.open(url);
}, },
data() { },
return {
};
},
methods: {
turnToWindow(url:any) {
window.open(url);
},
},
}); });
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.payMethod { .payMethod {
.payMethodContent{ .payMethodContent {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
width: 60rem; width: 60rem;
margin: 0 auto; margin: 0 auto;
position: relative; position: relative;
.generalModelTitle,.generalModelInfo{ .generalModelTitle,
width: 100%; .generalModelInfo {
} width: 100%;
.payMethod_list{ }
margin-bottom: 4rem; .payMethod_list {
display: flex; margin-bottom: 4rem;
flex-direction: column; display: flex;
width: 100%; flex-direction: column;
>label{ width: 100%;
display: flex; > label {
align-items: center; display: flex;
padding: 0 2rem; align-items: center;
margin-bottom: 3rem; padding: 0 2rem;
cursor: pointer; margin-bottom: 3rem;
border: 2px solid #EFEFEF; cursor: pointer;
border-radius: 2rem; border: 2px solid #efefef;
height: 8rem; border-radius: 2rem;
width: 100%; height: 8rem;
img{ width: 100%;
margin: 0rem 2rem; img {
// max-width: 4rem; margin: 0rem 2rem;
width: 4rem; // max-width: 4rem;
} width: 4rem;
.payAffirm_detail{ }
margin-left: auto; .payAffirm_detail {
display: flex; margin-left: auto;
>label{ display: flex;
cursor: pointer; > label {
display: flex; cursor: pointer;
align-items: center; display: flex;
margin-right: 1rem; align-items: center;
span{ margin-right: 1rem;
margin-left: .5rem; span {
} margin-left: 0.5rem;
} }
}
} }
} }
>label:last-child{ > label:last-child {
margin: 0; margin: 0;
} }
} }
.payMethod_payAffirm_clause{ .payMethod_payAffirm_clause {
margin-bottom: 4rem; margin-bottom: 4rem;
label{ label {
cursor: pointer; cursor: pointer;
input{ input {
margin-right: 1rem; margin-right: 1rem;
cursor: pointer; cursor: pointer;
vertical-align: middle; vertical-align: middle;
} }
span{ span {
vertical-align: top; vertical-align: top;
a{ a {
color: #000; color: #000;
text-decoration: underline; text-decoration: underline;
} }
} }
} }
&.animation{ &.animation {
animation: shake .3s linear; animation: shake 0.3s linear;
@keyframes shake { @keyframes shake {
0%{ 0% {
transform: translateX(0px); transform: translateX(0px);
} }
25%{ 25% {
transform: translateX(-10px); transform: translateX(-10px);
} }
50%{ 50% {
transform: translateX(10px); transform: translateX(10px);
} }
75%{ 75% {
transform: translateX(-10px); transform: translateX(-10px);
} }
100%{ 100% {
transform: translateX(0px); transform: translateX(0px);
} }
} }
} }
} }
.payMethod_payAffirm_btn{ .payMethod_payAffirm_btn {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
width: 100%; width: 100%;
>div{ > div {
width: 29rem; width: 29rem;
} }
} }
}
} .mark_loading {
.mark_loading{ position: absolute;
position: absolute; z-index: 2;
z-index: 2; background: #fff;
background: #fff; .mark_loading_title {
.mark_loading_title{ font-size: 3rem;
font-size: 3rem; // text-decoration: underline;
// text-decoration: underline; font-weight: 600;
font-weight: 600; margin-bottom: 2rem;
margin-bottom: 2rem; // color: #fff;
// color: #fff; }
} .mark_loading_intro {
.mark_loading_intro{ color: rgba(0, 0, 0, 0.6);
color: rgba(0, 0, 0, 0.6); font-size: 1.4rem;
font-size: 1.4rem; margin-bottom: 2rem;
margin-bottom: 2rem; text-align: center;
text-align: center; width: 80%;
width: 80%; }
} .mark_loading_title_box {
.mark_loading_title_box{ display: flex;
display: flex; }
}
.mark_loading_btn,.mark_loading_btn2{ .mark_loading_btn,
// border: #000; .mark_loading_btn2 {
// color: #fff; // border: #000;
display: flex; // color: #fff;
margin-top: 10px; display: flex;
text-align: center; margin-top: 10px;
border: 2px solid; text-align: center;
padding: 0 20px; border: 2px solid;
border-radius: 10px; padding: 0 20px;
cursor: pointer; border-radius: 10px;
padding: .3rem 4rem; cursor: pointer;
background: #39215b; padding: 0.3rem 4rem;
color: #fff; background: #39215b;
border: none; color: #fff;
margin: 0 2rem; border: none;
align-items: center; margin: 0 2rem;
} align-items: center;
.mark_loading_btn2{ }
border: 2px solid #000; .mark_loading_btn2 {
color: #000; border: 2px solid #000;
background: rgba(0,0,0,0); color: #000;
} background: rgba(0, 0, 0, 0);
} }
}
} }
</style>
</style>

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

@@ -1,429 +1,452 @@
<template> <template>
<div class="Falls"> <div class="Falls">
<div class="falls_item" v-fadeIn="isScroll" v-for="item in list" :key="item.id" <div
:style="{ class="falls_item"
width: item.style.width + 'px', v-fadeIn="isScroll"
height: item.style.height + 'px', v-for="item in list"
top: item.style.top + 'px', :key="item.id"
left: item.style.left + 'px', :style="{
}" width: item.style.width + 'px',
> height: item.style.height + 'px',
<!-- 图片 --> top: item.style.top + 'px',
<div class="falls_item_img"> left: item.style.left + 'px',
<img }"
v-lazy="item.canvasUrl" >
@click="setItemDetail(item)" <!-- 图片 -->
:style="{ <div class="falls_item_img">
height: item.style.imgHeihgt + 'px', <img
}" v-lazy="item.canvasUrl"
/> @click="setItemDetail(item)"
<div v-if="item.original == 1" class="falls_item_user_Original">{{$t('newScaleImage.Original')}}</div> :style="{
</div> height: item.style.imgHeihgt + 'px',
}"
<!-- 文字 --> />
<div class="falls_item_bottom" v-if="isText"> <div v-if="item.original == 1" class="falls_item_user_Original">
<div class="falls_item_text" :title="item.text"> {{ $t("newScaleImage.Original") }}
{{item.text}} </div>
</div> </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_bottom" v-if="isText">
<div class="falls_item_user_detail"> <div class="falls_item_text" :title="item.text">
<span>@{{ item.userName }}</span> {{ item.text }}
<div :title="item.portfolioName">{{item.portfolioName}}</div> </div>
<!-- <span :title="item.portfolioDes">{{item.portfolioDes}}</span> --> <div class="falls_item_content">
</div> <div class="falls_item_user">
</div> <!-- <img src="http://121.40.53.210:3000/falls/5.png" alt=""> -->
<div class="falls_item_detail"> <div class="falls_item_user_detail">
<!-- <div> <span>@{{ item.userName }}</span>
<div :title="item.portfolioName">{{ item.portfolioName }}</div>
<!-- <span :title="item.portfolioDes">{{item.portfolioDes}}</span> -->
</div>
</div>
<div class="falls_item_detail">
<!-- <div>
<svg xmlns="http://www.w3.org/2000/svg" width="2.5rem" height="2.5rem" viewBox="0 0 16 16" fill="none" role="img" :style="{color:'#9e9ea7',fill: 'currentColor'}"> <svg xmlns="http://www.w3.org/2000/svg" width="2.5rem" height="2.5rem" viewBox="0 0 16 16" fill="none" role="img" :style="{color:'#9e9ea7',fill: 'currentColor'}">
<path d="M10.7408 2C13.0889 2 14.6667 4.235 14.6667 6.32C14.6667 10.5425 8.11856 14 8.00004 14C7.88152 14 1.33337 10.5425 1.33337 6.32C1.33337 4.235 2.91115 2 5.2593 2C6.60745 2 7.48893 2.6825 8.00004 3.2825C8.51115 2.6825 9.39263 2 10.7408 2Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M10.7408 2C13.0889 2 14.6667 4.235 14.6667 6.32C14.6667 10.5425 8.11856 14 8.00004 14C7.88152 14 1.33337 10.5425 1.33337 6.32C1.33337 4.235 2.91115 2 5.2593 2C6.60745 2 7.48893 2.6825 8.00004 3.2825C8.51115 2.6825 9.39263 2 10.7408 2Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg> </svg>
<span>{{item.viewNums}}</span> <span>{{item.viewNums}}</span>
</div> --> </div> -->
<label @click="portfolioLike(item)"> <label @click="portfolioLike(item)">
<i v-if="true" class="fi fi-sr-thumbs-up" style="color:rgba(158, 158, 167);"></i> <i
<i v-else class="fi fi-rr-social-network"></i> v-if="true"
<span>{{item.likeNum}}</span> class="fi fi-sr-thumbs-up"
</label> style="color: rgba(158, 158, 167)"
<div> ></i>
<!-- <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;"> <i v-else class="fi fi-rr-social-network"></i>
<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;">
<path d="M8 3C4.36992 3 1.98789 6.21774 1.18763 7.49059C1.09079 7.64462 1.04237 7.72163 1.01527 7.84042C0.99491 7.92964 0.99491 8.07036 1.01527 8.15958C1.04237 8.27837 1.09079 8.35539 1.18763 8.50941C1.98789 9.78226 4.36992 13 8 13C11.6301 13 14.0121 9.78226 14.8124 8.50941L14.8124 8.50939C14.9092 8.35538 14.9576 8.27837 14.9847 8.15958C15.0051 8.07036 15.0051 7.92964 14.9847 7.84042C14.9576 7.72163 14.9092 7.64462 14.8124 7.4906L14.8124 7.49059C14.0121 6.21774 11.6301 3 8 3Z" fill="currentColor"></path> <path d="M8 3C4.36992 3 1.98789 6.21774 1.18763 7.49059C1.09079 7.64462 1.04237 7.72163 1.01527 7.84042C0.99491 7.92964 0.99491 8.07036 1.01527 8.15958C1.04237 8.27837 1.09079 8.35539 1.18763 8.50941C1.98789 9.78226 4.36992 13 8 13C11.6301 13 14.0121 9.78226 14.8124 8.50941L14.8124 8.50939C14.9092 8.35538 14.9576 8.27837 14.9847 8.15958C15.0051 8.07036 15.0051 7.92964 14.9847 7.84042C14.9576 7.72163 14.9092 7.64462 14.8124 7.4906L14.8124 7.49059C14.0121 6.21774 11.6301 3 8 3Z" fill="currentColor"></path>
<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> <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> --> </svg> -->
<i class="fi fi-sr-eye"></i> <i class="fi fi-sr-eye"></i>
<span>{{item.viewNums}}</span> <span>{{ item.viewNums }}</span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import { defineComponent,h ,toRefs,ref,reactive,onMounted,onBeforeDestroy,nextTick,provide,computed} from 'vue' import {
defineComponent,
h,
toRefs,
ref,
reactive,
onMounted,
nextTick,
provide,
computed,
} from "vue";
import { gsap, TweenMax } from "gsap"; import { gsap, TweenMax } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger"; import { ScrollTrigger } from "gsap/ScrollTrigger";
export default defineComponent({ export default defineComponent({
props:{ props: {
isScroll:{ isScroll: {
type:Boolean, type: Boolean,
default:true, default: true,
}, },
isText:{ isText: {
type:Boolean, type: Boolean,
default:true, default: true,
}, },
itemWidth:{ itemWidth: {
type:Number, type: Number,
default:300, default: 300,
} },
}, },
setup(){ setup() {
let list = ref([]) let list = ref([]);
let wait_list = ref([]) let wait_list = ref([]);
let width = ref(300) let width = ref(300);
let num_x = ref(1) let num_x = ref(1);
let gap_x = ref(0) let gap_x = ref(0);
let gap_y = ref(0) let gap_y = ref(0);
let poss = ref([]) let poss = ref([]);
let loading = ref(false) let loading = ref(false);
let computedHeight = 0 let computedHeight = 0;
let imgDom = ref() let imgDom = ref();
return{ return {
list, list,
wait_list, wait_list,
width, width,
num_x, num_x,
gap_x, gap_x,
gap_y, gap_y,
poss, poss,
loading, loading,
computedHeight, computedHeight,
imgDom, imgDom,
} };
}, },
directives:{ directives: {
fadeIn:{ fadeIn: {
mounted (el,binding) { mounted(el, binding) {
let dom let dom;
if(binding.value){ if (binding.value) {
dom = document.querySelector('.works_page .page_content') dom = document.querySelector(".works_page .page_content");
}else{ } else {
dom = document.querySelector('.homeRecommend_content_body') dom = document.querySelector(".homeRecommend_content_body");
} }
gsap.registerPlugin(ScrollTrigger); gsap.registerPlugin(ScrollTrigger);
let tl1 = gsap.timeline(); let tl1 = gsap.timeline();
tl1.from(el,1, {y:'30px',opacity:0},) tl1.from(el, 1, { y: "30px", opacity: 0 });
ScrollTrigger.create({ ScrollTrigger.create({
trigger: el, // 触发器元素 trigger: el, // 触发器元素
start: "top 90%", // 滚动触发器的起始滚动位置 start: "top 90%", // 滚动触发器的起始滚动位置
end: '100% 80%', // 滚动触发器的结束滚动位置 end: "100% 80%", // 滚动触发器的结束滚动位置
// markers: true, // 开启标注功能 // markers: true, // 开启标注功能
scrub: true, scrub: true,
animation:tl1, animation: tl1,
scroller:dom,//设置指定元素为滚动依据 scroller: dom, //设置指定元素为滚动依据
scrub:2, scrub: 2,
// onUpdate:(v)=>{ // onUpdate:(v)=>{
// if(v.progress < 0.1){ // if(v.progress < 0.1){
// v.trigger?.classList.remove('active') // v.trigger?.classList.remove('active')
// }else{ // }else{
// v.trigger?.classList.add('active') // v.trigger?.classList.add('active')
// // v.trigger?.classList.add('active') // // v.trigger?.classList.add('active')
// } // }
// } // }
}); });
} },
}, },
}, },
mounted () { mounted() {
this.resize() this.resize();
window.addEventListener("resize", this.resize); window.addEventListener("resize", this.resize);
let domFalls = document.querySelector('.Falls') let domFalls = document.querySelector(".Falls");
let domCss = getComputedStyle(domFalls); let domCss = getComputedStyle(domFalls);
const paddingBottom = domCss.getPropertyValue('--paddingBottom').split('px')[0]*1; const paddingBottom =
const textMarginTop = domCss.getPropertyValue('--textMarginTop').split('px')[0]*1; domCss.getPropertyValue("--paddingBottom").split("px")[0] * 1;
const textHeight = domCss.getPropertyValue('--textHeight').split('px')[0]*1; const textMarginTop =
const contentHeight = domCss.getPropertyValue('--contentHeight').split('px')[0]*1; domCss.getPropertyValue("--textMarginTop").split("px")[0] * 1;
if(this.$props.isText){ const textHeight =
this.computedHeight = paddingBottom + textMarginTop + textHeight + contentHeight; domCss.getPropertyValue("--textHeight").split("px")[0] * 1;
} const contentHeight =
}, domCss.getPropertyValue("--contentHeight").split("px")[0] * 1;
beforeDestroy () { if (this.$props.isText) {
this.wait_list = [] this.computedHeight =
window.removeEventListener("resize", this.resize); paddingBottom + textMarginTop + textHeight + contentHeight;
}, }
// 挂载方法 },
methods: { beforeDestroy() {
clearData(){ this.wait_list = [];
this.wait_list = [] window.removeEventListener("resize", this.resize);
this.width = this.itemWidth },
this.num_x = 1 // 挂载方法
this.gap_x = 0 methods: {
this.gap_y = 0 clearData() {
this.poss = [] this.wait_list = [];
this.loading = false this.width = this.itemWidth;
this.list = [] this.num_x = 1;
this.resize() this.gap_x = 0;
if(this.imgDom){ this.gap_y = 0;
this.imgDom.remove(); this.poss = [];
this.imgDom = null this.loading = false;
} this.list = [];
}, this.resize();
push(arr) { if (this.imgDom) {
this.wait_list = this.wait_list.concat(arr); this.imgDom.remove();
if (!this.loading) { this.imgDom = null;
this.loading = true; }
this.loadImg(); },
} push(arr) {
}, this.wait_list = this.wait_list.concat(arr);
deleteItem(id){ if (!this.loading) {
for (let index = 0; index < this.list.length; index++) { this.loading = true;
if(this.list[index].id == id){ this.loadImg();
this.list.splice(index,1) }
this.resize() },
break; deleteItem(id) {
} for (let index = 0; index < this.list.length; index++) {
} if (this.list[index].id == id) {
}, this.list.splice(index, 1);
loadImg() { this.resize();
if (this.wait_list.length <= 0) { break;
this.loading = false; }
this.$emit("loadend"); }
return; },
} loadImg() {
if (this.wait_list.length <= 0) {
let url = this.wait_list[0].canvasUrl || this.wait_list[0].url; this.loading = false;
let data = this.wait_list[0] this.$emit("loadend");
this.imgDom = document.createElement("img"); return;
this.imgDom.src = url; }
this.imgDom.style.width = this.itemWidth + "px";
this.imgDom.style.maxHeight = this.itemWidth+330 + "px"; let url = this.wait_list[0].canvasUrl || this.wait_list[0].url;
this.imgDom.style.position = "absolute"; let data = this.wait_list[0];
this.imgDom.style.top = "-99999px"; this.imgDom = document.createElement("img");
document.body.appendChild(this.imgDom); this.imgDom.src = url;
this.imgDom.addEventListener("load", () => { this.imgDom.style.width = this.itemWidth + "px";
if(!this.imgDom) return this.imgDom.style.maxHeight = this.itemWidth + 330 + "px";
var idx = 0; this.imgDom.style.position = "absolute";
var pos_num = this.poss[idx]; this.imgDom.style.top = "-99999px";
for (var i = 1; i < this.poss.length; i++) { document.body.appendChild(this.imgDom);
if (pos_num > this.poss[i]) { this.imgDom.addEventListener("load", () => {
idx = i; if (!this.imgDom) return;
pos_num = this.poss[i]; var idx = 0;
} var pos_num = this.poss[idx];
} for (var i = 1; i < this.poss.length; i++) {
// this.computedHeight = 0 if (pos_num > this.poss[i]) {
let width = this.imgDom.offsetWidth; idx = i;
let height = this.imgDom.offsetHeight+this.computedHeight; pos_num = this.poss[i];
let top = this.poss[idx] + this.gap_y; }
let left = (idx + 1) * this.gap_x + idx * width; }
let imgHeight = height - this.computedHeight // this.computedHeight = 0
this.poss[idx] = top + height; let width = this.imgDom.offsetWidth;
let obj = { let height = this.imgDom.offsetHeight + this.computedHeight;
canvasUrl:url, let top = this.poss[idx] + this.gap_y;
style: { width, height, top, left, imgHeight }, let left = (idx + 1) * this.gap_x + idx * width;
...data let imgHeight = height - this.computedHeight;
}; this.poss[idx] = top + height;
this.list.push(obj); let obj = {
this.imgDom.remove(); canvasUrl: url,
this.imgDom = null style: { width, height, top, left, imgHeight },
this.wait_list.splice(0, 1); ...data,
this.$el.style.height = };
Math.max(...this.poss) + this.gap_y + "px"; this.list.push(obj);
if (this.wait_list.length <= 0) { this.imgDom.remove();
this.loading = false; this.imgDom = null;
this.$emit("loadend"); this.wait_list.splice(0, 1);
} else { this.$el.style.height = Math.max(...this.poss) + this.gap_y + "px";
this.loadImg(); if (this.wait_list.length <= 0) {
} this.loading = false;
}); this.$emit("loadend");
}, } else {
resize() { this.loadImg();
nextTick(() => { }
var t_width = this.$el.offsetWidth; });
var width = this.itemWidth; },
var num_x = parseInt(t_width / (width + 20)); resize() {
if (num_x < 1) num_x = 1; nextTick(() => {
var remain = t_width - width * num_x; var t_width = this.$el.offsetWidth;
var gap_x = remain / (num_x + 1); var width = this.itemWidth;
this.gap_x = gap_x; var num_x = parseInt(t_width / (width + 20));
this.gap_y = gap_x > 30 ? 30 : gap_x < 30 ? 20 : gap_x; if (num_x < 1) num_x = 1;
this.num_x = num_x; var remain = t_width - width * num_x;
var poss = []; var gap_x = remain / (num_x + 1);
for (var i = 0; i < num_x; i++) poss.push(0); this.gap_x = gap_x;
this.poss = poss; this.gap_y = gap_x > 30 ? 30 : gap_x < 30 ? 20 : gap_x;
this.reset(); this.num_x = num_x;
}) var poss = [];
for (var i = 0; i < num_x; i++) poss.push(0);
}, this.poss = poss;
reset() { this.reset();
for (let i = 0; i < this.list.length; i++) { });
let width = this.list[i].style.width; },
let height = this.list[i].style.height; reset() {
var idx = 0; for (let i = 0; i < this.list.length; i++) {
var pos_num = this.poss[idx]; let width = this.list[i].style.width;
for (var j = 1; j < this.poss.length; j++) { let height = this.list[i].style.height;
if (pos_num > this.poss[j]) { var idx = 0;
idx = j; var pos_num = this.poss[idx];
pos_num = this.poss[j]; for (var j = 1; j < this.poss.length; j++) {
} if (pos_num > this.poss[j]) {
} idx = j;
let top = this.poss[idx] + this.gap_y; pos_num = this.poss[j];
let left = (idx + 1) * this.gap_x + idx * width; }
this.poss[idx] = top + height; }
this.list[i].style = { width, height, top, left }; let top = this.poss[idx] + this.gap_y;
} let left = (idx + 1) * this.gap_x + idx * width;
this.$el.style.height = Math.max(...this.poss) + this.gap_y + "px"; this.poss[idx] = top + height;
}, this.list[i].style = { width, height, top, left };
setItemDetail(data){ }
this.$emit('getImgScale',data) this.$el.style.height = Math.max(...this.poss) + this.gap_y + "px";
}, },
portfolioLike(data){ setItemDetail(data) {
this.$emit('setPortfolioLike',data) this.$emit("getImgScale", data);
} },
}, portfolioLike(data) {
}) this.$emit("setPortfolioLike", data);
},
},
});
</script> </script>
<style lang='less' scoped> <style lang="less" scoped>
.Falls { .Falls {
width: 100%; width: 100%;
height: auto; height: auto;
position: relative; position: relative;
--paddingBottom:10px; --paddingBottom: 10px;
--textMarginTop:10px; --textMarginTop: 10px;
--textHeight:25px; --textHeight: 25px;
--contentHeight:35px; --contentHeight: 35px;
.falls_item{ .falls_item {
position: absolute; position: absolute;
transition: all 0.15s; transition: all 0.15s;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background: #fff; background: #fff;
border-radius: 2rem; border-radius: 2rem;
overflow: hidden; overflow: hidden;
padding-bottom: var(--paddingBottom); padding-bottom: var(--paddingBottom);
&.falls_item:hover{ &.falls_item:hover {
.falls_item_img{ .falls_item_img {
img{ img {
transform: scale(1.1); transform: scale(1.1);
} }
} }
} }
.falls_item_img{ .falls_item_img {
cursor: pointer; cursor: pointer;
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
img{ img {
width: 100%; width: 100%;
object-fit: cover; object-fit: cover;
height: 100%; height: 100%;
transition: all .3s; transition: all 0.3s;
} }
.falls_item_user_Original{ .falls_item_user_Original {
font-weight: 600; font-weight: 600;
font-size: 12px; font-size: 12px;
color: #39215b; color: #39215b;
background: #c9a2ff; background: #c9a2ff;
padding: 0 5px; padding: 0 5px;
border-radius: 4px; border-radius: 4px;
margin-right: 2px; margin-right: 2px;
position: absolute; position: absolute;
top: 10px; top: 10px;
right: 10px; right: 10px;
left: auto; left: auto;
} }
} }
.falls_item_bottom{ .falls_item_bottom {
padding: 0 10px; padding: 0 10px;
.falls_item_text{ .falls_item_text {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
font-weight: 600; font-weight: 600;
font-size: 18px; font-size: 18px;
margin-top: var(--textMarginTop); margin-top: var(--textMarginTop);
height: var(--textHeight); height: var(--textHeight);
} }
.falls_item_content{ .falls_item_content {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
color: #525252; color: #525252;
height: var(--contentHeight); height: var(--contentHeight);
.falls_item_user{ .falls_item_user {
width: 50%; width: 50%;
display: flex; display: flex;
align-items: center; align-items: center;
flex: 1; flex: 1;
overflow: hidden; overflow: hidden;
img{ img {
width: 25px; width: 25px;
height: 25px; height: 25px;
border-radius: 50%; border-radius: 50%;
margin-right: 10px; margin-right: 10px;
} }
.falls_item_user_detail{ .falls_item_user_detail {
line-height: 1; line-height: 1;
width: 60%; width: 60%;
width: 100%; width: 100%;
color: #000; color: #000;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
>div{
width: 100%;
font-size: 16px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
span{
font-size: 12px;
color: #525252;
}
}
}
.falls_item_detail{
display: flex;
// width: 40%;
// width: 20%;
// width: 7rem;
// width: 70px;
width: auto;
justify-content: space-between;
>label:nth-child(1){
margin-right: 2rem;
}
>label{
// cursor: pointer;
}
>label,>div{
display: flex;
align-items: center;
i{
// font-size: 1.8rem;
font-size: 12px;
}
svg,i{
color: #9e9ea7;
display: flex;
// width: 10px;
// height: 10px;
margin-right: 5px;
}
span{
margin-left: 3px;
font-size: 12px;
}
}
}
}
}
} > div {
} width: 100%;
</style> font-size: 16px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
span {
font-size: 12px;
color: #525252;
}
}
}
.falls_item_detail {
display: flex;
// width: 40%;
// width: 20%;
// width: 7rem;
// width: 70px;
width: auto;
justify-content: space-between;
> label:nth-child(1) {
margin-right: 2rem;
}
> label {
// cursor: pointer;
}
> label,
> div {
display: flex;
align-items: center;
i {
// font-size: 1.8rem;
font-size: 12px;
}
svg,
i {
color: #9e9ea7;
display: flex;
// width: 10px;
// height: 10px;
margin-right: 5px;
}
span {
margin-left: 3px;
font-size: 12px;
}
}
}
}
}
}
}
</style>

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

File diff suppressed because it is too large Load Diff

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

File diff suppressed because it is too large Load Diff

55
src/main.ts
View File

@@ -1,35 +1,42 @@
import { createApp,defineComponent,h } from 'vue' import { createApp, defineComponent, h } from "vue";
import App from './App.vue' import App from "./App.vue";
import router from './router' import router from "./router";
import store from './store' import store from "./store";
import './assets/iconfont/iconfont.css' import "./assets/iconfont/iconfont.css";
import './assets/iconfont/iconfont.js' import "./assets/iconfont/iconfont.js";
import './assets/iconfont2/iconfont.css' import "./assets/iconfont2/iconfont.css";
import flexible from './tool/flexible.js' import flexible from "./tool/flexible.js";
import 'ant-design-vue/dist/antd.css'; import "ant-design-vue/dist/antd.css";
import Antd from 'ant-design-vue'; import Antd from "ant-design-vue";
import './assets/style/style.less'; import "./assets/style/style.less";
import VueLazyload from "vue-lazyload"; import VueLazyload from "vue-lazyload";
import i18n from './lang/index' import i18n from "./lang/index";
import { getBrowserInfo, murmur } from './tool/util' import { getBrowserInfo, murmur } from "./tool/util";
import "../node_modules/@flaticon/flaticon-uicons/css/all/all.css" import "../node_modules/@flaticon/flaticon-uicons/css/all/all.css";
// import { Https } from "@/tool/https"; // import { Https } from "@/tool/https";
import 'swiper/css'; import "swiper/css";
import 'swiper/css/pagination'; import "swiper/css/pagination";
// import "@/tool/color-thief.js"; // import "@/tool/color-thief.js";
// import "@/tool/fabric.brushes.js"; // import "@/tool/fabric.brushes.js";
// import "@/tool/fabric.min.js"; // import "@/tool/fabric.min.js";
const app = createApp(App); const app = createApp(App);
flexible() flexible();
import { getCookie, setCookie } from "@/tool/cookie"; import { getCookie, setCookie } from "@/tool/cookie";
document.addEventListener('touchstart', function(event) { import loadingGif from "./assets/images/homePage/loading.gif";
event.preventDefault(); // 阻止长按选中
document.addEventListener("touchstart", function (event) {
event.preventDefault(); // 阻止长按选中
}); });
let loadingParam = { let loadingParam = {
loading: require('./assets/images/homePage/loading.gif'), loading: loadingGif,
attempt: 1 attempt: 1,
} };
app.use(store).use(router).use(Antd).use(VueLazyload, loadingParam).use(i18n).mount('#app') app
.use(store)
.use(router)
.use(Antd)
.use(VueLazyload, loadingParam)
.use(i18n)
.mount("#app");

410
src/views/Login.vue
View File

@@ -1,55 +1,74 @@
<template> <template>
<div class="loginPage"> <div class="loginPage">
<div class="left"> <div class="left">
<!-- :isScroll="!isMask" --> <!-- :isScroll="!isMask" -->
<Works :autoscroll="true" :position="'login'"></Works> <Works :autoscroll="true" :position="'login'"></Works>
<div class="mask" v-show="isMask" @click="()=>isMask = !isMask"> <div class="mask" v-show="isMask" @click="() => (isMask = !isMask)">
<div class="content"> <div class="content">
<div class="userNum"> <div class="userNum">
<div class="title">5 000 000 +</div> <div class="title">5 000 000 +</div>
<div>HAPPY USERS</div> <div>HAPPY USERS</div>
</div> </div>
<div class="info">Millions trust AI products every day</div> <div class="info">Millions trust AI products every day</div>
</div> </div>
</div> </div>
</div> </div>
<div class="right"> <div class="right">
<div class="Text" v-show="!loginType"> <div class="Text" v-show="!loginType">
<div class="title">Join millions <br />using AI every day</div> <div class="title">Join millions <br />using AI every day</div>
<div class="info">Experience secure,spam-free support that empowers you to grow, create,and succeed with confidence</div> <div class="info">
</div> Experience secure,spam-free support that empowers you to grow,
<div class="loginBox"> create,and succeed with confidence
<div class="selectType" v-show="!loginType"> </div>
<div class="text"> </div>
Continue with one of these: <div class="loginBox">
</div> <div class="selectType" v-show="!loginType">
<div class="typeList"> <div class="text">Continue with one of these:</div>
<div class="gallery_btn white" @click="setLoginType('personal')">personal</div> <div class="typeList">
<div class="gallery_btn white" @click="setLoginType('school')">school</div> <div class="gallery_btn white" @click="setLoginType('personal')">
<div class="gallery_btn white" @click="setLoginType('enterprise')">enterprise</div> personal
</div> </div>
</div> <div class="gallery_btn white" @click="setLoginType('school')">
<div class="login" v-show="loginType"> school
<div class="title"> </div>
<i class="fi fi-br-angle-small-left" @click="()=>loginType = ''"></i> <div class="gallery_btn white" @click="setLoginType('enterprise')">
<!-- <i class="fi fi-rr-arrow-left" @click="()=>loginType = ''"></i> --> enterprise
<span>Log on to AiDA 3.0</span> </div>
</div> </div>
<personal v-show="loginType == 'personal'"></personal> </div>
<school v-show="loginType == 'school'"></school> <div class="login" v-show="loginType">
<enterprise v-show="loginType == 'enterprise'"></enterprise> <div class="title">
</div> <i
</div> class="fi fi-br-angle-small-left"
</div> @click="() => (loginType = '')"
</div> ></i>
<!-- <i class="fi fi-rr-arrow-left" @click="()=>loginType = ''"></i> -->
<span>Log on to AiDA 3.0</span>
</div>
<personal v-show="loginType == 'personal'"></personal>
<school v-show="loginType == 'school'"></school>
<enterprise v-show="loginType == 'enterprise'"></enterprise>
</div>
</div>
</div>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive} from 'vue' import {
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'; defineComponent,
computed,
ref,
provide,
nextTick,
createVNode,
toRefs,
reactive,
} from "vue";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import { Https } from "@/tool/https"; import { Https } from "@/tool/https";
import { useStore } from "vuex"; import { useStore } from "vuex";
import { useI18n } from 'vue-i18n' import { useI18n } from "vue-i18n";
const md5 = require("md5"); import md5 from "md5";
import Works from "@/views/HomeView/Works.vue"; import Works from "@/views/HomeView/Works.vue";
import { message } from "ant-design-vue"; import { message } from "ant-design-vue";
import { isEmail } from "@/tool/util"; import { isEmail } from "@/tool/util";
@@ -57,149 +76,158 @@ import personal from "@/component/LoginPage/login/personal.vue";
import school from "@/component/LoginPage/login/school.vue"; import school from "@/component/LoginPage/login/school.vue";
import enterprise from "@/component/LoginPage/login/enterprise.vue"; import enterprise from "@/component/LoginPage/login/enterprise.vue";
export default defineComponent({ export default defineComponent({
components:{ components: {
Works,personal,school,enterprise Works,
}, personal,
props:{ school,
}, enterprise,
emits:[], },
setup(props,{emit}) { props: {},
const store = useStore(); emits: [],
const loginData = reactive({ setup(props, { emit }) {
loginType:'', const store = useStore();
isMask:true, const loginData = reactive({
}) loginType: "",
const dataDom = reactive({ isMask: true,
}) });
const setLoginType = (str:any)=>{ const dataDom = reactive({});
loginData.loginType = str const setLoginType = (str: any) => {
} loginData.loginType = str;
return{ };
...toRefs(dataDom), return {
...toRefs(loginData), ...toRefs(dataDom),
setLoginType, ...toRefs(loginData),
} setLoginType,
}, };
provide() { },
return { provide() {
} return {};
}, },
}) });
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.loginPage{ .loginPage {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: relative; position: relative;
display: flex; display: flex;
> .left,>.right{ > .left,
height: 100%; > .right {
} height: 100%;
> .left{ }
width: 60%; > .left {
background: #f7f8fa; width: 60%;
position: relative; background: #f7f8fa;
> .mask{ position: relative;
position: absolute; > .mask {
width: 100%; position: absolute;
height: 100%; width: 100%;
top: 0; height: 100%;
left: 0; top: 0;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, .8) 100%); left: 0;
display: flex; background: linear-gradient(
justify-content: center; to bottom,
align-items: center; rgba(255, 255, 255, 0) 0%,
color: #fff; rgba(0, 0, 0, 0.8) 100%
cursor: pointer; );
> .content{ display: flex;
text-align: center; justify-content: center;
padding: 15rem; align-items: center;
//黑色径向渐变 color: #fff;
background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 70%); cursor: pointer;
.userNum{ > .content {
line-height: 1; text-align: center;
margin-bottom: 3rem; padding: 15rem;
> .title{ //黑色径向渐变
font-size: 8rem; background: radial-gradient(
font-weight: 900; ellipse at center,
} rgba(0, 0, 0, 0.3) 0%,
> div{ rgba(0, 0, 0, 0) 70%
font-size: 3rem; );
font-weight: 500; .userNum {
} line-height: 1;
} margin-bottom: 3rem;
> .info{ > .title {
font-size: 4rem; font-size: 8rem;
font-weight: 500; font-weight: 900;
} }
} > div {
} font-size: 3rem;
} font-weight: 500;
> .right{ }
display: flex; }
width: 40%; > .info {
align-items: center; font-size: 4rem;
justify-content: center; font-weight: 500;
flex-direction: column; }
> .Text{ }
width: 60rem; }
text-align: center; }
> .title{ > .right {
font-size: 4rem; display: flex;
font-weight: 900; width: 40%;
line-height: 1.2; align-items: center;
margin-bottom: 2rem; justify-content: center;
} flex-direction: column;
> .info{ > .Text {
font-size: 1.8rem; width: 60rem;
margin-bottom: 2rem; text-align: center;
line-height: 1.2; > .title {
} font-size: 4rem;
> .continue{ font-weight: 900;
> i{ line-height: 1.2;
margin-left: 1rem; margin-bottom: 2rem;
} }
} > .info {
} font-size: 1.8rem;
> .loginBox{ margin-bottom: 2rem;
width: 60rem; line-height: 1.2;
> .selectType{ }
width: 100%; > .continue {
text-align: center; > i {
> .text{ margin-left: 1rem;
font-size: 2.5rem; }
font-weight: 600; }
} }
> .typeList{ > .loginBox {
> div{ width: 60rem;
margin: 0 auto; > .selectType {
width: 33rem; width: 100%;
margin-top: .8rem; text-align: center;
border-radius: 1rem; > .text {
border: 2px solid; font-size: 2.5rem;
display: flex; font-weight: 600;
align-items: center; }
justify-content: center; > .typeList {
} > div {
} margin: 0 auto;
} width: 33rem;
> .login{ margin-top: 0.8rem;
position: relative; border-radius: 1rem;
> .title{ border: 2px solid;
font-size: 4rem; display: flex;
font-weight: 900; align-items: center;
display: flex; justify-content: center;
align-items: center; }
> i{ }
margin-right: 2rem; }
font-size: 3rem; > .login {
display: flex; position: relative;
cursor: pointer; > .title {
align-items: center; font-size: 4rem;
} font-weight: 900;
} display: flex;
} align-items: center;
} > i {
} margin-right: 2rem;
} font-size: 3rem;
</style> display: flex;
cursor: pointer;
align-items: center;
}
}
}
}
}
}
</style>