You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
386 lines
9.4 KiB
386 lines
9.4 KiB
<template>
|
|
<view class="imgDetail">
|
|
<view class="img-view">
|
|
<image class="main-img" :src="detailMsg.imgUrl" :style="'width:'+imgWidth+';height:'+imgHeight+';'" mode=""></image>
|
|
</view>
|
|
<view class="toolbar" :style="'display:'+showOrmis">
|
|
<view class="toolbarLeft" @click="$noMultipleClicks(topImg)">置顶</view>
|
|
<view class="border"></view>
|
|
<view class="toolbarMid" @click="$noMultipleClicks(onOrOffHandler)">{{upOrDown}}架</view>
|
|
<view class="border"></view>
|
|
<view class="toolbarRight" @click="$noMultipleClicks(changeSign)">修改标签</view>
|
|
<view>
|
|
<uni-popup class="popup-modal" ref="showPopup" type="bottom" background-color="#141b29">
|
|
<view class="segmented-control">
|
|
<view class="segmented-title">标签列表（最多选择3个）</view>
|
|
<uni-data-checkbox mode="tag" multiple v-model="signListSelected" :localdata="signList" @change="selectedSign" max="3"></uni-data-checkbox>
|
|
</view>
|
|
<button class="upLoadBtn" @click="$noMultipleClicks(modifySign)">保存</button>
|
|
</uni-popup>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
getImgDetails,// 获取图片详情
|
|
onlineOrOfflineImg ,//上下架图片
|
|
topImg, //置顶图片
|
|
getSignList,//获取标签列表
|
|
modifySign //修改艺术家图片标签
|
|
} from '@/api/index.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
detailMsg: {}, // 图片信息
|
|
userInfo: {}, // 登录用户信息
|
|
imgWidth: 0, // 图片宽
|
|
imgHeight: 0, // 图片高,
|
|
marginTop: 0 ,//外顶部边距
|
|
showOrmis: 'none' ,//限时或者隐藏
|
|
upOrDown: '下',
|
|
showRight: false,
|
|
noClick:true, //防止重复提交
|
|
signListSelected:[],
|
|
signList:[],
|
|
typeId: 0,
|
|
typeCurrent: 0,
|
|
status: 0,
|
|
}
|
|
},
|
|
created() {
|
|
const userInfo = uni.getStorageSync('userInfo')
|
|
if (!userInfo) {
|
|
console.log('havent userInfo')
|
|
uni.showModal({
|
|
content: '艺术家账户过期,请重新登录！',
|
|
showCancel: false,
|
|
success() {
|
|
//没有缓存则跳转登录页面
|
|
uni.reLaunch({
|
|
url: '/pages/login/login'
|
|
});
|
|
}
|
|
});
|
|
} else {
|
|
this.userInfo = userInfo;
|
|
console.log('have userInfo')
|
|
}
|
|
const detailId = uni.getStorageSync('detailId')
|
|
if (detailId) {
|
|
this.getImgDetail(detailId)
|
|
} else {
|
|
this.getImgDetail(detailId)
|
|
}
|
|
this.getSignList();
|
|
},
|
|
onLoad(option) {
|
|
if (option?.categoryId && option?.categoryIndex && option?.status) {
|
|
this.typeId = option.categoryId * 1;
|
|
this.typeCurrent = option.categoryIndex * 1;
|
|
this.status = option.status * 1;
|
|
}
|
|
},
|
|
methods: {
|
|
|
|
//保存修改过后标签事件
|
|
modifySign(){
|
|
let that = this;
|
|
//调用修改标签方法
|
|
const param = {
|
|
imgId: that.detailMsg.id,
|
|
typeId: that.detailMsg.typeId,
|
|
signList: that.signListSelected
|
|
}
|
|
modifySign(param).then(res=>{
|
|
if (res.data.code === 200) {
|
|
uni.showToast({
|
|
title:'修改标签成功!',
|
|
duration: 1000,
|
|
success() {
|
|
that.$refs.showRight.close();
|
|
that.signListSelected = [];
|
|
}
|
|
})
|
|
}else{
|
|
uni.showModal({
|
|
content: '修改标签失败！',
|
|
showCancel: false
|
|
});
|
|
}
|
|
});
|
|
},
|
|
//获取标签列表
|
|
async getSignList(){
|
|
const res = await getSignList({})
|
|
if (res.data.code === 200) {
|
|
for (let s of res.data.data) {
|
|
let signObject = {}
|
|
signObject.text = "#" + s.name
|
|
signObject.value = s.id
|
|
this.signList.push(signObject)
|
|
}
|
|
console.log('signList',this.signList)
|
|
} else {
|
|
uni.showModal({
|
|
content: '标签列表加载失败！',
|
|
showCancel: false
|
|
});
|
|
}
|
|
},
|
|
//上下架图片事件
|
|
onOrOffHandler(){
|
|
if(this.detailMsg.status === '2'){
|
|
//点击下架
|
|
this.changeStatus(this.detailMsg.id,'3')
|
|
}else if(this.detailMsg.status === '3'){
|
|
//点击上架
|
|
this.changeStatus(this.detailMsg.id,'2')
|
|
}
|
|
},
|
|
//选中标签事件
|
|
selectedSign(e){
|
|
let that = this;
|
|
that.signListSelected = e.detail.value;
|
|
//console.log('that.signListSelected'+that.signListSelected);
|
|
},
|
|
//置顶图片
|
|
topImg(){
|
|
//console.log('点击了',this.detailMsg)
|
|
topImg(this.detailMsg.id).then(res =>{
|
|
if(res.data.code === 200){
|
|
uni.showToast({
|
|
title:'置顶成功!',
|
|
duration: 1000
|
|
})
|
|
}else{
|
|
uni.showModal({
|
|
content: "置顶图片失败！",
|
|
showCancel: false,
|
|
});
|
|
}
|
|
});
|
|
},
|
|
|
|
//修改标签事件
|
|
changeSign(){
|
|
console.log('修改标签');
|
|
// 打开窗口
|
|
this.$refs.showPopup.open();
|
|
},
|
|
//上下架图片
|
|
changeStatus:function(id,status){
|
|
let that = this;
|
|
const param = {
|
|
id: id,
|
|
status: status
|
|
}
|
|
onlineOrOfflineImg(param).then(res =>{
|
|
if (res.data.code === 200) {
|
|
uni.showToast({
|
|
title: '修改成功!',
|
|
duration: 1000,
|
|
success() {
|
|
setTimeout(() => {
|
|
uni.redirectTo({
|
|
url: `/pages/index/material/material?categoryId=${that.typeId}&categoryIndex=${that.typeCurrent}&status=${that.status}`
|
|
});
|
|
}, 1000)
|
|
|
|
}
|
|
});
|
|
}else{
|
|
uni.showModal({
|
|
content: "上下架图片失败！",
|
|
showCancel: false,
|
|
});
|
|
}
|
|
});
|
|
},
|
|
// 图片详情
|
|
async getImgDetail(id) {
|
|
const res = await getImgDetails(id)
|
|
if (res.data.code === 200) {
|
|
this.detailMsg = res.data.data
|
|
console.log('图片详情', this.detailMsg)
|
|
//控制显示图片尺寸
|
|
if(this.detailMsg.typeId === 1){
|
|
this.imgWidth = 750 + 'rpx';
|
|
this.imgHeight = 750 + 'rpx';
|
|
this.marginTop = 250 + 'rpx';
|
|
}else if(this.detailMsg.typeId === 2){
|
|
this.imgWidth = 750 + 'rpx';
|
|
this.imgHeight = 100 + '%';
|
|
this.marginTop = 0 + 'rpx';
|
|
}else if(this.detailMsg.typeId === 3){
|
|
this.imgWidth = 750 + 'rpx';
|
|
this.imgHeight = 100 + '%';
|
|
this.marginTop = 0 + 'rpx';
|
|
}else if(this.detailMsg.typeId === 4){
|
|
this.marginTop = 300 + 'rpx';
|
|
this.imgWidth = 750 + 'rpx';
|
|
this.imgHeight = 600 + 'rpx';
|
|
}else if(this.detailMsg.typeId === 5){
|
|
this.imgWidth = 750 + 'rpx';
|
|
this.imgHeight = 750 + 'rpx';
|
|
this.marginTop = 250 + 'rpx';
|
|
}else if(this.detailMsg.typeId === 6){
|
|
this.imgWidth = 750 + 'rpx';
|
|
this.imgHeight = 750 + 'rpx';
|
|
this.marginTop = 250 + 'rpx';
|
|
}
|
|
//控制显示/隐藏盒子
|
|
//待审核
|
|
if(this.detailMsg.status === "0"){
|
|
this.showOrmis = 'none';
|
|
//审核拒绝
|
|
}else if(this.detailMsg.status === "1"){
|
|
this.showOrmis = 'none';
|
|
//已上架
|
|
}else if(this.detailMsg.status === "2"){
|
|
this.showOrmis = 'flex';
|
|
this.upOrDown = '下'
|
|
//已下架
|
|
}else{
|
|
this.showOrmis = 'flex';
|
|
this.upOrDown = '上'
|
|
}
|
|
} else {
|
|
uni.showModal({
|
|
content: "获取图片详情数据失败！",
|
|
showCancel: false,
|
|
});
|
|
}
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.imgDetail{
|
|
height:100%;
|
|
width:750rpx;
|
|
overflow: hidden;
|
|
background-color: $uni-bg-color;
|
|
position: absolute;
|
|
z-index: 0;
|
|
|
|
.img-view {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
z-index: 1;
|
|
|
|
}
|
|
|
|
.main-img {
|
|
}
|
|
|
|
.toolbar{
|
|
height: 100rpx;
|
|
width: 700rpx;
|
|
z-index: 2;
|
|
border-radius: 20rpx;
|
|
background-color: $uni-primary;
|
|
color: $uni-white;
|
|
position: absolute;
|
|
bottom: 68rpx;
|
|
left: 25rpx;
|
|
right: 25rpx;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
|
|
|
|
|
|
|
|
.border {
|
|
width: 1rpx;
|
|
height: 30rpx;
|
|
background-color: $uni-white;
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
.toolbarLeft{
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
width: 200rpx;
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
.toolbarMid{
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
width: 200rpx;
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
.toolbarRight{
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
width: 200rpx;
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
}
|
|
}
|
|
|
|
.popup-modal {
|
|
|
|
.segmented-control {
|
|
width: 654rpx;
|
|
margin: 40rpx auto;
|
|
|
|
.segmented-title {
|
|
font-size: 28rpx;
|
|
color: $uni-white;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
::v-deep .checklist-box {
|
|
border: none !important;
|
|
background: none !important;
|
|
margin-right: 0 !important;
|
|
}
|
|
|
|
::v-deep .checklist-text {
|
|
color: $uni-secondary-color !important;
|
|
font-size: 24rpx !important;
|
|
}
|
|
|
|
::v-deep .is-checked .checklist-text {
|
|
color: $uni-primary !important;
|
|
font-size: 24rpx !important;
|
|
}
|
|
|
|
::v-deep .is-disable .checklist-text {
|
|
color: $uni-base-color !important;
|
|
font-size: 24rpx !important;
|
|
}
|
|
|
|
}
|
|
|
|
.upLoadBtn{
|
|
width: 654rpx;
|
|
height: 100rpx;
|
|
line-height: 100rpx;
|
|
background: linear-gradient(180.00deg, $uni-primary 0%, $uni-primary 100%);
|
|
margin: 60rpx auto 0;
|
|
color: $uni-white;
|
|
border-radius: 20rpx;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
}
|
|
</style>
|
|
|