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

fix

Browse Source
This commit is contained in:
X1627315083
2025-01-10 15:26:10 +08:00
parent b2b5975235
commit cfa1a3345d
10 changed files with 2792 additions and 196 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.env.dev
View File

@@ -3,10 +3,10 @@ NODE_ENV = 'development'
# VUE_APP_BASE_URL = 'https://api.aida.com.hk'
# VUE_APP_BASE_URL = 'http://18.167.251.121:10086'
# VUE_APP_BASE_URL = 'https://develop.api.aida.com.hk'
VUE_APP_BASE_URL = 'https://develop.api.aida.com.hk'
# VUE_APP_BASE_URL = 'https://www.api.aida.com.hk'
# 徐佩
# VUE_APP_BASE_URL = 'http://192.168.1.4:5567'
# 海波
VUE_APP_BASE_URL = 'http://192.168.1.2:5567'
# VUE_APP_BASE_URL = 'http://192.168.1.2:5567'

2
src/component/Account/account.vue
View File

@@ -41,7 +41,7 @@
<i v-if="!isEditUserName" class="fi fi-rr-edit" @click="openEdit('userName')"></i>
<i v-else class="fi fi-br-check" @click="editChek('userName')"></i>
</div>
<span class="Modifiable" v-if="userDetail.usernameModify.remainingTimes > 0 && isEditUserName">{{ $t('account.remainingModifications') }}{{ userDetail.usernameModify.remainingTimes }}</span>
<span class="Modifiable" v-if="userDetail.usernameModify > 0 && isEditUserName">{{ $t('account.remainingModifications') }}{{ userDetail.usernameModify }}</span>
<span class="Modifiable notModifiable" v-else-if="isEditUserName">{{ $t('account.notModifiable') }}</span>
</div>
<div class="label">

519
src/component/Administrator/Transaction/TransactionTable.vue Normal file
View File

