1.修改订单详情页面

src/api/myOrder.js

@@ -8,6 +8,15 @@ export function getMyOrderList(params) {
     loading: true
   })
 }
+// 配送信息查询
+export function getDeliveryOrder(params) {
+  return fetch({
+    url: '/OrderLife/DeliveryOrder',
+    method: 'post',
+    data: params,
+    loading: true
+  })
+}
 // 获取订单发票列表
 export function getOrderInvoiceList(params) {
   return fetch({

src/views/myOrder/components/goodsSimpleItem.vue

 <template>
-  <div class="goods-simple-content">
-    <div class="goods-company">
-      <span class="company-name">{{item.company}}</span>
-      <span class="state-type order-type-tip-cold">{{item.goodsType}}</span>
-    </div>
+  <div class="goods-simple-content ">
+<!--    <div class="goods-company">-->
+<!--      <span class="company-name">{{item.company}}</span>-->
+<!--      <span class="state-type order-type-tip-cold">{{item.goodsType}}</span>-->
+<!--    </div>-->
     <div class="goods-info">
       <van-icon :name="goodsIcon.pill" />
       <div class="goods-info-text">
-        <div class="goods-name">{{ item.goodsName }}</div>
+        <div class="goods-name">{{ calGoodsName() }}</div>
         <div class="goods-num-price">
-          ¥<span >{{item.goodsPrice}}</span>
-          共{{item.goodsNum}}件
+          <span class="price-num">¥{{item.taxPrice}}</span>
+          <span class="pkg-num">订单数量: {{item.packageNum}}</span>
         </div>
       </div>
     </div>
@@ -33,13 +33,25 @@ export default {
       type: Object,
       default: () => {
         return {
-          company: '上药控股新药分公司',
-          goodsType: '冷',
-          goodsName: '【132521】阿西匹林/0.25g*200s/浙江浙江浙江浙江浙江浙江',
-          goodsPrice: '10.5',
-          goodsNum: '8'
+          company: '',
+          goodsType: '',
+          goodsCode: '',
+          goodsId: '',
+          goodsName: '',
+          goodsSpec: '',
+          taxPrice: '',
+          packageNum: '',
+          manufacturer: ''
+        }
       }
     }
+  },
+  methods: {
+    calGoodsName() {
+      return '【' + this.item.goodsCode + '】' +
+        this.item.goodsName +
+        '/' + this.item.goodsSpec +
+        '/' + this.item.manufacturer
     }
   }
 }
@@ -48,29 +60,29 @@ export default {
 <style lang="scss" scoped>
   .goods-simple-content {
     border-bottom: 1px solid #eeeeee;
-    padding:0 10px 5px;
-    .goods-company {
-      margin-top:5px;
-      display: flex;
-      align-items: center;
-      .company-name{
-        font-size: 12px;
-        font-weight:650;
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        width: 70%;
-        display: inline-block;
-      }
-      .state-type {
-        display: inline-block;
-        line-height: 16px;
-        transform: scale(0.85);
-        height: 16px;
-        padding: 0 6px;
-        margin-left: 15px;
-      }
-    }
+    padding:10px;
+    //.goods-company {
+    //  margin-top:5px;
+    //  display: flex;
+    //  align-items: center;
+    //  .company-name{
+    //    font-size: 12px;
+    //    font-weight:650;
+    //    overflow: hidden;
+    //    white-space: nowrap;
+    //    text-overflow: ellipsis;
+    //    width: 70%;
+    //    display: inline-block;
+    //  }
+    //  .state-type {
+    //    display: inline-block;
+    //    line-height: 16px;
+    //    transform: scale(0.85);
+    //    height: 16px;
+    //    padding: 0 6px;
+    //    margin-left: 15px;
+    //  }
+    //}
     .goods-info {
       display: flex;
       margin-top: 10px;
@@ -78,6 +90,7 @@ export default {
         font-size:30px;
       }
       .goods-info-text {
+        margin-left: 5px;
         flex: 1;
         width: 80%;
         .goods-name {
@@ -86,11 +99,16 @@ export default {
           white-space: nowrap;
         }
         .goods-num-price {
+          color:$txtBlack;
           display: flex;
-          margin: 6px 0 0 10px;
-          span {
+          margin-top: 6px;
+          .price-num {
             flex: 1;
-            color:red;
+            //color:red;
+          }
+          .pkg-num {
+            color:$txtGray9;
+            transform: scale(0.9);
           }
         }
       }

src/views/myOrder/detail/orderDetail.vue

@@ -13,10 +13,10 @@
         <van-icon name="orders-o" class="order-icon info-icon"/>
         <div class="info-text">
           <div style="display: flex">
-            <span class="order-code">订单号: DDH2354323463463</span>
+            <span class="order-code">{{detailData.orderNo}}</span>
             <span class="order-copy"><van-icon :name="icons.copy"/>复制</span>
           </div>
-          下单时间: 2020-11-10 18:09:30
+          下单时间: {{detailData.orderDate}}
         </div>
       </div>
       <div class="info-state">
@@ -40,27 +40,25 @@
             <span class="logistics-speak">您的物流单：YDH4236272752430已从上海市绥德路发出 </span>
             <van-icon class="logistics-arrow" name="arrow"/>
           </div>
-          <span class="logistics-time">2020-11-10 18:09:30</span>
+          <div class="logistics-time">2020-11-10 18:09:30</div>
         </div>
       </div>
       <div class="location-content">
         <van-icon name="location-o" class="order-icon location-icon"/>
         <div class="location-text">
-          华氏大药房 177****9133
-          <br/>
-          上海市浦东新区永春路6号
+          <div class="location-client">{{detailData.clientName}}</div>
+          <div class="location-receive">{{detailData.shippingAdress}}</div>
         </div>
       </div>
     </div>
     <!--  订单商品  -->
-    <div class="order-common order-goods">
     <div class="goods-all" @click="openPager('goodsInfo')">
-        <span class="all-title">商品信息</span>
-        全部
+      <span class="all-title">商品明细</span>
+      <span class="title-more">更多</span>
       <van-icon class="title-arrow" name="arrow"/>
     </div>
-      <goods-simple-item/>
-      <goods-simple-item/>
+    <div class="order-common " style="padding-top: 0">
+      <goods-simple-item v-for="item in detailData.goodsInfos" :key="item.goodsId" :item="item"/>
     </div>
     <!-- 订单发票信息 -->
     <div class="order-common order-invoice">
@@ -79,12 +77,14 @@ import OrderStateItem from '../components/orderStateItem'
 import OrderState from '../components/orderState'
 import GoodsSimpleItem from '../components/goodsSimpleItem'
 import InvoiceSimpleItem from '../components/invoiceSimpleItem'
+import {getMyOrderList, getDeliveryOrder} from '@/api/myOrder'
 
 export default {
   name: 'orderDetail',
   components: {InvoiceSimpleItem, GoodsSimpleItem, OrderState, OrderStateItem},
   data() {
     return {
+      detailData: {},
       icons: {
         inDelivery: require('@/assets/img/u546.svg'),
         copy: require('@/assets/img/u533.svg')
@@ -109,7 +109,9 @@ export default {
     // 当页面销毁必须要移除这个事件，vue不刷新页面，不移除会重复执行这个事件
     window.removeEventListener('popstate', this.onBrowserBack, false)
   },
-  mounted() {},
+  mounted() {
+    this.getOrderDetail()
+  },
   destroyed() {
   },
   methods: {
@@ -124,6 +126,54 @@ export default {
     },
     openLogistics() {
       this.openPager('logisticsDetail')
+    },
+    getOrderDetail() {
+      let params = {
+        'businessType': '',
+        'clientID': [],
+        'endDate': '',
+        'goodsCode': '',
+        'goodsDesc': '',
+        'goodsId': '',
+        'goodsName': '',
+        'goodsSpec': '',
+        'isDelivered': '',
+        'isInvoice': '',
+        'isWeb': '',
+        'manufacturer': '',
+        'mdmClientCode': '',
+        'order': '',
+        'orderId': '19965720', // 19977352;19965720
+        'orderNo': '',
+        'orderStatusCode': '',
+        'orderType': '',
+        'pageNum': 1,
+        'pageSize': 20,
+        'shippingAdress': '',
+        'sort': '',
+        'sourceDb': 'SHYY',
+        'sourceOrderNo': '',
+        'sourceSystem': '',
+        'startDate': '',
+        'supplierId': []
+      }
+      getMyOrderList(params).then(res => {
+        console.log(res)
+        if (res.code === 200 && res.data && res.data.code === '00000' &&
+          res.data.entity && res.data.entity.orderList && res.data.entity.orderList.length > 0) {
+          this.detailData = res.data.entity.orderList[0]
+        } else {
+          console.log('请求失败')
+        }
+      }).catch(err => {
+        console.log(err)
+      })
+
+      // getDeliveryOrder(params).then(res => {
+      //   console.log(res)
+      // }).catch(err => {
+      //   console.log(err)
+      // })
     }
   }
 }
@@ -251,6 +301,7 @@ export default {
         /*文字*/
         .logistics-speak {
           margin-right: 20px;
+          font-weight: bold;
           font-size: 12px;
         }
 
@@ -261,6 +312,7 @@ export default {
         }
 
         .logistics-time {
+          margin-top:4px;
           font-size: 12px;
           color: #7f7f7f;
         }
@@ -279,41 +331,46 @@ export default {
       /*物流说明*/
       .location-text {
         margin-left: 8px;
-        color: #555555;
-        flex: 1;
-
-        .location-phone {
 
+        .location-client {
+          font-weight: bold;
+          font-size: 12px;
         }
 
         .location-receive {
-
+          margin-top: 4px;
+          font-size: 12px;
+          //transform: scale(0.9);
+          color: #7f7f7f;
         }
       }
     }
   }
 
   /*订单商品*/
-  .order-goods {
   .goods-all {
       display: flex;
       align-items: center;
-      margin-bottom: 10px;
+      margin: 15px 15px 8px 15px;
 
       .all-title {
         flex: 1;
-        font-size: 14px;
+        font-size: 16px;
         color: #000;
-        font-weight: 400;
+        font-weight: bold;
+      }
+
+      .title-more {
+        color:$txtGray9
       }
 
       .title-arrow {
+        color:$txtGray9;
         font-size: 15px;
         //margin-top: 1px;
         margin-left: 6px;
       }
   }
-  }
 
   /*订单发票*/
   .order-invoice {

src/views/todo/components/CanvasTestItem.vue

+<template>
+  <canvas id="canvasView" style="width:100%;height:300px"></canvas>
+</template>
+
+<script>
+export default {
+  name: 'CanvasTestItem',
+  data () {
+    return {
+      context: {},
+      radius: 400
+    }
+  },
+  mounted() {
+    let canvas = document.querySelector('#canvasView')
+    this.context = canvas.getContext('2d')
+    // this.drawText()
+    this.drawCircleText('测试文字，加油！！！', 270, 90)
+  },
+  methods: {
+    drawText() {
+      this.context.beginPath()
+      this.context.font = '18px STheiti, SimHei'
+      this.context.fillText('测试cesssssds', 130, 30)
+      this.context.moveTo(80, 60)
+      this.context.quadraticCurveTo(140, 30, 200, 60)
+      this.context.stroke()
+      // this.context.closePath()
+    },
+    drawCircleText(str, startAngle, endAngle) {
+      let chartRadius = (startAngle - endAngle) / (str.length)
+      // let index = 0
+      console.log(chartRadius)
+      // while(index < str.length){
+        // this.context
+      // }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/todo/testd.vue

@@ -57,7 +57,8 @@
       </van-row>
    </div>
    <div class="maMapView">
-     <map-view/>
+<!--     <map-view/>-->
+     <CanvasTestItem />
    </div>
   </div>
 </template>
@@ -68,9 +69,11 @@ import SearchPost from '@/components/SearchPost.vue'
 import TimeChoose from '@/components/TimeChoose.vue'
 import MapView from '@/components/MapView.vue'
 import { GetQueryStringCookie } from '@/utils/common'
+import CanvasTestItem from './components/CanvasTestItem'
 export default {
   name: 'TodoList',
   components: {
+    CanvasTestItem,
     SearchPost,
     TimeChoose,
     MapView