fix 客服

src/pages/contact/index.vue

 <template>
-    <div class="contact">
-        <div class="contact-img">
-            <img src="https://mayi-newshop.oss-cn-shanghai.aliyuncs.com/product/HCe2iRXHsP.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="https://mayi-newshop.oss-cn-shanghai.aliyuncs.com/product/HCe2iRXHsP.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>
+import { getUserLocation } from "../../utils/wxIndex.js";
 export default {
-    
-}
+  data() {
+    return {
+      sessionFrom: "",
+    };
+  },
+  onLoad(options) {
+    getUserLocation().then((res) => {
+      options.longitude = res.longitude;
+      options.latitude = res.latitude;
+      this.sessionFrom = JSON.stringify(options);
+      console.log('sessionFrom',this.sessionFrom)
+    });
+
+  },
+};
 </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