siyunxing/dianxiaorui-uniapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

no message

Browse Source
This commit is contained in:
PC-202306242200\Administrator
2026-03-28 23:00:29 +08:00
commit 4d06351f6a
2830 changed files with 166480 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

445
pages/home/detail.vue Normal file
View 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>

292
pages/home/home.vue Normal file
View File

@@ -0,0 +1,292 @@
<template>
<view>
<view class="search_header p30">
<!-- position: sticky; top: 0; left: 0; z-index: 999; -->
<view style="width: 100%">
<view class="search_header_blur"></view>
<search @search="searchChange" />
</view>
<view style="margin: 30rpx 0 0">
<up-swiper :list="list1" height="150rpx" keyName="imageUrl" indicator></up-swiper>
</view>
<view class="search_header_grid" style="position: sticky; top: 0; left: 0; background-color: #ffffff; padding: 15rpx">
<view class="search_header_grid_view" @click="toOrder">
<image src="/static/icon/dd.png"></image>
<view>我的订单</view>
</view>
<view class="search_header_grid_view" @click="showMode">
<image src="/static/icon/kj.png"></image>
<view>卡卷中心</view>
</view>
<view class="search_header_grid_view" @click="navTo('/pageMake/invoice/invoice')">
<image src="/static/icon/kp.png"></image>
<view>我要开票</view>
</view>
<!-- open-type="contact" -->
<button style="all: unset" @click="toKft">
<view class="search_header_grid_view">
<image src="/static/icon/kf.png"></image>
<view>在线客服</view>
</view>
</button>
</view>
</view>
<z-paging ref="paging" v-model="dataList" use-page-scroll @query="queryList">
<view style="height: 35rpx"></view>
<!-- <view style="padding: 0 30rpx">
<view class="order_list" style="position: sticky; top: 0; left: 0">
<view class="order_list_header p30">
<view class="order_list_header_view" @click="tabChange(1)">
<view>距我最近</view>
<view v-if="query.orderByType == 1" class="order_list_header_view_dian"></view>
</view>
<view class="order_list_header_view" @click="tabChange(2)">
<view>空闲最多</view>
<view v-if="query.orderByType == 2" class="order_list_header_view_dian"></view>
</view>
</view>
</view>
</view> -->
<view class="order_list">
<view :class="[query.orderByType == 1 ? 'order_list_active' : '']" class="order_list_view" @click="tabChange(1)">距我最近</view>
<view :class="[query.orderByType == 2 ? 'order_list_active' : '']" class="order_list_view" @click="tabChange(2)">空闲最多</view>
</view>
<!-- <view style="display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 30rpx">
<view style="background-color: #ffffff; width: 690rpx">
</view>
</view> -->
<view style="margin-bottom: 30rpx; padding: 0 30rpx" v-for="(item, index) in dataList" :key="index">
<orderList toNav :info="item"></orderList>
</view>
</z-paging>
<view style="height: 180rpx"></view>
<!-- <tabbar path="/pages/home/home"></tabbar> -->
<cc-myTabbar :tabBarShow="0"></cc-myTabbar>
</view>
</template>
<script setup>
import { ref, reactive } from 'vue';
import { onLoad, onShow, onPullDownRefresh, onPageScroll, onReachBottom } from '@dcloudio/uni-app';
import { aroundAreaApi, bannerList } from '@/api/api.js';
import { useNav } from '@/hooks/useNav.js';
const { nav, navTo } = useNav();
const dataList = ref([]);
const paging = ref(null);
const query = reactive({
lon: '',
lat: '',
orderByType: 1, //1-最近;2-空闲较多
keyWord: ''
});
const list1 = ref([]);
onLoad(async () => {
let _res = await bannerList();
list1.value = _res;
});
onShow(() => {
uni.hideTabBar();
});
let toKft = (e) => {
uni.makePhoneCall({
phoneNumber: '4008005326' //仅为示例
});
};
const queryList = async () => {
uni.showLoading({
title: '加载中...'
});
try {
if (!query.lon && !query.lat) {
const { longitude: lon, latitude: lat } = await uni.getLocation();
query.lon = lon;
query.lat = lat;
}
} catch (err) {
console.log(err);
}
console.log(query);
aroundAreaApi(query)
.then((res) => {
console.log(res, 'list');
paging.value.complete(res);
uni.hideLoading();
})
.catch((res) => {
paging.value.complete(false);
uni.hideLoading();
});
};
let tabChange = (e) => {
query.orderByType = e;
paging.value.reload();
};
let isPagingRefNotFound = () => {
return !paging.value;
};
onPullDownRefresh(() => {
if (isPagingRefNotFound()) return;
paging.value.reload().catch(() => {});
});
onPageScroll((e) => {
if (isPagingRefNotFound()) return;
paging.value.updatePageScrollTop(e.scrollTop);
e.scrollTop < 10 && paging.value.doChatRecordLoadMore();
});
onReachBottom(() => {
if (isPagingRefNotFound()) return;
paging.value.pageReachBottom();
});
const toOrder = () => {
uni.switchTab({
url: '/pages/order/order'
});
};
let searchChange = (e) => {
query.keyWord = e;
paging.value.reload();
};
let showMode = () => {
uni.showModal({
title: '提示',
content: '暂未开放',
showCancel: false,
confirmText: '确认',
success: () => {}
});
};
</script>
<style>
page {
/* background: linear-gradient(180deg, #ffffff 0%, #f7f7f7 100%); */
background-color: #f7f7f7;
}
</style>
<style lang="scss" scoped>
.search_header {
position: relative;
&_blur {
width: 100%;
height: 185rpx;
position: absolute;
top: 0;
left: 0;
background: #dbe6ff;
opacity: 0.8;
filter: blur(50px);
/* #ifdef MP-ALIPAY */
z-index: 0;
/* #endif */
/* #ifdef MP-WEIXIN */
z-index: -1;
/* #endif */
}
&_grid {
// margin: 35rpx 0;
margin-top: 25rpx;
border-radius: 15rpx;
@include flex($space: space-between);
&_view {
display: flex;
flex-direction: column;
align-items: center;
width: 126rpx;
font-size: 26rpx;
// background: #ffffff;
// border-radius: 24rpx 24rpx 24rpx 24rpx;
image {
width: 99rpx;
height: 99rpx;
margin-bottom: 10rpx;
}
}
}
}
.order_list {
display: flex;
align-items: center;
padding: 15rpx;
margin-bottom: 30rpx;
font-size: 30rpx;
background-color: #fff;
width: 690rpx;
margin: 0 30rpx 30rpx;
border-radius: 15rpx;
// width: 690rpx;
// background: linear-gradient(180deg, #ffffff 0%, #f6f6f6 100%);
// box-shadow: 0rpx -6rpx 12rpx 2rpx rgba(88, 140, 255, 0.1);
// border-radius: 44rpx 44rpx 0rpx 0rpx;
&_view {
padding: 15rpx 30rpx;
background-color: #fff;
border-radius: 15rpx;
margin-right: 30rpx;
}
&_active {
background-color: #4879e6;
color: #fff;
}
// &_header {
// width: 100%;
// height: 100rpx;
// @include flex;
// font-weight: bold;
// font-size: 36rpx;
// color: #232323;
// background-color: #ffffff;
// position: sticky;
// top: 360rpx;
// left: 0;
// &_view {
// position: relative;
// margin-right: 50rpx;
// view {
// position: relative;
// z-index: 99;
// }
// &_dian {
// position: absolute !important;
// bottom: 0rpx;
// right: 20rpx;
// width: 66rpx;
// height: 20rpx;
// background-color: #4879e6;
// border-radius: 10rpx;
// z-index: 1 !important;
// }
// }
// }
}
button::after {
all: unset;
}
</style>

