更新

Lou

2024-04-19 5b426c8bb73408fc358155882cbaebfeb803d6fa

 subPackage/school/trouble.vue

@@ -1,8 +1,271 @@
<template>
   <view class="">
      <view class="content bgc-ff">
         <u-form labelPosition="left" :model="info" :rules="rules" ref="form" labelWidth="90"
            :labelStyle="{fontSize:'28rpx'}">

            <u-form-item label="类型:" labelWidth="100" prop="type" :required="isRequired">
               <u-radio-group v-model="info.type">
                  <u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in statusList" :key="index"
                     :label="item.name" :name="item.id">
                  </u-radio>
               </u-radio-group>

            </u-form-item>

            <u-form-item label="家长姓名" prop="name" borderBottom ref="name" required>
               <u-input v-model="info.name" border="none" placeholder="请输入" placeholderClass="f-28 c-99"
                  inputAlign="right"></u-input>
            </u-form-item>

            <u-form-item label="家长手机号" prop="phone" borderBottom ref="phone" required>
               <u-input v-model="info.phone" border="none" placeholder="请输入" placeholderClass="f-28 c-99"
                  inputAlign="right"></u-input>
            </u-form-item>
            <u-form-item label="学生姓名" prop="realName" borderBottom ref="realName" required>
               <u-input v-model="info.realName" border="none" placeholder="请输入" placeholderClass="f-28 c-99"
                  inputAlign="right"></u-input>
            </u-form-item>
            <u-form-item label="学生班级" prop="gradeAndClass" borderBottom ref="gradeAndClass" required>
               <u-input v-model="info.gradeAndClass" border="none" placeholder="请输入" placeholderClass="f-28 c-99"
                  inputAlign="right"></u-input>
            </u-form-item>
            <u-form-item label="位置" prop="location" :borderBottom="false" required>
               <view class="address-row flex">
                  <view class="address-content f-28" v-if="info.location">
                     {{info.location}}
                  </view>
                  <view class="address-content f-28 c-99" v-if="!info.location">
                     请选择地址
                  </view>
                  <view class="location-btn c-main f-24" @click="getLocation()">
                     获取地址
                  </view>
               </view>
               <!-- <u-input v-model="info.address" border="none"  placeholderClass="f-28 c-99"
                  inputAlign="right"    disabled  disabledColor="#fff">
                  <template slot="suffix">
                     <button class="location-btn c-main f-24"   @click="getLocation()">获取地址</button>
                  </template>
               </u-input> -->
            </u-form-item>

            <u-form-item label="描述" prop="describe" borderBottom ref="describe" required>
               <u-textarea v-model="info.describe" border="none" placeholder="请输入" placeholderClass="f-28 c-99"
                  inputAlign="right"></u-textarea>
            </u-form-item>
         </u-form>
      </view>

      <view class="upload bgc-ff">
         <view class="f-28 mb-20">照片</view>
         <!-- <u-textarea v-model="info.remark" placeholder="请输入内容" border="none"
            placeholderClass="c-99 f-26"></u-textarea> -->
         <view class="mt-20">
            <u-upload :fileList="form.images" :previewFullImage="uploadConfig.previewFullImage"
               :accept="uploadConfig.acceptImg" :multiple="uploadConfig.multiple" :maxCount="uploadConfig.maxCount"
               :capture="uploadConfig.capture" @afterRead="afterReadImg" @delete="deletePic">
               <view class="upload-item upload-icon flex_base">
                  <u-icon name="/static/icon/upload.png" width="60rpx" height="60rpx"></u-icon>
               </view>
            </u-upload>
         </view>
      </view>


      <button class="submit-btn" @click="sumitInfo">提交</button>
      <!-- <button class="list-btn" @click="navigatorPage">我上报的事件</button> -->

   </view>
</template>

