w-front-end / select_good · Commits

Commit 95c58949c941f11a57a6f095a3a84a8905036d1a

Authored by 王强
1 parent adc35fb3

优选库 -> 达人 DEMO 准备提测~

Inline Side-by-side
Showing 12 changed files with 619 additions and 97 deletions
src/components/darenListBox/darenListBox.less 0 → 100644
  View file @95c5894
  1 +@charset "UTF-8";
  2 +
  3 +.daren-list-box {
  4 + .title-box + .box {
  5 + margin-top: 30px;
  6 + }
  7 + > .box {
  8 + margin: 0 auto;
  9 + width: 690px;
  10 + > .item-box + .item-box {
  11 + margin-top: 30px;
  12 + }
  13 + }
  14 +}
0 15 \ No newline at end of file
... ...
src/components/darenListBox/darenListBox.vue 0 → 100644
  View file @95c5894
  1 +<template>
  2 + <div class="daren-list-box" v-if="lists && lists.length">
  3 +
  4 + <!-- 标题slot -->
  5 + <slot name="title-box"></slot>
  6 +
  7 + <div class="box">
  8 +
  9 + <!-- 循环输出达人动态列表 -->
  10 + <div class="item-box" v-for="(item, index) in lists" :key="index">
  11 + <daren-list-com @userJump="userJump" @jump="jump" @goodsJump="goodsJump" @goodsPrimary="goodsPrimary"
  12 + :item="item">
  13 + </daren-list-com>
  14 + </div>
  15 + </div>
  16 + </div>
  17 +</template>
  18 +
  19 +<script>
  20 +
  21 + // 引入组件
  22 + import darenListCom from "@/components/darenListCom/darenListCom";
  23 +
  24 + export default {
  25 + name: "darenListBox",
  26 + data() {
  27 + return {
  28 +
  29 + }
  30 + },
  31 + props: ["lists"],
  32 + components: {
  33 + darenListCom
  34 + },
  35 + methods: {
  36 +
  37 + /**
  38 + * 点击跳转
  39 + * @param {object} item [数据对象]
  40 + */
  41 + jump(item) {
  42 + this.$emit("jump", item);
  43 + },
  44 +
  45 + /**
  46 + * 用户头像/昵称，点击跳转
  47 + * @param {object} item [数据对象]
  48 + */
  49 + userJump(item) {
  50 + this.$emit("userJump", item);
  51 + },
  52 +
  53 + /**
  54 + * 点击跳转商品
  55 + * @param {object} item [数据对象]
  56 + */
  57 + goodsJump(item) {
  58 + this.$emit("goodsJump", item);
  59 + },
  60 +
  61 + /**
  62 + * 点击跳转商品购买
  63 + * @param {object} item [数据对象]
  64 + */
  65 + goodsPrimary(item) {
  66 + this.$emit("goodsPrimary", item);
  67 + }
  68 + }
  69 + }
  70 +</script>
  71 +
  72 +<!-- Add "scoped" attribute to limit CSS to this component only -->
  73 +<style rel="stylesheet/less" lang="less" scoped>
  74 + @import './darenListBox';
  75 +</style>
... ...
src/components/darenListCom/darenListCom.less
  View file @95c5894
