订单管理列表页面ui 接口接入；订单多选selection控件编写 ;地图长按事件获取经纬度（点飞控件）

2023-11-07 13:28:53 +08:00 · 2023-11-07 13:28:53 +08:00 · 207cf684d5
commit 207cf684d5
parent 020c40d834
9 changed files with 162 additions and 204 deletions
--- a/src/components/MapBox.vue
+++ b/src/components/MapBox.vue
@ -82,6 +82,29 @@ export default {
        // })
        // this.map.setTerrain({ source: 'mapbox-dem', exaggeration: 1.5 })
      })
+
+      // 长按事件 传longPress到组件外部调用
+      let pressTimer
+      this.map.on('mousedown', (event) => { // pc端点击事件
+        pressTimer = setTimeout(() => {
+          const lngLat = this.map.unproject(event.point)
+          // 将经纬度信息传递到组件外部
+          this.$emit('longPress', lngLat)
+        }, 1000) // 作为长按的时间阈值
+      })
+      this.map.on('touchstart', (event) => { // 移动端点击事件
+        pressTimer = setTimeout(() => {
+          const lngLat = this.map.unproject(event.point)
+          // 将经纬度信息传递到组件外部
+          this.$emit('longPress', lngLat)
+        }, 1000) // 作为长按的时间阈值
+      })
+      // 松手时点击事件不够 清除定时器模拟长按事件
+      const clearPressTimer = () => {
+        clearTimeout(pressTimer)
+      }
+      this.map.on('mouseup', clearPressTimer)
+      this.map.on('touchend', clearPressTimer)
    })
  },
  methods: {
--- a/src/components/SelectionOrderBack.vue
+++ b/src/components/SelectionOrderBack.vue
@ -0,0 +1,31 @@
+<template>
+  <el-select class="w-360px" 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>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      options: [{
+        value: 'normal',
+        label: '无申请'
+      }, {
+        value: 'requested',
+        label: '申请退款'
+      }, {
+        value: 'refunded',
+        label: '已退款'
+      }, {
+        value: 'rejected',
+        label: '拒绝退款'
+      }],
+      value: []
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped></style>
--- a/src/components/SelectionOrderStatus.vue
+++ b/src/components/SelectionOrderStatus.vue
@ -0,0 +1,37 @@
+<template>
+  <el-select class="w-500px" 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>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      options: [{
+        value: 'unpaid',
+        label: '未付款'
+      }, {
+        value: 'pending',
+        label: '待处理'
+      }, {
+        value: 'processing',
+        label: '处理中'
+      }, {
+        value: 'shipped',
+        label: '已发货'
+      }, {
+        value: 'completed',
+        label: '已送达'
+      }, {
+        value: 'closed',
+        label: '交易关闭'
+      }],
+      value: []
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped></style>
--- a/src/router/index.js
+++ b/src/router/index.js
@ -397,6 +397,29 @@ const routes = [
      }
    ]
  },
