Ver código fonte

[Feature]提交代码

yxb
杨毅 2 anos atrás
pai
commit
06c3662a94

+ 340
- 329
after-sale/ETC-log-off/etc-log-off.vue Ver arquivo

@@ -1,330 +1,341 @@
<template>
<view class="oderPage">
<u-form :model="form" ref="myForm" :error-type="errorType">
<view class="from">
<u-form-item prop="cardState">
<view class="from_item">
<text><text style="color: red">*</text>是否有卡注销:</text>
<u-radio-group v-model="form.cardState">
<u-radio
:customStyle="{ marginBottom: '8px' }"
activeColor="#2CE242"
v-for="(item, index) in radiolist1"
:key="index"
:label="item.disabled"
:name="item.name"
@change="radioChange"
>
{{ item.name }}
</u-radio>
</u-radio-group>
</view>
</u-form-item>
<u-form-item prop="equipmentState">
<view class="from_item">
<text><text style="color: red">*</text>是否有设备注销::</text>
<u-radio-group v-model="form.equipmentState">
<u-radio
:customStyle="{ marginBottom: '8px' }"
activeColor="#2CE242"
v-for="(item, index) in radiolist1"
:key="index"
:label="item.disabled"
:name="item.name"
@change="radioChange"
>
{{ item.name }}
</u-radio>
</u-radio-group>
</view>
</u-form-item>
<u-form-item prop="phone">
<view class="from_item" style="background-color: #f7f7f7">
<text><text style="color: red"></text>手机号:</text>
<u-input v-model="form.phone" class="input" />
</view>
</u-form-item>
<u-form-item prop="code">
<view class="from_item">
<text><text style="color: red"></text>验证码:</text>
<u-input v-model="form.code" class="input" />
<view class="btn"> 获取验证码 </view>
</view>
</u-form-item>
</view>
</u-form>

<!-- <view class="from1">
<uni-forms ref="form_ref" :modelValue="form" :rules="rules">
<uni-forms-item label="是否有卡注销" name="bank" label-width="112" required>
<uni-data-checkbox v-model="form.cardState" class="radio" :localdata="range"
@change="radioChange" />
</uni-forms-item>
<uni-forms-item label="是否有设备注销" name="bankID" label-width="112" required>
<uni-data-checkbox v-model="form.equipmentState" class="radio" :localdata="range"
@change="radioChange" />
</uni-forms-item>
<uni-forms-item label="手机号" name="phone" label-width="112" required>
<uni-easyinput type="text" v-model="form.phone" :inputBorder="false"
placeholderStyle="font-size: 28rpx;" placeholder="请输入" />
</uni-forms-item>
<uni-forms-item label="验证码" name="code" label-width="112">
<uni-easyinput type="text" v-model="form.code" :inputBorder="false"
placeholderStyle="font-size: 28rpx;" placeholder="请输入" />
<view class="btn">
获取验证码
</view>
</uni-forms-item>
</uni-forms>
</view> -->
<button class="submit" @click="toPage()">下一步</button>
</view>
</template>

<script setup lang="ts">
import navBar from "./components/nav-bar.vue";
import { checkStr } from "@/utils/utils";
import { ref, reactive } from "vue";
import { navTo } from "../../utils/utils";
import { onReady } from "@dcloudio/uni-app";

// 表单数据
const form = reactive({
cardState: "",
equipmentState: "",
phone: "18223323235",
code: "",
});
// 验证规则
const rules = {
cardState: [
{
required: true,
message: "请选择",
trigger: ["change", "blur"],
},
],
equipmentState: [
{
required: true,
message: "请选择",
trigger: ["change", "blur"],
},
],
code: [
{
required: true,
message: "请输入",
trigger: ["change", "blur"],
},
],
phone: [
{
required: true,
message: "请输入手机号",
trigger: ["change", "blur"],
},
{
// 自定义验证函数,见上说明
validator: (rule, value, callback) => {
// 上面有说,返回true表示校验通过,返回false表示不通过
console.log(checkStr(value, "mobile"), "0011");
return checkStr(value, "mobile");
},
message: "手机号码不正确",
trigger: ["change", "blur"],
},
],
};
// 验证提示类型(toast要版本为1.3.5才支持)
const errorType = ["toast"];

