fix: 配置商品回显

src/pages/Groupmeal/headManagement/index.vue

@@ -40,8 +40,8 @@
                 </span>
             </template>
         </el-dialog>
-        <el-dialog title="添加自提点" v-model="showAddPointDialog" width="50%" top="2%">
-            <el-form :model="pointObj">
+        <el-dialog title="添加自提点" v-model="showAddPointDialog" width="50%" top="2%" inline>
+            <el-form :model="pointObj" :rules="rules">
                 <el-form-item label="联系人姓名">
                     <el-input maxlength="15" v-model="pointObj.contact_name" placeholder="请输入联系人姓名"></el-input>
                 </el-form-item>
@@ -51,8 +51,9 @@
                 <el-form-item label="自提点名称">
                     <el-input v-model="pointObj.take_place_name" placeholder="请输入自提点名称"></el-input>
                 </el-form-item>
-                <div id="js-container" class="myMap">正在加载数据 ...</div>
-                <el-form-item label="自提点地址">
+                <!-- <div id="js-container" class="myMap">正在加载数据 ...</div> -->
+                <my-map class="my-map" @getMapInfo="getMapInfo" />
+                <el-form-item label="详细地址">
                     <el-input v-model="pointObj.location" placeholder="请输入自提点地址"></el-input>
                 </el-form-item>
                 <el-form-item label="自提点图片">
@@ -112,6 +113,7 @@
 </template>
 
 <script>
+    import myMap from "@/pages/Activity/releaseProduc/components/myMap.vue";
     import Layout from "../../Groupmeal/layout/index.vue";
     // import page from "@/components/Pagination";
     import { ColoneList, ColoneApplyList, colonelAudit, colonelApplyPoint, colonelAddApplyPoint } from "@/service/Goods/goods";
@@ -121,6 +123,7 @@
         name: "MarketingCenter",
         components: {
             Layout,
+            myMap,
             // page,
         },
         data() {
@@ -139,6 +142,9 @@
                 pickStation: {},
                 dialogFormVisible: false,
                 applyItem: {},
+                rules: {
+                    take_place_name: [{ required: true, message: "请输入详细地址", trigger: "change" }],
+                },
             };
         },
         async created() {
@@ -160,7 +166,10 @@
                 else return this.$message.success("添加成功");
             },
             async apply(item, type) {
-                let res = await colonelAudit({ colonel_apply_id: item.colonel_apply_id, audit_status: type });
+                let res = await colonelAudit({
+                    colonel_apply_id: item.colonel_apply_id,
+                    audit_status: type,
+                });
                 await this.getColoneApplyList();
                 this.dialogFormVisible = false;
                 if (res.code !== 0) return this.$message.error(res.reason);
@@ -171,7 +180,6 @@
                 if (res.code !== 0) return this.$message.error(res.reason);
                 this.pointObj = res.result;
                 this.pickStation = `${this.pointObj.province}-${this.pointObj.city}-${this.pointObj.area}`;
-                this.initMap();
                 this.pointObj.take_place_pic && (this.fileList[0] = this.pointObj.take_place_pic);
                 this.showAddPointDialog = true;
             },
@@ -193,109 +201,15 @@
                     console.error(error);
                 }
             },
