From f1a16f1588354c6f67b74077960b9d205e58627b Mon Sep 17 00:00:00 2001
From: wangkesi <wangkesi@3ncto.com>
Date: Tue, 16 Oct 2018 11:54:41 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E4=BA=86=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/nav-bottom.vue |  99 ++++++-----
 src/router/index.js           |   2 +-
 src/view/month-card.vue       | 299 +++++++++++++++++-----------------
 3 files changed, 212 insertions(+), 188 deletions(-)

diff --git a/src/components/nav-bottom.vue b/src/components/nav-bottom.vue
index 4d4adea..ea0d38a 100644
--- a/src/components/nav-bottom.vue
+++ b/src/components/nav-bottom.vue
@@ -1,15 +1,15 @@
 <template>
 	<div class="router-bottom">
-		<router-link :class="{active:$route.name=='首页'}" to="/home">
+		<router-link class="home" :class="{active:$route.name=='首页'}" to="/home">
 			<img v-if="$route.name!='首页'" src="../assets/images/icon/home.png" />
 			<img v-else src="../assets/images/icon/home-s.png">
 			<span>首页</span>
 		</router-link>
-		<a href="/mall/web/appoint_index">
+		<a class="service" href="/mall/web/appoint_index">
 			<img src="../assets/images/icon/server.png" />
 			<span>服务</span>
 		</a>
-		<a href="/mall/web/owner">
+		<a class="user-center" href="/mall/web/owner">
 			<img src="../assets/images/icon/my.png" />
 			<span>我的</span>
 		</a>
@@ -17,44 +17,65 @@
 </template>
 
 <script>
-	export default {
-		methods: {
-			
-		}
-	}
+export default {
+};
 </script>
 
-<style>
+<style lang="scss">
 .router-bottom {
-	width: 100%;
-	height: 100%;
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	padding: 0 1rem;
-	box-sizing: border-box;
-	border-top: 1px solid #ddd;
-	z-index: 1000;
-	bottom: 0;
-	left: 0;
-}
-.router-bottom a {
-	list-style: none;
-	color: #999999;
-}
-.router-bottom a img {
-	width: 0.36rem;
-	height: 0.36rem;
-	display: block;
-	margin-bottom: 0.1rem;
-}
-.router-bottom a span {
-	height:0.2rem;
-	font-size:0.2rem;
-	font-weight:400;
-	display: block;
-}
-.router-bottom a.active {
-	color: #29B079;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 1rem;
+    box-sizing: border-box;
+    border-top: 1px solid #ddd;
+    z-index: 1000;
+    bottom: 0;
+    left: 0;
+    .home {
+        img {
+            width: 0.46rem;
+            height: 0.44rem;
+        }
+    }
+    .service {
+        img {
+            width: 0.45rem;
+            height: 0.39rem;
+        }
+    }
+    .user-center {
+        img {
+            width: 0.36rem;
+            height: 0.46rem;
+        }
+    }
+    .active {
+        span {
+            color: #29b079;
+        }
+    }
+    a {
+        list-style: none;
+        color: #999999;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        img {
+            margin-bottom: 0.09rem;
+        }
+        span {
+            line-height: 1;
+            // height: 0.2rem;
+            font-size: 0.2rem;
+            font-weight: 400;
+            display: block;
+        }
+    }
 }