561
pages/home/star.vue Normal file
View File

@@ -0,0 +1,561 @@
<template>
<view class="p30">
<!-- <view class="star_pile" style="margin-bottom: 30rpx"></view> -->
<view class="orderdetail_info" style="margin-bottom: 30rpx">
<view class="orderdetail_info_title">
<view>{{ info.stationName }}</view>
</view>
<view style="font-size: 26rpx; margin-bottom: 15rpx; display: flex; align-items: center">
<view style="opacity: 0.7">枪号：{{ info.gunName }}</view>
<image style="width: 40rpx; height: 40rpx; margin-left: 15rpx" src="/static/icon/copy.png" @click="copy(info.gunName)" mode="widthFix"></image>
</view>
<view style="font-size: 26rpx; margin-bottom: 15rpx; opacity: 0.7">停车收费说明：{{ info.occupyCostInfo }}</view>
<view style="font-size: 26rpx; opacity: 0.7">占用收费说明：{{ info.parkCostInfo }}</view>
</view>
<view class="orderdetail_info" style="margin-bottom: 30rpx">
<view class="orderdetail_info_title">
<view>费用信息</view>
</view>
<view style="max-width: 420rpx">
<up-tag size="mini" :text="`当前计费时间段:${currentPrice.startTime}-${currentPrice.endTime}`" plain plainFill></up-tag>
</view>
<view class="orderdetail_info_fy">
<view class="orderdetail_info_fy_left">电站价格</view>
<view class="orderdetail_info_fy_right">
{{ currentPrice.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 class="orderdetail_info_title">
<view style="display: flex; align-items: center">
<view>支付方式</view>
<!-- -->
<view style="margin-left: 15rpx">
<up-tag v-if="store.state.insertStatus == 1" size="mini" text="已插枪" plain plainFill></up-tag>
</view>
</view>
<view style="display: flex; align-items: center">
<up-button type="primary" size="small" :plain="true" text="余额充值" @click="navTo('/pages/money/recharge')"></up-button>
</view>
</view>
<view style="font-size: 30rpx; margin-bottom: 30rpx">
<!-- @click="payTo" -->
<!-- <view>支付方式</view> -->
<!-- <view>{{ payType == 1 ? '余额付款' : payType == 2 ? '电卡支付' : payType == 3 ? '预付款' : '请选择' }}</view> -->
<view>
<view
class="flex-acsb"
style="padding: 15rpx 30rpx; border-radius: 10rpx"
v-for="(item, index) in payList"
:key="index"
:style="{
border: item.id == payType ? '1rpx solid #4879e6' : ''
}"
@click="payType = item.id"
>
<view style="display: flex; align-items: center">
<image :src="`/static/icon/lie${item.id}.png`" style="width: 50rpx; height: 50rpx; margin-right: 25rpx"></image>
{{ item.name }}
</view>
<view v-if="item.id == 1" style="font-size: 28rpx; opacity: 0.7">可用余额：{{ infoUser.balance || 0 }}</view>
</view>
</view>
</view>
</view>
<view class="orderdetail_info" style="margin-bottom: 30rpx">
<view class="orderdetail_info_yf">
<view class="orderdetail_info_yf_left">
<view class="orderdetail_info_yf_left_tit">
<view style="margin-right: 30rpx">预付费</view>
<up-tag size="mini" :text="`余额原路退款`" plain plainFill></up-tag>
</view>
<!-- <view>{{ dataForm.money }} 元</view> -->
<view class="orderdetail_info_yf_left_mon">
<!-- 预付金额： -->
<view
@click="
dataForm.money = 30;
inputBorder = false;
"
:style="{ border: `1rpx solid ${dataForm.money == 30 && !inputBorder ? '#4879e6' : '#c5c5c5'}` }"
>
30
</view>
<view
@click="
dataForm.money = 50;
inputBorder = false;
"
:style="{ border: `1rpx solid ${dataForm.money == 50 && !inputBorder ? '#4879e6' : '#c5c5c5'}` }"
>
50
</view>
<view
@click="
dataForm.money = 100;
inputBorder = false;
"
:style="{ border: `1rpx solid ${dataForm.money == 100 && !inputBorder ? '#4879e6' : '#c5c5c5'}` }"
>
100
</view>
<view @click="inputClik" :style="{ border: `1rpx solid ${inputBorder ? '#4879e6' : '#c5c5c5'}` }">
<input adjust-position v-if="inputBorder" focus type="number" v-model="dataForm.money" placeholder="自定义" />
<text v-else>自定义</text>
</view>
</view>
</view>
<!-- <view class="orderdetail_info_yf_right" @click="openDialog">预付金额</view> -->
</view>
</view>
<view class="orderdetail_info" style="margin-bottom: 30rpx" v-if="payType == 2">
<view>
<view class="flex-acsb" style="font-size: 30rpx; margin-bottom: 20rpx">
<view>当前可用电卡</view>
</view>
<view @click="userCardId = item.id" style="margin-bottom: 30rpx; position: relative" class="mt30 wallet_list" v-for="(item, index) in userCard" :key="index">
<view v-if="userCardId == item.id" style="position: absolute; top: 0; left: 0; background-color: #e45656; border-radius: 0 0 20rpx 0">
<up-icon name="checkbox-mark" color="#fff"></up-icon>
</view>
<view style="color: #fff">
<view style="font-weight: bold; font-size: 30rpx; margin-bottom: 18rpx">
{{ item.name }}
</view>
<view style="font-size: 28rpx; color: #eee">卡号：{{ item.cardNo }}</view>
</view>
<view style="display: flex; flex-direction: column; align-items: center; color: #fff; font-weight: bold; font-size: 26rpx">
<view style="font-size: 36rpx; margin-bottom: 10rpx">{{ item.balance }}</view>
<view style="font-weight: 500">余额</view>
</view>
</view>
</view>
</view>
<view style="height: 500rpx"></view>
<view class="orderdetail_btn p30" style="background-color: #fff">
<view class="orderdetail_btn_left">
{{ currentPrice.totalAmount }}
<text>元/度 免费停车</text>
</view>
<view>
<up-button v-if="!payType" :customStyle="{ height: '80rpx', width: '230rpx' }" disabled color="#4879e6" text="请选择支付方式" shape="circle"></up-button>
<up-button v-if="payType == 1" :customStyle="{ height: '80rpx', width: '280rpx' }" @click="toRecharge" color="#4879e6" shape="circle" text="启动充电"></up-button>
<up-button
v-if="payType == 3"
:customStyle="{ height: '80rpx', width: '280rpx' }"
@click="toRechargeYuFu"
color="#4879e6"
shape="circle"
:text="`预付${dataForm.money}元，启动充电`"
></up-button>
<!-- :text="`预付${dataForm.money}元，启动充电`" -->
<up-button
v-if="payType == 2"
:customStyle="{ height: '80rpx', width: '280rpx' }"
:disabled="!userCardId"
color="#4879e6"
:text="userCardId ? '启动充电' : '请选择电卡'"
shape="circle"
@click="toRechargeCard"
></up-button>
</view>
<!-- <view v-if="!payType" class="orderdetail_btn_right" style="opacity: 0.5;">请选择支付方式</view> -->
<!-- <view v-if="payType == 1" class="orderdetail_btn_right" @click="toRecharge">预付{{ dataForm.money }}元，启动充电</view> -->
<!-- <view v-if="payType == 2" class="orderdetail_btn_right" @click="toRecharge">电卡支付，启动充电</view> -->
</view>
<uni-popup ref="inputDialog" type="dialog">
<uni-popup-dialog
ref="inputClose"
mode="input"
title="请输入预付金额"
:value="dataForm.money"
placeholder="请输入内容"
@confirm="dialogInputConfirm"
></uni-popup-dialog>
</uni-popup>
</view>
</template>
<script setup>
import { ref, reactive, computed } from 'vue';
import { gunInfo, infoAroundApi, startChargingByWallet, userCardUsableList, startChargingByCard, ordersInfo, startChargingByAdaPay, userInfo } from '@/api/api.js';
import { onLoad, onShow } from '@dcloudio/uni-app';
import store from '@/store/index.js';
import { copy } from '@/utils/fun.js';
import { useNav } from '@/hooks/useNav.js';
const { navTo } = useNav();
const inputDialog = ref(null);
let info = reactive({});
let infoUser = reactive({});
let inputBorder = ref(false);
let currentPrice = ref({});
let id = ref('');
let userCard = ref([]);
let userCardId = ref(null);
let payType = ref(1);
let dataForm = reactive({
money: 30
});
let payList = reactive([
{
id: 1,
name: '余额支付'
}
]);
onLoad((options) => {
if (options.q) {
let search = decodeURIComponent(options.q);
search = search.split('?')[1];
const pairs = search ? search.split('&') : [];
const query = {};
for (let i = 0; i < pairs.length; ++i) {
const [key, value] = pairs[i].split('=');
query[key] = query[key] || decodeURIComponent(value);
}
if (query.num) {
id.value = query.num;
infoDate(query.num);
}
}
if (options.id) {
id.value = options.id;
infoDate(options.id);
}
});
onShow(async () => {
if (uni.getStorageSync('token') && id.value) {
infoDate(id.value);
let _res = await userInfo();
infoUser.value = _res;
}
});
let getUserCard = async (e) => {
let _res = await userCardUsableList({ stationId: e });
userCard.value = _res;
if (_res.length == 0) {
payType.value = 1;
} else {
payType.value = 2;
userCardId.value = _res[0].id;
if (!payList.find((val) => val.name == '电卡支付')) {
payList.push({
id: 2,
name: '电卡支付'
});
}
}
};
let inputClik = () => {
inputBorder.value = true;
dataForm.money = dataForm.money == 30 || dataForm.money == 50 || dataForm.money == 100 ? '' : dataForm.money;
};
let infoDate = async (e) => {
let _res = await gunInfo({ deviceNo: e });
info = _res;
getUserCard(_res.stationId);
currentPrice.value = _res.currentPrice;
console.log(_res.deviceNo, '_res.deviceNo');
console.log(_res.gunNo, '_res.gunNo');
store.commit('setInsertStatus', _res.insertStatus);
uni.sendSocketMessage({
data: JSON.stringify({
command: 'sub',
deviceNo: _res.deviceNo,
gunNo: _res.gunNo
}),
success: (res) => {
console.log('发送成功');
},
fail: (err) => {
console.log(err);
console.log('发送失败');
}
});
};
let dialogInputConfirm = (e) => {
dataForm.money = e;
};
let openDialog = () => {
console.log(12345);
inputDialog.value.open();
};
let toRechargeCard = async () => {
uni.showLoading({
title: '启动充电中...',
mask: true
});
let _res = await startChargingByCard({
deviceNo: info.deviceNo,
gunNo: info.gunNo,
amount: dataForm.money,
userCardId: userCardId.value
});
};
let toRechargeYuFu = async () => {
uni.showLoading({
title: '启动充电中...',
mask: true
});
let _res = await startChargingByAdaPay({
deviceNo: info.deviceNo,
gunNo: info.gunNo,
amount: dataForm.money
});
let data = _res.payInfo;
uni.requestPayment({
provider: 'wxpay',
timeStamp: data.timeStamp,
nonceStr: data.nonceStr,
package: data.package,
signType: data.signType,
paySign: data.paySign,
success: function (r) {
store.commit('setTransactionNo', _res.transactionNo);
store.commit('setSokStatus', 0);
timeMap(_res);
},
fail: function (err) {
uni.showToast({
title: '已取消支付',
icon: 'none'
});
console.log('fail:' + JSON.stringify(err));
}
});
// store.commit('setTransactionNo', _res.transactionNo);
// store.commit('setSokStatus', 0);
// timeMap(_res);
// uni.navigateTo({
// url: `/pageOrder/recharge/recharge?transactionNo=${_res.transactionNo}&type=order`
// });
};
let toRecharge = async () => {
uni.showLoading({
title: '启动充电中...',
mask: true
});
let _res = await startChargingByWallet({
deviceNo: info.deviceNo,
gunNo: info.gunNo,
amount: dataForm.money
});
store.commit('setTransactionNo', _res.transactionNo);
store.commit('setSokStatus', 0);
timeMap(_res);
// uni.navigateTo({
// url: `/pageOrder/recharge/recharge?transactionNo=${_res.transactionNo}&type=order`
// });
// uni.navigateTo({
// url: `/pageOrder/recharge/recharge?transactionNo=${_res.transactionNo}`
// });
// console.log(_res);
};
const timeMap = (_res) => {
var time = setInterval(async () => {
if (store.state.sokStatus != 1) {
let _data = await ordersInfo({
transactionNo: _res.transactionNo
});
store.commit('setDataObj', _data);
if (_data.status == 3) {
uni.hideLoading();
uni.navigateTo({
url: `/pageOrder/recharge/recharge?transactionNo=${_res.transactionNo}&type=order`
});
clearTimeout(time);
store.commit('setSokStatus', 0);
}
if (_data.status == -1) {
uni.hideLoading();
uni.showModal({
title: '提示',
content: '启动失败，请重试',
showCancel: false,
confirmText: '确认',
success: () => {}
});
clearTimeout(time);
store.commit('setSokStatus', 0);
}
if (_data.status == -2) {
uni.hideLoading();
uni.showModal({
title: '提示',
content: '启动超时，请重试',
showCancel: false,
confirmText: '确认',
success: () => {}
});
clearTimeout(time);
store.commit('setSokStatus', 0);
}
}
}, 5000);
};
const payTo = () => {
let itemList = ['余额付款'];
if (userCard.value.length != 0) {
itemList.push('电卡支付');
}
// itemList.push('预付款');
uni.showActionSheet({
itemList: itemList,
success: function (res) {
// if (itemList[1] == '预付款' && res.tapIndex == 1) {
// payType.value = 3;
// } else {
// payType.value = res.tapIndex + 1;
// }
payType.value = res.tapIndex + 1;
},
fail: function (res) {
console.log(res.errMsg);
}
});
};
</script>
<style lang="scss">
.star_pile {
width: 100%;
box-shadow: 0rpx -6rpx 8rpx 2rpx rgba(66, 115, 229, 0.05);
border-radius: 16rpx 16rpx 16rpx 16rpx;
padding: 20rpx;
background-color: #fff;
}
.orderdetail_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;
}
}
&_yf {
@include flex($space: space-between);
&_left {
flex: 1;
// view {
// @include flex;
// }
&_tit {
font-size: 28rpx;
color: rgba(51, 51, 51, 0.8);
margin-bottom: 20rpx;
@include flex;
}
&_mon {
font-size: 30rpx;
@include flex($space: space-between);
view {
// width: 22%;
padding: 15rpx 35rpx;
border: 1rpx solid #c5c5c5;
margin-right: 15rpx;
border-radius: 10rpx;
}
input {
width: 100rpx;
}
}
}
&_right {
padding: 15rpx 30rpx;
color: #1779ff;
border: 1rpx solid #1779ff;
border-radius: 50rpx;
}
}
}
.orderdetail_btn {
width: 100%;
position: fixed;
left: 0;
bottom: 0rpx;
padding: 30rpx;
@include flex($space: space-between);
&_left {
// background-color: #e5eaf4;
color: #333;
font-size: 38rpx;
font-weight: bold;
text {
font-size: 26rpx;
font-weight: 500;
}
}
&_right {
background: #1779ff;
color: #fff;
font-weight: bold;
font-size: 32rpx;
padding: 0 40rpx;
}
}
.wallet_list {
border-radius: 15rpx;
background-color: #4879e6;
padding: 20rpx 50rpx 20rpx 30rpx;
display: flex;
align-items: flex-end;
justify-content: space-between;
}
</style>