87 lines
2.8 KiB
Vue
87 lines
2.8 KiB
Vue
<template>
|
|
<view>
|
|
<view class="container">
|
|
<view class="title">请输入车牌号码</view>
|
|
<car-number-input @numberInputResult="numberInputResult" :defaultStr="defaultNum" />
|
|
<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>
|
|
export default {
|
|
data() {
|
|
return {
|
|
defaultNum: '',
|
|
color: '请选择',
|
|
show: false,
|
|
// 颜色选项列表
|
|
colorOptions: ['蓝色', '黄色', '黑色', '白色', '绿色', '渐变绿底黑字', '黄绿双拼底黑字'],
|
|
// 当前选中的颜色索引
|
|
selectedColorIndex: -1
|
|
};
|
|
},
|
|
mounted() {
|
|
|
|
},
|
|
methods: {
|
|
numberInputResult(e) {
|
|
console.log('结果--' + 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() {
|
|
// 这里可以添加提交逻辑
|
|
console.log('车牌号码:', this.defaultNum, '车牌颜色:', this.color);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
@import url('./index.css')
|
|
</style> |