-            // getMapInfo(mapInfo) {
-            //   this.form.location = mapInfo.address;
-            //   this.form.province = mapInfo.province;
-            //   this.form.city = mapInfo.city;
-            //   this.form.area = mapInfo.area;
-            //   this.form.longitude = mapInfo.lng; // longitude latitude contactor
-            //   this.form.latitude = mapInfo.lat;
-            // },
-            dragMap(data) {
-                console.log(data);
-                this.pointObj.location = data.address;
-                this.pointObj.longitude = data.position.lng;
-                this.pointObj.latitude = data.position.lat;
-                this.pointObj.province = data.regeocode.addressComponent.province;
-                this.pointObj.city = data.regeocode.addressComponent.city;
-                this.pointObj.province = data.regeocode.addressComponent.district;
-            },
-            initMap() {
-                // 加载PositionPicker，loadUI的路径参数为模块名中 'ui/' 之后的部分
-                let AMapUI = (this.AMapUI = window.AMapUI);
-                let AMap = (this.AMap = window.AMap);
-
-                AMapUI.loadUI(["misc/PositionPicker"], (PositionPicker) => {
-                    let mapConfig = {
-                        zoom: 16,
-                        // cityName: this.MapCityName
-                    };
-                    if (this.coloneApplyList.latitude && this.coloneApplyList.longitude) {
-                        mapConfig.center = [this.coloneApplyList.longitude, this.coloneApplyList.latitude];
-                    }
-                    let map = new AMap.Map("js-container", mapConfig);
-
-                    // 加载地图搜索插件
-                    AMap.service("AMap.PlaceSearch", () => {
-                        this.placeSearch = new AMap.PlaceSearch({
-                            pageSize: 5,
-                            pageIndex: 1,
-                            citylimit: true,
-                            // city: this.MapCityName,
-                            map: map,
-                            panel: "js-result",
-                        });
-                    });
-
-                    // 启用工具条
-                    AMap.plugin(["AMap.ToolBar"], function () {
-                        map.addControl(
-                            new AMap.ToolBar({
-                                position: "RB",
-                            }),
-                        );
-                    });
-
-                    // 地图地图定位
-                    AMap.plugin("AMap.Geolocation", function () {
-                        var geolocation = new AMap.Geolocation({
-                            // 是否使用高精度定位，默认：true
-                            enableHighAccuracy: true,
-                            // 设置定位超时时间，默认：无穷大
-                            timeout: 10000,
-                            // 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
-                            buttonOffset: new AMap.Pixel(10, 20),
-                            //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
-                            zoomToAccuracy: true,
-                            //  定位按钮的排放位置,  RB表示右下
-                            buttonPosition: "RB",
-                        });
-                        map.addControl(geolocation);
-                        geolocation.getCurrentPosition();
-                        AMap.event.addListener(geolocation, "complete", onComplete);
-                        AMap.event.addListener(geolocation, "error", onError);
-
-                        function onComplete(data) {
-                            console.log(data);
-                            // data是具体的定位信息
-                        }
-
-                        function onError(data) {
-                            console.log(data);
-                            // 定位出错
-                        }
-                    });
-
-                    // 创建地图拖拽
-                    let positionPicker = new PositionPicker({
-                        mode: "dragMap", // 设定为拖拽地图模式，可选'dragMap'、'dragMarker'，默认为'dragMap'
-                        map: map, // 依赖地图对象
-                        iconStyle: {
-                            //自定义外观
-                            url: "//webapi.amap.com/ui/1.0/assets/position-picker2.png", //图片地址
-                            size: [50, 50], //要显示的点大小，将缩放图片
-                            ancher: [24, 40], //锚点的位置，即被size缩放之后，图片的什么位置作为选中的位置
-                        },
-                    });
-
-                    // 拖拽完成发送自定义 drag 事件
-                    positionPicker.on("success", (positionResult) => {
-                        this.dragMap(positionResult);
-                        console.log("positionResult", positionResult);
-                    });
-                    // 启动拖放
-                    // positionPicker.start();
-                });
+            getMapInfo(mapInfo) {
+                console.log("mapInfo", mapInfo);
+                this.pointObj.address = mapInfo.address;
+                this.pointObj.location = mapInfo.location;
+                this.pointObj.province = mapInfo.province;
+                this.pointObj.city = mapInfo.city;
+                this.pointObj.area = mapInfo.area;
+                this.pointObj.longitude = mapInfo.lng; // longitude latitude contactor
+                this.pointObj.latitude = mapInfo.lat;
             },
         },
     };