w-front-end / select_good · Commits

Commit a8b6e5eab4aaf1555fabe7ffff468d5dea3b4bc2

Authored by 王强
1 parent f76df97d

优选库“优选”页面改版，进行中~

Inline Side-by-side
Showing 16 changed files with 435 additions and 64 deletions
src/components/columnCommodityListBox/columnCommodityListBox.less
  View file @a8b6e5e
... ... @@ -102,7 +102,6 @@
102 102 .decimal {
103 103 font-size: 24px;
104 104 }
105   -
106 105 }
107 106 .right {
108 107 display: flex;
... ...
src/components/columnCommodityListBox/columnCommodityListBox.vue
  View file @a8b6e5e
... ... @@ -19,7 +19,7 @@
19 19 </div> -->
20 20 <div class="price-box">
21 21 <div class="left">
22   - <div class="y">￥</div>
  22 + <div class="y">¥&nbsp;</div>
23 23 <div class="integer">{{getInteger(item.price)}}.</div>
24 24 <div class="decimal">{{getDecimal(item.price)}}</div>
25 25 </div>
... ... @@ -48,7 +48,7 @@
48 48 </div> -->
49 49 <div class="price-box">
50 50 <div class="left">
51   - <div class="y">￥</div>
  51 + <div class="y">¥&nbsp;</div>
52 52 <div class="integer">{{getInteger(item.price)}}.</div>
53 53 <div class="decimal">{{getDecimal(item.price)}}</div>
54 54 </div>
... ...
src/components/columnListBox/columnListBox.less 0 → 100644
  View file @a8b6e5e
  1 +@charset "UTF-8";
  2 +
  3 +.column-list-box {
  4 + .title-box {
  5 + & + .box {
  6 + margin-top: 30px;
  7 + }
  8 + }
  9 + .box {
  10 + // display: flex;
  11 + // flex-direction: row;
  12 + // justify-content: space-between;
  13 + // align-items: flex-start;
  14 + // flex-wrap: wrap;
  15 + column-count: 2;
  16 + column-width: 330px;
  17 + column-gap: 30px;
  18 + margin: 0 auto;
  19 + padding-bottom: 18px;
  20 + width: 690px;
  21 + .left-box {
  22 + .item-box {
  23 + &:last-child {
  24 + margin-bottom: 0;
  25 + }
  26 + }
  27 + }
  28 + .right-box {
  29 + .item-box {
  30 + &:last-child {
  31 + // margin-bottom: 0;
  32 + }
  33 + }
  34 + }
  35 + .item-box {
  36 + background-color: transparent;
  37 + margin-bottom: 30px;
  38 + width: 330px;
  39 + height: auto;
  40 + break-inside: avoid;
  41 + // border-radius: 30px;
  42 + overflow: hidden;
  43 + }
  44 + }
  45 +}
0 46 \ No newline at end of file
... ...
src/components/columnListBox/columnListBox.vue 0 → 100644
  View file @a8b6e5e
  1 +<template>
  2 + <div class="column-list-box" v-if="lists && lists.list && lists.list.length">
  3 + <slot name="title"></slot>
  4 + <div class="box">
  5 +
  6 + <!-- left-box -->
  7 + <div class="left-box">
  8 +
  9 + <!-- 数组内奇数，index是偶数 -->
  10 + <div class="item-box" v-if="!(index % 2)" v-for="(item, index) in lists.list" :key="index">
  11 +
  12 + <!-- 商品组件 -->
  13 + <goods-item-7 v-if="com == '7'" @jump="jump" @primary="primary"
  14 + :item="item">
  15 + </goods-item-7>
  16 + </div>
  17 + </div>
  18 +
  19 + <!-- right-box -->
  20 + <div class="right-box">
  21 +
  22 + <!-- 数组内偶数，index是奇数 -->
  23 + <div class="item-box" v-if="index % 2" v-for="(item, index) in lists.list" :key="index">
  24 +
  25 + <!-- 商品组件 -->
  26 + <goods-item-7 v-if="com == '7'" @jump="jump" @primary="primary"
  27 + :item="item">
  28 + </goods-item-7>
  29 + </div>
  30 + </div>
  31 + </div>
  32 + </div>
  33 +</template>
  34 +
  35 +<script>
  36 +
  37 + // 引入组件
  38 + import goodsItem7 from "@/components/goodsItem_7/goodsItem_7";
  39 +
  40 + export default {
  41 + data() {
  42 + return {
  43 +
  44 + };
  45 + },
  46 + props: ["lists", "com"],
  47 + components: {
  48 + goodsItem7
  49 + },
  50 + methods: {
  51 +
  52 + /**
  53 + * 跳转函数
  54 + * @param {object} item [对象]
  55 + */
  56 + jump(item) {
  57 + this.$emit("jump", item);
  58 + },
  59 +
  60 + /**
  61 + * 组件功能按钮
  62 + * @param {object} item [对象]
  63 + */
  64 + primary(item) {
  65 + this.$emit("primary", item);
  66 + }
  67 + }
  68 + }
  69 +</script>
  70 +
  71 +<!-- Add "scoped" attribute to limit CSS to this component only -->
  72 +<style rel="stylesheet/less" lang='less' scoped>
  73 + @import './columnListBox';
  74 +</style>
... ...
src/components/goodsItem_1/goodsItem_1.vue
  View file @a8b6e5e
... ... @@ -5,7 +5,7 @@
5 5 </div>
6 6 <div class="title">{{item.title}}</div>
7 7 <div class="price-box">
8   - <div class="price">¥{{item.price}}</div>
  8 + <div class="price">¥&nbsp;{{item.price}}</div>
9 9 <div class="add-cart" v-if="pid == '1' || pid == '3'" @click.stop.prevent @click="addCart(item)">
10 10 <img src="static/img/icon_add.png" class="add-img" />
11 11 </div>
... ...
src/components/goodsItem_2/goodsItem_2.vue
  View file @a8b6e5e
... ... @@ -9,7 +9,7 @@
9 9 <div class="content-box">
10 10 <div class="title" v-if="pid == undefined || pid == '1'">{{item.title}}</div>
11 11 <div class="price-box">
12   - <div class="symbol">¥</div>
  12 + <div class="symbol">¥&nbsp;</div>
13 13 <div class="price">{{item.price}}</div>
14 14 </div>
15 15 <div class="ads" v-if="pid == '2'">
... ...
src/components/goodsItem_3/goodsItem_3.less
  View file @a8b6e5e
... ... @@ -79,11 +79,12 @@
79 79 display: flex;
80 80 justify-content: center;
81 81 align-items: center;
82   - background-color: #EC1125;
83   - color: #FFFFFF;
  82 + background-color: #ffffff;
  83 + color: #EC1125;
84 84 font-size: 24px;
85 85 width: 100%;
86 86 height: 46px;
  87 + border: 1px solid #EC1125;
87 88 border-radius: 6px;
88 89 white-space: nowrap;
89 90 text-overflow: ellipsis;
... ...
src/components/goodsItem_3/goodsItem_3.vue
  View file @a8b6e5e
... ... @@ -13,7 +13,7 @@
13 13 </div>
14 14 <div class="bottom-box">
15 15 <div class="price-box">
16   - <div class="symbol">¥</div>
  16 + <div class="symbol">¥&nbsp;</div>
17 17 <div class="price">{{item.price}}</div>
18 18 </div>
19 19 <div class="buttons-box">
... ...
src/components/goodsItem_4/goodsItem_4.vue
  View file @a8b6e5e
... ... @@ -7,7 +7,7 @@
7 7 </div>
8 8 <div class="content-box">
9 9 <div class="title">{{item.title}}</div>
10   - <div class="price">￥&nbsp;{{item.price}}</div>
  10 + <div class="price">¥&nbsp;{{item.price}}</div>
11 11 </div>
12 12 </div>
13 13 <div class="right-box">
... ...
src/components/goodsItem_6/goodsItem_6.vue
  View file @a8b6e5e
... ... @@ -10,7 +10,7 @@
10 10 </div>
11 11 <div class="bottom-box">
12 12 <div class="price-box">
13   - <div class="symbol">¥</div>
  13 + <div class="symbol">¥&nbsp;</div>
14 14 <div class="integer">{{getInteger(item.price)}}.</div>
15 15 <div class="decimal">{{getDecimal(item.price)}}</div>
16 16 </div>
... ... @@ -64,7 +64,6 @@
64 64 }
65 65 }
66 66 }
67   -
68 67 },
69 68 methods: {
70 69  
... ...
src/components/goodsItem_7/goodsItem_7.less 0 → 100644
  View file @a8b6e5e
  1 +@charset "UTF-8";
  2 +
  3 +.goods-item-7-box {
  4 + background-color: #ffffff;
  5 + width: 100%;
  6 + height: auto;
  7 + .item {
  8 + width: 100%;
  9 + height: auto;
  10 + border-radius: 16px;
  11 + overflow: hidden;
  12 + .img-box {
  13 + display: flex;
  14 + justify-content: center;
  15 + align-items: center;
  16 + width: 100%;
  17 + height: 330px;
  18 + // height: 100%;
  19 + overflow: hidden;
  20 + .img {
  21 + display: block;
  22 + width: 100%;
  23 + height: auto;
  24 + }
  25 + }
  26 + .content-box {
  27 + margin: 0 auto;
  28 + width: 290px;
  29 + .title {
  30 + display: -webkit-box;
  31 + margin-top: 20px;
  32 + color: #333333;
  33 + font-size: 28px;
  34 + font-weight: 400;
  35 + width: 100%;
  36 + height: auto;
  37 + min-height: 76px;
  38 + line-height: 40px;
  39 + -webkit-line-clamp: 2;
  40 + -webkit-box-orient: vertical;
  41 + text-overflow: ellipsis;
  42 + overflow: hidden;
  43 + }
  44 + .coupon-box {
  45 + display: inline;
  46 + margin-top: 8px;
  47 + padding: 1px 6px;
  48 + color: #FC1541;
  49 + font-size: 18px;
  50 + border: 1px solid #FC1541;
  51 + border-radius: 4px;
  52 + }
  53 + .price-box {
  54 + display: flex;
  55 + justify-content: space-between;
  56 + align-items: center;
  57 + margin-top: 10px;
  58 + margin-bottom: 20px;
  59 + .left {
  60 + display: flex;
  61 + justify-content: flex-start;
  62 + align-items: baseline;
  63 + color: #FC1541;
  64 + .y {
  65 + font-size: 20px;
  66 + }
  67 + .integer {
  68 + font-size: 30px;
  69 + }
  70 + .decimal {
  71 + font-size: 30px;
  72 + }
  73 + }
  74 + .right {
  75 + display: flex;
  76 + justify-content: flex-end;
  77 + align-items: baseline;
  78 + .icon-add {
  79 + display: block;
  80 + width: 48px;
  81 + height: 48px;
  82 + }
  83 + }
  84 + }
  85 + }
  86 + }
  87 +}
... ...
src/components/goodsItem_7/goodsItem_7.vue 0 → 100644
  View file @a8b6e5e
  1 +<template>
  2 + <div class="goods-item-7-box" v-if="item" @click="jump(item)">
  3 + <div class="item">
  4 + <div class="img-box">
  5 + <img v-lazy="item.simg + SIGN.MIDDLE" class="img" />
  6 + </div>
  7 + <div class="content-box">
  8 + <div class="title">{{item.title}}</div>
  9 + <!-- <div class="coupon-box">
  10 + 满180减10
  11 + </div> -->
  12 + <div class="price-box">
  13 + <div class="left">
  14 + <div class="y">¥&nbsp;</div>
  15 + <div class="integer">{{getInteger(item.price)}}.</div>
  16 + <div class="decimal">{{getDecimal(item.price)}}</div>
  17 + </div>
  18 + <div class="right">
  19 + <img src="static/img/icon_add.png" class="icon-add" mode="widthFix" @click.stop.prevent="primary(item)" />
  20 + </div>
  21 + </div>
  22 + </div>
  23 + </div>
  24 + </div>
  25 +</template>
  26 +
  27 +<script>
  28 + export default {
  29 + data: function () {
  30 + return {
  31 +
  32 + }
  33 + },
  34 + props: ["item"],
  35 + computed: {
  36 +
  37 + /**
  38 + * 获取输入数字的整数部分
  39 + */
  40 + getInteger() {
  41 + return (number) => {
  42 + return parseInt(number);
  43 + }
  44 + },
  45 +
  46 + /**
  47 + * 获取输入数字的小数部分
  48 + */
  49 + getDecimal() {
  50 + return (number) => {
  51 +
  52 + // 拆分数字
  53 + let numberArr = number.toString().split(".");
  54 +
  55 + // 判断是否有效数部分
  56 + if (numberArr.length === 2) {
  57 + return numberArr[1];
  58 + } else {
  59 + return "00";
  60 + }
  61 + }
  62 + }
  63 + },
  64 + methods: {
  65 +
  66 + /**
  67 + * 点击跳转
  68 + * @param {object} item [数据对象]
  69 + */
  70 + jump(item) {
  71 + this.$emit("jump", item);
  72 + },
  73 +
  74 + /**
  75 + * 主按钮点击事件
  76 + * @param {object} item [数据对象]
  77 + */
  78 + primary(item) {
  79 + this.$emit("primary", item);
  80 + }
  81 + }
  82 + }
  83 +</script>
  84 +
  85 +<!-- Add "scoped" attribute to limit CSS to this component only -->
  86 +<style rel="stylesheet/less" lang="less" scoped>
  87 + @import './goodsItem_7';
  88 +</style>
... ...
src/components/horizList/horizList.vue
  View file @a8b6e5e
... ... @@ -46,10 +46,9 @@
46 46 :item="item">
47 47 </swiper-item>
48 48 <shop-daren-hot v-if="com == '5'"
49   - @userJump="userJump"
50   - @fansShop="fansShop"
51   - :item="item">
52   -
  49 + @userJump="userJump"
  50 + @fansShop="fansShop"
  51 + :item="item">
53 52 </shop-daren-hot>
54 53 </div>
55 54 </div>
... ...
src/pages/newDaren/newDaren.vue
  View file @a8b6e5e
... ... @@ -239,7 +239,7 @@
239 239 }
240 240 }
241 241 }
242   - console.log(this.fansDaren)
  242 +
