tf-business/pages_module/orderVerifica/index.vue

<template>
  <view class="orderVerifica">
    <capsule :showBorder="true">
      <template v-slot:top>
        <view class="shop-top">
          <view class="back-icon" @click="backClick">
            <tui-icon name="arrowleft" :size="36" color="#000"></tui-icon>
          </view>
          <view class="shop-name">订单核销</view>
        </view>
      </template>
    </capsule>
    <template v-if="!flag">
      <view class="order-number"
        >订单编号:{{ orderDetail.orderFormid || "" }}</view
      >
      <view class="verifica-container">
        <view class="verifica-info">
          <view class="info-state">
            <template v-if="orderDetail.state == 8"
              >订单状态：(待核销)</template
            >
            <template v-if="orderDetail.state == 9"
              >订单状态：(待核销已付款)</template
            >
            <template v-if="orderDetail.state == 10"
              >订单状态：<text style="color: #ea1717;">(已核销)</text></template
            >
          </view>
          <view class="info-state">商户: {{ shopInfo.shopName }} </view>
          <view class="info-price">
            <view class="all-price">
              商品总价:￥<text>{{
                orderDetail.price ? Number(orderDetail.price).toFixed(2) : ""
              }}</text>
            </view>
            <view class="all-price">
              实付款:￥<text>{{
                orderDetail.orderPrice
                  ? Number(orderDetail.orderPrice).toFixed(2)
                  : ""
              }}</text>
            </view>
          </view>
        </view>
        <view class="verifica-product">
          <view class="verifica-time">
            <text>创建时间</text>
            <text>{{ orderDetail.createTime }}</text>
          </view>
          <view class="commodity-list">
            <view
              class="commodity-item"
              v-for="item in orderDetail.products"
              :key="item.productId"
            >
              <view class="item-left">
                <view class="left-image">
                  <image :src="item.image" />
                </view>
                <view class="left-text">
                  <view class="text-title">{{ item.productName }}</view>
                  <!-- <template v-if="item2.productName == '扫码付款商品'">
                                    <view class="text-price">扫码付款商品</view>
                                </template> -->
                  <template>
                    <view class="text-price">{{
                      item.skuDetails[0].skuName
                    }}</view>
                    <view class="text-price">x{{ item.number }}</view>
                  </template>
                </view>
              </view>
              <view class="item-right"
                >￥{{ item.productPrice.toFixed(2) }}</view
              >
            </view>
          </view>
          <!-- <view class="gifts">
          <view class="gifs-left">赠送代金券</view>
          <view class="gifs-right">￥1 x 1</view>
        </view> -->
          <view class="verifica-code">
            <text>核销码</text>
            <text>{{ code }}</text>
          </view>
          <view class="verifica-code">
            <text>支付方式</text>
            <text>
              <template v-if="orderDetail.paymentMode == 1"
                >微信</template
              >
              <template v-else-if="orderDetail.paymentMode == 2"
                >支付宝</template
              >
              <template v-else-if="orderDetail.paymentMode == 3"
                >花呗分期</template
              >
              <template v-else-if="orderDetail.paymentMode == 4"
                >通联支付</template
              >
              <template v-else-if="orderDetail.paymentMode == 5"
                >平台余额支付</template
              >
              <template v-else-if="orderDetail.paymentMode == 6"
                >商家余额支付</template
              >
              <template v-else-if="orderDetail.paymentMode == 7"
                >佣金支付</template
              >
              <template v-else-if="orderDetail.paymentMode == 8"
                >消费金支付</template
              >
              <template v-else-if="orderDetail.paymentMode == 9"
                >惠市宝支付</template
              >
              <template v-else
                >用户暂未支付该订单</template
              >
            </text>
          </view>
          <view class="verifica-code">
            <text>支付时间</text>
            <text>{{ orderDetail.paymentTime || "用户暂未支付该订单" }}</text>
          </view>
        </view>
        <view class="verifica-btn">
          <template v-if="orderDetail.state == 9">
            <view class="btn" @click="confirmBtn">确认核销</view>
          </template>
          <template v-else-if="orderDetail.state == 8">
            <view class="btn disable" @click="disableBtn">确认核销</view>
          </template>
        </view>
      </view>
      <modal
        :showModal="modal"
        :promptList="promptList"
        @closeModal="closeModal"
        @btnClick="backClick"
        :showBtn="showBtn"
        :showText="showText"
      ></modal>
    </template>
    <template v-else>
      <view class="success-container">
        <image class="" src="@/static/image/code/success.png" />
        <text>核销成功</text>
        <view class="success-back" @click="back">返回</view>
      </view>
    </template>
  </view>
</template>

<script>
import { orderGetById, orderVerify } from "@/config/index.js";

