w-front-end / select_good · Commits

Commit 1ef8b16fe77f7df3d5ff270baf0712cf9c1bafb7

Authored by zhiyangdu
1 parent c9268baa

页面显示刷新列表接口

Inline Side-by-side
Showing 1 changed file with 257 additions and 244 deletions
src/pages/fansShopMessageList/fansShopMessageList.vue
  View file @1ef8b16
1 <template> 1 <template>
2 - <div class="fans-shop-message-list-box">  
3 -  
4 - <!-- nav -->  
5 - <back-box :style="'padding-top: ' + ($parent.top.value) + 'px'" @back="back"  
6 - :backs="backs">  
7 - </back-box>  
8 -  
9 - <!-- 下拉刷新 -->  
10 - <!-- <van-pull-refresh v-model="isLoading" pulling-text="下拉刷新..." loosing-text="释放刷新" loading-text="加载中..." success-text="刷新成功" @refresh="onRefresh"> -->  
11 -  
12 - <!-- 关注达人列表 -->  
13 - <div class="item_box">  
14 - <div v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" :infinite-scroll-distance="list.length">  
15 -  
16 - <!-- 达人列表组件 -->  
17 - <dresserList @toDetail="toDetail"  
18 - :dresserList="list">  
19 - </dresserList>  
20 - </div>  
21 - </div>  
22 - <!-- </van-pull-refresh> --> 2 + <div class="fans-shop-message-list-box">
  3 +
  4 + <!-- nav -->
  5 + <back-box :style="'padding-top: ' + ($parent.top.value) + 'px'"
  6 + @back="back"
  7 + :backs="backs">
  8 + </back-box>
  9 +
  10 + <!-- 下拉刷新 -->
  11 + <!-- <van-pull-refresh v-model="isLoading" pulling-text="下拉刷新..." loosing-text="释放刷新" loading-text="加载中..." success-text="刷新成功" @refresh="onRefresh"> -->
  12 +
  13 + <!-- 关注达人列表 -->
  14 + <div class="item_box">
  15 + <div v-infinite-scroll="loadMore"
  16 + infinite-scroll-disabled="loading"
  17 + :infinite-scroll-distance="list.length">
  18 +
  19 + <!-- 达人列表组件 -->
  20 + <dresserList @toDetail="toDetail"
  21 + :dresserList="list">
  22 + </dresserList>
  23 + </div>
23 </div> 24 </div>
  25 + <!-- </van-pull-refresh> -->
  26 + </div>
