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 18:25:56 +08:00
parent 3bc2db7275
commit 6cb6b98067
4 changed files with 221 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -80,9 +80,19 @@
:image="item.path"></u-lazy-load> :image="item.path"></u-lazy-load>
<!-- <image class="work-picture" :src="item.picture" mode="widthFix"></image> --> <!-- <image class="work-picture" :src="item.picture" mode="widthFix"></image> -->
<view class="sign-text">{{ item.serviceName || '暂无' }}</view> <view class="sign-text">{{ item.serviceName || '暂无' }}</view>
<!-- #ifdef MP -->
<image :lazy-load="true" class="sign" :src="item.signIcon"></image>
<!-- #endif -->
<!-- #ifndef MP -->
<image :lazy-load="true" class="sign" :src="fileUrl+sign"></image> <image :lazy-load="true" class="sign" :src="fileUrl+sign"></image>
<!-- #endif -->
<view class="work-todo" @click.stop="toDeal(item.serviceId)"> <view class="work-todo" @click.stop="toDeal(item.serviceId)">
<!-- #ifdef MP -->
<image :src="item.magicWand"></image>
<!-- #endif -->
<!-- #ifndef MP -->
<image :src="fileUrl+magicWand"></image> <image :src="fileUrl+magicWand"></image>
<!-- #endif -->
<text>做同款</text> <text>做同款</text>
</view> </view>
<image v-if="item.sourcePath" class="compare-sign" mode="widthFix" :src="item.sourcePath"></image> <image v-if="item.sourcePath" class="compare-sign" mode="widthFix" :src="item.sourcePath"></image>
@ -95,9 +105,19 @@
:image="item.path"></u-lazy-load> :image="item.path"></u-lazy-load>
<!-- <image class="work-picture" :src="item.picture" mode="widthFix"></image> --> <!-- <image class="work-picture" :src="item.picture" mode="widthFix"></image> -->
<view class="sign-text">{{ item.serviceName || '暂无' }}</view> <view class="sign-text">{{ item.serviceName || '暂无' }}</view>
<!-- #ifdef MP -->
<image :lazy-load="true" class="sign" :src="item.signIcon"></image>
<!-- #endif -->
<!-- #ifndef MP -->
<image :lazy-load="true" class="sign" :src="fileUrl+sign"></image> <image :lazy-load="true" class="sign" :src="fileUrl+sign"></image>
<!-- #endif -->
<view class="work-todo" @click.stop="toDeal(item.serviceId)"> <view class="work-todo" @click.stop="toDeal(item.serviceId)">
<!-- #ifdef MP -->
<image :src="item.magicWand"></image>
<!-- #endif -->
<!-- #ifndef MP -->
<image :src="fileUrl+magicWand"></image> <image :src="fileUrl+magicWand"></image>
<!-- #endif -->
<text>做同款</text> <text>做同款</text>
</view> </view>
<image v-if="item.sourcePath" class="compare-sign" mode="widthFix" :src="item.sourcePath"></image> <image v-if="item.sourcePath" class="compare-sign" mode="widthFix" :src="item.sourcePath"></image>
@ -259,12 +279,20 @@ export default {
this.workList = result.map((item)=>{ this.workList = result.map((item)=>{
let nowResult = {...item,path: that.getWorkPath(item.path)}; let nowResult = {...item,path: that.getWorkPath(item.path)};
if(nowResult.sourcePath) nowResult.sourcePath = that.getWorkPath(item.sourcePath); if(nowResult.sourcePath) nowResult.sourcePath = that.getWorkPath(item.sourcePath);
// #ifdef MP
nowResult.magicWand = that.fileUrl+that.magicWand;
nowResult.signIcon = that.fileUrl+that.sign;
// #endif
return nowResult; return nowResult;
}); });
}else{ }else{
this.workList.push(...result.map((item)=>{ this.workList.push(...result.map((item)=>{
let nowResult = {...item,path: that.getWorkPath(item.path)}; let nowResult = {...item,path: that.getWorkPath(item.path)};
if(nowResult.sourcePath) nowResult.sourcePath = that.getWorkPath(item.sourcePath); if(nowResult.sourcePath) nowResult.sourcePath = that.getWorkPath(item.sourcePath);
// #ifdef MP
nowResult.magicWand = that.fileUrl+that.magicWand;
nowResult.signIcon = that.fileUrl+that.sign;
// #endif
return nowResult; return nowResult;
})); }));
} }

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

