@@ -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> |
@@ -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> |
@@ -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> |
@@ -0,0 +1,8 @@ | |||
<template> | |||
</template> | |||
<script> | |||
</script> | |||
<style> | |||
</style> |
@@ -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) | |||
} | |||
} | |||
@@ -52,7 +52,7 @@ | |||
"quickapp" : {}, | |||
/* 小程序特有相关 */ | |||
"mp-weixin" : { | |||
"appid" : "wx008c60533388527a", | |||
"appid" : "wx214b4f8de36a0181", | |||
"setting" : { | |||
"urlCheck" : false, | |||
"checkSiteMap" : false, |
@@ -68,6 +68,13 @@ | |||
{ | |||
"root": "after-sale", //售后相关 | |||
"pages": [ | |||
{ | |||
"path": "arrears/arrears", | |||
"style": { | |||
"navigationBarTitleText": "欠费补缴", | |||
"enablePullDownRefresh": false | |||
} | |||
}, | |||
{ | |||
"path": "deviceInfo/deviceInfo", | |||
"style": { |
@@ -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> |
@@ -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"; //圈层检测 |