freight-web/src/pagesShipment/review/index.vue

<template>
  <view class="c-card">
    <view class="box">
      <view class="base">
        <view>
          <view class="supplier"> {{ state.order.deviceName || "-" }} </view>
        </view>
      </view>
      <view class="flex-box1">
        <view class="type">{{ state.order.productName || "" }}</view>
        <view class="btn">
          <view
            ><u-tag
              text="现场照片"
              plain
              shape="circle"
              :bgColor="'rgba(237, 254, 255, 1)'"
              @click="handleScenePhoto(state.order.id)"
            ></u-tag
          ></view>
          <view
            ><u-tag
              text="收货单作废"
              plain
              shape="circle"
              :borderColor="'rgba(255, 147, 68, 1) !important'"
              :bgColor="'rgba(255, 240, 229, 1)'"
              :color="'rgba(255, 157, 85, 1) !important'"
              @click="handleModal(true, state.order.id as string)"
            ></u-tag
          ></view>
          <!-- 点击待出货结算-->
          <view
            v-if="
              state.scaleStatusBtnType === ScaleStatusBtnType.ShipmentSettlement
            "
            ><u-tag
              text="编辑信息"
              plain
              shape="circle"
              :borderColor="'rgba(0, 238, 78, 1) !important'"
              :bgColor="'rgba(227, 255, 236, 1)'"
              :color="'rgba(0, 238, 78, 1) !important'"
              @click="handleUpdateOrder"
            ></u-tag
          ></view>
        </view>
      </view>
      <!-- 出库 过磅时间对应过皮时间 -->
      <view
        class="flex-box"
        v-if="
          state.scaleStatusBtnType === ScaleStatusBtnType.ShipmentSettlement ||
          state.scaleStatusBtnType === ScaleStatusBtnType.ShipmentNoPay
        "
      >
        <text>审核人：{{ state.order.pricingUserName || "-" }}</text>
        <text>过磅时间：{{ state.order.tareTime }}</text>
      </view>

      <!-- <view class="flex-box" v-if="getIsShow()" style="border: none">
        <text>过磅时间：{{ state.order.grossTime || "-" }}</text>
      </view>
      <view class="flex-box" v-if="getIsShow()">
        <text>定价人：{{ state.order.pricingUserName || "-" }}</text>
        <text>审核人：{{ state.order.reviewerUserName || "-" }}</text>
      </view> -->

      <view class="more">
        <view
          v-if="
            state.scaleStatusBtnType ===
              ScaleStatusBtnType.ShipmentSettlement ||
            state.scaleStatusBtnType === ScaleStatusBtnType.ShipmentNoPay
          "
        >
          出货单号：{{ state.order.orderNumber }}
        </view>
        <view
          v-if="
            state.scaleStatusBtnType ===
              ScaleStatusBtnType.ShipmentSettlement ||
            state.scaleStatusBtnType === ScaleStatusBtnType.ShipmentNoPay
          "
        ></view>
        <view v-for="(item, index) in gridList1" :key="index">
          <text v-if="item.name">{{ item.name }}：</text
          ><text
            >{{ item.isBefore ? item.unit : "" }}
            {{ item.num }}
            {{ item.isBefore ? "" : item.unit }}
          </text>
        </view>
      </view>

      <!-- <u-gap height="10" bgColor="#F8F8F8"></u-gap> -->
      <view class="mt-30">
        <u-line></u-line>
      </view>
      <view
        class="more"
        v-if="
          state.scaleStatusBtnType === ScaleStatusBtnType.ShipmentSettlement
        "
      >
        <view v-for="(item, index) in gridList2" :key="index">
          <text v-if="item.name">{{ item.name }}：</text
          ><text
            >{{ item.isBefore ? item.unit : "" }}
            {{ item.num }}
            {{ item.isBefore ? "" : item.unit }}
          </text>
        </view>
      </view>

      <view
        class="more"
        v-if="
          state.scaleStatusBtnType === ScaleStatusBtnType.ShipmentNoPay ||
          state.scaleStatusBtnType === ScaleStatusBtnType.ShipmentPay
        "
      >
        <view v-for="(item, index) in gridList3" :key="index">
          <text v-if="item.name">{{ item.name }}：</text
          ><text
            >{{ item.isBefore ? item.unit : "" }}
            <text v-if="item.name === '净重误差'">
              {{
                (state.order.netWeight || 0) - (state.order.settlementNet || 0)
              }}
            </text>
            <text v-else-if="item.name === '结算方式'">
              {{ payMethodMap[item.num] || "暂无" }}
            </text>
            <text v-else> {{ item.num }}</text>

            {{ item.isBefore ? "" : item.unit }}
          </text>
        </view>
      </view>
    </view>
    <view class="op-btn">
      <view
        class="c-btn-review"
        v-if="
          state.scaleStatusBtnType === ScaleStatusBtnType.ShipmentSettlement
        "
      >
        <view @click="handleReviewNoPay"> 出货未结算 </view>
        <view class="active" @click="handleReviewPay"> 出货并结算 </view>
      </view>
      <view
        v-if="
          state.scaleStatusBtnType === ScaleStatusBtnType.ShipmentSettlement
        "
      >
        <u-button
          text="重新过毛"
          plain
          :customStyle="{
            color: 'rgba(0, 220, 238, 1)',
            border: '1px solid #00DCEE',
            'border-radius': '43rpx',
          }"
          @click="handleReWeight()"
        ></u-button>
      </view>
      <view>
        <u-button
          v-if="state.scaleStatusBtnType === ScaleStatusBtnType.ShipmentNoPay"
          @click="handleSettlement"
          text="立即结算"
          type="primary"
          :customStyle="{ 'border-radius': '43rpx' }"
        ></u-button>
      </view>
      <view>
        <u-button
          text="打印"
          type="primary"
          :customStyle="{ 'border-radius': '43rpx' }"
        ></u-button>
      </view>
    </view>
  </view>
  <!-- 支付方式 -->
  <block v-for="(item, index) in state.sheetList" :key="index">
    <u-action-sheet
      :actions="contrlModalParams[item.key].list"
      :title="contrlModalParams[item.key].title"
      :show="contrlModalParams[item.key].isShow"
      @select="(v: any) => handleSelect(item.key, v)"
      @close="contrlModalParams[item.key].isShow = false"
      :closeOnClickAction="true"
    ></u-action-sheet>
  </block>
  <SmallModal
    :title="'确认作废吗？'"
    :content="'确认作废后，该订单不能恢复！'"
    :okText="'确认作废'"
    :isMain="true"
    :show="isShowCancelModal"
    @handleModal="(v:boolean) => {handleModal(v, deleteId)}"
    @handleOk="handleOk()"
  />
