<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" @click="choose(1)"> | |||||
<view class="active" v-if="flag.includes(1)"> | |||||
</view> | |||||
</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" @click="choose(2)"> | |||||
<view class="active" v-if="flag.includes(2)"> | |||||
</view> | |||||
</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 type = ref('') | |||||
const toPage = () => { | |||||
if (flag.length == 0) { | |||||
uni.showToast({ | |||||
title: '请至少勾选一项', | |||||
}); | |||||
} else { | |||||
wx.showModal({ | |||||
title: '设备挂失', | |||||
content: '请确认是否执行挂失操作', | |||||
success: function(res) { | |||||
if (res.confirm) { | |||||
console.log('用户点击确定'); | |||||
navTo(`/after-sale/card-loss-reporting/cardloss?type=${type.value}`) | |||||
} else if (res.cancel) { | |||||
console.log('用户点击取消'); | |||||
} | |||||
} | |||||
}); | |||||
} | |||||
} | |||||
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); | |||||
} | |||||
if (flag.length == 2) { | |||||
type.value = '3' | |||||
} else if (flag[0] == 1) { | |||||
type.value = '1' | |||||
} else { | |||||
type.value = '2' | |||||
} | |||||
console.log(type.value); | |||||
} | |||||
</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; | |||||
} | |||||
} | |||||
<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="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 class="choose-item" @click="choose(1)"> | |||||
<view class="active" v-if="flag.includes(1)"> | |||||
</view> | |||||
</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"> | |||||
{{state.data.obuId}} | |||||
</view> | |||||
<view class="tips"> | |||||
<!-- <text>储蓄卡</text> --> | |||||
<text class="tips-card">{{getObuStatus(state.data.obuStatus)}}</text> | |||||
</view> | |||||
</view> | |||||
</view> | |||||
<view class="choose-item" @click="choose(2)"> | |||||
<view class="active" v-if="flag.includes(2)"> | |||||
</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, | |||||
} | |||||
}); | |||||
const flag = reactive([]) | |||||
const type = ref('') | |||||
/*视图进入后操作*/ | |||||
onLoad((option) => { | |||||
queryOrderDetail(option.id).then((val: any) => { | |||||
state.data = val | |||||
}) | |||||
/*监听手机号验证后的回调*/ | |||||
uni.$on('queryCardlossStatus', function(type) { | |||||
queryCardlossStatus(type).then((val: any)) => { | |||||
navTo( | |||||
`/after-sale/card-loss-reporting/card-result` | |||||
) | |||||
}) | |||||
}) | |||||
}); | |||||
onUnload(() => { | |||||
/*移除监听*/ | |||||
uni.$off('queryCardlossStatus') | |||||
}); | |||||
/*下一步*/ | |||||
const nextACtion = () => { | |||||
if (flag.length === 0) { | |||||
uni.showToast({ | |||||
title: '请至少勾选一项', | |||||
}); | |||||
} else if (flag.length === 1) { | |||||
if (type.value === '1') { | |||||
//卡正常 | |||||
if (state.data.cardStatus === 1) { | |||||
showModelAction('卡挂失', '请确认是否执行卡挂失操作', 1) | |||||
} else if (state.data.cardStatus === 6) { | |||||
showModelAction('卡解挂', '请确认是否执行卡解挂操作', 4) | |||||
} | |||||
} else if (type.value === '2') { | |||||
//obu正常 | |||||
if (state.data.obuStatus === 1) { | |||||
wx.showActionSheet('设备挂失', '请确认是否执行设备挂失操作', 2) | |||||
} else if (state.data.obuStatus === 6) { | |||||
wx.showActionSheet('签解挂', '请确认是否执行签解挂操作', 5) | |||||
} | |||||
} | |||||
} else if (flag.length === 2) { | |||||
if ((state.data.cardStatus !== state.data.obuStatus)) { | |||||
msg('当前的卡状态和obu状态不支持批量操作') | |||||
return; | |||||
} | |||||
if (type.value === 3) { | |||||
if (state.data.cardStatus && state.data.obuStatus === 1) { | |||||
wx.showActionSheet('卡签挂失', '请确认是否执行卡签挂失操作', 3) | |||||
} else { | |||||
wx.showActionSheet('卡签解挂', '请确认是否执行卡签解挂操作', 6) | |||||
} | |||||
} | |||||
} | |||||
} | |||||
const showModelAction = (title, content, type) => { | |||||
wx.showModal({ | |||||
title: '卡签解挂', | |||||
content: '请确认是否执行卡签解挂操作', | |||||
success: function(res) { | |||||
if (res.confirm) { | |||||
uni.$emit('queryCardlossStatus', { | |||||
type: type | |||||
}) | |||||
navTo( | |||||
`/after-sale/card-loss-reporting/cardloss?type=${type}` | |||||
) | |||||
} | |||||
} | |||||
}); | |||||
} | |||||
const choose = (data) => { | |||||
if (!flag.includes(data)) { | |||||
flag.push(data) | |||||
console.log(flag); | |||||
} else { | |||||
flag.splice(flag.indexOf(data), 1) | |||||
console.log(flag); | |||||
} | |||||
if (flag.length == 2) { | |||||
type.value = '3' | |||||
} else if (flag[0] == 1) { | |||||
type.value = '1' | |||||
} else { | |||||
type.value = '2' | |||||
} | |||||
} | |||||
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); | |||||
}); | |||||
} | |||||
const queryCardlossStatus = (val: any) => { | |||||
var data = { | |||||
cardId: state.data.cardId, | |||||
obuId: state.data.obuId, | |||||
operation: val, | |||||
orderId: state.data.orderId | |||||
}; | |||||
const options = { | |||||
type: 2, | |||||
data: data, | |||||
method: "POST", | |||||
showLoading: true, | |||||
}; | |||||
return new Promise(async (resolve, reject) => { | |||||
const res = await request(CardlossStatus, options); | |||||
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> | </style> |
<template> | |||||
<view class="formBox"> | |||||
<view class="from_item"> | |||||
<text class="label">账号验证</text> | |||||
<input type="text" placeholder="输入验证码" v-model="model1.uname" placeholder-style="color:#000"> | |||||
</view> | |||||
<view class="from_item"> | |||||
<text class="label">手机号码</text> | |||||
<input type="text" placeholder="" v-model="model1.phone" placeholder-style="color:#000" disabled="true"> | |||||
</view> | |||||
<view class="from_item"> | |||||
<text class="label">验证码</text> | |||||
<input type="text" placeholder="请输入验证码" placeholder-style="color:#000"> | |||||
<text class="btn" @click="getCode">获取验证码</text> | |||||
</view> | |||||
<button class="submit" @click="submit">验证</button> | |||||
</view> | |||||
</template> | |||||
<script setup lang="ts"> | |||||
import { | |||||
reactive,ref | |||||
} from "vue"; | |||||
import { | |||||
navTo | |||||
} from "@/utils/utils" | |||||
import { | |||||
CardlossStatus | |||||
} from "@/utils/network/api.js" | |||||
import { | |||||
onLoad, | |||||
onShow | |||||
} from "@dcloudio/uni-app"; | |||||
import { | |||||
stringToJson | |||||
} from "../../utils/network/encryption.js"; | |||||
import { | |||||
request | |||||
} from "../../utils/network/request.js"; | |||||
let model1 = reactive({ | |||||
uname: '输入验证码', | |||||
phone: '135****9090', | |||||
code: '' | |||||
}) | |||||
const getCode = () => { | |||||
console.log(123); | |||||
} | |||||
const type=ref('') | |||||
onLoad((options:any) => { | |||||
console.log(options, "传参"); | |||||
type.value=options.type | |||||
}) | |||||
// 卡签挂失/解除挂失 | |||||
const changeCardstatus = (type) => { | |||||
//参数说明 | |||||
let options = { | |||||
type: 2, //type: 2,JSON格式提交数据(默认表单形式提交) | |||||
data: { | |||||
cardId: '', //卡号 | |||||
obuId: "", //签号 | |||||
operation: "4", //1-卡挂失, 2-牵挂失, 3-卡签挂失, 4-卡解挂 ,5-签解挂 | |||||
orderId: '20230225155521777646302', //订单编号 | |||||
}, //请求参数 | |||||
method: "POST", //提交方式(默认POST) | |||||
showLoading: true, //是否显示加载中(默认显示) | |||||
}; | |||||
//调用方式 | |||||
request(CardlossStatus, options) | |||||
.then((res) => { | |||||
stringToJson(res.bizContent) | |||||
if(stringToJson(res.statusCode)==0){ | |||||
navTo('/after-sale/card-loss-reporting/card-result') | |||||
} | |||||
}) | |||||
.catch((err) => { | |||||
console.log(err); | |||||
}); | |||||
} | |||||
const submit = () => { | |||||
console.log("111"); | |||||
changeCardstatus(type.value) | |||||
// navTo('/after-sale/card-loss-reporting/card-result') | |||||
} | |||||
</script> | |||||
<style> | |||||
page { | |||||
width: 100%; | |||||
height: 100%; | |||||
} | |||||
</style> | |||||
<style lang="scss" scoped> | |||||
.formBox { | |||||
height: 90%; | |||||
width: 100%; | |||||
// background-color: red; | |||||
.from_item { | |||||
padding: 30rpx; | |||||
padding-top: 60rpx; | |||||
position: relative; | |||||
.label { | |||||
font-size: 28rpx; | |||||
font-family: Microsoft YaHei; | |||||
font-weight: 400; | |||||
color: #777777; | |||||
} | |||||
input { | |||||
font-size: 32rpx; | |||||
font-family: Microsoft YaHei; | |||||
font-weight: 400; | |||||
color: #333333; | |||||
line-height: 58rpx; | |||||
border-bottom: 1rpx solid #DCDCDC; | |||||
margin-top: 50rpx; | |||||
padding-bottom: 10rpx; | |||||
} | |||||
.btn { | |||||
position: absolute; | |||||
right: 45rpx; | |||||
bottom: 48rpx; | |||||
background: transparent; | |||||
font-size: 30rpx; | |||||
color: #15E5C1; | |||||
z-index: 999; | |||||
} | |||||
} | |||||
.submit { | |||||
background: linear-gradient(to left, #43A1E0 0%, #13E7C1 100%); | |||||
width: 670rpx; | |||||
height: 80rpx; | |||||
line-height: 80rpx; | |||||
color: #fff; | |||||
border-radius: 100rpx; | |||||
position: fixed; | |||||
bottom: 100rpx; | |||||
left: 50%; | |||||
transform: translate(-50%); | |||||
font-size: 32rpx; | |||||
font-family: Microsoft YaHei; | |||||
font-weight: 400; | |||||
color: #FFFFFF; | |||||
line-height: 80rpx; | |||||
} | |||||
} | |||||
<template> | |||||
<view class="formBox"> | |||||
<view class="from_item"> | |||||
<text class="label">账号验证</text> | |||||
</view> | |||||
<view class="from_item"> | |||||
<text class="label">手机号码</text> | |||||
<input type="text" placeholder="" v-model="model.mobile" placeholder-style="color:#000" disabled="true"> | |||||
</view> | |||||
<view class="from_item"> | |||||
<text class="label">验证码</text> | |||||
<input type="text" placeholder="请输入验证码" v-model="model.code" placeholder-style="color:#000"> | |||||
<text class="btn" @click="getCode">获取验证码</text> | |||||
</view> | |||||
<button class="submit" @click="submit">验证</button> | |||||
</view> | |||||
</template> | |||||
<script setup lang="ts"> | |||||
import { | |||||
reactive, | |||||
ref | |||||
} from "vue"; | |||||
import { | |||||
navTo | |||||
} from "@/utils/utils" | |||||
import { | |||||
onLoad, | |||||
onShow | |||||
} from "@dcloudio/uni-app"; | |||||
import { | |||||
stringToJson | |||||
} from "../../utils/network/encryption.js"; | |||||
import { | |||||
request | |||||
} from "../../utils/network/request.js"; | |||||
import { | |||||
sendCode, | |||||
checkCode | |||||
} from "@/utils/network/api.js"; | |||||
const type = ref('') | |||||
let model = reactive({ | |||||
code: '', | |||||
mobile: '', | |||||
}) | |||||
const getCode = () => { | |||||
const options = { | |||||
type: 2, | |||||
data: { | |||||
mobile: model.mobile | |||||
}, | |||||
method: "POST", | |||||
showLoading: true, | |||||
}; | |||||
request(sendCode, options) | |||||
.then((res) => { | |||||
msg("验证码发送成功!"); | |||||
}) | |||||
.catch((err) => { | |||||
console.log(err); | |||||
}); | |||||
} | |||||
onLoad((options: any) => { | |||||
type.value = options.type | |||||
}) | |||||
const submit = () => { | |||||
const options = { | |||||
type: 2, | |||||
data: { | |||||
mobile: model.mobile, | |||||
code: model.code | |||||
}, | |||||
method: "POST", | |||||
showLoading: true, | |||||
}; | |||||
request(checkCode, options) | |||||
.then((res) => { | |||||
uni.$emit('queryCardlossStatus', { | |||||
type: type.value | |||||
}) | |||||
}) | |||||
.catch((err) => { | |||||
console.log(err); | |||||
}); | |||||
} | |||||
</script> | |||||
<style> | |||||
page { | |||||
width: 100%; | |||||
height: 100%; | |||||
} | |||||
</style> | |||||
<style lang="scss" scoped> | |||||
.formBox { | |||||
height: 90%; | |||||
width: 100%; | |||||
// background-color: red; | |||||
.from_item { | |||||
padding: 30rpx; | |||||
padding-top: 60rpx; | |||||
position: relative; | |||||
.label { | |||||
font-size: 28rpx; | |||||
font-family: Microsoft YaHei; | |||||
font-weight: 400; | |||||
color: #777777; | |||||
} | |||||
input { | |||||
font-size: 32rpx; | |||||
font-family: Microsoft YaHei; | |||||
font-weight: 400; | |||||
color: #333333; | |||||
line-height: 58rpx; | |||||
border-bottom: 1rpx solid #DCDCDC; | |||||
margin-top: 50rpx; | |||||
padding-bottom: 10rpx; | |||||
} | |||||
.btn { | |||||
position: absolute; | |||||
right: 45rpx; | |||||
bottom: 48rpx; | |||||
background: transparent; | |||||
font-size: 30rpx; | |||||
color: #15E5C1; | |||||
z-index: 999; | |||||
} | |||||
} | |||||
.submit { | |||||
background: linear-gradient(to left, #43A1E0 0%, #13E7C1 100%); | |||||
width: 670rpx; | |||||
height: 80rpx; | |||||
line-height: 80rpx; | |||||
color: #fff; | |||||
border-radius: 100rpx; | |||||
position: fixed; | |||||
bottom: 100rpx; | |||||
left: 50%; | |||||
transform: translate(-50%); | |||||
font-size: 32rpx; | |||||
font-family: Microsoft YaHei; | |||||
font-weight: 400; | |||||
color: #FFFFFF; | |||||
line-height: 80rpx; | |||||
} | |||||
} | |||||
</style> | </style> |
<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/card-loss-reporting/cardloss-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 list = reactive([{ | |||||
name: "A12345" | |||||
}, | |||||
{ | |||||
name: "B12345" | |||||
}, | |||||
{ | |||||
name: "C12345" | |||||
}, | |||||
]) | |||||
const flag = ref('0') | |||||
const choose = (i, item) => { | |||||
console.log(item.cardId) | |||||
navTo(`/after-sale/card-loss-reporting/cardloss-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> | </style> |
//车辆类型 | |||||
export const etcCardStatus = [ | |||||
{ | |||||
id: 0, | |||||
title: '申请' | |||||
}, | |||||
{ | |||||
id: 1, | |||||
title: '正常' | |||||
}, | |||||
{ | |||||
id: 2, | |||||
title: '有卡挂起' | |||||
}, | |||||
{ | |||||
id: 3, | |||||
title: '无卡挂起' | |||||
}, | |||||
{ | |||||
id: 4, | |||||
title: '有卡注销' | |||||
}, | |||||
{ | |||||
id: 5, | |||||
title: '无卡注销' | |||||
}, | |||||
{ | |||||
id: 6, | |||||
title: '卡挂失' | |||||
}, | |||||
{ | |||||
id: 9, | |||||
title: '预注销' | |||||
}, | |||||
{ | |||||
id: 99, | |||||
title: '已删除' | |||||
} | |||||
]; | |||||
//获取车辆类型 | |||||
export const getEtcCardStatus = (id) => { | |||||
let types = etcCardStatus.filter(item => item.id == id); | |||||
return types[0].title | |||||
} | |||||
//车辆类型 | |||||
export const obuStatus = [{ | |||||
id: 0, | |||||
title: '未安装' | |||||
}, | |||||
{ | |||||
id: 1, | |||||
title: '正常' | |||||
}, | |||||
{ | |||||
id: 2, | |||||
title: '有签挂起' | |||||
}, | |||||
{ | |||||
id: 3, | |||||
title: '无签挂起' | |||||
}, | |||||
{ | |||||
id: 4, | |||||
title: '有签注销' | |||||
}, | |||||
{ | |||||
id: 5, | |||||
title: '无签注销' | |||||
}, | |||||
{ | |||||
id: 6, | |||||
title: '标签挂失' | |||||
}, | |||||
{ | |||||
id: 7, | |||||
title: '已过户' | |||||
}, | |||||
{ | |||||
id: 8, | |||||
title: '维修中' | |||||
}, | |||||
{ | |||||
id: 9, | |||||
title: '发行申请' | |||||
}, | |||||
{ | |||||
id: 10, | |||||
title: '车型不符' | |||||
}, | |||||
{ | |||||
id: 11, | |||||
title: '已发行' | |||||
}, | |||||
{ | |||||
id: 99, | |||||
title: '已删除' | |||||
} | |||||
]; | |||||
//获取车辆类型 | |||||
export const getObuStatus = (id) => { | |||||
let types = obuStatus.filter(item => item.id == id); | |||||
return types[0].title | |||||
} |
export const appId = "52030131"; //应用appid 综合业务支撑平台使用 | export const appId = "52030131"; //应用appid 综合业务支撑平台使用 | ||||
export const loginTime = 86400; //登录有效时间(单位s) 1天 | export const loginTime = 86400; //登录有效时间(单位s) 1天 | ||||
export const wechatPayConfigId = "6a9a54bc01f6443faea7ffe132b19f6"; //支付配置编号 微信小程序支付 | export const wechatPayConfigId = "6a9a54bc01f6443faea7ffe132b19f6"; //支付配置编号 微信小程序支付 | ||||
export const wechatAppID = "wx008c60533388527a"; //小程序APPid | |||||
export const wechatSecret = "95197718b43b497f02732bd9f8011080"; //小程序AppSecret | |||||
export const wechatAppID = "wx214b4f8de36a0181"; //小程序APPid | |||||
export const wechatSecret = "125a44b60b00d7e8a3820cc4cbdbdae8"; //小程序AppSecret | |||||
/*统一 会员平台*/ | /*统一 会员平台*/ | ||||
export const sendCode = "2"; //统一会员平台发送验证码接口 | export const sendCode = "2"; //统一会员平台发送验证码接口 | ||||
export const login = "4"; //统一会员平台个人账号手机号密码登录 | export const login = "4"; //统一会员平台个人账号手机号密码登录 | ||||
export const loginCode = "55"; //统一会员平台个人账号手机号验证码登录 | export const loginCode = "55"; //统一会员平台个人账号手机号验证码登录 | ||||
export const resetPwd = "52"; //会员平台个人账号修改密码手机号验证码接口 | export const resetPwd = "52"; //会员平台个人账号修改密码手机号验证码接口 | ||||
export const getToken = "5"; //统一会员平台登录确认接口(用于换取openId和token) | |||||
export const getToken = "5"; //统一会员平台登录确认接口(用于换取openId和token) | |||||
export const checkCode = "966"; //校验验证码 | |||||
/*地址管理*/ | /*地址管理*/ | ||||
export const addressQuery = "27"; //地址管理查询 | export const addressQuery = "27"; //地址管理查询 |