供应商手机端调整

src/assets/iconfont/demo_index.html

@@ -108,6 +108,12 @@
                 <div class="code-name">&amp;#xe604;</div>
               </li>
           
+            <li class="dib">
+              <span class="icon iconfont">&#xe643;</span>
+                <div class="name">恢复</div>
+                <div class="code-name">&amp;#xe643;</div>
+              </li>
+          
             <li class="dib">
               <span class="icon iconfont">&#xe605;</span>
                 <div class="name">返回</div>
@@ -162,12 +168,30 @@
                 <div class="code-name">&amp;#xe610;</div>
               </li>
           
+            <li class="dib">
+              <span class="icon iconfont">&#xe60e;</span>
+                <div class="name">等待</div>
+                <div class="code-name">&amp;#xe60e;</div>
+              </li>
+          
             <li class="dib">
               <span class="icon iconfont">&#xe63b;</span>
                 <div class="name">百分比</div>
                 <div class="code-name">&amp;#xe63b;</div>
               </li>
           
+            <li class="dib">
+              <span class="icon iconfont">&#xe60a;</span>
+                <div class="name">uni_icon_开关_关</div>
+                <div class="code-name">&amp;#xe60a;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe60b;</span>
+                <div class="name">uni_icon_开关_开</div>
+                <div class="code-name">&amp;#xe60b;</div>
+              </li>
+          
             <li class="dib">
               <span class="icon iconfont">&#xe609;</span>
                 <div class="name">奖牌-01</div>
@@ -312,6 +336,12 @@
                 <div class="code-name">&amp;#xe621;</div>
               </li>
           
+            <li class="dib">
+              <span class="icon iconfont">&#xe615;</span>
+                <div class="name">关  闭</div>
+                <div class="code-name">&amp;#xe615;</div>
+              </li>
+          
             <li class="dib">
               <span class="icon iconfont">&#xe710;</span>
                 <div class="name">more</div>
@@ -485,6 +515,15 @@
             </div>
           </li>
           
+          <li class="dib">
+            <span class="icon iconfont icon-huifu"></span>
+            <div class="name">
+              恢复
+            </div>
+            <div class="code-name">.icon-huifu
+            </div>
+          </li>
+          
           <li class="dib">
             <span class="icon iconfont icon-fanhui"></span>
             <div class="name">
@@ -566,6 +605,15 @@
             </div>
           </li>
           
+          <li class="dib">
+            <span class="icon iconfont icon-dengdai"></span>
+            <div class="name">
+              等待
+            </div>
+            <div class="code-name">.icon-dengdai
+            </div>
+          </li>
+          
           <li class="dib">
             <span class="icon iconfont icon-baifenbi"></span>
             <div class="name">
@@ -575,6 +623,24 @@
             </div>
           </li>
           
+          <li class="dib">
+            <span class="icon iconfont icon-uni_icon_kaiguan_guan"></span>
+            <div class="name">
+              uni_icon_开关_关
+            </div>
+            <div class="code-name">.icon-uni_icon_kaiguan_guan
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-uni_icon_kaiguan_kai"></span>
+            <div class="name">
+              uni_icon_开关_开
+            </div>
+            <div class="code-name">.icon-uni_icon_kaiguan_kai
+            </div>
+          </li>
+          
           <li class="dib">
             <span class="icon iconfont icon-jiangpai-"></span>
             <div class="name">
@@ -791,6 +857,15 @@
             </div>
           </li>
           
+          <li class="dib">
+            <span class="icon iconfont icon-guanbi1"></span>
+            <div class="name">
+              关  闭
+            </div>
+            <div class="code-name">.icon-guanbi1
+            </div>
+          </li>
+          
           <li class="dib">
             <span class="icon iconfont icon-more"></span>
             <div class="name">
@@ -933,6 +1008,14 @@
                 <div class="code-name">#icon-icon-test</div>
             </li>
           
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-huifu"></use>
+                </svg>
+                <div class="name">恢复</div>
+                <div class="code-name">#icon-huifu</div>
+            </li>
+          
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#icon-fanhui"></use>
@@ -1005,6 +1088,14 @@
                 <div class="code-name">#icon-weikaishi</div>
             </li>
           
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-dengdai"></use>
+                </svg>
+                <div class="name">等待</div>
+                <div class="code-name">#icon-dengdai</div>
+            </li>
+          
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#icon-baifenbi"></use>
@@ -1013,6 +1104,22 @@
                 <div class="code-name">#icon-baifenbi</div>
             </li>
           
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-uni_icon_kaiguan_guan"></use>
+                </svg>
+                <div class="name">uni_icon_开关_关</div>
+                <div class="code-name">#icon-uni_icon_kaiguan_guan</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-uni_icon_kaiguan_kai"></use>
+                </svg>
+                <div class="name">uni_icon_开关_开</div>
+                <div class="code-name">#icon-uni_icon_kaiguan_kai</div>
+            </li>
+          
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#icon-jiangpai-"></use>
@@ -1205,6 +1312,14 @@
                 <div class="code-name">#icon-jindu</div>
             </li>
           
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-guanbi1"></use>
+                </svg>
+                <div class="name">关  闭</div>
+                <div class="code-name">#icon-guanbi1</div>
+            </li>
+          
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#icon-more"></use>

src/pages/cses_spt/components/feedbacklist.vue