@@ -0,0 +1,519 @@
<template>
<div class="admin_page">
<div class="admin_table_search">
<div class="admin_state">
<div class="admin_state_item">
<span>Create Time:</span>
<a-range-picker
style="width: 250px"
class="range_picker"
v-model:value="rangePickerValue"
:placeholder="[
$t('HistoryPage.StartDate'),
$t('HistoryPage.EndDate'),
]"
valueFormat="YYYY-MM-DD"
>
<template #suffixIcon>
<span
class="icon iconfont range_picker_icon icon-rili"
></span>
</template>
</a-range-picker>
</div>
<div class="admin_state_item">
<span>Country:</span>
<a-select
v-model:value="country"
:allowClear="true"
show-search
style="width: 250px"
:filter-option="filterOption"
placeholder="Select Item..."
max-tag-count="responsive"
:options="allCountry"
></a-select>
</div>
<div class="admin_state_item">
<span>payerTotal:</span>
<input
v-model="payerTotal"
placeholder="Please enter payer total"
@keydown.enter="gettrialList"
type="text"
style="width: 250px"
/>
</div>
<div class="admin_state_item">
<span>platform:</span>
<a-select
v-model:value="platform"
size="large"
style="width: 250px"
optionFilterProp="label"
:options="platformList"
placeholder="Please select"
allowClear
show-search
></a-select>
</div>
<div class="admin_state_item">
<span>Status:</span>
<a-select
v-model:value="status"
size="large"
style="width: 250px"
optionFilterProp="label"
:options="statusList"
placeholder="Please select"
allowClear
show-search
></a-select>
</div>
<div class="admin_state_item">
<span>Type:</span>
<a-select
v-model:value="type"
size="large"
style="width: 250px"
optionFilterProp="label"
:options="articleCategoryList"
placeholder="Please select"
allowClear
show-search
></a-select>
</div>
</div>
<div class="admin_search">
<div class="admin_search_item" @click="searchHistoryList">
Search
</div>
</div>
<div class="admin_state_list">
<div
class="admin_state_list_item"
@click="lastGeTrialList('year')"
>
Nearly a year
</div>
<div
class="admin_state_list_item"
@click="lastGeTrialList('month')"
>
Last month
</div>
<div
class="admin_state_list_item"
@click="lastGeTrialList('week')"
>
Last week
</div>
</div>
</div>
<div class="admin_table_content" ref="historyTable">
<a-table
@resizeColumn="handleResizeColumn"
:loading="tableLoading"
:columns="columns"
:data-source="dataList"
:scroll="{ y: historyTableHeight }"
@change="changePage"
:showSorterTooltip='false'
:pagination="{
showSizeChanger: true,
current: currentPage,
pageSize: pageSize,
total: total,
showQuickJumper: true,
bordered: false,
}"
>
<template #bodyCell="{ column, text, record, index }">
<div class="operate_list" v-if="column?.Operations">
<div :class="{success:record.status == 'Success'}">
<i class="fi fi-ss-check-circle"></i>{{ record.status }}
</div>
<div :class="{pending:record.status == 'Pending'}">
<i class="fi fi-br-hourglass-end"></i>{{ record.status }}
</div>
<div :class="{fail:record.status == 'Fail'}">
<i class="fi fi-ss-cross-circle"></i>{{ record.status }}
</div>
</div>
</template>
</a-table>
</div>
</div>
</template>
<script lang="ts">
import {
defineComponent,
ref,
createVNode,
computed,
reactive,
toRefs,
onMounted,
} from "vue";
import { formatTime } from "@/tool/util";
import { useStore } from "vuex";
import { Https } from "@/tool/https";
export default defineComponent({
components: {},
setup() {
const store:any = useStore()
let filter: any = reactive({
dataList: [],
tableLoading: false,
allCountry:[]
});
let filterData: any = reactive({
rangePickerValue: [],
currentPage: 1,
pageSize: 10,
total: 0,
country: "",
payerTotal: "",
platform: "",
order: "", //'Ascending 升序 Descending 降序'
orderBy:'',
status: "",
type: "",
});
let selectList=reactive({
platformList:[
{
label: "all",
value: "",
},
{
label:'PayPal',
value:'PayPal',
},
{
label:'Stripe',
value:'Stripe',
},
{
label:'Alipay-HK',
value:'Alipay-HK',
},
],
statusList:[
{
label: "all",
value: "",
},
{
label:'Success',
value:'Success',
},
{
label:'Fail',
value:'Fail',
},
{
label:'Pending',
value:'Pending',
},
],
articleCategoryList:[
{
label: "all",
value: "",
},
{
label:'new',
value:'new',
},
{
label:'renewal',
value:'renewal',
},
{
label:'credits',
value:'credits',
},
],
})
let renameData: any = ref({}); //修改名字选中的数据
const columns: any = computed(() => {
return [
{
title: "Id",
align: "center",
dataIndex: "id",
key: "id",
width:100,
fixed: "left",
sorter: true,
},
{
title: "Country",
align: "center",
dataIndex: "country",
key: "country",
width:150,
ellipsis:true
// customRender: (record: any) => {
// let time = formatTime(
// record.text / 1000,
// "YYYY-MM-DD hh:mm:ss"
// );
// return time;
// },
},
{
title: "City",
align: "center",
dataIndex: "city",
key: "city",
width:150,
ellipsis:true
},
{
title: "Create Time",
align: "center",
dataIndex: "createTime",
key: "createTime",
width:150,
ellipsis:true,
},
{
title: "Payer Total",
align: "center",
dataIndex: "payerTotal",
key: "payerTotal",
width:150,
ellipsis:true,
},
{
title: "Payment Method",
align: "center",
dataIndex: "paymentMethod",
key: "paymentMethod",
width:150,
ellipsis:true,
},{
title: "last4",
key: "last4",
width:120,
align: "center",
dataIndex: "last4",
// slots:{customRender:'action'}
},
{
title: "Platform",
align: "center",
dataIndex: "platform",
key: "platform",
width:150,
ellipsis:true,
},{
title: "Type",
align: "center",
dataIndex: "type",
key: "type",
width:150,
ellipsis:true,
},
// {
// title: 'User Type',
// align: "center",
// dataIndex: "systemUser",
// key: "systemUser",
// width:100,
// customRender: (record: any) => {
// let str;
// if (record.value == 0) {
// str = "visitor";
// } else if (record.value == 1) {
// str = "yearly";
// } else if (record.value == 2) {
// str = "monthly";
// } else if (record.value == 3) {
// str = "trial";
// } else if (record.value == 4) {
// str = "userInEvent";
// }
// return str;
// },
// },
{
title: "Status",
align: "center",
dataIndex: "status",
key: "status",
fixed: "right",
width:150,
Operations: true,
ellipsis:true,
}
];
});
//改变页码
let changePage = (e: any, filters:any, sorter:any) => {
filterData.currentPage = e.current;
filterData.pageSize = e.pageSize;
if(sorter.order){
if(sorter.columnKey == 'id'){
filterData.orderBy = 'id'
}else if(sorter.columnKey == "createDate"){
filterData.orderBy = 'time'
}else if(sorter.columnKey == "credits"){
filterData.orderBy = 'credits'
}
}
filterData.order = sorter.order == "descend" ? "Descending" : "Ascending";
gettrialList();
};
//查询列表
let searchHistoryList = () => {
filterData.currentPage = 1;
gettrialList();
};
let clearHistoryList = () => {
filterData.rangePickerValue = [],
filterData.currentPage = 1,
filterData.pageSize = 10,
filterData.total = 0,
filterData.country = "",
filterData.payerTotal = ""
filterData.order = "" //'Ascending 升序 Descending 降序'
filterData.orderBy = "" //'Ascending 升序 Descending 降序'
filterData.platform = ""
filterData.status = ""
filterData.type = ""
};
let setHistoryListData = () => {
let startDate: any = filterData.rangePickerValue?.[0]
? filterData.rangePickerValue[0] + " " + "00:00:00"
: "";
let endDate: any = filterData.rangePickerValue?.[1]
? filterData.rangePickerValue[1] + " " + "00:00:00"
: "";
let data = {
order: filterData.order,
orderBy: filterData.orderBy,
"city": "",
"country": filterData.country,
startTime: startDate,
endTime: endDate,
"id": 0,
page: filterData.currentPage,
"payerTotal": filterData.payerTotal,
"platform": filterData.platform,
size: filterData.pageSize,
"status": filterData.status,
"type": filterData.type
};
return data;
};
//获取列表
let gettrialList = () => {
filter.tableLoading = true;
let data = setHistoryListData();
Https.axiosPost(Https.httpUrls.queryTransaction, data).then(
(rv: any) => {
if (rv) {
console.log(rv);
// this.dataList = rv
filter.dataList = rv.content;
filterData.total = rv.total;
filter.tableLoading = false;
// this.workspaceItem.position = this.singleTypeList[0].label
}
}
);
};
let lastGeTrialList = (str: string) => {
clearHistoryList();
let currentDate = new Date();
let currentTimestamp = Math.floor(currentDate.getTime() / 1000);
// 计算30天前的时间戳
let thirtyDaysAgoTimestamp;
if (str == "year") {
thirtyDaysAgoTimestamp = currentTimestamp - 360 * 24 * 60 * 60;
} else if (str == "month") {
thirtyDaysAgoTimestamp = currentTimestamp - 30 * 24 * 60 * 60;
} else if (str == "week") {
thirtyDaysAgoTimestamp = currentTimestamp - 7 * 24 * 60 * 60;
}
filterData.rangePickerValue[0] = formatTime(
thirtyDaysAgoTimestamp,
"YYYY-MM-DD"
);
gettrialList();
};
let filterOption = (input: any, option: any) => {
// 使用 option.label 进行搜索
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
};
onMounted(() => {
let allCountry: any = sessionStorage.getItem("allCountry");
if (allCountry) {
filter.allCountry = JSON.parse(allCountry);
}
gettrialList();
});
return {
...toRefs(filter),
...toRefs(filterData),
...toRefs(selectList),
columns,
renameData,
changePage,
searchHistoryList,
lastGeTrialList,
gettrialList,
filterOption,
};
},
data() {
return {
historyTableHeight: 0,
handleResizeColumn: (w: any, col: any) => {
col.width = w;
},
};
},
mounted() {
let historyTable: any = this.$refs.historyTable;
this.historyTableHeight = historyTable.clientHeight - 200;
},
methods: {},
});
</script>
<style lang="less" scoped>
.admin_page .admin_table_search .admin_state {
display: flex;
flex-wrap: wrap;
}
:deep(.operate_list){
.fi{
font-size: 2rem;
margin-right: 1rem;
}
.success{
.fi-ss-check-circle{
color: #3ab45c;
}
}
.pending{
.fi-ss-check-circle{
color: #ffc628;
}
}
.fail{
.fi-ss-check-circle{
color: #ff0000;
}
}
}
</style>

