wxapp_shuibei/pages/users/vault/recycle/report.vue

<template>
  <view class="">
    <view class="banner">
      <view class="step-box">
        <up-steps :current="orderStatus" activeColor="#b5aa90">
          <up-steps-item
            :title="item.name"
            v-for="item in stepData"
            :key="item.name"
          >
          </up-steps-item>
        </up-steps>
      </view>

      <view class="block">
        <view class="check">
          <view class="header">
            <span class="title">合后检测确认单</span>
          </view>
          <view class="desc"
            >根据双方认可的检测内容及要求进行认定，为客户合后检测认定结果如下：</view
          >
          <view class="table">
            <view class="title">客户寄送品</view>
            <view class="tab_header">
              <up-row>
                <up-col :span="2">
                  <view class="col">类型</view>
                </up-col>
                <up-col :span="2">
                  <view class="col">来样重</view>
                </up-col>
                <up-col :span="2.5">
                  <view class="col">实际重</view>
                </up-col>

                <up-col :span="2.5">
                  <view class="col">成色</view>
                </up-col>
                <up-col :span="3">
                  <view class="col">存入克重</view>
                </up-col>
              </up-row>
            </view>
            <view class="tab_content">
              <view>
                <up-row v-for="item in detectionDetails" :key="item.id">
                  <up-col :span="2">
                    <view class="col">{{ getCate(item.type) }}</view>
                  </up-col>
                  <up-col :span="2">
                    <view class="col">{{ item.userEstimatedWeight }}g</view>
                  </up-col>
                  <up-col :span="2.5">
                    <view class="col">{{ item.discountedWeight }}g</view>
                  </up-col>
                  <up-col :span="2.5">
                    <view class="col">{{ item.purity }}%</view>
                  </up-col>
                  <up-col :span="3">
                    <view class="col"
                      >{{
                        item.unloadingWeight > 0
                          ? item.unloadingWeight
                          : "0.00" || "0.00"
                      }}g</view
                    >
                  </up-col>
                </up-row>
              </view>
            </view>
          </view>
          <view class="end">
            <view class="end-bttom">
              <span class="total">
                总计：
                <span class="price"
                  >{{ detectionReport.totalDiscountedWeight }}g</span
                >
                回收价：
                <span class="price">￥{{ detectionReport.totalPrice }}</span>
              </span>
            </view>
            <view
              class="end-bttom"
              style="margin-top: 10rpx"
              v-if="detectionReport.totalDeductedDeposit"
            >
              <span class="total">
                扣除保证金：
                <span class="price"
                  >￥{{ detectionReport.totalDeductedDeposit }}</span
                >
              </span>
            </view>
            <view class="end-bttom" style="margin-top: 10rpx">
              <span class="total">
                快递费用：
                <span class="price">￥{{ deliveryCosts }}</span>
              </span>
            </view>
            <view class="extra"
              >即:客户对{{
                detectionReport.inspectionTime
              }}合后检测重量和回收价无异议</view
            >
            <view class="sign">
              <span>检测人：{{ detectionReport.nikeName || "系统" }}</span>
            </view>
            <view class="time">
              {{ detectionReport.inspectionTime }}
            </view>
          </view>
          <view style="font-size: 14px; padding: 10px">
            <span style="font-size: 16px; font-weight: 700">注：</span>
            <span>折算公式：兑料重量 = 折足重量 = 来料熔后重量 * 折足成色</span>
          </view>
        </view>
      </view>
      <view class="block">
        <view class="check">
          <view class="header">
            <span class="title">检测图片</span>
          </view>
          <view class="checlImage">
            <cl-upload
              v-model="detectionImages"
              :add="false"
              :remove="false"
            ></cl-upload>
          </view>
        </view>
      </view>
    </view>
    <view style="height: 70px"></view>
    <view class="footer" v-if="orderStatus == 4">
      <view class="btn" @click="next()">确认报告</view>
    </view>
  </view>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { recyclDetectionReportAPI } from "@/api/functions";
const stepData = ref([
  {
    name: "待填写",
    isNow: 0,
    type: 1,
  },
  {
    name: "待邮寄",
    isNow: 0,
    type: 1,
  },
  {
    name: "待签收",
    isNow: 0,
    type: 1,
  },
  {
    name: "待检测",
    isNow: 0,
    type: 1,
  },
  {
    name: "待确认",
    isNow: 1,
    type: 0,
  },

  {
    name: "待打款",
    isNow: 0,
    type: 0,
  },
  {
    name: "完成",
    isNow: 0,
    type: 0,
  },
]);
// 注意：onLoad是uni-app的生命周期，如果是纯Vue3，应使用onMounted

