qiubinghui
/
zhywpt-sp
ウォッチ 1
スター 0
フォーク 0
コード 課題 0 プルリクエスト 0 リリース 0 Wiki アクティビティ
ソースを参照

修改样式逻辑

修改样式逻辑
yangteng 1ヶ月前
親
43d77be64a
コミット
15ccf58954
7個のファイルの変更、952行の追加、261行の削除
分割表示 差分情報を表示
  1. 10
    1
      pages.json
  2. 149
    105
      subpackage/after-sale/activation-once-again/select-car.vue
  3. 72
    84
      subpackage/after-sale/blacklist-query/addCar.vue
  4. 236
    69
      subpackage/after-sale/blacklist-query/list.vue
  5. 362
    0
      subpackage/after-sale/components/car-number-input.vue
  6. 117
    0
      subpackage/after-sale/components/layout-numberplate-color.vue
  7. 6
    2
      utils/network/api.js

+ 10
- 1
pages.json ファイルの表示

@@ -122,7 +122,16 @@
"path": "blacklist-query/list",
"style": {
"navigationBarTitleText": "黑名单查询",
"enablePullDownRefresh": false
"enablePullDownRefresh": false,
"navigationStyle": "custom",
"navigationBarTextStyle":"white",
"mp-alipay": { //在支付宝小程序中如果不生效 就加上这两行代码 就会生效啦
"transparentTitle": "always",
"titlePenetrate": "YES",
"defaultTitle": "" ,// 将导航栏默认的 title 置空
"navigationBarFrontColor":"white",
"navigationBarBackgroundColor":"white"
}
}
},
{

+ 149
- 105
subpackage/after-sale/activation-once-again/select-car.vue ファイルの表示

@@ -1,42 +1,65 @@
<template>
<!-- 搜索框 -->
<view class="as-layout-horizontal as-gravity-center-start search-layout">
<view class="search-box">
<image :src="`${$imgUrl}service/icon-search.png`" class="icon" mode="aspectFill"></image>
<input class="search" placeholder="请输入车牌号" @blur="onKeyInput" v-model="state.car" />
</view>
</view>
<view class="title">车辆列表</view>
<view class="selectCar-box">
<view v-if="state.list.length > 0" @click="choose(i, item)" class="item" v-for="(item, i) in state.list"
<view class="list" v-if="state.list.length > 0" @click="choose(i, item)" v-for="(item, i) in state.list"
:key="i">
<view class="iten-left">
<image :src="`${$imgUrl}che.png`" mode="aspectFill"></image>
<view class="message">
<view>车牌号：{{ item.vehiclePlate }}</view>
<view>车牌颜色：{{ getVehiclePlateColor(item.vehiclePlateColor) }}</view>
<view v-if="item.cardId">卡号：{{ item.cardId }}</view>
<view v-if="item.cardStatus">卡状态：{{getCodeName('CARD_STATE_TYPE',item.cardStatus)}}</view>
<view v-if="item.obuId">签号：{{ item.obuId }}</view>
<view v-if="item.obuStatus">签状态：{{ getCodeName('OBU_STATE_TYPE',item.obuStatus) }}</view>
</view>
</view>
<view class="choose-item">
<view class="active" v-if="flag == i"> </view>
<image class="car" :src='`${$imgUrl}issuance/car.png`' mode=""></image>
<view class="content">
<view class="content-top">
<text class="vehiclePlate">{{item.vehiclePlate}}</text>
</view>
<view class="content-time">车牌颜色：{{getVehiclePlateColor(item.vehiclePlateColor)}}</view>
</view>
<image class="arrow" :src='`${$imgUrl}issuance/arrow.png`' mode=""></image>
</view>
<view v-else class="flex"> 暂无车辆订单信息 </view>
</view>
<view class="action">
<button type="default" class="ui-btn" @click="add()">
新增车辆
</button>
</view>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import { navTo} from "@/utils/utils";
import { onLoad,onShow} from "@dcloudio/uni-app";
import { afterSaleCommQuery,queryPage } from "@/utils/network/api.js";
import { queryVehicleBind,queryPage } from "@/utils/network/api.js";
import { requestNew } from "@/utils/network/request.js";
import { getItem, StorageKeys} from "@/utils/storage";
import { jump } from "@/datas/9901Jump.js";
import { deviceType } from "@/utils/network/difference";
import {
getVehiclePlateColor
} from "@/datas/vehiclePlateColor";
import {
getCodeName
} from "@/datas/queryKey.js";
import {
getVehiclePlateColor
} from "@/datas/vehiclePlateColor";
import useOrderListItem from "@/composables/order/useOrderListItem";
const props = defineProps({
index: {
type: Number,
default() {
return 0
}
},
refresh: { //是否刷新列表
type: Boolean,
default: true
}
})
// const { onKeyInput, searchKeyWords } = useOrderListItem(props);
const state = reactive({
car:"",
list: [],
type: "",//1 OBU重新激活 2 卡签注销 3 更换设备 4卡签续期 5挂失解挂 6增补设备（单卡单签补） 7补卡签（设备丢了补卡签） 8解除挂起
// 30 储值卡转记账卡 31卡pin码解锁 32ETC车牌过户 33 卡签停用/卡签启用
@@ -99,7 +122,7 @@ import { deviceType } from "@/utils/network/difference";
});
}else if (options.type == "36") {
uni.setNavigationBarTitle({
title: '黑名单查询-选择车辆'
title: '黑名单查询'
});
}else if (options.type == "37") {
uni.setNavigationBarTitle({
@@ -118,20 +141,24 @@ import { deviceType } from "@/utils/network/difference";
}else{
quanCheckActionTrue().then((item : any) => {
if (state.type == "32") {
let data = item.result
let data = item
for (var k = 0; k < data.length; k++) {
if (data[k]['orderStatus'] != "99999") {
state.list.push(data[k])
}
}
}else{
state.list = item.result;
state.list = item;
}
console.log(item);
});
}
})
const onKeyInput = (event) => {
// searchKeyWords.value = event.target.value;
}
const list=()=>{
let newsource = "WECHAT"
// #ifdef MP-ALIPAY
@@ -157,42 +184,16 @@ import { deviceType } from "@/utils/network/difference";
});
}
const quanCheckActionTrue = () => {
let source = ""
// #ifdef MP-ALIPAY
source = "ALI"
// #endif
// #ifdef MP-WEIXIN
source = "WECHAT"
// #endif
var data={}
if(state.type=="36"){
data = {
deviceStatus:[1,2,3,4,5,6,7],//挂失解挂设备状态
};
}else if(state.type=="5"){
data = {
deviceStatus:[1,6],//挂失解挂设备状态
};
}else if(state.type=="8"){
data = {
deviceStatus:[2],//解除挂起
};
}else{
data = {
};
}
const options = {
type: 2,
data: data,
data: {},
method: "POST",
showLoading: true,
};
return new Promise(async (resolve, reject) => {
const res = await requestNew(afterSaleCommQuery, options);
const res = await requestNew(queryVehicleBind, options);
const data = res;
console.log("车辆列表",data)
resolve(data);
}).catch((error) => {
reject(error);
@@ -211,7 +212,7 @@ import { deviceType } from "@/utils/network/difference";
navTo(`/subpackage/personal-center/search/etcFlowingWater?vehicleId=${item.vehicleId}`)
}else if (state.type == "36") {
uni.navigateTo({
url: `/subpackage/after-sale/blacklist-query/list?vehiclePlate=${item.vehiclePlate}&vehiclePlateColor=${item.vehiclePlateColor}&cardId=${item.cardId}`
url: `/subpackage/after-sale/blacklist-query/list?vehicleId=${item.vehicleId}`
})
}else{
if (item.deviceType == deviceType) {
@@ -267,15 +268,11 @@ import { deviceType } from "@/utils/network/difference";
}
}
}
const add=()=>{
navTo(`/subpackage/after-sale/blacklist-query/addCar`)
}
</script>

<style>
page {
width: 100%;
height: 100%;
background-color: #eef7f7;
}
</style>
<style lang="scss" scoped>
.flex {
display: flex;
@@ -285,59 +282,106 @@ import { deviceType } from "@/utils/network/difference";
.selectCar-box {
height: 100%;
padding: 30rpx;

.item {
padding: 20rpx;
padding-top: 0;
}
.message{
font-size: 26rpx;
margin-left: 6rpx;
}
.search-layout {
.search-box {
margin: 30rpx 30rpx 0rpx 30rpx;
height: 80rpx;
background: #FFFFFF;
// border: 1px solid #DCDCDC;
border-radius: 40rpx;
display: flex;
justify-content: space-between;
justify-content: center;
align-items: center;
// height: 130rpx;
background: #ffffff;
box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(223, 223, 223, 0.8);
border-radius: 20rpx;
margin-bottom: 30rpx;

.iten-left {
display: flex;
align-items: center;

image {
width: 150rpx;
height: 90rpx;
}

text {
margin-left: 20rpx;
font-size: 32rpx;
font-family: Noto Sans S Chinese;
font-weight: 400;
color: #333333;
box-sizing: border-box;
flex: 1;
}
.search-box .icon {
width: 48rpx;
height: 48rpx;
margin: 0 20rpx;
}
.search-box .search {
flex: 1;
margin-right: 20rpx;
height: 100%;
padding: 0 10rpx;
font-size: 28rpx;
color: #00b38b;
}
.search-btn {
color: white;
background-color: #00B38B;
width: 140rpx;
height: 75rpx;
line-height: 75rpx;
font-size: 32rpx;
border-radius: 40rpx;
text-align: center;
margin-right: 30rpx;
margin-top: 30rpx;
}
}
.title{
font-weight: 400;
font-size: 34rpx;
color: #01243A;
margin: 30rpx 30rpx 0rpx 30rpx;
}
.list{
background: #FFFFFF;
border-radius: 12rpx;
border: 1px solid #FFFFFF;
width: 98%;
margin: 30rpx auto;
padding: 20rpx;
box-sizing: border-box;
display: flex;
align-items: center;
.content{
font-weight: 400;
width: 76%;
margin-left: 20rpx;
.content-top{
margin-bottom: 20rpx;
.vehiclePlate{
font-size: 30rpx;
color: #01243A;
}
}

.choose-item {
width: 44rpx;
height: 44rpx;
background: #ffffff;
border: 2rpx solid #00b38b;
border-radius: 50%;
margin-right: 20rpx;
display: flex;
justify-content: center;
align-items: center;
box-sizing: content-box;
}

.active {
width: 34rpx;
height: 34rpx;
background: #00b38b;
border-radius: 50%;
.content-time{
font-size: 26rpx;
color: #999999;
}
}
.car{
width: 100rpx;
height: 100rpx;
}
.arrow{
width: 18rpx;
height: 34rpx;
}
}
.message{
font-size: 26rpx;
margin-left: 6rpx;
.action {
position: fixed;
bottom: 0rpx;
left: 0;
height: 188rpx;
background-color: #fff;
border-radius: 30rpx 30rpx 0 0;
width: 100vw;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
</style>

+ 72
- 84
subpackage/after-sale/blacklist-query/addCar.vue ファイルの表示

@@ -1,114 +1,102 @@
<template>
<view class="content">
<view class="list-item" v-for="(item,index) in state.tableData">
<view><text>卡号：</text><text>{{item.cardId}}</text></view>
<view><text>下黑时间：</text><text>{{item.creationTime}}</text></view>
<view v-if="item.reasonIn"><text>下黑原因：</text><text>{{item.reasonIn}}</text></view>
<view><text>黑名单类型：</text><text>{{item.typeC}}</text></view>
<view><text>状态：</text><text>{{item.status == '1'?'在黑':'已反白'}}</text></view>
<view class="bg">
<!-- 车牌输入 -->
<view class="car-input">
<view class="title" style="margin-top: 10rpx;">车牌号</view>
<car-number-input @numberInputResult="carNumber" inputColor='#ECF1F4'></car-number-input>
</view>
<view class="no" v-if="state.tableData.length==0">暂无黑名单</view>
<!-- 车牌颜色 -->
<view class="chepai-lane">
<view class="title">车牌颜色 <text class='tips'></text></view>
<numberplate-color :numberplate="state.vehiclePlate"
:numberplateCor='state.vehiclePlateColor' @numberplateResult="checkNumberplateColor">
</numberplate-color>
</view>
</view>
<view class="action">
<button type="default" class="ui-btn" @click="add()">
绑定
</button>
</view>
</template>

<script setup lang="ts">
import { reactive } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import {cardBlackQuery } from "@/utils/network/api.js";
import {vehicleBind } from "@/utils/network/api.js";
import {requestNew } from "@/utils/network/request.js";
import {getItem } from "@/utils/storage";
import {getItem,StorageKeys } from "@/utils/storage";
import carNumberInput from "../components/car-number-input.vue";
import numberplateColor from "../components/layout-numberplate-color";
import {msg} from "@/utils/utils";
const state = reactive({
vehiclePlate: "",
vehiclePlateColor: "",
tableData: [],
blackStatus: [],
cardId:""
vehiclePlateColor: ""
});
onLoad((option : any) => {
console.log("option", option)
let black = getItem('key')['BLACKLIST_TYPE'];
for (var k = 0; k < black.length; k++) {
let obj = {};
obj['value'] = black[k]['code']
obj['text'] = black[k]['name']
state.blackStatus.push(obj)
}
console.log("black", state.blackStatus)
state.vehiclePlate = option.vehiclePlate;
state.vehiclePlateColor = option.vehiclePlateColor;
state.cardId = option.cardId;
list()
})
const list = () => {
const carNumber = (val : any) => {
state.vehiclePlate = val.trim();
};
/* 选择车牌颜色 */
const checkNumberplateColor = (item : any) => {
state.vehiclePlateColor = item;
};
const add = () => {
const options = {
type: 2,
data: {
"vehiclePlate": state.vehiclePlate,
"vehiclePlateColor": state.vehiclePlateColor,
'cardId':state.cardId
"operaterId":getItem(StorageKeys.OpenId)
},
method: 'POST',
showLoading: true,
}
requestNew(cardBlackQuery, options).then((res) => {
console.log("res==",res.data)
const data = res;
const getData = data.data;
const newData = []
// 只要在黑的 和 1 2 3不展示
// LOSS("卡挂失",1){},
// HANG_WITHOUT_CARD("无卡挂起",2){},
// CANCEL_WITHOUT_CARD("无卡注销",3){},
// OVERDRAW("账户透支",4){},
// AGENCY_BLACK("合作机构黑名单",5){},
// VEHICLE_TYPE_NOTMATCH("车型不符",6){},
// CARD_BALANCE_INSUFFICIENT("储值卡余额不足",7){},
for (var i = 0; i < getData.length; i++) {
// if (getData[i]['status'] == 1 && (getData[i]['type'] == 4 || getData[i]['type'] == 5 || getData[i]['type'] == 6 || getData[i]['type'] == 7)) {
if (getData[i]['status'] == 1) {
newData.push(getData[i])
}
}
for (var i = 0; i < newData.length; i++) {
for (var m = 0; m < state.blackStatus.length; m++) {
if (newData[i]['type'] == state.blackStatus[m]['value']) {
newData[i]['typeC'] = state.blackStatus[m]['text']
break;
}
}
}
state.tableData = newData
console.log("圈存金额查询2", data)
requestNew(vehicleBind, options).then((res) => {
console.log("res==",res)
msg("新增成功")
setTimeout(()=>{
uni.navigateBack()
},1500)
})
}
</script>

<style scoped>
.content {
padding-bottom: 20rpx;
background-color: #EEF7F7;
padding-top: 20rpx;
min-height: 100vh;
}

.list-item {
width: 95%;
border-radius: 10rpx;
margin: 30rpx auto;
font-size: 28rpx;
border: 1rpx solid #ccc;
padding: 12rpx;
box-sizing: border-box;
<style scoped lang="scss">
.bg {
background-color: white;
width: 88%;
margin: 0 auto;
margin-top: 20rpx;
border-radius: 12px;
border: 1px solid #FFFFFF;
padding: 20rpx;
overflow: hidden;
.title{
font-weight: 400;
font-size: 30rpx;
color: #01243A;
margin: 30rpx 0;
}
}

.list-item>view {
margin-bottom: 10rpx;
width: 94%;
}

.no {
text-align: center;
padding-top: 100rpx;
.action {
position: fixed;
left: 0;
bottom: 0;
height: 180rpx;
background-color: #fff;
border-radius: 30rpx 30rpx 0 0;
width: 100vw;
display: flex;
align-items: center;
justify-content: space-evenly;
flex-direction: column;
margin-top: 20rpx;
}
</style>

+ 236
- 69
subpackage/after-sale/blacklist-query/list.vue ファイルの表示

@@ -1,28 +1,84 @@
<template>
<navBar title="黑名单查询" :scrollTop="scrollTop" navbgClass="nav-bgXin" fontColor='#fff'></navBar>
<view class="bg-img">
<image :src="`${$imgUrl}order/bg-order.png`" mode="scaleToFill" class="icon"></image>
</view>
<view class="content">
<view class="list-item" v-for="(item,index) in state.tableData">
<view><text>卡号：</text><text>{{item.cardId}}</text></view>
<view><text>下黑时间：</text><text>{{item.creationTime}}</text></view>
<view v-if="item.reasonIn"><text>下黑原因：</text><text>{{item.reasonIn}}</text></view>
<view><text>黑名单类型：</text><text>{{item.typeC}}</text></view>
<view><text>状态：</text><text>{{item.status == '1'?'在黑':'已反白'}}</text></view>
</view>
<view class="no" v-if="state.tableData.length==0">暂无黑名单</view>
<view class="title">填写查询条件</view>
<uni-datetime-picker v-model="state.range" type="daterange" />
<u-form label-width="230" :model="state.typeStr" ref="uForm" :label-style='labelStyle'>
<u-form-item label="黑名单类型">
<u-input v-model="state.typeStr" type="select" @click="show1 = true" input-align='right'/>
</u-form-item>
</u-form>
<button type="default" class="ui-btn" @click="list(1)" style="width: auto;">
查询
</button>
</view>
<view class="list-title">查询结果列表</view>
<view class="">
<view class="list" v-for="(item,index) in state.tableData" :key="index">
<view class="title" :style="{'--bgimg':`url(${$imgUrl}etcbg.png)`}">
<view class="title_left">
<image :src="`${$imgUrl}etc.png`" mode=""></image>
<text class="question">类型：{{item.typeC}}</text>
</view>
<text class="statuszh" v-if="item.status==1">下黑</text>
<text class="statusdbc" v-else>反白</text>
</view>
<view class="bot">
<view class="details">
<view><text>下黑时间：</text><view>{{item.creationTime}}</view></view>
<view><text>下黑原因：</text><view>{{item.reason}}</view></view>
<view v-if="item.fbCreationTime"><text>反白时间：</text><view>{{item.fbCreationTime}}</view></view>
<view v-if="item.fbReason"><text>反白原因：</text><view>{{item.fbReason}}</view></view>
<view><text>解决方案：</text><view>{{item.solution}}</view></view>
</view>
<view style="display: flex;justify-content: flex-end;align-items: flex-end;">
<text class="button">车辆信息变更</text>
</view>
</view>
</view>
<view style="text-align: center;margin: 20rpx;font-size: 30rpx;" v-if="state.flags">我是有底线的~</view>
</view>
<!-- 选择车牌颜色 -->
<u-select v-model="show1" :list="state.blackStatus" @confirm="changeBlackStatus"></u-select>
<!-- <view class="no" v-if="state.tableData.length==0">暂无黑名单</view> -->
</template>

<script setup lang="ts">
import { reactive } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import {cardBlackQuery } from "@/utils/network/api.js";
import { reactive,ref } from "vue";
import { onLoad,onPageScroll,onReachBottom} from "@dcloudio/uni-app";
import {cardBlackListQuery } from "@/utils/network/api.js";
import {requestNew } from "@/utils/network/request.js";
import {getItem } from "@/utils/storage";
import navBar from "@/components/nav-bar/nav-bar2.vue";
import {msg} from "@/utils/utils";
const state = reactive({
vehiclePlate: "",
vehiclePlateColor: "",
tableData: [],
blackStatus: [],
cardId:""
range: ['', ''],
type:"",
typeStr:"",
colorRange:[],
vehicleId:"",
pageNo:1,
pageSize:10,
totalCount:"",
flags: false,
});
const labelStyle = {
color: "#004576",
fontSize: "28rpx",
}
const show1 = ref(false)
const scrollTop = ref(0); //滚动距离
//监听页面滚动
onPageScroll((e) => {
scrollTop.value = e.scrollTop;
});
onLoad((option : any) => {
console.log("option", option)
@@ -30,85 +86,196 @@
for (var k = 0; k < black.length; k++) {
let obj = {};
obj['value'] = black[k]['code']
obj['text'] = black[k]['name']
obj['label'] = black[k]['name']
state.blackStatus.push(obj)
}
console.log("black", state.blackStatus)
state.vehiclePlate = option.vehiclePlate;
state.vehiclePlateColor = option.vehiclePlateColor;
state.cardId = option.cardId;
list()
state.vehicleId=option.vehicleId
list(2)
console.log("state.blackStatus",state.blackStatus)
})
const list = () => {
const changeBlackStatus = (item) => {
state.type = item[0].value
state.typeStr = item[0].label
console.log(item)
}
const list = (params) => {
if (params == 1) {
state.pageNo = 1
}
if (state.pageNo == 1 && state.tableData.length > 0) {
state.tableData = []
}
const options = {
type: 2,
data: {
"vehiclePlate": state.vehiclePlate,
"vehiclePlateColor": state.vehiclePlateColor,
'cardId':state.cardId
"startTime":state.range[0]?state.range[0]+" 00:00:00":"",
"endTime":state.range[1]?state.range[1]+" 00:00:00":"",
"vehicleId":state.vehicleId,
"type":state.type,
"pageNo":state.pageNo,
"pageSize":state.pageSize
},
method: 'POST',
showLoading: true,
}
requestNew(cardBlackQuery, options).then((res) => {
console.log("res==",res.data)
const data = res;
const getData = data.data;
const newData = []
// 只要在黑的 和 1 2 3不展示
// LOSS("卡挂失",1){},
// HANG_WITHOUT_CARD("无卡挂起",2){},
// CANCEL_WITHOUT_CARD("无卡注销",3){},
// OVERDRAW("账户透支",4){},
// AGENCY_BLACK("合作机构黑名单",5){},
// VEHICLE_TYPE_NOTMATCH("车型不符",6){},
// CARD_BALANCE_INSUFFICIENT("储值卡余额不足",7){},
for (var i = 0; i < getData.length; i++) {
// if (getData[i]['status'] == 1 && (getData[i]['type'] == 4 || getData[i]['type'] == 5 || getData[i]['type'] == 6 || getData[i]['type'] == 7)) {
if (getData[i]['status'] == 1) {
newData.push(getData[i])
}
}
for (var i = 0; i < newData.length; i++) {
requestNew(cardBlackListQuery, options).then((res) => {
console.log("res==",res)
const data =[...state.tableData,...res.result] ;
state.totalCount = res.totalCount
// status 1 下黑 2反白
for (var i = 0; i < data.length; i++) {
for (var m = 0; m < state.blackStatus.length; m++) {
if (newData[i]['type'] == state.blackStatus[m]['value']) {
newData[i]['typeC'] = state.blackStatus[m]['text']
if (data[i]['type'] == state.blackStatus[m]['value']) {
data[i]['typeC'] = state.blackStatus[m]['label']
break;
}
}
}
state.tableData = newData
console.log("圈存金额查询2", data)
state.tableData = data
console.log("圈存金额查询2", state.tableData)
})
}
onReachBottom(() => {
console.log("触底了", state.pageNo * 10)
if (Number(state.totalCount) == state.tableData.length) return state.flags = true
if (state.tableData.length < state.pageNo * 10) return state.flags = true
console.log("触底了")
state.pageNo++
list(2)
})
</script>

<style>
page {
position: absolute;
}
</style>
<style scoped lang="scss">
.list{
background: #FFFFFF;
border-radius: 12rpx;
border: 1px solid #FFFFFF;
width: 90%;
margin: 0 auto;
font-weight: 400;
margin-bottom: 30rpx;
.title{
padding: 0 20rpx;
display: flex;
justify-content: space-between;
align-items: center;
height: 80rpx;
background-image: var(--bgimg);
background-size: 100% 100%;
background-repeat: no-repeat;
.title_left{
display: flex;
align-items: center;
}
image{
width: 50rpx;
height: 50rpx;
}
.question{
font-size: 30rpx;
color: #01243A;
margin-left: 10rpx;
}
// 在黑
.statuszh{
font-size: 26rpx;
color: #CCB375;
}
// 已反白
.statusdbc{
font-size: 26rpx;
color: #999999;
}
}
.bot{
padding: 0 20rpx;
.details{
font-size: 26rpx;
padding: 10rpx 0 5rpx 0;
border-bottom: 1rpx solid #DCDCDC;
view{
display: flex;
margin-bottom: 5rpx;
text{
color: #999999;
width: 21%;
}
view{
color: #002025;
width: 79%;
}
}
}
.time{
font-size: 24rpx;
color: #999999;
padding:20rpx 0;
border-top: 1rpx solid #DCDCDC;
}
}
}
</style>
<style scoped>
.content {
padding-bottom: 20rpx;
background-color: #EEF7F7;
padding-top: 20rpx;
min-height: 100vh;
.bg-img {
width: 100%;
position: absolute;
z-index:0;
}

.list-item {
width: 95%;
border-radius: 10rpx;
margin: 30rpx auto;
font-size: 28rpx;
border: 1rpx solid #ccc;
padding: 12rpx;
box-sizing: border-box;
background-color: white;
.icon {
width: 100%;
height: 534rpx;
}

.list-item>view {
margin-bottom: 10rpx;
width: 94%;
.content {
position: relative;
color: white;
padding:30rpx ;
background-color: white;
width: 90%;
margin: 0 auto;
margin-top: 200rpx;
border-radius: 12px;
box-sizing: border-box;
}

.title {
font-weight: 400;
font-size: 30rpx;
color: #01243A;
margin-bottom: 20rpx;
}
.no {
text-align: center;
padding-top: 100rpx;
}
/deep/.uni-date-editor--x{
background: #ECF1F4;
}
/deep/.uni-date-x {
background: #ECF1F4 ;
height: 70rpx !important;
}
/deep/.u-form-item--right{
background: #ECF1F4;
padding: 4rpx 10rpx;
border-radius: 10rpx;
}
.list-title{
font-weight: bold;
margin: 30rpx 40rpx;
}
.button{
background: linear-gradient(90deg, #CCB375 0%, #E7D398 100%);
border-radius: 40rpx;
font-size: 30rpx;
font-weight: 400;
color: #fff !important;
padding: 15rpx 25rpx;
margin: 10rpx 0;
}
</style>

+ 362
- 0
subpackage/after-sale/components/car-number-input.vue
ファイル差分が大きすぎるため省略します
ファイルの表示


+ 117
- 0
subpackage/after-sale/components/layout-numberplate-color.vue ファイルの表示

@@ -0,0 +1,117 @@
<!-- 车牌颜色选择组件 -->
<template>
<view class="numberplates">
<view class="numberplate" v-for="(item,index) in state.numberplateColorList" @click="checkNumberplateColor(item)"
:key="index">
<image :src="`${fileURL}/image/issueActivation/${item.src}.png`" class="numberplate-bg"></image>
<view class="numberplate-name" :style="`color:${item.color}`">{{ numberplate.trim() || item.title}}</view>
<image :src="`${fileURL}image/issuance/color-tip.png`" class="numberplate-icon-check"
v-if="item.id === state.curCheckId"></image>
</view>
</view>
</template>

<script setup lang="ts">
import { onMounted, reactive } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { fileURL } from '@/datas/fileURL.js';
import { getItem } from "@/utils/storage";
import { getGlobalParam } from "@/utils/network/api.js";
import { getCodeName } from "@/datas/queryKey.js";
import { msg } from "@/utils/utils";
const emit = defineEmits(['numberplateResult'])

const props = defineProps({
//显示的车牌
numberplate: {
type: String,
default: '贵A1234'
},

//当前选择的车牌
numberplateCor: {
type: Object,
default: () => { return { id: -1 } }
},
//客车1 货车2
type: {
type: String,
// default: '1'
},
})

const state = reactive({
curCheckId: -1, //当前选择的车牌
numberplateColorList: [],
allColorList: [//车牌颜色
{ src: 'bg-blue', checkSrc: 'icon-select-blue', id: 0, color: '#ffffff', title: '蓝色' },
{ src: 'bg-green', checkSrc: 'icon-select-green', id: 4, color: '#ffffff', title: '渐变绿色' },
{ src: 'bg-orange', checkSrc: 'icon-select-orange', id: 1, color: '#ffffff', title: '黄色' },
{ src: 'bg-yellow_green', checkSrc: 'icon-select-yellow_green', id: 5, color: '#ffffff', title: '黄绿双拼色' },
{ src: 'bg-black', checkSrc: 'icon-select-black', id: 2, color: '#ffffff', title: '黑色' },
{ src: 'bg-white', checkSrc: 'icon-select-white', id: 3, color: '#000000', title: '白色' },
{ src: 'bg-white_blue', checkSrc: 'icon-select-blue', id: 6, color: '#ffffff', title: '蓝白渐变色' },
{ src: 'green', checkSrc: 'icon-green', id: 11, color: '#ffffff', title: '绿色' },
{ src: 'rad', checkSrc: 'icon-select-red', id: 12, color: '#ffffff', title: '红色' },
]
})

/* 选择车牌颜色 */
const checkNumberplateColor = (item) => {
console.log("item", item)
state.curCheckId = item.id;
emit('numberplateResult', item.id)
}
const getCarColor = () => {
state.numberplateColorList=state.allColorList
state.curCheckId = state.numberplateColorList[0]['id'];
emit('numberplateResult', state.curCheckId)
console.log("state.numberplateColorList", state.numberplateColorList)
}
onMounted(() => {
setTimeout(() => {
getCarColor()
})
})
</script>

<style lang="scss" scoped>
.numberplates {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;

.numberplate {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 40rpx;
position: relative;

&:nth-child(3n) {
margin-right: 0rpx;
}

&-bg {
width: 196rpx;
height: 64rpx;
}

&-name {
font-size: 26rpx;
color: white;
position: absolute;
line-height: 64rpx;
}

&-icon-check {
width: 34rpx;
height: 34rpx;
position: absolute;
right: 0rpx;
bottom: 0rpx;
}
}
}
</style>

+ 6
- 2
utils/network/api.js ファイルの表示

@@ -262,7 +262,6 @@ export const getOpenId= "/iaw/issue/userBasic/getOpenId" //获取微信小程
export const agreementInSertOrder= "/iaw/issue/order/agreementInSertOrder" //订单查询协议
export const agreeOrderProdcut= "/iaw/issue/order/agreeOrderProduct" //订单确认协议
export const monthlyStatementQuery= "/iaw/app/issue/monthlyStatement/query" //月结单查询
export const cardBlackQuery= "/iaw/app/issue/cardBlack/query" //黑名单查询
export const registerFull= "/iaw/issue/userBasic/registerFull" //无感注册登录接口
export const activeImgUpload= "/iaw/issue/order/activeImgUpload" //激活图片上传
export const cardObuQuery= "/iaw/ass/query/cardObuQuery" //卡签信息查询
@@ -469,4 +468,9 @@ export const releasePlateaApply = "/iaw/api/afterSale/releasePlate/apply" //解
export const releasePlateaList = "/iaw/api/afterSale/releasePlate/list" //解除车牌占用列表
export const releasePlateaView = "/iaw/api/afterSale/releasePlate/view" //单一订单查询
// 自助工单
export const selfServiceUserAdd = "/iaw/selfService/userAdd" //用户提交 - 新增
export const selfServiceUserAdd = "/iaw/selfService/userAdd" //用户提交 - 新增
// 车辆绑定与解绑
export const vehicleBind = "/iaw/api/vehicle/bind" //车辆绑定（所有售后）
export const queryVehicleBind = "/iaw/api/vehicle/queryVehicleBind" //车辆绑定列表查询
// 黑名单
export const cardBlackListQuery = "/iaw/api/afterSale/cardBlack/cardBlackListQuery" //黑名单列表查询

書き込み プレビュー
読み込み中…
キャンセル
保存