export default {
  created() {
    //  拿到本地的 店铺数据
    this.shopInfo = uni.getStorageSync("shopInfo");
  },
  onLoad(props) {
    this.orderId = props.orderId;
    this.code = props.code.split("~")[1];
    this.getOrderDetail();
  },
  data() {
    return {
      shopInfo: {},
      //  订单详情
      orderDetail: {},
      orderId: null,
      code: "",
      //    下面是弹框
      modal: false,
      showBtn: false,
      promptList: [],
      showText: "返回扫码",
      //    判断是否核销成功
      flag: false,
    };
  },
  methods: {
    // 获取订单详情
    async getOrderDetail() {
      try {
        let res = await orderGetById({ orderId: this.orderId });
        if (Object.keys(res.data).length <= 0) {
          this.modal = true;
          this.showBtn = true;
          this.showText = "返回扫码";
          this.promptList = [
            "您扫描的当前订单",
            "可能不是您家下的单，请于用户确认",
          ];
        }
        this.orderDetail = res.data;
      } catch (error) {}
    },
    confirmBtn() {
      this.showText = "确认";
      this.modal = true;
      this.showBtn = true;
      this.promptList = ["确认订单信息", "用户商品是否是您家下的"];
    },
    disableBtn() {
      this.modal = true;
      this.showBtn = false;
      this.promptList = ["您不能进行核销", "当前订单处于未支付状态"];
    },
    //  关闭弹框
    closeModal() {
      this.modal = false;
    },
    async backClick() {
      if (this.showText == "返回扫码") {
        uni.navigateBack();
        return;
      }
      if (this.showText == "确认") {
        let res = await orderVerify({ orderId: this.orderId, noticeId: 0 });
        this.flag = true
      }
    },
    back(){
        uni.navigateBack();
    }
  },
};
</script>

<style lang="scss" scoped>
.orderVerifica {
  .shop-top {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 999;
    @include flex(center);

    .back-icon {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
    }

    .shop-name {
      color: #000;
    }
  }

  .order-number {
    margin: 32rpx 0;
    color: #999999;
    font-size: 28rpx;
    padding-left: 32rpx;
  }

  .verifica-container {
    padding: 0 60rpx;

    .verifica-info {
      display: flex;
      flex-direction: column;
      gap: 12rpx;
      color: #3d3d3d;
      font-size: 28rpx;
      font-weight: 600;
      padding-bottom: 20rpx;
      border-bottom: 2rpx solid #d8d8d8;

      text {
        color: #ea1717;
      }

      .info-price {
        @include flex(space-between);
      }
    }

    .verifica-product {
      padding: 12rpx 0 20rpx;
      border-bottom: 2rpx solid #d8d8d8;

      .verifica-time {
        @include flex(space-between);
        color: #999999;
        font-size: 24rpx;
      }

      .commodity-list {
        width: 100%;
        display: flex;
        justify-content: center;
        gap: 12rpx;
        flex-direction: column;
        margin: 20rpx 0 36rpx;

        .commodity-item {
          display: flex;
          justify-content: space-between;

          .item-left {
            display: flex;
            gap: 12rpx;

            .left-image {
              width: 124rpx;
              height: 124rpx;

              image {
                width: 100%;
                height: 100%;
                border-radius: 12rpx;
              }
            }

            .left-text {
              display: flex;
              flex-direction: column;
              gap: 6rpx;

              .text-title {
                color: #333333;
                font-size: 28rpx;
              }

              .text-price {
                font-size: 24rpx;
                color: #999999;
              }
            }
          }

          .item-right {
            color: #333333;
            font-size: 28rpx;
          }
        }
      }

      .gifts {
        @include flex(space-between);
        font-size: 28rpx;

        .gifs-right {
          color: #ea1717;
        }
      }

      .verifica-code {
        color: #3d3d3d;
        font-size: 28rpx;
        @include flex(space-between);
        margin-top: 32rpx;
      }
    }
    .verifica-btn {
      padding-top: 72rpx;
      display: flex;
      justify-content: flex-end;
      .btn {
        width: 246rpx;
        height: 88rpx;
        text-align: center;
        line-height: 88rpx;
        color: #ffffff;
        font-size: 28rpx;
        border-radius: 50rpx;
        background: linear-gradient(180deg, #fe4b1e 0%, #fb8857 100%);
      }
      .disable {
        background: linear-gradient(180deg, #3b3b3b 0%, #a3a3a3 100%);
      }
    }
  }

  .success-container{
    margin-top: 208rpx;
    width: 100%;
    @include flex(center,column);
    image{
        width: 300rpx;
        height: 300rpx;
        display: block;
    }
    text{
        margin-top: 25rpx;
        color: #666666;
        font-size: 28rpx;
    }
    .success-back{
        margin-top: 52rpx;
        border-radius: 100rpx;
        background-color: #05C160;
        width: 246rpx;
        height: 88rpx;
        text-align: center;
        line-height: 88rpx;
        color: #FFFFFF;
        font-size: 28rpx;
    }
  }
}
</style>