订单status控件 退货状态控件

.browserslistrc

@@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+not dead

.editorconfig

@@ -0,0 +1,5 @@
+[*.{js,jsx,ts,tsx,vue}]
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true
+insert_final_newline = true

.eslintrc.js

@@ -0,0 +1,21 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true,
+    browser: true
+  },
+  extends: [
+    'plugin:vue/essential',
+    'standard'
+  ],
+  plugins: [
+    'vue'
+  ],
+  parserOptions: {
+    parser: 'babel-eslint'
+  },
+  rules: {
+    'vue/no-template-key': 'off',
+    'vue/valid-v-for': 'off',// 禁用 vue/valid-v-for 规则
+  }
+}

.gitignore

@@ -0,0 +1,22 @@
+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

README.md

@@ -0,0 +1,24 @@
+# food
+
+## Project setup
+```
+npm install
+```
+
+### Compiles and hot-reloads for development
+```
+npm run serve
+```
+
+### Compiles and minifies for production
+```
+npm run build
+```
+
+### Lints and fixes files
+```
+npm run lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).

babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}

package.json

@@ -0,0 +1,41 @@
+{
+  "name": "food",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "start": "npm run serve",
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "eslint --ext .js,.vue src"
+  },
+  "dependencies": {
+    "core-js": "^3.6.5",
+    "vue": "^2.6.11",
+    "vuex": "^3.4.0"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "~4.4.0",
+    "@vue/cli-plugin-eslint": "~4.4.0",
+    "@vue/cli-plugin-router": "~4.4.0",
+    "@vue/cli-plugin-vuex": "~4.4.0",
+    "@vue/cli-service": "~4.4.0",
+    "@vue/eslint-config-standard": "^5.1.2",
+    "axios": "^1.4.0",
+    "babel-eslint": "^10.1.0",
+    "element-ui": "^2.15.13",
+    "eslint": "^6.7.2",
+    "eslint-plugin-import": "^2.20.2",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^4.2.1",
+    "eslint-plugin-standard": "^4.0.0",
+    "eslint-plugin-vue": "^6.2.2",
+    "mapbox-gl": "^2.15.0",
+    "mqtt": "^2.18.9",
+    "normalize.css": "^8.0.1",
+    "nprogress": "^0.2.0",
+    "sass": "^1.64.1",
+    "sass-loader": "^8.0.2",
+    "vue-router": "^3.6.5",
+    "vue-template-compiler": "^2.6.11"
+  }
+}

src/assets/appletLogo.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#040000;}
+	.st1{fill:#F4E228;}
+</style>
+<path class="st0" d="M32,0.67C14.7,0.67,0.67,14.7,0.67,32S14.7,63.33,32,63.33S63.33,49.3,63.33,32S49.3,0.67,32,0.67z M32,59.57
+	C16.71,59.57,4.43,47.29,4.43,32S16.71,4.43,32,4.43S59.57,16.71,59.57,32S47.29,59.57,32,59.57z"/>
+<path class="st1" d="M6.93,32c0,13.84,11.21,25.07,25.06,25.08s25.07-11.21,25.08-25.06c0-0.01,0-0.01,0-0.02
+	c0-13.84-11.22-25.07-25.06-25.07S6.94,18.15,6.93,31.99C6.93,31.99,6.93,32,6.93,32z"/>
+<path class="st0" d="M40.9,16.96c-5.51,0-9.9,4.51-9.9,10.03v10.03c0,3.63-3.01,6.64-6.64,6.64s-6.64-3.01-6.64-6.64
+	c0-3.63,3.01-6.64,6.64-6.64v-3.38c-5.51,0-9.9,4.51-9.9,10.03s4.39,10.03,9.9,10.03s9.9-4.51,9.9-10.03V26.99
+	c0-3.63,3.01-6.64,6.64-6.64c3.63,0,6.64,3.01,6.64,6.64s-3.01,6.64-6.64,6.64v3.38c5.51,0,9.9-4.51,9.9-10.03
+	S46.41,16.96,40.9,16.96z"/>
+</svg>

src/assets/logo.svg

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#D0121B;}
+	.st1{fill:#B81C22;}
+	.st2{fill:#18234A;}
+	.st3{fill:#093561;}
+</style>
+<path class="st0" d="M0.77,43.3c0.72,1.49,2.15,1.88,5.2,1.01c5.3-1.5,17.65-9.74,21.01-14.31c3.35-4.58-8.3-25.03-10.38-26.72
+	c-1.77-1.45-4.4-1.5-3.78,1.97c0.61,3.47,5.33,15.1,2.62,20.23c-1.91,3.63-6.18,9.56-11.59,13.97C2.04,40.93,0.16,42.05,0.77,43.3z"
+	/>
+<path class="st1" d="M17.03,3.71c2.79,9.79,5.23,22.18,2.79,26.05c-2.44,3.85-8.38,9.82-14.01,14.59c0.06-0.02,0.11-0.02,0.17-0.04
+	c5.3-1.5,17.65-9.74,21.01-14.31C30.15,25.66,19.89,7.12,17.03,3.71z"/>
+<path class="st2" d="M63.39,13.48c-0.56-1.33-2.99-2.05-6.26-0.61c-5.67,2.5-22.34,11.19-25.44,17.08
+	c-3.1,5.88,12.69,29.4,15.22,31.14c2.17,1.49,5.32,1.09,4.17-2.95c-1.16-4.04-8.34-18.38-6.04-24.84
+	c1.63-4.57,9.78-12.51,15.45-16.19C62.83,15.58,64.02,14.96,63.39,13.48z"/>
+<path class="st3" d="M38.26,33.46c2.83-6.3,13.8-15.53,21.58-21.35c-0.81,0.08-1.72,0.32-2.71,0.75
+	c-5.67,2.5-22.34,11.19-25.44,17.08c-2.1,3.99,4.5,16.12,9.75,24.03C38.55,45.71,36.55,37.26,38.26,33.46z"/>
+</svg>

src/components/DatePickerOrder.vue

@@ -1,6 +1,6 @@
 <template>
   <el-date-picker v-model="value2" type="daterange" align="right" unlink-panels range-separator="至"
-    start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
+    start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" format="yyyy-MM-dd HH:mm:ss">
   </el-date-picker>
 </template>
 
@@ -13,20 +13,26 @@ export default {
           {
             text: '今天',
             onClick (picker) {
-              // 设置日期范围为今天
-              const end = new Date()
-              const start = new Date()
+              const start = new Date(new Date().setHours(0, 0, 0, 0))
+              const end = new Date(new Date().setHours(23, 59, 59, 999))
               picker.$emit('pick', [start, end])
             }
           },
           {
-            text: '上月',
+            text: '这月',
             onClick (picker) {
               const end = new Date()
-              const start = new Date()
-              start.setMonth(end.getMonth() - 1)
-              start.setDate(1)
-              end.setDate(0)
+              end.setHours(23, 59, 59, 999)
+              const start = new Date(new Date().getFullYear(), new Date().getMonth(), 1, 0, 0, 0, 0)
+              picker.$emit('pick', [start, end])
+            }
+          },
+          {
+            text: '今年',
+            onClick (picker) {
+              const end = new Date()
+              end.setHours(23, 59, 59, 999)
+              const start = new Date(new Date().getFullYear(), 0, 1, 0, 0, 0, 0)
               picker.$emit('pick', [start, end])
             }
           },
@@ -34,24 +40,40 @@ export default {
             text: '最近一周',
             onClick (picker) {
               const end = new Date()
+              end.setHours(23, 59, 59, 999)
               const start = new Date()
-              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+              start.setDate(end.getDate() - 6)
+              start.setHours(0, 0, 0, 0)
               picker.$emit('pick', [start, end])
             }
-          }, {
+          },
+          {
             text: '最近一个月',
             onClick (picker) {
               const end = new Date()
+              end.setHours(23, 59, 59, 999)
               const start = new Date()
-              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+              start.setMonth(end.getMonth() - 1)
+              start.setHours(0, 0, 0, 0)
               picker.$emit('pick', [start, end])
             }
-          }, {
+          },
+          {
             text: '最近三个月',
             onClick (picker) {
               const end = new Date()
+              end.setHours(23, 59, 59, 999)
               const start = new Date()
-              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+              start.setMonth(end.getMonth() - 3)
+              start.setHours(0, 0, 0, 0)
+              picker.$emit('pick', [start, end])
+            }
+          },
+          {
+            text: '上月',
+            onClick (picker) {
+              const end = new Date(new Date().getFullYear(), new Date().getMonth(), 0, 23, 59, 59, 999)
+              const start = new Date(new Date().getFullYear(), new Date().getMonth() - 1, 1, 0, 0, 0, 0)
               picker.$emit('pick', [start, end])
             }
           }
@@ -60,6 +82,20 @@ export default {
       value1: '',
       value2: ''
     }
+  },
+  watch: {
+    value2 (newVal) {
+      if (newVal && newVal.length === 2) {
+        const end = newVal[1]
+        end.setHours(23, 59, 59, 999) // 设置结束日期为当天的23:59:59
+        const startTimestamp = Math.floor(newVal[0].getTime() / 1000) // 转换毫秒为秒
+        const endTimestamp = Math.floor(end.getTime() / 1000) // 转换毫秒为秒
+        this.$emit('dateRangepicked', { start: startTimestamp, end: endTimestamp })
+      }
+      if (newVal === null) {
+        this.$emit('dateRangepicked', { start: '', end: '' })
+      }
+    }
   }
 }
 </script>

src/components/SelectionOrderBack.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-select class="w-100" v-model="value" multiple placeholder="退款状态过滤：空置为不过滤，可多选">
+  <el-select class="w-100" v-model="value" multiple placeholder="退款状态过滤：空置为不过滤（显示全部订单），可多选条件">
     <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
     </el-option>
   </el-select>
@@ -21,9 +21,17 @@ export default {
       }, {
         value: 'rejected',
         label: '拒绝退款'
+      }, {
+        value: 'actively',
+        label: '商家发起退款'
       }],
       value: []
     }
+  },
+  watch: {
+    value (val) {
+      this.$emit('selectedValuesChanged', val)
+    }
   }
 }
 </script>

src/components/SelectionOrderStatus.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-select class="w-100" v-model="value" multiple placeholder="订单状态过滤：空置为不过滤，可多选">
+  <el-select class="w-100" v-model="value" multiple placeholder="订单状态过滤：空置为不过滤（显示全部订单），可多选条件">
     <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
     </el-option>
   </el-select>
@@ -17,7 +17,7 @@ export default {
         label: '待处理'
       }, {
         value: 'processing',
-        label: '处理中'
+        label: '备货处理中'
       }, {
         value: 'shipped',
         label: '已发货'
@@ -30,6 +30,11 @@ export default {
       }],
       value: []
     }
+  },
+  watch: {
+    value (val) {
+      this.$emit('selectedValuesChanged', val)
+    }
   }
 }
 </script>

src/router/index.js

@@ -419,7 +419,7 @@ const routes = [
         }
       },
       {
-        path: '/order/show:id',
+        path: '/order/show/:id',
         component: () => import('@/views/layout/components/main/order/show'),
         meta: {
           title: '订单详情',

src/styles/index.scss

@@ -166,6 +166,7 @@ label {
   border: none !important;
 }
 
+
 .fb {
   font-weight: bold;
 }

src/styles/myIcon.scss

@@ -1 +1 @@
-@import 'https://at.alicdn.com/t/c/font_3703467_d1m3z2xkd1v.css'; //iconfont阿里巴巴
+@import 'https://at.alicdn.com/t/c/font_3703467_it8bp4b57g9.css'; //iconfont阿里巴巴

src/views/layout/components/main/order/index.vue

@@ -3,33 +3,32 @@
     <!-- 用户select选项 -->
     <el-row :gutter="15" class="m-t-0">
       <el-col :span="4">
-        <SelectionShopId class="w-100" v-model="form.shop_id" :allSel="true" />
+        <SelectionShopId class="w-100" v-model="shop_id" :allSel="true" />
       </el-col>
-      <el-col :span="8">
-        <DatePickerOrder class="w-100" />
+      <el-col :span="9">
+        <DatePickerOrder class="w-100" @dateRangepicked="handleDateRangePicked" />
       </el-col>
-      <el-col :span="12">
-        <el-input placeholder="请输入内容" v-model="input3" class="w-100">
+      <el-col :span="11">
+        <!-- <el-input placeholder="请输入内容" v-model="input3" class="w-100">
           <el-select v-model="select" slot="prepend" placeholder="请选择" class="w-120px">
             <el-option label="餐厅名" value="1"></el-option>
             <el-option label="订单号" value="2"></el-option>
             <el-option label="用户电话" value="3"></el-option>
           </el-select>
-          <el-button slot="append" icon="el-icon-search"></el-button>
-        </el-input>
+        </el-input> -->
       </el-col>
     </el-row>
     <el-row :gutter="15">
-      <el-col :span="14">
-        <SelectionOrderStatus />
+      <el-col :span="13">
+        <SelectionOrderStatus @selectedValuesChanged="handleOrderStatusChange" />
       </el-col>
-      <el-col :span="10">
-        <SelectionOrderBack />
+      <el-col :span="11">
+        <SelectionOrderBack @selectedValuesChanged="handleOrderBackChange" />
       </el-col>
     </el-row>
     <!-- 订单列表 -->
     <el-table class="m-t-20 w-100" ref="myTable"
-      :data="orderList.slice((currentPage - 1) * pageSize, currentPage * pageSize)" border tooltip-effect="dark">
+      :data="orderListArr.slice((currentPage - 1) * pageSize, currentPage * pageSize)" border tooltip-effect="dark">
       <el-table-column align="center" type="selection" width="40">
       </el-table-column>
       <el-table-column align="center" prop="id" label="id" width="50">
@@ -43,7 +42,7 @@
           {{ scope.row.addtime | parseTime('{y}-{m}-{d} {h}:{i}') }}
         </template>
       </el-table-column>
-      <el-table-column prop="controler" label="操作" width="290" min-width="290">
+      <el-table-column prop="controler" label="操作" width="400" min-width="400">
         <template slot-scope="scope">
           <el-button-group>
             <el-button type="warning" icon="el-icon-edit">同意退款</el-button>
@@ -56,7 +55,7 @@
     </el-table>
     <!-- 分页 -->
     <el-pagination class="m-t-20" layout="prev, pager, next" :current-page.sync="currentPage" :page-size="pageSize"
-      :total="orderList.length">
+      :total="orderListArr.length">
     </el-pagination>
   </div>
 </template>
@@ -75,9 +74,11 @@ export default {
     return {
       pageSize: 50, // 每页显示记录条数
       currentPage: 1, // 当前页
-      form: {
-        shop_id: ''
-      }
+      shop_id: '', // 搜索条件 商铺id
+      start_time: '', // 搜索条件 起始时间
+      end_time: '', // 搜索条件 结束时间
+      status: [], // 搜索条件 订单状态
+      back: []// 搜索条件 退款状态
     }
   },
   components: {
@@ -90,11 +91,67 @@ export default {
     // 获取订单列表
     orderList () {
       return this.$store.state.orderList
+    },
+    // 过滤订单列表组
+    orderListArr () {
+      if (this.orderList.length > 0) {
+        let filteredList = this.orderList
+        // 过滤shop_id
+        if (this.shop_id !== '') {
+          filteredList = filteredList.filter(order => order.shop_id === this.shop_id)
+        }
+        // 过滤时间
+        if (this.start_time !== '' && this.end_time !== '') {
+          const startTime = parseInt(this.start_time)
+          const endTime = parseInt(this.end_time)
+          filteredList = filteredList.filter(order => {
+            const orderTime = parseInt(order.addtime)
+            return startTime < orderTime && orderTime < endTime
+          })
+        }
+        // 过滤订单状态
+        if (this.status.length > 0) {
+          filteredList = filteredList.filter(order => {
+            // 检查订单状态是否在this.status数组中
+            return this.status.includes(order.status)
+          })
+        }
+        // 过滤订单状态
+        if (this.back.length > 0) {
+          filteredList = filteredList.filter(order => {
+            // 检查订单状态是否在this.status数组中
+            return this.back.includes(order.back)
+          })
+        }
+        return filteredList
+      } else {
+        return []
+      }
     }
 
   },
   methods: {
-    countSelIdArr
+    countSelIdArr,
+    /**
+     * @description: 日期组件绑定事件
+     */
+    handleDateRangePicked (dateRange) {
+      // 在这里处理从日期选择器组件传递过来的时间戳数据
+      this.start_time = dateRange.start
+      this.end_time = dateRange.end
+    },
+    /**
+     * @description: 订单状态选择组件绑定事件
+     */
+    handleOrderStatusChange (val) {
+      this.status = val
+    },
+    /**
+     * @description: 退货选择组件绑定事件
+     */
+    handleOrderBackChange (val) {
+      this.back = val
+    }
   },
   watch: {
   },

src/views/layout/components/main/order/show.vue

@@ -2,207 +2,318 @@
   <div class="app-container">
     <el-row class="m-t-0">
       <el-col :span="24">
-        <el-container>
-          <el-header height="42px" class="l-h-42 p-l-10 p-r-10 border border-b-n">
-            <div class="l">
-              <i v-if="pageState === 'add'" class="iconfont el-icon-plus f-s-20"></i>
-              <i v-else class="iconfont el-icon-edit f-s-20"></i>
-              <font class="m-l-10 f-s-18 fb">{{ $route.meta.title }}</font>
-            </div>
-          </el-header>
-          <el-main class="border p-20">
-            <el-form ref="form" :model="form" label-width="120px">
-              <el-form-item v-if="pageState === 'add'" label="所属商铺">
-                <SelectionShopId v-model="form.shop_id" />
-              </el-form-item>
-              <el-form-item label="账号">
-                <el-input v-model="form.name" placeholder="账号" :disabled="adminId == undefined ? false : true" />
-              </el-form-item>
-              <el-form-item label="昵称">
-                <el-input v-model="form.uname" placeholder="用户昵称" />
-              </el-form-item>
-              <el-form-item label="头像">
-                <el-upload class="avatar-uploader" drag name="file" :action="action" :headers="myheader"
-                  :show-file-list="false" :on-success="handleUpSuccess" :on-error="handleUpErr"
-                  :before-upload="beforeAvatarUpload">
-                  <img v-if="form.upFile != ''"
-                    :src="$store.state.settings.host + '/Data/UploadFiles/temp/' + form.upFile" class="avatar" />
-                  <img v-else-if="form.oldFile != '' && form.upFile == ''"
-                    :src="$store.state.settings.host + '/Data/UploadFiles/photo/' + form.oldFile" class="avatar" />
-                  <template v-else>
-                    <i class="el-icon-plus f-s-30 m-t-70 seatFontColor"></i>
-                    <div class="el-upload__text"><em>建议100*100像素 <br> jpg png gif </em></div>
-                  </template>
-                </el-upload>
-              </el-form-item>
-              <el-form-item :label="adminId == undefined ? '初始密码' : '新密码'">
-                <el-input show-password v-model="form.pwd" :placeholder="adminId == undefined ? '密码' : '空置则为保持原密码'" />
-              </el-form-item>
-              <el-form-item v-if="pageState == 'add' ? true : false">
-                <el-button type="primary" icon="el-icon-plus" @click="addAdmin">创建</el-button>
-                <el-button @click="setForm({ shop_id: form.shop_id, oldFile: '' }); form.upFile = ''"
-                  class="iconfont icon-qingchu">
-                  <font class="m-l-5">重填</font>
-                </el-button>
-              </el-form-item>
-              <el-form-item v-else>
-                <el-button type="primary" icon="el-icon-edit" @click="saveAdmin">更新</el-button>
-              </el-form-item>
-            </el-form>
-          </el-main>
-        </el-container>
+        <!-- 订单梗概 -->
+        <el-descriptions class="margin-top m-b-20" title="订单梗概" :column="3" border>
+          <el-descriptions-item>
+            <template slot="label">
+              <i class="iconfont icon-dingdanshoukuan"></i>
+              状态
+            </template>
+            {{ orderStatus }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label">
+              <i class="iconfont icon-dingdanguanli"></i>
+              订单编号
+            </template>
+            {{ orderDetails.order_sn }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label">
+              <i class="iconfont icon-shichang"></i>
+              下单时间
+            </template>
+            {{ orderDetails.addtime | parseTime('{y}-{m}-{d} {h}:{i}') }}
+          </el-descriptions-item>
+          <el-descriptions-item :span="2" v-if="orderDetails.back !== 'normal'">
+            <template slot="label">
+              <i class="iconfont icon-tuikuan"></i>
+              退款
+            </template>
+            {{ orderBack }}
+          </el-descriptions-item>
+          <el-descriptions-item v-if="orderDetails.back !== 'normal'">
+            <template slot="label">
+              <i class="iconfont icon-qiandai"></i>
+              退款金额
+            </template>
+            {{ orderDetails.refund_price }}元
+          </el-descriptions-item>
+          <el-descriptions-item :span="3" v-if="orderDetails.back_remark !== ''">
+            <template slot="label">
+              <i class="el-icon-user"></i>
+              退款原因
+            </template>
+            {{ orderDetails.back_remark }}
+          </el-descriptions-item>
+          <el-descriptions-item :span="1.5" v-if="orderDetails.back !== 'normal'">
+            <template slot="label">
+              <i class="iconfont icon-shichang"></i>
+              退款申请时间
+            </template>
+            {{ orderDetails.back_addtime | parseTime('{y}-{m}-{d} {h}:{i}') }}
+          </el-descriptions-item>
+          <el-descriptions-item :span="1.5" v-if="orderDetails.back !== 'normal'">
+            <template slot="label">
+              <i class="iconfont icon-shichang"></i>
+              退款确定时间
+            </template>
+            {{ orderDetails.back_time | parseTime('{y}-{m}-{d} {h}:{i}') }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label">
+              <i class="iconfont icon-zhongliang"></i>
+              总重量
+            </template>
+            {{ orderDetails.total_weight }}克
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label">
+              <i class="iconfont icon-qiandai"></i>
+              总价格
+            </template>
+            {{ orderDetails.total_price }}元
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label">
+              <i class="iconfont icon-liuyan"></i>
+              买家留言
+            </template>
+            {{ orderDetails.remark }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label">
+              <i class="iconfont icon-beizhu"></i>
+              订单备注
+            </template>
+            {{ orderDetails.remark }}
+          </el-descriptions-item>
+        </el-descriptions>
+        <!-- 收货信息 -->
+        <el-descriptions class="margin-top m-b-20" title="收货信息" :column="3" border>
+          <el-descriptions-item>
+            <template slot="label">
+              <i class="iconfont icon-id"></i>
+              客户ID
+            </template>
+            {{ orderDetails.uid }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label">
+              <i class="el-icon-user"></i>
+              收货人称呼
+            </template>
+            {{ orderDetails.receiver }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label">
+              <i class="iconfont icon-gf_phoneLoudspeaker"></i>
+              电话
+            </template>
+            {{ orderDetails.tel }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label">
+              <i class="iconfont icon-jingqu"></i>
+              收获站点
+            </template>
+            {{ orderDetails.receive_site_name }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label">
+              <i class="iconfont icon-shuzishurukuang_line"></i>
+              取餐号
+            </template>
+            {{ orderDetails.food_sn }}
+          </el-descriptions-item>
+        </el-descriptions>
+        <!-- spu -->
+        <div class="el-descriptions__header">
+          <div class="el-descriptions__title">订单详情</div>
+          <div class="el-descriptions__extra"></div>
+        </div>
+        <el-descriptions class="margin-top m-b-20" v-for="spu, index in spuList" :key="index" :column="3" border>
+          <el-descriptions-item :span="3">
+            <template slot="label">
+              <i class="iconfont icon-chanpinliebiao-02"></i>
+              SPU
+            </template>
+            {{ spu.spu_name }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label">
+              <i class="iconfont icon-tuxiang"></i>
+              商品图片
+            </template>
+            <img width="60" height="60" :src="$store.state.settings.host + '/Data/UploadFiles/spu/' + spu.spu_photo" />
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label">
+              <i class="iconfont icon-id"></i>
+              商品ID
+            </template>
+            {{ spu.spu_id }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label">
+              <i class="iconfont icon-a-XXXbianhao"></i>
+              商品编号
+            </template>
+            {{ spu.spu_number }}
+          </el-descriptions-item>
+          <!-- sku List-->
+          <template v-for="sku in spu.sku_arr">
+            <el-descriptions-item :span="3">
+              <template slot="label">
+                <i class="iconfont icon-sku"></i>
+                SKU
+              </template>
+              {{ sku.arr_name }}：<el-tag>{{ sku.sku_name }}</el-tag>
+            </el-descriptions-item>
+            <el-descriptions-item>
+              <template slot="label">
+                <i class="iconfont icon-tuxiang"></i>
+                单品图片
+              </template>
+              <img width="60" height="60" :src="$store.state.settings.host + '/Data/UploadFiles/sku/' + sku.sku_photo" />
+            </el-descriptions-item>
+            <el-descriptions-item>
+              <template slot="label">
+                <i class="iconfont icon-id"></i>
+                单品ID
+              </template>
+              {{ sku.sku_id }}
+            </el-descriptions-item>
+            <el-descriptions-item>
+              <template slot="label">
+                <i class="iconfont icon-a-XXXbianhao"></i>
+                单品编号
+              </template>
+              {{ sku.sku_number }}
+            </el-descriptions-item>
+            <el-descriptions-item>
+              <template slot="label">
+                <i class="iconfont icon-yunsuankongjian"></i>
+                购买数量
+              </template>
+              {{ sku.sku_totol }} {{ sku.sku_unit }}
+            </el-descriptions-item>
+            <el-descriptions-item>
+              <template slot="label">
+                <i class="iconfont icon-zhongliang"></i>
+                单品重量
+              </template>
+              {{ sku.sku_weight }}克
+            </el-descriptions-item>
+            <el-descriptions-item>
+              <template slot="label">
+                <i class="iconfont icon-qiandai"></i>
+                单价
+              </template>
+              {{ sku.sku_price }}元
+            </el-descriptions-item>
+            <el-descriptions-item :span="3">
+              <template slot="label">
+                <i class="iconfont icon-putaway"></i>
+                进货渠道
+              </template>
+              {{ sku.sku_purchase_channel }}
+            </el-descriptions-item>
+          </template>
+        </el-descriptions>
       </el-col>
     </el-row>
   </div>
 </template>
 
 <script>
-import SelectionShopId from '@/components/SelectionShopId'
+import { parseTime } from '@/utils'
 
 export default {
-  name: 'AdminAdd',
+  name: 'OrderShow',
   data () {
     return {
-      action: this.$store.state.settings.baseURL + this.$store.state.settings.apiAdminPath + 'upImgFile',
-      myheader: { token: this.$store.state.user.token },
-      form: {
-        shop_id: '',
-        name: '',
-        uname: '',
-        upFile: '',
-        oldFile: '',
-        pwd: ''
-      },
-      adminId: this.$route.params.id, // get参数 获取飞机id 没有为添加页面
-      pageState: 'add', // 页面状态
-      admin: null
+      orderId: this.$route.params.id, // get参数 获取飞机id 没有为添加页面
+      orderStatus: '', // 订单状态 文字
+      orderBack: ''// 退款状态 文字
     }
   },
-  components: {
-    SelectionShopId
-  },
   computed: {
     /**
-     * @description: 获取管理员列表
+     * @description: 订单列表
      */
-    adminList () {
-      return this.$store.state.adminList
+    orderList () {
+      return this.$store.state.orderList
+    },
+    /**
+     * @description: 订单详情
+     */
+    orderDetails () {
+      if (this.orderList.length > 0) {
+        return this.orderList.find(order => order.id === this.orderId)
+      } else {
+        return {}
+      }
+    },
+    /**
+     * @description: 解构spu
+     */
+    spuList () {
+      if (Object.keys(this.orderDetails).length > 0) {
+        return JSON.parse(this.orderDetails.product_snapshot)
+      } else {
+        return {}
+      }
     }
   },
   methods: {
-    /* 文件上传表单 */
-    handleUpSuccess (res) {
-      if (res.status === 0) {
-        this.$message.error(res.msg)
-      } else {
-        this.form.upFile = res.data
-        this.$message.success(res.msg)
-      }
-    },
-    beforeAvatarUpload (file) {
-      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif'
-      if (!isJPG) {
-        this.$message.error('上传图片只能是JPG|PNG|GIF格式!')
-      }
-      return isJPG
-    },
-    handleUpErr () {
-      this.$message.error('接口访问失败')
-    },
-    // 设置表单
-    setForm (data) {
-      this.form.shop_id = data.shop_id
-      this.form.name = data.name
-      this.form.uname = data.uname
-      this.form.oldFile = data.oldFile
-      if (Object.keys(data).length === 0) {
-        this.$message.warning('清空表单')
-      }
-    },
-    // 初始化页面 添加or编辑
-    initPage () {
-      if (this.adminId === undefined) {
-        this.pageState = 'add'
-      } else {
-        this.pageState = 'edit'
-        this.admin = this.adminList.find((item) => item.id === this.adminId)
-        if (this.admin) {
-          const data = {
-            name: this.admin.name,
-            uname: this.admin.uname,
-            oldFile: this.admin.photo,
-            shop_id: this.admin.shop_id
-          }
-          this.setForm(data)
-        }
-      }
-    },
     /**
-     * @description: 创建新账号
+     * @description: 订单状态转成文字形式
+     * @param {*} val 订单状态值
      */
-    async addAdmin () {
-      const res = await this.$store.dispatch('fetchAddAdmin', this.form)
-      if (res.data.status === 1) {
-        this.$router.push('/admin/index')
+    statusToStr (val) {
+      if (val.status === 'canceled') {
+        this.orderStatus = '订单已取消'
+      } else if (val.status === 'unpaid') {
+        this.orderStatus = '未付款'
+      } else if (val.status === 'pending') {
+        this.orderStatus = '未承接订单'
+      } else if (val.status === 'processing') {
+        this.orderStatus = '备货中'
+      } else if (val.status === 'shipped') {
+        this.orderStatus = '已发货'
+      } else if (val.status === 'completed') {
+        this.orderStatus = '已送达'
+      } else if (val.status === 'closed') {
+        this.orderStatus = '交易已完成'
       }
-    },
-    /**
-     * @description: 更新账号
-     */
-    async saveAdmin () {
-      this.form.id = this.adminId
-      const res = await this.$store.dispatch('fetchSaveAdmin', this.form)
-      if (res.data.status === 1) {
-        this.$router.push('/admin/index')
+      if (val.back === 'normal') {
+        this.orderBack = '未申请过'
+      } else if (val.back === 'requested') {
+        this.orderBack = '申请退款'
+      } else if (val.back === 'refunded') {
+        this.orderBack = '已退款'
+      } else if (val.back === 'rejected') {
+        this.orderBack = '已拒绝退款'
+      } else if (val.back === 'actively') {
+        this.orderBack = '商家予退'
       }
     }
   },
   watch: {
-    adminList () {
-      this.initPage()// 初始化页面
+    orderDetails (val) {
+      this.statusToStr(val)
     }
   },
   created () {
-    if (this.adminList.length > 0) {
-      this.initPage()// 初始化页面
+    if (Object.keys(this.orderDetails).length > 0) {
+      this.statusToStr(this.orderDetails)
     }
+  },
+  filters: {
+    parseTime
   }
 }
 </script>
 
-<style scoped>
-.line {
-  text-align: center;
-}
-
-.avatar-uploader .el-upload {
-  border: 1px dashed #d9d9d9;
-  border-radius: 6px;
-  cursor: pointer;
-  position: relative;
-  overflow: hidden;
-}
-
-.avatar-uploader .el-upload:hover {
-  border-color: #409EFF;
-}
-
-.avatar-uploader-icon {
-  font-size: 28px;
-  color: #8c939d;
-  width: 178px;
-  height: 178px;
-  line-height: 178px;
-  text-align: center;
-}
-
-.avatar {
-  width: 178px;
-  height: 178px;
-  display: block;
-}
-
-.el-upload__text {
-  line-height: 1.2em !important;
-}
-</style>
+<style lang="scss" scoped></style>