+
-
+
-
@@ -86,8 +132,6 @@
High-definition Download
-
123
-
321
Width:
@@ -100,7 +144,7 @@
all
-
HD Export
+
HD Export
Export
@@ -114,13 +158,13 @@
import {defineComponent, computed, h, ref, nextTick, inject, reactive, onMounted,
} from "vue";
import { Https } from "@/tool/https";
-import { multiselectJS } from "@/tool/canvasDrawing";
import scaleImage from "@/component/HomePage/scaleImage.vue";
import ExportNewCoolection from "@/component/HomePage/ExportNewCoolection.vue";
import { useStore } from "vuex";
import JSZip, { forEach } from "jszip";
import { message, Modal } from "ant-design-vue";
const FileSaver = require("file-saver");
+import { multiselectJS,JSRectUpdata,JSchangeType,JScanvasMouseDown,JScanvasMouseMove,JScreateCheck } from "@/tool/canvasDrawing";
export default defineComponent({
components: {
scaleImage,
@@ -163,11 +207,14 @@ export default defineComponent({
let likeDesign = 4; //整体图分组
let disposeMoodboardShow = true;
-
- let canvasState = ref([])//存放canvas操作
- let stateIndex = ref(-1)//表示撤回数量
+
+ let canvasState = ref()//存放canvas操作
+ let reverseCanvasState = ref([])//存放canvas操作
+ let normalCanvasState = ref([])//存放canvas操作
let isLoadCanvas = false//撤回或者反撤回false为撤回
let init = () => {
+ normalCanvasState.value = []
+ reverseCanvasState.value = []
showUpgradePlan.value = true;
nextTick().then(async () => {
allBoardData.value.likeDesignCollectionList =
@@ -187,15 +234,27 @@ export default defineComponent({
isDrawingMode: false, // 开启绘图模式
// preserveObjectStacking: true,
});
+ JSchangeType(canvas,'init')
canvasOnDrop()//开启鼠标到画布事件
setRemoveImage()//设置元素删除
canvas.on("object:modified", ()=>{
updateCanvasState()
});
- canvas.on('selection:created', ()=>{
- updateCanvasState('created')
- });
- // canvas.on("object:added", updateCanvasState);
+ //鼠标移动
+ canvas.on("mouse:move", event =>setCanvasMove(event));
+ canvas.on("mouse:out", event=>setCanvasOut(event));
+ canvas.on("mouse:down", event=>setCanvasDown(event));
+ canvas.on("mouse:up", event=>setCanvasUp(event));
+ // canvas.on('path:created', (event)=>{updateCanvasState()});
+ // canvas.on("selection:created", (event)=>{setZIndex(event)});
+ // canvas.on('object:removed', function() {
+ // });
+ // canvas.on("object:added", (obj)=>{
+ // obj.target.cornerSize = 10
+ // obj.target.transparentCorners = false
+ // });
+ fabric.Object.prototype.cornerSize = 10
+ fabric.Object.prototype.transparentCorners = false
// setCanvasOperation()//设置监听添加修改画布元素，用来做撤回功能
let arr = [
"disposeMoodboard",
@@ -303,24 +362,29 @@ export default defineComponent({
canvas.setHeight(canvasWH.value.height);
}
}
+ updateCanvasState('')//加载完成后记录一下
});
};
let setRemoveImage = ()=>{
let deleteObject = (eventData, transform)=> {
- var target = [transform.target];
- if(transform.target._objects){
- target = transform.target._objects
- }
- // canvas.discardActiveObject() // 丢弃当前活动的对象和触发事件。 如果fabric作为鼠标事件的结果调用该函数，则将该事件作为参数传递给自定义事件的fire函数。 当作为一个方法使用时，参数没有任何应用。
- // const sel = new fabric.ActiveSelection(canvas.getObjects(), {
- // canvas
- // })
+ // var target = [transform.target];
+ let target = canvas.getActiveObjects()
target.forEach((item)=>{
- var canvas = item.canvas;
- canvas.remove(item);
+ // var canvas = item.canvas;
+ // canvas.remove(item);
+ canvas.fxRemove(item, {
+ onComplete(){
+ canvas.discardActiveObject(); // 丢弃当前选中的对象
+ canvas.renderAll(); // 重新渲染 Canvas
+ }
+ })
+ canvas.FX_DURATION = 300
})
- canvas.requestRenderAll();
- canvas.discardActiveObject() // 丢弃当前活动的对象和触发事件。 如果fabric作为鼠标事件的结果调用该函数，则将该事件作为参数传递给自定义事件的fire函数。 当作为一个方法使用时，参数没有任何应用。
+ // canvas.requestRenderAll();
+ // canvas.discardActiveObject() // 丢弃当前活动的对象和触发事件。 如果fabric作为鼠标事件的结果调用该函数，则将该事件作为参数传递给自定义事件的fire函数。 当作为一个方法使用时，参数没有任何应用。
+ // canvas.discardActiveObject(); // 丢弃当前选中的对象
+ // canvas.renderAll(); // 重新渲染 Canvas
+ updateCanvasState('remove')
}
const deleteIcon = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAACxAAAAsQHGLUmNAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAdBJREFUSImt1r1uU0EQBeDPFh1pgBQEEwFVAg9BROhCAh1FAg1gkMA8DA0oKOEB3IEIRQgF4SEQBIUC6ENSGgPFXaPx+udeSxxppPXOzJnZ8e7MrRmPWdzANZxPv+EbvmILL/G9hGcADayjgz8l0kUb56qSX8dhBeJcDrFSRv44ZRQdt3EPczieZB5NvB1ymta4zCP5J1yucOIFfM6CDJykob8s73GiAnkPJ7Eb/H9iJhpsZJlPQh6D7AWe9Z5iFr+CIpalhjWspnXZ/pXA01FURkv/HxpxK+g2UE+yGfZXM5+doHt4DEtB2R5dAXdD9nfG2LVxNa2XKGreiziXGefZ5rKZbCLmg/4jHIWNqSEZ1fC0IrnE0bM5qqdFGWoV92RBf/P/S3RRVqI3YaOZGd8eQpgHXMt8HgTd67qi5fZwMzOO5XuREmim9ShEji04q78tLwSDSR/aYuD599DgeVDsY3pMhqOQt4pnUXlGf7PbTQ5VcQofgv8BTudGK/rb9Z6it5RhEV+CX1cxYoeiZXDg7OC+4vpNJbmkuC3vMtsuHpVltKzo55OOzINxmeeYxhPVhn5H0ftnhhGNeu49NBSjdBkX9H+27Cvu+Sv8GEXwF9+O3b1zwZqdAAAAAElFTkSuQmCC"
// 创建删除图片元素
@@ -348,22 +412,7 @@ export default defineComponent({
cornerSize: 24
})
}
- //设置画布监听修改添加事件，用来做撤回功能
- let updateCanvasState = (str) =>{
- if (!isLoadCanvas) {
- const canvasAsJson = JSON.stringify(canvas.toJSON());
- if(str == 'created'){
- if(canvasState.value.length == 0){
- canvasState.value.push(canvasAsJson);
- }
- }else{
- canvasState.value.push(canvasAsJson);
- }
- stateIndex.value = canvasState.value.length - 1;
- } else {
- isLoadCanvas = false;
- }
- }
+
let setImageWidth = (key)=>{
let imgWidth = canvasWH.value.width; //这是设置画布等宽
if (
@@ -405,12 +454,9 @@ export default defineComponent({
scaleX:
imgWidth / img.width,
scaleY:(img.width * proportion * scaleWH) / img.height,
- cornerSize: 10, // 选中时，角的大小为20
- // lockRotation:true,
- // lockScalingX:true,
+ // cornerSize: 10, // 选中时，角的大小为20
+ // transparentCorners: false, // 选中时，角是被填充了。true 空心；false 实心
lockRotation: true,
- transparentCorners: false, // 选中时，角是被填充了。true 空心；false 实心
- // cornerColor: "#a1de93", // 选中时，角的颜色是 青色
});
}
@@ -552,24 +598,19 @@ export default defineComponent({
canvas.setWidth(canvasWH.value.width);
};
- let closeNav = ref(0)
- let setCloseNav = (num)=>{
- if(closeNav.value == num){
- closeNav.value = -1
- }else{
- closeNav.value = num
- }
+ let closeNav = ref({
+ nav:true,
+ tool:false,
+ move:false,
+ })
+ let setCloseNav = (key)=>{
+ closeNav.value[key] = !closeNav.value[key]
}
- // let multiselect = ()=>{
- // console.log(canvas);
- // multiselectJS(canvas)
- // }
function multiselect() {//获取整体宽高
canvas.discardActiveObject() // 丢弃当前活动的对象和触发事件。 如果fabric作为鼠标事件的结果调用该函数，则将该事件作为参数传递给自定义事件的fire函数。 当作为一个方法使用时，参数没有任何应用。
const sel = new fabric.ActiveSelection(canvas.getObjects(), {
canvas
})
- // console.log(sel)
canvas.setActiveObject(sel)
canvas.requestRenderAll()
const activeObject = canvas.getActiveObject(); // 获取当前选中的整体对象
@@ -579,7 +620,6 @@ export default defineComponent({
console.log('Total Width:', totalWidth);
console.log('Total Height:', totalHeight);
}
-
}
let currentType = ref({
type:'',
@@ -591,31 +631,31 @@ export default defineComponent({
}
let canvasOnDrop = ()=>{
canvas.on('drop', (opt)=> {
- // 省略部分代码......
- let offset = {
- left: canvas.getSelectionElement().getBoundingClientRect().left,
- top: canvas.getSelectionElement().getBoundingClientRect().top
- }
- let point = {
- x: opt.e.x - offset.left,
- y: opt.e.y - offset.top,
- }
- let pointerVpt = canvas.restorePointerVpt(point)
- switch (currentType.value.type) {
- case 'colorBoards':
- let rect = setGroup(currentType.value.data)
- setCanvasColor(pointerVpt.y, pointerVpt.x,rect)
- break
- case 'moodboardFiles':
- createRect(pointerVpt.y, pointerVpt.x,currentType.value.type)
- break
- default :
- createRect(pointerVpt.y, pointerVpt.x,currentType.value.type)
- break
- }
- // 创建完元素，把当前操作的元素类型设置回 null
+ let offset = {
+ left: canvas.getSelectionElement().getBoundingClientRect().left,
+ top: canvas.getSelectionElement().getBoundingClientRect().top
+ }
+ let point = {
+ x: opt.e.x - offset.left,
+ y: opt.e.y - offset.top,
+ }
+ let pointerVpt = canvas.restorePointerVpt(point)
+ switch (currentType.value.type) {
+ case 'colorBoards':
+ let rect = setGroup(currentType.value.data)
+ setCanvasColor(pointerVpt.y, pointerVpt.x,rect)
+ break
+ case 'moodboardFiles':
+ createImage(pointerVpt.y, pointerVpt.x,currentType.value.type)
+ break
+ default :
+ createImage(pointerVpt.y, pointerVpt.x,currentType.value.type)
+ break
+ }
+ // 创建完元素，把当前操作的元素类型设置回 null
currentType.value.type = null
currentType.value.data = null
+
})
}
let setGroup = (data)=>{
@@ -651,43 +691,274 @@ export default defineComponent({
top,
width: rect.width,
fill: "rgb(255,255,255)",
- cornerSize: 10, // 选中时，角的大小为20
- transparentCorners: false, // 选中时，角是被填充了。true 空心；false 实心
stroke: "#212121",
strokeWidth: 1,
});
- // 将矩形对象添加到 canvas 中
-
canvas.add(group);
return group
}
// 创建矩形
- let createRect = (top, left,key)=> {
+ let createImage = async (top, left,key)=> {
let itemCanvasImg = currentType.value.data.imgUrl
if(key == 'likeDesignCollectionList'){
itemCanvasImg = currentType.value.data.designOutfitUrl;
}
- fabric.Image.fromURL(itemCanvasImg,(img) => {
- setCanvasImage(img,key,left,top)//设置图片
- canvas.add(img);
- },{ crossOrigin: "Anonymous" });
+ await new Promise((resolve,reject)=>{
+ fabric.Image.fromURL(itemCanvasImg,(img) => {
+ setCanvasImage(img,key,left,top)//设置图片
+ canvas.add(img);
+ resolve()
+ },{ crossOrigin: "Anonymous" });
+ })
+ updateCanvasState()
+ }
+ //设置画布监听修改添加事件，用来做撤回功能
+ let updateCanvasState = (str) =>{
+ const canvasAsJson = JSON.stringify(canvas.toJSON());
+ if(str == 'loadingCompleted'){
+ // reverseCanvasState.value.push(canvasAsJson);
+ }
+ normalCanvasState.value.push(canvasAsJson);
+ if (isLoadCanvas) {
+ reverseCanvasState.value = []
+ isLoadCanvas = false;
+ canvasState.value = canvasAsJson
+ }
}
//撤回
- let historyState = (index)=> {
- if(index<=0){
- index = 0
- }else if (index >canvasState.value.length){
- index = canvasState.value.length-1
+ let historyState = (str)=> {
+ if(str == 'reverse' && reverseCanvasState.value.length > 0){
+ canvasState.value = reverseCanvasState.value[reverseCanvasState.value.length-1]
+ let obj = reverseCanvasState.value.pop()
+ normalCanvasState.value.push(obj);
+ }else if(str == '' && normalCanvasState.value.length > 1){
+ let obj = normalCanvasState.value.pop()
+ reverseCanvasState.value.push(obj);
+ canvasState.value = normalCanvasState.value[normalCanvasState.value.length-1]
+ isLoadCanvas = true;
+ }else{
+ return
+ }
+ canvas.loadFromJSON(canvasState.value, () => {});
+ }
+
+ //在画布进行画画
+ let operation = ref('move')
+ let operationMode = ref('fill')
+ //铅笔颜色 大小
+ let canvasPencilColor = ref('#000000')
+ let canvasPencilWidth = ref(20)
+ let setOperation = (str)=>{
+ operation.value = str
+ canvas.discardActiveObject();//取消所有选中边框
+ clearPatterning()//临时图形置为空并且添加撤回对象里面
+ if(str == 'pencil'){
+ setPencil()
+ }else if(str == 'move'){
+ setMove()
+ canvas.forEachObject((obj) =>obj.selectable = true);
+ JSchangeType(canvas,'init')
+ }else if(str == 'eraser'){
+ setEraser()
+ }else{
+ canvas.forEachObject((obj) =>obj.selectable = false);
+ canvas.isDrawingMode = false
+ }
+ }
+ let setOperationMode = (str) =>{
+ operationMode.value = str
+ }
+ let brushIndicator = new fabric.Circle({
+ radius:canvasPencilWidth.value/2,
+ fill: '#fff',
+ stroke: '#000',
+ strokeWidth: 0,
+ originX: 'center',
+ originY: 'center',
+ visible :true,
+ erasable: false,
+ });
+ let setPencil =()=>{
+ let pencil = new fabric.PencilBrush(canvas); //笔
+ canvas.preserveObjectStacking = true;
+ canvas.isDrawingMode = true//开启绘画模式
+ canvas.freeDrawingBrush = pencil
+ canvas.freeDrawingBrush.color = canvasPencilColor.value;
+ brushIndicator.set('fill',canvasPencilColor.value)
+ canvas.freeDrawingBrush.isEraser = false
+ canvas.freeDrawingBrush.width = canvasPencilWidth.value;
+ }
+
+ let setMove = () =>{
+ canvas.isDrawingMode = false
+ canvas.forEachObject((obj) =>obj.selectable = true);
+ }
+ 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 = canvasPencilWidth.value;
+ }
+ let setTimeOut = {
+ color:null,
+ width:null,
+ }//给切换颜色设置防抖
+ let setPencilColor = ()=>{//切换颜色给铅笔设置颜色
+ clearTimeout(setTimeOut.color)
+ setTimeOut.color = setTimeout(()=>{
+ // brushIndicator.fill = canvasPencilColor.value;
+ if(canvas.freeDrawingBrush.isEraser){
+
+ }else{
+ brushIndicator.set({fill: canvasPencilColor.value});
+ }
+ canvas.freeDrawingBrush.color = canvasPencilColor.value;
+
+ },300)
+ }
+ let setPencilWidth = ()=>{//切换颜色给铅笔设置颜色
+ clearTimeout(setTimeOut.width)
+ canvasPencilWidth.value = Number(canvasPencilWidth.value)
+ setTimeOut.width = setTimeout(()=>{
+ canvas.freeDrawingBrush.width = canvasPencilWidth.value;
+ // setPencil()
+ },300)
+ }
+ let downPoint = null;//鼠标按下位置
+ let upPoint = null;//鼠标抬起位置
+ let currentPatterning = null//临时图形
+ let polyLineBtn = null
+ let createPatterningIs = false
+ let clearPatterning = () =>{
+ if(createPatterningIs){
+ canvas.remove(currentPatterning)
+ }
+ currentPatterning = null
+ canvas.remove(polyLineBtn)
+ updateCanvasState()
+ }
+ //设置再画布上移动
+ let setCanvasMove = (event)=>{
+ var pointer = canvas.getPointer(event.e);
+ if(canvas.isDrawingMode){
+ canvas.setCursor('none');
+ if(!canvas.contains(brushIndicator)){
+ canvas.add(brushIndicator)
+ canvas.bringToFront(brushIndicator);//设置优先级最高
+ }
+ // brushIndicator.fill = canvasPencilColor.value
+ brushIndicator.set({ left: pointer.x, top: pointer.y, visible: true,radius:canvasPencilWidth.value/2 });
+
+ }else{
+ if(createPatterningIs){
+ JScanvasMouseMove(operation.value,event,currentPatterning,downPoint)
+ }
+ }
+ canvas.requestRenderAll()
+ }
+ let setCanvasOut = (event)=>{
+ canvas.remove(brushIndicator)//鼠标移出删除绘画范围的圆形
+ }
+ //设置再画布上按下
+ let setCanvasDown = (event)=>{
+
+ downPoint = event.absolutePointer
+ let arr = ['rect','line','circle','triangle','ellipse','fold']
+ if(arr.indexOf(operation.value) > -1){
+ JSchangeType(canvas,operation.value)
+ createPatterningIs = true
+ if(currentPatterning && operation.value == 'fold'){
+ canvas.skipTargetFind = false
+ currentPatterning.points.push({
+ x: downPoint.x,
+ y: downPoint.y
+ })
+ // currentPatterning = JScanvasMouseDown(operation.value,event,canvasPencilWidth.value,currentPatterning)
+ }else{
+ if(operation.value == 'fold'){
+ polyLineBtn = JScreateCheck(event)
+ polyLineBtn.on('mousedown',()=>{
+ canvas.skipTargetFind = true
+ let points = currentPatterning.points
+ currentPatterning.points.pop()
+ currentPatterning.points.pop()
+ // canvas.remove(currentPatterning)
+ // let polyline = new fabric.Polyline(points, {
+ // fill: 'transparent',
+ // stroke: canvasPencilColor.value,
+ // strokeWidth:canvasPencilWidth.value,
+ // selection:false,
+ // })
+ // canvas.add(polyline)
+ currentPatterning.set({stroke: canvasPencilColor.value})
+ createPatterningIs = false
+ clearPatterning()//临时图形置为空并且添加撤回对象里面
+ })
+ canvas.add(polyLineBtn)
+ }
+ currentPatterning = JScanvasMouseDown(operation.value,event,canvasPencilWidth.value,currentPatterning)
+ canvas.add(currentPatterning)
+ canvas.bringToFront(currentPatterning);//设置优先级最高
+ }
+ }else{
+ createPatterningIs = false
+ }
+ }
+ //设置再画布上抬起
+ let setCanvasUp = (event)=>{
+ upPoint = event.absolutePointer
+ if(canvas.isDrawingMode){
+ canvas.remove(brushIndicator)
+ updateCanvasState()
+ }else{
+ // event.target && (event.target.bringToFront())//设置优先级
+ }
+ if(createPatterningIs){
+ switch (operation.value) {
+ case 'line':
+ currentPatterning.set({stroke: canvasPencilColor.value})
+ break
+ case 'fold':
+ // currentPatterning.set({stroke: canvasPencilColor.value})
+ break
+ default :
+ if(operationMode.value == 'fill'){
+ currentPatterning.set({fill: canvasPencilColor.value})
+ }else if (operationMode.value == 'border'){
+ currentPatterning.set({fill: 'transparent',stroke: canvasPencilColor.value,strokeWidth: canvasPencilWidth.value})
+ }
+ if(JSON.stringify(downPoint) == JSON.stringify(upPoint)){
+ canvas.remove(currentPatterning)
+ }
+ break
+ }
+ if(operation.value == 'fold'){
+ canvas.forEachObject((obj) =>obj.selectable = false);
+ canvas.bringToFront(polyLineBtn);//设置优先级最高
+ }else{
+ createPatterningIs = false
+ clearPatterning()//临时图形置为空并且添加撤回对象里面
+ }
+ }
+ }
+ let setHDExport = ()=>{
+ let selectedObject = canvas.getActiveObject();
+ if (selectedObject && selectedObject.type === 'image') {
+ // 如果是图片对象，则可以对其进行操作
+ let selectedImage = selectedObject;
+ let img = new Image
+ img.src = selectedImage.getSrc()
+ img.onload = ()=>{
+ console.log(img.width,img.height);
+ }
+ // 输出图片对象的 URL
+ console.log('Selected image URL:', selectedImage.getSrc());
+ } else {
+ console.log('No image selected.');
}
- isLoadCanvas = true;
- canvas.loadFromJSON(canvasState.value[index], () => {
- canvas.forEachObject(function(obj) {
- obj.cornerSize = 10
- obj.transparentCorners=false
- });
- canvas.renderAll();
- stateIndex.value = index;
- });
}
onMounted(() => {});
@@ -705,7 +976,15 @@ export default defineComponent({
multiselect,
onDragstart,
historyState,
- stateIndex,
+ operation,
+ operationMode,
+ setOperation,
+ setOperationMode,
+ canvasPencilColor,
+ canvasPencilWidth,
+ setPencilColor,
+ setPencilWidth,
+ setHDExport,
};
},
data(prop) {
@@ -780,8 +1059,11 @@ export default defineComponent({
margin-top: 2rem;
display: flex;
justify-content: space-between;
- padding-right: 2rem;
cursor: pointer;
+ position: sticky;
+ top: 1rem;
+ background: #f9fafb;
+ z-index: 2;
.icon{
transition: all .3s;
}
@@ -812,20 +1094,27 @@ export default defineComponent({
width: 10em;
}
}
- .exportCanvasBox_img.closeNav{
- max-height: 1000rem;
+ .exportCanvasBox_left_item.closeNav{
+ // max-height: 1000rem;
+ height: auto;
}
}
.exportCanvasBox_left::-webkit-scrollbar,
.exportCanvasBox_right::-webkit-scrollbar{display: none;}
.exportCanvasBox_left {
-
- .exportCanvasBox_img {
- transition: all .3s;
+ padding-right: 1rem;
+ .exportCanvasBox_title {
+ padding-right: 2rem;
+ }
+ .exportCanvasBox_left_item{
overflow: hidden;
- // height: auto;
- max-height: 0;
+ transition: all .3s;
+ // max-height: 0;
+ height: 0;
transform: translate3d(0, 0, 0);
+ }
+ .exportCanvasBox_img {
+ // height: auto;
.exportCanvasBox_allItem {
display: flex;
@@ -862,10 +1151,35 @@ export default defineComponent({
}
}
}
+ .exportCanvasBox_left_tool{
+ .exportCanvasBox_left_tool_item{
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ margin-bottom: 1rem;
+ &.leftAlign{
+ justify-content: flex-start;
+ }
+ 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;
+ }
+ }
+ }
+ }
}
.exportCanvasBox_right{
display: flex;
flex-direction: column;
+ padding-left: 1rem;
position: relative;
.exportCanvasBox_right_definition{
// display: flex;
diff --git a/src/component/HomePage/Header.vue b/src/component/HomePage/Header.vue
index 23e14fc3..e6372214 100644
--- a/src/component/HomePage/Header.vue
+++ b/src/component/HomePage/Header.vue
@@ -217,7 +217,7 @@ export default defineComponent({
let isTest = ref()
let isMurmur = ref()
let credits = computed(()=>{
- return store.state.UserHabit.credits.value
+ return Number(store.state.UserHabit.credits.value)
})
let activeCredits = ref(false)
return {
@@ -281,6 +281,7 @@ export default defineComponent({
this.operateClick();
document.addEventListener("click", this.operateClick);
}
+ this.getCredits()
this.getLang('')
},
methods: {
@@ -297,16 +298,22 @@ export default defineComponent({
UpgradePlan.init()
},
Assignment(){//任务
- let num = 123+this.credits
- this.store.commit('setCredits',num)
+ // let num = 123+this.credits
+ // this.store.commit('setCredits',num)
},
getCredits(){//刷新当前积分
- let num = 123+this.credits
- this.activeCredits = true
- setTimeout(()=>{
+ if(!this.activeCredits){
+ this.activeCredits = true
+ this.store.dispatch('getCredits').then((rv)=>{
+ setTimeout(()=>{
+ this.activeCredits = false
+ },300)
+ })
+ }else{
this.activeCredits = false
- },300)
- this.store.commit('setCredits',num)
+ }
+
+
},
//点击下拉图标出现操作
changeShowOperateContent() {
diff --git a/src/component/HomePage/UpgradePlan.vue b/src/component/HomePage/UpgradePlan.vue
index 3b2037c5..8f8aafa2 100644
--- a/src/component/HomePage/UpgradePlan.vue
+++ b/src/component/HomePage/UpgradePlan.vue
@@ -101,9 +101,16 @@
Payment
System maintenance will start at 10:00 and is expected to be completed at 12:00.
+ Due to system server upgrades, we will be conducting maintenance on Monday, March 4th, from 10:00 AM to 3:00 PM Hong Kong time. During this period, access to the AiDA system will be temporarily unavailable.
@@ -85,6 +85,7 @@ export default defineComponent({
transform: translateX(-50%);
font-size: 1.8rem;
color: #8e8e8e;
+ text-align: center;
}
}
diff --git a/src/views/trialApproval.vue b/src/views/trialApproval.vue
index 8bad919d..6fb89ae2 100644
--- a/src/views/trialApproval.vue
+++ b/src/views/trialApproval.vue
@@ -265,12 +265,6 @@ export default defineComponent({
this.gettrialList();
let userInfo:any = getCookie("userInfo")
this.userInfo = JSON.parse(userInfo);
-
- if (this.userInfo.userId == 83 || this.userInfo.userId == 88 || this.userInfo.userId == 6) {
- } else {
- router.replace("/home");
- return
- }
this.getIsAutoApproval()
},
methods: {