1 1 @charset "UTF-8";
2 2  
3 3 .daren-list-com {
4   - .title-box + .box {
5   - margin-top: 30px;
6   - }
7 4 > .box {
8 5 margin: 0 auto;
9 6 width: 690px;
... ... @@ -37,35 +34,78 @@
37 34 }
38 35 .center-box {
39 36 margin-top: 20px;
40   -
41   -
42   -
43   -
44   -
45 37 }
46 38 .bottom-box {
47   -
48   -
49   -
50   -
  39 + .hot-info-box {
  40 + display: flex;
  41 + justify-content: flex-start;
  42 + align-items: center;
  43 + margin-top: 20px;
  44 + .hot-img-box {
  45 + width: auto;
  46 + height: 25px;
  47 + .hot-img {
  48 + display: block;
  49 + height: 25px;
  50 + }
  51 + }
  52 + .line {
  53 + background-color: transparent;
  54 + margin: 0 20px;
  55 + width: 0;
  56 + height: 24px;
  57 + border-left: 1px solid #999999;
  58 + }
  59 + .info {
  60 + color: #999999;
  61 + font-size: 24px;
  62 + font-weight: 400;
  63 + white-space: nowrap;
  64 + text-overflow: ellipsis;
  65 + overflow: hidden;
  66 + }
  67 + }
  68 + .goods-box {
  69 + margin-top: 20px;
  70 + .goods + .goods {
  71 + margin-top: 20px;
  72 + }
  73 + }
51 74 .comment-like-view-box {
52 75 display: flex;
53 76 justify-content: space-between;
54 77 align-items: center;
55   -
56   -
57   -
58   -
  78 + margin-top: 20px;
  79 + .left {
  80 + display: flex;
  81 + justify-content: flex-start;
  82 + align-items: center;
  83 + > div + div {
  84 + margin-left: 50px;
  85 + }
  86 + .comment-box, .like-box {
  87 + display: flex;
  88 + justify-content: flex-start;
  89 + align-items: center;
  90 + }
  91 + .icon-img {
  92 + display: block;
  93 + width: 36px;
  94 + height: 36px;
  95 + }
  96 + .number {
  97 + margin-left: 10px;
  98 + color: #999999;
  99 + font-size: 28px;
  100 + font-weight: 300;
  101 + }
  102 + }
  103 + .right {
  104 + color: #777777;
  105 + font-size: 28px;
  106 + font-weight: 300;
  107 + }
59 108 }
60 109 }
61   -
62   -
63   -
64   -
65   -
66   -
67   -
68   -
69   -
70 110 }
71 111 }
72 112 \ No newline at end of file
... ...
src/components/darenListCom/darenListCom.vue
  View file @95c5894
1 1 <template>
2   - <div class="daren-list-com">
3   -
4   - <!-- 标题slot -->
5   - <slot name="title-box"></slot>
6   -
7   - <div class="box">
8   - <div class="top-box">
  2 + <div class="daren-list-com" v-if="item && (item.intro || item.img || item.goods)">
  3 + <div class="box" @click.stop.prevent @click="jump(item)">
  4 + <div class="top-box" v-if="item.user" @click.stop.prevent @click="userJump(item)">
9 5 <div class="top-left">
10 6  
11 7 <!-- 用户头像/昵称 -->
12   - <user-avatar @jump="userJump"
13   - :users="{
14   - simg: 'static/img/6.png',
15   - nickname: '欧阳娜娜'
16   - }">
  8 + <user-avatar class="user-avatar-box"
  9 + :users="item.user">
17 10 </user-avatar>
18 11 </div>
19 12 <div class="top-right">
20 13  
21 14 <!-- 发布时间 -->
22   - 26秒前
  15 + {{item.createtime}}
23 16 </div>
24 17 </div>
25 18  
26 19 <!-- 动态简介 -->
27   - <div class="intro-box">
28   - 盆地是地球表面（岩石圈表面）相对长时期沉降的区域，因整个地形外观与盆子相似而得名。换言之盆地是基底表面相对于海拔盆地是地球表面相对长时期沉降的区域盆地是地球表面（岩石圈表面）相对长时期沉降的区域，因整个地形外观与盆子相似而得名。换言之盆地是基底表面相对于海拔盆地是地球表面相对长时期沉降的区域盆地是地球表面（岩石圈表面）相对长时期沉降的区域，因整个地形外观与盆子相似而得名。换言之盆地是基底表面相对于海拔盆地是地球表面相对长时期沉降的区域盆地是地球表面（岩石圈表面）相对长时期沉降的区域，因整个地形外观与盆子相似而得名。换言之盆地是基底表面相对于海拔盆地是地球表面相对长时期沉降的区域
  20 + <div class="intro-box" v-if="item.intro">
  21 + {{item.intro}}
