fix: 订单查看

.env.development

@@ -6,3 +6,6 @@ VITE_APP_ENV = 'development'
 
 # 若依管理系统/开发环境
 VITE_APP_BASE_API = '/dev-api'
+
+#地图key
+VITE_TX_MAP_KEY = KFEBZ-P2GKZ-A5PX4-7Q6Y7-KXOBF-XCB4C

package.json

@@ -31,6 +31,7 @@
     "nprogress": "0.2.0",
     "pinia": "2.1.7",
     "splitpanes": "3.1.5",
+    "tlbs-map-vue": "^1.3.1",
     "vue": "3.4.31",
     "vue-cropper": "1.1.1",
     "vue-router": "4.4.0",

pnpm-lock.yaml

@@ -53,6 +53,9 @@ importers:
       splitpanes:
         specifier: 3.1.5
         version: 3.1.5
+      tlbs-map-vue:
+        specifier: ^1.3.1
+        version: 1.3.1(vue@3.4.31)
       vue:
         specifier: 3.4.31
         version: 3.4.31
@@ -1881,6 +1884,16 @@ packages:
   tiny-emitter@2.1.0:
     resolution: {integrity: sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==}
 
+  tlbs-map-vue@1.3.1:
+    resolution: {integrity: sha512-oh239gdtis/b6VInlmFuxP3fnwssEG4Hy5sTzLyiJ4bTeqR8pB7MPzl81AqaL+fC4W7aFsSkofbBGmgh4rD/4w==}
+    engines: {node: '>=16.0.0'}
+    peerDependencies:
+      '@vue/composition-api': ^1.4.9
+      vue: ^2.6.0 || >=3.0.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+
   to-object-path@0.3.0:
     resolution: {integrity: sha512-9mWHdnGRuh3onocaHzukyvCZhzvr6tiflAy/JRFXcJX0TjgfWA9pk9t8CMbzmBE4Jfw58pXbkngtBtqYxzNEyg==}
     engines: {node: '>=0.10.0'}
@@ -4045,6 +4058,12 @@ snapshots:
 
   tiny-emitter@2.1.0: {}
 
+  tlbs-map-vue@1.3.1(vue@3.4.31):
+    dependencies:
+      fs-extra: 10.1.0
+      vue: 3.4.31
+      vue-demi: 0.14.10(vue@3.4.31)
+
   to-object-path@0.3.0:
     dependencies:
       kind-of: 3.2.2

src/api/map.js

@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+// 获取路由
+export const getMapCoder = (address) => {
+  return request({
+    url: `/ws/geocoder/v1/?address=${address}&key=${import.meta.env.VITE_TX_MAP_KEY}`,
+    method: 'get'
+  })
+}

src/api/order/manage.js

@@ -6,4 +6,12 @@ export function list(query) {
     method: 'get',
     params: query
   })
+}
+
+
+export function orderInfo(mainOrderId) {
+  return request({
+    url: `/core/users/orders/web/orderInfo/${mainOrderId}`,
+    method: 'get',
+  })
 }

src/main.js

@@ -43,6 +43,8 @@ import ImagePreview from "@/components/ImagePreview"
 // 字典标签组件
 import DictTag from '@/components/DictTag'
 
+import TlbsMap from 'tlbs-map-vue';
+
 const app = createApp(App)
 
 // 全局方法挂载
@@ -68,6 +70,7 @@ app.use(router)
 app.use(store)
 app.use(plugins)
 app.use(elementIcons)
+app.use(TlbsMap)
 app.component('svg-icon', SvgIcon)
 
 directive(app)

src/router/index.js

@@ -157,6 +157,20 @@ export const dynamicRoutes = [
         meta: { title: '修改生成配置', activeMenu: '/tool/gen' }
       }
     ]
+  },
+  {
+    path: '/order/',
+    component: Layout,
+    hidden: true,
+    permissions: ['system:dict:list'],
+    children: [
+      {
+        path: 'order-details/:orderId(\\d+)',
+        component: () => import('@/views/order/details/index'),
+        name: 'Data',
+        meta: { title: '订单详情', activeMenu: '/order/order-manage' }
+      }
+    ]
   }
 ]
 

src/views/components/Map/index.vue