// 替代Vue2的methods中的方法
const getCate = (cate) => {
  console.log(cate);

  switch (cate) {
    case 1:
      return "黄金";
    case 3:
      return "白银";
    case 2:
      return "铂金";
    case 4:
      return "K金";
  }
};
// 检测信息-成色类型等
const detectionDetails = ref([]);
// 检测详情
const detectionReport = ref({});
// 检测图片
const detectionImages = ref([]);
// 订单号
const orderNo = ref("");
// 订单状态
const orderStatus = ref(4);
// 快递费用
const deliveryCosts = ref(0);
onLoad((options) => {
  if (options.orderInfo) {
    // 先解码再解析
    const orderInfoStr = decodeURIComponent(options.orderInfo);
    const res = JSON.parse(orderInfoStr);
    detectionDetails.value = res.detectionDetails;

    detectionReport.value = res.detectionReport;
    detectionImages.value = JSON.parse(res.detectionReport.detectionImages);
    orderNo.value = res.id;
    orderStatus.value = res.status;
    deliveryCosts.value = res.deliveryCosts;
  }
});
// 确认报告
const next = async () => {
  uni.showLoading({
    title: "确认中",
  });
  const res = await recyclDetectionReportAPI(orderNo.value);
  uni.hideLoading();
  setTimeout(() => {
    uni.redirectTo({
      url: "/pages/users/vault/recycle/recyle_order",
    });
  }, 1000);
};
</script>

<style scoped lang="scss">
.banner {
  padding: 10px 15px;
  background: $uni-bg-primary; /* fallback for old browsers */

  .step-box {
    margin: 30rpx 0;
    width: 100%;
    background: #fff;
    height: 150rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 4px;

    &::v-deep .u-text__value {
      font-size: 24rpx !important;
    }
  }
}

.block {
  margin-bottom: 10px;

  .check {
    background-color: #fff;
    border-radius: 4px;
    padding-top: 10px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
  .header {
    font-size: 14px;
    font-weight: 700;
    padding-left: 10px;
    margin-left: 10px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    &::before {
      position: absolute; /*绝对定位*/
      top: 50%; /*Y轴方向偏移自身高度的50%*/
      transform: translatey(-40%); /*Y轴方向偏移微调*/
      left: 0px; /*紧靠容器左边缘*/
      content: ""; /*伪元素需要有内容才能显示*/
      width: 2px; /*伪元素宽度*/
      height: 18px; /*伪元素高度*/
      background-color: #daa520; /*伪元素颜色*/
    }
    .title {
      font-size: 18px;
    }
  }
  .desc {
    padding: 8px 10px;
    color: #888;
    font-size: 14px;
  }
}
.table {
  padding: 14px 10px;
  .title {
    text-align: center;
    padding: 4px 0;
    color: #fff;
    font-weight: 700;
    font-size: 20rpx;
    width: 100%;
    background-color: #b5aa90;
  }
  .tab_header {
    border-left: 1px solid #b5aa90;
    font-size: 18px;
    background-color: #fff;
    .col {
      padding: 12px 0;
      line-height: 19px;
      font-size: 22rpx;
    }
  }
  .tab_content {
    border-left: 1px solid #b5aa90;
    font-size: 16px;
    background-color: #fff;
    .col {
      padding: 12px 0;
      line-height: 19px;
      font-size: 22rpx;
    }
  }
  .tab_header .col,
  .tab_content .col {
    border-bottom: 1px solid #b5aa90;
    border-right: 1px solid #b5aa90;
    text-align: center;
    font-size: 22rpx;
  }
  .symbol-name {
    font-family: Microsoft YaHei, Arial, Helvetica, sans-serif;
    font-size: 20px;
    color: #ffbf24;
  }
}
.end {
  width: 100%;
  display: inline-block;
  text-align: right;
  .end-bttom {
    color: #888;
    .total {
      font-size: 16px;
    }
    .price {
      margin-right: 10px;
      color: #ffa034;
    }
  }
  .extra {
    font-size: 14px;
    margin-top: 15px;
    color: #888;
    margin-right: 10px;
  }
  .sign {
    margin: 10px;
  }
  .time {
    padding: 10px;
  }
}

.checlImage {
  padding: 10px;
}
.footer {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
  position: fixed;
  width: 100%;
  border-radius: 8px 8px 0 0;
  background-color: #fff;
  bottom: 0;
  height: 60px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  .btn {
    color: #fff;
    font-weight: 700;
    margin: 0 15px;
    border-radius: 10px;
    width: 100px;
    padding: 10px;
    text-align: center;
    background-color: #cc9933;
  }
}
</style>