05/31

.idea/misc.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="JavaScriptSettings">
+    <option name="languageLevel" value="ES6" />
+  </component>
+</project>

.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/tutuxiang-desktop.iml" filepath="$PROJECT_DIR$/.idea/tutuxiang-desktop.iml" />
+    </modules>
+  </component>
+</project>

.idea/tutuxiang-desktop.iml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="JAVA_MODULE" version="4">
+  <component name="NewModuleRootManager" inherit-compiler-output="true">
+    <exclude-output />
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>

.idea/workspace.xml

@@ -0,0 +1,131 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ChangeListManager">
+    <list default="true" id="06598a73-ffac-4b32-aa8d-2229d8318b4b" name="Default Changelist" comment="">
+      <change beforePath="$PROJECT_DIR$/src/renderer/components/Aside.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/renderer/components/Aside.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/renderer/main.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/renderer/main.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/renderer/pages/Booking/OrderBookingStep2.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/renderer/pages/Booking/OrderBookingStep2.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/renderer/pages/Order/TransferFinish.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/renderer/pages/OrderBooking.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/renderer/pages/OrderBookingStep1.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/renderer/pages/OrderBookingStep2.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/renderer/router/index.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/renderer/router/index.js" afterDir="false" />
+    </list>
+    <ignored path="$PROJECT_DIR$/dist/" />
+    <option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
+    <option name="SHOW_DIALOG" value="false" />
+    <option name="HIGHLIGHT_CONFLICTS" value="true" />
+    <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
+    <option name="LAST_RESOLUTION" value="IGNORE" />
+  </component>
+  <component name="Git.Settings">
+    <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
+  </component>
+  <component name="ProjectFrameBounds" extendedState="6">
+    <option name="x" value="-76" />
+    <option name="y" value="144" />
+    <option name="width" value="1936" />
+    <option name="height" value="1056" />
+  </component>
+  <component name="ProjectView">
+    <navigator proportions="" version="1">
+      <foldersAlwaysOnTop value="true" />
+    </navigator>
+    <panes>
+      <pane id="Scope" />
+      <pane id="ProjectPane">
+        <subPane>
+          <expand>
+            <path>
+              <item name="tutuxiang-desktop" type="b2602c69:ProjectViewProjectNode" />
+              <item name="tutuxiang-desktop" type="462c0819:PsiDirectoryNode" />
+            </path>
+          </expand>
+          <select />
+        </subPane>
+      </pane>
+      <pane id="PackagesPane" />
+    </panes>
+  </component>
+  <component name="PropertiesComponent">
+    <property name="WebServerToolWindowFactoryState" value="false" />
+    <property name="aspect.path.notification.shown" value="true" />
+    <property name="last_opened_file_path" value="$PROJECT_DIR$/../tutuxiang" />
+    <property name="nodejs_interpreter_path.stuck_in_default_project" value="undefined stuck path" />
+    <property name="nodejs_npm_path_reset_for_default_project" value="true" />
+    <property name="settings.editor.selected.configurable" value="preferences.pathVariables" />
+  </component>
+  <component name="RunDashboard">
+    <option name="ruleStates">
+      <list>
+        <RuleState>
+          <option name="name" value="ConfigurationTypeDashboardGroupingRule" />
+        </RuleState>
+        <RuleState>
+          <option name="name" value="StatusDashboardGroupingRule" />
+        </RuleState>
+      </list>
+    </option>
+  </component>
+  <component name="TaskManager">
+    <task active="true" id="Default" summary="Default task">
+      <changelist id="06598a73-ffac-4b32-aa8d-2229d8318b4b" name="Default Changelist" comment="" />
+      <created>1559099606684</created>
+      <option name="number" value="Default" />
+      <option name="presentableId" value="Default" />
+      <updated>1559099606684</updated>
+      <workItem from="1559099608236" duration="19000" />
+    </task>
+    <servers />
+  </component>
+  <component name="TimeTrackingManager">
+    <option name="totallyTimeSpent" value="19000" />
+  </component>
+  <component name="ToolWindowManager">
+    <frame x="-8" y="-8" width="1936" height="1056" extended-state="6" />
+    <layout>
+      <window_info id="Image Layers" />
+      <window_info id="Designer" />
+      <window_info id="UI Designer" />
+      <window_info id="Capture Tool" />
+      <window_info id="Favorites" side_tool="true" />
+      <window_info active="true" content_ui="combo" id="Project" order="0" visible="true" weight="0.25" />
+      <window_info id="Structure" order="1" side_tool="true" weight="0.25" />
+      <window_info anchor="bottom" id="Database Changes" />
+      <window_info anchor="bottom" id="Version Control" />
+      <window_info anchor="bottom" id="Terminal" />
+      <window_info anchor="bottom" id="Event Log" side_tool="true" />
+      <window_info anchor="bottom" id="Message" order="0" />
+      <window_info anchor="bottom" id="Find" order="1" />
+      <window_info anchor="bottom" id="Run" order="2" />
+      <window_info anchor="bottom" id="Debug" order="3" weight="0.4" />
+      <window_info anchor="bottom" id="Cvs" order="4" weight="0.25" />
+      <window_info anchor="bottom" id="Inspection" order="5" weight="0.4" />
+      <window_info anchor="bottom" id="TODO" order="6" />
+      <window_info anchor="right" id="Palette" />
+      <window_info anchor="right" id="Theme Preview" />
+      <window_info anchor="right" id="Maven" />
+      <window_info anchor="right" id="Capture Analysis" />
+      <window_info anchor="right" id="Palette&#9;" />
+      <window_info anchor="right" id="Database" />
+      <window_info anchor="right" id="Commander" internal_type="SLIDING" order="0" type="SLIDING" weight="0.4" />
+      <window_info anchor="right" id="Ant Build" order="1" weight="0.25" />
+      <window_info anchor="right" content_ui="combo" id="Hierarchy" order="2" weight="0.25" />
+    </layout>
+  </component>
+  <component name="masterDetails">
+    <states>
+      <state key="ScopeChooserConfigurable.UI">
+        <settings>
+          <splitter-proportions>
+            <option name="proportions">
+              <list>
+                <option value="0.2" />
+              </list>
+            </option>
+          </splitter-proportions>
+        </settings>
+      </state>
+    </states>
+  </component>
+</project>

