更多页跳转

zhiyangdu
1 parent 33621c23
Showing 7 changed files with 453 additions and 13 deletions
src/main.js
src/pages/moreDynamic/moreDynamic.less
src/pages/moreDynamic/moreDynamic.vue
src/pages/newDaren/newDaren.vue
src/pages/recommendMore/recommendMore.less
src/pages/recommendMore/recommendMore.vue
src/router/index.js
@@ -6,7 +6,7 @@ import VueHead from &quot;vue-head&quot;;
 import sha1 from "sha1";
 import 'mint-ui/lib/style.css';
 import { Toast, Indicator,InfiniteScroll } from "mint-ui";
-import { Rate, Popup, Lazyload, Search, PullRefresh, Picker, Image} from "vant";
+import { Rate, Popup, Lazyload, Search, PullRefresh, Picker, Image, ImagePreview} from "vant";
 import App from "./App";
 import IdCard from './common/IdCard';
 import VueBus from 'vue-bus';
@@ -19,6 +19,7 @@ Vue.use(Popup);
 Vue.use(PullRefresh);
 Vue.use(Picker);
 Vue.use(Image);
+Vue.use(ImagePreview);
 Vue.use(Lazyload, {
     preload: 90,
     loading: "static/img/x.jpg",
+<template>
+    <div class="item_box">
+        <div
+            infinite-scroll-immediate-check="true"
+            v-infinite-scroll="getNewDynamicList"
+            infinite-scroll-disabled="loading"
+            :infinite-scroll-distance="50">
+            <daren-list-box class="daren-list" @userJump="userJump" @jump="jump" @goodsJump="goodsJump" @goodsPrimary="goodsPrimary"
+                            :lists="recommendedDarenMore">
+            </daren-list-box>
+        </div>
+    </div>
+</template>
+
+<script>
+    import { Toast, Indicator } from "mint-ui";
+    import darenListBox from "@/components/darenListBox/darenListBox";
+    export default {
+        name: 'recommendedDaren',
+        data () {
+            return {
+                loading: false, // 加载
+                pages:0, // 分页
+                recommendedDarenMore:null
+            }
+        },
+        components:{
+            darenListBox
+        },
+        created(){
+
+            // 设置标题
+            this.$set(this, "title", "已关注达人动态");
+            // 已关注达人更多动态
+            this.getNewDynamicList();
+        },
+        methods: {
+            /**
+             * 达人最新动态
+             */
+            getNewDynamicList() {
+                this.loading = true;
+                this.pages++
+                // 加载中提示
+                Indicator.open("加载中...");
+
+                // 获取证书请求接口
+                this.http("/Api/" + this.getApiVersion().dynamic + "/getNewDynamicList", {
+                        uid: this.$route.query.uid,
+                        page: this.pages,
+                        type: 2
+                    }, this.getNewDynamicListCallback, {
+                        method: "post"
+                    }
+                );
+            },
+
+            /**
+             * 达人最新动态回调
+             * @param {object} res [服务器返回数据]
+             * @param {object} ext [扩展参数]
+             */
+            getNewDynamicListCallback(res, ext) {
+
+                // 加载完成
+                Indicator.close();
+
+                // 返回处理
+                if (res.code == 200) {
+                    // 解构数据
+                    let { data: datas } = res;
+                    // 设置shopFnsDynamic达人动态数据
+
+                    if (datas.list && datas.list.length) {
+                        // 隐藏加载圈
+                        this.loading = false;
+                        this.$set(this, "recommendedDarenMore", datas.list);
+                    }
+                    /* 获取达人动态数据 结束 */
+
+                } else if (res.code == 400) {
+
+                    // 获取达人动态失败
+                    Toast(res.message);
+                } else {
+
+                    // 获取优选库精选活动失败
+                    Toast("获取达人动态失败");
+                }
+            },
+            /**
+             * 用户头像/昵称，点击跳转
+             * @param {object} item [数据对象]
+             */
+            userJump(item) {
+
+                // 判断并调用通用跳转
+                if (typeof this.$parent.gotoDetail === "function") {
+
+                    // 临时，设置跳转达人个人主页用户数据
+                    Object.assign(item, {
+                        type: "5",
+                        to: (this.mode == "prod") ? "https://managemall.cnlive.com/html/preferred-library/1/#/pages/darenProfile/darenProfile?from=redirect" + "&id=" + item.id : "https://wjjshop.cnlive.com/html/preferred-library/1/#/pages/darenProfile/darenProfile?from=redirect"+ "&id=" + item.id,
+                        shop_type: ""
+                    });
+
+
+                    console.log("userJump", item);
+
+
+
+
+                    this.$parent.gotoDetail(item);
+                }
+            },
+
+            /**
+             * 跳转达人动态详情
+             * @param {object} item [数据对象]
+             */
+            jump(item) {
+
+                // 判断并调用通用跳转
+                if (typeof this.$parent.gotoDetail === "function") {
+
+
+                    // 临时，设置跳转参数，跳转达人动态详情页面
+                    Object.assign(item, {
+                        type: "25",
+                        to: "265",
+                        shop_type: ""
+                    });
+
+
+                    console.log("jump", item);
+
+
+                    this.$parent.gotoDetail(item);
+                }
+            },
+            /**
+             * 点击跳转商品
+             * @param {object} item [数据对象]
+             */
+            goodsJump(item) {
+
+                // 判断并调用通用跳转
+                if (typeof this.$parent.gotoDetail === "function") {
+
+                    // 临时，设置跳转商品详情参数
+                    Object.assign(item, {
+                        type: "2",
+                        to: "9525393",
+                        shop_type: "1"
+                    });
+
+
+                    console.log("goodsJump", item);
+
+
+
+                    this.$parent.gotoDetail(item);
+                }
+            },
+
+            /**
+             * 点击跳转商品购买
+             * @param {object} item [数据对象]
+             */
+            goodsPrimary(item) {
+
+                // 判断并调用通用跳转
+                if (typeof this.$parent.gotoDetail === "function") {
+
+                    // 临时，设置跳转商品详情参数
+                    Object.assign(item, {
+                        type: "2",
+                        to: "9525393",
+                        shop_type: "1"
+                    });
+
+
+                    console.log("goodsPrimary", item);
+
+
+
+                    this.$parent.gotoDetail(item);
+                }
+            }
+        }
+    }
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+
+</style>
@@ -11,7 +11,7 @@
         <shop-daten-top v-if="shopDatenTop" @userJump="userJump" :shopDatenTop="shopDatenTop"></shop-daten-top>
         <!--推荐达人-->
         <!-- 最新动态标题 -->
-        <text-title-box  v-if="shopDarenHot && shopDarenHot.length" slot="title-box" @more="newDarenDynamicsMore"
+        <text-title-box  v-if="shopDarenHot && shopDarenHot.length" slot="title-box" @more="recommendedDaren"
                         :titles="{
                     title: '推荐达人',
                     more: true
@@ -27,7 +27,7 @@
                         :lists="fansDaren">
             <!-- 最新动态标题 -->
-            <text-title-box v-if="fansDaren&&fansDaren.length" slot="title-box" @more="fansDarenMore"
+            <text-title-box v-if="fansDaren && fansDaren.length" slot="title-box" @more="moreDynamic"
                             :titles="{
                     title: '已关注达人',
                     more: true
@@ -43,7 +43,7 @@
                 <daren-list-box class="daren-list" @userJump="userJump" @jump="jump" @goodsJump="goodsJump" @goodsPrimary="goodsPrimary"
                                 :lists="shopFnsDynamic">
                     <!--最新达人动态-->
-                    <text-title-box v-if="shopFnsDynamic&&shopFnsDynamic.length" slot="title-box" @more="newDarenDynamicsMore"
+                    <text-title-box v-if="shopFnsDynamic && shopFnsDynamic.length" slot="title-box"
                                     :titles="{
                     title: '最新达人动态',
                     more: false
@@ -284,16 +284,16 @@
              * @param {object} item [通用跳转对象]
              */
             /**
-             * 已关注达人跳转到更多
+             * 已关注达人动态更多页跳转
              */
-            fansDarenMore(){
+            moreDynamic(){
                 // 判断并调用通用跳转
                 if (typeof this.$parent.gotoDetail === "function") {
                     // 设置跳转参数
                     let options = {
                         type: "5",
-                        to: (window.location.href.split("#")[0] + "#/fansShopMessageList?uid=" + this.getStore("uid")),
+                        to: (window.location.href.split("#")[0] + "#/moreDynamic?uid=" + this.getStore("uid")),
                         shop_type: ""
                     }
                     this.$parent.gotoDetail(options);
@@ -310,15 +310,21 @@
             },
             /**
-             * 最新达人动态更过
+             * 推荐达人跳转到更多页
              */
-            newDarenDynamicsMore() {
-
-
-
-                console.log("newDarenDynamicsMore");
+            recommendedDaren() {
+                // 判断并调用通用跳转
+                if (typeof this.$parent.gotoDetail === "function") {
+                    // 设置跳转参数
+                    let options = {
+                        type: "5",
+                        to: (window.location.href.split("#")[0] + "#/recommendMore?uid=" + this.getStore("uid")),
+                        shop_type: ""
+                    }
+                    this.$parent.gotoDetail(options);
+                }
             },
+.fans-shop-message-list-box {
+    /deep/ .van-pull-refresh {
+        .van-pull-refresh__track {
+            .van-pull-refresh__head {
+                font-size: 30px;
+            }
+        }
+    }
+    .title{
+        margin: 30px;
+        height:50px;
+        font-size:36px;
+        font-weight:600;
+        color:rgba(74,74,74,1);
+        line-height:50px;
+    }
+    .item_box{
+        height: calc(100vh-110px);
+        width: 100%;
+        overflow-y: auto;
+    }
+}
+<template>
+    <div class="fans-shop-message-list-box">
+
+        <!-- nav -->
+        <back-box :style="'padding-top: ' + ($parent.top.value) + 'px'" @back="back"
+                  :backs="backs">
+        </back-box>
+
+        <!-- 下拉刷新 -->
+        <!-- <van-pull-refresh v-model="isLoading" pulling-text="下拉刷新..." loosing-text="释放刷新" loading-text="加载中..." success-text="刷新成功" @refresh="onRefresh"> -->
+
+        <!-- 已关注达人列表 -->
+        <div class="item_box">
+            <ul
+                v-infinite-scroll="loadMore"
+                infinite-scroll-disabled="loading"
+                :infinite-scroll-distance="list.length">
+                <li v-for="(item, index) in list" :key="index">
+
+                    <!-- 达人列表组件 -->
+                    <dresserList @toDetail="toDetail"
+                                 :dresserList="item">
+                    </dresserList>
+                </li>
+            </ul>
+        </div>
+        <!-- </van-pull-refresh> -->
+    </div>
+</template>
+
+<script>
+    // 引入组件
+    import { Toast, Indicator } from 'mint-ui';
+    import backBox from "@/components/backBox/backBox";
+    import dresserList from "@/components/dresserList/dresserList";
+
+    export default {
+        name: 'fansShopMessageList',
+        data() {
+            return {
+                title: "",
+                isLoading: false,   // 下拉刷新控制
+                backs: {            // nav导航条数据
+                    title: "已关注达人",
+                    funcs: {
+                        back: {
+                            icon: "static/img/icon_back.png"
+                        }
+                    }
+                },
+                list: [],           // 达人列表
+                loading: false      // 上拉加载控制
+            }
+        },
+        components: {
+            backBox,
+            dresserList
+        },
+        created() {
+
+            // 设置标题
+            this.$set(this, "title", "已关注达人");
+
+            // 获取关注人列表
+            this.fansShopMessageList();
+        },
+        methods: {
+
+            // 下拉刷新
+            // onRefresh() {
+
+            //     // 下拉刷新中
+            //     this.$set(this, "isLoading", true);
+
+            //     // 获取关注人列表
+            //     this.fansShopMessageList();
+            // },
+
+            /**
+             * 已关注达人列表
+             */
+            fansShopMessageList () {
+
+                // 校验登录
+                if (this.$parent.checkLogin()) {
+
+                    // 加载中提示
+                    Indicator.open('加载中...');
+
+                    // 请求接口
+                    this.http("/Api/" + this.getApiVersion().dynamic + "/fansShopMessageList", {
+                        uid: this.getStore("uid")
+                    },this.fansShopMessageListCallback, {
+                        method: "post"
+                    });
+                }
+            },
+
+            /**
+             * 已关注达人列表回调
+             * @param {object} res [服务器返回数据]
+             * @param {object} ext [扩展参数]
+             */
+            fansShopMessageListCallback(res, ext) {
+
+                // 加载完成
+                Indicator.close();
+
+                // 下拉刷新结束
+                this.$set(this, "isLoading", false);
+
+                // 返回处理
+                if (res.code == 200) {
+
+                    // 解构数据
+                    let {data: datas} = res;
+
+                    /*获取裂变数据*/
+
+                    // 设置标题
+                    this.$set(this, "list", datas.list);
+                }
+            },
+
+            /**
+             * 上拉加载
+             */
+            loadMore() {
+                //            this.loading = true;
+                //            setTimeout(() => {
+                //                let last = this.list[this.list.length - 1];
+                //                for (let i = 1; i <= 10; i++) {
+                //                    this.list.push(last + i);
+                //                }
+                //                this.loading = false;
+                //            }, 2500);
+            },
+
+            /**
+             * 通用跳转
+             * @param {object} item [数据对象]
+             */
+            toDetail(item) {
+
+                // 判断并调用通用跳转
+                if (typeof this.$parent.gotoDetail === "function") {
+                    this.$parent.gotoDetail(item);
+                }
+            },
+
+            /**
+             * 后退
+             */
+            back() {
+
+                // 判断是否有后退函数
+                if (typeof this.$parent.back === "function") {
+
+                    // 调用后退
+                    this.$parent.back();
+                } else {
+
+                    // 后退
+                    window.history.go(-1);
+                }
+            }
+        },
+        head: {
+            title () {
+                return {
+                    inner: this.title
+                }
+            }
+        },
+        watch: {
+
+            // 设置页面标题
+            title(newVal) {
+                if (this.$store.state.browser.toLowerCase() == "qq" && this.$store.state.deviceType.toLowerCase() == "iphone") {
+                    this.$iFrame.insertIFrame(newVal);
+                } else {
+                    this.$emit("updateHead");
+                }
+            }
+        }
+    }
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style rel="stylesheet/less" lang="less" scoped>
+    @import "recommendMore";
+</style>
@@ -103,6 +103,28 @@ const router = new Router({
                     meta: {
                         requireAuth: false
                     }
+                },
+                {
+                    // 关注达人更多动态页
+                    path: "/moreDynamic",
+                    name: "moreDynamic",
+                    component: resolve => {
+                        require(["@/pages/moreDynamic/moreDynamic"], resolve);
+                    },
+                    meta: {
+                        requireAuth: false
+                    }
+                },
+                {
+                    // 达人推荐更多页
+                    path: "/recommendMore",
+                    name: "recommendMore",
+                    component: resolve => {
+                        require(["@/pages/recommendMore/recommendMore"], resolve);
+                    },
+                    meta: {
+                        requireAuth: false
+                    }
                 }
             ]
         },