From 02f229e57fe6252b6210cabe4e39e37194f24aa2 Mon Sep 17 00:00:00 2001
From: wangkesi <wangkesi@3ncto.com>
Date: Thu, 25 Oct 2018 16:12:02 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E4=BA=86tag?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/view/order-check.vue       | 198 +++++++++++++++++++--------------
 src/view/order-detail.vue      | 188 +++++++++++++++----------------
 src/view/service-card-list.vue |  25 +++--
 3 files changed, 224 insertions(+), 187 deletions(-)

diff --git a/src/view/order-check.vue b/src/view/order-check.vue
index 28cdd8b..1e3f08c 100644
--- a/src/view/order-check.vue
+++ b/src/view/order-check.vue
@@ -1,83 +1,87 @@
 <template>
-	<div class="order-check-whole">
-		<back-header :path="'/mall/web/vgoods/detail/'+goodsNo">
-			订单确认
-		</back-header>
-		<div class="top">
-			<div class="goods-container">
-				<img :src="imghost+info.goodsImgUrl">
-				<div class="goods-main-container">
-					<div class="name">{{info.goodsName}}</div>
-					<div class="box">
-						<div class="box-text">{{info.shortDesc}}</div>
-						<div class="box-price">¥{{info.totalPrice?info.totalPrice/100:''}}</div>
-					</div>
-				</div>
-			</div>
-			<div class="gift-container" v-if="info.gifts&&info.gifts.length>0">
-				<div class="gift-item" v-for="item in info.gifts">
-					<div class="text">【赠品】</div>
-					<div class="name">{{item.name}}</div>
-					<div class="num">x{{item.num}}</div>
-				</div>
-			</div>
-		</div>
-		<div class="service-area">
-			<div class="title">
-				<img src="../assets/images/order-list/location.png">
-				服务区域：
-			</div>
-			<div class="area-text">
-				{{info.serviceAreaStr}}
-			</div>
-		</div>
-		<div class="coupon-container" @click="go()">
-			<div class="coupon-left">
-				<div class="left-box">
-					<img src="../assets/images/order-list/coupon.png">
-					<div class="text">
-						优惠券：
-					</div>
-					<div class="name" v-if="info.primeCoupon">{{info.primeCoupon.couponName}}</div>
-				</div>
-				<div class="price" v-if="info.primeCoupon">-￥{{info.primeCoupon?info.primeCoupon.amount/100:""}}</div>
-			</div>
-			<img class="icon" src="../assets/images/order-list/arrow.png">
-		</div>
-		<div class="message-container">
-			<div class="title">
-				<img src="../assets/images/order-list/edit.png">
-				留言备注：
-			</div>
-			<textarea v-model="info.text" placeholder="为了更好地为您服务，请简单说明您家的格局面积与保洁史"></textarea>
-		</div>
-		<div class="pay-container">
-			<div class="text">支付方式：</div>
-			<div class="pay">
-				<img src="../assets/images/order-list/wechat.png">
-				微信支付
-			</div>
-		</div>
-		<div class="clause">
-			<div class="true-box" @click="agree=!agree">
-				<img v-show="agree" src="../assets/images/order-list/true.png">
-			</div>
-			<div @click="agree=!agree">
-				我已阅读并同意
-			</div>
-			<a class="tips" href="http://www.yihaojiazheng.cn/mall/web/agreement">
-				《一号家政服务协议书》
-			</a>
-		</div>
-		<div class="fill"></div>
-		<div class="button" role="button">
-			<div class="button-text">
-				还需支付：
-				<div class="num">¥{{price}}</div>
-			</div>
-			<button :class="{disabled:!agree}" @click="pay()">立即付款</button>
-		</div>
-	</div>
+    <div class="order-check-whole">
+        <back-header :path="'/mall/web/vgoods/detail/'+goodsNo">
+            订单确认
+        </back-header>
+        <div class="top">
+            <div class="goods-container">
+                <img :src="imghost+info.goodsImgUrl">
+                <div class="goods-main-container">
+                    <div class="name">{{info.goodsName}}</div>
+                    <div class="box">
+                        <div class="box-text">{{info.shortDesc}}</div>
+                        <div class="box-price">¥{{info.totalPrice?info.totalPrice/100:''}}</div>
+                    </div>
+                    <div class="tag-box">
+                        <i class="tag" v-for="item in labelList" v-if="item.labelText">{{item.labelText}}</i>
+                        <!-- <i class="tag">新人优惠</i> -->
+                    </div>
+                </div>
+            </div>
+            <div class="gift-container" v-if="info.gifts&&info.gifts.length>0">
+                <div class="gift-item" v-for="item in info.gifts">
+                    <div class="text">【赠品】</div>
+                    <div class="name">{{item.name}}</div>
+                    <div class="num">x{{item.num}}</div>
+                </div>
+            </div>
+        </div>
+        <div class="service-area">
+            <div class="title">
+                <img src="../assets/images/order-list/location.png">
+                服务区域：
+            </div>
+            <div class="area-text">
+                {{info.serviceAreaStr}}
+            </div>
+        </div>
+        <div class="coupon-container" @click="go()">
+            <div class="coupon-left">
+                <div class="left-box">
+                    <img src="../assets/images/order-list/coupon.png">
+                    <div class="text">
+                        优惠券：
+                    </div>
+                    <div class="name" v-if="info.primeCoupon">{{info.primeCoupon.couponName}}</div>
+                </div>
+                <div class="price" v-if="info.primeCoupon">-￥{{info.primeCoupon?info.primeCoupon.amount/100:""}}</div>
+            </div>
+            <img class="icon" src="../assets/images/order-list/arrow.png">
+        </div>
+        <div class="message-container">
+            <div class="title">
+                <img src="../assets/images/order-list/edit.png">
+                留言备注：
+            </div>
+            <textarea v-model="info.text" placeholder="为了更好地为您服务，请简单说明您家的格局面积与保洁史"></textarea>
+        </div>
+        <div class="pay-container">
+            <div class="text">支付方式：</div>
+            <div class="pay">
+                <img src="../assets/images/order-list/wechat.png">
+                微信支付
+            </div>
+        </div>
+        <div class="clause">
+            <div class="true-box" @click="agree=!agree">
+                <img v-show="agree" src="../assets/images/order-list/true.png">
+            </div>
+            <div @click="agree=!agree">
+                我已阅读并同意
+            </div>
+            <a class="tips" href="http://www.yihaojiazheng.cn/mall/web/agreement">
+                《一号家政服务协议书》
+            </a>
+        </div>
+        <div class="fill"></div>
+        <div class="button" role="button">
+            <div class="button-text">
+                还需支付：
+                <div class="num">¥{{price}}</div>
+            </div>
+            <button :class="{disabled:!agree}" @click="pay()">立即付款</button>
+        </div>
+    </div>
 </template>
 <script>
 import backHeader from "../components/back-header.vue";
