w-front-end / select_good · Commits

Commit 3d71e834420b1c8488e10e5de0ea36c6eace437d

Authored by 王强
1 parent 099b82ee

折扣专区对接~

Inline Side-by-side
Showing 3 changed files with 72 additions and 270 deletions
src/components/goodsItem_8/goodsItem_8.vue
  View file @3d71e83
@@ -10,8 +10,8 @@ @@ -10,8 +10,8 @@
10 <div class="content-box"> 10 <div class="content-box">
11 <div class="top-box"> 11 <div class="top-box">
12 <div class="title">{{item.title}}</div> 12 <div class="title">{{item.title}}</div>
13 - <!-- <div class="sub-title">{{item.ads}}</div> -->  
14 - <div class="sub-title">已售出&nbsp;{{item.num}}&nbsp;件</div> 13 + <div class="sub-title" v-if="sty == '2'">已售出&nbsp;{{item.num}}&nbsp;件</div>
  14 + <div class="sub-title" v-else>{{item.ads}}</div>
15 </div> 15 </div>
16 <div class="bottom-box"> 16 <div class="bottom-box">
17 <div class="price-box"> 17 <div class="price-box">
@@ -22,7 +22,7 @@ @@ -22,7 +22,7 @@
22 </div> 22 </div>
23 <div class="icon-box" @click.stop.prevent="primary(item)"> 23 <div class="icon-box" @click.stop.prevent="primary(item)">
24 <img src="static/img/icon_list_arrow_right.png" class="icon-img" v-if="sty == 2" /> 24 <img src="static/img/icon_list_arrow_right.png" class="icon-img" v-if="sty == 2" />
25 - <div class="btn btn-disabled" v-else-if="item.stock == '0'">已抢光</div> 25 + <div class="btn btn-disabled" v-else-if="sty == '1' && (item.num == '2' || (item.num == '1' && item.stock == '0'))">已抢光</div>
26 <img src="static/img/icon_shopping_cart_active.png" class="icon-img" v-else /> 26 <img src="static/img/icon_shopping_cart_active.png" class="icon-img" v-else />
27 27
28 <!-- 限购几件，不能再加入购物车展示效果，灰度图片 --> 28 <!-- 限购几件，不能再加入购物车展示效果，灰度图片 -->
src/pages/discountList/discountList.less
  View file @3d71e83
