uni-Identify-quality/pages/order-goods/order-details.vue

<template>
  <div class="order-details" >
    <title-block class="title-block" title="订单详情">
      <template #left>
        <div> <image style="width: 112rpx;height: 52rpx" src="https://cdns.fontree.cn/fonchain-main/prod/image/default/artwork/785cf885-c4c9-44b3-8155-4b39988c7ef8.png" @click="back"></image></div>
      </template>
    </title-block>
<div :style="{height:`${distance}px`}" style="overflow-y: auto">
  <div style="padding-bottom: 128rpx">
  <div class="content2">
    <image :src="info.artworkImg"></image>
  </div>
  <div class="content3">
    <div class="wrap1">
      <div class="wrap1_1">
        <div class="wrap1_1_1">画作编号</div>
        <div class="wrap1_1_2"></div>
        <div class="wrap1_1_3">
          <input disabled placeholder-style="color: #939393;font-size: 24rpx;" :placeholder="info.artworkNum"/>
        </div>
        <div class="wrap1_1_4"></div>
      </div>
      <div class="wrap1_1">
        <div class="wrap1_1_1">画作名称</div>
        <div class="wrap1_1_2"></div>
        <div class="wrap1_1_3">
          <input disabled placeholder-style="color: #939393;font-size: 24rpx;" :placeholder="info.artworkName"/>
        </div>
        <div class="wrap1_1_4"></div>
      </div>
      <div class="wrap1_1">
        <div class="wrap1_1_1">画家名称</div>
        <div class="wrap1_1_2"></div>
        <div class="wrap1_1_3">
          <input disabled placeholder-style="color: #939393;font-size: 24rpx;" :placeholder="info.artistName"/>
        </div>
        <div class="wrap1_1_4">
        </div>
      </div>
      <div class="wrap1_1">
        <div class="wrap1_1_1">画作平尺数</div>
        <div class="wrap1_1_2"></div>
        <div class="wrap1_1_3">
          <input disabled placeholder-style="color: #939393;font-size: 24rpx;" :placeholder="info.artworkSquareSize"/>
        </div>
      </div>
    </div>
    <div class="wrap2"></div>
  </div>
  <div class="content3" >
    <div class="wrap1">
      <div class="wrap1_1">
        <div class="wrap1_1_1">订单编号</div>
        <div class="wrap1_1_2"></div>
        <div class="wrap1_1_3">
          <input disabled placeholder-style="color: #939393;font-size: 24rpx;" :placeholder="info.artworkNum"/>
        </div>
        <div class="wrap1_1_4"></div>
      </div>
      <div class="wrap1_1">
        <div class="wrap1_1_1">订单状态</div>
        <div class="wrap1_1_2"></div>
        <div class="wrap1_1_3">
          <input disabled :placeholder-style="statusValue.find(x=>x.value===info.artworkStatus).style" :placeholder="statusValue.find(x=>x.value===info.artworkStatus).label"/>
        </div>
        <div class="wrap1_1_4"></div>
      </div>
      <div class="wrap1_1">
        <div class="wrap1_1_1">寄存地址</div>
        <div class="wrap1_1_2"></div>
        <div class="wrap1_1_3">
          <input disabled placeholder-style="color: #76C458;font-size: 24rpx;" :placeholder="info.warehouseName"/>
        </div>
        <div class="wrap1_1_4">
        </div>
      </div>
      <div class="wrap1_1" style="position: relative;">
        <div class="wrap1_1_1" >寄存时限</div>
        <div class="wrap1_1_2"></div>
        <div class="wrap1_1_3" >
          <div class="wrap1_1_3_1" style="position: absolute;display: flex;align-items:center;top: 50%;transform: translateY(-50%);">
            <div class="wrap1_1_3_1_1" style="width: 70rpx;color:#fff;height: 30rpx;background: #76C458;font-size: 16rpx;display: flex;justify-content: center;align-items: center;margin-right: 2rpx">{{info.cycleName}}</div>
            <div v-if="info.artworkStatus!==1" class="wrap1_1_3_1_2" style="color: #939393;font-size: 24rpx;vertical-align: middle">{{`${info.startAt.replaceAll('-','.') || '' }-${info.endAt.replaceAll('-','.') || ''}`}}</div>
          </div>
        </div>
        <div class="wrap1_1_4">

        </div>
      </div>
      <div class="wrap1_1" style="position: relative;">
        <div class="wrap1_1_1">剩余天数</div>
        <div class="wrap1_1_2"></div>
        <div class="wrap1_1_3">
          <div class="wrap1_1_3_1" style="position: absolute;display: flex;align-items:center;top: 50%;transform: translateY(-50%)">
            <div class="wrap1_1_3_1_1" style="width: 110rpx;color:#FF4848;height: 30rpx;font-size: 24rpx;display: flex;justify-content: start;align-items: center;margin-right: 2rpx">{{info.levelDays}}天</div>
            <div v-if="info.artworkStatus===4" class="wrap1_1_3_1_2" style="color: #FF4848;font-size: 16rpx;vertical-align: middle">（{{info.endAt || ''}}已超时）</div>
          </div>
        </div>
        <div class="wrap1_1_4">
        </div>
      </div>
      <div class="wrap1_1">
        <div class="wrap1_1_1">订单金额</div>
        <div class="wrap1_1_2"></div>
        <div class="wrap1_1_3">
          <input disabled placeholder-style="color: #939393;font-size: 24rpx;" :placeholder="`${info.money}元`"/>
        </div>
        <div class="wrap1_1_4">
        </div>
      </div>
      <div class="wrap1_1">
        <div class="wrap1_1_1">每日集保金额</div>
        <div class="wrap1_1_2"></div>
        <div class="wrap1_1_3">
          <input disabled placeholder-style="color: #939393;font-size: 24rpx;" :placeholder="`${info.dayMoney}元`"/>
        </div>
        <div class="wrap1_1_4">
        </div>
      </div>
      <div class="wrap1_1">
        <div class="wrap1_1_1">待补款金额</div>
        <div class="wrap1_1_2"></div>
        <div class="wrap1_1_3">
          <input disabled placeholder-style="color: #FF4848;font-size: 24rpx;" :placeholder="`${info.supplementMoney}元`"/>
        </div>

      </div>
    </div>
    <div class="wrap2"></div>
  </div>
  </div>
