epmet-apartment-work-mp/pages/tabBar/xjPage/xj.vue

<!-- 报事上报 -->
<template>
  <scroll-view class="content" scroll-y="true">
    <image src="/static/img/bsorbxBac.png" class="contentImg"></image>
    <view class="xjTitle">填写信息</view>
    <view class="xjTips">请您填写相关问题</view>
    <view class="conItem">
      <u--form labelPosition="left" :model="userInfo" ref="uForm">

        <u-form-item labelAlign="right" labelWidth="100px" label="乐业社区" prop="userInfo.sex" borderBottom
          @click="lysqShow = true; hideKeyboard()" ref="item1">
          <u--input v-model="userInfo.sex" disabled disabledColor="#ffffff" placeholder="请选择" border="none"></u--input>
          <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item>

        <u-form-item labelAlign="right" labelWidth="100px" label="巡检问题类型" prop="userInfo.sex" borderBottom
          @click="wtlxShow = true; hideKeyboard()" ref="item1">
          <u--input v-model="userInfo.sex" disabled disabledColor="#ffffff" placeholder="请选择" border="none"></u--input>
          <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item>

        <u-form-item labelAlign="right" labelWidth="100px" label="标题内容" prop="userInfo.sex" borderBottom ref="item1">
          <u--textarea v-model="userInfo.sex" placeholder="请输入内容" count maxlength="500"></u--textarea>
        </u-form-item>

        <u-form-item labelAlign="right" labelWidth="100px" label="问题描述" prop="userInfo.sex" borderBottom ref="item1">
          <u--textarea v-model="userInfo.sex" placeholder="请输入内容" count maxlength="500"></u--textarea>
        </u-form-item>


      </u--form>
    </view>

    <view class="conItem" style="margin-top: 40rpx;">
      <u--form labelPosition="left" :model="userInfo1" ref="uForm">
        <u-form-item labelAlign="right" labelWidth="100px" label="巡检人姓名" prop="userInfo.name" borderBottom ref="item1">
          <u--input v-model="userInfo.name" border="none"></u--input>
        </u-form-item>
        <u-form-item labelAlign="right" labelWidth="100px" label="巡检人电话" prop="userInfo.phone" borderBottom ref="item1">
          <u--input v-model="userInfo.phone" border="none"></u--input>
        </u-form-item>
      </u--form>
    </view>

    <view class="btn" @click="handleBtn">提交</view>

    <u-action-sheet :show="lysqShow" :actions="actions" title="请选择乐业社区" @close="lysqShow = false" @select="sexSelect">
    </u-action-sheet>
    <u-action-sheet :show="wtlxShow" :actions="actions1" title="请选择问题类型" @close="wtlxShow = false" @select="sexSelect">
    </u-action-sheet>
  </scroll-view>
</template>

<script>
import { listHouseWithCount } from '@/common/api.js';
export default {
  data () {
    return {
      wtlxShow: false,
      lysqShow: false,
      actions: [
        { name: '乐业社区1', },
        { name: '乐业社区2', },
      ],
      actions1: [
        { name: '问题1', },
        { name: '问题2', },
      ],
      userInfo: {
        sex: '',
      },
      userInfo1: {
        name: '',
        phone: '',
      },
      radio: '',
      switchVal: false,
    }
  },
  onLoad () {
    this.handleLogin()
  },
  methods: {
    async handleLogin () {
      try {
        const res = await listHouseWithCount({
          pageNum: 1,
          pageSize: 200,
        });
        console.log(res, 666);
        // uni.setStorageSync('token', res.token); // 保存 Token
        // uni.showToast({ title: '登录成功' });
      } catch (error) {
        console.error('登录失败:', error);
      }
    },
    handleBtn () {

    },
    sexSelect (e) {
      this.model1.userInfo.sex = e.name
      this.$refs.uForm.validateField('userInfo.sex')
    },
  }
}
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100vh;
  padding-bottom: 50rpx;
  box-sizing: border-box;
}

.contentImg {
  position: absolute;
  left: 0rpx;
  top: 0rpx;
  width: 100%;
  height: 280rpx;
  z-index: -1;
}

.xjTitle {
  width: 100%;
  color: rgba(16, 16, 16, 1);
  font-size: 38rpx;
  font-weight: bold;
  margin-left: 30rpx;
  margin-top: 40rpx;
}

.xjTips {
  width: 100%;
  color: rgba(102, 102, 102, 1);
  font-size: 26rpx;
  margin-left: 30rpx;
  margin-top: 10rpx;
}

.conItem {
  width: calc(100% - 40rpx);
  border-radius: 10rpx;
  margin-left: 20rpx;
  background-color: rgba(255, 255, 255, 1);
  box-shadow: 2rpx 2rpx 4rpx rgba(0, 0, 0, 0.2);
  margin-top: 20rpx;
  padding: 20rpx;
  box-sizing: border-box;
}

.btn {
  width: 414rpx;
  height: 70rpx;
  line-height: 70rpx;
  border-radius: 600rpx;
  background: linear-gradient(86.25deg, rgba(13, 198, 198, 1) 3.03%, rgba(19, 194, 194, 1) 3.03%, rgba(70, 219, 213, 1) 96.43%);
  color: rgba(255, 255, 255, 1);
  font-size: 34rpx;
  text-align: center;
  margin: auto;
  margin-top: 40rpx;
}
</style>