我的订单高级搜索刷新列表

41ce53a8 · xiejb · 3e6c24b5 · 01cf5180 · 41ce53a8 · 41ce53a8
Commit 41ce53a8 authored Mar 10, 2021 by xiejb
10 changed files
--- a/src/assets/styles/variable.scss
+++ b/src/assets/styles/variable.scss
@@ -29,8 +29,14 @@ $arrowC:#747782;
 $txtBlack:#23262A;
 $txtGray:#8792A4;

+// 线颜色
+$line: #eeeeee;
+// 文字色
+$txtGray9: #999999;
+$txtGrayL: #D3D3D3;
 //订单状态颜色
 $orderReturn:#D9001B;
 $orderJm:#02a7f0;
 $orderCold:#4b7902;

+
--- a/src/components/MapView.vue
+++ b/src/components/MapView.vue
 <template>
-  <div id="mapView">
-    <!-- <div id="container" style="width:100%;height:400px"></div> -->
+  <div class="amap-container">
    <el-amap
-      :plugin="plugin"
-      :amap-manager="amapManager"
-      :zoom="zoom"
-      :center="center"
-      vid="amapDemo"
-      ref="reds"
-      style="width:100vw;height:80vh"
-      :events="events"
+      vid="amap-order"
+      class = "amap-box"
+      :resizeEnable="mapInfo.resizeEnable"
+      :amap-manager="mapInfo.amapManager"
+      :zoom="mapInfo.zoom"
+      :center="mapInfo.center"
+      :events="mapInfo.events"
    ></el-amap>
  </div>
 </template>

 <script>
-import {AMapManager} from 'vue-amap'
-import VueAMap from 'vue-amap'
-// var map = amapManager.getMap();
-import AMap from 'AMap'
 // 引入高德地图ui组件
