feat: 替换设备类型选择组件

pages/afterSale/addafter.vue

@@ -33,7 +33,7 @@
               disabled
 			  style="width:100%"
             /> -->
-			<view class="text-input" @click="show = true">{{adddata.type || '请选择设备类型'}}</view>
+			<view class="text-input" @click="handleTypeSelect">{{adddata.type || '请选择设备类型'}}</view>
           </view>
           <view class="" style="display: flex; margin-top: 20rpx">
             <span style="color: #fff">*</span>
@@ -176,11 +176,12 @@
       </view>
     </u-modal>
 	
-	<u-action-sheet
+	<!-- <u-action-sheet
 	  :list="actionSheetList"
 	  v-model="show"
 	  @click="actionSheetCallback"
-	></u-action-sheet>
+	></u-action-sheet> -->
+	<u-picker v-model="show" mode="selector" :range="actionSheetList" range-key="text" @confirm="handleTypeConfirm"></u-picker>
   </view>
 </template>
 <script>
@@ -208,55 +209,56 @@ export default {
       selfList: '', //视频链接
       actionSheetList: [
         //设备选项
-        {
-          text: '杀虫灯',
-          id: 2,
-        },
-        {
-          text: '测报灯',
-          id: 3,
-        },
-        {
-          text: '智能性诱',
-          id: 4,
-        },
-        {
-          text: '环境监测',
-          id: 5,
-        },
-        {
-          text: '监控设备',
-          id: 6,
-        },
-        {
-          text: '孢子仪',
-          id: 7,
-        },
-        {
-          text: '性诱2.0',
-          id: 10,
-        },
-        {
-          text: '水肥一体化',
-          id: 13,
-        },
-        {
-          text: '天牛监测设备',
-          id: 32,
-        },
-        {
-          text: '色诱测报设备2.0',
-          id: 33,
-        },
-        {
-          text: '色诱测报设备1.0',
-          id: 34,
-        },
-        {
-          text: '虫情测报设备5.0',
-          id: 35,
-        },
+        // {
+        //   text: '杀虫灯',
+        //   id: 2,
+        // },
+        // {
+        //   text: '测报灯',
+        //   id: 3,
+        // },
+        // {
+        //   text: '智能性诱',
+        //   id: 4,
+        // },
+        // {
+        //   text: '环境监测',
+        //   id: 5,
+        // },
+        // {
+        //   text: '监控设备',
+        //   id: 6,
+        // },
+        // {
+        //   text: '孢子仪',
+        //   id: 7,
+        // },
+        // {
+        //   text: '性诱2.0',
+        //   id: 10,
+        // },
+        // {
+        //   text: '水肥一体化',
+        //   id: 13,
+        // },
+        // {
+        //   text: '天牛监测设备',
+        //   id: 32,
+        // },
+        // {
+        //   text: '色诱测报设备2.0',
+        //   id: 33,
+        // },
+        // {
+        //   text: '色诱测报设备1.0',
+        //   id: 34,
+        // },
+        // {
+        //   text: '虫情测报设备5.0',
+        //   id: 35,
+        // },
       ],
+	  columns:[],
       show: false, //选择器的显示
       btnisTorF: false,
       deviceid: false, //设备号判断
@@ -301,6 +303,8 @@ export default {
         };
       });
 	  
+	  this.columns = [this.actionSheetList]
+	  
 	  return res;
     },
     clickLeft() {
@@ -455,10 +459,17 @@ export default {
       }
     },
     actionSheetCallback(index) {
+		
       //选择器选择
       this.adddata.type = this.actionSheetList[index].text;
       this.adddata.type_id = this.actionSheetList[index].id;
     },
+	handleTypeConfirm(e){
+	 const index = e[0];
+	 //选择器选择
+	 this.adddata.type = this.actionSheetList[index].text;
+	 this.adddata.type_id = this.actionSheetList[index].id;
+	},
     iphone() {
       //检测手机
       if (!/^1[23456789]\d{9}$/.test(this.adddata.phone)) {
@@ -509,6 +520,10 @@ export default {
       this.videoindex = index;
       this.videoshow = !this.videoshow;
     },
+	handleTypeSelect(){
+	  console.log('type click')
+	  this.show =true;
+	}
   },
 };
 </script>
@@ -682,7 +697,11 @@ page {
 ::v-deep .u-drawer {
 	&__scroll-view {
 		max-height: 80vh;
-		height: auto;
+		height: 50vh;
 	}
 }
+::v-deep .uni-scroll-view-content {
+	overflow-y: scroll;
+	// background-color: #00f;
+}
 </style>