uniapp开辟小程序，制作选择下拉框（履历少，做的不完美） ...

一、最终结果
1、默认样式（默认选择第一条数据）

2、点击后默认展示10条数据

3、支持模糊查询

4、选择项目确认后

二、代码实现过程

1. <template>
2.         <view class="layout">
3.                 <!-- #ifndef MP-TOUTIAO -->
4.                 <custom-nav-bar title="物品出库" withBack @backPage="backSpace"></custom-nav-bar>
5.                 <!-- #endif -->
6.                 <view class="inner">
7.                         <view class="content">
8.                                 <view class="goodsInfo">
9.                                         <view class="top">
10.                                                 <view class="img">
11.                                                         <u--image :src="baseUrl + info.goodsImages" width="80px" height="80px" radius="4"></u--image>
12.                                                 </view>
13.                                                 <view class="text">
14.                                                         <u--text :text="info.goodsName" bold lines="1" size="20px"></u--text>
15.                                                         <view style="margin-top: 10rpx;">
16.                                                                 <u--text :text="info.goodsCode"  lines="1" size="14px" color="#999"></u--text>
17.                                                         </view>
18.                                                 </view>
19.                                         </view>
20.                                         <view class="goodsDesc">
21.                                                 <view class="row">
22.                                                         <view class="left">
23.                                                                 仓库名
24.                                                         </view>
25.                                                         <view class="right">
26.                                                                 {{info.wareHouseName}}
27.                                                         </view>
28.                                                 </view>
29.                                                 <view class="row">
30.                                                         <view class="left">
31.                                                                 库位号
32.                                                         </view>
33.                                                         <view class="right">
34.                                                                 {{info.wareStorageCode}}
35.                                                         </view>
36.                                                 </view>
37.                                                 <view class="row">
38.                                                         <view class="left">
39.                                                                 规格
40.                                                         </view>
41.                                                         <view class="right">
42.                                                                 {{info.goodsSize==null ? '暂无' :info.goodsSize}}
43.                                                         </view>
44.                                                 </view>
45.                                                 <view class="row">
46.                                                         <view class="left">
47.                                                                 单位
48.                                                         </view>
49.                                                         <view class="right">
50.                                                                 {{info.goodsUnit}}
51.                                                         </view>
52.                                                 </view>
53.                                                 <view class="row">
54.                                                         <view class="left">
55.                                                                 类别
56.                                                         </view>
57.                                                         <view class="right">
58.                                                                 {{info.goodsCategory }}
59.                                                         </view>
60.                                                 </view>
61.                                                 <view class="row">
62.                                                         <view class="left">
63.                                                                 库存数量
64.                                                         </view>
65.                                                         <view class="right">
66.                                                                 {{info.goodsInventoryNum}}
67.                                                         </view>
68.                                                 </view>
69.                                         </view>
70.                                 </view>
71.                         </view>
72.                         <view class="intoNum">
73.                                 <u-form
74.                                 labelWidth="180rpx"
75.                                       :model="formData"
76.                                       :rules="rules"
77.                                       ref="form"
78.                                     >
79.                                       <u-form-item
80.                                         label="出库数量"
81.                                         prop="outNum"
82.                                       >
83.                                         <u--input
84.                                           v-model="formData.outNum"
85.                                           type="number"
86.                                                   border="none"
87.                                           placeholder="请输入数量"
88.                                         />
89.                                       </u-form-item>
90.                                           
91.                                           <!-- 下拉选择框-->
92.                                          <view class="project" v-if="projectFlag">
93.                                                  <u-form-item
94.                                                    label="关联项目"
95.                                                    prop="projectName"
96.                                                  >
97.                                                    <view class="put" @click="isNation=!isNation">
98.                                                            <u--input
99.                                                                 v-model="formData.projectName"
100.                                                                 type="text"
101.                                                                 border="none"
102.                                                                  disabled
103.                                                                 placeholder="请选择关联项目"
104.                                                            />
105.                                                    </view>
106.                                                  </u-form-item>
107.                                          </view>
108.                                 </u-form>
109.                         </view>
110.                         <view class="remark">
111.                                 <view class="text">
112.                                         备注信息
113.                                 </view>
114.                                 <u--textarea v-model="remarkText" placeholder="请输入备注信息" border="null"></u--textarea>
115.                         </view>
116.                         <view class="upLoadImg" >
117.                                 <view class="img">
118.                                         <text>出库照片</text>
119.                                 </view>
120.                                 <u-upload
121.                                         class="upload"
122.                                         :fileList="fileList1"
123.                                         @afterRead="afterRead"
124.                                         @delete="deletePic"
125.                                         name="1"
126.                                         multiple
127.                                         :maxCount="9"
128.                                 ></u-upload>
129.                         </view>
130.                         <view class="footer">
131.                                 <view class="certain" @click="certain">
132.                                         <btn title="添加出库单"></btn>
133.                                 </view>
134.                         </view>
135.                 </view>
136.                 <!-- 下拉选择框底部弹出框 -->
137.                 <view class="date-background" v-show="isNation">
138.                         <view class='date-gray-background' @click="hiddeDatePicker"></view>
139.                         <view class='date-container'>
140.                                 <view class="transparent">
141.                                         <view class='date-confirm'>
142.                                                 <view @click="hiddeDatePicker" class="pickerCancel">取消</view>
143.                                                 <!-- 输入框 -->
144.                                                 <u-search style="width: 70%;" placeholder="请输入项目名称" @clear="clearSearch" @change='searchChange'
145.                                                         :show-action='false' v-model="searchValue" shape="round" clearabled></u-search>
146.                                                 <view @click="confirm1" class="pickerConfirm">确认</view>
147.                                         </view>
148.                                                 <picker-view :immediate-change='true' indicator-class="indicator" :value="setValues"
149.                                                         @change="bindChange" mask-style="height:100rpx;"
150.                                                         style="width: 100%; height: 80%;position:absolute;bottom:0rpx;text-align:center;background:white">
151.                                                         <picker-view-column class="pickViewColumn">
152.                                                                 <view v-for="item in array" :key="item.id" class="u-column-item"
153.                                                                         style="height: 68rpx;overflow: hidden;">{{item.projectName}}
154.                                                                 </view>
155.                                                         </picker-view-column>
156.                                                 </picker-view>
157.                                 </view>
158.                         </view>
159.                 </view>
160.         </view>
161. </template>
163. <script>
164.         import config from '@/config'
165.         import { getToken } from '@/utils/auth'
166.         import {onLoad,onReady} from "@dcloudio/uni-app"
167.         import {apiGetGoodsInfo,apiFdProject} from "@/api/home.js"
168.         import {mounted,watch} from "vue"
169.         export default {
170.                 data(){
171.                         return{
172.                                 projectFlag:false,
173.                                 baseUrl:config.baseUrl,
174.                                 pageNum:1,
175.                                 pageSize:10,
176.                                 projectCode:'',
177.                                 //搜索下拉框
178.                                 proIndex:0,
179.                                 setValues:[0],
180.                                 array: [],
181.                                 searchValue:'',
182.                                 isNation:false,
183.                                 baseUrl:config.baseUrl,
184.                                 wareHouseName:'',
185.                                 info:{},
186.                                 remarkText:'',
187.                                 operationType:2,
188.                                 files:'',
189.                                 fileList1:[],
190.                                 lastList:[],
191.                                 //表单验证
192.                                 goodsNum:0,
193.                                 formData: {
194.                                                 outNum: '', // 初始化为空字符串
195.                                                 projectName:''
196.                                         },
197.                                 rules: {
198.                                         outNum: [
199.                                                         {
200.                                                                 required: true,
201.                                                                 message: "请输入出库数量",
202.                                                                 trigger: ['blur', 'change']
203.                                                         },
204.                                                         {
205.                                                                 type: 'number',
206.                                                                 message: '请输入数字',
207.                                                                 trigger: ['blur', 'change']
208.                                                         },
209.                                                         {
210.                                                                 validator: (rule, value, callback) => {
211.                                                                         console.log(this.goodsNum)
212.                                                                         console.log(value)
213.                                                                    if (value > this.goodsNum) {
214.                                                                                         callback(new Error(`出库数量不能大于库存数量 ${this.goodsNum}`));
215.                                                                                 } else if (value <= 0) {
216.                                                                                         // 修正：判断小于等于 0
217.                                                                                         callback(new Error('出库数量必须大于 0'));
218.                                                                                 } else {
219.                                                                                         callback();
220.                                                                         }
221.                                                                 },
222.                                                                 trigger: ['blur','change']
223.                                                         }
224.                                                 ],
225.                                         },
226.                         }
227.                 },
228.                 methods:{
229.                         setValueInit(){
230.                                 this.$nextTick(()=>{
231.                                         this.setValues=[0]
232.                                         this.formData.projectName=this.array[0].projectName
233.                                         this.projectCode = this.array[0].projectCode;
234.                                 })
235.                         },
236.                         backSpace(){
237.                                 // 返回上个页面，此处使用navigateBack避免页面栈爆掉
238.                                 uni.navigateBack({
239.                                         url:"/pages/home/outBill/outBill"
240.                                 })
241.                         },
242.                         //隐藏底部弹出框
243.                         clearSearch() {
244.                                 //清空搜索内容
245.                                 this.searchValue = ''
246.                         },
247.                         hiddeDatePicker(){
248.                                 this.isNation=false
249.                         },
250.                         bindChange(e) {
251.                                  const proIndex = e.detail.value[0]; // 获取选中项目的索引
252.                                   this.formData.projectName = this.array[proIndex].projectName;
253.                                   this.projectCode = this.array[proIndex].projectCode;
254.                                 console.log(e)
255.                                 // 获取选择得项目的索引
256.                                 // let proIndex = e.detail.value.toString()
257.                                 // this.array.forEach((item,index)=>{
258.                                 //         if(proIndex==index){
259.                                 //                 this.$nextTick(()=>{
260.                                 //                         this.formData.projectName=item.projectName
261.                                 //                         this.projectCode = item.projectCode
262.                                 //                 })
263.                                                
264.                                 //         }
265.                                 // })
266.                         },
267.                         // 确认关闭
268.                         confirm1(e) {
269.                                 console.log(this.array)
270.                                 this.setValues=[0]
271.                                 this.isNation=false
272.                         },
273.                         // 查询项目
274.                         searchChange(e){
275.                                 this.searchValue=e
276.                                 this.getPro()
277.                                 this.setValueInit()
278.                         },
279.                         // 获取物品信息
280.                         getGoodsInfo(id){
281.                                 apiGetGoodsInfo(id).then(res=>{
282.                                 this.info=res.data
283.                         // 判断物品是否需要关联项目
284.                                 if(this.info.goodsCategoryCode==='3'||this.info.goodsCategoryCode==='5'){
285.                                         this.projectFlag=true
286.                                 }
287.                                 this.goodsNum=res.data.goodsInventoryNum
288.                                 })
289.                         },
290.                         // 获取项目数据
291.                         getPro(){
292.                                 apiFdProject({pageNum:this.pageNum,pageSize:this.pageSize,projectName:this.searchValue}).then(res=>{
293.                                         this.array=[...res.rows]
294.                                 })
295.                         },
296.                         //删除图片
297.                         deletePic(event) {
298.                                 this[`fileList${event.name}`].splice(event.index, 1)
299.                                 this.lastList.splice(event.index,1)
300.                                 this.files=this.lastList.join(',')
301.                         },
302.                         // 新增图片
303.                         async afterRead(event) {
304.                                 // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
305.                                 let lists = [].concat(event.file)
306.                                 let fileListLen = this[`fileList${event.name}`].length
307.                                 lists.map((item) => {
308.                                         this[`fileList${event.name}`].push({
309.                                                 ...item,
310.                                                 status: 'uploading',
311.                                                 message: '上传中'
312.                                         })
313.                                 })
314.                                 for (let i = 0; i < lists.length; i++) {
315.                                         const result = await this.uploadFilePromise(lists[i].url)
316.                                         let item = this[`fileList${event.name}`][fileListLen]
317.                                         this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
318.                                                 status: 'success',
319.                                                 message: '',
320.                                                 url: result
321.                                         }))
322.                                         fileListLen++
323.                                 }
324.                         },
325.                         uploadFilePromise(url) {
326.                                 return new Promise((resolve, reject) => {
327.                                         let a = uni.uploadFile({
328.                                                 url: this.baseUrl + '/common/upload',
329.                                                 filePath: url,  
330.                                                 name: 'file',  
331.                                                 formData: {},
332.                                                 header: {  
333.                                                   Authorization: 'Bearer ' + getToken(),
334.                                                  'Content-Type': 'multipart/form-data'
335.                                                 },  
336.                                                 success: (res) => {
337.                                                         this.lastList.push(JSON.parse(res.data).fileName)
338.                                                         this.files=this.lastList.join(',')
339.                                                         setTimeout(() => {
340.                                                                 resolve(res.data.data)
341.                                                         }, 500)
342.                                                 }
343.                                         });
344.                                 })
345.                         },
346.                         certain(){
347.                                 if(this.formData.outNum<=0){
348.                                         uni.showModal({
349.                                                 title:'提示',
350.                                                 content:'请正确填写出库数量',
351.                                                 showCancel:false,
352.                                                 confirmText:"去填写",
353.                                                 success: (res) => {
354.                                                         if(res.confirm){
355.                                                                 // 用户点击确定，但因为没有填写数量，所以不需要跳转到其他页面或提交数据  
356.                                                         }
357.                                                 }
358.                                         })
359.                                         return
360.                                 }
361.                                
362.                                 if(this.projectFlag){
363.                                         if(!this.formData.projectName){
364.                                                 uni.showModal({
365.                                                         title:'提示',
366.                                                         content:'没有关联项目',
367.                                                         showCancel:false,
368.                                                         confirmText:"去关联",
369.                                                         success: (res) => {
370.                                                                 if(res.confirm){
371.                                                                         // 用户点击确定，但因为没有填写数量，所以不需要跳转到其他页面或提交数据  
372.                                                                 }
373.                                                         }
374.                                                 })
375.                                                 return
376.                                         }
377.                                 }
378.                                 //设置info对象的数据
379.                                 this.info.operationNum=Number(this.formData.outNum)
380.                                 this.info.remark=this.remarkText
381.                                 this.info.operationType = this.operationType
382.                                 this.info.projectCode = this.projectCode
383.                                 this.info.projectName = this.formData.projectName
384.                                 if(this.files!==''&&this.files){
385.                                         this.info.operationImage = this.files
386.                                 }else{
387.                                         this.info.operationImage = ''
388.                                 }
389.                                 this.$store.dispatch('addToOutCart',this.info).then(()=>{
390.                                 })
391.                                 .catch((err)=>{
392.                                         console.log('添加购物车失败',err)
393.                                 })
394.                         }
395.                 },
396.                 onReady() {
397.                         //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
398.                     this.$refs.form.setRules(this.rules)
399.                     },
400.                 // 与vue中的mounted作用类似，但是执行时间更早
401.                 onLoad(options) {
402.                         let id = options.id
403.                         this.wareHouseName = options.wareHouseName
404.                         this.getGoodsInfo(id)
405.                         this.getPro()
406.                 },
407.                 watch:{
408.                         array:function (newVal,oldVal) {
409.                                 console.log(newVal)
410.                                 this.formData.projectName = newVal[0].projectName;
411.                                 this.projectCode = newVal[0].projectCode;
412.                         }
413.                 },
414.                 mounted(){
415.                         this.setValueInit()
416.                 }
417.         }
418. </script>
420. <style lang="scss" scoped>
421. .layout{
422.         width: 100%;
423.         height: 100%;
424.         box-sizing: border-box;
425.         padding: 30rpx;
426.         padding-bottom: 140rpx;
427.         background-color: #f2f4f8;
428.         .inner{
429.                 height: 1240rpx;
430.                 overflow: hidden;
431.                 overflow-y: auto;
432.                 .content{
433.                         box-sizing: border-box;
434.                         padding:20rpx 30rpx;
435.                         background-color: #fff;
436.                         border-radius: 20rpx;
437.                         .top{
438.                                 height: 240rpx;
439.                                 box-sizing: border-box;
440.                                 background-color: #f2f4f8;
441.                                 padding: 20rpx;
442.                                 border-radius: 20rpx;
443.                                 position: relative;
444.                                 .img{
445.                                         position: absolute;
446.                                         top:20%;
447.                                         left: 60rpx;
448.                                 }
449.                                 .text{
450.                                         position: absolute;
451.                                         top:30%;
452.                                         left: 40%;
453.                                 }
454.                         }
455.                         .goodsDesc{
456.                                 margin-top: 40rpx;
457.                                 .row{
458.                                         margin-bottom: 15rpx;
459.                                         display: flex;
460.                                         justify-content: space-between;
461.                                         .left{
462.                                                 color:#999;
463.                                                 font-size: 14px;
464.                                         }
465.                                         .right{
466.                                                 color:#333;
467.                                                 font-size: 14px;
468.                                         }
469.                                 }
470.                         }
471.                 }
472.                 .intoNum,.remark,.upLoadImg{
473.                         margin-top: 20rpx;
474.                         box-sizing: border-box;
475.                         padding:20rpx 30rpx;
476.                         background-color: #fff;
477.                         border-radius: 15rpx;
478.                         display: flex;
479.                 }
480.                
481.                 .intoNum{
482.                         align-items: center;
483.                         justify-content: start;
484.                         .put{
485.                                 display: flex;
486.                                 align-items: center;
487.                         }
488.                 }
489.                 .remark{
490.                         align-items: start;
491.                         .text{
492.                                 margin-top: 15rpx;
493.                         }
494.                 }
495.                 .upLoadImg{
496.                         align-items: center;
497.                         justify-content: space-between;
498.                         .upload{
499.                                 margin-left: 40rpx;
500.                         }
501.                 }
502.                 .footer{
503.                         padding: 0 20rpx;
504.                         position: fixed;
505.                         bottom: 0;
506.                         left: 0;
507.                         height: 160rpx;
508.                         width: 100%;
509.                         display: flex;
510.                         align-items: center;
511.                         justify-content: center;
512.                         background-color: #fff;
513.                         border-radius: 25rpx;
514.                 }
515.         }
516.         //底部弹出框样式
517.         .date-background {
518.                 position: fixed;
519.                 left: 0;
520.                 top: 0;
521.                 bottom: 0;
522.                 width: 100%;
523.                 height: 100%;
524.                 z-index: 1111;
525.         }
526.          
527.         .date-gray-background {
528.                 position: absolute;
529.                 width: 100%;
530.                 top: 0rpx;
531.                 background: rgba(0, 0, 0, .5);
532.                 height: calc(100% - 500rpx);
533.         }
534.          
535.         .date-container {
536.                 position: absolute;
537.                 width: 100%;
538.                 height: 60%;
539.                 overflow: hidden;
540.                 background: #fff;
541.                 bottom: 0;
542.                 z-index: 1000;
543.         }
544.          
545.         .date-confirm {
546.                 display: flex;
547.                 justify-content: space-between;
548.                 align-items: center;
549.                 padding: 20rpx;
550.                 font-size: 34rpx;
551.                 line-height: 100rpx;
552.                 z-index: 2;
553.         }
554.          
555.         .pickViewColumn {
556.                 height: 60%;
557.         }
558.          
559.         .indicator {
560.                 height: 40rpx;
561.         }
562.          
563.         .pickerCancel {
564.                 font-size: 30rpx;
565.                 color: #606266;
566.                 box-sizing: border-box;
567.                 text-align: center;
568.                 text-decoration: none;
569.          
570.                 padding: 0rpx 8rpx;
571.         }
572.          
573.         .pickerConfirm {
574.                 font-size: 30rpx;
575.                 color: #2979ff;
576.                 box-sizing: border-box;
577.                 text-align: center;
578.                 text-decoration: none;
579.                 padding: 0rpx 8rpx;
580.         }
581.          
582.         .u-column-item {
583.                 display: flex;
584.                 flex-direction: row;
585.                 align-items: center;
586.                 justify-content: center;
587.                 font-size: 30rpx;
588.                 color: #303133;
589.                 padding: 0 8rpx;
590.         }
591. }
592. </style>

复制代码

上述代码为实现过程

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。