w-front-end / select_good · Commits

Commit 251803a5d511eafbe41c785549dbe65609b35176

Authored by 王强
1 parent 4a534d93

代码优化~

Inline Side-by-side
Showing 11 changed files with 97 additions and 201 deletions
src/components/goodsItem_1/goodsItem_1.vue
  View file @251803a
... ... @@ -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">¥{{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 @251803a
... ... @@ -6,7 +6,7 @@
6 6 <div class="content-box">
7 7 <div class="title" v-if="pid == undefined || pid == '1'">{{item.title}}</div>
8 8 <div class="price-box">
9   - <div class="symbol">￥</div>
  9 + <div class="symbol">¥</div>
10 10 <div class="price">{{item.price}}</div>
11 11 </div>
12 12 <div class="ads" v-if="pid == '2'">
... ...
src/components/horizList_1/horizList_1.less renamed to src/components/horizList/horizList.less
  View file @251803a
1 1 @charset "UTF-8";
2 2  
3   -.horiz-list-1-box {
  3 +.horiz-list-box {
4 4 background-color: transparent;
5 5 width: 100%;
6 6 height: auto;
... ... @@ -29,16 +29,52 @@
29 29 }
30 30 }
31 31 }
32   - &.pid-2, &.pid-4 {
  32 + &.com-1 {
  33 + &.pid-2, &.pid-4 {
  34 + .h-box {
  35 + height: 320px;
  36 + .scroll-box {
  37 + > .box {
  38 + display: block;
  39 + .item-box {
  40 + padding-right: 40px;
  41 + &:first-child {
  42 + padding-left: 40px;
  43 + }
  44 + }
  45 + }
  46 + }
  47 + }
  48 + }
  49 + }
  50 + &.com-2 {
33 51 .h-box {
34   - height: 320px;
  52 + height: 354px;
35 53 .scroll-box {
  54 + padding-bottom: 26px;
36 55 > .box {
37 56 display: block;
38 57 .item-box {
39   - padding-right: 40px;
  58 + padding-right: 30px;
40 59 &:first-child {
41   - padding-left: 40px;
  60 + padding-left: 30px;
  61 + }
  62 + }
  63 + }
  64 + }
  65 + }
  66 + &.pid-2 {
  67 + .h-box {
  68 + height: 360px;
  69 + .scroll-box {
  70 + padding-bottom: 30px;
  71 + > .box {
  72 + display: block;
  73 + .item-box {
  74 + padding-right: 30px;
  75 + &:first-child {
  76 + padding-left: 30px;
  77 + }
42 78 }
43 79 }
44 80 }
... ...
src/components/horizList_1/horizList_1.vue renamed to src/components/horizList/horizList.vue
  View file @251803a
1 1 <template>
2   - <div class="horiz-list-1-box" v-if="lists && lists.length">
3   - <div class="box" :class="'pid-' + pid">
  2 + <div class="horiz-list-box" v-if="lists && lists.length">
  3 + <div class="box" :class="'com-' + com + ' pid-' + pid">
4 4 <div class="h-box">
5 5 <div class="scroll-box" ref="scrollBox">
6 6 <div class="box" :style="'width: ' + scrollItemBox + 'vw'">
7 7 <div class="item-box" v-for="(item, index) in lists" :key="index">
8 8  
  9 + <!--
  10 + com=1：goodsItem_1组件，pid：1、3，固定不滚动，2、4，滚动
  11 + com=2：goodsItem_2组件，pid: 1，带标题，2、不带标题，显示附加信息
  12 + -->
  13 +
9 14 <!-- 商品展示样式 1 -->
10   - <goods-item-1 @jump=jump @addCart=addCart
  15 + <goods-item-1 v-if="com == '1'" @jump=jump @addCart=addCart
11 16 :item="item"
12 17 :pid="pid">
13 18 </goods-item-1>
  19 +
  20 + <!-- 商品展示样式 2 -->
  21 + <goods-item-2 v-if="com == '2'" @jump=jump
  22 + :item="item"
  23 + :pid="pid">
  24 + </goods-item-2>
14 25 </div>
15 26 </div>
16 27 </div>
... ... @@ -22,6 +33,7 @@
22 33 <script>
23 34 // 引入组件
24 35 import goodsItem1 from "@/components/goodsItem_1/goodsItem_1";
  36 + import goodsItem2 from "@/components/goodsItem_2/goodsItem_2";
25 37  
26 38 export default {
27 39 data: function () {
... ... @@ -30,9 +42,10 @@
30 42 scrollItemBox: 100
31 43 }
32 44 },
33   - props: ["lists", "pid"],
  45 + props: ["lists", "com", "pid"],
34 46 components: {
35   - goodsItem1
  47 + goodsItem1,
  48 + goodsItem2
36 49 },
37 50 methods: {
38 51  
... ... @@ -87,7 +100,7 @@
87 100 lists(newVal, oldVal) {
88 101  
89 102 // 判断是否有数据
90   - if (typeof newVal === "object" && newVal.length > 0 && (this.pid == "2" || this.pid == "4")) {
  103 + if (typeof newVal === "object" && newVal.length > 0) {
91 104  
92 105 // 下一周期处理
93 106 this.$nextTick(function() {
... ... @@ -101,7 +114,7 @@
101 114 mounted() {
102 115  
103 116 // 判断如果lists有值，设置横向滚动数据
104   - if (this.lists && this.lists.length && (this.pid == "2" || this.pid == "4")) {
  117 + if (this.lists && this.lists.length) {
105 118  
106 119 // 下一周期处理
107 120 this.$nextTick(function() {
... ... @@ -116,5 +129,5 @@
116 129  
117 130 <!-- Add "scoped" attribute to limit CSS to this component only -->
118 131 <style rel="stylesheet/less" lang="less">
119   - @import './horizList_1';
  132 + @import './horizList';
120 133 </style>
121 134 \ No newline at end of file
... ...
src/components/horizList_2/horizList_2.less deleted 100644 → 0
  View file @4a534d9
1   -@charset "UTF-8";
2   -
3   -.horiz-list-2-box {
4   - background-color: transparent;
5   - width: 100%;
6   - height: auto;
7   - .title-box + .box {
8   - margin-top: 30px;
9   - }
10   - > .box {
11   - margin-top: 30px;
12   - width: 750px;
13   - .h-box {
14   - width: 100%;
15   - height: 354px;
16   - overflow: hidden;
17   - .scroll-box {
18   - width: 100%;
19   - height: auto;
20   - overflow-x: auto;
21   - overflow-y: hidden;
22   - -webkit-overflow-scrolling: touch;
23   - padding-bottom: 26px;
24   - > .box {
25   - display: block;
26   - .item-box {
27   - display: inline-flex;
28   - padding-right: 30px;
29   - &:first-child {
30   - padding-left: 30px;
31   - }
32   - }
33   - }
34   - }
35   - }
36   - &.pid-2 {
37   - .h-box {
38   - height: 360px;
39   - .scroll-box {
40   - padding-bottom: 26px;
41   - }
42   - }
43   - }
44   - }
45   -}
46 0 \ No newline at end of file
src/components/horizList_2/horizList_2.vue deleted 100644 → 0
  View file @4a534d9
1   -<template>
2   - <div class="horiz-list-2-box" v-if="lists && lists.length">
3   - <slot name="title-box"></slot>
4   - <div class="box" :class="'pid-' + pid">
5   - <div class="h-box">
6   - <div class="scroll-box" ref="scrollBox">
7   - <div class="box" :style="'width: ' + scrollItemBox + 'vw'">
8   - <div class="item-box" v-for="(item, index) in lists" :key="index">
9   -
10   - <!-- 商品展示样式 2 -->
11   - <goods-item-2 @jump=jump
12   - :item="item"
13   - :pid="pid">
14   - </goods-item-2>
15   - </div>
16   - </div>
17   - </div>
18   - </div>
19   - </div>
20   - </div>
21   -</template>
22   -
23   -<script>
24   - // 引入组件
25   - import goodsItem2 from "@/components/goodsItem_2/goodsItem_2";
26   -
27   - export default {
28   - data: function () {
29   - return {
30   - basicWidth: 100,
31   - scrollItemBox: 100
32   - }
33   - },
34   - props: ["lists", "pid"],
35   - components: {
36   - goodsItem2
37   - },
38   - methods: {
39   -
40   - /**
41   - * 点击跳转
42   - */
43   - jump(item) {
44   - this.$emit("jump", item);
45   - },
46   -
47   - /**
48   - * 设置横向滚动
49   - * @param {object} wrapper [需要设置滚动的对象]
50   - */
51   - setScrollBox(wrapper) {
52   -
53   - // box滚动元素宽度，item对象
54   - let scrollItemBox = 0;
55   - let clientWidth = wrapper.clientWidth;
56   - let multiple = clientWidth / 750;
57   - let childrens = wrapper.children[0].children;
58   -
59   - // 遍历子元素，获取box宽度
60   - for (let i = 0; i < childrens.length; i++) {
61   - scrollItemBox += childrens[i].clientWidth;
62   - }
63   -
64   - // 根据屏幕比例计算实际设置vw值
65   - // scrollItemBox = (scrollItemBox + ((30 * multiple * (childrens.length - 1)))) / clientWidth * this.basicWidth;
66   - scrollItemBox = ((scrollItemBox + (0 * multiple)) / clientWidth * this.basicWidth);
67   -
68   - // 判断scrollItemBox值，更新this.scrollItemBox宽度
69   - if (scrollItemBox > this.basicWidth) {
70   - this.$set(this, "scrollItemBox", scrollItemBox);
71   - } else {
72   - this.$set(this, "scrollItemBox", this.basicWidth);
73   - }
74   - }
75   - },
76   - watch: {
77   -
78   - /**
79   - * 监听横向滚动数据加载
80   - */
81   - lists(newVal, oldVal) {
82   -
83   - // 判断是否有数据
84   - if (typeof newVal === "object" && newVal.length > 0) {
85   -
86   - // 下一周期处理
87   - this.$nextTick(function() {
88   -
89   - // 设置横向滚动
90   - this.setScrollBox(this.$refs.scrollBox);
91   - });
92   - }
93   - }
94   - },
95   - mounted() {
96   -
97   - // 判断如果lists有值，设置横向滚动数据
98   - if (this.lists && this.lists.length) {
99   -
100   - // 下一周期处理
101   - this.$nextTick(function() {
102   -
103   - // 设置横向滚动
104   - this.setScrollBox(this.$refs.scrollBox);
105   - });
106   - }
107   - }
108   - }
109   -</script>
110   -
111   -<!-- Add "scoped" attribute to limit CSS to this component only -->
112   -<style rel="stylesheet/less" lang="less">
113   - @import './horizList_2';
114   -</style>
115 0 \ No newline at end of file
src/components/style_7/style_7.vue
  View file @251803a
... ... @@ -21,10 +21,11 @@
21 21 </div>
22 22  
23 23 <!-- 横向滚动列表 -->
24   - <horiz-list-1 v-if="styles.market && styles.market.goods && styles.market.goods.length" @jump=jump @addCart=addCart
  24 + <horiz-list v-if="styles.market && styles.market.goods && styles.market.goods.length" @jump=jump @addCart=addCart
25 25 :lists="styles.market.goods"
  26 + com="1"
26 27 :pid="styles.market.pid">
27   - </horiz-list-1>
  28 + </horiz-list>
28 29 </div>
29 30 </div>
30 31 </template>
... ... @@ -33,7 +34,7 @@
33 34  
34 35 // 引入组件
35 36 import titleBox from "@/components/titleBox/titleBox";
36   - import horizList1 from "@/components/horizList_1/horizList_1";
  37 + import horizList from "@/components/horizList/horizList";
37 38  
38 39 export default {
39 40 data: function () {
... ... @@ -44,7 +45,7 @@
44 45 props: ["styles"],
45 46 components: {
46 47 titleBox,
47   - horizList1
  48 + horizList
48 49 },
49 50 methods: {
50 51  
... ...
src/components/videoArea/videoArea.less
  View file @251803a
... ... @@ -8,22 +8,25 @@
8 8 display: block;
9 9 }
10 10 .title{
11   - margin: 20px 0 0 20px;
12   - height:42px;
13   - font-size:30px;
14   - font-weight:500;
  11 + margin: 20px auto 0 auto;
15 12 color:rgba(102,102,102,1);
16   - line-height:42px;
  13 + font-size:30px;
  14 + width: 710px;
  15 + white-space: nowrap;
  16 + text-overflow: ellipsis;
  17 + overflow: hidden;
17 18 }
18 19 .desc{
19   - margin: 4px 20px 0 20px;
20   - height:40px;
  20 + margin: 3px auto 0 auto;
  21 + color:rgba(156,156,156,1);
21 22 font-size:28px;
22 23 font-weight:400;
23   - color:rgba(156,156,156,1);
24   - line-height:40px;
  24 + width: 710px;
25 25 padding-bottom: 20px;
26 26 border-bottom: solid 1px #F2F2F2;
  27 + white-space: nowrap;
  28 + text-overflow: ellipsis;
  29 + overflow: hidden;
27 30 }
28 31 .pic_box{
29 32 display: flex;
... ... @@ -46,6 +49,7 @@
46 49 color:rgba(172,172,172,1);
47 50 line-height:70px;
48 51 margin-left: 14px;
  52 + text-decoration: line-through;
49 53 }
50 54 }
51 55 .btn{
... ...
src/components/videoArea/videoArea.vue
  View file @251803a
... ... @@ -6,15 +6,15 @@
6 6 <div class="item_box" @click="toDetail(videoAreaInfo.img[0])">
7 7 <img v-lazy="videoAreaInfo.img[0].simg + SIGN.BIG" class="main-img" mode="widthFix" />
8 8 <div class="title">
9   - 美猴王系列绘本（套装共32册）
  9 + {{videoAreaInfo.img[0].goods_data.title}}
10 10 </div>
11   - <div class="desc">
12   - 规格：32册／套
  11 + <div class="desc" v-if="videoAreaInfo.img[0].goods_data.attr">
  12 + {{videoAreaInfo.img[0].goods_data.attr}}
13 13 </div>
14 14 <div class="pic_box">
15 15 <div class="pice">
16   - <div class="now">¥ 361.9</div>
17   - <div class="original">¥ 399.9</div>
  16 + <div class="now">¥ {{videoAreaInfo.img[0].goods_data.price}}</div>
  17 + <div class="original">¥ {{videoAreaInfo.img[0].goods_data.prices}}</div>
18 18 </div>
19 19 <!--<div class="btn">-->
20 20 <!--立即购买-->
... ...
src/pages/com/com.vue
  View file @251803a
1 1 <template>
2 2 <div class="com">
3 3  
4   - <!-- 商品样式 2 滑动 -->
5   - <horiz-list-2 @jump="jump"
  4 + <!-- 商品样式 滑动 -->
  5 + <horiz-list @jump="jump"
6 6 :lists="lists"
7   - pid="1">
  7 + com="2"
  8 + pid="2">
8 9  
9 10 <!-- 标题 -->
10 11 <text-title-box slot="title-box"
... ... @@ -12,7 +13,7 @@
12 13 title: '最近购买'
13 14 }">
14 15 </text-title-box>
15   - </horiz-list-2>
  16 + </horiz-list>
16 17  
17 18  
18 19  
... ... @@ -23,7 +24,7 @@
23 24  
24 25 // 引入组件
25 26 import { Toast, Indicator } from "mint-ui";
26   - import horizList2 from "@/components/horizList_2/horizList_2";
  27 + import horizList from "@/components/horizList/horizList";
27 28 import textTitleBox from "@/components/textTitleBox/textTitleBox";
28 29  
29 30 export default {
... ... @@ -71,7 +72,7 @@
71 72 }
72 73 },
73 74 components: {
74   - horizList2,
  75 + horizList,
75 76 textTitleBox,
76 77  
77 78  
... ...
src/pages/mall/mall.vue
  View file @251803a
... ... @@ -69,9 +69,6 @@
69 69 },
70 70 created() {
71 71  
72   - // 设置标题
73   - this.$set(this, "title", "优选库商城");
74   -
75 72 // 获取优选库精选活动
76 73 this.activityAd();
77 74 },
... ... @@ -111,6 +108,9 @@
111 108  
112 109 /* 获取优选库精选活动数据 开始 */
113 110  
  111 + // 设置标题
  112 + this.$set(this, "title", datas.title);
  113 +
114 114 // 设置banner数据
115 115 if (datas.banner && datas.banner.length) {
116 116 this.$set(this, "banner", datas.banner);
... ...