@ -75,8 +75,8 @@ export default {
// #endif // #endif
this.scrollTop = e.scrollTop; this.scrollTop = e.scrollTop;
}, },
// #ifdef MP
onShow(){ onLoad(){
let index = uni.getStorageSync('current'); let index = uni.getStorageSync('current');
this.current = index?index:0; this.current = index?index:0;
this.isLogin = this.$store.state.vuex_token; this.isLogin = this.$store.state.vuex_token;
@ -84,6 +84,19 @@ export default {
uni.pageScrollTo({scrollTop: 0}); uni.pageScrollTo({scrollTop: 0});
} }
this.changeCurrent(this.current); this.changeCurrent(this.current);
},
// #endif
onShow(){
// 小程序不要刷新
// #ifndef MP
let index = uni.getStorageSync('current');
this.current = index?index:0;
this.isLogin = this.$store.state.vuex_token;
if(this.current === 1){
uni.pageScrollTo({scrollTop: 0});
}
this.changeCurrent(this.current);
// #endif
// #ifndef H5 // #ifndef H5
}, },
// #endif // #endif

155
pages/mobile_web/wall/detail.vue
View File

@ -41,16 +41,26 @@
</view> </view>
<u-waterfall class="display-photos" v-model="photos" ref="uWaterfall"> <u-waterfall class="display-photos" v-model="photos" ref="uWaterfall">
<template v-slot:left="{leftList}"> <template v-slot:left="{leftList}">
<view class="photo-lam" @click="maskTouchend(item)" v-for="(item,index) in leftList" :key="item.id"> <view class="photo-lam work-item-odd" @click="maskTouchend(item)" v-for="(item,index) in leftList" :key="item.id">
<u-lazy-load border-radius="30" class="display-photo" <u-lazy-load border-radius="30" class="display-photo"
:image="getPhotoPath(item.watermarkPath)"></u-lazy-load> :image="item.watermarkPath"></u-lazy-load>
<view class="sign-text">{{ item.serviceName || '暂无' }}</view> <view class="sign-text">{{ item.serviceName || '暂无' }}</view>
<!-- #ifdef MP -->
<image :lazy-load="true" class="sign" :src="item.signIcon"></image>
<!-- #endif -->
<!-- #ifndef MP -->
<image :lazy-load="true" class="sign" :src="fileUrl+sign"></image> <image :lazy-load="true" class="sign" :src="fileUrl+sign"></image>
<!-- #endif -->
<view class="work-todo" @click.stop="toDeal(item.serviceId)"> <view class="work-todo" @click.stop="toDeal(item.serviceId)">
<!-- #ifdef MP -->
<image :src="item.magicWand"></image>
<!-- #endif -->
<!-- #ifndef MP -->
<image :src="fileUrl+magicWand"></image> <image :src="fileUrl+magicWand"></image>
<!-- #endif -->
<text>做同款</text> <text>做同款</text>
</view> </view>
<view class="item-mask" :class="item.display ? 'hideMask' : ''" v-show="item.mask"> <view class="item-mask" :class="item.display ? 'hideMask' : ''" v-if="item.mask">
<button :style="{color: getTip.color,backgroundImage: getTip.backgroundImage}" @click.stop="buyOrdPicture(item)" <button :style="{color: getTip.color,backgroundImage: getTip.backgroundImage}" @click.stop="buyOrdPicture(item)"
>购买原图</button> >购买原图</button>
</view> </view>
@ -58,16 +68,26 @@
</view> </view>
</template> </template>
<template v-slot:right="{rightList}"> <template v-slot:right="{rightList}">
<view class="photo-lam" @click="maskTouchend(item)" v-for="(item,index) in rightList" :key="item.id"> <view class="photo-lam work-item-even" @click="maskTouchend(item)" v-for="(item,index) in rightList" :key="item.id">
<u-lazy-load border-radius="30" class="display-photo" <u-lazy-load border-radius="30" class="display-photo"
:image="getPhotoPath(item.watermarkPath)"></u-lazy-load> :image="item.watermarkPath"></u-lazy-load>
<view class="sign-text">{{ item.serviceName || '暂无' }}</view> <view class="sign-text">{{ item.serviceName || '暂无' }}</view>
<!-- #ifdef MP -->
<image :lazy-load="true" class="sign" :src="item.signIcon"></image>
<!-- #endif -->
<!-- #ifndef MP -->
<image :lazy-load="true" class="sign" :src="fileUrl+sign"></image> <image :lazy-load="true" class="sign" :src="fileUrl+sign"></image>
<!-- #endif -->
<view class="work-todo" @click.stop="toDeal(item.serviceId)"> <view class="work-todo" @click.stop="toDeal(item.serviceId)">
<!-- #ifdef MP -->
<image :src="item.magicWand"></image>
<!-- #endif -->
<!-- #ifndef MP -->
<image :src="fileUrl+magicWand"></image> <image :src="fileUrl+magicWand"></image>
<!-- #endif -->
<text>做同款</text> <text>做同款</text>
</view> </view>
<view class="item-mask" :class="item.display ? 'hideMask' : ''" v-show="item.mask"> <view class="item-mask" :class="item.display ? 'hideMask' : ''" v-if="item.mask">
<button :style="{color: getTip.color,backgroundImage: getTip.backgroundImage}" @click.stop="buyOrdPicture(item)">购买原图</button> <button :style="{color: getTip.color,backgroundImage: getTip.backgroundImage}" @click.stop="buyOrdPicture(item)">购买原图</button>
</view> </view>
<!-- <image v-if="item.sourcePath" class="compare-sign" mode="widthFix" :src="getPhotoPath(item.sourcePath)"></image> --> <!-- <image v-if="item.sourcePath" class="compare-sign" mode="widthFix" :src="getPhotoPath(item.sourcePath)"></image> -->
@ -316,9 +336,17 @@ export default {
// 获取作品墙 // 获取作品墙
async getPhotos(){ async getPhotos(){
try{ try{
let that = this;
let res = await this.$api.allPictureWall({labelId: this.labelId}); let res = await this.$api.allPictureWall({labelId: this.labelId});
if(res?.success){ if(res?.success){
this.photos = res.data; this.photos = res.data.map((item)=>{
let nowResult = {...item,watermarkPath: that.getPhotoPath(item.watermarkPath)};
// #ifdef MP
nowResult.magicWand = that.fileUrl+that.magicWand;
nowResult.signIcon = that.fileUrl+that.sign;
// #endif
return nowResult;
});
// this.$forceUpdate(); // this.$forceUpdate();
}else{ }else{
this.$refs.uToast.show({type:'error',title: "作品墙内容获取失败!"}); this.$refs.uToast.show({type:'error',title: "作品墙内容获取失败!"});
@ -715,4 +743,117 @@ export default {
opacity: 0; opacity: 0;
} }
} }
// #ifdef MP
.work-item-odd{
margin-right: 0.5em;
margin-left: 1em;
}
.work-item-even{
margin-left: 0.5em;
margin-right: 1em;
}
.photo-lam{
-webkit-column-break-inside: avoid;
break-inside: avoid; /*防止断点*/
margin-bottom: 1em;
position: relative;
padding-top: 12rpx;
.display-photo{
border-radius: 30rpx;
// 骗系统开启硬件加速
transform: transition3d(0, 0, 0);
// 防止图片加载“闪一下”
will-change: transform;
box-shadow: 0 0 20rpx #696969;
}
.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;
}
}
.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;
}
.sign{
border: none;
border-radius: 0;
position: absolute;
top: 0.8em;
left: 0.6em;
width: 170rpx;
height: 47rpx;
}
.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;
}
.hideMask {
animation-duration: calc(1s * 0.75);
animation-fill-mode: both;
animation-name: hideMask !important;
}
.item-mask{
z-index: 1;
position: absolute;
top: 0;
margin-top: 12rpx;
width: 100%;
height: calc(100% - 12rpx);
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;
display: flex;
align-items: center;
justify-content: center;
font-size: 24rpx;
color: #f9f9f9;
}
}
}
// #endif
</style> </style>

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

