客服时获取定位

src/pages/contact/index.vue

 <template>
   <div class="contact">
     <div class="contact-img">
-            <img src="../../../static/images/contact_img.png" alt="">
+      <img src="../../../static/images/contact_img.png" alt="" />
     </div>
     <div class="btn-wrap">
-            <button open-type="contact">
+      <button open-type="contact" show-message-card :session-from="sessionFrom">
         <div class="btn-main">
           <div class="main-img">
-                        <img src="../../../static/images/wx.png" alt="">
+            <img src="../../../static/images/wx.png" alt="" />
           </div>
           <div class="main-text">官方微信客服</div>
         </div>
-                <img class="btn-next" src="../../../static/images/next.png" alt="">
+        <img class="btn-next" src="../../../static/images/next.png" alt="" />
       </button>
     </div>
   </div>
 </template>
 
 <script>
+export { getUserLocation } from "../../utils/wxIndex.js";
 export default {
+  data() {
+    return {
+      sessionFrom: "",
+    };
+  },
+  onLoad(options) {
+    getUserLocation().then((res) => {
+      let longitude = res.longitude;
+      let latitude = res.latitude;
+    });
 
-}
+    this.sessionFrom = options.opt;
+  },
+};
 </script>
 
 <style scoped>
-    .contact{
+.contact {
   padding: 10px 22px 0 22px;
-    }
-    .contact-img{
+}
+.contact-img {
   width: 100%;
   height: 154px;
   margin-bottom: 24px;
   background-color: #ccc;
   border-radius: 8px;
-    }
-    .contact-img img{
+}
+.contact-img img {
   width: 100%;
   height: 100%;
-    }
-    .btn-wrap{
+}
+.btn-wrap {
   width: 100%;
   height: 80px;
   box-sizing: border-box;
-    }
-    button{
+}
+button {
   width: 100%;
   height: 80px;
   border: none;
@@ -53,35 +66,35 @@ export default {
   display: flex;
   align-items: center;
   justify-content: space-between;
-    }
-    .btn-main{
+}
+.btn-main {
   display: flex;
   height: 40px;
-    }
-    .main-img{
+}
+.main-img {
   width: 54px;
   height: 40px;
-        border-right: 1px solid #D7D4D4;
+  border-right: 1px solid #d7d4d4;
   padding-top: 3px;
-    }
-    .main-img img{
+}
+.main-img img {
   width: 42px;
   height: 34px;
-    }
-    .main-text{
-        color: #1C1B1B;
-        font-size:17px;
+}
+.main-text {
+  color: #1c1b1b;
+  font-size: 17px;
   margin-left: 10px;
-    }
-    .btn-next{
+}
+.btn-next {
   width: 9px;
   height: 14px;
-    }
-    .btn-next img{
+}
+.btn-next img {
   width: 100%;
   height: 100%;
-    }
-    button::after{
+}
+button::after {
   border: none;
-    }
+}
 </style>
\ No newline at end of file

src/utils/wxIndex.js

 // 微信解密
-export function wx_decode(appId,sessionKey,encryptedData,iv) {
+export function wx_decode(appId, sessionKey, encryptedData, iv) {
     var WXBizDataCrypt = require('./WXBizDataCrypt');
     var pc = new WXBizDataCrypt(appId, sessionKey);
     var data = pc.decryptData(encryptedData, iv);
     return data;
 }
+
+// 定位方法
+export  function getUserLocation() {
+    return Promise((resolve,reject)=>{
+        wx.getLocation({
+            type: 'gcj02', // type有两中类型，gcj02 是腾讯地图所能解析的
+            success: res => {
+                resolve(res)
+            }
+        })
+    })
+}
+
+// 获取定位城市名称方法
+function getCity() {
+    var _this = this
+    wx.request({
+        url: `https://apis.map.qq.com/ws/geocoder/v1/?key=key填写的位置&location=` + _this.data.locationObj.latitude + ',' + _this.data.locationObj.longitude,
+        success: res => {
+            console.log(res) // 此处返回的就是需要查询的城市名称
+        }
+    })
+}
\ No newline at end of file