29 22 </div>
30 23  
31 24 <!-- 中间图片部分 -->
32   - <div class="center-box">
  25 + <div class="center-box" v-if="item.img">
33 26  
34 27 <!-- 达人图片展示（单独组建处理，宫格形式） -->
35   -
36   -
37   -
38   -
39   -
  28 + <palace-grid
  29 + :grids="item.img">
  30 + </palace-grid>
40 31 </div>
41 32  
42 33 <!-- 底部部分 -->
43   - <div class="bottom-box">
  34 + <div class="bottom-box" v-if="item.goods">
44 35  
45   - <!-- 附加信息slot -->
46   - <slot name="Add-info"></slot>
47   -
48   - <!-- 商品标签组建 -->
49   -
50   -
51   -
  36 + <!-- 热门信息 -->
  37 + <div class="hot-info-box" v-if="item.hot">
  38 + <div class="hot-img-box">
  39 + <img :src="item.hot.simg" class="hot-img" mode="heightFix" />
  40 + </div>
  41 + <div class="line"></div>
  42 + <div class="info">
  43 + {{item.hot.info}}
  44 + </div>
  45 + </div>
  46 +
  47 + <div class="goods-box">
52 48  
  49 + <!-- 商品标签组建 -->
  50 + <div class="goods" v-for="(goodsItem, goodsIndex) in item.goods" :key="goodsIndex">
53 51  
  52 + <!-- goodsItem_4 -->
  53 + <goods-item-4 @jump="goodsJump" @primary="goodsPrimary"
  54 + :item="goodsItem">
  55 + </goods-item-4>
  56 + </div>
  57 + </div>
54 58  
55 59 <!-- 评论/点赞/查看按钮 -->
56 60 <div class="comment-like-view-box">
57 61 <div class="left">
58   -
59   -
60   -
61   -
62   -
  62 +
  63 + <!-- 评论 -->
  64 + <div class="comment-box" v-if="item.comment_num">
  65 + <img src="static/img/icon_daren_list_comment.png" class="icon-img" />
  66 + <div class="number">{{item.comment_num}}</div>
  67 + </div>
  68 +
  69 + <!-- 点赞 -->
  70 + <div class="like-box" v-if="item.like_num">
  71 + <img src="static/img/icon_daren_list_like.png" class="icon-img" />
  72 + <div class="number">{{item.like_num}}</div>
  73 + </div>
63 74 </div>
64 75 <div class="right">
65   -
  76 + 查看
66 77 </div>
67 78 </div>
68 79 </div>
... ... @@ -75,9 +86,8 @@
75 86  
76 87 // 引入组件
77 88 import userAvatar from "@/components/userAvatarBox/userAvatarBox";
78   -
79   -
80   -
  89 + import palaceGrid from "@/components/palaceGrid/palaceGrid";
  90 + import goodsItem4 from "@/components/goodsItem_4/goodsItem_4";
81 91  
82 92 export default {
83 93 name: "darenListCom",
... ... @@ -86,14 +96,11 @@
86 96  
87 97 }
88 98 },
89   - props: ["lists"],
  99 + props: ["item"],
