You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

180 lines
3.9 KiB

<style lang="scss" scoped>
.form{
&>.u-form-item{
.u-input,.u-textarea{
background:#F7F7F7;
margin-top:7px;
}
.plant-youbian{
padding:6px 9px;
border-radius: 4px;
width:100%;
display:flex;
align-items: center;
flex-direction: row-reverse;
justify-content: space-between;
background:#F7F7F7;
margin-top:7px;
color:rgb(48,49,51);
&.noData{
color:rgb(192, 196, 204);
}
&:before{
transform: rotate(90deg);
color:rgb(48,49,51);
}
}
.upImg{
width:100%;
background:#F7F7F7;
border-radius: 4px;
padding:10px;
min-height:130px;
margin-top:7px;
display:flex;
flex-wrap: wrap;
&>.album{
background:#fff;
border-radius: 12px;
width:85px;
height:85px;
text{
color:#ccc;
font-size:11px;
display:flex;
justify-content: center;
height:100%;
align-items: center;
flex-direction: column;
&:before{
color:#777;
font-size:20px;
margin-bottom:3px;
}
}
}
}
.dateRange{
display:flex;
width:100%;
margin-top:7px;
align-items: center;
text{
width:50%;
background:#F7F7F7;
border-radius: 12px;
height:40px;
line-height: 40px;
padding:0 10px;
&.noData{
color:rgb(192, 196, 204);
}
}
}
}
}
</style>
<template>
<view class="form">
<u-form-item :label="label" :prop="field" :required="required">
<u-input v-if="type=='text'" :placeholder="placeholder||`请输入${label}`" :value="value" @input="input"/>
<view v-if="type=='select'" class="plant-youbian" :class="{noData:!/^\d+$/.test(value)}" @click="show=true">{{/^\d+$/.test(value)&&columns[0][value][keyName]||placeholder||`请选择${label}`}}</view>
<view v-if="type=='upImg'" class="upImg">
<view class="album" @click="selectImg">
<text class="plant-paizhao">添加照片</text>
</view>
</view>
<u-textarea v-if="type=='textarea'" :value="value" :placeholder="placeholder||`请输入${label}`" autoHeight/>
<view v-if="type=='dateRange'" class="dateRange">
<text style="margin-right:10px;" :class="{noData:!value[0]}" @click="dateType='start';show=true">{{value[0]||startPlaceholder||'开始时间'}}</text>
-
<text style="margin-left:10px;" :class="{noData:!value[1]}" @click="dateType='end';show=true">{{value[1]||endPlaceholder||'结束时间'}}</text>
</view>
</u-form-item>
<u-picker
v-if="type=='select'"
:columns="columns"
:show="show"
:keyName="keyName"
:defaultIndex="[value||0]"
closeOnClickOverlay
@close="show=false"
@cancel="show=false"
@confirm="$emit('select',$event.indexs[0]);show=false"/>
<u-datetime-picker
v-if="type=='dateRange'"
:show="show"
mode="date"
:value="date"
closeOnClickOverlay
@close="show=false"
@cancel="show=false"
@confirm="$emit('selectDate',{value:new Date($event.value).format('yyyy-MM-dd'),type:dateType});show=false"/>
</view>
</template>
<script>
export default{
name:"dForm",
props:{
label:{
type:String,
default:"",
},
field:{
type:String,
default:"",
},
required:{
type:Boolean,
default:false,
},
placeholder:{
type:String,
default:"",
},
keyName:{
type:String,
default:"label",
},
type:{
type:String,
default:"text"
},
columns:{
type:Array,
default:()=>[]
},
value:{
type:[String,Number,Array],
default:"",
},
startPlaceholder:"",
endPlaceholder:"",
},
data(){
return{
downValue:[],
show:false,
dateType:"start",
}
},
computed:{
date(){
if(this.dateType=='start')return this.value[0]||new Date().format('yyyy-MM-dd');
else return this.value[1]||new Date().format('yyyy-MM-dd');
}
},
methods:{
async selectImg(){
var res=await uni.chooseImage({
count:1,
sizeType:['compressed'],
})
},
input(e){
this.$emit("input",e)
}
},
}
</script>