+  {
+    path: '/order',
+    component: Layout,
+    redirect: '/order/index',
+    meta: {
+      title: '订单管理',
+      icon: 'iconfont icon-a-SalesOrderManagement',
+      roles: ['admin', 'editor'],
+      tapName: 'admin'
+    },
+    children: [
+      {
+        path: '/order/index',
+        component: () => import('@/views/layout/components/main/order/index'),
+        meta: {
+          title: '订单管理',
+          icon: 'iconfont icon-a-SalesOrderManagement',
+          roles: ['admin', 'editor'],
+          tapName: 'admin'
+        }
+      }
+    ]
+  },
  {
    path: '*',
    redirect: '/404',
--- a/src/store/index.js
+++ b/src/store/index.js
@ -18,7 +18,7 @@ const store = new Vuex.Store({
    categoryList: [], // 分类列表(小程序)
    spuList: [], // 商品spu列表
    skuList: [], // 商品sku列表
-    questList: [], // 订单列表
+    orderList: [], // 订单列表
    logList: [], // 操作日志列表
    crosFrequency: null // 对频macadd
  },
@ -74,8 +74,8 @@ const store = new Vuex.Store({
    /**
     * @description: 设置订单列表
     */
-    setQuestList (state, list) {
-      state.questList = list
+    setOrderList (state, list) {
+      state.orderList = list
    },
    /**
     * @description: 向操作日志列表最后插入新的信息
@ -889,12 +889,12 @@ const store = new Vuex.Store({
     * @description: 获取订单列表 ps:待发货及待收货 并且不是退款成功状态
     * @return {*} 列表
     */
-    async fetchQuestList ({ commit }) {
-      const res = await api.get('getQuestList')
+    async fetchOrderList ({ commit }) {
+      const res = await api.get('getOrderList', 'Admin')
      if (res.data.status === 1) {
-        commit('setQuestList', res.data.questList)
+        commit('setOrderList', res.data.orderList)
      } else {
-        commit('setQuestList', [])
+        commit('setOrderList', [])
      }
      return res
    },
--- a/src/styles/myIcon.scss
+++ b/src/styles/myIcon.scss
@ -1 +1 @@
-@import 'https://at.alicdn.com/t/c/font_3703467_3t3ax3urzwi.css'; //iconfont阿里巴巴
+@import 'https://at.alicdn.com/t/c/font_3703467_d1m3z2xkd1v.css'; //iconfont阿里巴巴
--- a/src/views/layout/components/main/home/index.vue
+++ b/src/views/layout/components/main/home/index.vue
@ -1,6 +1,6 @@
 <template>
  <div class="h-100">
-    <map-box ref="mapbox" :key="mapBoxKey" />
+    <map-box ref="mapbox" :key="mapBoxKey" @longPress="handleDemo" />
  </div>
 </template>

@ -29,6 +29,11 @@ export default {
    }
  },
  methods: {
+    // 地图长按事件 测试
+    handleDemo (lngLat) {
+      console.log('经度:', lngLat.lng)
+      console.log('维度:', lngLat.lat)
+    },
    /**
     * @description: 创建飞机图标
     */
--- a/src/views/layout/components/main/order/index.vue
+++ b/src/views/layout/components/main/order/index.vue
@ -1,247 +1,86 @@
 <template>
  <div class="app-container">
-    <!-- 组合按钮 -->
-    <el-button-group>
-      <el-button type="primary" icon="el-icon-plus" @click="$router.replace('/spu/add')">添加</el-button>
-      <el-button type="danger" icon="el-icon-delete" @click="deleteSpu(countSelIdArr($refs.myTable.selection))">删除
-      </el-button>
-      <el-button type="warning" icon="el-icon-edit" @click="toEditPage()">编辑</el-button>
-    </el-button-group>
    <!-- 用户select选项 -->
-    <el-button-group class="m-l-20">
+    <el-button-group class="m-b-15">
+      <SelectionOrderStatus class="m-r-20" />
+      <SelectionOrderBack />
+    </el-button-group>
+    <el-button-group class="m-r-20">
      <SelectionShopId v-model="form.shop_id" :allSel="true" />
    </el-button-group>
-    <!-- 分类select选项 -->
-    <el-button-group class="m-l-20">
-      <SelectionPath v-model="form.path" :shop_id="form.shop_id" :allSel="true" />
-    </el-button-group>
-    <!-- 商品spu表格 -->
+    <!-- 订单列表 -->
    <el-table class="m-t-20 w-100" ref="myTable"
-      :data="spuListArr.slice((currentPage - 1) * pageSize, currentPage * pageSize)" border tooltip-effect="dark">
+      :data="orderList.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" label="排序" width="70">
-        <template slot-scope="scope">
-          <el-input v-model="scope.row.sort" @focus="tempSort = scope.row.sort"
-            @blur="blurOrder(scope.row.id, scope.row.sort)"></el-input>
-        </template>
-      </el-table-column>
      <el-table-column align="center" prop="id" label="id" width="50">
      </el-table-column>
-      <el-table-column prop="name" label="名称" width="150" min-width="150">
+      <el-table-column prop="order_sn" label="订单号" width="150" min-width="150">
      </el-table-column>
-      <el-table-column prop="spu_number" label="编号" min-width="120">
+      <el-table-column prop="tel" label="客户电话" min-width="150">
      </el-table-column>
-      <el-table-column label="图片" width="120" min-width="120">
-        <template v-if="scope.row.photo != ''" slot-scope="scope">
-          <el-image :src="$store.state.settings.host + '/Data/UploadFiles/spu/' + scope.row.photo"
-            :preview-src-list="[$store.state.settings.host + '/Data/UploadFiles/spu/' + scope.row.photo]">
-            <div slot="error" class="image-slot">
-              <i class="el-icon-picture-outline"></i>
-            </div>
-          </el-image>
+      <el-table-column label="下单时间" width="140" min-width="140">
+        <template slot-scope="scope">
+          {{ scope.row.addtime | parseTime('{y}-{m}-{d} {h}:{i}') }}
        </template>
      </el-table-column>
-      <el-table-column prop="controler" label="操作" width="380" min-width="380">
+      <el-table-column prop="controler" label="操作" width="200" min-width="200">
        <template slot-scope="scope">
          <el-button-group>
-            <el-button :type="scope.row.recommend == '1' ? 'success' : 'info'" class="iconfont icon-tuijian"
-              @click="handeleRecommend(scope.row.id, scope.row.recommend)"><span class="m-l-5">推荐</span></el-button>
-            <el-button :type="scope.row.show == '1' ? 'primary' : 'info'"
-              :class="scope.row.show == '1' ? 'iconfont icon-yanjing' : 'iconfont icon-biyanjing'"
-              @click="handeleShow(scope.row.id, scope.row.show)"><span class="m-l-5">显示</span></el-button>
            <el-button type="warning" icon="el-icon-edit"
-              @click="$router.replace(`/spu/edit/${scope.row.id}`)">编辑</el-button>
-            <el-button type="danger" icon="el-icon-delete" @click="deleteSpu([scope.row.id])">删除</el-button>
+              @click="$router.replace(`/admin/edit/${scope.row.id}`)">编辑</el-button>
+            <el-button type="danger" icon="el-icon-delete" @click="deleteAdmin([scope.row.id])">删除</el-button>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination class="m-t-20" layout="prev, pager, next" :current-page.sync="currentPage" :page-size="pageSize"
-      :total="spuListArr.length">
+      :total="orderList.length">
    </el-pagination>
  </div>
 </template>

 <script>
-import { countSelIdArr } from '@/utils'
+
+import { countSelIdArr, parseTime } from '@/utils'
 import SelectionShopId from '@/components/SelectionShopId'
-import SelectionPath from '@/components/SelectionPath'
+import SelectionOrderStatus from '@/components/SelectionOrderStatus'
+import SelectionOrderBack from '@/components/SelectionOrderBack'

 export default {
-  name: 'Spu',
+  name: 'Order',
  data () {
    return {
-      pageSize: 30, // 每页显示记录条数
+      pageSize: 50, // 每页显示记录条数
      currentPage: 1, // 当前页
      form: {
-        shop_id: '',
-        path: ''
-      },
-      tempSort: ''// 临时记录 商品排序序号
+        shop_id: ''
+      }
    }
  },
  components: {
    SelectionShopId,
-    SelectionPath
+    SelectionOrderStatus,
+    SelectionOrderBack
  },
  computed: {
-    // 获取商品列表
-    spuList () {
-      return this.$store.state.spuList
-    },
-    // 获取分类列表
-    categoryList () {
-      return this.$store.state.categoryList
-    },
-    /**
-     * @description: 按照shop_id path条件过滤 商品列表
-     * @return: 商品列表
-     */
-    spuListArr () {
-      // 过滤出对应商铺的商品
-      let pList = this.spuList
-      if (this.form.shop_id !== '') { // 如果不是"所有商铺" 则按shop_id过滤
-        pList = pList.filter((item) => item.shop_id === this.form.shop_id)
-      }
-      // 过滤出 分类已经被删除的商品 （未分类）
-      if (this.form.path === 'none') {
-        const list = pList.filter((item) => {
-          let t = true
-          for (let index = 0; index < this.categoryList.length; index++) {
-            if (this.categoryList[index].path === item.path) {
-              t = false
-              break
-            }
-          }
-          return t
-        })
-        return list
-      } else if (this.form.path !== '') {
-        var pattern = this.form.path // selection path分类条件
-        // 对特殊字符进行转义，以防止它们影响正则表达式的匹配
-        var escapedPattern = pattern.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
-        // 构建动态正则表达式对象
-        var regexPattern = new RegExp('^' + escapedPattern + '(-|$)')
-        const list = pList.filter((item) => {
-          let t = false
-          for (let index = 0; index < this.categoryList.length; index++) { // 先确保 商品的path 在分类列表path中是存在的
-            if (this.categoryList[index].path === item.path) {
-              t = true
-              break
-            }
-          }
-          if (t) {
-            return regexPattern.test(item.path)
-          } else {
-            return false
-          }
-        })
-        return list
-      } else {
-        return pList // 所有分类显示所有商品
-      }
+    // 获取订单列表
+    orderList () {
+      return this.$store.state.orderList
    }
+
  },
  methods: {
-    countSelIdArr,
-    // 搜索标签
-    handleClose (tag) {
-      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)
-    },
-    showInput () {
-      this.inputVisible = true
-      this.$nextTick(_ => {
-        this.$refs.saveTagInput.$refs.input.focus()
-      })
-    },
-    handleInputConfirm () {
-      const inputValue = this.inputValue
-      if (inputValue) {
-        this.dynamicTags.push(inputValue)
-      }
-      this.inputVisible = false
-      this.inputValue = ''
-    },
-    /**
-     * @description: 跳转到编辑页面
-     */
-    toEditPage () {
-      const selId = this.countSelIdArr(this.$refs.myTable.selection)
-      switch (selId.length) {
-        case 0:
-          this.$message.error('请选择一条需要编辑的记录')
-          break
-        case 1:
-          this.$router.push('/register/edit/' + selId['0'])
-          break
-        default:
-          this.$message.error('只能选择一条记录')
-      }
-    },
-    /**
-     * @description: 删除spu
-     */
-    deleteSpu (idArr) {
-      this.$store.dispatch('fetchDelSpu', idArr)
-    },
-    /**
-     * @description: 排序input失焦 更新数据库的排序
-     * @param {*} id 商品id
-     * @param {*} sort 排序序号
-     */
-    async blurOrder (id, sort) {
-      if (this.tempSort !== sort) { // 失焦时 和 之前点击时 排序做一下对比 有更新 再向api提交数据
-        this.form.id = id
-        this.form.sort = sort
-        const res = await this.$store.dispatch('fetchOrderSpu', this.form)
-        if (res.data.status === 1) {
-          this.$router.push({ path: '/spu/index', query: { refresh: Date.now() } })
-        }
-      }
-    },
-    /**
-     * @description: 设置前端是否显示 商品
-     * @param {*} id 商品id
-     * @param {*} show 0隐藏 1显示
-     */
-    async handeleShow (id, show) {
-      this.form.id = id
-      if (show === '0') {
-        this.form.show = '1'
-      } else {
-        this.form.show = '0'
-      }
-      const res = await this.$store.dispatch('fetchShowSpu', this.form)
-      if (res.data.status === 1) {
-        this.$router.push({ path: '/spu/index', query: { refresh: Date.now() } })
-      }
-    },
-    /**
-     * @description: 设置前端是否推荐 商品
-     * @param {*} id 商品id
-     * @param {*} recommend 0推荐 1不推荐
-     */
-    async handeleRecommend (id, recommend) {
-      this.form.id = id
-      if (recommend === '0') {
-        this.form.recommend = '1'
-      } else {
-        this.form.recommend = '0'
-      }
-      const res = await this.$store.dispatch('fetchRecommendSpu', this.form)
-      if (res.data.status === 1) {
-        this.$router.push({ path: '/spu/index', query: { refresh: Date.now() } })
-      }
-    }
+    countSelIdArr
  },
  watch: {
  },
  created () {
  },
  filters: {
-    countSelIdArr
+    countSelIdArr,
+    parseTime
  }
 }
 </script>
--- a/src/views/layout/index.vue
+++ b/src/views/layout/index.vue
@ -67,7 +67,7 @@ export default {
    this.$store.dispatch('fetchCategoryList')// 获取分类列表（小程序）
    this.$store.dispatch('fetchSpuList')// 获取商品spu列表
    this.$store.dispatch('fetchSkuList')// 获取商品sku列表
-    this.$store.dispatch('fetchQuestList')// 获取订单列表 ps:待发货及待收货 并且不是退款成功状态
+    this.$store.dispatch('fetchOrderList')// 获取订单列表
  },
  watch: {
    /**