90 100 components: {
91 101 userAvatar,
92   -
93   -
94   -
95   -
96   -
  102 + palaceGrid,
  103 + goodsItem4
97 104 },
98 105 methods: {
99 106  
... ... @@ -111,6 +118,22 @@
111 118 */
112 119 userJump(item) {
113 120 this.$emit("userJump", item);
  121 + },
  122 +
  123 + /**
  124 + * 点击跳转商品
  125 + * @param {object} item [数据对象]
  126 + */
  127 + goodsJump(item) {
  128 + this.$emit("goodsJump", item);
  129 + },
  130 +
  131 + /**
  132 + * 点击跳转商品购买
  133 + * @param {object} item [数据对象]
  134 + */
  135 + goodsPrimary(item) {
  136 + this.$emit("goodsPrimary", item);
114 137 }
115 138 }
116 139 }
... ...
src/components/goodsItem_4/goodsItem_4.less 0 → 100644
  View file @95c5894
  1 +@charset "UTF-8";
  2 +
  3 +.goods-item-4-box {
  4 + background-color: #F6F6F6;
  5 + padding: 20px 0;
  6 + width: 690px;
  7 + height: 100px;
  8 + border-radius: 12px;
  9 + .main-box {
  10 + display: flex;
  11 + justify-content: space-between;
  12 + margin: 0 auto;
  13 + width: 650px;
  14 + height: 100%;
  15 + .left-box {
  16 + display: flex;
  17 + justify-content: flex-start;
  18 + align-items: center;
  19 + .img-box {
  20 + display: flex;
  21 + justify-content: center;
  22 + align-items: center;
  23 + width: 100px;
  24 + height: 100px;
  25 + border-radius: 8px;
  26 + overflow: hidden;
  27 + .img {
  28 + display: block;
  29 + width: 100px;
  30 + }
  31 + }
  32 + .content-box {
  33 + display: flex;
  34 + flex-direction: column;
  35 + justify-content: space-around;
  36 + margin-left: 30px;
  37 + width: 430px;
  38 + height: 100%;
  39 + .title {
  40 + color: #333333;
  41 + font-size: 32px;
  42 + white-space: nowrap;
  43 + text-overflow: ellipsis;
  44 + overflow: hidden;
  45 + }
  46 + .price {
  47 + color: #FC1541;
  48 + font-size: 30px;
  49 + white-space: nowrap;
  50 + text-overflow: ellipsis;
  51 + overflow: hidden;
  52 + }
  53 + }
  54 + }
  55 + .right-box {
  56 + display: flex;
  57 + justify-content: center;
  58 + align-items: center;
  59 + .buttons-box {
  60 + .btn {
  61 + width: 80px;
  62 + height: 80px;
  63 + &.btn-primary {
  64 + display: flex;
  65 + justify-content: center;
  66 + align-items: center;
  67 + background-color: #F5A623;
  68 + color: #FFFFFF;
  69 + font-size: 26px;
  70 + border-radius: 50%;
  71 + }
  72 + }
  73 + }
  74 + }
  75 + }
  76 +}
... ...
src/components/goodsItem_4/goodsItem_4.vue 0 → 100644
  View file @95c5894
  1 +<template>
  2 + <div class="goods-item-4-box" v-if="item" @click.stop.prevent @click="jump(item)">
  3 + <div class="main-box">
  4 + <div class="left-box">
  5 + <div class="img-box">
  6 + <img v-lazy="item.simg" class="img" mode="widthFix" />
  7 + </div>
  8 + <div class="content-box">
  9 + <div class="title">{{item.title}}</div>
  10 + <div class="price">￥&nbsp;{{item.price}}</div>
  11 + </div>
  12 + </div>
  13 + <div class="right-box">
  14 + <div class="buttons-box">
  15 + <div class="btn btn-primary" @click.stop.prevent @click="primary(item)">
  16 + 购买
  17 + </div>
  18 + </div>
  19 + </div>
  20 + </div>
  21 + </div>
  22 +</template>
  23 +
  24 +<script>
  25 + export default {
  26 + data: function () {
  27 + return {
  28 +
  29 + }
  30 + },
  31 + props: ["item"],
  32 + methods: {
  33 +
  34 + /**
  35 + * 点击跳转
  36 + * @param {object} item [数据对象]
  37 + */
  38 + jump(item) {
  39 + this.$emit("jump", item);
  40 + },
  41 +
  42 + /**
  43 + * 主按钮点击事件
  44 + * @param {object} item [数据对象]
  45 + */
  46 + primary(item) {
  47 + this.$emit("primary", item);
  48 + }
  49 + }
  50 + }
  51 +</script>
  52 +
  53 +<!-- Add "scoped" attribute to limit CSS to this component only -->
  54 +<style rel="stylesheet/less" lang="less" scoped>
  55 + @import './goodsItem_4';
  56 +</style>
