Commit cc852a3f758a00057831a120c2ad8e60593a0174
1 parent
03e5a21f
数据绑定
Showing
4 changed files
with
28 additions
and
158 deletions
src/components/darenListCom/darenListCom.vue
| 1 | 1 | <template> |
| 2 | - <div class="daren-list-com" v-if="item && (item.intro || item.img || item.goods)"> | |
| 2 | + <div class="daren-list-com" v-if="item && (item.title || item.img || item.goods || item.shop_user)"> | |
| 3 | 3 | <div class="box" @click.stop.prevent @click="jump(item)"> |
| 4 | 4 | <div class="top-box" v-if="item.user" @click.stop.prevent @click="userJump(item)"> |
| 5 | 5 | <div class="top-left"> |
| 6 | 6 | |
| 7 | 7 | <!-- 用户头像/昵称 --> |
| 8 | 8 | <user-avatar class="user-avatar-box" |
| 9 | - :users="item.user"> | |
| 9 | + :users="item.shop_user"> | |
| 10 | 10 | </user-avatar> |
| 11 | 11 | </div> |
| 12 | 12 | <div class="top-right"> |
| 13 | 13 | |
| 14 | 14 | <!-- 发布时间 --> |
| 15 | - {{item.createtime}} | |
| 15 | + {{item.time}} | |
| 16 | 16 | </div> |
| 17 | 17 | </div> |
| 18 | 18 | |
| 19 | 19 | <!-- 动态简介 --> |
| 20 | - <div class="intro-box" v-if="item.intro"> | |
| 21 | - {{item.intro}} | |
| 20 | + <div class="intro-box" v-if="item.title"> | |
| 21 | + {{item.title}} | |
| 22 | 22 | </div> |
| 23 | 23 | |
| 24 | 24 | <!-- 中间图片部分 --> |
| 25 | 25 | <div class="center-box" v-if="item.img"> |
| 26 | - | |
| 26 | + | |
| 27 | 27 | <!-- 达人图片展示(单独组建处理,宫格形式) --> |
| 28 | 28 | <palace-grid |
| 29 | - :grids="item.img"> | |
| 29 | + :grids="{ | |
| 30 | + list:item.img | |
| 31 | + }"> | |
| 30 | 32 | </palace-grid> |
| 31 | 33 | </div> |
| 32 | 34 | |
| 33 | 35 | <!-- 底部部分 --> |
| 34 | 36 | <div class="bottom-box" v-if="item.goods"> |
| 35 | - | |
| 37 | + | |
| 36 | 38 | <!-- 热门信息 --> |
| 37 | - <div class="hot-info-box" v-if="item.hot"> | |
| 39 | + <div class="hot-info-box" v-if="item&&item.comment_content&&item.comment_content.content"> | |
| 38 | 40 | <div class="hot-img-box"> |
| 39 | - <img :src="item.hot.simg" class="hot-img" mode="heightFix" /> | |
| 41 | + <img :src="item.goods.simg" class="hot-img" mode="heightFix" /> | |
| 40 | 42 | </div> |
| 41 | 43 | <div class="line"></div> |
| 42 | 44 | <div class="info"> |
| 43 | - {{item.hot.info}} | |
| 45 | + {{item.comment_content.content}} | |
| 44 | 46 | </div> |
| 45 | 47 | </div> |
| 46 | - | |
| 48 | + | |
| 47 | 49 | <div class="goods-box"> |
| 48 | 50 | |
| 49 | 51 | <!-- 商品标签组建 --> |
| 50 | - <div class="goods" v-for="(goodsItem, goodsIndex) in item.goods" :key="goodsIndex"> | |
| 51 | - | |
| 52 | + <div class="goods"> | |
| 52 | 53 | <!-- goodsItem_4 --> |
| 53 | 54 | <goods-item-4 @jump="goodsJump" @primary="goodsPrimary" |
| 54 | - :item="goodsItem"> | |
| 55 | + :item="item.goods"> | |
| 55 | 56 | </goods-item-4> |
| 56 | 57 | </div> |
| 57 | 58 | </div> |
| ... | ... | @@ -59,17 +60,17 @@ |
| 59 | 60 | <!-- 评论/点赞/查看按钮 --> |
| 60 | 61 | <div class="comment-like-view-box"> |
| 61 | 62 | <div class="left"> |
| 62 | - | |
| 63 | + | |
| 63 | 64 | <!-- 评论 --> |
| 64 | - <div class="comment-box" v-if="item.comment_num"> | |
| 65 | + <div class="comment-box" v-if="item.comment"> | |
| 65 | 66 | <img src="static/img/icon_daren_list_comment.png" class="icon-img" /> |
| 66 | - <div class="number">{{item.comment_num}}</div> | |
| 67 | + <div class="number">{{item.comment}}</div> | |
| 67 | 68 | </div> |
| 68 | 69 | |
| 69 | 70 | <!-- 点赞 --> |
| 70 | - <div class="like-box" v-if="item.like_num"> | |
| 71 | + <div class="like-box" v-if="item.upper"> | |
| 71 | 72 | <img src="static/img/icon_daren_list_like.png" class="icon-img" /> |
| 72 | - <div class="number">{{item.like_num}}</div> | |
| 73 | + <div class="number">{{item.upper}}</div> | |
| 73 | 74 | </div> |
| 74 | 75 | </div> |
| 75 | 76 | <div class="right"> | ... | ... |
src/components/palaceGrid/palaceGrid.vue
src/components/userAvatarBox/userAvatarBox.vue
| ... | ... | @@ -2,10 +2,10 @@ |
| 2 | 2 | <div class="user-avatar-box" v-if="users" @click="jump(users)"> |
| 3 | 3 | <div class="box"> |
| 4 | 4 | <div class="avatar-box"> |
| 5 | - <img v-lazy="users.simg" class="avatar-img" /> | |
| 5 | + <img v-lazy="users.logo" class="avatar-img" /> | |
| 6 | 6 | </div> |
| 7 | 7 | <div class="nickname"> |
| 8 | - {{users.nickname}} | |
| 8 | + {{users.title}} | |
| 9 | 9 | </div> |
| 10 | 10 | </div> |
| 11 | 11 | </div> |
| ... | ... | @@ -16,12 +16,12 @@ |
| 16 | 16 | name: "userAvatar", |
| 17 | 17 | data: function () { |
| 18 | 18 | return { |
| 19 | - | |
| 19 | + | |
| 20 | 20 | } |
| 21 | 21 | }, |
| 22 | 22 | props: ["users"], |
| 23 | 23 | methods: { |
| 24 | - | |
| 24 | + | |
| 25 | 25 | /** |
| 26 | 26 | * 点击跳转事件绑定 |
| 27 | 27 | */ |
| ... | ... | @@ -35,4 +35,4 @@ |
| 35 | 35 | <!-- Add "scoped" attribute to limit CSS to this component only --> |
| 36 | 36 | <style rel="stylesheet/less" lang="less"> |
| 37 | 37 | @import './userAvatarBox'; |
| 38 | -</style> | |
| 39 | 38 | \ No newline at end of file |
| 39 | +</style> | ... | ... |
src/pages/newDaren/newDaren.vue
| ... | ... | @@ -24,138 +24,7 @@ |
| 24 | 24 | </horiz-list> |
| 25 | 25 | <!-- 达人动态列表 --> |
| 26 | 26 | <daren-list-box class="daren-list" @userJump="userJump" @jump="jump" @goodsJump="goodsJump" @goodsPrimary="goodsPrimary" |
| 27 | - :lists="[ | |
| 28 | - { | |
| 29 | - user: { | |
| 30 | - simg: 'static/img/6.png', | |
| 31 | - nickname: '欧阳娜娜' | |
| 32 | - }, | |
| 33 | - createtime: '123分钟前', | |
| 34 | - intro: '盆地是地球表面(岩石圈表面)相对长时期沉降的区域,因整个地形外观与盆子相似而得名。换言之盆地是基底表面相对于海拔盆地是地球表面相对长时期沉降的区域盆地是地球表面(岩石圈表面)相对长时期沉降的区域,因整个地形外观与盆子相似而得名。换言之盆地是基底表面相对于海拔盆地是地球表面相对长时期沉降的区域盆地是地球表面(岩石圈表面)相对长时期沉降的区域,因整个地形外观与盆子相似而得名。换言之盆地是基底表面相对于海拔盆地是地球表面相对长时期沉降的区域盆地是地球表面(岩石圈表面)相对长时期沉降的区域,因整个地形外观与盆子相似而得名。换言之盆地是基底表面相对于海拔盆地是地球表面相对长时期沉降的区域', | |
| 35 | - img: { | |
| 36 | - list: [ | |
| 37 | - { | |
| 38 | - img: 'static/img/banner-02.jpg' | |
| 39 | - } | |
| 40 | - ] | |
| 41 | - }, | |
| 42 | - hot: { | |
| 43 | - simg: 'static/img/icon_popular_comment.png', | |
| 44 | - info: '口红很赞的哦,颜色很漂亮的显得肤色特别白嫩~口红很赞的哦,颜色很漂亮的显得肤色特别白嫩~口红很赞的哦,颜色很漂亮的显得肤色特别白嫩~' | |
| 45 | - }, | |
| 46 | - goods: [ | |
| 47 | - { | |
| 48 | - simg: 'static/img/pic_3.jpg', | |
| 49 | - title: '臻溪国奖茯全金花黑茶', | |
| 50 | - price: '288.00' | |
| 51 | - } | |
| 52 | - ], | |
| 53 | - comment_num: '11100', | |
| 54 | - like_num: '123' | |
| 55 | - }, | |
| 56 | - { | |
| 57 | - user: { | |
| 58 | - simg: 'static/img/6.png', | |
| 59 | - nickname: '欧阳娜娜' | |
| 60 | - }, | |
| 61 | - createtime: '123分钟前', | |
| 62 | - img: { | |
| 63 | - list: [ | |
| 64 | - { | |
| 65 | - img: 'static/img/banner-03.jpg' | |
| 66 | - } | |
| 67 | - ] | |
| 68 | - }, | |
| 69 | - hot: { | |
| 70 | - simg: 'static/img/icon_popular_comment.png', | |
| 71 | - info: '口红很赞的哦,颜色很漂亮的显得肤色特别白嫩~口红很赞的哦,颜色很漂亮的显得肤色特别白嫩~口红很赞的哦,颜色很漂亮的显得肤色特别白嫩~' | |
| 72 | - }, | |
| 73 | - goods: [ | |
| 74 | - { | |
| 75 | - simg: 'static/img/pic_3.jpg', | |
| 76 | - title: '臻溪国奖茯全金花黑茶', | |
| 77 | - price: '288.00' | |
| 78 | - } | |
| 79 | - ], | |
| 80 | - comment_num: '11100', | |
| 81 | - like_num: '123' | |
| 82 | - }, | |
| 83 | - { | |
| 84 | - user: { | |
| 85 | - simg: 'static/img/6.png', | |
| 86 | - nickname: '欧阳娜娜' | |
| 87 | - }, | |
| 88 | - createtime: '123分钟前', | |
| 89 | - intro: '盆地是地球表面(岩石圈表面)相对长时期沉降的区域,因整个地形外观与盆子相似而得名。换言之盆地是基底表面相对于海拔盆地是地球表面相对长时期沉降的区域盆地是地球表面(岩石圈表面)相对长时期沉降的区域,因整个地形外观与盆子相似而得名。换言之盆地是基底表面相对于海拔盆地是地球表面相对长时期沉降的区域盆地是地球表面(岩石圈表面)相对长时期沉降的区域,因整个地形外观与盆子相似而得名。换言之盆地是基底表面相对于海拔盆地是地球表面相对长时期沉降的区域盆地是地球表面(岩石圈表面)相对长时期沉降的区域,因整个地形外观与盆子相似而得名。换言之盆地是基底表面相对于海拔盆地是地球表面相对长时期沉降的区域', | |
| 90 | - hot: { | |
| 91 | - simg: 'static/img/icon_popular_comment.png', | |
| 92 | - info: '口红很赞的哦,颜色很漂亮的显得肤色特别白嫩~口红很赞的哦,颜色很漂亮的显得肤色特别白嫩~口红很赞的哦,颜色很漂亮的显得肤色特别白嫩~' | |
| 93 | - }, | |
| 94 | - goods: [ | |
| 95 | - { | |
| 96 | - simg: 'static/img/pic_3.jpg', | |
| 97 | - title: '臻溪国奖茯全金花黑茶', | |
| 98 | - price: '288.00' | |
| 99 | - }, | |
| 100 | - { | |
| 101 | - simg: 'static/img/pic_2.jpg', | |
| 102 | - title: '臻溪国奖茯全金花黑茶', | |
| 103 | - price: '288.00' | |
| 104 | - }, | |
| 105 | - { | |
| 106 | - simg: 'static/img/pic_1.jpg', | |
| 107 | - title: '臻溪国奖茯全金花黑茶', | |
| 108 | - price: '288.00' | |
| 109 | - }, | |
| 110 | - { | |
| 111 | - simg: 'static/img/pic_3.jpg', | |
| 112 | - title: '臻溪国奖茯全金花黑茶', | |
| 113 | - price: '288.00' | |
| 114 | - }, | |
| 115 | - { | |
| 116 | - simg: 'static/img/pic_2.jpg', | |
| 117 | - title: '臻溪国奖茯全金花黑茶', | |
| 118 | - price: '288.00' | |
| 119 | - }, | |
| 120 | - { | |
| 121 | - simg: 'static/img/pic_1.jpg', | |
| 122 | - title: '臻溪国奖茯全金花黑茶', | |
| 123 | - price: '288.00' | |
| 124 | - } | |
| 125 | - ], | |
| 126 | - comment_num: '11100', | |
| 127 | - like_num: '123' | |
| 128 | - }, | |
| 129 | - { | |
| 130 | - user: { | |
| 131 | - simg: 'static/img/6.png', | |
| 132 | - nickname: '欧阳娜娜' | |
| 133 | - }, | |
| 134 | - createtime: '123分钟前', | |
| 135 | - intro: '盆地是地球表面(岩石圈表面)相对长时期沉降的区域,因整个地形外观与盆子相似而得名。换言之盆地是基底表面相对于海拔盆地是地球表面相对长时期沉降的区域盆地是地球表面(岩石圈表面)相对长时期沉降的区域,因整个地形外观与盆子相似而得名。换言之盆地是基底表面相对于海拔盆地是地球表面相对长时期沉降的区域盆地是地球表面(岩石圈表面)相对长时期沉降的区域,因整个地形外观与盆子相似而得名。换言之盆地是基底表面相对于海拔盆地是地球表面相对长时期沉降的区域盆地是地球表面(岩石圈表面)相对长时期沉降的区域,因整个地形外观与盆子相似而得名。换言之盆地是基底表面相对于海拔盆地是地球表面相对长时期沉降的区域', | |
| 136 | - img: { | |
| 137 | - list: [ | |
| 138 | - { | |
| 139 | - img: 'static/img/banner-02.jpg' | |
| 140 | - } | |
| 141 | - ] | |
| 142 | - }, | |
| 143 | - goods: [ | |
| 144 | - { | |
| 145 | - simg: 'static/img/pic_3.jpg', | |
| 146 | - title: '臻溪国奖茯全金花黑茶', | |
| 147 | - price: '288.00' | |
| 148 | - }, | |
| 149 | - { | |
| 150 | - simg: 'static/img/pic_1.jpg', | |
| 151 | - title: '臻溪国奖茯全金花黑茶', | |
| 152 | - price: '288.00' | |
| 153 | - } | |
| 154 | - ], | |
| 155 | - comment_num: '11100', | |
| 156 | - like_num: '123' | |
| 157 | - } | |
| 158 | - ]"> | |
| 27 | + :lists="shopFnsDynamic"> | |
| 159 | 28 | |
| 160 | 29 | <!-- 最新动态标题 --> |
| 161 | 30 | <text-title-box slot="title-box" @more="newDarenDynamicsMore" | ... | ... |