package-lock.json

@@ -4638,6 +4638,11 @@
         "schema-utils": "0.4.7"
       }
     },
+    "file-type": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/file-type/-/file-type-11.1.0.tgz",
+      "integrity": "sha512-rM0UO7Qm9K7TWTtA6AShI/t7H5BPjDeGVDaNyg9BjHAj3PysKy7+8C8D137R88jnR3rFJZQB/tFgydl5sN5m7g=="
+    },
     "fill-range": {
       "version": "4.0.0",
       "resolved": "http://registry.npm.taobao.org/fill-range/download/fill-range-4.0.0.tgz",
@@ -8558,6 +8563,22 @@
         }
       }
     },
+    "read-chunk": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/read-chunk/-/read-chunk-3.2.0.tgz",
+      "integrity": "sha512-CEjy9LCzhmD7nUpJ1oVOE6s/hBkejlcJEgLQHVnQznOSilOPb+kpKktlLfFDK3/WP43+F80xkUTM2VOkYoSYvQ==",
+      "requires": {
+        "pify": "4.0.1",
+        "with-open-file": "0.1.6"
+      },
+      "dependencies": {
+        "pify": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
+          "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g=="
+        }
+      }
+    },
     "read-config-file": {
       "version": "3.2.2",
       "resolved": "https://registry.npm.taobao.org/read-config-file/download/read-config-file-3.2.2.tgz",
@@ -11675,6 +11696,28 @@
         "is-number": "3.0.0"
       }
     },
+    "with-open-file": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/with-open-file/-/with-open-file-0.1.6.tgz",
+      "integrity": "sha512-SQS05JekbtwQSgCYlBsZn/+m2gpn4zWsqpCYIrCHva0+ojXcnmUEPsBN6Ipoz3vmY/81k5PvYEWSxER2g4BTqA==",
+      "requires": {
+        "p-finally": "1.0.0",
+        "p-try": "2.2.0",
+        "pify": "4.0.1"
+      },
+      "dependencies": {
+        "p-try": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+          "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ=="
+        },
+        "pify": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
+          "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g=="
+        }
+      }
+    },
     "wordwrap": {
       "version": "0.0.2",
       "resolved": "http://registry.npm.taobao.org/wordwrap/download/wordwrap-0.0.2.tgz",

package.json

@@ -54,7 +54,9 @@
         "axios": "^0.18.0",
         "date-fns": "^1.30.1",
         "element-ui": "^2.8.2",
+        "file-type": "^11.1.0",
         "qrcode": "^1.3.3",
+        "read-chunk": "^3.2.0",
         "swiper": "^4.5.0",
         "vue": "^2.5.16",
         "vue-electron": "^1.0.6",

src/renderer/components/Aside.vue

@@ -42,30 +42,30 @@ export default {
       orderMenuList: [{
         icon: require('../assets/nav_icon_daizhifu.png'),
         title: '待支付',
-        url: 'orderList'
+        url: ''
       }, {
         icon: require('../assets/nav_icon_wancheng.png'),
         title: '进行中',
-        url: 'orderList'
+        url: ''
       }, {
         icon: require('../assets/nav_icon_yiwancheng.png'),
         title: '已完成',
-        url: 'orderList'
+        url: ''
       }, {
         icon: require('../assets/nav_icon_shangchaun.png'),
         title: '正在上传',
-        url: 'orderList',
+        url: '/uploading',
         num: 28,
         color: '#FEA83C'
       }, {
         icon: require('../assets/nav_icon_xiazai.png'),
         title: '正在下载',
-        url: 'orderList',
+        url: '',
         num: 56,
       }, {
         icon: require('../assets/nav_icon_wancheng.png'),
         title: '传输完成',
-        url: '/TransferFinish'
+        url: '/transferFinish'
       }]
     }
   },

src/renderer/components/OrderTransfer/finish.vue

