refactor: Improve code formatting and structure in main.ts and Login.vue
- Standardized import statements in main.ts for better readability. - Enhanced the structure of the Vue component in Login.vue for improved clarity. - Updated event handling and state management in Login.vue. - Adjusted CSS styles for consistency and better organization.
This commit is contained in:
bighuixiang
5
components.d.ts
vendored
5
components.d.ts
vendored
@@ -8,6 +8,11 @@ export {}
|
||||
/* prettier-ignore */
|
||||
declare module 'vue' {
|
||||
export interface GlobalComponents {
|
||||
AImage: typeof import('ant-design-vue/es')['Image']
|
||||
AModal: typeof import('ant-design-vue/es')['Modal']
|
||||
APopover: typeof import('ant-design-vue/es')['Popover']
|
||||
ASelect: typeof import('ant-design-vue/es')['Select']
|
||||
ASpin: typeof import('ant-design-vue/es')['Spin']
|
||||
RouterLink: typeof import('vue-router')['RouterLink']
|
||||
RouterView: typeof import('vue-router')['RouterView']
|
||||
}
|
||||
|
||||
@@ -1,276 +1,300 @@
|
||||
<template>
|
||||
<div class="allUserPoerationModal" ref="allUserPoerationModal"></div>
|
||||
<a-modal
|
||||
class="allUserPoeration_modal generalModel"
|
||||
v-model:visible="operationsModal"
|
||||
:footer="null"
|
||||
:get-container="() => $refs.allUserPoerationModal"
|
||||
width="50%"
|
||||
height="55rem"
|
||||
:maskClosable="false"
|
||||
:centered="true"
|
||||
:closable="false"
|
||||
:mask="true"
|
||||
wrapClassName="#app"
|
||||
:keyboard="false"
|
||||
>
|
||||
<div class="generalModel_btn">
|
||||
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
|
||||
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
|
||||
<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
|
||||
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
|
||||
</svg>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal_title_text">
|
||||
<div>{{ title }} User</div>
|
||||
</div>
|
||||
<div class="allUserPoeration_center admin_page">
|
||||
<div class="admin_state_item">
|
||||
<span>User Name: <span>*</span></span>
|
||||
<input
|
||||
v-model="userName"
|
||||
placeholder="Please enter user name"
|
||||
type="text"
|
||||
style="width: 250px"
|
||||
/>
|
||||
</div>
|
||||
<div class="admin_state_item">
|
||||
<span>User Email: <span>*</span></span>
|
||||
<input
|
||||
v-model="userEmail"
|
||||
placeholder="Please enter email"
|
||||
type="text"
|
||||
style="width: 250px"
|
||||
/>
|
||||
</div>
|
||||
<div class="admin_state_item">
|
||||
<span>Password: <span>*</span></span>
|
||||
<input
|
||||
@focus="focus"
|
||||
@blur="blur"
|
||||
v-model="password"
|
||||
placeholder="Please enter password"
|
||||
type="password"
|
||||
style="width: 250px"
|
||||
/>
|
||||
</div>
|
||||
<div class="admin_state_item">
|
||||
<span>Maximum Credits:</span>
|
||||
<input
|
||||
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>
|
||||
<div class="allUserPoerationModal" ref="allUserPoerationModal"></div>
|
||||
<a-modal
|
||||
class="allUserPoeration_modal generalModel"
|
||||
v-model:visible="operationsModal"
|
||||
:footer="null"
|
||||
:get-container="() => $refs.allUserPoerationModal"
|
||||
width="50%"
|
||||
height="55rem"
|
||||
:maskClosable="false"
|
||||
:centered="true"
|
||||
:closable="false"
|
||||
:mask="true"
|
||||
wrapClassName="#app"
|
||||
:keyboard="false"
|
||||
>
|
||||
<div class="generalModel_btn">
|
||||
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
|
||||
<svg
|
||||
width="46"
|
||||
height="46"
|
||||
viewBox="0 0 46 46"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3" />
|
||||
<rect
|
||||
x="32.5063"
|
||||
y="12"
|
||||
width="3"
|
||||
height="29"
|
||||
rx="1.5"
|
||||
transform="rotate(45 32.5063 12)"
|
||||
fill="white"
|
||||
/>
|
||||
<rect
|
||||
x="34.6274"
|
||||
y="32.5059"
|
||||
width="3"
|
||||
height="29"
|
||||
rx="1.5"
|
||||
transform="rotate(135 34.6274 32.5059)"
|
||||
fill="white"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal_title_text">
|
||||
<div>{{ title }} User</div>
|
||||
</div>
|
||||
<div class="allUserPoeration_center admin_page">
|
||||
<div class="admin_state_item">
|
||||
<span>User Name: <span>*</span></span>
|
||||
<input
|
||||
v-model="userName"
|
||||
placeholder="Please enter user name"
|
||||
type="text"
|
||||
style="width: 250px"
|
||||
/>
|
||||
</div>
|
||||
<div class="admin_state_item">
|
||||
<span>User Email: <span>*</span></span>
|
||||
<input
|
||||
v-model="userEmail"
|
||||
placeholder="Please enter email"
|
||||
type="text"
|
||||
style="width: 250px"
|
||||
/>
|
||||
</div>
|
||||
<div class="admin_state_item">
|
||||
<span>Password: <span>*</span></span>
|
||||
<input
|
||||
@focus="focus"
|
||||
@blur="blur"
|
||||
v-model="password"
|
||||
placeholder="Please enter password"
|
||||
type="password"
|
||||
style="width: 250px"
|
||||
/>
|
||||
</div>
|
||||
<div class="admin_state_item">
|
||||
<span>Maximum Credits:</span>
|
||||
<input
|
||||
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>
|
||||
<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}) {
|
||||
let operations = reactive({
|
||||
operationsModal:false,
|
||||
operationsEdit:false,
|
||||
loadingShow:false,
|
||||
title:''
|
||||
})
|
||||
let operationsData = reactive({
|
||||
accountId:-1,
|
||||
userName:'',
|
||||
userEmail:'',
|
||||
password:'',
|
||||
oldPassword:'',
|
||||
credits:'',
|
||||
})
|
||||
let state = ref([
|
||||
{
|
||||
label:'visitor',
|
||||
value:'0',
|
||||
},
|
||||
{
|
||||
label:'yearly',
|
||||
value:'1',
|
||||
},
|
||||
{
|
||||
label:'monthly',
|
||||
value:'2',
|
||||
},
|
||||
{
|
||||
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
|
||||
// operationsData.validStartTime='2024-08-05T00:00:06'
|
||||
// operationsData.validEndTime='2024-08-05T00:00:06'
|
||||
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 blur = (event) =>{
|
||||
console.log((operationsData.password == '' && operationsData.oldPassword))
|
||||
if(operationsData.password == '' && operationsData.oldPassword){
|
||||
operationsData.password = operationsData.oldPassword
|
||||
}
|
||||
}
|
||||
let setAddData = ()=>{
|
||||
return {
|
||||
"creditsUsageLimit": operationsData.credits,
|
||||
"userEmail": operationsData.userEmail,
|
||||
"userPassword": md5(operationsData.password + 'abc'),
|
||||
"userName": operationsData.userName,
|
||||
}
|
||||
}
|
||||
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()
|
||||
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 *')
|
||||
Https.axiosPost(Https.httpUrls.addOrUpdateSubAccount, data).then(
|
||||
(rv) => {
|
||||
if (rv) {
|
||||
cancelDsign()
|
||||
emit('searchHistoryList')
|
||||
}
|
||||
}
|
||||
);
|
||||
}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(
|
||||
(rv) => {
|
||||
if (rv) {
|
||||
cancelDsign()
|
||||
emit('searchHistoryList')
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
return {
|
||||
...toRefs(operations),
|
||||
...toRefs(operationsData),
|
||||
state,
|
||||
cancelDsign,
|
||||
init,
|
||||
focus,
|
||||
blur,
|
||||
setOk,
|
||||
};
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
};
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
|
||||
},
|
||||
components: {},
|
||||
emits: ["searchHistoryList"],
|
||||
setup(props, { emit }) {
|
||||
let operations = reactive({
|
||||
operationsModal: false,
|
||||
operationsEdit: false,
|
||||
loadingShow: false,
|
||||
title: "",
|
||||
});
|
||||
let operationsData = reactive({
|
||||
accountId: -1,
|
||||
userName: "",
|
||||
userEmail: "",
|
||||
password: "",
|
||||
oldPassword: "",
|
||||
credits: "",
|
||||
});
|
||||
let state = ref([
|
||||
{
|
||||
label: "visitor",
|
||||
value: "0",
|
||||
},
|
||||
{
|
||||
label: "yearly",
|
||||
value: "1",
|
||||
},
|
||||
{
|
||||
label: "monthly",
|
||||
value: "2",
|
||||
},
|
||||
{
|
||||
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;
|
||||
// operationsData.validStartTime='2024-08-05T00:00:06'
|
||||
// operationsData.validEndTime='2024-08-05T00:00:06'
|
||||
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 blur = (event) => {
|
||||
console.log(operationsData.password == "" && operationsData.oldPassword);
|
||||
if (operationsData.password == "" && operationsData.oldPassword) {
|
||||
operationsData.password = operationsData.oldPassword;
|
||||
}
|
||||
};
|
||||
let setAddData = () => {
|
||||
return {
|
||||
creditsUsageLimit: operationsData.credits,
|
||||
userEmail: operationsData.userEmail,
|
||||
userPassword: md5(operationsData.password + "abc"),
|
||||
userName: operationsData.userName,
|
||||
};
|
||||
};
|
||||
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();
|
||||
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 *");
|
||||
Https.axiosPost(Https.httpUrls.addOrUpdateSubAccount, data).then(
|
||||
(rv) => {
|
||||
if (rv) {
|
||||
cancelDsign();
|
||||
emit("searchHistoryList");
|
||||
}
|
||||
}
|
||||
);
|
||||
} 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(
|
||||
(rv) => {
|
||||
if (rv) {
|
||||
cancelDsign();
|
||||
emit("searchHistoryList");
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
};
|
||||
return {
|
||||
...toRefs(operations),
|
||||
...toRefs(operationsData),
|
||||
state,
|
||||
cancelDsign,
|
||||
init,
|
||||
focus,
|
||||
blur,
|
||||
setOk,
|
||||
};
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
mounted() {},
|
||||
methods: {},
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
:deep(.allUserPoeration_modal){
|
||||
.ant-modal-body{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
:deep(.allUserPoeration_modal) {
|
||||
.ant-modal-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
<style lang="less" scoped>
|
||||
|
||||
.allUserPoeration_modal {
|
||||
.closeIcon {
|
||||
z-index: 2;
|
||||
.closeIcon {
|
||||
z-index: 2;
|
||||
}
|
||||
.allUserPoeration_btn {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: auto;
|
||||
justify-content: flex-end;
|
||||
padding: 1rem 0;
|
||||
.admin_search_item {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.allUserPoeration_btn{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: auto;
|
||||
justify-content: flex-end;
|
||||
padding: 1rem 0;
|
||||
.admin_search_item{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.allUserPoeration_center{
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
.allUserPoeration_center {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -1,277 +1,299 @@
|
||||
<template>
|
||||
<div class="allUserPoerationModal" ref="allUserPoerationModal"></div>
|
||||
<a-modal
|
||||
class="allUserPoeration_modal generalModel"
|
||||
v-model:visible="operationsModal"
|
||||
:footer="null"
|
||||
:get-container="() => $refs.allUserPoerationModal"
|
||||
width="50%"
|
||||
:height="'77rem'"
|
||||
:maskClosable="false"
|
||||
:centered="true"
|
||||
:closable="false"
|
||||
:mask="true"
|
||||
wrapClassName="#app"
|
||||
:keyboard="false"
|
||||
>
|
||||
<div class="generalModel_btn">
|
||||
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
|
||||
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
|
||||
<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
|
||||
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
|
||||
</svg>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal_title_text">
|
||||
<div>{{ title }} Coupon</div>
|
||||
</div>
|
||||
<div class="allUserPoeration_center admin_page">
|
||||
<div class="admin_state_item">
|
||||
<span>Cooperator:</span>
|
||||
<input
|
||||
v-model="cooperator"
|
||||
placeholder="Please enter cooperator"
|
||||
type="text"
|
||||
style="width: 220px"
|
||||
/>
|
||||
</div>
|
||||
<div class="admin_state_item" >
|
||||
<span>percentOff(%): <span>*</span></span>
|
||||
<input
|
||||
:class="{active:title != 'Add'}"
|
||||
:disabled="title != 'Add'"
|
||||
v-model="percentOff"
|
||||
placeholder="Please enter percentOff"
|
||||
type="text"
|
||||
style="width: 220px"
|
||||
/>
|
||||
</div>
|
||||
<div class="admin_state_item" >
|
||||
<span>Commission Rate: <span>*</span></span>
|
||||
<input
|
||||
:class="{active:title != 'Add'}"
|
||||
:disabled="title != 'Add'"
|
||||
v-model="commissionRate"
|
||||
placeholder="Please enter commission rate"
|
||||
type="text"
|
||||
style="width: 220px"
|
||||
/>
|
||||
</div>
|
||||
<div class="admin_state_item" >
|
||||
<!-- <div class="admin_state_item" > -->
|
||||
<span>End Time: <span>*</span></span>
|
||||
<a-space direction="vertical" style="width:220px">
|
||||
<a-date-picker v-model:value="rangePickerValue" :disabled="title != 'Add'" style="width:220px" />
|
||||
</a-space>
|
||||
</div>
|
||||
<div class="admin_state_item" >
|
||||
<span>MaxRedemptions:</span>
|
||||
<input
|
||||
:class="{active:title != 'Add'}"
|
||||
:disabled="title != 'Add'"
|
||||
v-model="maxRedemptions"
|
||||
placeholder="Please enter maximum"
|
||||
type="text"
|
||||
style="width: 220px"
|
||||
/>
|
||||
</div>
|
||||
<div class="admin_state_item" >
|
||||
<span>PaidCommission:</span>
|
||||
<input
|
||||
v-model="paidCommission"
|
||||
placeholder="Please enter paidCommission"
|
||||
type="text"
|
||||
style="width: 220px"
|
||||
/>
|
||||
</div>
|
||||
<div class="admin_state_item">
|
||||
<span>Remark:</span>
|
||||
<input
|
||||
v-model="remark"
|
||||
placeholder="Please enter remark"
|
||||
type="text"
|
||||
style="width: 220px"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="allUserPoeration_btn admin_page">
|
||||
<div class="admin_search_item" @click="cancelDsign">
|
||||
Close
|
||||
</div>
|
||||
<div class="admin_search_item" @click="setOk">
|
||||
OK
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</a-modal>
|
||||
<div class="mark_loading" v-show="loadingShow">
|
||||
<a-spin size="large" />
|
||||
</div>
|
||||
<div class="allUserPoerationModal" ref="allUserPoerationModal"></div>
|
||||
<a-modal
|
||||
class="allUserPoeration_modal generalModel"
|
||||
v-model:visible="operationsModal"
|
||||
:footer="null"
|
||||
:get-container="() => $refs.allUserPoerationModal"
|
||||
width="50%"
|
||||
:height="'77rem'"
|
||||
:maskClosable="false"
|
||||
:centered="true"
|
||||
:closable="false"
|
||||
:mask="true"
|
||||
wrapClassName="#app"
|
||||
:keyboard="false"
|
||||
>
|
||||
<div class="generalModel_btn">
|
||||
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
|
||||
<svg
|
||||
width="46"
|
||||
height="46"
|
||||
viewBox="0 0 46 46"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3" />
|
||||
<rect
|
||||
x="32.5063"
|
||||
y="12"
|
||||
width="3"
|
||||
height="29"
|
||||
rx="1.5"
|
||||
transform="rotate(45 32.5063 12)"
|
||||
fill="white"
|
||||
/>
|
||||
<rect
|
||||
x="34.6274"
|
||||
y="32.5059"
|
||||
width="3"
|
||||
height="29"
|
||||
rx="1.5"
|
||||
transform="rotate(135 34.6274 32.5059)"
|
||||
fill="white"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal_title_text">
|
||||
<div>{{ title }} Coupon</div>
|
||||
</div>
|
||||
<div class="allUserPoeration_center admin_page">
|
||||
<div class="admin_state_item">
|
||||
<span>Cooperator:</span>
|
||||
<input
|
||||
v-model="cooperator"
|
||||
placeholder="Please enter cooperator"
|
||||
type="text"
|
||||
style="width: 220px"
|
||||
/>
|
||||
</div>
|
||||
<div class="admin_state_item">
|
||||
<span>percentOff(%): <span>*</span></span>
|
||||
<input
|
||||
:class="{ active: title != 'Add' }"
|
||||
:disabled="title != 'Add'"
|
||||
v-model="percentOff"
|
||||
placeholder="Please enter percentOff"
|
||||
type="text"
|
||||
style="width: 220px"
|
||||
/>
|
||||
</div>
|
||||
<div class="admin_state_item">
|
||||
<span>Commission Rate: <span>*</span></span>
|
||||
<input
|
||||
:class="{ active: title != 'Add' }"
|
||||
:disabled="title != 'Add'"
|
||||
v-model="commissionRate"
|
||||
placeholder="Please enter commission rate"
|
||||
type="text"
|
||||
style="width: 220px"
|
||||
/>
|
||||
</div>
|
||||
<div class="admin_state_item">
|
||||
<!-- <div class="admin_state_item" > -->
|
||||
<span>End Time: <span>*</span></span>
|
||||
<a-space direction="vertical" style="width: 220px">
|
||||
<a-date-picker
|
||||
v-model:value="rangePickerValue"
|
||||
:disabled="title != 'Add'"
|
||||
style="width: 220px"
|
||||
/>
|
||||
</a-space>
|
||||
</div>
|
||||
<div class="admin_state_item">
|
||||
<span>MaxRedemptions:</span>
|
||||
<input
|
||||
:class="{ active: title != 'Add' }"
|
||||
:disabled="title != 'Add'"
|
||||
v-model="maxRedemptions"
|
||||
placeholder="Please enter maximum"
|
||||
type="text"
|
||||
style="width: 220px"
|
||||
/>
|
||||
</div>
|
||||
<div class="admin_state_item">
|
||||
<span>PaidCommission:</span>
|
||||
<input
|
||||
v-model="paidCommission"
|
||||
placeholder="Please enter paidCommission"
|
||||
type="text"
|
||||
style="width: 220px"
|
||||
/>
|
||||
</div>
|
||||
<div class="admin_state_item">
|
||||
<span>Remark:</span>
|
||||
<input
|
||||
v-model="remark"
|
||||
placeholder="Please enter remark"
|
||||
type="text"
|
||||
style="width: 220px"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="allUserPoeration_btn admin_page">
|
||||
<div class="admin_search_item" @click="cancelDsign">Close</div>
|
||||
<div class="admin_search_item" @click="setOk">OK</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
<div class="mark_loading" v-show="loadingShow">
|
||||
<a-spin size="large" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { defineComponent, ref, reactive, watch, onMounted, nextTick, toRefs } from "vue";
|
||||
import {
|
||||
defineComponent,
|
||||
ref,
|
||||
reactive,
|
||||
watch,
|
||||
onMounted,
|
||||
nextTick,
|
||||
toRefs,
|
||||
} from "vue";
|
||||
import { Https } from "@/tool/https";
|
||||
import { Modal, message } from "ant-design-vue";
|
||||
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
|
||||
import { formatTime,isEmail } from "@/tool/util";
|
||||
import dayjs, { Dayjs } from 'dayjs';
|
||||
const md5 = require("md5");
|
||||
import { formatTime, isEmail } from "@/tool/util";
|
||||
import dayjs, { Dayjs } from "dayjs";
|
||||
import md5 from "md5";
|
||||
export default defineComponent({
|
||||
components: {
|
||||
},
|
||||
emits: ['searchHistoryList'],
|
||||
setup(props,{emit}) {
|
||||
let operations = reactive({
|
||||
operationsModal:false,
|
||||
operationsEdit:false,
|
||||
loadingShow:false,
|
||||
title:''
|
||||
})
|
||||
let operationsData = reactive({
|
||||
rangePickerValue:'',
|
||||
percentOff:'',
|
||||
commissionRate:'',
|
||||
maxRedemptions:'',
|
||||
cooperator:'',
|
||||
paidCommission:'',
|
||||
remark:'',
|
||||
id:''
|
||||
})
|
||||
let init = (funStr,data)=>{
|
||||
operations.operationsModal = true
|
||||
operations.operationsEdit = true
|
||||
operations.title = funStr
|
||||
if(funStr == 'Add') operations.operationsEdit = false
|
||||
if(funStr == 'Edit'){
|
||||
operationsData.id=data.id
|
||||
operationsData.percentOff=data.percentOff
|
||||
operationsData.commissionRate=data.commissionRate
|
||||
operationsData.maxRedemptions=data.maxRedemptions
|
||||
operationsData.cooperator=data.cooperator
|
||||
operationsData.paidCommission=data.paidCommission
|
||||
operationsData.remark=data.remark
|
||||
operationsData.rangePickerValue = dayjs(new Date(data.redeemBy * 1000).toISOString().split('T')[0],'YYYY/MM/DD');
|
||||
components: {},
|
||||
emits: ["searchHistoryList"],
|
||||
setup(props, { emit }) {
|
||||
let operations = reactive({
|
||||
operationsModal: false,
|
||||
operationsEdit: false,
|
||||
loadingShow: false,
|
||||
title: "",
|
||||
});
|
||||
let operationsData = reactive({
|
||||
rangePickerValue: "",
|
||||
percentOff: "",
|
||||
commissionRate: "",
|
||||
maxRedemptions: "",
|
||||
cooperator: "",
|
||||
paidCommission: "",
|
||||
remark: "",
|
||||
id: "",
|
||||
});
|
||||
let init = (funStr, data) => {
|
||||
operations.operationsModal = true;
|
||||
operations.operationsEdit = true;
|
||||
operations.title = funStr;
|
||||
if (funStr == "Add") operations.operationsEdit = false;
|
||||
if (funStr == "Edit") {
|
||||
operationsData.id = data.id;
|
||||
operationsData.percentOff = data.percentOff;
|
||||
operationsData.commissionRate = data.commissionRate;
|
||||
operationsData.maxRedemptions = data.maxRedemptions;
|
||||
operationsData.cooperator = data.cooperator;
|
||||
operationsData.paidCommission = data.paidCommission;
|
||||
operationsData.remark = data.remark;
|
||||
operationsData.rangePickerValue = dayjs(
|
||||
new Date(data.redeemBy * 1000).toISOString().split("T")[0],
|
||||
"YYYY/MM/DD"
|
||||
);
|
||||
|
||||
// operationsData.rangePickerValue='2024-08-05T00:00:06'
|
||||
// operationsData.validEndTime='2024-08-05T00:00:06'
|
||||
// operationsData.commissionRate = data.commissionRate
|
||||
// operationsData.maxRedemptions = data.maxRedemptions
|
||||
// operationsData.validStartTime = formatTime(data.validStartTime)
|
||||
// operationsData.validEndTime = formatTime(data.validEndTime)
|
||||
}
|
||||
|
||||
}
|
||||
let setAddData = ()=>{
|
||||
const timestampMs = new Date(operationsData.rangePickerValue).getTime() / 1000; // 直接获取毫秒时间戳
|
||||
return {
|
||||
"percentOff": operationsData.percentOff,
|
||||
"maxRedemptions": operationsData.maxRedemptions,
|
||||
"commissionRate": operationsData.commissionRate,
|
||||
"timestamp": timestampMs,
|
||||
cooperator:operationsData.cooperator,
|
||||
remark:operationsData.remark,
|
||||
}
|
||||
}
|
||||
let setEditData = ()=>{
|
||||
const timestampMs = new Date(operationsData.rangePickerValue).getTime() / 1000; // 直接获取毫秒时间戳
|
||||
return {
|
||||
id: operationsData.id,
|
||||
paidCommission: operationsData.commissionRate,
|
||||
cooperator:operationsData.cooperator,
|
||||
remark:operationsData.remark,
|
||||
}
|
||||
}
|
||||
let cancelDsign = ()=>{
|
||||
operationsData.rangePickerValue=''
|
||||
operationsData.percentOff=''
|
||||
operationsData.commissionRate=''
|
||||
operationsData.maxRedemptions=''
|
||||
operationsData.cooperator=''
|
||||
operationsData.paidCommission=''
|
||||
operationsData.remark=''
|
||||
operationsData.id=''
|
||||
operations.operationsModal = false
|
||||
}
|
||||
let setOk = ()=>{
|
||||
let data
|
||||
if(operations.title == 'Add'){
|
||||
data = setAddData()
|
||||
if(!data.commissionRate || !data.timestamp || !data.percentOff)return message.warning('Please check the input box marked with *')
|
||||
Https.axiosPost(Https.httpUrls.createCoupon, data).then(
|
||||
(rv) => {
|
||||
if (rv) {
|
||||
cancelDsign()
|
||||
emit('searchHistoryList')
|
||||
}
|
||||
}
|
||||
);
|
||||
}else{
|
||||
data = setEditData()
|
||||
Https.axiosGet(Https.httpUrls.updatePromCodeInfo,{params:data}).then(
|
||||
(rv) => {
|
||||
if (rv) {
|
||||
cancelDsign()
|
||||
emit('searchHistoryList')
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
return {
|
||||
...toRefs(operations),
|
||||
...toRefs(operationsData),
|
||||
cancelDsign,
|
||||
init,
|
||||
focus,
|
||||
blur,
|
||||
setOk,
|
||||
};
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
};
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
|
||||
},
|
||||
// operationsData.rangePickerValue='2024-08-05T00:00:06'
|
||||
// operationsData.validEndTime='2024-08-05T00:00:06'
|
||||
// operationsData.commissionRate = data.commissionRate
|
||||
// operationsData.maxRedemptions = data.maxRedemptions
|
||||
// operationsData.validStartTime = formatTime(data.validStartTime)
|
||||
// operationsData.validEndTime = formatTime(data.validEndTime)
|
||||
}
|
||||
};
|
||||
let setAddData = () => {
|
||||
const timestampMs =
|
||||
new Date(operationsData.rangePickerValue).getTime() / 1000; // 直接获取毫秒时间戳
|
||||
return {
|
||||
percentOff: operationsData.percentOff,
|
||||
maxRedemptions: operationsData.maxRedemptions,
|
||||
commissionRate: operationsData.commissionRate,
|
||||
timestamp: timestampMs,
|
||||
cooperator: operationsData.cooperator,
|
||||
remark: operationsData.remark,
|
||||
};
|
||||
};
|
||||
let setEditData = () => {
|
||||
const timestampMs =
|
||||
new Date(operationsData.rangePickerValue).getTime() / 1000; // 直接获取毫秒时间戳
|
||||
return {
|
||||
id: operationsData.id,
|
||||
paidCommission: operationsData.commissionRate,
|
||||
cooperator: operationsData.cooperator,
|
||||
remark: operationsData.remark,
|
||||
};
|
||||
};
|
||||
let cancelDsign = () => {
|
||||
operationsData.rangePickerValue = "";
|
||||
operationsData.percentOff = "";
|
||||
operationsData.commissionRate = "";
|
||||
operationsData.maxRedemptions = "";
|
||||
operationsData.cooperator = "";
|
||||
operationsData.paidCommission = "";
|
||||
operationsData.remark = "";
|
||||
operationsData.id = "";
|
||||
operations.operationsModal = false;
|
||||
};
|
||||
let setOk = () => {
|
||||
let data;
|
||||
if (operations.title == "Add") {
|
||||
data = setAddData();
|
||||
if (!data.commissionRate || !data.timestamp || !data.percentOff)
|
||||
return message.warning("Please check the input box marked with *");
|
||||
Https.axiosPost(Https.httpUrls.createCoupon, data).then((rv) => {
|
||||
if (rv) {
|
||||
cancelDsign();
|
||||
emit("searchHistoryList");
|
||||
}
|
||||
});
|
||||
} else {
|
||||
data = setEditData();
|
||||
Https.axiosGet(Https.httpUrls.updatePromCodeInfo, {
|
||||
params: data,
|
||||
}).then((rv) => {
|
||||
if (rv) {
|
||||
cancelDsign();
|
||||
emit("searchHistoryList");
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
return {
|
||||
...toRefs(operations),
|
||||
...toRefs(operationsData),
|
||||
cancelDsign,
|
||||
init,
|
||||
focus,
|
||||
blur,
|
||||
setOk,
|
||||
};
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
mounted() {},
|
||||
methods: {},
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
:deep(.allUserPoeration_modal){
|
||||
.ant-modal-body{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
:deep(.allUserPoeration_modal) {
|
||||
.ant-modal-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
<style lang="less" scoped>
|
||||
|
||||
.allUserPoeration_modal {
|
||||
.closeIcon {
|
||||
z-index: 2;
|
||||
.closeIcon {
|
||||
z-index: 2;
|
||||
}
|
||||
.allUserPoeration_btn {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: auto;
|
||||
justify-content: flex-end;
|
||||
padding: 1rem 0;
|
||||
.admin_search_item {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.allUserPoeration_btn{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: auto;
|
||||
justify-content: flex-end;
|
||||
padding: 1rem 0;
|
||||
.admin_search_item{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.allUserPoeration_center{
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
.allUserPoeration_center {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -1,57 +1,63 @@
|
||||
<template>
|
||||
<div class="Container">
|
||||
<div class="icon" @click="openphoneModel">
|
||||
<img src="@/assets/images/loginPage/phone.svg" alt="">
|
||||
</div>
|
||||
<phoneModel ref="phoneModel"></phoneModel>
|
||||
<div class="Container">
|
||||
<div class="icon" @click="openphoneModel">
|
||||
<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({
|
||||
name: "login",
|
||||
components: {
|
||||
phoneModel
|
||||
},
|
||||
setup() {
|
||||
let phoneDom = reactive({
|
||||
phoneModel:null
|
||||
})
|
||||
const openphoneModel = ()=>{
|
||||
phoneDom.phoneModel.init()
|
||||
}
|
||||
onMounted(()=>{
|
||||
|
||||
})
|
||||
return {
|
||||
...toRefs(phoneDom),
|
||||
openphoneModel,
|
||||
}
|
||||
},
|
||||
})
|
||||
import {
|
||||
defineComponent,
|
||||
ref,
|
||||
reactive,
|
||||
watch,
|
||||
onMounted,
|
||||
nextTick,
|
||||
toRef,
|
||||
} from "vue";
|
||||
import phoneModel from "./phoneModel.vue";
|
||||
export default defineComponent({
|
||||
name: "login",
|
||||
components: {
|
||||
phoneModel,
|
||||
},
|
||||
setup() {
|
||||
let phoneDom = reactive({
|
||||
phoneModel: null,
|
||||
});
|
||||
const openphoneModel = () => {
|
||||
phoneDom.phoneModel.init();
|
||||
};
|
||||
onMounted(() => {});
|
||||
return {
|
||||
...toRefs(phoneDom),
|
||||
openphoneModel,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.Container{
|
||||
position: relative;
|
||||
.icon{
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid #dadce0;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
&:hover{
|
||||
background: #f8faff;
|
||||
}
|
||||
img{
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
&.Container:hover{
|
||||
}
|
||||
.Container {
|
||||
position: relative;
|
||||
.icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid #dadce0;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background: #f8faff;
|
||||
}
|
||||
img {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
&.Container:hover {
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,81 +1,99 @@
|
||||
<template>
|
||||
<div ref="phoneModelDom"></div>
|
||||
<a-modal
|
||||
class="phoneModel generalModel"
|
||||
:get-container="() => $refs.phoneModelDom"
|
||||
v-model:visible="phoneModel"
|
||||
:footer="null"
|
||||
:width="pageWidth"
|
||||
:maskClosable="false"
|
||||
:centered="true"
|
||||
:closable="false"
|
||||
:mask="phoneModelMask"
|
||||
:keyboard="false"
|
||||
:destroyOnClose="true"
|
||||
:zIndex="1000"
|
||||
>
|
||||
<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>
|
||||
|
||||
</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>
|
||||
|
||||
<div ref="phoneModelDom"></div>
|
||||
<a-modal
|
||||
class="phoneModel generalModel"
|
||||
:get-container="() => $refs.phoneModelDom"
|
||||
v-model:visible="phoneModel"
|
||||
:footer="null"
|
||||
:width="pageWidth"
|
||||
:maskClosable="false"
|
||||
:centered="true"
|
||||
:closable="false"
|
||||
:mask="phoneModelMask"
|
||||
:keyboard="false"
|
||||
:destroyOnClose="true"
|
||||
:zIndex="1000"
|
||||
>
|
||||
<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>
|
||||
</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>
|
||||
|
||||
<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(){
|
||||
let phoneModel = reactive({
|
||||
phoneModel:false,
|
||||
phoneModelMask:true,
|
||||
pageWidth:'50%',
|
||||
})
|
||||
let data = reactive({
|
||||
loadingShow:false,
|
||||
})
|
||||
const init = async ()=>{
|
||||
phoneModel.phoneModel = true
|
||||
}
|
||||
const cancelDsign = ()=>{
|
||||
phoneModel.phoneModel = false
|
||||
}
|
||||
return{
|
||||
...toRefs(phoneModel),
|
||||
...toRefs(data),
|
||||
init,
|
||||
cancelDsign,
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
},
|
||||
components: {
|
||||
VerificationCodeInput,
|
||||
},
|
||||
setup() {
|
||||
let phoneModel = reactive({
|
||||
phoneModel: false,
|
||||
phoneModelMask: true,
|
||||
pageWidth: "50%",
|
||||
});
|
||||
let data = reactive({
|
||||
loadingShow: false,
|
||||
});
|
||||
const init = async () => {
|
||||
phoneModel.phoneModel = true;
|
||||
};
|
||||
const cancelDsign = () => {
|
||||
phoneModel.phoneModel = false;
|
||||
};
|
||||
return {
|
||||
...toRefs(phoneModel),
|
||||
...toRefs(data),
|
||||
init,
|
||||
cancelDsign,
|
||||
};
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
methods: {},
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.phoneLogin {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -1,70 +1,76 @@
|
||||
<template>
|
||||
<div class="Container">
|
||||
<div class="icon" @click="openWeiXinModel">
|
||||
<img src="@/assets/images/loginPage/weiXinIcon.svg" alt="">
|
||||
<span>{{ $props.text }}</span>
|
||||
</div>
|
||||
<weiXinModel ref="weiXinModel"></weiXinModel>
|
||||
<div class="Container">
|
||||
<div class="icon" @click="openWeiXinModel">
|
||||
<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({
|
||||
name: "login",
|
||||
components: {
|
||||
weiXinModel
|
||||
},
|
||||
props: {
|
||||
text: {
|
||||
type: String,
|
||||
default: 'Sign in with Wechat'
|
||||
}
|
||||
},
|
||||
setup() {
|
||||
let weiXinDom = reactive({
|
||||
weiXinModel:null
|
||||
})
|
||||
const openWeiXinModel = ()=>{
|
||||
weiXinDom.weiXinModel.init()
|
||||
}
|
||||
onMounted(()=>{
|
||||
|
||||
})
|
||||
return {
|
||||
...toRefs(weiXinDom),
|
||||
openWeiXinModel,
|
||||
}
|
||||
},
|
||||
})
|
||||
import {
|
||||
defineComponent,
|
||||
ref,
|
||||
reactive,
|
||||
watch,
|
||||
onMounted,
|
||||
nextTick,
|
||||
toRefs,
|
||||
} from "vue";
|
||||
import weiXinModel from "./weiXinModel.vue";
|
||||
export default defineComponent({
|
||||
name: "login",
|
||||
components: {
|
||||
weiXinModel,
|
||||
},
|
||||
props: {
|
||||
text: {
|
||||
type: String,
|
||||
default: "Sign in with Wechat",
|
||||
},
|
||||
},
|
||||
setup() {
|
||||
let weiXinDom = reactive({
|
||||
weiXinModel: null,
|
||||
});
|
||||
const openWeiXinModel = () => {
|
||||
weiXinDom.weiXinModel.init();
|
||||
};
|
||||
onMounted(() => {});
|
||||
return {
|
||||
...toRefs(weiXinDom),
|
||||
openWeiXinModel,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.Container{
|
||||
position: relative;
|
||||
.icon{
|
||||
// width: 40px;
|
||||
width: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid #dadce0;
|
||||
border-radius: 4rem;
|
||||
padding: .5rem 3rem;
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
&:hover{
|
||||
background: #f8faff;
|
||||
}
|
||||
img{
|
||||
width: 3.8rem;
|
||||
height: 3.8rem;
|
||||
}
|
||||
span{
|
||||
font-size: 1.4rem;
|
||||
margin-left: 1.4rem;
|
||||
}
|
||||
}
|
||||
&.Container:hover{
|
||||
}
|
||||
.Container {
|
||||
position: relative;
|
||||
.icon {
|
||||
// width: 40px;
|
||||
width: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid #dadce0;
|
||||
border-radius: 4rem;
|
||||
padding: 0.5rem 3rem;
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
&:hover {
|
||||
background: #f8faff;
|
||||
}
|
||||
img {
|
||||
width: 3.8rem;
|
||||
height: 3.8rem;
|
||||
}
|
||||
span {
|
||||
font-size: 1.4rem;
|
||||
margin-left: 1.4rem;
|
||||
}
|
||||
}
|
||||
&.Container:hover {
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,91 +1,157 @@
|
||||
<template>
|
||||
<div class="payMethod" ref="payMethod"></div>
|
||||
<a-modal
|
||||
class="generalModel"
|
||||
:get-container="() => $refs.payMethod"
|
||||
v-model:visible="payMethodModel"
|
||||
:footer="null"
|
||||
:width="pageWidth"
|
||||
height="auto"
|
||||
:maskClosable="false"
|
||||
:centered="true"
|
||||
:closable="false"
|
||||
:mask="payMethodModelMask"
|
||||
:keyboard="false"
|
||||
:destroyOnClose="true"
|
||||
:zIndex="1000"
|
||||
>
|
||||
<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>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="payMethodContent">
|
||||
<div class="generalModelTitle">
|
||||
{{ $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="">
|
||||
<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>
|
||||
</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>
|
||||
<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>
|
||||
|
||||
<div class="payMethod" ref="payMethod"></div>
|
||||
<a-modal
|
||||
class="generalModel"
|
||||
:get-container="() => $refs.payMethod"
|
||||
v-model:visible="payMethodModel"
|
||||
:footer="null"
|
||||
:width="pageWidth"
|
||||
height="auto"
|
||||
:maskClosable="false"
|
||||
:centered="true"
|
||||
:closable="false"
|
||||
:mask="payMethodModelMask"
|
||||
:keyboard="false"
|
||||
:destroyOnClose="true"
|
||||
:zIndex="1000"
|
||||
>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="payMethodContent">
|
||||
<div class="generalModelTitle">
|
||||
{{ $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="" />
|
||||
<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
|
||||
>
|
||||
</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>
|
||||
<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>
|
||||
|
||||
<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,284 +159,296 @@ 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,
|
||||
components: {
|
||||
VerificationCodeInput,
|
||||
},
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
props:{
|
||||
type:{
|
||||
type:String,
|
||||
default:''
|
||||
}
|
||||
},
|
||||
emits: ['completePayment'],
|
||||
setup(prop,{emit}){
|
||||
const store = useStore();
|
||||
let payMethod = reactive({
|
||||
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
|
||||
}
|
||||
const cancelDsign = () => {
|
||||
payMethod.payMethodModel = false
|
||||
}
|
||||
const payAffirm = () => {
|
||||
if(!payMethodData.clause){
|
||||
let labelDisclaimer:any = payMethodData.labelDisclaimer
|
||||
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,
|
||||
},
|
||||
emits: ["completePayment"],
|
||||
setup(prop, { emit }) {
|
||||
const store = useStore();
|
||||
let payMethod = reactive({
|
||||
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;
|
||||
};
|
||||
const cancelDsign = () => {
|
||||
payMethod.payMethodModel = false;
|
||||
};
|
||||
const payAffirm = () => {
|
||||
if (!payMethodData.clause) {
|
||||
let labelDisclaimer: any = payMethodData.labelDisclaimer;
|
||||
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,
|
||||
};
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
methods: {
|
||||
turnToWindow(url: any) {
|
||||
window.open(url);
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
turnToWindow(url:any) {
|
||||
window.open(url);
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.payMethod {
|
||||
.payMethodContent{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 60rem;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
.generalModelTitle,.generalModelInfo{
|
||||
width: 100%;
|
||||
}
|
||||
.payMethod_list{
|
||||
margin-bottom: 4rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
>label{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 2rem;
|
||||
margin-bottom: 3rem;
|
||||
cursor: pointer;
|
||||
border: 2px solid #EFEFEF;
|
||||
border-radius: 2rem;
|
||||
height: 8rem;
|
||||
width: 100%;
|
||||
img{
|
||||
margin: 0rem 2rem;
|
||||
// max-width: 4rem;
|
||||
width: 4rem;
|
||||
}
|
||||
.payAffirm_detail{
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
>label{
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 1rem;
|
||||
span{
|
||||
margin-left: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
>label:last-child{
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.payMethod_payAffirm_clause{
|
||||
margin-bottom: 4rem;
|
||||
label{
|
||||
cursor: pointer;
|
||||
input{
|
||||
margin-right: 1rem;
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
}
|
||||
span{
|
||||
vertical-align: top;
|
||||
a{
|
||||
color: #000;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.animation{
|
||||
animation: shake .3s linear;
|
||||
@keyframes shake {
|
||||
0%{
|
||||
transform: translateX(0px);
|
||||
}
|
||||
25%{
|
||||
transform: translateX(-10px);
|
||||
}
|
||||
50%{
|
||||
transform: translateX(10px);
|
||||
}
|
||||
75%{
|
||||
transform: translateX(-10px);
|
||||
}
|
||||
100%{
|
||||
transform: translateX(0px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.payMethod_payAffirm_btn{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
>div{
|
||||
width: 29rem;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.mark_loading{
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
background: #fff;
|
||||
.mark_loading_title{
|
||||
font-size: 3rem;
|
||||
// text-decoration: underline;
|
||||
font-weight: 600;
|
||||
margin-bottom: 2rem;
|
||||
// color: #fff;
|
||||
}
|
||||
.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{
|
||||
display: flex;
|
||||
}
|
||||
.payMethodContent {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 60rem;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
.generalModelTitle,
|
||||
.generalModelInfo {
|
||||
width: 100%;
|
||||
}
|
||||
.payMethod_list {
|
||||
margin-bottom: 4rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
> label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 2rem;
|
||||
margin-bottom: 3rem;
|
||||
cursor: pointer;
|
||||
border: 2px solid #efefef;
|
||||
border-radius: 2rem;
|
||||
height: 8rem;
|
||||
width: 100%;
|
||||
img {
|
||||
margin: 0rem 2rem;
|
||||
// max-width: 4rem;
|
||||
width: 4rem;
|
||||
}
|
||||
.payAffirm_detail {
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
> label {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 1rem;
|
||||
span {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
> label:last-child {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.payMethod_payAffirm_clause {
|
||||
margin-bottom: 4rem;
|
||||
label {
|
||||
cursor: pointer;
|
||||
input {
|
||||
margin-right: 1rem;
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
}
|
||||
span {
|
||||
vertical-align: top;
|
||||
a {
|
||||
color: #000;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.animation {
|
||||
animation: shake 0.3s linear;
|
||||
@keyframes shake {
|
||||
0% {
|
||||
transform: translateX(0px);
|
||||
}
|
||||
25% {
|
||||
transform: translateX(-10px);
|
||||
}
|
||||
50% {
|
||||
transform: translateX(10px);
|
||||
}
|
||||
75% {
|
||||
transform: translateX(-10px);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.payMethod_payAffirm_btn {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
> div {
|
||||
width: 29rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.mark_loading {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
background: #fff;
|
||||
.mark_loading_title {
|
||||
font-size: 3rem;
|
||||
// text-decoration: underline;
|
||||
font-weight: 600;
|
||||
margin-bottom: 2rem;
|
||||
// color: #fff;
|
||||
}
|
||||
.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 {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.mark_loading_btn,.mark_loading_btn2{
|
||||
// border: #000;
|
||||
// color: #fff;
|
||||
display: flex;
|
||||
margin-top: 10px;
|
||||
text-align: center;
|
||||
border: 2px solid;
|
||||
padding: 0 20px;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
padding: .3rem 4rem;
|
||||
background: #39215b;
|
||||
color: #fff;
|
||||
border: none;
|
||||
margin: 0 2rem;
|
||||
align-items: center;
|
||||
}
|
||||
.mark_loading_btn2{
|
||||
border: 2px solid #000;
|
||||
color: #000;
|
||||
background: rgba(0,0,0,0);
|
||||
}
|
||||
}
|
||||
.mark_loading_btn,
|
||||
.mark_loading_btn2 {
|
||||
// border: #000;
|
||||
// color: #fff;
|
||||
display: flex;
|
||||
margin-top: 10px;
|
||||
text-align: center;
|
||||
border: 2px solid;
|
||||
padding: 0 20px;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
padding: 0.3rem 4rem;
|
||||
background: #39215b;
|
||||
color: #fff;
|
||||
border: none;
|
||||
margin: 0 2rem;
|
||||
align-items: center;
|
||||
}
|
||||
.mark_loading_btn2 {
|
||||
border: 2px solid #000;
|
||||
color: #000;
|
||||
background: rgba(0, 0, 0, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -1,429 +1,452 @@
|
||||
<template>
|
||||
<div class="Falls">
|
||||
<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',
|
||||
top: item.style.top + 'px',
|
||||
left: item.style.left + 'px',
|
||||
}"
|
||||
>
|
||||
<!-- 图片 -->
|
||||
<div class="falls_item_img">
|
||||
<img
|
||||
v-lazy="item.canvasUrl"
|
||||
@click="setItemDetail(item)"
|
||||
:style="{
|
||||
height: item.style.imgHeihgt + 'px',
|
||||
}"
|
||||
/>
|
||||
<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}}
|
||||
</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>
|
||||
<!-- <span :title="item.portfolioDes">{{item.portfolioDes}}</span> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="falls_item_detail">
|
||||
<!-- <div>
|
||||
<div class="Falls">
|
||||
<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',
|
||||
top: item.style.top + 'px',
|
||||
left: item.style.left + 'px',
|
||||
}"
|
||||
>
|
||||
<!-- 图片 -->
|
||||
<div class="falls_item_img">
|
||||
<img
|
||||
v-lazy="item.canvasUrl"
|
||||
@click="setItemDetail(item)"
|
||||
:style="{
|
||||
height: item.style.imgHeihgt + 'px',
|
||||
}"
|
||||
/>
|
||||
<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 }}
|
||||
</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>
|
||||
<!-- <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'}">
|
||||
<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>
|
||||
<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-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;">
|
||||
<label @click="portfolioLike(item)">
|
||||
<i
|
||||
v-if="true"
|
||||
class="fi fi-sr-thumbs-up"
|
||||
style="color: rgba(158, 158, 167)"
|
||||
></i>
|
||||
<i v-else class="fi fi-rr-social-network"></i>
|
||||
<span>{{ item.likeNum }}</span>
|
||||
</label>
|
||||
<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 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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<i class="fi fi-sr-eye"></i>
|
||||
<span>{{ item.viewNums }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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,
|
||||
},
|
||||
isText:{
|
||||
type:Boolean,
|
||||
default:true,
|
||||
},
|
||||
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{
|
||||
list,
|
||||
wait_list,
|
||||
width,
|
||||
num_x,
|
||||
gap_x,
|
||||
gap_y,
|
||||
poss,
|
||||
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')
|
||||
}
|
||||
gsap.registerPlugin(ScrollTrigger);
|
||||
let tl1 = gsap.timeline();
|
||||
tl1.from(el,1, {y:'30px',opacity:0},)
|
||||
ScrollTrigger.create({
|
||||
trigger: el, // 触发器元素
|
||||
start: "top 90%", // 滚动触发器的起始滚动位置
|
||||
end: '100% 80%', // 滚动触发器的结束滚动位置
|
||||
// markers: true, // 开启标注功能
|
||||
scrub: true,
|
||||
animation:tl1,
|
||||
scroller:dom,//设置指定元素为滚动依据
|
||||
scrub:2,
|
||||
// onUpdate:(v)=>{
|
||||
// if(v.progress < 0.1){
|
||||
// v.trigger?.classList.remove('active')
|
||||
// }else{
|
||||
// v.trigger?.classList.add('active')
|
||||
// // v.trigger?.classList.add('active')
|
||||
// }
|
||||
// }
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted () {
|
||||
this.resize()
|
||||
window.addEventListener("resize", this.resize);
|
||||
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;
|
||||
}
|
||||
},
|
||||
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){
|
||||
this.imgDom.remove();
|
||||
this.imgDom = null
|
||||
}
|
||||
},
|
||||
push(arr) {
|
||||
this.wait_list = this.wait_list.concat(arr);
|
||||
if (!this.loading) {
|
||||
this.loading = true;
|
||||
this.loadImg();
|
||||
}
|
||||
},
|
||||
deleteItem(id){
|
||||
for (let index = 0; index < this.list.length; index++) {
|
||||
if(this.list[index].id == id){
|
||||
this.list.splice(index,1)
|
||||
this.resize()
|
||||
break;
|
||||
}
|
||||
}
|
||||
},
|
||||
loadImg() {
|
||||
if (this.wait_list.length <= 0) {
|
||||
this.loading = false;
|
||||
this.$emit("loadend");
|
||||
return;
|
||||
}
|
||||
|
||||
let url = this.wait_list[0].canvasUrl || this.wait_list[0].url;
|
||||
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.position = "absolute";
|
||||
this.imgDom.style.top = "-99999px";
|
||||
document.body.appendChild(this.imgDom);
|
||||
this.imgDom.addEventListener("load", () => {
|
||||
if(!this.imgDom) return
|
||||
var idx = 0;
|
||||
var pos_num = this.poss[idx];
|
||||
for (var i = 1; i < this.poss.length; i++) {
|
||||
if (pos_num > this.poss[i]) {
|
||||
idx = i;
|
||||
pos_num = this.poss[i];
|
||||
}
|
||||
}
|
||||
// this.computedHeight = 0
|
||||
let width = this.imgDom.offsetWidth;
|
||||
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
|
||||
this.poss[idx] = top + height;
|
||||
let obj = {
|
||||
canvasUrl:url,
|
||||
style: { width, height, top, left, imgHeight },
|
||||
...data
|
||||
};
|
||||
this.list.push(obj);
|
||||
this.imgDom.remove();
|
||||
this.imgDom = null
|
||||
this.wait_list.splice(0, 1);
|
||||
this.$el.style.height =
|
||||
Math.max(...this.poss) + this.gap_y + "px";
|
||||
if (this.wait_list.length <= 0) {
|
||||
this.loading = false;
|
||||
this.$emit("loadend");
|
||||
} else {
|
||||
this.loadImg();
|
||||
}
|
||||
});
|
||||
},
|
||||
resize() {
|
||||
nextTick(() => {
|
||||
var t_width = this.$el.offsetWidth;
|
||||
var width = this.itemWidth;
|
||||
var num_x = parseInt(t_width / (width + 20));
|
||||
if (num_x < 1) num_x = 1;
|
||||
var remain = t_width - width * num_x;
|
||||
var gap_x = remain / (num_x + 1);
|
||||
this.gap_x = gap_x;
|
||||
this.gap_y = gap_x > 30 ? 30 : gap_x < 30 ? 20 : gap_x;
|
||||
this.num_x = num_x;
|
||||
var poss = [];
|
||||
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++) {
|
||||
let width = this.list[i].style.width;
|
||||
let height = this.list[i].style.height;
|
||||
var idx = 0;
|
||||
var pos_num = this.poss[idx];
|
||||
for (var j = 1; j < this.poss.length; j++) {
|
||||
if (pos_num > this.poss[j]) {
|
||||
idx = j;
|
||||
pos_num = this.poss[j];
|
||||
}
|
||||
}
|
||||
let top = this.poss[idx] + this.gap_y;
|
||||
let left = (idx + 1) * this.gap_x + idx * width;
|
||||
this.poss[idx] = top + height;
|
||||
this.list[i].style = { width, height, top, left };
|
||||
}
|
||||
this.$el.style.height = Math.max(...this.poss) + this.gap_y + "px";
|
||||
},
|
||||
setItemDetail(data){
|
||||
this.$emit('getImgScale',data)
|
||||
},
|
||||
portfolioLike(data){
|
||||
this.$emit('setPortfolioLike',data)
|
||||
}
|
||||
},
|
||||
})
|
||||
props: {
|
||||
isScroll: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
isText: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
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 {
|
||||
list,
|
||||
wait_list,
|
||||
width,
|
||||
num_x,
|
||||
gap_x,
|
||||
gap_y,
|
||||
poss,
|
||||
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");
|
||||
}
|
||||
gsap.registerPlugin(ScrollTrigger);
|
||||
let tl1 = gsap.timeline();
|
||||
tl1.from(el, 1, { y: "30px", opacity: 0 });
|
||||
ScrollTrigger.create({
|
||||
trigger: el, // 触发器元素
|
||||
start: "top 90%", // 滚动触发器的起始滚动位置
|
||||
end: "100% 80%", // 滚动触发器的结束滚动位置
|
||||
// markers: true, // 开启标注功能
|
||||
scrub: true,
|
||||
animation: tl1,
|
||||
scroller: dom, //设置指定元素为滚动依据
|
||||
scrub: 2,
|
||||
// onUpdate:(v)=>{
|
||||
// if(v.progress < 0.1){
|
||||
// v.trigger?.classList.remove('active')
|
||||
// }else{
|
||||
// v.trigger?.classList.add('active')
|
||||
// // v.trigger?.classList.add('active')
|
||||
// }
|
||||
// }
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.resize();
|
||||
window.addEventListener("resize", this.resize);
|
||||
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;
|
||||
}
|
||||
},
|
||||
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) {
|
||||
this.imgDom.remove();
|
||||
this.imgDom = null;
|
||||
}
|
||||
},
|
||||
push(arr) {
|
||||
this.wait_list = this.wait_list.concat(arr);
|
||||
if (!this.loading) {
|
||||
this.loading = true;
|
||||
this.loadImg();
|
||||
}
|
||||
},
|
||||
deleteItem(id) {
|
||||
for (let index = 0; index < this.list.length; index++) {
|
||||
if (this.list[index].id == id) {
|
||||
this.list.splice(index, 1);
|
||||
this.resize();
|
||||
break;
|
||||
}
|
||||
}
|
||||
},
|
||||
loadImg() {
|
||||
if (this.wait_list.length <= 0) {
|
||||
this.loading = false;
|
||||
this.$emit("loadend");
|
||||
return;
|
||||
}
|
||||
|
||||
let url = this.wait_list[0].canvasUrl || this.wait_list[0].url;
|
||||
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.position = "absolute";
|
||||
this.imgDom.style.top = "-99999px";
|
||||
document.body.appendChild(this.imgDom);
|
||||
this.imgDom.addEventListener("load", () => {
|
||||
if (!this.imgDom) return;
|
||||
var idx = 0;
|
||||
var pos_num = this.poss[idx];
|
||||
for (var i = 1; i < this.poss.length; i++) {
|
||||
if (pos_num > this.poss[i]) {
|
||||
idx = i;
|
||||
pos_num = this.poss[i];
|
||||
}
|
||||
}
|
||||
// this.computedHeight = 0
|
||||
let width = this.imgDom.offsetWidth;
|
||||
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;
|
||||
this.poss[idx] = top + height;
|
||||
let obj = {
|
||||
canvasUrl: url,
|
||||
style: { width, height, top, left, imgHeight },
|
||||
...data,
|
||||
};
|
||||
this.list.push(obj);
|
||||
this.imgDom.remove();
|
||||
this.imgDom = null;
|
||||
this.wait_list.splice(0, 1);
|
||||
this.$el.style.height = Math.max(...this.poss) + this.gap_y + "px";
|
||||
if (this.wait_list.length <= 0) {
|
||||
this.loading = false;
|
||||
this.$emit("loadend");
|
||||
} else {
|
||||
this.loadImg();
|
||||
}
|
||||
});
|
||||
},
|
||||
resize() {
|
||||
nextTick(() => {
|
||||
var t_width = this.$el.offsetWidth;
|
||||
var width = this.itemWidth;
|
||||
var num_x = parseInt(t_width / (width + 20));
|
||||
if (num_x < 1) num_x = 1;
|
||||
var remain = t_width - width * num_x;
|
||||
var gap_x = remain / (num_x + 1);
|
||||
this.gap_x = gap_x;
|
||||
this.gap_y = gap_x > 30 ? 30 : gap_x < 30 ? 20 : gap_x;
|
||||
this.num_x = num_x;
|
||||
var poss = [];
|
||||
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++) {
|
||||
let width = this.list[i].style.width;
|
||||
let height = this.list[i].style.height;
|
||||
var idx = 0;
|
||||
var pos_num = this.poss[idx];
|
||||
for (var j = 1; j < this.poss.length; j++) {
|
||||
if (pos_num > this.poss[j]) {
|
||||
idx = j;
|
||||
pos_num = this.poss[j];
|
||||
}
|
||||
}
|
||||
let top = this.poss[idx] + this.gap_y;
|
||||
let left = (idx + 1) * this.gap_x + idx * width;
|
||||
this.poss[idx] = top + height;
|
||||
this.list[i].style = { width, height, top, left };
|
||||
}
|
||||
this.$el.style.height = Math.max(...this.poss) + this.gap_y + "px";
|
||||
},
|
||||
setItemDetail(data) {
|
||||
this.$emit("getImgScale", data);
|
||||
},
|
||||
portfolioLike(data) {
|
||||
this.$emit("setPortfolioLike", data);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang='less' scoped>
|
||||
.Falls {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
position: relative;
|
||||
--paddingBottom:10px;
|
||||
--textMarginTop:10px;
|
||||
--textHeight:25px;
|
||||
--contentHeight:35px;
|
||||
.falls_item{
|
||||
position: absolute;
|
||||
transition: all 0.15s;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #fff;
|
||||
border-radius: 2rem;
|
||||
overflow: hidden;
|
||||
padding-bottom: var(--paddingBottom);
|
||||
&.falls_item:hover{
|
||||
.falls_item_img{
|
||||
img{
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
.falls_item_img{
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
img{
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
height: 100%;
|
||||
transition: all .3s;
|
||||
}
|
||||
.falls_item_user_Original{
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
color: #39215b;
|
||||
background: #c9a2ff;
|
||||
padding: 0 5px;
|
||||
border-radius: 4px;
|
||||
margin-right: 2px;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
.falls_item_bottom{
|
||||
padding: 0 10px;
|
||||
.falls_item_text{
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
margin-top: var(--textMarginTop);
|
||||
height: var(--textHeight);
|
||||
}
|
||||
.falls_item_content{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: #525252;
|
||||
height: var(--contentHeight);
|
||||
.falls_item_user{
|
||||
width: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
img{
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
border-radius: 50%;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.falls_item_user_detail{
|
||||
line-height: 1;
|
||||
width: 60%;
|
||||
width: 100%;
|
||||
color: #000;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
<style lang="less" scoped>
|
||||
.Falls {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
position: relative;
|
||||
--paddingBottom: 10px;
|
||||
--textMarginTop: 10px;
|
||||
--textHeight: 25px;
|
||||
--contentHeight: 35px;
|
||||
.falls_item {
|
||||
position: absolute;
|
||||
transition: all 0.15s;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #fff;
|
||||
border-radius: 2rem;
|
||||
overflow: hidden;
|
||||
padding-bottom: var(--paddingBottom);
|
||||
&.falls_item:hover {
|
||||
.falls_item_img {
|
||||
img {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
.falls_item_img {
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
img {
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
height: 100%;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.falls_item_user_Original {
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
color: #39215b;
|
||||
background: #c9a2ff;
|
||||
padding: 0 5px;
|
||||
border-radius: 4px;
|
||||
margin-right: 2px;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
.falls_item_bottom {
|
||||
padding: 0 10px;
|
||||
.falls_item_text {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
margin-top: var(--textMarginTop);
|
||||
height: var(--textHeight);
|
||||
}
|
||||
.falls_item_content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: #525252;
|
||||
height: var(--contentHeight);
|
||||
.falls_item_user {
|
||||
width: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
img {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
border-radius: 50%;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.falls_item_user_detail {
|
||||
line-height: 1;
|
||||
width: 60%;
|
||||
width: 100%;
|
||||
color: #000;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
> 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
55
src/main.ts
55
src/main.ts
@@ -1,35 +1,42 @@
|
||||
import { createApp,defineComponent,h } from 'vue'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
import store from './store'
|
||||
import './assets/iconfont/iconfont.css'
|
||||
import './assets/iconfont/iconfont.js'
|
||||
import './assets/iconfont2/iconfont.css'
|
||||
import flexible from './tool/flexible.js'
|
||||
import 'ant-design-vue/dist/antd.css';
|
||||
import Antd from 'ant-design-vue';
|
||||
import './assets/style/style.less';
|
||||
import { createApp, defineComponent, h } from "vue";
|
||||
import App from "./App.vue";
|
||||
import router from "./router";
|
||||
import store from "./store";
|
||||
import "./assets/iconfont/iconfont.css";
|
||||
import "./assets/iconfont/iconfont.js";
|
||||
import "./assets/iconfont2/iconfont.css";
|
||||
import flexible from "./tool/flexible.js";
|
||||
import "ant-design-vue/dist/antd.css";
|
||||
import Antd from "ant-design-vue";
|
||||
import "./assets/style/style.less";
|
||||
import VueLazyload from "vue-lazyload";
|
||||
import i18n from './lang/index'
|
||||
import { getBrowserInfo, murmur } from './tool/util'
|
||||
import "../node_modules/@flaticon/flaticon-uicons/css/all/all.css"
|
||||
import i18n from "./lang/index";
|
||||
import { getBrowserInfo, murmur } from "./tool/util";
|
||||
import "../node_modules/@flaticon/flaticon-uicons/css/all/all.css";
|
||||
// import { Https } from "@/tool/https";
|
||||
import 'swiper/css';
|
||||
import 'swiper/css/pagination';
|
||||
import "swiper/css";
|
||||
import "swiper/css/pagination";
|
||||
|
||||
// import "@/tool/color-thief.js";
|
||||
// import "@/tool/fabric.brushes.js";
|
||||
// import "@/tool/fabric.min.js";
|
||||
const app = createApp(App);
|
||||
flexible()
|
||||
flexible();
|
||||
|
||||
import { getCookie, setCookie } from "@/tool/cookie";
|
||||
document.addEventListener('touchstart', function(event) {
|
||||
event.preventDefault(); // 阻止长按选中
|
||||
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");
|
||||
|
||||
@@ -1,55 +1,74 @@
|
||||
<template>
|
||||
<div class="loginPage">
|
||||
<div class="left">
|
||||
<!-- :isScroll="!isMask" -->
|
||||
<Works :autoscroll="true" :position="'login'"></Works>
|
||||
<div class="mask" v-show="isMask" @click="()=>isMask = !isMask">
|
||||
<div class="content">
|
||||
<div class="userNum">
|
||||
<div class="title">5 000 000 +</div>
|
||||
<div>HAPPY USERS</div>
|
||||
</div>
|
||||
<div class="info">Millions trust AI products every day</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<div class="loginBox">
|
||||
<div class="selectType" v-show="!loginType">
|
||||
<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>
|
||||
</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-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>
|
||||
<div class="loginPage">
|
||||
<div class="left">
|
||||
<!-- :isScroll="!isMask" -->
|
||||
<Works :autoscroll="true" :position="'login'"></Works>
|
||||
<div class="mask" v-show="isMask" @click="() => (isMask = !isMask)">
|
||||
<div class="content">
|
||||
<div class="userNum">
|
||||
<div class="title">5 000 000 +</div>
|
||||
<div>HAPPY USERS</div>
|
||||
</div>
|
||||
<div class="info">Millions trust AI products every day</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<div class="loginBox">
|
||||
<div class="selectType" v-show="!loginType">
|
||||
<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>
|
||||
</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-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>
|
||||
<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,149 +76,158 @@ 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
|
||||
},
|
||||
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{
|
||||
...toRefs(dataDom),
|
||||
...toRefs(loginData),
|
||||
setLoginType,
|
||||
}
|
||||
},
|
||||
provide() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
})
|
||||
components: {
|
||||
Works,
|
||||
personal,
|
||||
school,
|
||||
enterprise,
|
||||
},
|
||||
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 {
|
||||
...toRefs(dataDom),
|
||||
...toRefs(loginData),
|
||||
setLoginType,
|
||||
};
|
||||
},
|
||||
provide() {
|
||||
return {};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.loginPage{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
> .left,>.right{
|
||||
height: 100%;
|
||||
}
|
||||
> .left{
|
||||
width: 60%;
|
||||
background: #f7f8fa;
|
||||
position: relative;
|
||||
> .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%);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
> .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{
|
||||
line-height: 1;
|
||||
margin-bottom: 3rem;
|
||||
> .title{
|
||||
font-size: 8rem;
|
||||
font-weight: 900;
|
||||
}
|
||||
> div{
|
||||
font-size: 3rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
> .info{
|
||||
font-size: 4rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
> .right{
|
||||
display: flex;
|
||||
width: 40%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
> .Text{
|
||||
width: 60rem;
|
||||
text-align: center;
|
||||
> .title{
|
||||
font-size: 4rem;
|
||||
font-weight: 900;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
> .info{
|
||||
font-size: 1.8rem;
|
||||
margin-bottom: 2rem;
|
||||
line-height: 1.2;
|
||||
}
|
||||
> .continue{
|
||||
> i{
|
||||
margin-left: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .loginBox{
|
||||
width: 60rem;
|
||||
> .selectType{
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
> .text{
|
||||
font-size: 2.5rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
> .typeList{
|
||||
> div{
|
||||
margin: 0 auto;
|
||||
width: 33rem;
|
||||
margin-top: .8rem;
|
||||
border-radius: 1rem;
|
||||
border: 2px solid;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .login{
|
||||
position: relative;
|
||||
> .title{
|
||||
font-size: 4rem;
|
||||
font-weight: 900;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
> i{
|
||||
margin-right: 2rem;
|
||||
font-size: 3rem;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
.loginPage {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
> .left,
|
||||
> .right {
|
||||
height: 100%;
|
||||
}
|
||||
> .left {
|
||||
width: 60%;
|
||||
background: #f7f8fa;
|
||||
position: relative;
|
||||
> .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, 0.8) 100%
|
||||
);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
> .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 {
|
||||
line-height: 1;
|
||||
margin-bottom: 3rem;
|
||||
> .title {
|
||||
font-size: 8rem;
|
||||
font-weight: 900;
|
||||
}
|
||||
> div {
|
||||
font-size: 3rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
> .info {
|
||||
font-size: 4rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
> .right {
|
||||
display: flex;
|
||||
width: 40%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
> .Text {
|
||||
width: 60rem;
|
||||
text-align: center;
|
||||
> .title {
|
||||
font-size: 4rem;
|
||||
font-weight: 900;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
> .info {
|
||||
font-size: 1.8rem;
|
||||
margin-bottom: 2rem;
|
||||
line-height: 1.2;
|
||||
}
|
||||
> .continue {
|
||||
> i {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .loginBox {
|
||||
width: 60rem;
|
||||
> .selectType {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
> .text {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
> .typeList {
|
||||
> div {
|
||||
margin: 0 auto;
|
||||
width: 33rem;
|
||||
margin-top: 0.8rem;
|
||||
border-radius: 1rem;
|
||||
border: 2px solid;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .login {
|
||||
position: relative;
|
||||
> .title {
|
||||
font-size: 4rem;
|
||||
font-weight: 900;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
> i {
|
||||
margin-right: 2rem;
|
||||
font-size: 3rem;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user