(feature)添加了路由跳转动画

public/index.html

@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <link rel="stylesheet" href="//at.alicdn.com/t/font_1325591_1jkuwg8jted.css">
+    <link rel="stylesheet" href="//at.alicdn.com/t/font_1325591_5gekqyv7img.css">
     <!-- <script src="https://d3js.org/d3.v5.min.js"></script> -->
     <title>myViewAdmin</title>
   </head>

src/global.less

@@ -1,2 +1,14 @@
 @import "~iview/src/styles/index.less";
-@import "./theme.less";
+@import "./theme.less";
+
+@keyframes loading-rotate{
+  from{transform:rotate(0)}
+  to{transform:rotate(360deg)}
+}
+
+.loading-animation {
+  font-size: 20px;
+  display: inline-block;
+  -webkit-animation: loading-rotate 2s linear infinite;
+  animation: loading-rotate 2s linear infinite;
+}

src/myview/Card/Card.vue

@@ -0,0 +1,18 @@
+<script>
+import { Card } from 'iview'
+
+export default {
+  name: 'Card',
+  extends: Card,
+  props: {
+    bordered: {
+      type: Boolean,
+      default: false
+    },
+    'dis-hover': {
+      type: Boolean,
+      default: true
+    }
+  }
+}
+</script>

src/myview/Card/index.js

@@ -0,0 +1,3 @@
+import Card from './Card'
+
+export default Card

src/myview/index.js

@@ -2,12 +2,14 @@ import CopyRight from './CopyRight'
 import WhiteSpace from './WhiteSpace'
 import Label from './Label'
 import LabelGroup from './LabelGroup'