243 243 /* 获取优选库精选活动数据 结束 */
244 244  
245 245 } else if (res.code == 400) {
... ... @@ -366,10 +366,7 @@
366 366 shop_type: ""
367 367 });
368 368  
369   -
370   - console.log("jump", item);
371   -
372   -
  369 + // 调用通用跳转
373 370 this.$parent.gotoDetail(item);
374 371 }
375 372 },
... ... @@ -380,6 +377,7 @@
380 377 * type等于2属于达人跳转传uid,type=1传id
381 378 */
382 379 userJump(item) {
  380 +
383 381 // 判断并调用通用跳转
384 382 if (typeof this.$parent.gotoDetail === "function") {
385 383  
... ... @@ -392,12 +390,7 @@
392 390 shop_type: ""
393 391 });
394 392  
395   -
396   - console.log("userJump", item);
397   -
398   -
399   -
400   -
  393 + // 调用通用跳转
401 394 this.$parent.gotoDetail(item);
402 395 }
403 396 },
... ... @@ -418,11 +411,7 @@
418 411 shop_type: "1"
419 412 });
420 413  
421   -
422   - console.log("goodsJump", item);
423   -
424   -
425   -
  414 + // 调用通用跳转
426 415 this.$parent.gotoDetail(item);
427 416 }
428 417 },
... ... @@ -443,11 +432,7 @@
443 432 shop_type: "1"
444 433 });
445 434  
446   -
447   - console.log("goodsPrimary", item);
448   -
449   -
450   -
  435 + // 调用通用跳转
