wxapp_shuibei/pages/users/vault/storeMetal/gmReport.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="3">
                  <view class="col">类型</view>
                </up-col>
                <up-col :span="3">
                  <view class="col">来样重</view>
                </up-col>
                <up-col :span="3">
                  <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="3">
                    <view class="col">{{ getCate(item.type) }}</view>
                  </up-col>
                  <up-col :span="3">
                    <view class="col"
                      >{{ Number(item.userEstimatedWeight).toFixed(2) }}g</view
                    >
                  </up-col>
                  <up-col :span="3">
                    <view class="col"
                      >{{ Number(item.discountedWeight).toFixed(2) }}g</view
                    >
                  </up-col>
                  <up-col :span="3">
                    <view class="col">{{ item.purity }}%</view>
                  </up-col>
                </up-row>
              </view>
            </view>
          </view>
          <view class="end">
            <view class="end-bttom">
              <span class="total">
                总计：
                <span class="price">{{ deTotalWeight.toFixed(2) }}g</span>
              </span>
            </view>
            <view class="extra"
              >即:客户对{{
                detectionReport.inspectionTime
              }}合后检测重量和回收价无异议</view
            >
            <view class="sign">
              <span
                >检测人：{{ detectionReport.inspectorNickname || "系统" }}</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 == 2">
      <view class="btn" @click="next()">确认报告</view>
    </view>
  </view>
</template>

<script setup>
import { onMounted, computed, ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { postalDepositAPI } 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,
  },
]);
// 注意：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);
onLoad((options) => {
  if (options.orderInfo) {
    // 先解码再解析
    const orderInfoStr = decodeURIComponent(options.orderInfo);
    const res = JSON.parse(orderInfoStr);
    detectionDetails.value = res.goldBalances;

    detectionReport.value = res;
    detectionImages.value = JSON.parse(res.inspectionImage);
    orderNo.value = res.id;
    orderStatus.value = res.status;
  }
});
// 确认报告
const next = async () => {
  const res = await postalDepositAPI(orderNo.value);
  uni.showToast({
    title: "确认成功",
    duration: 1000,
  });
  setTimeout(() => {
    uni.redirectTo({
      url: "/pages/users/vault/storeMetal/order",
    });
  }, 1000);
};
const deTotalWeight = computed(() => {
  if (detectionReport.value.goldBalances) {
    const totalWeight = detectionReport.value.goldBalances.reduce(
      (sum, material) => {
        return sum + (Number(material.discountedWeight) || 0);
      },
      0
    );
    return totalWeight;
  }
});
</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-steps--row {
      flex: none !important;
    }
    &::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: 16px;
    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;
    }
  }
  .tab_content {
    border-left: 1px solid #b5aa90;
    font-size: 16px;
    background-color: #fff;
    .col {
      padding: 12px 0;
      line-height: 19px;
    }
  }
  .tab_header .col,
  .tab_content .col {
    border-bottom: 1px solid #b5aa90;
    border-right: 1px solid #b5aa90;
    text-align: center;
  }
  .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>