caiyunyi/pages/index/index.vue
2025-05-08 17:13:04 +08:00

2232 lines
68 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="main" :style="{
backgroundImage:
pageType === 'spring'
? `url(https://eshangtech.com/minTestImg/springPageBg.png)`
: `url(https://eshangtech.com/minTestImg/pageBg.png)`,
}">
<view class="topBox" :style="{
height: menu.bottom + 14 + 'px',
backgroundImage:
pageType === 'spring'
? `url(https://eshangtech.com/minTestImg/springPageBg.png)`
: `url(https://eshangtech.com/minTestImg/pageBg.png)`,
}">
<view class="topContent" :style="{ paddingTop: menu.top + 'px', height: menu.height + 'px' }">
<view class="topLeft">
<image class="YDIcon" src="/static/images/home/yunnanLogo.svg" />
</view>
<view class="topRight" @click="goSelectServer">
<image class="searchIcon" src="/static/images/home/searchIcon.svg" />
<span class="searchText">请输入服务区</span>
</view>
</view>
</view>
<scroll-view class="content" scroll-y :scroll-into-view="scrollView" scroll-with-animation :refresher-enabled="true"
@refresherrefresh="handleReloadFunIndex" :refresher-triggered="triggered" :style="{
paddingTop: menu.bottom + 22 + 'px',
height: `calc(100vh - 50px - ${safeHeight}px )`,
}" @scroll="handlePageScroll">
<!-- 轮播框 -->
<view class="navList" id="navItem">
<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" indicator-color="rgba(255,255,255,0.6)"
indicator-active-color="#ffffff">
<swiper-item v-for="(item, index) in swiperList" :key="index" @click="handleFunClick({ value: 17 })">
<!-- @click="handleShowPreview(item)" -->
<view class="swiper-item uni-bg-red">
<image class="img" :src="item" />
</view>
</swiper-item>
</swiper>
</view>
<!-- 功能列表模块 -->
<view class="funItemList">
<view class="funItem" v-for="(item, index) in funList.slice(0, 9)" :key="index" :style="{
marginBottom: index < 5 ? '32rpx' : '',
}" @click="handleFunClick(item)">
<image class="funItemIcon" :src="pageType === 'spring' ? item.springSrc : item.src" />
<text class="funItemText">{{ item.label }}</text>
</view>
<view class="funItem" @click="handleGoAllFun">
<image class="funItemIcon" :src="pageType === 'spring' ? allFun.springSrc : allFun.src" />
<text class="funItemText">{{ allFun.label }}</text>
</view>
</view>
<!-- 服务区详情 -->
<view class="serviceDetail" @click="handleGoDetail">
<view class="detailTop">
<view class="detailImg">
<image v-if="
serviceDetail.ImageLits && serviceDetail.ImageLits.length > 0
" class="img" :src="serviceDetail.ImageLits[0]" />
<image class="img" v-else src="/static/images/home/defaultIcon.png" />
</view>
<view class="detailRight">
<view class="detailTop">
<view class="title">{{
serviceDetail.SERVERPART_NAME || "-"
}}</view>
<view class="status">
<span class="statusText">营业中</span>
</view>
</view>
<view class="detailBottom">
<span class="distance">{{ serviceDetail.SERVERPART_DISTANCE || "-" }}km</span>
<span class="addressText">{{
serviceDetail.SERVERPART_ADDRESS || "-"
}}</span>
</view>
</view>
<image @click.stop="handleGoMap" class="navigation" src="/static/images/home/navigationIcon.svg" />
</view>
<view class="detailBottom">
<view class="detailBottomItem">
<!-- serviceDetail.sumDetail.haveREFUELINGGUN -->
<image class="detailIcon" :src="true
? '/static/images/home/serviceGasoline.svg'
: '/static/images/home/noServiceGasoline.svg'
" />
<!-- /static/images/home/noServiceGasoline.svg -->
<span class="detailText">加油站</span>
</view>
<view class="detailBottomItem">
<image class="detailIcon" :src="serviceDetail.HASCHARGE
? '/static/images/home/serviceCharge.svg'
: '/static/images/home/noServiceCharge.svg'
" />
<!-- /static/images/home/noServiceCharge.svg -->
<span class="detailText">充电桩</span>
</view>
<view class="detailBottomItem">
<!-- serviceDetail.sumDetail.havePARKING -->
<image class="detailIcon" :src="true
? '/static/images/home/carStop.svg'
: '/static/images/home/noCarStop.svg'
" />
<!-- /static/images/home/noCarStop.svg -->
<span class="detailText">停车场</span>
</view>
<view class="detailBottomItem">
<!-- serviceDetail.sumDetail.haveWC -->
<image class="detailIcon" :src="true
? '/static/images/home/toilet.svg'
: '/static/images/home/noToilet.svg'
" />
<!-- src="/static/images/home/noToilet.svg" -->
<span class="detailText">卫生间</span>
</view>
<view class="detailBottomItem">
<!-- serviceDetail.HASMOTHER -->
<image class="detailIcon" :src="true
? ' /static/images/home/badyHome.svg'
: '/static/images/home/noBadyHome.svg'
" />
<!-- src="/static/images/home/noBadyHome.svg" -->
<span class="detailText">母婴室</span>
</view>
<view class="detailBottomItem">
<image class="detailIcon" :src="serviceDetail.HASPILOTLOUNGE
? '/static/images/home/serviceDriverHome.svg'
: '/static/images/home/noServiceDriverHome.svg'
" />
<!-- src="/static/images/home/noServiceDriverHome.svg" -->
<span class="detailText">司机之家</span>
</view>
</view>
<view class="stateGrid">
<view class="leftGrid">
<!-- <image class="gridImg" src="/static/images/home/stateGrid.png" /> -->
<text class="gridText">交投新能源</text>
<text class="fastCharg">快充</text>
</view>
<view class="rightGrid">
<text class="other">空</text>
<text class="have">{{ chargingObj.use || "0" }}</text>
<text class="all" v-if="chargingObj.have > 0">/{{ chargingObj.have || "0" }}</text>
<text class="all" v-else>/{{ serviceDetail.sumDetail.STATEGRIDCHARGE || "0" }}</text>
</view>
</view>
</view>
<!-- 高速路况播报 -->
<view class="roadStatus" @click="handleGoHighWay">
<view class="roadTop">
<view class="roadTopLeft">
<image class="roadIcon" src="/static/images/home/broadcastIcon.svg" />
<text class="roadTitle">高速信息播报</text>
<!-- <text class="roadTitle">女神节团购活动</text> -->
</view>
<view class="roadTopRight">
<image class="roadIcon" src="/static/images/home/rightArrow.svg" />
</view>
</view>
<div class="messageListBox">
<div :class="roadStatusList.length > 2
? 'messageList scrolling'
: 'messageList'
">
<!-- 为了实现无缝滚动,克隆一份列表 -->
<view v-if="roadStatusList && roadStatusList.length > 1">
<div class="messageItem" v-for="(item, index) in roadStatusList.concat(roadStatusList)" :key="index">
<div class="icon"></div>
<div class="contentMessage">
<!-- {{ item.NOTICEINFO_TITLE || "-" }} -->
{{ item.title || item.NOTICEINFO_TITLE || "-" }}
</div>
</div>
</view>
<view v-if="roadStatusList && roadStatusList.length === 1">
<div class="messageItem" v-for="(item, index) in roadStatusList" :key="index">
<div class="icon"></div>
<div class="contentMessage">
<!-- {{ item.NOTICEINFO_TITLE || "-" }} -->
{{ item.title || item.NOTICEINFO_TITLE || "-" }}
</div>
</div>
</view>
</div>
</div>
</view>
<!-- 驿购商城 -->
<view class="shoppingMall">
<view class="mallTop" @click="handleGoShop">
<view class="mallTopLeft">
<image class="mallIcon" src="/static/images/home/broadcastIcon.svg" />
<!-- <text class="roadTitle">驿购商城</text> -->
<text class="roadTitle">彩云驿商城</text>
</view>
<view class="mallTopRight">
<image class="mallIcon" src="/static/images/home/rightArrow.svg" />
</view>
</view>
<view class="mallContent">
<view class="advertisement">
<view class="advertisementItem" @click="handleGoShopList(5030)">
<view class="advertisementItemTop topLeft">
<view class="topTitle">
<text class="light">促销</text>
<text class="normal">单品</text>
</view>
<view class="topOther">超多优惠等你来</view>
<image class="mallBg" src="/static/images/home/leftShopBg.png" />
</view>
<view class="advertisementItemBottom">
<image class="advertisementImg" v-for="(item, index) in specialOffersList" :key="index"
:src="item.IMAGE_PATH" @click.stop="handleGoShopDetail(item)" />
<!-- <image class="advertisementImg" /> -->
</view>
</view>
<view class="advertisementItem" @click="handleGoShopList(5040)">
<view class="advertisementItemTop topRight">
<view class="topTitle">
<text class="light rightTopTitle">甄选</text>
<text class="normal">商品</text>
</view>
<view class="topOther">超多优惠等你来</view>
<image class="mallBg" src="/static/images/home/rightShopBg.png" />
</view>
<view class="advertisementItemBottom">
<image class="advertisementImg" v-for="(item, index) in productsList" :key="index"
:src="item.IMAGE_PATH" @click.stop="handleGoShopDetail(item)" />
<!-- <image class="advertisementImg" /> -->
</view>
</view>
</view>
</view>
<view class="mallList">
<view class="mallItem" v-for="(item, index) in shoppingMall" :key="index" @click="handleGoShopDetail(item)">
<view class="mallTop">
<image class="mallImg" :src="item.IMAGE_PATH ? item.IMAGE_PATH : ''" />
</view>
<view class="mallBottom">
<text class="priceTop">
{{ item.COMMODITY_NAME || "" }}
<!-- <view class="mallTitle">{{ item.COMMODITY_NAME || "" }}</view> -->
<!-- <view class="sumText">436付款</view> -->
</text>
<!-- <view class="retailPrice"
>¥{{ item.RETbigNumber || "" }}.{{
item.RETsmallNumber || "00"
}}</view
> -->
<view style="
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
">
<view class="priceBox">
<view class="leftPrice">
<span class="unit">¥</span>
<!-- <span class="price">{{
item.COMMODITY_MEMBERPRICE || ""
}}</span> -->
<span class="price">{{ item.bigNumber || "" }}.{{
item.smallNumber || "00"
}}</span>
</view>
<view class="shopState" v-if="!(item.COMMODITY_STOCK > 0)">已售罄</view>
<!-- <view class="rightPrice"> -->
<!-- <image
class="mallIcon"
src="/static/images/home/mallIcon.svg"
/> -->
<!-- </view> -->
</view>
</view>
</view>
</view>
</view>
</view>
</scroll-view>
<!-- 回到顶部 -->
<view class="backTopBox" v-if="showBackTop" @click="handleGoBack">
<image class="backIcon" src="/static/images/home/backTopIcon.png" />
</view>
<!-- 广告 -->
<uni-popup ref="noticeRef">
<view class="noticePopup" @click="handleHidePopup">
<img class="closeIcon" @click.stop="handleCloseNotice"
src="https://eshangtech.com/ShopICO/ahyd-BID/examine/close.svg" />
</view>
</uni-popup>
<!-- ETC -->
<uni-popup ref="ETCRef">
<view class="ETCPopup">
<view class="ETCItem" @click="handleGoETC(1)">
<image class="itemImg" src="/static/images/home/newEtc.svg" />
<text class="itemText">ETC小程序</text>
</view>
<view class="ETCItem" @click="handleGoETC(2)">
<image class="itemImg" src="/static/images/home/ETCmap.svg" />
<text class="itemText">ETC网点</text>
</view>
</view>
</uni-popup>
<tabbar :page="'/pages/index/index'" />
</view>
</template>
<script>
import { mapGetters } from "vuex";
import tabbar from "../../components/tabbar.vue";
export default {
components: { tabbar },
data() {
return {
menu: {},
funList: [
{
label: "服务区",
value: 1,
index: 1,
src: "/static/images/home/serviceIcon.svg",
springSrc: "/static/images/home/springService.svg",
},
{
label: "商城",
value: 15,
index: 2,
src: "/static/images/home/shoppingMallIcon.svg",
springSrc: "/static/images/home/shoppingMallIconSpring.svg",
},
{
label: "加油",
value: 2,
index: 3,
src: "/static/images/home/gasoline.svg",
springSrc: "/static/images/home/springGasoline.svg",
},
{
label: "充电",
value: 3,
index: 4,
src: "/static/images/home/electricityIcon.svg",
springSrc: "/static/images/home/springElectricityIcon.svg",
},
{
label: "ETC",
value: 4,
index: 5,
src: "/static/images/home/ETC.svg",
springSrc: "/static/images/home/springETC.svg",
},
{
label: "点餐",
value: 5,
index: 6,
src: "/static/images/home/foodIcon.svg",
springSrc: "/static/images/home/springFood.svg",
},
{
label: "招商",
value: 17,
index: 7,
src: "/static/images/home/attractInvestment.svg",
springSrc: "/static/images/home/attractInvestment.svg",
},
{
label: "租车",
value: 7,
index: 17,
src: "/static/images/home/carRental.svg",
springSrc: "/static/images/home/springCarRental.svg",
},
{
label: "投诉建议",
value: 9,
index: 9,
src: "/static/images/home/suggestion.svg",
springSrc: "/static/images/home/springSuggestion.svg",
},
{
label: "保险",
value: 8,
index: 10,
src: "/static/images/home/insuranceIcon.svg",
springSrc: "/static/images/home/springInsurance.svg",
},
{
label: "金融",
value: 10,
index: 11,
src: "/static/images/home/finance.svg",
springSrc: "/static/images/home/springFinance.svg",
},
{
label: "文旅",
value: 11,
index: 12,
src: "/static/images/home/travel.svg",
springSrc: "/static/images/home/springTravel.svg",
},
{
label: "售后",
value: 12,
index: 13,
src: "/static/images/home/customerService.svg",
springSrc: "/static/images/home/springCustomerService.svg",
},
{
label: "加水",
value: 13,
index: 14,
src: "/static/images/home/addWater.svg",
springSrc: "/static/images/home/springAddWater.svg",
},
{
label: "尿素",
value: 14,
index: 15,
src: "/static/images/home/ureaIcon.svg",
springSrc: "/static/images/home/springUrea.svg",
},
{
label: "司机之家",
value: 6,
index: 8,
src: "/static/images/home/driverHome.svg",
springSrc: "/static/images/home/springDriverHome.svg",
},
],
allFun: {
label: "全部功能",
value: 15,
src: "/static/images/home/allFunIcon.svg",
springSrc: "/static/images/home/springAllFunIcon.svg",
},
pageType: "", // spring 春节模式
swiperList: [
"https://ahyd.eshangtech.com/UploadImageDir/minprogram/招商信息_1.jpg",
"https://ahyd.eshangtech.com/UploadImageDir/minprogram/龙江大桥_1.jpg",
"https://ahyd.eshangtech.com/UploadImageDir/minprogram/小沙坝服务区_1.jpg",
],
previewImageList: [
"https://ahyd.eshangtech.com/UploadImageDir/minprogram/招商信息_1.jpg",
"https://ahyd.eshangtech.com/UploadImageDir/minprogram/龙江大桥.jpg",
"https://ahyd.eshangtech.com/UploadImageDir/minprogram/小沙坝服务区.jpg",
], // 预览图数组
roadStatusList: [], // 路况播报
seat: {}, // 坐标
serverPartList: [],
serviceDetail: {}, // 当前服务区的详情
specialOffersList: [], // 促销单品的数据
productsList: [], // 甄选商品的数据
shoppingMall: [], // 商城精选的数据
chargingObj: {
have: 0,
use: 0,
}, // 充电桩数据
safeHeight: 0, // ios的安全距离
showBackTop: false, // 页面滚动距离
scrollView: "",
showPoster: true, // 判断是否显示海报
isChangeIcon: true, // 判断是否切换商城的图表
triggered: false,
};
},
async onLoad() {
let stronge = uni.getStorageSync("showIndexPoster");
console.log("stronge", stronge);
// this.$refs.noticeRef.open("center");
if (new Date("2025-05-07 00:00:00").getTime() < new Date().getTime() && new Date("2025-05-15 23:59:59").getTime() > new Date().getTime()) {
this.$refs.noticeRef.open("center");
let _this = this
setTimeout(() => {
_this.$refs.noticeRef.close();
}, 5000)
} else {
this.showPoster = false;
}
this.menu = uni.getMenuButtonBoundingClientRect();
let systemInfo = uni.getSystemInfoSync();
console.log("systemInfo", systemInfo);
// 判断如果是苹果手机 那么把它底部的安全距离存起来
if (systemInfo.osName === "ios") {
// let height = systemInfo.safeArea.bottom - systemInfo.safeArea.height;
let height = systemInfo.safeAreaInsets.bottom;
console.log("height", height);
this.safeHeight = Number(height);
uni.setStorageSync("safeHeight", height);
}
let currentService = uni.getStorageSync("currentService");
let seatInfo = uni.getStorageSync("seatInfo");
if (seatInfo) {
this.seat = JSON.parse(seatInfo);
}
// this.getLocalServer();
if (currentService) {
this.serviceDetail = currentService;
} else {
this.getLocalServer();
}
let funList = uni.getStorageSync("funList");
if (funList) {
console.log("newFunList", JSON.parse(funList));
let newFunList = JSON.parse(funList);
if (newFunList && newFunList.length > 0) {
newFunList.forEach((item, index) => {
item.index = index + 1;
});
}
this.funList = newFunList;
} else {
uni.setStorageSync("funList", JSON.stringify(this.funList));
}
console.log("this.serviceDetail", this.serviceDetail);
// 高速头条播报
this.handleGetHighwayHeadlines();
// 促销单品
this.handleGetSpecialOffers();
// 甄选商品
this.handleGetProductsList();
// 商城的内容
this.handleGetShoppingMall();
this.$utils.addUserBehaviorNew();
},
async onShow() {
let currentService = uni.getStorageSync("currentService");
if (currentService) {
await this.handleGetServiceDetail(currentService.SERVERPART_ID);
// this.serviceDetail = currentService;
// this.serviceDetail.sumDetail = this.handleMergeDetail(currentService);
// console.log("this.serviceDetail", this.serviceDetail);
this.handleGetChargingStation(this.serviceDetail);
}
console.log("onShow", this.user);
let funList = uni.getStorageSync("funList");
if (funList) {
console.log("newFunList", JSON.parse(funList));
let newFunList = JSON.parse(funList);
if (newFunList && newFunList.length > 0) {
newFunList.forEach((item, index) => {
item.index = index + 1;
});
}
this.funList = newFunList;
console.log("this.funList", this.funList);
}
// if (new Date("2025-03-02 8:00:00").getTime() < new Date().getTime()) {
// this.isChangeIcon = false;
// }
// if (this.isChangeIcon) {
// let fun = this.funList;
// fun.forEach((item) => {
// if (item.value === 15) {
// item.label = "女神活动";
// item.src = "https://eshangtech.com/minTestImg/GoddessFestival.png";
// item.springSrc =
// "https://eshangtech.com/minTestImg/GoddessFestival.png";
// }
// });
// console.log("fun", fun);
// this.funList = fun;
// this.$forceUpdate();
// }
},
async onPullDownRefresh() {
this.handleReloadFunIndex()
uni.stopPullDownRefresh()
},
computed: {
...mapGetters({
user: "user",
tableNum: "orderTable",
orderRemark: "orderRemark",
provinceCode: "provinceCode",
couponPrice: "couponPrice",
nowStore: "nowStore",
}),
},
onShareAppMessage() {
// let _this = this;
return {
title: "彩云驿出行",
path: "/pages/index/index",
// imageUrl: _this.good.DEFAULT_IMG,
};
},
onShareTimeline() {
return {
title: "彩云驿出行",
path: "/pages/index/index",
// imageUrl: _this.good.DEFAULT_IMG,
};
},
methods: {
handleCloseNotice() {
this.$refs.noticeRef.close();
},
// 重置顶部方法顺序
async handleReloadFunIndex() {
console.log('handleReloadFunIndex');
this.triggered = true
let _this = this
await new Promise((resolve) => {
setTimeout(() => {
_this.funList = [
{
label: "服务区",
value: 1,
index: 1,
src: "/static/images/home/serviceIcon.svg",
springSrc: "/static/images/home/springService.svg",
},
{
label: "商城",
value: 15,
index: 2,
src: "/static/images/home/shoppingMallIcon.svg",
springSrc: "/static/images/home/shoppingMallIconSpring.svg",
},
{
label: "加油",
value: 2,
index: 3,
src: "/static/images/home/gasoline.svg",
springSrc: "/static/images/home/springGasoline.svg",
},
{
label: "充电",
value: 3,
index: 4,
src: "/static/images/home/electricityIcon.svg",
springSrc: "/static/images/home/springElectricityIcon.svg",
},
{
label: "ETC",
value: 4,
index: 5,
src: "/static/images/home/ETC.svg",
springSrc: "/static/images/home/springETC.svg",
},
{
label: "点餐",
value: 5,
index: 6,
src: "/static/images/home/foodIcon.svg",
springSrc: "/static/images/home/springFood.svg",
},
{
label: "招商",
value: 17,
index: 7,
src: "/static/images/home/attractInvestment.svg",
springSrc: "/static/images/home/attractInvestment.svg",
},
{
label: "租车",
value: 7,
index: 17,
src: "/static/images/home/carRental.svg",
springSrc: "/static/images/home/springCarRental.svg",
},
{
label: "投诉建议",
value: 9,
index: 9,
src: "/static/images/home/suggestion.svg",
springSrc: "/static/images/home/springSuggestion.svg",
},
{
label: "保险",
value: 8,
index: 10,
src: "/static/images/home/insuranceIcon.svg",
springSrc: "/static/images/home/springInsurance.svg",
},
{
label: "金融",
value: 10,
index: 11,
src: "/static/images/home/finance.svg",
springSrc: "/static/images/home/springFinance.svg",
},
{
label: "文旅",
value: 11,
index: 12,
src: "/static/images/home/travel.svg",
springSrc: "/static/images/home/springTravel.svg",
},
{
label: "售后",
value: 12,
index: 13,
src: "/static/images/home/customerService.svg",
springSrc: "/static/images/home/springCustomerService.svg",
},
{
label: "加水",
value: 13,
index: 14,
src: "/static/images/home/addWater.svg",
springSrc: "/static/images/home/springAddWater.svg",
},
{
label: "尿素",
value: 14,
index: 15,
src: "/static/images/home/ureaIcon.svg",
springSrc: "/static/images/home/springUrea.svg",
}, {
label: "司机之家",
value: 6,
index: 8,
src: "/static/images/home/driverHome.svg",
springSrc: "/static/images/home/springDriverHome.svg",
},
]
_this.triggered = false
uni.setStorageSync("funList", JSON.stringify(_this.funList));
}, 300);
});
},
handleHidePopup() {
uni.setStorageSync("showIndexPoster", 1);
this.$refs.noticeRef.close();
uni.navigateTo({
url: `/pages/shopMallPage/shopType/index`,
});
},
// 回到顶部
handleGoBack() {
this.scrollView = "navItem";
},
// 下拉触发事件
handlePageScroll(e) {
this.pageScrollNumber = Number(e.detail.scrollTop);
if (Number(e.detail.scrollTop) > 100) {
this.showBackTop = true;
} else {
this.scrollView = "";
this.showBackTop = false;
}
},
// 查询现在的充电桩
async handleGetChargingStation(obj) {
let _this = this;
uni.request({
url: "https://xny.yciccloud.com/interconnect/api/interconnection/open/getConnectList", //仅为示例,并非真实接口地址。
method: "POST",
success: (res) => {
console.log("查询现在的充电桩", res.data);
let list = res.data;
let result = [];
if (list && list.length > 0) {
list.forEach((item) => {
if (
(item.stationName.indexOf("读书铺") !== -1 &&
obj.SERVERPART_NAME.indexOf("读书铺") !== -1) ||
(item.stationName.indexOf("鸡街") !== -1 &&
obj.SERVERPART_NAME.indexOf("鸡街") !== -1) ||
(item.stationName.indexOf("星云") !== -1 &&
obj.SERVERPART_NAME.indexOf("星云") !== -1) ||
(item.stationName.indexOf("富民") !== -1 &&
obj.SERVERPART_NAME.indexOf("富民") !== -1)
) {
result.push(item);
}
});
}
console.log("result", result);
console.log("obj", obj);
let sum = 0;
let have = 0;
let use = 0;
if (result && result.length > 0) {
result.forEach((item) => {
if (item.status === "50") {
sum += 1;
}
});
}
console.log("sum", sum);
if (sum > 0) {
use = sum;
if (obj.sumDetail.STATEGRIDCHARGE > 0) {
console.log("1");
if (obj.sumDetail.STATEGRIDCHARGE < result.length) {
have = result.length;
} else {
have = obj.sumDetail.STATEGRIDCHARGE;
}
} else {
console.log("2");
have = result.length;
}
} else {
have = obj.sumDetail.LIVESTOCKPACKING;
let rank = Number(uni.getStorageSync("rankNumber"));
console.log("rank", rank);
if (rank > 0) {
} else {
rank = Math.random() * (0.7 - 0.5) + 0.5;
uni.setStorageSync("rankNumber", rank);
}
use = Math.floor(have * rank);
}
_this.chargingObj = {
have: have,
use: use,
};
console.log("_this.chargingObj", _this.chargingObj);
_this.$forceUpdate();
},
});
},
// 拿到服务区详情
async handleGetServiceDetail(id) {
if (!id) {
return;
}
let req = {
ServerpartId: id,
latitude: this.seat.latitude,
longitude: this.seat.longitude,
};
const data = await this.$api.$get(
"/CommercialApi/BaseInfo/GetServerpartInfo",
req
);
let obj = data.Result_Data;
console.log("detail", obj);
this.serviceDetail = obj;
this.serviceDetail.sumDetail = this.handleMergeDetail(obj);
console.log("this.serviceDetail", this.serviceDetail);
},
// 预览查看
handleShowPreview(obj) {
uni.previewImage({
current: obj, // 当前显示图片的http链接
urls: this.previewImageList, // 需要预览的图片http链接列表
});
},
handleGoDetail() {
uni.navigateTo({
url: `/pages/serviceDetail/index`,
});
},
// ETC的功能
handleGoETC(value) {
if (value === 1) {
uni.navigateToMiniProgram({
appId: "wxb228568a0a4f7120",
});
} else if (value === 2) {
uni.navigateTo({
url: `/pages/etcMap/index`,
});
}
},
// 功能列表
handleFunClick(obj) {
console.log("obj", obj);
// 服务区
if (obj.value === 1) {
uni.navigateTo({
url: `/pages/serviceDetail/index`,
});
} else if (obj.value === 2) {
// 加油
uni.navigateTo({
url: `/pages/otherFunPage/goPublicPage/index`,
});
// uni.navigateTo({
// url: `/pages/noDataPage/index`,
// });
} else if (obj.value === 3) {
// 充电
uni.navigateToMiniProgram({
shortLink: "#小程序://云南交投新能源充电网平台/Z6OAkOF7DnSm5da",
});
} else if (obj.value === 4) {
// ETC
// uni.navigateToMiniProgram({
// appId: "wxb228568a0a4f7120",
// });
this.$refs.ETCRef.open("center");
// uni.navigateTo({
// url: `/pages/etcMap/index`,
// });
} else if (obj.value === 5) {
// 点餐
uni.navigateTo({
url: "/pages/serviceList/index?type=food",
});
// uni.navigateTo({
// url: `/pages/reservationOrder/index?id=${this.serviceDetail.SERVERPART_ID}`,
// });
} else if (obj.value === 6) {
// 司机之家
uni.navigateTo({
url: "/pages/serviceList/index?type=driver",
});
} else if (obj.value === 7) {
// 租车
// uni.navigateTo({
// url: `/pages/noDataPage/index`,
// });
uni.navigateToMiniProgram({
appId: "wxe4bc565cbbf5e289",
path: `pages/isd/indexNew/index?landingto=home&apptype=ISD_C_WX&st=ser&fromurl=common&channelid=242572`,
// extraData: {
// landingto: "home",
// apptype: "ISD_C_WX",
// st: "ser",
// fromurl: "common",
// channelid: 242572,
// },
});
} else if (obj.value === 8) {
// 保险
uni.navigateTo({
url: `/pages/otherFunPage/insurance/index`,
});
} else if (obj.value === 9) {
// 投诉建议
uni.navigateToMiniProgram({
shortLink: "#小程序://云交经司服/jFbQlCIEsEjf5Nq",
});
} else if (obj.value === 10) {
// 金融
uni.navigateTo({
url: `/pages/otherFunPage/finance/index`,
});
} else if (obj.value === 11) {
// 文旅
uni.navigateTo({
url: `/pages/noDataPage/index`,
});
} else if (obj.value === 12) {
// 售后
uni.navigateTo({
url: `/pages/noDataPage/index`,
});
} else if (obj.value === 13) {
// 加水
uni.scanCode({
success: function (res) {
console.log("条码类型:" + res.scanType);
console.log("条码内容:" + res.result);
},
});
} else if (obj.value === 14) {
// 尿素
uni.scanCode({
success: function (res) {
console.log("条码类型:" + res.scanType);
console.log("条码内容:" + res.result);
},
});
} else if (obj.value === 15) {
if (this.isChangeIcon) {
uni.navigateTo({
url: `/pages/shopMallPage/shopType/index`,
});
} else {
// 商城
this.handleGoShop();
}
} else if (obj.value === 17) {
uni.navigateTo({
url: `/pages/highwayHeadlines/attractInvestment`,
});
}
},
// 跳转到商城
handleGoShop() {
uni.navigateTo({
url: "/pages/shopMallPage/index/index",
});
},
// 全部功能
handleGoAllFun() {
uni.navigateTo({
url: `/pages/allFunPage/index?pageType=${this.pageType}`,
});
},
// 跳转到选择服务区
goSelectServer() {
uni.navigateTo({ url: "/pages/newMap/index/index?comeForm=home" });
},
getLocalServer() {
console.log("getLocation");
// 根据定位获取周边服务区
let _this = this;
uni.getLocation({
type: "gcj02",
altitude: true,
success: (res) => {
console.log("rewrwqerwq", res);
let seatInfo = {
latitude: res.latitude,
longitude: res.longitude,
};
uni.setStorageSync("seatInfo", JSON.stringify(seatInfo));
uni.setStorageSync("actualLocation", JSON.stringify(seatInfo));
_this.seat = seatInfo;
console.log("1");
let latitude = res.latitude;
let longitude = res.longitude;
console.log("2");
_this.handleGetNearService(latitude, longitude);
},
fail: (err) => {
console.log("err", err);
},
});
},
// 合并服务区数据
handleMergeDetail(obj) {
let sumObj = {
LIVESTOCKPACKING: 0, // 充电桩数
STATEGRIDCHARGE: 0, // 国网充电桩数量
LIAUTOCHARGE: 0, // 理想5C充电桩数量
GACENERGYCHARGE: 0, // 广汽能源充电桩数量
OTHERCHARGE: 0, // 其他充电桩数量
REFUELINGGUN92: 0, // 加油枪92号
REFUELINGGUN95: 0, // 加油枪95号
REFUELINGGUN0: 0, // 加油枪0号
HASPANTRY: 0, // 男厕数量
HASWIFI: 0, // 女厕数量
TOILETCOUNT: 0, // 潮汐厕位
HASSHOWERROOM: 0, // 淋浴房
HASWATERROOM: 0, // 开水器
MICROWAVEOVEN: 0, // 微波炉
WASHERCOUNT: 0, // 洗衣机数量
SLEEPINGPODS: 0, // 睡眠仓
HASPILOTLOUNGE: false, // 有无司机之家
HASCHILD: false, // 有无车辆维修
VEHICLEWATERFILLING: false, // 有无车辆加水
SMALLPARKING: 0, // 轿车车位
PACKING: 0, // 客车车位
TRUCKPACKING: 0, // 货车车位
DANPACKING: 0, // 危化品车位
DININGBXCOUNT: 0, // 商铺数量
DININGROOMCOUNT: 0, // 餐饮店
HASBACKGROUNDRADIO: 0, // 便利店
POINTCONTROLCOUNT: 0, // 客房
BUSINESSTYPE: "",
TOILET_PAPER: 0, // 厕纸巾
MABROOMWATER_DISPENSER: 0, // 母婴室饮水机
NURSING_TABLE: 0, // 哺乳桌
BABY_COT: 0, // 婴儿床
CHANGING_TABLE: 0, // 尿布台
DROOMWATER_DISPENSER: 0, // 司机之家饮水机
haveREFUELINGGUN: false, // 判断有无加油
havePARKING: false, // 判断有无停车场
haveWC: false, // 判断有无卫生间
};
if (obj.RegionInfo && obj.RegionInfo.length > 0) {
obj.RegionInfo.forEach((item) => {
sumObj.LIVESTOCKPACKING += item.LIVESTOCKPACKING;
sumObj.STATEGRIDCHARGE += item.STATEGRIDCHARGE;
sumObj.LIAUTOCHARGE += item.LIAUTOCHARGE;
sumObj.GACENERGYCHARGE += item.GACENERGYCHARGE;
sumObj.OTHERCHARGE += item.OTHERCHARGE;
sumObj.REFUELINGGUN92 += item.REFUELINGGUN92;
sumObj.REFUELINGGUN95 += item.REFUELINGGUN95;
sumObj.REFUELINGGUN0 += item.REFUELINGGUN0;
sumObj.HASPANTRY += item.HASPANTRY;
sumObj.HASWIFI += item.HASWIFI;
sumObj.TOILETCOUNT += item.TOILETCOUNT;
sumObj.HASSHOWERROOM += item.HASSHOWERROOM;
sumObj.HASWATERROOM += item.HASWATERROOM;
sumObj.MICROWAVEOVEN += item.MICROWAVEOVEN;
sumObj.WASHERCOUNT += item.WASHERCOUNT;
sumObj.SLEEPINGPODS += item.SLEEPINGPODS;
sumObj.SMALLPARKING += item.SMALLPARKING;
sumObj.PACKING += item.PACKING;
sumObj.TRUCKPACKING += item.TRUCKPACKING;
sumObj.DANPACKING += item.DANPACKING;
sumObj.BUSINESSTYPE = item.BUSINESSTYPE;
sumObj.TOILET_PAPER += item.TOILET_PAPER;
sumObj.MABROOMWATER_DISPENSER += item.MABROOMWATER_DISPENSER;
sumObj.NURSING_TABLE += item.NURSING_TABLE;
sumObj.BABY_COT += item.BABY_COT;
sumObj.CHANGING_TABLE += item.CHANGING_TABLE;
sumObj.DROOMWATER_DISPENSER += item.DROOMWATER_DISPENSER;
if (item.HASPILOTLOUNGE) {
sumObj.HASPILOTLOUNGE = true;
}
if (item.VEHICLEWATERFILLING) {
sumObj.VEHICLEWATERFILLING = true;
}
if (item.HASCHILD) {
sumObj.HASCHILD = true;
}
sumObj.DININGBXCOUNT += item.DININGBXCOUNT;
sumObj.DININGROOMCOUNT += item.DININGROOMCOUNT;
sumObj.HASBACKGROUNDRADIO += item.HASBACKGROUNDRADIO;
sumObj.POINTCONTROLCOUNT += item.POINTCONTROLCOUNT;
if (
sumObj.REFUELINGGUN92 > 0 ||
sumObj.REFUELINGGUN95 > 0 ||
sumObj.REFUELINGGUN0 > 0
) {
sumObj.haveREFUELINGGUN = true;
}
if (
sumObj.SMALLPARKING > 0 ||
sumObj.PACKING > 0 ||
sumObj.TRUCKPACKING > 0 ||
sumObj.DANPACKING > 0
) {
sumObj.havePARKING = true;
}
if (
sumObj.HASPANTRY > 0 ||
sumObj.HASWIFI > 0 ||
sumObj.TOILETCOUNT > 0
) {
sumObj.haveWC = true;
}
});
}
return sumObj;
},
// 拿到最近的服务区数据
async handleGetNearService(latitude, longitude) {
let req = {
Province_Code: this.user.PROVINCE_CODE || "530000",
longitude: longitude,
latitude: latitude,
showservice: true,
appId: "wxee018fb96955552a",
};
console.log("handleGetNearService", req);
uni.showLoading({
title: "查找最近的服务区...",
});
// const data = await this.$api.$get(
// "/CommercialApi/BaseInfo/GetServerpartList",
// req
// );
const data = await this.$api.$javaGet('/third-party/getServerPartList', req)
this.serverPartList = data.Result_Data.List;
console.log("this.serverPartList", this.serverPartList);
let nearService = this.serverPartList[0];
nearService.sumDetail = this.handleMergeDetail(nearService);
this.serviceDetail = nearService;
uni.setStorageSync("currentService", nearService);
console.log("serviceDetail", this.serviceDetail);
let idList = [1212, 1222, 1139, 1215];
if (idList.indexOf(nearService.SERVERPART_ID) !== -1) {
this.handleGetChargingStation(nearService);
}
uni.hideLoading();
},
// 高速头条播报
async handleGetHighwayHeadlines() {
let start = `${this.$moment
.now()
.set("month", -1)
.format("YYYY-MM-DD")} 00:00:00`;
let end = `${this.$moment.now().format("YYYY-MM-DD")} 23:59:59`;
let params = {
startQueryTime: start, // 开始时间
endQueryTime: end, // 结束时间
};
let time = Math.ceil(new Date().getTime() / 1000);
let req = {
app_id: "530000301",
biz_content: JSON.stringify(params),
charset: "UTF-8",
pid: "530000301",
service: "trawe.eats.etc",
utc_timestamp: time,
version: "1.0",
sign_type: "RSA2",
};
let signText = `app_id=${req.app_id}&biz_content=${req.biz_content}&charset=UTF-8&pid=${req.app_id}&service=trawe.eats.etc&utc_timestamp=${req.utc_timestamp}&version=1.0`;
console.log("handleGetHighwayHeadlines", req);
console.log("signText", signText);
// 签名
const sign = await new Promise((resolve, reject) => {
uni.request({
url: "https://admin.es.eshangtech.com/prod-api/RSA/sign",
method: "POST",
data: {
originalText: signText,
privateKey:
"MIIEvAIBADANBgkqhkiG9w0BAQEFAASCBKYwggSiAgEAAoIBAQCtIkIJLbZYI9NvTRkRbqtjJ73gkAUJZBJw88Z+O8prX2HXMTIedmZZxTwbfM5kGpl9VmS0CY8QL0DnDsgHO8QnSDpN1jiqTD9lk1evycuF7ujmlOk/cJ5x2cLPn9rPIrQn1lxp9mBiO1m9vsrNOze/kx7wRyif/+hvn5Q9KtNEMy0K8oOE5vktnjkk1AhhXrTii9eIjOrO3pRgh9cFA9kqQpvD14CImD7tdCgyntKcYAB7rlin6a2N0yH9JJINjOyOiyHufP8sR7pb9VYXVYXukOCItdC9QQluQhSdyC/3BfZD5zV1A+X7pUle7dDLGG6aSZyCibg16siFIEX94KYfAgMBAAECggEAcP5uwrbGzvdywq06sxnbWTdSwQC9iMd7EaTH4xL6pOD3Zg6Be0givGvxMq9dtA94JUkBKE8kw5dTcHlBKxdiiZCmHK63BM4GgjCLhfrZjWvDLNn68KB7iCpq7j6R+6XWljlczvsxJGs/woqGqTMAy1MlWgPXC7Vk6ZTolpMglt0IJOzPtgJ66qU2CtNRjowkXSCHDO2RCjkmYcjU6W+eCvi9cXIXhLv5yra1PE0KOxn3NiEFwgGUXpu8LKqxuUfGLuHljoLxWV8EEfwZaWB6Wy1DHMMgxhKrO3xEmdMEqtvJmF98LRSYiJerkExY8Gdx8bkLPjlCLYKW4JVuPmyYgQKBgQD8l0lLtB94MQMib0t8RzqlbKcczTAkicjSms3/P4kwh50GC8OqwjJB75n4yQyDPgsjms/SnRMq1zjgm+MHSC4snpLCcvKFYLnvrslWGu/2lyUTwEwdUdQe1ILG4Y9NXKWg4zXpKfJ2Rz/cqw6bHGYhQWZ62AXQgiz+W7cIPrsHsQKBgQCveHGHF0WqtYAmrW7nf04PKmcJ5U2briYCWOtWJE5Mo5BYxsGLX6vI53DMNQ42hFk0ye61VNfcazAoGI3mM4+j6R9k3ek8EtkBYBro5eeoBtB7TMTJagQqzBLz316mJBsFmw3TiC9BzYhs3tKJnVxpfqXoqsyu2ZA6VG5Y/gXOzwKBgCbejPvmUvVm7WmOINqWB3NPXgPzm1X0EgA+rDZ8K3tZUxOMGeccDSnSWipLne5QTNyExThOzZVJG0qNEombVOeu2zyq/aECunoktnzWllim96CrdcsJPZAk+Z7rNOcdu6sfa7teph4HZs9pT00VOK4jZ0a+GV71uUDHEkplhNhxAoGAMDOi5BxFe/595KIR7C/xboMUaQh/iDuPn2dzxmcUx0LLPUfkFPhEBV1mhAIzFFDI/JJYK6HR5m/fe7Q7DritRbaddCTtlB4NVK5k1gOJ3oN4s9ZD3Jxt5p/GuQ1sP7F9Zs3QP4KSkL34MwgGx9zdbPFofACnV4TWdN+KrJGjYMsCgYAE0CMM7rYHGY3Vt3/WZZJ+DPlKE6Q+uvFDomtsB1IavCeEJyjBP9+GhBHat86aA3mCFjf4emj1or7OEgPc0gCMtKBG6m10CrzLjzdWnOTveqWVUW/FS2gf17cIO5/FK/4KmAjH/QN24KXm395Qu8C0UFfgA66yysakJFkvXVBiPg==",
},
header: {
"content-type": "application/json",
},
success(res) {
console.log("resresresresresresres", res);
resolve(res.data.data);
},
});
});
console.log("sign", sign);
req.sign = sign;
// 推文数据
const tweetsData = await new Promise((resolve, reject) => {
uni.request({
url: `https://sxgzh.etclife.cn/etc/api/v1/gzh/point/tweets`,
method: "POST",
data: req,
header: {
"content-type": "application/x-www-form-urlencoded",
},
success(res) {
console.log(
"resresresresresresresresres",
res.data.response.data.data.tweets
);
resolve(res.data.response.data.data.tweets);
// let data = res.data.CollectionObject;
// if (data && data.length > 0) {
// resolve(data);
// } else {
// resolve([]);
// }
},
});
});
console.log("tweetsData", tweetsData);
// if (tweetsData && tweetsData.length > 0) {
// this.roadStatusList = tweetsData;
// } else {
// this.roadStatusList = [];
// }
let newReq = {
SearchParameter: {
// NOTICEINFO_TYPES: 1010,
PROVINCE_CODE: this.user.PROVINCE_CODE || "530000",
NOTICEINFO_STATE: 1,
},
PageIndex: 1,
PageSize: 10,
appId: "wxee018fb96955552a",
};
const newData = await this.$api.$post(
"/EShangApiMain/Notice/GetNOTICEINFOList",
newReq
);
let list = newData.Result_Data.List;
console.log("handleGetHighwayHeadlines", list);
// if (list && list.length > 0) {
// } else {
// this.roadStatusList = [];
// }
// this.roadStatusList = list.concat(tweetsData);
this.roadStatusList = list
// this.roadStatusList.unshift({
// NOTICEINFO_TITLE: "最新放假通知调休2天免费8天",
// });
},
// 跳转高速头条
handleGoHighWay() {
uni.navigateTo({
url: "/pages/highwayHeadlines/index",
});
},
// 拿到促销单品的数据 5030
async handleGetSpecialOffers() {
const data = await this.$api.getCoop({
action_type: "WeChat_GetMallGoodsInfo",
ownerUnitId: 911,
COMMODITYNATURE: 5030,
excludeNature: 5070,
justCommodity: 1,
});
console.log("handleGetSpecialOffers", data);
let list = data.Data.List;
let shopList = [];
if (list && list.length > 0) {
list.forEach((item) => {
if (item.COMMODITYLIST && item.COMMODITYLIST.length > 0) {
item.COMMODITYLIST.forEach((subItem) => {
shopList.push(subItem);
});
}
});
}
console.log("特价优惠", shopList);
if (shopList && shopList.length > 0) {
this.specialOffersList = shopList.slice(0, 2);
} else {
this.specialOffersList = [];
}
},
// 拿到甄选商品 5040
async handleGetProductsList() {
const data = await this.$api.getCoop({
action_type: "WeChat_GetMallGoodsInfo",
ownerUnitId: 911,
COMMODITYNATURE: 5040,
excludeNature: 5070,
justCommodity: 1,
});
let list = data.Data.List;
let shopList = [];
if (list && list.length > 0) {
list.forEach((item) => {
if (item.COMMODITYLIST && item.COMMODITYLIST.length > 0) {
item.COMMODITYLIST.forEach((subItem) => {
shopList.push(subItem);
});
}
});
}
if (shopList && shopList.length > 0) {
this.productsList = shopList.slice(0, 2);
} else {
this.productsList = [];
}
console.log("甄选商品", list);
},
// 拿到 商城精品 3000
async handleGetShoppingMall() {
const data = await this.$api.getCoop({
action_type: "WeChat_GetMallGoodsInfo",
ownerUnitId: 911,
COMMODITYNATURE: 3000,
excludeNature: 5070,
justCommodity: 1,
});
let list = data.Data.List;
let shopList = [];
if (list && list.length > 0) {
list.forEach((item) => {
if (item.COMMODITYLIST && item.COMMODITYLIST.length > 0) {
item.COMMODITYLIST.forEach((subItem) => {
if (
subItem.COMMODITY_MEMBERPRICE &&
subItem.COMMODITY_MEMBERPRICE.toString().indexOf(".") !== -1
) {
subItem.bigNumber =
subItem.COMMODITY_MEMBERPRICE.toString().split(".")[0];
subItem.smallNumber =
subItem.COMMODITY_MEMBERPRICE.toString().split(".")[1];
} else {
subItem.bigNumber = subItem.COMMODITY_MEMBERPRICE;
}
if (
subItem.COMMODITY_RETAILPRICE &&
subItem.COMMODITY_RETAILPRICE.toString().indexOf(".") !== -1
) {
subItem.RETbigNumber =
subItem.COMMODITY_RETAILPRICE.toString().split(".")[0];
subItem.RETsmallNumber =
subItem.COMMODITY_RETAILPRICE.toString().split(".")[1];
} else {
subItem.RETbigNumber = subItem.COMMODITY_RETAILPRICE;
}
shopList.push(subItem);
});
}
});
}
this.shoppingMall = shopList;
console.log("商城精选", shopList);
},
// 打开地图的跳转
handleGoMap() {
uni.openLocation({
latitude: this.serviceDetail.SERVERPART_Y * 1,
longitude: this.serviceDetail.SERVERPART_X * 1,
scale: 16, // 缩放比例
name: this.serviceDetail.SERVERPART_NAME,
// address: "", // 这个可能会影响地图的定位,所以可以选择不填
success(data) {
console.log(data);
},
fail(err) {
console.log(err);
},
});
},
// 跳转商品详情
handleGoShopDetail(obj) {
console.log("obj", obj);
uni.navigateTo({
url: `/pages/shopPages/shopDetail/index?id=${obj.COMMODITY_ID}`,
});
},
// 跳转商品列表接口
handleGoShopList(type) {
uni.navigateTo({
url: `/pages/shopPages/shopList/index?type=${type}`,
});
},
},
};
</script>
<style lang="less" scoped>
.main {
width: 100vw;
height: 100vh;
// background: #f7f8f8;
// background: url("https://saas.eshangtech.com/minTestImg/pageBg.png");
.topBox {
width: 100%;
box-sizing: border-box;
padding: 0 32rpx;
position: fixed;
top: 0;
left: 0;
z-index: 99;
.topContent {
display: flex;
align-items: center;
.topLeft {
display: flex;
align-items: center;
.YDIcon {
width: 176rpx;
height: 48rpx;
margin-right: 8rpx;
}
}
.topRight {
width: 310rpx;
height: 72rpx;
background: #f6f8fa;
border-radius: 36rpx;
margin-left: 16rpx;
box-sizing: border-box;
padding: 16rpx 20rpx;
display: flex;
align-items: center;
.searchIcon {
width: 32rpx;
height: 32rpx;
}
.searchText {
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 28rpx;
color: #9fa1aa;
line-height: 40rpx;
text-align: left;
font-style: normal;
margin-left: 8rpx;
}
}
}
}
.content {
width: 100%;
box-sizing: border-box;
padding: 0 32rpx;
.navList {
width: 100%;
height: 240rpx;
.swiper {
width: 100%;
height: 100%;
.swiper-item {
width: 100%;
height: 100%;
overflow: hidden;
border-radius: 8rpx;
.img {
width: 100%;
height: 100%;
}
}
}
}
.funItemList {
width: 100%;
height: 264rpx;
margin-top: 40rpx;
display: flex;
align-items: center;
flex-wrap: wrap;
.funItem {
width: calc(100% / 5);
height: 116rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.funItemIcon {
width: 72rpx;
height: 72rpx;
margin-bottom: 8rpx;
}
.funItemText {
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 24rpx;
color: #130f05;
line-height: 36rpx;
text-align: right;
font-style: normal;
}
}
}
.serviceDetail {
width: 100%;
margin-top: 32rpx;
box-sizing: border-box;
padding: 24rpx;
background: #ffffff;
border-radius: 12rpx;
.detailTop {
width: 100%;
display: flex;
align-items: flex-start;
position: relative;
.detailImg {
width: 160rpx;
height: 136rpx;
border-radius: 6rpx;
overflow: hidden;
margin-right: 20rpx;
.img {
width: 160rpx;
height: 136rpx;
}
}
.detailRight {
width: calc(100% - 180rpx);
height: 136rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
.detailTop {
display: flex;
flex-direction: column;
.title {
font-family: PingFangSC, PingFang SC;
font-weight: 600;
font-size: 32rpx;
color: #130f05;
line-height: 44rpx;
text-align: left;
font-style: normal;
display: inline-block;
width: 352rpx;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin-bottom: 4rpx;
}
.status {
.statusText {
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 22rpx;
color: #009f43;
line-height: 32rpx;
text-align: justify;
font-style: normal;
padding: 2rpx 6rpx;
background: #e9f8ee;
border-radius: 4rpx;
display: inline-block;
}
}
}
.detailBottom {
margin-top: 16rpx;
.distance {
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 24rpx;
color: #130f05;
line-height: 36rpx;
text-align: left;
font-style: normal;
margin-right: 8rpx;
}
.addressText {
max-width: 342rpx;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 24rpx;
color: #716f69;
line-height: 36rpx;
text-align: left;
font-style: normal;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
}
}
.navigation {
width: 64rpx;
height: 64rpx;
position: absolute;
right: 0;
top: 0;
}
}
.detailBottom {
width: 100%;
margin-top: 24rpx;
display: flex;
align-items: center;
.detailBottomItem {
width: calc(100% / 6);
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
.detailIcon {
width: 48rpx;
height: 48rpx;
margin-bottom: 4rpx;
}
.detailText {
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 22rpx;
color: #130f05;
line-height: 32rpx;
text-align: left;
font-style: normal;
}
}
}
.stateGrid {
width: 100%;
margin-top: 24rpx;
background: #f6f6f6;
border-radius: 12rpx;
box-sizing: border-box;
padding: 24rpx;
display: flex;
align-items: center;
justify-content: space-between;
.leftGrid {
display: flex;
align-items: center;
.gridImg {
width: 40rpx;
height: 40rpx;
margin-right: 12rpx;
}
.gridText {
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 28rpx;
color: #130f05;
line-height: 40rpx;
text-align: left;
font-style: normal;
margin-right: 12rpx;
}
.fastCharg {
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 20rpx;
color: #ffffff;
line-height: 28rpx;
text-align: justify;
font-style: normal;
display: inline;
padding: 2rpx 6rpx;
background: linear-gradient(270deg, #ff500e 0%, #ff7d0a 100%);
border-radius: 4rpx;
}
}
.rightGrid {
display: flex;
align-items: center;
.other {
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 24rpx;
color: #130f05;
line-height: 36rpx;
text-align: left;
font-style: normal;
margin-right: 4rpx;
}
.have {
font-family: DINAlternate, DINAlternate;
font-weight: bold;
font-size: 32rpx;
color: #130f05;
line-height: 36rpx;
text-align: left;
font-style: normal;
margin-right: 4rpx;
}
.all {
font-family: DINAlternate, DINAlternate;
font-weight: bold;
font-size: 32rpx;
color: #716f69;
line-height: 36rpx;
text-align: left;
font-style: normal;
}
}
}
}
.roadStatus {
width: 100%;
margin-top: 40rpx;
.roadTop {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
.roadTopLeft {
display: flex;
align-items: center;
.roadIcon {
width: 32rpx;
height: 32rpx;
margin-right: 8rpx;
}
.roadTitle {
font-family: PingFangSC, PingFang SC;
font-weight: 600;
font-size: 28rpx;
color: #130f05;
line-height: 40rpx;
text-align: left;
font-style: normal;
}
}
.roadTopRight {
.roadIcon {
width: 24rpx;
height: 24rpx;
}
}
}
.messageListBox {
width: 100%;
// height: 104rpx;
height: 208rpx;
overflow: hidden;
position: relative;
background-color: #ffffff;
margin-top: 16rpx;
box-sizing: border-box;
padding: 24rpx;
border-radius: 16rpx;
.messageList {
display: flex;
flex-direction: column;
.messageItem {
width: 100%;
box-sizing: border-box;
padding: 6rpx 0;
display: flex;
align-items: center;
.icon {
width: 11rpx;
height: 11rpx;
background: #090c1a;
transform: rotate(45deg);
margin-right: 16rpx;
}
.contentMessage {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 24rpx;
color: #130f05;
line-height: 40rpx;
text-align: left;
}
}
&.scrolling {
animation: scrollAnimation 10s linear infinite;
}
}
}
@keyframes scrollAnimation {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-50%);
}
}
}
.shoppingMall {
width: 100%;
margin-top: 40rpx;
padding-bottom: 40rpx;
.mallTop {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
.mallTopLeft {
display: flex;
align-items: center;
.mallIcon {
width: 32rpx;
height: 32rpx;
margin-right: 8rpx;
}
.roadTitle {
font-family: PingFangSC, PingFang SC;
font-weight: 600;
font-size: 28rpx;
color: #130f05;
line-height: 40rpx;
text-align: left;
font-style: normal;
}
}
.mallTopRight {
.mallIcon {
width: 24rpx;
height: 24rpx;
}
}
}
.mallContent {
width: 100%;
.advertisement {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 16rpx;
.advertisementItem {
width: calc((100% - 16rpx) / 2);
box-sizing: border-box;
border-radius: 16rpx;
overflow: hidden;
.advertisementItemTop {
width: 100%;
height: 100rpx;
border-radius: 16rpx 16rpx 0 0;
box-sizing: border-box;
padding: 16rpx 24rpx;
position: relative;
.topTitle {
.light {
font-family: AppleSystemUIFont;
font-size: 32rpx;
color: #fd2c04;
line-height: 40rpx;
text-align: left;
font-style: normal;
}
.rightTopTitle {
color: #20b45c;
}
.normal {
font-family: AppleSystemUIFont;
font-size: 32rpx;
color: #130f05;
line-height: 40rpx;
text-align: left;
font-style: normal;
}
}
.topOther {
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 20rpx;
color: #716f69;
line-height: 28rpx;
text-align: left;
font-style: normal;
}
.mallBg {
width: 81rpx;
height: 75rpx;
position: absolute;
right: 12rpx;
top: 12rpx;
}
}
.topLeft {
background: linear-gradient(180deg, #ffe8e8 0%, #ffffff 100%);
}
.topRight {
background: linear-gradient(180deg, #dff8e4 0%, #ffffff 100%);
}
.advertisementItemBottom {
border-radius: 0 0 16rpx 16rpx;
width: 100%;
height: 160rpx;
box-sizing: border-box;
padding: 0 24rpx 24rpx;
background: #fff;
display: flex;
align-items: center;
justify-content: space-between;
.advertisementImg {
width: 136rpx;
height: 136rpx;
border-radius: 16rpx;
}
}
}
}
}
.mallList {
width: 100%;
margin-top: 16rpx;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
.mallItem {
width: calc((100% - 16rpx) / 2);
background: #fff;
border-radius: 16rpx;
margin-bottom: 16rpx;
overflow: hidden;
.mallTop {
width: 100%;
height: 330rpx;
box-sizing: border-box;
.mallImg {
width: 100%;
height: 100%;
}
}
.mallBottom {
width: 100%;
box-sizing: border-box;
padding: 16rpx 20rpx 16rpx;
.priceTop {
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 28rpx;
color: #130f05;
line-height: 32rpx;
font-style: normal;
width: calc((100vw - 80rpx) / 2 - 40rpx);
height: 64rpx;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
/* 设置显示的行数,超出的行数会被省略 */
overflow: hidden;
text-overflow: ellipsis;
}
.retailPrice {
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 24rpx;
color: #756c6a;
line-height: 36rpx;
text-align: left;
font-style: normal;
text-decoration-line: line-through;
}
.priceBox {
width: 100%;
display: flex;
align-items: center;
margin-top: 8rpx;
justify-content: space-between;
.leftPrice {
.unit {
font-family: DINAlternate, DINAlternate;
font-weight: bold;
font-size: 24rpx;
color: #fe3f22;
line-height: 24rpx;
text-align: left;
font-style: normal;
}
.price {
font-family: DINAlternate, DINAlternate;
font-weight: bold;
font-size: 36rpx;
color: #fe3f22;
line-height: 40rpx;
text-align: left;
font-style: normal;
}
}
.rightPrice {
width: 32rpx;
height: 32rpx;
.mallIcon {
width: 100%;
height: 100%;
}
}
.shopState {
font-size: 24rpx;
color: #fff;
background: #bbbbbb;
padding: 4rpx 16rpx;
border-radius: 8rpx;
}
}
}
}
}
}
}
.content ::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
color: transparent;
}
.noticePopup {
width: 80vw;
height: calc(2688 * 70vw / 1242);
background: #fff;
border-radius: 32rpx;
background-image: url(https://eshangtech.com/minTestImg/caiyunyiguanggao.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
box-sizing: border-box;
padding: 300rpx 120rpx 160rpx;
position: relative;
.closeIcon {
width: 40rpx;
height: 40rpx;
position: absolute;
right: 32rpx;
top: 32rpx;
}
}
.ETCPopup {
width: 80vw;
height: 120px;
background: #fff;
border-radius: 32rpx;
box-sizing: border-box;
padding: 32rpx;
display: flex;
align-items: center;
justify-content: space-between;
.ETCItem {
width: calc(50% - 32rpx);
// background: #e7f8ee;
// padding: 16rpx;
// border-radius: 8rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
// box-sizing: border-box;
.itemImg {
width: 80rpx;
height: 80rpx;
margin-bottom: 24rpx;
}
.itemText {
font-family: "PingFangSC";
font-weight: 400;
font-size: 24rpx;
line-height: 32rpx;
text-align: justify;
font-style: normal;
white-space: nowrap;
}
}
}
.backTopBox {
width: 40px;
height: 40px;
border-radius: 50%;
background: #fff;
position: fixed;
right: 32px;
bottom: 150px;
display: flex;
align-items: center;
justify-content: center;
z-index: 999;
.backIcon {
width: 20px;
height: 20px;
}
}
}
</style>