@@ -0,0 +1,229 @@
+<template>
+  <div>
+    <div id='csesspt-feedbacklist'>
+      <div class="feedbacklist-flex">
+        <div class="feedbacklist-custname">
+          <div>安吉富和家具有限公司</div>
+          <div class="feedbacklist-flex feedbacklist-subtitle">
+            <div class="feedbacklist-value">云天明</div>
+            <div>2019-03-10 09:30</div>
+          </div>
+        </div>
+        <div class="feedbacklist-flag">交期提前</div>
+      </div>
+      <div class="feedbacklist-mx">
+        <div class="feedbacklist-mx-mtrl">
+          枪钉5000粒，交期由2019/03/18提前到2019/03/15。
+        </div>
+      </div>
+      <div class="feedbacklist-bottom">
+        <div>
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-chakan"></use>
+          </svg>
+          查看单据
+        </div>
+        <div class="feedbacklist-btn">
+          <div class='feedbacklist-btn-ok'>接受</div>
+          <div class='feedbacklist-btn-ban'>拒绝</div>
+        </div>
+      </div>
+    </div>
+
+
+    <div id='csesspt-feedbacklist'>
+      <div class="feedbacklist-flex">
+        <div class="feedbacklist-custname">
+          <div>安吉富和家具有限公司</div>
+          <div class="feedbacklist-flex feedbacklist-subtitle">
+            <div class="feedbacklist-value">云天明</div>
+            <div>2019-03-10 09:30</div>
+          </div>
+        </div>
+        <div class="feedbacklist-flag feedbacklist-bgcolor-green">交期延后</div>
+      </div>
+      <div class="feedbacklist-mx">
+        <div class="feedbacklist-mx-mtrl">
+          角码1500个，交期由2019/03/14延后到2019/03/16。
+        </div>
+      </div>
+      <div class="feedbacklist-bottom">
+        <div>
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-chakan"></use>
+          </svg>
+          查看单据
+        </div>
+        <div class="feedbacklist-btn">
+          <div class='feedbacklist-btn-ok'>接受</div>
+          <div class='feedbacklist-btn-ban'>拒绝</div>
+        </div>
+      </div>
+    </div>
+
+    <div id='csesspt-feedbacklist'>
+      <div class="feedbacklist-flex">
+        <div class="feedbacklist-custname">
+          <div>安吉富和家具有限公司</div>
+          <div class="feedbacklist-flex feedbacklist-subtitle">
+            <div class="feedbacklist-value">云天明</div>
+            <div>2019-03-10 09:30</div>
+          </div>
+        </div>
+        <div class="feedbacklist-flag">采购终止</div>
+      </div>
+      <div class="feedbacklist-mx">
+        <div class="feedbacklist-mx-mtrl">
+          滚轮800个，交期2019/03/15，交易终止。
+        </div>
+      </div>
+      <div class="feedbacklist-bottom">
+        <div>
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-chakan"></use>
+          </svg>
+          查看单据
+        </div>
+        <div class="feedbacklist-btn">
+          <div class='feedbacklist-btn-confirm'>确认</div>
+        </div>
+      </div>
+    </div>
+
+  </div>
+</template>
+<script>
+  export default {
+
+  }
+
+</script>
+<style>
+  #csesspt-feedbacklist {
+    background: #ffffff;
+    margin: 8px 0 0 0;
+    padding: 10px 13px;
+    font-size: 16px;
+    font-family: "微软雅黑";
+    /* border-bottom: 1px solid #ddd; */
+    border-radius: 15px;
+  }
+
+  .feedbacklist-custname {
+    font-size: 20px;
+    font-weight: bold;
+    color: #ff7f50;
+    width: 70%;
+  }
+
+  .feedbacklist-flex {
+    display: flex;
+    padding: 0 0 2px 0;
+    align-items: center;
+  }
+
+  .feedbacklist-subtitle {
+    color: #ababab;
+    font-size: 13px;
+    /* line-height: 30px; */
+  }
+
+  .feedbacklist-title {
+    font-weight: bold;
+    width: 80px;
+    text-align: right;
+  }
+
+  .feedbacklist-value {
+    width: 23%;
+  }
+
+  .feedbacklist-flag {
+    position: absolute;
+    right: 25px;
+    /* width: 100px; */
+    font-size: 13px;
+    font-weight: bold;
+    color: #fff;
+    border-radius: 15px;
+    padding: 2px 6px;
+    text-align: center;
+    background-color: #ff0000
+  }
+
+  /* .feedbacklist-mx {
+    padding: 2px 5px 5px 5px;
+    margin: 5px 0;
+    background-color: #f8f8f8;
+    border-radius: 10px;
+  } */
+
+  .feedbacklist-mx-title {
+    font-size: 14px;
+    color: #666;
+    /* margin: 5px 0; */
+    padding-top: 3px;
+    /* border-top: 1px solid #ddd; */
+  }
+
+  .feedbacklist-mx-mtrl {
+    font-size: 16px;
+    padding: 3px 0;
+  }
+
+
+  .feedbacklist-bottom {
+    display: flex;
+    margin: 10px 0 0 0;
+    padding: 3px 0;
+    font-size: 13px;
+    color: #888;
+    /* height: 25px; */
+    align-items: center;
+    /* border-top: 1px solid #ddd; */
+  }
+
+  .feedbacklist-btndetail {
+    position: absolute;
+    right: 20px;
+    color: #888;
+    font-size: 13px;
+    border-radius: 5px;
+  }
+
+  .feedbacklist-btn {
+    display: flex;
+    position: absolute;
+    right: 20px;
+    color: #000000;
+    font-size: 13px;
+
+  }
+
+  .feedbacklist-btn-ok {
+    border-left: 1px solid #dfdfdf;
+    border-top: 1px solid #dfdfdf;
+    border-bottom: 1px solid #dfdfdf;
+    padding: 5px 30px;
+    border-top-left-radius: 15px;
+    border-bottom-left-radius: 15px;
+  }
+
+  .feedbacklist-btn-ban {
+    border: 1px solid #dfdfdf;
+    padding: 5px 30px;
+    border-top-right-radius: 15px;
+    border-bottom-right-radius: 15px;
+  }
+
+  .feedbacklist-btn-confirm{
+    border: 1px solid #dfdfdf;
+    padding: 5px 30px;
+    border-radius: 15px;
+  }
+
+  .feedbacklist-bgcolor-green{
+      background-color: #8dc026;
+  }
+
+</style>