... ...
src/components/palaceGrid/palaceGrid.less 0 → 100644
  View file @95c5894
  1 +@charset "UTF-8";
  2 +
  3 +.palace-grid-box {
  4 + .box {
  5 + .img-box {
  6 + display: flex;
  7 + justify-content: center;
  8 + align-items: center;
  9 + width: 100%;
  10 + height: 340px;
  11 + overflow: hidden;
  12 + .img {
  13 + display: block;
  14 + width: 100%;
  15 + }
  16 + }
  17 + }
  18 +}
... ...
src/components/palaceGrid/palaceGrid.vue 0 → 100644
  View file @95c5894
  1 +<template>
  2 + <div class="palace-grid-box" v-if="grids && grids.list && grids.list.length">
  3 + <div class="box">
  4 + <div class="img-box" v-for="(item, index) in grids.list" :key="index" @click="jump(item)">
  5 + <img v-lazy="item.img" class="img" mode="widthFix" />
  6 + </div>
  7 + </div>
  8 + </div>
  9 +</template>
  10 +
  11 +<script>
  12 + export default {
  13 + name: "palaceGrid",
  14 + data: function () {
  15 + return {
  16 +
  17 + }
  18 + },
  19 + props: ["grids"],
  20 + methods: {
  21 +
  22 + /**
  23 + * 点击跳转事件绑定
  24 + */
  25 + jump(item) {
  26 + this.$emit("jump", item);
  27 + }
  28 + }
  29 + }
  30 +</script>
  31 +
  32 +<!-- Add "scoped" attribute to limit CSS to this component only -->
  33 +<style rel="stylesheet/less" lang="less">
  34 + @import './palaceGrid';
  35 +</style>
0 36 \ No newline at end of file
... ...
src/components/userAvatarBox/userAvatarBox.vue
  View file @95c5894