// 设置验证规则
const myForm = ref(null);
onReady(() => {
myForm.value.setRules(rules);
});

// 单选数据列表
const radiolist1 = reactive([
{
name: "是",
disabled: false,
},
{
name: "否",
disabled: false,
},
]);

// 单选
const radioChange = (n) => {
console.log("radioChange", n);
// if (n == '卡退费') {
// flag.value = true
// console.log(flag.value);
// } else {
// flag.value = false
// console.log(flag.value);
// }
};

//下一步
const toPage = () => {
myForm.value.validate((valid) => {
console.log(valid);
if (valid) {
console.log("验证通过", form);
wx.showModal({
title: "模拟两种情况",
confirmText: "有卡有签",
cancelText: "无卡无签",
success: function (res) {
if (res.confirm) {
console.log("用户点击确定");
navTo("/pages/bluetooth/bluetooth");
} else if (res.cancel) {
console.log("用户点击取消");
navTo("/after-sale/ETC-log-off/upload-card");
}
},
});
} else {
console.log("验证未通过");
}
});
};
</script>

<style>
page {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
background-color: ##eef7f7;
}
</style>
<style lang="scss" scoped>
.oderPage {
flex: 1;
width: 100%;

.from1 {
background-color: #fff;
margin-top: 30rpx;
padding: 0 30rpx;

::v-deep .uni-forms-item {
border-bottom: 1rpx solid #ccc;
padding: 15rpx 0;
margin-bottom: 0;

.uni-forms-item__label {
font-size: 28rpx;
height: 50rpx;
}

.uni-forms-item__content {
display: flex;
}

.uni-easyinput__content-input {
font-size: 28rpx;
height: 50rpx;
}
}

.btn {
line-height: 38rpx;
font-size: 24rpx;
font-family: Microsoft YaHei;
font-weight: 400;
color: #ffffff;
background: #00b38b;
border-radius: 10rpx;
padding: 10rpx 15rpx;
}
}

.from {
background-color: #fff;
margin-top: 30rpx;
padding: 0 30rpx;

::v-deep .u-form-item {
padding: 0;
line-height: normal;

.u-form-item__message {
margin-bottom: 12rpx;
}
}

.from_item {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
height: 80rpx;
border-bottom: 1rpx solid #dcdcdc;

.btn {
font-size: 24rpx;
font-family: Microsoft YaHei;
font-weight: 400;
color: #ffffff;
background: #00b38b;
border-radius: 10rpx;
padding: 10rpx 15rpx;
}

::v-deep .input {
text-align: left;
flex: 1;

input {
text-align: left;
}
}
}

.from_item1 {
display: flex;
flex-wrap: nowrap;
flex-direction: column;
justify-content: space-between;
padding: 30rpx;
border-bottom: #dcdcdc 1px solid;

input {
text-align: right;
}

.textarea {
background-color: #f1f1f1;
width: 100%;
border-radius: 20rpx;
margin-top: 10rpx;
text-indent: 1rem;
height: 180rpx;
padding: 20rpx;
box-sizing: border-box;
}
}
}
}

