Skip to content

梁建民 / h5

Go to a project
Commit f18ba5b2 by 梁建民
Options

load

parent 37395c24
Expand all
Inline Side-by-side
Showing with 65 additions and 51 deletions
src/store/modules/wxlist/wxlist.js
......@@ -7,44 +7,58 @@ var qs = require('qs');
Vue.use(Toast);
const state = {
loading: false,
wechatArticle:{},
loadingup:false,
finished: false
loadStatus: false,
wechatArticle: {},
wechatArticleList: [],
finished: false,
limits: 1
}
const mutations = {
wechatArticle(state, payload) {
state.wechatArticle = payload.data;
state.wechatArticleList = state.wechatArticleList.concat(payload.data.list);
//计算总页码
state.limits = Math.ceil(payload.data.total / 4);
//判断数据是否加载完成
if (payload.page >= state.limits) {
state.finished = true;
}
}
}
const actions = {
wechatArticle({commit}, payload) {
state.loading = true;
//state.loadingup = true;
state.finished=true;
state.loadStatus = true;
var params = {
type_id:payload.type_id,
page:payload.page,
limit:payload.limit
type_id: payload.type_id,
page: payload.page,
limit: payload.limit
}
Services.wechatArticle(qs.stringify(params)).then((res) => {
let data = res.data;
state.loading = false;
state.loadingup = false;
state.finished=false;
state.loadStatus = false;
if (data.err_code == 0) {
commit({
type: 'wechatArticle',
data: data.data
data: data.data,
page: payload.page,
limit: payload.limit
});
} else {
Toast({
message: data.err_msg,
duration: 20000
});
}
}).catch(function (err) {
state.loading = false;
state.loadingup = false;
state.loadStatus = false;
});
}
}
......
src/views/wxlist/Index.vue
<template>
<section class="wxlist">
<Header ></Header>
<Header></Header>
<div class="wxlist-content">
<div class="menu-title">{{wechatArticle.menu}}</div>
<div class="wxlist-banner" v-if="wechatArticle.top">
<div class="banner-box">
<div class="banner-header clr">
<div class="banner-img fl"><img src="../../assets/images/wxlist/logo2.png" /></div>
<div class="banner-img fl"><img src="../../assets/images/wxlist/logo2.png"/></div>
<div class="banner-title fl">猎芯网</div>
</div>
<div class="banner-body">
<a :href="wechatArticle.top.url | urlPatg('wechatlist')"><img :alt="wechatArticle.top.title" :src="wechatArticle.top.img" /></a>
<a :href="wechatArticle.top.url | urlPatg('wechatlist')"><img :alt="wechatArticle.top.title" :src="wechatArticle.top.img"/></a>
</div>
<div class="banner-footer">
<a :href="wechatArticle.top.url | urlPatg('wechatlist')"><span>活动&nbsp;|&nbsp;</span>{{wechatArticle.top.title}}</a>
......@@ -18,19 +18,17 @@
</div>
</div>
<div class="wxlist-data">
<pre>{{loadingup}}</pre>
<div class="wxlist-data-box">
<van-list v-model="loadingup" :finished="finished" finished-text="没有更多了" @load="onLoad">
<div class="data-group clr" v-for="(item,index) in wechatArticle.list" :key="index" >
<van-list v-model="loading" :loading="loadStatus" :finished="finished" finished-text="没有更多了" @load="onLoad">
<div class="data-group clr" v-for="(item,index) in wechatArticleList" :key="index">
<a :href="item.url | urlPatg('wechatlist')">
<div class="group-left fl">
{{item.title}}
</div>
<img :src="item.img" class="group-right fr" />
<img :src="item.img" class="group-right fr"/>
</a>
</div>
</van-list>
</div>
</div>
</div>
......@@ -41,7 +39,7 @@
import Vue from 'vue';
import {mapState} from 'vuex'
import {List,Loading} from 'vant';
import {List, Loading} from 'vant';
import Header from '@/views/common/Header.vue';
Vue.use(List).use(Loading);
......@@ -50,38 +48,42 @@
name: 'wxlist',
data() {
return {
page:0,
limit:4
//控制在页面往下移动到底部时是否调用接口获取数据
page: 0,
limit: 4,
loading: false
}
},
computed: mapState({
computed: {
...mapState({
wechatArticle: state => state.wxlist.wechatArticle,
loading: state => state.wxlist.loading,
loadingup:state => state.wxlist.loadingup,
finished:state => state.wxlist.finished
}),
watch: {
wechatArticleList: state => state.wxlist.wechatArticleList,
limits: state => state.wxlist.limits,
loadStatus: state => state.wxlist.loadStatus,
finished: state => state.wxlist.finished
})
},
created(){
//sssssss
this.getData(this.$route.query.type_id);
created() {
},
methods: {
getData(type_id){
getData(type_id) {
this.$store.dispatch({
type: 'wechatArticle',
type_id:type_id,
page:this.page,
limit:this.limit
type_id: type_id,
page: this.page,
limit: this.limit
})
},
onLoad(){
setTimeout(()=>{
onLoad() {
setTimeout(() => {
if (!this.loadStatus) {
this.loading = false;
if (this.page < this.limits) {
this.page++;
this.getData(this.$route.query.type_id)
},100)
this.getData(this.$route.query.type_id);
}
}
}, 800)
}
},
components: {
......
view/index.html
<!DOCTYPE HTML><html lang=zh-CN><head><title></title><meta name=author content=www.ichunt.com><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,user-scalable=no,minimal-ui"><meta http-equiv=Content-Type content="text/html;charset=utf-8"><meta name=apple-mobile-web-app-capable content=yes><meta name=apple-mobile-web-app-status-bar-style content=black><meta name=format-detection content="telephone=no"><meta http-equiv=Expires content=-1><meta http-equiv=Cache-Control content=no-cache><meta http-equiv=Pragma content=no-cache><meta name=full-screen content=yes><meta name=browsermode content=application><meta name=x5-fullscreen content=true><meta name=x5-page-mode content=app><meta name=description content=猎芯网,快速成长的专业电子元器件商城,贸泽(MOUSER)全系产品、e络盟(element14)树莓派系列产品授权经销商,已获得多轮风险投资。为客户提供电子元器件现货,IC采购,进口报关，电子元器件寄售，供应链金融等一站式电子元器件采购服务。><meta name=keywords content=猎芯网,电子元器件采购,电子元器件商城,电子元器件现货,IC采购网,电子元器件寄售,电子元件,元器件商城,元器件采购,电子商城,><link rel=icon href=//h5static.ichunt.com/favicon.ico><link rel=stylesheet href=/v3/dist/res/m/css/font/iconfont.css><script src=/h5/view/get_time.php></script><script>var fwtimes = window.fwtime - (Math.floor((new Date().getTime()) / 1000)); //获取服务器时间差</script><script src=https://res.wx.qq.com/open/js/jweixin-1.3.2.js charset=utf-8></script><script src=//h5static.ichunt.com/static/js/flexible.min.js charset=utf-8></script><script src=//h5static.ichunt.com/static/js/shence.min.js charset=utf-8></script><link href=//h5static.ichunt.com/css/chunk-383c5e1e.d7e46390.css rel=prefetch><link href=//h5static.ichunt.com/css/chunk-406d08fd.43c91bcb.css rel=prefetch><link href=//h5static.ichunt.com/css/chunk-7dbd3ca4.7fc76ae3.css rel=prefetch><link href=//h5static.ichunt.com/css/chunk-d0644cb4.e5216386.css rel=prefetch><link href=//h5static.ichunt.com/js/chunk-383c5e1e.cf0033d8.js rel=prefetch><link href=//h5static.ichunt.com/js/chunk-406d08fd.59ea6d2b.js rel=prefetch><link href=//h5static.ichunt.com/js/chunk-7dbd3ca4.170499b8.js rel=prefetch><link href=//h5static.ichunt.com/js/chunk-d0644cb4.d3b6c9c8.js rel=prefetch><link href=//h5static.ichunt.com/css/app.adc8e432.css rel=preload as=style><link href=//h5static.ichunt.com/css/chunk-vendors.59ded326.css rel=preload as=style><link href=//h5static.ichunt.com/js/app.4769dfcb.js rel=preload as=script><link href=//h5static.ichunt.com/js/chunk-vendors.1b4108eb.js rel=preload as=script><link href=//h5static.ichunt.com/css/chunk-vendors.59ded326.css rel=stylesheet><link href=//h5static.ichunt.com/css/app.adc8e432.css rel=stylesheet></head><body class=boxsiz><noscript><strong>网站出现了一点小问题，正在紧急修复中.......</strong></noscript><div id=app></div><script>function SetCookie(name, value, time, domain) {
<!DOCTYPE HTML><html lang=zh-CN><head><title></title><meta name=author content=www.ichunt.com><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,user-scalable=no,minimal-ui"><meta http-equiv=Content-Type content="text/html;charset=utf-8"><meta name=apple-mobile-web-app-capable content=yes><meta name=apple-mobile-web-app-status-bar-style content=black><meta name=format-detection content="telephone=no"><meta http-equiv=Expires content=-1><meta http-equiv=Cache-Control content=no-cache><meta http-equiv=Pragma content=no-cache><meta name=full-screen content=yes><meta name=browsermode content=application><meta name=x5-fullscreen content=true><meta name=x5-page-mode content=app><meta name=description content=猎芯网,快速成长的专业电子元器件商城,贸泽(MOUSER)全系产品、e络盟(element14)树莓派系列产品授权经销商,已获得多轮风险投资。为客户提供电子元器件现货,IC采购,进口报关，电子元器件寄售，供应链金融等一站式电子元器件采购服务。><meta name=keywords content=猎芯网,电子元器件采购,电子元器件商城,电子元器件现货,IC采购网,电子元器件寄售,电子元件,元器件商城,元器件采购,电子商城,><link rel=icon href=//h5static.ichunt.com/favicon.ico><link rel=stylesheet href=/v3/dist/res/m/css/font/iconfont.css><script src=/h5/view/get_time.php></script><script>var fwtimes = window.fwtime - (Math.floor((new Date().getTime()) / 1000)); //获取服务器时间差</script><script src=https://res.wx.qq.com/open/js/jweixin-1.3.2.js charset=utf-8></script><script src=//h5static.ichunt.com/static/js/flexible.min.js charset=utf-8></script><script src=//h5static.ichunt.com/static/js/shence.min.js charset=utf-8></script><link href=//h5static.ichunt.com/css/chunk-1144b73a.43c91bcb.css rel=prefetch><link href=//h5static.ichunt.com/css/chunk-37ba70a3.d7e46390.css rel=prefetch><link href=//h5static.ichunt.com/css/chunk-5498eef5.e5216386.css rel=prefetch><link href=//h5static.ichunt.com/css/chunk-682cf93e.fb3a1b2a.css rel=prefetch><link href=//h5static.ichunt.com/js/chunk-1144b73a.ea7151f2.js rel=prefetch><link href=//h5static.ichunt.com/js/chunk-37ba70a3.920bbbbd.js rel=prefetch><link href=//h5static.ichunt.com/js/chunk-5498eef5.a53bcd31.js rel=prefetch><link href=//h5static.ichunt.com/js/chunk-682cf93e.66494e24.js rel=prefetch><link href=//h5static.ichunt.com/css/app.adc8e432.css rel=preload as=style><link href=//h5static.ichunt.com/css/chunk-vendors.fa7e75a9.css rel=preload as=style><link href=//h5static.ichunt.com/js/app.f1672d98.js rel=preload as=script><link href=//h5static.ichunt.com/js/chunk-vendors.e68ea566.js rel=preload as=script><link href=//h5static.ichunt.com/css/chunk-vendors.fa7e75a9.css rel=stylesheet><link href=//h5static.ichunt.com/css/app.adc8e432.css rel=stylesheet></head><body class=boxsiz><noscript><strong>网站出现了一点小问题，正在紧急修复中.......</strong></noscript><div id=app></div><script>function SetCookie(name, value, time, domain) {
domain = domain ? ";domain=" + domain : "";
var Days = time;
var exp = new Date();
......@@ -224,4 +224,4 @@
user_rank: '0'
});
sensors.quick('autoTrack');
}</script><script src=//h5static.ichunt.com/js/chunk-vendors.1b4108eb.js></script><script src=//h5static.ichunt.com/js/app.4769dfcb.js></script></body></html>
\ No newline at end of file
}</script><script src=//h5static.ichunt.com/js/chunk-vendors.e68ea566.js></script><script src=//h5static.ichunt.com/js/app.f1672d98.js></script></body></html>
\ No newline at end of file
view/js/chunk-7dbd3ca4.170499b8.js deleted 100644 → 0
(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-7dbd3ca4"],{2259:function(t,a,i){},"3b79":function(t,a,i){"use strict";var e=i("2259"),n=i.n(e);n.a},"4f52":function(t,a,i){},5710:function(t,a,i){},7272:function(t,a,i){"use strict";var e=function(){var t=this,a=t.$createElement,i=t._self._c||a;return i("div",[t.flag?i("div",{staticClass:"menu-fade",on:{click:function(a){t.flag=!1}}}):t._e(),i("div",{staticClass:"menu clr"},[i("b",{staticClass:"iconfont icon-liedanbiao fr",style:{color:t.color},on:{click:function(a){t.flag=!t.flag}}}),t.flag?i("div",[i("i",{staticClass:"popover-arrow"}),t._m(0)]):t._e()])])},n=[function(){var t=this,a=t.$createElement,i=t._self._c||a;return i("ul",{staticClass:"menu-view"},[i("li",[i("a",{attrs:{href:"/v3?ptag=selfshop-topnav"}},[i("i",{staticClass:"icon iconfont icon-shouye"}),t._v("首页")])]),i("li",[i("a",{attrs:{href:"/v3/lxshop?ptag=selfshop-topnav"}},[i("i",{staticClass:"icon iconfont icon-lianying"}),t._v("联营商城")])]),i("li",[i("a",{attrs:{href:"/v3/xianhuo?ptag=selfshop-topnav"}},[i("i",{staticClass:"icon iconfont icon-liexinziying"}),t._v("自营现货")])]),i("li",[i("a",{attrs:{href:"/v3/brand/map?ptag=selfshop-topnav"}},[i("i",{staticClass:"icon iconfont icon-pinpai"}),t._v("品牌之家")])]),i("li",{staticClass:"mui-table-view-cell "},[i("a",{staticClass:"zytabgo",attrs:{href:"/v3/joincart?ptag=selfshop-topnav"}},[i("i",{staticClass:"icon iconfont icon-gouwuche1"}),t._v("购物车")])]),i("li",[i("a",{attrs:{href:"/v3/user?ptag=selfshop-topnav"}},[i("i",{staticClass:"icon iconfont icon-huiyuanzhongxin"}),t._v("会员中心")])])])}],s={name:"menus",props:{color:{type:String,default:"#666"}},data:function(){return{flag:!1}}},c=s,l=(i("3b79"),i("8c9c")),o=Object(l["a"])(c,e,n,!1,null,null,null);a["a"]=o.exports},"9f93":function(t,a,i){"use strict";var e=i("5710"),n=i.n(e);n.a},bd04:function(t,a,i){"use strict";i.r(a);var e=function(){var t=this,a=t.$createElement,i=t._self._c||a;return i("section",{staticClass:"wxlist"},[i("Header"),i("div",{staticClass:"wxlist-content"},[i("div",{staticClass:"menu-title"},[t._v(t._s(t.wechatArticle.menu))]),t.wechatArticle.top?i("div",{staticClass:"wxlist-banner"},[i("div",{staticClass:"banner-box"},[t._m(0),i("div",{staticClass:"banner-body"},[i("a",{attrs:{href:t._f("urlPatg")(t.wechatArticle.top.url,"wechatlist")}},[i("img",{attrs:{alt:t.wechatArticle.top.title,src:t.wechatArticle.top.img}})])]),i("div",{staticClass:"banner-footer"},[i("a",{attrs:{href:t._f("urlPatg")(t.wechatArticle.top.url,"wechatlist")}},[i("span",[t._v("活动 | ")]),t._v(t._s(t.wechatArticle.top.title))])])])]):t._e(),i("div",{staticClass:"wxlist-data"},[i("pre",[t._v(t._s(t.loadingup))]),i("div",{staticClass:"wxlist-data-box"},[i("van-list",{attrs:{finished:t.finished,"finished-text":"没有更多了"},on:{load:t.onLoad},model:{value:t.loadingup,callback:function(a){t.loadingup=a},expression:"loadingup"}},t._l(t.wechatArticle.list,function(a,e){return i("div",{key:e,staticClass:"data-group clr"},[i("a",{attrs:{href:t._f("urlPatg")(a.url,"wechatlist")}},[i("div",{staticClass:"group-left fl"},[t._v("\n "+t._s(a.title)+"\n ")]),i("img",{staticClass:"group-right fr",attrs:{src:a.img}})])])}),0)],1)])])],1)},n=[function(){var t=this,a=t.$createElement,e=t._self._c||a;return e("div",{staticClass:"banner-header clr"},[e("div",{staticClass:"banner-img fl"},[e("img",{attrs:{src:i("defc")}})]),e("div",{staticClass:"banner-title fl"},[t._v("猎芯网")])])}],s=i("8973"),c=i("52c1"),l=i("5101"),o=function(){var t=this,a=t.$createElement,i=t._self._c||a;return i("section",[i("div",{staticClass:"header-page clr"},[i("i",{staticClass:"icon iconfont icon-xiangzuo fl"}),i("h3",{staticClass:"title fl"},[t._v(t._s(t.title))]),t.meaushow?i("Menu",{attrs:{color:t.color}}):t._e()],1)])},r=[],u=i("7272"),f={name:"header-page",props:{color:{type:String,default:""},title:{type:String,default:"猎芯网"},meaushow:{type:Boolean,default:!1}},data:function(){return{}},mounted:function(){},methods:{},components:{Menu:u["a"]}},d=f,p=(i("9f93"),i("8c9c")),h=Object(p["a"])(d,o,r,!1,null,null,null),v=h.exports;s["a"].use(l["c"]).use(l["d"]);var g={name:"wxlist",data:function(){return{page:0,limit:4}},computed:Object(c["b"])({wechatArticle:function(t){return t.wxlist.wechatArticle},loading:function(t){return t.wxlist.loading},loadingup:function(t){return t.wxlist.loadingup},finished:function(t){return t.wxlist.finished}}),watch:{},created:function(){this.getData(this.$route.query.type_id)},methods:{getData:function(t){this.$store.dispatch({type:"wechatArticle",type_id:t,page:this.page,limit:this.limit})},onLoad:function(){var t=this;setTimeout(function(){t.page++,t.getData(t.$route.query.type_id)},100)}},components:{Header:v}},_=g,m=(i("d34a"),Object(p["a"])(_,e,n,!1,null,"b554d940",null));a["default"]=m.exports},d34a:function(t,a,i){"use strict";var e=i("4f52"),n=i.n(e);n.a},defc:function(t,a,i){t.exports=i.p+"img/logo2.19d260fd.png"}}]);
\ No newline at end of file
view/js/chunk-vendors.1b4108eb.js deleted 100644 → 0
This diff could not be displayed because it is too large.
view/js/chunk-vendors.e68ea566.js 0 → 100644
This diff could not be displayed because it is too large.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment