网家家工会，优惠券领取组件~ 完成~

王强
1 parent 91af2c97
Showing 9 changed files with 298 additions and 4 deletions
src/components/getCouponCom/getCouponCom.less
src/components/getCouponCom/getCouponCom.vue
src/components/horizList/horizList.less
src/components/horizList/horizList.vue
src/pages/optimization2/optimization2.vue
src/pages/shopList/shopList.less
src/pages/shopList/shopList.vue
static/img/coupon_disable.png
static/img/coupon_usable.png
+@charset "UTF-8";
+
+.coupon-com {
+	background-color: transparent;
+	.box {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		.coupons-box {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			background-repeat: no-repeat;
+			background-size: 100% 100%;
+			margin: 0 auto;
+			width: 256px;
+			height: 120px;
+			.left-box {
+				background-repeat: no-repeat;
+				background-size: 100% 100%;
+				margin-left: 25px;
+				font-weight: 400;
+				width: 170px;
+				height: 120px;
+				.discount-box {
+					display: flex;
+					justify-content: flex-start;
+					align-items: baseline;
+					margin-top: 20px;
+					line-height: 42px;
+					.sy {
+						font-size: 20px;
+						font-weight: 600;
+					}
+					.discount {
+						font-size: 50px;
+						font-weight: 600;
+						white-space: nowrap;
+						text-overflow: ellipsis;
+						overflow: hidden;
+					}
+				}
+				.filled-box {
+					font-size: 24px;
+					font-weight: 400;
+					white-space: nowrap;
+					text-overflow: ellipsis;
+					overflow: hidden;
+				}
+			}
+		}
+	}
+	&.usable {
+		.box {
+			.coupons-box {
+				.left-box {
+					.discount-box {
+						.sy {
+							color: #EA162D;
+						}
+						.discount {
+							color: #EA162D;
+						}
+					}
+					.filled-box {
+						color: #966F4A;
+					}
+				}
+			}
+		}
+	}
+	&.disable {
+		.box {
+			.coupons-box {
+				.left-box {
+					.discount-box {
+						.sy {
+							color: #B4B4B4;
+						}
+						.discount {
+							color: #B4B4B4;
+						}
+					}
+					.filled-box {
+						color: #B4B4B4;
+					}
+				}
+			}
+		}
+	}
+}
 \ No newline at end of file
+<template>
+    <div class="coupon-com" :class="{'usable': coupons.state == '0', 'disable': coupons.state == '1'}" v-if="coupons">
+		<div class="box">
+			<div class="coupons-box" :style="{'backgroundImage': 'url(' + (coupons.state == '1' ? couponsLeftBgDisable : couponsLeftBgUsable) + ')'}" @click="todo(coupons, index)">
+				<div class="left-box">
+					<div class="discount-box">
+						<div class="sy">￥</div>
+						<div class="discount">{{parseFloat(coupons.discount) === parseInt(coupons.discount) ? parseInt(coupons.discount) : coupons.discount}}</div>
+					</div>
+					<div class="filled-box">
+						满{{parseFloat(coupons.filled) === parseInt(coupons.filled) ? parseInt(coupons.filled) : coupons.filled}}元可用
+					</div>
+				</div>
+				<div class="right-box">
+					
+				</div>
+			</div>
+		</div>
+    </div>
+</template>
+
+<script>
+    export default {
+		name: 'couponCom',
+        data: function () {
+            return {
+				couponsLeftBgUsable: 'static/img/coupon_usable.png',		// 优惠券左侧背景（可使用）
+				couponsLeftBgDisable: 'static/img/coupon_disable.png'		// 优惠券左侧背景（不可用）
+            }
+        },
+        props: ["coupons", "index"],
+		methods: {
+			
+			/**
+			 * 优惠券点击事件
+			 * @param {Object} coupons [优惠券对象]
+			 * @param {Number} index [对象位置索引]
+			 */
+			todo(coupons, index) {
+				
+				// 抛出优惠券选择事件
+				this.$emit('todo', coupons, index);
+			}
+		}
+    }
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style rel="stylesheet/less" lang="less">
+    @import './getCouponCom';
+</style>
 \ No newline at end of file
