初始化

2025-03-28 09:16:48 +08:00
parent 75b6c2c896
commit 5b2a0b1dbd
19 changed files with 1096 additions and 0 deletions
@@ -0,0 +1,122 @@
+<!-- label 为字段名 -->
+<!-- type 为输入框类型 默认text -->
+<!-- laebel 为字段名 -->
+<!-- isBorder 是否有边框  默认 true有-->
+<template>
+    <view class="select-box" :class="isBorder ? '' : 'border-none'">
+		<view class="label"> <text>*</text> {{ label }}</view>
+		<view class="uni-list-cell-db">
+			<picker @change="bindPickerChange" :value="index" range-key="name" :range="array">
+				<view class="uni-input">
+					<view v-if="index || index == 0"  >{{ array[index].name }}</view>
+					<view class="placeholder" v-else  >请选择{{label}}</view>
+					<image src="../../static/jiantou.png" ></image>
+				</view>
+			</picker>
+		</view>
+    </view>
+</template>
+
+<script>
+import { watch } from "vue";
+export default {
+	props: {
+		value: {
+			default: ''
+		},
+		label: {
+			default: ''
+		},
+		array: {
+			default: []
+		},
+		isBorder: {
+			default: true
+		}
+	},
+	data() {
+		return {
+			index: null,
+			
+		};
+	},
+	watch: {
+		array: function (newArr){
+			newArr.forEach( (item, index) =>{
+				if(item.id == this.value){
+					this.index = index
+				}
+			})
+		}
+	},
+	created() {
+		this.array.forEach( (item, index) =>{
+			if(item.id == this.value){
+				this.index = index
+			}
+		})
+	},
+	methods: {
+		bindPickerChange: function(e) {
+			this.index = e.detail.value
+			this.array.forEach( (item, index) =>{
+				if(index == e.detail.value) {
+					this.$emit('input', item.id)
+				}
+			})
+		},
+	}
+}
+
+    
+</script>
+
+<style lang='scss' scoped>
+.select-box{
+  width: 100%;
+  height: 100rpx;
+  background: #fff;
+  padding: 0 16rpx;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  font-size: 28rpx;
+  border-bottom: 2rpx dashed #D9D9D9;
+  .label{
+    width: 200rpx;
+    line-height: 40rpx;
+	display: flex;
+    text{
+	  display: block;
+  	  color: #E14343;
+  	  margin-right: 8rpx;
+  	  line-height: 40rpx;
+	  width: 14rpx;
+    }
+  }
+  .uni-list-cell-db{
+	  flex: 1;
+	  height: 100rpx;
+	  .uni-input{
+		  width: 100%;
+		  height: 100rpx;
+		  display: flex;
+		  justify-content: flex-end;
+		  align-items: center;
+		  image{
+			  width: 32rpx;
+			  height: 32rpx;
+			  margin-left: 4rpx;
+		  }
+		  .placeholder{
+		  		  color: #999999;
+		  }
+	  }
+	  
+	  
+  }
+}
+.border-none{
+	border: none;
+}
+</style>