update

src/components/base/tableList.vue

@@ -60,6 +60,7 @@
         :current-page.sync="page.currentPage"
         @size-change="pageSizeChange"
         @current-change="fetchList"
+        :hide-on-single-page="true"
         v-if="hasPagination"
       >
       </el-pagination>

src/pages/goods/goods/edit.vue

@@ -284,7 +284,7 @@ export default {
     },
     // 成功回调
     handleSuccess(data) {
-      this.$message({ message: '保存商品成功', type: 'success' })
+      // this.$message({ message: '保存商品成功', type: 'success' })
       this.$router.push({ path: '/preview', query: { shop_id: this.shopId, id: data.spu_id } })
     },
     // 确定添加商品

src/pages/goods/goods/index.vue

@@ -9,6 +9,20 @@
           <el-button type="primary">发布商品</el-button>
         </router-link>
       </template>
+      <template v-slot:table-goods="{ row }">
+        <div class="table-goods">
+          <el-image :src="imageUrl(row.chart_oss)" fit="cover" class="table-goods-pic">
+            <div slot="error" class="image-slot">
+              <i class="el-icon-picture-outline"></i>
+            </div>
+          </el-image>
+          <div class="table-goods-name">{{ row.spu_name }}</div>
+        </div>
+      </template>
+      <template v-slot:table-view="{ row }">
+        <p>访客数：{{ row.usesr_view }}</p>
+        <p>浏览量：{{ row.page_view }}</p>
+      </template>
       <template v-slot:table-x="{ row }">
         <el-button type="text" @click="handleUpdate(row)">编辑</el-button>
         <el-button type="text" @click="handlePromote(row)">推广</el-button>