</div>


  </div>
</template>
<script>
import {postDataByParams} from "../../http/service";

export default {
  name: "order-details",
  data(){
    return{
      distance:'',
      ID:'',
      info: {},
      statusValue: [{label: '全部状态', value: 0}, {label: '待入库', value: 1,style:'color: #FFBA00;font-size: 24rpx'}, {
        label: '已入库',
        value: 2,
        style:'color: #76C458;font-size: 24rpx'
      }, {label: '即将到期', value: 3,style:'color: #FF4848;font-size: 24rpx'}, {label: '延期未补款', value: 4,style:'color: #FF4848;font-size: 24rpx'}, {label: '已取出', value: 5,    style:'font-size: 24rpx'}, {label: '延期已补款', value: 7}]
    }
  },
  computed:{
    daysRemainingStyle(){
      switch (this.info.artworkStatus){
        case 1:
        case 2:
        case 3:
        case 5:
           return  'color: #939393;font-size: 24rpx;'
        case 4:{
         return  'color: #FF4848;font-size: 24rpx;'
        }

      }

    }
  },
  mounted() {

    if (this.$mp.query.ID) {
this.ID=this.$mp.query.ID
    }
    this.getData()
      uni.createSelectorQuery().select('.title-block').boundingClientRect(data => {
        let res = uni.getSystemInfoSync();
        const distance = res.windowHeight - data.bottom;
        this.distance = distance
      }).exec()


  },
  methods: {

    back(){
      uni.navigateBack()
    },
    async getData() {
      const res = await postDataByParams('/api/warehouse/detail',{ID:Number(this.ID)})
      if (res.code===200){
      this.info=res.data
      }else {
        uni.showToast({
          title: res.msg,
          icon:'none'
        })
      }
      console.log(res, 'res')
    }
  }
}
</script>
<style scoped lang="scss">
.order-details {
  background-image: url("https://cdns.fontree.cn/fonchain-main/prod/image/default/artwork/4fdc9a0f-d72a-46b6-a04d-ed56d5465213.png");
  box-sizing: border-box;
  overflow: hidden;
  padding-left: 30rpx;
  padding-right: 30rpx;
  background-size: cover;
  width: 100vw;
  height: 100vh;
  .content3 {
    margin-top: 60rpx;

    .wrap1 {
      border: 1rpx dashed #DFE9F0;
      background-color: #fff;

      .wrap1_1 {
        position: relative;
        height: 114rpx;
        display: flex;
        align-items: center;

        .wrap1_1_4 {
          left: 50%;
          transform: translateX(-50%);
          bottom: 0;
          position: absolute;
          height: 0;
          width: 636rpx;
          border-bottom: 0.5px solid #626262;
        }

        .wrap1_1_2 {
          margin-right: 36rpx;
          width: 0;
          height: 66rpx;
          border-left: 0.5px solid #626262;

        }

        .wrap1_1_1 {
          width: 210rpx;
          padding-left: 32rpx;

          color: #626262;
          font-size: 24rpx;
        }
      }
    }
  }

  .content2 {
    margin-top: 42rpx;
    display: flex;
    justify-content: center;

    image {
      width: 404rpx;
      height: 306rpx;
    }
  }

  .content1 {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .wrap1 {
      image {
        width: 112rpx;
        height: 52rpx;
      }
    }

    .wrap2 {
      color: #4E964D;
      font-size: 32rpx;
    }

    .wrap3 {
      image {
        width: 40rpx;
        height: 40rpx;
      }
    }
  }
}
</style>