GULIMMO
2023-11-09 b51b26b1b6ed71f2a1c2f440f4a374c578f9ed8a
subPackage/label/form.vue
@@ -1,18 +1,128 @@
<template>
   <view class="">
      <u-form labelPosition="left" :model="info" :rules="rules" ref="form" labelWidth="100"
         :labelStyle="{fontSize:'28rpx'}">
         <view class="content">
            <u-form-item label="对象电话" prop="transactionObjectTel" borderBottom  required>
               <u-input v-model="info.transactionObjectTel" border="none" placeholder="请输入" placeholderClass="f-28 c-99"
                  inputAlign="right"></u-input>
            </u-form-item>
            <u-form-item label="交易金额" prop="transactionMoney" borderBottom  required>
               <u-input v-model="info.transactionMoney"  disabled disabledColor="#fff" border="none" placeholder="请输入" placeholderClass="f-28 c-99"
                  inputAlign="right"></u-input>
            </u-form-item>
            <u-form-item label="物品数量" prop="goodsNums" borderBottom  required>
               <u-input v-model="info.goodsNums" type="number" border="none" placeholder="请输入" placeholderClass="f-28 c-99"
                  inputAlign="right"></u-input>
            </u-form-item>
            <u-form-item label="交易位置" prop="location" borderBottom ref="location" required>
               <u-input v-model="info.location"  border="none" placeholder="请输入" placeholderClass="f-28 c-99"
                  inputAlign="right"></u-input>
            </u-form-item>
            <u-form-item label="交易过程" prop="transactionProcess" borderBottom>
               <u-input v-model="info.transactionProcess"   border="none" placeholder="请输入" placeholderClass="f-28 c-99"
                  inputAlign="right"></u-input>
            </u-form-item>
         </view>
         <view class="upload bgc-ff">
            <view class="f-28 mb-20">手持身份证</view>
            <view class="mt-20">
               <u-upload :fileList="imageUrls" :previewFullImage="uploadConfig.previewFullImage"
                  :accept="uploadConfig.acceptImg" :multiple="uploadConfig.multiple"
                  :maxCount="uploadConfig.maxCount" :capture="uploadConfig.capture" @afterRead="afterReadImgs($event,'imageUrls')"
                  @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>
         <view class="upload bgc-ff">
            <view class="f-28 mb-20">物品照片</view>
            <view class="mt-20">
               <u-upload :fileList="goodsImageUrls" :previewFullImage="uploadConfig.previewFullImage"
                  :accept="uploadConfig.acceptImg" :multiple="uploadConfig.multiple"
                  :maxCount="uploadConfig.maxCount" :capture="uploadConfig.capture" @afterRead="afterReadImgs($event,'goodsImageUrls')"
                  @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>
      </u-form>
      <button class="submit-btn" @click="sumitInfo">提交</button>
      <!-- <button class="list-btn" @click="navigatorPage">我上报的事件</button> -->
   </view>
</template>
<script>
   import uploadMixin from "@/mixin/uploadMixin";
   import {
      saveLabelReporting
   } from "@/api/reporting/reporting";
   export default {
      mixins: [uploadMixin],
      data(){
         return{
            info: {
               transactionObjectTel:"",
               transactionMoney:"",
               goodsNums:"",
               location:"",
               transactionProcess:"",
               districtId:"",
               districtName:"",
               userId:""
            },
            rules: {
               'transactionObjectTel': {
                  type: 'string',
                  required: true,
                  message: '请输入对象电话',
                  trigger: ['blur', 'change']
               },
               'transactionMoney': {
                  type: 'string',
                  required: true,
                  message: '请输入交易金额',
                  trigger: ['blur', 'change']
               },
               'location':{
                  type: 'string',
                  required: true,
                  message: '请输入交易位置',
                  trigger: ['blur', 'change']
               },
               'transactionProcess':{
                  type: 'string',
                  required: false,
                  message: '请输入交易过程',
                  trigger: ['blur', 'change']
               }
            },
            imageUrls:[],
            goodsImageUrls:[]
         }
      },
      onLoad(option) {
         if(option.type != 1){
            uni.setNavigationBarTitle({title:this.setTitle(type)})
            uni.setNavigationBarTitle({title:this.setTitle(option.type)})
         }
         this.$set(this.info,"eventType",option.type);
         let siteInfo = uni.getStorageSync("siteInfo");
         let userInfo = uni.getStorageSync("userInfo");
         this.$set(this.info, "houseCode", siteInfo.id);
         this.$set(this.info, "districtName", siteInfo.name);
         this.$set(this.info, "userId", userInfo.user_id);
      },
      methods:{
         setTitle(type){
@@ -21,13 +131,141 @@
            }else if (type == 3){
               return "二手手机维修"
            }
         },
         confirmDate(e) {
            console.log(e);
            this.showSelectDate = false;
            this.info.checkTime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM')
         },
         async afterReadImgs(event, key) {
            this.showLoading()
            let lists = [].concat(event.file)
            let fileListLen = this[key].length
            lists.map((item) => {
               this[key].push({
                  ...item,
                  status: 'uploading',
                  message: '上传中'
               })
            })
            for (let i = 0; i < lists.length; i++) {
               const result = await this.uploadFilePromise(lists[i].url)
               this[key].splice(fileListLen, 1, Object.assign({}, {
                  url: result.data.link,
                  name: result.data.name
               }))
               fileListLen++
            }
            this.loadingClose()
         },
         checkImages() {
            if (this.imageUrls.length) {
               this.$set(this.info,"imageUrls",this.setImages(this.imageUrls))
            }
            if (this.goodsImageUrls.length) {
               this.$set(this.info,"goodsImageUrls",this.setImages(this.goodsImageUrls))
            }
            
         }
         },
         setImages(key){
            let urls = [];
             for(let i of key){
               urls.push(i.url);
            }
             return urls.join(",")
         },
         sumitInfo() {
            this.$refs.info.validate().then(valid => {
               this.checkImages()
               saveLabelReporting(this.info).then(res => {
                  uni.showToast({
                     icon: 'success',
                     title: '提交成功',
                     success() {
                        setTimeout(() => {
                           that.$u.func.globalNavigator("", "navBack")
                        }, 1000)
                     }
                  })
               })
            })
         },
         // 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;
      background-color: #fff;
   }
   /deep/.u-radio-group--row {
      justify-content: flex-end;
   }
   .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 20rpx;
      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;
   }
</style>