Commit 1ef8b16fe77f7df3d5ff270baf0712cf9c1bafb7
1 parent
c9268baa
页面显示刷新列表接口
Showing
1 changed file
with
257 additions
and
244 deletions
src/pages/fansShopMessageList/fansShopMessageList.vue
| 1 | 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 | 24 | </div> |
| 25 | + <!-- </van-pull-refresh> --> | |
| 26 | + </div> | |
| 24 | 27 | </template> |
| 25 | 28 | |
| 26 | 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 | 264 | </script> |
| 252 | 265 | |
| 253 | 266 | <!-- Add "scoped" attribute to limit CSS to this component only --> |
| 254 | 267 | <style rel="stylesheet/less" lang="less" scoped> |
| 255 | - @import "fansShopMessageList"; | |
| 268 | +@import 'fansShopMessageList'; | |
| 256 | 269 | </style> | ... | ... |