@@ -0,0 +1,109 @@
+<template>
+  <!-- <span style="width:24vw">文件名</span>
+      <span style="width:9vw">数量</span>
+      <span style="width:9vw">大小</span>
+      <span style="width:21vh">状态</span>
+  <span style="width:10vh">操作</span>-->
+  <div class="tr" :style="{backgroundColor:bgColor}">
+    <div class="td title" style="width:24vw">
+      <img src="../../assets/icon_wenjianjia_02.png" alt>
+      <span>五四青年节活动照片</span>
+    </div>
+    <span class="td" style="width:9vw">48张</span>
+    <span class="td size" style="width:9vw">
+      <span>3.78G</span>
+      <img :src="iconImg" alt>
+    </span>
+    <div class="td" style="width:21vh">
+      <span>上传完成</span>
+      <span class="time">2019-05-01</span>
+    </div>
+    <div class="td edit" style="width:10vh">
+      <img src="../../assets/icon_chakanweizhi.png" alt>
+      <img src="../../assets/icon_shanchukilu.png" alt>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+export default {
+  name: 'finish',
+  data() {
+    return {}
+  },
+   props:{
+       transferType:{
+           type:Number,
+           default:0  //0上传 1 下载
+       }
+   },
+  computed: {
+    iconImg(){
+        var list=[require('../../assets/icon_shangchuanzhong.png'),require('../../assets/icon_xiazaizhong.png')];
+        return list[this.transferType];
+    },
+    bgColor(){
+        var list=['#FEF8EF','#F1FCFF'];
+        return list[this.transferType];
+    }
+  },
+  components: {}
+}
+</script>
+
+<style lang="less" scoped>
+.tr {
+  font-size: 14px;
+  color: rgba(0, 0, 0, 1);
+  line-height: 20px;
+  margin: 15px 20px;
+  background-color: #fef8ef;
+  padding: 8px 10px;
+
+  .title {
+    img {
+      width: 34px;
+      height: 34px;
+      vertical-align: middle;
+    }
+    span {
+      vertical-align: middle;
+    }
+  }
+
+  .td {
+    display: inline-block;
+    padding-left: 10px;
+    vertical-align: middle;
+  }
+
+  .edit {
+    img {
+      vertical-align: middle;
+      width: 24px;
+      display: inline-block;
+      &:last-child {
+        margin-left: 15px;
+      }
+      cursor: pointer;
+    }
+  }
+
+  .time {
+    font-size: 13px;
+    color: rgba(153, 153, 153, 1);
+    line-height: 18px;
+    margin-left: 15px;
+  }
+
+  .size {
+    img {
+      width: 24px;
+      vertical-align: middle;
+      float: right;
+      transform: translateX(10px);
+    }
+  }
+}
+</style>

src/renderer/components/OrderTransfer/index.js

@@ -0,0 +1,7 @@
+import Main from './main.vue'
+const OrderTransfer = {
+    install: function(Vue) {
+        Vue.component('OrderTransfer', Main)
+    }
+}
+export default OrderTransfer

src/renderer/components/OrderTransfer/main.vue

@@ -0,0 +1,39 @@
+<template>
+   <div class="">
+        <finish v-if="status==1" :transferType='transferType'></finish>
+        <upload v-else></upload>
+   </div>
+</template>
+
+<script>
+import finish from './finish.vue'
+import upload from './uploading.vue'
+import { mapState} from 'vuex'
+export default {
+   name: 'transfer',
+   data() {
+       return {}
+   },
+   props:{
+       status:{
+           type:Number,
+           default:0  //0未完成，1完成
+       },
+       transferType:{
+           type:Number,
+           default:0  //0上传 1 下载
+       }
+   },
+   computed:{
+       ...mapState({
+           userInfo:state=>state.UserInfo.userInfo
+       }),
+   },
+  components: {
+      finish,upload
+  }
+}
+</script>
+
+<style lang="less" scoped>
+</style>

src/renderer/components/OrderTransfer/uploading.vue

