Ver código fonte

1.新增全局客服组件
2.停车优惠券更新为公众号二维码

zuy 7 meses atrás
pai
commit
1efd500033

+ 1 - 1
src/App.vue

@@ -1,5 +1,4 @@
 <script lang="ts">
-import {clearToken, fetchToken} from "./utils/auth";
 import {body} from "@/utils/https";
 import {groupByKey} from "@/utils/common";
 
@@ -77,4 +76,5 @@ export default <any>{
 <style lang="scss">
 @import '@climblee/uv-ui/index.scss';
 @import './custom.scss';
+
 </style>

+ 108 - 0
src/components/custom-service/index.vue

@@ -0,0 +1,108 @@
+<template>
+  <!-- 全屏拖拽热区 -->
+  <movable-area class="movable-area">
+    <movable-view
+        class="movable-view customer-service"
+        direction="all"
+        :x="pos.x"
+        :y="pos.y"
+        @change="onDrag"  >
+
+      <!-- 客服图标 -->
+      <button open-type="contact" @contact="handleContact" class="contact" send-message-title="YesWash洗车客服">
+        在线客服
+      </button>
+      <image src="/static/iconfont/cs.svg" mode="widthFix"/>
+    </movable-view>
+  </movable-area>
+</template>
+
+<script setup>
+import {ref} from 'vue'
+import {onLoad} from "@dcloudio/uni-app";
+import {rpxToPx} from "@/utils/device";
+
+/* 位置缓存 key */
+const POS_KEY = 'kefuPos'
+
+/* 响应式坐标 */
+const pos = ref({x: 600, y: 800})
+
+/* 读取上次位置 */
+try {
+  const last = uni.getStorageSync(POS_KEY)
+  if (last) pos.value = last
+} catch {
+}
+
+/* 拖拽结束实时缓存 */
+function onDrag(e) {
+  const {x, y} = e.detail
+  pos.value = {x, y}
+  uni.setStorageSync(POS_KEY, pos.value)
+}
+
+/* 点击客服 */
+function goService() {
+  uni.navigateTo({url: '/pages/service/service'})
+  // 或打开微信客服会话
+  // uni.openCustomerServiceConversation({ ... })
+}
+
+
+onLoad(() => {
+  let y = uni.getWindowInfo().windowHeight - 200;
+  let x = uni.getWindowInfo().windowWidth;
+  pos.value = {x, y}
+  console.log(pos.value)
+  uni.setStorageSync(POS_KEY, pos.value)
+})
+
+const handleContact = () => {
+
+}
+
+</script>
+
+<style scoped lang="scss">
+/* 热区占满屏幕但不拦截事件 */
+.movable-area {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100vw;
+  height: 100vh;
+  pointer-events: none;
+  z-index: 999999 !important;
+}
+
+.movable-view {
+  width: 100rpx;
+  height: 100rpx;
+  pointer-events: auto; /* 仅图标可点 */
+}
+
+.kefu image {
+  width: 100rpx;
+  height: 100rpx;
+}
+
+.customer-service {
+  height: 100rpx;
+  width: 100rpx;
+
+
+  image {
+    width: 80rpx !important;
+    height: 80rpx !important;
+    z-index: 100;
+    position: absolute;
+    margin-top: -60rpx;
+  }
+
+  .contact {
+    opacity: 0;
+    z-index: 9999;
+  }
+}
+</style>

+ 5 - 0
src/main.ts

@@ -1,9 +1,14 @@
 import { createSSRApp } from "vue";
 import App from "./App.vue";
 import uvUI from '@climblee/uv-ui'
+
+import CustomService from '@/components/custom-service/index.vue'
+
 export function createApp() {
   const app = createSSRApp(App);
   app.use(uvUI);
+    /* 全局注册 */
+    app.component('custom-service', CustomService)
   return {
     app,
   };

+ 0 - 10
src/pages-user/login/index.vue

@@ -45,11 +45,9 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import { useRouter } from 'vue-router'
 import {login} from "@/utils/auth";
 import {onLoad} from "@dcloudio/uni-app";
 
-const router = useRouter()
 const isAgreePrivacy = ref([])
 const redirectUrl =ref ("")
 const shortId =ref ("")
@@ -71,14 +69,6 @@ const handleWechatLogin = () => {
   console.log('微信登录')
 }
 
-// 处理手机号登录
-const handlePhoneLogin = () => {
-  if (!isAgreePrivacy.value) {
-    alert('请先同意用户协议和隐私政策')
-    return
-  }
-  router.push('/phone-login')
-}
 
 // 处理隐私协议变更
 const handlePrivacyChange = () => {

+ 10 - 9
src/pages-wash/station/index.vue

@@ -73,23 +73,24 @@ const initState = () => ({
 const state = reactive(initState())
 
 onHide(() => {
-  Object.assign(state, initState());
+  // Object.assign(state, initState());
 })
 
 const handleLeftClick = () => {
   uni.navigateBack()
 }
 
-/*onLoad((options) => {
+onLoad((options) => {
   state.station.id = options?.id;
   let station = getApp<any>().globalData.last.station;
   if (station) {
     state.station = station;
+    state.station.id = station.id;
   }
   if (options?.id) {
     loadStationDeviceList();
   }
-});*/
+});
 
 onShow(() => {
   //设置图片的宽高
@@ -99,12 +100,12 @@ onShow(() => {
     width: `${width}px`,
     height: `${height}px`,
   }
-  let station = getApp<any>().globalData.last.station;
-  if (station) {
-    state.station = station;
-    state.station.id = station.id;
-    loadStationDeviceList();
-  }
+  // let station = getApp<any>().globalData.last.station;
+  // if (station) {
+  //   state.station = station;
+  //   state.station.id = station.id;
+  //   loadStationDeviceList();
+  // }
   state.currentUserId = getApp<any>().globalData.user?.id;
 })
 

+ 17 - 10
src/pages/index/index.vue

@@ -17,6 +17,8 @@
 
     <view class="w100 gap"></view>
 
+    <official-account @binderror="handleOAerror"  @bindload="handleOAload"></official-account>
+
 
     <view class="menu-content w100">
       <uv-grid :border="false" :col="4">
@@ -36,14 +38,16 @@
       </template>
       <uv-empty v-else mode="order" text="请先登录" :marginTop="100"></uv-empty>
     </view>
-
+<!--
     <movable-area class="mov-area">
-      <movable-view :x="state.screenWidth" :y="300" direction="all" @change="onChange" class="customer-service">
+      <movable-view :x="state.screenWidth" :y="state.screenHeight-100" direction="all" @change="onChange" class="customer-service">
         <button open-type="contact" @contact="handleContact" class="contact" send-message-title="YesWash洗车客服">在线客服</button>
         <image class="cs" src="/static/iconfont/cs.svg"/>
       </movable-view>
-    </movable-area>
+    </movable-area>-->
 
+
+    <custom-service></custom-service>
     <!--    站点清单  end-->
 
 
@@ -51,7 +55,7 @@
     <uv-popup ref="parking_popup_ref">
       <view class="parking_box">
         <text>长按识别二维码获取停车优惠</text>
-        <image show-menu-by-longpress src="/static/parking-qrcode.png"/>
+        <image show-menu-by-longpress src="/static/parking-qrcode.jpg"/>
       </view>
     </uv-popup>
 
@@ -121,7 +125,8 @@ const initState = () => ({
     position: "fixed",
 
   },
-  screenWidth: 350
+  screenWidth: 350,
+  screenHeight: 1200
 })
 
 const state = reactive(initState())
@@ -130,6 +135,7 @@ onLoad((e: any) => {
   let height = uni.getWindowInfo().windowHeight;
   // console.log(height, width, "screen")
   state.screenWidth = uni.getWindowInfo().windowWidth;
+  state.screenHeight = uni.getWindowInfo().windowHeight;
   // const bound = uni.getMenuButtonBoundingClientRect();
   // width: 100%;height:170px;
   state.customStyle = {
@@ -203,7 +209,7 @@ onShow(() => {
 });
 
 onHide(() => {
-  Object.assign(state, initState());
+  // Object.assign(state, initState());
   removeListener();
 })
 
@@ -345,13 +351,14 @@ const handleNavStation = (station: any) => {
 }
 
 
-const handleContact = (e: any) => {
-  // console.log("handleContact", e)
+
+const handleOAerror = (e) => {
+  console.log("handleOAerror official-account",e)
 }
 
 
-const onChange = (e) => {
-  // console.log(e)
+const handleOAload = (e) => {
+  console.log("handleOAload official-account",e)
 }
 
 

+ 1 - 0
src/pages/user/index.vue

@@ -5,6 +5,7 @@
 
   <block>
     <view class="container" :style="containerStyle">
+      <custom-service></custom-service>
       <view class="header">
         <view class="flex-center">
           <image

BIN
src/static/parking-qrcode.jpg