src/pages/cses_spt/cses_spt_detail.vue

@@ -6,9 +6,7 @@
           <use xlink:href="#icon-fanhui"></use>
         </svg>
       </div>
-      <div class="topbar_middle">
-        订单详情
-      </div>
+      <div class="topbar_middle">订单详情</div>
       <div class="topbar_right">
         <svg class="icon" aria-hidden="true">
           <use xlink:href="#icon-caidan"></use>
@@ -50,11 +48,10 @@
       <div class="address_dt">地址：广东省顺德市芙蓉中路二段115号湖南千思湖南千思湖南千思湖南千思湖南千思</div>
 
       <!-- <div class="liubai_dt"></div> -->
-
       <div class="middlearea">
-        <div class='taskinfo_dtflex'>
+        <div class="taskinfo_dtflex">
           <div class="taskinfo_dttitle_dt">
-            <div class="title_dt ">订货日期：</div>
+            <div class="title_dt">订货日期：</div>
             <div class="taskinfo_dtitem leftsize">2019-03-10</div>
           </div>
           <div class="taskinfo_dttitle_dt">
@@ -72,45 +69,62 @@
             <div class="taskinfo_dtitem">款到发货</div>
           </div>
         </div>
-
       </div>
 
       <div class="dscrp">
         <svg class="icon" aria-hidden="true">
           <use xlink:href="#icon-wentibuchong"></use>
         </svg>
-        我是备注信息，如果没有，就不显示这一个div了。哔哩吧啦哔哩吧啦，哔哩吧啦哔哩吧啦，哔哩吧啦哔哩吧啦，哔哩吧啦哔哩吧啦！
+        我是备注信息，如果没有，就不显示这一个div了。
       </div>
 
-
       <div class="liubai_dt"></div>
       <div class="subtitle_dt">订单明细</div>
       <div class="taskmx_dt">
-
         <div id="rowmx_dt">
-          <div class="mxmtrl_dt">
-            <svg class="icon" aria-hidden="true">
-              <use xlink:href="#icon-dian"></use>
-            </svg>
-            枪钉
-            <span class="cses-spt-detail-mxdate">
+          <div style="display:flex;align-items:center;">
+            <div>
+              <div class="mxmtrl_dt">
+                <svg class="icon" aria-hidden="true">
+                  <use xlink:href="#icon-dian"></use>
+                </svg>
+                枪钉(型号AK47)
+                <!-- <span class="cses-spt-detail-mx-ban" v-if="taskflag_dt=='待接收'">
               <svg class="icon" aria-hidden="true">
-                <use xlink:href="#icon-jiaohuoriqishezhi"></use>
+                <use xlink:href="#icon-guanbi"></use>
               </svg>
-              2019/03/15
-            </span>
+              回复拒绝
+                </span>-->
+              </div>
+              <div class="cses-spt-detail-mxdate">
+                <svg class="icon" aria-hidden="true">
+                  <use xlink:href="#icon-jiaohuoriqishezhi"></use>
+                </svg>
+                2019/03/15
+              </div>
+            </div>
+            <div class="cses-spt-detail-mx-swtich-text">接收</div>
+            <div class="cses-spt-detail-mx-swtich">
+              <svg class="icon" aria-hidden="true">
+                <use xlink:href="#icon-uni_icon_kaiguan_kai"></use>
+              </svg>
+            </div>
           </div>
           <div class="mxqty_dt">数量：5000粒，单价：0.1元，合计500元</div>
-          <div class="mxqty_dt">发货：5000粒，质检合格：4980粒，不合格：20粒，收货：4980粒</div>
-          <div class="cses-spt-check">
+          <div class="mxqty_dt" v-if="taskflag_dt=='已完成'">发货：5000粒，质检合格：4980粒，不合格：20粒，收货：4980粒</div>
+          <div class="cses-spt-check" v-if="taskflag_dt=='已完成'">
             <div class="cses-spt-check-title">不合格项目：破损12粒，生锈8粒</div>
             <div class="cses-spt-check-wrap">
               <div class="cses-spt-check-mx">
-                <div><img src="../../assets/timg.jpg" class="check-img-responsive"></div>
+                <div>
+                  <img src="../../assets/timg.jpg" class="check-img-responsive">
+                </div>
                 <div class="cses-spt-check-item">破损</div>
               </div>
               <div class="cses-spt-check-mx">
-                <div><img src="../../assets/timg22.jpg" class="check-img-responsive"></div>
+                <div>
+                  <img src="../../assets/timg22.jpg" class="check-img-responsive">
+                </div>
                 <div class="cses-spt-check-item">生锈</div>
               </div>
             </div>
@@ -118,38 +132,70 @@
         </div>
 
         <div id="rowmx_dt">
