vue代码:
<template>
<view class="page container">
<uni-section title="操作栏" type="line">
<button class="mini-btn" type="primary" @click="addHandle" size="mini">
点我
</button>
</uni-section>
<uni-popup
ref="businessPopup"
background-color="#fff"
border-radius="15rpx 15rpx 15rpx 15rpx"
>
<view class="popConfig">
<view class="popConfig-title">{{ title }}</view>
<view class="popConfig-content">
<scroll-view
scroll-y
class="scrollView"
:scroll-into-view="scrollIntoView"
lower-threshold="140"
:scroll-with-animation="true"
@scrolltolower="scrollToView('uploadInvoice')"
>
<uni-forms ref="form" :modelValue="form" label-width="80px">
<uni-forms-item
label="选择时间"
required
name="time"
label-width="100px"
>
<uni-datetime-picker
type="date"
v-model="form.time"
placeholder="请选择时间"
></uni-datetime-picker>
</uni-forms-item>
<uni-forms-item
label="选择项目"
required
name="time"
label-width="100px"
>
<uni-data-picker ref="projectPicker" :localdata="dataInfo" v-model="form.id" popup-title="请选择项目" :map="{text:'label',value:'value'}"></uni-data-picker>
</uni-forms-item>
<uni-forms-item
label="选择时间"
required
name="time"
label-width="100px"
>
<uni-datetime-picker
type="date"
v-model="form.time"
placeholder="请选择时间"
></uni-datetime-picker>
</uni-forms-item>
<uni-forms-item
label="选择项目"
required
name="time"
label-width="100px"
>
<uni-data-picker ref="projectPicker" :localdata="dataInfo" v-model="form.id" popup-title="请选择项目" :map="{text:'label',value:'value'}"></uni-data-picker>
</uni-forms-item>
<uni-forms-item
label="选择时间"
required
name="time"
label-width="100px"
>
<uni-datetime-picker
type="date"
v-model="form.time"
placeholder="请选择时间"
></uni-datetime-picker>
</uni-forms-item>
<uni-forms-item
label="选择项目"
required
name="time"
label-width="100px"
>
<uni-data-picker ref="projectPicker" :localdata="dataInfo" v-model="form.id" popup-title="请选择项目" :map="{text:'label',value:'value'}"></uni-data-picker>
</uni-forms-item>
<uni-forms-item
label="选择时间"
required
name="time"
label-width="100px"
>
<uni-datetime-picker
type="date"
v-model="form.time"
placeholder="请选择时间"
></uni-datetime-picker>
</uni-forms-item>
<uni-forms-item
label="选择项目"
required
name="time"
label-width="100px"
>
<uni-data-picker ref="projectPicker" :localdata="dataInfo" v-model="form.id" popup-title="请选择项目" :map="{text:'label',value:'value'}"></uni-data-picker>
</uni-forms-item>
</uni-forms>
</scroll-view>
</view>
</view>
</uni-popup>
</view>
</template>
<script>
import dataJson from './data.json'
export default {
data() {
return {
// 表单参数
form: {
time: "",
id: "",
},
title: "",
scrollIntoView: "",
dataInfo: dataJson,
};
},
watch: {},
created() {
},
methods: {
addHandle() {
this.title = "新增表单";
this.$refs.businessPopup.open();
},
closeBusinessPopup() {
this.$refs.businessPopup.close();
},
submitForm() {
return true;
},
scrollToView(viewId) {
if (this.scrollIntoView === viewId) {
this.scrollIntoView = "";
} else {
this.scrollIntoView = viewId;
}
},
},
};
</script>
<style lang="scss">
page {
background-color: #fff;
}
.cz_btn {
button {
margin-left: 10rpx;
}
}
.uni-searchbar {
background-color: #fff;
}
.scrollView {
background-color: #fff;
width: 100%;
height: 600rpx;
}
.popConfig {
z-index: 999;
background-color: white;
box-sizing: border-box;
padding: 25rpx;
width: 90vw;
min-height: 600rpx;
border-radius: 15rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
.popConfig-title {
width: 100%;
font-size: 35rpx;
display: flex;
justify-content: space-around;
font-weight: 600;
padding: 10rpx 0 20rpx 0;
}
.popConfig-content {
width: 100%;
padding-bottom: 10px;
.popConfig-content-item-check {
border: 4rpx solid #5861d0ff;
background-color: #f7f7fc;
}
.popConfig-content-item-uncheck {
border: 4rpx solid #d9d9d9ff;
background-color: white;
}
.popConfig-content-item {
box-sizing: border-box;
padding: 10rpx 0;
border-radius: 15rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
margin-bottom: 30rpx;
.radio-content {
width: 100%;
.uni-form-item {
// background-color: red;
width: 100%;
padding: 10rpx 0;
display: flex;
justify-content: space-between;
align-items: center;
view:nth-last-of-type(1) {
align-items: center;
}
.radio-content-picker {
.uni-input {
color: #7e7d96ff;
padding: 0;
background-color: rgba(220, 38, 38, 0);
line-height: 55rpx;
}
}
/deep/.uni-numbox__value[data-v-15947278] {
border: none;
background-color: #edededff;
min-width: 100rpx;
height: 55rpx;
margin: 0 15rpx;
// line-height: 55rpx;
// align-items: center;
}
/deep/.uni-numbox__minus[data-v-15947278],
/deep/.uni-numbox__plus[data-v-15947278] {
border-radius: 40rpx;
border: 2rpx solid #dfe3eb;
height: 55rpx;
background-color: white;
}
}
}
}
}
view {
img {
margin-top: 30rpx;
width: 150rpx;
height: 150rpx;
}
}
.popConfig-txt {
text-align: center;
.popConfig-title {
font-size: 40rpx;
color: #3b385aff;
}
.popConfig-des {
font-size: 35rpx;
color: #3b385aff;
}
}
.popConfig-btn {
display: flex;
flex-direction: row;
width: 100%;
justify-content: space-between;
z-index: 9;
button {
width: 35%;
height: 60rpx;
line-height: 60rpx;
background-color: #5861d0ff;
color: white;
border-radius: 40rpx;
}
button:nth-last-child(1) {
background-color: white;
color: #5861d0;
border: 2rpx solid #5861d0;
}
}
}
</style>
data.json
[
{
"code": "9902",
"label": "北京分公司",
"value": "a4abb16b-0bce-4f5a-8337-c3e8bb1d0d6b",
"children": [
{
"code": "990225",
"label": "北京本部",
"value": "66063b9d-28a2-4cbb-ac61-afe353a6e4cf",
"children": [
{
"label": "222222",
"code": "TEST2403jn01",
"orgId": "66063b9d-28a2-4cbb-ac61-afe353a6e4cf",
"value": "7da99ce7-5768-4b8f-9026-3907072c5b2c"
},
{
"code": "TEST2403bb01",
"orgId": "66063b9d-28a2-4cbb-ac61-afe353a6e4cf",
"value": "bff749ea-2fc3-440c-a6d9-1911d65461d2",
"label": "aaaaaaaaaaaaaaaaaaa"
}
]
},
{
"code": "990210",
"label": "业务一组",
"value": "05ed1a8c-406a-4a10-9ed2-2792a6014355",
"children": [
{
"orgId": "05ed1a8c-406a-4a10-9ed2-2792a6014355",
"code": "TEST2407jn01",
"value": "40de6596-b27f-4e1d-984f-9794b5519057",
"label": "qe"
},
{
"code": "TEST2408jn02",
"value": "5ecfa665-8206-4740-a9eb-c0dd26999f4f",
"label": "41",
"orgId": "05ed1a8c-406a-4a10-9ed2-2792a6014355"
},
{
"label": "1111111",
"orgId": "05ed1a8c-406a-4a10-9ed2-2792a6014355",
"value": "716e3c80-2201-4b41-a990-609feff9af04",
"code": "TEST2404ly01"
},
{
"label": "dsadasd",
"orgId": "05ed1a8c-406a-4a10-9ed2-2792a6014355",
"value": "86fb29d7-a542-4ade-95d3-755c85fca7e4",
"code": "TEST2407hl01"
},
{
"label": "2121",
"orgId": "05ed1a8c-406a-4a10-9ed2-2792a6014355",
"value": "f9611728-4e0e-45dd-a6a7-994f478a565d",
"code": "TEST2407xa01"
}
]
}
]
}
]