w-front-end / select_good · Commits

Commit 3110ab73cee20c390a16e3278f5398ff18dbdac8

Authored by zhiyangdu
1 parent 248e29f3

积分商城组件调用

Inline Side-by-side
Showing 6 changed files with 134 additions and 80 deletions
src/components/goodsItem_2/goodsItem_2.less
  View file @3110ab7
... ... @@ -34,8 +34,12 @@
34 34 font-size: 24px;
35 35 white-space: nowrap;
36 36 text-overflow: ellipsis;
37   - overflow: hidden;
38   - }
  37 + overflow: hidden;
  38 + }
  39 + /**积分商城显示灰色颜色字**/
  40 + .grey {
  41 + color: #666666;
  42 + }
39 43 .price-box {
40 44 display: flex;
41 45 justify-content: flex-start;
... ...
src/components/goodsItem_2/goodsItem_2.vue
  View file @3110ab7
... ... @@ -7,8 +7,10 @@
7 7 <slot name="flag"></slot>
8 8 </div>
9 9 <div class="content-box">
10   - <div class="title" v-if="pid == undefined || pid == '1' || pid == '3' || pid == '4' || pid == '5'">{{item.title}}</div>
11   - <div class="price-box" v-if="pid != '5'">
  10 + <!--因积分商城需要显示白色灰色字体标示 -->
  11 + <div class="title" :class={grey:item.grade} v-if="pid == undefined || pid == '1' || pid == '3' || pid == '4' || pid == '5'">{{item.title}}</div>
  12 + <!--因积分商城不价格所有加上 !item.grade判断 -->
  13 + <div class="price-box" v-if="pid != '5' && !item.grade">
12 14 <div class="symbol">¥&nbsp;</div>
13 15 <div class="price">{{item.price}}</div>
14 16 <div class="prices" v-if="(pid == '3' || pid == '4') && item.prices && parseFloat(item.prices) > 0 && parseFloat(item.prices) > parseFloat(item.price)">¥{{item.prices}}</div>
... ... @@ -21,27 +23,27 @@
21 23 </template>
22 24  
23 25 <script>
24   - export default {
25   - data: function () {
26   - return {
  26 +export default {
  27 + data: function () {
  28 + return {
27 29  
28   - }
29   - },
30   - props: ["item", "pid"],
31   - methods: {
  30 + }
  31 + },
  32 + props: ["item", "pid"],
  33 + methods: {
32 34  
33   - /**
34   - * 点击跳转
35   - * @param {object} item [数据对象]
36   - */
37   - jump(item) {
38   - this.$emit("jump", item);
39   - }
40   - }
  35 + /**
  36 + * 点击跳转
  37 + * @param {object} item [数据对象]
  38 + */
  39 + jump (item) {
  40 + this.$emit("jump", item);
41 41 }
  42 + }
  43 +}
42 44 </script>
43 45  
44 46 <!-- Add "scoped" attribute to limit CSS to this component only -->
45 47 <style rel="stylesheet/less" lang="less" scoped>
46   - @import './goodsItem_2';
  48 +@import './goodsItem_2';
47 49 </style>
... ...
src/components/goodsItem_7/goodsItem_7.less
  View file @3110ab7
... ... @@ -17,12 +17,28 @@
17 17 width: 100%;
18 18 height: 330px;
19 19 // height: 100%;
20   - overflow: hidden;
  20 + overflow: hidden;
  21 + // 因为积分需要层叠到图片上方需要设置父级相对定位
  22 + position: relative;
21 23 .img {
22 24 display: block;
23 25 width: 100%;
24 26 height: auto;
25   - }
  27 + }
  28 + // 积分商城需要商品是否有货显示补货中
  29 + .goods_active{
  30 + width: 100%;
  31 + height: 58px;
  32 + line-height: 58px;
  33 + background: #000000;
  34 + color: #fff;
  35 + font-size: 30px;
  36 + opacity: 0.39;
  37 + text-align: center;
  38 + position: absolute;
  39 + left: 0;
  40 + bottom: 0;
  41 + }
26 42 }
27 43 .content-box {
28 44 margin: 0 auto;
... ... @@ -84,7 +100,23 @@
84 100 height: 48px;
85 101 }
86 102 }
87   - }
  103 + }
  104 + /**积分显示*/
  105 + .grade-box {
  106 + height: 50px;
  107 + font-size: 36px;
  108 + font-weight: 500;
  109 + color: #FC1541;
  110 + line-height: 50px;
  111 + display: flex;
  112 + align-items: center;
  113 + span{
  114 + font-size: 24px;
  115 + font-weight: 400;
  116 + color: #999999;
  117 + margin-left: 10px;
  118 + }
  119 + }
