freight-web/src/pagesReceive/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 number)"
            ></u-tag
          ></view>
          <!-- 待审核才会有编辑信息-->
          <view v-if="state.order.scaleStatus === 2"
            ><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.order.scaleStatus === ScaleStatus.ToBeReview"
      >
        <text>定价人：{{ state.order.pricingUserName || "-" }}</text>
        <text>过磅时间：{{ state.order.grossTime }}</text>
      </view>
      <!-- 入库 过磅时间对应过毛时间 -->
      <view class="flex-box" v-if="getIsShow()" style="border: none">
        <text>过磅时间：{{ state.order.grossTime || "-" }}</text>
        <!-- {{ state.order.createTime }} -->
      </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="getIsShow()"> 收货单号：{{ state.order.receiptNumber }} </view>
        <view v-if="getIsShow()"></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
              v-if="item.name === '货款金额' && ScaleStatus.ToBeReview === state.order.scaleStatus"
              @click="handleEdit()"
              :style="{
                color: 'rgba(0, 220, 238, 1)',
                border: '1px solid #00DCEE',
                'border-radius': '20rpx',
                fontSize: '12px',
                padding: '1px 10px',
                marginLeft: '10rpx'
              }"
            >
              编辑
            </text>
          </text>
        </view>
      </view>
    </view>
    <view class="op-btn">
      <view class="c-btn-review" v-if="state.order.scaleStatus === 2">
        <view @click="handleReviewNoPay"> 审核暂不支付 </view>
        <view class="active" @click="handleReviewPay"> 审核立即支付 </view>
      </view>
      <view v-if="state.order.scaleStatus === 2">
        <u-button
          text="重新过皮"
          plain
          :customStyle="{
            color: 'rgba(0, 220, 238, 1)',
            border: '1px solid #00DCEE',
            'border-radius': '43rpx',
          }"
          @click="handleReWeight()"
        ></u-button>
      </view>
      <view v-if="state.order.scaleStatus === 3">
        <u-button
          text="确认支付"
          type="primary"
          :customStyle="{ 'border-radius': '43rpx' }"
          @click="handleReviewPay"
        ></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()"
  />
  <u-modal
    showCancelButton
    :confirmColor="'#00D2E3'"
    :show="isInput"
    :title="'修改货款金额'"
    @confirm="handleConfirm"
    @cancel="isInput = false"
  >
    <up-input
      placeholder="请输入货款金额"
      type="number"
      v-model="amount"
    ></up-input>
  </u-modal>
</template>