451 436 this.$parent.gotoDetail(item);
452 437 }
453 438 }
... ...
src/pages/optimization/optimization.vue
  View file @a8b6e5e
... ... @@ -6,21 +6,39 @@
6 6  
7 7 <!-- 标题 -->
8 8 <div v-if="dresserList&&dresserList.length">
9   - <text-title-box @more="h5More"
10   - :titles="{
11   - title: '已关注达人',
12   - more: true
13   - }">
14   - </text-title-box>
15   -
16   - <!-- 已关注达人列表（4条） -->
17   - <div>
18   - <!-- 达人列表组件 -->
19   - <dresserList @toDetail="toDetail"
20   - :dresserList="dresserList">
21   - </dresserList>
  9 + <text-title-box @more="h5More"
  10 + :titles="{
  11 + title: '已关注达人',
  12 + more: true
  13 + }">
  14 + </text-title-box>
  15 +
  16 + <!-- 已关注达人列表（4条） -->
  17 + <div>
  18 + <!-- 达人列表组件 -->
  19 + <dresserList @toDetail="toDetail"
  20 + :dresserList="dresserList">
  21 + </dresserList>
  22 + </div>
22 23 </div>
  24 +
  25 + <!-- 最新动态 -->
  26 + <div class="item_box">
  27 + <div>
  28 + <daren-list-box class="daren-list" @userJump="userJump" @jump="jump" @goodsJump="goodsJump" @goodsPrimary="goodsPrimary"
  29 + :lists="{}">
  30 +
  31 + <!--最新达人动态-->
  32 + <text-title-box slot="title-box"
  33 + :titles="{
  34 + title: '最新动态',
  35 + more: darenListsMore
  36 + }">
  37 + </text-title-box>
  38 + </daren-list-box>
  39 + </div>
