warm_man/pages/Order/detail.vue

<template>
  <view class="body-background"></view>
  <u-navbar
      :title="title"
      :auto-back="true"
      left-icon-size="40rpx"
      :safe-area-inset-top="true"
      :placeholder="true"
      bgColor="#ffffff"
  ></u-navbar>
  <u-row :custom-style="{padding:'16rpx 26rpx 180rpx'}">
    <u-col :span="12" :custom-style="{
      backgroundColor:'#FFFFFF',
      borderRadius:'20rpx',
      padding:'40rpx 32rpx',
      minHeight:'1000rpx',
      position:'relative'
    }">
      <u-form
          errorType="toast"
          labelWidth="auto"
          labelPosition="left"
          :model="model"
          :rules="rules"
          ref="orderForm"
      >
        <view class="form-title">
          租房详情
        </view>
        <u-form-item
            label="承租人"
            prop="order.name"
            borderBottom
            :custom-style="{padding:'34rpx 0',fontSize:'32rpx',color:'#020b18',fontWeight:'400',lineHeight:'50rpx'}"
        >
          <u-input
              inputAlign="right"
              disabledColor="#ffffff"
              placeholder="请输入"
              border="none"
              :custom-style="{paddingRight:'28rpx'}"
              v-model="model.order.name"
          ></u-input>
        </u-form-item>
        <u-form-item
            label="身份证号"
            prop="order.id_card"
            borderBottom
            :custom-style="{padding:'34rpx 0',fontSize:'32rpx',color:'#020b18',fontWeight:'400',lineHeight:'50rpx'}"
        >
          <u-input
              inputAlign="right"
              disabledColor="#ffffff"
              placeholder="请输入"
              border="none"
              :custom-style="{paddingRight:'28rpx'}"
              v-model="model.order.id_card"
          ></u-input>
        </u-form-item>
        <u-form-item
            label="联系方式"
            prop="order.phone"
            borderBottom
            :custom-style="{padding:'34rpx 0',fontSize:'32rpx',color:'#020b18',fontWeight:'400',lineHeight:'50rpx'}"
        >
          <u-input
              inputAlign="right"
              disabledColor="#ffffff"
              placeholder="请输入"
              border="none"
              :custom-style="{paddingRight:'28rpx'}"
              v-model="model.order.phone"
          ></u-input>
        </u-form-item>
        <u-form-item
            label="租期"
            prop="order.month"
            borderBottom
            :custom-style="{padding:'34rpx 0',fontSize:'32rpx',color:'#020b18',fontWeight:'400',lineHeight:'50rpx'}"
        >
          <u-input
              inputAlign="right"
              disabledColor="#ffffff"
              placeholder="请输入"
              border="none"
              type="number"
              :custom-style="{paddingRight:'28rpx'}"
              v-model="model.order.month"
          >
            <template #suffix>
              <u-text text="个/月" color="#020B18" size="32"></u-text>
            </template>
          </u-input>
        </u-form-item>
        <u-form-item
            label="租金"
            prop="order.rent"
            borderBottom
            :custom-style="{padding:'34rpx 0',fontSize:'32rpx',color:'#020b18',fontWeight:'400',lineHeight:'50rpx'}"
        >
          <u-input
              inputAlign="right"
              disabledColor="#ffffff"
              placeholder="请输入"
              border="none"
              :custom-style="{paddingRight:'28rpx'}"
              v-model="model.order.rent"
          >
            <template #suffix>
              <u-text text="元/月" color="#020B18" size="32"></u-text>
            </template>
          </u-input>
        </u-form-item>
        <u-form-item
            prop="order.payment_voucher"
            :custom-style="{padding:'0 0',fontSize:'32rpx',color:'#020b18',fontWeight:'400',lineHeight:'50rpx'}"
        >
          <view class="form-label">
            打款凭证
          </view>
          <u-upload
              width="160"
              height="160"
              :fileList="fileList1"
              name="1"
              multiple
              :maxCount="10"
              uploadIcon="plus"
              @afterRead="afterFileRead1"
              @delete="deleteFile1"
          ></u-upload>
        </u-form-item>
        <u-form-item
            prop="order.lease_agreement"
            :custom-style="{padding:'0 0',fontSize:'32rpx',color:'#020b18',fontWeight:'400',lineHeight:'50rpx'}"
        >
          <view class="form-label no-top-pad">
            租赁协议
          </view>
          <view class="row">
            <view class="">
              <u-upload
                  width="160"
                  height="160"
                  :fileList="fileList2"
                  name="1"
                  multiple
                  :maxCount="10"
                  uploadIcon="plus"
                  @afterRead="afterFileRead2"
                  @delete="deleteFile2"
              ></u-upload>
            </view>
          </view>
        </u-form-item>
      </u-form>
      <view v-if="type !== 'create'" class="form-title m-t-46">
        兑换详情
      </view>
      <view v-if="type !== 'create'" class="detail-container">
        <view class="detail-item">
          <u-cell-group
              :border="false"
          >
            <u-cell
              custom-style="padding:0;" v-for="i of 4">
              <template #title>
                <view class="item-title">
                  {{i}}月房租
                </view>
              </template>
              <template #label>
                <view class="item-label">
                  2023-06-26
                </view>
              </template>
              <template #value>
                <view class="item-value">
                  兑换 <text class="item-value-price">168</text> 暖新币
                </view>
              </template>
            </u-cell>
          </u-cell-group>
        </view>
      </view>
    </u-col>
  </u-row>
  <view class="foot-button border-box">
    <u-button
        type="primary"
        text="我要兑换"
        shape="circle"
        :custom-style="{
              color:'#020B18',
              backgroundColor:'#FF9545',
              border:'none',
              fontSize:'36',
              fontWeight:'400',
              height:'80rpx'
            }"
        @click="submit"
    ></u-button>
  </view>
