w-front-end / select_good · Commits

Commit 44dbef9acd26d6a8aa4a1e50a5bf66c38764ac77

Authored by zhiyangdu
1 parent 6d689b33

新的达人页面

Inline Side-by-side
Showing 5 changed files with 564 additions and 0 deletions
src/components/darenInfo/darenInfo.less 0 → 100644
  View file @44dbef9
  1 +.item_box{
  2 + margin: 30px;
  3 + padding-bottom: 30px;
  4 + display: flex;
  5 + align-items: center;
  6 + .head_portrait{
  7 + width: 100px;
  8 + height: 100px;
  9 + border-radius: 100px;
  10 + }
  11 + .user_info{
  12 + margin-left: 30px;
  13 + text-align: left;
  14 + flex: 1;
  15 + .daren_box{
  16 + display: flex;
  17 + height: 40px;
  18 + align-items: center;
  19 + .name{
  20 + height:40px;
  21 + font-size:28px;
  22 + font-weight:500;
  23 + color:rgba(51,51,51,1);
  24 + line-height:40px;
  25 + -webkit-line-clamp: 1;
  26 + /*! autoprefixer: off */
  27 + -webkit-box-orient: vertical;
  28 + /*! autoprefixer: on */
  29 + text-overflow: ellipsis;
  30 + overflow: hidden;
  31 + }
  32 + .tag{
  33 + height: 28px;
  34 + line-height: 28px;
  35 + padding: 0 8px;
  36 + border-radius:6px;
  37 + border:1px solid rgba(245,166,35,1);
  38 + font-size:20px;
  39 + color:rgba(245,166,35,1);
  40 + margin-left: 10px;
  41 + }
  42 + }
  43 + .desc{
  44 + height:33px;
  45 + font-size:24px;
  46 + font-weight:400;
  47 + color:rgba(102,102,102,1);
  48 + line-height:33px;
  49 + margin-top: 10px;
  50 + }
  51 + }
  52 + .btn{
  53 + width:120px;
  54 + height:48px;
  55 + background:rgba(255,236,239,1);
  56 + border-radius:26px;
  57 + color: #FC1541;
  58 + font-size: 26px;
  59 + text-align: center;
  60 + line-height: 48px;
  61 + }
  62 +}
src/components/darenInfo/darenInfo.vue 0 → 100644
  View file @44dbef9
  1 +<template>
  2 + <div>
  3 + <div class="item_box" @click="toDetail(darenInfo)">
  4 + <!--<img class="head_portrait" v-lazy="darenInfo.user_img" />-->
  5 + <img class="head_portrait" src="/static/img/2.png" />
  6 + <div class="user_info">
  7 + <div class="daren_box">
  8 + <div class="name">
  9 + 冯提莫
  10 + </div>
  11 + <div class="tag">
  12 + 人气
  13 + </div>
  14 + </div>
  15 + <div class="desc">
  16 + 冯提莫描述
  17 + </div>
  18 + </div>
  19 + <div class="btn">
  20 + 查看
  21 + </div>
  22 + </div>
  23 + </div>
  24 +</template>
  25 +
  26 +<script>
  27 + export default {
  28 + name: 'darenInfo',
  29 + data() {
  30 + return {
  31 +
  32 + }
  33 + },
  34 + props: ["darenInfo"],
  35 + methods: {
  36 +
  37 + /**
  38 + * 点击事件
  39 + * @param {object} item [数据参数]
  40 + */
  41 + toDetail(item) {
  42 + this.$emit("toDetail", item);
  43 + }
  44 + }
  45 + }
  46 +</script>
  47 +
  48 +<!-- Add "scoped" attribute to limit CSS to this component only -->
  49 +<style rel="stylesheet/less" lang="less" scoped>
  50 + @import "darenInfo";
  51 +</style>
src/pages/newDaren/newDaren.less 0 → 100644
  View file @44dbef9
  1 +@charset "UTF-8";
  2 +
  3 +.daren-list {
  4 + margin: 30px 0;
  5 +}