@@ -0,0 +1,122 @@
+<template>
+    <div class="map-container">
+        <tlbs-map ref="mapRef" api-key="KFEBZ-P2GKZ-A5PX4-7Q6Y7-KXOBF-XCB4C" :center="center" :zoom="zoom"
+            :control="control" @click="onClick" @map_inited="onMapInited">
+            <tlbs-multi-marker ref="markerRef" :geometries="geometries" :styles="styles" :options="options" />
+        </tlbs-map>
+    </div>
+</template>
+<script setup>
+import { ref, watch } from 'vue';
+import { onMounted } from 'vue';
+import { getMapCoder } from '@/api/map';
+
+
+const props = defineProps({
+    address:{
+        type: String,
+        default: ''
+    },
+    latAndLng:{
+        type: Object,
+        default: {
+            latitude: '',
+            longitude: ''
+        }
+    }
+})
+
+
+const mapRef = ref(null);
+const markerRef = ref(null);
+const center = ref({ lat: 39.91799, lng: 116.397027 });
+const zoom = ref(15);
+const control = {
+    scale: {},
+    zoom: {
+        position: 'topRight',
+    },
+};
+const geometries = ref([
+    { styleId: 'marker', position: { lat: 39.91799, lng: 116.397027 } },
+])
+const styles = {
+    marker: {
+        // width: 20,
+        // height: 30,
+        // anchor: { x: 10, y: 30 },
+    },
+};
+const options = {
+    minZoom: 3,
+    maxZoom: 15,
+}
+const onClick = (e) => {
+    console.log(e);
+};
+
+const onMapInited = () => {
+    // 地图加载完成后，可以获取地图实例、点标记实例，调用地图实例、点标记实例方法
+    console.log(mapRef.value.map);
+    console.log(markerRef.value.marker);
+};
+
+const getLayerInstance = () => {
+    // 可以获取点标记实例，调用点标记实例方法
+    console.log(markerRef.value.marker);
+};
+// https://apis.map.qq.com/ws/geocoder/v1/?address=
+const adressToCode = async() => {
+    try {
+        const res= await getMapCoder(props.address);
+        if(res.status ===0){
+            const location = res.result.location;
+            center.value = location
+            geometries.value = [ { styleId: 'marker', position: location }]
+        }
+        console.log(12,res);
+
+    } catch (error) {
+        console.log('error',error);
+        
+    }
+}
+
+watch(()=> props.address, () => {
+    console.log('props.address',props.address);
+    props.address && adressToCode();
+})
+
+onMounted(() => {
+    const {latitude,longitude} =props.latAndLng;
+    if(latitude&&longitude){
+
+        center.value = { lat: Number(latitude), lng: Number(longitude) }
+        geometries.value = [ { styleId: 'marker', position: { lat: Number(latitude), lng: Number(longitude) } }]
+    }
+})
+
+</script>
+
+<style>
+.map-container {
+  width: 100%;
+  height: 100%;
+}
+</style>
+<style scoped>
+.control-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1001;
+  display: flex;
+  align-items: center;
+}
+button {
+  padding: 4px;
+  background-color: #fff;
+  margin-right: 5px;
+  border: 1px solid #ddd;
+}
+</style>

src/views/order/details/index.vue

@@ -1,16 +1,19 @@
 <template>
     <div class="details-main">
         <div class="details-main-box">
-            <div class="details-dr">1</div>
+            <div class="details-dr">
+                <Map :address="detailsData.address" :latAndLng="{latitude:detailsData.latitude,longitude:detailsData.longitude}"/>
+            </div>
             <div class="details-list">
-                <div class="details-list-item">
+                <div class="details-list-item" v-for="item in detailsData.secondOrderList" :key="item.secondOrderId">
                     <el-image style="width: 100px; height: 100px"
-                        src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
+                        :src="item.volunteerPicture" />
                     <div>
-                        <div>姓名：xxx</div>
-                        <div>评分：xxx</div>
-                        <div> 类别：xxx</div>
-                        <div> 技能简介：xxx</div>
+                        <div>姓名：{{ detailsData.clientName }}</div>
+                        <div>评分：{{ item.userReview }}</div>
+                        <div>类别：{{ detailsData.businessTierName }}</div>
+                        <div style="display: flex;">订单状态：<dict-tag :options="lrr_service_status" :value="item.orderStatus" /></div>
+
                     </div>
 
                 </div>
@@ -19,17 +22,14 @@
         </div>
         <div class="details-main-footer">
             <el-descriptions title="订单信息" border>