-          <div class="mxmtrl_dt">
-            <svg class="icon" aria-hidden="true">
-              <use xlink:href="#icon-dian"></use>
-            </svg>
-            角码
-            <span class="cses-spt-detail-mxdate">
+          <div style="display:flex;align-items:center;">
+            <div>
+              <div class="mxmtrl_dt">
+                <svg class="icon" aria-hidden="true">
+                  <use xlink:href="#icon-dian"></use>
+                </svg>
+                角码(规格AA*BB*CC)
+                <!-- <span class="cses-spt-detail-mx-ban cses-spt-detail-bg-color-green" v-if="taskflag_dt=='待接收'">
+              <svg class="icon" aria-hidden="true">
+                <use xlink:href="#icon-huifu"></use>
+              </svg>
+              取消拒绝
+                </span>-->
+              </div>
+              <div class="cses-spt-detail-mxdate">
+                <svg class="icon" aria-hidden="true">
+                  <use xlink:href="#icon-jiaohuoriqishezhi"></use>
+                </svg>
+                2019/03/15
+              </div>
+            </div>
+            <div class="cses-spt-detail-mx-swtich-text">接收</div>
+            <div class="cses-spt-detail-mx-swtich">
               <svg class="icon" aria-hidden="true">
-                <use xlink:href="#icon-jiaohuoriqishezhi"></use>
+                <use xlink:href="#icon-uni_icon_kaiguan_guan"></use>
               </svg>
-              2019/03/15
-            </span>
+            </div>
           </div>
           <div class="mxqty_dt">数量：2000个，单价：0.5元，合计1000元</div>
-          <div class="mxqty_dt">发货：2000个，质检合格：2000个，收货：2000个</div>
+          <div class="mxqty_dt cses-spt-detail-font-color-red">拒绝原因：模具维修中，无法生产。</div>
+          <div class="mxqty_dt" v-if="taskflag_dt=='已完成'">发货：2000个，质检合格：2000个，收货：2000个</div>
         </div>
 
-
         <div id="rowmx_dt">
-          <div class="mxmtrl_dt">
-            <svg class="icon" aria-hidden="true">
-              <use xlink:href="#icon-dian"></use>
-            </svg>
-            滚轮
-            <span class="cses-spt-detail-mxdate">
+          <div style="display:flex;align-items:center;">
+            <div>
+              <div class="mxmtrl_dt">
+                <svg class="icon" aria-hidden="true">
+                  <use xlink:href="#icon-dian"></use>
+                </svg>
+                滚轮(型号AFE9980)
+                <!-- <span class="cses-spt-detail-mx-ban" v-if="taskflag_dt=='待接收'">
               <svg class="icon" aria-hidden="true">
-                <use xlink:href="#icon-jiaohuoriqishezhi"></use>
+                <use xlink:href="#icon-guanbi"></use>
               </svg>
-              2019/03/15
-            </span>
+              回复拒绝
+                </span>-->
+              </div>
+              <div class="cses-spt-detail-mxdate">
+                <svg class="icon" aria-hidden="true">
+                  <use xlink:href="#icon-jiaohuoriqishezhi"></use>
+                </svg>
+                2019/03/15
+              </div>
+            </div>
+            <div class="cses-spt-detail-mx-swtich-text">接收</div>
+            <div class="cses-spt-detail-mx-swtich">
+              <svg class="icon" aria-hidden="true">
+                <use xlink:href="#icon-uni_icon_kaiguan_kai"></use>
+              </svg>
+            </div>
           </div>
           <div class="mxqty_dt">数量：400个，单价：5元，合计2000元</div>
-          <div class="mxqty_dt">发货：400个，质检合格：400个，收货：400个</div>
+          <div class="mxqty_dt" v-if="taskflag_dt=='已完成'">发货：400个，质检合格：400个，收货：400个</div>
         </div>
       </div>
 
@@ -190,7 +236,6 @@
           质检完成：2019-03-15 09:30
         </div>
 
-
         <div>
           <svg class="icon" aria-hidden="true">
             <use xlink:href="#icon-buzhoutiaowancheng"></use>
@@ -199,357 +244,452 @@
         </div>
         <!-- <div>
           *要求完成日期：
-        </div> -->
-
-
+        </div>-->
+      </div>
+      <!--填写拒绝理由-->
+      <div class="cses-spt-mask" v-show="ifban==1"></div>
+      <div class="cses-spt-ban-reason" v-show="ifban==1">
+        <div class="cses-spt-ban-reason-flex">
+          <div class="cses-spt-ban-reason-title">角码，2000个，交期：2019/03/15</div>
+          <div class="cses-spt-ban-reason-close">
+            <svg class="icon" aria-hidden="true">
+              <use xlink:href="#icon-guanbi1"></use>
+            </svg>
+          </div>
+        </div>
+        <div class="cses-spt-ban-reason-edit-warp">
+          <textarea
+            name="banreason"
+            rows="5"
+            placeholder="请填写拒绝原因"
+            class="cses-spt-ban-reason-edit"
+          ></textarea>
+        </div>
+        <div style="text-align: center;">
+          <div class="cses-spt-ban-reason-btn" style="display: inline-block;">确定拒绝</div>
+        </div>
       </div>
-
     </div>
 
     <div class="spt-detail-btn-wrap" v-if="taskflag_dt=='待接收'">
-      <div class="spt-detail-btn spt-detail-border-right">
+      <div class="spt-detail-btn">
         <svg class="icon" aria-hidden="true">
           <use xlink:href="#icon-tongyi"></use>
         </svg>
         接收
       </div>
-      <div class="spt-detail-btn">
-        <svg class="icon" aria-hidden="true">
-          <use xlink:href="#icon-guanbi"></use>
-        </svg>
-        拒绝
-      </div>
     </div>
   </div>
 </template>
 
 <script>
