fix

.env.dev

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

src/component/Account/account.vue

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

src/component/Administrator/Transaction/TransactionTable.vue

@@ -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>

src/router/index.ts

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

src/store/uploadFile/uploadFile.ts

@@ -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) => {

src/store/userHabit/userHabit.ts

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

src/tool/https.js

@@ -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`,//拒绝审批

src/views/Administrator.vue

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

src/views/HomeView/HomeView.vue

@@ -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;
 									}