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

适配小程序（一版——存遗留问题）

Browse Source
This commit is contained in:
Double-_-Z 2025-02-07 16:58:52 +08:00
parent f4cd69c12a
commit 3bc2db7275
9 changed files with 461 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -50,8 +50,14 @@
</swiper-item>
</swiper>
<view class="dots">
<!-- #ifdef MP -->
<view v-for="item in swiperFunctionList.length" :key="item"
:class="{ active: item+1 === currentPageindex }"></view>
<!-- #endif -->
<!-- #ifndef MP -->
<view v-for="item in swiperFunctionList.length" :key="item"
:class="{ active: item === currentPageindex }"></view>
<!-- #endif -->
</view>
</view>
<!-- 推荐作品 -->
@ -61,17 +67,17 @@
<view class="tfc-right">
筛选
<view class="tfcr-btn" @click="showSift = true">
<u-icon :label="siftLabel||'暂无'" :name="fileUrl+select" color="#d4ff00"
<u-icon class="tfcr-sift" :label="siftLabel||'暂无'" :name="fileUrl+select" color="#d4ff00"
size="17" label-pos="left" label-color="#d4ff00"></u-icon>
</view>
</view>
</view>
<u-waterfall class="show-work" v-model="workList" ref="uWaterfall">
<template v-slot:left="{leftList}">
<view @click="maskTouchend(item)" class="work-item" v-for="(item,index) in leftList" :key="item.id">
<view :class="item.display?'ribbon-fadeOutUp':''" class="collect-ribbon" v-show="item.collect">收藏</view>
<view @click="maskTouchend(item)" class="work-item work-item-odd" v-for="(item,index) in leftList" :key="item.id">
<view :class="item.display?'ribbon-fadeOutUp':''" class="collect-ribbon" v-if="item.collect">收藏</view>
<u-lazy-load border-radius="30" class="work-picture"
:image="getWorkPath(item.path)"></u-lazy-load>
:image="item.path"></u-lazy-load>
<!-- <image class="work-picture" :src="item.picture" mode="widthFix"></image> -->
<view class="sign-text">{{ item.serviceName || '暂无' }}</view>
<image :lazy-load="true" class="sign" :src="fileUrl+sign"></image>
@ -79,14 +85,14 @@
<image :src="fileUrl+magicWand"></image>
<text>做同款</text>
</view>
<image v-if="item.sourcePath" class="compare-sign" mode="widthFix" :src="getWorkPath(item.sourcePath)"></image>
<image v-if="item.sourcePath" class="compare-sign" mode="widthFix" :src="item.sourcePath"></image>
</view>
</template>
<template v-slot:right="{rightList}">
<view @click="maskTouchend(item)" class="work-item" v-for="(item,index) in rightList" :key="item.id">
<view :class="item.display?'ribbon-fadeOutUp':''" class="collect-ribbon" v-show="item.collect">收藏</view>
<view @click="maskTouchend(item)" class="work-item work-item-even" v-for="(item,index) in rightList" :key="item.id">
<view :class="item.display?'ribbon-fadeOutUp':''" class="collect-ribbon" v-if="item.collect">收藏</view>
<u-lazy-load border-radius="30" class="work-picture"
:image="getWorkPath(item.path)"></u-lazy-load>
:image="item.path"></u-lazy-load>
<!-- <image class="work-picture" :src="item.picture" mode="widthFix"></image> -->
<view class="sign-text">{{ item.serviceName || '暂无' }}</view>
<image :lazy-load="true" class="sign" :src="fileUrl+sign"></image>
@ -94,7 +100,7 @@
<image :src="fileUrl+magicWand"></image>
<text>做同款</text>
</view>
<image v-if="item.sourcePath" class="compare-sign" mode="widthFix" :src="getWorkPath(item.sourcePath)"></image>
<image v-if="item.sourcePath" class="compare-sign" mode="widthFix" :src="item.sourcePath"></image>
</view>
</template>
</u-waterfall>
@ -117,6 +123,11 @@
import configService from '@/common/config.service.js';
import { tools } from '@/utils/utils.js';
export default {
// #ifdef MP
options: {
styleIsolation: 'shared'
},
// #endif
props: {
topLevel:{
type: Number,
@ -238,19 +249,28 @@ export default {
},
// 获取推荐作品列表
async getWorkList(){
let that = this;
if(this.recommendForm.isFinish) return;
let res = await this.$api.getRecommend(this.recommendForm);
if(res?.success){
const { records, total, current, size } = res.data;
const result = records;
if(current === 1){
this.workList = result
this.workList = result.map((item)=>{
let nowResult = {...item,path: that.getWorkPath(item.path)};
if(nowResult.sourcePath) nowResult.sourcePath = that.getWorkPath(item.sourcePath);
return nowResult;
});
}else{
this.workList.push(...result);
this.workList.push(...result.map((item)=>{
let nowResult = {...item,path: that.getWorkPath(item.path)};
if(nowResult.sourcePath) nowResult.sourcePath = that.getWorkPath(item.sourcePath);
return nowResult;
}));
}
this.recommendForm.total = total;
this.recommendForm.isFinish = current*size >= total;
this.$forceUpdate();
// this.$refs.uWaterfall.$forceUpdate();
}else{
this.$refs.uToast.show({type:'error',title: "推荐作品获取失败!"});
}
@ -508,7 +528,7 @@ export default {
border: 2rpx solid #d5ff00;
border-radius: 25rpx;
background-color: #1a1929;
.u-icon{
.tfcr-sift{
margin: 16rpx 15rpx;
}
}
@ -523,6 +543,7 @@ export default {
column-gap: 1em;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;
// #ifndef MP
.work-item{
-webkit-column-break-inside: avoid;
break-inside: avoid; /*防止断点*/
@ -641,6 +662,7 @@ export default {
}
}
}
// #endif
}
.last-tip{
color: #d5ff00;
@ -693,4 +715,140 @@ export default {
width: 80rpx !important;
height: 74rpx !important;
}
// #ifdef MP
.show-work{
margin-top: 13rpx;
width: 100%;
// column-count:2;
// -moz-column-count:2; /* Firefox */
// -webkit-column-count:2; /* Safari 和 Chrome */
column-gap: 1em;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;
}
.work-item-odd{
margin-right: 0.5em;
}
.work-item-even{
margin-left: 0.5em;
}
.work-item{
-webkit-column-break-inside: avoid;
break-inside: avoid; /*防止断点*/
margin-bottom: 1em;
position: relative;
padding-top: 13rpx;
.work-picture{
// border: 0.1em solid #d5ff00;
border-radius: 30rpx;
// 骗系统开启硬件加速
transform: transition3d(0, 0, 0);
// 防止图片加载“闪一下”
will-change: transform;
}
.sign{
border: none;
border-radius: 0;
position: absolute;
top: 0.8em;
left: 0.6em;
width: 170rpx;
height: 47rpx;
}
.sign-text{
width: 140rpx;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
color: #ffffff;
font-size: 28rpx;
position: absolute;
top: 0.85em;
left: 0.9em;
z-index: 1;
}
.work-todo{
position: absolute;
bottom: 0.85em;
right: 0.7em;
z-index: 1;
border-radius: 12rpx;
padding: 14rpx 30rpx;
background-color: rgba(0, 0, 0, 0.3);
display: flex;
align-items: center;
text{
font-weight: bold;
background-image: linear-gradient(to right, #cdfbf2 0%, #a3d4ff 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
image{
margin-right: 10rpx;
width: 34rpx;
height: 34rpx;
}
&:active{
opacity: 0.8;
}
}
.compare-sign{
position: absolute;
left: 0;
bottom: 0.2em;
width: 120rpx;
height: 50%;
border: 0.1em solid #d5ff00;
border-radius: 20rpx;
box-shadow: 0 0 20rpx #eee;
// box-shadow: rgba(213, 255, 0, 0.3) 0px 4px 12px;
}
.ribbon-fadeOutUp{
animation-name: fadeOutUp !important;
}
.collect-ribbon {
position: absolute;
z-index: 2;
margin-top: -13rpx;
right: 30rpx;
width: 62rpx;
padding: 20rpx 14rpx 0;
box-sizing: border-box;
text-align: center;
background: #ff9900;
font-size: 25rpx;
color: #fff;
animation-name: bounceInDown;
animation-duration: 0.5s;
animation-fill-mode: both;
&::before,
&::after {
content: '';
position: absolute;
}
&::before {
top: 0;
left: -10rpx;
height: 0;
width: 0;
border-bottom: 14rpx solid #ff9900;
border-left: 12rpx solid transparent;
opacity: .8;
}
&::after {
height: 0;
width: 0;
left: 0;
bottom: -39rpx;
border-left: 31rpx solid #ff9900;
border-right: 32rpx solid #ff9900;
border-bottom: 43rpx solid transparent;
}
}
}
// #endif
</style>

28
pages/mobile_web/my/child_pages/contact.vue
View File

@ -45,7 +45,12 @@
</view>
</view>
<view class="dcf-btn">
<!-- #ifndef MP -->
<u-button ripple :hairLine="false" class="messageSubmit" form-type="submit">提交</u-button>
<!-- #endif -->
<!-- #ifdef MP -->
<u-button ripple :hairLine="false" class="messageSubmit" form-type="submit" @click="submit">提交</u-button>
<!-- #endif -->
</view>
</view>
</form>
@ -59,6 +64,11 @@
<script>
import configService from '@/common/config.service.js';
export default {
// #ifdef MP
options: {
styleIsolation: 'shared'
},
// #endif
data() {
return {
// #ifdef MP
@ -135,8 +145,7 @@ export default {
this.$refs.uToast.show({type:'warning',title: "请输入留言内容!"});
return;
}
let res = await this.$api.addMessage(e.detail.value);
let res = await this.$api.addMessage(this.form);
if(res.success){
this.$refs.uToast.show({type:'success',title: "提交成功!"});
this.clear();
@ -321,6 +330,16 @@ export default {
align-items: center;
justify-content: center;
font-size: 35rpx;
// #ifdef MP
/deep/.u-btn--default{
background-color: #ffffff00;
border: none;
color: #fff;
width: 100%;
height: 100rpx;
border-radius: 56rpx;
}
// #endif
&::after{
display: none;
}
@ -328,6 +347,11 @@ export default {
background-position: right center;
color: #f8f9fb;
text-decoration: none;
// #ifdef MP
/deep/.u-btn--default{
color: #f8f9fb;
}
// #endif
}
}
.type-icon{

15
pages/mobile_web/my/child_pages/setting.vue
View File

@ -87,6 +87,11 @@
<script>
import configService from '@/common/config.service.js';
export default {
// #ifdef MP
options: {
styleIsolation: 'shared'
},
// #endif
data() {
return {
// #ifdef MP
@ -436,6 +441,16 @@ export default {
border: none;
color: #e53636;
background-color: #F8F9FB;
// #ifdef MP
/deep/.u-btn--default{
background-color: #ffffff00;
border: none;
color: #e53636;
width: 100%;
height: 100rpx;
border-radius: 56rpx;
}
// #endif
}
.type-icon{
z-index:90;

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

@ -79,6 +79,11 @@
<script>
import configService from '@/common/config.service.js';
export default {
// #ifdef MP
options: {
styleIsolation: 'shared'
},
// #endif
props: {
topLevel:{
type: Number,

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

@ -96,9 +96,13 @@
</template>
<script>
import { onLoad } from '../../../uview-ui/libs/mixin/mixin';
import configService from '@/common/config.service.js';
export default {
// #ifdef MP
options: {
styleIsolation: 'shared'
},
// #endif
data(){
return{
// #ifdef MP
@ -333,7 +337,7 @@ export default {
display: flex;
flex-direction: column;
min-height: 100vh;
background-color: #f9f9f9;
background: linear-gradient(to bottom, #53a8ed 0%, #f9f9f9 30%, #f9f9f9 100%);
// #ifdef APP || MP
.app-top{
width: 100%;
@ -457,7 +461,7 @@ export default {
display: grid;
grid-gap: 26rpx;
grid-template-columns: repeat(3,1fr);
.u-tag{
/deep/.u-tag{
// width: 200rpx;
height: 74rpx;
font-size: 28rpx;
@ -472,9 +476,18 @@ export default {
}
}
.u-tag-select{
// #ifndef MP
box-shadow: 0 0 15rpx #eee;
color: #2979ff;
background-color: rgba(236,245,255,0.8);
// #endif
// #ifdef MP
/deep/.u-tag{
box-shadow: 0 0 15rpx #eee;
color: #2979ff;
background-color: rgba(236,245,255,0.8);
}
// #endif
}
}
}

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

@ -37,28 +37,28 @@
<view class="mw-content">
<u-waterfall class="show-work" v-model="current===0?workList:collectList" ref="uWaterfall">
<template v-slot:left="{leftList}">
<view @click="maskTouchend(item,index)" class="work-item" v-for="(item,index) in leftList" :key="item.id">
<view @click="maskTouchend(item,index)" class="work-item work-item-odd" v-for="(item,index) in leftList" :key="item.id">
<image class="trash" :class="item.display ? 'hideTrash' : ''" :src="fileUrl+trash" v-show="item.mask" @click.stop="deleteCollect(item,index)"></image>
<u-lazy-load border-radius="30" class="work-picture"
:image="getImagePath(item.path)"></u-lazy-load>
:image="item.path"></u-lazy-load>
<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 class="item-mask" :class="item.display ? 'hideMask' : ''" v-show="item.mask" v-if="!current">
<view class="item-mask" :class="item.display ? 'hideMask' : ''" v-if="!current&&item.mask">
<button class="mask-public" @click.stop="publicWork(item,index)">发布</button>
<button class="mask-collect" @click.stop="toCollect(item,index)">收藏</button>
</view>
</view>
</template>
<template v-slot:right="{rightList}">
<view @click="maskTouchend(item,index)" class="work-item" v-for="(item,index) in rightList" :key="item.id">
<view @click="maskTouchend(item,index)" class="work-item work-item-even" v-for="(item,index) in rightList" :key="item.id">
<image class="trash" :class="item.display ? 'hideTrash' : ''" :src="fileUrl+trash" v-show="item.mask" @click.stop="deleteCollect(item,index)"></image>
<u-lazy-load border-radius="30" class="work-picture"
:image="getImagePath(item.path)"></u-lazy-load>
:image="item.path"></u-lazy-load>
<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 class="item-mask" :class="item.display ? 'hideMask' : ''" v-show="item.mask" v-if="!current">
<view class="item-mask" :class="item.display ? 'hideMask' : ''" v-if="!current&&item.mask">
<button class="mask-public" @click.stop="publicWork(item,index)">发布</button>
<button class="mask-collect" @click.stop="toCollect(item,index)">收藏</button>
</view>
@ -181,15 +181,20 @@ export default {
},
// 获取我的创作
async getMyWorks(){
let that = this;
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;
if(current === 1){
this.workList = result
this.workList = result.map((item)=>{
return {...item,path: that.getImagePath(item.path),display:0,mask:0};
});
}else{
this.workList.push(...result);
this.workList.push(...result.map((item)=>{
return {...item,path: that.getImagePath(item.path),display:0,mask:0};
}));
}
this.workForm.total = total;
this.workForm.isFinish = current*size >= total;
@ -200,15 +205,20 @@ export default {
},
// 获取我的藏品
async getCollections(){
let that = this;
if(this.collectForm.isFinish) return;
let res = await this.$api.getCollections(this.collectForm);
if(res.success){
const { records, total, current, size } = res.data;
const result = records;
if(current === 1){
this.collectList = result
this.collectList = result.map((item)=>{
return {...item,path: that.getImagePath(item.path)};
});
}else{
this.collectList.push(...result);
this.collectList.push(...result.map((item)=>{
return {...item,path: that.getImagePath(item.path)};
}));
}
this.collectForm.total = total;
this.collectForm.isFinish = current*size >= total;
@ -294,7 +304,7 @@ export default {
this.$refs.uWaterfall.$forceUpdate();
}, 800);
}else{
item.mask = result;
item.mask = result;
this.$refs.uWaterfall.$forceUpdate();
}
}
@ -449,6 +459,7 @@ export default {
column-gap: 1em;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;
// #ifndef MP
.work-item{
-webkit-column-break-inside: avoid;
break-inside: avoid; /*防止断点*/
@ -552,6 +563,7 @@ export default {
}
}
}
// #endif
}
.last-tip{
color: #d5ff00;
@ -620,4 +632,117 @@ export default {
opacity: 0;
}
}
// #ifdef MP
.work-item-odd{
margin-right: 0.5em;
margin-left: 1em;
}
.work-item-even{
margin-left: 0.5em;
margin-right: 1em;
}
.work-item{
-webkit-column-break-inside: avoid;
break-inside: avoid; /*防止断点*/
// margin-bottom: 0.5em;
position: relative;
padding-top: 30rpx;
.work-picture{
// border: 0.1em solid #d5ff00;
border-radius: 30rpx;
// 骗系统开启硬件加速
transform: transition3d(0, 0, 0);
// 防止图片加载“闪一下”
will-change: transform;
}
.sign{
border: none;
border-radius: 0;
position: absolute;
top: 1.7em;
left: 0.6em;
width: 152rpx;
height: 47rpx;
z-index: 1;
}
.sign-text{
width: 132rpx;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
color: #ffffff;
font-size: 28rpx;
position: absolute;
top: 1.8em;
left: 0.9em;
z-index: 2;
}
.trash{
animation-duration: 0.8s;
animation-fill-mode: both;
backface-visibility: visible !important;
animation-name: showTrash;
width: 100rpx;
height: 110rpx;
position: absolute;
right: -22rpx;
margin-top: -30rpx;
z-index: 1;
}
.hideTrash {
animation-duration: calc(1s * 0.75);
backface-visibility: visible !important;
animation-name: hideTrash;
}
.compare-sign{
position: absolute;
left: 0;
bottom: 0.2em;
width: 120rpx;
border: 0.1em solid #d5ff00;
border-radius: 20rpx;
box-shadow: rgba(213, 255, 0, 0.3) 0px 4px 12px;
}
.hideMask {
animation-duration: calc(1s * 0.75);
animation-fill-mode: both;
animation-name: hideMask !important;
}
.item-mask{
position: absolute;
top: 0;
margin-top: 30rpx;
// left: 0.1rpx;
width: 100%;
height: calc(100% - 30rpx);
display: flex;
flex-wrap: wrap;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: rgba(0, 0, 0, 0.6);
border-radius: 30rpx;
animation-duration: 0.8s;
animation-name: showMask;
button{
border-radius: 56rpx;
min-width: 145rpx;
max-width: 185rpx;
height: 60rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 25rpx;
color: #f9f9f9;
margin: 10% 0;
}
.mask-public{
background: linear-gradient(to right,#853ade 0%, #d450da 100%);
}
.mask-collect{
background: linear-gradient(to right,rgba(65, 222, 70, 0.8) 0%, rgba(191, 218, 133, 0.8) 100%);
}
}
}
// #endif
</style>

14
pages/mobile_web/workshops/components/dress_select.vue
View File

@ -1,6 +1,6 @@
<template>
<view class="dress-select">
<view class="mw-editor" v-show="list[4]&&list[4].length>0">
<view class="mw-editor" v-if="list[4]&&list[4].length>0">
<!-- <u-section title="选择模特" :right="false" color="#fff" lineColor="#c2ea04" fontSize="40"></u-section> -->
<view class="mw-tips">
<u-icon :name="fileUrl+mannequin" size="30" color="#c2ea04" label="选择模特"
@ -11,7 +11,7 @@
</view>
</view>
<!-- 预设模特 -->
<scroll-view scroll-x class="ds-mannequin" v-show="selectOptions[0]">
<scroll-view scroll-x class="ds-mannequin" v-if="selectOptions[0]">
<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':''">
@ -20,7 +20,7 @@
</view>
</scroll-view>
<!-- 自定义模特 -->
<view class="ds-mannequin ds-auto" @click="uploadFile('mannequin')" v-show="!selectOptions[0]">
<view class="ds-mannequin ds-auto" @click="uploadFile('mannequin')" v-if="!selectOptions[0]">
<u-icon v-if="form.mannequin === ''" :name="fileUrl+upload" size="30" color="#c2ea04" label="添加模特"
labelColor="#befda1" margin-left="20rpx" labelSize="32rpx" top="10"></u-icon>
<view v-else class="dsa-upload" :class="form.mannequinIndex===-1?'dsa-upload-select':''">
@ -40,15 +40,15 @@
<view class="mw-tips">
<u-icon :name="fileUrl+cloth" size="32" color="#c2ea04" label="选择上下衣服"
labelColor="#eee" margin-left="20rpx" labelSize="32rpx"></u-icon>
<view v-show="showRight" class="mwt-back">
<view v-if="showRight" class="mwt-back">
<u-icon @click="currentStep-=1" name="/static/back.png" size="32" color="#fff"></u-icon>
</view>
<view v-show="!showRight" class="mwt-btn" @click="handleClickSelect(1,$event)">
<view v-if="!showRight" class="mwt-btn" @click="handleClickSelect(1,$event)">
<view :data-select="1" :class="selectOptions[1]?'mwt-select':''">预设衣服</view>
<view :class="selectOptions[1]?'':'mwt-select'">自定义</view>
</view>
</view>
<view v-show="selectOptions[1]">
<view v-if="selectOptions[1]">
<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> -->
@ -72,7 +72,7 @@
</view>
</view>
<!-- 自定义服装 -->
<view class="cloth-upload" v-show="!selectOptions[1]">
<view class="cloth-upload" v-if="!selectOptions[1]">
<!-- 上装 -->
<view class="cu-item" @click="uploadFile('coat')">
<u-icon v-if="form.topImage === ''" :name="fileUrl+upload" size="30" color="#c2ea04" label="上传上装"

17
pages/mobile_web/workshops/components/editor.vue
View File

@ -17,10 +17,10 @@
type="textarea" :custom-style="{ height: height+'rpx', fontSize: '25rpx', overflowY: 'scroll',
color: '#fff'}" placeholderStyle="color:#7f7c86" @input="input"/>
<view class="strengthen-tips">
<u-icon :name="rightIcon" size="30" :label="rightTip" @click="rightIconClick"
<u-icon :name="rightIcon" size="30" :label="rightTip" @click="$emit('rightIconClick')"
margin-left="10rpx" label-color="#a19daa" color="#a19daa" />
</view>
<view class="we-loading" v-show="showLoading">
<view class="we-loading" v-if="showLoading">
<u-loading :show="showLoading" mode="flower" size="40"></u-loading>
</view>
</view>
@ -30,6 +30,11 @@
<script>
import configService from '@/common/config.service.js';
export default {
// #ifdef MP
options: {
styleIsolation: 'shared'
},
// #endif
props: {
value: {
type: [String, Number],
@ -55,10 +60,6 @@ export default {
type: String,
default: ''
},
rightIconClick: {
type: Function,
default: ()=>{}
},
height: {
type: [String, Number],
default: '150'
@ -107,7 +108,7 @@ export default {
.wet-left{
display: flex;
align-items: center;
.u-icon{
/deep/.u-icon{
margin-right: 24rpx;
}
.slot{
@ -119,7 +120,7 @@ export default {
.wet-right{
color: #d5ff00;
margin-right: 5rpx;
.u-icon{
/deep/.u-icon{
font-size: 25rpx;
}
}

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

@ -66,14 +66,14 @@
</template>
</EditorBox>
</view>
<view class="workshops-tip" v-show="(form.type !== 4 || (form.type === 4 && resultFile)) && (form.type !== 1 || (form.type === 1 && resultFile))">
<view @click="showTutorial" class="tip-content" v-show="this.asyncPollTime === -1" :style="{color: errorTips?'#e0584b' : '#d5ff00'}">
<view class="workshops-tip" v-if="(form.type !== 4 || (form.type === 4 && resultFile)) && (form.type !== 1 || (form.type === 1 && resultFile))">
<view @click="showTutorial" class="tip-content" v-if="asyncPollTime === -1" :style="{color: errorTips?'#e0584b' : '#d5ff00'}">
<u-icon name="question-circle" size="35" :color="errorTips?'#e0584b' : '#c2fc3b'" />
Tips：{{resultFile ? errorTips || '点击预览图片效果~' : form.tips||'智能创作~'}}
</view>
<view class="tip-progress" v-show="this.asyncPollTime !== -1">
<view class="tip-progress" v-if="asyncPollTime !== -1">
<text class="progress-title">进度</text>
<u-line-progress :percent="dealPercent" :show-percent="false" inactive-color="#2d3240" round/>
<u-line-progress class="uline-progress" :percent="dealPercent" :show-percent="false" inactive-color="#2d3240" round/>
<text class="progress-deal">{{ dealPercent }}%</text>
</view>
</view>
@ -82,7 +82,7 @@
<view class="mw-editor" v-if="!resultFile && form.type===1">
<EditorBox :height="200" :icon="fileUrl+editorIcon" title="提示词"
v-model="form.text" placeholder="请输入描述的提示词(限制300词)~~" rightIcon="question-circle"
rightTip="使用教程" :rightIconClick="showTutorial" @strengthenTip="strengthenTip"/>
rightTip="使用教程" @rightIconClick="showTutorial" @strengthenTip="strengthenTip"/>
</view>
<view class="mw-editor" v-if="!resultFile && form.type===1">
<u-section title="尺寸选择" color="#fff" :right="false" lineColor="#c2ea04" fontSize="34" />
@ -101,7 +101,7 @@
<view class="mw-editor" v-if="!resultFile && form.type===3">
<EditorBox :icon="fileUrl+editorIcon" title="提示词" v-model="form.promt"
placeholder="请输入描述的提示词(限制300词)~~" rightIcon="question-circle"
rightTip="使用教程" :rightIconClick="showTutorial" @strengthenTip="strengthenTip"/>
rightTip="使用教程" @rightIconClick="showTutorial" @strengthenTip="strengthenTip"/>
</view>
<!-- 选项生图 -->
@ -192,6 +192,11 @@ import EditorBox from './components/editor.vue';
import DressSelect from './components/dress_select.vue';
import { ossUpload } from '@/common/ossutil/ossWebUpload.js';
export default {
// #ifdef MP
options: {
styleIsolation: 'shared'
},
// #endif
components: {
EditorBox, DressSelect
},
@ -285,7 +290,7 @@ export default {
// 加载中随机图片
rangeImageList: [],
// 进度条
dealPercent: 0,
dealPercent: 20,
// 进度条计时器
dealPercentTimer: 1,
// 生成失败提示词
@ -664,7 +669,7 @@ export default {
return path?.includes('://') ? path : encodeURI(this.ip+path);
},
// 判断是否在微信内置浏览器打开
// #ifndef APP
// #ifndef APP || MP
isMpWeb(){
if(navigator.userAgent.toLowerCase().match(/MicroMessenger/i) == 'micromessenger'){
this.$refs.uToast.show({type:'warning',title: "请在浏览器打开进行下载，或长按图片保存到相册!"});
@ -678,7 +683,7 @@ export default {
async download(){
let that = this;
// #ifndef APP
// #ifndef APP || MP
if(this.isMpWeb()) return;
// #endif
@ -818,7 +823,7 @@ export default {
},
// 增强提示词
async strengthenTip({input, deal}){
if(input === ''){
if(input === null || input === ''){
this.$refs.uToast.show({type:'warning',title: "请提供部分词句!"});
deal();
return;
@ -981,7 +986,7 @@ export default {
font-weight: bold;
}
.section-options{
margin-top: 40rpx;
// margin-top: 40rpx;
display: grid;
grid-gap: 26rpx;
grid-template-columns: repeat(4,1fr);
@ -1040,9 +1045,12 @@ export default {
background-color: rgba(236,245,255,1);
}
}
/deep/.u-section{
margin-bottom: 40rpx;
}
.dimensional-drawing{
height: 180rpx;
margin-top: 40rpx;
// margin-top: 40rpx;
display: flex;
.dimensional-item{
min-width: 160rpx;
@ -1119,6 +1127,11 @@ export default {
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
// #ifdef MP
.uline-progress{
width: 100%;
}
// #endif
::v-deep .u-active{
border-top-right-radius: 100rpx;
border-bottom-right-radius: 100rpx;
@ -1149,7 +1162,9 @@ export default {
// 保存图片
.wbu-dbtn{
margin: 0 10rpx;
// #ifndef MP
padding: 50rpx 70rpx;
// #endif
border: none;
height: 100rpx;
color: rgba(42, 35, 61, 0.9);
@ -1164,8 +1179,25 @@ export default {
background-position: right center;
color: #fff;
text-decoration: none;
// #ifdef MP
/deep/.u-btn--default{
color: #fff;
}
// #endif
}
.u-icon{
// #ifdef MP
border-radius: 56rpx;
/deep/.u-btn--default{
padding: 50rpx 70rpx;
background-color: #ffffff00;
border: none;
color: rgba(42, 35, 61, 0.9);
width: 100%;
height: 100rpx;
border-radius: 56rpx;
}
// #endif
/deep/.u-icon{
margin-right: 10rpx;
}
}
@ -1184,10 +1216,12 @@ export default {
.wbud-btn{
width: 100%;
height: 92rpx;
// #ifndef MP
padding: 0 70rpx;
// #endif
background: #1a1929;
border: none;
.u-icon{
/deep/.u-icon{
margin-right: 10rpx;
}
text{
@ -1196,6 +1230,17 @@ export default {
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
// #ifdef MP
border-radius: 56rpx;
/deep/.u-btn--default{
background-color: #ffffff00;
border: none;
// color: rgba(42, 35, 61, 0.9);
width: 100%;
height: 92rpx;
border-radius: 56rpx;
}
// #endif
}
}
.wbu-btn{
@ -1215,10 +1260,26 @@ export default {
background-position: right center;
color: #fff;
text-decoration: none;
// #ifdef MP
/deep/.u-btn--default{
color: #fff;
}
// #endif
}
.u-icon{
/deep/.u-icon{
margin-right: 10rpx;
}
// #ifdef MP
border-radius: 56rpx;
/deep/.u-btn--default{
background-color: #ffffff00;
border: none;
color: rgba(42, 35, 61, 0.9);
width: 100%;
height: 100rpx;
border-radius: 56rpx;
}
// #endif
}
.transition{
animation-name: fadeIn;