chen
/
flying-monkey
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
flying-monkey/pages/repairsPage/repairsPage.vue

430 lines
13 KiB
Vue
Raw Normal View History

修改
2022-03-17 05:47:40 +00:00
<template>
<view class="content">
修改
2022-03-28 09:42:48 +00:00
<status-nav navBarTitle="添加报修" returnColor="#c2c2c2"></status-nav>
<container-subgroup>
<view slot="content" style="margin: 0 -30rpx;">
<view class="repairs-nav" style="margin-top: -30rpx;">
<view class="li" @click="repairsNavFun(index)" :class="item.state?'on':''"
v-for="(item,index) in navDataState">
{{item.title}}
</view>
</view>
<view class="repairs-hint padding">
<image class="icon" src="../../static/iocn/lp.png" mode="aspectFill"></image>
<view class="text">
请务必拍好故障照片或视频上传,便于技术工程师作为判断依据,带齐 相关维保设备。高效为您提供服务。
</view>
</view>
<view class="fault-type-title padding">故障类型：</view>
<view class="padding fault-type-content">
修改
2022-03-31 09:58:34 +00:00
<view class="li" @click="repairsTypeFun(index)" :class="index==indexType?'on':''"
修改
2022-03-28 09:42:48 +00:00
v-for="(item,index) in faultTypeData">
修改
2022-03-31 09:58:34 +00:00
{{item.name}}
修改
2022-03-28 09:42:48 +00:00
</view>
</view>
<view class="padding">
<view class="devicename" @click="scanCodeFun()" v-if="navDataState[0].state">
<view class="">
请填写设备名称和型号或扫描二维码
</view>
<image class="sm" src="../../static/iocn/sm.png" mode=""></image>
</view>
修改
2022-03-31 09:58:34 +00:00
<input v-model="data.device_name" class="devicename" placeholder="请填写设备名称和型号" v-else />
修改
2022-03-28 09:42:48 +00:00
<view class="fault-pictures">
<image class="img" src="../../static/iocn/gz.png" mode="aspectFill"></image>
<view class="text">
添加故障图片
</view>
</view>
修改
2022-03-31 09:58:34 +00:00
<textarea value="" v-model="data.condition" class="fault-description" placeholder="故障情况描述"
修改
2022-03-28 09:42:48 +00:00
placeholder-class="fault-description-text" />
<view class="detailed-address inputCss">
修改
2022-03-31 09:58:34 +00:00
<input type="text" v-model="data.address" value="" placeholder="请输入详细的上门服务地址"
placeholder-class="inputCss-input" />
修改
2022-03-28 09:42:48 +00:00
<image @click="mapFun()" src="../../static/iocn/map.png" class="map" mode="aspectFill"></image>
</view>
修改
2022-03-31 09:58:34 +00:00
<input type="text" class="inputCss" v-model="data.username" placeholder="请填写您的姓名"
placeholder-class="inputCss-input" value="" />
<input type="text" class="inputCss" v-model="data.phone" placeholder="请填写联系电话"
placeholder-class="inputCss-input" value="" />
<picker mode="date" @change="dateFun()">
<picker mode="time" @change="timeFun()">
<input type="text" class="inputCss" v-model="data.date" placeholder="请选择上门时间"
placeholder-class="inputCss-input" value="" />
修改
2022-03-25 03:41:31 +00:00
</picker>
修改
2022-03-31 09:58:34 +00:00
</picker>
修改
2022-03-28 09:42:48 +00:00
修改
2022-03-28 10:09:23 +00:00
<button class="submit-button" @click="submitButton()" type="default">提交故障申报</button>
修改
2022-03-28 09:42:48 +00:00
</view>
</view>
</container-subgroup>
修改
2022-03-17 05:47:40 +00:00
</view>
</template>
<script>
export default {
data() {
return {
single: "2021-04-3",
修改
2022-03-31 09:58:34 +00:00
data: {
is_device: 0,
fault_type: "",
device_name: "",
condition: "",
project_number:"",
address: "",
username: "",
phone: "",
date: ""
修改
2022-03-28 10:09:23 +00:00
},
修改
2022-03-31 09:58:34 +00:00
indexType: 0,
修改
2022-03-17 05:47:40 +00:00
navDataState: [{
title: "有设备",
修改
2022-03-31 09:58:34 +00:00
state: false,
is_device: 1
修改
2022-03-17 05:47:40 +00:00
},
{
title: "无设备",
修改
2022-03-31 09:58:34 +00:00
state: true,
is_device: 0
}
修改
2022-03-17 05:47:40 +00:00
],
修改
2022-03-31 09:58:34 +00:00
faultTypeData: []
修改
2022-03-17 05:47:40 +00:00
}
},
修改
2022-03-31 09:58:34 +00:00
onLoad() {
this.getType()
修改
2022-03-28 10:09:23 +00:00
},
修改
2022-03-17 05:47:40 +00:00
methods: {
修改
2022-03-31 09:58:34 +00:00
// 获取故障类型
getType() {
修改
2022-03-28 10:09:23 +00:00
// /universal/api.order/fault_type
this.$requst.post('/universal/api.work_order/fault_type').then(res => {
// this.$toolAll.tools.showToast(res.msg);
修改
2022-03-31 09:58:34 +00:00
if (res.code == 1) {
this.faultTypeData = [...res.data]
修改
2022-03-28 10:09:23 +00:00
} else {
修改
2022-03-31 09:58:34 +00:00
修改
2022-03-28 10:09:23 +00:00
}
})
},
修改
2022-03-17 05:47:40 +00:00
change(e) {
this.single = e;
console.log("-change事件:", e);
},
修改
2022-03-31 09:58:34 +00:00
// 获取日期
dateFun(data){
},
timeFun(){
},
修改
2022-03-28 09:42:48 +00:00
scanCodeFun() {
uni.scanCode({
修改
2022-03-17 05:47:40 +00:00
success: function(res) {
修改
2022-03-28 09:42:48 +00:00
console.log('条码类型：' + res.scanType);
console.log('条码内容：' + res.result);
修改
2022-03-17 05:47:40 +00:00
}
});
},
修改
2022-03-31 09:58:34 +00:00
submitButton() {
this.data.fault_type = this.faultTypeData[this.indexType].id
if (this.data.is_device == 0){
if (!this.data.device_name) {
this.$toolAll.tools.showToast("请填写设备名称或型号");
return
}
}else{
if (!this.data.project_number) {
this.$toolAll.tools.showToast("请扫描设备二维码");
return
}
}
if(!this.data.username){
this.$toolAll.tools.showToast("请填写您的姓名");
return
}
var reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/; //11位手机号码正则
if(!reg_tel.test(this.data.phone)){
this.$toolAll.tools.showToast("请正确填写您的电话");
return
}
return
this.$requst.post('/universal/api.work_order/repair').then(res => {
// this.$toolAll.tools.showToast(res.msg);
if (res.code == 1) {
} else {
}
})
console.log(this.data)
修改
2022-03-28 10:09:23 +00:00
},
修改
2022-03-28 09:42:48 +00:00
mapFun() {
修改
2022-03-31 09:58:34 +00:00
uni.getLocation({
type: 'gcj02', //返回可以用于uni.openLocation的经纬度
success: function(res) {
const latitude = res.latitude;
const longitude = res.longitude;
console.log(latitude, longitude, 78);
uni.chooseLocation({
success: function(res) {
console.log(res, 81);
console.log('位置名称：' + res.name);
console.log('详细地址：' + res.address);
console.log('纬度：' + res.latitude);
console.log('经度：' + res.longitude);
}
});
// uni.openLocation({
// latitude: latitude,
// longitude: longitude,
// success: function () {
// console.log('success');
// }
// });
}
});
修改
2022-03-28 09:42:48 +00:00
},
repairsNavFun(index) {
for (var i = 0; i < this.navDataState.length; i++) {
this.navDataState[i].state = false
}
this.navDataState[index].state = true
修改
2022-03-31 09:58:34 +00:00
console.log(this.navDataState[index].is_device)
this.data.is_device = this.navDataState[index].is_device
修改
2022-03-28 09:42:48 +00:00
},
repairsTypeFun(index) {
修改
2022-03-31 09:58:34 +00:00
this.indexType = index
修改
2022-03-28 09:42:48 +00:00
},
修改
2022-03-17 05:47:40 +00:00
}
}
</script>
<style>
.repairs-nav {
display: flex;
background-color: #FFFFFF;
justify-content: space-between;
}
.repairs-nav .li {
width: 50%;
padding: 30rpx 0rpx;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
font-size: 28rpx;
color: #343536;
修改
2022-03-28 09:42:48 +00:00
border-bottom: 2rpx solid rgba(0, 0, 0, 0);
修改
2022-03-17 05:47:40 +00:00
}
.repairs-nav .on {
color: #00a2ea;
border-bottom: 2rpx solid #00a2ea;
}
.content {
background-color: #F7F7F7;
min-height: 100vh;
}
.repairs-hint {
width: 100%;
height: 123rpx;
background-color: #FFFFFF;
display: flex;
padding-top: 20rpx;
box-sizing: border-box;
margin-top: 23rpx;
border-top: 2rpx solid #e7e7e7;
border-bottom: 2rpx solid #e7e7e7;
}
.repairs-hint .icon {
width: 30rpx;
height: 27rpx;
margin-right: 15rpx;
margin-top: 8rpx;
}
.repairs-hint .text {
flex: 1;
color: #5e5e5e;
font-size: 22rpx;
line-height: 40rpx;
}
.fault-type-title {
margin-top: 14rpx;
width: 100%;
line-height: 80rpx;
margin-bottom: 13rpx;
border-top: 2rpx solid #e7e7e7;
border-bottom: 2rpx solid #e7e7e7;
height: 80rpx;
background-color: #FFFFFF;
color: #434242;
}
.fault-type-content {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.fault-type-content .li {
width: 160rpx;
height: 59rpx;
background-color: #FFFFFF;
font-size: 26rpx;
color: #5e5e5e;
修改
2022-03-28 09:42:48 +00:00
box-sizing: border-box;
修改
2022-03-17 05:47:40 +00:00
text-align: center;
line-height: 59rpx;
border-radius: 22rpx;
border: 2rpx solid #eeeeee;
margin-bottom: 15rpx;
}
.fault-type-content .on {
color: #FFFFFF;
border: none;
background-color: #00a2ea;
}
.information {}
.devicename {
width: 100%;
height: 78rpx;
border-radius: 10rpx;
background-color: #FFFFFF;
padding: 0 16rpx;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
color: #9f9898;
font-size: 26rpx;
line-height: 78rpx;
}
.fault-pictures {
display: flex;
align-items: center;
justify-content: center;
margin-top: 18rpx;
height: 320rpx;
box-sizing: border-box;
width: 100%;
background-color: #FFFFFF;
flex-direction: column;
}
.fault-pictures .img {
width: 87rpx;
margin-bottom: 27rpx;
height: 87rpx;
}
.fault-pictures .text {
font-size: 30rpx;
color: #9f9898;
}
.fault-description {
height: 193rpx;
width: 100%;
box-sizing: border-box;
margin-top: 23rpx;
padding: 23rpx 19rpx;
background-color: #FFFFFF;
}
.fault-description-text {
color: #9f9898;
font-size: 26rpx
}
.inputCss {
height: 78rpx;
width: 100%;
box-sizing: border-box;
padding: 0rpx 17rpx;
font-size: 30rpx;
border-radius: 10rpx;
background-color: #FFFFFF;
color: #9f9898;
display: flex;
margin-top: 20rpx;
align-items: center;
}
.detailed-address {
justify-content: space-between;
}
.inputCss-input-input {
font-size: 30rpx;
color: #9f9898;
}
.detailed-address .map {
width: 151rpx;
height: 59rpx;
background-color: #F7F7F7;
}
.uni-datetime-pickerCss {
margin-top: 20rpx;
}
.submit-button {
width: 100%;
margin-top: 44rpx;
border-radius: 50rpx;
height: 90rpx;
background-color: #02A2ea;
line-height: 90rpx;
color: #FFFFFF;
text-align: center;
font-size: 30rpx;
}
修改
2022-03-28 09:42:48 +00:00
.devicename .sm {
修改
2022-03-17 05:47:40 +00:00
width: 42rpx;
height: 36rpx;
}
</style>