gg
/
WashingCar-frontend-Ver3.0
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
main
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'e8a64c37da'
${ noResults }
WashingCar-frontend-Ver3.0/pages/sweep/sweep.vue

943 lines
20 KiB
Vue
Raw Normal View History Unescape Escape

大部分ui界面完成
1 year ago
<template>
ui
1 year ago
<view class="nav" :class="{navs:navindex==1}">
<text class="ttt">首页</text>
</view>
<scroll-view class="index" scroll-y="true" @scroll="scroll" ref="scroView">
<view class="uni-margin-wrap">
<swiper class="swiper" :autoplay="true" :indicator-dots="true" indicator-color="rgba(220,192,203,1)"
indicator-active-color="rgba(255,255,255,1)">
<swiper-item class="swiper-item" v-for="(item,index) in banners" :key="index">
<img :src="item" class="img" alt="" />
</swiper-item>
</swiper>
</view>
<view class="boxs">
<view class="bodys-headers">
<view class="header-a" @click="scaends">
<view class="header-b">
<view class="image">
<img class="imagea" src="https://www.jiubaotongxue.love/image/demo1.png" alt="" />
</view>
<view class="txt">
我要洗车
</view>
</view>
</view>
<view class="header-a" @click="gotoRechange">
<view class="header-b">
<view class="image">
<img class="imagea" src="https://www.jiubaotongxue.love/image/demo2.png" alt="" />
</view>
<view class="txt">
充值优惠
</view>
</view>
</view>
<view class="header-a" @click="validate">
<view class="header-b">
<view class="image">
<img class="imagea" src="https://www.jiubaotongxue.love/image/demo3.png" alt="" />
</view>
<view class="txt">
绑定车辆
</view>
</view>
</view>
<view class="header-a" @click="iiii">
<view class="header-b">
<view class="image">
<img class="imagea" src="https://www.jiubaotongxue.love/image/demo4.png" alt="" />
</view>
<view class="txt">
优惠券领取
</view>
</view>
</view>
</view>
<view class="nav-title" @click="preferential">
<img class="nav-img-left" src="https://www.jiubaotongxue.love/image/demo7.png" alt="" />
<text class="t">团购核销入口</text>
<view class="nav-btn">
进入
</view>
</view>
</view>
<view class="bodys-title">
<view class="title-left">
<img class="t" src="https://www.jiubaotongxue.love/image/demo5.png" alt="" />
<text class="i">精选店铺</text>
</view>
<view class="title-right" @click="gotoList">
更多 >
</view>
</view>
<view class="body-data">
<view class="datas" v-for="(item,index) in demo" :key="index" @click="demos">
<img class="datas-img" src="https://www.jiubaotongxue.love/image/bannas.png" alt="" />
<view class="datas-title">
中石化顺达加油站
</view>
<view class="datas-address">
<img class="i" src="https://www.jiubaotongxue.love/image/map1.png" alt="" />
<view class="t">
杭州市拱墅区丰庆755
</view>
</view>
<view class="datas-navigation">
<view class="left-d">
<img class="i" src="https://www.jiubaotongxue.love/image/map2.png" alt="" /><text
class="colors">5.4km|</text>
</view>
<view class="left-x">
<img class="i" src="https://www.jiubaotongxue.love/image/map2.png" alt="" /><text
class="colors">站点维修</text>
</view>
</view>
<view class="datas-state">
<view class="sum">
总共位：5
</view>
<view class="surplus">
空闲：5
</view>
</view>
<view class="actives">
暂停营业
</view>
</view>
</view>
<view class="maps-title">
<view class="title-left">
<img class="t" src="https://www.jiubaotongxue.love/image/map3.png" alt="" />
<text class="i">网点展示</text>
</view>
<view class="map-container">
<map style="width: 100%; height: 892rpx;" class="map" :scale="scale"
:latitude="latitude" :longitude="longitude" :markers="covers">
<cover-view slot="callout">
<block v-for="(item,index) in covers" :key="index">
<cover-view class="customCallout" :marker-id="item.id">
<cover-view class="content">
{{item.title}}
<cover-view class="equipment-status"
:class="item.joinCluster?'red':''">在线</cover-view>
</cover-view>
</cover-view>
</block>
</cover-view>
</map>
</view>
<view class="ding">
</view>
</view>
<view class="mapWindow" v-if="isMap===1">
<view class="l">
<view class="title">
<text class="t">中山花园洗车点</text><text class="r">正常营业</text>
</view>
<view class="c">
杭州千年舟家居文化创意港
</view>
<view class="b">
<img class="i" src="https://www.jiubaotongxue.love/image/map2.png" alt="" />
<text class="times">6:00-22:00</text>
</view>
</view>
<view class="right-m">
<view class="box">
<img class="ic" src="https://www.jiubaotongxue.love/image/demo10.png" alt="" />
<view class="txt">
导航
</view>
</view>
</view>
</view>
</scroll-view>
大部分ui界面完成
1 year ago
</template>
ui
1 year ago
<script setup>
import {
ref,
reactive
} from 'vue';
const scroView = ref(null)
const demo = ref([0, 1, 2, 3])
const navindex = ref(0)
const isMap = ref(0)
const homeScro = ref(null)
const longitude = ref(120.141023)
const latitude = ref(30.311983)
const scroll = (e) => {
if (e.detail.scrollTop > 60) {
navindex.value = 1
} else {
navindex.value = 0
}
}
const demos = () => {
uni.navigateTo({
url: "/pages/networkDetail/networkDetail"
})
}
const preferential = () => {
uni.navigateTo({
url: "/pages/preferentialDetail/preferentialDetail"
})
}
const scaends = () => {
uni.navigateTo({
url: "/pages/implement/implement"
})
}
// 假设的地图中心点经纬度
const centerLongitude = ref(120.1421);
const centerLatitude = ref(30.31974);
const controls = ref({
scale: true, // 是否显示比例尺控件
zoom: true, // 是否显示缩放按钮控件
// 定位控件
myLocation: true
})
const returnToMyLocation = () => {
// 获取用户当前位置信息
navigator.geolocation.getCurrentPosition((position) => {
centerLatitude.value = position.coords.latitude;
centerLongitude.value = position.coords.longitude;
});
}
const scale = ref(14);
const banners = ref(['https://www.jiubaotongxue.love/image/bannas.png',
'https://ts1.cn.mm.bing.net/th/id/R-C.c1c536c60766315effcf7473734265c8?rik=BJnvGw%2fMafvL5w&riu=http%3a%2f%2fdesk.fd.zol-img.com.cn%2ft_s960x600c5%2fg2%2fM00%2f0E%2f09%2fCg-4WlVsB-GII_QDACASGpf7ol4AAEeNQPDq30AIBIy241.jpg&ehk=rmAXHBKBoEX%2bHmHxwM1UvcjGF3rxRv5booeLLpySEys%3d&risl=&pid=ImgRaw&r=0',
'https://pic1.zhimg.com/v2-9db7bf3b825f2db103a534ca59c75481_r.jpg?source=1940ef5c'
])
// 批量添加的标记点数组
const markers = reactive([{
id: 1,
latitude: 30.32974,
longitude: 120.1421,
name: '标记点1',
iconPath: 'https://www.jiubaotongxue.love/image/demo8.png',
width: 30,
height: 30,
// anchor: {
// x: 0.5,
// y: 0.5
// },
callout: {
// content: '杭州网点1',
// color: '#000000',
// fontSize: 10,
// borderRadius: 5,
// bgColor: '#ffffff',
// padding: 10,
// width: 100,
// height: 10,
// display: 'ALWAYS', // 始终显示
}
},
{
id: 2,
latitude: 30.34974,
longitude: 120.1421, // 稍微偏移的经度
name: '标记点2',
iconPath: 'https://www.jiubaotongxue.love/image/demo8.png',
width: 30,
height: 30,
callout: {
// content: '杭州网点1',
// color: '#000000',
// fontSize: 10,
// borderRadius: 5,
// bgColor: '#ffffff',
// padding: 10,
// width: 100,
// height: 10,
// display: 'ALWAYS', // 始终显示
}
},
// ... 可以继续添加更多标记点
]);
const markerId = ref(null)
const covers = ref(
[{
id: 0,
longitude: 120.1421,
latitude: 30.32974,
iconPath: 'https://www.jiubaotongxue.love/image/demo8.png', //显示的图标
rotate: 0, // 旋转度数
width: 30, //宽
height: 30, //高
title: '设备1', //标注点名
// alpha: 1, //透明度
joinCluster: true,
customCallout: {
anchorY: 0,
anchorX: 0,
display: "ALWAYS"
},
},
{
id: 1234597,
latitude: 23.106574, //纬度
longitude: 113.324587, //经度
iconPath: 'https://www.jiubaotongxue.love/image/demo8.png', //显示的图标
rotate: 0, // 旋转度数
width: 30, //宽
height: 30, //高
title: '设备2', //标注点名
// alpha: 0.5, //透明度
joinCluster: true,
customCallout: {
anchorY: 0,
anchorX: 0,
display: "ALWAYS"
},
},
{
id: 2,
latitude: 23.1338, //纬度
longitude: 113.33052, //经度
iconPath: 'https://www.jiubaotongxue.love/image/demo8.png', //显示的图标
rotate: 0, // 旋转度数
width: 30, //宽
height: 30, //高
title: '设备3', //标注点名
// alpha: 0.5, //透明度
joinCluster: false,
customCallout: {
anchorY: 0,
anchorX: 0,
display: "ALWAYS"
},
},
{
id: 3,
latitude: 23.136455, //纬度
longitude: 113.329002, //经度
iconPath: '', //显示的图标
title: '设备4', //标注点名
rotate: 0, // 旋转度数
width: 20, //宽
height: 30, //高
// alpha: 0.5, //透明度
customCallout: {
anchorY: 0,
anchorX: 0,
display: "ALWAYS"
},
},
{
id: 4,
latitude: 23.224781, //纬度
longitude: 113.293911, //经度
iconPath: '', //显示的图标
rotate: 0, // 旋转度数
title: '设备5', //标注点名
width: 20, //宽
height: 30, //高
// alpha: 0.5, //透明度
customCallout: {
anchorY: 0,
anchorX: 0,
display: "ALWAYS"
},
},
{
id: 5,
latitude: 23.072726, //纬度
longitude: 113.277921, //经度
iconPath: '', //显示的图标
rotate: 0, // 旋转度数
title: '设备6', //标注点名
width: 20, //宽
height: 30, //高
// alpha: 0.5, //透明度
customCallout: {
anchorY: 0,
anchorX: 0,
display: "ALWAYS"
},
},
])
const onMarkerTap = (e) => {
isMap.value = 1;
console.log(e);
if (markerId.value && markerId.value - 1 >= 0) {
markers[markerId.value - 1].iconPath = 'https://www.jiubaotongxue.love/image/demo8.png';
markers[markerId.value - 1].callout = {}
}
markers[e.detail.markerId - 1].iconPath = "https://www.jiubaotongxue.love/image/demo9.png";
markers[e.detail.markerId - 1].callout = {
content: '杭州网点1',
color: '#000000',
fontSize: 10,
borderRadius: 5,
bgColor: '#ffffff',
padding: 10,
width: 100,
height: 10,
display: 'ALWAYS', // 始终显示
}
markerId.value = e.detail.markerId
}
const gotoRechange = () => {
uni.navigateTo({
url: "/pages/recharge/recharge"
})
}
const validate = () => {
uni.navigateTo({
url: "/pages/vehicle/vehicle"
})
}
</script>
大部分ui界面完成
1 year ago
<style lang="scss">
ui
1 year ago
.nav {
width: 100%;
height: 11%;
background-color: rgba(0, 0, 0, 0);
position: fixed;
z-index: 10;
top: 0;
color: white;
.ttt {
position: absolute;
bottom: 30rpx;
left: 50%;
transform: translateX(-50%);
}
}
.navs {
background-color: #4475ee;
}
.index {
width: 100%;
height: 100%;
background-color: #f2f2f2;
position: absolute;
.uni-margin-wrap {
position: relative;
width: 100%;
height: 560rpx;
.swiper {
width: 100%;
height: 100%;
.swiper-item {
width: 100%;
height: 100%;
.img {
width: 100%;
height: 100%;
}
}
}
}
.boxs {
width: 690rpx;
height: 318rpx;
background: #FFFFFF;
border-radius: 20rpx;
position: relative;
margin-top: -120rpx;
margin-left: 50%;
transform: translateX(-50%);
.nav-title {
width: 630rpx;
height: 100rpx;
background: rgba(71, 144, 255, 0.12);
border-radius: 20rpx;
margin-left: 50%;
margin-top: 10rpx;
transform: translateX(-50%);
border-radius: 30rpx 30rpx 30rpx 30rpx;
display: flex;
// justify-content: space-between;
align-items: center;
font-size: 28rpx;
.nav-img-left {
width: 70rpx;
height: 70rpx;
border-radius: 50%;
margin-left: 32rpx;
}
.t {
display: block;
margin-left: 24rpx;
color: #4D97FF;
// font-weight: 600;
font-size: 36rpx;
}
.nav-btn {
width: 112rpx;
height: 48rpx;
background: linear-gradient(135deg, #4D97FF 0%, #3377FF 100%), #D8D8D8;
border-radius: 8rpx;
line-height: 48rpx;
color: white;
text-align: center;
margin-left: 156rpx;
}
}
.bodys-headers {
width: 100%;
height: 180rpx;
// background-color: salmon;
display: flex;
.header-a {
position: relative;
width: 22%;
height: 200rpx;
margin: 0 15rpx; // 设置间距
.header-b {
width: 130rpx;
height: 130rpx;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
.image {
width: 80rpx;
height: 80rpx;
margin-left: 50%;
transform: translateX(-50%);
// border: 1rpx solid red;
border-radius: 50%;
position: relative;
.imagea {
position: absolute;
width: 80rpx;
height: 80rpx;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9;
border-radius: 50%;
}
}
.txt {
width: 100%;
height: 20rpx;
text-align: center;
line-height: 20rpx;
font-size: 26rpx;
margin-top: 20rpx;
}
.txts {
color: aqua;
}
}
}
}
}
.bodys-title {
width: 702rpx;
height: 96rpx;
background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%);
position: relative;
margin-left: 50%;
transform: translateX(-50%);
display: flex;
justify-content: space-between;
margin-top: 20rpx;
border-radius: 20rpx 20rpx 20rpx 20rpx;
.title-left {
width: 70%;
height: 96rpx;
position: relative;
display: flex;
.t {
width: 42rpx;
height: 42rpx;
margin-top: 24rpx;
margin-left: 30rpx;
}
.i {
line-height: 96rpx;
display: block;
margin-left: 20rpx;
font-weight: bold;
font-size: 32rpx;
}
}
.title-right {
width: 92rpx;
height: 36rpx;
// background-color: #d9001b;
position: absolute;
top: 50%;
transform: translateY(-50%);
text-align: center;
line-height: 36rpx;
right: 20rpx;
border-radius: 15rpx 15rpx 15rpx 15rpx;
font-size: 26rpx;
color: #242526;
}
}
.body-data {
position: relative;
width: 93%;
// height: 350rpx;
margin-left: 50%;
transform: translateX(-50%);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.datas {
position: relative;
width: 48.5%;
// height: 360rpx;
background-color: #ffffff;
margin-top: 25rpx;
.datas-img {
width: 100%;
height: 176rpx;
background-color: red;
}
.datas-title {
width: 100%;
height: 44rpx;
line-height: 44rpx;
box-sizing: border-box;
padding-left: 28rpx;
font-size: 32rpx;
font-weight: 600;
margin-top: 15rpx;
}
.datas-address {
width: 100%;
height: 38rpx;
display: flex;
align-items: center;
margin-left: 28rpx;
margin-top: 10rpx;
.i {
width: 29rpx;
height: 29rpx;
// background-color: salmon;
}
.t {
width: 70%;
height: 38rpx;
line-height: 38rpx;
// background-color: sandybrown;
font-size: 24rpx;
margin-left: 10rpx;
}
}
.datas-navigation {
width: 100%;
height: 38rpx;
display: flex;
align-items: center;
margin-top: 15rpx;
.left-d {
// width: 40%;
height: 38rpx;
display: flex;
align-items: center;
// background-color: rebeccapurple;
margin-left: 28rpx;
.i {
width: 24rpx;
height: 24rpx;
// background-color: red;
}
.colors {
font-size: 24rpx;
}
}
.left-x {
// width: 40%;
height: 38rpx;
display: flex;
align-items: center;
// background-color: rebeccapurple;
margin-left: 5rpx;
.i {
width: 24rpx;
height: 24rpx;
// background-color: red;
}
.colors {
font-size: 24rpx;
}
}
}
.datas-state {
width: 100%;
height: 100rpx;
display: flex;
justify-content: space-between;
align-items: center;
color: white;
.sum {
width: 138rpx;
height: 36rpx;
background: #4993FF;
font-size: 22rpx;
border: 1rpx solid #4993FF;
text-align: center;
line-height: 36rpx;
margin-left: 20rpx;
border-radius: 7rpx 7rpx 7rpx 7rpx;
}
.surplus {
width: 138rpx;
height: 36rpx;
background: #42BE45;
border: 1rpx solid #42BE45;
font-size: 22rpx;
text-align: center;
line-height: 36rpx;
margin-right: 20rpx;
border-radius: 7rpx 7rpx 7rpx 7rpx;
}
}
.actives {
width: 108rpx;
height: 36rpx;
background: linear-gradient(135deg, #FE7864 0%, #FF3232 100%);
position: absolute;
top: 0rpx;
left: 0rpx;
text-align: center;
line-height: 36rpx;
font-weight: 400;
font-size: 22rpx;
color: #FFFFFF;
border-radius: 0rpx 10rpx 10rpx 0rpx;
}
}
}
.maps-title {
width: 702rpx;
background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%);
position: relative;
margin-left: 50%;
transform: translateX(-50%);
margin-top: 20rpx;
border-radius: 20rpx 20rpx 20rpx 20rpx;
.title-left {
width: 70%;
height: 96rpx;
position: relative;
display: flex;
.t {
width: 42rpx;
height: 42rpx;
margin-top: 24rpx;
margin-left: 30rpx;
}
.i {
line-height: 96rpx;
display: block;
margin-left: 20rpx;
font-weight: bold;
font-size: 32rpx;
}
}
.title-right {
width: 92rpx;
height: 36rpx;
// background-color: #d9001b;
position: absolute;
top: 50%;
transform: translateY(-50%);
text-align: center;
line-height: 36rpx;
right: 20rpx;
border-radius: 15rpx 15rpx 15rpx 15rpx;
font-size: 26rpx;
color: #242526;
}
.map-container {
width: 96%;
height: 690rpx;
position: relative;
margin-left: 50%;
transform: translateX(-50%);
.demo {
width: 100rpx;
height: 100rpx;
background-color: red;
}
}
.ding {
width: 100%;
height: 50rpx;
}
}
.mapWindow {
width: 100%;
height: 202rpx;
position: relative;
display: flex;
justify-content: space-between;
background-color: #feffff;
z-index: 999;
margin-top: 98rpx;
.l {
width: 600rpx;
height: 202rpx;
.title {
width: 100%;
height: 48rpx;
line-height: 48rpx;
display: flex;
margin-top: 30rpx;
.t {
display: block;
font-size: 34rpx;
font-weight: 600;
margin-left: 42rpx;
}
.r {
display: block;
width: 108rpx;
height: 36rpx;
background: linear-gradient(135deg, #FEB44C 0%, #FF8833 100%);
font-size: 22rpx;
text-align: center;
line-height: 36rpx;
color: white;
margin-left: 38rpx;
border-radius: 8rpx 8rpx 8rpx 8rpx;
}
}
.c {
width: 100%;
font-size: 24rpx;
line-height: 24rpx;
height: 34rpx;
box-sizing: border-box;
padding-left: 42rpx;
margin-top: 20rpx;
}
.b {
width: 100%;
height: 36rpx;
display: flex;
align-items: center;
margin-top: 10rpx;
.i {
width: 24rpx;
height: 24rpx;
margin-left: 42rpx;
}
.times {
font-size: 24rpx;
margin-left: 10rpx;
}
}
}
.right-m {
width: 30%;
height: 202rpx;
position: relative;
.box {
position: absolute;
top: 50%;
right: 56rpx;
transform: translateY(-50%);
.ic {
width: 76rpx;
height: 76rpx;
}
.txt {
width: 76rpx;
font-size: 24rpx;
text-align: center;
color: #3377FF;
}
}
}
}
}
大部分ui界面完成
1 year ago
</style>