</template>

<script setup lang="ts">
import { ShipmentApi } from "@/services/index";
import { ScaleStatusBtnType } from "@/utils/enum";
import { onLoad, onShow } from "@dcloudio/uni-app";
import SmallModal from "@/components/Modal/smallModal.vue";
const payMethodMap: any = {
  "1": "现金",
  "2": "转账",
  "3": "微信",
  "4": "支付宝",
};
const contrlModalParams = reactive<{ [attrName: string]: any }>({
  paySelect: {
    isShow: false,
    title: "请选择支付方式",
    // 1:现金支付，2：银行卡支付，3：线上支付（微信）4：支付宝
    list: [
      {
        name: "微信",
        key: 3,
      },
      {
        name: "现金",
        key: 1,
      },
      {
        name: "支付宝",
        key: 4,
      },
      {
        name: "转账",
        key: 2,
      },
    ],
  },
  printSelect: {
    isShow: false,
    title: "请选择打印设备",
    list: [
      {
        name: "打印设备1",
        key: 1,
      },
      {
        name: "打印设备2",
        key: 2,
      },
      {
        name: "打印设备3",
        key: 3,
      },
      {
        name: "打印设备4",
        key: 4,
      },
    ],
  },
});
const state = reactive<{
  order: Shipment;
  [attrName: string]: any;
}>({
  order: {
    id: "",
    buttonType: 0,
    netWeight: 0,
  },
  sheetList: [
    {
      key: "paySelect",
    },
    {
      key: "printSelect",
    },
  ],
  scaleStatusBtnType: 0,
});
const gridList1 = reactive([
  {
    name: "毛重",
    enName: "grossWeight",
    num: "",
    unit: "KG",
    isBefore: false,
  },
  {
    name: "皮重",
    enName: "tare",
    num: "",
    unit: "KG",
    isBefore: false,
  },
  {
    name: "净重",
    enName: "netWeight",
    num: "",
    unit: "KG",
    isBefore: false,
  },
]);
const gridList2 = reactive([
  {
    name: "客户名称",
    enName: "userName",
    num: "",
    isBefore: false,
  },
  {},
  {
    name: "签收时间",
    enName: "signTime",
    num: "",
    isBefore: false,
  },
  {},
  {
    name: "毛重",
    enName: "settlementGross",
    num: "",
    unit: "KG",
    isBefore: false,
  },
  {
    name: "皮重",
    enName: "settlementTare",
    num: "",
    unit: "KG",
    isBefore: false,
  },
  {
    name: "结算重量",
    enName: "settlementWeight",
    num: "",
    unit: "KG",
    isBefore: false,
  },
  {
    name: "单价",
    enName: "unitPrice",
    num: "",
    unit: "元/KG",
    isBefore: false,
  },
  {
    name: "预估总价",
    enName: "estimatePrice",
    num: "",
    unit: "元",
    isBefore: false,
  },
  {
    name: "结算金额",
    enName: "totalPrice",
    num: "",
    unit: "元",
    isBefore: false,
  },
  {
    name: "运费",
    enName: "freight",
    num: "",
    unit: "元",
    isBefore: false,
  },
  {
    name: "杂费",
    enName: "incidentals",
    num: "",
    unit: "元",
    isBefore: false,
  },
]);

