qiubinghui
/
zhywpt-sp
İzle 1
Yıldızla 0
Çatalla 0
Kod Sorunlar 0 Değişiklik İstekleri 0 Sürümler 0 Wiki Aktivite
Kaynağa Gözat

Merge branch 'master' of http://192.168.40.220/etc_codes/etc_zhywzcpt_codes/jz_applet

master
yangteng 7 ay önce
ebeveyn
853010f020 8808000056
işleme
eed896191b
9 değiştirilmiş dosya ile 1442 ekleme ve 374 silme
Görünümü Böl Farklılık Durumunu Göster
  1. 24
    9
      components/nav-bar/nav-bar.vue
  2. 14
    3
      components/nav-bar/nav-bar2.vue
  3. 7
    4
      pages.json
  4. 34
    19
      pages/index/index.vue
  5. 102
    0
      pages/service/components/rightList.vue
  6. 27
    15
      pages/service/service.vue
  7. 899
    0
      pages/user/user - 副本.vue
  8. 335
    324
      pages/user/user.vue
  9. BIN
      static/image/icon-back-white.png

+ 24
- 9
components/nav-bar/nav-bar.vue Dosyayı Görüntüle

@@ -1,11 +1,13 @@
<template>
<view class="nav-bar" :style="{height:navHeight+'px'}">
<view class="nav-bar" :style="{height:navHeight+'px',background:bgColor,color:fontColor}">
<view class="title"
:style="{paddingTop:searchMarginTop+'px',height:searchHeight+'px',lineHeight:searchHeight+'px'}">
<block v-if="isBack && !isAlipay">
<view @click="back" v-if="isBack && !isAlipay" class="back" :style="{height:searchHeight+'px',width:searchHeight+'px'}">
<image :src="`/static/image/icon-back.png`" mode="aspectFill"
:style="{height:searchHeight+'px',width:searchHeight+'px'}" class="back" @click="back"></image>
</block>
:style="{height:searchHeight+'px',width:searchHeight+'px'}" v-if='!backImgWhite'></image>
<image src="/static/image/icon-back-white.png" mode="aspectFill"
:style="{height:searchHeight+'px',width:searchHeight+'px'}" v-else></image>
</view>
<text>{{title}}</text>
</view>
</view>
@@ -17,16 +19,16 @@
onMounted,
ref
} from "vue";
const navHeight = ref(null)
const searchMarginTop = ref(null)
const searchHeight = ref(32)
const searchWidth = ref(32)
const isAlipay = ref(false)
const isAlipay = ref(false)
onMounted(() => {
const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
const type = uni.getSystemInfoSync().uniPlatform
isAlipay.value = type === 'mp-alipay'
isAlipay.value = type === 'mp-alipay'
const {
top,
width,
@@ -55,6 +57,19 @@
isBack: {
type: Boolean,
default: true
},
bgColor: {
type: String,
default: 'linear-gradient(to left, #43A1E0 0%, #13E7C1 100%);'
},
fontColor:{
type: String,
default: '#000'
},
backImgWhite:{
type: Boolean,
default: false
}
})
const back = () => {
@@ -74,7 +89,7 @@
position: fixed;
width: 100%;
z-index: 999;
}

.nav-bar .title {
@@ -89,4 +104,4 @@
position: absolute;
left: 10rpx;
}
</style>
</style>

+ 14
- 3
components/nav-bar/nav-bar2.vue Dosyayı Görüntüle

@@ -1,5 +1,5 @@
<template>
<view class="nav-bar" :class="scrollTop>navHeight?'nav-bg':''" :style="{height:navHeight+'px'}">
<view class="nav-bar" :class="scrollTop>navHeight?navbgClass:''" :style="{height:navHeight+'px',color:fontColor}">
<view class="title"
:style="{paddingTop:searchMarginTop+'px',height:searchHeight+'px',lineHeight:searchHeight+'px'}">
<block v-if="isBack && !isAlipay">
@@ -72,7 +72,15 @@
scrollTop: {
type: Number,
default: 0
}
},
navbgClass: {
type: String,
default: 'nav-bg'
},
fontColor: {
type: String,
default: '#000'
},
})
const back = (title, type, userType, orderId) => {
console.log("555555555", title, type, userType, orderId)
@@ -105,7 +113,10 @@
.nav-bg {
background: linear-gradient(to right, #13E7C1, #43A1E0);
}

.nav-bgXin {
background: #01243A;
color:#fff;
}
.blank {
width: 100%;
display: none;

+ 7
- 4
pages.json Dosyayı Görüntüle

@@ -1,6 +1,7 @@
{
"mode": "production",
"pages": [{
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarHidden": true,
@@ -25,7 +26,8 @@
"path": "pages/user/user",
"style": {
"navigationBarTitleText": "九州ETC",
"navigationBarBackgroundColor": "#22dbc8",
"navigationBarBackgroundColor": "#01243A",
"backgroundColor": "#f6f9fc",
"navigationStyle": "custom",
"mp-alipay": { //在支付宝小程序中如果不生效 就加上这两行代码 就会生效啦
"transparentTitle": "always",
@@ -39,6 +41,7 @@
"style": {
"navigationBarTitleText": "九州ETC",
"navigationStyle": "custom",
"navigationBarBackgroundColor": "#01243A",
"mp-alipay": { //在支付宝小程序中如果不生效 就加上这两行代码 就会生效啦
"transparentTitle": "always",
"titlePenetrate": "YES",
@@ -112,14 +115,14 @@
}, {
"path": "progress-query/progress-query-business-details",
"style": {
"navigationBarTitleText": "进度查询详情",
"navigationBarTitleText": "业务审核记录详情",
"enablePullDownRefresh": false
}
},
{
"path": "progress-query/progress-query-business",
"style": {
"navigationBarTitleText": "进度查询",
"navigationBarTitleText": "业务审核记录",
"enablePullDownRefresh": false
}
},

+ 34
- 19
pages/index/index.vue Dosyayı Görüntüle

@@ -19,6 +19,7 @@
<view class="search-box">
<image :src="`${fileURL}image/newHome/search.png`" class="icon" mode="aspectFill"></image>
<input class="search" placeholder="办业务·搜一搜" @input="onKeyInput" />
<!-- <u-input v-model="searchParams" type="text" :border="false" :height="80" placeholder-style='color: #fff;' /> -->
</view>
</view>

@@ -34,7 +35,7 @@
</view>


<view class="notice">
<view class="notice" :style="{'--bgimg':`url(${fileURL}image/newHome/tongzhi.png)`}">
<view class="l-img">
<image :src="`${fileURL}image/newHome/tongzhi-l.png`" class='img' mode="aspectFit"></image>
</view>
@@ -47,7 +48,7 @@
<view class="supervision-con">
<!-- <u-swiper :list="state.swiperListArr"></u-swiper> -->
<swiper class="swiper" circular :indicator-dots="swiper.indicatorDots" :autoplay="swiper.autoplay"
:interval="swiper.interval" :duration="swiper.duration" :easing-function="swiper.easing">
:interval="swiper.interval" :duration="swiper.duration" >
<block v-if="state.swiperList.length >0" v-for="item in state.swiperList" :key="item.id">
<swiper-item class="swiper-item" @click="link(item)">
<image :src="fileURLList + item.imgUrl" mode="widthFix" class='img'></image>
@@ -65,11 +66,11 @@
</view> -->
</view>

<view class="title-name">
<view class="title-name title-h">
快速办理
</view>
<view class="express-lane">
<view class="item keche">
<view class="item keche" :style="{'--bgimg':`url(${fileURL}image/newHome/keche.png)`}">
<view class="item-con" @click="showMask(1)">
<view class="top-txt">
客车用户
@@ -79,7 +80,7 @@
</view>
</view>
</view>
<view class="item huoche">
<view class="item huoche" :style="{'--bgimg':`url(${fileURL}image/newHome/huoche.png)`}">
<view class="item-con" @click="showMask(2)">
<view class="top-txt">
货车用户
@@ -92,7 +93,7 @@
</view>
<view class="news-con">
<view class="title-con">
<text>高速快讯</text>
<text class='title-h'>高速快讯</text>
<view class="r-more" @click="$util.navTo('/subpackage/orders/moreHighMsg/moreHighMsg',true)">
<text class='txt'>更多</text>
<image :src="`${fileURL}image/newHome/r-icon.png`" mode="aspectFit" class='icon'></image>
@@ -130,7 +131,7 @@
<view class="txt">
{{ item }}
</view>
<view class="border">
<view class="border" :style="{'--bgimg':`url(${fileURL}image/newHome/bottom-select.png)`}">
</view>
</view>
</view>
@@ -248,8 +249,8 @@
indicatorDots: false,
autoplay: true,
interval: 6000,
duration: 3000,
easing: "easeInOutCubic"
duration: 500,
easing: "default"
})

onLoad((options) => {
@@ -682,6 +683,9 @@
font-weight: 500;
font-size: 26rpx;
background: #1a394d;
::v-deep .input-placeholder {
color: #fff !important;
}
}
}

@@ -731,7 +735,7 @@
}

.notice {
background: url(https://qtzl.etcjz.cn/default-bucket/image/newHome/tongzhi.png);
background-image: var(--bgimg);
background-size: 100% 100%;
background-repeat: no-repeat;
height: 80rpx;
@@ -752,8 +756,9 @@
}

.r-info {
line-height: 80rpx;
margin-left: 16rpx;
font-size: 28rpx;
font-size: 27rpx;
color: #000;
font-weight: 500;
}
@@ -809,7 +814,13 @@

.title-name {
margin: 24rpx 30rpx 0;
}

.title-h {
font-family: PingFangSC, PingFang SC;
font-weight: bold;
font-size: 34rpx;
color: #01243A;
}

.express-lane {
@@ -828,7 +839,7 @@
align-items: flex-end;
justify-content: center;
flex-direction: column;
background-image: var(--bgimg);
.item-con {
margin-right: 53rpx;
}
@@ -854,12 +865,18 @@
}

.keche {
background-image: url(https://qtzl.etcjz.cn/default-bucket/image/newHome/keche.png);

.btn {
background-color: #03385D;
}
}

.huoche {
margin-left: 22rpx;
background-image: url(https://qtzl.etcjz.cn/default-bucket/image/newHome/huoche.png);

.btn {
background-color: #C2A75F;
}
}
}

@@ -867,9 +884,6 @@
margin: 39rpx 30rpx 0;

.title-con {
font-family: PingFangSC, PingFang SC;
font-size: 34rpx;
color: #01243A;
display: flex;
align-items: center;
justify-content: space-between;
@@ -970,7 +984,7 @@

.border::after {
content: "";
background-image: url(https://qtzl.etcjz.cn/default-bucket/image/newHome/bottom-select.png);
background-image: var(--bgimg);
background-repeat: no-repeat;
background-size: 100% 100%;
position: absolute;
@@ -1053,10 +1067,11 @@
}

.txt {
margin-left: 10rpx;
margin-left: 14rpx;
font-family: PingFangSC, PingFang SC;
font-size: 28rpx;
color: #222222;
line-height: 38rpx;
}
}
}

+ 102
- 0
pages/service/components/rightList.vue Dosyayı Görüntüle

@@ -0,0 +1,102 @@
<template>
<view class='right-contaienr'>
<scroll-view scroll-y="true" :style='{height:scrollHeight}'>
<view v-for="(item,index) in menuList" :key='index' class="item-box" @click="toNext(item.link)">
<view class="l-img bg-blue" :style="{ '--background': bgBlue }">
<image :src="`${fileURLList}${item.iconPath}`" mode="aspectFit" class='img' />
</view>
<view class="r-info">
<view class="title-text">{{item.name}}</view>
<view class="title-desc">查看{{item.name}}</view>
</view>
</view>
</scroll-view>
</view>
</template>

<script lang="ts" setup>
import {
ref,
reactive, onMounted,
getCurrentInstance,
defineProps
} from "vue";
import {
fileURL, fileURLList
} from "@/datas/fileURL.js";
const bgBlue = `url(${fileURL}image/newHome/more-bg.png) center center no-repeat`;
defineProps({
menuList: {
type: Array,
default: () => []
},

})
const instance = getCurrentInstance();
const scrollHeight = ref('100%')
onMounted(() => {
let windowHeight = uni.getSystemInfoSync().windowHeight
const query = uni.createSelectorQuery().in(instance.proxy)
query
.select(".right-contaienr")
.boundingClientRect((data) => {
console.log("得到布局位置信息", data);
console.log("节点离页面顶部的距离为" + data.top, windowHeight);
scrollHeight.value = (windowHeight - data.top) + 'px'
})
.exec();

})
function toNext(url) {
uni.navigateTo({
url: url,
});
}
</script>

<style lang='scss' scoped>
.right-contaienr {
overflow: hidden;

.scroll-Y {
height: 100%;
}

.item-box {
display: flex;
padding-bottom: 30rpx;

}

.l-img {
width: 105rpx;
height: 105rpx;
background-size: 100% 100%;
display: flex;
align-items: center;
justify-content: center;

.img {
width: 64rpx;
height: 64rpx;
}
}

.r-info {
margin-left: 19rpx;
font-family: MicrosoftYaHei;

.title-text {
font-size: 28rpx;
color: #01243A;
margin-top: 5rpx;
}

.title-desc {
margin-top: 10rpx;
font-size: 26rpx;
color: #999999;
}
}
}
</style>

+ 27
- 15
pages/service/service.vue Dosyayı Görüntüle

@@ -1,6 +1,6 @@
<template>
<view class="wrapper">
<navBar title="九州ETC"></navBar>
<navBar title="九州ETC" bgColor="#01243A" fontColor='#fff' :backImgWhite='true'></navBar>
<view class="search-box">
<image :src="`${$imgUrl}service/icon-search.png`" class="icon" mode="aspectFill" @click="search()"></image>
<input class="search" placeholder="请输入业务名称" v-model="state.searchVal" @confirm="search()" />
@@ -9,22 +9,24 @@
<view class="left">
<view v-for="(item,index) in menuShow.list" :key="index"
:class="activeTab === item.name ? 'menu active' : 'menu'" @click="tabHandle(item.name,index)">
<view :class="activeTab === item.name ? 'border on' : 'border'"></view>
<view :class="activeTab === item.name ? 'border on' : 'border'" :style="{ '--background': bgOn }"></view>
<view class="menu-text">{{item.name}}</view>
</view>
</view>
<view class="right">
<view class="right-content">
<!-- <view class="right-content">
<block v-if="menuShow.list.length > 0">
<view v-for="(item,index) in menuShow.list[tableSelectIndex].children" :key='index'
class="item-box" @click="toNext(item.link)">
<view v-for="(item,index) in menuShow.list[tableSelectIndex].children" :key='index' class="item-box"
@click="toNext(item.link)">
<view class="item bg-blue" :style="{ '--background': bgBlue }">
<image :src="`${fileURLList}${item.iconPath}`" mode="aspectFill" />
</view>
<view class="text">{{item.name}}</view>
</view>
</block>
</view>
</view> -->
<rightListVue class="rightListVue" :menuList='menuShow.list[tableSelectIndex].children'
v-if="menuShow.list.length > 0" />
</view>
</view>
</view>
@@ -32,6 +34,7 @@
<script lang="ts" setup>
import { source } from "@/utils/network/difference";
import navBar from "@/components/nav-bar/nav-bar.vue";
import rightListVue from "./components/rightList.vue";
import {
ref,
reactive,
@@ -58,8 +61,7 @@
import {
stringToJson
} from "@/utils/network/encryption";
const bgOrange = `url(${fileURL}image/service/bg-orange.png) center center no-repeat`;
const bgBlue = `url(${fileURL}image/service/bg-blue.png) center center no-repeat`;
const bgOn = `url(${fileURL}image/newHome/bg-on.png) center center no-repeat`;
const activeTab = ref("");
const tableSelectIndex = ref(0);
// 切换
@@ -144,7 +146,7 @@
return new Promise(async (resolve, reject) => {
const res = await request(queryMenuConfig, options);
const data = stringToJson(res.bizContent);
console.log("data", data.menuList)
console.log("dataqueryMenuConfigAction", data.menuList)
resolve(data);
}).catch((error) => {
reject(error);
@@ -166,7 +168,7 @@
.wrapper {
display: flex;
background: linear-gradient(to left, #43a1e0 0%, #13e7c1 100%);
background: #01243A;
flex-direction: column;
height: 100%;
}
@@ -227,9 +229,10 @@
.left .active .menu-text {
font-weight: bold;
color: #00b38b;
font-size: 28rpx;
line-height: 32rpx;
font-family: NotoSansHans, NotoSansHans;
font-size: 28rpx;
color: #01243A;
}
.left .border {
@@ -240,15 +243,20 @@
}
.left .on {
background: linear-gradient(0deg, #43a1e0 0%, #13e7c1 100%);
/* background: linear-gradient(0deg, #43a1e0 0%, #13e7c1 100%); */
/* background: linear-gradient(0deg, #fff 0%, #C2A75F 50%, #C2A75F 100%); */
border-radius: 4rpx;
font-size: 28rpx;
background: var(--background);
background-size: 100% 100%;
}
.right {
flex: 1;
}
.right-content {
/* .right-content {
display: flex;
flex-wrap: wrap;
}
@@ -311,7 +319,7 @@
align-items: center;
margin-top: 19rpx;
color: #666666;
}
} */
.bg-blue {
background: var(--background);
@@ -324,4 +332,8 @@
.right .text-orange {
color: #fd8362;
}
.rightListVue {
height: 100%;
}
</style>

+ 899
- 0
pages/user/user - 副本.vue Dosyayı Görüntüle

@@ -0,0 +1,899 @@
<template>
<navBar title="九州ETC" :scrollTop="scrollTop" :isBack="isBack"></navBar>
<filter>
<view class="wrapper">
<image :src="`${$imgUrl}user/bg-user-2.png`" class="bg-head" mode="widthFix"></image>
<view class="content" :style="{ top: margin + 'px' }">
<view class="head" :style="{ marinTop: margin + 'px' }">
<view class="avatar">
<image :src="`${$imgUrl}user/icon-avatar.png`" :class="!state.data.opId ? 'unlogin' : ''"
@click="goLogin">
</image>

<view v-if="!state.data.opId" class="name" @click="$util.navTo('/login/login')">
<view class="nickname">登录/注册</view>
</view>
<view v-else class="name">
<view class="nickname">{{state.accountInfoVo.nickName}}</view>
<view class="user-id">
<view class="phone">{{state.accountInfoVo.mobile}}</view>
<view v-if="false"
@click="$util.navTo('/subpackage/personal-center/setting/change-phone', true)"
class="btn-change">已关联</view>
</view>
</view>
</view>
<view v-if="false" class="setting"
@click="$util.navTo('/subpackage/personal-center/setting/setting', true)">
<text>签到</text>
</view>
</view>
<view class="panel-box">
<view class="panel">
<view class="panel-item"
@click="$util.navTo('/subpackage/personal-center/vehicle-information', true)">
<view class="panel-text"><text class="num"
v-if="state.carNumber">{{state.carNumber}}</text><text class="num"
v-else>0</text><text class="txt">辆</text></view>
<text class="type">车辆</text>
</view>
<view class="panel-item" @click="goOrder(0)">
<text class="num">{{state.userVehicleInfoSumQueryVo.orderStatus0}}</text>
<text class="type">待办</text>
</view>
<view class="panel-item" @click="goEquity()">
<!-- <view class="panel-text"><text class="num">{{state.equityNumber}}</text></view> -->
<text class="type num">权益</text>
</view>
<view class="panel-item" v-if="false">
<view class="panel-text"><text class="num">2555</text><text class="txt">分</text></view>
<text class="type">积分</text>
</view>
</view>
<view class="notice" v-if="false">
<image :src="`${$imgUrl}user/icon-tips.png`" class="icon-notice" mode="aspectFill"></image>
<view class="notice-content">您有一笔成功交易，点击查看详情</view>
</view>
</view>
<view class="rights box" v-if="false">
<view class="right-head">
<view class="tit">我的权益</view>
<view class="more">
<text class="more-text">查看全部</text>
<image :src="`${$imgUrl}user/icon-arrow.png`" class="arrow"></image>
</view>
</view>
<view class="rights-items">
<view class="item">
<image :src="`${$imgUrl}user/icon-car-2.png`" class="icon"></image>
<text class="tit">我的通行</text>
<text class="sub-tit">查询账单、轨迹</text>
</view>
<view class="item">
<image :src="`${$imgUrl}user/icon-door.png`" class="icon"></image>
<text class="tit">上门服务</text>
<text class="sub-tit">8折优惠</text>
</view>
<view class="item">
<image :src="`${$imgUrl}user/icon-obu.png`" class="icon"></image>
<text class="tit">设备险</text>
<text class="sub-tit">享50元更换</text>
</view>
<view class="item">
<image :src="`${$imgUrl}user/icon-bao.png`" class="icon"></image>
<text class="tit">微保驾乘险</text>
<text class="sub-tit">最高享20万</text>
</view>
</view>
</view>
<view class="order box">
<view class="right-head">
<view class="tit">我的订单</view>
<view class="more" @click="goOrder(0)">
<text class="more-text">查看全部</text>
<image :src="`${$imgUrl}user/icon-arrow.png`" class="arrow"></image>
</view>
</view>
<view class="order-items">
<view class="item" @click="goOrder(1)">
<image :src="`${$imgUrl}user/icon-daifahuo.png`" class="icon"></image>
<text class="tit">待发货</text>
</view>
<view class="item" @click="goOrder(2)">
<image :src="`${$imgUrl}user/icon-daishouhuo.png`" class="icon"></image>
<text class="tit">待收货</text>
</view>
<view class="item" @click="goOrder(3)">
<image :src="`${$imgUrl}user/icon-daijihuo.png`" class="icon"></image>
<text class="tit">待激活</text>
</view>
<view class="item" @click="goOrder(4)">
<image :src="`${$imgUrl}user/icon-tuihuanhuo.png`" class="icon"></image>
<text class="tit">退换货/退款</text>
</view>
</view>
</view>
<view class="go-through box" v-if="source=='WECHAT'">
<view class="right-head">
<view class="tit">本月通行</view>
</view>
<view class="pass">
<view class="total m-top">
<text>通行消费</text>
<text>总消费</text>
</view>
<view class="amount m-top">
<text>¥
{{state.monthFlowingVo.flowingNum }}</text>
<text>¥
{{state.monthFlowingVo.flowingNum }}</text>
</view>
<view class="line m-top">
<view class="line1"
:style="{width: (state.monthFlowingVo.flowingNum ? state.monthFlowingVo.flowingNum : 0)*100/state.monthFlowingVo.money+'%'}">
</view>
<view class="line2"></view>
</view>
<view class="mileage">
<view class="txt">
<text class="tit">通行里程</text>
<text class="val">{{state.monthFlowingVo.mileage}}km</text>
</view>
<view class="txt">
<text class="tit">通行时长</text>
<text class="val">{{state.monthFlowingVo.duration}}</text>
</view>
<view class="txt">
<text class="tit ">通行次数</text>
<text class="val">{{state.monthFlowingVo.num}}次</text>
</view>
</view>
<view class="detail" @click="goTrajectory()">查看通行轨迹
</view>
</view>
</view>
<view class="cars box">
<view class="right-head">
<view class="tit">我的车辆</view>
<view class="more"
@click="$util.navTo('/subpackage/personal-center/vehicle-information', true)">
<text class="more-text">查看全部</text>
<image :src="`${$imgUrl}user/icon-arrow.png`" class="arrow"></image>
</view>
</view>
<view class="sub-bind">
<view class="item-tit">
<image :src="`${$imgUrl}user/icon-car-3.png`" class="icon icon-2"></image>
<text>我要关联车辆</text>
</view>
<view class="right-arrow"
@click="$util.navTo('/subpackage/personal-center/setting/car-information/car-create', true)">
<view class="sub-tit">增加未关联车辆</view>
<image :src="`${$imgUrl}user/icon-arrow.png`" class="arrow"></image>
</view>
</view>
<view class="car-item" v-for="(item,index) in state.list">
<image @click="carDetails(item)" :src="`${$imgUrl}che.png`" class="car-pic" mode="aspectFill">
</image>
<view class="car-info" @click="carDetails(item)">
<view class="car-no"><text class="no">{{item.vehiclePlate}}</text><text class="color"
:style="{ background: item.showColor}">{{item.color}}</text></view>
<view class="card-no">卡号：{{item.cardId}}</view>
<view class="card-no">签号：{{item.obuId}}</view>
</view>
<view class="btn-unbind" @click="del(item.vehicleId)">解除绑定</view>
</view>
<view>
<view class="loading-more" v-if="state.carNumber>5"
@click="$util.navTo('/subpackage/personal-center/vehicle-information', true)">加载更多~</view>
</view>
</view>
<view class="menu">
<view class="item" @click="$util.navTo('/subpackage/personal-center/setting/setting', true)">
<view class="item-tit">
<image :src="`${$imgUrl}user/icon-setting.png`" class="icon icon-2"></image>
<text>设置与资料管理</text>
</view>
<view class="right-arrow">
<view class="sub-tit">隐私、密码管理</view>
<image :src="`${$imgUrl}user/icon-arrow.png`" class="arrow"></image>
</view>

</view>
</view>
</view>
</view>
</filter>
</template>

<script lang="ts" setup>
import { reactive } from "vue";
import { msg, navTo } from "@/utils/utils";
import { onMounted, ref } from "vue";
import { getItem, StorageKeys } from "@/utils/storage";
import navBar from "../../components/nav-bar/nav-bar2.vue";
import { onLoad, onShow, onPageScroll } from "@dcloudio/uni-app";
import {
userInfoIndex, selectCarInfo, delCarInfo, showEquityListApi
} from "@/utils/network/api.js";
import {
request
} from "@/utils/network/request.js";
import {
stringToJson
} from "@/utils/network/encryption.js";
import filter from '@/components/filter/filter.vue';
import { source } from "@/utils/network/difference";
import { vehiclePlateColor, vehiclePlateColorPai, getVehiclePlateColorPaiShow } from "@/datas/vehiclePlateColor.js";
const height = ref(null);
const top = ref(null);
const margin = ref(null);
const mobile = ref(null);
const scrollTop = ref(0);
const isBack = ref(false);
const state = reactive({
data: {
opId: "",
},
accountInfoVo: {
nickName: '',
mobile: ''
},
monthFlowingVo: {
duration: 0,
mileage: 0,
flowingNum: 0,
num: 0,
parkingLotMoney: 0,
parkingLotNum: 0,
money: 0,
},
list: '', //车辆信息
carNumber: '',//车辆数量
userVehicleInfoSumQueryVo: {
vehicleSum: 0,
orderStatus0: 0
},//车数量 ,代办数量
isTrajectory: false, //是否有轨迹
equityNumber: 0,
});
onMounted(() => {
const res = uni.getMenuButtonBoundingClientRect();
height.value = res.height + "px";
top.value = res.top + "px";
margin.value = res.height + res.top;
});

onLoad((option : any) => {
state.data.opId = getItem(StorageKeys.OpenId);
mobile.value = getItem("mobile");
});
const carDetails = (item) => {
const params = encodeURIComponent(JSON.stringify(item))
uni.navigateTo({
url: `/subpackage/personal-center/car-details?params=${params}`
})
}
const goTrajectory = () => {
if (state.isTrajectory) {
uni.navigateTo({
url: "/subpackage/personal-center/trajectory/trajectory"
})
} else {
msg("暂无轨迹")
}
}
//监听页面滚动
onPageScroll((e) => {
scrollTop.value = e.scrollTop;
});
onShow((option : any) => {
state.data.opId = getItem(StorageKeys.OpenId);
console.log("state.data.opId", state.data.opId)
if (state.data.opId) {
getUserInfo();
showEquityListRequest(); //权益请求
} else {
state.userVehicleInfoSumQueryVo = {
vehicleSum: 0,
orderStatus0: 0
}
state.monthFlowingVo = {
duration: 0,
mileage: 0,
flowingNum: 0,
num: 0,
parkingLotMoney: 0,
parkingLotNum: 0,
money: 0,
},
state.list = [],
state.carNumber = 0
}
});
// 查询车辆信息
const queryCarMsg = () => {
const options = {
type: 2,
data: {
"openId": getItem('openId')
},
method: "POST",
showLoading: true,
};
//调用方式
request(selectCarInfo, options).then((res) => {
const data = (stringToJson(res.bizContent).vehicleManages)
for (var i = 0; i < data.length; i++) {
for (var j = 0; j < vehiclePlateColorPai.length; j++) {
if (data[i].vehiclePlateColor == vehiclePlateColorPai[j]['id']) {
data[i].color = vehiclePlateColorPai[j]['color']
data[i].showColor = vehiclePlateColorPai[j]['showColor']
}
}
}
state.carNumber = data.length
state.list = data.slice(0, 5);
console.log("state.list", state.list)
})
.catch((err) => {
console.log('输出内容', err)
});
}
const getUserInfo = () => {
const options = {
type: 2,
data: {
openId: state.data.opId
},
method: "POST",
showLoading: true,
};
//调用方式
request(userInfoIndex, options)
.then((res) => {
console.log('用户信息', res)
let data = stringToJson(res.bizContent)
state.accountInfoVo = data.accountInfoVo;
if (data.monthFlowingVo && JSON.stringify(data.monthFlowingVo) != "{}") {
state.monthFlowingVo = data.monthFlowingVo;
state.isTrajectory = true;
}
state.userVehicleInfoSumQueryVo.vehicleSum = JSON.parse(JSON.stringify(data.userVehicleInfoSumQueryVo)).vehicleSum;
state.userVehicleInfoSumQueryVo.orderStatus0 = JSON.parse(JSON.stringify(data.userVehicleInfoSumQueryVo)).orderStatus0;
console.log("获取用户信息", data);
queryCarMsg();
})
.catch((err) => {
console.log(err);
});
}
const del = (id) => {
uni.showModal({
title: '提示',
content: '是否删除该条车辆信息',
success: function (res) {
if (res.confirm) {
console.log('用户点击确定');
let data = {
vehicleId: id,
openId: getItem('openId')
}
const options = {
type: 2,
data: data,
method: "POST",
showLoading: true,
};
request(delCarInfo, options).then((res) => {
const data = stringToJson(res.bizContent);
console.log(data)
state.list = data.vehicleManages
if (data.info == '成功.') {
uni.showToast({
title: "删除成功",
icon: "none"
})
queryCarMsg();
}
});
} else if (res.cancel) {
console.log('用户点击取消');
}
}
});
}
const goOrder = (index) => {
uni.reLaunch({
url: `../order/order?index=${index}`
})
}
const goLogin = () => {
if (!getItem('openId')) {
uni.navigateTo({
url: "/login/login"
})
}
}
const showEquityListRequest = () => {
const options = {
type: 2,
data: {
"openId": getItem(StorageKeys.OpenId),
"pageNo": 1,
"pageSize": 100,
},
method: 'POST',
showLoading: true,
}
request(showEquityListApi, options).then((res) => {
const data = stringToJson(res.bizContent);
console.log("购买2", data)
state.equityNumber = data.data.length
})
}
const goEquity = () => {
// if (state.equityNumber) {
// navTo('/subpackage/after-sale/add-equity/equity-list') //潘兵写的权益
navTo('/subpackage/service/equityList/equityList')

// } else {
// msg("暂无购买权益记录")
// }
}
</script>
<style>
page {
background: #eef7f7;
}
</style>
<style scoped>
.unlogin {
filter: grayscale(100%);
opacity: 0.7;
}

.wrapper {
position: relative;
background: #fff;
}

.bar {
width: 100%;
position: fixed;
text-align: center;
font-size: 32rpx;
font-weight: bold;
}

.bg-head {
width: 100%;
position: absolute;
z-index: -99;
top: 0;
left: 0;
}

.content {
position: absolute;
display: flex;
flex-direction: column;
width: 100%;
}

.head {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
box-sizing: border-box;
padding: 40rpx 0 46rpx;
}

.head .avatar {
display: flex;
align-items: center;
}

.head .avatar image {
width: 120rpx;
height: 120rpx;
border-radius: 80rpx;
border: 12rpx solid rgba(255, 255, 255, 0.5);
margin: 0 20rpx 0 30rpx;
}

.head .setting {
display: flex;
align-items: center;
background: rgba(0, 179, 139, .1);
border: 1px solid #fff;
height: 60rpx;
border-radius: 30rpx;
padding: 0 34rpx;
color: #fff;
font-size: 28rpx;
margin-right: 30rpx;
}

.head .setting image {
width: 40rpx;
height: 40rpx;
margin-right: 6rpx;
}

.head .nickname {
font-size: 36rpx;
color: #000000;
}

.head .user-id {
font-size: 26rpx;
color: #000000;
padding-top: 30rpx;
display: flex;
align-items: center;
}

.head .btn-change {
font-size: 22rpx;
height: 40rpx;
padding: 0 20rpx;
border: 1px solid #fff;
color: #fff;
box-sizing: border-box;
border-radius: 20rpx;
margin-left: 16rpx;
background: rgba(0, 179, 139, .1);
}

.panel-box {
display: flex;
flex-direction: column;
background: #fff;
margin: 0 30rpx 30rpx;
box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(223, 223, 223, 0.8);
border-radius: 20rpx;
padding: 30rpx 0;
}

.panel {
display: flex;
justify-content: space-evenly;
padding: 30rpx 0;
}

.panel-item {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 32rpx;
}

.panel-item .num {
font-weight: bold;
color: #454545;
}

.panel-item .txt {
font-size: 26rpx;
}

.panel-item .type {
color: #999;
font-size: 26rpx;
padding: 14rpx 0;
}

.panel-box .icon-notice {
width: 48rpx;
height: 48rpx;
}

.panel-box .notice {
display: flex;
font-size: 32rpx;
margin: 0 30rpx;
align-items: center;
background: #f3f3f3;
border-radius: 10rpx;
padding: 0 14rpx;
}

.panel-box .notice .notice-content {
height: 68rpx;
line-height: 68rpx;
padding: 0 12rpx;
font-size: 28rpx;
}

.box .arrow {
width: 14rpx;
height: 26rpx;
}

.box {
background: #ffffff;
margin: 0 30rpx 30rpx;
padding: 30rpx 20rpx;
border-radius: 20rpx;
box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(223, 223, 223, 0.8);
}

.box .more {
display: flex;
font-size: 26rpx;
color: #808080;
align-items: center;
}

.box .more .more-text {
padding-right: 12rpx;
}

.box .right-head {
display: flex;
justify-content: space-between;
}

.box .right-head .tit {
font-size: 32rpx;
}

.rights .rights-items {
display: flex;
justify-content: space-evenly;
padding: 30rpx 0;
}

.rights .item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.rights .item .tit {
font-size: 26rpx;
color: #333;
padding: 20rpx 0 10rpx 0;
}

.rights .item .sub-tit {
font-size: 22rpx;
color: #999;
}

.order .order-items {
display: flex;
justify-content: space-around;
padding: 30rpx 0;
}

.order .item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.order .item .tit {
font-size: 26rpx;
color: #333;
padding: 20rpx 0 10rpx 0;
}

.box .icon {
width: 56rpx;
height: 56rpx;
}

.go-through .pass {
display: flex;
flex-direction: column;
}

.go-through .total {
display: flex;
justify-content: space-between;
font-size: 26rpx;
color: #999;
}

.go-through .amount {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 28rpx;
color: #333;
}

.go-through .line {
display: flex;
}

.go-through .line1 {
height: 8rpx;
background: #00B38B;
border-radius: 4rpx;
}

.go-through .line2 {
height: 8rpx;
background: #F1F1F1;
border-radius: 0 4rpx 4rpx 0;
flex: 1;
}

.go-through .mileage {
display: flex;
justify-content: space-evenly;
align-items: center;
text-align: center;
margin: 32rpx 0;
}

.go-through .mileage .txt {
display: flex;
flex-direction: column;
}

.go-through .mileage .tit {
font-size: 26rpx;
color: #999;
}

.go-through .mileage .val {
font-size: 28rpx;
color: #333;
margin-top: 16rpx;
}

.go-through .m-top {
margin-top: 16rpx;
}

.go-through .detail {
width: 100%;
text-align: center;
color: #00B38B;
font-size: 24rpx;
border-top: 1px solid #DCDCDC;
padding-top: 24rpx;
}

.cars .car-item {
display: flex;
align-items: center;
padding: 36rpx 0;
}

.cars .car-item .btn-unbind {
border: 1px solid #00B38B;
border-radius: 30rpx;
height: 56rpx;
box-sizing: border-box;
line-height: 56rpx;
font-size: 24rpx;
padding: 0 20rpx;
background: rgba(0, 179, 139, .1);
color: #00B38B;
margin-bottom: 10rpx;
}

.cars .car-pic {
width: 120rpx;
height: 120rpx;
margin-right: 16rpx;
}

.cars .car-info {
display: flex;
flex-direction: column;
color: #999;
font-size: 22rpx;
width: 56%;
}

.cars .car-no {
font-size: 30rpx;
color: #333;
}

.cars .card-no {
margin-top: 14rpx;
}

.cars .sub-bind {
display: flex;
align-items: center;
justify-content: space-between;
border-top: 1px solid #F1F1F1;
padding-top: 20rpx;
}

.cars .sub-bind .item-tit {
display: flex;
align-items: center;
font-size: 26rpx;
color: #333;
}

.cars .sub-bind .right-arrow {
font-size: 22rpx;
color: #ccc;
display: flex;
justify-content: center;
align-items: center;
}

.cars .sub-bind .sub-tit {
padding-right: 20rpx;
}

.menu {
background: #ffffff;
padding: 0 30rpx;
margin: 0 30rpx 30rpx;
border-radius: 20rpx;
box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(223, 223, 223, 0.8);
}

.menu .arrow {
width: 14rpx;
height: 26rpx;
}

.menu .icon {
width: 48rpx;
height: 48rpx;
margin-right: 10rpx;
}

.menu .item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20rpx 0;
}

.menu .item:first-child {
margin-top: 10rpx;
}

.menu .item-tit {
display: flex;
align-items: center;
font-size: 26rpx;
color: #333;
}

.menu .right-arrow {
font-size: 22rpx;
color: #ccc;
display: flex;
justify-content: center;
align-items: center;
}

.menu .sub-tit {
padding-right: 20rpx;
}

.color {
padding: 4rpx 8rpx;
border-radius: 10rpx;
color: white;
display: inline-block;
margin-left: 20rpx;
font-size: 24rpx;
}

.loading-more {
text-align: center;
font-size: 28rpx;
margin-bottom: 20rpx;
color: #999;
}
</style>

+ 335
- 324
pages/user/user.vue Dosyayı Görüntüle

@@ -1,204 +1,182 @@
<template>
<navBar title="九州ETC" :scrollTop="scrollTop" :isBack="isBack"></navBar>
<navBar title="九州ETC" :scrollTop="scrollTop" :isBack="isBack" navbgClass="nav-bgXin" fontColor='#fff'></navBar>
<filter>
<view class="wrapper">
<image :src="`${$imgUrl}user/bg-user-2.png`" class="bg-head" mode="widthFix"></image>
<image :src="`${$imgUrl}myImage/headbg.png`" class="bg-head" mode="widthFix"></image>
<view class="content" :style="{ top: margin + 'px' }">
<view class="head" :style="{ marinTop: margin + 'px' }">
<view class="avatar">
<image :src="`${$imgUrl}user/icon-avatar.png`" :class="!state.data.opId ? 'unlogin' : ''"
@click="goLogin">
<image :src="`${$imgUrl}myImage/touxiang.png`" :class="!state.data.opId ? 'unlogin' : ''" @click="goLogin">
</image>

<view v-if="!state.data.opId" class="name" @click="$util.navTo('/login/login')">
<view class="nickname">登录/注册</view>
</view>
<view v-else class="name">
<view class="nickname">{{state.accountInfoVo.nickName}}</view>
<view class="nickname">{{state.accountInfoVo.nickName || state.accountInfoVo.userName}}</view>
<view class="user-id">
<view class="phone">{{state.accountInfoVo.mobile}}</view>
<view v-if="false"
@click="$util.navTo('/subpackage/personal-center/setting/change-phone', true)"
<view v-if="false" @click="$util.navTo('/subpackage/personal-center/setting/change-phone', true)"
class="btn-change">已关联</view>
</view>
</view>
</view>
<view v-if="false" class="setting"
@click="$util.navTo('/subpackage/personal-center/setting/setting', true)">
<!-- <view v-if="false" class="setting" @click="$util.navTo('/subpackage/personal-center/setting/setting', true)">
<text>签到</text>
</view> -->
<view class="r-setting" @click="$util.navTo('/subpackage/personal-center/setting/setting', true)">
<image :src="`${$imgUrl}myImage/shezhi.png`" class="img" mode="widthFix"></image>
</view>
</view>
<view class="panel-box">
<view class="panel">
<view class="panel-item"
@click="$util.navTo('/subpackage/personal-center/vehicle-information', true)">
<view class="panel-text"><text class="num"
v-if="state.carNumber">{{state.carNumber}}</text><text class="num"
v-else>0</text><text class="txt">辆</text></view>
<text class="type">车辆</text>
</view>
<view class="panel-item" @click="goOrder(0)">
<text class="num">{{state.userVehicleInfoSumQueryVo.orderStatus0}}</text>
<text class="type">待办</text>
</view>
<view class="panel-item" @click="goEquity()">
<!-- <view class="panel-text"><text class="num">{{state.equityNumber}}</text></view> -->
<text class="type num">权益</text>
</view>
<view class="panel-item" v-if="false">
<view class="panel-text"><text class="num">2555</text><text class="txt">分</text></view>
<text class="type">积分</text>
</view>
</view>
<view class="notice" v-if="false">
<image :src="`${$imgUrl}user/icon-tips.png`" class="icon-notice" mode="aspectFill"></image>
<view class="notice-content">您有一笔成功交易，点击查看详情</view>
</view>
</view>
<view class="rights box" v-if="false">
<view class="right-head">
<view class="tit">我的权益</view>
<view class="more">
<text class="more-text">查看全部</text>
<image :src="`${$imgUrl}user/icon-arrow.png`" class="arrow"></image>
</view>
</view>
<view class="rights-items">
<view class="item">
<image :src="`${$imgUrl}user/icon-car-2.png`" class="icon"></image>
<text class="tit">我的通行</text>
<text class="sub-tit">查询账单、轨迹</text>
</view>
<view class="item">
<image :src="`${$imgUrl}user/icon-door.png`" class="icon"></image>
<text class="tit">上门服务</text>
<text class="sub-tit">8折优惠</text>
</view>
<view class="item">
<image :src="`${$imgUrl}user/icon-obu.png`" class="icon"></image>
<text class="tit">设备险</text>
<text class="sub-tit">享50元更换</text>
</view>
<view class="item">
<image :src="`${$imgUrl}user/icon-bao.png`" class="icon"></image>
<text class="tit">微保驾乘险</text>
<text class="sub-tit">最高享20万</text>
<view class="my-equity" :style="{'--bgimg':`url(${$imgUrl}myImage/quanuyikuang.png)`}">
<view class="l-con">
<image :src="`${$imgUrl}myImage/quanyi.png`" class="equity-icon" mode="widthFix"></image>
<view class="txt">
我的权益
</view>
</view>
</view>
<view class="order box">
<view class="right-head">
<view class="tit">我的订单</view>
<view class="more" @click="goOrder(0)">
<text class="more-text">查看全部</text>
<image :src="`${$imgUrl}user/icon-arrow.png`" class="arrow"></image>
</view>
</view>
<view class="order-items">
<view class="item" @click="goOrder(1)">
<image :src="`${$imgUrl}user/icon-daifahuo.png`" class="icon"></image>
<text class="tit">待发货</text>
</view>
<view class="item" @click="goOrder(2)">
<image :src="`${$imgUrl}user/icon-daishouhuo.png`" class="icon"></image>
<text class="tit">待收货</text>
</view>
<view class="item" @click="goOrder(3)">
<image :src="`${$imgUrl}user/icon-daijihuo.png`" class="icon"></image>
<text class="tit">待激活</text>
</view>
<view class="item" @click="goOrder(4)">
<image :src="`${$imgUrl}user/icon-tuihuanhuo.png`" class="icon"></image>
<text class="tit">退换货/退款</text>
</view>
<view class="r-icon" @click="goEquity()">
<image :src="`${$imgUrl}myImage/quanyixiayi.png`" class="r-img" mode="widthFix"></image>
</view>
</view>
<view class="go-through box" v-if="source=='WECHAT'">
<view class="right-head">
<view class="tit">本月通行</view>
</view>
<view class="pass">
<view class="total m-top">
<text>通行消费</text>
<text>总消费</text>
</view>
<view class="amount m-top">
<text>¥
{{state.monthFlowingVo.flowingNum }}</text>
<text>¥
{{state.monthFlowingVo.flowingNum }}</text>
</view>
<view class="line m-top">
<view class="line1"
:style="{width: (state.monthFlowingVo.flowingNum ? state.monthFlowingVo.flowingNum : 0)*100/state.monthFlowingVo.money+'%'}">
<view class="info-content">
<view class="order box">
<view class="right-head">
<view class="tit">我的订单</view>
<view class="more" @click="goOrder(0)">
<text class="more-text">查看全部</text>
<image :src="`${$imgUrl}myImage/wdexiayi.png`" class="arrow"></image>
</view>
<view class="line2"></view>
</view>
<view class="mileage">
<view class="txt">
<text class="tit">通行里程</text>
<text class="val">{{state.monthFlowingVo.mileage}}km</text>
<view class="order-items">
<view class="item" @click="goOrder(1)">
<view style="position: relative;">
<image :src="`${$imgUrl}myImage/icon1.png`" class="icon" mode="widthFix"></image>
<view v-if='state.orderInfoSumQueryVo.orderStep8>0' class="rtop-badge bgVar"
:style="{'--bgimg':`url(${$imgUrl}myImage/r-badge.png)`}">
{{state.orderInfoSumQueryVo.orderStep8}}
</view>
</view>
<text class="tit">待发货</text>
</view>
<view class="txt">
<text class="tit">通行时长</text>
<text class="val">{{state.monthFlowingVo.duration}}</text>
<view class="item" @click="goOrder(2)">
<view style="position: relative;">
<image :src="`${$imgUrl}myImage/icon2.png`" class="icon" mode="widthFix"></image>
<view v-if='state.orderInfoSumQueryVo.orderStep9>0' class="rtop-badge bgVar"
:style="{'--bgimg':`url(${$imgUrl}myImage/r-badge.png)`}">
{{state.orderInfoSumQueryVo.orderStep9}}
</view>
</view>
<text class="tit">待收货</text>
</view>
<view class="txt">
<text class="tit ">通行次数</text>
<text class="val">{{state.monthFlowingVo.num}}次</text>
<view class="item" @click="goOrder(3)">
<view style="position: relative;">
<image :src="`${$imgUrl}myImage/icon3.png`" class="icon" mode="widthFix"></image>
<view class="rtop-badge bgVar" v-if='state.orderInfoSumQueryVo.orderStep10>0'
:style="{'--bgimg':`url(${$imgUrl}myImage/r-badge.png)`}">
{{state.orderInfoSumQueryVo.orderStep10}}
</view>
</view>
<text class="tit">待激活</text>
</view>
<view class="item" @click="goOrder(4)">
<view style="position: relative;">
<image :src="`${$imgUrl}myImage/icon4.png`" class="icon" mode="widthFix"></image>
<view v-if='state.orderInfoSumQueryVo.orderStep12>0' class="rtop-badge bgVar"
:style="{'--bgimg':`url(${$imgUrl}myImage/r-badge.png)`}">
{{state.orderInfoSumQueryVo.orderStep12}}
</view>
</view>
<text class="tit">退换货/退款</text>
</view>
</view>
<view class="detail" @click="goTrajectory()">查看通行轨迹
</view>
</view>
</view>
<view class="cars box">
<view class="right-head">
<view class="tit">我的车辆</view>
<view class="more"
@click="$util.navTo('/subpackage/personal-center/vehicle-information', true)">
<text class="more-text">查看全部</text>
<image :src="`${$imgUrl}user/icon-arrow.png`" class="arrow"></image>
</view>
</view>
<view class="sub-bind">
<view class="item-tit">
<image :src="`${$imgUrl}user/icon-car-3.png`" class="icon icon-2"></image>
<text>我要关联车辆</text>
<view class="go-through box" v-if="source=='WECHAT'">
<view class="right-head">
<view class="tit">本月通行</view>
<view class="more" @click="goTrajectory()">
<text class="more-text">查看通行轨迹</text>
<image :src="`${$imgUrl}myImage/wdexiayi.png`" class="arrow"></image>
</view>
</view>
<view class="right-arrow"
@click="$util.navTo('/subpackage/personal-center/setting/car-information/car-create', true)">
<view class="sub-tit">增加未关联车辆</view>
<image :src="`${$imgUrl}user/icon-arrow.png`" class="arrow"></image>
<view class="pass">
<view class="total m-top">
<text>通行消费</text>
<text>总金额</text>
</view>
<view class="amount m-top">
<text>¥
{{state.monthFlowingVo.flowingNum }}</text>
<text>¥
{{state.monthFlowingVo.money }}</text>
</view>
<view class="line m-top">
<view class="line1"
:style="{width: (state.monthFlowingVo.flowingNum ? state.monthFlowingVo.flowingNum : 0)*100/state.monthFlowingVo.money+'%'}">
</view>
<view class="line2"></view>
</view>
<view class="mileage">
<view class="box-items" :style="{'--bgimg':`url(${$imgUrl}myImage/tongxing1.png)`}">
<view class="t-name">
<image :src="`${$imgUrl}myImage/licheng-icon.png`" class="tongxing-icon"></image>
<text class="tit">通行里程</text>
</view>
<view class="b-info">
<text class="val">{{state.monthFlowingVo.mileage}}</text>
<text class="unit">km</text>
</view>
</view>
<view class="box-items" :style="{'--bgimg':`url(${$imgUrl}myImage/tongxing2.png)`}">
<view class="t-name">
<image :src="`${$imgUrl}myImage/shichang-icon.png`" class="tongxing-icon"></image>
<text class="tit">通行时长</text>
</view>
<view class="b-info">
<text class="val">{{state.monthFlowingVo.duration}}</text>
<!-- <text class="unit">km</text> -->
</view>
</view>
<view class="box-items" :style="{'--bgimg':`url(${$imgUrl}myImage/tongxing3.png)`}">
<view class="t-name">
<image :src="`${$imgUrl}myImage/cishu-icon.png`" class="tongxing-icon"></image>
<text class="tit">通行次数</text>
</view>
<view class="b-info">
<text class="val">{{state.monthFlowingVo.num}}</text>
<text class="unit">次</text>
</view>
</view>
</view>
</view>
</view>
<view class="car-item" v-for="(item,index) in state.list">
<image @click="carDetails(item)" :src="`${$imgUrl}che.png`" class="car-pic" mode="aspectFill">
</image>
<view class="car-info" @click="carDetails(item)">
<view class="car-no"><text class="no">{{item.vehiclePlate}}</text><text class="color"
:style="{ background: item.showColor}">{{item.color}}</text></view>
<view class="card-no">卡号：{{item.cardId}}</view>
<view class="card-no">签号：{{item.obuId}}</view>
<view class="cars box">
<view class="right-head">
<view class="tit">我的车辆</view>
<view class="more" @click="$util.navTo('/subpackage/personal-center/vehicle-information', true)">
<text class="more-text">查看全部</text>
<image :src="`${$imgUrl}myImage/wdexiayi.png`" class="arrow"></image>
</view>
</view>
<view class="btn-unbind" @click="del(item.vehicleId)">解除绑定</view>
</view>
<view>
<view class="loading-more" v-if="state.carNumber>5"
@click="$util.navTo('/subpackage/personal-center/vehicle-information', true)">加载更多~</view>
</view>
</view>
<view class="menu">
<view class="item" @click="$util.navTo('/subpackage/personal-center/setting/setting', true)">
<view class="item-tit">
<image :src="`${$imgUrl}user/icon-setting.png`" class="icon icon-2"></image>
<text>设置与资料管理</text>
<view class="car-item" v-for="(item,index) in state.list">
<image @click="carDetails(item)" :src="`${$imgUrl}myImage/car.png`" class="car-pic" mode="widthFix">
</image>
<view class="car-info" @click="carDetails(item)">
<view class="car-no">
<text class="no">{{item.vehiclePlate}}</text>
<text class="color" :style="{ background: item.showColor}">{{item.color}}</text>
</view>
<view class="card-no">卡号：{{item.cardId}}</view>
<view class="card-no">签号：{{item.obuId}}</view>
</view>
<view class="btn-unbind" @click="del(item.vehicleId)">解除绑定</view>
</view>
<view class="right-arrow">
<view class="sub-tit">隐私、密码管理</view>
<image :src="`${$imgUrl}user/icon-arrow.png`" class="arrow"></image>
<view @click="$util.navTo('/subpackage/personal-center/setting/car-information/car-create', true)"
class='add-related' :style="{'--bgimg':`url(${$imgUrl}myImage/guanlianbg.png)`}">
<image :src="`${$imgUrl}myImage/guanlian.png`" class="add-img" mode="widthFix">
</image>
<text>增加未关联车辆</text>
</view>

</view>
</view>
</view>
@@ -256,6 +234,12 @@
},//车数量 ,代办数量
isTrajectory: false, //是否有轨迹
equityNumber: 0,
orderInfoSumQueryVo: {
orderStep8: "0",//待发货
orderStep9: "0",//待收货
orderStep10: "0",//待激活
orderStep12: "0",//换货/退货
}
});
onMounted(() => {
const res = uni.getMenuButtonBoundingClientRect();
@@ -306,9 +290,15 @@
parkingLotMoney: 0,
parkingLotNum: 0,
money: 0,
},
state.list = [],
state.carNumber = 0
}
state.orderInfoSumQueryVo = {
orderStep8: "0",//待发货
orderStep9: "0",//待收货
orderStep10: "0",//待激活
orderStep12: "0",//换货/退货
}
state.list = []
state.carNumber = 0
}
});
// 查询车辆信息
@@ -359,6 +349,7 @@
state.monthFlowingVo = data.monthFlowingVo;
state.isTrajectory = true;
}
state.orderInfoSumQueryVo = JSON.parse(JSON.stringify(data.orderInfoSumQueryVo))
state.userVehicleInfoSumQueryVo.vehicleSum = JSON.parse(JSON.stringify(data.userVehicleInfoSumQueryVo)).vehicleSum;
state.userVehicleInfoSumQueryVo.orderStatus0 = JSON.parse(JSON.stringify(data.userVehicleInfoSumQueryVo)).orderStatus0;
console.log("获取用户信息", data);
@@ -447,15 +438,21 @@
background: #eef7f7;
}
</style>
<style scoped>
<style scoped lang='scss'>
.unlogin {
filter: grayscale(100%);
opacity: 0.7;
}

.bgVar {
background-image: var(--bgimg);
background-repeat: no-repeat;
background-size: 100% 100%;
}

.wrapper {
position: relative;
background: #fff;
background-color: #f6f9fc;
}

.bar {
@@ -469,16 +466,17 @@
.bg-head {
width: 100%;
position: absolute;
z-index: -99;
z-index: 1;
top: 0;
left: 0;
}

.content {
position: absolute;
position: relative;
display: flex;
flex-direction: column;
width: 100%;
z-index: 2;
}

.head {
@@ -493,13 +491,13 @@
.head .avatar {
display: flex;
align-items: center;
justify-content: space-between;
}

.head .avatar image {
width: 120rpx;
height: 120rpx;
border-radius: 80rpx;
border: 12rpx solid rgba(255, 255, 255, 0.5);
width: 141rpx;
height: 141rpx;
/* border-radius: 80rpx; */
margin: 0 20rpx 0 30rpx;
}

@@ -522,15 +520,31 @@
margin-right: 6rpx;
}

.head .r-setting {
width: 80rpx;
height: 80rpx;
background: #345061;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
margin-right: 50rpx;

.img {
width: 40rpx;
height: 39rpx;
}
}

.head .nickname {
font-size: 36rpx;
color: #000000;
color: #fff;
}

.head .user-id {
font-size: 26rpx;
color: #000000;
padding-top: 30rpx;
color: #fff;
padding-top: 20rpx;
display: flex;
align-items: center;
}
@@ -547,70 +561,56 @@
background: rgba(0, 179, 139, .1);
}

.panel-box {
display: flex;
flex-direction: column;
background: #fff;
margin: 0 30rpx 30rpx;
box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(223, 223, 223, 0.8);
border-radius: 20rpx;
padding: 30rpx 0;
}

.panel {
display: flex;
justify-content: space-evenly;
padding: 30rpx 0;
}

.panel-item {
.my-equity {
position: relative;
z-index: 20;
margin: 0 50rpx;
background-image: var(--bgimg);
background-repeat: no-repeat;
background-size: 100% 100%;
width: 650rpx;
height: 94rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 32rpx;
}
justify-content: space-between;

.panel-item .num {
font-weight: bold;
color: #454545;
}
.l-con {
margin-left: 30rpx;
display: flex;
align-items: center;

.panel-item .txt {
font-size: 26rpx;
}
.equity-icon {
width: 54rpx;
height: 54rpx;
}

.panel-item .type {
color: #999;
font-size: 26rpx;
padding: 14rpx 0;
}
.txt {
font-family: NotoSansHans, NotoSansHans;
font-size: 28rpx;
color: #01253C;
margin-left: 19rpx;
}
}

.panel-box .icon-notice {
width: 48rpx;
height: 48rpx;
}
.r-icon {
margin-right: 30rpx;
width: 32rpx;
height: 32rpx;

.panel-box .notice {
display: flex;
font-size: 32rpx;
margin: 0 30rpx;
align-items: center;
background: #f3f3f3;
border-radius: 10rpx;
padding: 0 14rpx;
.r-img {
width: 32rpx;
height: 32rpx;
}
}
}

.panel-box .notice .notice-content {
height: 68rpx;
line-height: 68rpx;
padding: 0 12rpx;
font-size: 28rpx;
.info-content {
transform: translateY(-10rpx);
}

.box .arrow {
width: 14rpx;
height: 26rpx;
width: 10rpx;
height: 18rpx;
}

.box {
@@ -618,14 +618,15 @@
margin: 0 30rpx 30rpx;
padding: 30rpx 20rpx;
border-radius: 20rpx;
box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(223, 223, 223, 0.8);
box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(223, 223, 223, 0.9);
}

.box .more {
display: flex;
font-size: 26rpx;
color: #808080;
align-items: center;
font-family: NotoSansHans, NotoSansHans;
font-size: 24rpx;
color: #004576;
}

.box .more .more-text {
@@ -639,6 +640,7 @@

.box .right-head .tit {
font-size: 32rpx;
font-family: MicrosoftYaHei;
}

.rights .rights-items {
@@ -668,7 +670,22 @@
.order .order-items {
display: flex;
justify-content: space-around;
padding: 30rpx 0;
padding: 30rpx 0 10rpx;

.rtop-badge {
position: absolute;
right: 0;
width: 34rpx;
height: 34rpx;
top: 0;
transform: translate(50%, -50%);
line-height: 34rpx;
text-align: center;
font-family: SourceHanSansSC, SourceHanSansSC;
font-weight: 400;
font-size: 20rpx;
color: #FFFFFF;
}
}

.order .item {
@@ -685,8 +702,8 @@
}

.box .icon {
width: 56rpx;
height: 56rpx;
width: 50rpx;
height: 50rpx;
}

.go-through .pass {
@@ -698,15 +715,17 @@
display: flex;
justify-content: space-between;
font-size: 26rpx;
color: #999;
color: #666;
}

.go-through .amount {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 28rpx;
color: #333;
font-family: NotoSansHans, NotoSansHans;
font-size: 32rpx;
color: #333333;
font-weight: 400;
}

.go-through .line {
@@ -714,24 +733,62 @@
}

.go-through .line1 {
height: 8rpx;
background: #00B38B;
border-radius: 4rpx;
height: 14rpx;
background: #005B9C;
border-radius: 7rpx;
}

.go-through .line2 {
height: 8rpx;
background: #F1F1F1;
border-radius: 0 4rpx 4rpx 0;
height: 14rpx;
background: #E5ECEF;
border-radius: 7rpx;
flex: 1;
}

.go-through .mileage {
display: flex;
justify-content: space-evenly;
justify-content: space-around;
align-items: center;
text-align: center;
margin: 32rpx 0;

.box-items {
background-image: var(--bgimg);
background-repeat: no-repeat;
background-size: 100% 100%;
padding: 20rpx 30rpx;

.t-name {
display: flex;

.tongxing-icon {
width: 29rpx;
height: 29rpx;
}

.tit {
font-size: 26rpx;
color: #666666;
line-height: 29rpx;
margin-left: 5rpx;
}
}

.b-info {
padding-top: 20rpx;

.val {
font-size: 32rpx;
color: #333333;
}

.unit {
font-size: 24rpx;
color: #666666;
margin-left: 5rpx;
}
}
}
}

.go-through .mileage .txt {
@@ -766,26 +823,27 @@
.cars .car-item {
display: flex;
align-items: center;
padding: 36rpx 0;
padding-top: 36rpx;
}

.cars .car-item .btn-unbind {
border: 1px solid #00B38B;
font-weight: 400;
border-radius: 30rpx;
height: 56rpx;
box-sizing: border-box;
line-height: 56rpx;
font-family: NotoSansHans, NotoSansHans;
line-height: 30px;
text-align: center;
font-size: 24rpx;
padding: 0 20rpx;
background: rgba(0, 179, 139, .1);
color: #00B38B;
width: 130rpx;
height: 60rpx;
background: #004372;
color: #fff;
margin-bottom: 10rpx;
}

.cars .car-pic {
width: 120rpx;
height: 120rpx;
margin-right: 16rpx;
height: 110rpx;
margin-right: 20rpx;
}

.cars .car-info {
@@ -802,84 +860,32 @@
}

.cars .card-no {
margin-top: 14rpx;
}

.cars .sub-bind {
display: flex;
align-items: center;
justify-content: space-between;
border-top: 1px solid #F1F1F1;
padding-top: 20rpx;
}

.cars .sub-bind .item-tit {
display: flex;
align-items: center;
font-size: 26rpx;
color: #333;
}

.cars .sub-bind .right-arrow {
font-size: 22rpx;
color: #ccc;
display: flex;
justify-content: center;
align-items: center;
}

.cars .sub-bind .sub-tit {
padding-right: 20rpx;
}

.menu {
background: #ffffff;
padding: 0 30rpx;
margin: 0 30rpx 30rpx;
border-radius: 20rpx;
box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(223, 223, 223, 0.8);
}

.menu .arrow {
width: 14rpx;
height: 26rpx;
}

.menu .icon {
width: 48rpx;
height: 48rpx;
margin-right: 10rpx;
}

.menu .item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20rpx 0;
}

.menu .item:first-child {
margin-top: 10rpx;
font-size: 22rpx;
color: #999999;
}

.menu .item-tit {
.cars .add-related {
background-image: var(--bgimg);
background-repeat: no-repeat;
background-size: 100% 100%;
height: 80rpx;
display: flex;
align-items: center;
justify-content: center;
font-family: NotoSansHans, NotoSansHans;
font-weight: 400;
font-size: 26rpx;
color: #333;
}
color: #CCB375;
margin-top: 30rpx;

.menu .right-arrow {
font-size: 22rpx;
color: #ccc;
display: flex;
justify-content: center;
align-items: center;
.add-img {
margin-right: 10rpx;
width: 36rpx;
height: 36rpx;
}
}

.menu .sub-tit {
padding-right: 20rpx;
}

.color {
padding: 4rpx 8rpx;
@@ -896,4 +902,9 @@
margin-bottom: 20rpx;
color: #999;
}
</style>
<style>
page {
background-color: #f6f9fc;
}
</style>

BIN
static/image/icon-back-white.png Dosyayı Görüntüle


Write Preview
Loading…
İptal
Kaydet