hjq/PixelAI-mobile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

我的创作+ai换装+登录调整

Browse Source
This commit is contained in:
Double-_-Z 2024-12-11 19:36:51 +08:00
parent b4e4b9d5a7
commit f3747f0643
16 changed files with 681 additions and 177 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
common/http.api.js
View File

@ -4,8 +4,13 @@ const install = (Vue, vm) => {
// 用户管理
vm.$api.wxLogin = async (params = {}) => await vm.$u.get('/acUser/wxPhoneLogin', params);// 手机号一键登录
vm.$api.login = async (params = {}) => await vm.$u.get('/acUser/phoneLogin', params);// 手机号登录
vm.$api.logOut = async () => await vm.$u.get('/acUser/logout');// 用户登出
vm.$api.register = async (params = {}) => await vm.$u.get('/acUser/phoneRegister', params);// 手机号注册
// 会员作品
vm.$api.myCreations = async (params = {}) => await vm.$u.get('/paCreation', params);// 作品查询
vm.$api.deleteCreation = async (id) => await vm.$u.delete(`/paCreation/${id}`);// 删除作品
// 图片管理
vm.$api.getCpPhotoById = async (params = {}) => await vm.$u.get('/cpPhoto/all', params);// 根据标签id查询全部图片

27
common/ossutil/ossWebUpload.js Normal file
View File

@ -0,0 +1,27 @@
const OSS = require('ali-oss');
let client = new OSS({
region: 'oss-cn-hangzhou', // 上传后的域名
accessKeyId: 'LTAI5tFAiAq9SjM9vaucMuYD', // 后台的临时签名ID
accessKeySecret: 'RHDmRIOaYlEXe9t1ro7ls8Ejcnhigv', // 后台的临时签名密钥
stsToken: '',
bucket: 'guojunjie', // OSS仓库名
});
// 上传方法
const ossUpload = (file) => {
// let curTime = new Date();
// let year = curTime.getFullYear();
// let month = curTime.getMonth() + 1;
// let day = curTime.getDate();
let dir = 'pixelAi/';
client.multipartUpload(dir+'测试', file).then(ress=>{
console.log(ress);
})
}
export {
ossUpload
}

8
common/routerInterceptor.js
View File

@ -1,6 +1,8 @@
// 需要登录的界面
let needLogin = [
"/pages/my/mySetting"
"/pages/my/mySetting",
"/pages/mobile_web/workshops/index",
"/pages/mobile_web/my/child_pages/contact"
];
// 多端通用路由
let filterRoute = [
@ -22,7 +24,7 @@ const install = (vm) => {
icon: 'none'
});
uni.navigateTo({
url: "/pages/my/wxLogin?nextUrl="+locationUrl
url: "/pages/mobile_web/my/child_pages/login?nextUrl="+locationUrl
});
} else if(!filterRoute.includes(locationUrl)&&locationUrl!=='/'&&vm.$store.state.current_platform&&
locationUrl.indexOf(vm.$store.state.current_platform)==-1){
@ -54,7 +56,7 @@ const install = (vm) => {
icon: 'none'
});
uni.navigateTo({
url: "/pages/my/wxLogin?nextUrl="+e.url
url: "/pages/mobile_web/my/child_pages/login?nextUrl="+e.url
});
return false;
}

1
package.json
View File

@ -1,5 +1,6 @@
{
"dependencies": {
"ali-oss": "^6.22.0",
"element-ui": "^2.15.14"
}
}

68
pages/mobile_web/home/home.vue
View File

