This commit is contained in:
X1627315083
2024-08-23 10:19:02 +08:00
parent eff35d8a79
commit eb54023940
35 changed files with 1709 additions and 452 deletions

View File

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

View File

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

View File

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

View File

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

View File

@@ -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>
<!-- <img class="upload_img_icon" src="@/assets/images/homePage/add_file.png"> -->
<!-- <i class="fi fi-br-upload"></i> -->
<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;
left: 0;
transform: translateX(-100%);
:deep(.ant-upload-list-picture-card-container){
display: none !important;
}
}
margin-bottom: 5rem;
}
.accountEdit_page_body{

View File

@@ -1,44 +1,110 @@
<template>
<div class="account_message">
<div class="account_message_title modal_title_text">
<div class="account_followFans">
<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-tab-pane key="1" tab="系统消息">Content of Tab Pane 1</a-tab-pane>
<a-tab-pane key="2" tab="私信" force-render>Content of Tab Pane 2</a-tab-pane>
<a-tab-pane key="3" tab="评论">Content of Tab Pane 3</a-tab-pane>
<a-tab-pane key="4" tab="点赞">Content of Tab Pane 3</a-tab-pane>
<a-tab-pane key="5" tab="客服">Content of Tab Pane 3</a-tab-pane>
<a-tabs class="account_followFans_body" v-model:activeKey="activeKey" @change="changeTabs">
<a-tab-pane v-for="item in messageList" :key="item.key">
<follow v-if="item.key == 'follow'" :ref="item.key"></follow>
<fans v-if="item.key == 'fans'" :ref="item.key"></fans>
<template #tab>
<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 setUserData = ()=>{
router.push({path:'/home/account/accountEdit'})
let domRefs:any = reactive({
follow:ref(null),
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{
padding: 0rem 5rem;
.account_followFans_body{
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>

View File

@@ -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 class="modal_title_text_assistant">邮箱: 2222</div>
<div>{{ cookieUserInfo.userName }}</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,
}

View File

@@ -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>
<privateChat v-if="item.key == 'privateChat'" :ref="item.key" @setReadStatus="setReadStatus" @setAllmessage="setAllmessage"></privateChat>
<comment v-if="item.key == 'comment'" :ref="item.key" @setReadStatus="setReadStatus" @setAllmessage="setAllmessage"></comment>
<likeMessage v-if="item.key == 'like'" :ref="item.key" @setReadStatus="setReadStatus" @setAllmessage="setAllmessage"></likeMessage>
<newFollow v-if="item.key == 'follow'" :ref="item.key" @setReadStatus="setReadStatus" @setAllmessage="setAllmessage"></newFollow>
<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" :getHistory="getHistory"></privateChat>
<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" :getHistory="getHistory"></likeMessage>
<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 = {
page:1,
size:10,
type:key
}
getHistory(data)
// if(accountMessage.activeKey == 'service')return
}
let setReadStatus = (value:any)=>{
if(value.isRead == 1)return
let data = {
type:accountMessage.activeKey,
notificationIdList:value.id
}
Https.axiosPost(Https.httpUrls.setReadStatus,'',{params:data}).then((rv)=>{
if(rv){
console.log(rv);
// store.commit('setMessageSystem',rv)
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)
})
})
}
let setAllmessage = ()=>{
let data = {
type:accountMessage.activeKey
}
Https.axiosPost(Https.httpUrls.oneClickRead,'',{params:data}).then((rv)=>{
return new Promise((resolve,reject)=>{
let data = {
type:accountMessage.activeKey
}
Https.axiosPost(Https.httpUrls.oneClickRead,'',{params:data}).then((rv)=>{
resolve(rv)
}).catch((err)=>{
reject(err
)
})
})
}
let getHistory = (data:any)=>{
nextTick(()=>{
let dom = domRefs[data.type][0]
if(dom.dataList && dom.dataList.length > 0)return
Https.axiosPost(Https.httpUrls.getHistoryNotification,data).then((rv)=>{
return new Promise((resolve,reject)=>{
data.type = accountMessage.activeKey
let url = Https.httpUrls.getHistoryNotification
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)
// domRefs[data.type][0].setmessageList(rv,data)
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>

View File

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

View File

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

View File

@@ -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">
<img src="https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png" alt="">
<div class="account_generalMessage_item_right_img" @click.stop="openOtherUsers(item)">
<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_center modal_title_text_assistant">回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容</div>
<div class="account_generalMessage_item_right_works modal_title_text_intro">回复作品名</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">{{ item.content }}</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_right">
<div class="account_generalMessage_item_right_img">
<img src="https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png" 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_center modal_title_text_assistant">回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容</div>
<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 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>
@@ -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([
{
name:'张三',
avatar:'https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png',
time:'2024-01-01 12:00:00',
content:'关注了你',
isRead:false
},
{
name:'李四',
avatar:'https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png',
}
])
dataList:[
],
page:1,
size:10,
isNoData: false,
isShowMark: false,
})
// 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)
let openOtherUsers = ()=>{
let loadingDom:any = ref(null)
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)=>{
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(){

View File

@@ -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">
<img src="https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png" alt="">
<div class="account_generalMessage_item_right_img" @click="openOtherUsers(item)">
<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)=>{
accountMessage.dataList = data.content
let loadingDom:any = ref(null)
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)
item.isRead = 1
prop.setReadStatus(item).then((rv:any)=>{
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(){

View File

@@ -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">
<img src="https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png" alt="">
<div class="account_generalMessage_item_right_img" @click="openOtherUsers(item)">
<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)=>{
accountMessage.dataList = data.content
let loadingDom:any = ref(null)
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)
item.isRead = 1
prop.setReadStatus(item).then((rv:any)=>{
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(){

View File

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

View File

@@ -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'],
props:{
},
// emits:['putListData'],
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)=>{
console.log(data);
data.content.forEach((item:any) => {
item.content = JSON.parse(item.content)
});
accountMessage.dataList = data.content
let loadingDom:any = ref(null)
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
}
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(){

View File

@@ -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')
// 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)
let getUserDetail = (id:any)=>{
let data = {
id:id
}
Https.axiosGet(Https.httpUrls.personalHomepage,{params:data}).then((rv)=>{
if(rv){
otherUsers.userContent = rv
}
})
}
onMounted (()=>{
otherUsers.userId = router.currentRoute.value.query?.id
otherUsers.userId = router.currentRoute.value.query?.userId
// alert()
getUserDetail(otherUsers.userId)
})
return{
...toRefs(otherUsers),

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -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">
<img v-lazy="scaleImageData?.imgUrl">
<div class="detail_right_user_head" @click="openOtherUsers">
<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-else class="started_btn" @click="setFollow()" >{{$t('newScaleImage.Unfollow')}}</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-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
getDeatilData = value
// let data = 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;
height: 10rem;
width: 8rem;
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;
}
}

View File

@@ -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">
<img v-lazy="scaleImageData?.imgUrl">
</div> -->
<div class="detail_right_user_head">
<img v-lazy="scaleImageData?.avatar">
</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;
height: 10rem;
width: 7rem;
height: 7rem;
object-fit: cover;
}
}
.detail_right_user_head:hover{

View File

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

View File

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

View File

@@ -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`,//获取个人主页信息
},

View File

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

View File

@@ -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"));
if (!this.userInfo) {
this.cookieUserInfo = JSON.parse(getCookie("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{

View File

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

View File

@@ -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){
// console.log(prop.userId);
// }
if(prop.otherUsers){
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%;

View File

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

View File

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