巡检

pages/tabBar/xjPage/xj.vue

@@ -1,17 +1,53 @@
 <!-- 报事上报 -->
 <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">
-      <view class="conItem-title">房源</view>
+      <u--form labelPosition="left" :model="userInfo" ref="uForm">
-      <view class="conItem-cont">
+
-        <view class="conItem-cont-item" v-for="(item, index) in fyList" :key="index">
+        <u-form-item labelAlign="right" labelWidth="100px" label="乐业社区" prop="userInfo.sex" borderBottom
-          <image :src="item.image" class="itemImg"></image>
+          @click="lysqShow = true; hideKeyboard()" ref="item1">
-          <text class="itemText">房子</text>
+          <u--input v-model="userInfo.sex" disabled disabledColor="#ffffff" placeholder="请选择" border="none"></u--input>
-        </view>
+          <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>
 
@@ -19,24 +55,38 @@
 export default {
   data () {
     return {
-      fyList: [
+      wtlxShow: false,
-        { image: '/static/img/看房.png', text: '看房确认' },
+      lysqShow: false,
-        { image: '/static/img/退房检查.png', text: '退房检查' },
+      actions: [
-        { image: '/static/img/释放.png', text: '释放房源检查' },
+        { name: '乐业社区1', },
-        { image: '/static/img/预约.png', text: '预约看房' },
+        { name: '乐业社区2', },
-        { image: '/static/img/强制清退.png', text: '强制清退' },
       ],
+      actions1: [
+        { name: '问题1', },
+        { name: '问题2', },
+      ],
+      userInfo: {
+        sex: '',
+      },
+      userInfo1: {
+        name: '',
+        phone: '',
+      },
+      radio: '',
+      switchVal: false,
     }
   },
   onLoad () {
 
   },
   methods: {
-    handleBsClick (item) {
+    handleBtn () {
-      uni.navigateTo({
+
-        url: '/pages/tabBar/bsPage/bsRecord'
+    },
-      })
+    sexSelect (e) {
-    }
+      this.model1.userInfo.sex = e.name
+      this.$refs.uForm.validateField('userInfo.sex')
+    },
   }
 }
 </script>
@@ -45,32 +95,57 @@ export default {
 .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 {
-  left: 11rpx;
-  top: 98rpx;
   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-bottom: 20rpx;
+  margin-top: 20rpx;
   padding: 20rpx;
   box-sizing: border-box;
 }
 
-.conItem-title {
+.btn {
-  color: rgb(64, 64, 64);
+  width: 414rpx;
-  font-size: 30rpx;
+  height: 70rpx;
-  text-align: left;
+  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%);
-.conItem-cont {
+  color: rgba(255, 255, 255, 1);
-  display: flex;
+  font-size: 34rpx;
-  flex-direction: row;
+  text-align: center;
-  justify-content: flex-start;
+  margin: auto;
-  flex-wrap: wrap;
+  margin-top: 40rpx;
-  margin-top: 20rpx;
 }
 </style>