+import Card from './Card'
 
 const components = {
   CopyRight,
   WhiteSpace,
   Label,
-  LabelGroup
+  LabelGroup,
+  Card
 }
 
 const myview = {

src/router/index.ts

@@ -2,10 +2,12 @@ import Vue from 'vue'
 import Router from 'vue-router'
 import Index from '@/views/mis/workspace/Index.vue'
 import Login from '@/views/Login.vue'
+import { LoadingBar } from 'iview'
+import store from '../store'
 
 Vue.use(Router)
 
-export default new Router({
+const router:Router = new Router({
   routes: [{
     path: '/',
     name: 'default',
@@ -44,3 +46,18 @@ export default new Router({
   }
   ]
 })
+
+router.beforeEach((to, from, next) => {
+  store.dispatch('LOADINGSTART')
+  LoadingBar.start()
+  setTimeout(next, 1000)
+}) 
+
+router.afterEach((to) => {
+  store.dispatch('LOADINGFINISHED')
+  LoadingBar.finish()
+})
+
+export default router
+
+//# sourceMappingURL=index.js.map

src/store/app.js

@@ -6,7 +6,8 @@ Vue.use(Vuex)
 const state = {
   currentPage: {},
   cachePages: [],
-  expandMisMenu: false
+  expandMisMenu: false,
+  loading: false
 }
 
 const getters = {
@@ -21,13 +22,22 @@ const getters = {
   },
   getExpandMisMenu (state) {
     return state.expandMisMenu
+  },
+  getLoading (state) {
+    return state.loading
   }
 }
 
 const mutations = {
   changeExpandMisMenu (state) {
     let { expandMisMenu } = { ...state }
     state.expandMisMenu = !expandMisMenu
+  },
+  loadingStart (state) {
+    state.loading = true
+  },
+  loadingFinish (state) {
+    state.loading = false
   }
 }
 
@@ -38,6 +48,12 @@ const mutations = {
 const actions = {
   CHANGEEXPANDMISMENU (context) {
     context.commit('changeExpandMisMenu')
+  },
+  LOADINGSTART (context) {
+    context.commit('loadingStart')
+  },
+  LOADINGFINISHED (context) {
+    context.commit('loadingFinish')
   }
 }
 

src/store/index.d.ts

@@ -0,0 +1 @@
+declare var store: any

src/views/mis/MisContainer.vue

@@ -28,7 +28,7 @@
             <Button long @click="handleExit" type="text">退出</Button>
           </el-popover>
         </el-header>
-        <el-main>
+        <el-main element-loading-spinner="iconfont mvloading loading-animation" v-loading="getLoading">
           <mis-tab-navi />
           <router-view v-if="getLogin" />
           <copy-right />
@@ -57,7 +57,7 @@ export default {
     }
   },
   computed: {
-    ...mapGetters(['getLogin', 'getExpandMisMenu'])
+    ...mapGetters(['getLogin', 'getExpandMisMenu', 'getLoading'])
   },
   methods: {
     handleSiderTrigger () {

src/views/mis/det/BaseDetail.vue

@@ -1,12 +1,39 @@
 <template>
   <div class="base-detail">
-    <h1>BaseDetail</h1>
+    <Card>
+      <h3>退款申请</h3>
+      <Row>
+        <Col :xs="24" :sm="24" :md="12" :lg="8">取货单号：1000000000</Col>
+        <Col :xs="24" :sm="24" :md="12" :lg="8">状态：已取货</Col>
+        <Col :xs="24" :sm="24" :md="12" :lg="8">销售单号：12341234</Col>
+        <Col :xs="24" :sm="24" :md="12" :lg="8">子订单：32143214</Col>
+      </Row>
+      <Divider />
+      <h3>用户信息</h3>
+      <Row>
+        <Col :xs="24" :sm="24" :md="12" :lg="8">用户姓名：myview admin</Col>
+        <Col :xs="24" :sm="24" :md="12" :lg="8">联系电话：1810000000000</Col>
+        <Col :xs="24" :sm="24" :md="12" :lg="8">常用快递：顺丰快递</Col>
+        <Col :xs="24" :sm="24" :md="12" :lg="8">取货地址：这里显示的是详细的测试地址</Col>
+        <Col :xs="24" :sm="24" :md="12" :lg="8">备注：无</Col>
+      </Row>
+      <Divider />
+      <h3>退货商品</h3>
+      <return-goods/>
+      <h3>退货进度</h3>
+      <return-goods/>
+    </Card>
   </div>
 </template>
 
 <script>
+import ReturnGoods from './components/ReturnGoods'
+
 export default {
   name: 'BaseDetail',
+  components: {
+    ReturnGoods
+  },
   data () {
     return {}
   }
@@ -19,6 +46,7 @@ export default {
   min-height: 75vh;
   padding: 0 @default-gutter;
   margin-top: 44px;
+  line-height: 40px;
 }
 </style>
 

src/views/mis/det/components/ReturnGoods.vue

@@ -0,0 +1,81 @@
+<template>
+  <div>
+    <Table highlight-row ref="currentRowTable" :border="false" :columns="columns" :data="data"></Table>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      columns: [
+        {
+          title: "商品编号",
+          key: "goodid"
+        },
+        {
+          title: "商品名称",
+          key: "goodname"
+        },
+        {
+          title: "商品条码",
+          key: "goodcode"
+        },
+        {
+          title: "单价",
+          key: "goodprice",
+          render: (h, params) => {
+            let _goodprice = Number(params.row.goodprice).toFixed(2)
+            return h('span', _goodprice)
+          }
+        },
+        {
+          title: '数量（件）',
+          key: 'goodnumber'
+        },
+        {
+          title: '全额',
+          key: 'goodtotal',
+          render: (h, params) => {
+            let _goodtotal = Number(params.row.goodtotal).toFixed(2)
+            return h('span', _goodtotal)
+          }
+        }
+      ],
+      data: [
+        {
+          goodid: "1234561",
+          goodname: '矿泉水550ml',
+          goodcode: '12341234213',
+          goodprice: 2.00,
+          goodnumber: 1,
+          goodtotal: 2.00
+        },
+        {
+          goodid: "1234562",
+          goodname: '矿泉水550ml',
+          goodcode: '12341234213',
+          goodprice: 2.00,
+          goodnumber: 1,
+          goodtotal: 2.00
+        },
+        {
+          goodid: "1234563",
+          goodname: '矿泉水550ml',
+          goodcode: '12341234213',
+          goodprice: 2.00,
+          goodnumber: 1,
+          goodtotal: 2.00
+        },
+        {
+          goodid: "1234564",
+          goodname: '矿泉水550ml',
+          goodcode: '12341234213',
+          goodprice: 2.00,
+          goodnumber: 1,
+          goodtotal: 2.00
+        },
+      ]
+    };
+  }
+};
+</script>

test.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <link rel="stylesheet" href="https://at.alicdn.com/t/font_1325591_5gekqyv7img.css">
+  <title>Document</title>
+  <style type="text/css">
+    @keyframes rotating{
+      from{transform:rotate(0)}
+      to{transform:rotate(360deg)}
+    }
+
+    .square {
+      width: 50px;
+      height: 50px;
+      background-color: red;
+      text-align: center;
+      line-height: 50px;
+      display: inline-block;
+    }
+
+    .loading {
+      display: inline-block;
+      animation:rotating 1.2s linear infinite
+    }
+  </style>
+</head>
+<body>
+  <div class="square">
+    <i class="loading iconfont mvloading"/>
+  </div>
+</body>
+</html>