<template>
|
<u-popup :show="show" round="12" mode="center" :closeable="true" @close="handleClose">
|
<view class="popup-content">
|
<view class="popup-title">仪表里程填写</view>
|
|
<u--form :model="localForm" labelPosition="left">
|
<u-form-item borderBottom label=" " labelWidth="0">
|
<view class="form-row">
|
<view class="form-label">
|
<u--image :showLoading="true" src="/static/bt.png" width="20" height="20" />
|
<text>仪表里程（km）</text>
|
</view>
|
<u-number-box
|
v-model="localForm.odometer"
|
class="number-box"
|
:step="1"
|
button-size="28"
|
inputWidth="90"
|
integer
|
/>
|
</view>
|
</u-form-item>
|
|
<u-form-item v-if="showCheckCar" borderBottom label=" " labelWidth="0">
|
<view class="form-row">
|
<view class="form-label">
|
<u--image :showLoading="true" src="/static/bt.png" width="20" height="20" />
|
<text>是否查车</text>
|
</view>
|
<u-radio-group v-model="localForm.iscc" iconPlacement="right" placement="row">
|
<u-radio label="是" name="0" style="margin-right: 40rpx" />
|
<u-radio label="否" name="1" />
|
</u-radio-group>
|
</view>
|
</u-form-item>
|
</u--form>
|
|
<view class="btn-group">
|
<u-button class="cancel-btn" @click="handleClose" type="info" plain>取消</u-button>
|
<u-button class="submit-btn" @click="handleSubmit" type="primary">确定</u-button>
|
</view>
|
</view>
|
</u-popup>
|
</template>
|
|
<script>
|
export default {
|
name: 'OdometerPopup',
|
props: {
|
show: {
|
type: Boolean,
|
default: false
|
},
|
form: {
|
type: Object,
|
default: () => ({})
|
},
|
showCheckCar: {
|
type: Boolean,
|
default: false
|
}
|
},
|
|
data() {
|
return {
|
localForm: {
|
odometer: undefined,
|
iscc: '1'
|
}
|
}
|
},
|
|
watch: {
|
show(val) {
|
if (val) {
|
|
// 弹窗打开时，同步父组件的数据到本地
|
this.localForm = {
|
odometer: this.form.odometer || '',
|
iscc: this.form.iscc || '1'
|
}
|
console.log(this.form.odometer,this.localForm)
|
}
|
}
|
},
|
|
methods: {
|
handleClose() {
|
this.$emit('close')
|
},
|
|
handleSubmit() {
|
if (this.localForm.odometer < 0) {
|
uni.$u.toast('仪表里程不能为负数')
|
return
|
}
|
// 将本地数据传递给父组件
|
this.$emit('submit', this.localForm)
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.popup-content {
|
width: 600rpx;
|
padding: 40rpx;
|
}
|
|
.popup-title {
|
font-size: 34rpx;
|
color: #303133;
|
font-weight: 600;
|
text-align: center;
|
margin-bottom: 40rpx;
|
padding-bottom: 20rpx;
|
border-bottom: 1rpx solid #f0f0f0;
|
}
|
|
.form-row {
|
display: flex;
|
align-items: center;
|
width: 100%;
|
padding: 10rpx 0;
|
}
|
|
.form-label {
|
display: flex;
|
align-items: center;
|
flex-shrink: 0;
|
margin-right: 20rpx;
|
min-width: 160rpx;
|
}
|
|
.form-label text {
|
margin-left: 8rpx;
|
font-size: 28rpx;
|
color: #303133;
|
}
|
|
|
|
.btn-group {
|
display: flex;
|
gap: 20rpx;
|
margin-top: 40rpx;
|
}
|
|
.cancel-btn,
|
.submit-btn {
|
flex: 1;
|
height: 88rpx;
|
line-height: 88rpx;
|
font-size: 30rpx;
|
}
|
</style>
|
