Kaynağa Gözat

Merge remote-tracking branch 'origin/developerB' into developerB

zhengjinyi 4 yıl önce
ebeveyn
işleme
e06d82584a

+ 65 - 0
src/main/resources/static/css/user-center/order/logistics.css

@@ -0,0 +1,65 @@
+li {list-style: none; }
+ @media screen and (min-width:768px){
+     .order-logistics{background-color: #ffffff;box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.07);padding: 10px;}
+     .order-list{overflow: hidden;padding: 10px;border-bottom: 1px solid #e2e7ef}
+     .left-img{float: left;width: 70px;height: 70px;}
+     .left-img img{width: 100%;height: 100%;}
+     .right-name{float: left;margin-left: 10px;width: 90%;}
+     .right-name .product-name{width: 544px;color: #4a4f58;font-size: 16px;vertical-align: middle;word-break: break-all;overflow: hidden;text-overflow: ellipsis;display: -webkit-inline-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical}
+     .product-num .number{color: #627386;font-size: 14px;float: left;}
+     .product-num .Ship{color: #22272e;float: right;}
+     .product-num .Ship span{color: #e15616;}
+     .product-num{overflow: hidden;margin-top: 10px;}
+     .mainContent{margin-top: 32px;box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.07);}
+     .mainContent .title{font-size: 16px;color: #22272e;font-weight: bold;margin: 20px;}
+     .logistics-deatil{padding: 20px;background: #fff;}
+     .logistics-deatil .title-deatil{font-size: 16px;color: #22272e;padding: 4px 0 16px 0;}
+     .logsitics-list  .goodlist p{display: inline-block;margin-right: 88px;font-size: 14px;color: #627386;}
+     .logsitics-list  .goodlist p span{color: #22272e;}
+     .goodlist{line-height: 40px;position: relative;}
+     .icon.open:before{background-position: -268px -396px;;width: 40px;height: 40px;position: absolute;cursor: pointer;right: 0;}
+     .icon.open1:before{background-position: -300px -396px;;width: 40px;height: 40px;position: absolute;cursor: pointer;right: 0;}
+     .package-status {padding: 18px 0 0 0;border-top: solid 1px #e2e7ef;margin-top: 10px}
+     .package-status .status-list {margin-top: -5px;padding-left: 8px;}
+     .package-status .status-list>li {border-left: 2px solid #e2e7ef;text-align: left;}
+     .package-status .status-list>li:before { /* 流程点的样式 */content: '';border: 2px solid #e2e7ef;background-color: #e2e7ef;display: inline-block;width: 5px;height: 5px;border-radius: 10px;margin-left: -6px;margin-right: 10px}
+     .package-status .status-list>li:first-child:before {background-color: #e15616;border: 2px solid #e15616}
+     .package-status .status-list>li {height: auto;width: 95%;}
+     .package-status .status-box:before {content: " ";background-color: #f3f3f3;display: block;position: absolute;top: -8px;left: 20px;width: 10px;height: 4px}
+     .status-content-before {text-align: left;margin-left: 20px;margin-top: -10px;width: 70%;    vertical-align: text-top;word-break: break-all;overflow: hidden;text-overflow: ellipsis;-webkit-line-clamp: 2;-webkit-box-orient: vertical}
+     .status-time-before {text-align: left;margin-left: 15px;font-size: 14px;}
+     .status-time-latest {text-align: left;margin-left: 25px;color: #0278D8;font-size: 10px;margin-top: 5px;}
+     .package-status .status-list>li div{display: inline-block;color: #22272e;}
+     .status-list li .status-date{margin: 0 15px;color: #22272e;font-weight: bold;}
+ }
+
+ @media screen and (max-width:768px){
+     .order-logistics{background-color: #ffffff;box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.07);width: 100%}
+     .order-list{overflow: hidden;padding: 2.7vw;}
+     .left-img{float: left;width: 24vw;height: 24vw;}
+     .left-img img{width: 100%;height: 100%;}
+     .right-name{float: left;margin-left:2.7vw;width:70%;}
+     .right-name .product-name{    width: 96%;color: #4a4f58;font-size: 3.7vw;vertical-align: middle;overflow: hidden;text-overflow: ellipsis;white-space: nowrap}
+     .product-num .number{color: #627386;font-size: 3.4vw;display: block;margin: 2.7vw 0;}
+     .product-num .Ship span{color: #e15616;}
+     .product-num{color: #627386;}
+     .mainContent{box-shadow: 0px .8vw 1.3vw 0px rgba(0, 0, 0, 0.07);}
+     .mainContent .title{font-size: 3.7vw;color: #22272e;margin: 4vw;}
+     .logistics-deatil{padding: 20px;background: #fff;}
+     .logistics-deatil .title-deatil{font-size: 3.4vw;color: #22272e;padding:0px 0 2.7vw 0;}
+     .logsitics-list  .goodlist p{font-size: 3.4vw;color: #627386;line-height: 8vw;}
+     .logsitics-list  .goodlist p span{color: #22272e;}
+     .goodlist{position: relative;}
+     .mIcon.open:before{background-position: -41.5vw 1.6px;width: 8vw;height: 8vw;position: absolute;cursor: pointer;right: 0;top: 0;transition: none}
+     .mIcon.open1:before{background-position: -49.5vw 1.6px;width: 8vw;height: 8vw;position: absolute;cursor: pointer;right: 0;top: 0;transition: none}
+     .package-status {padding: 4.8vw 0;border-top: solid .27vw #e2e7ef;margin-top: 2.7vw}
+     .package-status .status-list {margin-top: -1.3vw;padding-left: 2vw;}
+     .package-status .status-list>li {border-left: .27vw solid #d4d8de;text-align: left;}
+     .package-status .status-list>li:before { /* 流程点的样式 */content: '';border: .27vw solid #e2e7ef;background-color: #e2e7ef;display: inline-block;width: 1.6vw;height: 1.6vw;border-radius: 50%;margin-left: -1.33vw;}
+     .package-status .status-list>li {height: auto;}
+     .package-status .status-box:before {content: " ";background-color: #f3f3f3;display: block;position: absolute;top: -8px;left: 20px;width: 10px;height: 4px}
+     .status-content-before {margin-left:2.7vw;width: 90%}
+     .status-time-before {text-align: left;margin-left: 5.5vw;}
+     .package-status .status-list>li div{display: inline-block;color: #9aa5b5;font-size: 3vw;line-height: 6.4vw;}
+     .status-list li .status-date{margin: 0 4vw;}
+ }

+ 16 - 1
src/main/resources/static/css/user-center/repair/detail.css

@@ -23,7 +23,22 @@ li{list-style:none}
     .container .formLine .address.mark textarea{margin-top: 0;}
     .container .formLine .btn{width: 208px;height: 50px;display: block;font-size: 14px;color: #FFF;text-align: center;line-height: 50px; margin: 0 auto;background-color: #e15616;box-shadow: 0px 3px 6px 0px rgba(249, 75, 75, 0.17);border-radius: 2px;}
     .container .formLine .btn.disabled{background-color: #999999;}
-
+    .release-stepbox .stepSpan{display: inline-block;width: 32%;
+    text-align: center}
+    .stepSpan p{
+        display: inline-block;
+        color: #9aa5b5;
+    }
+    .stepSpan span{
+        width: 20px;
+    height: 20px;
+    background: #9aa5b5;
+    display: inline-block;
+    border-radius: 50%;
+    color: #fff;
+    line-height: 20px;
+    text-align: center
+    }
 
 }
 

BIN
src/main/resources/static/img/base/icon.png


+ 8 - 1
src/main/resources/static/js/common/serviceapi/order.service.js

@@ -123,4 +123,11 @@ var OrderApi = {
                 callback(res);
             });
         },
-};
+        //订单查看物流
+        seelogistics: function (params, callback) {
+            Http.AjaxService({ url:'/pcCenter/logistics', type:'get', data:params, json:false})
+            .then(function(res){
+                callback(res);
+            });
+        },
+};

+ 3 - 0
src/main/resources/static/js/user-center/order/list.js

@@ -211,6 +211,9 @@ var orderPage = new Vue({
         hanldDetilsOrderFn:function(orderId){//订单详情
             window.location.href='/user/order/detail.html?orderId='+orderId;
         },
+        hanldQueryExpressFn:function(orderId){
+           window.location.href='/user/order/logistics.html?orderId='+orderId;
+        },
         showModelTypePop: function(){
             CAIMEI.Popup({
                 content: '<div class="payAlert">' +

+ 44 - 0
src/main/resources/static/js/user-center/order/logistics.js

@@ -0,0 +1,44 @@
+jqMultipleShow("click", ".navList", ".tab", ".con");
+var logistics = new Vue({
+       el:'#logistics',
+       data:{
+            showflag:false,
+            orderId:'',
+            dataList:[],
+            logisticsInfoList:[],
+            activeIndex:''
+       },
+       methods:{
+          openpackage:function (info) {
+              var _this = this;
+              if(info.routerList!=null){
+                  _this.showflag= !_this.showflag;
+                  info.showflag = _this.showflag
+              }
+
+          },
+       },
+       mounted:function () {
+              var _self = this;
+              _self.orderId = CAIMEI.getUrlParam('orderId');
+           OrderApi.seelogistics({orderId:_self.orderId},function (res) {
+                  if(res.code==0){
+                  console.log(res);
+                     if(res.data.logisticsRecordList.length>0){
+                            _self.dataList=res.data.logisticsRecordList;
+                     }else {
+                             _self.dataList=[]
+                      }
+                      if(res.data.logisticsInfoList.length>0){
+                            _self.logisticsInfoList = res.data.logisticsInfoList;
+                      }else {
+                            _self.logisticsInfoList = []
+                      }
+                  }else {
+                      CAIMEI.Alert(res.msg,'确定')
+                  }
+           });
+
+       }
+
+})

+ 1 - 1
src/main/resources/static/lib/datapicker/daterangepicker.css

@@ -69,7 +69,7 @@
 .date-picker-wrapper .week-number{padding:5px 0;line-height:1;font-size:12px;margin-bottom:1px;color:#999;cursor:pointer;}
 .date-picker-wrapper .week-number.week-number-selected{color:#49e;font-weight:bold;}
 @media screen and (min-width:768px){
-    .date-picker-wrapper{width:590px;}
+    .date-picker-wrapper{width:600px;}
     .date-picker-wrapper .month-wrapper{border-radius:3px;background-color:#fff;padding:15px;cursor:default;position:relative;_overflow:hidden;}
     .date-picker-wrapper .drp_top-bar{display:none;}
     .date-picker-wrapper .month-wrapper table{width:266px;float:left;}

+ 1 - 1
src/main/resources/templates/user-center/order/list.html

@@ -104,7 +104,7 @@
                                     <a class="btn cancel" href="javascript: void(0);" v-if="['0','111'].indexOf(order.status)!=-1" @click="hanldCancelOrderFn(order.orderID)">取消订单</a>
                                     <a class="btn primary" href="javascript: void(0);" v-if="['0'].indexOf(order.status)!=-1"  @click="hanldConfirmOrderFn(order.orderID)">确认订单</a>
                                     <a class="btn cancel" href="javascript: void(0);" v-if="['6'].indexOf(order.status)!=-1" @click="hanldDeleteOrderFn(order.orderID)">删除订单</a>
-                                    <a class="btn cancel" href="javascript: void(0);"  v-if="['4','5','12','13','33','22','23','32','77'].indexOf(order.status)!=-1" @click="hanldQueryExpressFn()">查看物流</a>
+                                    <a class="btn cancel" href="javascript: void(0);"  v-if="['4','5','12','13','33','22','23','32','77'].indexOf(order.status)!=-1" @click="hanldQueryExpressFn(order.orderID)">查看物流</a>
                                     <a class="btn primary" href="javascript: void(0);"  v-if="['33'].indexOf(order.status)!=-1" @click="hanldReceivingOrderFn(order.orderID)">确认收货</a>
                                 </div>
                             </div>

+ 88 - 0
src/main/resources/templates/user-center/order/logistics.html

@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html lang="zh-CN" xmlns:th="https://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+      xsi:schemaLocation="https://www.thymeleaf.org ">
+<head>
+    <title>采美365网-中国美业全方位线上交易服务互动平台,做美业,上采美</title>
+    <template th:replace="components/head-link"></template>
+    <link th:href="@{/css/base/center.css(v=${version})}" rel="stylesheet" type="text/css">
+    <link th:href="@{/css/user-center/order/logistics.css(v=${version})}" rel="stylesheet" type="text/css">
+</head>
+<body>
+<!-- 引用头部 -->
+<template th:replace="components/header"></template>
+
+<!-- 我的采美 -->
+<div id="logistics">
+    <div class="navLayout">
+        <div v-if="isPC" class="crumbs">
+            <span>我的交易</span>
+            <span>&gt;</span>
+            <span>我的订单</span>
+        </div>
+        <div class="wrap clear">
+             <!--左侧导航-->
+             <template th:replace="user-center/components/tableft"></template>
+            <div class="right">
+                <div class="order-logistics">
+                    <div class="order-list" v-for="item in dataList">
+                        <div class="left-img">
+                            <img :src="item.image">
+                        </div>
+                        <div class="right-name">
+                            <p class="product-name">{{item.productName}}</p>
+                            <p class="product-num">
+                                <span class="number">数量:{{item.buyNum}}</span>
+                                <span class="Ship">已发货:<span>{{item.shipmentsNum}}</span></span>
+                            </p>
+                        </div>
+                    </div>
+                </div>
+                <div class="mainContent">
+                    <div class="title">物流信息</div>
+                    <div class="logistics-deatil">
+                        <div class="title-deatil">物流详情</div>
+                         <div class="logsitics-list">
+                             <div class="goodlist" v-for="(info,index) in logisticsInfoList" :key="index">
+                               <p>发货时间:<span>{{info.updateDate}}</span></p>
+                               <p v-if="isPC">物流公司:<span>{{info.logisticsCompanyName}}</span></p>
+                               <p v-if="isPC">物流单号:<span>{{info.nu}}</span></p>
+                               <p v-if="showflag && !(isPC)">物流公司:<span>{{info.logisticsCompanyName}}</span></p>
+                               <p v-if="showflag && !(isPC)">物流单号:<span>{{info.nu}}</span></p>
+                               <i class="icon mIcon" @click="openpackage(info)" :class="info.showflag?'open1':'open'"></i>
+                                 <div class="package-status" v-show="info.showflag">
+                                    <div class="status-box">
+                                        <ul class="status-list" v-if="isPC">
+                                            <li v-for="r in info.routerList">
+                                               <div class="status-time-before">{{r.time.substring(0,10)}}</div>
+                                                <div class="status-date">周一</div>
+                                                <div class="status-time">{{r.time.substring(10,20)}}</div>
+                                                <div class="status-content-before">{{r.desc}}</div>
+                                            </li>
+                                        </ul>
+                                        <ul class="status-list" v-else>
+                                            <li  v-for="r in info.routerList">
+                                                <div class="status-content-before">{{r.desc}}</div>
+                                                <div class="status-time-before">2017-08-17</div>
+                                                <div class="status-date">周一</div>
+                                                <div class="status-time">14:24:36</div>
+                                            </li>
+                                        </ul>
+                                    </div>
+                                </div>
+
+                             </div>
+                         </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- 引入底部 -->
+<template th:replace="components/footer"></template>
+<template th:replace="components/foot-link"></template>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/order.service.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/user-center/order/logistics.js(v=${version})}"></script>
+</body>
+</html>

+ 14 - 1
src/main/resources/templates/user-center/repair/detail.html

@@ -26,7 +26,20 @@
             <template th:replace="user-center/components/tableft"></template>
             <div class="right">
                 <div class="container clear">
-
+                    <div class="release-stepbox">
+                        <div class="stepSpan active">
+                            <span>1</span>
+                            <p>已提交</p>
+                        </div>
+                        <div class="stepSpan" >
+                            <span>2</span>
+                            <p>已对接</p>
+                        </div>
+                        <div class="stepSpan" >
+                            <span>3</span>
+                            <p>已评价</p>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>