-  export default {
-
-    name: 'saletaskDetail',
-    data() {
+export default {
+  name: "saletaskDetail",
+  data() {
+    return {
+      taskflag_dt: "待接收",
+      ifnew: 0,
+      ifban: 1 //控制是否弹出填写拒绝原因div的开关
+    };
+  },
+  methods: {
+    goback() {
+      {
+        history.back();
+      }
+    }
+  },
+  computed: {
+    colortop: function() {
       return {
-        taskflag_dt: '已完成',
-        ifnew: 0
+        bgcolorred: this.taskflag_dt == "待接收",
+        bgcolorgreen: this.taskflag_dt == "在进行",
+        bgcolorblue: this.taskflag_dt == "已完成"
       };
-    },
-    methods: {
-      goback() {
-        {
-          history.back();
-        }
-      }
-    },
-    computed: {
-      colortop: function () {
-        return {
-          bgcolorred: this.taskflag_dt == "待接收",
-          bgcolorgreen: this.taskflag_dt == "在进行",
-          bgcolorblue: this.taskflag_dt == "已完成"
-        };
-      },
     }
   }
-
+};
 </script>
 
 <style>
-  body {
-    margin: 0;
-    padding: 0;
-    /* background-color: #fff; */
-    font-family: "微软雅黑";
-  }
+body {
+  margin: 0;
+  padding: 0;
+  /* background-color: #fff; */
+  font-family: "微软雅黑";
+}
 
-  .topbar {
-    min-height: 44px;
-    border-bottom: 1px solid #e5e5e5;
-    background: #fff;
-    position: fixed;
-    width: 100%;
-    z-index: 9999;
-    display: flex;
-    font-size: 18px;
-    align-items: center;
-  }
+.topbar {
+  min-height: 44px;
+  border-bottom: 1px solid #e5e5e5;
+  background: #fff;
+  position: fixed;
+  width: 100%;
+  z-index: 9993;
+  display: flex;
+  font-size: 18px;
+  align-items: center;
+}
 
-  .topbar_left {
-    /* flex: 0 0 %; */
-    margin-left: 10px;
-  }
+.topbar_left {
+  /* flex: 0 0 %; */
+  margin-left: 10px;
+}
 
-  .topbar_middle {
-    text-align: center;
-    flex: 0 0 85%;
-  }
+.topbar_middle {
+  text-align: center;
+  flex: 0 0 85%;
+}
 
-  .topbar_right {
-    /* flex: 0 0 10%; */
-    position: absolute;
-    right: 10px;
-  }
+.topbar_right {
+  /* flex: 0 0 10%; */
+  position: absolute;
+  right: 10px;
+}
 
-  #taskdetail {
-    background-color: #fff;
-  }
+#taskdetail {
+  background-color: #fff;
+}
 
-  #content {
-    position: absolute;
-    top: 44px;
-    background-color: #fff;
-    width: 100%;
-    padding-bottom: 60px;
-  }
+#content {
+  position: absolute;
+  top: 44px;
+  background-color: #fff;
+  width: 100%;
+  padding-bottom: 60px;
+}
 
-  .toparea_dt {
-    color: white;
-    background-color: #fc4e2c;
-    height: 80px;
-    display: flex;
-  }
+.toparea_dt {
+  color: white;
+  background-color: #fc4e2c;
+  height: 80px;
+  display: flex;
+}
 
-  .bgcolorred {
-    background-color: #fc4e2c
-  }
+.bgcolorred {
+  background-color: #fc4e2c;
+}
 
-  .bgcolorgreen {
-    background-color: #8dc026;
-  }
+.bgcolorgreen {
+  background-color: #8dc026;
+}
 
-  .bgcolorblue {
-    background-color: #1e90ff;
-  }
+.bgcolorblue {
+  background-color: #1e90ff;
+}
 
-  .taskcode_dt {
-    font-size: 22px;
-    font-weight: bold;
-    padding: 10px 0 10px 10px;
-    line-height: 30px;
-  }
+.taskcode_dt {
+  font-size: 22px;
+  font-weight: bold;
+  padding: 10px 0 10px 10px;
+  line-height: 30px;
+}
 
-  .taskflag_dt {
-    font-size: 18px;
-    font-weight: bold;
-    padding: 10px;
-    line-height: 30px;
-    position: absolute;
-    right: 10px;
-  }
+.taskflag_dt {
+  font-size: 18px;
+  font-weight: bold;
+  padding: 10px;
+  line-height: 30px;
+  position: absolute;
+  right: 10px;
+}
 
-  .taskinfo_dt {
-    background-color: #fff;
-    width: 100%;
-    height: 35px;
-    border-top-left-radius: 20px;
-    border-top-right-radius: 20px;
-    border-bottom-right-radius: 0px;
-    border-bottom-left-radius: 0px;
-    position: absolute;
-    top: 50px;
-  }
+.taskinfo_dt {
+  background-color: #fff;
+  width: 100%;
+  height: 35px;
+  border-top-left-radius: 20px;
+  border-top-right-radius: 20px;
+  border-bottom-right-radius: 0px;
+  border-bottom-left-radius: 0px;
+  position: absolute;
+  top: 50px;
+}
 
-  .cust_dt {
-    font-size: 16px;
-    font-weight: bold;
-    padding: 10px
-  }
+.cust_dt {
+  font-size: 16px;
+  font-weight: bold;
+  padding: 10px;
+}
 
-  .reptel_dt {
-    font-size: 14px;
-    font-weight: bold;
-    margin: 10px 0 2px 10px;
-  }
+.reptel_dt {
+  font-size: 14px;
+  font-weight: bold;
+  margin: 10px 0 2px 10px;
+}
 