@@ -74,27 +88,37 @@ export default {
           }
         ],
         columns: [
-          { type: 'selection', align: 'left' },
-          { label: '商品名', prop: 'spu_name' },
-          { label: '价格(元)', prop: 'price_zone' },
-          { label: '访问量', prop: 'page_view' },
-          { label: '库存', prop: 'stock' },
-          { label: '销量', prop: 'sales_volume' },
-          { label: '创建时间', prop: 'create_time', width: 180 },
+          { type: 'selection' },
+          { label: '商品名', prop: 'spu_name', slots: 'table-goods', minWidth: 140 },
+          { label: '价格(元)', prop: 'price_zone', align: 'center' },
+          { label: '访问量', prop: 'page_view', slots: 'table-view', minWidth: 120 },
+          { label: '库存', prop: 'stock', align: 'center' },
+          { label: '销量', prop: 'sales_volume', align: 'center' },
+          { label: '创建时间', prop: 'create_time', width: 110 },
           {
             label: '商品状态',
             prop: 'status',
+            align: 'center',
             computed({ row }) {
               const map = { 1: '仓库中', 2: '销售中', 3: '已售罄', 4: '下架', 5: '已删除' }
               return map[row.status]
             }
           },
-          { label: '操作', slots: 'table-x', width: 150 }
+          { label: '操作', slots: 'table-x', align: 'right', width: 150 }
         ]
       }
     }
   },
   methods: {
+    imageUrl(value) {
+      try {
+        const imgList = value ? JSON.parse(value) : []
+        const [first = {}] = imgList
+        return first.url
+      } catch (error) {
+        return ''
+      }
+    },
     beforeRequest(params) {
       params.status = this.activeName === '0' ? '' : this.activeName
       return params
@@ -145,3 +169,33 @@ export default {
   }
 }
 </script>
+
+<style lang="scss">
+.table-goods {
+  display: flex;
+  align-items: center;
+}
+.table-goods-pic {
+  margin-right: 10px;
+  width: 60px;
+  height: 60px;
+}
+.table-goods-name {
+  flex: 1;
+  color: #3276fc;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+}
+.image-slot {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  background: #f5f7fa;
+  color: #909399;
+  font-size: 14px;
+}
+</style>

src/pages/order/index.vue

@@ -10,14 +10,22 @@
           <el-button type="primary">新增订单</el-button>
         </router-link>
       </template>
+      <template v-slot:table-goods="{ row }">
+        <div class="table-goods">
+          <el-image :src="imageUrl(row.chart_oss)" fit="cover" class="table-goods-pic">
+            <div slot="error" class="image-slot">
+              <i class="el-icon-picture-outline"></i>
+            </div>
+          </el-image>
+          <div class="table-goods-name">{{ row.spu_name }}</div>
+        </div>
+      </template>
       <template v-slot:table-price="{ row }">
         <p>{{ row.product_price }}</p>
-        <p>{{ row.buy_count }}</p>
+        <p>1件</p>
       </template>
       <template v-slot:table-x="{ row }">
-        <el-button type="text" @click="handleUpdate(row)">编辑</el-button>
-        <el-button type="text" @click="handlePromote(row)">推广</el-button>
-        <el-button type="text" @click="handleCopy(row)">复制</el-button>
+        <el-button type="text" @click="handleView(row)">查看</el-button>
       </template>
     </table-list>
   </app-card>
@@ -37,7 +45,7 @@ export default {
       activeName: '0',
       tabList: [
         { label: '全部', name: '0' },
-        { label: '代付款', name: '2' },
+        { label: '待付款', name: '2' },
         { label: '待发货', name: '3' },
         { label: '已发货', name: '4' },
         { label: '已完成', name: '5' },
@@ -52,53 +60,118 @@ export default {
       return {
         remote: {
           httpRequest: getOrderList,
-          params: { shop_id: this.$store.state.shopId },
+          params: { shop_id: this.$store.state.shopId, spu_id: '', order_status: '' },
           beforeRequest: this.beforeRequest
         },
         filters: [
           {
             type: 'input',
-            prop: 'name',
-            placeholder: '请输入商品名称'
+            prop: 'spu_id',
+            placeholder: '请输入商品编号'
           },
           {
             type: 'select',
-            prop: 'group_id',
+            prop: 'order_status',
             options: [
-              { label: '活动', value: 1 },
-              { label: '报名费', value: 2 },
-              { label: '学费', value: 3 },
-              { label: '活动', value: 4 }
-            ]
+              { label: '待付款', name: '2' },
+              { label: '待发货', name: '3' },
+              { label: '已发货', name: '4' },
+              { label: '已完成', name: '5' },
+              { label: '已关闭', name: '6' },
+              { label: '售后中', name: '7' }
+            ],
+            valueKey: 'name'
           }
         ],
         columns: [
-          { label: '商品', prop: 'shop_name' },
-          { label: '单价(元)/数量', prop: 'product_price', slots: 'table-price' },
-          { label: '售后', prop: 'sellPrice' },
-          { label: '买家 / 收货人', prop: 'shipping_user' },
-          { label: '配送方式', prop: 'sellCount' },
-          { label: '实收金额(元)', prop: 'payment_money' },
-          { label: '订单状态', prop: 'order_status' },
-          { label: '操作', slots: 'table-x' }
+          { label: '商品', prop: 'shop_name', slots: 'table-goods', minWidth: 140 },
+          { label: '单价(元)/数量', prop: 'product_price', slots: 'table-price', align: 'right' },
+          { label: '订单号', prop: 'order_id' },
+          { label: '下单时间', prop: 'create_time', width: 110 },
+          { label: '买家 / 收货人', prop: 'shipping_user', align: 'center' },
+          { label: '实收金额(元)', prop: 'payment_money', align: 'center' },
+          {
+            label: '支付方式',
+            prop: 'payment_method',
+            align: 'center',
+            computed({ row }) {
+              const map = {
+                1: '现金',
+                2: '余额',
+                3: '网银',
+                4: '支付宝',
+                5: '微信',
+                7: '微信JSAPI',
+                8: '微信H5'
+              }
+              return map[row.payment_method]
+            }
+          },
+          {
+            label: '订单状态',
+            prop: 'order_status',
+            align: 'center',
+            computed({ row }) {
+              const map = { 1: '待付款', 2: '待发货', 3: '已发货', 4: '已完成', 5: '已关闭', 6: '售后' }
+              return map[row.order_status]
+            }
+          },
+          { label: '操作', slots: 'table-x', align: 'right', width: 60 }
         ]
       }
     }
   },
   methods: {
+    imageUrl(value) {
+      try {
+        const imgList = value ? JSON.parse(value) : []
+        const [first = {}] = imgList
+        return first.url
+      } catch (error) {
+        return ''
+      }
+    },
     beforeRequest(params) {
-      params.status = this.activeName === '0' ? '' : this.activeName
+      // params.order_status = this.activeName === '0' ? '' : this.activeName
       return params
     },
     handleClick() {
       this.$refs.list.refetch(true)
     },
-    // 编辑
-    handleUpdate() {},
-    // 推广
-    handlePromote() {},
-    // 复制
-    handleCopy() {}
+    // 查看
+    handleView(row) {
+      this.$router.push({ name: 'orderDetail', params: { id: row.order_id } })
+    }
   }
 }
 </script>
+
+<style lang="scss">
+.table-goods {
+  display: flex;
+  align-items: center;
+}
+.table-goods-pic {
+  margin-right: 10px;
+  width: 60px;
+  height: 60px;
+}
+.table-goods-name {
+  flex: 1;
+  color: #3276fc;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+}
+.image-slot {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  background: #f5f7fa;
+  color: #909399;
+  font-size: 14px;
+}
+</style>

src/pages/preview.vue

 <template>
-  <div class="preview"></div>
+  <div class="preview">
+    <div class="preview-hd">
+      <div class="preview-hd-inner">
+        <div class="preview-hd-left">预览：<span class="active">手机版</span><span>PC版</span></div>
+        <div class="preview-hd-right">
+          <el-button size="small" type="primary" plain @click="handleEdit">编辑本商品</el-button>
+          <el-button size="small" type="primary" plain @click="handleAdd">发布新商品</el-button>
+          <el-button size="small" type="primary" @click="handleClose">关闭</el-button>
+        </div>
+      </div>
+    </div>
+    <div class="preview-bd"></div>
+  </div>
 </template>
 
 <script>
-export default {}
+export default {
+  computed: {
+    shopId() {
+      return this.$route.query.shop_id
+    },
+    goodsId() {
+      return this.$route.query.id
+    }
+  },
+  methods: {
+    handleEdit() {
+      this.$router.push({ name: 'goodsEdit', params: { id: this.goodsId } })
+    },
+    handleAdd() {
+      this.$router.push({ name: 'goodsAdd' })
+    },
+    handleClose() {
+      this.$router.replace({ name: 'goodsList' })
+    }
+  }
+}
 </script>
 
-<style>
+<style lang="scss">
+.preview-hd {
+  background-color: #fff;
+  border-bottom: 1px solid #c1c1c1;
+}
+.preview-hd-inner {
+  display: flex;
+  align-items: center;
+  max-width: 720px;
+  margin: 0 auto;
+  padding: 10px 0;
+}
+.preview-hd-left {
+  flex: 1;
+  span {
+    margin-right: 20px;
+  }
+  .active {
+    border-bottom: 1px solid #3276fc;
+  }
+}
 </style>

src/router/routes.js

@@ -33,6 +33,7 @@ export default [
     meta: { title: '商品' },
     children: [
       {
+        name: 'goodsList',
         path: '',
         component: () => import(/* webpackChunkName: "goods" */ '@/pages/goods/goods/index'),
         meta: { title: '商品列表' }
@@ -64,15 +65,17 @@ export default [
     meta: { title: '订单' },
     children: [
       {
+        name: 'orderList',
         path: '',
         component: () => import(/* webpackChunkName: "order" */ '@/pages/order/index'),
         meta: { title: '订单列表' }
+      },
+      {
+        name: 'orderDetail',
+        path: 'detail/:id',
+        component: () => import(/* webpackChunkName: "order" */ '@/pages/order/detail'),
+        meta: { title: '订单详情' }
       }
-      // {
-      //   path: 'detail/:id',
-      //   component: orderDetail,
-      //   meta: { title: '订单详情' }
-      // }
     ]
   },
   // 设置