<template>
<view>
<tn-nav-bar fixed customBack>
<view slot="back" class='tn-custom-nav-bar__back' @click="goBack">
<text class='icon tn-icon-left'></text>
</view>
<view slot="default">
<text>我的供应</text>
</view>
</tn-nav-bar>
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<uv-sticky :offsetTop="vuex_custom_bar_height + 'px'" bgColor="#ffffff">
<tn-tabs-swiper :list="list" :isScroll="false" :current="current" name="tab-name"
@change="change" style="border-bottom: 1rpx solid #f1f1f1cc;"></tn-tabs-swiper>
</uv-sticky>
<view class="tn-flex tn-flex-direction-column tn-margin-top-sm tn-margin-bottom">
<!-- 图文信息 -->
<block v-for="(item,index) in content">
<view class="blogger__item" :key="index">
<view class="blogger__author tn-flex tn-flex-row-between tn-flex-col-center">
<view class="justify__author__info" @click="tn('')">
<view class="tn-flex tn-flex-row-center">
<view class="tn-flex tn-flex-row-center tn-flex-col-center">
<!-- <view class="">
<tn-avatar
class=""
shape="circle"
:src="item.userAvatar"
size="lg">
</tn-avatar>
</view> -->
<view class="tn-padding-right tn-text-ellipsis">
<view class="tn-padding-right tn-text-bold tn-text-lg">
{{ item.company||(item.contactNickName||item.contactPerson)}} </view>
<!-- <view class="tn-padding-right tn-padding-left-sm tn-padding-top-xs tn-color-gray">{{ item.date }}</view> -->
</view>
</view>
</view>
</view>
<!-- 状态(1:暂存,2:待处理,3:审核中,4:已通过,9:已拒绝,10:已取消) -->
<view v-if="item.status=='1'"
class="blogger__author__btn justify-content-item tn-flex-col-center tn-flex-row-center">
<text class="" style="background: #3F51B542;font-size: 12px;
padding: 8px;
color: #333333;
border-radius: 24px;
">暂存</text>
</view>
<view v-if="item.status=='3'"
class="blogger__author__btn justify-content-item tn-flex-col-center tn-flex-row-center">
<text class="" style="background: #3f51b56b;font-size: 12px;
padding: 8px;
color: #ff0;
border-radius: 24px;
">审核中</text>
</view>
<view v-if="item.status=='4'&&item.showFlag!='否'"
class="blogger__author__btn justify-content-item tn-flex-col-center tn-flex-row-center">
<text class="" style="background: #3F51B542;font-size: 12px;
padding: 8px;
color: #007000;
border-radius: 24px;
">已通过</text>
</view>
<view v-if="item.status=='9'"
class="blogger__author__btn justify-content-item tn-flex-col-center tn-flex-row-center">
<text class="" style="background: #3F51B542;font-size: 12px;
padding: 8px;
color: #d23920;
border-radius: 24px;
" @click="showTips(item)">已拒绝</text>
</view>
<view v-if="item.status=='10'"
class="blogger__author__btn justify-content-item tn-flex-col-center tn-flex-row-center">
<text class="" style="background: #3F51B542;font-size: 12px;
padding: 8px;
color: #333333;
border-radius: 24px;
">已取消</text>
</view>
<view v-if="item.status=='4'&&item.showFlag=='否'"
class="blogger__author__btn justify-content-item tn-flex-col-center tn-flex-row-center">
<text class="" style="background: #3F51B542;font-size: 12px;
padding: 8px;
color: #333333;
border-radius: 24px;
">已下架</text>
</view>
<!-- <view class="blogger__author__btn justify-content-item tn-flex-col-center tn-flex-row-center">
<text class="tn-icon-more-vertical tn-color-gray tn-text-bold tn-text-xxl"></text>
</view> -->
</view>
<view
class="blogger__desc tn-margin-top-sm tn-margin-bottom-sm tn-text-justify tn-flex-col-center tn-flex-row-left"
@click="tn('')">
<!-- <view v-for="(label_item,label_index) in item.label" :key="label_index" class="blogger__desc__label tn-float-left tn-margin-right">
<text class="blogger__desc__label--prefix tn-icon-topics-fill"></text>
<text class="tn-text-df">{{ label_item }}</text>
</view> -->
<tn-tag margin="-4px 4px 0 0" backgroundColor="#3a96d733" v-if="item.brand" fontColor="#3a96d7" shape="circle">{{ item.brand }}</tn-tag>
<tn-tag margin="-4px 4px 0 0" backgroundColor="#3a96d733" v-if="!item.company"
fontColor="#3a96d7" shape="circle">个人</tn-tag>
<!-- 不用限制长度了，因为发布的时候限制长度了-->
<text v-if="item.content"
class="blogger__desc__content tn-flex-1 tn-text-justify tn-text-df">{{ item.content }}</text>
</view>
<!-- 内容太多疲劳了-->
<view v-if="item.shareExt&&item.shareExt.length>0" class="blogger__content"
:id="`blogger__content--${index}`">
<basic-table header-row-class-name="basic-table-header" :columns="columns" :border="true"
:stripe="true" :data="item.shareExt">
</basic-table>
</view>
<!-- 内容太多疲劳了-->
<!-- <view v-if="item.shareExt&&item.shareExt.length>0" class="blogger__content" :id="`blogger__content--${index}`">
<uni-table border stripe emptyText="暂无更多数据">
<uni-tr>
<uni-th align="center">产品名称</uni-th>
<uni-th align="center">规格型号</uni-th>
<uni-th align="left">产品介绍</uni-th>
</uni-tr>
<uni-tr v-for="extItem in item.shareExt">
<uni-td>{{extItem.prodName}}</uni-td>
<uni-td>{{extItem.prodSpec}}</uni-td>
<uni-td>{{extItem.prodDesc}}</uni-td>
</uni-tr>
</uni-table>
</view> -->
<block v-if="item.imgList">
<view v-if="[1,2,4].indexOf(item.imgList.length) != -1" class="tn-padding-top-xs"
@click="tn('')">
<image v-for="(image_item,image_index) in item.imgList" :key="image_index"
class="blogger__main-image" :class="{
'blogger__main-image--1 tn-margin-bottom-sm': item.imgList.length === 1,
'blogger__main-image--2 tn-margin-right-sm tn-margin-bottom-sm': item.imgList.length === 2 || item.imgList.length === 4
}" :src="image_item.ftpUrl" mode="aspectFill" @click="showImg(item.imgList,image_index)"></image>
</view>
<view v-else class="tn-padding-top-xs">
<tn-grid hoverClass="none" :col="3">
<block v-for="(image_item,image_index) in item.imgList" :key="image_index">
<!-- #ifndef MP-WEIXIN -->
<tn-grid-item style="width: 30%;margin: 10rpx;">
<image class="blogger__main-image blogger__main-image--3"
:src="image_item.ftpUrl" mode="aspectFill" @click="showImg(item.imgList,image_index)"></image>
</tn-grid-item>
<!-- #endif-->
<!-- #ifdef MP-WEIXIN -->
<tn-grid-item style="width: 30%;margin: 10rpx;">
<image class="blogger__main-image blogger__main-image--3"
:src="image_item.ftpUrl" mode="aspectFill" @click="showImg(item.imgList,image_index)"></image>
</tn-grid-item>
<!-- #endif-->
</block>
</tn-grid>
</view>
</block>
<view v-for="file in item.fileDetailList" :key="file.id" v-if="!isImage(file.fileName)">
<view>
<text class="tn-icon-link"></text>
<view style="display: inline-block;margin-left:8px" @click="clickLink(file.ftpUrl,file.fileName)">
{{file.fileName}}</view>
</view>
</view>
<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-top-xs">
<view class="justify-content-item tn-color-gray tn-text-center">
<view class="tn-padding-right tn-padding-top-xs tn-color-gray">
{{ item.createTime|formatDate }}
<view v-if="item.status==9&&item.feedback" style="color: red;display: inline;margin-left:8px">
反馈意见:{{item.feedback||'--'}}
</view>
</view>
</view>
<view class="justify-content-item tn-flex tn-flex-col-center">
<view class="justify-content-item tn-flex tn-flex-col-center" v-if="item.status==4&&item.showFlag!='否'">
<!-- <tn-button shadow shape="round" fontColor="tn-color-white" backgroundColor="tn-bg-blue" :fontSize="24" height="auto" padding="10rpx 18rpx" @click="finishItem(item)">下架</tn-button> -->
<button type="warn" plain="true" size="mini" @click="finishItem(item)">下架供应</button>
</view>
<view class="justify-content-item tn-flex tn-flex-col-center" style="flex:none" v-if="item.status==1||item.status==9">
<button type="warn" plain="true" size="mini" @click="editItem(item)">编辑</button>
<!-- <tn-button shadow shape="round" fontColor="tn-color-white" backgroundColor="tn-bg-blue"
:fontSize="24" height="auto" padding="10rpx 18rpx"
@click="finishItem(item)">结束需求</tn-button> -->
</view>
</view>
</view>
</view>
<!-- 边距间隔 -->
<view class="tn-strip-bottom" v-if="index != content.length - 1"></view>
</block>
<!-- 边距间隔 -->
<!-- <view class="tn-strip-bottom"></view> -->
<!-- 广告 -->
</view>
</view>
<tn-modal v-model="showModel" @click="clickModel" :title="titleModel" :content="contentModel" :button="buttonModel"></tn-modal>
<view class='tn-tabbar-height'></view>
<view v-if="showEmpty" style="margin-top: 32vh;">
<tn-empty mode="data"></tn-empty>
</view>
</view>
</template>
<script>
import request from '../../utils/request'
import {
uniShowModal
} from '../../utils/uni_api'
export default {
data() {
return {
showModel:false,
titleModel:'下架供应提示',
contentModel:'下架之后内容不再展示在供应页面里, 是否继续?',
buttonModel:[{
text: '取消',
plain: true,
shape: 'round'
},
{
text: '继续',
backgroundColor: 'tn-bg-indigo',
fontColor: '#FFFFFF'
}],
list: [{
'tab-name': '已通过'
}, {
'tab-name': '审核中'
}, {
'tab-name': '暂存'
}, {
'tab-name': '已拒绝'
}],
current: 0,
showEmpty: false,
content:[],
curItem:{},
columns: [{
fieldName: 'prodName',
fieldDesc: '产品名称',
}, {
fieldName: 'prodSpec',
fieldDesc: '规格型号',
}, {
fieldName: 'prodDesc',
fieldDesc: '产品介绍',
}],
}
},
filters: {
formatDate(value) {
if (!value) return '';
const date = new Date(value);
const today = new Date();
const yesterday = new Date(today); // 昨天的日期
yesterday.setDate(yesterday.getDate() - 1); // 将昨天的日期设置为前一天
if (date.getFullYear() == today.getFullYear() && date.getMonth() == today.getMonth() && date.getDate() ==
today.getDate()) {
return '今天 ' + (date.getHours() > 9 ? '' : '0') + date.getHours() + ':' + (date
.getMinutes() > 9 ? '' : '0') + date.getMinutes(); // 根据需要格式化日期
}
if (date.getFullYear() == yesterday.getFullYear() && date.getMonth() == yesterday.getMonth() && date
.getDate() == yesterday.getDate()) {
return '昨天 ' + (date.getHours() > 9 ? '' : '0') + date.getHours() + ':' + (date
.getMinutes() > 9 ? '' : '0') + date.getMinutes(); // 根据需要格式化日期
}
return date.toLocaleDateString() + ' ' + (date.getHours() > 9 ? '' : '0') + date.getHours() + ':' + (date
.getMinutes() > 9 ? '' : '0') + date.getMinutes(); // 根据需要格式化日期
},
},
onLoad(props){
if(props.tab==1){
this.current= 1;
}
if(props.tab==2){
this.current= 2;
}
},
onShow() {
this.loadData();
},
methods: {
goBack() {
uni.navigateBack();
},
change(index) {
this.current = index;
this.loadData();
},
isImage(fileName) {
const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'ico']
const extension = fileName.split('.').pop().toLowerCase();
return imageExtensions.includes(extension);
},
loadData() {
let that = this;
that.content = [];
request.post('/slbResourceShare/show/my', {
userNo: uni.getStorageSync('userNo'),
// 状态(1:暂存,2:待处理,3:审核中,4:已通过,9:已拒绝,10:已取消)
status: that.current == 1 ? '3' : that.current == 2 ? '1' : that.current == 3 ? '9' : '4',
}).then(res => {
let newList = res.list || [];
if (res.success) {
let newList = res.list || [];
for (let i = 0; i < newList.length; i++) {
newList[i].imgList = [];
for (let j = 0; j < newList[i].fileDetailList.length; j++) {
if (that.isImage(newList[i].fileDetailList[j].fileName)) {
newList[i].imgList.push(newList[i].fileDetailList[j]);
}
}
}
that.content = newList;
if (newList.length == 0) {
that.showEmpty = true;
} else {
that.showEmpty = false;
}
}
console.warn(res);
})
},
showImg(items, index) {
let urls = [];
for (let i = 0; i < items.length; i++) {
urls.push(items[i].ftpUrl);
}
// 预览图片
uni.previewImage({
urls: urls,
current: index,
});
},
clickLink(url,fileName) {
uni.navigateTo({
url:'/pages/webview/web-view?url='+encodeURIComponent('http://slb-m.dev.ml1993.com/webview?title='+fileName+'&url='+ url),
})
// uni.navigateTo({
// url:'/pages/webview/web-view?url='+url,
// })
},
finishItem(item){
let that = this;
uniShowModal('下架提醒', '下架之后内容不再展示在我有什么页面里, 是否继续?', {
showCancel: true,
confirmText:'继续',
success: (res) => {
if(res.confirm){
that.finishNext(item);
}
}
})
},
clickModel(e){
if(e.index==1){
this.showModel = false;
this.finishNext(this.curItem)
}else{
this.showModel = false;
}
},
finishNext(item){
let that = this;
request.post('/slbResourceShare/offShelf', {
id: item.id,
userNo: uni.getStorageSync('userNo'),
}).then(res => {
if (res.success) {
uni.showToast({
title: '下架成功'
})
that.loadData();
} else {
uni.showToast({
title: res.msg,
icon: 'none'
})
}
})
},
editItem(item){
uni.setStorageSync(item.bisNo,JSON.stringify(item))
uni.navigateTo({
url: '/circlePages/addShare?sid=' + item.bisNo,
})
}
}
}
</script>
<style lang="scss" scoped>
/* 胶囊*/
.tn-custom-nav-bar__back {
width: 60%;
height: 100%;
position: relative;
display: flex;
justify-content: space-evenly;
align-items: center;
box-sizing: border-box;
// background-color: rgba(0, 0, 0, 0.15);
border-radius: 1000rpx;
// border: 1rpx solid rgba(255, 255, 255, 0.5);
// color: #FFFFFF;
font-size: 18px;
.icon {
display: block;
flex: 1;
margin: auto;
text-align: center;
}
&:before {
content: " ";
width: 1rpx;
height: 110%;
position: absolute;
top: 22.5%;
left: 0;
right: 0;
margin: auto;
transform: scale(0.5);
transform-origin: 0 0;
pointer-events: none;
box-sizing: border-box;
opacity: 0.7;
background-color: #FFFFFF;
}
}
/* 文章内容 start*/
.blogger {
&__item {
padding: 30rpx;
}
&__author {
&__btn {
margin-right: -12rpx;
opacity: 0.5;
}
}
&__desc {
line-height: 30rpx;
&__label {
color: #1D2541;
background-color: #F3F2F7;
border-radius: 10rpx;
font-size: 22rpx;
padding: 5rpx 15rpx;
margin: 5rpx 18rpx 0 0;
&--prefix {
font-size: 24rpx;
color: #1D2541;
padding-right: 10rpx;
}
}
&__content {
line-height: 50rpx;
}
}
&__content {
margin-top: 18rpx;
padding-right: 18rpx;
&__data {
line-height: 46rpx;
text-align: justify;
overflow: hidden;
transition: all 0.25s ease-in-out;
}
&__status {
margin-top: 10rpx;
font-size: 26rpx;
color: #82B2FF;
}
}
&__main-image {
border: 1rpx solid #F8F7F8;
border-radius: 16rpx;
&--1 {
max-width: 80%;
max-height: 300rpx;
}
&--2 {
max-width: 260rpx;
max-height: 260rpx;
}
&--3 {
height: 212rpx;
width: 100%;
}
}
&__count-icon {
font-size: 40rpx;
padding-right: 5rpx;
}
&__ad {
width: 100%;
height: 500rpx;
transform: translate3d(0px, 0px, 0px) !important;
::v-deep .uni-swiper-slide-frame {
transform: translate3d(0px, 0px, 0px) !important;
}
.uni-swiper-slide-frame {
transform: translate3d(0px, 0px, 0px) !important;
}
&__item {
position: absolute;
width: 100%;
height: 100%;
transform-origin: left center;
transform: translate3d(100%, 0px, 0px) scale(1) !important;
transition: transform 0.25s ease-in-out;
z-index: 1;
&--0 {
transform: translate3d(0%, 0px, 0px) scale(1) !important;
z-index: 4;
}
&--1 {
transform: translate3d(13%, 0px, 0px) scale(0.9) !important;
z-index: 3;
}
&--2 {
transform: translate3d(26%, 0px, 0px) scale(0.8) !important;
z-index: 2;
}
}
&__content {
border-radius: 40rpx;
width: 640rpx;
height: 500rpx;
overflow: hidden;
}
&__image {
width: 100%;
height: 100%;
}
}
}
/* 文章内容 end*/
/* 间隔线 start*/
.tn-strip-bottom {
width: 100%;
border-bottom: 20rpx solid rgba(241, 241, 241, 0.8);
}
/* 间隔线 end*/
</style>