-  .address_dt {
-    font-size: 13px;
-    margin-left: 30px;
-    margin-right: 20px;
-    margin-bottom: 10px;
-    color: #666666;
-  }
+.address_dt {
+  font-size: 13px;
+  margin-left: 30px;
+  margin-right: 20px;
+  margin-bottom: 10px;
+  color: #666666;
+}
 
-  .hyaddress_dt {
-    font-size: 13px;
-    margin-left: 10px;
-    margin-right: 10px;
-    margin-bottom: 10px;
-    color: #666666;
-  }
+.hyaddress_dt {
+  font-size: 13px;
+  margin-left: 10px;
+  margin-right: 10px;
+  margin-bottom: 10px;
+  color: #666666;
+}
 
-  .liubai_dt {
-    width: 100%;
-    height: 10px;
-    background-color: #f6f6f6;
-  }
+.liubai_dt {
+  width: 100%;
+  height: 10px;
+  background-color: #f6f6f6;
+}
 
-  .middlearea {
-    margin: 10px;
-    font-size: 14px;
-  }
+.middlearea {
+  margin: 10px;
+  font-size: 14px;
+}
 
-  .taskinfo_dtflex {
-    display: flex;
-    /* height: 60px; */
-    align-items: center;
-  }
+.taskinfo_dtflex {
+  display: flex;
+  /* height: 60px; */
+  align-items: center;
+}
 
-  .taskinfo_dttitle_dt {
-    font-weight: bold;
-    margin-bottom: 5px;
-    display: flex;
-    flex-wrap: wrap;
-  }
+.taskinfo_dttitle_dt {
+  font-weight: bold;
+  margin-bottom: 5px;
+  display: flex;
+  flex-wrap: wrap;
+}
 
-  .title_dt {
-    width: 80px;
-    text-align: right
-  }
+.title_dt {
+  width: 80px;
+  text-align: right;
+}
 
-  .taskinfo_dtitem {
-    font-weight: normal;
-    color: #333;
+.taskinfo_dtitem {
+  font-weight: normal;
+  color: #333;
+}
 
-  }
+.taskinfo_dtamt {
+  display: flex;
+}
 
-  .taskinfo_dtamt {
-    display: flex;
-  }
+.taskamt {
+  font-weight: bold;
+  color: #ff0000;
+}
 
-  .taskamt {
-    font-weight: bold;
-    color: #ff0000;
-  }
+.leftsize {
+  width: 100px;
+}
 
-  .leftsize {
-    width: 100px;
-  }
+.dscrp {
+  border-radius: 10px;
+  background: #f0eded;
+  padding: 10px 20px;
+  margin: 0 20px 10px 20px;
+  font-size: 15px;
+  color: #555555;
+  line-height: 18px;
+}
 
-  .dscrp {
-    border-radius: 10px;
-    background: #f0eded;
-    padding: 10px 20px;
-    margin: 0 20px 10px 20px;
-    font-size: 15px;
-    color: #555555;
-    line-height: 18px;
-  }
+.subtitle_dt {
+  font-size: 17px;
+  font-weight: 700;
+  text-align: center;
+  margin: 0 20px;
+  height: 42px;
+  line-height: 43px;
+}
 
-  .subtitle_dt {
-    font-size: 17px;
-    font-weight: 700;
-    text-align: center;
-    margin: 0 20px;
-    height: 42px;
-    line-height: 43px;
-  }
+.jindu {
+  border-top: 1px solid #f0f0f0;
+  margin: 0 20px;
+  font-size: 15px;
+  line-height: 30px;
+  padding: 10px 0;
+}
 
-  .jindu {
-    border-top: 1px solid #f0f0f0;
-    margin: 0 20px;
-    font-size: 15px;
-    line-height: 30px;
-    padding: 10px 0;
-  }
+.jindubtn {
+  margin-left: 20px;
+  border: 1px solid #bbb;
+  padding: 0 10px;
+  border-radius: 15px;
+  font-size: 13px;
+}
 
-  .jindubtn {
-    margin-left: 20px;
-    border: 1px solid #bbb;
-    padding: 0 10px;
-    border-radius: 15px;
-    font-size: 13px;
-  }
+.taskmx_dt {
+  border-top: 1px solid #f0f0f0;
+}
 
-  .taskmx_dt {
-    border-top: 1px solid #f0f0f0;
+#rowmx_dt {
+  margin-bottom: 15px;
+}
 
-  }
+.mxmtrl_dt {
+  margin: 5px;
+  font-size: 16px;
+}
 
-  #rowmx_dt {
+.mxqty_dt {
+  font-size: 14px;
+  color: #888888;
+  margin: 0 10px 3px 25px;
+}
 
-    margin-bottom: 10px;
-  }
+.spt-detail-btn-wrap {
+  display: flex;
+  position: fixed;
+  bottom: 0;
+  background-color: #fc4e2c;
+  width: 100%;
+  z-index: 9990;
+  align-items: center;
+  justify-content: center;
+  padding: 5px 0 2px 0;
+  box-shadow: 0 -1px 3px #f1f1f1;
+}
 
-  .mxmtrl_dt {
-    margin: 5px;
-    font-size: 16px;
-  }
+.spt-detail-btn {
+  color: #ffffff;
+  font-size: 16px;
+  font-weight: bold;
+  width: 45%;
+  text-align: center;
+  padding: 8px;
+}
 
-  .mxqty_dt {
-    font-size: 14px;
-    color: #888888;
-    margin: 0 10px 3px 25px;
-  }
+.spt-detail-border-right {
+  border-right: 1px solid #f0f0f0;
+}
 