-import {lazyAMapApiLoaderInstance} from 'vue-amap'
-
+// eslint-disable-next-line import/no-duplicates
+// import {lazyAMapApiLoaderInstance} from 'vue-amap'
+// eslint-disable-next-line import/no-duplicates
+import VueAMap from 'vue-amap'
+//
 let amapManager = new VueAMap.AMapManager()

 export default {
@@ -33,52 +30,25 @@ export default {
    }
  },
  data() {
-    let _obj = this
    return {
-      status: this.value,
-      amapManager,
-      center: [116.379028, 39.865042],
-      plugin: [
-        {
-          pName: 'Scale',
-          events: {
-            init(instance) {
-              console.log(instance)
-            }
-          }
-        }
-      ],
-      zoom: 13,
-      events: {
-        init(o) {
-          // _obj.createMap();
-          o.setMapStyle('amap://styles/macaron') // 自定义的高德地图的样式，我选的是马卡龙
-          let marker = new AMap.Marker({ // 点图标
-            position: [116.379028, 39.865042]
-          })
-          // o.setZoomAndCenter(16, [116.379028, 39.865042])
-          marker.setMap(o)
-          o.plugin(['AMap.Driving'], function () {
-            var driving = new AMap.Driving({
-              map: o,
-              showTraffic: false // 是否显示拥堵状态
+      mapInfo: {
+        resizeEnable: true, // 是否监控地图容器尺寸变化
+        zoom: 13, // 地图缩放
+        amapManager,
+        center: [116.379028, 39.865042],
+        events: {
+          init(o) {
+            // lazyAMapApiLoaderInstance.load().then(() => {
+            //
+            // })
+            // eslint-disable-next-line no-undef
+            let marker = new AMap.Marker({ // 点图标
+              position: [116.379028, 39.865042]
            })
-            // 地点关键字+ 驾车路线规划
-            driving.search(new AMap.LngLat(116.379028, 39.865042), new AMap.LngLat(116.427281, 39.903719), function (status, result) {
-              // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
-              if (status === 'complete') {
-                console.log('绘制驾车路线完成')
-              } else {
-                console.log('获取驾车数据失败：' + result)
-              }
-            }
-            )
-            o.addControl(driving)
-          })
+            marker.setMap(o)
+          }
        }
-      },
-      marker: {},
-      map: {} // 保存地图对象
+      }
    }
  },
  watch: {
@@ -87,19 +57,8 @@ export default {
    }
  },
  mounted() {
-    this.createMapOne()
  },
  methods: {
-    // 创建地图
-    createMapOne() {
-
-    },
-    createMap() {
-      o.setMapStyle('amap://styles/macaron') // 自定义的高德地图的样式，我选的是马卡龙
-      let marker = new AMap.Marker({ // 点图标
-        position: [116.379028, 39.865042]
-      })
-    },
    action() {
      this.$emit('action', '')
    }
@@ -107,7 +66,8 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-#MapView {
-  // height: 44px;
+.amap-container {
+   height: 300px;
+  width: 100%;
 }
 </style>
--- a/src/main.js
+++ b/src/main.js
@@ -14,7 +14,7 @@ Vue.use(VueAMap)
 VueAMap.initAMapApiLoader({
  key: '061c2a328572b71e2b26d9dc1a0cc703',
  plugin: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PlaceSearch', 'AMap.Geolocation', 'AMap.Geocoder'],
-  v: '1.4.4',
+  v: '2.0',
  uiVersion: '1.0'
 })
 // import './assets/styles/variable.scss'
@@ -47,3 +47,5 @@ new Vue({
  store,
  render: h => h(App)
 })
+// 监听
+Vue.prototype.$EventBus = new Vue();
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -15,7 +15,7 @@ Vue.use(Router)
 const routerList = [
  {
    path: '/',
-    redirect: '/todo'
+    redirect: '/myOrder'
  },
  ...todo,
  ...saleSituation,

--- a/src/views/myOrder/components/logisticsStep.vue
+++ b/src/views/myOrder/components/logisticsStep.vue
+<template>
+  <div id="stepLayout">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'logisticsStep',
+  props: {
+    active: {
+      type: Number,
+      default: 0
+    }
+  },
+  mounted () {
+    this.calcStepLine()
+  },
+  methods: {
+    calcStepLine () {
+      let lineEle = document.getElementsByClassName('state-line')
+      if (lineEle.length > 0) {
+        lineEle[lineEle.length - 1].style.width = '0px'
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>
--- a/src/views/myOrder/components/stepItem.vue
+++ b/src/views/myOrder/components/stepItem.vue
+<template>
+  <div class="step-container" :class="'type__'+stepState">
+    <div class="step-time ">
+      <div class="step-date">{{stepInfo.date}}</div>
+      <div class="step-hours">{{stepInfo.hours}}</div>
+    </div>
+    <div class="step-tips">
+      <van-icon class="state-icon" name="smile" />
+      <div class="state-line" ></div>
+    </div>
+    <div class="step-content ">
+      <div class="step-type">{{stepInfo.type}}</div>
+      <div class="step-text">{{stepInfo.text}}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'stepItem',
+  data () {
+    return {
+      state: 'normal'
+    }
+  },
+  props: {
+    stepInfo: {
+      type: Object,
+      default: () => {
+        return {
+          date: '2020-03-10',
+          hours: '10:08:08',
+          type: '状态名称',
+          text: '内容信息'
+        }
+      }
+    }
+  },
+  computed: {
+    stepState: function () {
+      return this.$parent.$children[0]._uid === this._uid ? 'normal' : 'history'
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .step-container {
+    display: flex;
+    align-items: center;
+    height:60px;
+    //border-bottom: 1px solid $line;
+    /*时间 选中*/
+    .step-time {
+      flex: 1.5;
+      text-align: center;
+      .step-date {
+        color: $txtGray9;
+      }
+      .step-hours {
+        font-size: 14px;
+        font-weight: bold;
+        color: $txtBlack;
+      }
+    }
+    /*图标 连接线*/
+    .step-tips {
+      flex: 0.5;
+      font-size: 18px;
+      position:relative;
+      text-align: center;
+      margin-top:-12px;
+
+      .state-icon{
+        z-index: 100;
+        color: $main1
+      }
+
+      .state-line {
+        position: absolute;
+        z-index:1;
+        left: 0;
+        right: 0;
+        top: 16px;
+        width: 2px;
+        height: 50px;
+        margin: 0 auto;
+        background-size: 2px 11px;
+        background-repeat: repeat-y;
+        background-image: linear-gradient(
+            0deg,
+            $txtGrayL 0%,
+            $txtGrayL 50%,
+            transparent 50%
+        );
+      }
+    }
+    /*内容 选中*/
+    .step-content {
+      flex: 5;
+      margin-left: 2px;
+      .step-type {
+        font-weight: bold;
+        font-size: 15px;
+      }
+      .step-text {
+        font-size: 12px;
+        color: $txtGray9;
+      }
+    }
+  }
+  /*非选中 文字颜色*/
+  .type__history {
+    .step-time {
+      .step-date {
+        color: $txtGrayL;
+      }
+      .step-hours {
+        color: $txtGrayL;
+      }
+    }
+    .step-tips {
+      .state-icon {
+        color: $txtGrayL
+      }
+    }
+    .step-content {
+      .step-type {
+        color: $txtGrayL;
+      }
+
+      .step-text {
+        color: $txtGrayL;
+      }
+    }
+  }
+</style>
--- a/src/views/myOrder/detail/logisticsDetail.vue
+++ b/src/views/myOrder/detail/logisticsDetail.vue
 <template>
  <div class="logistics-content">
    <map-view/>
-    <div class="logistics-head">
-      <van-icon :name="icons.logo"/>
-      <span>承运商: 绥德库</span>
-      <span>市内</span>
+    <div class="logistics-header">
+      <div class="header-title">
+        <van-icon class="logistic-logo" :name="icons.logo"/>
+        <span class="logistic-name">承运商: <span class="logistic-values">绥德库</span></span>
+        <span class="logistic-type">市内</span>
+      </div>
+      <div class="header-order-info" style="margin-top: 8px">运单号: <span class="logistic-values">3902202102250062</span></div>
+      <div class="header-order-info" style="margin-top:2px;margin-bottom:8px">配送人: <span class="logistic-values">罗平行 13300992222</span></div>
+    </div>
+    <div class="logistics-step-line">
+      <logistics-step>
+        <step-item v-for="(item, index) in stepList" :stepInfo = item :key="index"/>
+      </logistics-step>
    </div>
-    <div >运单号: 3902202102250062</div>
-    <div >配送人: 罗平行 13300992222</div>
-
  </div>
 </template>

 <script>
 import MapView from '../../../components/MapView'
+import LogisticsStep from '../components/logisticsStep'
+import StepItem from '../components/stepItem'
 export default {
  name: 'logisticsDetail',
-  components: {MapView},
+  components: {StepItem, LogisticsStep, MapView},
  data () {
    return {
      icons: {
        logo: require('@/assets/img/u48.png')
-      }
+      },
+      stepList: [
+        {
+          date: '2020-03-10',
+          hours: '10:08:12',
+          type: '已签收',
+          text: '您的订单已完成签收，期待再次为您服务。'
+        },
+        {
+          date: '2020-03-10',
+          hours: '10:08:11',
+          type: '运输中',
+          text: '乘运商已提货，待运输。'
+        },
+        {
+          date: '2020-03-10',
+          hours: '10:08:10',
+          type: '运输中',
+          text: '您的订单正在配送途中，请耐心等待。'
+        },
+        {
+          date: '2020-03-10',
+          hours: '10:08:09',
+          type: '已发货',
+          text: '正在出库中...'
+        },
+        {
+          date: '2020-03-10',
+          hours: '10:08:08',
+          type: '已下单',
+          text: '正在为您积极打包'
+        }
+      ]
    }
  },
  mounted() {
@@ -32,13 +72,57 @@ export default {
      rightIcon: false,
      title: '',
      leftText: '物流详情',
-      leftClick: null,
+      leftClick: this.onBrowserBack,
      rightClick: null
    })
+    window.addEventListener('popstate', this.onBrowserBack, false)
+  },
+  destroyed() {
+    // 当页面销毁必须要移除这个事件，vue不刷新页面，不移除会重复执行这个事件
+    window.removeEventListener('popstate', this.onBrowserBack, false)
+  },
+  methods: {
+    onBrowserBack() {
+      this.$router.go(-1)
+    }
  }
 }
 </script>

 <style lang="scss" scoped>
-
+  .logistics-content {
+    background-color: #fff;
+    height: calc(100vh - 46px);
+    overflow: scroll;
+    .logistics-header {
+      border-bottom: 1px solid $line;
+      padding: 10px;
+      .header-title{
+        display: flex;
+        align-items: center;
+        .logistic-logo {
+          font-size: 22px;
+          margin-right: 6px;
+        }
+        .logistic-name {
+          font-size:13px;
+          font-weight: bold;
+          flex: 1;
+        }
+        .logistic-type {
+          border: 1px solid $orderJm;
+          color: $orderJm;
+          padding: 0 8px;
+          transform: scale(0.8);
+        }
+      }
+      .header-order-info {
+        font-size: 13px;
+        margin-left: 28px;
+      }
+      .logistic-values {
+        margin-left:10px;
+      }
+    }
+  }
 </style>
--- a/src/views/myOrder/detail/orderDetail.vue
+++ b/src/views/myOrder/detail/orderDetail.vue
@@ -33,7 +33,7 @@
    </div>
    <!--  订单物流信息  -->
    <div class="order-common order-logistics">
-      <div class="logistics-content">
+      <div class="logistics-content" @click="openPager('logisticsDetail')">
        <van-icon :name="icons.inDelivery" class="order-icon logistics-icon"/>
        <div class="logistics-text">
          <div style="display:flex">
@@ -54,7 +54,7 @@
    </div>
    <!--  订单商品  -->
    <div class="order-common order-goods">
-      <div class="goods-all">
+      <div class="goods-all" @click="openPager('goodsInfo')">
        <span class="all-title">商品信息</span>
        全部
        <van-icon class="title-arrow" name="arrow"/>
@@ -64,7 +64,7 @@
    </div>
    <!-- 订单发票信息 -->
    <div class="order-common order-invoice">
-      <div class="invoice-all">
+      <div class="invoice-all" @click="openPager('myInvoice')">
        <span class="all-title">发票信息</span>
        全部
        <van-icon class="title-arrow" name="arrow"/>
@@ -111,6 +111,15 @@ export default {
  methods: {
    onBrowserBack() {
      this.$router.go(-1)
+    },
+    openPager(path) {
+      this.$router.push({
+        path: path,
+        query: this.$store.state.linkInfo
+      })
+    },
+    openLogistics() {
+      this.openPager('logisticsDetail')
    }
  }
 }

--- a/src/views/myOrder/index.vue
+++ b/src/views/myOrder/index.vue
@@ -99,21 +99,21 @@ export default {
    orderItemAction(model) {
      console.log(model)
      switch (true) {
-        case model.actionType === "invoice":
-          //查看发票
-          this.gotoOrderInvoice(model);
-          break;
-        case model.actionType === "logistics":
+        case model.actionType === 'invoice':
+          // 查看发票
+          this.gotoOrderInvoice(model)
+          break
+        case model.actionType === 'logistics':
          // 查看物流
-          break;
-        case model.actionType === "clearance":
+          break
+        case model.actionType === 'clearance':
          // 清货单
          this.gotoOrderClearance(model)
-          break;
-        case model.actionType === "details":
+          break
+        case model.actionType === 'details':
          // 订单详情
          this.gotoOrderDetail(model)
-          break;
+          break
      }
    },
    // 查看订单详情
@@ -121,7 +121,7 @@ export default {
      this.$router.push({
        path: '/orderDetail',
        query: this.$store.state.linkInfo
-      });
+      })
    },
    // 查看发票
    gotoOrderInvoice (model) {
@@ -129,14 +129,14 @@ export default {
      this.$router.push({
        path: '/orderInvoice',
        query: this.$store.state.linkInfo
-      });
+      })
    },
    // 查看 清货单
    gotoOrderClearance(model) {
      this.$router.push({
        path: '/clearance',
        query: this.$store.state.linkInfo
-      });
+      })
    },
    onBrowserBack() {
      if (this.moreSearchShow) {
@@ -159,14 +159,16 @@ export default {
      this.tabsTitleData()
      this.$nextTick(() => {
        this.activeTab = 'all'
-        console.log(Object.keys(this.$refs))
-        this.$refs.all[0].httpAction(this.moreSearchInfo)
+        // console.log(Object.keys(this.$refs))
+        // this.$refs.all[0].httpAction(this.moreSearchInfo)
      })
      this.moreSearchInfo = JSON.parse(JSON.stringify(data))
+      this.$EventBus.$emit('myOrderMoreSearch', this.moreSearchInfo)
    },
    // 高级搜索取消
    moreSearchClean(data) {
      this.moreSearchInfo = JSON.parse(JSON.stringify(data))
+      this.$EventBus.$emit('myOrderMoreSearch', this.moreSearchInfo)
    },
    /// 处理tabsTitle
    tabsTitleData() {

--- a/src/views/myOrder/myOrderList.vue
+++ b/src/views/myOrder/myOrderList.vue
@@ -110,6 +110,10 @@ export default {
  },
  mounted() {
    // this.onLoad()
+    this.$EventBus.$on('myOrderMoreSearch', (model) => {
+      // console.log(model)
+      this.onRefresh()
+    })
  },
  watch: {
    activeTab(val) {