Commit 95c58949c941f11a57a6f095a3a84a8905036d1a

Authored by 王强
1 parent adc35fb3

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

src/components/darenListBox/darenListBox.less 0 → 100644
  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 \ No newline at end of file 15 \ No newline at end of file
src/components/darenListBox/darenListBox.vue 0 → 100644
  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
1 @charset "UTF-8"; 1 @charset "UTF-8";
2 2
3 .daren-list-com { 3 .daren-list-com {
4 - .title-box + .box {  
5 - margin-top: 30px;  
6 - }  
7 > .box { 4 > .box {
8 margin: 0 auto; 5 margin: 0 auto;
9 width: 690px; 6 width: 690px;
@@ -37,35 +34,78 @@ @@ -37,35 +34,78 @@
37 } 34 }
38 .center-box { 35 .center-box {
39 margin-top: 20px; 36 margin-top: 20px;
40 -  
41 -  
42 -  
43 -  
44 -  
45 } 37 }
46 .bottom-box { 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 .comment-like-view-box { 74 .comment-like-view-box {
52 display: flex; 75 display: flex;
53 justify-content: space-between; 76 justify-content: space-between;
54 align-items: center; 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 \ No newline at end of file 112 \ No newline at end of file
src/components/darenListCom/darenListCom.vue
1 <template> 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 <div class="top-left"> 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 </user-avatar> 10 </user-avatar>
18 </div> 11 </div>
19 <div class="top-right"> 12 <div class="top-right">
20 13
21 <!-- 发布时间 --> 14 <!-- 发布时间 -->
22 - 26秒前 15 + {{item.createtime}}
23 </div> 16 </div>
24 </div> 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 </div> 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 </div> 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 <div class="comment-like-view-box"> 60 <div class="comment-like-view-box">
57 <div class="left"> 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 </div> 74 </div>
64 <div class="right"> 75 <div class="right">
65 - 76 + 查看
66 </div> 77 </div>
67 </div> 78 </div>
68 </div> 79 </div>
@@ -75,9 +86,8 @@ @@ -75,9 +86,8 @@
75 86
76 // 引入组件 87 // 引入组件
77 import userAvatar from "@/components/userAvatarBox/userAvatarBox"; 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 export default { 92 export default {
83 name: "darenListCom", 93 name: "darenListCom",
@@ -86,14 +96,11 @@ @@ -86,14 +96,11 @@
86 96
87 } 97 }
88 }, 98 },
89 - props: ["lists"], 99 + props: ["item"],
90 components: { 100 components: {
91 userAvatar, 101 userAvatar,
92 -  
93 -  
94 -  
95 -  
96 - 102 + palaceGrid,
  103 + goodsItem4
97 }, 104 },
98 methods: { 105 methods: {
99 106
@@ -111,6 +118,22 @@ @@ -111,6 +118,22 @@
111 */ 118 */
112 userJump(item) { 119 userJump(item) {
113 this.$emit("userJump", item); 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
  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
  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
  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
  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 \ No newline at end of file 36 \ No newline at end of file
src/components/userAvatarBox/userAvatarBox.vue
@@ -13,6 +13,7 @@ @@ -13,6 +13,7 @@
13 13
14 <script> 14 <script>
15 export default { 15 export default {
  16 + name: "userAvatar",
16 data: function () { 17 data: function () {
17 return { 18 return {
18 19
src/pages/common/common.vue
@@ -556,18 +556,18 @@ @@ -556,18 +556,18 @@
556 556
557 557
558 break; 558 break;
559 - case "24": // 跳转达人详情页,跟参数from=redirect 559 + case "24": // 跳转达人个人主页连接,跟参数from=redirect
560 560
561 - // 达人详情页连接 561 + // 达人个人主页连接
562 if (item.to) { 562 if (item.to) {
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"; 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 break; 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 break; 572 break;
573 } 573 }
src/pages/darenList/darenList.less
1 @charset "UTF-8"; 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 \ No newline at end of file 6 \ No newline at end of file
src/pages/darenList/darenList.vue
1 <template> 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 :titles="{ 117 :titles="{
11 title: '最新动态', 118 title: '最新动态',
12 more: true 119 more: true
13 }"> 120 }">
14 </text-title-box> 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,10 +139,8 @@
28 139
29 // 引入组件 140 // 引入组件
30 import { Toast, Indicator } from "mint-ui"; 141 import { Toast, Indicator } from "mint-ui";
31 - import darenListCom from "@/components/darenListCom/darenListCom"; 142 + import darenListBox from "@/components/darenListBox/darenListBox";
32 import textTitleBox from "@/components/textTitleBox/textTitleBox"; 143 import textTitleBox from "@/components/textTitleBox/textTitleBox";
33 -  
34 -  
35 144
36 export default { 145 export default {
37 name: "darenList", 146 name: "darenList",
@@ -45,16 +154,14 @@ @@ -45,16 +154,14 @@
45 } 154 }
46 }, 155 },
47 components:{ 156 components:{
48 - darenListCom,  
49 - textTitleBox,  
50 -  
51 -  
52 -  
53 -  
54 - 157 + darenListBox,
  158 + textTitleBox
55 }, 159 },
56 created() { 160 created() {
57 161
  162 + // 设置标题
  163 + this.$set(this, "title", "达人");
  164 +
58 // 获取优选库精选活动 165 // 获取优选库精选活动
59 // this.activityAd(); 166 // this.activityAd();
60 }, 167 },
@@ -153,17 +260,39 @@ @@ -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 * @param {object} item [数据对象] 277 * @param {object} item [数据对象]
158 */ 278 */
159 jump(item) { 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 this.$parent.gotoDetail(item); 296 this.$parent.gotoDetail(item);
168 } 297 }
169 }, 298 },
@@ -175,12 +304,69 @@ @@ -175,12 +304,69 @@
175 userJump(item) { 304 userJump(item) {
176 305
177 306
  307 + // 临时,设置跳转达人个人主页用户数据
  308 + Object.assign(item, {
  309 + to: "40"
  310 + });
  311 +
  312 +
178 313
179 console.log("userJump", item); 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 head: { 372 head: {