23 40 </div>
  41 +
24 42 <!-- 商品部分 -->
25 43 <div class="goods-list-box">
26 44  
... ... @@ -46,20 +64,6 @@
46 64 </text-title-box>
47 65 </horiz-list-flex>
48 66  
49   - <!-- 商品样式 3 滑动 -->
50   - <horiz-list class="components-box" v-if="newGoods && newGoods.length" @jump="jump" @primary="primary"
51   - :lists="newGoods"
52   - com="3">
53   -
54   - <!-- 标题 -->
55   - <text-title-box slot="title-box" @more="more"
56   - :titles="{
57   - title: '最新上架',
58   - more: newGoodsMore
59   - }">
60   - </text-title-box>
61   - </horiz-list>
62   -
63 67 <!-- 商品样式 2 滑动 -->
64 68 <horiz-list class="components-box" v-if="newBuyGoods && newBuyGoods.length" @jump="jump"
65 69 :lists="newBuyGoods"
... ... @@ -86,6 +90,21 @@
86 90 }">
87 91 </text-title-box>
88 92 </horiz-list>
  93 +
  94 + <!-- 商品样式 7 列表 -->
  95 + <column-list-box class="components-box" v-if="newGoods && newGoods.list && newGoods.list.length" @jump="jump" @primary="primary"
  96 + :lists="newGoods"
  97 + com="7">
  98 +
  99 + <!-- 标题 -->
  100 + <text-title-box slot="title-box" @more="more"
  101 + :titles="{
  102 + title: '最新上架',
  103 + //more: newGoodsMore
  104 + more: false
  105 + }">
  106 + </text-title-box>
  107 + </column-list-box>
