warm_man/pages/Order/exchange.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'}">
    <u-col :span="12" :custom-style="{
      backgroundColor:'#FFFFFF',
      borderRadius:'20rpx',
      padding:'40rpx 32rpx',
      position:'relative'
    }">
      <view class="form-title">
        兑换详情
      </view>
      <view class="detail-container">
        <view class="detail-item" v-for="item in lists">
          <u-cell-group
              :border="false"
          >
            <u-cell
              custom-style="padding:0;" >
              <template #title>
                <view class="item-title">
                  {{item.title}}
                </view>
              </template>
              <template #label>
                <view class="item-label">
                  {{item.create_time}}
                </view>
              </template>
              <template #value>
                <view class="item-value">
                  兑换 <text class="item-value-price">{{item.number}}</text> 暖新币
                </view>
              </template>
            </u-cell>
          </u-cell-group>
        </view>
      </view>
    </u-col>
  </u-row>
  <u-loadmore :status="status" fontSize="28" marginBottom="30" marginTop="30" @loadmore="getDetail()"/>
</template>

<script>
import {
  imghost
} from '@/config/host.js'
import MzSubsection from '@/components/MzSubsection/Index.vue';
import api from '@/utils/functions.js';
import {houseOrderDetail, houseOrderExchange, submitHouseOrder, userExtends} 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: '',
        },
      },
      pages:{
        page:1,
        limit:10,
        house_order_id:''
      },
      title: '兑换详情',
      loading: true,
      size: {
        height: 500,
      },
      lists:[],
      status:'loadmore',

    }
  },
  onLoad(option) {
      this.pages.house_order_id = option.id
      this.getDetail()
  },
  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: {
    getDetail(clear = false){
      if (clear) {
        this.status = 'loadmore'
        this.pages.page = 1;
        this.lists = [];
      }
      if (this.status === 'nomore') {
        return false;
      }
      houseOrderExchange(this.pages).then(res => {
        if(res.code === 200){
          if (res.data.length === 0) {
            this.status = 'nomore'
          }
          this.lists.push.apply(this.lists,res.data);
        }else{
          uni.$u.toast(res.msg);
        }
      })
      this.pages.page++;
    },
    submit(){
      let file1 = [];
      this.fileList1.forEach(item => {
        file1.push(item.url)
      });
      this.model.order.payment_voucher = file1.join();
      let file2 = [];
      this.fileList2.forEach(item => {
        file2.push(item.url)
      });
      this.model.order.lease_agreement = file2;
      console.log(this.model.order)
      this.$refs.orderForm.validate().then(res => {
        submitHouseOrder(this.model.order).then(res => {
          if(res.code === 200){
            this.model = {
              order: {
                house_id: '',
                name: '',
                id_card: '',
                phone: '',
                month: '',
                rent: '',
                payment_voucher: '',
                lease_agreement: '',
              }
            };
            this.fileList1 = [];
            this.fileList2 = [];
            this.navTo('/pages/Order/done?id=');
          }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.uploadOssFile(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.uploadOssFile(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);
    },
    getUserExtend() {
      userExtends().then((res) => {
            if(res.code === 200) {
              uni.setStorageSync('user', res.data);
              this.$store.commit('userInfo', res.data);
              this.modalShow = !res.data?.phone
                  || !res.data?.name
                  || !res.data?.community
                  || !res.data?.street
                  || !res.data?.company
                  || !res.data?.position
                  || !res.data?.id_card;
              this.model.order.name = res.data.name;
              this.model.order.id_card = res.data.id_card;
              this.model.order.phone = res.data.phone;
            }
      });
    },
    navTo(url) {
      wx.navigateTo({
        url: url
      })
    },
  },
  onPageScroll(res) {

  },
  onReachBottom() {
    this.getDetail();
  },
  created() {
    // this.pagePadding = (api.navHeight().navPaddingTop +
    // 	api.navHeight().navHeight + (api.navHeight().headerPadding * 2))
  },
  mounted() {
    let token = uni.getStorageSync('token');
    // this.userInfo = this.$store.userInfo
    if(token && this.type === 'create'){
      this.getUserExtend();
    }
    if(this.type === 'detail'){
      this.getDetail(this.model.order.house_id);
    }
  }
}
</script>

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