88 120 }
89 121 }
90 122 }
... ...
src/components/goodsItem_7/goodsItem_7.vue
  View file @3110ab7
... ... @@ -3,13 +3,18 @@
3 3 <div class="item">
4 4 <div class="img-box">
5 5 <img v-lazy="item.simg + SIGN.MIDDLE" class="img" />
  6 + <!-- 补货中按钮 -->
  7 + <div v-show="item.grade" class="goods_active">
  8 + 补货中
  9 + </div>
6 10 </div>
7 11 <div class="content-box">
8 12 <div class="title">{{item.title}}</div>
9 13 <!-- <div class="coupon-box">
10 14 满180减10
11 15 </div> -->
12   - <div class="price-box">
  16 + <!-- 价格 -->
  17 + <div v-show="!item.grade" class="price-box">
13 18 <div class="left">
14 19 <div class="y">¥&nbsp;</div>
15 20 <div class="integer">{{getInteger(item.price)}}.</div>
... ... @@ -19,70 +24,74 @@
19 24 <img src="static/img/icon_add.png" class="icon-add" mode="widthFix" @click.stop.prevent="primary(item)" />
20 25 </div>
21 26 </div>
  27 + <!-- 积分 -->
  28 + <div v-show="item.grade" class="grade-box">
  29 + {{item.grade}}<span>积分</span>
  30 + </div>