</template>

<script>
import {
  imghost
} from '@/config/host.js'
import MzSubsection from '@/components/MzSubsection/Index.vue';
import api from '@/utils/functions.js';
import {submitHouseOrder} from "@/api/user";
import {feedback} from "@/api/feed";

export default {
  components: {
    MzSubsection
  },
  data() {
    return {
      fileList1:[],
      fileList2:[],
      type:'create',
      model: {
        order: {
          house_id: '',
          name: '',
          id_card: '',
          phone: '',
          month: '',
          rent: '',
          payment_voucher: '',
          lease_agreement: '',
        },
      },
      rules: {
        'order.name': {
          type: 'string',
          required: true,
          message: '请填写承租人',
          trigger: ['blur', 'change']
        },
        'order.id_card': {
          type: 'string',
          required: true,
          message: '请填写身份证号',
          trigger: ['blur', 'change']
        },
        'order.phone': {
          type: 'string',
          required: true,
          message: '请填写联系方式',
          trigger: ['blur', 'change']
        },
        'order.month': {
          type: 'string',
          required: true,
          message: '请填写租期',
          trigger: ['blur', 'change']
        },
        'order.rent': {
          type: 'string',
          required: true,
          message: '请填写租金',
          trigger: ['blur', 'change']
        },
        'order.payment_voucher': {
          type: 'array',
          required: true,
          message: '请上传打印凭证',
          trigger: ['blur', 'change']
        },
        'order.lease_agreement': {
          type: 'string',
          required: true,
          message: '请上传租赁协议',
          trigger: ['blur', 'change']
        },
      },
      title: '租房详情',
      loading: true,
      size: {
        height: 500,
      }
    }
  },
  onLoad(option) {
      this.model.order.house_id = option.id?option.id:'';
      this.model.order.rent = option.rent?option.rent:'';
      this.type = option.type?option.type:'create';
    console.log(option)
  },
  onReady() {
    let that = this;
    let height = api.wxSystemInfo().system.windowHeight
    let headerHeight = uni.$u.getPx(44) + uni.$u.sys().statusBarHeight

    let info = uni.createSelectorQuery().in(this).select('.foot-button');
    info.boundingClientRect(function (data) {
      that.size.height = that.size.height = height - headerHeight - data.height - uni.$u.getPx('32rpx');
    }).exec(function (res) {});
  },
  computed: {},
  methods: {
    submit(){
      let file1 = [];
      this.fileList1.forEach(item => {
        file1.push(item.url)
      });
      this.model.order.payment_voucher = file1;
      let file2 = [];
      this.fileList2.forEach(item => {
        file2.push(item.url)
      });
      this.model.order.lease_agreement = file2.join();
      console.log(this.model.order)
      this.$refs.orderForm.validate().then(res => {
        submitHouseOrder(this.model.order).then(res => {
          if(res === '200'){
            uni.$u.toast('反馈成功')
          }else{
            uni.$u.toast(res.msg)
          }
        })
      }).catch(errors => {
        uni.$u.toast(errors[0].message)
      })

    },
    //上传文件
    async afterFileRead1  (event){
      let lists = [].concat(event.file);

      let fileListLen = this.fileList1.length;
      lists.map((item) => {
        this.fileList1.push({
          ...item,
          status: 'uploading',
          message: '上传中',
        });
      });
      for (let i = 0; i < lists.length; i++) {

        api.upfile(lists[i].url).then(res => {
          let item = this.fileList1[fileListLen];
          this.fileList1.splice(fileListLen, 1, {
            ...item,
            status: 'success',
            message: '',
            url: res.show_path,
            thumb: res.show_path,
          });
          fileListLen++;
        })
      }
    },
    //上传文件
    async afterFileRead2  (event){
      let lists = [].concat(event.file);

      let fileListLen = this.fileList2.length;
      lists.map((item) => {
        this.fileList2.push({
          ...item,
          status: 'uploading',
          message: '上传中',
        });
      });
      for (let i = 0; i < lists.length; i++) {

        api.upfile(lists[i].url).then(res => {
          let item = this.fileList2[fileListLen];
          this.fileList2.splice(fileListLen, 1, {
            ...item,
            status: 'success',
            message: '',
            url: res.show_path,
            thumb: res.show_path,
          });
          fileListLen++;
        })
      }
    },
    //删除上传图片
    deleteFile1(event){
      this.fileList1.splice(event.index, 1);
    },
    //删除上传图片
    deleteFile2(event){
      this.fileList2.splice(event.index, 1);
    },
  },
  onPageScroll(res) {

  },
  created() {
    // this.pagePadding = (api.navHeight().navPaddingTop +
    // 	api.navHeight().navHeight + (api.navHeight().headerPadding * 2))
  },
  mounted() {
    this.userInfo = uni.getStorageSync('user');
    // this.userInfo = this.$store.userInfo
    if(this.userInfo && this.type!=='create'){
      this.model.order.name = this.userInfo.name;
      this.model.order.id_card = this.userInfo.id_card;
      this.model.order.phone = this.userInfo.phone;
    }
  }
}
</script>

<style lang="scss">
@import './components/detail.scss';
</style>