const gridList3 = reactive([
  {
    name: "客户名称",
    enName: "userName",
    num: "",
    isBefore: false,
  },
  {
    name: "结算人",
    enName: "updateName",
    num: "",
    isBefore: false,
  },
  {
    name: "结算时间",
    enName: "signTime",
    num: "",
    isBefore: false,
  },
  {},
  {
    name: "结算重量",
    enName: "settlementWeight",
    num: 0,
    unit: "KG",
    isBefore: false,
  },
  {
    name: "结算单价",
    enName: "unitPrice",
    num: "",
    unit: "元/KG",
    isBefore: false,
  },
  {
    name: "预估总价",
    enName: "estimatePrice",
    num: "",
    unit: "元",
    isBefore: false,
  },
  {
    name: "结算金额",
    enName: "totalPrice",
    num: "",
    unit: "元",
    isBefore: false,
  },
  {
    name: "运费",
    enName: "freight",
    num: "",
    unit: "元",
    isBefore: false,
  },
  {
    name: "杂费",
    enName: "incidentals",
    num: "",
    unit: "元",
    isBefore: false,
  },
  {
    name: "实际收入",
    enName: "realIncome",
    num: "",
    unit: "元",
    isBefore: false,
  },
  {
    name: "结算方式",
    enName: "paymentMethod",
    num: "",
    unit: "",
    isBefore: false,
  },
  // 客户过磅净重-机器过磅净重
  {
    name: "净重误差",
    enName: "netWeightError",
    num: "",
    unit: "KG",
    isBefore: false,
  },
]);
// 立即结算 // 先填写结算信息后更新状态为4
const handleSettlement = () => {
  uni.navigateTo({
    url:
      "/pagesShipment/form/settlementForm?id=" +
      state.order.id +
      `&scaleStatusBtnType=${ScaleStatusBtnType.ShipmentPay}`, // 要跳转到的页面路径
  });
};
const handleScenePhoto = (id: string) => {
  uni.navigateTo({
    url: "/pagesScenePhoto/index?orderType=1&imagesType=2&id=" + id, // 要跳转到的页面路径
  });
};
// 出货未结算 // 先填写结算信息后更新状态为3
const handleReviewNoPay = () => {
  uni.navigateTo({
    url:
      "/pagesShipment/form/settlementForm?id=" +
      state.order.id +
      `&scaleStatusBtnType=${ScaleStatusBtnType.ShipmentNoPay}`, // 要跳转到的页面路径
  });
  // ShipmentApi.updateOrderIn({ ...state.order, scaleStatus: 3 }).then((res) => {
  //   if (res.code === 200) {
  //     uni.navigateTo({
  //       url: "/pagesShipment/shipmentSettlement?scaleStatus=3", // 要跳转到的页面路径
  //     });
  //   }
  // });
};
// 审核立即支付
const handleReviewPay = () => {
  uni.navigateTo({
    url:
      "/pagesShipment/form/settlementForm?id=" +
      state.order.id +
      `&scaleStatusBtnType=${ScaleStatusBtnType.ShipmentPay}`, // 要跳转到的页面路径
  });
};

