} | } | ||||
.scroll-view { | .scroll-view { | ||||
/* flex:1; */ | |||||
max-height: 70vh; | max-height: 70vh; | ||||
text-align: left; | text-align: left; | ||||
} | } |
<!-- 办理流程 --> | <!-- 办理流程 --> | ||||
<template> | <template> | ||||
<view :class="['as-layout-horizontal', index as any === 0?'active':'', 'logistics-gray']" style="overflow: visible" v-for="(item,index) in options" :key="index"> | |||||
<view :class="['as-layout-horizontal', index as any === 0?'active':'', 'logistics-gray']" style="overflow: visible" | |||||
v-for="(item,index) in options" :key="index"> | |||||
<view class="logistics-layout"> | <view class="logistics-layout"> | ||||
<view class="logistics-layout-top"> | <view class="logistics-layout-top"> | ||||
<view class="title"> | <view class="title"> | ||||
{{(item as ItemType).title}} | {{(item as ItemType).title}} | ||||
</view> | </view> | ||||
<!-- <view class="more" v-if="(item as ItemType).right" @click="emit('more')"> | |||||
<span class="label">详细信息</span> | |||||
<image class="arror" :src="`${$imgUrl}common/arror-right-green.png`" mode="aspectFill"></image> | |||||
</view> --> | |||||
</view> | </view> | ||||
<view class="desc"> | <view class="desc"> | ||||
{{(item as ItemType).desc}} | {{(item as ItemType).desc}} | ||||
<script setup lang="ts"> | <script setup lang="ts"> | ||||
import { PropType } from "vue"; | import { PropType } from "vue"; | ||||
interface ItemType{ | |||||
title:string, | |||||
desc:string, | |||||
right?:boolean, | |||||
interface ItemType { | |||||
title : string, | |||||
desc : string, | |||||
right ?: boolean, | |||||
} | } | ||||
const emit = defineEmits(['more']) | const emit = defineEmits(['more']) | ||||
const props = defineProps({ | const props = defineProps({ | ||||
//数据列表 | //数据列表 | ||||
options:{ | |||||
type:Array as PropType<ItemType[]>, | |||||
options: { | |||||
type: Array as PropType<ItemType[]>, | |||||
default: () => ([]) | default: () => ([]) | ||||
}, | }, | ||||
}) | }) | ||||
</script> | </script> | ||||
<style lang="scss" scoped> | <style lang="scss" scoped> | ||||
.as-layout-horizontal{ | |||||
.as-layout-horizontal { | |||||
border-left: 2px solid #00B38B; | border-left: 2px solid #00B38B; | ||||
padding-bottom: 45rpx; | padding-bottom: 45rpx; | ||||
margin-top: 10rpx; | margin-top: 10rpx; | ||||
position: relative; | position: relative; | ||||
&::after{ | |||||
&::after { | |||||
content: ''; | content: ''; | ||||
left: -8rpx; | left: -8rpx; | ||||
top: -10rpx; | top: -10rpx; | ||||
border: 2rpx solid #00B38B; | border: 2rpx solid #00B38B; | ||||
box-sizing: border-box; | box-sizing: border-box; | ||||
} | } | ||||
&:last-child{ | |||||
&:last-child { | |||||
border-left: none; | border-left: none; | ||||
padding-bottom: 0px; | padding-bottom: 0px; | ||||
&::after{ | |||||
&::after { | |||||
left: -4.5rpx; | left: -4.5rpx; | ||||
} | } | ||||
} | } | ||||
.logistics-layout{ | |||||
.logistics-layout { | |||||
padding-left: 35rpx; | padding-left: 35rpx; | ||||
&-top{ | |||||
&-top { | |||||
width: 100%; | width: 100%; | ||||
display: flex; | display: flex; | ||||
margin-top: -20rpx; | margin-top: -20rpx; | ||||
align-items: center; | align-items: center; | ||||
.more{ | |||||
.more { | |||||
display: flex; | display: flex; | ||||
align-items: center; | align-items: center; | ||||
.label{ | |||||
.label { | |||||
font-size: 24rpx; | font-size: 24rpx; | ||||
color: #00B38B; | color: #00B38B; | ||||
} | } | ||||
.arror{ | |||||
.arror { | |||||
width: 30rpx; | width: 30rpx; | ||||
height: 30rpx; | height: 30rpx; | ||||
} | } | ||||
} | } | ||||
} | } | ||||
.title{ | |||||
.title { | |||||
font-size: 28rpx; | font-size: 28rpx; | ||||
color: #0D0F26; | color: #0D0F26; | ||||
flex: 1; | flex: 1; | ||||
font-weight: bold; | font-weight: bold; | ||||
} | } | ||||
.desc{ | |||||
.desc { | |||||
font-size: 24rpx; | font-size: 24rpx; | ||||
margin-top: 20rpx; | margin-top: 20rpx; | ||||
margin-bottom: 20rpx; | margin-bottom: 20rpx; | ||||
} | } | ||||
} | } | ||||
} | } | ||||
.logistics-gray{ | |||||
.logistics-gray { | |||||
border-color: #DCDCDC; | border-color: #DCDCDC; | ||||
&::after{ | |||||
&::after { | |||||
background-color: #DCDCDC; | background-color: #DCDCDC; | ||||
border: none; | border: none; | ||||
} | } | ||||
} | } | ||||
.active{ | |||||
.active { | |||||
position: relative; | position: relative; | ||||
&::after{ | |||||
&::after { | |||||
content: ''; | content: ''; | ||||
position: absolute; | position: absolute; | ||||
width: 12rpx; | width: 12rpx; | ||||
height: 12rpx; | height: 12rpx; | ||||
left:-8rpx; | |||||
left: -8rpx; | |||||
border-radius: 50%; | border-radius: 50%; | ||||
background-color: #00B38B; | background-color: #00B38B; | ||||
} | } | ||||
} | } | ||||
</style> | </style> |
<image class="icon" :src="fileURL + 'image/index/icon-notice.png'" lazy-load="false" | <image class="icon" :src="fileURL + 'image/index/icon-notice.png'" lazy-load="false" | ||||
mode="aspectFill"> | mode="aspectFill"> | ||||
</image> | </image> | ||||
<!-- <text class="notice-text">{{state.notice}}</text> --> | |||||
<uni-notice-bar style="width: 100%;" scrollable single :text="state.notice"> | <uni-notice-bar style="width: 100%;" scrollable single :text="state.notice"> | ||||
</uni-notice-bar> | </uni-notice-bar> | ||||
</view> | </view> |
</view> | </view> | ||||
<view class="search-btn" @click="doSearch">搜索</view> | <view class="search-btn" @click="doSearch">搜索</view> | ||||
</view> | </view> | ||||
<!-- 数据为空 --> | |||||
<!-- <empty-view :mode="config.emptyHint.mode" :content="config.emptyHint.hint" v-if="ordersList.length === 0" /> --> | |||||
<!-- <template v-else> | |||||
<block v-for="(item,index) in ordersList" :key="index"> | |||||
<order-list-item-new :item="item" /> | |||||
</block> | |||||
<uni-load-more :status="params.status" iconType="snow" :icon-size="16" :content-text="config.contentTxt" | |||||
v-if="ordersList.length > 0" /> | |||||
</template> --> | |||||
</template> --> | |||||
</template> | </template> | ||||
<script setup lang="ts"> | <script setup lang="ts"> |
width: 100%; | width: 100%; | ||||
background-color: white; | background-color: white; | ||||
padding-bottom: 8rpx; | padding-bottom: 8rpx; | ||||
// border-bottom: 1px solid #efeff4; | |||||
box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(223, 223, 223, 0.8); | box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(223, 223, 223, 0.8); | ||||
// z-index: 9990; | |||||
// position: fixed; | |||||
// left: 0; | |||||
.bar-view { | .bar-view { | ||||
width: 100%; | width: 100%; | ||||
text-align: center; | text-align: center; | ||||
background-color: white; | background-color: white; | ||||
white-space: nowrap; | white-space: nowrap; | ||||
/* +++ 不换行*/ | |||||
position: sticky; | position: sticky; | ||||
top: 0; | top: 0; | ||||
line-height: 80rpx; | line-height: 80rpx; | ||||
position: relative; | position: relative; | ||||
display: inline-block; | display: inline-block; | ||||
/*+++ 在一行显示*/ | |||||
min-width: 150rpx; | min-width: 150rpx; | ||||
&:after { | &:after { | ||||
} | } | ||||
.active { | .active { | ||||
// color: #00B38B; | |||||
font-weight: bold; | font-weight: bold; | ||||
font-size: 30rpx; | font-size: 30rpx; | ||||
</view> | </view> | ||||
<view v-if="false" class="setting" | <view v-if="false" class="setting" | ||||
@click="$util.navTo('/subpackage/personal-center/setting/setting', true)"> | @click="$util.navTo('/subpackage/personal-center/setting/setting', true)"> | ||||
<!-- <image :src="`${$imgUrl}user/icon-setting.png`"></image> --> | |||||
<text>签到</text> | <text>签到</text> | ||||
</view> | </view> | ||||
</view> | </view> | ||||
.box .right-head .tit { | .box .right-head .tit { | ||||
font-size: 32rpx; | font-size: 32rpx; | ||||
/* font-weight: bold; */ | |||||
} | } | ||||
.rights .rights-items { | .rights .rights-items { |
.money_wrap>view:first-child { | .money_wrap>view:first-child { | ||||
text-align: center; | text-align: center; | ||||
font-size: 30rpx; | font-size: 30rpx; | ||||
/* margin-top: 10rpx; */ | |||||
} | } | ||||
.money_wrap>view:last-child { | .money_wrap>view:last-child { |
flex: 1; | flex: 1; | ||||
padding-right: 48rpx; | padding-right: 48rpx; | ||||
font-size: 26rpx; | font-size: 26rpx; | ||||
// background: transparent; | |||||
} | } | ||||
.eye { | .eye { |
orderInfo.cardStatus = option.cardStatus; | orderInfo.cardStatus = option.cardStatus; | ||||
orderInfo.obuStatus = option.obuStatus; | orderInfo.obuStatus = option.obuStatus; | ||||
transfer = option.transfer; | transfer = option.transfer; | ||||
// setItem("orderId",option.orderId) | |||||
setItem("orderInfo", orderInfo) | setItem("orderInfo", orderInfo) | ||||
console.log(orderInfo); | console.log(orderInfo); | ||||
}) | }) |
<template> | <template> | ||||
<!-- <navBar title="ETC开户新办申请-个人" :scrollTop="scrollTop"></navBar> | |||||
<navBgCar></navBgCar> --> | |||||
<view class="content-wrap"> | <view class="content-wrap"> | ||||
<view @click="tabChange(true)"> | <view @click="tabChange(true)"> | ||||
<view :class="state.isMyPeopple ? 'big' : 'nomal'"> 本人车辆 </view> | <view :class="state.isMyPeopple ? 'big' : 'nomal'"> 本人车辆 </view> | ||||
<u-input v-model="state.form.userName" placeholder='请输入姓名' :disabled="state.isEnableOCRData" | <u-input v-model="state.form.userName" placeholder='请输入姓名' :disabled="state.isEnableOCRData" | ||||
maxlength="20" @input="replaceInput" /> | maxlength="20" @input="replaceInput" /> | ||||
</u-form-item> | </u-form-item> | ||||
<!-- <u-form-item label="性别"> | |||||
<u-input placeholder='请选择性别' v-model="state.form.gender" @click="userGenderAction()" | |||||
type="select" /> | |||||
</u-form-item> --> | |||||
<u-form-item label="身份证号"> | <u-form-item label="身份证号"> | ||||
<u-input placeholder='请输入身份证' type="idcard" v-model="state.form.userIdNum" | <u-input placeholder='请输入身份证' type="idcard" v-model="state.form.userIdNum" | ||||
:disabled="state.isEnableOCRData" maxlength="18" /> | :disabled="state.isEnableOCRData" maxlength="18" /> | ||||
<u-input placeholder='请输入地址' height='38' type='textarea' :autoHeight='true' | <u-input placeholder='请输入地址' height='38' type='textarea' :autoHeight='true' | ||||
v-model="state.form.address" :disabled="state.isEnableOCRData" maxlength="100" /> | v-model="state.form.address" :disabled="state.isEnableOCRData" maxlength="100" /> | ||||
</u-form-item> | </u-form-item> | ||||
<!-- <u-form-item label="证件有效期"> | |||||
<u-input v-model="state.form.begindate" type="select" /> | |||||
</u-form-item> --> | |||||
<u-form-item label="联系方式"> | <u-form-item label="联系方式"> | ||||
<u-input placeholder='请输入联系方式' type="number" v-model="state.form.tel" maxlength="11" /> | <u-input placeholder='请输入联系方式' type="number" v-model="state.form.tel" maxlength="11" /> | ||||
</u-form-item> | </u-form-item> | ||||
<u-input inputAlign="right" placeholder='请输入身份证号' v-model="state.form.userIdNum" | <u-input inputAlign="right" placeholder='请输入身份证号' v-model="state.form.userIdNum" | ||||
:disabled="state.isEnableOCRData" type="idcard" /> | :disabled="state.isEnableOCRData" type="idcard" /> | ||||
</u-form-item> | </u-form-item> | ||||
<!-- <u-form-item label=""> | |||||
<u-input v-model="state.form.userIdNum" /> | |||||
</u-form-item> --> | |||||
<!-- <u-form-item label="证件有效期"> | |||||
<u-input v-model="state.form.begindate" type="select" /> | |||||
</u-form-item> --> | |||||
<u-form-item label="联系方式"> | <u-form-item label="联系方式"> | ||||
<u-input inputAlign="right" placeholder='请输入联系方式' v-model="state.form.tel" maxlength="11" /> | <u-input inputAlign="right" placeholder='请输入联系方式' v-model="state.form.tel" maxlength="11" /> | ||||
</u-form-item> | </u-form-item> | ||||
<u-input inputAlign="right" placeholder='请输入经办人姓名' v-model="state.form.agentName" | <u-input inputAlign="right" placeholder='请输入经办人姓名' v-model="state.form.agentName" | ||||
:disabled="state.isEnableOCRData" maxlength="20" /> | :disabled="state.isEnableOCRData" maxlength="20" /> | ||||
</u-form-item> | </u-form-item> | ||||
<!-- <u-form-item label="性别"> | |||||
<u-input v-model="state.form.agentGender" type="select" /> | |||||
</u-form-item> --> | |||||
<u-form-item label="身份证号"> | <u-form-item label="身份证号"> | ||||
<u-input inputAlign="right" placeholder='请输入身份证号' v-model="state.form.agentIdNum" | <u-input inputAlign="right" placeholder='请输入身份证号' v-model="state.form.agentIdNum" | ||||
:disabled="state.isEnableOCRData" maxlength="18" type="idcard" /> | :disabled="state.isEnableOCRData" maxlength="18" type="idcard" /> | ||||
</u-form-item> | </u-form-item> | ||||
<!-- <u-form-item label="证件有效期"> | |||||
<u-input v-model="state.form.begindate" type="select" /> | |||||
</u-form-item> --> | |||||
<u-form-item label="联系方式"> | <u-form-item label="联系方式"> | ||||
<u-input inputAlign="right" placeholder='请输入联系方式' v-model="state.form.agentTel" type="number" | <u-input inputAlign="right" placeholder='请输入联系方式' v-model="state.form.agentTel" type="number" | ||||
maxlength="11" /> | maxlength="11" /> |
width: 100%; | width: 100%; | ||||
margin: 120rpx 40rpx 50rpx; | margin: 120rpx 40rpx 50rpx; | ||||
} | } | ||||
} | } | ||||
</style> | </style> |
</template> | </template> | ||||
<script setup> | <script setup> | ||||
import { navTo } from '@/utils/utils'; | |||||
const gotoPage = ()=>{ | |||||
import { | |||||
navTo | |||||
} from '@/utils/utils'; | |||||
const gotoPage = () => { | |||||
navTo("/subpackage/personal-center/old-user") | navTo("/subpackage/personal-center/old-user") | ||||
} | } | ||||
</script> | </script> | ||||
<style> | <style> | ||||
page { | page { | ||||
background: #eef7f7; | |||||
background: #eef7f7; | |||||
} | } | ||||
.m_contents .title { | .m_contents .title { | ||||
padding: 30rpx 0; | |||||
background: #ffffff; | |||||
text-align: center; | |||||
padding: 30rpx 0; | |||||
background: #ffffff; | |||||
text-align: center; | |||||
} | } | ||||
.title .fee { | .title .fee { | ||||
margin-top: 15rpx; | |||||
font-size: 48rpx; | |||||
color: #f95355; | |||||
margin-top: 15rpx; | |||||
font-size: 48rpx; | |||||
color: #f95355; | |||||
} | } | ||||
.m_contents .field { | .m_contents .field { | ||||
position: relative; | |||||
display: flex; | |||||
background: #FFFFFF; | |||||
padding:30rpx; | |||||
align-items: center; | |||||
border-radius: 16rpx; | |||||
/* border-bottom: 1px solid #dddddd; */ | |||||
color: #040404; | |||||
position: relative; | |||||
display: flex; | |||||
background: #FFFFFF; | |||||
padding: 30rpx; | |||||
align-items: center; | |||||
border-radius: 16rpx; | |||||
color: #040404; | |||||
} | } | ||||
.field .left { | .field .left { | ||||
width: 60rpx; | |||||
height: 60rpx; | |||||
margin-right: 20rpx; | |||||
width: 60rpx; | |||||
height: 60rpx; | |||||
margin-right: 20rpx; | |||||
} | } | ||||
.field image { | .field image { | ||||
width: 100%; | |||||
height: 100%; | |||||
width: 100%; | |||||
height: 100%; | |||||
} | } | ||||
.m_contents .field::after { | .m_contents .field::after { | ||||
content: " "; | |||||
display: inline-block; | |||||
width: 16rpx; | |||||
height: 16rpx; | |||||
position: absolute; | |||||
top: 50%; | |||||
right: 34rpx; | |||||
border-width: 4rpx 4rpx 0 0; | |||||
border-color: #bbbbbb; | |||||
border-style: solid; | |||||
transform: translateY(-50%) matrix(0.71, 0.71, -.71, 0.71, 0, 0); | |||||
content: " "; | |||||
display: inline-block; | |||||
width: 16rpx; | |||||
height: 16rpx; | |||||
position: absolute; | |||||
top: 50%; | |||||
right: 34rpx; | |||||
border-width: 4rpx 4rpx 0 0; | |||||
border-color: #bbbbbb; | |||||
border-style: solid; | |||||
transform: translateY(-50%) matrix(0.71, 0.71, -.71, 0.71, 0, 0); | |||||
} | } | ||||
</style> | |||||
</style> |
</view> | </view> | ||||
</view> | </view> | ||||
<view class="btns"> | <view class="btns"> | ||||
<!-- <view class="btn btn-primary as-gravity-center" @click="btnClick(item)">{{item.state === 1 ? '去激活' : '去开卡'}}</view> --> | |||||
<view class="btn btn-primary as-gravity-center" @click="gotoActiveOrder(item)">去激活</view> | <view class="btn btn-primary as-gravity-center" @click="gotoActiveOrder(item)">去激活</view> | ||||
</view> | </view> | ||||
</view> | </view> | ||||
type: 2, | type: 2, | ||||
data: { | data: { | ||||
"opId": getItem(StorageKeys.OpenId), | "opId": getItem(StorageKeys.OpenId), | ||||
// "source": source, | |||||
// "vehiclePlate": "", | |||||
// "tabIndex": '0', | |||||
// "pageNo": params.pageNum, | |||||
// "pageSize": params.pageSize, | |||||
// "isValueCard": "", | |||||
// "title": "0", | |||||
// "orderStep": "10" | |||||
}, | }, | ||||
method: 'POST', | method: 'POST', | ||||
showLoading: params.pageNum === 1 ? true : false, | showLoading: params.pageNum === 1 ? true : false, |