newsinfo.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539
  1. <template>
  2. <view>
  3. <view class="guess-section-wrap1">
  4. <view class='guess-section-wrap-content'>
  5. <view style='margin:15px;background:#fff;padding:15px;border-radius:5px;' class='flex justify-between' v-for='(item, index) in newsInfo' :key="index" @click="navToDetailPage(item.id)">
  6. <view style='margin-right:10px;'>
  7. <view style='font-size:16px;height:54px;'>{{item.title}}</view>
  8. <view style='color:#B2B3BB;font-size:12px;'><text style='margin-right:5px;'>{{item.from}}</text>{{item.gmtUpdate}}</view>
  9. </view>
  10. <view><image style='width:100px;height:72px;border-radius:5px;' :src='item.titleImg'></image></view>
  11. </view>
  12. </view>
  13. <view v-show="isLoadMore">
  14. <uni-load-more :status="loadStatus" ></uni-load-more>
  15. </view>
  16. </view>
  17. </view>
  18. </template>
  19. <script>
  20. import {
  21. mapState
  22. } from 'vuex';
  23. export default {
  24. name: "sale",
  25. data() {
  26. return {
  27. titleNViewBackground: '',
  28. swiperCurrent: 0,
  29. swiperLength: 0,
  30. carouselList: [],
  31. windowSpuList: [],
  32. categoryPickList: [],
  33. categoryButtomList: [],
  34. salesTop: [],
  35. saleInfo: [],
  36. portInfo: [],
  37. banner: undefined,
  38. isVip: false,
  39. pages: 1, //页数
  40. limit: 10, //每次取条目数
  41. loadStatus: 'loading', //加载样式:more-加载前样式,loading-加载中样式,nomore-没有数据样式
  42. isLoadMore: false, //是否加载中
  43. showTran:true,
  44. list: [],
  45. scrollTop: 0,
  46. cardCur: 0,
  47. dotStyle: false,
  48. newsInfo: [],
  49. categoryList:[],
  50. pages:1,//页数
  51. limit:10 ,//每次取条目数
  52. loadStatus:'loading', //加载样式:more-加载前样式,loading-加载中样式,nomore-没有数据样式
  53. TabCur: 0,
  54. category:0,
  55. current: 0,
  56. infoList1:[]
  57. };
  58. },
  59. onReady() {
  60. },
  61. onShow() {
  62. uni.showTabBar()
  63. this.pages = 1
  64. this.isLoadMore = false
  65. this.loadStatus = 'more'
  66. this.loadData()
  67. },
  68. onLoad(options) {
  69. var that = this
  70. var infoList = [];
  71. uni.request({
  72. url: "https://hq.sinajs.cn/list=C0,C2109,C2111,C2201,C2203,C2205,C2207,A0,A2109,A2111,A2201,A2203,A2205,A2207",
  73. // url: "https://hq.sinajs.cn/list=C2109",
  74. header: {
  75. 'content-type': 'application/x-www-form-urlencoded'
  76. },
  77. success: function(result) {
  78. // resolve调用后,即可传递到调用方使用then或者async+await同步方式进行处理逻辑
  79. var tmp = result.data.split('"')
  80. for(var i = 1; i<tmp.length;i=i+2){
  81. var list = tmp[i].split(",")
  82. var data = {
  83. goodsName:list[0],
  84. newPrice:list[6],
  85. openPrice:list[2]
  86. }
  87. if(data.goodsName){
  88. infoList.push(data)
  89. }
  90. }
  91. let name = 'infoList';
  92. let value = infoList;
  93. that.$store.commit('$uStore', {
  94. name,
  95. value
  96. });
  97. // console.log("infoList",infoList)
  98. },
  99. fail: function(e) {
  100. console.log('error in...')
  101. // reject调用后,即可传递到调用方使用catch或者async+await同步方式进行处理逻辑
  102. reject(e)
  103. },
  104. })
  105. },
  106. onPageScroll(e) {
  107. this.scrollTop = e.scrollTop;
  108. },
  109. onReachBottom() { //上拉触底函数
  110. if (!this.isLoadMore) { //此处判断,上锁,防止重复请求
  111. this.isLoadMore = true
  112. this.pages += 1
  113. this.getIndexSaleData()
  114. }
  115. },
  116. onPullDownRefresh() {
  117. this.pages = 1
  118. this.isLoadMore = false
  119. this.loadStatus = 'loading'
  120. this.loadData()
  121. },
  122. computed: {
  123. ...mapState(['hasLogin', 'userInfo'])
  124. },
  125. methods: {
  126. DotStyle(e) {
  127. this.dotStyle = e.detail.value
  128. },
  129. cardSwiper(e) {
  130. this.cardCur = e.detail.current
  131. },
  132. hangqing() {
  133. uni.navigateTo({
  134. url: `/pageB/news/news`
  135. })
  136. },
  137. tabSelect(e) {
  138. this.TabCur = e.currentTarget.dataset.id;
  139. this.category = this.TabCur
  140. this.pages = 1
  141. this.loadData()
  142. },
  143. //回到顶部
  144. goTop(e) { // 一键回到顶部
  145. console.log(e)
  146. if (wx.pageScrollTo) {
  147. wx.pageScrollTo({
  148. scrollTop: 0
  149. })
  150. } else {
  151. wx.showModal({
  152. title: '提示',
  153. content: '当前微信版本过低,无法使用该功能,请升级到最新微信版本后重试。'
  154. })
  155. }
  156. },
  157. async loadData() {
  158. var that=this
  159. // 新闻内容
  160. that.$api.request('news', 'getNewsInfo',{
  161. category:2,
  162. page: this.pages,
  163. limit:this.limit
  164. }, failres => {
  165. that.$api.msg(failres.errmsg)
  166. this.isLoadMore = false
  167. this.loadStatus = 'nomore'
  168. if(this.pages>1){this.pages=1}
  169. uni.hideLoading()
  170. }).then(res => {
  171. let data = res.data
  172. that.newsInfo = data
  173. uni.hideLoading()
  174. })
  175. },
  176. //轮播图切换修改背景色
  177. swiperChange(e) {
  178. const index = e.detail.current;
  179. this.swiperCurrent = index;
  180. // this.titleNViewBackground = this.carouselList[index].color;
  181. },
  182. //详情
  183. navToDetailPage(item) {
  184. let id = item;
  185. uni.navigateTo({
  186. url: `/pageB/news/news_detail?id=${id}`
  187. })
  188. },
  189. naviageToPage(page) {
  190. uni.navigateTo({
  191. url: page,
  192. fail() {
  193. uni.switchTab({
  194. url: page
  195. })
  196. }
  197. })
  198. },
  199. getIndexSaleData() {
  200. // const that = this
  201. // var pages = that.pages
  202. // var limit = that.limit
  203. // uni.showLoading({
  204. // title: '正在加载'
  205. // })
  206. // that.$api.request('integral', 'getIndexSaleData', {
  207. // page: pages,
  208. // limit: limit
  209. // }, failres => {
  210. // that.$api.msg(failres.errmsg)
  211. // that.isLoadMore = false
  212. // that.loadStatus = 'nomore'
  213. // if (that.pages > 1) {
  214. // that.pages -= 1
  215. // }
  216. // uni.hideLoading()
  217. // }).then(res => {
  218. // let data = res.data
  219. // //销售信息
  220. // if (data.saleInfo.length > 0 ) {
  221. // that.saleInfo = that.saleInfo.concat(data.saleInfo)
  222. // that.isLoadMore = false
  223. // } else {
  224. // if (that.pages > 1) {
  225. // that.pages -= 1
  226. // }
  227. // that.isLoadMore = true
  228. // that.loadStatus = 'nomore'
  229. // }
  230. // if(data.saleInfo.length < that.limit){
  231. // if (that.pages > 1) {
  232. // that.pages -= 1
  233. // }
  234. // that.isLoadMore = true
  235. // that.loadStatus = 'nomore'
  236. // }
  237. // uni.hideLoading()
  238. // })
  239. const that = this
  240. var pages=that.pages
  241. var limit=that.limit
  242. uni.showLoading({
  243. title: '正在加载',
  244. mask:true
  245. })
  246. that.$api.request('news', 'getNewsInfo', {
  247. category:this.category,
  248. page: pages,
  249. limit:limit
  250. },failres => {
  251. that.$api.msg(failres.errmsg)
  252. that.isLoadMore=false
  253. that.loadStatus = 'nomore'
  254. if(that.pages>1){that.pages-=1}
  255. uni.hideLoading()
  256. }).then(res => {
  257. let data = res.data
  258. if(data.length > 0){
  259. for(var k =0;k<data.length;k++){
  260. data[k].gmtUpdate=formatDate(Date.parse(data[k].gmtUpdate))
  261. }
  262. that.newsInfo = that.newsInfo.concat(data)
  263. that.isLoadMore=false
  264. }
  265. else{
  266. if(that.pages>1){that.pages-=1}
  267. that.isLoadMore=true
  268. that.loadStatus = 'nomore'
  269. }
  270. uni.hideLoading()
  271. })
  272. }
  273. },
  274. // #ifndef MP
  275. // 标题栏input搜索框点击
  276. onNavigationBarSearchInputClicked: async function(e) {
  277. uni.navigateTo({
  278. url: '/pageA/product/search'
  279. })
  280. },
  281. //点击导航栏 buttons 时触发
  282. // onNavigationBarButtonTap(e) {
  283. // const index = e.index;
  284. // if (index === 0) {
  285. // this.$api.msg('点击了扫描');
  286. // } else if (index === 1) {
  287. // // #ifdef APP-PLUS
  288. // const pages = getCurrentPages();
  289. // const page = pages[pages.length - 1];
  290. // const currentWebview = page.$getAppWebview();
  291. // currentWebview.hideTitleNViewButtonRedDot({
  292. // index
  293. // });
  294. // // #endif
  295. // uni.navigateTo({
  296. // url: '/pages/notice/notice'
  297. // })
  298. // }
  299. // }
  300. // #endif
  301. }
  302. </script>
  303. <style>
  304. .price{
  305. color:#FD714F;
  306. }
  307. .container{
  308. margin: 10rpx 10rpx 10rpx 10rpx;
  309. }
  310. .cu-tag.badge {
  311. right: 26rpx;
  312. }
  313. .up,.down{
  314. width: 7.5px;
  315. height: 9px;
  316. position:relative;
  317. top:-2px;
  318. vertical-align: middle;
  319. margin-right: 2px;
  320. }
  321. .gird-left,.gird-right{
  322. }
  323. .cu-tag.radius[class*="line"]::after {
  324. border-radius: 66rpx;
  325. }
  326. .goTop{
  327. height: 32px;
  328. width: 32px;
  329. position: fixed;
  330. bottom: 200rpx;
  331. right: 30rpx;
  332. border-radius: 50%;
  333. }
  334. .goTop image{
  335. width:32px;
  336. height:32px;
  337. }
  338. .flex{
  339. display:flex;
  340. }
  341. .text-white{
  342. color:#fff;
  343. }
  344. .cu-card{
  345. border-bottom:1rpx solid #f8f8f8;
  346. text-align: center;
  347. }
  348. .factory{
  349. font-size:26rpx;
  350. font-weight:900;
  351. }
  352. .positive{
  353. color:#FD714F;
  354. font-size:26rpx;
  355. font-weight:900;
  356. }
  357. .negative{
  358. color:#22C572;
  359. font-size:26rpx;
  360. font-weight:900;
  361. }
  362. .wrap{
  363. font-size:20rpx;
  364. color: rgba(0,0,0,0.5);
  365. }
  366. .align-center{
  367. align-items: center;
  368. }
  369. .flex-direction-row{
  370. flex-direction:row;
  371. }
  372. .factoryItem{
  373. padding: 20rpx 0;
  374. }
  375. /* #ifdef MP */
  376. .mp-search-box {
  377. // position:relative;
  378. left: 0;
  379. top: 30upx;
  380. z-index: 9999;
  381. width: 100%;
  382. padding: 0 80upx;
  383. background: rgba(255, 170, 0, 0.6);
  384. .ser-input {
  385. flex: 1;
  386. height: 56upx;
  387. line-height: 56upx;
  388. text-align: center;
  389. font-size: 28upx;
  390. color: $font-color-base;
  391. border-radius: 10px;
  392. background: rgba(255, 255, 255, .6);
  393. }
  394. }
  395. .desc{
  396. width:73%;
  397. margin-right:2%;
  398. }
  399. .justify-between{
  400. justify-content: space-between;
  401. }
  402. page {
  403. .cate-section {
  404. position: relative;
  405. z-index: 5;
  406. border-radius: 16upx 16upx 0 0;
  407. margin-top: -20upx;
  408. }
  409. .carousel-section {
  410. padding: 0;
  411. .titleNview-placing {
  412. padding-top: 0;
  413. height: 0;
  414. }
  415. .carousel {
  416. .carousel-item {
  417. padding: 0;
  418. }
  419. }
  420. .swiper-dots {
  421. left: 50%;
  422. bottom: 5upx;
  423. transform: translateX(-50%);
  424. }
  425. }
  426. }
  427. /* #endif */
  428. .cuIcon-notification::before{
  429. color:#f37b1;
  430. }
  431. .cu-card.article>.cu-item .content>image {
  432. height: 3.4em;
  433. margin-right: 0rpx;
  434. margin-top: 24rpx;
  435. }
  436. .screen-swiper.price-swiper{
  437. height:70rpx;
  438. min-height: 70rpx;
  439. background: #fff;
  440. margin-bottom: 10px;
  441. }
  442. .swiper-item{
  443. border-radius: 5%;
  444. }
  445. .guess-section {
  446. margin-bottom: 120rpx;
  447. margin-top:20rpx;
  448. }
  449. .guess-section .price{
  450. color:#FD714F;
  451. font-size: 34rpx;
  452. font-weight:600;
  453. }
  454. page {
  455. background: #f5f5f5;
  456. }
  457. .m-t {
  458. margin-top: 16upx;
  459. }
  460. /* 销售信息 */
  461. .introduce-section {
  462. background: #fff;
  463. padding: 20upx 30upx;
  464. padding-bottom: 100upx;
  465. .guess-item {
  466. padding-bottom: 20upx;
  467. border-bottom: 1px solid #ccc;
  468. }
  469. .title {
  470. font-size: 28upx;
  471. color: $font-color-dark;
  472. font-weight:bold;
  473. height: 50upx;
  474. line-height: 50upx;
  475. flex:2.5;
  476. }
  477. .title-tip {
  478. flex:1;
  479. }
  480. .price-box {
  481. display: flex;
  482. align-items: baseline;
  483. height: 70upx;
  484. padding: 10upx 0;
  485. font-size: 26upx;
  486. color: $uni-color-primary;
  487. }
  488. .price {
  489. font-size: $font-lg + 2upx;
  490. }
  491. .m-price {
  492. margin: 0 12upx;
  493. color: $font-color-light;
  494. text-decoration: line-through;
  495. }
  496. .coupon-tip {
  497. align-items: center;
  498. padding: 4upx 10upx;
  499. background: $uni-color-primary;
  500. font-size: $font-sm;
  501. color: #fff;
  502. border-radius: 6upx;
  503. line-height: 1;
  504. transform: translateY(-4upx);
  505. }
  506. .bot-row {
  507. display: flex;
  508. align-items: center;
  509. height: 50upx;
  510. font-size: $font-sm;
  511. color: $font-color-light;
  512. view {
  513. flex: 1;
  514. }
  515. }
  516. }
  517. </style>