w-front-end / select_good · Commits

Commit 3987d1ac725bbe0da26858b62c3c6f65d3fba2e1

Authored by zhiyangdu
1 parent 33621c23

更多页跳转

Inline Side-by-side
Showing 7 changed files with 453 additions and 13 deletions
src/main.js
  View file @3987d1a
... ... @@ -6,7 +6,7 @@ import VueHead from "vue-head";
6 6 import sha1 from "sha1";
7 7 import 'mint-ui/lib/style.css';
8 8 import { Toast, Indicator,InfiniteScroll } from "mint-ui";
9   -import { Rate, Popup, Lazyload, Search, PullRefresh, Picker, Image} from "vant";
  9 +import { Rate, Popup, Lazyload, Search, PullRefresh, Picker, Image, ImagePreview} from "vant";
10 10 import App from "./App";
11 11 import IdCard from './common/IdCard';
12 12 import VueBus from 'vue-bus';
... ... @@ -19,6 +19,7 @@ Vue.use(Popup);
19 19 Vue.use(PullRefresh);
20 20 Vue.use(Picker);
21 21 Vue.use(Image);
  22 +Vue.use(ImagePreview);
22 23 Vue.use(Lazyload, {
23 24 preload: 90,
24 25 loading: "static/img/x.jpg",
... ...
src/pages/moreDynamic/moreDynamic.less 0 → 100644
  View file @3987d1a
src/pages/moreDynamic/moreDynamic.vue 0 → 100644
  View file @3987d1a
  1 +<template>
  2 + <div class="item_box">
  3 + <div
  4 + infinite-scroll-immediate-check="true"
  5 + v-infinite-scroll="getNewDynamicList"
  6 + infinite-scroll-disabled="loading"
  7 + :infinite-scroll-distance="50">
  8 + <daren-list-box class="daren-list" @userJump="userJump" @jump="jump" @goodsJump="goodsJump" @goodsPrimary="goodsPrimary"
  9 + :lists="recommendedDarenMore">
  10 + </daren-list-box>
  11 + </div>
  12 + </div>
  13 +</template>
  14 +
  15 +<script>
  16 + import { Toast, Indicator } from "mint-ui";
  17 + import darenListBox from "@/components/darenListBox/darenListBox";
  18 + export default {
  19 + name: 'recommendedDaren',
  20 + data () {
  21 + return {
  22 + loading: false, // 加载
  23 + pages:0, // 分页
  24 + recommendedDarenMore:null
  25 + }
  26 + },
  27 + components:{
  28 + darenListBox
  29 + },
  30 + created(){
  31 +
  32 + // 设置标题
  33 + this.$set(this, "title", "已关注达人动态");
  34 + // 已关注达人更多动态
  35 + this.getNewDynamicList();
  36 + },
  37 + methods: {
  38 + /**
  39 + * 达人最新动态
  40 + */
  41 + getNewDynamicList() {
  42 + this.loading = true;
  43 + this.pages++
  44 + // 加载中提示
  45 + Indicator.open("加载中...");
  46 +
  47 + // 获取证书请求接口
  48 + this.http("/Api/" + this.getApiVersion().dynamic + "/getNewDynamicList", {
  49 + uid: this.$route.query.uid,
  50 + page: this.pages,
  51 + type: 2
  52 + }, this.getNewDynamicListCallback, {
  53 + method: "post"
  54 + }
  55 + );
  56 + },
  57 +
  58 + /**
  59 + * 达人最新动态回调
  60 + * @param {object} res [服务器返回数据]
  61 + * @param {object} ext [扩展参数]
  62 + */
  63 + getNewDynamicListCallback(res, ext) {
  64 +
  65 + // 加载完成
  66 + Indicator.close();
  67 +
  68 + // 返回处理
  69 + if (res.code == 200) {
  70 + // 解构数据
  71 + let { data: datas } = res;
  72 + // 设置shopFnsDynamic达人动态数据
  73 +
  74 + if (datas.list && datas.list.length) {
  75 + // 隐藏加载圈
  76 + this.loading = false;
  77 + this.$set(this, "recommendedDarenMore", datas.list);
  78 + }
  79 + /* 获取达人动态数据 结束 */
  80 +
  81 + } else if (res.code == 400) {
  82 +
  83 + // 获取达人动态失败
  84 + Toast(res.message);
  85 + } else {
  86 +
  87 + // 获取优选库精选活动失败
  88 + Toast("获取达人动态失败");
  89 + }
  90 + },
  91 + /**
  92 + * 用户头像/昵称，点击跳转
  93 + * @param {object} item [数据对象]
  94 + */
  95 + userJump(item) {
  96 +
  97 + // 判断并调用通用跳转
  98 + if (typeof this.$parent.gotoDetail === "function") {
  99 +
  100 + // 临时，设置跳转达人个人主页用户数据
  101 + Object.assign(item, {
  102 + type: "5",
  103 + 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,
  104 + shop_type: ""
  105 + });
  106 +
  107 +
  108 + console.log("userJump", item);
  109 +
  110 +
  111 +
  112 +
  113 + this.$parent.gotoDetail(item);
  114 + }
  115 + },
  116 +
  117 + /**
  118 + * 跳转达人动态详情
  119 + * @param {object} item [数据对象]
  120 + */
  121 + jump(item) {
  122 +
  123 + // 判断并调用通用跳转
  124 + if (typeof this.$parent.gotoDetail === "function") {
  125 +
  126 +
  127 + // 临时，设置跳转参数，跳转达人动态详情页面
  128 + Object.assign(item, {
  129 + type: "25",
  130 + to: "265",
  131 + shop_type: ""
  132 + });
  133 +
  134 +
  135 + console.log("jump", item);
  136 +
  137 +
  138 + this.$parent.gotoDetail(item);
  139 + }
  140 + },
  141 + /**
  142 + * 点击跳转商品
  143 + * @param {object} item [数据对象]
  144 + */
  145 + goodsJump(item) {
  146 +
  147 + // 判断并调用通用跳转
  148 + if (typeof this.$parent.gotoDetail === "function") {
  149 +
  150 + // 临时，设置跳转商品详情参数
  151 + Object.assign(item, {
  152 + type: "2",
  153 + to: "9525393",
  154 + shop_type: "1"
  155 + });
  156 +
  157 +
  158 + console.log("goodsJump", item);
  159 +
  160 +
  161 +
  162 + this.$parent.gotoDetail(item);
  163 + }
  164 + },
  165 +
  166 + /**
  167 + * 点击跳转商品购买
  168 + * @param {object} item [数据对象]
  169 + */
  170 + goodsPrimary(item) {
  171 +
  172 + // 判断并调用通用跳转
  173 + if (typeof this.$parent.gotoDetail === "function") {
  174 +
  175 + // 临时，设置跳转商品详情参数
  176 + Object.assign(item, {
  177 + type: "2",
  178 + to: "9525393",
  179 + shop_type: "1"
  180 + });
  181 +
  182 +
  183 + console.log("goodsPrimary", item);
  184 +
  185 +
  186 +
  187 + this.$parent.gotoDetail(item);
  188 + }
  189 + }
  190 + }
  191 + }
  192 +</script>
  193 +
  194 +<!-- Add "scoped" attribute to limit CSS to this component only -->
  195 +<style scoped>
  196 +
  197 +</style>
... ...
src/pages/newDaren/newDaren.vue
  View file @3987d1a
... ... @@ -11,7 +11,7 @@
11 11 <shop-daten-top v-if="shopDatenTop" @userJump="userJump" :shopDatenTop="shopDatenTop"></shop-daten-top>
12 12 <!--推荐达人-->
13 13 <!-- 最新动态标题 -->
14   - <text-title-box v-if="shopDarenHot && shopDarenHot.length" slot="title-box" @more="newDarenDynamicsMore"
  14 + <text-title-box v-if="shopDarenHot && shopDarenHot.length" slot="title-box" @more="recommendedDaren"
15 15 :titles="{
16 16 title: '推荐达人',
17 17 more: true
... ... @@ -27,7 +27,7 @@
27 27 :lists="fansDaren">
28 28  
29 29 <!-- 最新动态标题 -->
30   - <text-title-box v-if="fansDaren&&fansDaren.length" slot="title-box" @more="fansDarenMore"
  30 + <text-title-box v-if="fansDaren && fansDaren.length" slot="title-box" @more="moreDynamic"
31 31 :titles="{
32 32 title: '已关注达人',
33 33 more: true
... ... @@ -43,7 +43,7 @@
43 43 <daren-list-box class="daren-list" @userJump="userJump" @jump="jump" @goodsJump="goodsJump" @goodsPrimary="goodsPrimary"
44 44 :lists="shopFnsDynamic">
45 45 <!--最新达人动态-->
46   - <text-title-box v-if="shopFnsDynamic&&shopFnsDynamic.length" slot="title-box" @more="newDarenDynamicsMore"
  46 + <text-title-box v-if="shopFnsDynamic && shopFnsDynamic.length" slot="title-box"
47 47 :titles="{
48 48 title: '最新达人动态',
49 49 more: false
... ... @@ -284,16 +284,16 @@
284 284 * @param {object} item [通用跳转对象]
285 285 */
286 286 /**
287   - * 已关注达人跳转到更多
  287 + * 已关注达人动态更多页跳转
288 288 */
289   - fansDarenMore(){
  289 + moreDynamic(){
290 290 // 判断并调用通用跳转
291 291 if (typeof this.$parent.gotoDetail === "function") {
292 292  
293 293 // 设置跳转参数
294 294 let options = {
295 295 type: "5",
296   - to: (window.location.href.split("#")[0] + "#/fansShopMessageList?uid=" + this.getStore("uid")),
  296 + to: (window.location.href.split("#")[0] + "#/moreDynamic?uid=" + this.getStore("uid")),
297 297 shop_type: ""
298 298 }
299 299 this.$parent.gotoDetail(options);
... ... @@ -310,15 +310,21 @@
310 310 },
311 311  
312 312 /**
313   - * 最新达人动态更过
  313 + * 推荐达人跳转到更多页
314 314 */
315   - newDarenDynamicsMore() {
316   -
317   -
318   -
319   - console.log("newDarenDynamicsMore");
  315 + recommendedDaren() {
320 316  
  317 + // 判断并调用通用跳转
  318 + if (typeof this.$parent.gotoDetail === "function") {
321 319  
  320 + // 设置跳转参数
  321 + let options = {
  322 + type: "5",
  323 + to: (window.location.href.split("#")[0] + "#/recommendMore?uid=" + this.getStore("uid")),
  324 + shop_type: ""
  325 + }
  326 + this.$parent.gotoDetail(options);
  327 + }
322 328  
323 329 },
324 330  
... ...
src/pages/recommendMore/recommendMore.less 0 → 100644
  View file @3987d1a
  1 +.fans-shop-message-list-box {
  2 + /deep/ .van-pull-refresh {
  3 + .van-pull-refresh__track {
  4 + .van-pull-refresh__head {
  5 + font-size: 30px;
  6 + }
  7 + }
  8 + }
  9 + .title{
  10 + margin: 30px;
  11 + height:50px;
  12 + font-size:36px;
  13 + font-weight:600;
  14 + color:rgba(74,74,74,1);
  15 + line-height:50px;
  16 + }
  17 + .item_box{
  18 + height: calc(100vh-110px);
  19 + width: 100%;
  20 + overflow-y: auto;
  21 + }
  22 +}
... ...
src/pages/recommendMore/recommendMore.vue 0 → 100644
  View file @3987d1a
  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 + <ul
  15 + v-infinite-scroll="loadMore"
  16 + infinite-scroll-disabled="loading"
  17 + :infinite-scroll-distance="list.length">
  18 + <li v-for="(item, index) in list" :key="index">
  19 +
  20 + <!-- 达人列表组件 -->
  21 + <dresserList @toDetail="toDetail"
  22 + :dresserList="item">
  23 + </dresserList>
  24 + </li>
  25 + </ul>
  26 + </div>
  27 + <!-- </van-pull-refresh> -->
  28 + </div>
  29 +</template>
  30 +
  31 +<script>
  32 + // 引入组件
  33 + import { Toast, Indicator } from 'mint-ui';
  34 + import backBox from "@/components/backBox/backBox";
  35 + import dresserList from "@/components/dresserList/dresserList";
  36 +
  37 + export default {
  38 + name: 'fansShopMessageList',
  39 + data() {
  40 + return {
  41 + title: "",
  42 + isLoading: false, // 下拉刷新控制
  43 + backs: { // nav导航条数据
  44 + title: "已关注达人",
  45 + funcs: {
  46 + back: {
  47 + icon: "static/img/icon_back.png"
  48 + }
  49 + }
  50 + },
  51 + list: [], // 达人列表
  52 + loading: false // 上拉加载控制
  53 + }
  54 + },
  55 + components: {
  56 + backBox,
  57 + dresserList
  58 + },
  59 + created() {
  60 +
  61 + // 设置标题
  62 + this.$set(this, "title", "已关注达人");
  63 +
  64 + // 获取关注人列表
  65 + this.fansShopMessageList();
  66 + },
  67 + methods: {
  68 +
  69 + // 下拉刷新
  70 + // onRefresh() {
  71 +
  72 + // // 下拉刷新中
  73 + // this.$set(this, "isLoading", true);
  74 +
  75 + // // 获取关注人列表
  76 + // this.fansShopMessageList();
  77 + // },
  78 +
  79 + /**
  80 + * 已关注达人列表
  81 + */
  82 + fansShopMessageList () {
  83 +
  84 + // 校验登录
  85 + if (this.$parent.checkLogin()) {
  86 +
  87 + // 加载中提示
  88 + Indicator.open('加载中...');
  89 +
  90 + // 请求接口
  91 + this.http("/Api/" + this.getApiVersion().dynamic + "/fansShopMessageList", {
  92 + uid: this.getStore("uid")
  93 + },this.fansShopMessageListCallback, {
  94 + method: "post"
  95 + });
  96 + }
  97 + },
  98 +
  99 + /**
  100 + * 已关注达人列表回调
  101 + * @param {object} res [服务器返回数据]
  102 + * @param {object} ext [扩展参数]
  103 + */
  104 + fansShopMessageListCallback(res, ext) {
  105 +
  106 + // 加载完成
  107 + Indicator.close();
  108 +
  109 + // 下拉刷新结束
  110 + this.$set(this, "isLoading", false);
  111 +
  112 + // 返回处理
  113 + if (res.code == 200) {
  114 +
  115 + // 解构数据
  116 + let {data: datas} = res;
  117 +
  118 + /*获取裂变数据*/
  119 +
  120 + // 设置标题
  121 + this.$set(this, "list", datas.list);
  122 + }
  123 + },
  124 +
  125 + /**
  126 + * 上拉加载
  127 + */
  128 + loadMore() {
  129 + // this.loading = true;
  130 + // setTimeout(() => {
  131 + // let last = this.list[this.list.length - 1];
  132 + // for (let i = 1; i <= 10; i++) {
  133 + // this.list.push(last + i);
  134 + // }
  135 + // this.loading = false;
  136 + // }, 2500);
  137 + },
  138 +
  139 + /**
  140 + * 通用跳转
  141 + * @param {object} item [数据对象]
  142 + */
  143 + toDetail(item) {
  144 +
  145 + // 判断并调用通用跳转
  146 + if (typeof this.$parent.gotoDetail === "function") {
  147 + this.$parent.gotoDetail(item);
  148 + }
  149 + },
  150 +
  151 + /**
  152 + * 后退
  153 + */
  154 + back() {
  155 +
  156 + // 判断是否有后退函数
  157 + if (typeof this.$parent.back === "function") {
  158 +
  159 + // 调用后退
  160 + this.$parent.back();
  161 + } else {
  162 +
  163 + // 后退
  164 + window.history.go(-1);
  165 + }
  166 + }
  167 + },
  168 + head: {
  169 + title () {
  170 + return {
  171 + inner: this.title
  172 + }
  173 + }
  174 + },
  175 + watch: {
  176 +
  177 + // 设置页面标题
  178 + title(newVal) {
  179 + if (this.$store.state.browser.toLowerCase() == "qq" && this.$store.state.deviceType.toLowerCase() == "iphone") {
  180 + this.$iFrame.insertIFrame(newVal);
  181 + } else {
  182 + this.$emit("updateHead");
  183 + }
  184 + }
  185 + }
  186 + }
  187 +</script>
  188 +
  189 +<!-- Add "scoped" attribute to limit CSS to this component only -->
  190 +<style rel="stylesheet/less" lang="less" scoped>
  191 + @import "recommendMore";
  192 +</style>
... ...
src/router/index.js
  View file @3987d1a
... ... @@ -103,6 +103,28 @@ const router = new Router({
103 103 meta: {
104 104 requireAuth: false
105 105 }
  106 + },
  107 + {
  108 + // 关注达人更多动态页
  109 + path: "/moreDynamic",
  110 + name: "moreDynamic",
  111 + component: resolve => {
  112 + require(["@/pages/moreDynamic/moreDynamic"], resolve);
  113 + },
  114 + meta: {
  115 + requireAuth: false
  116 + }
  117 + },
  118 + {
  119 + // 达人推荐更多页
  120 + path: "/recommendMore",
  121 + name: "recommendMore",
  122 + component: resolve => {
  123 + require(["@/pages/recommendMore/recommendMore"], resolve);
  124 + },
  125 + meta: {
  126 + requireAuth: false
  127 + }
106 128 }
107 129 ]
108 130 },
... ...