调整接口

common/config.service.js

@@ -1,5 +1,5 @@
 // 接口环境
-let BASE_URL = 'http://8.138.171.103:8082';
+let BASE_URL = '/pixelApi';
 let IP = 'http://8.138.171.103/';
 let FILE_URL = IP+'static/';
 // 火山引擎ai接口地址

common/http.api.js

@@ -6,6 +6,10 @@ const install = (Vue, vm) => {
 	vm.$api.login = async (params = {}) => await vm.$u.get('/acUser/phoneLogin', params);// 手机号登录
 	vm.$api.register = async (params = {}) => await vm.$u.get('/acUser/phoneRegister', params);// 手机号注册
 	
+	// 应用服务
+	vm.$api.allServices = async (params = {}) => await vm.$u.get('/paServices/all', params);// 获取全部应用
+	vm.$api.singleServices = async (id) => await vm.$u.get(`/paServices/${id}`);// 获取单个应用
+	
 	// 留言板
 	vm.$api.addMessage = async (params = {}) => await vm.$u.post('/cpMessage', params);// 添加留言
 	

common/http.interceptor.js

@@ -9,9 +9,10 @@ import configService from '@/common/config.service.js';
 const install = (Vue, vm) => {
 	let url = ''
 	// 此处仅作调试新接口的开发环境，会在开发环境时影响旧接口的请求，不影响上线使用
-	if (process.env.NODE_ENV === 'development') {
+	// if (process.env.NODE_ENV === 'development') {
-		url = configService.apiUrl;
+	// 	url = configService.apiUrl;
-	}
+	// }
+	url = configService.apiUrl;
 	// #ifdef H5
 	typeof window.fastUrl !== 'undefined' ? url = window.fastUrl : '',
 		// #endif

manifest.json

@@ -102,6 +102,15 @@
         "devServer" : {
             "disableHostCheck" : true,
             "proxy" : {
+				"/pixelApi" : {
+					"target" : "http://8.138.171.103:8082",
+					"changeOrigin" : true,
+					"secure" : true,
+					"ws" : false,
+					"pathRewrite" : {
+					    "^/pixelApi" : ""
+					}
+				},
                 "/upload" : {
                     "target" : "http://8.138.171.103",
                     "changeOrigin" : true,

pages/mobile_web/home/home.vue

@@ -21,18 +21,19 @@
 						<image :src="fileUrl+functionImg[1].picture" class="go"></image>
 					</view>
 					<view class="ff-right">
-						<image @click="toDeal({name: '涂抹重绘',model: 'repaint'})" class="redraw" :src="fileUrl+functionImg[2].picture"></image>
+						<image @click="toDeal()" class="redraw" :src="fileUrl+functionImg[2].picture"></image>
 						<image class="tip" :src="fileUrl+functionImg[3].picture"></image>
 					</view>
 				</view>
 				<!-- 轮播功能栏 -->
 				<view class="second-functions">
 					<swiper class="swiper" duration="300" @change="categoryChange">
-						<swiper-item v-for="(item, index) in swiperFunctionList" :key="item.picture">
+						<swiper-item v-for="(item, index) in swiperFunctionList" :key="index">
 							<view class="category flex" :style="item.length===5?{justifyContent: 'space-between'}:{}">
 								<template v-for="(category, itemIndex) in item">
-									<view class="category-item" @click="toDeal(category)">
+									<view class="category-item" @click="toDeal(category.id)">
-										<image :style="category.name==='人物动漫化'?{width:'115rpx'}:category.name==='证件照'?{width:'85rpx'}:{}" :src="fileUrl+category.picture"></image>
+										<image :style="category.name==='人物动漫化'?{width:'115rpx'}:category.name==='证件照'?{width:'85rpx'}:{}" 
+										:src="fileUrl+(category.icon||'autoreplace.png')"></image>
 										{{ category.name }}
 									</view>
 								</template>
@@ -51,7 +52,7 @@
 						<view class="tfc-right">
 							筛选
 							<view class="tfcr-btn" @click="showSift = true">
-								<u-icon :label="siftList[siftIndex].label" :name="fileUrl+select" color="#d4ff00" 
+								<u-icon :label="siftList[siftIndex]?siftList[siftIndex].label:'暂无'" :name="fileUrl+select" color="#d4ff00" 
 								size="17" label-pos="left" label-color="#d4ff00"></u-icon>
 							</view>
 						</view>
@@ -60,7 +61,7 @@
 						<view @click="maskTouchend(item,index)" class="work-item" v-for="(item,index) in workList" :key="item.id">
 							<view :class="item.display?'ribbon-fadeOutUp':''" class="collect-ribbon" v-show="item.collect">收藏</view>
 							<image class="work-picture" :src="item.picture" mode="widthFix"></image>
-							<view class="sign-text">{{ siftList[item.type].label }}</view>
+							<view class="sign-text">{{ siftList[item.type]?siftList[item.type].label:'暂无' }}</view>
 							<image class="sign" :src="fileUrl+sign"></image>
 							<image class="compare-sign" mode="widthFix" :src="item.compare"></image>
 						</view>
@@ -73,6 +74,7 @@
 			</view>
 			
 		</view>
+		<u-toast ref="uToast"></u-toast>
 		<!-- 筛选项下拉栏 -->
 		<u-select v-model="showSift" :list="siftList" @confirm="selectSift"
 		confirm-color="#94d500"></u-select>
@@ -123,33 +125,35 @@ export default {
 					// {
 					// 	// 风格替换
 					// 	name: '风格替换',
-					// 	picture:'autoreplace.png',
+					// 	icon:'autoreplace.png',
-					// 	model: '',
+					// 	type: '',
 					// 	// 'stylereplace'
 					// },
 					{
 						// 人物动漫化
+						id: 1,
 						name: '人物动漫化',
-						picture:'save.png',
+						icon:'save.png',
-						model: 'animeization'
+						type: 0
 					},
 					// {
 					// 	// 证件照
 					// 	name: '证件照',
-					// 	picture:'passport.png',
+					// 	icon:'passport.png',
-					// 	model: ''
+					// 	type: ''
 					// },
 					{
 						// 旧照修复
+						id: 2,
 						name: '旧照修复',
-						picture:'oldrepair.png',
+						icon:'oldrepair.png',
-						model: 'oldrepair'
+						type: 0
 					},
 					// {
 					// 	// 人脸修复
 					// 	name: '人脸修复',
-					// 	picture:'headrepair.png',
+					// 	icon:'headrepair.png',
-					// 	model: ''
+					// 	type: ''
 					// }
 				],
 				// []
@@ -228,6 +232,20 @@ export default {
 		}
 	},
 	methods:{
+		// 初始化
+		async init(){
+			let res = await this.$api.allServices();
+			if(res.success){
+				// 这里按一页5个分组
+				this.swiperFunctionList = [];
+				const arr = res.data;
+				for (let i = 0; i < arr.length; i += 5) {
+				  this.swiperFunctionList.push(arr.slice(i, i + 5));
+				}
+			}else{
+				this.$refs.uToast.show({type:'error',title: "应用列表获取失败!"});
+			}
+		},
 		// 横向功能列表切换页
 		categoryChange(event){
 			this.currentPageindex = event.detail.current+1;
@@ -264,9 +282,10 @@ export default {
 			},250)
 		},
 		// 前往工作室
-		toDeal({name, model}){
+		toDeal(id = null){
-			if(name && model)
+			if(id!==null)
-				uni.navigateTo({url: `/pages/mobile_web/workshops/index?name=${name}&model=${model}`});
+				uni.navigateTo({url: `/pages/mobile_web/workshops/index?id=${id}`});
+			else this.$refs.uToast.show({type:'error',title: "暂未开放对应功能!"});
 		},
 		// 轮播图跳转
 		linkTo(e){

pages/mobile_web/index/index.vue

@@ -1,9 +1,10 @@
 <template>
 	<view class="mobile-index">
 		<view class="u-page upage">
-			<Home ref="home" :topLevel="topLevel" :siftList="siftList" v-if="current===0" />
+			<!-- <Home ref="home" :topLevel="topLevel" :siftList="siftList" v-show="current===0" />
-			<Work ref="work" :topLevel="topLevel" :siftList="siftList" v-else-if="current===1" />
+			<Work ref="work" :topLevel="topLevel" :siftList="siftList" v-show="current===1" />
-			<My ref="my" :topLevel="topLevel" v-else-if="current===2" />
+			<My ref="my" :topLevel="topLevel" v-show="current===2" /> -->
+			<component ref="pageRef" :topLevel="topLevel" :siftList="siftList" :is="refs[current]"></component>
 		</view>
 		<view class="navigation">
 			<view @click="changeCurrent(index)" class="nav-item" v-for="(item,index) in navicationList" :key="index">
@@ -55,6 +56,8 @@ export default {
 			{label: "涂抹重绘", value: 6},{label: "AI换装", value: 7}],
 			// 滚动顶部
 			scrollTop: 0,
+			// refs组件列表
+			refs: ['home','work','my']
 		}
 	},
 	onPageScroll(e) {
@@ -66,8 +69,17 @@ export default {
 		this.scrollTop = e.scrollTop;
 	},
 	
-	// #ifdef H5
+	
 	onShow(){
+		
+		let index = uni.getStorageSync('current');
+		this.current = index?index:0;
+		this.changeCurrent(this.current)
+	// #ifndef H5
+	}
+	// #endif
+		
+		// #ifdef H5
 		let that = this;
 		window.onscroll = function () {
 		    //为了保证兼容性，这里取三个值，哪个有值取哪一个
@@ -84,14 +96,17 @@ export default {
 	},
 	// #endif
 	
-	onLoad() {
-	},
 	methods:{
 		// 切换页面
 		changeCurrent(index){
 			this.current = index;
 			uni.setStorageSync('current',index);
-		}
+			const currentRef = this.refs[index];
+			console.log(index,this.refs[index]);
+			this.$nextTick(()=>{
+				this.$refs.pageRef.init();
+			})
+		},
 	}
 }
 </script>

pages/mobile_web/my/my.vue

@@ -164,6 +164,10 @@ export default {
 		}
 	},
 	methods:{
+		// 初始化
+		init(){
+			
+		},
 		// 操作栏
 		toControl(item){
 			if(item.path) uni.navigateTo({ url: item.path });

pages/mobile_web/work/work.vue

@@ -153,6 +153,10 @@ export default {
 		}
 	},
 	methods:{
+		// 初始化
+		init(){
+			
+		},
 		// 切换选项
 		changeSelect(index){
 			this.current = index;

pages/mobile_web/workshops/common/imgDeal.js

@@ -3,37 +3,31 @@ import configService from "@/common/config.service";
 // 处理选择器
 const selectDealFunction = (vm,model,params,success) => {
 	switch(model){
-		case 'oldrepair' :
+		case 0 :
-			oldrepair(vm,params,success);
+			diagramOfTheSketch(vm,params,success);
-			break;
-		case 'animeization' :
-			selfieAnime(vm,params,success);
 			break;
 	};
 	return;
 }
 
-// 旧照修复
+// 图生图
-const oldrepair = async (vm,params,success) => {
+const diagramOfTheSketch = async (vm,params,success) => {
-	commonUpload(vm,'/AiPicture/Colourize',params,success);
+	commonUpload(vm,params,success);
-}
-
-// 人像动漫化
-const selfieAnime = async(vm,params,success) => {
-	// let res = await vm.$api.selfieAnime(params);
-	commonUpload(vm,'/AiPicture/selfie_anime',params,success);
 }
 
 // 通用上传方法
-const commonUpload = (vm,path,params,success) =>{
+const commonUpload = (vm,params,success) =>{
+	const image = params.filePath;
+	delete params.filePath;
 	uni.uploadFile({
-	    url: configService.apiUrl+path,
+	    url: configService.apiUrl+'/AiPicture/GenerateImages',
-	    filePath: params.filePath, 
+	    filePath: image, 
 	    name: 'image',
+		formData: params,
 	    header:{'token':vm.$store.state.vuex_token},
 	    success: (res) => {
 			if(res.data){
-				success(encodeURI(JSON.parse(res.data).data));
+				success(encodeURI(JSON.parse(res.data).data.path));
 			} else {
 				vm.$refs.uToast.show({type: 'error',title: "余额不足，请充值!"});
 				vm.dotLoading = false;
@@ -42,6 +36,7 @@ const commonUpload = (vm,path,params,success) =>{
 	    },
 	    fail: function (res) {
 			vm.$refs.uToast.show({type: 'error',title: "处理失败!"});
+			vm.dotLoading = false;
 	    }
 	});
 }

pages/mobile_web/workshops/index.vue

@@ -16,7 +16,7 @@
 			</view>
 			<view class="mw-title">
 				<u-icon name="arrow-left" size="40" color="#fff" class="back" @click="back"></u-icon>
-				{{ form.title }}
+				{{ form.name }}
 			</view>
 			<view class="mw-upload">
 				<view class="mwu-cover" v-if="uploadFile==''" @click="selectImage">
@@ -29,7 +29,7 @@
 				<view class="center-image" v-else>
 					<image mode="widthFix" :src="ip+resultFile" @click="previewImage"></image>
 				</view>
-				<view class="selections" v-if="form.model=='repaint'">
+				<view class="selections" v-if="form.type===1">
 					<view class="selections-item" :style="currentSelect===index?{ backgroundImage: `url(${fileUrl+selectBackground})` }:
 					{ color: '#000', backgroundImage: `url(${fileUrl+noSelectBackground})` }" 
 					 v-for="(item,index) in selections" :key="index" @click="currentSelect=index">
@@ -37,7 +37,7 @@
 					</view>
 				</view>
 			</view>
-			<view class="mw-editor" v-if="form.model=='repaint'">
+			<view class="mw-editor" v-if="form.type===1">
 				<EditorBox :icon="fileUrl+editorIcon" 
 				placeholder="如: 衣服/鞋子/头发或者英文:clothes and shose">
 					<template #title>
@@ -52,7 +52,7 @@
 				</EditorBox>
 			</view>
 			<view class="workshops-tip" v-else>
-				Tips：{{ resultFile ? '点击预览图片效果~' : placeholderList[form.model] }}
+				Tips：{{ resultFile ? '点击预览图片效果~' : '尝试魔法吧~~' }}
 			</view>
 		</view>
 		<view class="workshops-btn">
@@ -104,8 +104,7 @@ export default {
 			background: 'background.png',
 			// 数据
 			form: {
-				title: '',// 标题
+				id: ''//id
-				model: ''// 模式
 			},
 			// 模式选择
 			selections:["保留模式","替换模式"],
@@ -118,11 +117,11 @@ export default {
 			// 编辑图标
 			editorIcon: 'editor.png',
 			// 提示语列表
-			placeholderList: {
+			// placeholderList: {
-				stylereplace: '上传图片后，选择更换不同风格~',
+			// 	stylereplace: '上传图片后，选择更换不同风格~',
-				animeization: '上传人像图，快进入anime的世界吧~',
+			// 	animeization: '上传人像图，快进入anime的世界吧~',
-				oldrepair: '上传黑白旧照片，焕发色彩~'
+			// 	oldrepair: '上传黑白旧照片，焕发色彩~'
-			},
+			// },
 			// 创作之后的操作按钮
 			resultFunction: {
 				download: {
@@ -182,10 +181,20 @@ export default {
 	},
 	// #endif
 	onLoad(options) {
-		this.form.title = options.name;
+		this.form.id = options.id;
-		this.form.model = options.model;
+		this.getForm();
 	},
 	methods:{
+		// 获取ai功能详情
+		async getForm(){
+			let res = await this.$api.singleServices(this.form.id);
+			if(res.success){
+				res.data.type = Number(res.data.type);
+				this.form = res.data;
+			}else{
+				this.$refs.uToast.show({type:'error',title: "ai功能暂未开放!"});
+			}
+		},
 		// 返回
 		back(){
 			uni.navigateBack();
@@ -227,10 +236,10 @@ export default {
 					return;
 				}
 				// 再实际处理
-				selectDealFunction(that,that.form.model,that.getParams(that.form.model),
+				selectDealFunction(that,that.form.type,that.getParams(that.form.type),
 					(path)=>{
 						that.resultFile = path;
-						that.$refs.uToast.show({type:'success',title: `${that.form.title}成功!`});
+						that.$refs.uToast.show({type:'success',title: `${that.form.name}成功!`});
 						this.dotLoading = false;
 					});
 			}catch(e){
@@ -239,17 +248,13 @@ export default {
 			}
 		},
 		// 获取参数值
-		getParams(model){
+		getParams(type){
 			let result,that = this;
-			switch(model){
+			switch(type){
-				case 'oldrepair' :
+				case 0 :
 					result = {
-						filePath: this.uploadFile,
+						serviceId: that.form.id,
-					}
+						filePath: that.uploadFile,
-					break;
-				case 'animeization' :
-					result = {
-						filePath: this.uploadFile,
 					}
 					break;
 			}