-                <el-descriptions-item label="姓名">kooriookami</el-descriptions-item>
-                <el-descriptions-item label="项目类别">18100000000</el-descriptions-item>
-                <el-descriptions-item label="被服务人员">18100000000</el-descriptions-item>
-                <el-descriptions-item label="是否有疾病">18100000000</el-descriptions-item>
-                <el-descriptions-item label="手机号">18100000000</el-descriptions-item>
-                <el-descriptions-item label="科目">18100000000</el-descriptions-item>
-                <el-descriptions-item label="性别">18100000000</el-descriptions-item>
-                <el-descriptions-item label="服务项目">18100000000</el-descriptions-item>
-                <el-descriptions-item label="订单状态">18100000000</el-descriptions-item>
-                <el-descriptions-item label="电话">18100000000</el-descriptions-item>
-                <el-descriptions-item label="住址">18100000000</el-descriptions-item>
+                <el-descriptions-item label="姓名">{{ detailsData.volunteerName  }}</el-descriptions-item>
+                <el-descriptions-item label="项目类别">{{ detailsData.businessTierName }}</el-descriptions-item>
+                <el-descriptions-item label="被服务人员">{{ detailsData.clientName }}</el-descriptions-item>
+                <el-descriptions-item label="手机号">{{ detailsData.clientTelephone }}</el-descriptions-item>
+                <el-descriptions-item label="服务项目">{{ detailsData.volunteerName }}</el-descriptions-item>
+                <el-descriptions-item label="订单状态"><dict-tag :options="lrr_service_status" :value="detailsData.orderStatus" /> </el-descriptions-item>
+                <el-descriptions-item label="电话">{{ detailsData.clientTelephone }}</el-descriptions-item>
+                <el-descriptions-item label="住址">{{ detailsData.address }}</el-descriptions-item>
             </el-descriptions>
         </div>
 
@@ -37,12 +37,29 @@
 </template>
 
 <script setup>
-
+import Map from '@/views/components/Map/index.vue'
+import { orderInfo } from "@/api/order/manage.js";
+import { onMounted } from 'vue';
+const { proxy } = getCurrentInstance();
+const { lrr_service_status } = proxy.useDict("lrr_service_status");
 const list = [
     {
         lable: ''
     }
 ]
+const route = useRoute()
+const detailsData = ref({})
+const getDetails = async()=> {
+    try {
+        
+        const res = await orderInfo(route.params.orderId);
+        console.log('res',res);
+        detailsData.value = res.data;
+    } catch (error) {
+        
+    }
+}
+onMounted(getDetails)
 </script>
 
 <style lang="scss" scoped>
