fix

.env.dev

@@ -6,6 +6,6 @@ NODE_ENV = 'development'
 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.7:5567'
+VUE_APP_BASE_URL = 'http://192.168.1.7:5567'
 # 海波
 # VUE_APP_BASE_URL = 'http://192.168.1.9:5567'

src/assets/style/style.css

@@ -1300,9 +1300,9 @@ li {
 }
 .homeMain_heade sup.ant-scroll-number,
 .account_message sup.ant-scroll-number {
-  height: 2rem;
+  height: 1.2rem;
   min-height: 5px;
-  width: 2rem;
+  width: 1.2rem;
   min-width: 5px;
   padding: 0;
   font-size: 1.1rem;
@@ -1322,12 +1322,13 @@ li {
   height: 100%;
   font-size: 1.2rem;
   display: flex;
+  transform: scale(0.7);
   align-items: center;
   justify-content: center;
 }
 .homeMain_heade p.ant-scroll-number-only-unit,
 .account_message p.ant-scroll-number-only-unit {
-  line-height: 2rem;
+  line-height: 1.2rem;
   height: 100%;
 }
 .modal_title_text {

src/assets/style/style.less

@@ -1437,9 +1437,9 @@ input:focus{
 		height: auto;
 	}
 	sup.ant-scroll-number{
-		height: 2rem;
+		height: 1.2rem;
 		min-height: 5px;
-		width: 2rem;
+		width: 1.2rem;
 		min-width: 5px;
 		padding: 0;
 		font-size: 1.1rem;
@@ -1457,12 +1457,13 @@ input:focus{
 			height: 100%;
 			font-size: 1.2rem;
 			display: flex;
+			transform: scale(.7);
 			align-items: center;
 			justify-content: center;
 		}
 	}
 	p.ant-scroll-number-only-unit{
-		line-height: 2rem;
+		line-height: 1.2rem;
 		height: 100%;
 	}
 }

src/component/Account/account.vue

@@ -58,7 +58,7 @@ export default defineComponent({
 					route:'/home/account/accountMessage',
 					icon:'fi-rr-envelope'
 				},{
-					name:'粉丝&关注',
+					name:'关注&粉丝',
 					route:'/home/account/accountFollowFans',
 					icon:'fi-rr-envelope'
 				},
@@ -147,3 +147,95 @@ export default defineComponent({
 	
 }
 </style>
+<style lang="less">
+.account_generalMessage_title{
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 2rem 5rem;
+	border-bottom: 1px solid #e9eaec;
+	box-shadow: 0 0px 10px 1px rgba(0, 0, 0, 0.12);
+	border: 1px solid #e9eaec;
+	border-radius: 5px;
+	position: sticky;
+	top: 0;
+	background: #fff;
+	margin-right: 5rem;
+	margin-left: 5rem;
+	.account_generalMessage_title_setting{
+		cursor: pointer;
+		margin-left: auto
+	}
+	.account_generalMessage_title_seach{
+		display: flex;
+		input{
+			padding-left: 1.5rem;
+			font-size: 1.4rem;
+		}
+		.search_icon_block{
+			background: #39215b;
+			color: #fff;
+			padding: .5rem 2rem;
+			font-size: 1.8rem;
+			cursor: pointer;
+		}
+	}
+}
+.account_generalMessage_center{
+	box-shadow: 0 0px 10px 1px rgba(0, 0, 0, 0.12);
+    border: 1px solid #e9eaec;
+    border-radius: 5px;
+    padding: 2rem 0;
+	margin-right: 5rem;
+	margin-left: 5rem;
+	.account_generalMessage_item{
+		margin-right: 0;
+		margin-left: 0;
+		display: flex;
+		border-radius: 0px;
+		justify-content: space-between;
+		align-items: center;
+		padding: 2rem 5rem;
+		border: none;
+		border-bottom: 1px solid #e9eaec;
+		box-shadow: none;
+	}
+}
+.account_generalMessage_item{
+	box-shadow: 0 0px 10px 1px rgba(0, 0, 0, 0.12);
+	border: 1px solid #e9eaec;
+	border-radius: 5px;
+	padding: 5rem 5rem;
+	margin-right: 5rem;
+	margin-left: 5rem;
+	position: relative;
+	cursor: pointer;
+	.ant-badge{
+		position: absolute;
+		transform: translate(-100%, 100%);
+		top: 0;
+		right: 0;
+	}
+	.account_generalMessage_item_link{
+		color: #39215b;
+		cursor: pointer;
+		font-weight: 600;
+	}
+	.account_generalMessage_item_link:hover{
+		text-decoration: underline;
+	}
+}
+.account_generalMessage_item:hover{
+	background: #efefef;
+}
+.page_loading_box{
+	text-align: center;
+	height: 50px;
+	.page_loading{
+		display: block;
+		width: 50px;
+		height: 50px;
+		margin: 0 auto;
+	}
+}
+</style>

src/component/Account/accountEdit.vue

@@ -4,11 +4,9 @@
 			<div class="upload_item">
 				<div class="upload_file_item">
 					<a-upload
-						:action="uploadUrl + '/api/element/upload'"
 						:capture="null"
 						list-type="picture-card"
 						:before-upload="beforeUpload"
-						:headers="{Authorization:token}"
 						v-model:file-list="fileList"
 						:customRequest="function(){}"
 						:maxCount="1"
@@ -18,29 +16,28 @@
 						<div
 							class="upload_tip_block"
 						>
-							<i class="fi fi-br-upload"></i>
+							<!-- <i class="fi fi-br-upload"></i> -->
-							<!-- <img class="upload_img_icon" src="@/assets/images/homePage/add_file.png"> -->
+							<img :src="uploadUrl" alt="">
 						</div>
 					</a-upload>
 				</div>
 			</div>
-			<img src="../../assets/images/homePage/alipay.svg" alt="">
 		</div>
 		<div class="accountEdit_page_body">
 			<div class="accountEdit_page_body_item">
 				<div class="accountEdit_page_body_item_name">用户名:</div>
 				<div class="accountEdit_page_body_item_inut">
-					<input type="text" disabled value="123">
+					<input type="text" disabled :value="cookieUserInfo.userName">
 				</div>
 			</div>
 			<div class="accountEdit_page_body_item">
 				<div class="accountEdit_page_body_item_name">邮箱:</div>
 				<div class="accountEdit_page_body_item_inut">
-					<input type="text" disabled value="123">
+					<input type="text" disabled :value="cookieUserInfo.email">
 				</div>
 			</div>
 			<div class="accountEdit_page_body_item">
-				<div class="started_btn">
+				<div class="started_btn" @click="setSubmit">
 					Submit
 				</div>
 			</div>
@@ -49,7 +46,7 @@
     </div>
 </template>
 <script lang="ts">
-import { defineComponent,computed,ref,reactive,nextTick,toRefs,createVNode} from 'vue'
+import { defineComponent,computed,ref,reactive,nextTick,toRefs,createVNode, onMounted} from 'vue'
 import { Https } from "@/tool/https";
 import { Modal,message } from 'ant-design-vue';
 import { useStore } from "vuex";
@@ -62,19 +59,24 @@ export default defineComponent({
     },
     setup() {
         const store = useStore();
-		let accountHomeData = reactive({
+		let userInfo:any= computed(()=>{
+			return store.state.UserHabit.userInfo
+		})
+		let cookieUserInfo = JSON.parse(getCookie('userInfo') as any)
+		let accountHomeData:any = reactive({
             cropperFileData:{name:'',uid:''}, //裁剪的原始文件数据
-            uploadUrl:'',
+            uploadUrl:userInfo.value?.avatar,
+			uploadFile:undefined,
 			token:'',
 			fileList:[]
 		})
 		let Cropper = ref()
 		// provide('exhibitionList',exhibitionList)
 		let handleCropperSuccess = (event:any)=>{
-			console.log(event);
-			
             let {file, fileData,base64} =event
-			console.log(file,fileData);
+			accountHomeData.fileList[0].status = 'done'
+			accountHomeData.uploadUrl = base64
+			accountHomeData.uploadFile = file
             Cropper.value.closeCropper()
 		}
 		let beforeUpload=(file:any,fileList:any)=>{
@@ -126,13 +128,31 @@ export default defineComponent({
             //     this.fileList.splice(index, 1)
             // }
         }
+		let setSubmit = ()=>{
+			if(!accountHomeData.uploadFile)return
+			let param = new FormData(); 
+			param.append('file',accountHomeData.uploadFile);
+			let config:any = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*'  }}
+			Https.axiosPost(Https.httpUrls.uploadAvatar,param,config)
+			.then((rv)=>{
+				let data = {
+					avatar : rv
+				}
+				store.commit("setUserInfo", data)
+				message.success('提交成功')
+			})
+
+		}
         return{
            ...toRefs(accountHomeData),
+		   userInfo,
+		   cookieUserInfo,
 		   Cropper,
 		   handleCropperSuccess,
 		   beforeUpload,
 		   fileUploadChange,
 		   deletUploadFile,
+		   setSubmit,
         }
     },
     data(){
@@ -156,15 +176,17 @@ export default defineComponent({
 			width: 15rem;
 			height: 15rem;
 			border-radius: 50%;
+			background: #fff;
 		}
 		.accountEdit_page_head_upload{
 			width: auto;
 		}
 		.upload_item{
-			position: absolute;
+			:deep(.ant-upload-list-picture-card-container){
-			left: 0;
+				display: none !important;
-			transform: translateX(-100%);
+			}
 		}
+		
 		margin-bottom: 5rem;
 	}
 	.accountEdit_page_body{

src/component/Account/accountFollowFans.vue

@@ -1,44 +1,110 @@
 <template>
-    <div class="account_message">
+    <div class="account_followFans">
-		<div class="account_message_title modal_title_text">
+		<div class="account_followFans_title modal_title_text">
 			<div class="">
-				消息中心
+				互动
 			</div>
-			<div class="account_message_title_setting">设置</div>
+			<div class="account_followFans_title_setting">设置</div>
 		</div>
-		<a-tabs class="account_message_body" v-model:activeKey="activeKey">
+		<a-tabs class="account_followFans_body" v-model:activeKey="activeKey" @change="changeTabs">
-			<a-tab-pane key="1" tab="系统消息">Content of Tab Pane 1</a-tab-pane>
+			<a-tab-pane v-for="item in messageList" :key="item.key">
-			<a-tab-pane key="2" tab="私信" force-render>Content of Tab Pane 2</a-tab-pane>
+				<follow v-if="item.key == 'follow'" :ref="item.key"></follow>
-			<a-tab-pane key="3" tab="评论">Content of Tab Pane 3</a-tab-pane>
+				<fans v-if="item.key == 'fans'" :ref="item.key"></fans>
-			<a-tab-pane key="4" tab="点赞">Content of Tab Pane 3</a-tab-pane>
+				<template #tab>
-			<a-tab-pane key="5" tab="客服">Content of Tab Pane 3</a-tab-pane>
+					<a-badge :count="messageSystem.messageType[item.key]" >
+					<span>{{item.title}}</span>
+					</a-badge>
+				</template>
+			</a-tab-pane>
+			
+<!-- 			
+			<a-tab-pane key="1" tab="系统消息">
+				<system ref="system"></system>
+			</a-tab-pane>
+		
+			<a-tab-pane key="3" tab="评论">
+				<comment></comment>
+			</a-tab-pane>
+			<a-tab-pane key="4" tab="点赞">
+				<likeMessage></likeMessage>
+			</a-tab-pane>
+			<a-tab-pane key="6" tab="新增粉丝">
+				<newFollow ref="newFollow"></newFollow>
+			</a-tab-pane>
+			<a-tab-pane key="5" tab="客服">Content of Tab Pane 3</a-tab-pane> -->
 		</a-tabs>
     </div>
 </template>
 <script lang="ts">
-import { defineComponent,computed,ref,reactive,nextTick,toRefs,createVNode} from 'vue'
+import { defineComponent,computed,ref,reactive,nextTick,toRefs,createVNode, onMounted} from 'vue'
 import { Https } from "@/tool/https";
 import { useRouter,useRoute } from 'vue-router'
 import { Modal,message } from 'ant-design-vue';
 import { useStore } from "vuex";
 import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
+import follow from '@/component/Account/followFans/follow.vue'
+import fans from '@/component/Account/followFans/fans.vue'
 import { useI18n } from 'vue-i18n'
 export default defineComponent({
     components:{
+		follow,
+		fans,
     },
     setup() {
 		const router = useRouter()
         const store = useStore();
 		let accountMessage = reactive({
-			activeKey: ref('1'),
+			messageList:[
+				{
+					title:'关注的人',
+					key:'follow',
+				},
+				{
+					title:'粉丝',
+					key:'fans',
+				},
+				
+			],
+			activeKey: '',
 		})
-		// provide('exhibitionList',exhibitionList)
+		let domRefs:any = reactive({
-		let setUserData = ()=>{
+			follow:ref(null),
-			router.push({path:'/home/account/accountEdit'})
+			fans:ref(null),
+		})
+		let messageSystem = computed(()=>{
+			return store.state.UserHabit.messageSystem
+		})
+		let changeTabs = (key:any)=>{
 		}
+		let setReadStatus = (value:any)=>{
+			return new Promise((resolve,reject)=>{
+				if(value.isRead == 1)return reject('')
+				let data = {
+					type:accountMessage.activeKey,
+					notificationIdList:value.id
+				}
+				Https.axiosPost(Https.httpUrls.setReadStatus,'',{params:data}).then((rv)=>{
+					if(rv){
+						resolve(rv)
+						// store.commit('setMessageSystem',rv)
+					}
+				}).catch((err)=>{
+					reject(err)
+				})
+			})
+			
+		}
+		
+		onMounted(()=>{
+			let key = accountMessage.messageList[0].key
+			accountMessage.activeKey = key
+		})
         return{
            ...toRefs(accountMessage),
-		   setUserData,
+           ...toRefs(domRefs),
+		   messageSystem,
+		   setReadStatus,
+		   changeTabs,
         }
     },
     data(){
@@ -49,22 +115,29 @@ export default defineComponent({
 })
 </script>
 <style lang="less" scoped>
-.account_message{
+.account_followFans{
 	width: 100%;
-	.account_message_title{
+	.account_followFans_title{
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
 		padding: 2rem 5rem;
 		border-bottom: 1px solid #e9eaec;
-		.account_message_title_setting{
+		.account_followFans_title_setting{
 			cursor: pointer;
 		}
 	}
-	.account_message_body{
+	.account_followFans_body{
-		padding: 0rem 5rem;
+		padding-bottom: 3rem;
 		:deep(.ant-tabs-nav){
+			padding: 0rem 5rem;
 			.ant-tabs-nav-wrap{
+				.ant-tabs-tab-btn{
+					font-size: 2.4rem;
+				}
+				.ant-tabs-tab-btn:active{
+					color: #39215b;
+				}
 				.ant-tabs-tab-active{
 					.ant-tabs-tab-btn{
 						color: #39215b;
@@ -79,6 +152,11 @@ export default defineComponent({
 				background: #39215b;
 			}
 		}
+		:deep(.ant-tabs-content){
+			height: 80rem;
+			// min-height: 80rem;
+			overflow-y: auto;
+		}
 	}
 }
-</style>
+</style>

src/component/Account/accountHome.vue

@@ -4,19 +4,19 @@
 			<div class="content_item content_item_user">
 				<div class="content_item_user_left">
 					<div class="content_item_user_left_detail">
-						<img src="../../assets/images/homePage/alipay.svg" alt="">
+						<img :src="userInfo?.avatar" alt="">
 					</div>
 					<div class="content_item_user_left_detail">
 						<div class="modal_title_text">
-							<div>用户名</div>
+							<div>{{ cookieUserInfo.userName }}</div>
-							<div class="modal_title_text_assistant">邮箱: 2222</div>
+							<div class="modal_title_text_assistant"><span>邮箱: </span>{{ cookieUserInfo?.email }}</div>
 						</div>
 						<div class="content_item_user_left_detail_bottom">
 							<div>
-								<span>关注：</span>22
+								<span>关注：</span>{{ userInfo?.followeeCount }}
 							</div>
 							<div>
-								<span>粉丝：</span>22
+								<span>粉丝：</span>{{ userInfo?.followerCount }}
 							</div>
 						</div>
 					</div>
@@ -74,6 +74,14 @@ export default defineComponent({
     setup() {
 		const router = useRouter()
         const store = useStore();
+		let userInfo:any= computed(()=>{
+			return store.state.UserHabit.userInfo
+		})
+		let cookieUserInfo = ref(null)
+		if(getCookie('userInfo')){
+			let userInfo:any = getCookie('userInfo')
+			cookieUserInfo.value = JSON.parse(userInfo)
+		}
 		let accountHomeData = reactive({
 		})
 		// provide('exhibitionList',exhibitionList)
@@ -81,6 +89,8 @@ export default defineComponent({
 			router.push({path:'/home/account/accountEdit'})
 		}
         return{
+			userInfo,
+			cookieUserInfo,
            ...toRefs(accountHomeData),
 		   setUserData,
         }

src/component/Account/accountMessage.vue

@@ -8,11 +8,11 @@
 		</div>
 		<a-tabs class="account_message_body" v-model:activeKey="activeKey" @change="changeTabs">
 			<a-tab-pane v-for="item in messageList" :key="item.key">
-				<system v-if="item.key == 'system'" :ref="item.key" @setReadStatus="setReadStatus" @setAllmessage="setAllmessage"></system>
+				<system v-if="item.key == 'system'" :ref="item.key" :setReadStatus="setReadStatus" :setAllmessage="setAllmessage" :getHistory="getHistory"></system>
-				<privateChat v-if="item.key == 'privateChat'" :ref="item.key" @setReadStatus="setReadStatus" @setAllmessage="setAllmessage"></privateChat>
+				<privateChat v-if="item.key == 'privateChat'" :ref="item.key" :setReadStatus="setReadStatus" :setAllmessage="setAllmessage" :getHistory="getHistory"></privateChat>
-				<comment v-if="item.key == 'comment'" :ref="item.key" @setReadStatus="setReadStatus" @setAllmessage="setAllmessage"></comment>
+				<comment v-if="item.key == 'comment'" :ref="item.key" :setReadStatus="setReadStatus" :setAllmessage="setAllmessage" :getHistory="getHistory"></comment>
-				<likeMessage v-if="item.key == 'like'" :ref="item.key" @setReadStatus="setReadStatus" @setAllmessage="setAllmessage"></likeMessage>
+				<likeMessage v-if="item.key == 'like'" :ref="item.key" :setReadStatus="setReadStatus" :setAllmessage="setAllmessage" :getHistory="getHistory"></likeMessage>
-				<newFollow v-if="item.key == 'follow'" :ref="item.key" @setReadStatus="setReadStatus" @setAllmessage="setAllmessage"></newFollow>
+				<newFollow v-if="item.key == 'follow'" :ref="item.key" :setReadStatus="setReadStatus" :setAllmessage="setAllmessage" :getHistory="getHistory"></newFollow>
 				<!-- <newFollow v-if="item.key == 'service'" :ref="item.key"></newFollow> -->
 				<template #tab>
 					<a-badge :count="messageSystem.messageType[item.key]" >
@@ -82,10 +82,11 @@ export default defineComponent({
 				},{
 					title:'新增粉丝',
 					key:'follow',
-				},{
-					title:'客服',
-					key:'service',
 				},
+				// {
+				// 	title:'客服',
+				// 	key:'service',
+				// },
 			],
 			activeKey: '',
 		})
@@ -104,57 +105,61 @@ export default defineComponent({
 			router.push({path:'/home/account/accountEdit'})
 		}
 		let changeTabs = (key:any)=>{
-			let data = {
+			// if(accountMessage.activeKey == 'service')return
-				page:1,
-				size:10,
-				type:key
-			}
-			getHistory(data)
 		}
 		let setReadStatus = (value:any)=>{
-			if(value.isRead == 1)return
+			return new Promise((resolve,reject)=>{
-			let data = {
+				if(value.isRead == 1)return reject('')
-				type:accountMessage.activeKey,
+				let data = {
-				notificationIdList:value.id
+					type:accountMessage.activeKey,
-			}
+					notificationIdList:value.id
-			Https.axiosPost(Https.httpUrls.setReadStatus,'',{params:data}).then((rv)=>{
-				if(rv){
-					console.log(rv);
-					
-					// store.commit('setMessageSystem',rv)
 				}
+				Https.axiosPost(Https.httpUrls.setReadStatus,'',{params:data}).then((rv)=>{
+					if(rv){
+						resolve(rv)
+						// store.commit('setMessageSystem',rv)
+					}
+				}).catch((err)=>{
+					reject(err)
+				})
 			})
+			
 		}
 		let setAllmessage = ()=>{
-			let data = {
+			return new Promise((resolve,reject)=>{
-				type:accountMessage.activeKey
+				let data = {
-			}
+					type:accountMessage.activeKey
-			Https.axiosPost(Https.httpUrls.oneClickRead,'',{params:data}).then((rv)=>{
+				}
-
+				Https.axiosPost(Https.httpUrls.oneClickRead,'',{params:data}).then((rv)=>{
+					resolve(rv)
+				}).catch((err)=>{
+					reject(err
+					)
+				})
 			})
 		}
 		let getHistory = (data:any)=>{
-			nextTick(()=>{
+			return new Promise((resolve,reject)=>{
-				let dom = domRefs[data.type][0]
+				data.type = accountMessage.activeKey
-				if(dom.dataList && dom.dataList.length > 0)return
+				let url = Https.httpUrls.getHistoryNotification
-				Https.axiosPost(Https.httpUrls.getHistoryNotification,data).then((rv)=>{
+				if(data.type == 'follow'){
+					url = Https.httpUrls.porfolioGetFollowerList
+				}
+				Https.axiosPost(url,data).then((rv)=>{
 					if(rv){
-						console.log(domRefs[data.type][0],rv);
+						// domRefs[data.type][0].setmessageList(rv,data)
-						domRefs[data.type][0].setmessageList(rv)
+						console.log(rv);
+						
+						resolve(rv)
 					}
+				}).catch((err)=>{
+					reject(err)
 				})
 			})
-
 		}
 		onMounted(()=>{
 			let key = accountMessage.messageList[0].key
 			accountMessage.activeKey = key
-			let data = {
-				page:1,
-				size:10,
-				type:key
-			}
-			getHistory(data)
 		})
         return{
            ...toRefs(accountMessage),
@@ -164,6 +169,7 @@ export default defineComponent({
 		   setReadStatus,
 		   changeTabs,
 		   setAllmessage,
+		   getHistory,
         }
     },
     data(){
@@ -219,70 +225,4 @@ export default defineComponent({
 	}
 }
 </style>
-<style lang="less">
+
-.account_generalMessage_title{
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	padding: 2rem 5rem;
-	border-bottom: 1px solid #e9eaec;
-	box-shadow: 0 0px 10px 1px rgba(0, 0, 0, 0.12);
-	border: 1px solid #e9eaec;
-	border-radius: 5px;
-	position: sticky;
-	top: 0;
-	background: #fff;
-	margin-right: 5rem;
-	margin-left: 5rem;
-	.account_generalMessage_title_setting{
-		cursor: pointer;
-	}
-}
-.account_generalMessage_center{
-	box-shadow: 0 0px 10px 1px rgba(0, 0, 0, 0.12);
-    border: 1px solid #e9eaec;
-    border-radius: 5px;
-    padding: 2rem 0;
-	margin-right: 5rem;
-	margin-left: 5rem;
-	.account_generalMessage_item{
-		margin-right: 0;
-		margin-left: 0;
-		display: flex;
-		border-radius: 0px;
-		justify-content: space-between;
-		align-items: center;
-		padding: 2rem 5rem;
-		border: none;
-		border-bottom: 1px solid #e9eaec;
-		box-shadow: none;
-	}
-}
-.account_generalMessage_item{
-	box-shadow: 0 0px 10px 1px rgba(0, 0, 0, 0.12);
-	border: 1px solid #e9eaec;
-	border-radius: 5px;
-	padding: 5rem 5rem;
-	margin-right: 5rem;
-	margin-left: 5rem;
-	position: relative;
-	cursor: pointer;
-	.ant-badge{
-		position: absolute;
-		transform: translate(-100%, 100%);
-		top: 0;
-		right: 0;
-	}
-	.account_generalMessage_item_link{
-		color: #39215b;
-		cursor: pointer;
-		font-weight: 600;
-	}
-	.account_generalMessage_item_link:hover{
-		text-decoration: underline;
-	}
-}
-.account_generalMessage_item:hover{
-	background: #efefef;
-}
-</style>

src/component/Account/followFans/fans.vue

@@ -0,0 +1,156 @@
+<template>
+    <div class="account_fans">
+		<div class="account_generalMessage_title modal_title_text">
+			<span class="account_generalMessage_title_seach">
+				<input type="text" @keydown.enter="searchFollowFansList" class="search_input" v-model="getListData.seachContent">
+				<div class="search_icon_block" @click="searchFollowFansList">
+					<i class="icon iconfont icon-sousuo"></i>
+				</div>
+			</span>
+		</div>
+		<div class="account_generalMessage_center modal_title_text">
+			<div class="account_generalMessage_item" v-for="item in dataList" :key="item.id">
+				<div class="account_generalMessage_item_right">
+					<div class="account_generalMessage_item_right_img">
+						<img :src="item.avatar" alt="">
+					</div>
+					<div class="account_generalMessage_item_right_title">
+						<div class="">{{ item.senderUserName }}</div>
+						<div class="modal_title_text_intro">{{ item.createTime }}</div>
+					</div>
+				</div>
+				<div class="account_generalMessage_item_left">
+					<div v-if="item?.isFollow == 0" @click.stop="setFollow(item)" >{{$t('newScaleImage.Follow')}}</div>
+					<div v-else @click.stop="setFollow(item)" >{{$t('newScaleImage.Unfollow')}}</div>
+				</div>
+			</div>
+			<div class="account_generalMessage_item" style="justify-content: center;" v-if="dataList.length == 0 && getListData.isNoData">
+				没有任何信息~
+			</div>
+			<div class="page_loading_box" v-show="!getListData.isNoData">
+				<span class="page_loading" ref="loadingDom" v-show="!getListData.isShowMark"></span>
+				<span v-show="getListData.isShowMark">
+					<a-spin size="large" />
+				</span>
+			</div>
+		</div>
+    </div>
+</template>
+<script lang="ts">
+import { defineComponent,computed,ref,reactive,nextTick,toRefs,createVNode, onMounted} from 'vue'
+import { Https } from "@/tool/https";
+import { useRouter,useRoute } from 'vue-router'
+import { Modal,message } from 'ant-design-vue';
+import { useStore } from "vuex";
+import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
+import { useI18n } from 'vue-i18n'
+export default defineComponent({
+    components:{
+    },
+	// emits:['setReadStatus','setAllmessage'],
+    props:[''],
+    setup(prop,{emit}) {
+		const router = useRouter()
+        const store = useStore();
+		let accountFollofFans:any = reactive({
+			getListData: {
+				page: 1,
+				size: 10,
+				seachContent:'',
+				isNoData: false,
+				isShowMark: false,
+			},
+			dataList:ref([
+				
+			])
+		})
+		let loadingDom:any = ref(null)
+		let searchFollowFansList = ()=>{
+			accountFollofFans.getListData.page = 1
+			getFollowFansList()
+		}
+		let getFollowFansList = ()=>{
+			accountFollofFans.getListData.isShowMark = true
+			let data = accountFollofFans.getListData
+			Https.axiosPost(Https.httpUrls.porfolioGetFollowerList,data).then((rv)=>{
+				if(rv){
+					accountFollofFans.getListData.isShowMark = false
+					if(rv.length == 0) {
+						accountFollofFans.getListData.isNoData = true
+						return
+					}
+					accountFollofFans.dataList = rv
+				}
+			}).catch(() => {
+				accountFollofFans.getListData.isShowMark = false
+				accountFollofFans.getListData.isNoData = true
+			})
+		}
+		
+		onMounted (()=>{
+			accountFollofFans.getListData.isNoData = false
+			accountFollofFans.getListData.page = 0
+			new IntersectionObserver(
+				(entries, observer) => {
+					// 如果不是相交，则直接返回
+					// console.log(entries[0]);
+					if (!entries[0].intersectionRatio) return;
+					accountFollofFans.getListData.page+=1
+					getFollowFansList()
+				},
+				// { root:worksPage }
+			).observe(loadingDom.value);
+		})
+        return{
+           ...toRefs(accountFollofFans),
+		   searchFollowFansList,
+		   getFollowFansList,
+		   loadingDom,
+        }
+    },
+    data(){
+        return{
+            
+        }
+    },
+})
+</script>
+<style lang="less" scoped>
+.account_fans{
+	width: 100%;
+	.account_generalMessage_center{
+		.account_generalMessage_item{
+			.account_generalMessage_item_right{
+				display: flex;
+				align-items: center;
+				.account_generalMessage_item_right_img{
+					width: 8rem;
+					height: 8rem;
+					margin-right: 2rem;
+					cursor: pointer;
+					img{
+						width: 100%;
+						height: 100%;
+						border-radius: 50%;
+					}
+				}
+			}
+			.account_generalMessage_item_left{
+				div{
+					padding: .5rem 2rem;
+					border-radius: 4rem;
+					border: 2px solid #e9eaec;
+					cursor: pointer;
+				}
+			}
+		}
+		.account_generalMessage_item:hover{
+			background: #ffffff;
+		}
+		.account_generalMessage_item:last-child{
+			margin-bottom: 0;
+			border-bottom: none;
+		}
+	}
+}
+</style>

src/component/Account/followFans/follow.vue

@@ -0,0 +1,157 @@
+<template>
+    <div class="account_follow">
+		<div class="account_generalMessage_title modal_title_text">
+			<span class="account_generalMessage_title_seach">
+				<input type="text" @keydown.enter="searchFollowFansList" class="search_input" v-model="getListData.seachContent">
+				<div class="search_icon_block" @click="searchFollowFansList">
+					<i class="icon iconfont icon-sousuo"></i>
+				</div>
+			</span>
+		</div>
+		<div class="account_generalMessage_center modal_title_text">
+			<div class="account_generalMessage_item" v-for="item in dataList" :key="item.id">
+				<a-badge :dot="item.isRead == 0"></a-badge>
+				<div class="account_generalMessage_item_right">
+					<div class="account_generalMessage_item_right_img">
+						<img :src="item.senderUserAvatar" alt="">
+					</div>
+					<div class="account_generalMessage_item_right_title">
+						<div class="">{{ item.senderUserName }}</div>
+						<div class="modal_title_text_intro">{{ item.createTime }} 关注了你</div>
+					</div>
+				</div>
+				<div class="account_generalMessage_item_left">
+					<div v-if="item?.isFollow == 0" @click.stop="setFollow(item)" >{{$t('newScaleImage.Follow')}}</div>
+					<div v-else @click.stop="setFollow(item)" >{{$t('newScaleImage.Unfollow')}}</div>
+				</div>
+			</div>
+			<div class="account_generalMessage_item" style="justify-content: center;" v-if="dataList.length == 0 && getListData.isNoData">
+				没有任何信息~
+			</div>
+			<div class="page_loading_box" v-show="!getListData.isNoData">
+				<span class="page_loading" ref="loadingDom" v-show="!getListData.isShowMark"></span>
+				<span v-show="getListData.isShowMark">
+					<a-spin size="large" />
+				</span>
+			</div>
+		</div>
+    </div>
+</template>
+<script lang="ts">
+import { defineComponent,computed,ref,reactive,nextTick,toRefs,createVNode, onMounted} from 'vue'
+import { Https } from "@/tool/https";
+import { useRouter,useRoute } from 'vue-router'
+import { Modal,message } from 'ant-design-vue';
+import { useStore } from "vuex";
+import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
+import { useI18n } from 'vue-i18n'
+export default defineComponent({
+    components:{
+    },
+	// emits:['setReadStatus','setAllmessage'],
+    props:[''],
+    setup(prop,{emit}) {
+		const router = useRouter()
+        const store = useStore();
+		let accountFollofFans = reactive({
+			getListData: {
+				page: 1,
+				size: 10,
+				seachContent:'',
+				isNoData: false,
+				isShowMark: false,
+			},
+			dataList:ref([
+				
+			])
+		})
+		let loadingDom:any = ref(null)
+		let searchFollowFansList = ()=>{
+			accountFollofFans.getListData.page = 1
+			getFollowFansList()
+		}
+		let getFollowFansList = ()=>{
+			accountFollofFans.getListData.isShowMark = true
+			let data = accountFollofFans.getListData
+			Https.axiosPost(Https.httpUrls.porfolioGetFolloweeList,data).then((rv)=>{
+				if(rv){
+					accountFollofFans.getListData.isShowMark = false
+					if(rv.length == 0) {
+						accountFollofFans.getListData.isNoData = true
+						return
+					}
+					accountFollofFans.dataList = rv
+				}
+			}).catch(() => {
+				accountFollofFans.getListData.isShowMark = false
+				accountFollofFans.getListData.isNoData = true
+			})
+		}
+		
+		onMounted (()=>{
+			accountFollofFans.getListData.isNoData = false
+			accountFollofFans.getListData.page = 0
+			new IntersectionObserver(
+				(entries, observer) => {
+					// 如果不是相交，则直接返回
+					// console.log(entries[0]);
+					if (!entries[0].intersectionRatio) return;
+					accountFollofFans.getListData.page+=1
+					getFollowFansList()
+				},
+				// { root:worksPage }
+			).observe(loadingDom.value);
+		})
+        return{
+           ...toRefs(accountFollofFans),
+		   searchFollowFansList,
+		   getFollowFansList,
+		   loadingDom,
+        }
+    },
+    data(){
+        return{
+            
+        }
+    },
+})
+</script>
+<style lang="less" scoped>
+.account_follow{
+	width: 100%;
+	.account_generalMessage_center{
+		.account_generalMessage_item{
+			.account_generalMessage_item_right{
+				display: flex;
+				align-items: center;
+				.account_generalMessage_item_right_img{
+					width: 8rem;
+					height: 8rem;
+					margin-right: 2rem;
+					cursor: pointer;
+					img{
+						width: 100%;
+						height: 100%;
+						border-radius: 50%;
+					}
+				}
+			}
+			.account_generalMessage_item_left{
+				div{
+					padding: .5rem 2rem;
+					border-radius: 4rem;
+					border: 2px solid #e9eaec;
+					cursor: pointer;
+				}
+			}
+		}
+		.account_generalMessage_item:hover{
+			background: #ffffff;
+		}
+		.account_generalMessage_item:last-child{
+			margin-bottom: 0;
+			border-bottom: none;
+		}
+	}
+}
+</style>

src/component/Account/message/comment.vue

@@ -1,46 +1,38 @@
 <template>
     <div class="account_comment">
 		<div class="account_generalMessage_title modal_title_text">
-			<span>收到的评论</span>
+			<!-- <span>收到的评论</span> -->
 			<div class="account_generalMessage_title_setting" @click="allRead">全部已读</div>
 		</div>
 		<div class="account_generalMessage_center modal_title_text">
 
-			<div class="account_generalMessage_item">
+			<div class="account_generalMessage_item" v-for="item in dataList" @click="setRead(item)">
+				<a-badge :dot="item.isRead == 0"></a-badge>
 				<div class="account_generalMessage_item_right">
-					<div class="account_generalMessage_item_right_img" @click="openOtherUsers">
+					<div class="account_generalMessage_item_right_img" @click.stop="openOtherUsers(item)">
-						<img src="https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png" alt="">
+						<img :src="item.avatar" alt="">
 					</div>
 					<div class="account_generalMessage_item_right_title">
-						<div class="account_generalMessage_item_right_title_name">名字 <span>回复你的作品</span></div>
+						<div class="account_generalMessage_item_right_title_name">{{ item.userName }} <span>回复你的作品</span></div>
-						<div class="account_generalMessage_item_right_title_center modal_title_text_assistant">回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容</div>
+						<div class="account_generalMessage_item_right_title_center modal_title_text_assistant">{{ item.content }}</div>
-						<div class="account_generalMessage_item_right_works modal_title_text_intro">回复作品名</div>
+						<div class="account_generalMessage_item_right_works modal_title_text_intro" @click.stop="openOtherWork(item)">{{ item.portfolioName }}</div>
 					</div>
 				</div>
 				<div class="account_generalMessage_item_left">
 					<div class="account_generalMessage_item_left_delete modal_title_text_intro">
 						<span class="icon iconfont icon-shanchu operate_icon"></span>
 					</div>
-					<div class="modal_title_text_intro">2024-06-05</div>
+					<div class="modal_title_text_intro">{{ item.createTime }}</div>
 				</div>
 			</div>
-			<div class="account_generalMessage_item">
+			<div class="account_generalMessage_item" style="justify-content: center;" v-if="dataList.length == 0 && isNoData">
-				<div class="account_generalMessage_item_right">
+				没有任何信息~
-					<div class="account_generalMessage_item_right_img">
+			</div>
-						<img src="https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png" alt="">
+			<div class="page_loading_box" v-show="!isNoData">
-					</div>
+				<span class="page_loading" ref="loadingDom" v-show="!isShowMark"></span>
-					<div class="account_generalMessage_item_right_title">
+				<span v-show="isShowMark">
-						<div class="account_generalMessage_item_right_title_name">名字 <span>回复你的作品</span></div>
+					<a-spin size="large" />
-						<div class="account_generalMessage_item_right_title_center modal_title_text_assistant">回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容</div>
+				</span>
-						<div class="account_generalMessage_item_right_works modal_title_text_intro">回复作品名</div>
-					</div>
-				</div>
-				<div class="account_generalMessage_item_left">
-					<div class="account_generalMessage_item_left_delete modal_title_text_intro">
-						<span class="icon iconfont icon-shanchu operate_icon"></span>
-					</div>
-					<div class="modal_title_text_intro">2024-06-05</div>
-				</div>
 			</div>
 		</div>
     </div>
@@ -56,56 +48,92 @@ import { useI18n } from 'vue-i18n'
 export default defineComponent({
     components:{
     },
-    setup() {
+    props:['setReadStatus','setAllmessage','getHistory'],
+    setup(prop,{emit}) {
+		
 		const router = useRouter()
         const store = useStore();
 		let accountMessage = reactive({
 			activeKey: ref('1'),
-			dataList:ref([
+			dataList:[
-				{
+			],
-					name:'张三',
+			page:1,
-					avatar:'https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png',
+			size:10,
-					time:'2024-01-01 12:00:00',
+			isNoData: false,
-					content:'关注了你',
+			isShowMark: false,
-					isRead:false
-				},
-				{
-					name:'李四',
-					avatar:'https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png',
-				}
-			])
 		})
-		// let ws = new WebSocket('ws://127.0.0.1:3000')
+		let loadingDom:any = ref(null)
-		// console.log(ws);
+		let setmessageList = ()=>{
-		
+			accountMessage.isShowMark = true
-		// ws.onopen = ()=>{
+			let data = {
-		// 	console.log(222);
+				page: accountMessage.page,
-		// 	let data = {
+				size: accountMessage.size,
-		// 		cmd:4, 
+			}
-		// 		data:{
+			prop.getHistory(data).then((rv:any)=>{
-		// 			msg:'222'
+				accountMessage.isShowMark = false
-		// 		} 
+				if(rv.content.length == 0) {
-		// 	}
+					accountMessage.isNoData = true
-		// 	ws.send(JSON.stringify(data))
+					return
-		// 	// ws.onmessage = (data)=>{
+				}
-		// 	// 	console.log(data); 
+				accountMessage.dataList = rv.content
-		// 	// }
+			}).catch(() => {
-		// }
+				accountMessage.isShowMark = false
-		// provide('exhibitionList',exhibitionList)
+				accountMessage.isNoData = true
-		let openOtherUsers = ()=>{
+			})
+		}
+		let setRead = (item:any)=>{
+			prop.setReadStatus(item).then((rv:any)=>{
+				item.isRead = 1
+			}).catch((err:any)=>{
+			})
+		}
+		let allRead = ()=>{
+			// emit('setAllmessage')
+			prop.setAllmessage().then(()=>{
+			}).catch((err:any)=>{
+			})
+		}
+		let openOtherUsers = (item:any)=>{
 			const routeUrl = router.resolve({
 				path:'/home/otherUsers',
 				query:{
-					id:123
+					userId:item.senderId
+				}
+			})
+			window.open(routeUrl.href,'_blank')
+		}
+		let openOtherWork = (item:any)=>{
+			const routeUrl = router.resolve({
+				path:'/home/works',
+				query:{
+					workId:item.portfolioId
 				}
 			})
 			window.open(routeUrl.href,'_blank')
 		}
 		onMounted (()=>{
+			accountMessage.isNoData = false
+			accountMessage.page = 0
+			let imgParent:any = document.querySelector('.account_systemMessage .page_loading')
+			new IntersectionObserver(
+				(entries, observer) => {
+					// 如果不是相交，则直接返回
+					// console.log(entries[0]);
+					if (!entries[0].intersectionRatio) return;
+					accountMessage.page+=1
+					setmessageList()
+				},
+				// { root:worksPage }
+			).observe(loadingDom.value);
 		})
         return{
            ...toRefs(accountMessage),
+		   setmessageList,
+		   setRead,
+		   allRead,
 		   openOtherUsers,
+		   openOtherWork,
+		   loadingDom,
         }
     },
     data(){

src/component/Account/message/likeMessage.vue

@@ -1,18 +1,18 @@
 <template>
     <div class="account_like">
 		<div class="account_generalMessage_title modal_title_text">
-			<span>点赞</span>
+			<!-- <span>点赞</span> -->
 			<div class="account_generalMessage_title_setting" @click="allRead">全部已读</div>
 		</div>
 		<div class="account_generalMessage_center modal_title_text">
 			<div class="account_generalMessage_item" v-for="item in dataList" :key="item.id" @click="setRead(item)">
 				<a-badge :dot="item.isRead == 0"></a-badge>
 				<div class="account_generalMessage_item_right">
-					<div class="account_generalMessage_item_right_img">
+					<div class="account_generalMessage_item_right_img" @click="openOtherUsers(item)">
-						<img src="https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png" alt="">
+						<img :src="item.avatar" alt="">
 					</div>
 					<div class="account_generalMessage_item_right_title">
-						<div class="account_generalMessage_item_right_title_name">{{ item.senderUserName }} <span>攒了你的作品</span></div>
+						<div class="account_generalMessage_item_right_title_name">{{ item.userName }} <span>攒了你的作品</span></div>
 						<div>{{ item.portfolioName }}</div>
 					</div>
 				</div>
@@ -23,6 +23,15 @@
 					<div class="modal_title_text_intro">{{ item.createTime }}</div>
 				</div>
 			</div>
+			<div class="account_generalMessage_item" style="justify-content: center;" v-if="dataList.length == 0 && isNoData">
+				没有任何信息~
+			</div>
+			<div class="page_loading_box" v-show="!isNoData">
+				<span class="page_loading" ref="loadingDom" v-show="!isShowMark"></span>
+				<span v-show="isShowMark">
+					<a-spin size="large" />
+				</span>
+			</div>
 		</div>
     </div>
 </template>
@@ -37,50 +46,83 @@ import { useI18n } from 'vue-i18n'
 export default defineComponent({
     components:{
     },
-	emits:['setReadStatus','setAllmessage'],
+	// emits:['setReadStatus','setAllmessage'],
+    props:['setReadStatus','setAllmessage','getHistory'],
     setup(prop,{emit}) {
 		const router = useRouter()
         const store = useStore();
 		let accountMessage = reactive({
 			activeKey: ref('1'),
 			dataList:[
-			]
+			],
+			page:1,
+			size:10,
+			isNoData: false,
+			isShowMark: false,
 		})
-		let setmessageList = (data:any)=>{
+		let loadingDom:any = ref(null)
-			accountMessage.dataList = data.content
+		let setmessageList = ()=>{
+			accountMessage.isShowMark = true
+			let data = {
+				page: accountMessage.page,
+				size: accountMessage.size,
+			}
+			prop.getHistory(data).then((rv:any)=>{
+				accountMessage.isShowMark = false
+				if(rv.content.length == 0) {
+					accountMessage.isNoData = true
+					return
+				}
+				accountMessage.dataList = rv.content
+			}).catch(() => {
+				accountMessage.isShowMark = false
+				accountMessage.isNoData = true
+			})
 		}
 		let setRead = (item:any)=>{
-			emit('setReadStatus',item)
+			prop.setReadStatus(item).then((rv:any)=>{
-			item.isRead = 1
+				item.isRead = 1
+			}).catch((err:any)=>{
+			})
 		}
 		let allRead = ()=>{
-			emit('setAllmessage')
+			// emit('setAllmessage')
+			prop.setAllmessage().then(()=>{
+			}).catch((err:any)=>{
+			})
+		}
+		let openOtherUsers = (item:any)=>{
+			const routeUrl = router.resolve({
+				path:'/home/otherUsers',
+				query:{
+					userId:item.senderId
+				}
+			})
+			window.open(routeUrl.href,'_blank')
 		}
-		// let ws = new WebSocket('ws://127.0.0.1:3000')
-		// console.log(ws);
-		
-		// ws.onopen = ()=>{
-		// 	console.log(222);
-		// 	let data = {
-		// 		cmd:4, 
-		// 		data:{
-		// 			msg:'222'
-		// 		} 
-		// 	}
-		// 	ws.send(JSON.stringify(data))
-		// 	// ws.onmessage = (data)=>{
-		// 	// 	console.log(data); 
-		// 	// }
-		// }
-		// provide('exhibitionList',exhibitionList)
 		
 		onMounted (()=>{
+			accountMessage.isNoData = false
+			accountMessage.page = 0
+			let imgParent:any = document.querySelector('.account_systemMessage .page_loading')
+			new IntersectionObserver(
+				(entries, observer) => {
+					// 如果不是相交，则直接返回
+					// console.log(entries[0]);
+					if (!entries[0].intersectionRatio) return;
+					accountMessage.page+=1
+					setmessageList()
+				},
+				// { root:worksPage }
+			).observe(loadingDom.value);
 		})
         return{
            ...toRefs(accountMessage),
 		   setmessageList,
 		   setRead,
-		   allRead
+		   allRead,
+		   openOtherUsers,
+		   loadingDom,
         }
     },
     data(){

src/component/Account/message/newFollow.vue

@@ -1,25 +1,35 @@
 <template>
     <div class="account_newFollow">
 		<div class="account_generalMessage_title modal_title_text">
-			<span>新增粉丝</span>
+			<!-- <span>新增粉丝</span> -->
 			<div class="account_generalMessage_title_setting" @click="allRead">全部已读</div>
 		</div>
 		<div class="account_generalMessage_center modal_title_text">
 			<div class="account_generalMessage_item" v-for="item in dataList" :key="item.id" @click="setRead(item)">
 				<a-badge :dot="item.isRead == 0"></a-badge>
 				<div class="account_generalMessage_item_right">
-					<div class="account_generalMessage_item_right_img">
+					<div class="account_generalMessage_item_right_img" @click="openOtherUsers(item)">
-						<img src="https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png" alt="">
+						<img :src="item.avatar" alt="">
 					</div>
 					<div class="account_generalMessage_item_right_title">
-						<div class="">{{ item.senderUserName }}</div>
+						<div class="">{{ item.userName }}</div>
 						<div class="modal_title_text_intro">{{ item.createTime }} 关注了你</div>
 					</div>
 				</div>
 				<div class="account_generalMessage_item_left">
-					<div>回关</div>
+					<div v-if="item?.isFollow == 0" @click.stop="setFollow(item)" >{{$t('newScaleImage.Follow')}}</div>
+					<div v-else @click.stop="setFollow(item)" >{{$t('newScaleImage.Unfollow')}}</div>
 				</div>
 			</div>
+			<div class="account_generalMessage_item" style="justify-content: center;" v-if="dataList.length == 0 && isNoData">
+				没有任何信息~
+			</div>
+			<div class="page_loading_box" v-show="!isNoData">
+				<span class="page_loading" ref="loadingDom" v-show="!isShowMark"></span>
+				<span v-show="isShowMark">
+					<a-spin size="large" />
+				</span>
+			</div>
 		</div>
     </div>
 </template>
@@ -34,33 +44,96 @@ import { useI18n } from 'vue-i18n'
 export default defineComponent({
     components:{
     },
-	emits:['setReadStatus','setAllmessage'],
+	// emits:['setReadStatus','setAllmessage'],
+    props:['setReadStatus','setAllmessage','getHistory'],
     setup(prop,{emit}) {
 		const router = useRouter()
         const store = useStore();
 		let accountMessage = reactive({
 			activeKey: ref('1'),
-			dataList:ref([
+			dataList:[
 				
-			])
+			],
+			page:1,
+			size:10,
+			isNoData: false,
+			isShowMark: false,
 		})
-		let setmessageList = (data:any)=>{
+		let loadingDom:any = ref(null)
-			accountMessage.dataList = data.content
+		let setmessageList = ()=>{
+			accountMessage.isShowMark = true
+			let data = {
+				page: accountMessage.page,
+				size: accountMessage.size,
+			}
+			prop.getHistory(data).then((rv:any)=>{
+				accountMessage.isShowMark = false
+				if(rv.length == 0) {
+					accountMessage.isNoData = true
+					return
+				}
+				accountMessage.dataList = rv
+			}).catch(() => {
+				accountMessage.isShowMark = false
+				accountMessage.isNoData = true
+			})
 		}
 		let setRead = (item:any)=>{
-			emit('setReadStatus',item)
+			prop.setReadStatus(item).then((rv:any)=>{
-			item.isRead = 1
+				item.isRead = 1
+			}).catch((err:any)=>{
+			})
 		}
 		let allRead = ()=>{
-			emit('setAllmessage')
+			// emit('setAllmessage')
+			prop.setAllmessage().then(()=>{
+			}).catch((err:any)=>{
+			})
+		}
+		let setFollow = (item:any) =>{
+			let url = Https.httpUrls.porfolioFollow
+			if(item.isFollow == 1)url = Https.httpUrls.porfolioCancelFollow
+			Https.axiosGet(url, {params:{followeeId:item.senderId}})
+			.then((rv) => {
+				if(item.isFollow == 1){
+					item.isFollow = 0
+				}else{
+					item.isFollow = 1
+				}
+			})
+		}
+		let openOtherUsers = (item:any)=>{
+			const routeUrl = router.resolve({
+				path:'/home/otherUsers',
+				query:{
+					userId:item.senderId
+				}
+			})
+			window.open(routeUrl.href,'_blank')
 		}
 		onMounted (()=>{
+			accountMessage.isNoData = false
+			accountMessage.page = 0
+			let imgParent:any = document.querySelector('.account_systemMessage .page_loading')
+			new IntersectionObserver(
+				(entries, observer) => {
+					// 如果不是相交，则直接返回
+					// console.log(entries[0]);
+					if (!entries[0].intersectionRatio) return;
+					accountMessage.page+=1
+					setmessageList()
+				},
+				// { root:worksPage }
+			).observe(loadingDom.value);
 		})
         return{
            ...toRefs(accountMessage),
 		   setmessageList,
 		   setRead,
-		   allRead
+		   allRead,
+		   setFollow,
+		   openOtherUsers,
+		   loadingDom,
         }
     },
     data(){

src/component/Account/message/privateChat.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="account_privateChatMessage">
 		<div class="account_generalMessage_title modal_title_text">
-			<span>私信</span>
+			<!-- <span>私信</span> -->
 			<div class="account_generalMessage_title_setting">全部已读</div>
 		</div>
 		<div class="account_privateChatMessage_content">

src/component/Account/message/system.vue

@@ -1,11 +1,11 @@
 <template>
     <div class="account_systemMessage">
 		<div class="account_generalMessage_title modal_title_text">
-			<span>系统消息</span>
+			<!-- <span>系统消息</span> -->
 			<div class="account_generalMessage_title_setting" @click="allRead">全部已读</div>
 		</div>
 		<div class="account_generalMessage_item modal_title_text" v-for="item in dataList" :key="item.id" @click="setRead(item)">
-			<a-badge dot></a-badge>
+			<a-badge :dot="item.isRead == 0"></a-badge>
 			<div class="account_generalMessage_item_title">
 				<div class="account_generalMessage_item_title_text" :title="item.content">{{ item.content.title }}</div>
 				<div class="modal_title_text_intro">{{ item.createTime }}</div>
@@ -15,6 +15,15 @@
 				<span v-if="item.content.link" class="account_generalMessage_item_link">{{ item.content.link }}</span>
 			</div>
 		</div>
+		<div class="account_generalMessage_item  modal_title_text" style="display:flex;justify-content: center;" v-if="dataList.length == 0 && isNoData">
+			没有任何信息~
+		</div>
+		<div class="page_loading_box" v-show="!isNoData">
+			<span class="page_loading" ref="loadingDom" v-show="!isShowMark"></span>
+			<span v-show="isShowMark">
+				<a-spin size="large" />
+			</span>
+		</div>
     </div>
 </template>
 <script lang="ts">
@@ -28,38 +37,74 @@ import { useI18n } from 'vue-i18n'
 export default defineComponent({
     components:{
     },
-	emits:['setReadStatus','setAllmessage'],
+	// emits:['putListData'],
-    props:{
+    props:['setReadStatus','setAllmessage','getHistory'],
-    },
     setup(prop,{emit}) {
 		const router = useRouter()
         const store = useStore();
 		let accountMessage = reactive({
 			dataList: [],
+			page:1,
+			size:10,
+			isNoData: false,
+			isShowMark: false,
 		})
-		let setmessageList = (data:any)=>{
+		let loadingDom:any = ref(null)
-			console.log(data);
+		let setmessageList = ()=>{
-			
+			accountMessage.isShowMark = true
-			data.content.forEach((item:any) => {
+			let data = {
-				item.content = JSON.parse(item.content)
+				page: accountMessage.page,
-			});
+				size: accountMessage.size,
-			accountMessage.dataList = data.content
+			}
+			prop.getHistory(data).then((rv:any)=>{
+				accountMessage.isShowMark = false
+				if(rv.content.length == 0) {
+					accountMessage.isNoData = true
+					return
+				}
+				rv.content.forEach((item:any) => {
+					item.content = JSON.parse(item.content)
+				});
+				accountMessage.dataList = rv.content
+			}).catch(() => {
+				accountMessage.isShowMark = false
+				accountMessage.isNoData = true
+			})
 		}
 		let setRead = (item:any)=>{
-			emit('setReadStatus',item)
+			prop.setReadStatus(item).then((rv:any)=>{
+				item.isRead = 1
+			}).catch((err:any)=>{
+			})
 		}
 		let allRead = ()=>{
-			emit('setAllmessage')
+			// emit('setAllmessage')
+			prop.setAllmessage().then(()=>{
+			}).catch((err:any)=>{
+			})
 		}
 		// provide('exhibitionList',exhibitionList)
-		
 		onMounted (()=>{
+			accountMessage.isNoData = false
+			accountMessage.page = 0
+			let imgParent:any = document.querySelector('.account_systemMessage .page_loading')
+			new IntersectionObserver(
+				(entries, observer) => {
+					// 如果不是相交，则直接返回
+					// console.log(entries[0]);
+					if (!entries[0].intersectionRatio) return;
+					accountMessage.page+=1
+					setmessageList()
+				},
+				// { root:worksPage }
+			).observe(loadingDom.value);
 		})
         return{
            ...toRefs(accountMessage),
 		   setmessageList,
 		   setRead,
-		   allRead
+		   allRead,
+		   loadingDom,
         }
     },
     data(){

src/component/Account/otherUsers.vue

@@ -5,34 +5,34 @@
 		</div>
 		<div class="otherUsers_userDetail">
 			<div class="otherUsers_userDetail_img">
-				<img src="https://code-create.com.hk/wp-content/uploads/2022/12/about_banner-1.jpg" alt="">
+				<img :src="userContent.avatar" alt="">
 			</div>
 			<div class="otherUsers_userDetail_center">
 				<div class="otherUsers_userDetail_center_name modal_title_text">
-					<div>用户名</div>
+					<div>{{ userContent.userName }}</div>
 					<div class="userDetail_center_name_left">关注</div>
 				</div>
 				<div class="otherUsers_userDetail_center_data">
 					<div class="userDetail_center_data_item modal_title_text">
-						<div>99999</div>
+						<div>{{ userContent.homepageViewCount }}</div>
 						<span class="modal_title_text_intro">访问量</span>
 					</div>
 					<div class="userDetail_center_data_item modal_title_text">
-						<div>123</div>
+						<div>{{ userContent.portfolioCount }}</div>
 						<span class="modal_title_text_intro">作品</span>
 					</div>
 					<div class="userDetail_center_data_item modal_title_text">
-						<div>999</div>
+						<div>{{ userContent.followerCount }}</div>
 						<span class="modal_title_text_intro">粉丝</span>
 					</div>
 					<div class="userDetail_center_data_item modal_title_text">
-						<div>22</div>
+						<div>{{ userContent.followeeCount }}</div>
 						<span class="modal_title_text_intro">关注</span>
 					</div>
 				</div>
 				<div class="otherUsers_userDetail_center_signature">
 					<div class="modal_title_text">
-						<div class="modal_title_text_intro">个性签名个性签名个性签名</div>
+						<!-- <div class="modal_title_text_intro">个性签名个性签名个性签名</div> -->
 					</div>
 				</div>
 			</div>
@@ -62,28 +62,26 @@ export default defineComponent({
 		const router:any = useRouter()
         const store = useStore();
 		let otherUsers = reactive({
-			userId:'0'
+			userId:'0',
+			userContent:{}
 		})
-		// let ws = new WebSocket('ws://127.0.0.1:3000')
+		let getUserDetail = (id:any)=>{
-		// console.log(ws);
+			let data = {
-		
+				id:id
-		// ws.onopen = ()=>{
+			}
-		// 	console.log(222);
+			Https.axiosGet(Https.httpUrls.personalHomepage,{params:data}).then((rv)=>{
-		// 	let data = {
+				if(rv){
-		// 		cmd:4, 
+					otherUsers.userContent = rv
-		// 		data:{
+				}
-		// 			msg:'222'
+			})
-		// 		} 
+			
-		// 	}
+		}
-		// 	ws.send(JSON.stringify(data))
+
-		// 	// ws.onmessage = (data)=>{
-		// 	// 	console.log(data); 
-		// 	// }
-		// }
-		// provide('exhibitionList',exhibitionList)
 		onMounted (()=>{
-			otherUsers.userId = router.currentRoute.value.query?.id
+			otherUsers.userId = router.currentRoute.value.query?.userId
 			// alert()
+			getUserDetail(otherUsers.userId)
+
 		})
         return{
            ...toRefs(otherUsers),

src/component/Administrator/TestClickData.vue

@@ -6,7 +6,7 @@
 				<div class="admin_state_item">
 					<span>Start Date:</span>
 					<a-range-picker
-						style="width:280px"
+						style="width:250px"
 						class="range_picker"
 						v-model:value="rangePickerValue"
 						:placeholder="[
@@ -24,9 +24,31 @@
 				</div>
 				<div class="admin_state_item">
 					<span>Start Time:</span>
-						<a-time-range-picker style="width:280px" class="range_picker" valueFormat="HH:mm:ss" v-model:value="rangeTimeValue" />
+						<a-time-range-picker style="width:250px" class="range_picker" valueFormat="HH:mm:ss" v-model:value="rangeTimeValue" />
 				</div>
-
+				<div class="admin_state_item">
+                    <span>Email:</span>
+                    <input
+                        v-model="email"
+                        placeholder="Please enter email"
+                        @keydown.enter="gettrialList"
+                        type="text"
+                        style="width: 250px"
+                    />
+                </div>
+				<div class="admin_state_item">
+                    <span>User Name:</span>
+                    <a-select
+                        v-model:value="ids"
+                        mode="multiple"
+                        style="width: 250px"
+                        :filter-option="filterOption"
+                        placeholder="Select Item..."
+                        max-tag-count="responsive"
+                        :options="allUserList"
+                        @keydown.enter="gettrialList"
+                    ></a-select>
+                </div>
 			</div>
 			<div class="admin_search">
 				<div class="admin_search_item" @click="searchHistoryList">Search</div>
@@ -178,15 +200,26 @@ export default defineComponent({
             ];
         });
 
+        let allUserList: any = ref([]);
+		let ids = ref([])
+		let email = ref('')
         let dataList: any = ref([]);
         let status: any = ref(0);
+		let filterOption = (input: any, option: any) => {
+            // 使用 option.label 进行搜索
+            return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
+        };
         return {
             rangePickerValue,
 			rangeTimeValue,
             columns,
             dataList,
+			allUserList,
+			ids,
+			email,
             renameData,
             status,
+			filterOption,
         };
     },
     data() {
@@ -204,6 +237,10 @@ export default defineComponent({
         let historyTable: any = this.$refs.historyTable;
         this.historyTableHeight = historyTable.clientHeight - 200;
         this.gettrialList();
+		let allUserList: any = sessionStorage.getItem("allUserList");
+		if (allUserList) {
+			this.allUserList = JSON.parse(allUserList);
+		}
     },
     methods: {
         //改变页码
@@ -233,9 +270,12 @@ export default defineComponent({
             let endDate: any = this.rangePickerValue[1]
                 ? this.rangePickerValue[1]+' '+endTime
                 : "";
+			let ids = this.ids.join(',')
 			let data = {
 				endTime:endDate,
 				startTime:startDate,
+				ids:ids,
+				email:this.email,
 			}
 			Https.axiosGet(Https.httpUrls.getDesignStatistic,{params:data}).then((rv: any) => {
 				if (rv) {
@@ -274,3 +314,9 @@ export default defineComponent({
     },
 });
 </script>
+<style lang="less" scoped>
+.admin_page .admin_table_search .admin_state {
+    display: flex;
+    flex-wrap: wrap;
+}
+</style>

src/component/Detail/editFrontBack.vue

@@ -0,0 +1,469 @@
+<template>
+	<div class="editFrontBack_center">
+		<div class="exportCanvasBox_center">
+			<div class="editFrontBack_center_btn editFrontBack_center_item" :class="{spread:spreadState}">
+				<!-- <div @click="setOperation('')" class="editFrontBack_center_btn_item">
+					<div>新增</div>
+				</div> -->
+				<i class="icon iconfont icon-chehui" @click="historyState('')"></i>
+				<i class="icon iconfont icon-fanchehui" @click="historyState('reverse')"></i>
+				<i class="icon iconfont icon-move" @click="setOperation('move')" :class="{active:canvasState == 'move'}"></i>
+				<i class="icon iconfont icon-bianji" @click="setOperation('pencil')" :class="{active:canvasState == 'pencil'}"></i>
+				<i class="icon iconfont icon-xiangpi_huaban1" @click="setOperation('eraser')" :class="{active:canvasState == 'eraser'}"></i>
+				<input type="range" v-show="canvasState != 'move'" @input="setPencilWidth" min="1" max="50" v-model="canvasPencilWidth[canvasState]">
+				<div class="icon iconfont icon-xiala" :class="{btnRotate:spreadState}" @click="()=>spreadState = !spreadState"></div>
+				<div @click="setSubmit">保存</div>
+			</div>
+		</div>
+	</div>
+</template>
+<script>
+import { defineComponent, ref, reactive, watch, onMounted, nextTick, toRefs } from "vue";
+import { Https } from "@/tool/https";
+import { formatTime,segmentImage } from "@/tool/util";
+import { setCookie, getCookie } from "@/tool/cookie";
+import { Modal, message } from "ant-design-vue";
+import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
+import allOrder from "@/component/Pay/allOrder.vue";
+import creditsDetail from "@/component/Pay/creditsDetail.vue";
+import { exportSele,JSRectUpdata,JSchangeType,JScanvasMouseDown,JSSetRemoveImage,JScreateCheck,JSSetTexture } from "@/tool/canvasDrawing";
+import { useI18n } from "vue-i18n";
+export default defineComponent({
+    components: {
+		creditsDetail,
+		allOrder,
+    },
+	// emits: ['setSloganData'],
+	props:['patchData','imgDomIndex'],
+    setup(props,{emit}) {
+        let presentState = ref('paypal');
+        let loadingShow = ref(false);
+        let { t } = useI18n();
+        let canvas = reactive({});
+		let ratio = [1,1]
+		let exportWH = 0
+		let imgDomIndex = 0
+		// let a = computed(()=>{
+		// 	console.log(123);
+		// 	return props.patchData
+		// })
+		watch(()=>props.imgDomIndex,(newVal,oldVal)=>{
+			imgDomIndex = newVal
+			console.log(newVal,oldVal)
+			console.log(props.patchData);
+			props.patchData.front.imageUrl=  ''
+			init(props.patchData.front[newVal],'')
+		})
+		let canvasBtn = reactive({
+			canvasState:'move',
+			canvasPencilWidth:{
+				pencil:4,
+				eraser:4,
+			},
+			spreadState:false,
+		})
+		let canvasWH = ref(0);
+		
+		let exportUrl = ''
+		let reverseCanvasState = ref([])//存放canvas操作
+		let normalCanvasState = ref([])//存放canvas操作
+		let canvasState = ref()//存放canvas操作
+		let keyDown = []//监听键盘的 keydown 和 keyup 事件
+		let init = (data,index)=>{
+			loadingShow.value = true
+			normalCanvasState.value = []
+			reverseCanvasState.value = []
+			ratio = [1,1]
+			nextTick(()=>{
+				let canvasBox = document.querySelector(".exportCanvasBox_center");
+				let height = canvasBox.offsetHeight;
+				canvasBox.style.width = height+'px'
+				canvasWH.value = height
+				var canvasDom = document.createElement("canvas");
+				document.addEventListener("keydown", canvasKeyDown);
+				document.addEventListener("keyup", canvasKeyUp);
+				
+
+				let oldCanvasDom = canvasBox.querySelector('.canvas-container')
+				let oldCanvasDom1 =  canvasBox.querySelector('canvas')
+				if(oldCanvasDom)oldCanvasDom.remove()
+				if(oldCanvasDom1)oldCanvasDom1.remove()
+				canvasBox.appendChild(canvasDom);
+				let img = new Image();
+				img.onload = function(){
+					let wScale = 1
+					let hScale = 1
+					let styleWidth = Number(data.style.width.split('px')[0])
+					let styleHeight = Number(data.style.height.split('px')[0])
+					if(styleWidth>styleHeight){
+						hScale = styleHeight/styleWidth
+						exportWH = img.width
+					}else{
+						wScale = styleWidth/styleHeight
+						exportWH = img.height
+					}
+					ratio = [wScale,hScale]
+					canvas = new fabric.Canvas(canvasDom, {
+						width: canvasWH.value * wScale,
+						height: canvasWH.value * hScale,
+						isDrawingMode: false, // 开启绘图模式
+					});
+					JSchangeType(canvas,'init')
+					
+					fabric.Object.prototype.cornerSize = 10
+					fabric.Object.prototype.transparentCorners = false 
+					exportUrl = data.imageUrl
+					fabric.Image.fromURL(data.imageUrl, function(img) {
+						// 设置背景图对象的宽度和高度与 canvas 相同
+						img.scaleToWidth(canvas.width);
+						img.scaleToHeight(canvas.height);;
+						img.set({
+							// width: canvas.width,
+							// height: canvas.height,
+							// scaleX:2,
+							// scaleY:1,
+							scaleX: canvas.width / img.width,
+							scaleY: canvas.height / img.height
+						});
+						// 将背景图添加到 canvas 的底层
+						// canvas.add(img);
+						canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas));
+						if(!fabric.Object.prototype.controls.deleteControl){
+							JSSetRemoveImage(deleteObj)
+						}else{
+							fabric.Object.prototype.controls.deleteControl.mouseUpHandler = deleteObj
+						}
+						updateCanvasState()
+						loadingShow.value = false
+					},{ crossOrigin: "Anonymous" });
+					// 鼠标抬起事件
+					canvas.on('mouse:up', function(event) {
+							console.log(event);
+							if(canvasBtn.canvasState != 'move'){
+							updateCanvasState('mouseUp')
+						}
+					});
+
+					//画布上移动
+					canvas.on("mouse:move", event =>setCanvasMove(event));
+					canvas.add(brushIndicator)
+					setOperation('pencil')
+					img.remove()
+				}
+				img.src = data.imageUrl
+				
+			})
+        }
+		let canvasKeyDown = (event) => {
+			if(keyDown.indexOf(event.key)>-1){
+			}else{
+				keyDown.push(event.code)
+				if(keyDown.indexOf('ControlLeft') > -1 && keyDown.indexOf('KeyZ') > -1 && keyDown.indexOf('ShiftLeft') > -1){
+					historyState('reverse')
+				}else if(keyDown.indexOf('ControlLeft') > -1 && keyDown.indexOf('KeyZ') > -1){
+					historyState('')
+				}
+			}
+		}
+		let canvasKeyUp = (event) =>{
+				keyDown = keyDown.filter(function(item) {
+					return event.code !== item;
+				})
+				
+			}
+		let clearCanvas = ()=>{
+		    canvasBtn.canvasState = 'move'
+		    canvasBtn.spreadState = false
+			document.removeEventListener("keydown", canvasKeyDown);
+			document.removeEventListener("keyup", canvasKeyUp);
+		}
+		let rgba = 'rgba(0, 0, 0, 1)'
+		let brushIndicator = new fabric.Circle({
+			radius:2,
+			fill: 'rgba(0, 0, 0, 0)',
+			stroke: '#000',
+			strokeWidth: 1,
+			originX: 'center',
+			originY: 'center',
+			visible :true,
+			// left: -100,
+			// top: -100,
+			erasable: false,
+		});
+
+		let setCanvasMove = (event)=>{
+			var pointer = canvas.getPointer(event.e);
+			if(canvas.isDrawingMode){
+				canvas.setCursor('none');
+				if(!canvas.contains(brushIndicator)){
+					canvas.add(brushIndicator)
+					brushIndicator.set({// left:0,
+						// top:0,
+						radius:(canvasBtn.canvasPencilWidth[canvasBtn.canvasState])/2
+					})
+					canvas.bringToFront(brushIndicator);//设置优先级最高
+				}
+				// brushIndicator.fill = canvasPencilColor.value
+				brushIndicator.set({ left: pointer.x, top: pointer.y, visible: true,radius:(canvasBtn.canvasPencilWidth[canvasBtn.canvasState])/2 });
+			}
+			canvas.requestRenderAll()
+		}
+		let setOperation = (str)=>{
+			canvasBtn.canvasState = str
+			if(str == 'move'){
+				setMove()
+				if(canvas.contains(brushIndicator))canvas.remove(brushIndicator)
+			}else if(str == 'pencil'){
+				setPencil()
+				if(!canvas.contains(brushIndicator))canvas.add(brushIndicator)
+				
+			}else if(str == 'eraser'){
+				setEraser()
+				if(!canvas.contains(brushIndicator))canvas.add(brushIndicator)
+			}
+		}
+		let setMove = ()=>{
+			canvas.isDrawingMode = false
+			canvas.forEachObject((obj) =>obj.selectable = true);
+		}
+		let setPencil = ()=>{
+			canvas.isDrawingMode = true//开启绘画模式
+			canvas.freeDrawingBrush = new fabric.PencilBrush(canvas,{});
+			canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState]);
+			canvas.freeDrawingBrush.color = rgba
+			brushIndicator.set('fill',rgba)
+			canvas.freeDrawingBrush.isEraser = false
+		}
+		let setEraser = ()=>{
+			canvas.isDrawingMode = true
+			let eraser = new fabric.EraserBrush(canvas)
+            canvas.freeDrawingBrush = eraser
+			brushIndicator.set({fill: '#fff'});
+			canvas.requestRenderAll();
+			canvas.freeDrawingBrush.isEraser = true
+			canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState]);
+		}
+		let deleteObj = ()=> {
+			// if(!canvas.getActiveObjects()){
+			// 	return
+			// }
+			let target = canvas.getActiveObjects()
+			target.forEach((item)=>{
+				canvas.fxRemove(item, {
+					onComplete(){
+					canvas.discardActiveObject(); // 丢弃当前选中的对象
+					canvas.renderAll(); // 重新渲染 Canvas
+					}
+				})
+				canvas.FX_DURATION = 300
+			})
+		}
+		let setTimeOutWidth
+		let setPencilWidth = ()=>{//切换颜色给铅笔设置颜色
+			clearTimeout(setTimeOutWidth)
+			setTimeOutWidth = setTimeout(()=>{
+				canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState])
+			},300)
+		}
+		let updateCanvasState = (str) =>{
+			if(str != 'mouseUp'){
+				canvas.remove(brushIndicator)
+			}
+			const canvasAsJson = JSON.stringify(canvas.toJSON());
+			normalCanvasState.value.push(canvasAsJson);
+		}
+		//撤回
+		let historyState = (str)=> {
+			if(str == 'reverse' && reverseCanvasState.value.length > 0){//反撤回
+				let obj = reverseCanvasState.value.pop()
+				// canvasState.value = reverseCanvasState.value[reverseCanvasState.value.length-1]
+				canvasState.value = obj 
+				normalCanvasState.value.push(obj);
+			}else if(str == '' && normalCanvasState.value.length > 1){
+				let obj = normalCanvasState.value.pop()
+				canvasState.value = normalCanvasState.value[normalCanvasState.value.length-1]
+				reverseCanvasState.value.push(obj);
+			}else{
+				return
+			}
+			canvas.loadFromJSON(canvasState.value, () => {});
+		}
+		let setSubmit = ()=>{
+			let mark = 'https://www.minio.aida.com.hk:12024/aida-users/83/toProductImageElement/e30c06b3-ce93-4fd8-a381-f3bdb4b5d318.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240822%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240822T083215Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=40356ec75617430e7cef2d8cc0524ff0b18411559f4f52ab6a8f8522d7348250'
+			let full = 'https://www.minio.aida.com.hk:12024/aida-users/83/toProductImageElement/ad929cf8-61e9-4e73-9d1b-8338d8d151d2.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240822%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240822T083909Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=7e7facf97ebce6e621f0cd68188fdebef0e238092cd3b3dd4f70ed783433d637'
+			let size = {
+				width: exportWH * ratio[0],
+				height: exportWH * ratio[1],
+			}
+			segmentImage(mark,full,size).then((rv)=>{
+				console.log(rv);
+
+			})
+			return
+			var allObjects = canvas.getObjects('path');
+			var canvasDom = document.createElement("canvas");
+			let exportCanvas = new fabric.Canvas(canvasDom, {
+				width: exportWH * ratio[0],
+				height: exportWH * ratio[1],
+				isDrawingMode: false, // 开启绘图模式
+			});
+			canvas.backgroundImage.clone((back)=>{
+				back.scaleToWidth(exportCanvas.width);
+				back.scaleToHeight(exportCanvas.height);
+				back.set({
+					scaleX: exportCanvas.width / back.width,
+					scaleY: exportCanvas.height / back.height
+				})
+				let scale = exportCanvas.height/canvas.height
+				exportCanvas.backgroundImage = back
+				allObjects.forEach((item,index)=>{
+					// let obj = fabric.util.object.clone(item);
+					if(item.type == 'circle')return
+					let obj 
+					item.clone((cloned)=>{
+						obj = cloned
+					})
+					obj.set(
+						{
+							scaleX:(item.scaleX?item.scaleX:1)*scale,
+							scaleY:(item.scaleY?item.scaleY:1)*scale,
+							left:item.left*scale,
+							top:item.top*scale,
+						}
+					)
+					exportCanvas.add(obj)
+					
+				})
+				let data = exportCanvas.toDataURL('png')
+				cancelDsign()
+				clearCanvas()
+				console.log(data);
+				props.patchData.front[imgDomIndex].imageUrl = data
+					// emit('setSloganData',data)
+				
+			})
+		}
+		let cancelDsign = ()=>{
+			document.removeEventListener('keydown',canvasKeyDown);
+			document.removeEventListener('keyup', canvasKeyUp);
+		}
+        return {
+            presentState,
+			loadingShow,
+            t,
+			...toRefs(canvasBtn),
+			init,
+			setOperation,
+			setPencilWidth,
+			historyState,
+			setSubmit,
+			cancelDsign,
+        };
+    },
+    data() {
+        return {
+        };
+    },
+    mounted() {},
+    methods: {
+       
+    },
+});
+</script>
+<style lang="less" scoped>
+.editFrontBack_center{
+	position: relative;
+	// width: calc(512px / 2);
+	// width: 256px;
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	// height: calc(512px / 2);
+	margin: 0 auto;
+	.editFrontBack_center_item{
+		// position: relative;
+		background: #fff;
+		position: absolute;
+		
+		display: flex;
+		border: 0.2rem solid #c4c4c4;
+		width: 25rem;
+		border-radius: 4px; /* 设置圆角半径 */
+		flex-wrap: wrap;
+		.editFrontBack_center_btn_item{
+			display: flex;
+			align-items: center;
+			padding: 1rem 0;
+		}
+	}
+	.exportCanvasBox_center{
+		height: 100%;
+		flex: 1;
+		position: relative;
+		margin: 0 auto;
+		overflow: hidden;
+		background: #e6e6e6;
+		// overflow: scroll;
+		.editFrontBack_center_btn{
+			z-index: 2;
+			left: 50%;
+			transform: translate(-50%,-135%);
+			transition: all .3s;
+			padding: 1rem 1.5rem;
+			// position: relative;
+			input{
+				width: 100%;
+				margin-top: 1rem;
+			}
+			.icon-xiala{
+				position: absolute;	
+				width: 2rem;
+				bottom: 0;
+				transform: translate(-50%, 90%);
+				left: 50%;
+				width: 6rem;
+				background: #fff;
+				text-align: center;
+				cursor: pointer;
+				&.icon-xiala::before{
+					transition: all .3s;
+				}
+				&.btnRotate::before{
+					transform: rotate(180deg);
+					display: block;
+				}
+			}
+			i{
+				font-size: 2.5rem;
+				cursor: pointer;
+				width: 4rem;
+				height: 4rem;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				&.active{
+					border: 1px solid;
+					border-radius: .4rem;
+				}
+			}
+			&.spread{
+				transform: translate(-50%,0);
+			}
+		}
+		:deep(.canvas-container){
+			left: 50%;
+			top: 50%;
+			transform: translate(-50%,-50%);
+			background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC);
+		}
+	}
+	.exportCanvasBox_center:hover{
+		.editFrontBack_center_btn{
+			transform: translate(-50%,-101%);
+			&.spread{
+				transform: translate(-50%,0);
+			}
+		}
+	}
+}
+</style>

src/component/Detail/setDesignItem.vue

@@ -41,6 +41,9 @@
 		</div>
 		<div class="designOpenrtion_imgMask_open" @click.stop="deleteBorder"></div>
 	</div>
+	<div class="design_compile_content">
+		<editFrontBack :patchData="frontBack" :imgDomIndex="imgDomIndex"></editFrontBack>
+	</div>
 	
 </template>
 
@@ -50,8 +53,12 @@ import { defineComponent, h,createVNode, ref ,computed, inject,nextTick} from "v
 import { useStore } from "vuex";
 // import { Modal,message } from 'ant-design-vue';
 import { Https } from "@/tool/https";
+import editFrontBack from '@/component/Detail/editFrontBack.vue'
+
 export default defineComponent({
     // props: ["frontBack"],
+	emits:['setParentLoadingShow','setDesignCoverage','setSubmit'],
+	components:{editFrontBack},
     setup(prop) {
         const store = useStore();
 
@@ -191,8 +198,6 @@ export default defineComponent({
 				}
 				this.printZIndex++
 			})
-			let bodyImgWH = document.getElementsByClassName("design_compile_content")[0].getElementsByClassName("perview_img")[0]
-
 			body.style = {
 				width:body.layersObject[0].imageSize?.[0]*ratio+'px',
 				height:body.layersObject[0].imageSize?.[1]*ratio+'px',
@@ -520,6 +525,9 @@ export default defineComponent({
 	flex-direction: column;
 	height: 100%;
 	width: 100%;	
+	width: 50%;
+	position: relative;
+	overflow: hidden;
 	.designOpenrtion_centent{
 		// flex: 1;
 		height: 100%;
@@ -530,10 +538,8 @@ export default defineComponent({
 		margin: 0 auto;
 		// overflow: hidden;
 		justify-content: space-between;
-		position: relative;
 		user-select:none;
 		z-index: 2;
-		position: relative;
 		&.active{
 			flex-direction: row;
 		}

src/component/Detail/setDesignItem2.vue

@@ -296,73 +296,6 @@ export default defineComponent({
 		init(){
 			this.setImgSize()
 		},
-		// async setImgSize(){
-		// 	let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
-		// 	let front = []
-		// 	let back = []
-		// 	let body
-			
-		// 	designItemDetail.others.forEach((item) => {
-		// 		if(item.type == 'Body'){
-		// 			body = item
-		// 		}
-		// 	});
-		// 	let ratio = await this.setPostition(body.layersObject[0]?.imageUrl)
-		// 	let frontIndex = 6
-		// 	let backIndex = 3
-		// 	// let front = 3
-		// 	// let back = 3
-		// 	designItemDetail.clothes.forEach((v,index)=>{
-		// 		for (let i = v.layersObject.length-1; i >= 0; i--) {
-		// 			v.layersObject[i].style = {
-		// 				top:v.layersObject[i].position?.[0]*ratio+'px',
-		// 				left:v.layersObject[i].position?.[1]*ratio+'px',
-		// 				width:v.layersObject[i].imageSize?.[0]*ratio+'px',
-		// 				height:v.layersObject[i].imageSize?.[1]*ratio+'px',
-		// 				// zIndex:zIndex-=1
-		// 			}
-		// 			v.layersObject[i].centers={
-		// 				left:0,
-		// 				top:0,
-		// 			}
-		// 			v.scale = ratio
-		// 			v.layersObject[i].designOpenrtionBtn = false
-		// 			if(v.layersObject[i].imageCategory.indexOf("back") == -1){
-		// 				front[index] = v.layersObject[i]
-		// 				front[index].style.zIndex = v.priority
-		// 				front[index].id = v.id
-		// 			}else{
-		// 				back[index] = v.layersObject[i]
-		// 				back[index].style.zIndex = v.priority
-		// 				back[index].id = v.id
-
-		// 				// back[index].style.zIndex = backIndex==0?v.layersObject[i]:backIndex++
-		// 			}
-		// 			if(this.printZIndex < v.priority){
-		// 				this.printZIndex = v.priority
-		// 			}
-		// 		}
-		// 		this.printZIndex++
-		// 	})
-		// 	let bodyImgWH = document.getElementsByClassName("design_compile_content")[0].getElementsByClassName("perview_img")[0]
-
-		// 	body.style = {
-		// 		width:body.layersObject[0].imageSize?.[0]*ratio+'px',
-		// 		height:body.layersObject[0].imageSize?.[1]*ratio+'px',
-		// 	}
-		// 	this.frontBack = {
-		// 		front:front,
-		// 		back:back,
-		// 		body:body,
-		// 	}
-		// 	this.frontBackOld = JSON.parse(JSON.stringify({
-		// 		front:front,
-		// 		back:back,
-		// 		body:body,
-		// 	}))
-		// 	this.setCanvas(this.frontBack)
-		// },
-		
 		
 		//按比设置单件衣服宽高位置
 		async setPostition(url){

src/component/Detail/setDesignItemMobile.vue

@@ -47,6 +47,7 @@ import { useStore } from "vuex";
 import { Https } from "@/tool/https";
 export default defineComponent({
     // props: ["frontBack"],
+	emits:['setParentLoadingShow','setDesignCoverage','setSubmit'],
     setup(prop) {
         const store = useStore();
 

src/component/HomePage/Cropper.vue

@@ -29,7 +29,8 @@
                         :outputSize="option.size"
                         :outputType="option.outputType"
                         :auto-crop="option.autoCrop"
-						:fixedBox="isRound"
+						:fixedBox="!isRound"
+                        :fixed="isRound"
                         :auto-crop-width="option.autoCropWidth"
                         :auto-crop-height="option.autoCropWidth"
                         :center-box="option.centerBox"
@@ -40,8 +41,8 @@
                 <div class="cur_picture_opterate">
                     <div class="cur_picture_opterate_item" @click="rotateLeft()"><span class="icon iconfont icon-chexiao operate_icon"></span></div>
                     <div class="cur_picture_opterate_item" @click="rotateRight()"><span class="icon iconfont icon-chexiao operate_icon icon_chexiao_sec"></span></div>
-                    <div class="cur_picture_opterate_item" @click="changeScale(-1)"><span class="operate_icon icon_font">-</span></div>
+                    <div class="cur_picture_opterate_item" @click="changeScale(-.1)"><span class="operate_icon icon_font">-</span></div>
-                    <div class="cur_picture_opterate_item" @click="changeScale(1)"><span class="operate_icon icon_font">+</span></div>
+                    <div class="cur_picture_opterate_item" @click="changeScale(.1)"><span class="operate_icon icon_font">+</span></div>
                     <div class="cur_picture_opterate_item" @click="refreshCrop()"><span class="icon iconfont icon-shuaxin operate_icon"></span></div>
                 </div>
             </div>

src/component/HomePage/ExportModel.vue

@@ -530,6 +530,9 @@ export default defineComponent({
 												resolve();
 											} else {
 												let itemCanvasImg = allItem.imgUrl;
+												if(item == 'FinalizeImage'){
+													console.log(allItem);
+												}
 												if (key == "likeDesignCollectionList") {
 													
 													itemCanvasImg =
@@ -700,28 +703,12 @@ export default defineComponent({
 			return imgWidth
 		}
 		let setCanvasImage = (img,key,left,top,data,imgWidth)=>{
+			console.log(img,key,data,imgWidth);
 			// data
+			if(key == 'likeDesignCollectionList' || key == 'FinalizeImage')imgWidth = setImageWidth(key,data.designOutfitUrl); 
+
 			let imgId = 0
 			let minioUrl = ''//表示收藏或者generate
-			// if(key == 'likeDesignCollectionList'){
-			// 	imgId = data.designOutfitId
-			// 	minioUrl = data.url
-			// }else if(key == 'upImgFiles'){
-			// 	imgId = data
-			// 	minioUrl = data.url
-			// }else if(key == 'FinalizeImage'){
-			// 	imgId = data.id
-			// 	let url = data.imgUrl.split('?')[0]
-			// 	var match = url.match(/:(\d+)\/(.*)/);
-			// 	minioUrl = match[2]
-			// }else if(key == 'disposeMoodboard'){
-			// 	let url = data.imgUrl.split('?')[0]
-			// 	var match = url.match(/:(\d+)\/(.*)/);
-			// 	minioUrl = match[2]
-			// 	// data.imgUrl
-			// }else{
-			// 	minioUrl = data.minIOPath?data.minIOPath:data.resData.minIOPath
-			// }
 			let imgUrl = data.imgUrl
 			if (key == "likeDesignCollectionList") {
 				imgUrl = data.designOutfitUrl;

src/component/HomePage/productImg.vue

@@ -80,6 +80,7 @@
 						<div class="productImg_content_item_imgBox generalScroll" v-mousewheel>
 							<div class="content_item_imgBox_itemImg" v-for="item,index in selectList[productimgMenu.value]" :key="item.id" >
 								<img @click="setGenerate(item)" v-lazy="item.designOutfitUrl?item.designOutfitUrl:item.url" alt="" :class="[driver__.driver?index == 0?driver__.index == 45?'Guide_img showEvents':'hideEvents':'hideEvents':'',item?.isChecked?'active':'']">
+								<a-checkbox v-model:checked="item.isChecked"></a-checkbox>
 							</div>
 						</div>
 						<div class="productImg_content_item_title">{{$t('ProductImg.Upload')}}</div>
@@ -97,6 +98,8 @@
 
 								>
 									<img @click="setGenerate(file)" :class="[file?.isChecked?'active':'']" :src="file?.imgUrl" class="upload_img"/>
+									<a-checkbox v-model:checked="file.isChecked"></a-checkbox>
+
 									<!-- <div class="content_item_imgBox_itemImg_delete" @click="deleteFile(index)">
 										<i class="fi fi-rr-trash"></i>
 									</div> -->

src/component/WorksPage/newScaleImage.vue

@@ -49,15 +49,15 @@
 							</div> -->
 							<!-- <div class="scaleImage_chunk_title_intro">zhh</div> -->
 							<div class="detail_right_user detail_left_right_item">
-								<div class="detail_right_user_head">
+								<div class="detail_right_user_head" @click="openOtherUsers">
-									<img v-lazy="scaleImageData?.imgUrl">
+									<img v-lazy="scaleImageData?.avatar">
 
 								</div>
 								<div class="detail_right_user_content">
 									<div>
 										<div class="scaleImage_chunk_title_intro">@{{scaleImageData.userName}}</div>
-										<div v-if="scaleImageData.isFollow == 0" class="started_btn" @click="setFollow()" >{{$t('newScaleImage.Follow')}}</div>
+										<div v-if="scaleImageData.isFollow == 0 && userInfo?.userId != scaleImageData?.accountId" style="margin-bottom: 0;" class="started_btn" @click="setFollow()" >{{$t('newScaleImage.Follow')}}</div>
-										<div v-else class="started_btn" @click="setFollow()" >{{$t('newScaleImage.Unfollow')}}</div>
+										<div v-else-if="userInfo?.userId != scaleImageData?.accountId" class="started_btn" style="margin-bottom: 0;" @click="setFollow()" >{{$t('newScaleImage.Unfollow')}}</div>
 									</div>
 									<div v-if="scaleImageData.original == 1" class="scaleImage_chunk_title_intro scaleImage_chunk_title_Original">{{$t('newScaleImage.Original')}}</div>
 									<div v-else @click="originalGetDetail()" class="scaleImage_chunk_title_intro">{{$t('newScaleImage.from')}}<span :class="{active:scaleImageData.jumpable == 1}"> @{{ scaleImageData.originalUserName }}/{{ scaleImageData.portfolioName }}</span></div>
@@ -349,7 +349,6 @@ export default defineComponent({
 		// 	let parent:any = this.$parent
 		// 	parent.likeFile(item,str)
 		// },
-		let getDeatilData = {}
 		let originalGetDetail = ()=>{
 			if(imgData.scaleImageData.jumpable != 1){
 				return message.info(t('newScaleImage.jsContent6'))
@@ -358,8 +357,10 @@ export default defineComponent({
 		}
 		let getDetail = (value:any,str:string)=>{
 			imgData.loadingShow = true
-			let data = value
+			// let data = value
-			getDeatilData = value
+			let data = {
+				id:value.id
+			}
 		    Https.axiosPost(Https.httpUrls.getPorfolioDetail,data).then(
 				(rv: any) => {
 					imgData.loadingShow = false
@@ -493,7 +494,6 @@ export default defineComponent({
 					imgData.scaleImageData.likeNum += 1
 					imgData.scaleImageData.isLike = 1
 				}
-				// getDetail(getDeatilData,'zan')
 			})
 			.catch((rv) => {
 			});
@@ -568,6 +568,15 @@ export default defineComponent({
 				}
 			})
 		}
+		let openOtherUsers = ()=>{
+			const routeUrl = router.resolve({
+				path:'/home/otherUsers',
+				query:{
+					userId:imgData.scaleImageData.accountId
+				}
+			})
+			window.open(routeUrl.href,'_blank')
+		}
 		watch(()=>imgData.scaleImageIndex,
 			(newVal,oldVal)=>{
 				let dom:any = document.querySelector('.newScaleImage_left .nav_centent')
@@ -602,6 +611,7 @@ export default defineComponent({
 			setPortfolioLike,
 			setDeleteComment,
 			setFollow,
+			openOtherUsers,
         };
     },
 	directives:{
@@ -744,6 +754,7 @@ export default defineComponent({
 		font-size: 1.6rem;
 		font-weight: 300;
 		color: #535353;
+		text-align: left;
 		// overflow: hidden;
 		// text-overflow: ellipsis;
 		// white-space: nowrap;
@@ -794,14 +805,21 @@ export default defineComponent({
 					}
 				}
 			}
+			.started_btn{
+				margin-top: 1rem;
+				border-radius: 6px;
+				padding: 0 1rem;
+			}
 		}
 		.detail_right_user_head{
 			border-radius: 50%;
 			overflow: hidden;
 			margin-right: var(--margin);
+			flex-shrink: 0;
+			cursor: pointer;
 			img{
-				width: 10rem;
+				width: 8rem;
-				height: 10rem;
+				height: 8rem;
 				object-fit: cover;
 			}
 		}
@@ -1207,7 +1225,7 @@ export default defineComponent({
 			.detail_right_work_detail{
 				.scaleImage_chunk_title_intro{
 					margin-top: calc(var(--padding) / 2);
-					height: auto
+					height: auto;
 				}
 			}
 			

src/component/WorksPage/newScaleImageMobile.vue

@@ -31,11 +31,16 @@
 							</div> -->
 							<!-- <div class="scaleImage_chunk_title_intro">zhh</div> -->
 							<div class="detail_right_user detail_left_right_item">
-								<!-- <div class="detail_right_user_head">
+								<div class="detail_right_user_head">
-									<img v-lazy="scaleImageData?.imgUrl">
+									<img v-lazy="scaleImageData?.avatar">
-								</div> -->
+								</div>
 								<div class="detail_right_user_content">
-									<div class="scaleImage_chunk_title_intro">@{{scaleImageData.userName}}</div>
+									<!-- <div class="scaleImage_chunk_title_intro">@{{scaleImageData.userName}}</div> -->
+									<div>
+										<div class="scaleImage_chunk_title_intro">@{{scaleImageData.userName}}</div>
+										<div v-if="scaleImageData.isFollow == 0" class="started_btn" @click="setFollow()" >{{$t('newScaleImage.Follow')}}</div>
+										<div v-else class="started_btn" @click="setFollow()" >{{$t('newScaleImage.Unfollow')}}</div>
+									</div>
 									<div v-if="scaleImageData.original == 1" class="scaleImage_chunk_title_intro scaleImage_chunk_title_Original">{{$t('newScaleImage.Original')}}</div>
 									<div v-else @click="originalGetDetail()" class="scaleImage_chunk_title_intro">{{$t('newScaleImage.from')}}<span :class="{active:scaleImageData.jumpable == 1}"> @{{ scaleImageData.originalUserName }}/{{ scaleImageData.portfolioName }}</span></div>
 									<!-- <div class="scaleImage_chunk_title_intro">个性签名</div>
@@ -718,6 +723,7 @@ export default defineComponent({
 			flex-direction: row;
 			justify-content: space-between;
 			width: 100%;
+			align-items: flex-start;
 			.scaleImage_chunk_title_Original{
 				color: #39215b;
 				background: #c9a2ff;
@@ -734,16 +740,18 @@ export default defineComponent({
 					}
 				}
 			}
-		}
+		} 
 		.detail_right_user_head{
 			border-radius: 50%;
 			overflow: hidden;
 			margin-right: var(--margin);
+			flex-shrink: 0;
 			img{
-				width: 10rem;
+				width: 7rem;
-				height: 10rem;
+				height: 7rem;
 				object-fit: cover;
 			}
+			
 		}
 		.detail_right_user_head:hover{
 

src/router/index.ts

@@ -255,15 +255,24 @@ const router = createRouter({
 // 刷新保存数据-
 let state:any = store.state
 window.addEventListener("beforeunload", (e) => {
-	sessionStorage.setItem(
+	localStorage.setItem(
 		"vuex_setSystemUser",
 		JSON.stringify(state.UserHabit.systemUser.value)
 	);
+	localStorage.setItem(
+		"vuex_setUserInfo",
+		JSON.stringify(state.UserHabit.userInfo)
+	);
 });
-var vuex_setSystemUser:any = sessionStorage.getItem("vuex_setSystemUser");
+var vuex_setSystemUser:any = localStorage.getItem("vuex_setSystemUser");
+var vuex_setUserInfo:any = localStorage.getItem("vuex_setUserInfo");
 if (vuex_setSystemUser == 0 || vuex_setSystemUser == 1) {
 	store.commit("setSystemUser", JSON.parse(vuex_setSystemUser));
-	sessionStorage.removeItem("vuex_setSystemUser");
+	localStorage.removeItem("vuex_setSystemUser");
+}
+if (vuex_setUserInfo) {
+	store.commit("setUserInfo", JSON.parse(vuex_setUserInfo));
+	localStorage.removeItem("vuex_setSystemUser");
 }
 
 router.beforeEach((to, from, next) => {

src/store/userHabit/userHabit.ts

@@ -14,6 +14,7 @@ interface UserHabit{
 	MalePosition:any,
 	Position:any,
 	systemUser:any,
+	userInfo:any,
     messageSystem:any,
 }
 
@@ -39,9 +40,12 @@ const userHabit : Module<UserHabit,RootState> = {
 		Position:[],
 		systemUser:{
 			value : -1
+		},
+		userInfo:{
+
 		},
 		messageSystem:{
-			messageNum:4,
+			messageNum:0,
 			messageType:{},
 		},
     },
@@ -74,8 +78,15 @@ const userHabit : Module<UserHabit,RootState> = {
 		setSystemUser(state,data){
 			state.systemUser.value = data
 		},
+		setUserInfo(state,data){
+			if(!data)return
+			for (const key in data) {
+				state.userInfo[key] = data[key]
+			}
+		},
 		clearSystemUser(state){
 			state.systemUser.value = -1
+			state.userInfo = {}
 		},
 		setMessageSystem(state,data){
 			let num = 0
@@ -97,7 +108,7 @@ const userHabit : Module<UserHabit,RootState> = {
 		closeMessageSystem(state,data){
 			if(!data){
 				state.messageSystem.messageNum = 0
-				state.messageSystem.messageType = {}
+				state.messageSystem.messageType = null
 			}else{
 
 			}

src/tool/https.js

@@ -121,6 +121,7 @@ export const Https = {
         accountLogin:`/api/account/login`, //账号密码登录接口
         getUserLanguage:`/api/account/getUserLanguage`, //获取当前用户语言
         changeUserLanguage:`/api/account/changeUserLanguage`, //切换用户当前语言
+        uploadAvatar:`/api/account/uploadAvatar`, //修改头像
 
         trialUserLogout:`/account/trialUserLogout`, //试用用户退出登录接口
         completeGuidancet:`/api/account/completeGuidance`, //用户指引结束
@@ -303,7 +304,7 @@ export const Https = {
 		setReadStatus:`/api/message/setReadStatus`,//设置消息已读
 		getHistoryNotification:`/api/message/getHistoryNotification`,//获取历史消息
 		oneClickRead:`/api/message/oneClickRead`,//全部设为已读
-		
+		personalHomepage:`/api/account/personalHomepage`,//获取个人主页信息
 		
     },
 

src/tool/util.js

@@ -428,6 +428,108 @@ const setGradual = (colorObj,colorWidth,colorHeight)=>{
 	const dataURL = canvas.toDataURL('image/jpg');
 	return dataURL
 }
+function segmentImage(markerImage,fullImage,size){
+	return new Promise((resolve, reject) => {
+		const markerCanvas = document.createElement('canvas');
+		const fullCanvas = document.createElement('canvas');
+		const nullCanvas = document.createElement('canvas');
+		const ctx1 = markerCanvas.getContext('2d');
+		const ctx2 = fullCanvas.getContext('2d');
+		const ctx3 = nullCanvas.getContext('2d');
+		let targetMarkerUrl = ''
+		let targetFullUrl = ''
+		const marker = new Image();
+		const full = new Image();
+		marker.width = size.width;
+		marker.height = size.height;
+		full.width = size.width;
+		full.height = size.height;
+		console.log(full);
+		marker.crossOrigin = 'anonymous';
+		full.crossOrigin = 'anonymous';
+		marker.onload = () => {
+			ctx1.drawImage(marker,0,0 ,size.width, size.height);
+			full.onload = () => {
+				ctx2.drawImage(full,0,0, size.width, size.height);
+				segmentImage();
+			};
+		};
+		marker.src = markerImage; 
+		full.src = fullImage;
+		function segmentImage() {
+				
+			const markerData = ctx1.getImageData(0, 0, size.width, size.height);
+			const fullData = ctx2.getImageData(0, 0, size.width, size.height);
+
+			const color1 = { r: 255, g: 0, b: 0 }; // 第一个颜色
+			const color2 = { r: 0, g: 255, b: 0 }; // 第二个颜色
+
+			const threshold = 50; // 颜色匹配的容差
+
+			const isColorMatch = (r, g, b, color) => 
+				Math.abs(r - color.r) < threshold &&
+				Math.abs(g - color.g) < threshold &&
+				Math.abs(b - color.b) < threshold;
+
+			const output1 = ctx3.createImageData(size.width, size.height);
+			const output2 = ctx3.createImageData(size.width, size.height);
+			for (let i = 0; i < markerData.data.length; i += 4) {
+				const r = markerData.data[i];
+				const g = markerData.data[i + 1];
+				const b = markerData.data[i + 2];
+
+				if (isColorMatch(r, g, b, color1)) {
+					// 将完整图像中对应的像素复制到第一个输出图像
+					output1.data[i] = fullData.data[i];
+					output1.data[i + 1] = fullData.data[i + 1];
+					output1.data[i + 2] = fullData.data[i + 2];
+					output1.data[i + 3] = fullData.data[i + 3];
+					
+					// 第二个图像的像素置为透明
+					output2.data[i] = 0;
+					output2.data[i + 1] = 0;
+					output2.data[i + 2] = 0;
+					output2.data[i + 3] = 0;
+				} else if (isColorMatch(r, g, b, color2)) {
+					// 将完整图像中对应的像素复制到第二个输出图像
+					output2.data[i] = fullData.data[i];
+					output2.data[i + 1] = fullData.data[i + 1];
+					output2.data[i + 2] = fullData.data[i + 2];
+					output2.data[i + 3] = fullData.data[i + 3];
+
+					// 第一个图像的像素置为透明
+					output1.data[i] = 0;
+					output1.data[i + 1] = 0;
+					output1.data[i + 2] = 0;
+					output1.data[i + 3] = 0;
+				} else {
+					// 两个图像的像素都置为透明
+					output1.data[i] = 0;
+					output1.data[i + 1] = 0;
+					output1.data[i + 2] = 0;
+					output1.data[i + 3] = 0;
+
+					output2.data[i] = 0;
+					output2.data[i + 1] = 0;
+					output2.data[i + 2] = 0;
+					output2.data[i + 3] = 0;
+				}
+			}
+			const createImageURL = (imageData) => {
+				const canvas = document.createElement('canvas');
+				canvas.width = size.width;
+				canvas.height = size.height;
+				const ctx = canvas.getContext('2d');
+				ctx.putImageData(imageData, 0, 0);
+				return canvas.toDataURL('image/png');
+			};
+			targetMarkerUrl =createImageURL(output1)
+			targetFullUrl =createImageURL(output2)
+			console.log(targetFullUrl,targetMarkerUrl);
+			resolve({targetMarkerUrl, targetFullUrl})
+		}
+	})
+}
 export {
 	isEmail,
 	getUploadUrl,
@@ -445,4 +547,5 @@ export {
 	murmur,
 	setGradual,
 	calculateGradientCoordinate,
+	segmentImage,
 }

src/views/HomeMain.vue

@@ -4,20 +4,20 @@
             <div class="homeMain_right_content">
                 <div class="homeMain_user">
 					<div class="homeMain_user_icon" @click="openAccount">
-
+						<img :src="userInfo?.avatar" alt="">
 					</div>
 					<div class="homeMain_user_detail">
 						<div v-if="isTest" class="username">{{$t('Header.hello')}}@{{ $t('isTest.userName') }}</div>
-						<div v-else class="username">{{$t('Header.hello')}}@{{ userInfo?.userName }}</div>
+						<div v-else class="username">{{$t('Header.hello')}}@{{ cookieUserInfo?.userName }}</div>
 						<div class="homeMain_user_detail_item homeMain_user_detail_attention">
 							<div class="attention_item">
 							<!-- 点击事件就用下面的div -->
 							<!-- <div class="attention_item attention_item_active"> -->
-								<div>123</div>
+								<div>{{ userInfo?.followeeCount }}</div>
 								<span>关注</span>
 							</div>
 							<div class="attention_item">
-								<div>321</div>
+								<div>{{ userInfo?.followerCount }}</div>
 								<span>粉丝</span>
 							</div>
 							<div class="attention_item">
@@ -34,7 +34,7 @@
 				</div>
                 <div class="homeMain_user_content">
                     <div v-if="isTest" class="username"><span>/</span> {{$t('Header.hello')}}@{{ $t('isTest.userName') }}</div>
-                    <div v-else class="username"><span>/</span> {{$t('Header.hello')}}@{{ userInfo?.userName }}</div>
+                    <div v-else class="username"><span>/</span> {{$t('Header.hello')}}@{{ cookieUserInfo?.userName }}</div>
                     <div
 						v-if="!isMurmur"
 
@@ -110,7 +110,7 @@
 					<i class="fi fi-rs-notebook"></i>
 					<span class="select_item_des">{{$t('Header.ViewOrders')}}</span>
 				</div>
-				<router-link class="select_item" v-if="AdministratorUserIdList.indexOf(userInfo?.userId) >= 0"  :to="`/administrator`">
+				<router-link class="select_item" v-if="AdministratorUserIdList.indexOf(cookieUserInfo?.userId) >= 0"  :to="`/administrator`">
 					<span class="icon iconfont icon-yonghu"></span>
 					<span class="select_item_des">Administrator</span>
 				</router-link>
@@ -186,7 +186,9 @@ export default defineComponent({
         const store = useStore();
 		const {t} = useI18n()
 		const {locale} = useI18n()
-		
+		let userInfo= computed(()=>{
+			return store.state.UserHabit.userInfo
+		})
 		let isTest = ref()
 		let isMurmur = ref()
 		let credits = computed(()=>{
@@ -245,6 +247,7 @@ export default defineComponent({
 		})
 		return {
 			store,
+			userInfo,
 			t,
 			locale,
 			isTest,
@@ -267,7 +270,7 @@ export default defineComponent({
             emailCode: ["", "", "", "", "", ""], //邮箱验证码
             time: 60, //60秒倒计时
             timer: 0,
-            userInfo: {},
+            cookieUserInfo: {},
             timerOperate: null,
             numTime: 30,
             timerSec: null,
@@ -303,13 +306,13 @@ export default defineComponent({
         this.isTest =JSON.parse(isTest)
         let isMurmur = getCookie('isMurmur')//获取是否是试用用户
         this.isMurmur =JSON.parse(isMurmur)
-        this.userInfo = JSON.parse(getCookie("userInfo"));
+        this.cookieUserInfo = JSON.parse(getCookie("userInfo"));
-        if (!this.userInfo) {
+        if (!this.cookieUserInfo) {
             this.$router.replace("/");
         } else {
-            this.accountIsLogin(this.userInfo);
+            this.accountIsLogin(this.cookieUserInfo);
         }
-        this.isHaveBindEmail = this.userInfo?.email ? true : false;
+        this.isHaveBindEmail = this.cookieUserInfo?.email ? true : false;
 		if(!this.isMurmur){
 			this.operateClick();
 			document.addEventListener("click", this.operateClick);
@@ -447,7 +450,7 @@ export default defineComponent({
         //登出
         async logout() {
             let data = {
-                userId: this.userInfo.userId,
+                userId: this.cookieUserInfo.userId,
             };
 			let isTest = getCookie('isTest')
 			// console.log(getCookie("token"));
@@ -636,6 +639,11 @@ export default defineComponent({
 				background-color: #000;
 				border-radius: 50%;
 				cursor: pointer;
+				img{
+					width: 100%;
+					height: 100%;
+					object-fit: contain;
+				}
 				// transition: all .3s;
 			}
 			.homeMain_user_detail{

src/views/HomeRecommend.vue

@@ -123,7 +123,10 @@ export default defineComponent({
 			// console.log(getCookie("token"));
 			Https.axiosPost(Https.httpUrls.accountLogout, data).then((rv) => {
 				clonAllCookie();
-			});
+			}).catch((err) => {
+				clonAllCookie();
+			})
+			;
 		}
 		let goHome = ()=>{
 			router.push('/home');

src/views/HomeView/Works.vue

@@ -39,7 +39,7 @@ import newScaleImage from "@/component/WorksPage/newScaleImage.vue";
 import newScaleImageMobile from "@/component/WorksPage/newScaleImageMobile.vue";
 import { useI18n } from "vue-i18n";
 import generalMenu from "@/component/HomePage/generalMenu.vue";
-
+import { useRouter,useRoute } from 'vue-router'
 import Falls from "@/component/WorksPage/Falls.vue";
 export default defineComponent({
     components: {
@@ -63,6 +63,7 @@ export default defineComponent({
 		 },
 	},
     setup(prop) {
+		const router = useRouter()
 		let filter:any = reactive({
 			worksSelect: 'all',
 			isNull:true,
@@ -161,9 +162,9 @@ export default defineComponent({
 			let data = filter.getListDate
 			if(filter.isShowMark && !filter.isNoData)return
 			filter.isShowMark = true
-			// if(prop.otherUsers){
+			if(prop.otherUsers){
-			// 	console.log(prop.userId);
+				data.accountId = prop.userId
-			// }
+			}
 			Https.axiosPost(Https.httpUrls.getPorfolio, data)
                 .then((rv) => {
 					if(data.page == 1 && rv.content.length == 0){
@@ -230,6 +231,12 @@ export default defineComponent({
 			nextTick(()=>{
 				setPorfolioDom()
 			})
+			let data = {
+				id:router.currentRoute.value.query?.workId
+			}
+			if(data.id){
+				getImgScale(data)
+			}
 		})
         return {
 			...toRefs(filter),
@@ -302,15 +309,7 @@ export default defineComponent({
 		@media (max-width: 768px) {
 			background: #fff;
 		}
-		.page_loading_box{
+		
-			text-align: center;
-			height: 50px;
-			.page_loading{
-				display: block;
-				width: 50px;
-				height: 50px;
-			}
-		}
 		>img{
 			position: relative;
 			left: 50%;

src/views/LoginPage.vue

@@ -478,6 +478,13 @@ export default defineComponent({
                         setCookie("isBeginnerNum", 0);//从第一步开始，机器人开始的话就是从第二部开始
                         setCookie("userInfo", JSON.stringify(rv));
 						this.store.commit("setSystemUser", rv.systemUser)
+						let obj:any = {
+							avatar : rv.avatar,
+							followeeCount : rv.followeeCount,
+							followerCount : rv.followerCount,
+						}
+						
+						this.store.commit("setUserInfo", obj)
 						if(rv.systemUser == 0){
 							this.turnToHomePage('/Square');
 						}else{

tsconfig.json

@@ -39,6 +39,7 @@
     "tests/**/*.ts",
     "tests/**/*.tsx",
     "src/**/*.js",
+    "src/**/*.svg",
   ],
   "exclude": [
     "node_modules"