bug fixes

package-lock.json

@@ -15,6 +15,7 @@
         "clipboard": "^2.0.8",
         "core-js": "^3.12.1",
         "cross-env": "^7.0.3",
+        "dayjs": "^1.10.5",
         "element-ui": "^2.15.1",
         "lodash": "^4.17.21",
         "qrcode.vue": "^1.7.0",
@@ -4010,6 +4011,11 @@
         "node": "*"
       }
     },
+    "node_modules/dayjs": {
+      "version": "1.10.5",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.10.5.tgz",
+      "integrity": "sha512-BUFis41ikLz+65iH6LHQCDm4YPMj5r1YFLdupPIyM4SGcXMmtiLQ7U37i+hGS8urIuqe7I/ou3IS1jVc4nbN4g=="
+    },
     "node_modules/de-indent": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
@@ -16942,6 +16948,11 @@
       "integrity": "sha1-QGXiATz5+5Ft39gu+1Bq1MZ2kGI=",
       "dev": true
     },
+    "dayjs": {
+      "version": "1.10.5",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.10.5.tgz",
+      "integrity": "sha512-BUFis41ikLz+65iH6LHQCDm4YPMj5r1YFLdupPIyM4SGcXMmtiLQ7U37i+hGS8urIuqe7I/ou3IS1jVc4nbN4g=="
+    },
     "de-indent": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",

package.json

@@ -75,6 +75,7 @@
     "clipboard": "^2.0.8",
     "core-js": "^3.12.1",
     "cross-env": "^7.0.3",
+    "dayjs": "^1.10.5",
     "element-ui": "^2.15.1",
     "lodash": "^4.17.21",
     "qrcode.vue": "^1.7.0",

src/components/base/tableList.vue

@@ -5,7 +5,7 @@
       <div class="table-list-filter" v-if="filters.length">
         <el-form :inline="true" :model="params" ref="filterForm">
           <template v-for="item in filters">
-            <el-form-item :prop="item.prop" :key="item.prop">
+            <el-form-item :label="item.label" :prop="item.prop" :key="item.prop">
               <template v-if="item.slots">
                 <slot :name="item.slots" v-bind="{ params }"></slot>
               </template>
@@ -31,7 +31,7 @@
               </template>
             </el-form-item>
           </template>
-          <el-form-item>
+          <el-form-item class="filter-buttons">
             <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
             <el-button icon="el-icon-refresh-left" @click="reset">重置</el-button>
           </el-form-item>
@@ -64,7 +64,7 @@
         :total="page.total"
         :current-page.sync="page.currentPage"
         @size-change="pageSizeChange"
-        @current-change="fetchList"
+        @current-change="fetchList()"
         :hide-on-single-page="true"
         v-if="hasPagination"
       >

src/components/common/pageMain.vue