@@ -51,6 +68,7 @@ const list = [
     display: flex;
     flex-direction: column;
     padding: 24px;
+    overflow-y: auto;
 
     .details-main-box {
         display: flex;
@@ -58,12 +76,14 @@ const list = [
 
         .details-dr {
             flex: 1;
+  
         }
 
         .details-list {
             display: flex;
             flex-direction: column;
             overflow-y: auto;
+            width: 300px;
 
             .details-list-item {
                 display: flex;

src/views/order/manage/index.vue

@@ -12,11 +12,11 @@ import { ref } from 'vue';
 import ListPage from '@/views/components/ListPage/index.vue';
 import { list } from "@/api/order/manage.js";
 import { getTreeList } from "@/api/staff/price.js";
-
 import DialogForm from '@/views/components/DialogForm/index.vue';
+
 const { proxy } = getCurrentInstance();
 const { lrr_service_status } = proxy.useDict("lrr_service_status");
-
+const router = useRouter();
 const options = ref([]);
 const userTableRef = ref();
 const dialogFormRef = ref(null);
@@ -103,16 +103,17 @@ const listPageData = reactive({
         //         return row.appStatus == 1
         //     }
         // },
-        // {
-        //     label: '查看',
-        //     type: 'primary',
-        //     hasPermi: ['manage:details'],
-        //     key: 'details',
-        //     func: (row) => {
-        //         console.log(row)
-        //         openDialog(row)
-        //     }
-        // },
+        {
+            label: '查看',
+            type: 'primary',
+            hasPermi: ['manage:details'],
+            key: 'details',
+            func: (row) => {
+                console.log(row)
+                router.push("/order/order-details/" + row.mainOrderId);
+                // openDialog(row)
+            }
+        },
         // {
         //     label: '删除',
         //     type: 'danger',

src/views/system/user/index.vue

@@ -2,11 +2,11 @@
   <div class="app-container">
     <el-row :gutter="20">
       <splitpanes :horizontal="appStore.device === 'mobile'" class="default-theme">
-        <!--部门数据-->
+        <!--区域数据-->
         <pane size="16">
           <el-col>
             <div class="head-container">
-              <el-input v-model="deptName" placeholder="请输入部门名称" clearable prefix-icon="Search" style="margin-bottom: 20px" />
+              <el-input v-model="deptName" placeholder="请输入区域名称" clearable prefix-icon="Search" style="margin-bottom: 20px" />
             </div>
             <div class="head-container">
               <el-tree :data="deptOptions" :props="{ label: 'label', children: 'children' }" :expand-on-click-node="false" :filter-node-method="filterNode" ref="deptTreeRef" node-key="id" highlight-current default-expand-all @node-click="handleNodeClick" />
@@ -61,7 +61,7 @@
               <el-table-column label="用户编号" align="center" key="userId" prop="userId" v-if="columns[0].visible" />
               <el-table-column label="用户名称" align="center" key="userName" prop="userName" v-if="columns[1].visible" :show-overflow-tooltip="true" />
               <el-table-column label="用户昵称" align="center" key="nickName" prop="nickName" v-if="columns[2].visible" :show-overflow-tooltip="true" />
-              <el-table-column label="部门" align="center" key="deptName" prop="dept.deptName" v-if="columns[3].visible" :show-overflow-tooltip="true" />
+              <el-table-column label="区域" align="center" key="deptName" prop="dept.deptName" v-if="columns[3].visible" :show-overflow-tooltip="true" />
               <el-table-column label="手机号码" align="center" key="phonenumber" prop="phonenumber" v-if="columns[4].visible" width="120" />
               <el-table-column label="状态" align="center" key="status" v-if="columns[5].visible">
                 <template #default="scope">
@@ -111,8 +111,8 @@
             </el-form-item>
           </el-col>
           <el-col :span="12">
-            <el-form-item label="归属部门" prop="deptId">
-              <el-tree-select v-model="form.deptId" :data="enabledDeptOptions" :props="{ value: 'id', label: 'label', children: 'children' }" value-key="id" placeholder="请选择归属部门" check-strictly />
+            <el-form-item label="归属区域" prop="deptId">
+              <el-tree-select v-model="form.deptId" :data="enabledDeptOptions" :props="{ value: 'id', label: 'label', children: 'children' }" value-key="id" placeholder="请选择归属区域" check-strictly />
             </el-form-item>
           </el-col>
         </el-row>
@@ -261,7 +261,7 @@ const columns = ref([
   { key: 0, label: `用户编号`, visible: true },
   { key: 1, label: `用户名称`, visible: true },
   { key: 2, label: `用户昵称`, visible: true },
-  { key: 3, label: `部门`, visible: true },
+  { key: 3, label: `区域`, visible: true },
   { key: 4, label: `手机号码`, visible: true },
   { key: 5, label: `状态`, visible: true },
   { key: 6, label: `创建时间`, visible: true }
@@ -294,7 +294,7 @@ const filterNode = (value, data) => {
   return data.label.indexOf(value) !== -1;
 };
 
-/** 根据名称筛选部门树 */
+/** 根据名称筛选区域树 */
 watch(deptName, val => {
   proxy.$refs["deptTreeRef"].filter(val);
 });
@@ -309,7 +309,7 @@ function getList() {
   });
 };
 
-/** 查询部门下拉树结构 */
+/** 查询区域下拉树结构 */
 function getDeptTree() {
   deptTreeSelect().then(response => {
     deptOptions.value = response.data;
@@ -317,7 +317,7 @@ function getDeptTree() {
   });
 };
 
-/** 过滤禁用的部门 */
+/** 过滤禁用的区域 */
 function filterDisabledDept(deptList) {
   return deptList.filter(dept => {
     if (dept.disabled) {

vite.config.js

@@ -29,13 +29,20 @@ export default defineConfig(({ mode, command }) => {
       host: true,
       open: true,
       proxy: {
+        '/dev-api/ws': {
+          // target: 'http://localhost:9527',
+          target: 'https://apis.map.qq.com',
+          changeOrigin: true,
+          rewrite: (p) => p.replace('/dev-api/ws', '/ws')
+        },
         // https://cn.vitejs.dev/config/#server-proxy
         '/dev-api': {
           // target: 'http://localhost:9527',
-        target: 'http://192.168.100.94:9527',
+          target: 'http://192.168.100.121:9527',
           changeOrigin: true,
           rewrite: (p) => p.replace(/^\/dev-api/, '')
-        }
+        },
+        
       }
     },
     //fix:error:stdin>:7356:1: warning: "@charset" must be the first rule in the file