coll.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504
  1. <template>
  2. <view>
  3. <tn-nav-bar fixed customBack>
  4. <view slot="back" class='tn-custom-nav-bar__back' @click="goBack">
  5. <text class='icon tn-icon-left'></text>
  6. </view>
  7. <view slot="default">
  8. <text>我的收藏</text>
  9. </view>
  10. </tn-nav-bar>
  11. <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
  12. <uv-sticky :offsetTop="vuex_custom_bar_height + 'px'" bgColor="#ffffff">
  13. <tn-tabs-swiper :list="list" :isScroll="false" :current="current" name="tab-name" @change="change" style="border-bottom: 1rpx solid #f1f1f1cc;"></tn-tabs-swiper>
  14. </uv-sticky>
  15. <view>
  16. <!-- 图文信息 -->
  17. <block v-for="(item,index) in content" :key="index">
  18. <view class="blogger__item">
  19. <view class="blogger__author tn-flex tn-flex-row-between tn-flex-col-center">
  20. <view class="justify__author__info" @click="tn('')">
  21. <view class="tn-flex tn-flex-row-center">
  22. <view class="tn-flex tn-flex-row-center tn-flex-col-center">
  23. <!-- <view class="">
  24. <tn-avatar class="" shape="circle" :src="item.userAvatar" size="lg">
  25. </tn-avatar>
  26. </view> -->
  27. <view class="tn-padding-right tn-text-ellipsis">
  28. <view class="tn-padding-right tn-text-bold tn-text-lg">
  29. {{ item.company }}
  30. </view>
  31. </view>
  32. </view>
  33. </view>
  34. </view>
  35. <view v-if="item.validDate"
  36. class="blogger__author__btn justify-content-item tn-flex-col-center tn-flex-row-center">
  37. <text class="" style="background: #3F51B542;font-size: 12px;
  38. padding: 8px;
  39. color: #0000FF;
  40. border-radius: 24px;
  41. border-top-right-radius: 0;">{{item.validDate}}</text>
  42. </view>
  43. </view>
  44. <view
  45. class="blogger__desc tn-margin-top-sm tn-margin-bottom-sm tn-text-justify tn-flex-col-center tn-flex-row-left"
  46. @click="tn('')">
  47. <!-- <view v-for="(label_item,label_index) in item.label" :key="label_index"
  48. class="blogger__desc__label tn-float-left tn-margin-right">
  49. <text class="blogger__desc__label--prefix tn-icon-topics-fill"></text>
  50. <text class="tn-text-df">{{ label_item }}</text>
  51. </view> -->
  52. <!-- 不用限制长度了,因为发布的时候限制长度了-->
  53. <tn-tag margin="-4px 4px 0 0" backgroundColor="#3a96d733" v-if="item.brand" fontColor="#3a96d7" shape="circle">{{ item.brand }}</tn-tag>
  54. <text
  55. class="blogger__desc__content tn-flex-1 tn-text-justify tn-text-df">{{ item.content }}</text>
  56. </view>
  57. <!-- 内容太多疲劳了-->
  58. <!-- <view
  59. v-if="item.content"
  60. class="blogger__content"
  61. :id="`blogger__content--${index}`"
  62. >
  63. <view
  64. class="blogger__content__data clamp-text-2">
  65. {{ item.content }}
  66. </view>
  67. </view> -->
  68. <block v-if="item.imgList">
  69. <view v-if="[1,2,4].indexOf(item.imgList.length) != -1" class="tn-padding-top-xs"
  70. @click="tn('')">
  71. <image v-for="(image_item,image_index) in item.imgList" :key="image_index"
  72. class="blogger__main-image" :class="{
  73. 'blogger__main-image--1 tn-margin-bottom-sm': item.imgList.length === 1,
  74. 'blogger__main-image--2 tn-margin-right-sm tn-margin-bottom-sm': item.imgList.length === 2 || item.imgList.length === 4
  75. }" :src="image_item.ftpUrl" mode="scaleToFill" @click="showImg(item.imgList,image_index)"></image>
  76. </view>
  77. <view v-else class="tn-padding-top-xs" @click="tn('')">
  78. <tn-grid hoverClass="none" :col="3">
  79. <block v-for="(image_item,image_index) in item.imgList" :key="image_index">
  80. <!-- #ifndef MP-WEIXIN -->
  81. <tn-grid-item style="width: 30%;margin: 10rpx;">
  82. <image class="blogger__main-image blogger__main-image--3"
  83. :src="image_item.ftpUrl" mode="scaleToFill" @click="showImg(item.imgList,image_index)"></image>
  84. </tn-grid-item>
  85. <!-- #endif-->
  86. <!-- #ifdef MP-WEIXIN -->
  87. <tn-grid-item style="width: 30%;margin: 10rpx;">
  88. <image class="blogger__main-image blogger__main-image--3"
  89. scaleToFill :src="image_item.ftpUrl" mode="aspectFill" @click="showImg(item.imgList,image_index)"></image>
  90. </tn-grid-item>
  91. <!-- #endif-->
  92. </block>
  93. </tn-grid>
  94. </view>
  95. </block>
  96. <!-- 内容太多疲劳了-->
  97. <view
  98. v-if="item.shareExt&&item.shareExt.length>0"
  99. class="blogger__content"
  100. :id="`blogger__content--${index}`"
  101. >
  102. <uni-table border stripe emptyText="暂无更多数据" >
  103. <!-- 表头行 -->
  104. <uni-tr>
  105. <uni-th align="center">产品名称1</uni-th>
  106. <uni-th align="center">规格型号</uni-th>
  107. <uni-th align="left">产品介绍</uni-th>
  108. </uni-tr>
  109. <!-- 表格数据行 -->
  110. <uni-tr v-for="extItem in item.shareExt">
  111. <uni-td>{{extItem.prodName}}</uni-td>
  112. <uni-td>{{extItem.prodSpec}}</uni-td>
  113. <uni-td>{{extItem.prodDesc}}</uni-td>
  114. </uni-tr>
  115. </uni-table>
  116. </view>
  117. <view v-for="file in item.fileDetailList" v-if="!isImage(file.fileName)">
  118. <view>
  119. <text class="tn-icon-link"></text>
  120. <view style="display: inline-block;margin-left:8px" @click="clickLink(file.ftpUrl)">
  121. {{file.fileName}}
  122. </view>
  123. </view>
  124. </view>
  125. <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-top-xs">
  126. <view class="justify-content-item tn-color-gray tn-text-center">
  127. <view class="tn-padding-right tn-padding-top-xs tn-color-gray">
  128. {{ item.createTime2|formatDate }}
  129. </view>
  130. </view>
  131. <view class="justify-content-item tn-flex tn-flex-col-center">
  132. <text class="tn-icon-delete tn-color-gray tn-text-bold tn-text-xxl"
  133. @click="delColl(item)"></text>
  134. </view>
  135. </view>
  136. </view>
  137. <!-- 边距间隔 -->
  138. <view class="tn-strip-bottom" v-if="index != content.length - 1"></view>
  139. </block>
  140. </view>
  141. <view v-if="showEmpty" style="margin-top: 32vh;">
  142. <tn-empty mode="data"></tn-empty>
  143. </view>
  144. </view>
  145. <!-- 提示窗示例 -->
  146. <uni-popup ref="alertDialog" type="dialog">
  147. <uni-popup-dialog type="info" cancelText="关闭" confirmText="确认" title="提示" content="确定取消收藏吗?" @confirm="dialogConfirm"
  148. @close="dialogClose"></uni-popup-dialog>
  149. </uni-popup>
  150. </view>
  151. </template>
  152. <script>
  153. import request from '../../utils/request'
  154. export default {
  155. data() {
  156. return {
  157. list: [{
  158. 'tab-name': '需求'
  159. }, {
  160. 'tab-name': '共享'
  161. }],
  162. current: 0,
  163. showEmpty: false,
  164. content: [],
  165. curItem:{}
  166. }
  167. },
  168. filters: {
  169. formatDate(value) {
  170. if (!value) return '';
  171. const date = new Date(value);
  172. const today = new Date();
  173. const yesterday = new Date(today); // 昨天的日期
  174. yesterday.setDate(yesterday.getDate() - 1); // 将昨天的日期设置为前一天
  175. if (date.getFullYear() == today.getFullYear() && date.getMonth() == today.getMonth() && date.getDate() ==
  176. today.getDate()) {
  177. return '今天 ' + (date.getHours() > 9 ? '' : '0') + date.getHours() + ':' + (date
  178. .getMinutes() > 9 ? '' : '0') + date.getMinutes(); // 根据需要格式化日期
  179. }
  180. if (date.getFullYear() == yesterday.getFullYear() && date.getMonth() == yesterday.getMonth() && date
  181. .getDate() == yesterday.getDate()) {
  182. return '昨天 ' + (date.getHours() > 9 ? '' : '0') + date.getHours() + ':' + (date
  183. .getMinutes() > 9 ? '' : '0') + date.getMinutes(); // 根据需要格式化日期
  184. }
  185. return date.toLocaleDateString() + ' ' + (date.getHours() > 9 ? '' : '0') + date.getHours() + ':' + (date
  186. .getMinutes() > 9 ? '' : '0') + date.getMinutes(); // 根据需要格式化日期
  187. },
  188. },
  189. onShow() {
  190. this.loadData();
  191. },
  192. methods: {
  193. goBack() {
  194. uni.navigateBack();
  195. },
  196. change(index) {
  197. this.current = index;
  198. this.loadData();
  199. },
  200. isImage(fileName) {
  201. const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'ico']
  202. const extension = fileName.split('.').pop().toLowerCase();
  203. return imageExtensions.includes(extension);
  204. },
  205. loadData() {
  206. let that = this;
  207. that.content = [];
  208. request.post('/slbCollect/show/my', {
  209. userNo: uni.getStorageSync('userNo'),
  210. bisType: that.current == 1 ? '2' : '1',
  211. }).then(res => {
  212. let newList = res.list || [];
  213. if (res.success) {
  214. let cList = [];
  215. for (let i = 0; i < newList.length; i++) {
  216. if (newList[i].fkBisMap) {
  217. newList[i].fkBisMap.collId = newList[i].id;
  218. newList[i].fkBisMap.createTime2 = newList[i].createTime;
  219. newList[i].fkBisMap.imgList = [];
  220. for (let j = 0; j < newList[i].fkBisMap.fileDetailList.length; j++) {
  221. if (that.isImage(newList[i].fkBisMap.fileDetailList[j].fileName)) {
  222. newList[i].fkBisMap.imgList.push(newList[i].fkBisMap.fileDetailList[j]);
  223. }
  224. }
  225. cList.push(newList[i].fkBisMap);
  226. }
  227. }
  228. that.content = cList;
  229. }
  230. if (newList.length == 0) {
  231. that.showEmpty = true;
  232. } else {
  233. that.showEmpty = false;
  234. }
  235. })
  236. },
  237. dialogConfirm(){
  238. let item = this.curItem;
  239. let that = this;
  240. request.post('/slbCollect/del', {
  241. id: item.collId,
  242. userNo: uni.getStorageSync('userNo'),
  243. }).then(res => {
  244. if (res.success) {
  245. uni.showToast({
  246. title: '取消成功'
  247. })
  248. that.loadData();
  249. } else {
  250. uni.showToast({
  251. title: res.msg,
  252. icon: 'none'
  253. })
  254. }
  255. })
  256. },
  257. delColl(item) {
  258. this.curItem = item;
  259. this.$refs.alertDialog.open()
  260. },
  261. showImg(items, index) {
  262. let urls = [];
  263. for (let i = 0; i < items.length; i++) {
  264. urls.push(items[i].ftpUrl);
  265. }
  266. // 预览图片
  267. uni.previewImage({
  268. urls: urls,
  269. current: index,
  270. });
  271. },
  272. clickLink(url){
  273. uni.navigateTo({
  274. url:'/pages/webview/web-view?url='+url,
  275. })
  276. },
  277. }
  278. }
  279. </script>
  280. <style lang="scss" scoped>
  281. /* 胶囊*/
  282. .tn-custom-nav-bar__back {
  283. width: 60%;
  284. height: 100%;
  285. position: relative;
  286. display: flex;
  287. justify-content: space-evenly;
  288. align-items: center;
  289. box-sizing: border-box;
  290. // background-color: rgba(0, 0, 0, 0.15);
  291. border-radius: 1000rpx;
  292. border: 1rpx solid rgba(255, 255, 255, 0.5);
  293. // color: #FFFFFF;
  294. font-size: 18px;
  295. .icon {
  296. display: block;
  297. flex: 1;
  298. margin: auto;
  299. text-align: center;
  300. }
  301. &:before {
  302. content: " ";
  303. width: 1rpx;
  304. height: 110%;
  305. position: absolute;
  306. top: 22.5%;
  307. left: 0;
  308. right: 0;
  309. margin: auto;
  310. transform: scale(0.5);
  311. transform-origin: 0 0;
  312. pointer-events: none;
  313. box-sizing: border-box;
  314. opacity: 0.7;
  315. background-color: #FFFFFF;
  316. }
  317. }
  318. /* 文章内容 start*/
  319. .blogger {
  320. &__item {
  321. padding: 30rpx;
  322. }
  323. &__author {
  324. &__btn {
  325. margin-right: -12rpx;
  326. opacity: 0.5;
  327. }
  328. }
  329. &__desc {
  330. line-height: 30rpx;
  331. &__label {
  332. color: #1D2541;
  333. background-color: #F3F2F7;
  334. border-radius: 10rpx;
  335. font-size: 22rpx;
  336. padding: 5rpx 15rpx;
  337. margin: 5rpx 18rpx 0 0;
  338. &--prefix {
  339. font-size: 24rpx;
  340. color: #1D2541;
  341. padding-right: 10rpx;
  342. }
  343. }
  344. &__content {
  345. line-height: 50rpx;
  346. }
  347. }
  348. &__content {
  349. margin-top: 18rpx;
  350. padding-right: 18rpx;
  351. &__data {
  352. line-height: 46rpx;
  353. text-align: justify;
  354. overflow: hidden;
  355. transition: all 0.25s ease-in-out;
  356. }
  357. &__status {
  358. margin-top: 10rpx;
  359. font-size: 26rpx;
  360. color: #82B2FF;
  361. }
  362. }
  363. &__main-image {
  364. border: 1rpx solid #F8F7F8;
  365. border-radius: 16rpx;
  366. &--1 {
  367. max-width: 80%;
  368. max-height: 300rpx;
  369. }
  370. &--2 {
  371. max-width: 260rpx;
  372. max-height: 260rpx;
  373. }
  374. &--3 {
  375. height: 212rpx;
  376. width: 100%;
  377. }
  378. }
  379. &__count-icon {
  380. font-size: 40rpx;
  381. padding-right: 5rpx;
  382. }
  383. &__ad {
  384. width: 100%;
  385. height: 500rpx;
  386. transform: translate3d(0px, 0px, 0px) !important;
  387. ::v-deep .uni-swiper-slide-frame {
  388. transform: translate3d(0px, 0px, 0px) !important;
  389. }
  390. .uni-swiper-slide-frame {
  391. transform: translate3d(0px, 0px, 0px) !important;
  392. }
  393. &__item {
  394. position: absolute;
  395. width: 100%;
  396. height: 100%;
  397. transform-origin: left center;
  398. transform: translate3d(100%, 0px, 0px) scale(1) !important;
  399. transition: transform 0.25s ease-in-out;
  400. z-index: 1;
  401. &--0 {
  402. transform: translate3d(0%, 0px, 0px) scale(1) !important;
  403. z-index: 4;
  404. }
  405. &--1 {
  406. transform: translate3d(13%, 0px, 0px) scale(0.9) !important;
  407. z-index: 3;
  408. }
  409. &--2 {
  410. transform: translate3d(26%, 0px, 0px) scale(0.8) !important;
  411. z-index: 2;
  412. }
  413. }
  414. &__content {
  415. border-radius: 40rpx;
  416. width: 640rpx;
  417. height: 500rpx;
  418. overflow: hidden;
  419. }
  420. &__image {
  421. width: 100%;
  422. height: 100%;
  423. }
  424. }
  425. }
  426. /* 文章内容 end*/
  427. /* 间隔线 start*/
  428. .tn-strip-bottom {
  429. width: 100%;
  430. border-bottom: 20rpx solid rgba(241, 241, 241, 0.8);
  431. }
  432. /* 间隔线 end*/
  433. </style>