|
|
@ -2,121 +2,255 @@ |
|
|
|
<!-- subpages/carManagement/pages/add/add.wxml --> |
|
|
|
<view class="personal-info"> |
|
|
|
<view class="basic-info"> |
|
|
|
<view :class="'item ' + (isDisabled ? 'disabled' : '')"> |
|
|
|
<view class="item"> |
|
|
|
<view class="field"> |
|
|
|
<text class="must">*</text> |
|
|
|
<view class="field-text">事件分类</view> |
|
|
|
<view class="field-text">所属组织</view> |
|
|
|
</view> |
|
|
|
<view class="value-dl" @tap="onOpen1"> |
|
|
|
<view :class="category ? 'di-name' : 'di-name1'">{{ category ? category : '请选择' }}</view> |
|
|
|
<image class="di-but" src="/static/images/right.png" mode="aspectFit" /> |
|
|
|
<view style="overflow-x: hidden;"> |
|
|
|
<jia-cascader :itemList="angencyList" :defaultItemList="defaultItemList" |
|
|
|
@completeChange="completeGrid" @inputChange="change" :border="false" |
|
|
|
:clearIcon="false"></jia-cascader> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="item"> |
|
|
|
<view :class="'item '"> |
|
|
|
<view class="field"> |
|
|
|
<text class="must">*</text> |
|
|
|
<view class="field-text">发生地点</view> |
|
|
|
<view class="field-text">车牌号码</view> |
|
|
|
</view> |
|
|
|
<view class="value-dl"> |
|
|
|
<view class="di-name" @tap="toughGetLocation">{{ addressContent }}</view> |
|
|
|
<image class="di-but" v-if="!addressContent" src="/static/images/right.png" mode="aspectFit" /> |
|
|
|
<image class="di-but" v-else style="width: 46rpx; height: 46rpx" src="/static/images/导航.png" mode="aspectFit" @tap="routePlanning" /> |
|
|
|
<view hover-class="backC" class="value-dl"> |
|
|
|
<input class="telInput" type="text" placeholder="请输入" v-model="formData.carNumber" /> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view :class="'item ' + (isDisabled ? 'disabled' : '')"> |
|
|
|
<view :class="'item '"> |
|
|
|
<view class="field"> |
|
|
|
<text class="must">*</text> |
|
|
|
<view class="field-text">{{ tabVal === '1' ? '需求人' : '责任人' }}</view> |
|
|
|
<view class="field-text">车主姓名</view> |
|
|
|
</view> |
|
|
|
<view hover-class="backC" class="value-dl"> |
|
|
|
<input class="telInput" type="text" placeholder="请输入" v-model="formData.carOwnerName" /> |
|
|
|
</view> |
|
|
|
<navigator hover-class="backC" class="value-dl" url="/subpages/demandCheck/pages/dissatisfied/searchResi/searchResi"> |
|
|
|
<view :class="resiName ? 'di-name' : 'di-name1'"> |
|
|
|
{{ resiName ? resiName : '请选择' }} |
|
|
|
</view> |
|
|
|
<image class="di-but" src="/static/images/right.png" mode="aspectFit" /> |
|
|
|
</navigator> |
|
|
|
</view> |
|
|
|
<view :class="'item ' + (isDisabled ? 'disabled' : '')"> |
|
|
|
<view :class="'item '"> |
|
|
|
<view class="field"> |
|
|
|
<text class="must">*</text> |
|
|
|
<view class="field-text">{{ tabVal === '0' ? '责任人电话' : '联系电话' }}</view> |
|
|
|
<view class="field-text">车主电话</view> |
|
|
|
</view> |
|
|
|
<view hover-class="backC" class="value-dl"> |
|
|
|
<input class="telInput" type="text" placeholder="请输入" v-model="formData.carOwnerMobile" /> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view :class="'item '"> |
|
|
|
<view class="field"> |
|
|
|
<view class="field-text">车主身份证</view> |
|
|
|
</view> |
|
|
|
<view hover-class="backC" class="value-dl"> |
|
|
|
<input class="telInput" type="text" placeholder="请输入" v-model="formData.carOwnerNum" /> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="basic-info" style="padding-bottom:10px ;"> |
|
|
|
<view :class="'item '"> |
|
|
|
<view class="field"> |
|
|
|
<view class="field-text">车辆品牌</view> |
|
|
|
</view> |
|
|
|
<view hover-class="backC" class="value-dl"> |
|
|
|
<input class="telInput" type="text" placeholder="请输入" v-model="formData.carBrand" /> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view :class="'item '"> |
|
|
|
<view class="field"> |
|
|
|
<view class="field-text">车辆颜色</view> |
|
|
|
</view> |
|
|
|
<view class="value-dl"> |
|
|
|
<input class="telInput" type="text" placeholder="请输入" v-model="formData.carColor" /> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view :class="'item '"> |
|
|
|
<view class="field"> |
|
|
|
<view class="field-text">核载人数</view> |
|
|
|
</view> |
|
|
|
<view hover-class="backC" class="value-dl"> |
|
|
|
<!-- <view class="di-name" > |
|
|
|
{{resiMobile?resiMobile:'请输入'}} |
|
|
|
</view> --> |
|
|
|
<input class="telInput" type="text" placeholder="请输入" :value="resiMobile" @blur="bindMobile" /> |
|
|
|
<u-number-box v-model="formData.carriersNum"> |
|
|
|
<view slot="minus" class="minus"> |
|
|
|
<u-icon name="minus" size="12" color=" #d0d0d0"></u-icon> |
|
|
|
</view> |
|
|
|
<text slot="input" style="width: 50px;text-align: center;" class="input">{{ formData.carriersNum |
|
|
|
}}</text> |
|
|
|
<view slot="plus" class="plus"> |
|
|
|
<u-icon name="plus" size="12" color=" #d0d0d0"></u-icon> |
|
|
|
</view> |
|
|
|
</u-number-box> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view :class="'item '"> |
|
|
|
<view class="field"> |
|
|
|
<view class="field-text">购置日期</view> |
|
|
|
</view> |
|
|
|
<view hover-class="backC" class="value-dl" @tap="showTimePicker"> |
|
|
|
<view :class="formData.acquistionDate ? 'di-name' : 'di-name1'">{{ formData.acquistionDate ? |
|
|
|
formData.acquistionDate : '请选择' }} |
|
|
|
</view> |
|
|
|
<image class="di-but" src="/static/images/right.png" mode="aspectFit" /> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<u-datetime-picker :show="visibleTime" v-model="formData.acquistionDate" :maxDate="maxDate" mode="datetime" |
|
|
|
@cancel="visibleTime = false" @confirm="onConfirmDate"></u-datetime-picker> |
|
|
|
<view class="issue-content"> |
|
|
|
<view class="item1"> |
|
|
|
<view class="field"> |
|
|
|
<view class="field-text">备注说明</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<textarea maxlength="500" v-model="formData.remark" placeholder="请输入备注说明(不超过500字)"></textarea> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="bot_btn"> |
|
|
|
<button type="default" :plain="true" class="bottom_btn bottom_btn_close" @tap="close">取消</button> |
|
|
|
<button type="primary" class="btn_bule bottom_btn" @tap="saveForm">提交</button> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import wuxPicker from '../../../../../wxcomponents/dist/picker/index'; |
|
|
|
import { |
|
|
|
formatTime |
|
|
|
} from '../../../../utils/util'; |
|
|
|
const app = getApp(); |
|
|
|
import api from '../../../../utils/api'; |
|
|
|
// subpages/carManagement/pages/add/add.js |
|
|
|
export default { |
|
|
|
components: { |
|
|
|
wuxPicker |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
isDisabled: false, |
|
|
|
category: false, |
|
|
|
addressContent: '', |
|
|
|
tabVal: '', |
|
|
|
resiName: false, |
|
|
|
resiMobile: '' |
|
|
|
visibleTime: false, |
|
|
|
maxDate: null, |
|
|
|
angencyList: [], |
|
|
|
defaultItemList: [], |
|
|
|
formData: { |
|
|
|
agencyId: '',//所属组织 |
|
|
|
orgNamePath: '',//所属组织名称路径 |
|
|
|
carBrand: '',//车辆品牌 |
|
|
|
carOwnerMobile: '',//车主电话 |
|
|
|
carOwnerName: '',//车主姓名 |
|
|
|
orgIdPath: '',//所属组织路径 |
|
|
|
carNumber: '',//车牌号码 |
|
|
|
customerId: '',//客户Id |
|
|
|
carColor: '',//车辆颜色 |
|
|
|
carriersNum: 1,//核载人数 |
|
|
|
acquistionDate: '',//购置日期 |
|
|
|
carOwnerNum: '',//车主证件号 |
|
|
|
remark: ''//备注 |
|
|
|
} |
|
|
|
}; |
|
|
|
}, |
|
|
|
/** |
|
|
|
* 生命周期函数--监听页面加载 |
|
|
|
*/ |
|
|
|
onLoad(options) {}, |
|
|
|
onLoad(options) { |
|
|
|
this.setData({ |
|
|
|
angencyId: app.globalData.user.agencyId, |
|
|
|
}); |
|
|
|
this.getAgencygridtree() |
|
|
|
}, |
|
|
|
/** |
|
|
|
* 生命周期函数--监听页面初次渲染完成 |
|
|
|
*/ |
|
|
|
onReady() {}, |
|
|
|
onReady() { }, |
|
|
|
/** |
|
|
|
* 生命周期函数--监听页面显示 |
|
|
|
*/ |
|
|
|
onShow() {}, |
|
|
|
onShow() { }, |
|
|
|
/** |
|
|
|
* 生命周期函数--监听页面隐藏 |
|
|
|
*/ |
|
|
|
onHide() {}, |
|
|
|
onHide() { }, |
|
|
|
/** |
|
|
|
* 生命周期函数--监听页面卸载 |
|
|
|
*/ |
|
|
|
onUnload() {}, |
|
|
|
onUnload() { }, |
|
|
|
/** |
|
|
|
* 页面相关事件处理函数--监听用户下拉动作 |
|
|
|
*/ |
|
|
|
onPullDownRefresh() {}, |
|
|
|
onPullDownRefresh() { }, |
|
|
|
/** |
|
|
|
* 页面上拉触底事件的处理函数 |
|
|
|
*/ |
|
|
|
onReachBottom() {}, |
|
|
|
onReachBottom() { }, |
|
|
|
/** |
|
|
|
* 用户点击右上角分享 |
|
|
|
*/ |
|
|
|
onShareAppMessage() {}, |
|
|
|
onShareAppMessage() { }, |
|
|
|
methods: { |
|
|
|
onOpen1() { |
|
|
|
console.log('占位:函数 onOpen1 未声明'); |
|
|
|
getAgencygridtree() { |
|
|
|
api.getAgencygridtree() |
|
|
|
.then((res) => { |
|
|
|
this.setData({ |
|
|
|
angencyList: this.convertLabelToText([res.data]) |
|
|
|
}); |
|
|
|
}) |
|
|
|
.catch((err) => { |
|
|
|
console.log(err); |
|
|
|
}); |
|
|
|
}, |
|
|
|
|
|
|
|
toughGetLocation() { |
|
|
|
console.log('占位:函数 toughGetLocation 未声明'); |
|
|
|
change(e) { |
|
|
|
console.log(e, '选中的'); |
|
|
|
}, |
|
|
|
completeGrid(e) { |
|
|
|
if(e.result){ |
|
|
|
this.setData({ |
|
|
|
'formData.orgNamePath':e.result.map(item=>item.text).join(','), |
|
|
|
'formData.orgIdPath':e.result.map(item=>item.value).join(','), |
|
|
|
agencyId:e.result[e.result.length - 1].value |
|
|
|
}) |
|
|
|
} |
|
|
|
}, |
|
|
|
convertLabelToText(tree) { |
|
|
|
return tree.map(node => { |
|
|
|
const newNode = { |
|
|
|
...node |
|
|
|
}; |
|
|
|
// 将 label 替换为 text |
|
|
|
if (newNode.agencyName !== undefined) { |
|
|
|
newNode.text = newNode.agencyName; |
|
|
|
delete newNode.agencyName; |
|
|
|
} |
|
|
|
if (newNode.subAgencyList && newNode.subAgencyList.length > 0) { |
|
|
|
newNode.children = newNode.subAgencyList |
|
|
|
delete newNode.subAgencyList; |
|
|
|
} |
|
|
|
if (newNode.agencyId) { |
|
|
|
newNode.value = newNode.agencyId |
|
|
|
delete newNode.agencyId; |
|
|
|
} |
|
|
|
if (newNode.children && newNode.children.length > 0) { |
|
|
|
newNode.children = this.convertLabelToText(newNode.children); |
|
|
|
} |
|
|
|
|
|
|
|
routePlanning() { |
|
|
|
console.log('占位:函数 routePlanning 未声明'); |
|
|
|
return newNode; |
|
|
|
}); |
|
|
|
}, |
|
|
|
showTimePicker(e) { |
|
|
|
this.setData({ |
|
|
|
visibleTime: true, |
|
|
|
maxDate: new Date().getTime(), |
|
|
|
acquistionDate: new Date().getTime() |
|
|
|
}); |
|
|
|
}, |
|
|
|
onConfirmDate(e) { |
|
|
|
this.setData({ |
|
|
|
visibleTime: false, |
|
|
|
'formData.acquistionDate': formatTime(e.value) |
|
|
|
}); |
|
|
|
|
|
|
|
bindMobile() { |
|
|
|
console.log('占位:函数 bindMobile 未声明'); |
|
|
|
} |
|
|
|
}, |
|
|
|
saveForm() { |
|
|
|
console.log(this.formData); |
|
|
|
}, |
|
|
|
} |
|
|
|
}; |
|
|
|
</script> |
|
|
@ -130,6 +264,7 @@ page { |
|
|
|
padding-bottom: 20rpx; |
|
|
|
box-sizing: border-box; |
|
|
|
} |
|
|
|
|
|
|
|
.personal-info { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
@ -146,28 +281,33 @@ page { |
|
|
|
padding: 0 20rpx; |
|
|
|
margin-top: 20rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.item { |
|
|
|
border-bottom: 1rpx solid #e7eeee; |
|
|
|
padding: 25rpx 0; |
|
|
|
line-height: 60rpx; |
|
|
|
display: flex; |
|
|
|
} |
|
|
|
|
|
|
|
.field { |
|
|
|
position: relative; |
|
|
|
box-sizing: border-box; |
|
|
|
width: 180rpx; |
|
|
|
width: 190rpx; |
|
|
|
padding-left: 25rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.field-d { |
|
|
|
width: 220rpx !important; |
|
|
|
} |
|
|
|
|
|
|
|
.value-d { |
|
|
|
width: 450rpx !important; |
|
|
|
} |
|
|
|
|
|
|
|
.field.mobile-field { |
|
|
|
width: 250rpx !important; |
|
|
|
} |
|
|
|
|
|
|
|
.field .must { |
|
|
|
position: absolute; |
|
|
|
top: 0; |
|
|
@ -176,6 +316,7 @@ page { |
|
|
|
color: #f61616; |
|
|
|
font-size: 30rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.field .field-text { |
|
|
|
font-size: 32rpx; |
|
|
|
font-family: Source Han Serif SC; |
|
|
@ -201,6 +342,7 @@ page { |
|
|
|
color: #333; |
|
|
|
line-height: 60rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.value-dl { |
|
|
|
position: relative; |
|
|
|
display: flex; |
|
|
@ -213,6 +355,7 @@ page { |
|
|
|
|
|
|
|
flex: 1; |
|
|
|
} |
|
|
|
|
|
|
|
.telInput { |
|
|
|
margin-left: 40rpx; |
|
|
|
} |
|
|
@ -224,6 +367,7 @@ page { |
|
|
|
margin-left: 40rpx; |
|
|
|
font-family: 'PingFangSC-Regular', sans-serif; |
|
|
|
} |
|
|
|
|
|
|
|
.di-name1 { |
|
|
|
margin-right: 14rpx; |
|
|
|
text-align: left; |
|
|
@ -232,10 +376,12 @@ page { |
|
|
|
font-family: 'PingFangSC-Regular', sans-serif; |
|
|
|
color: #999; |
|
|
|
} |
|
|
|
|
|
|
|
.di-but { |
|
|
|
width: 30rpx; |
|
|
|
height: 34rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.value input { |
|
|
|
text-align: right; |
|
|
|
font-size: 34rpx; |
|
|
@ -243,15 +389,18 @@ page { |
|
|
|
height: 100%; |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
.value .picker { |
|
|
|
position: relative; |
|
|
|
width: 100%; |
|
|
|
padding-right: 40rpx; |
|
|
|
text-align: right; |
|
|
|
} |
|
|
|
|
|
|
|
.value .picker .z-weak { |
|
|
|
color: #999; |
|
|
|
} |
|
|
|
|
|
|
|
.value .picker .menu-arrow { |
|
|
|
position: absolute; |
|
|
|
top: 20rpx; |
|
|
@ -259,6 +408,7 @@ page { |
|
|
|
width: 16rpx; |
|
|
|
height: 23rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.value-mobile { |
|
|
|
position: relative; |
|
|
|
width: 410rpx; |
|
|
@ -271,6 +421,7 @@ page { |
|
|
|
display: flex; |
|
|
|
margin-left: 30rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.value-mobile .get-code { |
|
|
|
padding: 0 15rpx; |
|
|
|
height: 60rpx; |
|
|
@ -282,9 +433,11 @@ page { |
|
|
|
margin: 0; |
|
|
|
margin-left: 25rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.value-mobile .button-hover { |
|
|
|
background: rgb(175, 1, 1); |
|
|
|
} |
|
|
|
|
|
|
|
.value-mobile input { |
|
|
|
text-align: right; |
|
|
|
font-size: 34rpx; |
|
|
@ -292,6 +445,7 @@ page { |
|
|
|
height: 100%; |
|
|
|
width: 55%; |
|
|
|
} |
|
|
|
|
|
|
|
.placeholder-style { |
|
|
|
font-size: 28rpx; |
|
|
|
color: #999; |
|
|
@ -316,6 +470,7 @@ page { |
|
|
|
justify-content: center; |
|
|
|
margin: 80rpx 0 65rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.submit-button button { |
|
|
|
height: 84rpx; |
|
|
|
line-height: 84rpx; |
|
|
@ -327,7 +482,68 @@ page { |
|
|
|
border-radius: 84rpx; |
|
|
|
background: linear-gradient(to right, #82b4fd, #3e93fe); |
|
|
|
} |
|
|
|
|
|
|
|
.disabled { |
|
|
|
pointer-events: none; /* 禁止点击 */ |
|
|
|
pointer-events: none; |
|
|
|
/* 禁止点击 */ |
|
|
|
} |
|
|
|
|
|
|
|
textarea { |
|
|
|
width: 100%; |
|
|
|
height: 298rpx; |
|
|
|
background-color: #f7f7f7; |
|
|
|
padding: 30rpx; |
|
|
|
font-size: 34rpx; |
|
|
|
color: #333; |
|
|
|
line-height: 50rpx; |
|
|
|
position: relative; |
|
|
|
box-sizing: border-box; |
|
|
|
} |
|
|
|
|
|
|
|
.textarea-placeholder { |
|
|
|
font-size: 32rpx; |
|
|
|
color: #999; |
|
|
|
line-height: 50rpx; |
|
|
|
position: absolute; |
|
|
|
left: 0; |
|
|
|
top: 0; |
|
|
|
} |
|
|
|
|
|
|
|
.u-icon { |
|
|
|
border-radius: 100%; |
|
|
|
border: solid #d0d0d0 1px; |
|
|
|
padding: 2px; |
|
|
|
box-sizing: border-box; |
|
|
|
} |
|
|
|
|
|
|
|
.bot_btn { |
|
|
|
display: flex; |
|
|
|
background-color: #fff; |
|
|
|
z-index: 10; |
|
|
|
width: 100%; |
|
|
|
justify-content: space-between; |
|
|
|
position: fixed; |
|
|
|
bottom: 0; |
|
|
|
left: 50%; |
|
|
|
box-sizing: border-box; |
|
|
|
transform: translateX(-50%); |
|
|
|
padding: 12rpx 90rpx; |
|
|
|
box-sizing: border-box; |
|
|
|
padding-bottom: constant(safe-area-inset-bottom); |
|
|
|
padding-bottom: env(safe-area-inset-bottom); |
|
|
|
} |
|
|
|
|
|
|
|
.bot_btn .bottom_btn { |
|
|
|
width: 240rpx; |
|
|
|
height: 76rpx; |
|
|
|
border-radius: 43rpx; |
|
|
|
text-align: center; |
|
|
|
line-height: 76rpx; |
|
|
|
font-size: 32rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.bot_btn .btn_bule { |
|
|
|
background: #3974f6; |
|
|
|
color: #fff; |
|
|
|
} |
|
|
|
</style> |
|
|
|