1 @charset "UTF-8"; 1 @charset "UTF-8";
2 2
3 .discount-list-page { 3 .discount-list-page {
4 - background-color: #FFF6E5; 4 + background-color: #ffffff;
5 min-height: 100vh; 5 min-height: 100vh;
6 .call-app-box { 6 .call-app-box {
7 position: fixed; 7 position: fixed;
src/pages/discountList/discountList.vue
  View file @3d71e83
1 <template> 1 <template>
2 - <div class="discount-list-page"> 2 + <div class="discount-list-page" :style="{'backgroundColor': datas && datas.discount_color ? datas.discount_color : ''}">
3 3
4 <!-- H5唤起App组件 --> 4 <!-- H5唤起App组件 -->
5 <call-app-box class="call-app-box" ref="callApp" v-if="!isCNLive.value && $parent.isOpenApp.value" 5 <call-app-box class="call-app-box" ref="callApp" v-if="!isCNLive.value && $parent.isOpenApp.value"
@@ -23,20 +23,20 @@ @@ -23,20 +23,20 @@
23 </div> 23 </div>
24 24
25 <!-- 倒计时 --> 25 <!-- 倒计时 -->
26 - <div class="count-down-box"> 26 + <div class="count-down-box" v-if="datas && datas.discount_time && datas.discount_time > 0">
27 <div class="text"> 27 <div class="text">
28 距离活动结束仅剩 28 距离活动结束仅剩
29 </div> 29 </div>
30 30
31 <!-- 倒计时组件 --> 31 <!-- 倒计时组件 -->
32 <count-down-com slot="extend" 32 <count-down-com slot="extend"
33 - :time="new Date().getTime() + 10000000 - new Date().getTime()" 33 + :time="datas.discount_time"
34 sty="5"> 34 sty="5">
35 </count-down-com> 35 </count-down-com>
36 </div> 36 </div>
37 37
38 <!-- 商品列表 --> 38 <!-- 商品列表 -->
39 - <div class="section goods-list"> 39 + <div class="section goods-list" v-if="goodsLists && goodsLists.length">
40 40
41 <!-- 商品列表 --> 41 <!-- 商品列表 -->
42 <goods-item-8 v-for="(item, index) in goodsLists" :key="index" @jump="toDetail" @primary="primary" 42 <goods-item-8 v-for="(item, index) in goodsLists" :key="index" @jump="toDetail" @primary="primary"
@@ -45,7 +45,7 @@ @@ -45,7 +45,7 @@
45 45
46 <!-- 折扣角标 --> 46 <!-- 折扣角标 -->
47 <div class="discount-flag" slot="flag"> 47 <div class="discount-flag" slot="flag">
48 - 5折 48 + {{getDiscount(item.price, item.prices)}}折
49 </div> 49 </div>
50 </goods-item-8> 50 </goods-item-8>
51 </div> 51 </div>
@@ -84,10 +84,23 @@ @@ -84,10 +84,23 @@
84 return { 84 return {
85 title: "", // 标题 85 title: "", // 标题
86 backs: null, // 后退按钮组 86 backs: null, // 后退按钮组
87 - goodsLists: null, // 商品列表 87 + datas: null, // 接口数据
  88 + goodsLists: null // 商品列表
  89 + }
  90 + },
  91 + computed: {
88 92
  93 + /**
  94 + * 计算折扣
  95 + */
  96 + getDiscount() {
  97 + return (price, prices) => {
89 98
  99 + // 售价/原价
  100 + let x = (price * 100) / (prices * 100);
90 101
  102 + return (Math.floor(x * 100) / 100) * 10;
  103 + }
91 } 104 }
92 }, 105 },
93 components: { 106 components: {
@@ -107,6 +120,7 @@ @@ -107,6 +120,7 @@
107 120
108 // 添加后退按钮组“后退”和“分享”按钮 121 // 添加后退按钮组“后退”和“分享”按钮
109 this.$set(this, 'backs', { 122 this.$set(this, 'backs', {
  123 + title: this.title,
110 funcs: { 124 funcs: {
111 back: { 125 back: {
112 icon: "static/img/icon_back.png" 126 icon: "static/img/icon_back.png"
@@ -119,270 +133,35 @@ @@ -119,270 +133,35 @@
119 ] 133 ]
120 } 134 }
121 }); 135 });
122 -  
123 - // 设置标题  
124 - this.$set(this.backs, 'title', '折扣专区');  
125 } 136 }
126 137
127 -  
128 -  
129 - // 优选页面接口  
130 - // this.fansShopMessageList();  
131 -  
132 -  
133 - // 临时，初始化列表数据  
134 - this.$set(this, 'goodsLists', [  
135 - {  
136 - ads: "专区特供超值商品",  
137 - id: "9524815",  
138 - price: "50.00",  
139 - prices: "300.00",  
140 - stock: "10",  
141 - shop: {  
142 - id: "57",  
143 - logo: "https://wjjtest.ys2.cnliveimg.com/802/shop/img/2019/04/20/5cbab33c82a82.png",  
144 - shop_url: "https://wjjshop.cnlive.com/html/mall/1/#/pages/main/shopIndex/shop?shop_id=57",  
145 - title: "李宁旗舰店",  
146 - titles: "专区特供超值商品"  
147 - },  
148 - shop_type: "1",  
149 - shopid: "57",  
150 - simg: "http://wjjtest.ys2.cnliveimg.com/802/shop/img/2019/01/02/5c2c76eeb6584.jpg",  
151 - title: "传统汉堡焗套餐 传统汉堡焗套餐汉堡焗传统汉堡焗套餐传统汉堡焗套餐 传统汉堡焗套餐汉堡焗传统汉堡焗套餐"  
152 - },  
153 - {  
154 - ads: "专区特供超值商品",  
155 - id: "9524815",  
156 - price: "50.00",  
157 - prices: "20.00",  
158 - stock: "10",  
159 - shop: {  
160 - id: "57",  
161 - logo: "https://wjjtest.ys2.cnliveimg.com/802/shop/img/2019/04/20/5cbab33c82a82.png",  
162 - shop_url: "https://wjjshop.cnlive.com/html/mall/1/#/pages/main/shopIndex/shop?shop_id=57",  
163 - title: "李宁旗舰店",  
164 - titles: "专区特供超值商品"  
165 - },  
166 - shop_type: "1",  
167 - shopid: "57",  
168 - simg: "http://wjjtest.ys2.cnliveimg.com/802/shop/img/2019/01/02/5c2c76eeb6584.jpg",  
169 - title: "传统汉堡焗套餐"  
170 - },  
171 - {  
172 - ads: "专区特供超值商品",  
173 - id: "9524815",  
174 - price: "50.00",  
175 - prices: "300.00",  
176 - stock: "0",  
177 - shop: {  
178 - id: "57",  
179 - logo: "https://wjjtest.ys2.cnliveimg.com/802/shop/img/2019/04/20/5cbab33c82a82.png",  
180 - shop_url: "https://wjjshop.cnlive.com/html/mall/1/#/pages/main/shopIndex/shop?shop_id=57",  
181 - title: "李宁旗舰店",  
182 - titles: "专区特供超值商品"  
183 - },  
184 - shop_type: "1",  
185 - shopid: "57",  
186 - simg: "http://wjjtest.ys2.cnliveimg.com/802/shop/img/2019/01/02/5c2c76eeb6584.jpg",  
187 - title: "传统汉堡焗套餐 传统汉堡焗套餐汉堡焗传统汉堡焗套餐传统汉堡焗套餐 传统汉堡焗套餐汉堡焗传统汉堡焗套餐"  
188 - },  
189 - {  
190 - ads: "专区特供超值商品",  
191 - id: "9524815",  
192 - price: "50.00",  
193 - prices: "300.00",  
194 - stock: "10",  
195 - shop: {  
196 - id: "57",  
197 - logo: "https://wjjtest.ys2.cnliveimg.com/802/shop/img/2019/04/20/5cbab33c82a82.png",  
198 - shop_url: "https://wjjshop.cnlive.com/html/mall/1/#/pages/main/shopIndex/shop?shop_id=57",  
199 - title: "李宁旗舰店",  
200 - titles: "专区特供超值商品"  
201 - },  
202 - shop_type: "1",  
203 - shopid: "57",  
204 - simg: "http://wjjtest.ys2.cnliveimg.com/802/shop/img/2019/01/02/5c2c76eeb6584.jpg",  
205 - title: "传统汉堡焗套餐 传统汉堡焗套餐汉堡焗传统汉堡焗套餐传统汉堡焗套餐 传统汉堡焗套餐汉堡焗传统汉堡焗套餐"  
206 - },  
207 - {  
208 - ads: "专区特供超值商品",  
209 - id: "9524815",  
210 - price: "50.00",  
211 - prices: "300.00",  
212 - stock: "10",  
213 - shop: {  
214 - id: "57",  
215 - logo: "https://wjjtest.ys2.cnliveimg.com/802/shop/img/2019/04/20/5cbab33c82a82.png",  
216 - shop_url: "https://wjjshop.cnlive.com/html/mall/1/#/pages/main/shopIndex/shop?shop_id=57",  
217 - title: "李宁旗舰店",  
218 - titles: "专区特供超值商品"  
219 - },  
220 - shop_type: "1",  
221 - shopid: "57",  
222 - simg: "http://wjjtest.ys2.cnliveimg.com/802/shop/img/2019/01/02/5c2c76eeb6584.jpg",  
223 - title: "传统汉堡焗套餐 传统汉堡焗套餐汉堡焗传统汉堡焗套餐传统汉堡焗套餐 传统汉堡焗套餐汉堡焗传统汉堡焗套餐"  
224 - },  
225 - {  
226 - ads: "专区特供超值商品",  
227 - id: "9524815",  
228 - price: "50.00",  
229 - prices: "300.00",  
230 - stock: "0",  
231 - shop: {  
232 - id: "57",  
233 - logo: "https://wjjtest.ys2.cnliveimg.com/802/shop/img/2019/04/20/5cbab33c82a82.png",  
234 - shop_url: "https://wjjshop.cnlive.com/html/mall/1/#/pages/main/shopIndex/shop?shop_id=57",  
235 - title: "李宁旗舰店",  
236 - titles: "专区特供超值商品"  
237 - },  
238 - shop_type: "1",  
239 - shopid: "57",  
240 - simg: "http://wjjtest.ys2.cnliveimg.com/802/shop/img/2019/01/02/5c2c76eeb6584.jpg",  
241 - title: "传统汉堡焗套餐 传统汉堡焗套餐汉堡焗传统汉堡焗套餐传统汉堡焗套餐 传统汉堡焗套餐汉堡焗传统汉堡焗套餐"  
242 - },  
243 - {  
244 - ads: "专区特供超值商品",  
245 - id: "9524815",  
246 - price: "50.00",  
247 - prices: "300.00",  
248 - stock: "0",  
249 - shop: {  
250 - id: "57",  
251 - logo: "https://wjjtest.ys2.cnliveimg.com/802/shop/img/2019/04/20/5cbab33c82a82.png",  
252 - shop_url: "https://wjjshop.cnlive.com/html/mall/1/#/pages/main/shopIndex/shop?shop_id=57",  
253 - title: "李宁旗舰店",  
254 - titles: "专区特供超值商品"  
255 - },  
256 - shop_type: "1",  
257 - shopid: "57",  
258 - simg: "http://wjjtest.ys2.cnliveimg.com/802/shop/img/2019/01/02/5c2c76eeb6584.jpg",  
259 - title: "传统汉堡焗套餐 传统汉堡焗套餐汉堡焗传统汉堡焗套餐传统汉堡焗套餐 传统汉堡焗套餐汉堡焗传统汉堡焗套餐"  
260 - },  
261 - {  
262 - ads: "专区特供超值商品",  
263 - id: "9524815",  
264 - price: "50.00",  
265 - prices: "300.00",  
266 - stock: "10",  
267 - shop: {  
268 - id: "57",  
269 - logo: "https://wjjtest.ys2.cnliveimg.com/802/shop/img/2019/04/20/5cbab33c82a82.png",  
270 - shop_url: "https://wjjshop.cnlive.com/html/mall/1/#/pages/main/shopIndex/shop?shop_id=57",  
271 - title: "李宁旗舰店",  
272 - titles: "专区特供超值商品"  
273 - },  
274 - shop_type: "1",  
275 - shopid: "57",  
276 - simg: "http://wjjtest.ys2.cnliveimg.com/802/shop/img/2019/01/02/5c2c76eeb6584.jpg",  
277 - title: "传统汉堡焗套餐 传统汉堡焗套餐汉堡焗传统汉堡焗套餐传统汉堡焗套餐 传统汉堡焗套餐汉堡焗传统汉堡焗套餐"  
278 - },  
279 - {  
280 - ads: "专区特供超值商品",  
281 - id: "9524815",  
282 - price: "50.00",  
283 - prices: "300.00",  
284 - stock: "10",  
285 - shop: {  
286 - id: "57",  
287 - logo: "https://wjjtest.ys2.cnliveimg.com/802/shop/img/2019/04/20/5cbab33c82a82.png",  
288 - shop_url: "https://wjjshop.cnlive.com/html/mall/1/#/pages/main/shopIndex/shop?shop_id=57",  
289 - title: "李宁旗舰店",  
290 - titles: "专区特供超值商品"  
291 - },  
292 - shop_type: "1",  
293 - shopid: "57",  
294 - simg: "http://wjjtest.ys2.cnliveimg.com/802/shop/img/2019/01/02/5c2c76eeb6584.jpg",  
295 - title: "传统汉堡焗套餐 传统汉堡焗套餐汉堡焗传统汉堡焗套餐传统汉堡焗套餐 传统汉堡焗套餐汉堡焗传统汉堡焗套餐"  
296 - },  
297 - {  
298 - ads: "专区特供超值商品",  
299 - id: "9524815",  
300 - price: "50.00",  
301 - prices: "300.00",  
302 - stock: "10",  
303 - shop: {  
304 - id: "57",  
305 - logo: "https://wjjtest.ys2.cnliveimg.com/802/shop/img/2019/04/20/5cbab33c82a82.png",  
306 - shop_url: "https://wjjshop.cnlive.com/html/mall/1/#/pages/main/shopIndex/shop?shop_id=57",  
307 - title: "李宁旗舰店",  
308 - titles: "专区特供超值商品"  
309 - },  
310 - shop_type: "1",  
311 - shopid: "57",  
312 - simg: "http://wjjtest.ys2.cnliveimg.com/802/shop/img/2019/01/02/5c2c76eeb6584.jpg",  
313 - title: "传统汉堡焗套餐 传统汉堡焗套餐汉堡焗传统汉堡焗套餐传统汉堡焗套餐 传统汉堡焗套餐汉堡焗传统汉堡焗套餐"  
314 - },  
315 - {  
316 - ads: "专区特供超值商品",  
317 - id: "9524815",  
318 - price: "50.00",  
319 - prices: "300.00",  
320 - stock: "0",  
321 - shop: {  
322 - id: "57",  
323 - logo: "https://wjjtest.ys2.cnliveimg.com/802/shop/img/2019/04/20/5cbab33c82a82.png",  
324 - shop_url: "https://wjjshop.cnlive.com/html/mall/1/#/pages/main/shopIndex/shop?shop_id=57",  
325 - title: "李宁旗舰店",  
326 - titles: "专区特供超值商品"  
327 - },  
328 - shop_type: "1",  
329 - shopid: "57",  
330 - simg: "http://wjjtest.ys2.cnliveimg.com/802/shop/img/2019/01/02/5c2c76eeb6584.jpg",  
331 - title: "传统汉堡焗套餐 传统汉堡焗套餐汉堡焗传统汉堡焗套餐传统汉堡焗套餐 传统汉堡焗套餐汉堡焗传统汉堡焗套餐"  
332 - },  
333 - {  
334 - ads: "专区特供超值商品",  
335 - id: "9524815",  
336 - price: "50.00",  
337 - prices: "300.00",  
338 - stock: "10",  
339 - shop: {  
340 - id: "57",  
341 - logo: "https://wjjtest.ys2.cnliveimg.com/802/shop/img/2019/04/20/5cbab33c82a82.png",  
342 - shop_url: "https://wjjshop.cnlive.com/html/mall/1/#/pages/main/shopIndex/shop?shop_id=57",  
343 - title: "李宁旗舰店",  
344 - titles: "专区特供超值商品"  
345 - },  
346 - shop_type: "1",  
347 - shopid: "57",  
348 - simg: "http://wjjtest.ys2.cnliveimg.com/802/shop/img/2019/01/02/5c2c76eeb6584.jpg",  
349 - title: "传统汉堡焗套餐 传统汉堡焗套餐汉堡焗传统汉堡焗套餐传统汉堡焗套餐 传统汉堡焗套餐汉堡焗传统汉堡焗套餐"  
350 - }  
351 - ]);  
352 -  
353 -  
354 -  
355 -  
356 - 138 + // 折扣专区列表
  139 + this.discountGoods();
357 }, 140 },
358 methods: { 141 methods: {
359 142
360 /** 143 /**
361 - * 优选页面接口 144 + * 折扣专区列表
362 */ 145 */
363 - fansShopMessageList() {  
364 -  
365 - // 校验登录  
366 - if (this.$parent.checkLogin()) { 146 + discountGoods() {
367 147
368 - // 加载中提示  
369 - Indicator.open("加载中..."); 148 + // 加载中提示
  149 + Indicator.open("加载中...");
370 150
371 - // 获取证书请求接口  
372 - this.http("/Api/" + this.getApiVersion().dynamic + "/fansShopMessageList", {  
373 - uid: this.getStore("uid")  
374 - }, this.fansShopMessageListCallback, {  
375 - method: "POST"  
376 - });  
377 - } 151 + // 获取证书请求接口
  152 + this.http("/Api/" + this.getApiVersion().good + "/discountGoods", {
  153 + uid: this.getStore("uid") || 0
  154 + }, this.discountGoodsCallback, {
  155 + method: "POST"
  156 + });
378 }, 157 },
379 158
380 /** 159 /**
381 - * 优选页面接口回调 160 + * 折扣专区列表回调
382 * @param {Object} res [服务器返回数据] 161 * @param {Object} res [服务器返回数据]
383 * @param {Object} ext [扩展参数] 162 * @param {Object} ext [扩展参数]
384 */ 163 */
385 - fansShopMessageListCallback(res, ext) { 164 + discountGoodsCallback(res, ext) {
386 165
387 // 加载完成 166 // 加载完成
388 Indicator.close(); 167 Indicator.close();
@@ -393,11 +172,23 @@ @@ -393,11 +172,23 @@
393 // 解构数据 172 // 解构数据
394 let { data: datas } = res; 173 let { data: datas } = res;
395 174
396 - /* 获取优选库“优选”数据 开始 */ 175 + /* 获取折扣专区列表数据 开始 */
  176 +
  177 + // 判断接口是否有数据
  178 + if (datas) {
  179 +
  180 + // 设置接口数据
  181 + this.$set(this, 'datas', datas);
  182 +
  183 + // 判断是否有列表数据
  184 + if (datas.list && datas.list.length) {
397 185
398 - 186 + // 设置商品列表数据
  187 + this.$set(this, 'goodsLists', datas.list);
  188 + }
  189 + }
399 190
400 - /* 获取优选库“优选”数据 结束 */ 191 + /* 获取折扣专区列表数据 结束 */
401 192
402 } else if (res.code == 400) { 193 } else if (res.code == 400) {
403 194
@@ -406,7 +197,7 @@ @@ -406,7 +197,7 @@
406 } else { 197 } else {
407 198
408 // 获取优选失败 199 // 获取优选失败
409 - Toast("获取优选失败"); 200 + Toast("获取列表失败");
410 } 201 }
411 }, 202 },
412 203
@@ -419,15 +210,23 @@ @@ -419,15 +210,23 @@
419 // 判断App内 210 // 判断App内
420 if (this.isCNLive.value) { 211 if (this.isCNLive.value) {
421 212
  213 + // 已抢光，不跳转
  214 + if (item.num == '2' || (item.num == '1' && item.stock == '0')) {
  215 + return false;
  216 + }
  217 +
422 // 判断通用跳转函数是否存在 218 // 判断通用跳转函数是否存在
423 if (typeof this.$parent.gotoDetail === 'function') { 219 if (typeof this.$parent.gotoDetail === 'function') {
424 -  
425 -  
426 - console.log('toDetail', item);  
427 -  
428 - 220 +
  221 + // 跳转参数
  222 + let params = {
  223 + type: '2',
  224 + to: item.id,
  225 + shop_type: item.shop_type
  226 + };
  227 +
429 // 通用跳转 228 // 通用跳转
430 - this.$parent.gotoDetail(item); 229 + this.$parent.gotoDetail(params);
431 } 230 }
432 } else { 231 } else {
433 232
@@ -446,11 +245,14 @@ @@ -446,11 +245,14 @@
446 }); 245 });
447 } 246 }
448 }, 247 },
  248 +
449 /** 249 /**
450 - * 列表附件按钮事件 250 + * 项目按钮事件
451 * @param {Object} item [数据对象] 251 * @param {Object} item [数据对象]
452 */ 252 */
453 primary(item) { 253 primary(item) {
  254 +
  255 + // 跳转商品详情
454 this.toDetail(item); 256 this.toDetail(item);
455 }, 257 },
456 258