@ -42,7 +42,12 @@
<u-lazy-load border-radius="30" class="work-picture" <u-lazy-load border-radius="30" class="work-picture"
:image="item.path"></u-lazy-load> :image="item.path"></u-lazy-load>
<view class="sign-text">{{ item.type || '暂无' }}</view> <view class="sign-text">{{ item.type || '暂无' }}</view>
<!-- #ifdef MP -->
<image :lazy-load="true" class="sign" :src="item.signIcon"></image>
<!-- #endif -->
<!-- #ifndef MP -->
<image :lazy-load="true" class="sign" :src="fileUrl+sign"></image> <image :lazy-load="true" class="sign" :src="fileUrl+sign"></image>
<!-- #endif -->
<!-- <image class="compare-sign" mode="widthFix" :src="item.compare"></image> --> <!-- <image class="compare-sign" mode="widthFix" :src="item.compare"></image> -->
<view class="item-mask" :class="item.display ? 'hideMask' : ''" v-if="!current&&item.mask"> <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-public" @click.stop="publicWork(item,index)">发布</button>
@ -56,7 +61,12 @@
<u-lazy-load border-radius="30" class="work-picture" <u-lazy-load border-radius="30" class="work-picture"
:image="item.path"></u-lazy-load> :image="item.path"></u-lazy-load>
<view class="sign-text">{{ item.type || '暂无' }}</view> <view class="sign-text">{{ item.type || '暂无' }}</view>
<!-- #ifdef MP -->
<image :lazy-load="true" class="sign" :src="item.signIcon"></image>
<!-- #endif -->
<!-- #ifndef MP -->
<image :lazy-load="true" class="sign" :src="fileUrl+sign"></image> <image :lazy-load="true" class="sign" :src="fileUrl+sign"></image>
<!-- #endif -->
<!-- <image class="compare-sign" mode="widthFix" :src="item.compare"></image> --> <!-- <image class="compare-sign" mode="widthFix" :src="item.compare"></image> -->
<view class="item-mask" :class="item.display ? 'hideMask' : ''" v-if="!current&&item.mask"> <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-public" @click.stop="publicWork(item,index)">发布</button>
@ -189,11 +199,19 @@ export default {
const result = records; const result = records;
if(current === 1){ if(current === 1){
this.workList = result.map((item)=>{ this.workList = result.map((item)=>{
return {...item,path: that.getImagePath(item.path),display:0,mask:0}; let nowResult = {...item,path: that.getImagePath(item.path),display:0,mask:0};
// #ifdef MP
nowResult.signIcon = that.fileUrl+that.sign;
// #endif
return nowResult;
}); });
}else{ }else{
this.workList.push(...result.map((item)=>{ this.workList.push(...result.map((item)=>{
return {...item,path: that.getImagePath(item.path),display:0,mask:0}; let nowResult = {...item,path: that.getImagePath(item.path),display:0,mask:0};
// #ifdef MP
nowResult.signIcon = that.fileUrl+that.sign;
// #endif
return nowResult;
})); }));
} }
this.workForm.total = total; this.workForm.total = total;
@ -213,11 +231,19 @@ export default {
const result = records; const result = records;
if(current === 1){ if(current === 1){
this.collectList = result.map((item)=>{ this.collectList = result.map((item)=>{
return {...item,path: that.getImagePath(item.path)}; let nowResult = {...item,path: that.getImagePath(item.path),display:0,mask:0};
// #ifdef MP
nowResult.signIcon = that.fileUrl+that.sign;
// #endif
return nowResult;
}); });
}else{ }else{
this.collectList.push(...result.map((item)=>{ this.collectList.push(...result.map((item)=>{
return {...item,path: that.getImagePath(item.path)}; let nowResult = {...item,path: that.getImagePath(item.path),display:0,mask:0};
// #ifdef MP
nowResult.signIcon = that.fileUrl+that.sign;
// #endif
return nowResult;
})); }));
} }
this.collectForm.total = total; this.collectForm.total = total;