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

pc端完善

Browse Source
This commit is contained in:
Double-_-Z 2025-02-18 11:53:32 +08:00
parent 2384142adc
commit 05bdd90f19
12 changed files with 153 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
main.js
View File

@ -13,6 +13,8 @@ Vue.use(uView);
// #ifdef H5
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import VueMasonry from 'vue-masonry-css'
Vue.use(VueMasonry);
Vue.use(ElementUI)
// #endif

3
package.json
View File

@ -1,5 +1,6 @@
{
"dependencies": {
"element-ui": "^2.15.14"
"element-ui": "^2.15.14",
"vue-masonry-css": "^1.0.3"
}
}

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

@ -75,7 +75,7 @@ export default {
// #endif
this.scrollTop = e.scrollTop;
},
// #ifdef MP
// #ifdef MP || APP
onLoad(){
let index = uni.getStorageSync('current');
this.current = index?index:0;
@ -91,12 +91,12 @@ export default {
let index = uni.getStorageSync('current');
this.current = index?index:0;
this.isLogin = this.$store.state.vuex_token;
// #ifdef MP
// #ifdef MP || APP
if(this.current === 2){
this.changeCurrent(this.current);
}
// #endif
// #ifndef MP
// #ifndef MP || APP
if(this.current === 1){
uni.pageScrollTo({scrollTop: 0});
}

4
pages/mobile_web/recharge/detail.vue
View File

@ -236,10 +236,10 @@ export default {
},
// 返回
back(){
// #ifdef MP
// #ifdef MP || APP
uni.navigateBack();
// #endif
// #ifndef MP
// #ifndef MP || APP
uni.redirectTo({
url: '/pages/mobile_web/recharge/recharge'
})

4
pages/mobile_web/recharge/recharge.vue
View File

@ -136,10 +136,10 @@
methods:{
// 返回
back(){
// #ifdef MP
// #ifdef MP || APP
uni.navigateBack();
// #endif
// #ifndef MP
// #ifndef MP || APP
uni.redirectTo({
url: '/pages/mobile_web/index/index'
})

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

@ -414,10 +414,10 @@ export default {
},
// 返回
back(){
// #ifdef MP
// #ifdef MP || APP
uni.navigateBack();
// #endif
// #ifndef MP
// #ifndef MP || APP
uni.redirectTo({
url: '/pages/mobile_web/index/index'
})

81
pages/pc_web/home/components/second.vue
View File

@ -45,22 +45,28 @@
</view>
</view>
<view class="hs-services">
<!-- 多列布局图片 -->
<view class="hs-service" v-for="(item,index) in workList" :key="item.id">
<u-lazy-load @click="preview(item)" :title="item.serviceName||'暂无'" border-radius="30" class="hss-picture"
:image="getWorkPath(item.path)" v-loading="item.loading"></u-lazy-load>
<view class="sign-text">{{ item.serviceName || '暂无' }}</view>
<image :lazy-load="true" class="sign" :src="fileUrl+sign"></image>
<view class="work-todo">
<view class="wt-same" @click.stop="$emit('handleChangeService', item.serviceId)">
<image :src="fileUrl+magicWand"></image>
<text>做同款</text>
</view>
<view class="wt-same wt-download" @click="download(item)">
<u-icon name="download" size="36" color="#c9fe76" />
<text>下载 </text>
</view>
</view>
<!-- 瀑布流布局图片 -->
<masonry :cols="7" gutter="1em">
<view class="hs-service" v-for="(item,index) in workList" :key="item.id">
<u-lazy-load @click="preview(item)" :title="item.serviceName||'暂无'" border-radius="30" class="hss-picture"
:image="getWorkPath(item.path)" v-loading="item.loading"></u-lazy-load>
<view class="sign-text">{{ item.serviceName || '暂无' }}</view>
<image :lazy-load="true" class="sign" :src="fileUrl+sign"></image>
<view class="work-todo">
<view class="wt-same" @click.stop="$emit('handleChangeService', item.serviceId)">
<image :src="fileUrl+magicWand"></image>
<text>做同款</text>
</view>
<view class="wt-same wt-download" @click="download(item)">
<u-icon name="download" size="36" color="#c9fe76" />
<text>下载 </text>
</view>
</view>
</view>
</masonry>
<!-- 下面这里等后端有了之后，用isFinish判断 -->
<view class="last-tip" :class="recommendForm.isFinish?'':'clickable'" @click="getMore">
{{ recommendForm.isFinish ? '~~ 已加载全部 ~~' : '~~ 点击加载更多 ~~' }}
</view>
</view>
</view>
@ -102,7 +108,7 @@ export default {
// 推荐作品表单
recommendForm: {
current: 1,
size: 10,
size: 20,
isFinish: true,
serviceName: '',
isBackend: 0
@ -237,6 +243,12 @@ export default {
}
});
},
// 查看更多
getMore(){
if(this.recommendForm.isFinish) return;
this.recommendForm.current++;
this.getWorkList();
},
}
}
</script>
@ -406,18 +418,18 @@ export default {
}
}
.hs-services{
padding: 40rpx;
column-count:5;
-moz-column-count:5; /* Firefox */
-webkit-column-count:5; /* Safari 和 Chrome */
column-gap: 2em;
-moz-column-gap: 2em;
-webkit-column-gap: 2em;
padding: 0rpx 40rpx 40rpx;
// column-count:5;
// -moz-column-count:5; /* Firefox */
// -webkit-column-count:5; /* Safari 和 Chrome */
// column-gap: 2em;
// -moz-column-gap: 2em;
// -webkit-column-gap: 2em;
.hs-service{
-webkit-column-break-inside: avoid;
break-inside: avoid; /*防止断点*/
// width: 400rpx;
margin-bottom: 2em;
margin-bottom: 1em;
position: relative;
overflow: hidden;
border-radius: 30rpx;
@ -509,6 +521,25 @@ export default {
}
}
}
.last-tip{
font-size: 36rpx;
text-align: center;
margin-top: 20rpx;
margin-bottom: 20rpx;
background-image: linear-gradient(to right, #a3d4ff 0%, #bee7df 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.clickable{
cursor: pointer;
&:hover{
opacity: 0.8;
}
&:active{
opacity: 0.6;
}
}
}
}
</style>

12
pages/pc_web/home/home.vue
View File

@ -35,9 +35,8 @@
</view>
</view>
<view class="second-content">
<Second @showToast="showToast" @handleChangeService="handleChangeService"/>
<Second @showToast="$emit('toast')" @handleChangeService="handleChangeService"/>
</view>
<u-toast ref="uToast"></u-toast>
</view>
</template>
@ -104,20 +103,16 @@ export default {
this.$refs.uploadCover.clearFiles();
const size = file.size / 1024; // 计算文件大小
if(size<5 || (size/1024)>5){
this.$refs.uToast.show({type: 'warning',title: "请上传大小为5KB~5MB的图片!"});
this.$emit('toast',{type: 'warning',title: "请上传大小为5KB~5MB的图片!"});
return;
}
let isAccept = new RegExp('image/*').test(file.raw.type)
if (!isAccept) {
this.$refs.uToast.show({type: 'warning',title: "图片上传格式错误!"});
this.$emit('toast',{type: 'warning',title: "图片上传格式错误!"});
return;
}
uni.$emit('workshopPage',fileList[0]?.url);
},
// 提示语弹窗
showToast({type,title}){
this.$refs.uToast.show({type: type, title: title});
}
},
mounted() {
this.init();
@ -222,6 +217,7 @@ export default {
position: relative;
margin: 10rpx 40rpx;
border-radius: 12rpx;
// height: 330rpx;
.work-module{
width: 240rpx;
height: 330rpx;

41
pages/pc_web/index/components/header.vue
View File

@ -23,7 +23,8 @@
</view>
<el-dropdown-menu :append-to-body="false" slot="dropdown">
<el-dropdown-item v-for="(item,index) in dropList" :key="index"
class="dropdown-item" :command="item.path">{{ item.name }}
class="dropdown-item" :command="item.path">
{{ item.name }}
</el-dropdown-item>
<el-dropdown-item command="loginout" class="dropdown-loginout" divided>退出登录</el-dropdown-item>
</el-dropdown-menu>
@ -39,6 +40,7 @@
</view>
</view>
<u-toast ref="uToast"></u-toast>
<RecordDrawer :refType="drawerRefType" :showDialog="showRecordDrawer" @toast="showToast" @close="showRecordDrawer = false" />
<LoginDialog :showLogin="showLogin" @toast="showToast" @close="showLogin = false" @openCode="showMobileDownloadDialog = true"
@login="login"/>
<MobileDownloadDialog @toast="showToast" :showDialog="showMobileDownloadDialog" @close="showMobileDownloadDialog = false" />
@ -51,6 +53,7 @@
import LoginDialog from './loginDialog.vue';
import MobileDownloadDialog from './mobileDownloadDialog.vue';
import IdentityDialog from './identityDialog.vue';
import RecordDrawer from './recordDrawer.vue';
import configService from '@/common/config.service.js';
export default {
props: {
@ -66,7 +69,8 @@ export default {
components: {
LoginDialog,
MobileDownloadDialog,
IdentityDialog
IdentityDialog,
RecordDrawer
},
data(){
return{
@ -85,6 +89,10 @@ export default {
name: '工作台',
path: 'workshops'
},
{
name: '作品',
path: 'work'
},
],
// 头像
avatar: 'avatar.png',
@ -100,23 +108,31 @@ export default {
showMobileDownloadDialog: false,
// 个人信息+充值弹窗显示
showIdentityDialog: false,
// 记录抽屉栏显示
showRecordDrawer: false,
// 抽屉栏ref组件类型
drawerRefType: '',
// 下拉栏列表
dropList: [
// {
// name: '我的作品',
// path: ''
// },
// {
// name: '我的藏品',
// path: ''
// },
{
name: '我的作品',
path: ''
},
{
name: '我的藏品',
path: ''
name: '充值记录',
path: 'recharge'
},
{
name: '生成记录',
path: ''
path: 'create'
},
{
name: '发布记录',
path: ''
path: 'share'
},
],
}
@ -172,7 +188,10 @@ export default {
}
}
})
} else if(path) uni.navigateTo({url: path});
} else if(path){
this.drawerRefType = path;
this.showRecordDrawer = true;
}
},
// 换页
changePage(index){

26
pages/pc_web/index/components/identityDialog.vue
View File

@ -48,7 +48,7 @@
</view>
</view>
<view class="pay-btn">
<view class="pay-text" :class=" selectElementIndex ? '' : 'pay-disabled'" @click="toShowCell(2)">
<view class="pay-text" :class=" selectElementIndex !== '' ? '' : 'pay-disabled'" @click="toShowCell(2)">
<u-icon name="weixin-fill" color="#b2f08f" size="40" margin-left="10"
label="微信支付" label-color="#b2f08f" label-size="32"/>
</view>
@ -191,22 +191,28 @@ export default {
this.showCell = false;
setTimeout(()=>{
// 下面判断模拟后端获取数据生成微信支付二维码
if(type === 2){
if(type === 2 && this.selectElementIndex !== ''){
this.payLoading = true;
setTimeout(()=>{this.payLoading = false;},1000)
this.showCell = true;
this.currentType = type;
setTimeout(()=>{this.payLoading = false;},1000);
}else if(type !== 2){
this.showCell = true;
this.currentType = type;
}
this.showCell = true;
this.currentType = type;
});
// 当前侧栏关闭——打开侧栏
} else {
// 下面判断模拟后端获取数据生成微信支付二维码
if(type === 2){
if(type === 2 && this.selectElementIndex !== ''){
this.payLoading = true;
setTimeout(()=>{this.payLoading = false;},1000)
this.showCell = true;
this.currentType = type;
setTimeout(()=>{this.payLoading = false;},1000);
}else if(type !== 2){
this.showCell = true;
this.currentType = type;
}
this.showCell = true;
this.currentType = type;
}
},
// 预览图片
@ -215,7 +221,7 @@ export default {
},
// 选择支付额度
selectOption(index){
if(this.selectElementIndex && this.selectElementIndex !== index){
if(this.showCell && this.currentType === 2 && this.selectElementIndex !== index){
this.showCell = false;
setTimeout(()=>{this.toShowCell(2);})
}

17
pages/pc_web/index/index.vue
View File

@ -6,9 +6,10 @@
</view>
<view style="width: 100%;height: 100rpx;"></view>
<view class="pc-main">
<component ref="pageRef" @changeService="changeService" :sid="serviceId" :is="refs[current]" />
<component ref="pageRef" @toast="showToast" @changeService="changeService" :sid="serviceId" :is="refs[current]" />
</view>
</el-container>
<Movable textColor="#94d500" @toast="showToast" v-if="isLogin !== ''"/>
<Loading :show="loading" />
<u-back-top class="back-top" :scrollTop="scrollTop" zIndex="100" :iconStyle="{ color: '#fff', fontSize: '50rpx' }"
:customStyle="{background: 'linear-gradient(180deg, #96fe11 0%, #f0fdbf 100%)',
@ -27,12 +28,14 @@
<script>
import Header from './components/header.vue';
import Home from '@/pages/pc_web/home/home.vue';
import Workshops from '@/pages/pc_web/workshops/workshops.vue'
import Workshops from '@/pages/pc_web/workshops/workshops.vue';
import Work from '@/pages/pc_web/work/work.vue';
import Movable from './components/movable.vue';
import configService from '@/common/config.service.js';
import { tools } from '@/utils/utils.js';
export default {
components:{
Header, Home, Workshops
Header, Home, Workshops, Work, Movable
},
data(){
return{
@ -42,7 +45,7 @@ export default {
// 当前页码下标
current: uni.getStorageSync('pc_current')||0,
// refs组件列表
refs: ['home','workshops'],
refs: ['home','workshops','work'],
// 加载
loading: false,
// 滚动顶部
@ -100,13 +103,17 @@ export default {
// 切换主体
changePlat(current){
if(this.current === current) return;
if(current === 1 && !this.isLogin){
if(current !== 0 && !this.isLogin){
this.$refs.header.showLogin = true;
this.$refs.uToast.show({type: 'warning', title: '请先登录！'});
return;
}
uni.setStorageSync('pc_current', current);
this.current = current;
},
// 提示语弹窗
showToast({type,title,duration = 2000}){
this.$refs.uToast.show({type: type, title: title,duration: duration});
}
}
}

45
pages/pc_web/workshops/workshops.vue
View File

@ -151,7 +151,6 @@
<view class="error-tips" v-if="errorTips">失败原因：{{ errorTips }}</view>
</view>
<!-- <Loading :show="loading"></Loading> -->
<u-toast ref="uToast"></u-toast>
</view>
</template>
@ -281,10 +280,10 @@ export default {
this.serviceItem.type = Number(this.serviceItem.type);
}
}else{
this.$refs.uToast.show({type: 'error', title: '服务列表获取失败'});
this.$emit('toast',{type:'error',title: "服务列表获取失败!"});
}
}catch(e){
this.$refs.uToast.show({type: 'error', title: '服务列表获取失败'});
this.$emit('toast',{type:'error',title: "服务列表获取失败!"});
}finally{
this.loading = false;
}
@ -295,7 +294,7 @@ export default {
if(res?.success){
this.rangeImageList = res.data;
}else{
this.$refs.uToast.show({type:'error',title: "随机加载图片获取失败!"});
this.$emit('toast',{type:'error',title: "随机加载图片获取失败!"});
}
},
// 获取单个服务内容
@ -305,7 +304,7 @@ export default {
this.serviceItem = res.data;
this.serviceItem.type = Number(this.serviceItem.type);
}else{
this.$refs.uToast.show({type:'error',title: "ai功能暂未开放!"});
this.$emit('toast',{type:'error',title: "ai功能暂未开放!"});
}
},
// 更换服务
@ -347,13 +346,13 @@ export default {
if(this.serviceItem.exampleUrl){
window.open(encodeURI(this.serviceItem.exampleUrl));
}else{
this.$refs.uToast.show({type:'warning',title: "暂无使用教程，请自求多福!"});
this.$emit('toast',{type:'warning',title: "暂无使用教程，请自求多福!"});
}
},
// 增强提示词
async strengthenTip({input, deal}){
if(input === ''){
this.$refs.uToast.show({type:'warning',title: "请提供部分词句!"});
this.$emit('toast',{type:'warning',title: "请提供部分词句!"});
deal();
return;
}else{
@ -361,7 +360,7 @@ export default {
if(res.success){
deal(res.data);
}else{
this.$refs.uToast.show({type:'error',title: "提示词强化失败!"});
this.$emit('toast',{type:'error',title: "提示词强化失败!"});
deal();
return;
}
@ -383,15 +382,15 @@ export default {
selectImage(file,uploadFiles){
let that = this;
if (file.raw.type.indexOf('image/') === -1) {
this.$refs.uploadCover.clearFiles();
that.$refs.uToast.show({type: 'warning',title: "图片上传格式错误!"});
that.$refs.uploadCover.clearFiles();
that.$emit('toast',{type: 'warning',title: "图片上传格式错误!"});
return;
}
const size = file.raw.size / 1024; // 计算文件大小
if(size<5 || (size/1024)>5){
this.$refs.uploadCover.clearFiles();
that.$refs.uToast.show({type: 'warning',title: "图片大小不符合规范!"});
that.$refs.uploadCover.clearFiles();
that.$emit('toast',{type: 'warning',title: "图片大小不符合规范!"});
return;
}
that.uploadDisabled = true;
@ -402,29 +401,29 @@ export default {
legalJudge(){
const currentType = this.serviceItem.type;
if(currentType !== 3 && currentType !== 1 && this.formData.uploadFile === ''){
this.$refs.uToast.show({type:'error',title: currentType === 4 ? "请选择模特！" : "请上传图片!"});
this.$emit('toast',{type:'error',title: currentType === 4 ? "请选择模特！" : "请上传图片!"});
return false;
}
if(currentType === 1){
if(this.selectElementIndex === '' || !this.serviceItem.text){
this.$refs.uToast.show({type:'error',title: "请完善信息!"});
this.$emit('toast',{type:'error',title: "请完善信息!"});
return false;
}
}
if(currentType === 2 && this.selectElementIndex === ''){
this.$refs.uToast.show({type:'error',title: "请选择图片元素!"});
this.$emit('toast',{type:'error',title: "请选择图片元素!"});
return false;
}
if(currentType === 3){
if(this.selectElementIndex === '' || !this.serviceItem.text || !this.serviceItem.promt){
this.$refs.uToast.show({type:'error',title: "请完善信息!"});
this.$emit('toast',{type:'error',title: "请完善信息!"});
return false;
}
}
if(currentType === 4){
const { bottomsUrl, coatUrl } = this.$refs.dressRef.form;
if(coatUrl===''){
this.$refs.uToast.show({type:'error',title: "请选择更换上衣!"});
this.$emit('toast',{type:'error',title: "请选择更换上衣!"});
return false;
}
}
@ -465,13 +464,13 @@ export default {
let resp = await that.$api.generateImages(that.getParams(that.serviceItem));
if(resp?.success){
that.setResultFile(resp.data.path);
that.$refs.uToast.show({type:'success',title:
that.$emit('toast',{type:'success',title:
'等待ai生成中......点击先看临时工表演',duration: 3000});
that.dotLoading = false;
// 开启轮询
that.delayLoadImage(resp.data.id);
}else{
that.$refs.uToast.show({type:'error',title: `${that.serviceItem.name}失败!`});
that.$emit('toast',{type:'error',title: `${that.serviceItem.name}失败!`});
that.dotLoading = false;
}
},
@ -573,11 +572,11 @@ export default {
// 超13次轮询结束
if(this.asyncPollTime > 13) {
this.asyncPollTime = -1;
this.$refs.uToast.show({type:'warning',title:'生成时间过长，请移步作品栏目查看图片'});
this.$emit('toast',{type:'warning',title:'生成时间过长，请移步作品栏目查看图片'});
return;
}
if(this.asyncPollTime === 3){
this.$refs.uToast.show({type:'warning',title:'火速插队中......客官可稍后移步作品栏目查看图片',
this.$emit('toast',{type:'warning',title:'火速插队中......客官可稍后移步作品栏目查看图片',
duration: 3000});
}
try {
@ -590,7 +589,7 @@ export default {
// 结果判断
this.asyncResult = res.data?.creationState === 't';
this.errorTips = this.asyncResult ? '' : res.data?.reason;
this.$refs.uToast.show({type:this.asyncResult?'success':'error',title: `${this.serviceItem.name}${this.asyncResult?'成功':'失败'}`});
this.$emit('toast',{type:this.asyncResult?'success':'error',title: `${this.serviceItem.name}${this.asyncResult?'成功':'失败'}`});
return;
}
this.asyncPollTime++;
@ -622,7 +621,7 @@ export default {
// 下载图片
download(){
if(!this.asyncResult){
this.$refs.uToast.show({type:'error',title: "图片生成失败，请重试!"});
this.$emit('toast',{type:'error',title: "图片生成失败，请重试!"});
return;
}
window.open(this.formData.resultFile);