客服时获取定位

src/pages/contact/index.vue

 <template>
-    <div class="contact">
-        <div class="contact-img">
-            <img src="../../../static/images/contact_img.png" alt="">
-        </div>
-        <div class="btn-wrap">
-            <button open-type="contact">
-                <div class="btn-main">
-                    <div class="main-img">
-                        <img src="../../../static/images/wx.png" alt="">
-                    </div>
-                    <div class="main-text">官方微信客服</div>
-                </div>
-                <img class="btn-next" src="../../../static/images/next.png" alt="">
-            </button>
+  <div class="contact">
+    <div class="contact-img">
+      <img src="../../../static/images/contact_img.png" alt="" />
+    </div>
+    <div class="btn-wrap">
+      <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="" />
+          </div>
+          <div class="main-text">官方微信客服</div>
         </div>
+        <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{
-        padding: 10px 22px 0 22px;
-    }
-    .contact-img{
-        width: 100%;
-        height: 154px;
-        margin-bottom: 24px;
-        background-color: #ccc;
-        border-radius: 8px;
-    }
-    .contact-img img{
-        width: 100%;
-        height: 100%;
-    }
-    .btn-wrap{
-        width: 100%;
-        height: 80px;
-        box-sizing: border-box;
-    }
-    button{
-        width: 100%;
-        height: 80px;
-        border: none;
-        padding: 20px 10px 20px 10px;
-        background-color: white;
-        box-shadow: #eee 0px 0px 5px 4px;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-    }
-    .btn-main{
-        display: flex;
-        height: 40px;
-    }
-    .main-img{
-        width: 54px;
-        height: 40px;
-        border-right: 1px solid #D7D4D4;
-        padding-top: 3px;
-    }
-    .main-img img{
-        width: 42px;
-        height: 34px;
-    }
-    .main-text{
-        color: #1C1B1B;
-        font-size:17px;
-        margin-left: 10px;
-    }
-    .btn-next{
-        width: 9px;
-        height: 14px;
-    }
-    .btn-next img{
-        width: 100%;
-        height: 100%;
-    }
-    button::after{
-        border: none;
-    }
+.contact {
+  padding: 10px 22px 0 22px;
+}
+.contact-img {
+  width: 100%;
+  height: 154px;
+  margin-bottom: 24px;
+  background-color: #ccc;
+  border-radius: 8px;
+}
+.contact-img img {
+  width: 100%;
+  height: 100%;
+}
+.btn-wrap {
+  width: 100%;
+  height: 80px;
+  box-sizing: border-box;
+}
+button {
+  width: 100%;
+  height: 80px;
+  border: none;
+  padding: 20px 10px 20px 10px;
+  background-color: white;
+  box-shadow: #eee 0px 0px 5px 4px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.btn-main {
+  display: flex;
+  height: 40px;
+}
+.main-img {
+  width: 54px;
+  height: 40px;
+  border-right: 1px solid #d7d4d4;
+  padding-top: 3px;
+}
+.main-img img {
+  width: 42px;
+  height: 34px;
+}
+.main-text {
+  color: #1c1b1b;
+  font-size: 17px;
+  margin-left: 10px;
+}
+.btn-next {
+  width: 9px;
+  height: 14px;
+}
+.btn-next img {
+  width: 100%;
+  height: 100%;
+}
+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