const handleSelect = (key: string, v: any) => {
  contrlModalParams[key].isShow = false;
  if (key === "paySelect") {
    // 修改订单状态
    // ShipmentApi.updateOne({
    //   ...state.order,
    //   scaleStatus: 4,
    //   paymentMethod: v.key,
    // }).then((res) => {
    //   if (res.code === 200) {
    //     uni.showToast({
    //       title: "支付成功",
    //       icon: "success",
    //     });
    //     uni.navigateTo({
    //       url: "/pagesReceive/payReview?scaleStatus=4", // 要跳转到的页面路径
    //     });
    //   }
    // });
  } else if (key === "printSelect") {
    // 打印
  }
};
const isShowCancelModal = ref(false);
const deleteId = ref("0");
// 打开确认作废对话框
const handleModal = (v: boolean, id: string) => {
  isShowCancelModal.value = v;
  deleteId.value = id;
};
const handleOk = () => {
  ShipmentApi.deleteOrder({ ids: [deleteId.value] }).then((res) => {
    if (res.code === 200) {
      uni.navigateTo({
        url: "/pagesShipment/shipmentSettlement?scaleStatus=2", // 要跳转到的页面路径
      });
    }
  });
};
const handleUpdateOrder = () => {
  uni.navigateTo({
    url: "/pagesShipment/form/shipmentForm?id=" + state.order.id, // 要跳转到的页面路径
  });
};

// 重新过毛
const handleReWeight = () => {
  ShipmentApi.reGrossWeight({
    id: state.order.id,
    userId: state.order.userId,
    deviceId: state.order.deviceId,
  }).then((res) => {
    if (res.code === 200) {
      uni.navigateTo({
        url: "/pagesShipment/shipmenting?scaleStatus=1", // 要跳转到的页面路径
      });
    }
  });
};
const init = () => {
  if (state.order.id) {
    ShipmentApi.getDetailById({ id: state.order.id }).then((res) => {
      if (res.code === 200) {
        state.order = res.data;
        gridList1.map((item) => {
          item.num = state.order[item.enName as string];
        });
        gridList2.map((item) => {
          item.num = state.order[item.enName as string];
        });
        gridList3.map((item) => {
          if (item.name === "净重误差") {
            item.num =
              (state.order as any).netWeight -
              (state.order as any).settlementNet;
          }
          item.num = state.order[item.enName as string];
        });
      }
    });
  }
}
onShow(() => {
  init()
});
onLoad((option) => {
  state.order.id = (option as any).id;
  state.scaleStatusBtnType = parseInt((option as any).scaleStatusBtnType);

  uni.$on("shipmentReviewUrlParams", (data) => {
    console.log(data);
    state.order.id = data.id;
    state.scaleStatusBtnType = data.scaleStatusBtnType;
    init()
  });
});
onUnmounted(() => {
  uni.$off("shipmentReviewUrlParams", () => {});
});
</script>
<style lang="scss" scoped>
.c-card {
  margin: 30rpx 25rpx;
  .box {
    background: #ffffff;
    box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(5, 68, 37, 0.12);
    border-radius: 13rpx;
    padding: 30rpx;
    .base {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-weight: 400;
      font-size: 26rpx;
      color: #000000;
      .btn {
        border-radius: 24rpx;
        border: 1px solid #00dcee;
        padding: 10rpx 30rpx;
        font-weight: 500;
        font-size: 24rpx;
        color: #00dcee;
        line-height: 41rpx;
      }
    }
    .name {
      font-weight: 400;
      font-size: 26rpx;
      color: #000000;
      margin: 15rpx 0rpx;
      text {
        background-color: #ffaf75;
        font-weight: 500;
        font-size: 26rpx;
        color: #ffffff;
        padding: 5rpx 20rpx;
        margin-left: 20rpx;
      }
    }

    .flex-box1 {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 20rpx 0rpx;
      .type {
        font-weight: 400;
        font-size: 26rpx;
        color: #ec0f3e;
      }
      .btn {
        display: flex;
        > view + view {
          margin-left: 10rpx;
        }
      }
    }
    .flex-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-weight: 400;
      font-size: 24rpx;
      color: #999999;
      border-bottom: 1rpx solid rgba(233, 233, 233, 0.76);
      padding-bottom: 20rpx;
    }
  }
  .more {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    flex: 1;
    font-weight: 400;
    font-size: 26rpx;
    color: #000000;
    padding: 25rpx 0rpx 0rpx 0rpx;
    > view {
      line-height: 50rpx;
      width: max-content;
    }
  }
  .op-btn {
    width: 80%;
    margin: 0px auto;
    margin-top: 100rpx;
    .c-btn-review {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #f5f5f5;
      border-radius: 38rpx;
      text-align: center;
      margin-bottom: 80rpx;
      > view {
        width: 50%;
        text-align: center;
        font-weight: 500;
        font-size: 26rpx;
        color: #999999;
      }
      .active {
        background: #00dcee;
        border-radius: 38rpx;
        font-weight: 500;
        font-size: 26rpx;
        color: #ffffff;
        padding: 20rpx 30rpx;
      }
    }
    > view + view {
      margin-top: 30rpx;
    }
  }
}
</style>