89 108 </div>
90 109 <!-- </van-pull-refresh> -->
91 110 </div>
... ... @@ -96,8 +115,10 @@
96 115 // 引入组件
97 116 import { Toast, Indicator } from "mint-ui";
98 117 import dresserList from "@/components/dresserList/dresserList";
  118 + import darenListBox from "@/components/darenListBox/darenListBox";
99 119 import horizList from "@/components/horizList/horizList";
100 120 import horizListFlex from "@/components/horizListFlex/horizListFlex";
  121 + import columnListBox from "@/components/columnListBox/columnListBox";
101 122 import textTitleBox from "@/components/textTitleBox/textTitleBox";
102 123  
103 124 export default {
... ... @@ -107,6 +128,8 @@
107 128 title: "",
108 129 isLoading: false, // 下拉刷新控制
109 130 dresserList: null, // 达人列表
  131 + darenLists: null, // 达人动态列表
  132 + darenListsMore: null, // 达人动态列表更多
110 133 hotGoods: null, // 热销商品
111 134 hotGoodsMore: null, // 热销商品更多
112 135 newGoods: null, // 最新上架
... ... @@ -117,8 +140,10 @@
117 140 },
118 141 components: {
119 142 dresserList,
  143 + darenListBox,
120 144 horizList,
121 145 horizListFlex,
  146 + columnListBox,
122 147 textTitleBox
123 148 },
124 149 created() {
... ... @@ -207,7 +232,9 @@
207 232 if (datas.newGoods && datas.newGoods.length) {
208 233  
209 234 // 设置“最新上架”数据
210   - this.$set(this, "newGoods", datas.newGoods);
  235 + this.$set(this, "newGoods", {
  236 + list: datas.newGoods
  237 + });
211 238  
212 239 // 判断“最新上架”更多
213 240 if (datas.newGoodsMore) {
... ... @@ -259,11 +286,78 @@
259 286 shop_type: ""
260 287 }
261 288  
  289 + // 调用通用跳转
262 290 this.$parent.gotoDetail(options);
263 291 }
264 292 },
265 293  
266 294 /**
  295 + * 用户头像/昵称，点击跳转
  296 + * @param {object} item [数据对象]
  297 + * type等于2属于达人跳转传uid,type=1传id
  298 + */
  299 + userJump(item) {
  300 +
  301 + // 判断并调用通用跳转
  302 + if (typeof this.$parent.gotoDetail === "function") {
  303 +
  304 + // 临时，设置跳转达人个人主页用户数据
  305 + Object.assign(item, {
  306 + type: "5",
  307 + to: (this.mode == "prod") ?
  308 + "https://managemall.cnlive.com/html/preferred-library/1/#/pages/darenProfile/darenProfile?from=redirect" + "&id=" + (item.type==2?item.uid:item.id) + "&uid=" + this.getStore("uid") :
  309 + "https://wjjshop.cnlive.com/html/preferred-library/1/#/pages/darenProfile/darenProfile?from=redirect"+ "&id=" + (item.type==2?item.uid:item.id) + "&uid=" + this.getStore("uid"),
  310 + shop_type: ""
  311 + });
  312 +
  313 + // 调用通用跳转
  314 + this.$parent.gotoDetail(item);
  315 + }
  316 + },
  317 +
  318 + /**
  319 + * 点击跳转商品
  320 + * @param {object} item [数据对象]
  321 + */
  322 + goodsJump(item) {
  323 +
  324 + // 判断并调用通用跳转
  325 + if (typeof this.$parent.gotoDetail === "function") {
  326 +
  327 + // 临时，设置跳转商品详情参数
  328 + Object.assign(item, {
  329 + type: "2",
  330 + to: item.id,
  331 + shop_type: "1"
  332 + });
  333 +
  334 + // 调用通用跳转
  335 + this.$parent.gotoDetail(item);
  336 + }
  337 + },
  338 +
  339 + /**
  340 + * 点击跳转商品购买
  341 + * @param {object} item [数据对象]
  342 + */
  343 + goodsPrimary(item) {
  344 +
  345 + // 判断并调用通用跳转
  346 + if (typeof this.$parent.gotoDetail === "function") {
  347 +
  348 + // 临时，设置跳转商品详情参数
  349 + Object.assign(item, {
  350 + type: "2",
  351 + to: item.id,
  352 + shop_type: "1"
  353 + });
  354 +
  355 + // 调用通用跳转
  356 + this.$parent.gotoDetail(item);
  357 + }
  358 + },
  359 +
  360 + /**
267 361 * 跳转
268 362 * @param {object} item [数据对象]
269 363 */
... ...
static/img/icon_goto_top.png 0 → 100644
View file @a8b6e5e

3.76 KB