<script setup lang="ts">
import { ReceiveApi } from "@/services/index";
import { onLoad } from "@dcloudio/uni-app";
import SmallModal from "@/components/Modal/smallModal.vue";
import { ScaleStatus } from "@/utils/enum";
const keyword = ref("");
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: Order;
  [attrName: string]: any;
}>({
  order: {},
  sheetList: [
    {
      key: "paySelect",
    },
    {
      key: "printSelect",
    },
  ],
  scaleStatus: 2,
});
const gridList1 = reactive([
  {
    name: "毛重",
    enName: "grossWeight",
    num: "",
    unit: "KG",
    isBefore: false,
  },
  {
    name: "皮重",
    enName: "tare",
    num: "",
    unit: "KG",
    isBefore: false,
  },
  {
    name: "扣杂",
    enName: "buckleMiscellaneous",
    num: "",
    unit: "KG",
    isBefore: false,
  },
  {},
  {
    name: "净重",
    enName: "netWeight",
    num: "",
    unit: "KG",
    isBefore: false,
  },
  {
    name: "单价",
    enName: "price",
    num: "",
    unit: "元/KG",
    isBefore: false,
  },
  {
    name: "预估总价",
    enName: "totalPrice",
    num: "",
    unit: "元",
    isBefore: false,
  },
  {
    name: "货款金额",
    enName: "balanceTotalPrice",
    num: "",
    unit: "元",
    isBefore: false,
  },
]);
const getIsShow = () => {
  return state.order.scaleStatus === 3 || state.order.scaleStatus === 4;
};
const handleScenePhoto = (id: any) => {
  uni.redirectTo({
    url: "/pagesScenePhoto/index?orderType=1&imagesType=1&id=" + id, // 要跳转到的页面路径
  });
};
// 审核暂不支付 // 更新状态为3
const handleReviewNoPay = () => {
  ReceiveApi.updateOne({ ...state.order, scaleStatus: 3 }).then((res) => {
    if (res.code === 200) {
      uni.redirectTo({
        url: "/pagesReceive/payReview?scaleStatus=3", // 要跳转到的页面路径
      });
    }
  });
};
const isInput = ref(false);
const amount = ref(null);
const handleEdit = () => {
  isInput.value = true;
};
const handleConfirm = () => {
  ReceiveApi.updateOrderIn({
    orderInPos: [
      {
        ...state.order,
        balanceTotalPrice: amount.value,
      },
    ],
  }).then((res) => {
    if (res.code === 200) {
      uni.showToast({ title: "修改成功" });
      gridList1[gridList1.length - 1].num = amount.value || "";
      isInput.value = false;
    }
  });
};
// 审核立即支付
const handleReviewPay = () => {
  contrlModalParams.paySelect.isShow = true;
};

const handleSelect = (key: string, v: any) => {
  contrlModalParams[key].isShow = false;
  if (key === "paySelect") {
    // 修改订单状态
    ReceiveApi.updateOne({
      ...state.order,
      scaleStatus: 4,
      paymentMethod: v.key,
    }).then((res) => {
      if (res.code === 200) {
        uni.showToast({
          title: "支付成功",
          icon: "success",
        });
        uni.redirectTo({
          url: "/pagesReceive/payReview?scaleStatus=4", // 要跳转到的页面路径
        });
      }
    });
  } else if (key === "printSelect") {
    // 打印
  }
};
const isShowCancelModal = ref(false);
const deleteId = ref(0);
// 打开确认作废对话框
const handleModal = (v: boolean, id: number) => {
  isShowCancelModal.value = v;
  deleteId.value = id;
};
const handleOk = () => {
  ReceiveApi.deleteOrder({ ids: [deleteId.value] }).then((res) => {
    if (res.code === 200) {
      uni.redirectTo({
        url: "/pagesReceive/payReview?scaleStatus=2", // 要跳转到的页面路径
      });
    }
  });
};
const handleUpdateOrder = () => {
  uni.navigateTo({
    url: "/pagesReceive/form/pricingForm?prePage=review&id=" + state.order.id, // 要跳转到的页面路径
  });
};
// 重新过皮
const handleReWeight = () => {
  ReceiveApi.reTare({ id: state.order.id }).then((res) => {
    if (res.code === 200) {
      uni.redirectTo({
        url: "/pagesReceive/pricing?scaleStatus=1", // 要跳转到的页面路径
      });
    }
  });
};
onLoad((option) => {
  state.order.id = parseInt((option as any).id);
  state.scaleStatus = parseInt((option as any).scaleStatus);
  uni.setNavigationBarTitle({
    title: (option as any).title,
  });
  if (state.order.id) {
    ReceiveApi.getDetailById({ id: state.order.id }).then((res) => {
      if (res.code === 200) {
        state.order = res.data;
        gridList1.map((item) => {
          if (item.name === "扣杂" || item.name === "扣点") {
            if (state.order.buttonType === 0) {
              item.name = "扣杂";
              item.enName = "buckleMiscellaneous";
              item.unit = "KG";
            } else if (state.order.buttonType === 1) {
              item.name = "扣点";
              item.enName = "points";
              item.unit = "%";
            }
          }
          item.num = state.order[item.enName as string];
        });
      }
    });
  }
});
</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>