284 lines
6.5 KiB
Vue
284 lines
6.5 KiB
Vue
<template>
|
||
<view class="page">
|
||
<u-navbar title="上报异常" :border-bottom="false" :background="bgc" title-color='#fff' back-icon-color="#fff" title-size='36'
|
||
height='50'></u-navbar>
|
||
<view class="box">
|
||
<view class="list">
|
||
<view class="sbbh">
|
||
<view class="onr">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/u9XHHt8N6XvPoqW2K8q1" mode=""></image> 设备编号：
|
||
</view>
|
||
<view class="inp">
|
||
<input type="text" placeholder="请输入设备编号" style="padding-left: 20rpx;" v-model="deviceNo"/>
|
||
</view>
|
||
<view class="sm" @click="scanQRCode">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uNX9Ls3s68OsYgOTQ8dD" mode=""></image>
|
||
</view>
|
||
</view>
|
||
<view class="bz">
|
||
<view class="tit">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/u9XHHt8N6XvPoqW2K8q1" mode=""></image>故障原因：
|
||
</view>
|
||
<view class="wb">
|
||
<textarea name="" placeholder="请输入原因" id="" cols="30" rows="10" v-model="yuanyi"></textarea>
|
||
</view>
|
||
</view>
|
||
<view class="gzyy">
|
||
<view class="" style="padding-left: 60rpx;">
|
||
姓名：
|
||
</view>
|
||
<view class="tcsb">
|
||
<input type="text" placeholder="请输入真实姓名" v-model="name"/>
|
||
</view>
|
||
</view>
|
||
<view class="gzyy">
|
||
<view class="" style="padding-left: 10rpx;">
|
||
联系电话：
|
||
</view>
|
||
<view class="tcsb">
|
||
<input type="text" placeholder="请输入电话号码" v-model="phone"/>
|
||
</view>
|
||
</view>
|
||
<view class="bz">
|
||
<view class="tit" style="padding-left: 30rpx;">
|
||
详细地址：
|
||
</view>
|
||
<view class="wb">
|
||
<textarea name="" placeholder="请输入寄件地址" id="" cols="30" rows="10" v-model="dizhi"></textarea>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="shangb" @click="btnshangb">
|
||
上报
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
yuanyi:'',
|
||
name:'',
|
||
phone:'',
|
||
dizhi:'',
|
||
deviceNo:'',
|
||
}
|
||
},
|
||
methods: {
|
||
scanQRCode() {
|
||
uni.scanCode({
|
||
onlyFromCamera: true,
|
||
scanType: ['qrCode'],
|
||
success: res => {
|
||
function getQueryParam(url, paramName) {
|
||
let regex = new RegExp(`[?&]${paramName}=([^&]*)`);
|
||
let results = regex.exec(url);
|
||
return results ? decodeURIComponent(results[1].replace(/\+/g, ' ')) : null;
|
||
}
|
||
let sceneValue = res.result
|
||
let decodedValue = decodeURIComponent(sceneValue);
|
||
this.deviceNo = getQueryParam(decodedValue, 's')
|
||
// this.deviceNo = res.result;
|
||
},
|
||
fail: err => {
|
||
console.error('扫描失败：', err);
|
||
uni.showToast({
|
||
title: '扫描失败',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
});
|
||
},
|
||
|
||
btnshangb(){
|
||
let data = {
|
||
deviceNo:this.deviceNo,
|
||
content:this.yuanyi,
|
||
name:this.name,
|
||
mobile:this.phone,
|
||
address:this.dizhi
|
||
}
|
||
this.$u.post('/app/abnormal/submit',data).then(res => {
|
||
if(this.deviceNo == ''){
|
||
uni.showToast({
|
||
title: '设备编号不能为空',
|
||
icon: 'none',
|
||
duration: 1000
|
||
});
|
||
}else if(this.yuanyi == ''){
|
||
uni.showToast({
|
||
title: '故障原因不能为空',
|
||
icon: 'none',
|
||
duration: 1000
|
||
});
|
||
}else if(this.name == ''){
|
||
uni.showToast({
|
||
title: '姓名不能为空',
|
||
icon: 'none',
|
||
duration: 1000
|
||
});
|
||
}else if(this.dizhi == ''){
|
||
uni.showToast({
|
||
title: '地址不能为空',
|
||
icon: 'none',
|
||
duration: 1000
|
||
});
|
||
}else {
|
||
if (res.code == 200) {
|
||
uni.showToast({
|
||
title: '上报成功',
|
||
icon: 'success',
|
||
duration: 1000
|
||
})
|
||
setTimeout(()=>{
|
||
uni.navigateBack()
|
||
},1000)
|
||
} else if (res.code == 401) {
|
||
uni.reLaunch({
|
||
url:'/pages/login/login'
|
||
})
|
||
}else if(res.code == 500){
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none',
|
||
duration: 1000
|
||
});
|
||
}
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
/deep/ .u-title{
|
||
padding-bottom: 22rpx;
|
||
}
|
||
/deep/ .u-icon__icon{
|
||
padding-bottom: 22rpx;
|
||
}
|
||
page {
|
||
background: linear-gradient(180deg, #8883F0 0%, rgba(255, 255, 255, 0) 100%);
|
||
}
|
||
input{
|
||
font-size: 26rpx;
|
||
}
|
||
.page {
|
||
width: 750rpx;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
|
||
.box {
|
||
width: 750rpx;
|
||
height: 1440rpx;
|
||
background: #F4F5F7;
|
||
padding-top: 30rpx;
|
||
.shangb{
|
||
width: 444rpx;
|
||
height: 90rpx;
|
||
background: linear-gradient( 270deg, #A29EFF 0%, #8883F0 100%);
|
||
border-radius: 54rpx 54rpx 54rpx 54rpx;
|
||
font-weight: 500;
|
||
font-size: 40rpx;
|
||
color: #FFFFFF;
|
||
text-align: center;
|
||
line-height: 90rpx;
|
||
position: fixed;
|
||
bottom: 562rpx;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
}
|
||
.list {
|
||
width: 100%;
|
||
width: 680rpx;
|
||
height: 668rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 24rpx 24rpx 24rpx 24rpx;
|
||
margin: auto;
|
||
padding: 42rpx 44rpx;
|
||
box-sizing: border-box;
|
||
.sbbh {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 28rpx;
|
||
color: #3D3D3D;
|
||
.onr {
|
||
margin-top: 10rpx;
|
||
image {
|
||
width: 20rpx;
|
||
height: 20rpx;
|
||
display: inline-block;
|
||
margin-right: 10rpx;
|
||
}
|
||
}
|
||
|
||
.inp {
|
||
// margin-left: 10rpx;
|
||
input {
|
||
width: 320rpx;
|
||
height: 50rpx;
|
||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||
border: 2rpx solid #C9CDD4;
|
||
}
|
||
}
|
||
.sm{
|
||
image{
|
||
width: 52rpx;
|
||
height: 52rpx;
|
||
// background-color: #ccc;
|
||
}
|
||
}
|
||
}
|
||
.gzyy{
|
||
margin-top: 20rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 28rpx;
|
||
color: #3D3D3D;
|
||
padding-left: 24rpx;
|
||
.tcsb{
|
||
width: 412rpx;
|
||
height: 50rpx;
|
||
line-height: 50rpx;
|
||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||
border: 2rpx solid #C9CDD4;
|
||
font-size: 28rpx;
|
||
color: #3D3D3D;
|
||
padding-left: 30rpx;
|
||
}
|
||
}
|
||
.bz{
|
||
margin-top: 20rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 28rpx;
|
||
color: #3D3D3D;
|
||
.tit{
|
||
image{
|
||
width: 20rpx;
|
||
height: 20rpx;
|
||
display: inline-block;
|
||
margin-right: 10rpx;
|
||
}
|
||
}
|
||
.wb{
|
||
width: 412rpx;
|
||
height: 150rpx;
|
||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||
border: 2rpx solid #C9CDD4;
|
||
padding: 10rpx 30rpx;
|
||
textarea{
|
||
width: 412rpx;
|
||
height: 150rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |