/*设置代理,避免出现跨域问题*/
proxyTable: {'/api':{target: 'https://www.oschina.net/action/apiv2/',changeOrigin: true,pathRewrite: {'^/api': ''}}
},

/*** 引入 异步请求API*/
import "whatwg-fetch"const host_addr='http://192.168.1.110:8081/'/*** 获取资讯列表* 解决跨域问题: 用 '/api' 代替 host_addr*/
export let getList = async (page, tag) => {let response = await fetch('/api' + `news_list?pageIndex=${page}&pageSize=20&catalog=${tag}`, {method: 'GET',mode: 'cors'}).catch((error) => {console.log(error)})return await response.json().catch((error) => {console.log(error)})
}/*** 获取资讯详情*/
export let getNewsDetail = async (id) => {let response = await fetch('/api' + `news_detail?id=${id}`, {method: 'GET',mode: 'cors'}).catch((error) => {console.log(error)})return await response.json().catch((error) => {console.log(error)})
}/*** 获取博客列表*/
export let getBlogList = async (page, tag) => {let response = await fetch(host_addr + `blog_list?pageIndex=${page}&pageSize=20&catalog=${tag}`, {method: 'GET',mode: 'cors'}).catch((error) => {console.log(error)})return await response.json().catch((error) => {console.log(error)})
}/*** 获取问答列表*/
export let getQuestionList = async (page, tag) => {let response = await fetch(host_addr + `question_list?pageIndex=${page}&pageSize=20&catalog=${tag}`, {method: 'GET',mode: 'cors'}).catch((error) => {console.log(error)})return await response.json().catch((error) => {console.log(error)})
}/*** 获取活动列表*/
export let getEventList = async (page, tag) => {let response = await fetch(host_addr + `event_list?pageIndex=${page}&pageSize=20&catalog=${tag}`, {method: 'GET',mode: 'cors'}).catch((error) => {console.log(error)})return await response.json().catch((error) => {console.log(error)})
}

<!-- 资讯 -->
<template><div><!-- 轮播图 --><swiper :list="imgs" auto style="width:100%;height:120px;margin:0 auto;" dots-class="custom-bottom" dots-position="center"></swiper><!-- 滚动列表 --><div><scroller lock-x scrollbar-y :height="height" :bounce=false :scrollbarY="false" ref="scroller"><div class="news-wrap-list"><cell v-for="x in Objlist" :title="x.title" :link="{path:'/newsDetail',query:{id:x.id,tag:'资讯'}}" :inline-desc="x.body" :key="x.id"><img class="ic_img" slot="icon" src="../../assets/img/ic_label_today.png"><div><span class="pubdate">{{x.pub_date}}</span></div></cell></div></scroller></div></div>
</template><script>// 引入 vux 内部组件import { Swiper, Scroller, Cell } from 'vux'// 引入 api接口文档import { getList } from '../../api/index.js'// 轮播图列表const imgList = ['http://file06.16sucai.com/2016/0222/17714c3b51079911760e5ef7fdb553f6.jpg','http://pic.58pic.com/58pic/15/67/98/93C58PICjeM_1024.jpg','http://file06.16sucai.com/2016/0315/1df566087c24a94cd9534bc9bc1871ff.jpg'];// 轮播图图片地址列表const urlList = imgList.map((one, index) => ({url: 'javascript:',  //这里填写图片点击的链接img: one}));export default {name: 'NewsList',components:{Swiper,Scroller,Cell},data(){return {imgs:urlList,Objlist:[],ishow:false,pageIndex:1,catalog:0,height: ''}},created(){// 获取屏幕高度this.height = document.documentElement.clientHeight - 46 - 44 - 120 - 53 + 'px';console.log(this.height);// 请求列表数据this.getList();},methods:{// 异步请求async getList(){// 获取列表数据let data = await getList(this.pageIndex, this.catalog);console.log(data);// 获取资讯列表数据var news_list = data.obj_list;// 判断是否还有数据if(news_list.length > 0){this.ishow = true;for(var i=0;i<news_list.length;i++){var time = news_list[i].pub_date;// 修改日期显示格式var bngDate = new Date(time.replace(/-/g,"/"));var endDate = new Date();var minutes = (endDate.getTime() - bngDate.getTime())/60/1000;// 时间段 判断pub_date显示内容if(minutes >= 60){minutes = minutes/60;var dateTime = parseInt(minutes);if(dateTime >= 48){news_list[i].pub_date = "2天前";}else if(dateTime >= 24){news_list[i].pub_date = "昨天";}else{news_list[i].pub_date = dateTime + "小时以前";}}else{var minute = parseInt(minutes);news_list[i].pub_date = minute + "分钟以前";}news_list[i].title = "  " + news_list[i].title;this.Objlist.push(news_list[i]);}}this.locked = false;this.loading = false;},load(uuid){setTimeout(() => {this.$broadcast('pulldown:reset', uuid);}, 1000);}}}
</script><style lang="less" scoped>.ic_img{position:absolute; top:10px; left: 5px;width:15px;height:15px;}.weui_cell_bd>p{font-size:15px;}.vux-label-desc{padding-right:15px;}.weui_cell_bd.weui_cell_primary{padding-left:5px;}.news-wrap-list {height: 2800px;overflow: hidden;}.pubdate{font-size:5px;}
</style>

<!-- 资讯详情页 -->
<template><div><tabbar class="tabbar"><div class="title">{{title}}</div><tabbar-item class="search"></tabbar-item></tabbar><h3 class="htitle">{{result.title}}</h3><scroller  lock-x scrollbar-y :height="height" :bounce=false :scrollbarY="false" ref="scroller"><div id="content" class="contentDiv"></div></scroller></div>
</template><script>import { Tabbar,TabbarItem,Scroller} from 'vux'import { getNewsDetail } from '../../api/index.js'// 引入 jqueryimport "jquery"var $ = require('jquery');window.$ = $;export default{name:'NewsDetail',data () {return {title: '',result:'',body: '',height: ''}},components:{Tabbar,TabbarItem,Scroller},created () {// 获取屏幕高度this.height = document.documentElement.clientHeight - 50 - 100 - 53 + 'px';console.log(this.$route.query);this.title = this.$route.query.tag;this.getDetail();},methods:{// 获取消息id,根据id到服务端请求详情async getDetail() {let data = await getNewsDetail(this.$route.query.id);console.log(data);if(data.code >= 0){this.result = data.obj_data;this.body = data.obj_data.body;$(".contentDiv").html(this.body);//获取div高度，根据该高度设定滑动区域，避免footer位置变化var contentHeight=$(".contentDiv").height() + 50;document.getElementById("content").style.height = contentHeight + "px";this.$nextTick(() => {this.$refs.scroller.reset();});}}}}
</script><style lang="less" scoped>.tabbar{background-color:#00CC66;height:50px;position:relative;}.search{position:absolute;right:5px;top:5px;z-index:999;}.title{text-align:center;margin:auto;color:white;line-height:50px;font-size:18px;}.htitle{text-align:center;margin:auto;color:black;line-height:50px;height: 100px;}
</style>