@@ -0,0 +1,163 @@
+<template>
+  <div class="upload">
+    <div class="tr head">
+      <div class="td title" style="width:24vw">
+        <img src="../../assets/icon_wenjianjia_02.png" alt>
+        <span>五四青年节活动照片</span>
+      </div>
+      <span class="td" style="width:9vw">48张</span>
+      <span class="td size" style="width:9vw">
+        <span>3.78G</span>
+      </span>
+      <div class="td" style="width:21vh">
+        <span>上传中</span>
+      </div>
+      <div class="td edit" style="width:10vh">
+        <img src="../../assets/icon_xiazaizanting_lvse.png" alt>
+        <img src="../../assets/icon_xiazaikaishi_lvxe.png" alt>
+      </div>
+    </div>
+    <div class="tr item" v-for="i in 3" :key="i">
+      <div class="td title" style="width:24vw">
+        <div class="num" :style="{backgroundColor:colors[i%3]}">{{i}}</div>
+        <span>吴盈秀照片</span>
+      </div>
+      <span class="td" style="width:9vw">26张</span>
+      <span class="td size" style="width:9vw">
+        <span>863.12M/1.23G</span>
+      </span>
+      <div class="td" style="width:21vh">
+        <ProgressBar style="flex-grow:1" :LineHeight="5"></ProgressBar>
+        <div class="line">
+          <span class="color">1.23M/s</span>
+          <span>剩余00:16:24</span>
+        </div>
+      </div>
+      <div class="td edit" style="width:10vh">
+        <img src="../../assets/icon_xiazaizanting.png" alt>
+        <img src="../../assets/icon_chakanweizhi.png" alt>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+export default {
+  name: 'upload',
+  data() {
+    return {
+      colors: ['#29C7EC', '#FFD651', '#80CD82']
+    }
+  },
+  props: {
+    transferType: {
+      type: Number,
+      default: 0  //0上传 1 下载
+    }
+  },
+  computed: {
+  },
+  components: {}
+}
+</script>
+
+<style lang="less" scoped>
+.upload {
+  margin: 15px 20px;
+  border: 1px solid rgba(254, 168, 60, 1);
+
+  .head {
+    background-color: #fef8ef;
+  }
+
+  .item {
+    padding: 12px 10px;
+    font-size: 12px;
+    color: rgba(102, 102, 102, 1);
+    line-height: 17px;
+    cursor: pointer;
+
+    &:not(:last-child) {
+      border-bottom: 1px solid #f2f4f5;
+    }
+  }
+}
+.tr {
+  font-size: 14px;
+  color: rgba(0, 0, 0, 1);
+  line-height: 20px;
+  padding: 8px 10px;
+
+  .title {
+    img {
+      width: 34px;
+      height: 34px;
+      vertical-align: middle;
+    }
+    span {
+      vertical-align: middle;
+    }
+  }
+
+  .td {
+    display: inline-block;
+    padding-left: 10px;
+    vertical-align: middle;
+  }
+
+  .edit {
+    img {
+      vertical-align: middle;
+      width: 24px;
+      display: inline-block;
+      &:last-child {
+        margin-left: 15px;
+      }
+      cursor: pointer;
+    }
+  }
+
+  .time {
+    font-size: 13px;
+    color: rgba(153, 153, 153, 1);
+    line-height: 18px;
+    margin-left: 15px;
+  }
+
+  .size {
+    img {
+      width: 24px;
+      vertical-align: middle;
+      float: right;
+      transform: translateX(10px);
+    }
+  }
+
+  .line {
+    margin-top: 10px;
+    font-size: 12px;
+    color: rgba(102, 102, 102, 1);
+    line-height: 17px;
+    .color {
+      color: #0b9ec0;
+      margin-right: 10px;
+    }
+  }
+}
+
+.num {
+  width: 24px;
+  height: 24px;
+  line-height: 24px;
+  text-align: center;
+  border-radius: 100%;
+  font-size: 14px;
+  font-weight: bold;
+  color: rgba(255, 255, 255, 1);
+  display: inline-block;
+  vertical-align: middle;
+  margin-right: 15px;
+}
+
+</style>

src/renderer/components/ProgressBar/index.js

@@ -0,0 +1,7 @@
+import Main from './main.vue'
+const ProgressBar = {
+    install: function(Vue) {
+        Vue.component('ProgressBar', Main)
+    }
+}
+export default ProgressBar

src/renderer/components/ProgressBar/main.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="ProgressBar" :style="ProgressBarStyle">
+    <div class="line" :style="lineStyle"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ProgressBar',
+  props: {
+    percentage: {
+      type: Number,
+      default: 30
+    },
+    LineColor: {
+      type: String,
+    },
+    LineHeight: {
+      type: Number,
+      default: 8
+    },
+    LineWidth: {
+      type: Number,
+    }
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    lineStyle() {
+      var jsonp = {
+        height: this.LineHeight + 'px',
+        width: this.percentage + '%',
+        background: this.LineColor ? this.LineColor : 'linear-gradient(141deg,rgba(27,184,172,1) 0%,rgba(0,142,205,1) 100%)'
+      };
+      if (this.LineWidth) {
+        jsonp.width = this.LineWidth;
+      }
+      return jsonp;
+    },
+    ProgressBarStyle(){
+      var jsonp = {
+        height: this.LineHeight + 'px',
+      }
+      return jsonp
+    }
+  },
+  components: {}
+}
+</script>
+
+<style lang="less" scoped>
+.ProgressBar {
+  height: 8px;
+  background: #f1f3f4;
+  border-radius: 100px;
+  display: block;
+  overflow: hidden;
+  .line {
+    height: 100%;
+    border-radius: 100px;
+  }
+}
+</style>

src/renderer/main.js

@@ -13,6 +13,8 @@ import OrderImg from './components/Img'
 import { format } from 'date-fns'
 import VueI18n from 'vue-i18n'
 import zh from 'date-fns/locale/zh_cn'
+import OrderTransfer from './components/OrderTransfer'
+import ProgressBar from './components/ProgressBar'
 
 if (!process.env.IS_WEB) Vue.use(require('vue-electron'))
 Vue.http = Vue.prototype.$http = axios
