update

simple-demo/location_point.html

@@ -10,25 +10,35 @@
         #getLocationBtn {
             transform: scale(3);
         }
+
         #app {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            height: 100vh;
+            position: relative;
+        }
+
+        #getLocationBtn {
+            position: absolute;
+            top: 20%;
+            left: 50%;
+            transform: translateX(-50%);
+        }
+
+        #my_li {
+            position: absolute;
+            top: calc(20% + 50px); /* 调整按钮下方的间距，根据需要修改数值 */
         }
     </style>
     <script>
-        window.addEventListener('load', function() {
+        window.addEventListener('load', function () {
             var app = document.body;
             var startY;
             var dist;
             var threshold = 100; // 下拉刷新的阈值
 
-            app.addEventListener('touchstart', function(e) {
+            app.addEventListener('touchstart', function (e) {
                 startY = e.touches[0].clientY;
             });
 
-            app.addEventListener('touchmove', function(e) {
+            app.addEventListener('touchmove', function (e) {
                 dist = e.touches[0].clientY - startY;
                 if (dist > threshold) {
                     // 执行刷新操作
@@ -43,6 +53,14 @@
     <div class="row justify-content-center mt-5">
         <button id="getLocationBtn" class="btn btn-primary btn-lg" v-on:click="sendLocationToBackend">记录</button>
     </div>
+    <div class="row justify-content-center mt-5" id="my_li">
+        <ul>
+            <li v-for="item in createdList">{{ convertToBeijingTime(item.created_at) }} &nbsp;&nbsp;&nbsp;&nbsp;
+                <button class="deleteBtn" v-on:click="confirmDelete(item.id)">删除</button>
+            </li>
+
+        </ul>
+    </div>
 </div>
 
 <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.16/vue.min.js"></script>
@@ -51,18 +69,48 @@
 <script src="https://api.map.baidu.com/api?v=2.0&ak=WMYeXwq7z0VcaiUXTuYTGPZsm8Selmfd"></script>
 <script>
 
+    function convertToBeijingTime(dateString) {
+        // 创建 Date 对象，将字符串解析为日期
+        const date = new Date(dateString);
+
+        // 转换为北京时间
+        const beijingTime = date.toLocaleString('zh-CN', {
+            timeZone: 'Asia/Shanghai',
+            year: 'numeric',
+            month: '2-digit',
+            day: '2-digit',
+            hour: '2-digit',
+            minute: '2-digit',
+            second: '2-digit'
+        });
+
+        return beijingTime;
+    }
 
     const app = new Vue({
         el: '#app',
         data: {
             longitude: "0",
             latitude: "0",
-            locationStr: "未知"
+            locationStr: "未知",
+            createdList: []
         },
         mounted: function () {
             this.getLocation();
+            this.getLatestData(); // 获取最新的数据
         },
         methods: {
+            confirmDelete: function (id) {
+                if (confirm("确认要删除吗？")) {
+                    // 发送删除请求
+                    const deleteUrl = `https://api.tianyunperfect.cn/location/point_delete?id=${id}`;
+                    fetch(deleteUrl, {method: 'DELETE'}).then(response => {
+                        if (response.ok) {
+                            app.getLatestData();
+                        }
+                    })
+                }
+            },
             // 获取地址位置的名字
             getLocationStr: function (longitude, latitude) {
                 // 创建地理编码实例, 并配置参数获取乡镇级数据
@@ -89,6 +137,14 @@
                     }
                 });
             },
+            getLatestData: async function () {
+                try {
+                    const response = await axios.get('https://api.tianyunperfect.cn/location/page?page=1&size=10');
+                    this.createdList = response.data.data.list;
+                } catch (error) {
+                    console.log(error);
+                }
+            },
             sendLocationToBackend: async function () {
                 const data = {
                     location: app.locationStr,
@@ -97,15 +153,17 @@
                     created_by: "b90c0cf6997d4cfa987f2bc59583fcaa"
                 };
                 axios.post('https://api.tianyunperfect.cn/location/point', data)
-                    .then(function (response) {
+                    .then(async function (response) {
                         console.log(response.data);
                         let res = response.data;
                         showMsg(res.message, 2);
+                        await app.getLatestData();
                     })
                     .catch(function (error) {
                         console.log(error);
                     });
-            }
+            },
+
         }
     });
 </script>