24 </template> 27 </template>
25 28
26 <script> 29 <script>
27 - // 引入组件  
28 - import { Toast, Indicator } from 'mint-ui';  
29 - import backBox from "@/components/backBox/backBox";  
30 - import dresserList from "@/components/dresserList/dresserList";  
31 -  
32 - export default {  
33 - name: 'fansShopMessageList',  
34 - data() {  
35 - return {  
36 - title: "",  
37 - backs: null, // nav导航条数据  
38 - isLoading: false, // 下拉刷新控制  
39 - list: [], // 达人列表  
40 - loading: false // 上拉加载控制  
41 - }  
42 - },  
43 - components: {  
44 - backBox,  
45 - dresserList  
46 - },  
47 - created() {  
48 -  
49 - // 设置标题  
50 - this.$set(this, "title", "关注达人列表");  
51 -  
52 - // nav导航条数据  
53 - this.$set(this, 'backs', {  
54 - title: this.title,  
55 - funcs: {  
56 - back: {  
57 - icon: "static/img/icon_back.png"  
58 - }  
59 - }  
60 - });  
61 -  
62 - // 获取关注人列表  
63 - // this.fansShopMessageList();  
64 -  
65 - // 获取关注人列表2  
66 - this.fansShopList();  
67 - },  
68 - methods: {  
69 -  
70 - // 下拉刷新  
71 - // onRefresh() {  
72 -  
73 - // // 下拉刷新中  
74 - // this.$set(this, "isLoading", true);  
75 -  
76 - // // 获取关注人列表  
77 - // this.fansShopMessageList();  
78 - // },  
79 -  
80 - /**  
81 - * 已关注达人列表  
82 - */  
83 - fansShopMessageList () {  
84 -  
85 - // 校验登录  
86 - if (this.$parent.checkLogin()) {  
87 -  
88 - // 加载中提示  
89 - Indicator.open('加载中...');  
90 -  
91 - // 请求接口  
92 - this.http("/Api/" + this.getApiVersion().dynamic + "/fansShopMessageList", {  
93 - uid: this.getStore("uid")  
94 - }, this.fansShopMessageListCallback, {  
95 - method: "POST"  
96 - });  
97 - }  
98 - },  
99 -  
100 - /**  
101 - * 已关注达人列表回调  
102 - * @param {object} res [服务器返回数据]  
103 - * @param {object} ext [扩展参数]  
104 - */  
105 - fansShopMessageListCallback(res, ext) {  
106 -  
107 - // 加载完成  
108 - Indicator.close();  
109 -  
110 - // 下拉刷新结束  
111 - this.$set(this, "isLoading", false);  
112 -  
113 - // 返回处理  
114 - if (res.code == 200) {  
115 -  
116 - // 解构数据  
117 - let {data: datas} = res;  
118 -  
119 - /* 获取列表数据 开始 */  
120 -  
121 - // 设置标题  
122 - this.$set(this, "list", datas.list);  
123 -  
124 - /* 获取列表数据 结束 */  
125 -  
126 - }  
127 - },  
128 -  
129 - /**  
130 - * 已关注达人列表2  
131 - */  
132 - fansShopList () {  
133 -  
134 - // 校验登录  
135 - if (this.$parent.checkLogin()) {  
136 -  
137 - // 加载中提示  
138 - Indicator.open('加载中...');  
139 -  
140 - // 请求接口  
141 - this.http("/Api/" + this.getApiVersion().dynamic + "/fansShopList", {  
142 - uid: this.getStore("uid")  
143 - }, this.fansShopListCallback, {  
144 - method: "POST"  
145 - });  
146 - }  
147 - },  
148 -  
149 - /**  
150 - * 已关注达人列表2回调  
151 - * @param {object} res [服务器返回数据]  
152 - * @param {object} ext [扩展参数]  
153 - */  
154 - fansShopListCallback(res, ext) {  
155 -  
156 - // 加载完成  
157 - Indicator.close();  
158 -  
159 - // 下拉刷新结束  
160 - this.$set(this, "isLoading", false);  
161 -  
162 - // 返回处理  
163 - if (res.code == 200) {  
164 -  
165 - // 解构数据  
166 - let {data: datas} = res;  
167 -  
168 - /* 获取列表数据 开始 */  
169 -  
170 - // 设置标题  
171 - this.$set(this, "list", datas.list);  
172 -  
173 - /* 获取列表数据 结束 */  
174 -  
175 - }  
176 - },  
177 -  
178 - /**  
179 - * 上拉加载  
180 - */  
181 - loadMore() {  
182 - // this.loading = true;  
183 - // setTimeout(() => {  
184 - // let last = this.list[this.list.length - 1];  
185 - // for (let i = 1; i <= 10; i++) {  
186 - // this.list.push(last + i);  
187 - // }  
188 - // this.loading = false;  
189 - // }, 2500);  
190 - },  
191 -  
192 - /**  
193 - * 通用跳转  
194 - * @param {object} item [数据对象]  
195 - */  
196 - toDetail(item) {  
197 -  
198 - // 判断并调用通用跳转  
199 - if (typeof this.$parent.gotoDetail === "function") {  
200 -  
201 - // 设置跳转达人个人主页用户数据  
202 - Object.assign(item, {  
203 - type: "5",  
204 - to: (this.mode == "prod") ?  
205 - "https://managemall.cnlive.com/html/preferred-library/1/#/pages/darenProfile/darenProfile?from=redirect" + "&id=" + (item.user_id) + (this.getStore("uid") ? "&uid=" + this.getStore("uid") : "") :  
206 - "https://wjjshop.cnlive.com/html/preferred-library/1/#/pages/darenProfile/darenProfile?from=redirect"+ "&id=" + (item.user_id) + (this.getStore("uid") ? "&uid=" + this.getStore("uid") : ""),  
207 - shop_type: ""  
208 - });  
209 -  
210 - // 调用通用跳转  
211 - this.$parent.gotoDetail(item);  
212 - }  
213 - },  
214 -  
215 - /**  
216 - * 后退  
217 - */  
218 - back() {  
219 -  
220 - // 判断是否有后退函数  
221 - if (typeof this.$parent.back === "function") {  
222 -  
223 - // 调用后退  
224 - this.$parent.back();  
225 - } else {  
226 -  
227 - // 后退  
228 - window.history.go(-1);  
229 - }  
230 - }  
231 - },  
232 - head: {  
233 - title () {  
234 - return {  
235 - inner: this.title  
236 - }  
237 - }  
238 - },  
239 - watch: {  
240 -  
241 - // 设置页面标题  
242 - title(newVal) {  
243 - if (this.$store.state.browser.toLowerCase() == "qq" && this.$store.state.deviceType.toLowerCase() == "iphone") {  
244 - this.$iFrame.insertIFrame(newVal);  
245 - } else {  
246 - this.$emit("updateHead");  
247 - }  
248 - } 30 +// 引入组件
  31 +import { Toast, Indicator } from 'mint-ui';
  32 +import backBox from "@/components/backBox/backBox";
  33 +import dresserList from "@/components/dresserList/dresserList";
  34 +
  35 +export default {
  36 + name: 'fansShopMessageList',
  37 + data () {
  38 + return {
  39 + title: "",
  40 + backs: null, // nav导航条数据
  41 + isLoading: false, // 下拉刷新控制
  42 + list: [], // 达人列表
  43 + loading: false // 上拉加载控制
  44 + }
  45 + },
  46 + components: {
  47 + backBox,
  48 + dresserList
  49 + },
  50 + created () {
  51 +
  52 + // 设置标题
  53 + this.$set(this, "title", "关注达人列表");
  54 +
  55 + // nav导航条数据
  56 + this.$set(this, 'backs', {
  57 + title: this.title,
  58 + funcs: {
  59 + back: {
  60 + icon: "static/img/icon_back.png"
249 } 61 }
  62 + }
  63 + });
  64 +
  65 + // 获取关注人列表
  66 + // this.fansShopMessageList();
  67 +
  68 + // 获取关注人列表2
  69 + this.fansShopList();
  70 + },
  71 + methods: {
  72 +
  73 + // 下拉刷新
  74 + // onRefresh() {
  75 +
  76 + // // 下拉刷新中
  77 + // this.$set(this, "isLoading", true);
  78 +
  79 + // // 获取关注人列表
  80 + // this.fansShopMessageList();
  81 + // },
  82 +
  83 + /**
  84 + * 已关注达人列表
  85 + */
  86 + fansShopMessageList () {
  87 +
  88 + // 校验登录
  89 + if (this.$parent.checkLogin()) {
  90 +
  91 + // 加载中提示
  92 + Indicator.open('加载中...');
  93 +
  94 + // 请求接口
  95 + this.http("/Api/" + this.getApiVersion().dynamic + "/fansShopMessageList", {
  96 + uid: this.getStore("uid")
  97 + }, this.fansShopMessageListCallback, {
  98 + method: "POST"
  99 + });
  100 + }
  101 + },
  102 +
  103 + /**
  104 + * 已关注达人列表回调
  105 + * @param {object} res [服务器返回数据]
  106 + * @param {object} ext [扩展参数]
  107 + */
  108 + fansShopMessageListCallback (res, ext) {
  109 +
  110 + // 加载完成
  111 + Indicator.close();
  112 +
  113 + // 下拉刷新结束
  114 + this.$set(this, "isLoading", false);
  115 +
  116 + // 返回处理
  117 + if (res.code == 200) {
  118 +
  119 + // 解构数据
  120 + let { data: datas } = res;
  121 +
  122 + /* 获取列表数据 开始 */
  123 +
  124 + // 设置标题
  125 + this.$set(this, "list", datas.list);
  126 +
  127 + /* 获取列表数据 结束 */
  128 +
  129 + }
  130 + },
  131 +
  132 + /**
  133 + * 已关注达人列表2
  134 + */
  135 + fansShopList () {
  136 +
  137 + // 校验登录
  138 + if (this.$parent.checkLogin()) {
  139 +
  140 + // 加载中提示
  141 + Indicator.open('加载中...');
  142 +
  143 + // 请求接口
  144 + this.http("/Api/" + this.getApiVersion().dynamic + "/fansShopList", {
  145 + uid: this.getStore("uid")
  146 + }, this.fansShopListCallback, {
  147 + method: "POST"
  148 + });
  149 + }
  150 + },
  151 +
  152 + /**
  153 + * 已关注达人列表2回调
  154 + * @param {object} res [服务器返回数据]
  155 + * @param {object} ext [扩展参数]
  156 + */
  157 + fansShopListCallback (res, ext) {
  158 +
  159 + // 加载完成
  160 + Indicator.close();
  161 +
  162 + // 下拉刷新结束
  163 + this.$set(this, "isLoading", false);
  164 +
  165 + // 返回处理
  166 + if (res.code == 200) {
  167 +
  168 + // 解构数据
  169 + let { data: datas } = res;
  170 +
  171 + /* 获取列表数据 开始 */
  172 +
  173 + // 设置标题
  174 + this.$set(this, "list", datas.list);
  175 +
  176 + /* 获取列表数据 结束 */
  177 +
  178 + }
  179 + },
  180 +
  181 + /**
  182 + * 上拉加载
  183 + */
  184 + loadMore () {
  185 + // this.loading = true;
  186 + // setTimeout(() => {
  187 + // let last = this.list[this.list.length - 1];
  188 + // for (let i = 1; i <= 10; i++) {
  189 + // this.list.push(last + i);
  190 + // }
  191 + // this.loading = false;
  192 + // }, 2500);
  193 + },
  194 +
  195 + /**
  196 + * 通用跳转
  197 + * @param {object} item [数据对象]
  198 + */
  199 + toDetail (item) {
  200 +
  201 + // 判断并调用通用跳转
  202 + if (typeof this.$parent.gotoDetail === "function") {
  203 +
  204 + // 设置跳转达人个人主页用户数据
  205 + Object.assign(item, {
  206 + type: "5",
  207 + to: (this.mode == "prod") ?
  208 + "https://managemall.cnlive.com/html/preferred-library/1/#/pages/darenProfile/darenProfile?from=redirect" + "&id=" + (item.user_id) + (this.getStore("uid") ? "&uid=" + this.getStore("uid") : "") :
  209 + "https://wjjshop.cnlive.com/html/preferred-library/1/#/pages/darenProfile/darenProfile?from=redirect" + "&id=" + (item.user_id) + (this.getStore("uid") ? "&uid=" + this.getStore("uid") : ""),
  210 + shop_type: ""
  211 + });
  212 +
  213 + // 调用通用跳转
  214 + this.$parent.gotoDetail(item);
  215 + }
  216 + },
  217 +
  218 + /**
  219 + * 后退
  220 + */
  221 + back () {
  222 +
  223 + // 判断是否有后退函数
  224 + if (typeof this.$parent.back === "function") {
  225 +
  226 + // 调用后退
  227 + this.$parent.back();
  228 + } else {
  229 +
  230 + // 后退
  231 + window.history.go(-1);
  232 + }
  233 + }
  234 + },
  235 + head: {
  236 + title () {
  237 + return {
  238 + inner: this.title
  239 + }
  240 + }
  241 + },
  242 + watch: {
  243 +
  244 + // 设置页面标题
  245 + title (newVal) {
  246 + if (this.$store.state.browser.toLowerCase() == "qq" && this.$store.state.deviceType.toLowerCase() == "iphone") {
  247 + this.$iFrame.insertIFrame(newVal);
  248 + } else {
  249 + this.$emit("updateHead");
  250 + }
250 } 251 }
  252 + },
  253 + mounted () {
  254 + // 页面显示监听
  255 + document.addEventListener('visibilitychange', () => {
  256 + // 页面显示出来了
  257 + if (document.hidden === false) {
  258 + // 接口刷新
  259 + this.fansShopMessageList();
  260 + }
  261 + });
  262 + }
  263 +}
251 </script> 264 </script>
252 265
253 <!-- Add "scoped" attribute to limit CSS to this component only --> 266 <!-- Add "scoped" attribute to limit CSS to this component only -->
254 <style rel="stylesheet/less" lang="less" scoped> 267 <style rel="stylesheet/less" lang="less" scoped>
255 - @import "fansShopMessageList"; 268 +@import 'fansShopMessageList';
256 </style> 269 </style>