no message
This commit is contained in:
PC-202306242200\Administrator
445
pages/home/detail.vue
Normal file
445
pages/home/detail.vue
Normal file
@@ -0,0 +1,445 @@
|
||||
<template>
|
||||
<view class="orderdetail">
|
||||
<!-- <statusBar /> -->
|
||||
|
||||
<view class="orderdetail_header p30" :style="{ backgroundColor: headerBg ? '#FFF' : '' }">
|
||||
<view :style="{ height: statusBarHeight }"></view>
|
||||
<view style="height: 44px; display: flex; align-items: center" @click="">
|
||||
<up-icon name="arrow-left" bold color="#000" @click="back"></up-icon>
|
||||
<view @click="back" style="margin-left: 25rpx; transition: all 0.5s" :style="{ opacity: headerBg ? 1 : 0 }">电站详情</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<up-swiper :list="info.pictures" height="530rpx"></up-swiper>
|
||||
<view class="p30" style="margin-top: -80rpx">
|
||||
<orderList
|
||||
:info="{
|
||||
...info,
|
||||
priceAmount: fullCost.totalAmount
|
||||
}"
|
||||
type="info"
|
||||
></orderList>
|
||||
<view style="height: 30rpx"></view>
|
||||
|
||||
<view class="orderdetail_info" style="margin-bottom: 30rpx">
|
||||
<view class="orderdetail_info_title">
|
||||
<view>费用信息</view>
|
||||
<view style="display: flex; align-items: center" @click="showJf = true">
|
||||
价格详情
|
||||
<view style="margin-left: 30rpx">
|
||||
<up-icon color="#333" size="28rpx" name="arrow-right"></up-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view style="max-width: 420rpx">
|
||||
<up-tag size="mini" :text="`当前计费时间段:${fullCost.startTime}-${fullCost.endTime}`" plain plainFill></up-tag>
|
||||
</view>
|
||||
<view class="orderdetail_info_fy">
|
||||
<view class="orderdetail_info_fy_left">电站价格</view>
|
||||
<view class="orderdetail_info_fy_right">
|
||||
{{ fullCost.totalAmount }}
|
||||
<text style="font-weight: 500; font-size: 24rpx; color: #333; margin-left: 15rpx">元/度</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="orderdetail_info" style="margin-bottom: 30rpx">
|
||||
<view>
|
||||
<view class="orderdetail_info_title">终端明细</view>
|
||||
</view>
|
||||
<view class="orderdetail_info_zd" style="position: relative" @click="showZd">
|
||||
<view class="orderdetail_info_zd_zdbg"></view>
|
||||
<image
|
||||
src="/static/icon/eleclist-terminal.png"
|
||||
style="transform: rotateY(180deg); position: absolute; left: 0; bottom: 0; width: 100rpx; height: 100rpx"
|
||||
mode="widthFix"
|
||||
></image>
|
||||
|
||||
<view>交流</view>
|
||||
<view style="display: flex; align-items: center">
|
||||
{{ info.gunCount - info.gunUseCount }}
|
||||
<text style="font-size: 28rpx; opacity: 0.9; margin-left: 10rpx">空闲</text>
|
||||
<text style="font-size: 24rpx; opacity: 0.8">/{{ info.gunCount }}总</text>
|
||||
<view style="margin-left: 30rpx">
|
||||
<up-icon color="#fff" size="28rpx" name="arrow-right"></up-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="orderdetail_info">
|
||||
<view class="orderdetail_info_title">基本信息</view>
|
||||
<view class="orderdetail_info_view">
|
||||
<view class="orderdetail_info_view_left">服务提供方</view>
|
||||
<view class="orderdetail_info_view_right" @click="lookImg([info.licenseImage])">
|
||||
{{ info.merchantName }}
|
||||
<image src="/static/icon/9you.png" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="orderdetail_info_view">
|
||||
<view class="orderdetail_info_view_left" style="color: #232323">{{ info.merchantName }}</view>
|
||||
</view> -->
|
||||
<view class="orderdetail_info_view">
|
||||
<view class="orderdetail_info_view_left">营业时间</view>
|
||||
<view class="orderdetail_info_view_right" @click="lookImg([info.licenseImage])">
|
||||
{{ info.busineHours }}
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="orderdetail_info_view">
|
||||
<view class="orderdetail_info_view_left" style="margin-right: 30rpx">
|
||||
{{ info.busineHours }}
|
||||
</view>
|
||||
</view> -->
|
||||
<view class="orderdetail_info_xian"></view>
|
||||
<view class="orderdetail_info_view">
|
||||
<view class="orderdetail_info_view_left">发票服务</view>
|
||||
<view class="orderdetail_info_view_right">{{ info.invoice }}</view>
|
||||
</view>
|
||||
<view class="orderdetail_info_view">
|
||||
<view class="orderdetail_info_view_left">备注信息</view>
|
||||
<view class="orderdetail_info_view_right">{{ info.remarks || '' }}</view>
|
||||
</view>
|
||||
<view class="orderdetail_info_view">
|
||||
<view class="orderdetail_info_view_left">服务提供方</view>
|
||||
<view class="orderdetail_info_view_right" @click="call(info.stationTel)" style="color: #4879e6; font-weight: bold">{{ info.stationTel }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="orderdetail_btn p30">
|
||||
<view class="orderdetail_btn_left">
|
||||
{{ fullCost.totalAmount }}
|
||||
<text>元/度</text>
|
||||
</view>
|
||||
<view class="orderdetail_btn_right" @click="toRecharge">扫码充电</view>
|
||||
</view>
|
||||
<view style="height: 150rpx"></view>
|
||||
<up-popup :show="show" @close="show = false" closeable round="10">
|
||||
<view class="orderdetail_info" style="padding-top: 50rpx">
|
||||
<view class="orderdetail_info_zd" style="position: relative" @click="show = true">
|
||||
<view class="orderdetail_info_zd_zdbg"></view>
|
||||
<image
|
||||
src="/static/icon/eleclist-terminal.png"
|
||||
style="transform: rotateY(180deg); position: absolute; left: 0; bottom: 0; width: 100rpx; height: 100rpx"
|
||||
mode="widthFix"
|
||||
></image>
|
||||
|
||||
<view>交流</view>
|
||||
<view style="display: flex; align-items: center">
|
||||
{{ info.gunCount - info.gunUseCount }}
|
||||
<text style="font-size: 28rpx; opacity: 0.9; margin-left: 10rpx">空闲</text>
|
||||
<text style="font-size: 24rpx; opacity: 0.8">/{{ info.gunCount }}总</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="gun">
|
||||
<z-paging ref="paging" :fixed="false" :loading-more-enabled="false" v-model="dataList" @query="queryList" height="600rpx;" :auto="false" show-refresher-when-reload>
|
||||
<view class="gun_list" v-for="(item, index) in dataList" :key="index">
|
||||
<view class="gun_list_left">
|
||||
<view class="gun_list_left_view1">
|
||||
<up-tag v-if="item.realtimeStatus == 1" size="mini" type="error" text="故障" plain plainFill></up-tag>
|
||||
<up-tag v-else-if="item.realtimeStatus == 2" size="mini" type="success" text="空闲" plain plainFill></up-tag>
|
||||
<up-tag v-else-if="item.realtimeStatus == 3" size="mini" type="warning" text="充电中" plain plainFill></up-tag>
|
||||
<up-tag v-else size="mini" type="error" text="离线" plain plainFill></up-tag>
|
||||
<view style="margin-left: 15rpx"><up-tag v-if="item.insertStatus == 1" size="mini" text="已插枪" plain plainFill></up-tag></view>
|
||||
|
||||
<view style="margin-left: 15rpx">{{ item.gunName }}</view>
|
||||
</view>
|
||||
<view class="gun_list_left_view">{{ item.deviceNo }}</view>
|
||||
<view class="gun_list_left_view">
|
||||
<view>最高功率：{{ item.maxPower }}KW</view>
|
||||
<view style="margin-left: 30rpx">电压：{{ item.maxVoltage }}V</view>
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<up-button @click="startCd(item)" v-if="item.realtimeStatus == 2" shape="circle" type="success" :plain="true" text="启动充电"></up-button>
|
||||
<up-button
|
||||
v-if="item.realtimeStatus == 1 || item.realtimeStatus == 0"
|
||||
shape="circle"
|
||||
type="error"
|
||||
:plain="true"
|
||||
text="报故障"
|
||||
openType="contact"
|
||||
></up-button>
|
||||
</view>
|
||||
</view>
|
||||
</z-paging>
|
||||
</view>
|
||||
</up-popup>
|
||||
<up-popup :show="showJf" @close="showJf = false" closeable round="10">
|
||||
<view style="font-size: 36rpx; font-weight: bold; padding: 30rpx">价格详情</view>
|
||||
<view style="padding: 30rpx; padding-top: 0">
|
||||
<scroll-view scroll-y="true" style="height: 800rpx">
|
||||
<view v-for="(item, index) in info.priceList" :key="index" style="margin-bottom: 30rpx; position: relative; position: relative">
|
||||
<view
|
||||
style="
|
||||
height: 80rpx;
|
||||
background: linear-gradient(to right, rgba(72, 121, 230, 1), rgba(72, 121, 230, 0.4));
|
||||
border-radius: 15rpx;
|
||||
color: #fff;
|
||||
font-size: 28rpx;
|
||||
padding-top: 10rpx;
|
||||
padding-left: 30rpx;
|
||||
"
|
||||
>
|
||||
<text v-if="item.isCurrent == 1" style="margin-right: 30rpx">当前计费时间段</text>
|
||||
{{ item.startTime }}-{{ item.endTime }}
|
||||
</view>
|
||||
<view style="border: 1rpx solid #4879e6; border-radius: 15rpx; padding: 30rpx; margin-top: -30rpx; background-color: #fff; font-size: 28rpx">
|
||||
<view style="display: flex; justify-content: space-between; margin-bottom: 15rpx">
|
||||
<view>电费</view>
|
||||
<view>{{ item.electricityRate }}元/度</view>
|
||||
</view>
|
||||
<view style="display: flex; justify-content: space-between; margin-bottom: 15rpx">
|
||||
<view>服务费</view>
|
||||
<view>{{ item.serviceFeeRate }}元/度</view>
|
||||
</view>
|
||||
<view style="border-top: 1rpx solid #eee; margin-bottom: 15rpx"></view>
|
||||
<view style="display: flex; justify-content: space-between">
|
||||
<view>总计</view>
|
||||
<view>{{ item.totalAmount }}元/度</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</up-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, computed } from 'vue';
|
||||
import { infoAroundApi, listByStationId, startCharging } from '@/api/api.js';
|
||||
import { onLoad, onPageScroll } from '@dcloudio/uni-app';
|
||||
import { lookImg, call, urlQuery } from '@/utils/fun.js';
|
||||
import { useNav } from '@/hooks/useNav.js';
|
||||
const { nav, navTo } = useNav();
|
||||
|
||||
const headerBg = ref(false);
|
||||
const statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
|
||||
let info = reactive({});
|
||||
let show = ref(false);
|
||||
const dataList = ref([]);
|
||||
const paging = ref(null);
|
||||
let showJf = ref(false);
|
||||
|
||||
const fullCost = computed(() => {
|
||||
let data = info?.priceList?.find((val) => val.isCurrent == 1);
|
||||
return data || {};
|
||||
});
|
||||
|
||||
onLoad((options) => {
|
||||
getInfo(options.id, options.distance);
|
||||
});
|
||||
|
||||
onPageScroll((e) => {
|
||||
if (e.scrollTop > uni.getSystemInfoSync().statusBarHeight + 44) {
|
||||
headerBg.value = true;
|
||||
} else {
|
||||
headerBg.value = false;
|
||||
}
|
||||
});
|
||||
|
||||
const getInfo = async (e, distance) => {
|
||||
let _res = await infoAroundApi({ id: e });
|
||||
_res.distance = distance;
|
||||
Object.assign(info, _res);
|
||||
};
|
||||
|
||||
// 使用 ref 创建响应式引用
|
||||
const list3 = ref(['https://cdn.uviewui.com/uview/swiper/swiper3.png', 'https://cdn.uviewui.com/uview/swiper/swiper2.png', 'https://cdn.uviewui.com/uview/swiper/swiper1.png']);
|
||||
|
||||
let toRecharge = () => {
|
||||
uni.scanCode({
|
||||
success: function (res) {
|
||||
let query = urlQuery(res.result);
|
||||
if (!query.num) {
|
||||
uni.showToast({
|
||||
title: '请扫描正确的设备码',
|
||||
icon: 'none'
|
||||
});
|
||||
} else {
|
||||
navTo(`/pages/home/star?id=${query.num}`);
|
||||
}
|
||||
// navTo(`/pages/home/star?id=${res.result}`);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const back = () => {
|
||||
uni.navigateBack();
|
||||
};
|
||||
|
||||
const queryList = async () => {
|
||||
listByStationId({ stationId: info.id })
|
||||
.then((res) => {
|
||||
paging.value.complete(res);
|
||||
})
|
||||
.catch((res) => {
|
||||
paging.value.complete(false);
|
||||
});
|
||||
};
|
||||
|
||||
const showZd = () => {
|
||||
show.value = true;
|
||||
paging.value.reload();
|
||||
};
|
||||
|
||||
const startCd = async (e) => {
|
||||
uni.navigateTo({
|
||||
url: './star?id=' + e.deviceGunNo
|
||||
});
|
||||
|
||||
// let _res = startCharging({
|
||||
// deviceNo: e.deviceNo,
|
||||
// gunNo: e.gunNo
|
||||
// });
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.orderdetail {
|
||||
padding-bottom: 150rpx;
|
||||
|
||||
&_header {
|
||||
width: 750rpx;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 99;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
|
||||
&_info {
|
||||
background: #ffffff;
|
||||
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
||||
padding: 25rpx;
|
||||
box-shadow: 0rpx -6rpx 8rpx 2rpx rgba(66, 115, 229, 0.05);
|
||||
&_title {
|
||||
font-size: 32rpx;
|
||||
color: #232323;
|
||||
margin-bottom: 30rpx;
|
||||
@include flex($space: space-between);
|
||||
}
|
||||
|
||||
&_fy {
|
||||
background: linear-gradient(to right, rgba(72, 121, 230, 0.4), rgba(72, 121, 230, 0));
|
||||
border-radius: 15rpx;
|
||||
padding: 40rpx 20rpx 40rpx 40rpx;
|
||||
color: #fff;
|
||||
margin-top: 30rpx;
|
||||
@include flex;
|
||||
&_left {
|
||||
font-size: 32rpx;
|
||||
font-weight: 800;
|
||||
font-style: italic;
|
||||
color: #4879e6;
|
||||
}
|
||||
&_right {
|
||||
font-size: 36rpx;
|
||||
font-weight: 800;
|
||||
color: #4879e6;
|
||||
margin-left: 30rpx;
|
||||
@include flex;
|
||||
}
|
||||
}
|
||||
|
||||
&_zd {
|
||||
border-radius: 15rpx;
|
||||
padding: 40rpx 20rpx 40rpx 130rpx;
|
||||
background-color: #4879e6;
|
||||
color: #fff;
|
||||
@include flex($space: space-between);
|
||||
&_zdbg {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 40%;
|
||||
height: 100%;
|
||||
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
|
||||
}
|
||||
}
|
||||
|
||||
&_view {
|
||||
@include flex($space: space-between);
|
||||
margin-bottom: 30rpx;
|
||||
&_left {
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #232323;
|
||||
}
|
||||
&_right {
|
||||
@include flex;
|
||||
font-weight: bold;
|
||||
font-size: 28rpx;
|
||||
color: #232323;
|
||||
image {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
&_xian {
|
||||
width: 100%;
|
||||
border: 2rpx solid #707070;
|
||||
margin-bottom: 30rpx;
|
||||
opacity: 0.06;
|
||||
}
|
||||
}
|
||||
&_btn {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 40rpx;
|
||||
@include flex($space: space-between);
|
||||
view {
|
||||
@include flex($space: center);
|
||||
width: 330rpx;
|
||||
height: 92rpx;
|
||||
border-radius: 46rpx 46rpx 46rpx 46rpx;
|
||||
}
|
||||
&_left {
|
||||
background-color: #e5eaf4;
|
||||
color: #4879e6;
|
||||
font-size: 34rpx;
|
||||
font-weight: bold;
|
||||
text {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
}
|
||||
&_right {
|
||||
background: #4879e6;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.gun {
|
||||
height: 600rpx;
|
||||
&_list {
|
||||
@include flex($space: space-between);
|
||||
padding: 30rpx;
|
||||
|
||||
&_left {
|
||||
flex: 1;
|
||||
&_view {
|
||||
font-size: 24rpx;
|
||||
color: #b0b2b6;
|
||||
margin-bottom: 10rpx;
|
||||
@include flex;
|
||||
}
|
||||
&_view1 {
|
||||
@include flex;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
::v-deep .u-popup__content__close--top-right {
|
||||
top: 10rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user