@@ -24,6 +26,10 @@ Vue.use(Order);
 Vue.use(PageTitle);
 Vue.use(VueI18n);
 Vue.use(OrderImg);
+Vue.use(OrderTransfer);
+Vue.use(ProgressBar);
+
+Vue.prototype.$ImgType = ['']
 
 const baseUrl = process.env.NODE_ENV === 'production' ? '../' : `https://www.tutuxiang.com`;
 Vue.prototype.$baseUrl = baseUrl;
@@ -219,7 +225,10 @@ Vue.prototype.sendMeg = function(phone, code) {
 }
 
 Vue.prototype.goNext = function(url) {
-    this.$router.push(url)
+    if (url) {
+        this.$router.push(url)
+    }
+
 }
 
 Vue.prototype.getTime = function(str) {

src/renderer/pages/Booking/OrderBookingStep2.vue

@@ -12,7 +12,7 @@
       </el-form-item>
 
       <el-form-item label="上传文件">
-        <div class="upload">
+        <div class="upload" @click="openDialog">
           <i class="el-icon-upload"></i>
           <div class="title">
             将
@@ -22,18 +22,36 @@
           <div class="tip">重新添加，自动覆盖之前文件夹</div>
         </div>
       </el-form-item>
+      <el-form-item label>
+        <div class="rule">
+          <div class="title">注意事项：</div>
+          <p>
+            1、总文件夹下可以包含多个子文件夹，系统会自动将这些子文件夹展示为子订单进行发布
+            <br>2、总文件夹下不可同时包含子文件夹和照片，不然照片无法识别上传
+            <br>3、总文件夹下可以只包含照片，系统会自动识别为一个订单进行发布
+            <br>4、每个子文件夹下可以存放一个修片指引文档,系统识别后自动上传，用户也可以手动修改上传
+          </p>
+        </div>
+      </el-form-item>
     </el-form>
   </div>
 </template>
 
 <script>
+import fs from 'fs'
+import path from 'path'
 import { mapState } from 'vuex'
+import readChunk from 'read-chunk'
+import fileType from 'file-type'
+import { shell, ipcRenderer } from 'electron'
 export default {
   name: 'step2',
   data() {
     return {
       form: {},
-      goodsInfo: {}
+      goodsInfo: {},
+      path: '',
+      files: [],
     }
   },
   computed: {
@@ -62,6 +80,74 @@ export default {
       }
     })
   },
+  methods: {
+    readDir(dir, isTop) {
+      let files = [];
+      var hasDirectory = false;
+      fs.readdirSync(dir).forEach(child => {
+        let info = fs.statSync(path.resolve(dir, child))
+
+        var jsonp = {
+          name: child.split('.')[0],
+          typeFlag: 0,//图片
+          localPath: path.resolve(dir, child),
+          size: info.size,
+          fullName: child
+        }
+
+        if (info.isDirectory()) {
+          hasDirectory = true;
+          jsonp.typeFlag = 1;//文件
+          jsonp.children = this.readDir(jsonp.localPath);
+        }
+        else {
+          const buffer = readChunk.sync(jsonp.localPath, 0, fileType.minimumBytes);
+          if (fileType(buffer) && fileType(buffer).mime.indexOf('image/')) {
+            jsonp.typeFlag = 0;//图片
+          }
+          else {
+            jsonp.typeFlag = 2;//文件
+          }
+          console.log(fileType(buffer))
+        }
+        files.push(jsonp)
+      })
+
+      if (isTop && hasDirectory) {
+        var returnFiles = files.filter((item) => {
+          return item.typeFlag == 1
+        })
+        files = returnFiles
+      }
+
+      var typeList = [0, 2, 1]
+      files.sort((a, b) => {
+        return typeList.indexOf(b.typeFlag) - typeList.indexOf(a.typeFlag)
+      })
+      return files;
+
+    },
+    openDialog() {
+      let paths = this.$electron.remote.dialog.showOpenDialog({ properties: ['openDirectory'] })
+      if (paths && paths.length) {
+        this.path = paths[0]
+        console.log(this.readDir(paths[0], true))
+        this.openFileHandler(paths[0])
+      }
+    },
+    onDoubleClick(file) {
+      if (file.isDirectory) {
+        this.path = path.resolve(this.path, file.name)
+        this.readDir(this.path, true)
+      }
+    },
+    openFileHandler(path) {
+      console.log(path)
+      // shell.s
+      shell.showItemInFolder(path);
+    }
+
+  },
   components: {}
 }
 </script>
@@ -123,4 +209,18 @@ export default {
     line-height: 20px;
   }
 }
+.rule {
+  .title {
+    font-size: 12px;
+    color: rgba(48, 49, 51, 1);
+    line-height: 20px;
+  }
+
+  p {
+    font-size: 12px;
+    color: rgba(96, 98, 102, 1);
+    line-height: 20px;
+    margin-top: 5px;
+  }
+}
 </style>

src/renderer/pages/OrderBooking.vue