@@ -139,5 +139,22 @@
 				}
 			}
 		}
+		&.com-coupon {
+			.h-box {
+				.scroll-box {
+					> .box {
+						display: block;
+						white-space: nowrap;
+						width: 100%;
+						.item-box {
+							padding-right: 30px;
+							&:last-child {
+								padding-right: 0;
+							}
+						}
+					}
+				}
+			}
+		}
 	}
 }
@@ -30,9 +30,14 @@
 								com=tab：titleSubTitleCom组件，无pid参数
                                     事件：
                                         @changeTab：切换tab事件
+
 								com=tab2：tabsCom组件，无pid参数
                                     事件：
                                         @change：切换tab事件
+
+								com=coupon：couponCom组件，无pid参数
+                                    事件：
+                                        @todo：优惠券点击事件
  
 							 -->
  
@@ -80,6 +85,12 @@
 								:index="index"
 								:active="pid">
 							</tabs-com>
+
+							<!-- 优惠券 -->
+							<get-coupon-com v-if="com === 'coupon'" @todo="todo"
+								:coupons="item"
+								:index="index">
+							</get-coupon-com>
 						</div>
 					</div>
 				</div>
@@ -99,6 +110,7 @@
     import shopDarenHot from "@/components/shopDarenHot/shopDarenHot";
 	import titleSubTitleCom from "@/components/titleSubTitleCom/titleSubTitleCom";
 	import tabsCom from "@/components/tabsCom/tabsCom";
+	import getCouponCom from "@/components/getCouponCom/getCouponCom";
  
     export default {
 		name: "horizList",
@@ -117,7 +129,8 @@
             swiperItem,
 			shopDarenHot,
 			titleSubTitleCom,
-			tabsCom
+			tabsCom,
+			getCouponCom
         },
 		methods: {
  
@@ -179,6 +192,17 @@
 			},
  
 			/**
+			 * 优惠券点击事件
+			 * @param {Object} coupons [优惠券对象]
+			 * @param {Number} index [对象位置索引]
+			 */
+			todo(coupons, index) {
+				
+				// 抛出优惠券选择事件
+				this.$emit('todo', coupons, index);
+			},
+
+			/**
 			 * 设置横向滚动
 			 * @param {object} wrapper [需要设置滚动的对象]
 			 */
@@ -252,7 +252,7 @@
             <!-- 热销排行 -->
             <div class="section hot-box" ref="hotBox" v-if="sales && sales.length" @click="toHotSaleList">
  
-                <!-- 商品样式 2 滑动 -->
+                <!-- 商品样式 10 滑动 -->
                 <!-- <horiz-list class="components-box"
                     :lists="sales"
                     com="10"
@@ -49,6 +49,21 @@
             &.banner-box {
                 margin-top: 30px;
             }
+            &.coupon-box {
+                margin: 30px auto 0 auto;
+                overflow: hidden;
+                /deep/.coupon-horiz-box {
+                    width: 690px;
+                    > .box {
+                        width: 690px;
+                    }
+                }
+            }
+        }
+        .dividing-line {
+            background-color: #F9F9F9;
+            width: 100%;
+            height: 10px;
         }
         .tabs-box {
             background-color: #ffffff;
@@ -32,6 +32,19 @@
                     }">
                 </swiper-box>
             </div>
+            
+            <!-- 节 -->
+            <div class="section coupon-box" v-if="coupons && coupons.length">
+
+                <!-- 优惠券列表 滑动 -->
+                <horiz-list class="coupon-horiz-box" @todo="todo"
+                    :lists="coupons"
+                    com="coupon">
+                </horiz-list>
+            </div>
+
+            <!-- 分割线 -->
+            <div class="dividing-line" v-if="coupons && coupons.length"></div>
  
             <!-- tab导航 -->
             <div class="tabs-box" :class="{'is-cnlive': isCNLive.value, 'is-open-app': $parent.isOpenApp.value, 'is-hide': $route.query.hideBack == true, 'tabsFixed': tabs.fixed}" ref='tabsBox'>