<script>
   import uploadMixin from "@/mixin/uploadMixin";
   import {
      addClockIn
   } from "@/api/school/school.js";
   export default {
      mixins: [uploadMixin],
      data() {
         return {
            info: {
               name: "",
               phone: "",
               location: "",
               gradeAndClass: ""
            },
            rules: {
               'name': {
                  type: 'string',
                  required: true,
                  message: '请输入家长姓名',
                  trigger: ['blur', 'change']
               },
               'phone': [{
                     type: 'string',
                     required: true,
                     message: '请输入手机号',
                     trigger: ['blur', 'change']
                  },
                  {
                     validator: (rule, value, callback) => {
                        return uni.$u.test.mobile(value);
                     },
                     message: '手机号码不正确',
                     trigger: ['change', 'blur']
                  }
               ],
               'location': {
                  type: 'string',
                  required: true,
                  message: '请选择地址',
                  trigger: ['blur', 'change']
               },
            },
            desc: "",
            title: "",
            curSelectSite: {},
            statusList: [{
                  name: "隐患",
                  id: 1
               },
               {
                  name: "矛盾",
                  id: 2
               }
            ],
         }
      },
      onLoad(option) {
         if (option.type) {
            this.info.type = option.type
         }


      },
      // onShow() {
      //    this.curSelectSite = uni.getStorageSync('siteInfo')
      //    this.info.addressCode = this.curSelectSite.houseCode
      // },
      methods: {

         getLocation() {
            uni.chooseLocation({
               success: (res) => {
                  this.$set(this.info, "location", res.address);
                  // this.$set(this.info, "lat", res.latitude);
                  // this.$set(this.info, "lng", res.longitude)
               }
            })
         },


         sumitInfo() {

            this.$refs.form.validate().then(valid => {
               if (this.form.images.length > 0) {
                  let urls = []
                  this.form.images.forEach(e => {
                     urls.push(e.name)
                  })
                  this.info.images = urls.join(",")
               }
               addClockIn(this.info).then(res => {
                  this.$showTips("提交成功", "success")
                  setTimeout(() => {
                     uni.navigateBack()
                  }, 300)
               })
            })
         },
         navigatorPage() {
            let url = "/subPackage/bs/views/repairList" + "?title=" + this.title + "&type=" + this.info.type
            this.$u.func.globalNavigator(url, "navTo")
         }
      }
   }
</script>

<style>
<style lang="less">
   page {
      background-color: #F5F5F5;
   }

   .content {
      margin: 20rpx 30rpx;
      padding: 0 30rpx;
   }

   .site-box {
      padding: 30rpx;
      margin: 20rpx 30rpx;
      border-radius: 4rpx;

      .c-aa {
         color: #aaa;
      }

      .address {
         width: 60%;
         margin-left: 25rpx;
      }
   }

   .upload-item {
      width: 140rpx;
      height: 140rpx;
      border: 1px solid #EEEEEE;
   }

   .upload {
      margin: 0 30rpx;
      padding: 30rpx;


   }

   .submit-btn {
      width: 690rpx;
      height: 78rpx;
      line-height: 78rpx;
      background: linear-gradient(163deg, #01BDFC 0%, #017BFC 100%);
      border-radius: 8rpx 8rpx 8rpx 8rpx;
      font-size: 32rpx;
      color: #fff;
      margin-top: 50rpx;
   }

   .list-btn {
      width: 690rpx;
      height: 78rpx;
      line-height: 78rpx;
      background: linear-gradient(163deg, #c7d7dc 0%, #c3cdd8 100%);
      border-radius: 8rpx 8rpx 8rpx 8rpx;
      font-size: 32rpx;
      color: #fff;
      margin-top: 50rpx;
   }

   .address-row {
      flex: 1;
      justify-content: flex-end;
      align-items: center;
   }

   .address-content {
      width: calc(100% - 116rpx - 20rpx);
      margin-right: 20rpx;
      text-align: right;
   }

   .location-btn {
      width: 116rpx;
      height: 46rpx;
      line-height: 46rpx;
      border-radius: 4rpx;
      border: 1px solid currentColor;
      padding: 0;
      background-color: #fff;
      text-align: center;
   }
</style>