0 \ No newline at end of file 6 \ No newline at end of file
src/pages/newDaren/newDaren.vue 0 → 100644
  View file @44dbef9
  1 +<template>
  2 + <div class="daren-list">
  3 + <!--轮播-->
  4 + <swiper v-if="banner"
  5 + :swipers="banner"
  6 + :options="{
  7 + showIndicators: false
  8 + }">
  9 + </swiper>
  10 + <!--达人信息-->
  11 + <darenInfo :darenInfo="darenInfo"></darenInfo>
  12 + <!-- 达人动态列表 -->
  13 + <daren-list-box class="daren-list" @userJump="userJump" @jump="jump" @goodsJump="goodsJump" @goodsPrimary="goodsPrimary"
  14 + :lists="[
  15 + {
  16 + user: {
  17 + simg: 'static/img/6.png',
  18 + nickname: '欧阳娜娜'
  19 + },
  20 + createtime: '123分钟前',
  21 + intro: '盆地是地球表面（岩石圈表面）相对长时期沉降的区域，因整个地形外观与盆子相似而得名。换言之盆地是基底表面相对于海拔盆地是地球表面相对长时期沉降的区域盆地是地球表面（岩石圈表面）相对长时期沉降的区域，因整个地形外观与盆子相似而得名。换言之盆地是基底表面相对于海拔盆地是地球表面相对长时期沉降的区域盆地是地球表面（岩石圈表面）相对长时期沉降的区域，因整个地形外观与盆子相似而得名。换言之盆地是基底表面相对于海拔盆地是地球表面相对长时期沉降的区域盆地是地球表面（岩石圈表面）相对长时期沉降的区域，因整个地形外观与盆子相似而得名。换言之盆地是基底表面相对于海拔盆地是地球表面相对长时期沉降的区域',
  22 + img: {
  23 + list: [
  24 + {
  25 + img: 'static/img/banner-02.jpg'
  26 + }
  27 + ]
  28 + },
  29 + hot: {
  30 + simg: 'static/img/icon_popular_comment.png',
  31 + info: '口红很赞的哦，颜色很漂亮的显得肤色特别白嫩～口红很赞的哦，颜色很漂亮的显得肤色特别白嫩～口红很赞的哦，颜色很漂亮的显得肤色特别白嫩～'
  32 + },
  33 + goods: [
  34 + {
  35 + simg: 'static/img/pic_3.jpg',
  36 + title: '臻溪国奖茯全金花黑茶',
  37 + price: '288.00'
  38 + }
  39 + ],
  40 + comment_num: '11100',
  41 + like_num: '123'
  42 + },
  43 + {
  44 + user: {
  45 + simg: 'static/img/6.png',
  46 + nickname: '欧阳娜娜'
  47 + },
  48 + createtime: '123分钟前',
  49 + img: {
  50 + list: [
  51 + {
  52 + img: 'static/img/banner-03.jpg'
  53 + }
  54 + ]
  55 + },
  56 + hot: {
  57 + simg: 'static/img/icon_popular_comment.png',
  58 + info: '口红很赞的哦，颜色很漂亮的显得肤色特别白嫩～口红很赞的哦，颜色很漂亮的显得肤色特别白嫩～口红很赞的哦，颜色很漂亮的显得肤色特别白嫩～'
  59 + },
  60 + goods: [
  61 + {
  62 + simg: 'static/img/pic_3.jpg',
  63 + title: '臻溪国奖茯全金花黑茶',
  64 + price: '288.00'
  65 + }
  66 + ],
  67 + comment_num: '11100',
  68 + like_num: '123'
  69 + },
  70 + {
  71 + user: {
  72 + simg: 'static/img/6.png',
  73 + nickname: '欧阳娜娜'
  74 + },
  75 + createtime: '123分钟前',
  76 + intro: '盆地是地球表面（岩石圈表面）相对长时期沉降的区域，因整个地形外观与盆子相似而得名。换言之盆地是基底表面相对于海拔盆地是地球表面相对长时期沉降的区域盆地是地球表面（岩石圈表面）相对长时期沉降的区域，因整个地形外观与盆子相似而得名。换言之盆地是基底表面相对于海拔盆地是地球表面相对长时期沉降的区域盆地是地球表面（岩石圈表面）相对长时期沉降的区域，因整个地形外观与盆子相似而得名。换言之盆地是基底表面相对于海拔盆地是地球表面相对长时期沉降的区域盆地是地球表面（岩石圈表面）相对长时期沉降的区域，因整个地形外观与盆子相似而得名。换言之盆地是基底表面相对于海拔盆地是地球表面相对长时期沉降的区域',
  77 + hot: {
  78 + simg: 'static/img/icon_popular_comment.png',
  79 + info: '口红很赞的哦，颜色很漂亮的显得肤色特别白嫩～口红很赞的哦，颜色很漂亮的显得肤色特别白嫩～口红很赞的哦，颜色很漂亮的显得肤色特别白嫩～'
  80 + },
  81 + goods: [
  82 + {
  83 + simg: 'static/img/pic_3.jpg',
  84 + title: '臻溪国奖茯全金花黑茶',
  85 + price: '288.00'
  86 + },
  87 + {
  88 + simg: 'static/img/pic_2.jpg',
  89 + title: '臻溪国奖茯全金花黑茶',
  90 + price: '288.00'
  91 + },
  92 + {
  93 + simg: 'static/img/pic_1.jpg',
  94 + title: '臻溪国奖茯全金花黑茶',
  95 + price: '288.00'
  96 + },
  97 + {
  98 + simg: 'static/img/pic_3.jpg',
  99 + title: '臻溪国奖茯全金花黑茶',
  100 + price: '288.00'
  101 + },
  102 + {
  103 + simg: 'static/img/pic_2.jpg',
  104 + title: '臻溪国奖茯全金花黑茶',
  105 + price: '288.00'
  106 + },
  107 + {
  108 + simg: 'static/img/pic_1.jpg',
  109 + title: '臻溪国奖茯全金花黑茶',
  110 + price: '288.00'
  111 + }
  112 + ],
  113 + comment_num: '11100',
  114 + like_num: '123'
  115 + },
  116 + {
  117 + user: {
  118 + simg: 'static/img/6.png',
  119 + nickname: '欧阳娜娜'
  120 + },
  121 + createtime: '123分钟前',
  122 + intro: '盆地是地球表面（岩石圈表面）相对长时期沉降的区域，因整个地形外观与盆子相似而得名。换言之盆地是基底表面相对于海拔盆地是地球表面相对长时期沉降的区域盆地是地球表面（岩石圈表面）相对长时期沉降的区域，因整个地形外观与盆子相似而得名。换言之盆地是基底表面相对于海拔盆地是地球表面相对长时期沉降的区域盆地是地球表面（岩石圈表面）相对长时期沉降的区域，因整个地形外观与盆子相似而得名。换言之盆地是基底表面相对于海拔盆地是地球表面相对长时期沉降的区域盆地是地球表面（岩石圈表面）相对长时期沉降的区域，因整个地形外观与盆子相似而得名。换言之盆地是基底表面相对于海拔盆地是地球表面相对长时期沉降的区域',
  123 + img: {
  124 + list: [
  125 + {
  126 + img: 'static/img/banner-02.jpg'
  127 + }
  128 + ]
  129 + },
  130 + goods: [
  131 + {
  132 + simg: 'static/img/pic_3.jpg',
  133 + title: '臻溪国奖茯全金花黑茶',
  134 + price: '288.00'
  135 + },
  136 + {
  137 + simg: 'static/img/pic_1.jpg',
  138 + title: '臻溪国奖茯全金花黑茶',
  139 + price: '288.00'
  140 + }
  141 + ],
  142 + comment_num: '11100',
  143 + like_num: '123'
  144 + }
  145 + ]">
  146 +
  147 + <!-- 最新动态标题 -->
  148 + <text-title-box slot="title-box" @more="newDarenDynamicsMore"
  149 + :titles="{
  150 + title: '最新动态',
  151 + more: true
  152 + }">
  153 + </text-title-box>
  154 + </daren-list-box>
  155 +
  156 +
  157 +
  158 +
  159 +
  160 +
  161 +
  162 +
  163 +
  164 +
  165 +
  166 +
  167 + </div>
  168 +</template>
  169 +
  170 +<script>
  171 +
  172 + // 引入组件
  173 + import { Toast, Indicator } from "mint-ui";
  174 + import swiper from "@/components/swiper/swiper";
  175 + import darenListBox from "@/components/darenListBox/darenListBox";
  176 + import textTitleBox from "@/components/textTitleBox/textTitleBox";
  177 + import darenInfo from "@/components/darenInfo/darenInfo";
  178 + export default {
  179 + name: "darenList",
  180 + data() {
  181 + return {
  182 + title: "", // 标题
  183 +
  184 +
  185 +
  186 +
  187 + }
  188 + },
  189 + components:{
  190 + darenListBox,
  191 + textTitleBox,
  192 + swiper,
  193 + darenInfo
  194 + },
  195 + created() {
  196 +
  197 + // 设置标题
  198 + this.$set(this, "title", "达人");
  199 +
  200 + // 获取优选库精选活动
  201 + // this.activityAd();
  202 + },
  203 + methods: {
  204 +
  205 + // 下拉刷新
  206 + // onRefresh() {
  207 +
  208 + // // 下拉刷新中
  209 + // this.$set(this, "isLoading", true);
  210 +
  211 + // // 获取优选库精选活动
  212 + // this.activityAd();
  213 + // },
  214 +
  215 + /**
  216 + * 获取优选库精选活动
  217 + */
  218 + activityAd() {
  219 + // 加载中提示
  220 + Indicator.open("加载中...");
  221 +
  222 + // 获取证书请求接口
  223 + this.http("/Api/" + this.getApiVersion().index + "/activityAd", {
  224 + id: this.$route.query.id
  225 + }, this.activityAdCallback, {
  226 + method: "post"
  227 + }
  228 + );
  229 + },
  230 +
  231 + /**
  232 + * 获取优选库精选活动回调
  233 + * @param {object} res [服务器返回数据]
  234 + * @param {object} ext [扩展参数]
  235 + */
  236 + activityAdCallback(res, ext) {
  237 +
  238 + // 加载完成
  239 + Indicator.close();
  240 +
  241 + // 下拉刷新结束
  242 + this.$set(this, "isLoading", false);
  243 +
  244 + // 返回处理
  245 + if (res.code == 200) {
  246 +
  247 + // 解构数据
  248 + let { data: datas } = res;
  249 +
  250 + /* 获取优选库精选活动数据 开始 */
  251 +
  252 + // 设置标题
  253 + this.$set(this, "title", datas.title);
  254 +
  255 + // 设置banner数据
  256 + if (datas.banner && datas.banner.length) {
  257 + this.$set(this, "banner", datas.banner);
  258 + }
  259 +
  260 + // 设置navs数据
  261 + if (datas.navs && datas.navs.length) {
  262 + this.$set(this, "navs", datas.navs);
  263 + }
  264 +
  265 + // 设置ads数据
  266 + if (datas.ads && datas.ads.length) {
  267 + this.$set(this, "ads", datas.ads);
  268 + }
  269 +
  270 + /* 获取优选库精选活动数据 结束 */
  271 +
  272 + } else if (res.code == 400) {
  273 +
  274 + // 获取优选库精选活动失败
  275 + Toast(res.message);
  276 + } else {
  277 +
  278 + // 获取优选库精选活动失败
  279 + Toast("获取优选库精选活动失败");
  280 + }
  281 + },
  282 +
  283 + /**
  284 + * 调用通用跳转
  285 + * @param {object} item [通用跳转对象]
  286 + */
  287 + toDetail(item) {
  288 +
  289 + // 判断是否有通用跳转函数
  290 + if (typeof this.$parent.gotoDetail === "function") {
  291 +
  292 + // 调用通用跳转
  293 + this.$parent.gotoDetail(item);
  294 + }
  295 + },
  296 +
  297 + /**
  298 + * 最新达人动态更过
  299 + */
  300 + newDarenDynamicsMore() {
  301 +
  302 +
  303 +
  304 + console.log("newDarenDynamicsMore");
  305 +
  306 +
  307 +
  308 + },
  309 +
  310 + /**
  311 + * 跳转达人动态详情
  312 + * @param {object} item [数据对象]
  313 + */
  314 + jump(item) {
  315 +
  316 + // 判断并调用通用跳转
  317 + if (typeof this.$parent.gotoDetail === "function") {
  318 +
  319 +
  320 + // 临时，设置跳转参数，跳转达人动态详情页面
  321 + Object.assign(item, {
  322 + type: "25",
  323 + to: "265",
  324 + shop_type: ""
  325 + });
  326 +
  327 +
  328 + console.log("jump", item);
  329 +
  330 +
  331 + this.$parent.gotoDetail(item);
  332 + }
  333 + },
  334 +
  335 + /**
  336 + * 用户头像/昵称，点击跳转
  337 + * @param {object} item [数据对象]
  338 + */
  339 + userJump(item) {
  340 +
  341 + // 判断并调用通用跳转
  342 + if (typeof this.$parent.gotoDetail === "function") {
  343 +
  344 + // 临时，设置跳转达人个人主页用户数据
  345 + Object.assign(item, {
  346 + type: "5",
  347 + to: (this.mode == "prod") ? "https://managemall.cnlive.com/html/preferred-library/1/#/pages/darenProfile/darenProfile?id=40&from=redirect" : "https://wjjshop.cnlive.com/html/preferred-library/1/#/pages/darenProfile/darenProfile?id=40&from=redirect",
  348 + shop_type: ""
  349 + });
  350 +
  351 +
  352 + console.log("userJump", item);
  353 +
  354 +
  355 +
  356 +
  357 + this.$parent.gotoDetail(item);
  358 + }
  359 + },
  360 +
  361 + /**
  362 + * 点击跳转商品
  363 + * @param {object} item [数据对象]
  364 + */
  365 + goodsJump(item) {
  366 +
  367 + // 判断并调用通用跳转
  368 + if (typeof this.$parent.gotoDetail === "function") {
  369 +
  370 + // 临时，设置跳转商品详情参数
  371 + Object.assign(item, {
  372 + type: "2",
  373 + to: "9525393",
  374 + shop_type: "1"
  375 + });
  376 +
  377 +
  378 + console.log("goodsJump", item);
  379 +
  380 +
  381 +
  382 + this.$parent.gotoDetail(item);
  383 + }
  384 + },
  385 +
  386 + /**
  387 + * 点击跳转商品购买
  388 + * @param {object} item [数据对象]
  389 + */
  390 + goodsPrimary(item) {
  391 +
  392 + // 判断并调用通用跳转
  393 + if (typeof this.$parent.gotoDetail === "function") {
  394 +
  395 + // 临时，设置跳转商品详情参数
  396 + Object.assign(item, {
  397 + type: "2",
  398 + to: "9525393",
  399 + shop_type: "1"
  400 + });
  401 +
  402 +
  403 + console.log("goodsPrimary", item);
  404 +
  405 +
  406 +
  407 + this.$parent.gotoDetail(item);
  408 + }
  409 + }
  410 + },
  411 + head: {
  412 + title () {
  413 + return {
  414 + inner: this.title
  415 + }
  416 + }
  417 + },
  418 + watch: {
  419 +
  420 + // 设置页面标题
  421 + title(newVal) {
  422 + if (this.$store.state.browser.toLowerCase() == "qq" && this.$store.state.deviceType.toLowerCase() == "iphone") {
  423 + this.$iFrame.insertIFrame(newVal);
  424 + } else {
  425 + this.$emit("updateHead");
  426 + }
  427 + }
  428 + }
  429 + }
  430 +</script>
  431 +
  432 +<!-- Add "scoped" attribute to limit CSS to this component only -->
  433 +<style rel="stylesheet/less" lang="less" scoped>
  434 + @import "newDaren";
  435 +</style>
src/router/index.js
  View file @44dbef9
@@ -92,6 +92,17 @@ const router = new Router({ @@ -92,6 +92,17 @@ const router = new Router({
92 meta: { 92 meta: {
93 requireAuth: false 93 requireAuth: false
94 } 94 }
  95 + },
  96 + {
  97 + // 新达人页面
  98 + path: "/newDaren",
  99 + name: "newDaren",
  100 + component: resolve => {
  101 + require(["@/pages/newDaren/newDaren"], resolve);
  102 + },
  103 + meta: {
  104 + requireAuth: false
  105 + }
95 } 106 }
96 ] 107 ]
97 }, 108 },