<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 :style="{fontSize:(wxFontSize)+'px'}">我的收藏</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" :fontSize="(wxFontSize+12)" :barWidth="wxFontSize+50" :current="current" name="tab-name" @change="change" style="border-bottom: 1rpx solid #f1f1f1cc;"></tn-tabs-swiper>
</uv-sticky>
<view>
<!-- 图文信息 -->
<block v-for="(item,index) in content" :key="index">
<view class="blogger__item">
<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">
<view class="tn-padding-right tn-text-bold tn-text-lg" :style="{fontSize:(wxFontSize)+'px'}">
{{ item.company||(item.contactNickName||item.contactPerson) }}
</view>
</view>
</view>
</view>
</view>
<view v-if="item.validDate&¤t==0"
class="blogger__author__btn justify-content-item tn-flex-col-center tn-flex-row-center">
<text class="" style="background: #3F51B542;font-size: 12px;word-break: keep-all;
padding: 8px;
color: #0000FF;
border-radius: 24px;
border-top-right-radius: 0;" :style="{fontSize:(wxFontSize-6)+'px'}">{{item.validDate}}</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"
>
<!-- 不用限制长度了，因为发布的时候限制长度了-->
<tn-tag margin="-4px 4px 0 0" backgroundColor="#3a96d733" v-if="item.brand" fontColor="#3a96d7" shape="circle" :fontSize="wxFontSize+11">{{ item.brand }}</tn-tag>
<tn-tag margin="-4px 4px 0 0" backgroundColor="#3a96d733" v-if="!item.company"
fontColor="#3a96d7" shape="circle" :fontSize="wxFontSize+11">个人</tn-tag>
<text
class="blogger__desc__content tn-flex-1 tn-text-justify tn-text-df" :style="{fontSize:(wxFontSize-2)+'px'}">{{ 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" :fontSize="(wxFontSize-3)"
:stripe="true" :data="item.shareExt">
</basic-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" @click="tn('')">
<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"
aspectFill :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" :style="{fontSize:(wxFontSize-4)+'px'}"></text>
<view style="display: inline;margin-left:8px" @click="clickLink(file.ftpUrl,file.fileName)" :style="{fontSize:(wxFontSize-3)+'px'}">
{{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" :style="{fontSize:(wxFontSize-3)+'px'}">
{{ item.createTime2|formatDate }}
</view>
</view>
<view class="justify-content-item tn-flex tn-flex-col-center" style="position: relative;">
<button type="warn" plain="true" style="height: 26px;line-height: 26px" size="mini" @click="delColl(item)"><text style="font-size: 18px;" class="tn-icon-delete"></text></button>
<text class="tn-icon-more-vertical tn-color-gray tn-text-bold tn-text-xxl"
@click="showActionSheet(item)" style="margin-left: 12px;"></text>
<view v-if="curItem.id==item.id&&showSheet" style="position: absolute;
background: #ddd;
display: block;
right: 10px;
top: 30px;border-radius: 16px;z-index: 900;border-top-right-radius: 0">
<text class="tn-icon-close" style="float: right;padding:8px;color:#333" @click="hideSheet()"></text>
<view class="content" style="padding: 24px 36px;font-size: 16px;line-height: 24px; width: calc(100vw - 52px); border-radius: 16px;
border-top-right-radius: 0;"
v-if="!showContact">
<button @click="linkTel()" style="border-radius:30px;color:#fff;background-color: #1d60b1;"><text
class="tn-icon-service" style="margin-right: 12px;"></text> {{current==0?'联系需方':'联系供方'}}</button>
<!-- <view>联系我们帮助对接</view> -->
<!-- <button v-if="!collStatus" @click="addColl"
style="margin-top:10px;border-radius:30px;color:#3a96d7;background-color: #d3e3fd;"><text
class="tn-icon-star" style="margin-right: 12px;"></text>
收 藏</button>
<button v-if="collStatus" @click="delColl"
style="margin-top:10px;border-radius:30px;color:#3a96d7;background-color: #d3e3fd;"><text
class="tn-icon-star-fill" style="margin-right: 12px;"></text> 取消收藏</button> -->
<button open-type="share"
style="margin-top:10px;border-radius:30px;" type="default" plain="true"><text
class="tn-icon-send" style="margin-right: 12px;"></text>
转 发</button>
</view>
<view class="content bg-content" style="padding: 50px 36px;padding-bottom: 32px;font-size: 16px;width: calc(100vw - 52px);line-height: 24px;border-radius: 16px;border-top-right-radius: 0;"
v-if="showContact">
<view><text style="font-size: 20px;font-weight: bold;" v-if="curContact.company">{{curContact.company}}</text></view>
<view style="margin-top:20px;
font-weight: bold;
font-size: 20px;"><text class="tn-icon-my-formal"></text><text style="margin-left: 6px;">{{curContact.contactPerson}}</text> </view>
<view style="font-size: 20px;font-weight: bold;margin-top:20px" @click="showTel(curContact.contactMethod)"><text class="tn-icon-tel"></text>
<text style="margin-left: 4px;">{{curContact.contactMethod}}</text> </view>
</view>
</view>
</view>
</view>
</view>
<!-- 边距间隔 -->
<view class="tn-strip-bottom" v-if="index != content.length - 1"></view>
</block>
</view>
<view v-if="showEmpty" style="margin-top: 32vh;">
<tn-empty mode="data"></tn-empty>
</view>
</view>
<!-- 提示窗示例 -->
<uni-popup ref="alertDialog" type="dialog">
<uni-popup-dialog type="info" cancelText="关闭" confirmText="确认" title=" " content="确定取消收藏吗？" @confirm="dialogConfirm"
@close="dialogClose"></uni-popup-dialog>
</uni-popup>
<tn-popup v-model="showSheet2" mode="center" closeBtn="true" borderRadius="16">
<view class="content" style="padding: 24px 36px;font-size: 16px;line-height: 24px; width: 320px;"
v-if="!showContact">
<button @click="linkTel()" style="border-radius:30px;color:#fff;background-color: #1d60b1;"><text
class="tn-icon-service" style="margin-right: 12px;"></text> {{current==0?'联系需方':'联系供方'}}</button>
<!-- <view>联系我们帮助对接</view> -->
<!-- <button v-if="!collStatus" @click="addColl"
style="margin-top:10px;border-radius:30px;color:#3a96d7;background-color: #d3e3fd;"><text
class="tn-icon-star" style="margin-right: 12px;"></text>
收 藏</button>
<button v-if="collStatus" @click="delColl"
style="margin-top:10px;border-radius:30px;color:#3a96d7;background-color: #d3e3fd;"><text
class="tn-icon-star-fill" style="margin-right: 12px;"></text> 取消收藏</button> -->
<button open-type="share"
style="margin-top:10px;border-radius:30px;" type="default" plain="true"><text
class="tn-icon-send" style="margin-right: 12px;"></text>
转 发</button>
</view>
<view class="content bg-content" style="padding: 50px 36px;padding-bottom: 32px;font-size: 16px;width:320px;line-height: 24px;"
v-if="showContact">
<view><text style="font-size: 20px;font-weight: bold;" v-if="curContact.company">{{curContact.company}}</text></view>
<view style="margin-top:20px;
font-weight: bold;
font-size: 20px;"><text class="tn-icon-my-formal"></text><text style="margin-left: 6px;">{{curContact.contactPerson}}</text> </view>
<view style="font-size: 20px;font-weight: bold;margin-top:20px" @click="showTel(curContact.contactMethod)"><text class="tn-icon-tel"></text>
<text style="margin-left: 4px;">{{curContact.contactMethod}}</text> </view>
</view>
</tn-popup>
</view>
</template>
<script>
import request from '../../utils/request'
import {
uniShowModal
} from '../../utils/uni_api'
export default {
data() {
return {
list: [{
'tab-name': '需求'
}, {
'tab-name': '供应'
}],
current: 0,
showEmpty: false,
content: [],
curItem:{},
showSheet:false,
showContact:false,
curContact:{},
columns: [{
fieldName: 'prodName',
fieldDesc: '产品名称',
}, {
fieldName: 'prodSpec',
fieldDesc: '产品型号',
}, {
fieldName: 'prodDesc',
fieldDesc: '产品介绍',
}],
wxFontSize:17
}
},
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(){
const appBaseInfo = wx.getAppBaseInfo();
this.wxFontSize = uni.getStorageSync('fontSize')||appBaseInfo.fontSizeSetting||17;
},
onShow() {
if(!uni.getStorageSync('userNo')){
//去登录
uni.navigateTo({
url: '/pages/login/login',
});
return false;
}
this.loadData();
},
methods: {
goBack() {
const pages = getCurrentPages()
// 有可返回的页面则直接返回，uni.navigateBack 默认返回失败之后会自动刷新页面 ，无法继续返回
if (pages.length > 1) {
uni.navigateBack()
return;
}else{
uni.navigateTo({
url: '/pages/index/index'
})
}
},
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('/slbCollect/show/my', {
userNo: uni.getStorageSync('userNo'),
bisType: that.current == 1 ? '2' : '1',
}).then(res => {
let newList = res.list || [];
if (res&&res.success) {
let cList = [];
for (let i = 0; i < newList.length; i++) {
if (newList[i].fkBisMap) {
newList[i].fkBisMap.collId = newList[i].id;
newList[i].fkBisMap.createTime2 = newList[i].createTime;
newList[i].fkBisMap.imgList = [];
for (let j = 0; j < newList[i].fkBisMap.fileDetailList.length; j++) {
if (that.isImage(newList[i].fkBisMap.fileDetailList[j].fileName)) {
newList[i].fkBisMap.imgList.push(newList[i].fkBisMap.fileDetailList[j]);
}
}
cList.push(newList[i].fkBisMap);
}
}
that.content = cList;
}
if(res._redirect){
uni.navigateTo({
url: '/pages/login/login',
});
return false;
}
if (newList.length == 0) {
that.showEmpty = true;
} else {
that.showEmpty = false;
}
})
},
dialogConfirm(){
let item = this.curItem;
let that = this;
request.post('/slbCollect/del', {
id: item.collId,
userNo: uni.getStorageSync('userNo'),
}).then(res => {
if (res.success) {
uni.showToast({
title: '取消成功'
})
that.loadData();
} else {
uni.showToast({
title: res.msg,
icon: 'none'
})
}
})
},
delColl(item) {
this.curItem = item;
let that = this;
// this.$refs.alertDialog.open()
uniShowModal('确定取消收藏吗？', '', {
showCancel: true,
confirmText:'确定',
success: (res) => {
if(res.confirm){
that.dialogConfirm();
}
}
})
},
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('https://slb-m.lx-device.com/webview?title='+fileName+'&url='+ url),
// })
uni.downloadFile({
url: url,
filePath: wx.env.USER_DATA_PATH + "/" + fileName,
success: function (res) {
const filePath = res.filePath
uni.openDocument({
filePath: filePath,
showMenu: true,
success: function (res) {
console.log('打开文档成功')
},
fail: function(){
uni.navigateTo({
url:'/pages/webview/web-view?url='+encodeURIComponent('https://slb-m.lx-device.com/webview?title='+fileName+'&url='+ url),
})
}
})
}
})
// uni.navigateTo({
// url:'/pages/webview/web-view?url='+url,
// })
},
hideSheet(){
this.curItem = {};
this.showSheet = false;
},
showActionSheet(item) {
let that = this;
console.warn(item);
if(!this.curItem.id){
this.curItem = item;
}else{
this.curItem = {}
this.showSheet = false;
return false;
}
this.showSheet = true;
that.showContact = false;
},
linkTel() {
if (!uni.getStorageSync('userNo')) {
uni.showToast({
title: '请登录'
})
uni.navigateTo({
url: '/pages/login/login'
})
return false;
}
let that = this;
let params = {};
params.slbBisContact = JSON.stringify({
fkBisNo: that.curItem.bisNo,
bisType: that.current==0?'1':'2',
type: '1',
company: that.curItem.company,
companyNo: that.curItem.companyNo,
userNo: uni.getStorageSync('userNo'),
});
request.post('/slbBisContact/add', params).then(res => {
if (res.success) {
that.showContact = true;
that.curContact.company = that.curItem.company;
that.curContact.contactMethod = res.resultMap.contactMethod;
that.curContact.contactPerson = res.resultMap.contactPerson;
} else {
that.showContact = false;
uni.showToast({
title: res.msg,
icon: 'none'
})
}
})
},
showTel(tel){
uni.makePhoneCall({
phoneNumber: tel,
});
},
}
}
</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);
}
.bg-content{
color: #fff;
background-image: url(./../../static/bg.png);
background-size: cover;
}
/* 间隔线 end*/
</style>