.submit {
background: linear-gradient(to left, #43a1e0 0%, #13e7c1 100%);
width: 670rpx;
height: 80rpx;
color: #fff;
border-radius: 100rpx;
position: fixed;
left: 50%;
transform: translate(-50%);
bottom: 60rpx;
font-size: 32rpx;
}
<template>
<view class="oderPage">
<u-form :model="form" ref="myForm" :error-type="errorType">
<view class="from">
<u-form-item v-if="(form.type==='2'||form.type==='3')" prop="equipmentState">
<view class="from_item">
<text><text style="color: red">*</text>是否有设备注销::</text>
<u-radio-group v-model="form.equipmentState">
<u-radio :customStyle="{ marginBottom: '8px' }" activeColor="#2CE242"
v-for="(item, index) in radiolist" :key="index" :label="item.disabled" :name="item.name"
@change="radioChange(item)">
{{ item.name }}
</u-radio>
</u-radio-group>
</view>
</u-form-item>
<u-form-item prop="phone">
<view class="from_item" style="background-color: #f7f7f7">
<text><text style="color: red"></text>手机号:</text>
<u-input v-model="form.mobile" class="input" />
</view>
</u-form-item>
<u-form-item prop="code">
<view class="from_item">
<text><text style="color: red"></text>验证码:</text>
<u-input v-model="form.code" placeholder="请输入验证码" class="input" />
<view class="hint2">
<view class="green">{{ codeDuration === 0 ? "" : codeDuration }}</view>
<view class="grey" @click="getCode">{{
codeDuration === 0 ? "发送验证码" : "秒后可重发"
}}</view>
</view>
</view>
</u-form-item>
</view>
</u-form>
<button class="submit" @click="toPage()">下一步</button>
</view>
</template>
<script setup lang="ts">
import navBar from "./components/nav-bar.vue";
import {
checkStr
} from "@/utils/utils";
import {
ref,
reactive
} from "vue";
import {
navTo
} from "../../utils/utils";
import {
onReady,
onLoad
} from "@dcloudio/uni-app";
import {
request
} from "../../utils/network/request.js";
import {
sendCode,
checkCode
} from "@/utils/network/api.js";
import {
msg
} from "@/utils/utils";
// 表单数据
const form = reactive({
equipmentState: "",
mobile: "",
code: '',
type: undefined,
});
//入参
const params = reactive({
cardId: '',
obuId: '',
orderId: ''
});
// 验证规则
const rules = {
code: [{
required: true,
message: "请输入验证码",
trigger: ["change", "blur"],
}],
};
// 验证提示类型(toast要版本为1.3.5才支持)
const errorType = ["toast"];
// 单选数据列表
const radiolist = reactive([{
name: "是",
disabled: false,
},
{
name: "否",
disabled: false,
},
]);
// 设置验证规则
const myForm = ref(null);
//倒计时时常
const codeDuration = ref(0);
let interval = null;
/* 验证码倒计时 */
const codeInterval = () => {
codeDuration.value = 60;
interval = setInterval(() => {
codeDuration.value--;
if (codeDuration.value === 0) {
if (interval) {
clearInterval(interval);
interval = null;
}
}
}, 1000);
};
onReady(() => {
myForm.value.setRules(rules);
});
onLoad((option) => {
form.mobile = option.mobile
form.type = option.type
params.cardId = option.cardId
params.obuId = option.obuId
});
const getCode = () => {
if (codeDuration.value !== 0) {
return;
}
const options = {
type: 2,
data: {
mobile: form.mobile
},
method: "POST",
showLoading: true,
};
request(sendCode, options)
.then((res) => {
codeInterval();
msg("验证码发送成功!");
})
.catch((err) => {
console.log(err);
});
}
// 单选
const radioChange = (val: any) => {
if (val.name === '是') {
form.equipmentState = '1';
} else {
form.equipmentState = '2';
}
};
//下一步
const toPage = () => {
myForm.value.validate((valid) => {
console.log(valid);
if (valid) {
const options = {
type: 2,
data: {
mobile: form.mobile,
code: form.code
},
method: "POST",
showLoading: true,
};
request(checkCode, options)
.then(() => {
navTo(
`/after-sale/ETC-log-off/upload-card?obuId=${params.obuId}&&cardId=${params.cardId}&&orderId=${params.orderId}&&equipmentState=${form.equipmentState}`
);
})
.catch((err) => {
console.log(err);
});
} else {
console.log("验证未通过");
}
});
};
</script>
<style>
page {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
background-color: ##eef7f7;
}
</style>
<style lang="scss" scoped>
.hint2 {
display: flex;
.green {
font-size: 28rpx;
color: #00b38b;
}
.grey {
font-size: 24rpx;
color: #000000;
margin-left: 16rpx;
}
}
.oderPage {
flex: 1;
width: 100%;
.from1 {
background-color: #fff;
margin-top: 30rpx;
padding: 0 30rpx;
::v-deep .uni-forms-item {
border-bottom: 1rpx solid #ccc;
padding: 15rpx 0;
margin-bottom: 0;
.uni-forms-item__label {
font-size: 28rpx;
height: 50rpx;
}
.uni-forms-item__content {
display: flex;
}
.uni-easyinput__content-input {
font-size: 28rpx;
height: 50rpx;
}
}
.btn {
line-height: 38rpx;
font-size: 24rpx;
font-family: Microsoft YaHei;
font-weight: 400;
color: #ffffff;
background: #00b38b;
border-radius: 10rpx;
padding: 10rpx 15rpx;
}
}
.from {
background-color: #fff;
margin-top: 30rpx;
padding: 0 30rpx;
::v-deep .u-form-item {
padding: 0;
line-height: normal;
.u-form-item__message {
margin-bottom: 12rpx;
}
}
.from_item {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
height: 80rpx;
border-bottom: 1rpx solid #dcdcdc;
.btn {
font-size: 24rpx;
font-family: Microsoft YaHei;
font-weight: 400;
color: #ffffff;
background: #00b38b;
border-radius: 10rpx;
padding: 10rpx 15rpx;
}
::v-deep .input {
text-align: left;
flex: 1;
input {
text-align: left;
}
}
}
.from_item1 {
display: flex;
flex-wrap: nowrap;
flex-direction: column;
justify-content: space-between;
padding: 30rpx;
border-bottom: #dcdcdc 1px solid;
input {
text-align: right;
}
.textarea {
background-color: #f1f1f1;
width: 100%;
border-radius: 20rpx;
margin-top: 10rpx;
text-indent: 1rem;
height: 180rpx;
padding: 20rpx;
box-sizing: border-box;
}
}
}
}
.submit {
background: linear-gradient(to left, #43a1e0 0%, #13e7c1 100%);
width: 670rpx;
height: 80rpx;
color: #fff;
border-radius: 100rpx;
position: fixed;
left: 50%;
transform: translate(-50%);
bottom: 60rpx;
font-size: 32rpx;
}
</style>

+ 315
- 287
after-sale/ETC-log-off/log-off-confirm.vue Ver arquivo

@@ -1,288 +1,316 @@
<template>
<view class="selectCar-box">
<view class="details">
<view class="title">
基础信息
</view>
<view class="details-item">
<view>
订单编号:
</view>
<text>123234350000001</text>
</view>
<view class="details-item">
<view>
用户名称:
</view>
<text>xxxxx</text>
</view>
<view class="details-item">
<view>
用户证件类型:
</view>
<text>居民身份证</text>
</view>
<view class="details-item">
<view>
用户证件号:
</view>
<text>44504049343434001</text>
</view>
<view class="details-item">
<view>
订单车牌号:
</view>
<text style="color: #00B38B;;">贵A12345</text>
</view>
<view class="details-item">
<view>
收费车型:
</view>
<text>客车</text>
</view>
</view>
<view class="title">
卡信号
</view>
<view class="card">
<view class="card-left">
<image :src="`${$imgUrl}card2.png`" mode=""></image>
<view class="card-center">
<view class="card-center-head">
2023022700012
</view>
<view class="tips">
<text>储蓄卡</text>
<text class="tips-card">正常</text>
</view>
</view>
</view>
<view class="choose-item">
<!-- 有效期:xxxx-xx-xx -->
</view>
</view>
<view class="title">
OBU设备信息
</view>
<view class="card">
<view class="card-left">
<image :src="`${$imgUrl}card1.png`" mode=""></image>
<view class="card-center">
<view class="card-center-head">
2023022700012
</view>
<view class="tips">
<!-- <text>储蓄卡</text> -->
<text class="tips-card">正常</text>
</view>
</view>
</view>
<view class="choose-item">
<!-- 有效期:xxxx-xx-xx -->
</view>
</view>
<view class="title">
注意事项
</view>
<view class="remark">
<view>
1.xxxxxxxx
</view>
<view>
2.xxxxxxxx
</view>
<view>
3.xxxxxxxx
</view>
<view>
4.xxxxxxxx
</view>
</view>
<button class="submit" @click="toPage">下一步</button>
</view>
</template>

<script lang="ts" setup>
import {
reactive,
ref
} from "vue"
import {
navTo
} from "@/utils/utils"
const toPage = () => {
wx.showModal({
title: '提示',
content: '检测到当前只有ETC卡,需要办理obu设备才可以通行,是否前往办理,无需办理点击继续注销',
confirmText: '继续注销',
cancelText: '前往办理',
success: function(res) {
if (res.confirm) {
console.log('用户点击确定');
navTo('/after-sale/ETC-log-off/etc-log-off')
} else if (res.cancel) {
console.log('用户点击取消');
navTo('/after-sale/replace-equipment/replace-equipment-confirm')
}
}
});


}

const flag = reactive([])
const choose = (data) => {
if (!flag.includes(data)) {
flag.push(data)
console.log(flag);
} else {
flag.splice(flag.indexOf(data), 1)
console.log(flag);
}
}
</script>

<style>
page {
width: 100%;
height: 100%;
background-color: #fff;
}
</style>
<style lang="scss" scoped>
.selectCar-box {
// width: 100%;
// height: 100%;
padding: 30rpx;

.title {
font-size: 30rpx;
font-family: Microsoft YaHei UI;
font-weight: 400;
color: #333333;
margin-bottom: 30rpx;
}

.details {
.title {
font-size: 30rpx;
font-family: Microsoft YaHei UI;
font-weight: 400;
color: #333333;
margin-bottom: 30rpx;
}

.details-item {
display: flex;
font-size: 26rpx;
font-family: Noto Sans S Chinese;
font-weight: 400;
color: #999999;
margin-bottom: 30rpx;

text {
font-size: 26rpx;
font-family: Noto Sans S Chinese;
font-weight: 400;
color: #333333;
}
}

}

.card {
height: 150rpx;
background: #FFFFFF;
box-shadow: 0rpx 4rpx 13rpx 3rpx rgba(223, 223, 223, 0.8);
border-radius: 20rpx;
padding: 30rpx;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 60rpx;

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

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

.card-center {
margin-left: 30rpx;

.card-center-head {
font-size: 32rpx;
font-family: Noto Sans S Chinese;
font-weight: 400;
color: #333333;
}

.tips {
font-size: 26rpx;
font-family: Noto Sans S Chinese;
font-weight: 400;
color: #666666;

.tips-card {
width: 70rpx;
height: 40rpx;
background: #D3F2EF;
border-radius: 6rpx;
font-size: 20rpx;
font-family: Noto Sans S Chinese;
font-weight: 400;
color: #0A8F8A;
padding: 5rpx 10rpx;
margin-left: 20rpx;
}
}
}
}

.choose-item {
margin-right: 20rpx;
/* width: 50rpx; */
height: 50rpx;
/* border: 1rpx solid #00B38B; */
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 25rpx;
align-self: end;

.active {
width: 38rpx;
height: 38rpx;
background: #00B38B;
border-radius: 50%;
}
}
}

.remark {
font-size: 26rpx;
font-family: Microsoft YaHei UI;
font-weight: 400;
color: #666666;
text-indent: 30rpx;
margin-bottom: 30rpx;
}

.submit {
margin-top: 100rpx;
width: 670rpx;
height: 80rpx;
background: linear-gradient(-90deg, #43A1E0 0%, #13E7C1 100%);
border-radius: 40rpx;
font-size: 32rpx;
font-family: Noto Sans S Chinese;
font-weight: 400;
color: #FFFFFF;
line-height: 80rpx;
}
}
<template>
<view class="selectCar-box">
<view class="details">
<view class="title">
基础信息
</view>
<view class="details-item">
<view>
订单编号:
</view>
<text>{{state.data.orderId}}</text>
</view>
<view class="details-item">
<view>
用户名称:
</view>
<text>{{state.data.customerName}}</text>
</view>
<view class="details-item">
<view>
用户证件类型:
</view>
<text>{{getCredentialType(state.data.customerIdtype)}}</text>
</view>
<view class="details-item">
<view>
用户证件号:
</view>
<text>{{state.data.customerIdnum}}</text>
</view>
<view class="details-item">
<view>
订单车牌号:
</view>
<text style="color: #00B38B;;">{{state.data.vehiclePlate}}</text>
</view>
<view class="details-item">
<view>
收费车型:
</view>
<text>{{state.data.vehicleType}}</text>
</view>
</view>
<view class="">
<view class="title">
卡信息
</view>
<view class="card">
<view class="card-left">
<image :src="`${$imgUrl}card2.png`" mode=""></image>
<view class="card-center">
<view class="card-center-head">
{{state.data.cardId}}
</view>
<view class="tips">
<text>储蓄卡</text>
<text class="tips-card">{{getEtcCardStatus(state.data.cardStatus)}}</text>
</view>
</view>
</view>
</view>
</view>
<view class="">
<view class="title">
OBU设备信息
</view>
<view class="card">
<view class="card-left">
<image :src="`${$imgUrl}card1.png`" mode=""></image>
<view class="card-center">
<view class="card-center-head">
{{state.data.obuId}}
</view>
<view class="tips">
<!-- <text>储蓄卡</text> -->
<text class="tips-card">{{getObuStatus(state.data.obuStatus)}}</text>
</view>
</view>
</view>
</view>
</view>
<button class="submit" @click="nextACtion">下一步</button>
</view>
</template>
<script lang="ts" setup>
import {
reactive,
ref
} from "vue"
import {
navTo
} from "@/utils/utils"
import {
onLoad,
onUnload
} from "@dcloudio/uni-app";
import {
request
} from "@/utils/network/request.js";
import {
orderDetail,
CardlossStatus
} from "@/utils/network/api.js";
import {
msg
} from "@/utils/utils";
import {
getCredentialType
} from "@/datas/credentialType.js";
import {
getEtcCardStatus
} from "@/datas/etcCardStatus.js";
import {
getObuStatus
} from "@/datas/obuStatus.js";
import {
stringToJson
} from "@/utils/network/encryption";
const state = reactive({
data: {
cardStatus: undefined,
obuStatus: undefined,
},
type: undefined
});
/*视图进入后操作*/
onLoad((option) => {
queryOrderDetail(option.id).then((val: any) => {
state.data = val
})
});
onUnload(() => {
});
/*下一步*/
const nextACtion = () => {
if (state.data.cardId.length > 0 && state.data.obuId.length < 1) {
state.type = 1 //只有卡
} else if (state.data.cardId.length < 1 && state.data.obuId.length > 0) {
state.type = 2 //只有设备
} else if (state.data.cardId.length > 0 && state.data.obuId.length > 0) {
state.type = 3 //两者都有
}
navTo(
`/after-sale/ETC-log-off/etc-log-off?type=${state.type}&&mobile=${state.data.customerTel}&&cardId=${state.data.cardId}&&obuId=${state.data.obuId}&&orderId=${state.data.orderId}`)
}
const queryOrderDetail = (id) => {
return new Promise(async (resolve, reject) => {
const res = await request(orderDetail, {
type: 2,
data: {
id: id
},
method: "POST",
showLoading: true,
});
const data = stringToJson(res.bizContent);
resolve(data);
}).catch((error) => {
reject(error);
});
}
</script>
<style>
page {
width: 100%;
height: 100%;
background-color: #fff;
}
</style>
<style lang="scss" scoped>
.selectCar-box {
// width: 100%;
// height: 100%;
padding: 30rpx;
.title {
font-size: 30rpx;
font-family: Microsoft YaHei UI;
font-weight: 400;
color: #333333;
margin-bottom: 30rpx;
}
.details {
.title {
font-size: 30rpx;
font-family: Microsoft YaHei UI;
font-weight: 400;
color: #333333;
margin-bottom: 30rpx;
}
.details-item {
display: flex;
font-size: 26rpx;
font-family: Noto Sans S Chinese;
font-weight: 400;
color: #999999;
margin-bottom: 30rpx;
text {
font-size: 26rpx;
font-family: Noto Sans S Chinese;
font-weight: 400;
color: #333333;
}
}
}
.card {
height: 150rpx;
background: #FFFFFF;
box-shadow: 0rpx 4rpx 13rpx 3rpx rgba(223, 223, 223, 0.8);
border-radius: 20rpx;
padding: 30rpx;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 60rpx;
.card-left {
display: flex;
align-items: center;
image {
width: 100rpx;
height: 90rpx;
}
.card-center {
margin-left: 30rpx;
.card-center-head {
font-size: 32rpx;
font-family: Noto Sans S Chinese;
font-weight: 400;
color: #333333;
}
.tips {
font-size: 26rpx;
font-family: Noto Sans S Chinese;
font-weight: 400;
color: #666666;
.tips-card {
width: 70rpx;
height: 40rpx;
background: #D3F2EF;
border-radius: 6rpx;
font-size: 20rpx;
font-family: Noto Sans S Chinese;
font-weight: 400;
color: #0A8F8A;
padding: 5rpx 10rpx;
margin-left: 20rpx;
}
}
}
}
.choose-item {
margin-right: 20rpx;
width: 50rpx;
height: 50rpx;
border: 1rpx solid #00B38B;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
.active {
width: 38rpx;
height: 38rpx;
background: #00B38B;
border-radius: 50%;
}
}
}
.remark {
font-size: 26rpx;
font-family: Microsoft YaHei UI;
font-weight: 400;
color: #666666;
text-indent: 30rpx;
margin-bottom: 30rpx;
}
.submit {
margin-top: 100rpx;
width: 670rpx;
height: 80rpx;
background: linear-gradient(-90deg, #43A1E0 0%, #13E7C1 100%);
border-radius: 40rpx;
font-size: 32rpx;
font-family: Noto Sans S Chinese;
font-weight: 400;
color: #FFFFFF;
line-height: 80rpx;
}
}
</style>

+ 161
- 97
after-sale/ETC-log-off/select-car.vue Ver arquivo

@@ -1,98 +1,162 @@
<template>
<view class="selectCar-box">
<view class="item" v-for="(item,i) in list" :key="i">
<view class="iten-left">
<image :src="`${$imgUrl}che.png`" mode=""></image>
<text>{{item.name}}</text>
</view>
<view class="choose-item" @click="choose(i,item)">
<view class="active" v-if="flag==i">
</view>
</view>
</view>
</view>
</template>

<script lang="ts" setup>
import {reactive,ref} from"vue"
import {navTo} from "@/utils/utils"

const list=reactive([
{name:"A12345"},
{name:"B12345"},
{name:"C12345"},
])
const flag=ref('0')

const choose=(i,item)=>{
flag.value=i
console.log("选择得数据",item);
navTo('/after-sale/ETC-log-off/log-off-confirm')
}
</script>

<style>
page {
width: 100%;
height: 100%;
background-color: #EEF7F7;
}
</style>
<style lang="scss" scoped>
.selectCar-box {
// width: 100%;
height: 100%;
padding: 30rpx;

.item {
padding: 20rpx;
display: flex;
justify-content: space-between;
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;
}
}
.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%;
}

}


}
<template>
<view class="selectCar-box">
<view v-if="state.list.length>0" @click="choose(i,item)" class="item" v-for="(item,i) in state.list" :key="i">
<view class="iten-left">
<image :src="`${$imgUrl}che.png`" mode=""></image>
<text>{{item.vehiclePlate}}</text>
</view>
<view class="choose-item">
<view class="active" v-if="flag==i">
</view>
</view>
</view>
<view v-else class="flex">
暂无车辆订单信息
</view>
</view>
</template>
<script lang="ts" setup>
import {
reactive,
ref
} from "vue"
import {
navTo
} from "@/utils/utils"
import {
onLoad,
onShow
} from "@dcloudio/uni-app";
import {
orderList
} from "@/utils/network/api.js";
import {
request
} from "@/utils/network/request.js";
import {
msg
} from "@/utils/utils";
import {
getItem,
StorageKeys,
setItem
} from "@/utils/storage";
import {
stringToJson
} from "@/utils/network/encryption";
const state = reactive({
list: []
});
onLoad(() => {
quanCheckActionTrue().then((item: any) => {
state.list = item.data
console.log(item)
})
});
const quanCheckActionTrue = () => {
var data = {
opId: getItem(StorageKeys.OpenId),
source: 'WECHAT',
tabIndex: '0',
orderStep: '11',
isValueCard: '2'
};
const options = {
type: 2,
data: data,
method: "POST",
showLoading: true,
};
return new Promise(async (resolve, reject) => {
const res = await request(orderList, options);
const data = stringToJson(res.bizContent);
resolve(data);
}).catch((error) => {
reject(error);
});
}
const flag = ref('0')
const choose = (i, item) => {
navTo(`/after-sale/ETC-log-off/log-off-confirm?id=${item.id}`)
}
</script>
<style>
page {
width: 100%;
height: 100%;
background-color: #EEF7F7;
}
</style>
<style lang="scss" scoped>
.flex {
display: flex;
justify-content: center;
}
.selectCar-box {
// width: 100%;
height: 100%;
padding: 30rpx;
.item {
padding: 20rpx;
display: flex;
justify-content: space-between;
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;
}
}
.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%;
}
}
}
</style>

