127 lines
4.1 KiB
Vue
127 lines
4.1 KiB
Vue
<template>
|
|
<view>
|
|
<view class="container">
|
|
<view class="title">请输入车牌号码</view>
|
|
<car-number-input @numberInputResult="numberInputResult" :defaultStr="defaultNum" ref="carNumberInput" />
|
|
<view class="selectColorBox" @click="show = true">
|
|
<view>车牌颜色</view>
|
|
<view class="selectColor">
|
|
<view class="color">{{ color }}</view>
|
|
<u-icon name="arrow-right" size="25"></u-icon>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="btn" @click="submit">确定</view>
|
|
|
|
<!-- 选择车牌颜色 -->
|
|
<u-popup :show="show" :round="30" mode="bottom" @close="onClose">
|
|
<view class="payIpt">
|
|
<view class="tit">选择车牌颜色</view>
|
|
<!-- 颜色选择列表 -->
|
|
<scroll-view class="color-list" scroll-y>
|
|
<view class="color-item" :class="{ 'active': selectedColorIndex === index }"
|
|
v-for="(item, index) in colorOptions" :key="index" @click="selectColor(index)">
|
|
{{ item }}
|
|
</view>
|
|
</scroll-view>
|
|
<!-- 底部按钮 -->
|
|
<view class="popup-footer">
|
|
<view class="cancel-btn" @click="onClose">取消</view>
|
|
<view class="confirm-btn" @click="confirmColor">确定</view>
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
isPhone,
|
|
picUrl,
|
|
request,
|
|
upload,
|
|
NavgateTo
|
|
} from '../../../utils';
|
|
import { apiArr } from '@/api/park.js'
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
defaultNum: '',
|
|
color: '请选择',
|
|
show: false,
|
|
// 颜色选项列表
|
|
colorOptions: ['蓝牌', '黄牌', '黑牌', '白牌', '绿牌', '渐变绿底黑字', '黄绿双拼底黑字'],
|
|
// 当前选中的颜色索引
|
|
selectedColorIndex: -1
|
|
};
|
|
},
|
|
mounted() {
|
|
|
|
},
|
|
methods: {
|
|
numberInputResult(e) {
|
|
this.defaultNum = e;
|
|
},
|
|
onClose() {
|
|
this.show = false;
|
|
},
|
|
// 选择颜色
|
|
selectColor(index) {
|
|
this.selectedColorIndex = index;
|
|
},
|
|
// 确认选择的颜色
|
|
confirmColor() {
|
|
if (this.selectedColorIndex !== -1) {
|
|
this.color = this.colorOptions[this.selectedColorIndex];
|
|
}
|
|
this.show = false;
|
|
},
|
|
// 提交表单
|
|
submit() {
|
|
const actualNumber = this.defaultNum.replace(/\s/g, '');
|
|
if (this.defaultNum == '' || actualNumber.length < 7) {
|
|
uni.showToast({
|
|
title: '请输入正确的车牌号',
|
|
icon: 'none',
|
|
duration: 2000
|
|
})
|
|
return;
|
|
}
|
|
if (this.color == '请选择') {
|
|
uni.showToast({
|
|
title: '请选择车牌颜色',
|
|
icon: 'none',
|
|
duration: 2000
|
|
})
|
|
return;
|
|
}
|
|
const params = {
|
|
user_id: uni.getStorageSync('userId'),
|
|
car_number: this.defaultNum,
|
|
car_number_color: this.color
|
|
}
|
|
request(apiArr.carAdd, "POST", params).then((res) => {
|
|
uni.showToast({
|
|
title: '添加成功',
|
|
icon: 'success',
|
|
duration: 2000
|
|
})
|
|
if (this.$refs.carNumberInput) {
|
|
// 直接更新子组件的inputList数组
|
|
for (let i = 0; i < 8; i++) {
|
|
this.$refs.carNumberInput.inputList[i] = ' ';
|
|
}
|
|
this.$refs.carNumberInput.$forceUpdate();
|
|
}
|
|
this.color = '请选择';
|
|
this.selectedColorIndex = -1;
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
@import url('./index.css')
|
|
</style> |