... ... @@ -13,6 +13,7 @@
13 13  
14 14 <script>
15 15 export default {
  16 + name: "userAvatar",
16 17 data: function () {
17 18 return {
18 19  
... ...
src/pages/common/common.vue
  View file @95c5894
... ... @@ -556,18 +556,18 @@
556 556  
557 557  
558 558 break;
559   - case "24": // 跳转达人详情页，跟参数from=redirect
  559 + case "24": // 跳转达人个人主页连接，跟参数from=redirect
560 560  
561   - // 达人详情页连接
  561 + // 达人个人主页连接
562 562 if (item.to) {
563 563 window.location.href = (this.mode == "prod") ? "https://managemall.cnlive.com/html/preferred-library/1/#/pages/darenProfile/darenProfile?id=" + item.to + "&from=redirect" : "https://wjjshop.cnlive.com/html/preferred-library/1/#/pages/darenProfile/darenProfile?id=" + item.to + "&from=redirect";
564 564 }
565 565 break;
566   - case "25": // 跳转达人详情页，跟参数from=redirect
  566 + case "25": // 跳转达人动态详情页连接，跟参数from=redirect
567 567  
568   - // 达人详情页连接
569   - if (item.id) {
570   - window.location.href = (this.mode == "prod") ? "https://managemall.cnlive.com/html/preferred-library/1/#/pages/darenProfileDynamicDetail/darenProfileDynamicDetail?id=" + item.id + "&from=redirect" : "https://wjjshop.cnlive.com/html/preferred-library/1/#/pages/darenProfileDynamicDetail/darenProfileDynamicDetail?id=" + item.id + "&from=redirect";
  568 + // 达人动态详情页连接
  569 + if (item.id || item.to) {
  570 + window.location.href = (this.mode == "prod") ? "https://managemall.cnlive.com/html/preferred-library/1/#/pages/darenProfileDynamicDetail/darenProfileDynamicDetail?id=" + (item.id || item.to) + "&from=redirect" : "https://wjjshop.cnlive.com/html/preferred-library/1/#/pages/darenProfileDynamicDetail/darenProfileDynamicDetail?id=" + (item.id || item.to) + "&from=redirect";
571 571 }
572 572 break;
573 573 }
... ...
src/pages/darenList/darenList.less
  View file @95c5894
1 1 @charset "UTF-8";
2 2  
3   -.daren-list-box {
4   - .daren-list-com {
5   -
6   - }
  3 +.daren-list {
  4 + margin: 30px 0;
7 5 }
8 6 \ No newline at end of file
... ...
src/pages/darenList/darenList.vue
  View file @95c5894
1 1 <template>
2   - <div class="daren-list-box">
  2 + <div class="daren-list">
3 3  
4 4 <!-- 达人动态列表 -->
5   - <daren-list-com class="daren-list-com" @userJump="userJump" @jump="jump"
6   - :lists="{}">
  5 + <daren-list-box class="daren-list" @userJump="userJump" @jump="jump" @goodsJump="goodsJump" @goodsPrimary="goodsPrimary"
  6 + :lists="[
  7 + {
  8 + user: {
  9 + simg: 'static/img/6.png',
  10 + nickname: '欧阳娜娜'
  11 + },
  12 + createtime: '123分钟前',
  13 + intro: '盆地是地球表面（岩石圈表面）相对长时期沉降的区域，因整个地形外观与盆子相似而得名。换言之盆地是基底表面相对于海拔盆地是地球表面相对长时期沉降的区域盆地是地球表面（岩石圈表面）相对长时期沉降的区域，因整个地形外观与盆子相似而得名。换言之盆地是基底表面相对于海拔盆地是地球表面相对长时期沉降的区域盆地是地球表面（岩石圈表面）相对长时期沉降的区域，因整个地形外观与盆子相似而得名。换言之盆地是基底表面相对于海拔盆地是地球表面相对长时期沉降的区域盆地是地球表面（岩石圈表面）相对长时期沉降的区域，因整个地形外观与盆子相似而得名。换言之盆地是基底表面相对于海拔盆地是地球表面相对长时期沉降的区域',
  14 + img: {
  15 + list: [
  16 + {
  17 + img: 'static/img/banner-02.jpg'
  18 + }
  19 + ]
  20 + },
  21 + hot: {
  22 + simg: 'static/img/icon_popular_comment.png',
  23 + info: '口红很赞的哦，颜色很漂亮的显得肤色特别白嫩～口红很赞的哦，颜色很漂亮的显得肤色特别白嫩～口红很赞的哦，颜色很漂亮的显得肤色特别白嫩～'
  24 + },
  25 + goods: [
  26 + {
  27 + simg: 'static/img/pic_3.jpg',
  28 + title: '臻溪国奖茯全金花黑茶',
  29 + price: '288.00'
  30 + },
  31 + {
  32 + simg: 'static/img/pic_1.jpg',
  33 + title: '臻溪国奖茯全金花黑茶',
  34 + price: '288.00'
  35 + }
  36 + ],
  37 + comment_num: '11100',
  38 + like_num: '123'
  39 + },
  40 + {
  41 + user: {
  42 + simg: 'static/img/6.png',
  43 + nickname: '欧阳娜娜'
  44 + },
  45 + createtime: '123分钟前',
  46 + img: {
  47 + list: [
  48 + {
  49 + img: 'static/img/banner-03.jpg'
  50 + }
  51 + ]
  52 + },
  53 + hot: {
  54 + simg: 'static/img/icon_popular_comment.png',
  55 + info: '口红很赞的哦，颜色很漂亮的显得肤色特别白嫩～口红很赞的哦，颜色很漂亮的显得肤色特别白嫩～口红很赞的哦，颜色很漂亮的显得肤色特别白嫩～'
  56 + },
  57 + goods: [
  58 + {
  59 + simg: 'static/img/pic_3.jpg',
  60 + title: '臻溪国奖茯全金花黑茶',
  61 + price: '288.00'
  62 + }
  63 + ],
  64 + comment_num: '11100',
  65 + like_num: '123'
  66 + },
  67 + {
  68 + user: {
  69 + simg: 'static/img/6.png',
  70 + nickname: '欧阳娜娜'
  71 + },
  72 + createtime: '123分钟前',
  73 + intro: '盆地是地球表面（岩石圈表面）相对长时期沉降的区域，因整个地形外观与盆子相似而得名。换言之盆地是基底表面相对于海拔盆地是地球表面相对长时期沉降的区域盆地是地球表面（岩石圈表面）相对长时期沉降的区域，因整个地形外观与盆子相似而得名。换言之盆地是基底表面相对于海拔盆地是地球表面相对长时期沉降的区域盆地是地球表面（岩石圈表面）相对长时期沉降的区域，因整个地形外观与盆子相似而得名。换言之盆地是基底表面相对于海拔盆地是地球表面相对长时期沉降的区域盆地是地球表面（岩石圈表面）相对长时期沉降的区域，因整个地形外观与盆子相似而得名。换言之盆地是基底表面相对于海拔盆地是地球表面相对长时期沉降的区域',
  74 + hot: {
  75 + simg: 'static/img/icon_popular_comment.png',
  76 + info: '口红很赞的哦，颜色很漂亮的显得肤色特别白嫩～口红很赞的哦，颜色很漂亮的显得肤色特别白嫩～口红很赞的哦，颜色很漂亮的显得肤色特别白嫩～'
  77 + },
  78 + goods: [
  79 + {
  80 + simg: 'static/img/pic_3.jpg',
  81 + title: '臻溪国奖茯全金花黑茶',
  82 + price: '288.00'
  83 + },
  84 + {
  85 + simg: 'static/img/pic_2.jpg',
  86 + title: '臻溪国奖茯全金花黑茶',
  87 + price: '288.00'
  88 + },
  89 + {
  90 + simg: 'static/img/pic_1.jpg',
  91 + title: '臻溪国奖茯全金花黑茶',
  92 + price: '288.00'
  93 + },
  94 + {
  95 + simg: 'static/img/pic_3.jpg',
  96 + title: '臻溪国奖茯全金花黑茶',
  97 + price: '288.00'
  98 + },
  99 + {
  100 + simg: 'static/img/pic_2.jpg',
  101 + title: '臻溪国奖茯全金花黑茶',
  102 + price: '288.00'
  103 + },
  104 + {
  105 + simg: 'static/img/pic_1.jpg',
  106 + title: '臻溪国奖茯全金花黑茶',
  107 + price: '288.00'
  108 + }
  109 + ],
  110 + comment_num: '11100',
  111 + like_num: '123'
  112 + }
  113 + ]">
7 114  
8 115 <!-- 最新动态标题 -->
9   - <text-title-box slot="title-box"
  116 + <text-title-box slot="title-box" @more="newDarenDynamicsMore"
10 117 :titles="{
11 118 title: '最新动态',
12 119 more: true
13 120 }">
14 121 </text-title-box>
15   - </daren-list-com>
  122 + </daren-list-box>
  123 +
  124 +
  125 +
  126 +
16 127  
17 128  
18 129  
... ... @@ -28,10 +139,8 @@
28 139  
29 140 // 引入组件
30 141 import { Toast, Indicator } from "mint-ui";
31   - import darenListCom from "@/components/darenListCom/darenListCom";
  142 + import darenListBox from "@/components/darenListBox/darenListBox";
32 143 import textTitleBox from "@/components/textTitleBox/textTitleBox";
33   -
34   -
35 144  
36 145 export default {
37 146 name: "darenList",
... ... @@ -45,16 +154,14 @@
45 154 }
46 155 },
47 156 components:{
48   - darenListCom,
49   - textTitleBox,
50   -
51   -
52   -
53   -
54   -
  157 + darenListBox,
  158 + textTitleBox
55 159 },
56 160 created() {
57 161  
  162 + // 设置标题
  163 + this.$set(this, "title", "达人");
  164 +
58 165 // 获取优选库精选活动
59 166 // this.activityAd();
60 167 },
... ... @@ -153,17 +260,39 @@
153 260 },
154 261  
155 262 /**
  263 + * 最新达人动态更过
  264 + */
  265 + newDarenDynamicsMore() {
  266 +
  267 +
  268 +
  269 + console.log("newDarenDynamicsMore");
  270 +
  271 +
  272 +
  273 + },
  274 +
  275 + /**
156 276 * 跳转达人动态详情
157 277 * @param {object} item [数据对象]
158 278 */
159 279 jump(item) {
160 280  
  281 + // 判断并调用通用跳转
  282 + if (typeof this.$parent.gotoDetail === "function") {
161 283  
162   - console.log("jump", item);
163 284  
  285 + // 临时，设置跳转参数，跳转达人动态详情页面
  286 + Object.assign(item, {
  287 + type: "25",
  288 + to: "265",
  289 + shop_type: ""
  290 + });
164 291  
165   - // 判断并调用通用跳转
166   - if (typeof this.$parent.gotoDetail === "function") {
  292 +
  293 + console.log("jump", item);
  294 +
  295 +
167 296 this.$parent.gotoDetail(item);
168 297 }
169 298 },
... ... @@ -175,12 +304,69 @@
175 304 userJump(item) {
176 305  
177 306  
  307 + // 临时，设置跳转达人个人主页用户数据
  308 + Object.assign(item, {
  309 + to: "40"
  310 + });
  311 +
  312 +
178 313  
179 314 console.log("userJump", item);
  315 +
  316 +
  317 + window.location.href = (this.mode == "prod") ? "https://managemall.cnlive.com/html/preferred-library/1/#/pages/darenProfile/darenProfile?id=" + item.to + "&from=redirect" : "https://wjjshop.cnlive.com/html/preferred-library/1/#/pages/darenProfile/darenProfile?id=" + item.to + "&from=redirect";
  318 +
  319 +
  320 + },
  321 +
  322 + /**
  323 + * 点击跳转商品
  324 + * @param {object} item [数据对象]
  325 + */
  326 + goodsJump(item) {
180 327  
  328 + // 判断并调用通用跳转
  329 + if (typeof this.$parent.gotoDetail === "function") {
  330 +
  331 + // 临时，设置跳转商品详情参数
  332 + Object.assign(item, {
  333 + type: "2",
  334 + to: "9525393",
  335 + shop_type: "1"
  336 + });
  337 +
181 338  
  339 + console.log("goodsJump", item);
182 340  
183 341  
  342 +
  343 + this.$parent.gotoDetail(item);
  344 + }
  345 + },
  346 +
  347 + /**
  348 + * 点击跳转商品购买
  349 + * @param {object} item [数据对象]
  350 + */
  351 + goodsPrimary(item) {
  352 +
  353 + // 判断并调用通用跳转
  354 + if (typeof this.$parent.gotoDetail === "function") {
  355 +
  356 + // 临时，设置跳转商品详情参数
  357 + Object.assign(item, {
  358 + type: "2",
  359 + to: "9525393",
  360 + shop_type: "1"
  361 + });
  362 +
  363 +
  364 + console.log("goodsPrimary", item);
  365 +
  366 +
  367 +
  368 + this.$parent.gotoDetail(item);
  369 + }
184 370 }
185 371 },
186 372 head: {
... ...