@@ -1,52 +0,0 @@
-<template>
-  <div class="booking">
-    <div style="padding:0 20px">
-      <page-title title="我要下单"></page-title>
-
-      <order-step :step="step"></order-step>
-    </div>
-    <router-view class="stepContent"></router-view>
-  </div>
-</template>
-
-<script>
-import { mapState } from 'vuex'
-import OrderStep from '../components/OrderStep'
-export default {
-  name: 'booking',
-  data() {
-    return {
-    }
-  },
-  computed: {
-    ...mapState({
-      userInfo: state => state.UserInfo.userInfo
-    }),
-    step() {
-      var step = 0;
-      if (this.$route.path == '/orderBookingStep2') {
-        step = 1;
-      }
-      return step;
-    }
-  },
-  components: {
-    OrderStep
-  }
-}
-</script>
-
-<style lang="less" scoped>
-.booking {
-  // padding: 0 20px;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-.stepContent {
-  flex-grow: 1;
-  overflow: auto;
-  padding: 0 20px;
-}
-</style>

src/renderer/pages/OrderBookingStep1.vue

@@ -1,326 +0,0 @@
-<template>
-  <div class="step1">
-    <div class="filifer">
-      <div class="filifer-btn" :class="{active:item.isActive}" v-for="item in filiferBtnList" @click="filifer(item.type)">{{item.name}}</div>
-      <div style="flex-grow:1"></div>
-      <div class="search">
-        <input type="text" v-model="searchVal" placeholder="店铺名搜索">
-        <div class="btn" @click="search">
-          <img src="../assets/icon_chakanweizhi_pre.png" alt>
-        </div>
-      </div>
-    </div>
-
-    <div class="shopList" ref="shopList" v-loading="loading" @scroll="scrollShop">
-      <shop :info="item" v-for="item in list" @click="chooseShop"></shop>
-
-      <div class="noting" v-if="list.length==0">
-        <img src="../assets/img_kongbaiye.png" alt>
-        <p>目前还没有此商家哦～</p>
-      </div>
-    </div>
-
-    <el-dialog title="选择商品" :visible.sync="chooseGoods" width="78.5%" center custom-class="goodsDialog">
-      <div class="goodsList">
-        <goods v-for="item in GoodsList" :info="item" @click="goStep2"></goods>
-      </div>
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-import { mapState } from 'vuex'
-import shop from '../components/Shop'
-import goods from '../components/Goods'
-export default {
-  name: 'step1',
-  data() {
-    return {
-      currentPage: 1,
-      canNext: true,
-      list: [],
-      serviceType: 7,
-      signing: 'Y',
-      loading: true,
-      searchVal: '',
-      searchKey: '',
-      chooseGoods: false,
-      GoodsList: []
-    }
-  },
-  computed: {
-    ...mapState({
-      userInfo: state => state.UserInfo.userInfo
-    }),
-    filiferBtnList() {
-      var list = [{
-        name: '全部',
-        type: 'all',
-        isActive: false
-      }, {
-        name: '已签约',
-        type: 'sign',
-        isActive: false
-      }, {
-        name: '未签约',
-        type: 'unsign',
-        isActive: false
-      }, {
-        name: '影楼修图',
-        type: 'photoStudio',
-        isActive: false
-      }, {
-        name: '商业修图',
-        type: 'business',
-        isActive: false
-      }];
-
-
-      if (!this.serviceType && !this.signing) {
-        list[0].isActive = true;
-      }
-
-      if (this.signing == 'Y') {
-        list[1].isActive = true;
-      }
-      if (this.signing == 'N') {
-        list[2].isActive = true;
-      }
-
-      if (this.serviceType == 7) {
-        list[3].isActive = true;
-      }
-      if (this.serviceType == 1) {
-        list[4].isActive = true;
-      }
-
-
-
-      return list;
-    }
-  },
-  mounted() {
-    this.getInfo();
-  },
-  watch: {
-    searchVal() {
-      if (!this.searchVal) {
-        this.searchKey = this.searchVal;
-      }
-
-    }
-  },
-  methods: {
-    getInfo() {
-      if (!this.canNext) {
-        return;
-      }
-
-      if (this.currentPage == 1) {
-        this.list = [];
-      }
-
-      this.canNext = false;
-      var data = {
-        currentPage: this.currentPage,
-        pageNumber: 5,
-        useFlag: 'Y',
-        salesFlag: 'Y',
-        advancedQuery: ''
-      }
-      if (this.serviceType) {
-        data.serviceType = this.serviceType
-      }
-      else {
-
-      }
-      if (this.searchKey) {
-        data.searchKey = this.searchKey;
-      }
-      if (this.signing) {
-        data.signing = this.signing
-      }
-      this.loading = true;
-      this.$http.get({
-        url: '/storeInfo/page',
-        data: data
-      }).then(res => {
-        setTimeout(() => {
-          this.loading = false
-        }, 500);
-        if (res.success) {
-          this.list = this.list.concat(res.data.pp)
-
-          if (res.data.page.currentPage < res.data.page.totalPage) {
-            this.canNext = true;
-          }
-        }
-      })
-    },
-    filifer(type) {
-      if (type == 'all') {
-        this.serviceType = null;
-        this.signing = null
-      } else if (type == 'sign') {
-        this.signing = 'Y'
-      } else if (type == 'unsign') {
-        this.signing = 'N'
-      } else if (type == 'sign') {
-        this.signing = 'Y'
-      } else if (type == 'photoStudio') {
-        this.serviceType = 7
-      } else if (type == 'business') {
-        this.serviceType = 1
-      }
-      this.canNext = true;
-      this.currentPage = 1;
-      this.getInfo()
-    },
-    search() {
-      this.serviceType = null;
-      this.signing = null;
-      this.canNext = true;
-      this.currentPage = 1;
-      this.searchKey = this.searchVal;
-      this.getInfo()
-    },
-    scrollShop() {
-      if (this.$refs.shopList.offsetHeight + this.$refs.shopList.scrollTop + 50 >= this.$refs.shopList.scrollHeight) {
-        this.currentPage++;
-        this.getInfo()
-      }
-    },
-    chooseShop(id) {
-      this.GoodsList = []
-      this.chooseGoods = true;
-      this.$http.get({
-        url: '/productInfo/all',
-        data: {
-          storeId: id,
-          onShelf: 'Y',
-          useFlag: 'Y',
-        }
-      }).then(res => {
-        if (res.success) {
-          this.GoodsList = this.GoodsList.concat(res.data);
-        }
-      })
-    },
-    goStep2(id) {
-      this.goNext('/orderBookingStep2?productId=' + id);
-    }
-  },
-  components: {
-    shop, goods
-  }
-}
-</script>
-
-<style lang="less" scoped>
-.step1 {
-  display: flex;
-  flex-direction: column;
-}
-
-.shopList {
-  flex-grow: 1;
-  // padding: 0 20px;
-  margin-top: 14px;
-  overflow: auto;
-  .shop {
-    margin-right: 25px;
-    display: inline-block;
-  }
-}
-
-.filifer {
-  display: flex;
-  align-items: flex-end;
-  // padding: 0 20px 0;
-  height: 58px;
-  min-height: 58px;
-  .filifer-btn {
-    height: 36px;
-    line-height: 36px;
-    padding: 0 20px;
-    font-size: 13px;
-    color: rgba(153, 153, 153, 1);
-    border: 1px solid rgba(242, 244, 245, 1);
-    margin-right: 10px;
-    cursor: pointer;
-
-    &.active {
-      border: 1px solid rgba(11, 158, 192, 1);
-      color: #0b9ec0;
-    }
-
-    &:hover {
-      border: 1px solid rgba(11, 158, 192, 1);
-      color: #0b9ec0;
-    }
-  }
-}
-
-.search {
-  width: 316px;
-  height: 38px;
-  background: rgba(255, 255, 255, 1);
-  display: flex;
-  input {
-    flex-grow: 1;
-    border: none;
-    outline: none;
-    padding-left: 15px;
-    font-size: 14px;
-    color: rgba(0, 0, 0, 1);
-    border: 1px solid rgba(242, 244, 245, 1);
-  }
-
-  .btn {
-    width: 38px;
-    background: rgba(11, 158, 192, 1);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    min-width: 38px;
-    cursor: pointer;
-    &:hover {
-      background: darken(rgba(11, 158, 192, 1), 10%);
-    }
-
-    img {
-      width: 24px;
-    }
-  }
-}
-
-.noting {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding-top: 60px;
-
-  img {
-    width: 120px;
-    height: 96px;
-  }
-
-  p {
-    font-size: 14px;
-    color: rgba(0, 0, 0, 1);
-    line-height: 20px;
-    margin-top: 20px;
-  }
-}
-
-.goodsList {
-  display: flex;
-  flex-wrap: wrap;
-  max-height: 60vh;
-  overflow: auto;
-
-  .goods {
-    margin-right: 18px;
-  }
-}
-</style>