5
src/router/index.ts
View File

@@ -250,6 +250,11 @@ const routes: Array<RouteRecordRaw> = [
name:'affiliateAudit',
meta:{enter:3,},
component: _import_component('Administrator/affiliate/affiliateAudit.vue'),
},{
path:'TransactionTable',
name:'TransactionTable',
meta:{enter:3,},
component: _import_component('Administrator/Transaction/TransactionTable.vue'),
},
]
},

1
src/store/uploadFile/uploadFile.ts
View File

@@ -242,6 +242,7 @@ const UploadFilesModule : Module<UploadFiles,RootState> = {
state.disposeMoodboard = []
// state.showSketchboard = []
state.chooseIsDesign.value = true
state.moodboardPosition = {}
},
clearAllId(state){
state.moodboard.forEach((v:any) => {

14
src/store/userHabit/userHabit.ts
View File

@@ -78,10 +78,7 @@ const userHabit : Module<UserHabit,RootState> = {
},
subscriptionType:null,
subscriptionId:null,
usernameModify:{
remainingTimes: 0,
remainingDays:0,
},
usernameModify:0,
},
bindEmail : {
@@ -184,10 +181,7 @@ const userHabit : Module<UserHabit,RootState> = {
subscriptionId:null,
//是否是affiliate用户
affiliate:false,
usernameModify:{
remainingTimes: 0,
remainingDays:0,
},
usernameModify:0,
}
state.bindEmail = {
@@ -213,7 +207,7 @@ const userHabit : Module<UserHabit,RootState> = {
state.userDetail.userName = data.userName//用户名
state.userDetail.userId = data.userId//用户id
state.userDetail.avatar = data.avatar//头像
state.userDetail.usernameModify = data.usernameModify//头像
state.userDetail.usernameModify = data.usernameModify//当月剩余修改次数
state.userDetail.isBeginner = data.isBeginner == 1 ? true : false;//是否完成新手指引
/**
* 用于区分游客与系统用户
@@ -233,7 +227,7 @@ const userHabit : Module<UserHabit,RootState> = {
state.userDetail.systemList = []
if(data.systemUser != 0)state.userDetail.systemList.push(1)
if(data.affiliate)state.userDetail.systemList.push(2)
let adminIdList = [88,6,46,31,73,83,87,4,11482,11630]
let adminIdList = [88,6,46,31,73,83,87,4,11482,11630,12201,12592]
// if(data.email == '' || data.email)state.userDetail.systemList.push(3)
if(adminIdList.indexOf(data.userId) > -1)state.userDetail.systemList.push(3)

1
src/tool/https.js
View File

@@ -261,6 +261,7 @@ export const Https = {
//查询所有试用用户
inquiryGetTrial:`/api/inquiry/getTrial`,//查询所有试用用户
getUserInfo:`/api/inquiry/getUserInfo`,//查询所有用户
queryTransaction:`/api/inquiry/queryTransaction`,//查询交易记录
//查询某个时间内design点击次数
getDesignStatistic:`/api/inquiry/getDesignStatistic`,//拒绝审批
getAllQuestionnaire:`/api/inquiry/getAllQuestionnaire`,//拒绝审批

23
src/views/Administrator.vue
View File

@@ -219,6 +219,29 @@ export default defineComponent({
route:'/administrator/affiliateAudit',
key:'sub10',
isShow:true,
},{
name:'Transaction',
icon:'usetime',
expandIcon:'icon-xiala',
key:'sub11',
isShow:true,
children: [
{
name:'Transaction Record',
route:'/administrator/TransactionTable',
icon:'',
key:'sub11-1',
isShow:true,
},
// {
// code:'ROLE_MANAGER',
// name:'Access Permission',
// route:'/home/excil2',
// icon:'',
// key:'/home/excil33',
// isShow:true,
// },
],
}],
openKeys: [],
selectedKeys: ['sub1'],

1961
src/views/HomeView/HomeView copy.vue Normal file
View File

File diff suppressed because it is too large Load Diff

458
src/views/HomeView/HomeView.vue
View File

@@ -74,9 +74,11 @@
</div>
<div class="silder button_margin_14" v-show="designCollectionId">
<div class="text">Small</div>
<a-slider id="system_silder"
<a-slider
class="system_silder"
v-model:value="collValue"
:min="minCollValue"
:max="maxCollValue-1"
@afterChange="setSystemDesigner(500)"
:tooltipVisible="false"
>
@@ -102,10 +104,12 @@
</div>
</div>
<div class="right_content_img_block scroll_style Guide_1_17 active" :class="[driver__.driver?'showEvents':'']">
<div class="right_content_img_item" ref="designImg" designType="like" :index="0">
<div class="right_content_img_item" ref="likeItemDom" designType="like" :index="0">
<div class="content_img_block content_img_GetWidth active" :style="collStyle" @mousedown.stop="designMousedown(getMousePosition($event,false))" @touchstart.passive="designMousedown(getMousePosition($event,true))"
<div class="content_img_block content_img_GetWidth active" :style="likeStyle"
v-for="(design, index) in likeDesignCollectionList" :key="design.id"
@mousedown.stop="designMousedown(getMousePosition($event,false),design.userLikeSortId,'like')"
@touchstart.passive="designMousedown(getMousePosition($event,true),design.userLikeSortId,'like')"
@click="designDetail(
design,
index,
@@ -139,7 +143,7 @@
</div>
</div>
<div class="right_content_img_block scroll_style">
<div class="right_content_img_item" designType="dislike" :index="0">
<div class="right_content_img_item" ref="collItemDom" designType="dislike" :index="0">
<!-- <div class="content_img_block" v-for="(
design, index
) in deleteDesignCollectionList" :key="design?.designItemId">
@@ -158,14 +162,16 @@
Dustbin
</div>
</div> -->
<div class="content_img_block" v-show="showDesignMark">
<div class="content_img_block" v-show="showDesignMark" :style="collStyle">
<a-spin size="large" class="content_img_flex"></a-spin>
</div>
<div class="content_img_block content_img_GetWidth" v-for="(
design, index
) in designCollectionList" :key="design?.designItemId" @mousedown.stop="designMousedown(getMousePosition($event,false))" @touchstart.passive="designMousedown(getMousePosition($event,true))">
) in designCollectionList" :key="design?.designItemId" :style="collStyle">
<div class="content_img_flex"
:class="[(driver__.driver && driver__.index == 32)?'hideEvents':'']"
@mousedown.stop="designMousedown(getMousePosition($event,false),design.designItemId,'disLike')"
@touchstart.passive="designMousedown(getMousePosition($event,true),design.designItemId,'disLike')"
@click="
designDetail(
design,
@@ -182,9 +188,9 @@
)
">
</div>
<i class="fi fi-rr-trash icon_delete" @click.stop="
<!-- <i class="fi fi-rr-trash icon_delete" @click.stop="
setDeleteDesign(index)">
</i>
</i> -->
</div>
</div>
@@ -201,9 +207,6 @@
</div>
</div>
</div>
<teleport to="body">
<img class="moveDataImg" v-if="moveDataImg" :style="moveDataStyle" :src="moveDataImg" alt="">
</teleport>
<KeepAlive>
<CollectionModal :getDesignData="getDesignData" ref="collectionModal" @finishCollection="finishCollection()"></CollectionModal>
</KeepAlive>
@@ -362,16 +365,37 @@ export default defineComponent({
return store.state.UploadFilesModule.chooseIsDesign})
let portfolio:any = ref({})
provide('portfolio',portfolio)
let showDesignMark = ref(false)
const collItemSize = reactive({
collValue:JSON.parse(sessionStorage.getItem('collValue') as any) || 40,
collStyle:{
width:'24rem',
height:'37rem'
collValue:JSON.parse(sessionStorage.getItem('collValue') as any) || 3,
minCollValue:4,
maxCollValue:20,
likeStyle:{
width:'240px',
height:'370px',
position:'absolute',
},
collStyle:{
width:'0',
height:'0',
position:'absolute',
},
itemStyle:{
width:0,
height:0,
},
scale:[1,1.54],
collTime:null as any,
isMove:false,
})
let designImg = ref()
const posiitonData = ref({
likeElList:[] as any,
likeSelectIndex:0,
generateElList:[] as any,
generateSelectIndex:0,
})
let likeItemDom = ref()
let collItemDom = ref()
let domHidden = ref(JSON.parse(sessionStorage.getItem('domHidden') as any) || false);
let recycleDomHidden = ref(JSON.parse(sessionStorage.getItem('recycleDomHidden') as any) || false);
let getDesignTime = null as any;
@@ -379,176 +403,205 @@ export default defineComponent({
clearTimeout(collItemSize.collTime)
collItemSize.collTime = setTimeout(()=>{
nextTick(()=>{
let wScale = 60,hScale = 92.5
let num = collItemSize.collValue
let width = wScale * ((num<20?20:num) / 100)
let height =hScale * ((num<20?20:num) / 100)
let parentWidth = likeItemDom.value.parentElement.offsetWidth
collItemSize.minCollValue = collItemSize.maxCollValue - Math.round(likeItemDom.value.parentElement.offsetWidth/120)
collItemSize.collValue = collItemSize.collValue<collItemSize.minCollValue?collItemSize.minCollValue:collItemSize.collValue
let itemAddWidth = 0
let itemAddHeight = 0
let parentWidth = designImg.value.parentElement.offsetWidth
// let sonDom = designImg.value.querySelectorAll('.content_img_GetWidth')[0]
let htmlfontSize = Number(document.documentElement.style.fontSize.split('px')[0])
let rowNum = Math.floor(parentWidth / (width*htmlfontSize+10))
if(rowNum > (likeDesignCollectionList.value.length + designCollectionList.value.length)){
}else{
let residue = parentWidth - Math.floor(parentWidth / (width*htmlfontSize+10 )) * (width*htmlfontSize + 10)
itemAddWidth = residue / rowNum / htmlfontSize
itemAddHeight = width / height * itemAddWidth
let value = collItemSize.maxCollValue - collItemSize.collValue
collItemSize.itemStyle.width = (parentWidth - (value * 10)) / value
collItemSize.itemStyle.height = collItemSize.itemStyle.width * 1.54
collItemSize.collStyle.width = (collItemDom.value.offsetWidth - 30) / 3 * collItemSize.scale[0] + 'px'
collItemSize.collStyle.height = (collItemDom.value.offsetWidth - 30) / 3 * collItemSize.scale[1] + 'px'
collItemSize.likeStyle.width = collItemSize.itemStyle.width + 'px'
collItemSize.likeStyle.height = collItemSize.itemStyle.height + 'px'
let elArr = likeItemDom.value.children
posiitonData.value.likeElList = []
for(let i = 0;i < elArr.length;i++){
posiitonData.value.likeElList.push({
el: elArr[i],
sort: likeDesignCollectionList.value[i].sort - 1,
index: i,
userLikeSortId:likeDesignCollectionList.value[i].userLikeSortId
});
}
collItemSize.collStyle.width = width + itemAddWidth + 'rem'
collItemSize.collStyle.height = height + itemAddHeight + 'rem'
moveItem('like')
})
},time)
}
const setDeleteDesign = (index:any)=>{
store.commit("setDeleteDesignCollectionList",index);
}
const cancelDeleteDesign = (index:any)=>{
store.commit("cancelDeleteDesignCollectionList",index);
}
const designMousedown = (e:any,Id:number,str:string)=>{
if(str != 'like' && showDesignMark.value) return
let arr = str == 'like'? posiitonData.value.likeElList:posiitonData.value.generateElList
let item:any = arr.filter(item=>item.userLikeSortId == Id)[0]
item.el.style.zIndex = 2;
item.el.style.transition = 'all 0s';
let startX = e.clientX,
startY = e.clientY,
left = item.el.offsetLeft,
top = item.el.offsetTop;
collItemSize.isMove = false
let moveFun = (e:any) => {
collItemSize.isMove = true
let X = e.clientX - startX + left;
let Y = e.clientY - startY + top;
item.el.style.left = `${X}px`;
item.el.style.top = `${Y}px`;
reRange(item, X, Y,str);
};
let mouseUpFun = ()=>{
document.removeEventListener('mousemove',mouseMove)
document.removeEventListener('touchmove',touchmove)
let moveData = reactive({
moveDataImg:'',
moveDataImg_:'',
downType:'',
moveDataStyle:{
position: 'absolute',
top: '0',
left: '0',
width:'',
height:'',
zIndex: 9,
opacity:.5,
pointerEvents:'none'
},
downIndex:-1,
downXy:{x:0,y:0},
})
const designMousedown = (e:any)=>{
if(e.target.getAttribute('index')){
moveData.downIndex = e.target.getAttribute('index');
moveData.moveDataImg_ = e.target.src
moveData.downXy.x = e.clientX
moveData.downXy.y = e.clientY
moveData.moveDataStyle.width = e.target.offsetWidth + 'px'
moveData.moveDataStyle.height = e.target.offsetHeight + 'px'
moveData.downType = e.target.getAttribute('designType');
window.addEventListener('mousemove', mouseMove);
window.addEventListener('touchmove', touchmove);
window.addEventListener('mouseup', designMouseup);
window.addEventListener('touchend', designMouseup);
document.removeEventListener('mouseup',mouseUpFun)
document.removeEventListener('touchend',mouseUpFun)
item.el.style.zIndex = 1;
item.el.style.transition = 'top,left .5s';
moveItem(str);
if(str == 'like')sortDesignCollection()
}
}
let mouseMove = function(event:any){
let e = getMousePosition(event,false)
desingMousemove(e)
}
let touchmove = function(event:any){
let e = getMousePosition(event,true)
desingMousemove(e)
}
const designMouseup = async (e:any)=>{
document.removeEventListener('mousemove',mouseMove)
document.removeEventListener('touchmove',touchmove)
document.removeEventListener('mouseup',designMouseup)
document.removeEventListener('touchend',designMouseup)
moveData.moveDataImg = ''
moveData.moveDataImg_ = ''
moveData.downXy = {x:0,y:0}
var type = e.target.getAttribute('designType');
var index = e.target.getAttribute('index');
if(index){
let likeList = likeDesignCollectionList.value
let designList = designCollectionList.value
let arr = moveData.downType == 'like' ? likeList : designList
let arr1 = type == 'like' ? likeList : designList
let item:any
if(moveData.downType !== type){
let httpsUrl = moveData.downType == 'like'?Https.httpUrls.designDislike:Https.httpUrls.designLike
let data
if(moveData.downType == 'like'){
data = {
designId: arr[moveData.downIndex].designId || designId.value,
designPythonOutfitId:arr[moveData.downIndex].designOutfitId,
groupDetailId: arr[moveData.downIndex].groupDetailId,
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
}
}else{
data = {
designItemId: arr[moveData.downIndex].designItemId,
userGroupId: userGroupId.value,
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
designPythonOutfitId: arr[moveData.downIndex].designOutfitId? arr[moveData.downIndex].designOutfitId: arr[moveData.downIndex].designPythonOutfitId
}
}
if(moveData.downType == 'like'){
await like(data,httpsUrl)
}else{
item = await like(data,httpsUrl)
}
}
item = item?item:arr.splice(moveData.downIndex, 1)
arr1.splice(index, 0, ...item)
let mouseMove = function(event:any){
let e = getMousePosition(event,false)
moveFun(e)
}
}
const like = async (data:any,httpsUrl:string)=>{
await new Promise<void>((resolve, reject) => {
// let data = {
// designItemId: item.designItemId,
// userGroupId: userGroupId.value,
// timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
// designPythonOutfitId: item.designOutfitId? item.designOutfitId: item.designPythonOutfitId
// }
Https.axiosPost(httpsUrl, data).then((rv)=>{
let value:any = {
id:rv.userGroupId,
userLikeSortId:rv.id,
userLikeGroupId:rv.userGroupId,
sort:rv.sort,
}
resolve(value)
}).catch()
})
let touchmove = function(event:any){
let e = getMousePosition(event,true)
moveFun(e)
}
document.addEventListener('mousemove',mouseMove)
document.addEventListener('touchmove',touchmove)
document.addEventListener('mouseup',mouseUpFun)
document.addEventListener('touchend',mouseUpFun)
}
//排序 从大到小
const sortDesignCollection = ()=> {
let arr = JSON.parse(JSON.stringify(likeDesignCollectionList.value))
let arrData:any = []
arr.forEach((item:any,index:number)=>{
likeDesignCollectionList.value.forEach((likeItem:any)=>{
let item = posiitonData.value.likeElList.filter((item:any)=>item.userLikeSortId == likeItem.userLikeSortId)[0]
likeItem.sort = item.sort + 1
let obj = {
id:item.userLikeSortId,
"sort": arr.length - index,
"userLikeGroupId": item.userLikeGroupId,
"userLikeId": item.id
id:likeItem.userLikeSortId,
"sort": item.sort + 1,
"userLikeGroupId": likeItem.userLikeGroupId,
"userLikeId": likeItem.id
}
arrData.push(obj)
})
console.log(arrData);
let data = {
"userLikeGroupId": userGroupId.value,
"userLikeSortList": arrData
}
Https.axiosPost(Https.httpUrls.designSort, data).then((rv:any)=>{
console.log(rv);
})
}
const desingMousemove = (e:any)=>{
if(!moveData.moveDataImg)moveData.moveDataImg = moveData.moveDataImg_
let width = moveData.moveDataStyle.width.split('px')[0]
let height = moveData.moveDataStyle.height.split('px')[0]
moveData.moveDataStyle.left = e.clientX - Number(width)/2+'px'
moveData.moveDataStyle.top = e.clientY - Number(height)/2+'px'
}
const mouseenter = (e:any,str:string)=>{
console.log(23,str);
}
const reRange = (item:any, x:number, y:number,str:string)=>{
let elList = str == 'like'? posiitonData.value.likeElList:posiitonData.value.generateElList
let index = str == 'like'?posiitonData.value.likeSelectIndex:posiitonData.value.generateSelectIndex
let value = collItemSize.maxCollValue - collItemSize.collValue
let width,height,num
if(str == 'like'){
num = value
width = collItemSize.itemStyle.width
height = collItemSize.itemStyle.height
}else{
num = 3
width = (collItemDom.value.offsetWidth - 30) / 3 * collItemSize.scale[0]
height = (collItemDom.value.offsetWidth - 30) / 3 * collItemSize.scale[1]
}
let moveIndex = Math.round(x / (width + 10)) + Math.round(y / (height + 10)) * num;
moveIndex = elList.length - 1 - moveIndex
moveIndex = moveIndex < 0 ? 0 : moveIndex;
moveIndex = moveIndex > elList.length - 1 ? elList.length - 1 : moveIndex;
if(moveIndex != index){
if(str == 'like'){
posiitonData.value.likeSelectIndex = moveIndex;
}else{
posiitonData.value.generateSelectIndex = moveIndex;
}
let currentSort = item.sort;
for(let i = 0;i < elList.length;i++){
if(currentSort < moveIndex){
if(elList[i].sort > currentSort && elList[i].sort <= moveIndex){
elList[i].sort -= 1;
};
}else if(currentSort > moveIndex){
if(elList[i].sort < currentSort && elList[i].sort >= moveIndex){
elList[i].sort += 1;
};
}
};
elList[item.index].sort = moveIndex;
moveItem(str);
}
}
const setLikeDislLike = (str:string,value:any)=>{
posiitonData.value.likeSelectIndex = 0
nextTick(()=>{
if(str == 'like'){
let elArr = likeItemDom.value.children
posiitonData.value.likeElList.push({
el: elArr[0],
sort: value.sort - 1,
index: value.sort - 1,
userLikeSortId:value.userLikeSortId
});
let collItem = posiitonData.value.generateElList.filter((item:any)=>item.userLikeSortId == value.designItemId)[0]
posiitonData.value.generateElList = posiitonData.value.generateElList.filter((item:any)=>item.userLikeSortId != value.designItemId)
posiitonData.value.generateElList.forEach((item:any)=>{
if(item.sort > collItem.sort){
item.sort-=1
}
})
}else if(str == 'disLike'){
let elArr = collItemDom.value.querySelectorAll('.content_img_GetWidth')
posiitonData.value.likeElList = posiitonData.value.likeElList.filter((item:any)=>(item.sort + 1) != value.sort)
posiitonData.value.likeElList.forEach((item:any)=>{
if(item.sort > value.sort - 1){
item.sort-=1
}
})
posiitonData.value.generateElList.push({
el: elArr[elArr.length-1],
sort: posiitonData.value.generateElList.length,
index: posiitonData.value.generateElList.length,
userLikeSortId:value.designItemId
});
}
moveItem('like');
// moveItem('disLike');
})
}
//排列
const moveItem = (str:any)=>{
let elLikeList = posiitonData.value.likeElList
let generateElList = posiitonData.value.generateElList
let value = collItemSize.maxCollValue - collItemSize.collValue
let width,height
width = (collItemDom.value.offsetWidth - 30) / 3 * collItemSize.scale[0]
height = (collItemDom.value.offsetWidth - 30) / 3 * collItemSize.scale[1]
// let num = str == 'like'?value:3
for(let i = 0;i < elLikeList.length;i++){
elLikeList[i].el.style.left = (elLikeList.length - 1 - elLikeList[i].sort) % value * (collItemSize.itemStyle.width +10) + 'px';
elLikeList[i].el.style.top = parseInt((elLikeList.length - 1 - elLikeList[i].sort) / value) * (collItemSize.itemStyle.height +10) + 'px';
}
for(let i = 0;i < generateElList.length;i++){
generateElList[i].el.style.left = (generateElList.length - 1 - generateElList[i].sort) % 3 * (width +10) + 'px';
generateElList[i].el.style.top = parseInt((generateElList.length - 1 - generateElList[i].sort) / 3) * (height +10) + 'px';
}
}
return {
store,
@@ -573,19 +626,23 @@ export default defineComponent({
chooseIsDesign,
portfolio,
setSystemDesigner,
showDesignMark,
...toRefs(collItemSize),
designImg,
likeItemDom,
collItemDom,
domHidden,
recycleDomHidden,
getDesignTime,
setDeleteDesign,
cancelDeleteDesign,
...toRefs(moveData),
designMousedown,
sortDesignCollection,
getMousePosition,
mouseenter,
setLikeDislLike,
posiitonData,
moveItem
};
},
data() {
@@ -602,7 +659,6 @@ export default defineComponent({
spin: true,
}),
designProgress: 0,
showDesignMark: false,
startDesignType: "design", //设计类型 design 和 resdesign
disLikeLoading: false, //不喜欢防抖
likeLoading: false, //喜欢防抖
@@ -627,7 +683,6 @@ export default defineComponent({
beforeUnmount(){
clearTimeout(this.getDesignTime);
// alert(1)
this.sortDesignCollection()
sessionStorage.setItem('domHidden',JSON.stringify(this.domHidden))
sessionStorage.setItem('recycleDomHidden',JSON.stringify(this.recycleDomHidden))
sessionStorage.setItem('collValue',JSON.stringify(this.collValue))
@@ -694,8 +749,6 @@ export default defineComponent({
openGuide()
}
// console.log(this.store.state.UserHabit);
let noRefresh = this.$route.params.noRefresh; //判断是否主动刷新还是路由跳转过来的 true 路由跳转过来的
window.addEventListener('beforeunload', (event)=>{
this.store.commit("clearAllCollection");
@@ -788,7 +841,6 @@ export default defineComponent({
if(positionItem.value == sketchItem.categoryValue){
num ++
// console.log(num,this.allBoardData?.sketchboardFiles.length);
}
});
@@ -882,8 +934,15 @@ export default defineComponent({
objectSignList:data.requestIdList.join(),
requestId:rv
}
this.posiitonData.generateElList.forEach((item:any) => {
item.sort -= 1
})
this.moveItem('disLike')
this.getDesignResult(value,'newDesign')
this.startDesignType = "design";
this.posiitonData.likeSelectIndex = 0
this.posiitonData.likeElList = []
}
this.isShowMark = false;
})
@@ -894,6 +953,7 @@ export default defineComponent({
},
getDesignResult(data:any,str:any){
this.showDesignMark = true
this.recycleDomHidden = true
Https.axiosGet(Https.httpUrls.getDesignResult,{params:data})
.then(async (rv)=>{
if(rv.designCollectionItems){
@@ -910,21 +970,22 @@ export default defineComponent({
await new Promise((resolve, reject) => {
setTimeout(() => {
this.designCollectionList.unshift(item)
this.setSystemDesigner(0)
nextTick().then(()=>{
let elArr:any = this.$refs.collItemDom.querySelectorAll(".content_img_GetWidth");
this.posiitonData.generateElList.push({
el: elArr[0],
sort: elArr.length - 2,
index: elArr.length - 1,
userLikeSortId:item.designItemId
});
this.moveItem('disLike')
})
resolve('')
}, 200);
})
}
// this.designCollectionList.push(...result)
// // for (let index = 0; index < rv.designCollectionItems.length; index++) {
// }
}
if(rv.unfinishedList.length == 0){
this.showDesignMark = false
if(str == 'newDesign'){
if(rv.designCollectionItems){
@@ -941,6 +1002,11 @@ export default defineComponent({
}
nextTick().then(()=>{
driverObj__.moveNext();
this.posiitonData.generateElList.forEach((item:any) => {
item.sort += 1
});
this.moveItem('disLike')
})
}else{
this.getDesignTime = setTimeout(()=>{
@@ -975,6 +1041,10 @@ export default defineComponent({
objectSignList:data.requestIdList.join(),
requestId:rv
}
this.posiitonData.generateElList.forEach((item:any) => {
item.sort -= 1
})
this.moveItem('disLike')
this.getDesignResult(value,'resDesign')
this.startDesignType = "resDesign";
this.isShowMark = false
@@ -1148,12 +1218,21 @@ export default defineComponent({
Https.axiosPost(Https.httpUrls.designLike, data)
.then((rv: any) => {
if (rv) {
let value:any = {
...design,
id:rv.userLikeId,
groupDetailId:rv.userLikeId,
userLikeSortId:rv.userLikeSortId,
userLikeGroupId:rv.userGroupId,
sort:rv.sort,
}
this.store.commit("setUserGroupId", rv.userGroupId);
design.groupDetailId = rv.groupDetailId;
this.store.commit(
"addLikeDesignCollectionList",
design
value
);
this.setLikeDislLike('like',value)
this.store.commit("deleteDesignCollectionList", index);
if (this.startDesignType === "resDesign") {
this.getHistoryChoose(this.userGroupId, "like");
@@ -1189,6 +1268,13 @@ export default defineComponent({
"deleteLikeDesignCollectionList",
index
);
this.likeDesignCollectionList.forEach((item:any)=>{
if(item.sort > design.sort){
item.sort-=1
}
})
this.setLikeDislLike('disLike',design)
// if (!this.likeDesignCollectionList.length) {
// this.store.commit("deleteUserGroupId");
// }
@@ -1212,7 +1298,6 @@ export default defineComponent({
this.setPortfolio(rv.portfolioDTO)
this.store.commit("setUserGroupId", rv.userGroupId);
this.dealHistoryChooseData(rv, type);
this.setSystemDesigner(0)
this.isShowMark = false;
})
.catch((rv) => {
@@ -1284,9 +1369,8 @@ export default defineComponent({
);
this.isHaveReviewCollection = true;
if (type === "normal") {
let arr = data.userLikeDetails.sort((a:any, b:any) => b.sort - a.sort);
let likeDesignCollectionList = arr.map(
let likeDesignCollectionList = data.userLikeDetails.map(
(v: any) => {
let data = {
...v,
@@ -1388,6 +1472,7 @@ export default defineComponent({
collectionList: any,
type: string
) {
if(this.isMove)return
let designDetail: any = this.$refs.designDetail;
design.designOutfitId = design.designPythonOutfitId?design.designPythonOutfitId:design.designOutfitId
let data = {
@@ -1810,17 +1895,22 @@ export default defineComponent({
// padding: 0 2.8rem 0 0.9rem;
width: 100%;
height: 100%;
align-content: flex-start;
// align-content: flex-start;
overflow-x: hidden;
position: relative;
&::-webkit-scrollbar {
display: none;
}
}
.content_img_block {
// width: 20.1rem;
width: 24rem;
height: 37rem;
// height: 29.5rem;
// width: 24rem;
// height: 37rem;
width: calc(33.33% - 30px);
height: calc((33.33% - 30px) * 1.54);
box-sizing: border-box;
margin: 5px;
// min-height: 271px;
max-height: 80%;
// max-height: 80%;
display: inline-block;
position: relative;
@@ -1829,6 +1919,8 @@ export default defineComponent({
display: flex;
align-items: center;
justify-content: center;
position: absolute;
transition: top,left .3s;
&:hover .icon_like,&:hover .icon_delete,&:hover .Dustbin {
display: block;
}