+.spt-detail-btn-on {
+  color: #ff7f50;
+}
 
-  .spt-detail-btn-wrap {
-    display: flex;
-    position: fixed;
-    bottom: 0;
-    background-color: #fc4e2c;
-    width: 100%;
-    z-index: 9999;
-    align-items: center;
-    justify-content: center;
-    padding: 5px 0 2px 0;
-    box-shadow: 0 -1px 3px #f1f1f1;
-  }
+.spt-detail-icon {
+  font-size: 23px;
+}
 
-  .spt-detail-btn {
-    color: #ffffff;
-    font-size: 16px;
-    font-weight: bold;
-    width: 45%;
-    text-align: center;
-    padding: 8px
-  }
+.cses-spt-detail-mxdate {
+  margin: 5px 20px;
+  padding: 5px 10px;
+  background-color: #f0eded;
+  border-radius: 15px;
+  font-size: 15px;
+  width: 110px;
+}
 
-  .spt-detail-border-right {
-    border-right: 1px solid #f0f0f0;
-  }
+.cses-spt-check {
+  font-size: 14px;
+  background-color: #f5f5f5;
+  border-radius: 15px;
+  padding: 10px;
+  margin: 10px 20px;
+}
 
-  .spt-detail-btn-on {
-    color: #ff7f50
-  }
+.cses-spt-check-title {
+  padding: 0 0 10px 0;
+}
 
-  .spt-detail-icon {
-    font-size: 23px;
-  }
+.cses-spt-check-wrap {
+  display: flex;
+}
 
-  .cses-spt-detail-mxdate {
-    margin-left: 10px;
-    padding: 2px 10px;
-    background-color: #f0eded;
-    border-radius: 15px;
-    font-size: 15px;
-  }
+.cses-spt-check-mx {
+  text-align: center;
+}
 
-  .cses-spt-check {
-    font-size: 14px;
-    background-color: #f5f5f5;
-    border-radius: 15px;
-    padding: 10px;
-    margin: 10px 20px
-  }
+.check-img-responsive {
+  display: inline-block;
+  height: auto;
+  max-width: 90%;
+}
 
-  .cses-spt-check-title {
-    padding: 0 0 10px 0
-  }
+.cses-spt-detail-mx-ban {
+  position: absolute;
+  right: 30px;
+  background-color: #fc4e2c;
+  color: #ffffff;
+  font-size: 14px;
+  font-weight: bold;
+  padding: 2px 10px;
+  border-radius: 15px;
+}
+
+.cses-spt-detail-font-color-red {
+  color: #fc4e2c;
+}
+
+.cses-spt-detail-bg-color-green {
+  background-color: #02b310;
+}
+
+.cses-spt-ban-reason {
+  background-color: #ffffff;
+  position: fixed;
+  bottom: 0;
+  height: 200px;
+  width: 100%;
+  border-top-left-radius: 15px;
+  border-top-right-radius: 15px;
+  padding: 10px 0;
+  z-index: 9999;
+}
 