@ -27,9 +27,10 @@
</view>
<!-- 轮播功能栏 -->
<view class="second-functions">
<swiper class="swiper" duration="300" @change="categoryChange">
<swiper class="swiper" :style="swiperFunctionList[currentPageindex-1]&&swiperFunctionList[currentPageindex-1].length>5?
{height:'270rpx'}:{height:'125rpx'}" duration="300" @change="categoryChange">
<swiper-item v-for="(item, index) in swiperFunctionList" :key="index">
<view class="category flex" :style="item.length===5?{justifyContent: 'space-between'}:{}">
<view class="category">
<template v-for="(category, itemIndex) in item">
<view class="category-item" @click="toDeal(category.id)">
<image :style="category.icon?{}:{width:'80rpx',height:'70rpx'}"
@ -63,7 +64,7 @@
<image class="work-picture" :src="item.picture" mode="widthFix"></image>
<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>
<!-- <image class="compare-sign" mode="widthFix" :src="item.compare"></image> -->
</view>
</view>
<!-- 下面这里等后端有了之后，用isFinish判断 -->
@ -120,44 +121,7 @@ export default {
}
],
// 横向工具栏
swiperFunctionList:[
[
// {
// // 风格替换
// name: '风格替换',
// icon:'autoreplace.png',
// type: '',
// // 'stylereplace'
// },
{
// 人物动漫化
id: 1,
name: '人物动漫化',
icon:'save.png',
type: 0
},
// {
// // 证件照
// name: '证件照',
// icon:'passport.png',
// type: ''
// },
{
// 旧照修复
id: 2,
name: '旧照修复',
icon:'oldrepair.png',
type: 0
},
// {
// // 人脸修复
// name: '人脸修复',
// icon:'headrepair.png',
// type: ''
// }
],
// []
],
swiperFunctionList:[],
// 当前横向工具栏页码
currentPageindex: 1,
// 轮播图
@ -229,6 +193,8 @@ export default {
sign: 'typelam.png',
// 点击次数
touchNum : 0,
// 轮播功能列表单组功能数
group: 10,
}
},
methods:{
@ -236,11 +202,11 @@ export default {
async init(){
let res = await this.$api.allServices();
if(res.success){
// 这里按一页5个分组
// 这里按一页10个分组
this.swiperFunctionList = [];
const arr = res.data;
for (let i = 0; i < arr.length; i += 5) {
this.swiperFunctionList.push(arr.slice(i, i + 5));
for (let i = 0; i < arr.length; i += this.group) {
this.swiperFunctionList.push(arr.slice(i, i + this.group));
}
}else{
this.$refs.uToast.show({type:'error',title: "应用列表获取失败!"});
@ -259,7 +225,9 @@ export default {
this.touchNum ++;
setTimeout(()=>{
if(this.touchNum == 1){
tools.methods.lookImage(0,[item.picture,item.compare]);
const array = [item.picture];
if(item.compare) array.push(item.compare);
tools.methods.lookImage(0,array);
}
if(this.touchNum >= 2){
const result = (item.collect+1)%2;
@ -382,19 +350,19 @@ export default {
}
.second-functions{
position: relative;
height: 125rpx;
// height: 125rpx;
width: 100%;
margin-top: 50rpx;
.swiper{
width: 100%;
height: 100%;
height: 125rpx;
.category{
width: 100%;
height: auto;
display: flex;
justify-content: start;
display: grid;
row-gap: 20rpx;
grid-template-columns: repeat(5,20%);
.category-item{
max-width: 20%;
display: flex;
flex-direction: column;
align-items: center;

29
pages/mobile_web/index/index.vue
View File

@ -4,7 +4,8 @@
<!-- <Home ref="home" :topLevel="topLevel" :siftList="siftList" v-show="current===0" />
<Work ref="work" :topLevel="topLevel" :siftList="siftList" v-show="current===1" />
<My ref="my" :topLevel="topLevel" v-show="current===2" /> -->
<component ref="pageRef" :topLevel="topLevel" :siftList="siftList" :is="refs[current]"></component>
<component ref="pageRef" :topLevel="topLevel" :siftList="siftList" :is="refs[current]"
:isLogin="isLogin" @userLogOut="isLogin=''"></component>
</view>
<view class="navigation">
<view @click="changeCurrent(index)" class="nav-item" v-for="(item,index) in navicationList" :key="index">
@ -57,7 +58,8 @@ export default {
// 滚动顶部
scrollTop: 0,
// refs组件列表
refs: ['home','work','my']
refs: ['home','work','my'],
isLogin: this.$store.state.vuex_token,
}
},
onPageScroll(e) {
@ -69,12 +71,14 @@ export default {
this.scrollTop = e.scrollTop;
},
onShow(){
let index = uni.getStorageSync('current');
this.current = index?index:0;
this.changeCurrent(this.current)
this.isLogin = this.$store.state.vuex_token;
if(this.current === 1){
uni.pageScrollTo({scrollTop: 0});
}
this.changeCurrent(this.current);
// #ifndef H5
}
// #endif
@ -96,13 +100,24 @@ export default {
},
// #endif
// 滑动到底部
onReachBottom(){
// if(this.current === 1){
// this.$refs.pageRef.getMore();
// }
},
methods:{
// 切换页面
changeCurrent(index){
this.current = index;
uni.setStorageSync('current',index);
const currentRef = this.refs[index];
console.log(index,this.refs[index]);
if(this.current === 1 && !this.isLogin){
const url = '/pages/mobile_web/index/index';
uni.navigateTo({
url: `/pages/mobile_web/my/child_pages/login?nextUrl=${url}`
});
return;
}
this.$nextTick(()=>{
this.$refs.pageRef.init();
})

36
pages/mobile_web/my/child_pages/login.vue
View File

@ -168,7 +168,9 @@
// 是否记住密码
isChecked: false,
// 是否同意协议、政策
isAgreed: false
isAgreed: false,
// 返回地址
nextUrl: ''
}
},
// #ifndef H5
@ -202,7 +204,13 @@
methods:{
// 返回
back(){
uni.navigateBack();
if(this.nextUrl==='/pages/mobile_web/index/index'&&
uni.getStorageSync('current')===1&&this.$store.state.vuex_token===''){
uni.setStorageSync('current',0);
uni.navigateBack();
} else {
uni.navigateBack();
}
},
// 切换方式
change(index) {
@ -242,12 +250,24 @@
that.$refs.loginForm.resetFields();
if(!that.current){
that.$u.vuex('vuex_token', res.data.token);
// that.$u.vuex('vuex_token', 'fbc545a91cc94fe89296828a25a7e08e@9085553879028596738');
that.$u.vuex('user_message', JSON.stringify(res.data.user));
uni.navigateBack({complete() {
setTimeout(()=>{
uni.showToast({icon: 'none', title: '登录成功！'});
})
}});
if(that.nextUrl===''){
uni.navigateBack({complete() {
setTimeout(()=>{
uni.showToast({icon: 'none', title: '登录成功！'});
},600)
}})
}else{
uni.redirectTo({
url: that.nextUrl,
complete() {
setTimeout(()=>{
uni.showToast({icon: 'none', title: '登录成功！'});
},600)
}
});
}
}else{
that.$refs.uToast.show({type: 'success',title: "注册成功，请登录"});
that.current = 0;
@ -266,6 +286,8 @@
},
onLoad(options) {
this.loading = false;
this.nextUrl = (options.nextUrl != null && options.nextUrl != '/pages/mobile_web/my/child_pages/login') ?
options.nextUrl : '';
},
}
</script>

55
pages/mobile_web/my/my.vue
View File

@ -44,13 +44,14 @@
</view>
<view class="mmm-control">
<view class="mmmc-item" @click="toControl(item)" v-for="(item,index) in controlList" :key="item.name">
<u-icon class="icon-text" :name="fileUrl+item.icon" size="40" :label="item.name"
<u-icon class="icon-text" :name="fileUrl+item.icon" size="35" :label="item.name"
labelSize="30" labelColor="rgba(255,255,255,0.9)" marginLeft="60"></u-icon>
<image class="arrow" :src="fileUrl+arrow"></image>
</view>
</view>
<view style="margin-bottom: 160rpx;"></view>
</view>
<u-toast ref="uToast"></u-toast>
</view>
</template>
@ -62,6 +63,10 @@ export default {
type: Number,
default: 0
},
isLogin: {
type: String,
default: ''
}
},
data(){
return{
@ -145,14 +150,10 @@ export default {
// }
],
// 用户信息
userMessage:{}
// userMessage: this.$store.state.vuex_token === ''?{}:JSON.parse(this.$store.state.user_message),
// 是否登录
isLogin: this.$store.state.vuex_token,
}
},
// mounted() {
// console.log('isLogin',this.isLogin);
// },
computed:{
// 获取登录头像
getAvatar(){
@ -160,13 +161,14 @@ export default {
},
// 获取头像旁tip
getTopTip(){
return this.isLogin ? '你好, SSDFH!' : '请登录pixel.ai！';
// return this.isLogin ? `你好, PIXEL.AI!` : '请登录pixel.ai！';
return this.isLogin ? `你好, ${this.userMessage?.nickName||this.userMessage?.username}!` : '请登录pixel.ai！';
}
},
methods:{
// 初始化
init(){
this.userMessage = this.isLogin === ''?{}:JSON.parse(this.$store.state.user_message);
},
// 操作栏
toControl(item){
@ -174,9 +176,29 @@ export default {
},
// 点击头像
handleClickAvatar(){
uni.navigateTo({
url: '/pages/mobile_web/my/child_pages/login'
})
if(this.isLogin){
let that = this;
uni.showModal({
title: '注销',
content: '是否确认退出登录？',
confirmColor: '#94d500',
success: function (res) {
if (res.confirm) {
that.$api.logOut();
that.$u.vuex('vuex_token', '');
that.$u.vuex('user_message', {});
// that.isLogin = '';
that.$emit('userLogOut');
that.userMessage = {};
that.$refs.uToast.show({type:'success',title: "退出登录成功!"});
}
}
})
}else{
uni.navigateTo({
url: '/pages/mobile_web/my/child_pages/login'
})
}
}
}
}
@ -214,7 +236,18 @@ export default {
margin: 125rpx 70rpx 45rpx;
font-weight: bold;
word-spacing: 3px;
width: calc(100% - 150rpx);
.u-icon{
overflow: hidden;
}
/deep/.u-icon__label{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/deep/.u-icon__img{
min-width: 107rpx;
min-height: 107rpx;
border-radius: 100%;
}
}

186
pages/mobile_web/work/work.vue
View File

@ -22,27 +22,29 @@
<view class="mwt-two">
<view class="mwtt-num">
<u-count-to autoplay color="#ff4269" fontSize="100" bold
:startVal="startVal" :endVal="current===0? collectCount:workCount"></u-count-to>
:startVal="startVal" :endVal="current===0? workForm.total:collectForm.total"></u-count-to>
<image :src="fileUrl+redStar" class="mwtt-star"></image>
</view>
<view class="mwtt-unit">
件{{ current===0? '藏':'作' }}品
件{{ current===0? '作':'藏' }}品
</view>
</view>
</view>
<view class="mw-content">
<view class="show-work">
<view @click="maskTouchend(item,index)" class="work-item" v-for="(item,index) in current===0?collectList:workList" :key="index">
<view @click="maskTouchend(item,index)" class="work-item" v-for="(item,index) in current===0?workList:collectList" :key="index">
<image class="trash" :class="item.display ? 'hideTrash' : ''" :src="fileUrl+trash" v-show="item.delete" @click.stop="deleteCollect(item,index)"></image>
<image class="work-picture" :src="item.picture" mode="widthFix"></image>
<view class="sign-text">{{ siftList.length?siftList[item.type].label : '暂无' }}</view>
<image class="sign" :src="fileUrl+sign"></image>
<image class="compare-sign" mode="widthFix" :src="item.compare"></image>
<u-lazy-load border-radius="30" class="work-picture"
:image="ip+item.path"></u-lazy-load>
<!-- <image :lazy-load="true" class="work-picture" :src="ip+item.path" mode="widthFix"></image> -->
<view class="sign-text">{{ item.type || '暂无' }}</view>
<image :lazy-load="true" class="sign" :src="fileUrl+sign"></image>
<!-- <image class="compare-sign" mode="widthFix" :src="item.compare"></image> -->
</view>
</view>
<!-- 下面这里等后端有了之后，用isFinish判断 -->
<view class="last-tip">
~~ 已加载全部 ~~
<view class="last-tip" @click="getMore">
{{ (current === 0 ? workForm.isFinish : collectForm.isFinish) ? '~~ 已加载全部 ~~' : '~~ 点击加载更多 ~~' }}
</view>
</view>
<u-toast ref="uToast"></u-toast>
@ -58,19 +60,16 @@ export default {
type: Number,
default: 0
},
siftList:{
type: Array,
default: []
}
},
data(){
return{
// 基础路径
ip: configService.ip,
fileUrl: configService.fileUrl + 'pixel/',
// logo图标
logo: 'home/logo.png',
// 筛选项
selectList: ["我的藏品", "我的创作"],
selectList: ["我的创作", "我的藏品"],
// 顶部背景
topBackground: 'work/background.png',
// 选择黑星图片
@ -83,67 +82,24 @@ export default {
trash: 'work/trash.png',
// 当前选项
current: 0,
// 收藏数
collectCount: 55,
// 作品数
workCount: 15,
// 收藏作品列表
collectList:[
{
picture: 'https://aichat-1314286455.cos.ap-guangzhou.myqcloud.com/af29f44ad5abf333f52f7a0e9dd65260.png',
compare: 'https://aichat-1314286455.cos.ap-guangzhou.myqcloud.com/1b6ef6597fd59c8af1b50dc2658f431e.jpg',
type: 1,
},
{
picture: 'https://aichat-1314286455.cos.ap-guangzhou.myqcloud.com/e6aa2563a3a58064b9d5144be60f6320.png',
compare: 'https://aichat-1314286455.cos.ap-guangzhou.myqcloud.com/f1f0a1a6c08a026d90f396294b57f96b.png',
type: 7,
},
{
picture: 'https://aichat-1314286455.cos.ap-guangzhou.myqcloud.com/ccbd6422e3b8776d1b2ae2a37b22bd45.png',
compare: 'https://aichat-1314286455.cos.ap-guangzhou.myqcloud.com/ab95c3bf9c95876cfaed68a15bbf0b72.png',
type: 7,
},
{
picture: 'https://aichat-1314286455.cos.ap-guangzhou.myqcloud.com/39accf84409cb5b8b71b6a039792aaac.png',
compare: 'https://aichat-1314286455.cos.ap-guangzhou.myqcloud.com/bb3242fa17a79fd4f9b8597761f1f168.png',
type: 6,
},
{
picture: 'https://aichat-1314286455.cos.ap-guangzhou.myqcloud.com/31689612c754f8e1fda031a654f9cc2.png',
compare: 'https://aichat-1314286455.cos.ap-guangzhou.myqcloud.com/3fc992cfbd3827719b984d5b2008d354.png',
type: 2,
},
{
picture: 'https://aichat-1314286455.cos.ap-guangzhou.myqcloud.com/e03df2fa9aede0b76530afca14e45c3b.png',
compare: 'https://aichat-1314286455.cos.ap-guangzhou.myqcloud.com/e7909151044c9343a9a9b643b85883c9.jpg',
type: 4,
},
{
picture: 'https://aichat-1314286455.cos.ap-guangzhou.myqcloud.com/ccbd6422e3b8776d1b2ae2a37b22bd45.png',
compare: 'https://aichat-1314286455.cos.ap-guangzhou.myqcloud.com/ab95c3bf9c95876cfaed68a15bbf0b72.png',
type: 7,
},
{
picture: 'https://aichat-1314286455.cos.ap-guangzhou.myqcloud.com/39accf84409cb5b8b71b6a039792aaac.png',
compare: 'https://aichat-1314286455.cos.ap-guangzhou.myqcloud.com/bb3242fa17a79fd4f9b8597761f1f168.png',
type: 6,
},
{
picture: 'https://aichat-1314286455.cos.ap-guangzhou.myqcloud.com/31689612c754f8e1fda031a654f9cc2.png',
compare: 'https://aichat-1314286455.cos.ap-guangzhou.myqcloud.com/3fc992cfbd3827719b984d5b2008d354.png',
type: 2,
},
{
picture: 'https://aichat-1314286455.cos.ap-guangzhou.myqcloud.com/e03df2fa9aede0b76530afca14e45c3b.png',
compare: 'https://aichat-1314286455.cos.ap-guangzhou.myqcloud.com/e7909151044c9343a9a9b643b85883c9.jpg',
type: 4,
}
],
collectList:[],
// 我的创作
workList:[
],
workList:[],
// 我的创作Form
workForm: {
current: 1,
size: 10,
isFinish: false,
total: 0
},
// 我的收藏Form
collectForm: {
current: 1,
size: 10,
isFinish: false,
total: 0
},
// 标签图标
sign: 'home/typelam.png',
// 点击次数
@ -152,22 +108,80 @@ export default {
startVal: 0,
}
},
beforeDestroy() {
this.workList = [];
this.collectList = [];
},
methods:{
// 初始化
init(){
this.workForm = {current: 1,size: 10,isFinish: false,total: 0};
this.collectForm = {current: 1,size: 10,isFinish: false,total: 0};
this.current === 0 ? this.getMyWorks() : this.getCollections();
},
// 查看更多
getMore(){
if(this.current === 0 ? this.workForm.isFinish : this.collectForm.isFinish) return;
if(this.current === 0){
this.workForm.current++;
this.getMyWorks();
}else{
this.collectForm.current++;
this.getCollections();
}
},
// 获取我的创作
async getMyWorks(){
if(this.workForm.isFinish) return;
let res = await this.$api.myCreations(this.workForm);
if(res.success){
const { records, total, current, size } = res.data;
const result = records.map((item)=>{
return {...item, path: encodeURI(item.path)}
});
if(current === 1){
this.workList = result
}else{
this.workList.push(...result);
}
this.workForm.total = total;
this.workForm.isFinish = current*size >= total;
}else{
this.$refs.uToast.show({type:'error',title: "我的创作获取失败!"});
}
},
// 获取我的藏品
getCollections(){
},
imgLoaded() {
// 占位图加载完成
if (this.loadStatus == '') {
this.loadStatus = 'lazyed';
}
// 真正的图片加载完成
else if (this.loadStatus == 'lazyed') {
this.loadStatus = 'loaded';
this.$emit('load', this.index);
}
},
// 错误的图片加载完成
errorImgLoaded() {
this.$emit('error', this.index);
},
// 切换选项
changeSelect(index){
this.current = index;
this.startVal = index===0?this.workCount:this.collectCount;
this.startVal = index===0?this.collectForm.total:this.workForm.total;
},
// 监听单双击，单击-预览图片、双击-显示删除图标
maskTouchend(item,index){
this.touchNum ++;
setTimeout(()=>{
if(this.touchNum == 1){
tools.methods.lookImage(0,[item.picture,item.compare]);
const array = [this.ip+item.path];
if(item.compare) array.push(item.compare);
tools.methods.lookImage(0,array);
}
if(this.touchNum >= 2){
const result = item.delete?0:1;
@ -194,13 +208,21 @@ export default {
// 取消收藏
deleteCollect(item,index){
let that = this;
let current = this.current===0;
uni.showModal({
title: '提示',
content: '是否确认取消收藏该作品？',
content: `是否确认${current?'删除':'取消收藏'}该作品？`,
confirmColor: '#94d500',
success: function (res) {
success: async (res) => {
if (res.confirm) {
that.$refs.uToast.show({type:'success',title: "已取消收藏!"});
let res = await that.$api.deleteCreation(item.id);
if(res.success){
current ? that.workList.splice(index, 1) : this.collectList.splice(index, 1);
current ? that.workForm.total-- : that.collectForm.total--;
that.$refs.uToast.show({type:'success',title: `已${current?'删除':'取消收藏'}该作品！`});
}else{
that.$refs.uToast.show({type:'error',title: `作品${current?'删除':'取消收藏'}失败！`});
}
}
}
});
@ -314,6 +336,10 @@ export default {
.work-picture{
border: 0.1em solid #d5ff00;
border-radius: 30rpx;
// 骗系统开启硬件加速
transform: transition3d(0, 0, 0);
// 防止图片加载“闪一下”
will-change: transform;
}
.sign{
border: none;
@ -325,6 +351,10 @@ export default {
height: 47rpx;
}
.sign-text{
width: 132rpx;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
color: #ffffff;
font-size: 28rpx;
position: absolute;

8
pages/mobile_web/workshops/common/functionalClassification.js Normal file
View File

@ -0,0 +1,8 @@
// 查看更多
const toList = () => {
console.log('more');
}
export {
toList
};

10
pages/mobile_web/workshops/common/imgDeal.js
View File

@ -7,6 +7,7 @@ const selectDealFunction = (vm,model,params,success) => {
case 1 :
case 2 :
case 3 :
case 4 :
diagramOfTheSketch(vm,params,success);
break;
};
@ -29,10 +30,11 @@ const commonUpload = (vm,params,success) =>{
formData: params,
header:{'token':vm.$store.state.vuex_token},
success: (res) => {
if(res.data){
success(encodeURI(JSON.parse(res.data).data.path));
let result = JSON.parse(res.data);
if(result.success){
success(encodeURI(result.data.path));
} else {
vm.$refs.uToast.show({type: 'error',title: "余额不足，请充值!"});
vm.$refs.uToast.show({type: 'error',title: "处理失败，请检查余额是否充足!"});
vm.dotLoading = false;
return;
}
@ -45,5 +47,5 @@ const commonUpload = (vm,params,success) =>{
}
export {
selectDealFunction
selectDealFunction,
};

349
pages/mobile_web/workshops/components/dress_select.vue Normal file
View File

@ -0,0 +1,349 @@
<template>
<view class="dress-select">
<view class="mw-editor" v-show="list[4]&&list[4].length>0">
<u-section title="预设模特" :right="false" color="#fff" lineColor="#c2ea04" fontSize="40"></u-section>
<scroll-view scroll-x class="ds-mannequin">
<view class="mannequin-list">
<view class="mannequin-item" v-for="(item,index) in list[4]" :key="item.id"
@click="selectMannequin(index)" :class="mannequinJudge(index)?'mannequin-item-select':''">
<image :src="getImage(item.path)"></image>
</view>
</view>
</scroll-view>
</view>
<view class="mw-editor">
<u-section :title="tips[currentStep]" :right="showRight" color="#fff" lineColor="#c2ea04" fontSize="40">
<template #right>
<view v-if="showRight">
<u-icon @click="currentStep-=1" name="/static/back.png" size="32" color="#fff"></u-icon>
</view>
</template>
</u-section>
<view class="section-options" v-if="currentStep !== 2">
<u-tag v-for="(item,index) in getOptions" :key="item.id" :index="index"
:text="item.optionName" @click="selectElement" :class="judge(index)?'u-tag-select':''"></u-tag>
</view>
<view class="section-options" v-else>
<view class="section-cloth" v-for="(item,index) in getOptions" :key="item.id"
@click="selectElement(index)" :class="judge(index)?'u-tag-select':''">
<image :src="getImage(item.path)"></image>
</view>
<view class="section-cloth" v-if="list[currentStep+form.cloth]&&list[currentStep+form.cloth].length>9"
@click="showMoreOptions = true" :class="(form.cloth===0? (form.coat>=getOptions.length) :
(form.bottoms>=getOptions.length) )?'u-tag-select':''">
<image src="/static/image-more.png"></image>
<text>更多</text>
</view>
</view>
</view>
<!-- 更多类型 -->
<u-popup class="options-popup" v-model="showMoreOptions" mode="bottom" border-radius="30"
closeable close-icon="arrow-down" close-icon-color="#fff">
<view class="op-content">
<view class="op-top">
<u-icon name="tags" size="42" label="更多服装" color="#a7b6b8"
label-size="35" label-color="#a7b6b8" margin-left="20"></u-icon>
</view>
<scroll-view :scrollY="true" class="options-list">
<view class="section-options">
<view class="section-cloth" v-for="(item,index) in list[currentStep+form.cloth]"
:key="item.id" @click="selectElement(index)" :class="judge(index)?'u-tag-select':''">
<image :lazy-load="true" :src="getImage(item.path)"></image>
</view>
</view>
</scroll-view>
</view>
</u-popup>
</view>
</template>
<script>
import configService from '@/common/config.service.js';
export default {
data() {
return {
// 列表存储
list: [
[{id: 1,optionName: '男'}, {id: 2,optionName: '女'},],
[{id: 1,optionName: '上衣'}, {id: 2,optionName: '下装'},],
],
// 提示列表
tips: ["选择性别","选择上下衣","选择服装"],
currentStep: 1,// 当前步骤
form: {
sex: '',// 性别，0-男、1-女
cloth: '',// 服装，0-上衣、1下装
coat: '',// 上衣
topImageId: '',// 上床id
bottoms: '',// 下装
bottomImageId: '',// 下装id
mannequinIndex: '',// 模特下标
imageId: '',// 模特id
previewMode: 0,// 预览模式,0关闭,1开启,默认0
},
// 弹窗显示更多选项
showMoreOptions: false
}
},
computed: {
// 获取options
getOptions(){
if(this.currentStep<2) return this.list[this.currentStep];
else {
let options = this.list[this.currentStep+this.form.cloth];
const length = options.length;
return length > 9 ? options.slice(0,8) : options;
}
},
// 是否显示返回
showRight(){
return this.currentStep > 1;
}
},
created() {
// 获取模特
this.getCpPhotoById(2);
},
methods: {
// 初始化
async getCpPhotoById(index){
// 获取服装-labelId，1-上衣、2-下装、3-模特
let res = await this.$api.getCpPhotoById({labelId: (index+1)});
if(res.success){
this.list[index+2] = await res.data.map((item)=>{
return {...item,path: encodeURI(item.path)}
});
this.$forceUpdate();
}else{
uni.showToast({
icon: 'none', title: index===2?'模特获取失败！':'服装获取失败！'
})
}
},
// 判断模特是否选中
mannequinJudge(index){
return this.form.mannequinIndex === index;
},
// 判断是否选中
judge(index){
if(this.currentStep === 0)
return this.form.sex === index;
else if(this.currentStep === 1)
return this.form.cloth === index;
else {
if(this.form.cloth === 0) return this.form.coat === index;
else return this.form.bottoms === index;
}
return false;
},
// 模特选择
selectMannequin(index){
if(this.form.mannequinIndex === index){
this.form.mannequinIndex = '';
this.form.previewMode = 0;
this.form.imageId = '';
this.$emit('previewMannequin','');
} else {
this.form.mannequinIndex = index;
this.form.previewMode = 1;
this.form.imageId = this.list[4][index].id;
this.$emit('previewMannequin',configService.ip+this.list[4][index].path);
}
},
// 选择option
async selectElement(index){
// 性别
if(this.currentStep === 0){
this.form.sex = index;
this.currentStep += 1;
// 服装
}else if(this.currentStep === 1){
this.form.cloth = index;
// 判断是否加载过，有则不再请求后端
if(this.list[index+2]===undefined){
await this.getCpPhotoById(index);
this.currentStep += 1;
}else{this.currentStep += 1;}
// 点击上衣或下装
}else{
if(this.form.cloth === 0){
const judge = this.form.coat === index;
this.form.coat = judge ? '' : index;
this.form.topImageId = judge ? '' : this.list[2][index].id;
} else {
const judge = this.form.bottoms === index;
this.form.bottoms = judge ? '' : index;
this.form.bottomImageId = judge ? '' : this.list[3][index].id;
}
}
},
// 重置表单
resetForm(){
this.form = {
sex: '',// 性别，0-男、1-女
cloth: '',// 服装，0-上衣、1下装
coat: '',// 上衣
topImageId: '',// 上床id
bottoms: '',// 下装
bottomImageId: '',// 下装id
mannequinIndex: '',// 模特下标
imageId: '',// 模特id
previewMode: 0,// 预览模式,0关闭,1开启,默认0
}
},
// 格式化图片路径
getImage(url){
return configService.ip+url;
}
}
}
</script>
<style scoped lang="scss">
.dress-select{
margin-top: 20rpx;
.mw-editor{
display: flex;
flex-direction: column;
.ds-mannequin{
margin: 40rpx 0;
// background-color: #2d3240;
height: 280rpx;
.mannequin-list{
display: flex;
height: 100%;
.mannequin-item{
width: 200rpx;
height: 100%;
margin-right: 20rpx;
border-radius: 8rpx;
background-color: rgba(236,245,255,0.8);
image{
width: 200rpx;
height: 100%;
border: 2rpx solid #fff;
border-radius: 8rpx;
}
}
.mannequin-item-select{
box-shadow: 0 0 20rpx #eee;
color: #2979ff;
background-color: rgba(236,245,255,1);
image{
border: 2rpx solid #2979ff !important;
}
}
}
}
.section-options{
margin-top: 40rpx;
display: grid;
grid-gap: 30rpx;
grid-template-columns: repeat(3,1fr);
.u-tag{
width: 200rpx;
height: 80rpx;
font-size: 28rpx;
display: flex;
color: rgba(41,121,255,0.8);
background-color: rgba(236,245,255,0.8);
align-items: center;
justify-content: center;
}
.u-tag-select{
box-shadow: 0 0 20rpx #eee;
color: #2979ff;
background-color: rgba(236,245,255,1);
image{
border: 2rpx solid #2979ff !important;
}
}
.section-cloth{
width: 200rpx;
height: 200rpx;
border-radius: 8rpx;
background-color: rgba(236,245,255,0.8);
position: relative;
display: flex;
align-items: center;
justify-content: center;
image{
width: 200rpx;
height: 200rpx;
border: 2rpx solid #fff;
border-radius: 8rpx;
}
text{
position: absolute;
color: #fff;
margin-bottom: -100rpx;
}
}
}
}
}
.options-popup{
.op-content{
background-color: #2D3240;
padding: 10rpx 25rpx;
display: flex;
flex-direction: column;
.op-top{
height: 80rpx;
display: flex;
align-items: center;
}
.options-list{
height: 800rpx;
color: #a7b6b8;
width: 100%;
margin-top: 20rpx;
.section-options{
margin-top: 40rpx;
display: grid;
grid-gap: 30rpx;
grid-template-columns: repeat(3,1fr);
.u-tag-select{
box-shadow: 0 0 20rpx #eee;
color: #2979ff;
background-color: rgba(236,245,255,1);
image{
border: 2rpx solid #2979ff !important;
}
}
.section-cloth{
width: 200rpx;
height: 200rpx;
border-radius: 8rpx;
background-color: rgba(236,245,255,0.8);
position: relative;
display: flex;
align-items: center;
justify-content: center;
image{
width: 200rpx;
height: 200rpx;
border: 2rpx solid #fff;
border-radius: 8rpx;
}
text{
position: absolute;
color: #fff;
margin-bottom: -100rpx;
}
}
}
}
}
}
</style>

72
pages/mobile_web/workshops/index.vue
View File

@ -65,7 +65,7 @@
</EditorBox>
</view>
<view class="workshops-tip" v-if="form.type !== 1 || (form.type === 1 && resultFile)">
Tips：{{ resultFile ? '点击预览图片效果~' : form.tips+"~" }}
Tips：{{ resultFile ? '点击预览图片效果~' : form.tips||'智能创作'+"~" }}
</view>
<!-- 文生图 -->
@ -93,12 +93,13 @@
<!-- 换衣选择 -->
<view class="mw-editor" v-if="!resultFile && form.type===4">
<DressSelect />
<DressSelect ref="dressRef" @previewMannequin="previewMannequin"/>
</view>
</view>
<view class="workshops-btn">
<u-button class="wbu-btn" @click="startDeal" v-if="resultFile===''"
<u-button class="wbu-btn" @click="startDeal" v-if="resultFile===''" :disabled="functionDisable"
:style="functionDisable?{opacity: '0.6'}:{}"
ripple :hairLine="false" shape="circle" rippleBgColor="#f0fdbf" :loading='dotLoading'>
<u-icon name="edit-pen" size="42"></u-icon>开启魔法
</u-button>
@ -140,8 +141,9 @@ import configService from '@/common/config.service.js';
import { tools } from '@/utils/utils.js';
import EditorBox from './components/editor.vue';
import DressSelect from './components/dress_select.vue';
import { selectDealFunction } from './common/imgDeal'
import { toList } from './common/functionalClassification'
import { selectDealFunction } from './common/imgDeal';
import { toList } from './common/functionalClassification';
import { ossUpload } from '@/common/ossutil/ossWebUpload.js';
export default {
components: {
EditorBox, DressSelect
@ -199,9 +201,13 @@ export default {
icon: 'camera',
background: 'linear-gradient(to right, #c2fc3b 0%, #c2ffd8 51%, #c2fc3b 100%)',
fun: ()=>{
if(this.form.type===0)
if(this.form.type===0){
this.selectImage();
else{
}else if(this.form.type === 4){
this.resultFile = '';
this.uploadFile = '';
this.$refs.dressRef.resetForm();
}else{
this.resultFile = '';
this.uploadFile = '';
}
@ -227,7 +233,9 @@ export default {
// 元素选择下标
selectElementIndex: '',
// 弹窗显示更多选项
showMoreOptions: false
showMoreOptions: false,
// 按钮禁用
functionDisable: false
}
},
// #ifndef H5
@ -276,6 +284,7 @@ export default {
res.data.type = Number(res.data.type);
this.form = res.data;
}else{
this.functionDisable = true;
this.$refs.uToast.show({type:'error',title: "ai功能暂未开放!"});
}
}catch(e){}
@ -306,9 +315,20 @@ export default {
// #endif
if(this.resultFile!=='') this.resultFile = '';
that.uploadFile = res.tempFilePaths[0];
// ossUpload(res.tempFiles[0]);
// 如果是ai换衣，上传了图片需要关闭预览模式
if(this.form.type === 4){
this.$refs.dressRef.form.previewMode = 0;
this.$refs.dressRef.form.mannequinIndex = '';
this.$refs.dressRef.form.imageId = '';
}
}
});
},
// ai试衣模特预选
previewMannequin(model){
this.uploadFile = model;
},
// 预览图片
previewImage(){
const previewImages = [this.ip+this.resultFile];
@ -323,11 +343,11 @@ export default {
if(!this.legalJudge()) return;
// 再实际处理
selectDealFunction(that,that.form.type,that.getParams(that.form),
(path)=>{
that.resultFile = path;
that.$refs.uToast.show({type:'success',title: `${that.form.name}成功!`});
this.dotLoading = false;
});
(path)=>{
if(path) that.resultFile = path;
that.$refs.uToast.show({type:'success',title: `${that.form.name}成功!`});
this.dotLoading = false;
});
}catch(e){
this.dotLoading = false;
}finally{
@ -343,7 +363,7 @@ export default {
}
if(currentType === 1){
if(this.selectElementIndex === '' || !this.form.text){
this.$refs.uToast.show({type:'error',title: "完善信息!"});
this.$refs.uToast.show({type:'error',title: "请完善信息!"});
this.dotLoading = false;
return false;
}
@ -355,7 +375,15 @@ export default {
}
if(currentType === 3){
if(this.selectElementIndex === '' || !this.form.text || !this.form.promt){
this.$refs.uToast.show({type:'error',title: "完善信息!"});
this.$refs.uToast.show({type:'error',title: "请完善信息!"});
this.dotLoading = false;
return false;
}
}
if(currentType === 4){
const { bottomImageId, topImageId, previewMode, imageId } = this.$refs.dressRef.form;
if(topImageId===''){
this.$refs.uToast.show({type:'error',title: "请选择更换上衣!"});
this.dotLoading = false;
return false;
}
@ -395,6 +423,20 @@ export default {
promt: promt
}
break;
case 4 :
const { bottomImageId, topImageId, previewMode, imageId } = this.$refs.dressRef.form;
result = {
serviceId: id,
bottomImageId: bottomImageId,
topImageId: topImageId,
filePath: that.uploadFile,
imageId: imageId,
previewMode: previewMode
};
if(bottomImageId === '') delete result.bottomImageId;
if(topImageId === '') delete result.topImageId;
previewMode === 0 ? delete result.imageId : delete result.filePath;
break;
}
return result;
},

BIN
static/back.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

BIN
static/image-more.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

4
store/index.js
View File

@ -31,8 +31,8 @@ const store = new Vuex.Store({
state: {
// 如果上面从本地获取的lifeData对象下有对应的属性，就赋值给state中对应的变量
// 加上vuex_前缀，是防止变量名冲突，也让人一目了然
// fbc545a91cc94fe89296828a25a7e08e@9085553879028596738
vuex_token: lifeData.vuex_token ? lifeData.vuex_token : 'fbc545a91cc94fe89296828a25a7e08e@9085553879028596738',
// vuex_token: 'fbc545a91cc94fe89296828a25a7e08e@9085553879028596738',
vuex_token: lifeData.vuex_token ? lifeData.vuex_token : '',
user_message:lifeData.user_message ? lifeData.user_message : {},
current_platform: lifeData.current_platform ? lifeData.current_platform : ''
},