<template>
  <view class="apply-return-of-new-piece-state" style="width: 100%; height: 100vh">
    <zj-page-container>
      <zj-page-fill>
        <view class="piece_state_info" v-if="state">
          <image class="icon_cg" src="/static/images/fittingsManagement/icon_cg.png" mode="aspectFill"> </image>
          <view class="piece_state_ts"> 支付成功 </view>
          <view class="piece_state_text"> 请及时在网点领取您申请的配件 </view>
          <view class="piece_state_text"> 若网点配件不足时，可能无法领取 </view>
        </view>
      </zj-page-fill>
      <view class="backbtnclick">
        <view class="confirm-btn" @tap.stop="goto4">返回配件管理</view>
      </view>
    </zj-page-container>
  </view>
</template>

<script>
import zjPageContainer from '@/components/zj-page-container/zj-page-container.vue'
import zjPageFill from '@/components/zj-page-container/zj-page-fill.vue'
import { getStorage } from '@/common/utils/storage.js'
export default {
  components: {
    zjPageContainer,
    zjPageFill
  },
  data() {
    return {
      option: {},
      state: false
    }
  },
  computed: {
    userInfo() {
      return getStorage('user')
    },
    idcard() {
      return this.userInfo.idCard
    }
  },
  onLoad: function (option) {
    this.option = option
    uni.showLoading({
      title: '等待结果'
    })
    this.getDetails()
  },
  methods: {
    getDetails() {
      this.$api
        .post('/app/worker/parts-sales/loadSalesOrderById', this.option)
        .then(res => {
          if (res.data.payFlag === 1) {
            this.state = true
            uni.hideLoading()
          } else {
            setTimeout(() => {
              this.getDetails()
            }, 1000)
          }
          this.getWebsitInfo(res.data.websitId)
          this.info = res.data
        })
        .catch(() => {})
    },
    goto4() {
      if (!this.state) {
        uni.hideLoading()
      }
      uni.navigateBack({
        delta: 2
      })
    }
  }
}
</script>

<style scoped lang="scss">
.apply-return-of-new-piece-state {
  background: #fff;

  .piece_state_info {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    box-sizing: border-box;
    padding-top: 86upx;

    .icon_cg {
      width: 248upx;
      height: 248upx;
    }

    .piece_state_ts {
      font-size: 40upx;
      font-family: PingFang SC, PingFang SC-Medium;
      font-weight: 500;
      text-align: center;
      color: #333333;
      line-height: 40upx;
      margin-bottom: 40upx;
    }

    .piece_state_text {
      font-size: 28upx;
      font-family: PingFang SC, PingFang SC-Medium;
      font-weight: 500;
      text-align: center;
      color: #333333;
      line-height: 32upx;
    }

    .confirm-btn-a {
      margin-top: 64upx;
      border-radius: 40upx;
      border: 1px solid #999999;
      width: 60%;
      height: 80upx !important;
      background: #fff !important;
      color: #666666;
      font-size: 32upx;
      font-family: PingFang SC, PingFang SC-Medium;
      font-weight: 500;
      text-align: center;
      line-height: 78upx;
    }
  }

  .backbtnclick {
    width: 100%;
    height: 200upx;

    .confirm-btn {
      margin: auto;
      width: 60%;
      background: linear-gradient(135deg, #7fdaff 0%, #6da7ff 100%) !important;
      height: 60rpx;
      line-height: 60rpx;
      border-radius: 30rpx;
      text-align: center;
      color: #fff;
    }
  }
}
</style>
