|
|
@@ -1,27 +1,27 @@
|
|
|
<template>
|
|
|
-<!-- <uv-navbar placeholder leftIcon="" title="Yeswash洗车"
|
|
|
- :border="false"></uv-navbar>-->
|
|
|
- <view class="content" >
|
|
|
+ <!-- <uv-navbar placeholder leftIcon="" title="Yeswash洗车"
|
|
|
+ :border="false"></uv-navbar>-->
|
|
|
+ <view class="content">
|
|
|
<!-- <image class="logo" src="/static/logo.png"/>
|
|
|
<view class="text-area">
|
|
|
<text class="title">{{ title }}</text>
|
|
|
</view>-->
|
|
|
<view style="width: 100%;" class="swiper-content">
|
|
|
- <swiper :style="state.customStyle" circular :indicator-dots="true" :autoplay="true" :interval="3000"
|
|
|
- :duration="500">
|
|
|
- <swiper-item v-for="(item,idx) in state.swiperList" :key="idx">
|
|
|
- <image :src="item" mode="scaleToFill" :style="state.customStyle" @click="handleBannerClick(idx)"></image>
|
|
|
- </swiper-item>
|
|
|
- </swiper>
|
|
|
-
|
|
|
-<!-- <uv-swiper
|
|
|
- style="width: 100%"
|
|
|
- :list="state.swiperList"
|
|
|
- @click="handleBannerClick"
|
|
|
- circular
|
|
|
- :autoplay="true"
|
|
|
- bgColor="#ffffff">
|
|
|
- </uv-swiper>-->
|
|
|
+ <swiper :style="state.customStyle" circular :indicator-dots="true" :autoplay="true" :interval="3000"
|
|
|
+ :duration="500">
|
|
|
+ <swiper-item v-for="(item,idx) in state.swiperList" :key="idx">
|
|
|
+ <image :src="item" mode="scaleToFill" :style="state.customStyle" @click="handleBannerClick(idx)"></image>
|
|
|
+ </swiper-item>
|
|
|
+ </swiper>
|
|
|
+
|
|
|
+ <!-- <uv-swiper
|
|
|
+ style="width: 100%"
|
|
|
+ :list="state.swiperList"
|
|
|
+ @click="handleBannerClick"
|
|
|
+ circular
|
|
|
+ :autoplay="true"
|
|
|
+ bgColor="#ffffff">
|
|
|
+ </uv-swiper>-->
|
|
|
</view>
|
|
|
<!--
|
|
|
<view class="w100">
|
|
|
@@ -50,13 +50,21 @@
|
|
|
</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">
|
|
|
+ <button open-type="contact" @contact="handleContact" class="contact">在线客服</button>
|
|
|
+ <image class="cs" src="/static/iconfont/cs.svg"/>
|
|
|
+ </movable-view>
|
|
|
+ </movable-area>
|
|
|
+
|
|
|
<!-- 站点清单 end-->
|
|
|
|
|
|
<!-- <cover-view class="login_bar">
|
|
|
<login-bar class="w100 text-center"></login-bar>
|
|
|
</cover-view>-->
|
|
|
<!-- <cover-view class="login_bar" v-show="!isLogin">-->
|
|
|
- <login-bar class="w100 text-center"></login-bar>
|
|
|
+ <login-bar class="w100 text-center" send-message-title="YesWash洗车客服"></login-bar>
|
|
|
<!-- </cover-view>-->
|
|
|
<tab-bar :index="0"></tab-bar>
|
|
|
</view>
|
|
|
@@ -73,10 +81,9 @@ import {calcMapDistance} from "@/utils/common"
|
|
|
import {checkLogin, fetchToken, loadUserInfo, tryLogin} from "@/utils/auth";
|
|
|
import {rpxToPx} from "@/utils/device";
|
|
|
|
|
|
-const title = ref('Hello')
|
|
|
const isLogin = ref(false)
|
|
|
+const isDragging = ref(false)
|
|
|
|
|
|
-const containerStyle = ref();
|
|
|
const change = () => {
|
|
|
console.log("change")
|
|
|
}
|
|
|
@@ -105,18 +112,34 @@ const initState = () => ({
|
|
|
location: {
|
|
|
latitude: 0,
|
|
|
longitude: 0,
|
|
|
- }
|
|
|
+ },
|
|
|
+ startAxis: {},
|
|
|
+ csAxis: {
|
|
|
+ right: '0rpx',
|
|
|
+ top: '200rpx'
|
|
|
+ },
|
|
|
+ areaStyle: {
|
|
|
+ "height": "100vh",
|
|
|
+ "width": "750rpx",
|
|
|
+ top: 0,
|
|
|
+ position: "fixed",
|
|
|
+
|
|
|
+ },
|
|
|
+ screenWidth:350
|
|
|
})
|
|
|
|
|
|
const state = reactive(initState())
|
|
|
|
|
|
onLoad((e: any) => {
|
|
|
let height = uni.getSystemInfoSync().windowHeight;
|
|
|
+ let width = uni.getSystemInfoSync().windowWidth;
|
|
|
+ console.log(height, width, "screen")
|
|
|
+ state.screenWidth = width;
|
|
|
// const bound = uni.getMenuButtonBoundingClientRect();
|
|
|
// width: 100%;height:170px;
|
|
|
state.customStyle = {
|
|
|
- width:'100%',
|
|
|
- height:`${(height-rpxToPx(60))/4}px`
|
|
|
+ width: '100%',
|
|
|
+ height: `${(height - rpxToPx(60)) / 4}px`
|
|
|
};
|
|
|
/* if (query) {
|
|
|
uni.showToast({
|
|
|
@@ -131,9 +154,9 @@ onShow(() => {
|
|
|
let height = uni.getSystemInfoSync().windowHeight;
|
|
|
// const bound = uni.getMenuButtonBoundingClientRect();
|
|
|
// width: 100%;height:170px;
|
|
|
- state.customStyle= {
|
|
|
- width:'100%',
|
|
|
- height:`${(height-rpxToPx(60))/4}px`
|
|
|
+ state.customStyle = {
|
|
|
+ width: '100%',
|
|
|
+ height: `${(height - rpxToPx(60)) / 4}px`
|
|
|
};
|
|
|
|
|
|
let token = fetchToken();
|
|
|
@@ -314,6 +337,17 @@ const handleNavStation = (station: any) => {
|
|
|
console.log(station)
|
|
|
}
|
|
|
|
|
|
+
|
|
|
+const handleContact = (e: any) => {
|
|
|
+ console.log("handleContact", e)
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+const onChange = (e) => {
|
|
|
+ console.log(e)
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
@@ -380,4 +414,52 @@ page {
|
|
|
height: calc(100vh - 810rpx);
|
|
|
overflow: scroll;
|
|
|
}
|
|
|
+
|
|
|
+.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;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.mov-area {
|
|
|
+ pointer-events: none;
|
|
|
+
|
|
|
+ .movable-view {
|
|
|
+ width: 100rpx !important;
|
|
|
+ height: 100rpx !important;
|
|
|
+ pointer-events: auto; // 恢复鼠标事件
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+$all_width: 96rpx;
|
|
|
+$all_height: 96rpx;
|
|
|
+movable-area {
|
|
|
+ height: 100vh;
|
|
|
+ width: 750rpx;
|
|
|
+ top: 0;
|
|
|
+ position: fixed;
|
|
|
+ pointer-events: none; // 鼠标事件可以渗透
|
|
|
+ movable-view {
|
|
|
+ width: $all_width;
|
|
|
+ height: $all_height;
|
|
|
+ pointer-events: auto; // 恢复鼠标事件
|
|
|
+ image {
|
|
|
+ width: $all_width;
|
|
|
+ height: $all_height;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
zuypeng