22 31 </div>
23 32 </div>
24 33 </div>
25 34 </template>
26 35  
27 36 <script>
28   - export default {
29   - data: function () {
30   - return {
  37 +export default {
  38 + data: function () {
  39 + return {
31 40  
32   - }
33   - },
34   - props: ["item"],
35   - computed: {
  41 + }
  42 + },
  43 + props: ["item"],
  44 + computed: {
36 45  
37   - /**
38   - * 获取输入数字的整数部分
39   - */
40   - getInteger() {
41   - return (number) => {
42   - return parseInt(number);
43   - }
44   - },
  46 + /**
  47 + * 获取输入数字的整数部分
  48 + */
  49 + getInteger () {
  50 + return (number) => {
  51 + return parseInt(number);
  52 + }
  53 + },
45 54  
46   - /**
47   - * 获取输入数字的小数部分
48   - */
49   - getDecimal() {
50   - return (number) => {
  55 + /**
  56 + * 获取输入数字的小数部分
  57 + */
  58 + getDecimal () {
  59 + return (number) => {
51 60  
52   - // 拆分数字
53   - let numberArr = number.toString().split(".");
  61 + // 拆分数字
  62 + let numberArr = number.toString().split(".");
54 63  
55   - // 判断是否有效数部分
56   - if (numberArr.length === 2) {
57   - return numberArr[1];
58   - } else {
59   - return "00";
60   - }
61   - }
62   - }
63   - },
64   - methods: {
  64 + // 判断是否有效数部分
  65 + if (numberArr.length === 2) {
  66 + return numberArr[1];
  67 + } else {
  68 + return "00";
  69 + }
  70 + }
  71 + }
  72 + },
  73 + methods: {
65 74  
66   - /**
67   - * 点击跳转
68   - * @param {object} item [数据对象]
69   - */
70   - jump(item) {
71   - this.$emit("jump", item);
72   - },
  75 + /**
  76 + * 点击跳转
  77 + * @param {object} item [数据对象]
  78 + */
  79 + jump (item) {
  80 + this.$emit("jump", item);
  81 + },
73 82  
74   - /**
75   - * 主按钮点击事件
76   - * @param {object} item [数据对象]
77   - */
78   - primary(item) {
79   - this.$emit("primary", item);
80   - }
81   - }
  83 + /**
  84 + * 主按钮点击事件
  85 + * @param {object} item [数据对象]
  86 + */
  87 + primary (item) {
  88 + this.$emit("primary", item);
82 89 }
  90 + }
  91 +}
83 92 </script>
84 93  
85 94 <!-- Add "scoped" attribute to limit CSS to this component only -->
86 95 <style rel="stylesheet/less" lang="less" scoped>
87   - @import './goodsItem_7';
  96 +@import './goodsItem_7';
88 97 </style>
... ...
src/pages/pointsMall/pointsMall.less
  View file @3110ab7
... ... @@ -75,7 +75,7 @@
75 75 display:flex;
76 76 justify-content: space-between;
77 77 align-items: center;
78   - padding: 30px 20px;
  78 + padding: 10px 20px;
79 79 .earn_icon{
80 80 display: block;
81 81 width: 36px;
... ...
src/pages/pointsMall/pointsMall.vue
  View file @3110ab7
... ... @@ -121,7 +121,8 @@ export default {
121 121 prices: "6.00",
122 122 shop_type: "1",
123 123 simg: "http://wjjseller.cnlive.com/uploads/05ac5ee31c3bb363d95072559d205bd8.png",
124   - title: "L'OCCITANE/欧舒丹 芍药花香润手霜 30ML 30ml"
  124 + title: "L'OCCITANE/欧舒丹 芍药花香润手霜 30ML 30ml",
  125 + grade: 1500 // 积分
125 126 },
126 127 {
127 128 ads: "广告语",
... ... @@ -130,7 +131,8 @@ export default {
130 131 prices: "6.00",
131 132 shop_type: "1",
132 133 simg: "http://wjjseller.cnlive.com/uploads/05ac5ee31c3bb363d95072559d205bd8.png",
133   - title: "L'OCCITANE/欧舒丹 芍药花香润手霜 30ML 30ml"
  134 + title: "L'OCCITANE/欧舒丹 芍药花香润手霜 30ML 30ml",
  135 + grade: 1500 // 积分
134 136 },
135 137 {
136 138 ads: "广告语",
... ... @@ -139,7 +141,8 @@ export default {
139 141 prices: "6.00",
140 142 shop_type: "1",
141 143 simg: "http://wjjseller.cnlive.com/uploads/05ac5ee31c3bb363d95072559d205bd8.png",
142   - title: "L'OCCITANE/欧舒丹 芍药花香润手霜 30ML 30ml"
  144 + title: "L'OCCITANE/欧舒丹 芍药花香润手霜 30ML 30ml",
  145 + grade: 1500 // 积分
143 146 }
144 147 ]);
145 148 // 临时，实物商品列表
... ... @@ -158,7 +161,8 @@ export default {
158 161 simg: "https://wjjtest.ys2.cnliveimg.com/802/shop/img/2020/11/05/5fa3695e39ae6.png",
159 162 stock: "0",
160 163 stoptime: "0",
161   - title: "aabbsdf350ml"
  164 + title: "aabbsdf350ml",
  165 + grade: 1500 // 积分
162 166 },
163 167 {
164 168 activity: "0",
... ... @@ -173,7 +177,8 @@ export default {
173 177 simg: "https://wjjtest.ys2.cnliveimg.com/802/shop/img/2020/11/05/5fa3695e39ae6.png",
174 178 stock: "0",
175 179 stoptime: "0",
176   - title: "aabbsdf350ml"
  180 + title: "aabbsdf350ml",
  181 + grade: 1500 // 积分
177 182 },
178 183 {
179 184 activity: "0",
... ... @@ -188,7 +193,8 @@ export default {
188 193 simg: "https://wjjtest.ys2.cnliveimg.com/802/shop/img/2020/11/05/5fa3695e39ae6.png",
189 194 stock: "0",
190 195 stoptime: "0",
191   - title: "aabbsdf350ml"
  196 + title: "aabbsdf350ml",
  197 + grade: 1500 // 积分
192 198 },
193 199 {
194 200 activity: "0",
... ... @@ -203,7 +209,8 @@ export default {
203 209 simg: "https://wjjtest.ys2.cnliveimg.com/802/shop/img/2020/11/05/5fa3695e39ae6.png",
204 210 stock: "0",
205 211 stoptime: "0",
206   - title: "aabbsdf350ml"
  212 + title: "aabbsdf350ml",
  213 + grade: 1500 // 积分
207 214 }
208 215 ]
209 216 });
... ...