@@ -72,7 +72,7 @@ export default {
 .main-content .form-container {
   width: 600px;
   margin: 0 auto;
-  padding: 80px 0;
+  padding: 20px 0;
 }
 .main-content .box-card {
   min-height: 460px;

src/components/goods/goodsItem.vue

@@ -23,7 +23,7 @@ export default {
       try {
         const imgList = value ? JSON.parse(value) : []
         const [first = {}] = imgList
-        return first.url
+        return first.url + '?x-oss-process=image/resize,m_fill,h_60,w_60'
       } catch (error) {
         return ''
       }

src/components/layout/sidebar.vue

@@ -27,7 +27,7 @@ export default {
   data() {
     return {
       menuList: [
-        { name: '首页', path: '/dashboard', icon: 'el-icon-house' },
+        { name: '概况', icon: 'el-icon-house' },
         {
           name: '商品',
           path: '/goods',

src/pages/goods/goods/index.vue

@@ -126,15 +126,6 @@ export default {
     }
   },
   methods: {
-    imageUrl(value) {
-      try {
-        const imgList = value ? JSON.parse(value) : []
-        const [first = {}] = imgList
-        return first.url
-      } catch (error) {
-        return ''
-      }
-    },
     beforeRequest(params, isReset) {
       // 重置
       if (isReset) {

src/pages/order/detail.vue

@@ -143,15 +143,6 @@ export default {
         this.data = first
       })
     },
-    imageUrl(value) {
-      try {
-        const imgList = value ? JSON.parse(value) : []
-        const [first = {}] = imgList
-        return first.url
-      } catch (error) {
-        return ''
-      }
-    },
     paymentMethod(value) {
       const map = {
         1: '微信扫码支付',

src/pages/order/index.vue

@@ -10,6 +10,33 @@
           <el-button type="primary">新增订单</el-button>
         </router-link>
       </template>
+      <template v-slot:filter-time>
+        <div class="filter-time">
+          <el-date-picker
+            v-model="orderStartTime"
+            type="datetime"
+            value-format="yyyy-MM-dd HH:mm:ss"
+            placeholder="开始时间"
+            style="width: 193px"
+            @change="orderTimeChange"
+          ></el-date-picker>
+          至
+          <el-date-picker
+            v-model="orderEndTime"
+            type="datetime"
+            value-format="yyyy-MM-dd HH:mm:ss"
+            placeholder="结束时间"
+            style="width: 193px"
+            @change="orderTimeChange"
+          ></el-date-picker>
+          <el-radio-group v-model="orderActiveDay" @change="setDay">
+            <el-radio :label="0" border>今</el-radio>
+            <el-radio :label="1" border>昨</el-radio>
+            <el-radio :label="7" border>近7天</el-radio>
+            <el-radio :label="30" border>近30天</el-radio>
+          </el-radio-group>
+        </div>
+      </template>
       <template v-slot:table-goods="{ row }">
         <goods-item :data="row"></goods-item>
       </template>
@@ -27,19 +54,19 @@
 </template>
 
 <script>
+import dayjs from 'dayjs'
 // 组件
 import TableList from '@/components/base/tableList'
 import AppCard from '@/components/base/card'
 import GoodsItem from '@/components/goods/goodsItem'
-
 // 接口
 import { getOrderSearchList } from '@/api/order'
-
 export default {
   components: { AppCard, TableList, GoodsItem },
   data() {
     return {
       activeName: '0',
+      radio: '',
       orderStatus: [
         { label: '全部', value: '' },
         { label: '待付款', value: '1' },
@@ -48,7 +75,10 @@ export default {
         { label: '已完成', value: '4' },
         { label: '已关闭', value: '5' },
         { label: '售后中', value: '6' }
-      ]
+      ],
+      orderStartTime: '',
+      orderEndTime: '',
+      orderActiveDay: ''
     }
   },
   computed: {
@@ -70,6 +100,7 @@ export default {
           {
             type: 'select',
             prop: 'search_field',
+            label: '订单搜索',
             options: [
               { label: '商品名称', value: 'spu_name' },
               { label: '订单编号', value: 'order_id' },
@@ -91,6 +122,7 @@ export default {
           {
             type: 'select',
             prop: 'payment_method',
+            label: '付款方式',
             placeholder: '付款方式',
             options: [
               { label: '全部', value: '' },
@@ -102,9 +134,9 @@ export default {
               { label: '支付宝手机网站支付', value: '12' },
               { label: '支付宝网站支付', value: '13' },
               { label: '线下支付', value: '99' }
-            ],
-            style: 'width:180px'
-          }
+            ]
+          },
+          { prop: 'order_time', label: '下单时间', slots: 'filter-time' }
         ],
         columns: [
           { label: '商品', prop: 'shop_name', slots: 'table-goods', minWidth: 140 },
@@ -146,26 +178,60 @@ export default {
     }
   },
   methods: {
-    imageUrl(value) {
-      try {
-        const imgList = value ? JSON.parse(value) : []
-        const [first = {}] = imgList
-        return first.url
-      } catch (error) {
-        return ''
+    beforeRequest(params, isReset) {
+      // 重置
+      if (isReset) {
+        this.orderStartTime = ''
+        this.orderEndTime = ''
+        this.orderActiveDay = ''
       }
-    },
-    beforeRequest(params) {
+      params.order_begin_time = this.orderStartTime
+      params.order_end_time = this.orderEndTime
       params.order_status = this.activeName === '0' ? '' : this.activeName
       return params
     },
+    // tab
     handleClick() {
       this.$refs.list.refetch(true)
     },
     // 查看
     handleView(row) {
       this.$router.push({ name: 'orderDetail', params: { id: row.order_id } })
+    },
+    // 下单时间change事件
+    orderTimeChange() {
+      this.orderActiveDay = ''
+      // 筛选列表
+      this.$refs.list.search()
+    },
+    // 下单时间快捷选项
+    setDay(value) {
+      const startTime = dayjs().subtract(value, 'day')
+      let endTime = dayjs()
+      if (value === 1) {
+        endTime = dayjs().subtract(value, 'day')
+      }
+      this.orderStartTime = startTime.startOf('date').format('YYYY-MM-DD HH:mm:ss')
+      this.orderEndTime = endTime.endOf('date').format('YYYY-MM-DD HH:mm:ss')
+      // 筛选列表
+      this.$refs.list.search()
     }
   }
 }
 </script>
+
+<style lang="scss" scoped>
+::v-deep .filter-buttons {
+  display: block;
+  padding-left: 68px;
+}
+.filter-time {
+  .el-radio {
+    margin: 0 10px 0 0 !important;
+    border-radius: 0;
+  }
+  ::v-deep .el-radio__input {
+    display: none !important;
+  }
+}
+</style>

src/pages/setting/info.vue

 <template>
-  <app-card title="基础信息">
+  <app-card title="店铺信息">
     <template #header-aside><el-button type="text" @click="handleUpdate">编辑</el-button></template>
     <div class="shop-info">
       <img :src="shop.shop_logo" class="shop-logo" />
@@ -20,9 +20,9 @@
     <el-dialog title="店铺信息编辑" width="800px" :visible.sync="dialogVisible">
       <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
         <el-form-item label="店铺名称" prop="shop_name">
-          <el-input v-model="ruleForm.shop_name" placeholder="请输入店铺、品牌、机构的全称"></el-input>
+          <el-input v-model="ruleForm.shop_name" placeholder="请输入店铺、品牌、机构的全称" maxlength="20"></el-input>
         </el-form-item>
-        <el-form-item label="店铺头像" prop="shop_logo">
+        <el-form-item label="店铺Logo" prop="shop_logo">
           <app-upload-image v-model="ruleForm.shop_logo" accept="image/*" :show-file-list="false"></app-upload-image>
         </el-form-item>
         <el-form-item label="店铺有效期" prop="end_time">
@@ -35,7 +35,12 @@
           </el-date-picker>
         </el-form-item>
         <el-form-item label="店铺简介" prop="shop_desc">
-          <el-input type="textarea" v-model="ruleForm.shop_desc" :autosize="{ minRows: 4, maxRows: 6 }"></el-input>
+          <el-input
+            type="textarea"
+            v-model="ruleForm.shop_desc"
+            :autosize="{ minRows: 4, maxRows: 6 }"
+            maxlength="100"
+          ></el-input>
         </el-form-item>
         <el-form-item label="联系电话" prop="shop_tel">
           <el-input v-model="ruleForm.shop_tel"></el-input>
@@ -59,7 +64,10 @@ export default {
     return {
       ruleForm: { shop_name: '', shop_logo: '', shop_desc: '', shop_tel: '', shop_type: '1' },
       rules: {
-        shop_name: [{ required: true, message: '必填', trigger: 'blur' }],
+        shop_name: [
+          { required: true, message: '必填', trigger: 'blur' },
+          { max: 20, message: '最多输入20个字符', trigger: 'blur' }
+        ],
         shop_logo: [{ required: true, message: '请上传', trigger: 'change' }],
         end_time: [{ required: true, message: '请选择', trigger: 'change' }],
         shop_desc: [

src/pages/shop/add.vue

 <template>
   <page-main title="创建店铺">
     <el-card class="box-card">
-      <el-button type="text" @click="$router.replace('/shop')"><i class="el-icon-arrow-left"></i>返回</el-button>
+      <el-button type="text" @click="$router.replace('/shop')"><i class="el-icon-arrow-left"></i>上一步</el-button>
       <div class="choose" v-if="shopTypeChooseVisible">
         <h4 class="choose-title">请选择需要创建的店铺类型</h4>
         <div class="choose-list">
@@ -24,10 +24,11 @@
           <el-button type="primary" @click="entryShop">前往设置</el-button>
         </div>
         <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" v-else>
+          <h2 style="font-size: 16px; font-weight: 400; text-align: center; padding: 20px 0">请填写店铺的相关信息</h2>
           <el-form-item label="店铺名称" prop="shop_name">
-            <el-input v-model="ruleForm.shop_name" placeholder="请输入店铺、品牌、机构的全称"></el-input>
+            <el-input v-model="ruleForm.shop_name" placeholder="请输入店铺、品牌、机构的全称" maxlength="20"></el-input>
           </el-form-item>
-          <el-form-item label="店铺头像" prop="shop_logo">
+          <el-form-item label="店铺Logo" prop="shop_logo">
             <app-upload-image v-model="ruleForm.shop_logo"></app-upload-image>
           </el-form-item>
           <el-form-item label="店铺有效期" prop="end_time">
@@ -40,7 +41,12 @@
             </el-date-picker>
           </el-form-item>
           <el-form-item label="店铺简介" prop="shop_desc">
-            <el-input type="textarea" v-model="ruleForm.shop_desc" :autosize="{ minRows: 4, maxRows: 6 }"></el-input>
+            <el-input
+              type="textarea"
+              v-model="ruleForm.shop_desc"
+              :autosize="{ minRows: 4, maxRows: 6 }"
+              maxlength="100"
+            ></el-input>
           </el-form-item>
           <el-form-item label="联系电话" prop="shop_tel">
             <el-input v-model="ruleForm.shop_tel"></el-input>
@@ -67,7 +73,10 @@ export default {
     return {
       ruleForm: { shop_name: '', shop_logo: '', shop_desc: '', shop_tel: '', shop_type: '1' },
       rules: {
-        shop_name: [{ required: true, message: '必填', trigger: 'blur' }],
+        shop_name: [
+          { required: true, message: '必填', trigger: 'blur' },
+          { max: 20, message: '最多输入20个字符', trigger: 'blur' }
+        ],
         shop_logo: [{ required: true, message: '请上传', trigger: 'change' }],
         end_time: [{ required: true, message: '请选择', trigger: 'change' }],
         shop_desc: [

src/pages/shop/index.vue

@@ -10,7 +10,7 @@
         <div class="item" v-for="item in list" :key="item.shop_id" @click="entryShop(item)">
           <h2 class="title">{{ item.shop_name }}</h2>
           <p>主体信息：{{ item.business_entity }}</p>
-          <p>有效期至：{{ item.end_time }}</p>
+          <p>有效期至：{{ format(item.end_time) }}</p>
           <span class="type">{{ typeName(item.shop_type) }}</span>
         </div>
       </div>
@@ -22,6 +22,7 @@
 </template>
 
 <script>
+import dayjs from 'dayjs'
 // 组件
 import PageMain from '@/components/common/pageMain'
 // 接口
@@ -40,6 +41,9 @@ export default {
     }
   },
   methods: {
+    format(value) {
+      return dayjs(value).format('YYYY-MM-DD')
+    },
     typeName(value) {
       const map = { 1: '微商城' }
       return map[value]
@@ -51,9 +55,15 @@ export default {
       })
     },
     entryShop(item) {
+      const endTime = new Date(item.end_time).getTime()
+      const nowTime = new Date().getTime()
+      if (endTime < nowTime) {
+        this.$message({ type: 'error', message: '店铺不在有效期' })
+        return
+      }
       this.$store.dispatch('setShopId', item.shop_id)
       // 进入店铺概括
-      this.$router.push({ path: '/dashboard' })
+      this.$router.push({ path: '/' })
     },
     // 创建店铺
     addShop() {
@@ -111,6 +121,9 @@ export default {
     font-size: 14px;
     color: #111;
     font-weight: 400;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
   }
   .type {
     display: inline-block;

src/router/routes.js

@@ -2,7 +2,7 @@
 import Layout from '@/components/layout/layout'
 
 export default [
-  { path: '*', redirect: '/dashboard' },
+  { path: '*', redirect: '/goods' },
   {
     path: '/dashboard',
     component: Layout,
@@ -11,7 +11,7 @@ export default [
       {
         path: '',
         component: () => import(/* webpackChunkName: "dashboard" */ '@/pages/dashboard/index'),
-        meta: { title: '首页' }
+        meta: { title: '概况' }
       }
     ]
   },