epmet-apartment-work-mp/pages/tabBar/sdPage/dfReport.vue

<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;font-size: 24rpx;">*</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;font-size: 24rpx;">*</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>
      <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">
          <view class="icon-box">
            <image class="camera-icon" src="/static/img/camera-icon.png" mode="aspectFill"></image>
          </view>
          <view class="upload-tips">点击上传</view>
        </view>
      </u-upload>
    </view>
      
  </view>
  <!-- 提交按钮 -->
  <view class="submit-btn-wrap">
    <u-button class="u-button--primary " 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]
      }
    },
    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;
  font-weight: bold;
}
.bg-text view:nth-child(2){
  font-size: 28rpx;
  color:#666666;
  margin-top: 10rpx;
  font-weight: 400;
}

.info-card {
  background: #fff;
  border-radius: 20rpx;
  margin: -100rpx 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;
  margin-left: 8rpx;
}
.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;
}
.icon-box{
  width: 60rpx;
  height: 60rpx;
  background: #ceeced;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.camera-icon{
  width: 36rpx;
  height: 36rpx;
}
.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;
  border: none;
  width: 80%;
  height: 88rpx;
}
</style>

<style>
.dfReport .u-input__content__field-wrapper__field{
  text-align: right !important;
}
</style>