src/renderer/pages/OrderBookingStep2.vue

@@ -1,126 +0,0 @@
-<template>
-  <div class="step2">
-    <el-form ref="form" :model="form" label-width="100px">
-      <el-form-item label="选择修图商">
-        <div class="right">
-          <div class="name">{{storeName}}</div>
-          <el-button type="primary" plain style="margin-left:10px;" @click="$router.go(-1)">重新选择服务商</el-button>
-        </div>
-      </el-form-item>
-      <el-form-item label="选择商品">
-        <div class="name">{{productName}}</div>
-      </el-form-item>
-
-      <el-form-item label="上传文件">
-        <div class="upload">
-          <i class="el-icon-upload"></i>
-          <div class="title">
-            将
-            <span>文件夹</span>拖到此处，或
-            <span>点击添加</span>
-          </div>
-          <div class="tip">重新添加，自动覆盖之前文件夹</div>
-        </div>
-      </el-form-item>
-    </el-form>
-  </div>
-</template>
-
-<script>
-import { mapState } from 'vuex'
-export default {
-  name: 'step2',
-  data() {
-    return {
-      form: {},
-      goodsInfo: {}
-    }
-  },
-  computed: {
-    ...mapState({
-      userInfo: state => state.UserInfo.userInfo
-    }),
-    storeInfo() {
-      return this.goodsInfo.storeInfo || {}
-    },
-    productName() {
-      return this.goodsInfo.title || ''
-    },
-    storeName() {
-      return this.storeInfo.storeName || ''
-    }
-  },
-  mounted() {
-    this.$http.get({
-      url: '/productInfo/getOne',
-      data: {
-        id: this.$route.query.productId
-      }
-    }).then(res => {
-      if (res.success) {
-        this.goodsInfo = res.data;
-      }
-    })
-  },
-  components: {}
-}
-</script>
-
-<style lang="less" scoped>
-.name {
-  width: 300px;
-  height: 40px;
-  padding: 0 15px;
-  font-size: 14px;
-  color: rgba(0, 0, 0, 1);
-  line-height: 40px;
-  border-radius: 1px;
-  border: 1px solid rgba(220, 223, 230, 1);
-  display: inline-block;
-}
-
-.step2 {
-  padding: 20px 56px 20px 20px;
-}
-
-.upload {
-  width: 382px;
-  height: 182px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  border: 1px dashed #babdc6;
-  cursor: pointer;
-  i {
-    font-size: 80px;
-    color: #babdc6;
-  }
-
-  &:hover {
-    border: 1px dashed #62a9c7;
-  }
-
-  .title {
-    font-size: 14px;
-    color: rgba(96, 98, 102, 1);
-    line-height: 20px;
-
-    span {
-      &:first-child {
-        color: #fb6e08;
-      }
-
-      &:last-child {
-        color: #0b9ec0;
-      }
-    }
-  }
-
-  .tip {
-    font-size: 12px;
-    color: rgba(144, 147, 153, 1);
-    line-height: 20px;
-  }
-}
-</style>