+ 510
- 508
after-sale/ETC-log-off/upload-card.vue
Diferenças do arquivo suprimidas por serem muito extensas
Ver arquivo


+ 8
- 0
after-sale/arrears/arrears.vue Ver arquivo

@@ -0,0 +1,8 @@
<template>
</template>

<script>
</script>

<style>
</style>

+ 4
- 4
after-sale/card-loss-reporting/cardloss-confirm.vue Ver arquivo

@@ -177,10 +177,10 @@
} else if (type.value === '2') {
//obu正常
if (state.data.obuStatus === 1) {
wx.showActionSheet('设备挂失', '请确认是否执行设备挂失操作', 2)
showActionSheet('设备挂失', '请确认是否执行设备挂失操作', 2)
} else if (state.data.obuStatus === 6) {
wx.showActionSheet('签解挂', '请确认是否执行签解挂操作', 5)
showActionSheet('签解挂', '请确认是否执行签解挂操作', 5)
}
}
@@ -191,9 +191,9 @@
}
if (type.value === 3) {
if (state.data.cardStatus && state.data.obuStatus === 1) {
wx.showActionSheet('卡签挂失', '请确认是否执行卡签挂失操作', 3)
showActionSheet('卡签挂失', '请确认是否执行卡签挂失操作', 3)
} else {
wx.showActionSheet('卡签解挂', '请确认是否执行卡签解挂操作', 6)
showActionSheet('卡签解挂', '请确认是否执行卡签解挂操作', 6)
}
}

