elink-star
/
epmet-apartment-work-mp
12
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

水电上报

wyx
fp 1 month ago
parent
ba5f3f9496
commit
133105a1a8
6 changed files with 627 additions and 2 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 14
      pages.json
  2. 300
      pages/tabBar/sdPage/dfReport.vue
  3. 300
      pages/tabBar/sdPage/sfReport.vue
  4. 13
      pages/tabBar/work/index.vue
  5. BIN
      static/img/arrow-left.png
  6. BIN
      static/img/arrow-right.png

14
pages.json
View File

@ -56,6 +56,20 @@
"navigationBarTitleText": "巡检记录",
"disableScroll": true
}
},
{
"path": "pages/tabBar/sdPage/sfReport",
"style": {
"navigationBarTitleText": "水费上报",
"disableScroll": true
}
},
{
"path": "pages/tabBar/sdPage/dfReport",
"style": {
"navigationBarTitleText": "电费上报",
"disableScroll": true
}
}
],
"subPackages": [{

300
pages/tabBar/sdPage/dfReport.vue
View File

@ -0,0 +1,300 @@
<template>
<view class="page-content dfReport">
<!-- 房间图片 -->
<view class="bg-box">
<view class="bg-text">
<view>填写信息</view>
<view>请您填写相关问题</view>
</view>
<image class="bg-img" src="/static/img/bsorbxBac.png" mode="aspectFill"></image>
</view>
<view class="info-card">
<view class="meter-row">
<view class="meter-label">
<view style="color: #f93838;margin-right: 4rpx;">*</view>
<text>乐业社区</text>
</view>
<view class="picker-label">
<picker mode="selector" :range="items" @change="onPickerChange($event,'乐业社区')">
<view :style="{'color':!form.pickerValue?'#cbcbcb':''}">{{form.pickerValue || pickerPlaceholder}}</view>
</picker>
<image class="arrow-r" src="/static/img/arrow-right.png" mode="aspectFill"></image>
</view>
</view>
<view class="meter-row">
<view class="meter-label">
<view style="color: #f93838;margin-right: 4rpx;">*</view>
<text>房屋</text>
</view>
<view class="picker-label">
<picker mode="selector" :range="items" @change="onPickerChange($event,'房屋')">
<view :style="{'color':!form.pickerValue2?'#cbcbcb':''}">{{form.pickerValue2 || pickerPlaceholder}}</view>
</picker>
<image class="arrow-r" src="/static/img/arrow-right.png" mode="aspectFill"></image>
</view>
</view>
</view>
<view class="section-card">
<view class="meter-row">
<text class="meter-label">水表号</text>
<!-- <text>20072620</text> -->
<u-input v-model="form.waterMeter" type="digit" placeholder="请输入水表号" border="none" />
</view>
<view class="meter-row">
<text class="meter-label">上次表数</text>
<u-input v-model="form.waterMeter" type="digit" :placeholder="`3823.1`" border="none" />
</view>
<view class="meter-row">
<text class="meter-label">本次表数</text>
<u-input v-model="form.waterMeter" type="digit" placeholder="请输入本次表数" border="none" />
</view>
<view class="imeter-row">
<text class="meter-label">上传图片</text>
<u-upload
v-model="fileList"
:max-count="10"
:multiple="true"
:preview-full-image="true"
:deletable="true"
:show-upload-list="true"
:file-list="fileList"
accept="image"
@after-read="afterRead"
@delete="onDelete"
>
<view class="custom-upload-btn">
<u-icon name="plus" size="40"></u-icon>
<view class="upload-tips">点击上传</view>
</view>
</u-upload>
</view>
</view>
<!-- 提交按钮 -->
<view class="submit-btn-wrap">
<u-button type="primary" shape="circle" @click="onSubmit">提交</u-button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
items: ['选项1', '选项2', '选项3'], // 下拉列表的选项
pickerPlaceholder: '请选择', // 初始显示的文字
waterMeter: 3245.1,
electricMeter: 2672.6,
remark: '',
fileList: [],
form:{
pickerValue: '',
pickerValue2: '',
waterMeter: ''
},
}
},
methods: {
onPickerChange(e,type){
if(type == '乐业社区'){
this.form.pickerValue = this.items[e.detail.value]
} else if(type == '房屋'){
this.form.pickerValue2 = this.items[e.detail.value]
}
},
onDeviceChange(idx, val) {
this.deviceList[idx].status = val
},
afterRead(event) {
let files = Array.isArray(event) ? event : [event]
this.fileList = this.fileList.concat(files)
},
onDelete(event) {
this.fileList.splice(event.index, 1)
},
onSubmit() {
if(!this.form.pickerValue){
uni.showToast({ title: '请选择乐业社区', icon: 'none' });
return
} else if(!this.form.pickerValue2){
uni.showToast({ title: '请选择房屋', icon: 'none' });
return
}
console.log('onSubmit',this.form);
}
}
}
</script>
<style scoped>
.page-content{
background: #f7f7f7;
min-height: 100vh;
padding-bottom: 40rpx;
}
.bg-box {
/* padding-top: 40rpx; */
width: 100vw;
height: 280rpx;
object-fit: cover;
display: block;
position: relative;
display: flex;
/* align-items: center; */
}
.bg-img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.bg-text{
margin: 50rpx 0 0 28rpx;
z-index: 1;
font-size: 44rpx;
color:#101010;
}
.bg-text view:nth-child(2){
font-size: 28rpx;
color:#666666;
}
.info-card {
background: #fff;
border-radius: 20rpx;
margin: -80rpx 24rpx 16rpx 24rpx;
padding: 24rpx 24rpx 12rpx 24rpx;
box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.04);
position: relative;
z-index: 2;
}
.room-title {
font-weight: bold;
font-size: 32rpx;
margin-bottom: 16rpx;
}
.info-row {
font-size: 28rpx;
color: #222;
margin-bottom: 8rpx;
}
.label {
color: #888;
margin-right: 24rpx;
}
.section-card {
background: #fff;
border-radius: 20rpx;
margin: 0 24rpx 16rpx 24rpx;
padding: 24rpx;
z-index: 2;
}
.section-title {
font-weight: bold;
font-size: 28rpx;
margin-bottom: 18rpx;
}
.device-row {
display: flex;
align-items: center;
padding: 0 24rpx;
min-height: 64rpx;
border-bottom: 1px solid #f2f2f2;
}
.device-label {
width: 160rpx;
color: #222;
font-size: 28rpx;
margin-right: 24rpx;
}
.meter-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12rpx;
/* padding-bottom: 14rpx; */
padding: 16rpx 0 26rpx;
border-bottom: 2rpx solid #bbbbbb43;
}
.meter-label {
display: flex;
flex-direction: row;
align-items: center;
width: 140rpx;
color: #68758b;
font-size: 28rpx;
}
.picker-label{
display: flex;
align-items: center;
font-size: 28rpx;
}
.arrow-r{
width: 30rpx;
height: 30rpx;
}
.u-input .u-input__content uni-input {
text-align: right !important;
}
.u-radio {
margin-right: 36rpx;
}
.meter-value {
color: #222;
font-size: 28rpx;
}
.custom-upload-btn {
width: 160rpx;
height: 160rpx;
background: #fafafa;
border: 2rpx solid #f0f0f0;
border-radius: 16rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 20rpx 16rpx 0 0;
}
.upload-tips {
color: #bbb;
font-size: 24rpx;
margin-top: 8rpx;
}
.u-upload__wrap {
display: flex;
flex-wrap: wrap;
align-items: center;
margin-top: 20rpx;
}
.u-upload__preview {
border-radius: 16rpx;
overflow: hidden;
margin-right: 16rpx;
margin-bottom: 16rpx;
}
.submit-btn-wrap {
width: 100%;
display: flex;
justify-content: center;
margin: 40rpx 0 0 0;
}
.u-button--primary {
background: linear-gradient(90deg, #0DC6C6 0%, #13C2C2 100%) !important;
font-size: 36rpx;
border-radius: 48rpx !important;
width: 80vw;
height: 88rpx;
}
</style>
<style>
.dfReport .u-input{
text-align: right !important;
}
</style>

300
pages/tabBar/sdPage/sfReport.vue
View File

@ -0,0 +1,300 @@
<template>
<view class="page-content sfReport">
<!-- 房间图片 -->
<view class="bg-box">
<view class="bg-text">
<view>填写信息</view>
<view>请您填写相关问题</view>
</view>
<image class="bg-img" src="/static/img/bsorbxBac.png" mode="aspectFill"></image>
</view>
<view class="info-card">
<view class="meter-row">
<view class="meter-label">
<view style="color: #f93838;margin-right: 4rpx;">*</view>
<text>乐业社区</text>
</view>
<view class="picker-label">
<picker mode="selector" :range="items" @change="onPickerChange($event,'乐业社区')">
<view :style="{'color':!form.pickerValue?'#cbcbcb':''}">{{form.pickerValue || pickerPlaceholder}}</view>
</picker>
<image class="arrow-r" src="/static/img/arrow-right.png" mode="aspectFill"></image>
</view>
</view>
<view class="meter-row">
<view class="meter-label">
<view style="color: #f93838;margin-right: 4rpx;">*</view>
<text>房屋</text>
</view>
<view class="picker-label">
<picker mode="selector" :range="items" @change="onPickerChange($event,'房屋')">
<view :style="{'color':!form.pickerValue2?'#cbcbcb':''}">{{form.pickerValue2 || pickerPlaceholder}}</view>
</picker>
<image class="arrow-r" src="/static/img/arrow-right.png" mode="aspectFill"></image>
</view>
</view>
</view>
<view class="section-card">
<view class="meter-row">
<text class="meter-label">水表号</text>
<!-- <text>20072620</text> -->
<u-input v-model="form.waterMeter" type="digit" placeholder="请输入水表号" border="none" />
</view>
<view class="meter-row">
<text class="meter-label">上次表数</text>
<u-input v-model="form.waterMeter" type="digit" :placeholder="`3823.1`" border="none" />
</view>
<view class="meter-row">
<text class="meter-label">本次表数</text>
<u-input v-model="form.waterMeter" type="digit" placeholder="请输入本次表数" border="none" />
</view>
<view class="imeter-row">
<text class="meter-label">上传图片</text>
<u-upload
v-model="fileList"
:max-count="10"
:multiple="true"
:preview-full-image="true"
:deletable="true"
:show-upload-list="true"
:file-list="fileList"
accept="image"
@after-read="afterRead"
@delete="onDelete"
>
<view class="custom-upload-btn">
<u-icon name="plus" size="40"></u-icon>
<view class="upload-tips">点击上传</view>
</view>
</u-upload>
</view>
</view>
<!-- 提交按钮 -->
<view class="submit-btn-wrap">
<u-button type="primary" shape="circle" @click="onSubmit">提交</u-button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
items: ['选项1', '选项2', '选项3'], // 下拉列表的选项
pickerPlaceholder: '请选择', // 初始显示的文字
waterMeter: 3245.1,
electricMeter: 2672.6,
remark: '',
fileList: [],
form:{
pickerValue: '',
pickerValue2: '',
waterMeter: ''
},
}
},
methods: {
onPickerChange(e,type){
if(type == '乐业社区'){
this.form.pickerValue = this.items[e.detail.value]
} else if(type == '房屋'){
this.form.pickerValue2 = this.items[e.detail.value]
}
},
onDeviceChange(idx, val) {
this.deviceList[idx].status = val
},
afterRead(event) {
let files = Array.isArray(event) ? event : [event]
this.fileList = this.fileList.concat(files)
},
onDelete(event) {
this.fileList.splice(event.index, 1)
},
onSubmit() {
if(!this.form.pickerValue){
uni.showToast({ title: '请选择乐业社区', icon: 'none' });
return
} else if(!this.form.pickerValue2){
uni.showToast({ title: '请选择房屋', icon: 'none' });
return
}
console.log('onSubmit',this.form);
}
}
}
</script>
<style scoped>
.page-content{
background: #f7f7f7;
min-height: 100vh;
padding-bottom: 40rpx;
}
.bg-box {
/* padding-top: 40rpx; */
width: 100vw;
height: 280rpx;
object-fit: cover;
display: block;
position: relative;
display: flex;
/* align-items: center; */
}
.bg-img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.bg-text{
margin: 50rpx 0 0 28rpx;
z-index: 1;
font-size: 44rpx;
color:#101010;
}
.bg-text view:nth-child(2){
font-size: 28rpx;
color:#666666;
}
.info-card {
background: #fff;
border-radius: 20rpx;
margin: -80rpx 24rpx 16rpx 24rpx;
padding: 24rpx 24rpx 12rpx 24rpx;
box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.04);
position: relative;
z-index: 2;
}
.room-title {
font-weight: bold;
font-size: 32rpx;
margin-bottom: 16rpx;
}
.info-row {
font-size: 28rpx;
color: #222;
margin-bottom: 8rpx;
}
.label {
color: #888;
margin-right: 24rpx;
}
.section-card {
background: #fff;
border-radius: 20rpx;
margin: 0 24rpx 16rpx 24rpx;
padding: 24rpx;
z-index: 2;
}
.section-title {
font-weight: bold;
font-size: 28rpx;
margin-bottom: 18rpx;
}
.device-row {
display: flex;
align-items: center;
padding: 0 24rpx;
min-height: 64rpx;
border-bottom: 1px solid #f2f2f2;
}
.device-label {
width: 160rpx;
color: #222;
font-size: 28rpx;
margin-right: 24rpx;
}
.meter-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12rpx;
/* padding-bottom: 14rpx; */
padding: 16rpx 0 26rpx;
border-bottom: 2rpx solid #bbbbbb43;
}
.meter-label {
display: flex;
flex-direction: row;
align-items: center;
width: 140rpx;
color: #68758b;
font-size: 28rpx;
}
.picker-label{
display: flex;
align-items: center;
font-size: 28rpx;
}
.arrow-r{
width: 30rpx;
height: 30rpx;
}
.u-input .u-input__content uni-input {
text-align: right !important;
}
.u-radio {
margin-right: 36rpx;
}
.meter-value {
color: #222;
font-size: 28rpx;
}
.custom-upload-btn {
width: 160rpx;
height: 160rpx;
background: #fafafa;
border: 2rpx solid #f0f0f0;
border-radius: 16rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 20rpx 16rpx 0 0;
}
.upload-tips {
color: #bbb;
font-size: 24rpx;
margin-top: 8rpx;
}
.u-upload__wrap {
display: flex;
flex-wrap: wrap;
align-items: center;
margin-top: 20rpx;
}
.u-upload__preview {
border-radius: 16rpx;
overflow: hidden;
margin-right: 16rpx;
margin-bottom: 16rpx;
}
.submit-btn-wrap {
width: 100%;
display: flex;
justify-content: center;
margin: 40rpx 0 0 0;
}
.u-button--primary {
background: linear-gradient(90deg, #0DC6C6 0%, #13C2C2 100%) !important;
font-size: 36rpx;
border-radius: 48rpx !important;
width: 80vw;
height: 88rpx;
}
</style>
<style>
.sfReport .u-input{
text-align: right !important;
}
</style>

13
pages/tabBar/work/index.vue
View File

@ -25,7 +25,7 @@
<view class="conItem">
<view class="conItem-title">水电</view>
<view class="conItem-cont">
<view class="conItem-cont-item" v-for="(item, index) in sdList" :key="index">
<view class="conItem-cont-item" v-for="(item, index) in sdList" :key="index" @click="handelSdClick(item)">
<image :src="item.image" class="itemImg"></image>
<text class="itemText">{{ item.text }}</text>
</view>
@ -128,6 +128,17 @@ export default {
url: '/pages/tabBar/xjPage/xjRecord'
})
}
},
handelSdClick (item) {
if(item.text === '水费上报'){
uni.navigateTo({
url: '/pages/tabBar/sdPage/sfReport'
})
} else if(item.text === '电费上报'){
uni.navigateTo({
url: '/pages/tabBar/sdPage/dfReport'
})
}
}
}
}

BIN
static/img/arrow-left.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

BIN
static/img/arrow-right.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 534 B

Write Preview
Loading…
Cancel
Save