-.cses-spt-check-wrap{
+.cses-spt-ban-reason-flex {
   display: flex;
 }
 
-  .cses-spt-check-mx {
-    text-align: center;
-  }
+.cses-spt-ban-reason-edit-warp {
+  width: 100%;
+  text-align: center;
+}
 
-  .check-img-responsive {
-    display: inline-block;
-    height: auto;
-    max-width: 90%;
-  }
+.cses-spt-ban-reason-edit {
+  width: 90%;
+  font-size: 15px;
+  margin: 10px;
+}
+
+.cses-spt-ban-reason-title {
+  margin: 0 0 0 20px;
+  flex: 0 0 90%;
+}
+
+.cses-spt-ban-reason-close {
+  font-size: 16px;
+  color: #818181;
+  position: absolute;
+  right: 20px;
+}
 
+.cses-spt-ban-reason-btn {
+  color: #ffffff;
+  font-size: 16px;
+  font-weight: bold;
+  width: 90%;
+  text-align: center;
+  padding: 8px;
+  background-color: #fc4e2c;
+  border-radius: 20px;
+}
 
-  .cses-spt-check-item {}
+.cses-spt-mask {
+  height: 100%;
+  width: 100%;
+  background-color: #1d1d1dab;
+  position: fixed;
+  top: 0;
+  z-index: 9998;
+}
 
+.cses-spt-detail-mx-swtich-text {
+  position: absolute;
+  right: 85px;
+  color: #666666;
+}
+.cses-spt-detail-mx-swtich {
+  position: absolute;
+  right: 30px;
+  font-size: 50px;
+}
 </style>

src/pages/cses_spt/cses_spt_feedback.vue

@@ -0,0 +1,111 @@
+<template>
+  <div>
+    <div class="todo-tab-warp">
+      <feedback-list></feedback-list>
+      <feedback-list></feedback-list>
+    </div>
+
+    <div class="todo-tab">
+      <div class="todo-tab-btn">
+        <div class="todo-tab-icon">
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-jindu"></use>
+          </svg>
+        </div>
+        <div class="todo-tab-count">12</div>
+        待接收
+      </div>
+       <div class="todo-tab-btn  todo-tab-btn-on">
+        <div class="todo-tab-icon">
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-dengdai"></use>
+          </svg>
+        </div>
+        <div class="todo-tab-count">9</div>
+        待回复
+      </div>     
+      <div class="todo-tab-btn">
+        <div class="todo-tab-icon">
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-yingyongguanli"></use>
+          </svg>
+        </div>
+        全部
+      </div>
+      <div class="todo-tab-btn">
+        <div class="todo-tab-icon">
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-kehu"></use>
+          </svg>
+        </div>
+        我
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import FeedbackList from "./components/feedbacklist";
+  export default {
+    name: 'feedback',
+    components: {
+      FeedbackList
+    }
+  }
+
+</script>
+<style>
+  body {
+    margin: 0;
+    padding: 0;
+    background-color: #eee;
+    font-family: "微软雅黑";
+  }
+
+.todo-tab-warp{
+  margin-bottom: 70px;
+
+}
+  .todo-tab {
+    display: flex;
+    position: fixed;
+    bottom: 0;
+    background-color: #ffffff;
+    width: 100%;
+    z-index: 9999;
+    align-items: center;
+    justify-content: center;
+    padding: 5px 0 2px 0;
+    box-shadow: 0 -1px 3px #f1f1f1
+  }
+
+  .todo-tab-btn {
+    font-size: 13px;
+    width: 25%;
+    text-align: center
+  }
+
+  .todo-tab-btn-on {
+    color: #ff7f50
+  }
+
+  .todo-tab-icon {
+    font-size: 23px;
+  }
+
+  .todo-tab-count {
+    position:absolute;
+    margin-left:16%;
+    bottom: 35px;
+    font-size: 13px;
+    line-height: 15px;
+    width: 15px;
+    font-weight: bold;
+    color: #fff;
+    border-radius: 50%;
+    padding: 3px;
+    text-align: center;
+    background-color: #fc4f4f
+  }
+
+</style>

src/pages/cses_spt/todo.vue

@@ -17,8 +17,17 @@
           </svg>
         </div>
         <div class="todo-tab-count">12</div>
-        待处理
+        待接收
       </div>
+       <div class="todo-tab-btn">
+        <div class="todo-tab-icon">
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-dengdai"></use>
+          </svg>
+        </div>
+        <div class="todo-tab-count">9</div>
+        待回复
+      </div>     
       <div class="todo-tab-btn">
         <div class="todo-tab-icon">
           <svg class="icon" aria-hidden="true">
@@ -76,7 +85,7 @@
 
   .todo-tab-btn {
     font-size: 13px;
-    width: 30%;
+    width: 25%;
     text-align: center
   }
 
@@ -89,9 +98,9 @@
   }
 
   .todo-tab-count {
-    position: fixed;
+    position:absolute;
+    margin-left:16%;
     bottom: 35px;
-    left: 23%;
     font-size: 13px;
     line-height: 15px;
     width: 15px;

src/pages/saletaskdetail.vue

@@ -345,7 +345,7 @@
   }
 
   .bgcolorgreen {
-    background-color: rgb(141, 192, 38);
+    background-color: #8dc026;
   }
 
   .bgcolorblue {

src/pages/setting.vue

@@ -57,7 +57,7 @@
     <div class="setting_liubai"></div>
     <div class="setting_relogin">退出当前帐号</div>
 
-    <!-- <div class="todo-tab">
+    <div class="todo-tab">
       <div class="todo-tab-btn">
         <div class="todo-tab-icon">
           <svg class="icon" aria-hidden="true">
@@ -65,8 +65,17 @@
           </svg>
         </div>
         <div class="todo-tab-count">12</div>
-        待处理
+        待接收
       </div>
+       <div class="todo-tab-btn">
+        <div class="todo-tab-icon">
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-dengdai"></use>
+          </svg>
+        </div>
+        <div class="todo-tab-count">9</div>
+        待回复
+      </div>     
       <div class="todo-tab-btn">
         <div class="todo-tab-icon">
           <svg class="icon" aria-hidden="true">
@@ -75,7 +84,7 @@
         </div>
         全部
       </div>
-      <div class="todo-tab-btn todo-tab-btn-on">
+      <div class="todo-tab-btn   todo-tab-btn-on">
         <div class="todo-tab-icon">
           <svg class="icon" aria-hidden="true">
             <use xlink:href="#icon-kehu"></use>
@@ -83,7 +92,7 @@
         </div>
         我
       </div>
-    </div> -->
+    </div>
   </div>
 </template>
 <script>
@@ -181,7 +190,7 @@
   }
 
 
-    .todo-tab {
+   .todo-tab {
     display: flex;
     position: fixed;
     bottom: 0;
@@ -196,7 +205,7 @@
 
   .todo-tab-btn {
     font-size: 13px;
-    width: 30%;
+    width: 25%;
     text-align: center
   }
 
@@ -209,9 +218,9 @@
   }
 
   .todo-tab-count {
-    position: fixed;
+    position:absolute;
+    margin-left:16%;
     bottom: 35px;
-    left: 23%;
     font-size: 13px;
     line-height: 15px;
     width: 15px;

src/router/index.js

@@ -9,6 +9,7 @@ import Pushlist from '@/pages/pushlist'
 import About from '@/pages/about'
 import CsesSptTodo from '@/pages/cses_spt/todo'
 import CsesSptDetail from '@/pages/cses_spt/cses_spt_detail'
+import CsesSptFeedback from '@/pages/cses_spt/cses_spt_feedback'
 
 Vue.use(Router)
 
@@ -72,7 +73,7 @@ export default new Router({
       name: 'CsesSptTodo',
       component: CsesSptTodo,
       meta: {
-        title: '待处理'
+        title: '待接收'
       }
     },
     {
@@ -82,6 +83,14 @@ export default new Router({
       meta: {
         title: '采购订单详情'
       }
+    },
+    {
+      path: '/csessptfeedback',
+      name: 'CsesSptFeedback',
+      component: CsesSptFeedback,
+      meta: {
+        title: '待回复'
+      }
     }
   ]
 })