caiyunyi/pages/index/index.vue
ylj20011123 6030eb7626 update
2025-06-04 17:57:33 +08:00

2260 lines
69 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, index: index })">
<!-- @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="serviceDetail.haveREFUELINGGUN
? '/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="serviceDetail.havePARKING
? '/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="serviceDetail.haveWC
? '/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="serviceDetail.HASMOTHER
? ' /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";
import {
handleGetNearService
} from '../../utils/publicMethods'
import { encryptAES, decryptAES } from '../../utils/handleAes'
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/正大泰国榴莲.jpg",
// "http://saas.eshangtech.com/minTestImg/DragonBoatFestival.jpg",
"http://saas.eshangtech.com/minTestImg/banner_0605_0612.jpg",
"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/正大泰国榴莲.jpg",
// "http://saas.eshangtech.com/minTestImg/DragonBoatFestival.jpg",
"http://saas.eshangtech.com/minTestImg/banner_0605_0612.jpg",
"https://ahyd.eshangtech.com/UploadImageDir/minprogram/正太泰国榴莲.jpg",
"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");
// this.$refs.noticeRef.open("center");
if (new Date("2025-06-05 00:00:00").getTime() < new Date().getTime() && new Date("2025-06-12 23:59:59").getTime() > new Date().getTime()) {
this.$refs.noticeRef.open("center");
let _this = this
setTimeout(() => {
_this.$refs.noticeRef.close();
}, 8000)
} else {
this.showPoster = false;
}
this.menu = uni.getMenuButtonBoundingClientRect();
let systemInfo = uni.getSystemInfoSync();
// 判断如果是苹果手机 那么把它底部的安全距离存起来
if (systemInfo.osName === "ios") {
// let height = systemInfo.safeArea.bottom - systemInfo.safeArea.height;
let height = systemInfo.safeAreaInsets.bottom;
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) {
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));
}
// 高速头条播报
this.handleGetHighwayHeadlines();
// 促销单品
this.handleGetSpecialOffers();
// 甄选商品
this.handleGetProductsList();
// 商城的内容
this.handleGetShoppingMall();
// this.handleAes()
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);
this.handleGetChargingStation(this.serviceDetail);
}
let funList = uni.getStorageSync("funList");
if (funList) {
let newFunList = JSON.parse(funList);
if (newFunList && newFunList.length > 0) {
newFunList.forEach((item, index) => {
item.index = index + 1;
});
}
this.funList = newFunList;
}
// 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";
// }
// });
// this.funList = fun;
// this.$forceUpdate();
// }
},
async onPullDownRefresh() {
// await this.handleReloadFunIndex()
const seatInfo = await this.handleGetNewPosition()
handleGetNearService(this, seatInfo.longitude, seatInfo.latitude)
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: {
// 测试加密的方法
async handleAes() {
const req = {
waybillNo: "434491081179331",
mobile: "15558136957",
type: 'encryption'
}
let str = JSON.stringify(req)
// let jiami = encryptAES(str)
// let jiemi = decryptAES(jiami)
const data = await this.$api.$zzyLocalPost(
"/WeChat/ExpressQuery",
req
);
},
// 重新获取经纬度位置
handleGetNewPosition() {
return new Promise((resolve, reject) => {
uni.getLocation({
type: "gcj02",
altitude: true,
success: async (res) => {
let seatInfo = {
latitude: res.latitude,
longitude: res.longitude,
};
uni.setStorageSync(
"seatInfo",
JSON.stringify(seatInfo)
);
uni.setStorageSync(
"actualLocation",
JSON.stringify(seatInfo)
);
resolve(seatInfo)
},
});
})
},
handleCloseNotice() {
this.$refs.noticeRef.close();
},
// 重置顶部方法顺序
async handleReloadFunIndex() {
this.triggered = true
let _this = this
const seatInfo = await this.handleGetNewPosition()
uni.setStorageSync("seatInfo", JSON.stringify(seatInfo));
uni.setStorageSync("actualLocation", JSON.stringify(seatInfo));
await _this.handleGetNearService(seatInfo.latitude, seatInfo.longitude)
return 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));
resolve(true)
}, 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) => {
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);
}
});
}
let sum = 0;
let have = 0;
let use = 0;
if (result && result.length > 0) {
result.forEach((item) => {
if (item.status === "50") {
sum += 1;
}
});
}
if (sum > 0) {
use = sum;
if (obj.sumDetail.STATEGRIDCHARGE > 0) {
if (obj.sumDetail.STATEGRIDCHARGE < result.length) {
have = result.length;
} else {
have = obj.sumDetail.STATEGRIDCHARGE;
}
} else {
have = result.length;
}
} else {
have = obj.sumDetail.LIVESTOCKPACKING;
let rank = Number(uni.getStorageSync("rankNumber"));
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,
};
_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;
this.serviceDetail = obj;
this.serviceDetail.sumDetail = this.handleMergeDetail(obj);
},
// 预览查看
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) {
// 服务区
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) {
},
});
} else if (obj.value === 14) {
// 尿素
uni.scanCode({
success: function (res) {
},
});
} else if (obj.value === 15) {
if (this.isChangeIcon) {
uni.navigateTo({
url: `/pages/shopMallPage/shopType/index`,
});
} else {
// 商城
this.handleGoShop();
}
} else if (obj.value === 17) {
if (obj.index === 0) {
uni.navigateTo({
url: `/pages/shopMallPage/shopType/index`,
});
} else {
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() {
// 根据定位获取周边服务区
let _this = this;
uni.getLocation({
type: "gcj02",
altitude: true,
success: (res) => {
let seatInfo = {
latitude: res.latitude,
longitude: res.longitude,
};
uni.setStorageSync("seatInfo", JSON.stringify(seatInfo));
uni.setStorageSync("actualLocation", JSON.stringify(seatInfo));
_this.seat = seatInfo;
let latitude = res.latitude;
let longitude = res.longitude;
_this.handleGetNearService(latitude, longitude);
},
fail: (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",
};
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;
let nearService = this.serverPartList[0];
nearService.sumDetail = this.handleMergeDetail(nearService);
this.serviceDetail = nearService;
uni.setStorageSync("currentService", nearService);
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`;
// 签名
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) {
resolve(res.data.data);
},
});
});
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) {
if (res.data.response.data) {
resolve(res.data.response.data.data.tweets);
} else {
resolve([])
}
// let data = res.data.CollectionObject;
// if (data && data.length > 0) {
// resolve(data);
// } else {
// resolve([]);
// }
},
});
});
// 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;
// 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,
});
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.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 = [];
}
},
// 拿到 商城精品 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;
},
// 打开地图的跳转
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) {
},
fail(err) {
},
});
},
// 跳转商品详情
handleGoShopDetail(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-image: url(https://ahyd.eshangtech.com/UploadImageDir/minprogram/caiyunyiguanggao_0529_0605.jpg);
background-image: url(https://eshangtech.com/minTestImg/caiyunyiguanggao_0605_0612.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>