@@ -103,6 +107,10 @@ export default {
                 ? this.info.primeCoupon.amount
                 : 0;
             return price / 100 - discount / 100;
+        },
+        labelList() {
+            let str = this.info.smallLabel;
+            return str ? JSON.parse(str) : "";
         }
     },
     methods: {
@@ -222,8 +230,8 @@ export default {
             let goodsNo = this.getParam("goodsNo");
             let couponNo = this.info.primeCoupon
                 ? this.info.primeCoupon.couponNo
-				: "";
-			console.log(couponNo)
+                : "";
+            console.log(couponNo);
             let goodsVersion =
                 this.getParam("goodsVersion") ||
                 sessionStorage.getItem("goodsVersion");
@@ -333,6 +341,7 @@ export default {
             display: flex;
             justify-content: space-between;
             align-items: flex-end;
+            margin-bottom: 0.15rem;
             .box-text {
                 font-size: 0.24rem;
                 line-height: 1.1;
@@ -355,6 +364,33 @@ export default {
                 color: #333;
             }
         }
+        .tag-box {
+            font-size: 0.2rem;
+            display: flex;
+            height: 0.3rem;
+            overflow: hidden;
+            .tag {
+                flex-shrink: 1;
+                height: 100%;
+                font-style: normal;
+                background: #ffe2c7;
+                padding: 0rem 0.1rem;
+                line-height: 0.28rem;
+                color: #ff8a1d;
+                border-radius: 0.15rem;
+                // margin-bottom: 0.1rem;
+                flex-shrink: 1;
+                overflow: hidden;
+                display: -webkit-box;
+                margin-right: 0.1rem;
+                -webkit-box-orient: vertical;
+                -webkit-line-clamp: 1;
+                line-height: 0.3rem;
+                word-wrap: break-word;
+                white-space: normal;
+                word-break: break-all;
+            }
+        }
     }
 }
 .gift-container {
diff --git a/src/view/order-detail.vue b/src/view/order-detail.vue
index c3b3634..6932c79 100644
--- a/src/view/order-detail.vue
+++ b/src/view/order-detail.vue
@@ -1,98 +1,98 @@
 <template>
-	<div class="order-detail-whole">
-		<back-header path="/v2/order-list" style="margin-bottom:0.15rem">
-			订单详情
-		</back-header>
-		<div class="goods-box">
-			<div class="item-top">
-				<div class="item-top-left">
-					<img src="../assets/images/order-list/address.png">
-					<div class="item-top-address">{{info.merchantName}}</div>
-				</div>
-				<div class="item-top-state" :class="'state'+state">{{stateText}}</div>
-			</div>
-			<div class="item-main">
-				<img :src="imghost+info.goodsImgUrl">
-				<div class="item-main-text">
-					<div class="name">{{info.goodsName}}</div>
-					<div class="tips-box">
-						<div class="tips">
-							{{info.shortDesc}}
-						</div>
-						<div class="price">¥{{info.totalPrice?info.totalPrice/100:''}}</div>
-					</div>
-					<div class="tag-box">
-						<i class="tag" v-for="item in labelList" v-if="item.labelText">{{item.labelText}}</i>
-						<!-- <i class="tag">新人优惠</i> -->
-					</div>
-				</div>
-			</div>
-			<div class="gift-box" v-if="info.gifts&&info.gifts.length>0">
-				<div class="gift-item" v-for="item in info.gifts">
-					<div class="text">【赠品】</div>
-					<div class="name">{{item.name}}</div>
-					<div class="num">&nbsp;x{{item.num}}</div>
-				</div>
-			</div>
-		</div>
-		<div class="message">
-			<div class="message-title">留言备注：</div>
-			<div class="box" role="text">
-				{{info.remark}}
-			</div>
-		</div>
-		<div class="time-box">
-			<div class="time-item">下单时间：
-				<div class="time">{{info.create}}</div>
-			</div>
-			<div class="time-item" v-show="info.payTime">付款时间：
-				<div class="time">{{info.payTime}}</div>
-			</div>
-		</div>
-		<div class="money-box">
-			<div class="money-box-top">
-				<div class="order">
-					<div class="text">订单金额：</div>
-					<div class="num">¥{{info.totalPrice?info.totalPrice/100:""}}</div>
-				</div>
-				<div class="discount">
-					<div class="text">
-						<div class="string">
-							优惠减免：
-						</div>
-						<span class="discount-name" v-if="info.primeCoupon">{{info.primeCoupon.couponName}}</span>
-					</div>
-					<div class="num">¥{{info.couponPrice?info.couponPrice/100:0}}</div>
-				</div>
-			</div>
-			<div class="money-box-bottom" :class="{right:state!==0&&state!==10}">
-				<div class="button-box" role="button" v-if="state===0" @click="cancel()">
-					取消订单
-				</div>
-				<div class="button-box" role="button" v-if="state===10" @click="go(3)">
-					申请退款
-				</div>
-				<div class="money">
-					实际支付：
-					<div class="money-count">¥{{info.payPrice/100}}</div>
-				</div>
-			</div>
-		</div>
-		<div class="fill"></div>
-		<div class="button" role="button" v-if="state==30||state==21" @click="go(1)">
-			重新下单
-		</div>
-		<div class="button" role="button" style="background:#00BA86;color:white;" v-if="state===0" @click="pay()">
-			立即付款
-		</div>
-		<div class="button" role="button" style="background:#00BA86;color:white;" v-if="state==10||state==11" @click="go(2)">
-			预约服务
-		</div>
-		<div class="button" role="button" v-if="state==20">
-			<a href="tel:400-6080100">联系客服</a>
-			<!-- 联系客服 -->
-		</div>
-	</div>
+    <div class="order-detail-whole">
+        <back-header path="/v2/order-list" style="margin-bottom:0.15rem">
+            订单详情
+        </back-header>
+        <div class="goods-box">
+            <div class="item-top">
+                <div class="item-top-left">
+                    <img src="../assets/images/order-list/address.png">
+                    <div class="item-top-address">{{info.merchantName}}</div>
+                </div>
+                <div class="item-top-state" :class="'state'+state">{{stateText}}</div>
+            </div>
+            <div class="item-main">
+                <img :src="imghost+info.goodsImgUrl">
+                <div class="item-main-text">
+                    <div class="name">{{info.goodsName}}</div>
+                    <div class="tips-box">
+                        <div class="tips">
+                            {{info.shortDesc}}
+                        </div>
+                        <div class="price">¥{{info.totalPrice?info.totalPrice/100:''}}</div>
+                    </div>
+                    <div class="tag-box">
+                        <i class="tag" v-for="item in labelList" v-if="item.labelText">{{item.labelText}}</i>
+                        <!-- <i class="tag">新人优惠</i> -->
+                    </div>
+                </div>
+            </div>
+            <div class="gift-box" v-if="info.gifts&&info.gifts.length>0">
+                <div class="gift-item" v-for="item in info.gifts">
+                    <div class="text">【赠品】</div>
+                    <div class="name">{{item.name}}</div>
+                    <div class="num">&nbsp;x{{item.num}}</div>
+                </div>
+            </div>
+        </div>
+        <div class="message">
+            <div class="message-title">留言备注：</div>
+            <div class="box" role="text">
+                {{info.remark}}
+            </div>
+        </div>
+        <div class="time-box">
+            <div class="time-item">下单时间：
+                <div class="time">{{info.create}}</div>
+            </div>
+            <div class="time-item" v-show="info.payTime">付款时间：
+                <div class="time">{{info.payTime}}</div>
+            </div>
+        </div>
+        <div class="money-box">
+            <div class="money-box-top">
+                <div class="order">
+                    <div class="text">订单金额：</div>
+                    <div class="num">¥{{info.totalPrice?info.totalPrice/100:""}}</div>
+                </div>
+                <div class="discount">
+                    <div class="text">
+                        <div class="string">
+                            优惠减免：
+                        </div>
+                        <span class="discount-name" v-if="info.primeCoupon">{{info.primeCoupon.couponName}}</span>
+                    </div>
+                    <div class="num">¥{{info.couponPrice?info.couponPrice/100:0}}</div>
+                </div>
+            </div>
+            <div class="money-box-bottom" :class="{right:state!==0&&state!==10}">
+                <div class="button-box" role="button" v-if="state===0" @click="cancel()">
+                    取消订单
+                </div>
+                <div class="button-box" role="button" v-if="state===10" @click="go(3)">
+                    申请退款
+                </div>
+                <div class="money">
+                    实际支付：
+                    <div class="money-count">¥{{info.payPrice/100}}</div>
+                </div>
+            </div>
+        </div>
+        <div class="fill"></div>
+        <div class="button" role="button" v-if="state==30||state==21" @click="go(1)">
+            重新下单
+        </div>
+        <div class="button" role="button" style="background:#00BA86;color:white;" v-if="state===0" @click="pay()">
+            立即付款
+        </div>
+        <div class="button" role="button" style="background:#00BA86;color:white;" v-if="state==10||state==11" @click="go(2)">
+            预约服务
+        </div>
+        <div class="button" role="button" v-if="state==20">
+            <a href="tel:400-6080100">联系客服</a>
+            <!-- 联系客服 -->
+        </div>
+    </div>
 </template>
 <script>
 import backHeader from "../components/back-header.vue";
diff --git a/src/view/service-card-list.vue b/src/view/service-card-list.vue
index 93c40ee..fec016c 100644
--- a/src/view/service-card-list.vue
+++ b/src/view/service-card-list.vue
@@ -1,21 +1,22 @@
 <template>
-	<div class="service-card-list-whole">
-		<div class="item">
-			<div class="item-top">
-				<div class="item-top-left">
-					<div class="no">NO.56253526484759844156</div>
-					<div class="gift">赠品</div>
-				</div>
-				<div class="address"></div>
-			</div>
-		</div>
-	</div>
+    <div class="service-card-list-whole">
+        <div class="item">
+            <div class="item-top">
+                <div class="item-top-left">
+                    <div class="no">NO.56253526484759844156</div>
+                    <div class="gift">赠品</div>
+                </div>
+                <div class="address"></div>
+            </div>
+        </div>
+    </div>
 </template>
 <script>
 export default {
     data() {
         return {};
-    }
+    },
+    methods: {}
 };
 </script>
 <style lang="scss" scoped>