添加教程下载 和调整作品详情

src/component/Detail/DesignDetailAlter.vue

@@ -245,7 +245,8 @@
                     <div class="get_color_block">
                         <input class="get_color_input" placeholder="tcx value (e.g.: 19-4052)" v-model="tcxColor" @keydown.enter="getTcxColor()"/>
                         <div class="get_color_button" @click="getTcxColor()">
-                            <span class="icon iconfont icon-huoquduixiang"></span>
+                            <!-- <span class="icon iconfont icon-huoquduixiang"></span> -->
+							<span class="fi fi-br-fill"></span>
                             <span class="get_color_des"></span>
                         </div>
                     </div>
@@ -1910,9 +1911,8 @@ export default defineComponent({
 					align-items: center;
 					justify-content: center;
 					flex: 1;
-					.icon-huoquduixiang{
+                    .fi-br-fill{
 						margin-right: calc(0.5rem*1.2);
-						font-size: calc(2rem*1.2);
 						color:#343579;
 						vertical-align: middle;
 					}

src/component/HomePage/ColorboardUpload.vue

@@ -145,7 +145,8 @@
                     <div class="get_color_block">
                         <input class="get_color_input" placeholder="tcx value (e.g.: 19-4052)" v-model="tcxColor" @keydown.enter="getTcxColor()"/>
                         <div class="get_color_button" @click="getTcxColor()">
-                            <span class="icon iconfont icon-huoquduixiang"></span>
+                            <!-- <span class="icon iconfont icon-huoquduixiang"></span> -->
+							<span class="fi fi-br-fill"></span>
                             <span class="get_color_des">{{ $t('ColorboardUpload.ExtractColor') }}</span>
                         </div>
 						<div v-show="getColorBg" class="get_color_bg" @click="setUplpadColor(reviewColor)" :style="{'background-color':`rgba(${getSelectRGB(reviewColor).r},${getSelectRGB(reviewColor).g},${getSelectRGB(reviewColor).b},${getSelectRGB(reviewColor).a})`}">
@@ -1374,9 +1375,8 @@ export default defineComponent({
                         vertical-align: middle;
                         cursor: pointer;
 
-                        .icon-huoquduixiang{
+                        .fi-br-fill{
                             margin-right: calc(0.5rem*1.2);
-                            font-size: calc(2rem*1.2);
                             color:#343579;
                             vertical-align: middle;
                         }

src/component/HomePage/scaleVideo.vue

@@ -0,0 +1,110 @@
+<template>
+	<div v-show="modalShow" class="general_video">
+		<div class="video_box">
+			<div class="general_video_btn" @click="clearVideo">
+				<i class="fi fi-rr-cross-small"></i>
+			</div>
+			<video ref="video" controls>
+				<source :src="url" type="video/mp4">
+				Your browser does not support the video tag or the file format of this video.
+			</video>
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, h, ref ,toRefs,computed,reactive, watch} from "vue";
+export default defineComponent({
+	props:{
+		visible: {
+			type: Boolean,
+			default: false,
+		},
+		remove: {
+			type: Function, //传入移除节点方法,这里是createApp中的方法
+			default: null,
+		},
+		url: {
+			type: String,
+			default: "",
+		},
+	},
+	
+
+    setup(props:any,{emit}) {
+		const modalShow = ref(false);
+		modalShow.value = props.visible;
+		let clearVideo = ()=>{
+			modalShow.value = false
+		}
+		let video = ref(null)
+		watch(() => modalShow.value,
+			(newVal,oldVal)=>{
+				!newVal && props.remove()				
+			}
+		)
+        return {
+			modalShow,
+			clearVideo,
+			video,
+        };
+    },
+    data() {
+        return {
+            // moodTemplateId: "", //模板id
+			
+        };
+    },
+
+    mounted() {
+    },
+    methods: {
+		
+    },
+});
+</script>
+
+<style lang="less" scoped>
+.general_video {
+	position: fixed;
+	width: 100%;
+	height: 100%;
+	background: rgba(0,0,0,.5);
+	z-index: 9999;
+	top: 0;
+	left: 0;
+	.video_box{
+		left: 50%;
+		top: 50%;
+		transform: translate(-50%,-50%);
+		width: 80%;
+		height: auto;
+		position: absolute;
+		video{
+			width: 100%;
+			height: 100%;
+			object-fit: contain;
+		}
+		.general_video_btn{
+			color: #fff;
+			border-radius: 50%;
+			background: #000;
+			width: 5rem;
+			height: 5rem;
+			position: absolute;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			right: 0;
+			top: 0;
+			transform: translate(50%,-50%);
+			cursor: pointer;
+			z-index: 2;
+			i{
+				font-size: 4rem;
+				display: flex;
+			}
+		}
+	}
+}
+</style>

src/component/WorksPage/newScaleImage.vue

@@ -55,7 +55,7 @@
 								<div class="detail_right_user_content">
 									<div class="scaleImage_chunk_title_intro">@{{scaleImageData.userName}}</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> @{{ scaleImageData.originalUserName }}/{{ scaleImageData.portfolioName }}</span></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>
 									<div class="scaleImage_chunk_btn">关注</div> -->
 								</div>
@@ -345,6 +345,9 @@ export default defineComponent({
 		// },
 		let getDeatilData = {}
 		let originalGetDetail = ()=>{
+			if(imgData.scaleImageData.jumpable != 1){
+				return message.info(t('newScaleImage.jsContent6'))
+			}
 			getDetail({id:imgData.scaleImageData.originalPortfolioId},'')
 		}
 		let getDetail = (value:any,str:string)=>{
@@ -765,9 +768,11 @@ export default defineComponent({
 			}
 			.scaleImage_chunk_title_intro{
 				span{
-					cursor: pointer;
-					color: #39215b;
-					text-decoration: underline;
+					&.active{
+						cursor: pointer;
+						color: #39215b;
+						text-decoration: underline;
+					}
 				}
 			}
 		}

src/lang/cn.ts

@@ -7,6 +7,7 @@ export default {
 		WORKS:'作品广场',
 		bindEmail:'绑定邮箱',
 		logOff:'退出登录',
+		Tutorial:'教程',
 		language:'中文',
 		skip:'跳过',
 		emailContent:'你绑定了的邮箱',
@@ -537,6 +538,7 @@ export default {
 		jsContent3:'请输入评论内容',
 		jsContent4:'是否删除当前评论',
 		jsContent5:'是否删除当前作品',
+		jsContent6:'作品被作者删除',
 	},
 	guide:{
 		guide1:"在<strong>工作空间</strong>中，您可以个性化您的设计设置，包括选择适用于男装或女装的设计，以及选择用于创作的人体模型。",

src/lang/en.ts

@@ -7,6 +7,7 @@ export default {
 		WORKS:'GALLERY',
 		bindEmail:'bind email',
 		logOff:'log off',
+		Tutorial:'Tutorial',
 		language:'English',
 		skip:'skip',
 		emailContent:'you have binded email',
@@ -539,6 +540,7 @@ export default {
 		jsContent3:'Please enter a comment',
 		jsContent4:'Do you need to delete this comment',
 		jsContent5:'Whether to delete the current gallery',
+		jsContent6:'The author deleted the work',
 	},
 	guide:{
 		guide1:"You can personalize your design settings right here in the <strong>Workspace</strong>, including choosing to design for men's or women's wear, as well as selecting the mannequin to use for your creations.",

src/main.ts

@@ -1,4 +1,4 @@
-import { createApp,nextTick, } from 'vue'
+import { createApp,defineComponent,h } from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store'
@@ -19,6 +19,7 @@ import { Https } from "@/tool/https";
 // import "@/tool/fabric.min.js";
 const app = createApp(App);
 flexible()
+
 import { getCookie, setCookie } from "@/tool/cookie";
 router.beforeEach((to, from, next) => {
 	if(to.name == "login"){

src/tool/https.js

@@ -31,7 +31,7 @@ let httpIp = process.env.NODE_ENV == 'development' ? "" : "";
 
 axios.defaults.baseURL = httpIp;   //配置接口地址
 // console.log(axios.defaults.baseURL);
-axios.defaults.baseURL = process.env.VUE_APP_BASE_URL;   //配置接口地址
+// axios.defaults.baseURL = process.env.VUE_APP_BASE_URL;   //配置接口地址
 
 // 创建取消令牌
 const CancelToken = axios.CancelToken;

src/tool/mount.js

@@ -0,0 +1,18 @@
+import { createApp } from "vue";
+import scaleVideo from "@/component/HomePage/scaleVideo.vue";
+// 使用vue3的createApp,以及mount,unmount方法创建挂载实例
+export default function showViewVideo(options) {
+	// 创建一个节点，并将组件挂载上去
+	const mountNode = document.createElement("div");
+	document.body.appendChild(mountNode);
+	const glearVideo = createApp(scaleVideo, {
+	  ...options,
+	  visible: true,
+	  remove() {
+		glearVideo.unmount(); //创建完后要进行销毁
+		document.body.removeChild(mountNode);
+	  },
+	});
+	console.log(glearVideo.mount(mountNode));
+	return glearVideo.mount(mountNode);
+}

src/views/HomeMain.vue

@@ -79,6 +79,11 @@
 					<span class="icon iconfont icon-yonghu"></span>
 					<span class="select_item_des">Administrator</span>
 				</router-link>
+
+				<div class="select_item" @click="getTutorial()">
+					<span class="icon iconfont icon-tuichu"></span>
+					<span class="select_item_des">{{$t('Header.Tutorial')}}</span>
+				</div>
 				<div class="select_item" @click="logout()">
 					<span class="icon iconfont icon-tuichu"></span>
 					<span class="select_item_des">{{$t('Header.logOff')}}</span>
@@ -105,8 +110,8 @@
 			<router-view @setTask = "setTask" :getLangIsShowMark="getLangIsShowMark"></router-view>
 		</div>
 		<RobotAssist></RobotAssist>
+		<scaleVideo ref="scaleVideo"></scaleVideo>
     </div>
-	
 </template>
 <script >
 import { defineComponent, createVNode, ref, computed } from "vue";
@@ -121,14 +126,17 @@ import { Https } from "@/tool/https";
 import { Modal, message } from "ant-design-vue";
 import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
 import RobotAssist from "@/component/HomePage/RobotAssist.vue";
+import scaleVideo from "@/component/HomePage/scaleVideo.vue";
 import { useStore } from "vuex";
 import { setLang } from "@/tool/guide";
+import  showViewVideo from "@/tool/mount";
 import { useI18n } from "vue-i18n";
 export default defineComponent({
     components: {
         VerificationCodeInput,
 		Habit,
 		RobotAssist,
+		scaleVideo,
 		UpgradePlan,
 		payOrder,
 		TaskPage,
@@ -282,6 +290,20 @@ export default defineComponent({
 			let payOrder = this.$refs.payOrder
 			payOrder.init()
 		},
+		//教程
+		getTutorial(){
+			let url = 'https://code-create.com.hk/wp-content/uploads/2024/07/aida_3.0-使用手册-0705.pptx'
+			if(this.locale == 'ENGLISH'){
+				url = 'https://code-create.com.hk/wp-content/uploads/2024/07/aida_3.0-Manual-0705.pptx'
+			}
+			//打开视频
+			// scaleVideo.init('https://code-create.com.hk/wp-content/uploads/2022/11/aida_video.mp4')
+			const a = document.createElement('a');
+			a.href = url;
+			a.download = 'presentation.pptx'; // 下载的文件名
+			document.body.appendChild(a);
+			a.click();
+		},
         //登出
         async logout() {
             let data = {

src/views/HomeView/Works.vue

@@ -20,6 +20,7 @@
 					<a-spin size="large" />
 				</span>
 			</div>
+			<img v-show="isNoData && isNull" src="@/assets/images/homePage/null_img.png">
 		</div>
 		
 		<newScaleImage ref="newScaleImage" @deletePorfolio="deletePorfolio"></newScaleImage>
@@ -60,6 +61,7 @@ export default defineComponent({
     setup() {
 		let filter:any = reactive({
 			worksSelect: 'all',
+			isNull:true,
 			worksType: [
 				{
 					name: useI18n().t('works.all'),
@@ -148,8 +150,13 @@ export default defineComponent({
 			filter.isShowMark = true
 			Https.axiosPost(Https.httpUrls.getPorfolio, data)
                 .then((rv) => {
+					if(data.page == 1 && rv.content.length == 0){
+						filter.isNull = true
+					}else{
+						filter.isNull = false
+					}
 					if (rv.content.length > 0) {
-						filter.isShowMark = false
+						filter.isNull = false
 						fall.value.push(rv.content); 
 					} else {
 						filter.isNoData = true
@@ -158,6 +165,9 @@ export default defineComponent({
                 })
                 .catch((rv) => {
 					filter.isShowMark = false
+					if(data.page == 1){
+						filter.isNull = true
+					}
 				});
 
 			// setTimeout(() => {
@@ -308,6 +318,11 @@ export default defineComponent({
 				height: 50px;
 			}
 		}
+		>img{
+			position: absolute;
+			inset: 0;
+			margin: auto;
+		}
     }
 	&.active{
 		display: flex;