src/renderer/pages/Order/TransferFinish.vue → src/renderer/pages/OrderTransfer/TransferFinish.vue

@@ -8,7 +8,10 @@
       <span style="width:21vh">状态</span>
       <span style="width:10vh">操作</span>
     </div>
-    
+
+    <OrderTransfer :status="1" :transferType="0"></OrderTransfer>
+    <OrderTransfer :status="1" :transferType="1"></OrderTransfer>
+    <OrderTransfer :status="1" :transferType="0"></OrderTransfer>
   </div>
 </template>
 

src/renderer/pages/OrderTransfer/Uploading.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="finish">
+    <div class="top">
+      <page-title title="上传进度" style="margin:0 12px 0 20px;"></page-title>
+      <ProgressBar style="flex-grow:1"></ProgressBar>
+      <span class="speed">415.00KB/s</span>
+      <span class="progress">已完成48%</span>
+      <span class="num">共3个订单</span>
+    </div>
+    <div class="th">
+      <span style="width:24vw">文件名</span>
+      <span style="width:9vw">数量</span>
+      <span style="width:9vw">大小</span>
+      <span style="width:21vh">状态</span>
+      <span style="width:10vh">操作</span>
+    </div>
+
+    <OrderTransfer :status="0" :transferType="0"></OrderTransfer>
+    <OrderTransfer :status="0" :transferType="1"></OrderTransfer>
+    <OrderTransfer :status="0" :transferType="0"></OrderTransfer>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+export default {
+  name: 'finish',
+  data() {
+    return {}
+  },
+  computed: {
+    ...mapState({
+      userInfo: state => state.UserInfo.userInfo
+    }),
+  },
+  components: {}
+}
+</script>
+
+<style lang="less" scoped>
+.th {
+  background: rgba(242, 244, 245, 1);
+  padding: 5px 20px 5px 29px;
+  span {
+    font-size: 12px;
+    color: rgba(102, 102, 102, 1);
+    line-height: 26px;
+    padding-left: 10px;
+    display: inline-block;
+    &:not(:last-child) {
+      border-right: 1px solid #e1e4e6;
+    }
+  }
+}
+
+.top {
+  display: flex;
+  align-items: center;
+
+  .speed {
+    font-size: 13px;
+    color: rgba(11, 158, 192, 1);
+    margin-left: 13px;
+  }
+  .progress {
+    font-size: 13px;
+    color: rgba(0, 0, 0, 1);
+    margin-left: 10px;
+  }
+
+  .num {
+    font-size: 12px;
+    color: rgba(153, 153, 153, 1);
+    line-height: 17px;
+    margin-left: 42px;
+    margin-right: 16px;
+  }
+}
+</style>

src/renderer/router/index.js

@@ -77,7 +77,15 @@ const router = new Router({
                 title: '传输完成',
                 page: 1
             },
-            component: resolve => require(['../pages/Order/TransferFinish'], resolve)
+            component: resolve => require(['../pages/OrderTransfer/TransferFinish'], resolve)
+        }, {
+            path: '/uploading',
+            name: 'uploading',
+            meta: {
+                title: '正在上传',
+                page: 1
+            },
+            component: resolve => require(['../pages/OrderTransfer/Uploading'], resolve)
         }]
     }, {
         path: '/login',