+// .router-bottom .router-bottom a .router-bottom a .router-bottom a.active {
+//     color: #29b079;
+// }
 </style>
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index c8f1f0c..4d8a218 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -77,7 +77,7 @@ let router = new Router({
         },
         {
             path: "/order-detail",
-            name: "orderCheck",
+            name: "orderDetail",
             component: resolve => require(["@/view/order-detail.vue"], resolve)
         },
         {
diff --git a/src/view/month-card.vue b/src/view/month-card.vue
index f983b82..05be869 100644
--- a/src/view/month-card.vue
+++ b/src/view/month-card.vue
@@ -1,196 +1,199 @@
 <template>
- <div class="">
-        <div class="m-slider">
-            <img src="../assets/images/slider-img.png" width="100%" height="100%" alt="">
-        </div>
-
-        <div class="month-card-title f-text-center">
-            <h4 class="">{{getData.goodsName}}</h4>
-            <p class="f-mt5">{{getData.shortDesc}}</p>
-            <p class="f-price f-mt10 f-flex justify-center">
-                <span class="s-gray f-mr15">市场价 : &nbsp;<span class="line-through">￥{{getData.originalPrice | numFilter}}</span></span>
-                <span>券后价 : </span><span class="f-font-23 s-red">￥{{getData.couponPrice | numFilter}}</span>
-            </p>
-        </div>
-
-            <div class="month-card-area">
-                <div class="month-card f-flex" style="margin-bottom: -35px;">
-                    <div class="month-card-left" style="width: 76%;">                        
-                        <div class="f-flex f-mt9">
-                            <div class="f-mb20 f-mr10">
-                                <p v-show="getData.type != 3" class="f-font-15" style="line-height:1;">￥</p>
-                                <!-- 定额券 -->
-                                <div v-show="getData.type == 1" class="f-bold f-font-45" style="text-shadow: 1px 1px #852B0E;">{{getData.amount | numFilter}}</div>
-                                <!-- 满减券 -->
-                                <div v-show="getData.type == 2" class="f-bold f-font-45" style="text-shadow: 1px 1px #852B0E;">{{getData.amount | numFilter}}</div>
-                                <!-- 折扣 -->
-                                <div v-show="getData.type == 3" class="f-bold f-font-45" style="text-shadow: 1px 1px #852B0E;">{{Number(getData.discount/10)}}折</div>
-                                
-                                <!-- 定额券 -->
-                                <p v-show="getData.type != 2" class="f-font-12 f-mt5" style="margin-left: 6px;">{{couponType[getData.type]}}</p>
-
-                                <!-- 满减券 -->
-                                <p v-show="getData.type == 2" class="f-font-12 f-mt5" style="margin-left: 6px;">满{{getData.fullAmount | numFilter}}可用</p>
-                            </div>
-                            <div class="f-mb20">
-                                <p class="new-man">{{getData.batchName}}</p>
-                                <p class="limit-buy">({{getData.goodsDesc}})</p>
-                                <p class="end-date">{{getData.invalidTimeDesc}}</p>
-                            </div>
-                        </div>
-
-                    </div>
-                    <div class="month-card-right justify-center" style="margin-left:10px;">
-                        <div v-show="getData.couponStatus == 0" class="f-mt-15 f-flex">
-                            <img src="../assets/images/arrow-right_03.png" width="7" height="12" alt="" class="f-mr15">
-                            <button class="get-btn" v-on:click="handleGetCoupon">点击领取</button>
-                        </div>
-                        <img v-show="getData.couponStatus > 0" src="../assets/images/get.png" width="60" height="60" alt="" class="f-mt-10">
-                    </div>
-                </div>
-                <div class="f-mt10 f-text-center" v-show="getData.couponStatus > 0">
-                    
-                    <button style="background-color:#F45252"  v-show="getData.couponStatus != 30" v-on:click="handleUseCoupon" class="btn-md bg-gray s-white f-font-18">立即使用</button>
-
-                    <button v-show="getData.couponStatus == 30" v-on:click="handleUseCoupon" class="btn-md bg-gray s-white f-font-18">已使用</button>
-                </div>
-                <div style="padding: 0 10px 20px;">
-                    <p class="s-gray-1 f-font-11 f-mt20" style="line-height: 18px;">使用范围：{{getData.authAreaStr}}</p>
-                    <p class="f-mt10 f-font-11 s-orange-2">
-                        使用流程：领券下单→关注公众号→预约服务
-                    </p>
-                    <div class="f-text-center">
-                        <div class="qrcode-img">
-                            <img src="../assets/images/qrcode.png" width='100%' height="100%" alt="">
-                        </div>
-                        <p class="f-font-11 f-mt5 s-black-1">预约服务请关注公众号</p>
-                    </div>
-                </div>
-            </div>
-
-
-    </div>
+	<div class="">
+		<div class="m-slider">
+			<img src="../assets/images/slider-img.png" width="100%" height="100%" alt="">
+		</div>
+
+		<div class="month-card-title f-text-center">
+			<h4 class="">{{getData.goodsName}}</h4>
+			<p class="f-mt5">{{getData.shortDesc}}</p>
+			<p class="f-price f-mt10 f-flex justify-center">
+				<span class="s-gray f-mr15">市场价 : &nbsp;<span class="line-through">￥{{getData.originalPrice | numFilter}}</span></span>
+				<span>券后价 : </span><span class="f-font-23 s-red">￥{{getData.couponPrice | numFilter}}</span>
+			</p>
+		</div>
+
+		<div class="month-card-area">
+			<div class="month-card f-flex" style="margin-bottom: -35px;">
+				<div class="month-card-left" style="width: 76%;">
+					<div class="f-flex f-mt9">
+						<div class="f-mb20 f-mr10">
+							<p v-show="getData.type != 3" class="f-font-15" style="line-height:1;">￥</p>
+							<!-- 定额券 -->
+							<div v-show="getData.type == 1" class="f-bold f-font-45" style="text-shadow: 1px 1px #852B0E;">{{getData.amount | numFilter}}</div>
+							<!-- 满减券 -->
+							<div v-show="getData.type == 2" class="f-bold f-font-45" style="text-shadow: 1px 1px #852B0E;">{{getData.amount | numFilter}}</div>
+							<!-- 折扣 -->
+							<div v-show="getData.type == 3" class="f-bold f-font-45" style="text-shadow: 1px 1px #852B0E;">{{Number(getData.discount/10)}}折</div>
+
+							<!-- 定额券 -->
+							<p v-show="getData.type != 2" class="f-font-12 f-mt5" style="margin-left: 6px;">{{couponType[getData.type]}}</p>
+
+							<!-- 满减券 -->
+							<p v-show="getData.type == 2" class="f-font-12 f-mt5" style="margin-left: 6px;">满{{getData.fullAmount | numFilter}}可用</p>
+						</div>
+						<div class="f-mb20">
+							<p class="new-man">{{getData.batchName}}</p>
+							<p class="limit-buy">({{getData.goodsDesc}})</p>
+							<p class="end-date">{{getData.invalidTimeDesc}}</p>
+						</div>
+					</div>
+
+				</div>
+				<div class="month-card-right justify-center" style="margin-left:10px;">
+					<div v-show="getData.couponStatus == 0" class="f-mt-15 f-flex">
+						<img src="../assets/images/arrow-right_03.png" width="7" height="12" alt="" class="f-mr15">
+						<button class="get-btn" v-on:click="handleGetCoupon">点击领取</button>
+					</div>
+					<img v-show="getData.couponStatus > 0" src="../assets/images/get.png" width="60" height="60" alt="" class="f-mt-10">
+				</div>
+			</div>
+			<div class="f-mt10 f-text-center" v-show="getData.couponStatus > 0">
+
+				<button style="background-color:#F45252" v-show="getData.couponStatus != 30" v-on:click="handleUseCoupon" class="btn-md bg-gray s-white f-font-18">立即使用</button>
+
+				<button v-show="getData.couponStatus == 30" v-on:click="handleUseCoupon" class="btn-md bg-gray s-white f-font-18">已使用</button>
+			</div>
+			<div style="padding: 0 10px 20px;">
+				<p class="s-gray-1 f-font-11 f-mt20" style="line-height: 18px;">使用范围：{{getData.authAreaStr}}</p>
+				<p class="f-mt10 f-font-11 s-orange-2">
+					使用流程：领券下单→关注公众号→预约服务
+				</p>
+				<div class="f-text-center">
+					<div class="qrcode-img">
+						<img src="../assets/images/qrcode.png" width='100%' height="100%" alt="">
+					</div>
+					<p class="f-font-11 f-mt5 s-black-1">预约服务请关注公众号</p>
+				</div>
+			</div>
+		</div>
+
+	</div>
 </template>
 
 <script>
-    import couponModel from '../models/coupon-model';
-    import configs from '../configs';
-	import { Alert, Toast,Popup,Picker } from "vux";
-	
-	var strCookie =document.cookie; 
-	var cookieName = "1hjz_mall_login_access_token=";
-	var token = strCookie.slice(cookieName.length); 
+import couponModel from "../models/coupon-model";
+import configs from "../configs";
+import { Alert, Toast, Popup, Picker } from "vux";
 
-    var locationUrl = configs.locationUrl;
+var strCookie = document.cookie;
+var cookieName = "1hjz_mall_login_access_token=";
+var token = strCookie.slice(cookieName.length);
 
-  export default {
+var locationUrl = configs.locationUrl;
+
+export default {
     data() {
         return {
             loading: false,
             getData: {},
             couponType: {
-                '1': '定额券',
-                '2': '满减券',
-                '3': '折扣券',
+                "1": "定额券",
+                "2": "满减券",
+                "3": "折扣券"
             },
-            batchNo: this.$route.query.batchNo,
+            batchNo: this.$route.query.batchNo
         };
     },
     components: {
-		Toast,
-		Popup,
-		Picker
-	},
+        Toast,
+        Popup,
+        Picker
+    },
     methods: {
-
         // 初始化
         handleInit() {
-
             let that = this;
 
             // 回去优惠券信息
-            couponModel.getCouponInfo(that.batchNo, token).then(function (result) {
-            //    console.log("xx",result.response);
-              	that.loading = false;             
-              	if ( result.code == 0 ) {
-					if ( result.response.isLogin ){
-						that.sourceUser()
-					}
-                	that.getData = result.response
-
-              	} else {
-                	//console.log(result.msg);
-                	alert(result.msg);
-              	}
-            });
-            	
+            couponModel
+                .getCouponInfo(that.batchNo, token)
+                .then(function(result) {
+                    //    console.log("xx",result.response);
+                    that.loading = false;
+                    if (result.code == 0) {
+                        if (result.response.isLogin) {
+                            that.sourceUser();
+                        }
+                        that.getData = result.response;
+                    } else {
+                        //console.log(result.msg);
+                        alert(result.msg);
+                    }
+                });
         },
 
         // 立即使用优惠券
         handleUseCoupon() {
-
-            window.location.href = locationUrl + '/mall/web/vgoods/detail/' + this.getData.goodsNo;
+            window.location.href =
+                locationUrl + "/mall/web/vgoods/detail/" + this.getData.goodsNo;
         },
 
         // 领取优惠券
         handleGetCoupon() {
-            let that = this;        
-                
+            let that = this;
+
             this.loading = true;
 
-            let params = {              
-                batchNo: that.batchNo                
+            let params = {
+                batchNo: that.batchNo
             };
 
             // 调用领券接口
-            couponModel.giveCoupon(params,token).then(function (result) {
-              
-                that.loading = false;              
-				console.log("信息",result)
-				if (result.code === 0 || result.code === 3) {
-				    window.history.go(0);
-				} else if (result.code === 666) {
-				    that.$vux.toast.text("您还没登录，请先登录!","middle");         
-				    setTimeout(function () {
-				        window.location.href = locationUrl + '/mall/web/user/login?callback=' + encodeURIComponent(window.location.href);
-				    }, 1000);
-				} else {
-				    if (result.msg === '' || result.msg === undefined || result.msg == null) {
-				        result.msg = '操作失败，请刷新重试';
-				    }
-				    alert(result.msg);
-				}
+            couponModel.giveCoupon(params, token).then(function(result) {
+                that.loading = false;
+                console.log("信息", result);
+                if (result.code === 0 || result.code === 3) {
+                    window.history.go(0);
+                } else if (result.code === 666) {
+                    that.$vux.toast.text("您还没登录，请先登录!", "middle");
+                    setTimeout(function() {
+                        window.location.href =
+                            locationUrl +
+                            "/mall/web/user/login?callback=" +
+                            encodeURIComponent(window.location.href);
+                    }, 1000);
+                } else {
+                    if (
+                        result.msg === "" ||
+                        result.msg === undefined ||
+                        result.msg == null
+                    ) {
+                        result.msg = "操作失败，请刷新重试";
+                    }
+                    alert(result.msg);
+                }
             });
-
-      	},
-        sourceUser (){
-        	var sourceUserId = this.$route.query.sourceUserId
-        	if ( sourceUserId ){
-        		couponModel.sourceUser(sourceUserId).then(res => {
-        			
-        		})
-        	}
+        },
+        sourceUser() {
+            var sourceUserId = this.$route.query.sourceUserId;
+            if (sourceUserId) {
+                couponModel.sourceUser(sourceUserId).then(res => {});
+            }
         }
-        
-    },    
+    },
     filters: {
-        numFilter(value) {            
+        numFilter(value) {
             // 截取当前数据到小数点后三位
-            let transformVal = Number(value/100).toFixed(1)
-            let realVal = transformVal.substring(0, transformVal.length - 1)
+            let transformVal = Number(value / 100).toFixed(1);
+            let realVal = transformVal.substring(0, transformVal.length - 1);
             // num.toFixed(3)获取的是字符串
-            return Number(realVal)
+            return Number(realVal);
         }
     },
     mounted() {
         // 初始化
         this.handleInit();
-		this.wxShare({"couponNo":this.batchNo,"source":20,"url":encodeURIComponent(location.href)})
+        this.wxShare({
+            couponNo: this.batchNo,
+            source: 20,
+            url: encodeURIComponent(location.href)
+        });
     }
-  }
+};
 </script>
 <style>
-  body {
-    background-color: #FFF3E8;
-  }
+body {
+    background-color: #fff3e8;
+}
 </style>