基本完善pc端
This commit is contained in:
parent
fd931a3537
commit
054fc0743a
@ -251,7 +251,7 @@ export default {
|
||||
},
|
||||
// 前往作品墙
|
||||
toWall(){
|
||||
// uni.navigateTo({url: `/pages/mobile_web/wall/detail`});
|
||||
this.$emit('toWall');
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
@ -35,7 +35,8 @@
|
||||
</view>
|
||||
</view>
|
||||
<view class="second-content">
|
||||
<Second @showToast="$emit('toast')" @handleChangeService="handleChangeService"/>
|
||||
<Second @showToast="$emit('toast')" @handleChangeService="handleChangeService"
|
||||
@toWall="$emit('toWall')" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
177
pages/pc_web/index/components/drawerComponents/create.vue
Normal file
177
pages/pc_web/index/components/drawerComponents/create.vue
Normal file
@ -0,0 +1,177 @@
|
||||
<template>
|
||||
<view class="detail-content">
|
||||
<u-section title="生成记录" :subTitle="`总数 ${total}`"
|
||||
color="#a3d4fe" fontSize="40" :arrow="false" subColor="#cbe7fb" />
|
||||
<scroll-view :scroll-top="scrollTop" :scrollY="true" class="createList"
|
||||
scroll-with-animation @scroll="scroll">
|
||||
<u-collapse :itemStyle="{borderTopRightRadius: '10rpx', border: '2rpx solid #eee',
|
||||
borderTopLeftRadius: '10rpx',marginTop: '30rpx'}" :arrow="false" :headStyle="{color:'#b3a0da',
|
||||
borderTopLeftRadius: '10rpx', cursor: 'pointer', borderTopRightRadius: '10rpx'}"
|
||||
:bodyStyle="{minHeight: '100rpx',backgroundColor: '#fbfbfb',}">
|
||||
<u-collapse-item v-for="(item, index) in createList" :key="item.id">
|
||||
<template slot="title">
|
||||
<view class="create-item-title">
|
||||
<view class="cit-left">
|
||||
{{ index+1 }}. {{ item.type }}
|
||||
<text :class="item.addOrSub === 'sub' ? 'citl-red' : 'citl-green'">
|
||||
{{ item.addOrSub === 'sub' ? '- ' : '+ ' }}{{ item.value }}￥
|
||||
</text>
|
||||
</view>
|
||||
<view class="cit-right">
|
||||
{{ dateFormat(item.createtime) }}
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<view class="create-item-content">{{item.description}}</view>
|
||||
</u-collapse-item>
|
||||
<u-loadmore @loadmore="getMore" :status="isFinish" color="#b3a0da" marginTop="30" marginBottom="20" />
|
||||
</u-collapse>
|
||||
</scroll-view>
|
||||
<view @click="goTop">
|
||||
<u-back-top :scrollTop="oldScrollTop" zIndex="100" :iconStyle="{ color: '#fff' }"
|
||||
:customStyle="{background: 'linear-gradient(180deg, rgba(56,45,79,1) 0%, #b3a0da 100%)',filter: 'opacity(0.96)'}"></u-back-top>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import configService from '@/common/config.service.js';
|
||||
export default {
|
||||
data(){
|
||||
return{
|
||||
// 是否结束——loadmore加载更多，loading加载中，nomore无更多
|
||||
isFinish: 'nomore',
|
||||
form: {
|
||||
size: 20,
|
||||
current: 1
|
||||
},
|
||||
// 滚动顶部
|
||||
scrollTop: 0,
|
||||
oldScrollTop: 0,
|
||||
// 生成/消费记录
|
||||
createList: [],
|
||||
// 总数
|
||||
total: 0,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
methods:{
|
||||
// 滚动回顶部
|
||||
goTop() {
|
||||
this.scrollTop = this.oldScrollTop;
|
||||
this.$nextTick(()=>{
|
||||
this.scrollTop = 0;
|
||||
});
|
||||
},
|
||||
// 滚动监听
|
||||
scroll(e){
|
||||
this.oldScrollTop = e.detail.scrollTop;
|
||||
},
|
||||
// 时间格式化
|
||||
dateFormat(time){
|
||||
let date = new Date(time);
|
||||
let month = date.getMonth()+1,
|
||||
day = date.getDate(),
|
||||
hour = date.getHours(),
|
||||
minute = date.getMinutes(),
|
||||
second = date.getSeconds();
|
||||
return `${date.getFullYear()}-${month<10?'0':''}${month}-${day<10?'0':''}${day} ${hour<10?'0':''}${hour}:${minute<10?'0':''}${minute}:${second<10?'0':''}${second}`;
|
||||
},
|
||||
// 加载更多
|
||||
getMore(){
|
||||
if(this.isFinish === 'nomore') return;
|
||||
this.form.current++;
|
||||
this.getCreateList();
|
||||
},
|
||||
// 获取生产记录列表
|
||||
async getCreateList(){
|
||||
this.isFinish = 'loading';
|
||||
let res = await this.$api.getConsumption(this.form);
|
||||
if(res?.success){
|
||||
const { records, size, total, current } = res.data;
|
||||
if(current === 1) this.createList = records;
|
||||
else this.createList.push(...records);
|
||||
this.isFinish = size*current >= total ? 'nomore' : 'loadmore';
|
||||
this.total = total;
|
||||
}else{
|
||||
this.$emit('toast',{type:'error',title: "生成记录获取失败!"});
|
||||
this.isFinish = 'loadmore';
|
||||
}
|
||||
},
|
||||
// 初始化
|
||||
init(){
|
||||
this.form = {size: 20,current: 1};
|
||||
this.getCreateList();
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.detail-content{
|
||||
width: 800rpx;
|
||||
height: 100vh;
|
||||
padding: 50rpx 50rpx 20rpx;
|
||||
border-radius: 16rpx;
|
||||
.createList{
|
||||
margin: 30rpx 0;
|
||||
width: 100%;
|
||||
height: 92vh;
|
||||
.create-item-title{
|
||||
width: 100%;
|
||||
margin: 0 30rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.cit-left{
|
||||
max-width: 50%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
text{
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
.citl-green{
|
||||
color: #49cc90;
|
||||
}
|
||||
.citl-red{
|
||||
color: #f93e3e;
|
||||
}
|
||||
}
|
||||
}
|
||||
.create-item-content{
|
||||
margin: 10rpx 30rpx;
|
||||
color: #888888;
|
||||
}
|
||||
}
|
||||
}
|
||||
.u-back-top{
|
||||
cursor: pointer;
|
||||
&:hover{
|
||||
box-shadow: 0 0 20rpx #9989bb;
|
||||
}
|
||||
&:active{
|
||||
box-shadow: 0 0 10rpx #9989bb;
|
||||
}
|
||||
}
|
||||
::v-deep .u-more-text{
|
||||
cursor: pointer;
|
||||
&:hover{
|
||||
opacity: 0.8;
|
||||
}
|
||||
&:active{
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
::v-deep .u-collapse-head{
|
||||
background-color: #eee;
|
||||
&:hover{
|
||||
opacity: 0.8;
|
||||
}
|
||||
&:active{
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
214
pages/pc_web/index/components/drawerComponents/recharge.vue
Normal file
214
pages/pc_web/index/components/drawerComponents/recharge.vue
Normal file
@ -0,0 +1,214 @@
|
||||
<template>
|
||||
<view class="detail-content">
|
||||
<u-section title="充值记录" :subTitle="`总数 ${total}`"
|
||||
color="#a3d4fe" fontSize="40" :arrow="false" subColor="#cbe7fb" />
|
||||
<scroll-view :scroll-top="scrollTop" :scrollY="true" class="rechargeList"
|
||||
scroll-with-animation @scroll="scroll">
|
||||
<u-collapse :itemStyle="{borderTopRightRadius: '10rpx', border: '2rpx solid #eee',
|
||||
borderTopLeftRadius: '10rpx',marginTop: '30rpx'}" :arrow="false" :headStyle="{color:'#b3a0da',
|
||||
borderTopLeftRadius: '10rpx', cursor: 'pointer', borderTopRightRadius: '10rpx'}"
|
||||
:bodyStyle="{minHeight: '100rpx',backgroundColor: '#fbfbfb',}">
|
||||
<u-collapse-item v-for="(item, index) in rechargeList" :key="item.id">
|
||||
<template slot="title">
|
||||
<view class="recharge-item-title">
|
||||
<view class="cit-left">
|
||||
{{ index+1 }}. 钻石充值
|
||||
<text :class="item.result ? 'citl-green' : 'citl-red'">
|
||||
{{ item.addOrSub === 'sub' ? '- ' : '+ ' }}{{ options[item.buyType-1] }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="cit-right">
|
||||
{{ dateFormat(item.createTime) }}
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<view class="recharge-item-content">
|
||||
{{ item.orderType || '钻石充值' }} {{ options[item.buyType-1] }}钻 {{ item.amount }}￥ —{{ item.result || '支付失败' }}
|
||||
</view>
|
||||
</u-collapse-item>
|
||||
<u-loadmore @loadmore="getMore" :status="isFinish" color="#b3a0da" marginTop="30" marginBottom="20" />
|
||||
</u-collapse>
|
||||
</scroll-view>
|
||||
<view class="recharge-tips">
|
||||
<view class="tips-green"><view class="tip-green"></view>充值成功</view>
|
||||
<view class="tips-red"><view class="tip-red"></view>充值失败</view>
|
||||
</view>
|
||||
<view @click="goTop">
|
||||
<u-back-top :scrollTop="oldScrollTop" zIndex="100" :iconStyle="{ color: '#fff' }"
|
||||
:customStyle="{background: 'linear-gradient(180deg, rgba(56,45,79,1) 0%, #b3a0da 100%)',filter: 'opacity(0.96)'}"></u-back-top>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import configService from '@/common/config.service.js';
|
||||
export default {
|
||||
data(){
|
||||
return{
|
||||
// 是否结束——loadmore加载更多，loading加载中，nomore无更多
|
||||
isFinish: 'nomore',
|
||||
form: {
|
||||
size: 20,
|
||||
current: 1
|
||||
},
|
||||
// 滚动顶部
|
||||
scrollTop: 0,
|
||||
oldScrollTop: 0,
|
||||
// 充值记录
|
||||
rechargeList: [],
|
||||
// 总数
|
||||
total: 0,
|
||||
// 额度选项
|
||||
options: [5,10,20,30,50,100],
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
methods:{
|
||||
// 滚动回顶部
|
||||
goTop() {
|
||||
this.scrollTop = this.oldScrollTop;
|
||||
this.$nextTick(()=>{
|
||||
this.scrollTop = 0;
|
||||
});
|
||||
},
|
||||
// 滚动监听
|
||||
scroll(e){
|
||||
this.oldScrollTop = e.detail.scrollTop;
|
||||
},
|
||||
// 时间格式化
|
||||
dateFormat(time){
|
||||
let date = new Date(time);
|
||||
let month = date.getMonth()+1,
|
||||
day = date.getDate(),
|
||||
hour = date.getHours(),
|
||||
minute = date.getMinutes(),
|
||||
second = date.getSeconds();
|
||||
return `${date.getFullYear()}-${month<10?'0':''}${month}-${day<10?'0':''}${day} ${hour<10?'0':''}${hour}:${minute<10?'0':''}${minute}:${second<10?'0':''}${second}`;
|
||||
},
|
||||
// 加载更多
|
||||
getMore(){
|
||||
if(this.isFinish === 'nomore') return;
|
||||
this.form.current++;
|
||||
this.getRechargeList();
|
||||
},
|
||||
// 获取充值记录列表
|
||||
async getRechargeList(){
|
||||
this.isFinish = 'loading';
|
||||
let res = await this.$api.getOrders(this.form);
|
||||
if(res?.success){
|
||||
const { records, size, total, current } = res.data;
|
||||
if(current === 1) this.rechargeList = records;
|
||||
else this.rechargeList.push(...records);
|
||||
this.isFinish = size*current >= total ? 'nomore' : 'loadmore';
|
||||
this.total = total;
|
||||
}else{
|
||||
this.$refs.uToast.show({type:'error',title: "充值记录获取失败!"});
|
||||
this.isFinish = 'loadmore';
|
||||
}
|
||||
},
|
||||
// 初始化
|
||||
init(){
|
||||
const { id } = JSON.parse(this.$store.state.user_message);
|
||||
if(!id) return;
|
||||
this.form = {size: 20,current: 1,memberId: id};
|
||||
this.getRechargeList();
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.detail-content{
|
||||
width: 800rpx;
|
||||
height: 100vh;
|
||||
padding: 50rpx 50rpx 20rpx;
|
||||
border-radius: 16rpx;
|
||||
.rechargeList{
|
||||
margin: 30rpx 0;
|
||||
width: 100%;
|
||||
height: 88vh;
|
||||
.recharge-item-title{
|
||||
width: 100%;
|
||||
margin: 0 30rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.cit-left{
|
||||
max-width: 50%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
text{
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
.citl-green{
|
||||
color: #49cc90;
|
||||
}
|
||||
.citl-red{
|
||||
color: #f93e3e;
|
||||
}
|
||||
}
|
||||
}
|
||||
.recharge-item-content{
|
||||
margin: 10rpx 30rpx;
|
||||
color: #888888;
|
||||
}
|
||||
}
|
||||
.recharge-tips{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.tips-green{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #49cc90;
|
||||
margin-right: 20rpx;
|
||||
.tip-green{
|
||||
width: 22rpx;
|
||||
height: 22rpx;
|
||||
margin-right: 10rpx;
|
||||
background-color: #49cc90;
|
||||
}
|
||||
}
|
||||
.tips-red{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #f93e3e;
|
||||
.tip-red{
|
||||
width: 22rpx;
|
||||
height: 22rpx;
|
||||
margin-right: 10rpx;
|
||||
background-color: #f93e3e;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.u-back-top{
|
||||
cursor: pointer;
|
||||
&:hover{
|
||||
box-shadow: 0 0 20rpx #9989bb;
|
||||
}
|
||||
&:active{
|
||||
box-shadow: 0 0 10rpx #9989bb;
|
||||
}
|
||||
}
|
||||
::v-deep .u-more-text{
|
||||
cursor: pointer;
|
||||
&:hover{
|
||||
opacity: 0.8;
|
||||
}
|
||||
&:active{
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
::v-deep .u-collapse-head{
|
||||
background-color: #eee;
|
||||
&:hover{
|
||||
opacity: 0.8;
|
||||
}
|
||||
&:active{
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
281
pages/pc_web/index/components/drawerComponents/share.vue
Normal file
281
pages/pc_web/index/components/drawerComponents/share.vue
Normal file
@ -0,0 +1,281 @@
|
||||
<template>
|
||||
<view class="detail-content">
|
||||
<u-section title="发布记录" sub-title="筛选"
|
||||
color="#a3d4fe" fontSize="40" subColor="#cdfbf2">
|
||||
<template slot="right">
|
||||
<image @click="showSift = true" class="dc-sift" src="/static/sift.png"></image>
|
||||
</template>
|
||||
</u-section>
|
||||
<scroll-view :scrollTop="scrollTop" :scrollY="true" class="shareList"
|
||||
scroll-with-animation @scroll="scroll">
|
||||
<u-swipe-action :index="index" v-for="(item, index) in shareList"
|
||||
:key="item.id" @click="handleClick" bgColor="#eee" @content-click="contentClick"
|
||||
:options="swipeOptions">
|
||||
<view class="share-item" :class="currentClickIndex===index?'change-morphology':''">
|
||||
<view class="si-left">
|
||||
<u-lazy-load border-radius="16" class="sil-image" :height="currentClickIndex===index? 200 : 140"
|
||||
:image="getImagePath(item.path)" @click.native.stop="previewImage(item.path)"></u-lazy-load>
|
||||
</view>
|
||||
<view class="si-right">
|
||||
<text :style="{color: statusList[item.reviewStatus]?statusList[item.reviewStatus].color:'#61affe'}">
|
||||
{{ statusList[item.reviewStatus]?statusList[item.reviewStatus].name:'未知' }}
|
||||
</text>
|
||||
<text>{{ dateFormat(item.createtime) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</u-swipe-action>
|
||||
<u-loadmore @loadmore="getMore" :status="isFinish" color="#b3a0da" marginTop="30" marginBottom="20" />
|
||||
</scroll-view>
|
||||
<view @click="goTop">
|
||||
<u-back-top :scrollTop="oldScrollTop" zIndex="100" :iconStyle="{ color: '#fff' }"
|
||||
:customStyle="{background: 'linear-gradient(180deg, rgba(56,45,79,1) 0%, #b3a0da 100%)',filter: 'opacity(0.96)'}"></u-back-top>
|
||||
</view>
|
||||
<u-select v-model="showSift" :list="statusList" @confirm="selectSift" :defaultValue="[siftIndex]"
|
||||
confirm-color="#94d500" labelName="name" valueName="value"></u-select>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import configService from '@/common/config.service.js';
|
||||
import { tools } from '@/utils/utils.js';
|
||||
export default {
|
||||
data(){
|
||||
return{
|
||||
// 是否结束——loadmore加载更多，loading加载中，nomore无更多
|
||||
isFinish: 'nomore',
|
||||
form: {
|
||||
size: 10,
|
||||
current: 1,
|
||||
reviewStatus: ''
|
||||
},
|
||||
currentClickIndex: '',
|
||||
// 滚动顶部
|
||||
scrollTop: 0,
|
||||
oldScrollTop: 0,
|
||||
// 生成/消费记录
|
||||
shareList: [],
|
||||
// 单元滑动格删除样式
|
||||
swipeOptions: [{text:'删除',style:{backgroundColor:'#dd524d',marginRight: '-2rpx'}}],
|
||||
// 状态列表
|
||||
statusList: [
|
||||
{name: '全部', color: '#61affe', value: ''},
|
||||
{name: '审核中', color: '#fca130', value: 1},
|
||||
{name: '通过', color: '#49cc90', value: 2},
|
||||
{name: '未通过', color: '#f93e3e', value: 3},
|
||||
{name: '已推荐', color: '#49cc90', value: 4},
|
||||
{name: '取消推荐', color: '#fca130', value: 5},
|
||||
],
|
||||
// 筛选下标
|
||||
siftIndex: 0,
|
||||
// 筛选显示
|
||||
showSift: false,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
methods:{
|
||||
// 图片格式化
|
||||
getImagePath(path){
|
||||
if(!path) return;
|
||||
let index = path?.indexOf('?');
|
||||
let judge = path?.includes(configService.anotherAliUrl);
|
||||
return path?.includes('://') ? path.substring(0,(judge||!index||index===-1) ? path.length : index) : encodeURI(this.staticIp+path);
|
||||
},
|
||||
// 滚动回顶部
|
||||
goTop() {
|
||||
this.scrollTop = this.oldScrollTop;
|
||||
this.$nextTick(()=>{
|
||||
this.scrollTop = 0;
|
||||
});
|
||||
},
|
||||
// 滚动监听
|
||||
scroll(e){
|
||||
this.oldScrollTop = e.detail.scrollTop;
|
||||
},
|
||||
// 时间格式化
|
||||
dateFormat(time){
|
||||
let date = new Date(time);
|
||||
let month = date.getMonth()+1,
|
||||
day = date.getDate(),
|
||||
hour = date.getHours(),
|
||||
minute = date.getMinutes(),
|
||||
second = date.getSeconds();
|
||||
return `${date.getFullYear()}-${month<10?'0':''}${month}-${day<10?'0':''}${day} ${hour<10?'0':''}${hour}:${minute<10?'0':''}${minute}:${second<10?'0':''}${second}`;
|
||||
},
|
||||
// 点击按钮
|
||||
async handleClick(itemIndex, functionIndex){
|
||||
// 删除
|
||||
if(functionIndex === 0) {
|
||||
let that = this;
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: `是否确认删除该作品发布？`,
|
||||
confirmColor: '#94d500',
|
||||
success: async (res) => {
|
||||
if (res.confirm) {
|
||||
let res = await that.$api.deleteReleases(that.shareList[itemIndex].id);
|
||||
if(res?.success){
|
||||
that.currentClickIndex = '';
|
||||
that.shareList.splice(itemIndex, 1);
|
||||
that.$emit('toast',{type:'success',title: "发布记录删除成功!"});
|
||||
}else{
|
||||
that.$emit('toast',{type:'error',title: "发布记录删除失败!"});
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
// 内容点击
|
||||
contentClick(index){
|
||||
this.currentClickIndex = this.currentClickIndex===index ? '' : index;
|
||||
},
|
||||
// 预览图片
|
||||
previewImage(path){
|
||||
tools.methods.lookImage(0,[this.getImagePath(path)]);
|
||||
},
|
||||
// 加载更多
|
||||
getMore(){
|
||||
if(this.isFinish === 'nomore') return;
|
||||
this.form.current++;
|
||||
this.getShareList();
|
||||
},
|
||||
// 获取生产记录列表
|
||||
async getShareList(){
|
||||
this.isFinish = 'loading';
|
||||
let res = await this.$api.getReleases(this.form);
|
||||
if(res?.success){
|
||||
const { records, size, total, current } = res.data;
|
||||
if(current === 1) this.shareList = records;
|
||||
else this.shareList.push(...records);
|
||||
this.isFinish = size*current >= total ? 'nomore' : 'loadmore';
|
||||
}else{
|
||||
this.$emit('toast',{type:'error',title: "发布记录获取失败!"});
|
||||
this.isFinish = 'loadmore';
|
||||
}
|
||||
},
|
||||
// 初始化
|
||||
init(){
|
||||
this.form = {size: 10, current: 1, reviewStatus: ''};
|
||||
this.getShareList();
|
||||
},
|
||||
// 筛选
|
||||
selectSift(e){
|
||||
const value = e[0].value;
|
||||
this.siftIndex = value === '' ? 0 : value;
|
||||
this.form = {size: 10, current: 1, reviewStatus: value};
|
||||
this.currentClickIndex = '';
|
||||
this.getShareList();
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.detail-content{
|
||||
width: 800rpx;
|
||||
height: 100vh;
|
||||
padding: 50rpx 50rpx 20rpx;
|
||||
border-radius: 16rpx;
|
||||
.shareList{
|
||||
margin: 30rpx 0;
|
||||
width: 100%;
|
||||
height: 92vh;
|
||||
.share-item{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
margin: 20rpx;
|
||||
.si-left{
|
||||
transition: 0.3s;
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.sil-image{
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
}
|
||||
}
|
||||
.si-right{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
height: 140rpx;
|
||||
justify-content: space-around;
|
||||
color: #b3a0da;
|
||||
text{
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.change-morphology{
|
||||
.si-left{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: 0.5s;
|
||||
.sil-image{
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
}
|
||||
}
|
||||
.si-right{
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text{
|
||||
margin-bottom: 10rpx;
|
||||
margin-right: 0rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.dc-sift{
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
margin-bottom: -6rpx;
|
||||
filter: drop-shadow(0 0 14rpx #4d6578);
|
||||
cursor: pointer;
|
||||
&:hover{
|
||||
opacity: 0.9;
|
||||
}
|
||||
&:active{
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
}
|
||||
.u-back-top{
|
||||
cursor: pointer;
|
||||
&:hover{
|
||||
box-shadow: 0 0 20rpx #9989bb;
|
||||
}
|
||||
&:active{
|
||||
box-shadow: 0 0 10rpx #9989bb;
|
||||
}
|
||||
}
|
||||
::v-deep .u-swipe-action{
|
||||
border-radius: 10rpx;
|
||||
margin: 0 0 20rpx;
|
||||
}
|
||||
::v-deep .u-select__header__btn{
|
||||
cursor: pointer;
|
||||
&:hover{
|
||||
opacity: 0.9;
|
||||
}
|
||||
&:active{
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
::v-deep .u-more-text{
|
||||
cursor: pointer;
|
||||
&:hover{
|
||||
opacity: 0.8;
|
||||
}
|
||||
&:active{
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
287
pages/pc_web/index/components/movable.vue
Normal file
287
pages/pc_web/index/components/movable.vue
Normal file
@ -0,0 +1,287 @@
|
||||
<template>
|
||||
<view>
|
||||
<!-- 悬浮按钮 -->
|
||||
<view class="movableArea">
|
||||
<view class="movableView" @click="show = true">
|
||||
<u-icon name="kefu-ermai" size="56" :color="textColor"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<u-popup v-model="show" mode="center" border-radius="20">
|
||||
<view class="modal-content">
|
||||
<form @submit="submit">
|
||||
<view class="dc-form">
|
||||
<u-divider bgColor="#ffffff00" half-width="240" fontSize="40" color="#424242" borderColor="#578ce4">问题反馈</u-divider>
|
||||
<view class="blocks">
|
||||
<view class="block_input">
|
||||
<view><text>*</text>联系方式：</view>
|
||||
<input type="tel" name="phone" v-model="form.phone" placeholder="请输入您的联系方式"/>
|
||||
<view class="tip" v-show="tip.phone">请输入正确的联系方式</view>
|
||||
</view>
|
||||
|
||||
<view class="block_input">
|
||||
<view><text>*</text>留言：</view>
|
||||
<view class="message-textarea">
|
||||
<textarea name="message" v-model="form.message" placeholder="请输入留言内容" :maxlength="messageMaxlength"></textarea>
|
||||
<view class="mt-tip">
|
||||
{{ form.message.length }} / {{ messageMaxlength }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="tip" v-show="tip.message">请输入留言内容</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="dcf-btn">
|
||||
<u-button ripple :disabled="loading" :loading="loading" :hairLine="false"
|
||||
:class="loading?'submit-disabled':''" class="messageSubmit" form-type="submit">提交</u-button>
|
||||
</view>
|
||||
</view>
|
||||
</form>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
form:{
|
||||
phone: '',// 联系方式
|
||||
message: ''// 留言
|
||||
},
|
||||
tip: {
|
||||
phone: false,
|
||||
message: false
|
||||
},
|
||||
messageMaxlength: 300,// 留言最长字数
|
||||
loading: true, // 加载
|
||||
};
|
||||
},
|
||||
props: {
|
||||
textColor: {
|
||||
type: String,
|
||||
default: '#333'
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.loading = false;
|
||||
this.form.phone = JSON.parse(this.$store.state.user_message)?.username;
|
||||
},
|
||||
methods: {
|
||||
// 提交申请
|
||||
async submit(e){
|
||||
try{
|
||||
this.loading = true;
|
||||
const { phone, message } = this.form;
|
||||
this.tip = {
|
||||
phone: (phone==='') || (!(/^1[345789]\d{9}$/.test(phone))),
|
||||
message:message===''
|
||||
}
|
||||
|
||||
if(!(/^1[345789]\d{9}$/.test(phone))){
|
||||
this.$emit('toast',{type:'warning',title: "联系方式不正确!"});
|
||||
return;
|
||||
}else if(message===''){
|
||||
this.$emit('toast',{type:'warning',title: "请输入留言内容!"});
|
||||
return;
|
||||
}
|
||||
let res = await this.$api.addMessage(this.form);
|
||||
if(res.success){
|
||||
this.$emit('toast',{type:'success',title: "提交成功!"});
|
||||
this.clear();
|
||||
}else{
|
||||
this.$emit('toast',{type:'error',title: "提交失败!"});
|
||||
}
|
||||
}catch(e){
|
||||
this.$emit('toast',{type:'error',title: "处理失败!"});
|
||||
}finally{
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
// 清空
|
||||
clear(){
|
||||
this.form= {
|
||||
phone: '',// 联系方式
|
||||
message: ''// 留言
|
||||
};
|
||||
this.tip={
|
||||
phone: false,
|
||||
message: false
|
||||
};
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.movableArea {
|
||||
position: fixed;
|
||||
top: 120rpx;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: calc(100% - 120rpx);
|
||||
pointer-events: none; //设置area元素不可点击，则事件便会下移至页面下层元素
|
||||
z-index: 80;
|
||||
|
||||
.movableView {
|
||||
position: fixed;
|
||||
right: -96rpx;
|
||||
bottom: 400rpx;
|
||||
pointer-events: auto; //可以点击
|
||||
cursor: pointer;
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
// border-radius: 78rpx;
|
||||
opacity: 0.8;
|
||||
border-top-left-radius: 14rpx;
|
||||
border-bottom-left-radius: 14rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0,0,0,0.16);
|
||||
background: rgba(255,255,255,0.99);
|
||||
transition: 0.3s;
|
||||
.iconImage {
|
||||
width: 80rpx;
|
||||
height: 70rpx;
|
||||
display: block;
|
||||
}
|
||||
&:hover{
|
||||
right: 0;
|
||||
border-radius: 78rpx;
|
||||
opacity: 1;
|
||||
}
|
||||
&:active{
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
}
|
||||
.modal-content{
|
||||
width: 1000rpx;
|
||||
// height: 500rpx;
|
||||
padding: 40rpx 70rpx 0rpx;
|
||||
color: #f9f9f9;
|
||||
.dc-form{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.blocks{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.block_title{
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 800;
|
||||
font-size: 36rpx;
|
||||
color: #000000;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
.block_input{
|
||||
margin-top: 30rpx;
|
||||
margin-bottom: 32rpx;
|
||||
.tip{
|
||||
color: #FE020E;
|
||||
margin-top: 4rpx;
|
||||
font-size: small;
|
||||
margin-bottom: 0rpx !important;
|
||||
}
|
||||
view{
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-size: 32rpx;
|
||||
color: #000000;
|
||||
line-height: 40rpx;
|
||||
margin-bottom: 16rpx;
|
||||
text{
|
||||
vertical-align: middle;
|
||||
color: #FE020E;
|
||||
font-weight: bold;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
}
|
||||
input{
|
||||
height: 92rpx;
|
||||
background: #F8F9FB;
|
||||
border-radius: 4rpx;
|
||||
color: rgba(0,0,0,0.8);
|
||||
padding:0 32rpx;
|
||||
font-size: 32rpx;
|
||||
border-radius: 15rpx;
|
||||
}
|
||||
.message-textarea{
|
||||
width: 100%;
|
||||
position: relative;
|
||||
textarea{
|
||||
padding: 32rpx;
|
||||
width: 100%;
|
||||
height: 400rpx;
|
||||
background: #F8F9FB;
|
||||
border-radius: 4rpx;
|
||||
color: rgba(0,0,0,0.8);
|
||||
font-size: 32rpx;
|
||||
border-radius: 15rpx;
|
||||
}
|
||||
.mt-tip{
|
||||
position: absolute;
|
||||
font-size: 28rpx;
|
||||
right: 32rpx;
|
||||
bottom: 10rpx;
|
||||
z-index: 2;
|
||||
background-color: #f8f9fb;
|
||||
padding: 5rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.dcf-btn{
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
.messageSubmit{
|
||||
width: 100%;
|
||||
background-size: 200% auto;
|
||||
transition: 0.5s;
|
||||
animation-duration: 1s;
|
||||
animation-fill-mode: both;
|
||||
border: none;
|
||||
background-image: -webkit-linear-gradient( to right, #36D1DC 0%, #5B86E5 51%, #36D1DC 100%);
|
||||
background-image: linear-gradient(to right, #36D1DC 0%, #5B86E5 51%, #36D1DC 100%);
|
||||
height: 100rpx;
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
border-radius: 56rpx;
|
||||
margin-top: 20rpx;
|
||||
margin-bottom: 60rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 35rpx;
|
||||
&::after{
|
||||
display: none;
|
||||
}
|
||||
&:hover {
|
||||
background-position: right center;
|
||||
color: #f8f9fb;
|
||||
text-decoration: none;
|
||||
}
|
||||
&:active{
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
.submit-disabled{
|
||||
cursor: default;
|
||||
opacity: 0.5;
|
||||
&:hover {
|
||||
background-position: inherit !important;
|
||||
color: rgba(0, 0, 0, 0.3) !important;
|
||||
}
|
||||
&:active{
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
43
pages/pc_web/index/components/recordDrawer.vue
Normal file
43
pages/pc_web/index/components/recordDrawer.vue
Normal file
@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<u-popup :value="showDialog" mode="right" @close="$emit('close')">
|
||||
<view class="drawer-view">
|
||||
<component ref="drawerRef" @toast="showToast" :is="refType" />
|
||||
</view>
|
||||
</u-popup>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Share from './drawerComponents/share.vue';
|
||||
import Create from './drawerComponents/create.vue';
|
||||
import Recharge from './drawerComponents/recharge.vue';
|
||||
export default {
|
||||
components:{ Share, Create, Recharge },
|
||||
props: {
|
||||
refType: {
|
||||
type: String,
|
||||
default: 'share'
|
||||
},
|
||||
showDialog: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
// 提示弹窗
|
||||
showToast(content){
|
||||
this.$emit('toast',content);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.drawer-view{
|
||||
|
||||
}
|
||||
</style>
|
||||
@ -6,7 +6,8 @@
|
||||
</view>
|
||||
<view style="width: 100%;height: 100rpx;"></view>
|
||||
<view class="pc-main">
|
||||
<component ref="pageRef" @toast="showToast" @changeService="changeService" :sid="serviceId" :is="refs[current]" />
|
||||
<component ref="pageRef" @toast="showToast" @changeService="changeService" :sid="serviceId"
|
||||
:is="refs[current]" @toWall="changePlat(3)"/>
|
||||
</view>
|
||||
</el-container>
|
||||
<Movable textColor="#94d500" @toast="showToast" v-if="isLogin !== ''"/>
|
||||
@ -31,11 +32,12 @@ import Home from '@/pages/pc_web/home/home.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 Wall from '../wall/wall.vue';
|
||||
import configService from '@/common/config.service.js';
|
||||
import { tools } from '@/utils/utils.js';
|
||||
export default {
|
||||
components:{
|
||||
Header, Home, Workshops, Work, Movable
|
||||
Header, Home, Workshops, Work, Movable, Wall
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
@ -45,7 +47,7 @@ export default {
|
||||
// 当前页码下标
|
||||
current: uni.getStorageSync('pc_current')||0,
|
||||
// refs组件列表
|
||||
refs: ['home','workshops','work'],
|
||||
refs: ['home','workshops','work','wall'],
|
||||
// 加载
|
||||
loading: false,
|
||||
// 滚动顶部
|
||||
@ -103,7 +105,7 @@ export default {
|
||||
// 切换主体
|
||||
changePlat(current){
|
||||
if(this.current === current) return;
|
||||
if(current !== 0 && !this.isLogin){
|
||||
if(current !== 0 && current !== 3 && !this.isLogin){
|
||||
this.$refs.header.showLogin = true;
|
||||
this.$refs.uToast.show({type: 'warning', title: '请先登录！'});
|
||||
return;
|
||||
|
||||
608
pages/pc_web/wall/wall.vue
Normal file
608
pages/pc_web/wall/wall.vue
Normal file
@ -0,0 +1,608 @@
|
||||
<template>
|
||||
<view class="pc-wall" :style="windowHeight>1000?{}:{ minHeight: windowHeight+'px'}">
|
||||
<!-- 左侧图片列表 -->
|
||||
<view class="wall-images" v-loading="loading" :style="{backgroundImage: getTip.backgroundImage}">
|
||||
<view class="display-wall">
|
||||
<view class="display-title">
|
||||
<view class="display-title-left">
|
||||
专题
|
||||
<u-line class="display-line" direction="col" color="#000" length="42rpx" />
|
||||
</view>
|
||||
<text @click="showList = true">{{ form.name || '暂无' }}</text>
|
||||
</view>
|
||||
<view class="display-introduce">
|
||||
<text class="introduce-author">pixel.ai制图社</text>
|
||||
<text class="introduce-time">{{ dateFormat(photos[0] ? photos[0].createtime : form.createtime) }}</text>
|
||||
<text>广州</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="display-tips" :style="{color: getTip.color}">
|
||||
<text>{{ getTip.emotion }}</text>
|
||||
<text>{{ getTip.text }}</text>
|
||||
</view>
|
||||
<u-waterfall class="display-photos" v-model="photos" ref="uWaterfall">
|
||||
<template v-slot:left="{leftList}">
|
||||
<view class="photo-lam" @click="maskTouchend(item)" v-for="(item,index) in leftList" :key="item.id">
|
||||
<u-lazy-load border-radius="30" class="display-photo"
|
||||
:image="getImagePath(item.watermarkPath)"></u-lazy-load>
|
||||
<view class="sign-text">{{ item.serviceName || '暂无' }}</view>
|
||||
<image :lazy-load="true" class="sign" :src="fileUrl+sign"></image>
|
||||
</view>
|
||||
</template>
|
||||
<template v-slot:right="{rightList}">
|
||||
<view class="photo-lam" @click="maskTouchend(item)" v-for="(item,index) in rightList" :key="item.id">
|
||||
<u-lazy-load border-radius="30" class="display-photo"
|
||||
:image="getImagePath(item.watermarkPath)"></u-lazy-load>
|
||||
<view class="sign-text">{{ item.serviceName || '暂无' }}</view>
|
||||
<image :lazy-load="true" class="sign" :src="fileUrl+sign"></image>
|
||||
</view>
|
||||
</template>
|
||||
</u-waterfall>
|
||||
<view class="last-tip" :style="{color: getTip.color}">
|
||||
~~ 持续更新中 ~~
|
||||
</view>
|
||||
</view>
|
||||
<view class="work-big">
|
||||
<view class="big-image" :class="Object.keys(selectItem).length !== 0 ? 'big-image-none' : ''">
|
||||
<view v-if="Object.keys(selectItem).length !== 0" class="bi-show-image">
|
||||
<view class="bi-hover">
|
||||
<u-icon size="90" title="预览" :name="fileUrl+previewIcon" @click="handlePreview"></u-icon>
|
||||
<u-icon size="90" title="做同款" :name="fileUrl+sameIcon" @click="toDeal"></u-icon>
|
||||
<u-icon size="90" title="购买原图" :name="fileUrl+buyIcon" @click="buyOrdPicture"></u-icon>
|
||||
</view>
|
||||
<image :src="getImagePath(selectItem.watermarkPath)" mode="aspectFit" class="big-preview"></image>
|
||||
</view>
|
||||
<view class="big-image" v-else>
|
||||
<image :src="fileUrl+sleep"></image>
|
||||
<view class="none-tips">
|
||||
暂无作品，敬请期待！
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="hide-view" v-show="showList" @click="hideList">
|
||||
<view @click.stop class="hide-lam" :style="{backgroundImage: getTip.backgroundImage}"
|
||||
:class="showHide ? 'hide-animation' : ''">
|
||||
<view class="special-top">
|
||||
专题栏
|
||||
<image :src="fileUrl+blackStar"></image>
|
||||
</view>
|
||||
<view class="special-scroll">
|
||||
<view class="special-item" v-for="(item,index) in labels"
|
||||
:key="index" @click="navigateTo(item.id,index)">
|
||||
<text :style="[getSelectionsStyle(item.id)]">{{ item.name }}</text>
|
||||
<u-icon name="arrow-right" :color="item.id === labelId ? getTip.color : 'rgba(105, 105, 105, 0.5)'"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import configService from '@/common/config.service.js';
|
||||
import { tools } from '@/utils/utils.js';
|
||||
export default {
|
||||
data(){
|
||||
return{
|
||||
// 基础地址
|
||||
ip: configService.ip,
|
||||
fileUrl: configService.fileUrl + 'pixel/',
|
||||
// 标签图标
|
||||
sign: 'home/typelam.png',
|
||||
// 禁用pc端的缺省图
|
||||
sleep: 'pc/sleep.png',
|
||||
// 预览图标
|
||||
previewIcon: 'pc/workshops/preview.png',
|
||||
// 选择黑星图片
|
||||
blackStar: 'work/black-star.png',
|
||||
// 购买图标
|
||||
buyIcon: 'pc/workshops/download.png',
|
||||
// 做同款图标
|
||||
sameIcon: 'pc/workshops/same.png',
|
||||
// 屏幕高度
|
||||
windowHeight: 0,
|
||||
// 选中图片
|
||||
selectItem:{},
|
||||
// 专题信息
|
||||
form: {},
|
||||
// 照片墙
|
||||
photos: [],
|
||||
// 专题id
|
||||
labelId: '',
|
||||
// 类型列表
|
||||
typeList: {
|
||||
'0' : '图生图',
|
||||
'1' : '文生图',
|
||||
'2' : '选项+图片',
|
||||
'3' : '选项+文字',
|
||||
'4' : '换装',
|
||||
},
|
||||
// 操作提示
|
||||
tipText: ["1、点击标题切换专题","2、双击图片可购买原图"],
|
||||
// 提示语
|
||||
tips: {
|
||||
'0' : { color: '#3f5b9c', backgroundImage: 'linear-gradient( to bottom, #ffffff 0%, rgba(63, 91, 156, 0.3) 100%)', emotion: '( •̀ ω •́ )y', text: '智 / 能 / 创 / 作' },
|
||||
'28' : { color: '#8ee200', backgroundImage: 'linear-gradient( to bottom, #ffffff 0%, rgba(142, 226, 0, 0.3) 100%)', emotion: '(o゜▽゜)o☆', text: '容 / 光 / 焕 / 发' },
|
||||
'29' : { color: '#dd4747', backgroundImage: 'linear-gradient( to bottom, #ffffff 0%, rgba(221, 71, 71, 0.3) 100%)', emotion: '( ˘•ω•˘ )◞⁽˙³˙⁾', text: '多 / 样 / 颜 / 平 / 方' },
|
||||
'31' : { color: '#f64e9c', backgroundImage: 'linear-gradient( to bottom, #ffffff 0%, rgba(246, 78, 156, 0.3) 100%)', emotion: '(*´∀`)~♥', text: '花 / 样 / 试 / 衣 / 间' },
|
||||
'33' : { color: '#93931e', backgroundImage: 'linear-gradient( to bottom, #ffffff 0%, rgba(147, 147, 30, 0.3) 100%)', emotion: '(:3[___]=', text: '妄 / 想 / 时 / 间' },
|
||||
'35' : { color: '#32bbff', backgroundImage: 'linear-gradient( to bottom, #ffffff 0%, rgba(50, 187, 255, 0.3) 100%)', emotion: '(☄◣ω◢)☄', text: '壁 / 纸 / 专 / 题 / 展' },
|
||||
'2' : { color: '#8d5ff8', backgroundImage: 'linear-gradient( to bottom, #ffffff 0%, rgba(141, 95, 248, 0.3) 100%)', emotion: '(∩^o^)⊃━☆ﾟ.*･｡', text: '动 / 感 / 人 / 像' },
|
||||
'4' : { color: '#fdc535', backgroundImage: 'linear-gradient( to bottom, #ffffff 0%, rgba(253, 197, 53, 0.3) 100%)', emotion: '(´◉‿◉｀)', text: '幻 / 想 / 时 / 间' },
|
||||
'7' : { color: '#52fec7', backgroundImage: 'linear-gradient( to bottom, #ffffff 0%, rgba(82, 254, 199, 0.3) 100%)', emotion: 'ヾ(´︶`*)ﾉ♬', text: '通 / 形 / 文 / 字 / 展' },
|
||||
'9' : { color: '#0C5460', backgroundImage: 'linear-gradient( to bottom, #ffffff 0%, rgba(12, 84, 96, 0.3) 100%)', emotion: '(̿▀̿ ̿Ĺ̯̿̿▀̿ ̿)̄', text: '面 / 部 / 造 / 型 / 社' },
|
||||
'10' : { color: '#0f93b6', backgroundImage: 'linear-gradient( to bottom, #ffffff 0%, rgba(15, 147, 182, 0.3) 100%)', emotion: 'ƪ(•̃͡ε•̃͡)∫', text: '高 / 端 / 发 / 廊 / 展' },
|
||||
'11' : { color: '#606971', backgroundImage: 'linear-gradient( to bottom, #ffffff 0%, rgba(96, 105, 113, 0.3) 100%)', emotion: '∠( ᐛ 」∠)_', text: '岁 / 月 / 时 / 光 / 机' },
|
||||
'12' : { color: '#b3a0da', backgroundImage: 'linear-gradient( to bottom, #ffffff 0%, rgba(179, 160, 218, 0.3) 100%)', emotion: '(੭ ᐕ)੭？', text: '棱 / 角 / 分 / 明' },
|
||||
'13' : { color: '#fde46c', backgroundImage: 'linear-gradient( to bottom, #ffffff 0%, rgba(253, 228, 108, 0.3) 100%)', emotion: '(≖＿≖)✧', text: '漫 / 画 / 世 / 界' },
|
||||
'14' : { color: '#5dfec9', backgroundImage: 'linear-gradient( to bottom, #ffffff 0%, rgba(93, 254, 201, 0.3) 100%)', emotion: '-//(ǒ.ǒ)//-', text: '摄 / 像 / 牢 / 笼' },
|
||||
'15' : { color: '#fb7bb2', backgroundImage: 'linear-gradient( to bottom, #ffffff 0%, rgba(251, 123, 178, 0.3) 100%)', emotion: '-`д´-', text: '人 / 像 / 抠 / 图 / ？' },
|
||||
// (σ′▽‵)′▽‵)σ
|
||||
},
|
||||
// 加载
|
||||
loading: false,
|
||||
// 专题列表
|
||||
labels: [],
|
||||
// 列表展开
|
||||
showList: false,
|
||||
// 列表关闭动画
|
||||
showHide: false,
|
||||
}
|
||||
},
|
||||
beforeMount() {
|
||||
// 计算当前窗口高度
|
||||
this.windowHeight = window.screen.height;
|
||||
},
|
||||
computed: {
|
||||
// 获取提示语
|
||||
getTip(){
|
||||
return this.tips[this.labelId]||this.tips['0'];
|
||||
},
|
||||
// 获取专栏列表选中样式
|
||||
getSelectionsStyle(id){
|
||||
return (id) => {
|
||||
return this.labelId===id?{ color: this.getTip.color} : {};
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.getLabels();
|
||||
},
|
||||
methods:{
|
||||
// 获取标签
|
||||
async getLabels(){
|
||||
this.loading = true;
|
||||
let res = await this.$api.getLabels(4);
|
||||
if(res?.success){
|
||||
this.labels = res.data;
|
||||
if(!this.labelId){
|
||||
this.labelId = this.labels[0]?.id;
|
||||
this.form = this.labels.length > 0 ? this.labels[0] : {};
|
||||
}
|
||||
this.getPhotos();
|
||||
}else{
|
||||
this.loading = false;
|
||||
this.$emit('toast',{type:'error',title: "专题列表获取失败!"});
|
||||
}
|
||||
},
|
||||
// 获取作品墙
|
||||
async getPhotos(){
|
||||
try{
|
||||
this.loading = true;
|
||||
let that = this;
|
||||
let res = await this.$api.allPictureWall({labelId: this.labelId});
|
||||
if(res?.success){
|
||||
this.photos = res.data;
|
||||
this.selectItem = this.photos.length > 0 ? this.photos[0] : {};
|
||||
}else{
|
||||
this.$emit('toast',{type:'error',title: "作品墙内容获取失败!"});
|
||||
}
|
||||
}catch(e){this.loading = false;}
|
||||
finally{this.loading = false;}
|
||||
},
|
||||
// 图片格式化
|
||||
getImagePath(path){
|
||||
if(!path) return;
|
||||
let index = path?.indexOf('?');
|
||||
let judge = path?.includes(configService.anotherAliUrl);
|
||||
return path?.includes('://') ? path.substring(0,(judge||!index||index===-1) ? path.length : index) : encodeURI(this.ip+path);
|
||||
},
|
||||
// 图片点击事件
|
||||
maskTouchend(item,index){
|
||||
this.selectItem = item;
|
||||
},
|
||||
// 图片预览
|
||||
handlePreview(){
|
||||
let item = this.selectItem;
|
||||
const array = [this.getImagePath(item.watermarkPath)];
|
||||
tools.methods.lookImage(0,array);
|
||||
},
|
||||
// 时间格式化
|
||||
dateFormat(time){
|
||||
let date = time ? new Date(time) : new Date();
|
||||
let month = date.getMonth()+1,
|
||||
day = date.getDate(),
|
||||
hour = date.getHours(),
|
||||
minute = date.getMinutes(),
|
||||
second = date.getSeconds();
|
||||
return `${date.getFullYear()}年${month<10?'0':''}${month}月${day<10?'0':''}${day}日 ${hour<10?'0':''}${hour}:${minute<10?'0':''}${minute}`;
|
||||
},
|
||||
// 前往工作室——做同款
|
||||
toDeal(){
|
||||
let id = this.selectItem.serviceId;
|
||||
if(id!==null&&id!=='')
|
||||
this.$emit('changeService',id);
|
||||
else this.$emit('toast',{type:'error',title: "暂未开放对应功能!"});
|
||||
},
|
||||
// 购买原图
|
||||
buyOrdPicture(){
|
||||
let that = this;
|
||||
let item = this.selectItem;
|
||||
uni.showModal({
|
||||
title: '购买提示',
|
||||
content: `该作品原图购买需支付${item.price}钻石，购买后将直接下载，若使用了微信内置浏览器，请点击右上角打开浏览器再进行购买，以免购买后下载失败！`,
|
||||
confirmColor: this.getTip.color,
|
||||
success: async (res) => {
|
||||
if (res.confirm) {
|
||||
let resp = await that.$api.buyOriginalPicture({id: item.id});
|
||||
if(resp?.success){
|
||||
await that.download(resp.data.originalPath);
|
||||
}else{
|
||||
that.$emit('toast',{type:'error',title: "购买失败，请检查余额是否充足!"});
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
// 图片下载
|
||||
async download(path = ''){
|
||||
let that = this;
|
||||
if(this.path === '') {
|
||||
this.$emit('toast',{type:'error',title: "暂无结果图片可下载!"});
|
||||
return;
|
||||
}
|
||||
// 下载地址
|
||||
let downloadUrl = encodeURI(path);
|
||||
uni.request({
|
||||
url: downloadUrl,
|
||||
method: 'GET',
|
||||
header: { 'token' : that.$store.state.vuex_token },
|
||||
responseType: 'arraybuffer',
|
||||
success(res) {
|
||||
const arrayBuffer = res.data;
|
||||
const blob = new Blob([arrayBuffer], {type: 'image/png'}); // 创建 Blob 对象
|
||||
const imageUrl = URL.createObjectURL(blob); // 通过 Blob 对象创建图片 URL
|
||||
let a = document.createElement('a'); //创建一个 a 标签
|
||||
a.href = imageUrl; //把路径赋到a标签的href上
|
||||
a.download = 'pixel.png';
|
||||
a.click();
|
||||
URL.revokeObjectURL(imageUrl);
|
||||
a = null;
|
||||
that.$emit('toast',{type:'success',title: "图片下载成功!"});
|
||||
},
|
||||
fail() {
|
||||
that.$emit('toast',{type:'error',title: "图片下载失败，请重试!"});
|
||||
},
|
||||
complete() {
|
||||
that.functionLoading = false;
|
||||
}
|
||||
});
|
||||
},
|
||||
// 跳转专栏
|
||||
navigateTo(id, index){
|
||||
if(this.labelId === id) return;
|
||||
this.labelId = id;
|
||||
this.form = this.labels[index];
|
||||
this.$refs.uWaterfall.clear();
|
||||
this.hideList();
|
||||
this.getPhotos();
|
||||
},
|
||||
// 隐藏列表
|
||||
hideList(){
|
||||
this.showHide = true;
|
||||
setTimeout(()=>{
|
||||
this.showList = false;
|
||||
this.showHide = false;
|
||||
},300)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.pc-wall{
|
||||
background-image: linear-gradient(to left top, #ffffff, #fcfbfc, #f8f8f9, #f5f4f7, #f1f1f4, #eef0f6, #eaeff7, #e5eff8, #ddf3f9, #d9f6f2, #def7e6, #eef6d9);
|
||||
margin-top: 20rpx;
|
||||
min-height: 2050rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 40rpx 50rpx;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
.wall-images{
|
||||
margin-left: 200rpx;
|
||||
width: 900rpx;
|
||||
height: 1620rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 40rpx;
|
||||
transition: 0.3s;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
border: 2rpx solid #d5d5d5;
|
||||
box-shadow: 0 0 20rpx #c6c6c6;
|
||||
.display-wall{
|
||||
margin: 80rpx 44rpx 32rpx;
|
||||
.display-title{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 50rpx;
|
||||
font-weight: 600;
|
||||
.display-title-left{
|
||||
min-width: 130rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.display-line{
|
||||
margin: 0 16rpx !important;
|
||||
border-width: 6rpx !important;
|
||||
}
|
||||
}
|
||||
text{
|
||||
font-weight: normal;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
color: #576ba3;
|
||||
cursor: pointer;
|
||||
&:hover{
|
||||
opacity: 0.8;
|
||||
}
|
||||
&:active{
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.display-introduce{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 30rpx 0 30rpx;
|
||||
font-size: 32rpx;
|
||||
color: #a8abb2;
|
||||
.introduce-author{
|
||||
color: #576ba3;
|
||||
}
|
||||
.introduce-time{
|
||||
margin: 0 24rpx;
|
||||
}
|
||||
}
|
||||
.display-tips{
|
||||
margin-top: 60rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-size: 30rpx;
|
||||
text{
|
||||
margin: 10rpx 0;
|
||||
}
|
||||
}
|
||||
.display-photos{
|
||||
margin: 50rpx 50rpx 40rpx;
|
||||
column-gap: 2.2em;
|
||||
-moz-column-gap: 2.2em;
|
||||
-webkit-column-gap: 2.2em;
|
||||
.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;
|
||||
cursor: pointer;
|
||||
}
|
||||
&:hover{
|
||||
filter: opacity(0.8);
|
||||
}
|
||||
&:active{
|
||||
filter: opacity(0.6);
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
.last-tip{
|
||||
color: rgb(63, 91, 156);
|
||||
font-size: 30rpx;
|
||||
text-align: center;
|
||||
margin: 20rpx 0 40rpx;
|
||||
}
|
||||
&:hover{
|
||||
box-shadow: 0 0 20rpx #8a8a8a;
|
||||
}
|
||||
}
|
||||
.work-big{
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
border-radius: 40rpx;
|
||||
.big-image{
|
||||
width: 1350rpx;
|
||||
height: 1350rpx;
|
||||
background-color: #ffffff;
|
||||
border: 4rpx dashed #99d7ff;
|
||||
border-radius: 40rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
transition: 0.3s;
|
||||
overflow: hidden;
|
||||
.bi-show-image{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
.big-preview{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.bi-hover{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: rgba(0,0,0,0.5);
|
||||
z-index: 1;
|
||||
transition: 0.5s;
|
||||
opacity: 0;
|
||||
.u-icon{
|
||||
margin: 0 30rpx;
|
||||
cursor: pointer;
|
||||
&:hover{
|
||||
opacity: 0.8;
|
||||
}
|
||||
&:active{
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.none-tips{
|
||||
margin-top: 30rpx;
|
||||
color: #9a702d;
|
||||
font-size: 50rpx;
|
||||
}
|
||||
&:hover{
|
||||
box-shadow: 0 0 20rpx #d3d3d3;
|
||||
.bi-hover{
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.big-image-none{
|
||||
background-color: #ffffff00;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
.hide-view{
|
||||
z-index: 2;
|
||||
bottom: 0;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: calc(100% - 110rpx);
|
||||
background-color: rgba(0,0,0,0.5);
|
||||
.hide-lam{
|
||||
bottom: 0;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
height: calc(100% - 110rpx);
|
||||
width: 400rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
border-right: 4rpx solid #eee;
|
||||
animation-duration: 0.5s;
|
||||
animation-fill-mode: both;
|
||||
animation-name: slideInLeft;
|
||||
.special-top{
|
||||
padding: 80rpx 40rpx 40rpx;
|
||||
margin-left: 14rpx;
|
||||
font-size: 46rpx;
|
||||
font-weight: bold;
|
||||
position: relative;
|
||||
color: #222;
|
||||
image{
|
||||
position: absolute;
|
||||
margin-top: -10rpx;
|
||||
width: 30rpx;
|
||||
height: 34rpx;
|
||||
}
|
||||
}
|
||||
.special-scroll{
|
||||
flex: 1;
|
||||
overflow-y: scroll;
|
||||
.special-item{
|
||||
margin: 0 20rpx;
|
||||
padding: 20rpx 30rpx;
|
||||
color: #696969;
|
||||
border-radius: 16rpx;
|
||||
font-size: 36rpx;
|
||||
border-top: 2rpx solid #eee;
|
||||
// box-shadow: 0 0 10rpx #eee;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
.u-icon{
|
||||
opacity: 0.6;
|
||||
}
|
||||
&:hover{
|
||||
opacity: 0.8;
|
||||
}
|
||||
&:active{
|
||||
opacity: 0.6;
|
||||
}
|
||||
&:nth-last-child(1){
|
||||
border-bottom: 2rpx solid #eee;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.hide-animation{
|
||||
animation-duration: 0.3s !important;
|
||||
animation-name: slideOutLeft !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@keyframes slideInLeft {
|
||||
from {
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
@keyframes slideOutLeft {
|
||||
from {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
visibility: hidden;
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
561
pages/pc_web/work/work.vue
Normal file
561
pages/pc_web/work/work.vue
Normal file
@ -0,0 +1,561 @@
|
||||
<template>
|
||||
<view class="pc-work" :style="windowHeight>1000?{}:{ minHeight: windowHeight+'px'}">
|
||||
<!-- 左侧图片列表 -->
|
||||
<view class="work-images">
|
||||
<view class="mw-top" :style="{backgroundImage: `url(${fileUrl+topBackground})`}">
|
||||
<view class="mwt-one">
|
||||
<view class="mwto-item" :style="[getSwitchItemStyle(index)]" v-for="(item,index) in selectList" :key="index" @click="changeSelect(index)">
|
||||
{{ item }}
|
||||
<image v-show="current===index" :src="fileUrl+blackStar" class="mwto-star"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="mwt-two">
|
||||
<view class="mwtt-num">
|
||||
<u-count-to autoplay color="#ff4269" fontSize="110" bold
|
||||
: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? '作':'藏' }}品
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<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)" :title="item.type || '暂无'"
|
||||
class="work-item" v-for="(item,index) in leftList" :key="index">
|
||||
<u-lazy-load border-radius="30" class="work-picture"
|
||||
:image="getImagePath(item.path)"></u-lazy-load>
|
||||
<image :lazy-load="true" class="sign" :src="fileUrl+sign"></image>
|
||||
<view class="sign-text">{{ item.type || '暂无' }}</view>
|
||||
</view>
|
||||
</template>
|
||||
<template v-slot:right="{rightList}">
|
||||
<view @click="maskTouchend(item,index)" :title="item.type || '暂无'"
|
||||
class="work-item" v-for="(item,index) in rightList" :key="index">
|
||||
<u-lazy-load border-radius="30" class="work-picture"
|
||||
:image="getImagePath(item.path)"></u-lazy-load>
|
||||
<image :lazy-load="true" class="sign" :src="fileUrl+sign"></image>
|
||||
<view class="sign-text">{{ item.type || '暂无' }}</view>
|
||||
</view>
|
||||
</template>
|
||||
</u-waterfall>
|
||||
<!-- 下面这里等后端有了之后，用isFinish判断 -->
|
||||
<view class="last-tip" :class="(current === 0 ? workForm.isFinish : collectForm.isFinish)?'':'clickable'" @click="getMore">
|
||||
{{ (current === 0 ? workForm.isFinish : collectForm.isFinish) ? '~~ 已加载全部 ~~' : '~~ 点击加载更多 ~~' }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="work-big">
|
||||
<view class="big-image" :class="Object.keys(selectItem).length !== 0 ? 'big-image-none' : ''">
|
||||
<view v-if="Object.keys(selectItem).length !== 0" class="bi-show-image">
|
||||
<view class="bi-hover">
|
||||
<u-icon size="90" title="预览" :name="fileUrl+previewIcon" @click="handlePreview"></u-icon>
|
||||
<u-icon size="90" title="下载" :name="fileUrl+downloadIcon" @click="handleDownload"></u-icon>
|
||||
<u-icon size="90" title="发布" :name="fileUrl+publicIcon" @click="handlePublic" v-if="current===0"></u-icon>
|
||||
<u-icon size="90" title="收藏" :name="fileUrl+collectIcon" @click="handleCollect" v-if="current===0"></u-icon>
|
||||
<u-icon size="90" :title=" current===0?'删除':'取消收藏'" :name="fileUrl+deleteIcon" @click="handleDelete"></u-icon>
|
||||
</view>
|
||||
<image :src="getImagePath(selectItem.path)" mode="aspectFit" class="big-preview"></image>
|
||||
</view>
|
||||
<view class="big-image" v-else>
|
||||
<image :src="fileUrl+sleep"></image>
|
||||
<view class="none-tips">
|
||||
暂无{{ current===0? '作':'藏' }}品，前往<text @click="$emit('changeService', '')">工作室</text>创作！
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import configService from '@/common/config.service.js';
|
||||
import { tools } from '@/utils/utils.js';
|
||||
export default {
|
||||
data(){
|
||||
return{
|
||||
// 基础路径
|
||||
fileUrl: configService.fileUrl + 'pixel/',
|
||||
// 筛选项
|
||||
selectList: ["我的创作", "我的藏品"],
|
||||
// 顶部背景
|
||||
topBackground: 'work/background.png',
|
||||
// 选择黑星图片
|
||||
blackStar: 'work/black-star.png',
|
||||
// 选择白底图片
|
||||
selectBottom: 'work/select-bottom.png',
|
||||
// 选择红星
|
||||
redStar: 'work/red-star.png',
|
||||
// 标签图标
|
||||
sign: 'home/typelam.png',
|
||||
// 禁用pc端的缺省图
|
||||
sleep: 'pc/sleep.png',
|
||||
// 下载图标
|
||||
downloadIcon: 'pc/workshops/download.png',
|
||||
// 删除图标
|
||||
deleteIcon: 'pc/workshops/delete.png',
|
||||
// 预览图标
|
||||
previewIcon: 'pc/workshops/preview.png',
|
||||
// 发布图标
|
||||
publicIcon: 'pc/workshops/public.png',
|
||||
// 收藏图标
|
||||
collectIcon: 'pc/workshops/collect.png',
|
||||
// 数字滚动开始数字
|
||||
startVal: 0,
|
||||
// 屏幕高度
|
||||
windowHeight: 0,
|
||||
// 当前选项
|
||||
current: 0,
|
||||
// 收藏作品列表
|
||||
collectList:[],
|
||||
// 我的创作
|
||||
workList:[],
|
||||
// 我的创作Form
|
||||
workForm: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
isFinish: true,
|
||||
total: 0
|
||||
},
|
||||
// 我的收藏Form
|
||||
collectForm: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
isFinish: true,
|
||||
total: 0
|
||||
},
|
||||
// 选中图片
|
||||
selectItem:{},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 切换栏选中样式
|
||||
getSwitchItemStyle(){
|
||||
return (index) => {
|
||||
return this.current===index ? {backgroundImage: `url(${this.fileUrl+this.selectBottom})`,
|
||||
color: `rgba(33,33,33,1)`}:{}
|
||||
}
|
||||
},
|
||||
},
|
||||
beforeMount() {
|
||||
// 计算当前窗口高度
|
||||
this.windowHeight = window.screen.height;
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
methods:{
|
||||
// 切换选项
|
||||
changeSelect(index){
|
||||
this.current = index;
|
||||
this.startVal = index===0?this.collectForm.total:this.workForm.total;
|
||||
this.init();
|
||||
},
|
||||
// 初始化
|
||||
init(){
|
||||
this.$refs.uWaterfall.clear();
|
||||
if(this.current){
|
||||
this.collectList = [];
|
||||
this.collectForm = {current: 1,size: 10,isFinish: false,total: 0};
|
||||
this.getCollections();
|
||||
}else{
|
||||
this.workList = [];
|
||||
this.workForm = {current: 1,size: 10,isFinish: false,total: 0};
|
||||
this.getMyWorks();
|
||||
}
|
||||
},
|
||||
// 查看更多
|
||||
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(){
|
||||
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.selectItem = result.length > 0 ? result[0] : {};
|
||||
}else{
|
||||
this.workList.push(...result);
|
||||
}
|
||||
this.workForm.total = total;
|
||||
this.workForm.isFinish = current*size >= total;
|
||||
}else{
|
||||
this.$emit('toast',{type:'error',title: "我的创作获取失败!"});
|
||||
}
|
||||
},
|
||||
// 获取我的藏品
|
||||
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.selectItem = result.length > 0 ? result[0] : {};
|
||||
}else{
|
||||
this.collectList.push(...result);
|
||||
}
|
||||
this.collectForm.total = total;
|
||||
this.collectForm.isFinish = current*size >= total;
|
||||
}else{
|
||||
this.$emit('toast',{type:'error',title: "我的藏品获取失败!"});
|
||||
}
|
||||
},
|
||||
// 图片格式化
|
||||
getImagePath(path){
|
||||
if(!path) return;
|
||||
let index = path?.indexOf('?');
|
||||
let judge = path?.includes(configService.anotherAliUrl);
|
||||
return path?.includes('://') ? path.substring(0,(judge||!index||index===-1) ? path.length : index) : encodeURI(this.ip+path);
|
||||
},
|
||||
// 图片点击事件
|
||||
maskTouchend(item,index){
|
||||
this.selectItem = item;
|
||||
},
|
||||
// 图片预览
|
||||
handlePreview(){
|
||||
let item = this.selectItem;
|
||||
const array = [this.getImagePath(item.path)];
|
||||
if(item.sourcePath) array.push(this.getImagePath(item.sourcePath));
|
||||
tools.methods.lookImage(0,array);
|
||||
},
|
||||
// 下载图片
|
||||
handleDownload(){
|
||||
window.open(this.getImagePath(this.selectItem.path));
|
||||
},
|
||||
// 删除图片——收藏/作品
|
||||
handleDelete(){
|
||||
let that = this;
|
||||
let current = this.current===0;
|
||||
let item = this.selectItem;
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: `是否确认${current?'删除':'取消收藏'}该作品？`,
|
||||
confirmColor: '#94d500',
|
||||
success: async (res) => {
|
||||
if (res.confirm) {
|
||||
let res = current ? await that.$api.deleteCreation(item.id) : await that.$api.deleteCollections(item.id);
|
||||
if(res.success){
|
||||
current ? that.workForm.total-- : that.collectForm.total--;
|
||||
that.$refs.uWaterfall.remove(item.id);
|
||||
that.selectItem = current ? that.workList[0] : that.collectList[0];
|
||||
that.$forceUpdate();
|
||||
that.$emit('toast',{type:'success',title: `已${current?'删除':'取消收藏'}该作品！`});
|
||||
}else{
|
||||
that.$emit('toast',{type:'error',title: `作品${current?'删除':'取消收藏'}失败！`});
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
// 分享作品
|
||||
handlePublic(){
|
||||
let that = this;
|
||||
let item = this.selectItem;
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: `作品分享需经过审核，审核期间可前往“我的-分享作品查看结果”，是否确认分享该作品？`,
|
||||
confirmColor: '#94d500',
|
||||
success: async (res) => {
|
||||
if (res.confirm) {
|
||||
let res = await that.$api.publicWork({
|
||||
creationId: item.id,
|
||||
});
|
||||
if(res?.success){
|
||||
that.$refs.uWaterfall.$forceUpdate();
|
||||
that.$emit('toast',{type:'success',title: '作品上传分享成功！'});
|
||||
}else{
|
||||
that.$emit('toast',{type:'error',title: res?.errorMsg || '作品上传分享失败！'});
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
// 收藏作品
|
||||
handleCollect(){
|
||||
let that = this;
|
||||
let item = this.selectItem;
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: `是否确认收藏该作品？`,
|
||||
confirmColor: '#94d500',
|
||||
success: async (res) => {
|
||||
if (res.confirm) {
|
||||
let res = await that.$api.addCollections({
|
||||
creationId: item.id,
|
||||
});
|
||||
if(res?.success){
|
||||
that.$refs.uWaterfall.$forceUpdate();
|
||||
that.$emit('toast',{type:'success',title: '作品收藏成功！'});
|
||||
}else{
|
||||
that.$emit('toast',{type:'error',title: res?.data || '作品收藏失败！'});
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.pc-work{
|
||||
background-image: linear-gradient(to left top, #ffffff, #fcfbfc, #f8f8f9, #f5f4f7, #f1f1f4, #eef0f6, #eaeff7, #e5eff8, #ddf3f9, #d9f6f2, #def7e6, #eef6d9);
|
||||
margin-top: 20rpx;
|
||||
min-height: 2050rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 40rpx 50rpx;
|
||||
.work-images{
|
||||
margin-left: 200rpx;
|
||||
width: 900rpx;
|
||||
height: 1620rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 40rpx;
|
||||
transition: 0.3s;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
border: 2rpx solid #d5d5d5;
|
||||
box-shadow: 0 0 20rpx #c6c6c6;
|
||||
.mw-top{
|
||||
width: 100%;
|
||||
height: 350rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-size: cover;
|
||||
.mwt-one{
|
||||
margin-top: 65rpx;
|
||||
display: flex;
|
||||
.mwto-item{
|
||||
font-size: 42rpx;
|
||||
font-weight: bold;
|
||||
color: rgba(33,33,33,0.8);
|
||||
margin-left: 44rpx;
|
||||
position: relative;
|
||||
padding: 5rpx 10rpx;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: bottom;
|
||||
background-size: 100%;
|
||||
transition: 0.5s;
|
||||
cursor: pointer;
|
||||
&:hover{
|
||||
opacity: 0.8;
|
||||
}
|
||||
&:active{
|
||||
opacity: 0.6;
|
||||
}
|
||||
.mwto-star{
|
||||
position: absolute;
|
||||
right: -16rpx;
|
||||
top: -7rpx;
|
||||
width: 30rpx;
|
||||
height: 34rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.mwt-two{
|
||||
display: flex;
|
||||
margin-left: 65rpx;
|
||||
margin-top: 40rpx;
|
||||
align-items: flex-end;
|
||||
.mwtt-num{
|
||||
font-weight: bolder;
|
||||
margin-right: 20rpx;
|
||||
position: relative;
|
||||
.mwtt-star{
|
||||
position: absolute;
|
||||
right: -30rpx;
|
||||
top: -10rpx;
|
||||
width: 30rpx;
|
||||
height: 34rpx;
|
||||
}
|
||||
}
|
||||
.mwtt-unit{
|
||||
font-size: 40rpx;
|
||||
font-weight: bold;
|
||||
color: rgba(33,33,33,0.8);
|
||||
line-height: 90rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.mw-content{
|
||||
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
|
||||
z-index: 80;
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
margin-top: -35rpx;
|
||||
border-top-right-radius: 36rpx;
|
||||
border-top-left-radius: 36rpx;
|
||||
background-color: #1a1929;
|
||||
overflow-y: scroll;
|
||||
.show-work{
|
||||
margin: 20rpx 45rpx 0;
|
||||
column-gap: 1em;
|
||||
-moz-column-gap: 1em;
|
||||
-webkit-column-gap: 1em;
|
||||
.work-item{
|
||||
-webkit-column-break-inside: avoid;
|
||||
break-inside: avoid; /*防止断点*/
|
||||
// margin-bottom: 0.5em;
|
||||
position: relative;
|
||||
padding-top: 30rpx;
|
||||
&:hover{
|
||||
.work-picture{
|
||||
filter: drop-shadow(0 0 10rpx #d5ff00);
|
||||
}
|
||||
}
|
||||
&:active{
|
||||
opacity: 0.8;
|
||||
}
|
||||
.work-picture{
|
||||
cursor: pointer;
|
||||
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: 186rpx;
|
||||
height: 47rpx;
|
||||
z-index: 1;
|
||||
}
|
||||
.sign-text{
|
||||
width: 142rpx;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
color: #ffffff;
|
||||
font-size: 28rpx;
|
||||
position: absolute;
|
||||
top: 1.8em;
|
||||
left: 0.9em;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
.last-tip{
|
||||
color: #d5ff00;
|
||||
font-size: 28rpx;
|
||||
text-align: center;
|
||||
margin-top: 20rpx;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
.clickable{
|
||||
cursor: pointer;
|
||||
&:hover{
|
||||
opacity: 0.8;
|
||||
}
|
||||
&:active{
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover{
|
||||
box-shadow: 0 0 20rpx #8a8a8a;
|
||||
}
|
||||
}
|
||||
.work-big{
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
border-radius: 40rpx;
|
||||
.big-image{
|
||||
width: 1350rpx;
|
||||
height: 1350rpx;
|
||||
background-color: #ffffff;
|
||||
border: 4rpx dashed #99d7ff;
|
||||
border-radius: 40rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
transition: 0.3s;
|
||||
overflow: hidden;
|
||||
.bi-show-image{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
.big-preview{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.bi-hover{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: rgba(0,0,0,0.5);
|
||||
z-index: 1;
|
||||
transition: 0.5s;
|
||||
opacity: 0;
|
||||
.u-icon{
|
||||
margin: 0 30rpx;
|
||||
cursor: pointer;
|
||||
&:hover{
|
||||
opacity: 0.8;
|
||||
}
|
||||
&:active{
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.none-tips{
|
||||
margin-top: 30rpx;
|
||||
color: #9a702d;
|
||||
font-size: 50rpx;
|
||||
text{
|
||||
cursor: pointer;
|
||||
color: #53411e;
|
||||
&:hover{
|
||||
opacity: 0.8;
|
||||
}
|
||||
&:active{
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover{
|
||||
box-shadow: 0 0 20rpx #d3d3d3;
|
||||
.bi-hover{
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.big-image-none{
|
||||
background-color: #ffffff00;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user