@@ -97,6 +110,7 @@
 					LOAD_MORE: "loadMore"		            // 加载更多
 				},
                 swipers: null,                              // 主Banner
+                coupons: null,                              // 优惠券数据对象
                 tabs: {                                     // tabs设置
                     fixed: false,                           // 是否吸顶
                     offsetTop: 0,                           // 距离顶部距离
@@ -277,7 +291,8 @@
  
                     // 获取证书请求接口
                     this.http("/Api/" + (this.getApiVersion().index) + "/getActShopIndex", {
-                        id: this.$route.query.shop_id
+                        id: this.$route.query.shop_id,
+                        uid: this.$route.query.uid || 0
                     }, this.getActShopIndexCallback, {
                         method: "POST"
                     });
@@ -322,6 +337,13 @@
                             this.$set(this, 'swipers', datas.banner);
                         }
  
+                        // 如果有优惠券，设置优惠券信息
+                        if (datas.coupon && datas.coupon.length) {
+
+                            // 设置优惠券
+                            this.$set(this, 'coupons', datas.coupon);
+                        }
+
                         // 获取tabs数据
                         if (datas.list && datas.list.length) {
  
@@ -435,6 +457,58 @@
 			},
  
             /**
+             * 领取优惠券
+             * @param {Object} coupons [优惠券对象]
+             */
+            getUserCoupon(coupons) {
+
+                // 判断必要参数
+                if (this.$route.query.uid && coupons.id) {
+
+                    // 加载中提示
+                    Indicator.open("加载中...");
+    
+                    // 获取证书请求接口
+                    this.http("/Api/" + (this.getApiVersion().index) + "/getUserCoupon", {
+                        coupon_id: coupons.id,
+                        uid: this.$route.query.uid
+                    }, this.getUserCouponCallback, {
+                        method: "POST",
+                        coupons
+                    });
+                }
+            },
+
+            /**
+             * 领取优惠券回调
+             * @param {Object} res [服务器返回数据]
+             * @param {Object} ext [扩展参数]
+             */
+            getUserCouponCallback(res, ext) {
+
+                // 加载完成
+                Indicator.close();
+
+                // 返回处理
+                if (res.code == 200) {
+
+                    // 设置优惠券状态（不能再领取）
+                    this.$set(ext.coupons, 'state', '1');
+
+                    // 领取成功提示
+                    Toast('领取成功');
+                } else if (res.code == 400) {
+
+                    // 获取数据失败
+                    Toast(res.message);
+                } else {
+
+                    // 获取数据失败
+                    Toast("获取数据失败");
+                }
+            },
+
+            /**
              * swiper跳转事件
              * @param {Object} item [数据对象]
              */
@@ -462,6 +536,28 @@
                     this.openApp();
                 }
             },
+
+            /**
+			 * 优惠券点击事件
+			 * @param {Object} coupons [优惠券对象]
+			 */
+			todo(coupons) {
+
+                // 判断必要参数
+                if (coupons.id) {
+
+                    // 判断优惠券状态
+                    if (coupons.state == '0') {
+                        
+                        // 领取优惠券
+                        this.getUserCoupon(coupons);
+                    } else if (coupons.state == '1') {
+
+                        // 已经领取过优惠券提示
+                        Toast('您已领取该优惠劵');
+                    }
+                }
+			},
  
             /**
              * 跳转商品详情
@@ -671,7 +767,7 @@
                 if (document.hidden === false && this.$route.name == 'shopList') {
  
                     // 获取页面头部数据
-                    // this.ghIndex();
+                    this.getActShopIndex();
                 }
             });
         }