+ 1
- 1
manifest.json Ver arquivo

@@ -52,7 +52,7 @@
"quickapp" : {},
/* 小程序特有相关 */
"mp-weixin" : {
"appid" : "wx008c60533388527a",
"appid" : "wx214b4f8de36a0181",
"setting" : {
"urlCheck" : false,
"checkSiteMap" : false,

+ 7
- 0
pages.json Ver arquivo

@@ -68,6 +68,13 @@
{
"root": "after-sale", //售后相关
"pages": [
{
"path": "arrears/arrears",
"style": {
"navigationBarTitleText": "欠费补缴",
"enablePullDownRefresh": false
}
},
{
"path": "deviceInfo/deviceInfo",
"style": {

+ 1
- 1
pages/service/service.vue Ver arquivo

@@ -164,7 +164,7 @@
</view>
<view class="text">储值卡圈存</view>
</view>
<view class="item-box">
<view class="item-box" @click="$util.navTo('/after-sale/arrears/arrears')">
<view class="item bg-blue" :style="{'--background':bgBlue}">
<image :src="`${$imgUrl}service/imgs/qfbj.png`" />
</view>

+ 2
- 1
utils/network/api.js Ver arquivo

@@ -11,7 +11,7 @@ export const regist = "3"; // 统一会员平台个人账号注册
export const login = "4"; //统一会员平台个人账号手机号密码登录
export const loginCode = "55"; //统一会员平台个人账号手机号验证码登录
export const resetPwd = "52"; //会员平台个人账号修改密码手机号验证码接口
export const getToken = "5"; //统一会员平台登录确认接口(用于换取openId和token)
export const getToken = "5"; //统一会员平台登录确认接口(用于换取openId和token)
export const checkCode = "966"; //校验验证码
/*地址管理*/
@@ -92,6 +92,7 @@ export const labelHangUp = "87"; //签挂起
export const CardRelease = "86"; //卡解挂
export const CardHangUpStatus = "81"; //卡挂起
export const CardlossStatus = '82' //卡签挂失/解挂
export const confirmSignCancellation = '897' //卡确认注销接口
//圈层
export const quanCheck = "69"; //圈层检测

Carregando…
Cancelar
Salvar