applet/pages/order/orderDetails.vue

<template>
  <view class="container">
    <view class="top-state u-font24 u-00321E">
      <!--待付款-->
      <view
        class="obligation"
        v-if="
          orderInfo.transactionStatus == 0 || orderInfo.transactionStatus == 100
        "
      >
        <view class="u-flex-center u-flex1">
          <image class="timeImg" :src="$handleImageUrl('/time.png')"></image>
          <view class="u-flex1">
            <view class="u-font32 u-bold" style="margin-bottom: 10rpx">
              {{ orderInfo.transactionStatus == 0 ? "待付款" : "订单已关闭" }}
            </view>
            <view
              class="u-flex u-font26"
              v-if="orderInfo.transactionStatus == 0"
            >
              请在
              <uv-count-down
                v-if="timeDataNum"
                :time="timeDataNum"
                format="DD:HH:mm:ss"
                autoStart
                millisecond
                @change="onTimeChange"
              >
                <view>
                  <text class="time__item" v-if="timeData.days"
                    >{{ timeData.days }}&nbsp;天</text
                  >
                  <text class="time__item" v-if="timeData.hours"
                    >{{
                      timeData.hours > 10
                        ? timeData.hours
                        : "0" + timeData.hours
                    }}&nbsp;时</text
                  >
                  <text class="time__item"
                    >{{ timeData.minutes || "00" }}&nbsp;分</text
                  >
                  <text class="time__item"
                    >{{ timeData.seconds || "00" }}&nbsp;秒</text
                  >
                </view>
              </uv-count-down>
              内完成支付，超时订单将自动关闭
            </view>
            <view
              class="u-flex u-font26"
              v-if="orderInfo.cancellationMethod == 10"
              >原因：主动取消</view
            >
            <view
              class="u-flex u-font26"
              v-if="orderInfo.cancellationMethod == 20"
              >原因：商家撤销关闭</view
            >
            <view
              class="u-flex u-font26"
              v-if="orderInfo.cancellationMethod == 30"
              >原因：支付过期关闭</view
            >
            <view
              class="u-flex u-font26"
              v-if="orderInfo.cancellationMethod == 50"
              >原因：支付异常</view
            >
            <view
              class="u-flex u-font26"
              v-if="orderInfo.cancellationMethod == 60"
              >原因：自提过期</view
            >
          </view>
        </view>
      </view>
      <template v-if="orderInfo.rightsStatus == 0">
        <!--等待商家发货-->
        <view
          class="refund-underway obligation"
          v-if="orderInfo.transactionStatus == 10"
        >
          <view class="u-flex-center u-flex1">
            <image class="timeImg" :src="$handleImageUrl('/time.png')"></image>
            <view class="u-flex1">
              <view class="u-font32 u-bold">待发货</view>
              <view class="u-flex u-font26"
                >您的订单已经支付完成，正在等待发货</view
              >
            </view>
          </view>
        </view>

        <!--商家已发货-->
        <view
          class="refund-underway obligation"
          v-if="
            orderInfo.transactionStatus == 20 &&
            orderInfo.rightsStatus == 0 &&
            orderInfo.shippingMethod == 0
          "
        >
          <view class="u-flex-center u-flex1">
            <image class="timeImg" :src="$handleImageUrl('/time.png')"></image>
            <view class="u-flex1">
              <view class="u-font32 u-bold">待收货</view>
              <view class="u-flex u-font26">
                您的快递待收货
                <text v-if="orderInfo.receiptExpireTime"
                  >，还剩{{
                    $mUtil.patTime(orderInfo.receiptExpireTime)
                  }}自动确认</text
                >
              </view>
            </view>
          </view>
        </view>

        <!--等待确认提货-->
        <view
          class="refund-underway obligation"
          v-if="
            orderInfo.transactionStatus == 20 && orderInfo.shippingMethod == 10
          "
        >
          <view class="u-flex-center u-flex1">
            <image class="timeImg" :src="$handleImageUrl('/time.png')"></image>
            <view class="u-flex1">
              <view class="u-font32 u-bold">待提货</view>
              <view class="u-flex u-font26">
                您的商品可自提
                <text v-if="orderInfo.receiptExpireTime > 0"
                  >，还剩{{
                    $mUtil.patTime(orderInfo.receiptExpireTime)
                  }}过期</text
                >
              </view>
            </view>
          </view>
        </view>

        <!--交易成功-->
        <view class="refund-underway" v-if="orderInfo.transactionStatus == 30">
          <view class="u-font28">交易成功</view>
        </view>
        <view
          class="obligation"
          v-if="orderInfo.transactionStatus == 30 && !orderInfo.end"
        >
          <view class="u-flex-center u-flex1">
            <image class="timeImg" :src="$handleImageUrl('/time.png')"></image>
            <view class="u-flex1">
              <view class="u-font32 u-bold">待评价</view>
              <view class="u-flex u-font26"
                >您的订单已签收，请评价一下商品
              </view>
            </view>
          </view>
        </view>
        <!--待评价-->
        <view
          class="refund-underway obligation"
          v-if="orderInfo.transactionStatus == 30 && orderInfo.end"
        >
          <view class="u-flex-center u-flex1">
            <image class="timeImg" :src="$handleImageUrl('/time.png')"></image>
            <view class="u-flex1">
              <view class="u-font32 u-bold">已完成</view>
              <view class="u-flex u-font26">您的订单已完成，祝你购物愉快</view>
            </view>
          </view>
        </view>
      </template>

      <view
        class="refund-underway obligation"
        v-if="orderInfo.rightsStatus == 5 && orderInfo.rightsMethod == 5"
      >
        <view class="u-flex-center u-flex1">
          <image class="timeImg" :src="$handleImageUrl('/time.png')"></image>
          <view class="u-flex1">
            <view class="u-font32 u-bold">退款中</view>
            <view class="u-flex u-font26">您的订单在退款中</view>
          </view>
        </view>
      </view>

      <view
        class="refund-underway obligation"
        v-if="orderInfo.rightsStatus == 10 && orderInfo.rightsMethod == 10"
      >
        <view class="u-flex-center u-flex1">
          <image class="timeImg" :src="$handleImageUrl('/time.png')"></image>
          <view class="u-flex1">
            <view class="u-font32 u-bold">退款完成</view>
            <view class="u-flex u-font22"
              >您的订单已完成退款，祝您生活愉快</view
            >
          </view>
        </view>
      </view>
      <view
        class="refund-underway obligation"
        v-if="orderInfo.rightsStatus == 5 && orderInfo.rightsMethod == 5"
      >
        <view class="u-flex-center u-flex1">
          <image class="timeImg" :src="$handleImageUrl('/time.png')"></image>
          <view class="u-flex1">
            <view class="u-font32 u-bold">退款退货维权中</view>
            <view class="u-flex u-font26">您的订单在退款退货维权中</view>
          </view>
        </view>
      </view>
      <view
        class="refund-underway obligation"
        v-if="orderInfo.rightsStatus == 10 && orderInfo.rightsMethod == 10"
      >
        <view class="u-flex-center u-flex1">
          <image class="timeImg" :src="$handleImageUrl('/time.png')"></image>
          <view class="u-flex1">
            <view class="u-font32 u-bold">退款退货完成</view>
            <view class="u-flex u-font26"
              >您的订单已完成退款退货完成，祝您生活愉快</view
            >
          </view>
        </view>
      </view>
    </view>

    <!-- 自提信息 -->
    <template v-if="orderInfo.shippingMethod == 10">
      <view v-if="orderInfo.orderSelfPickup.orderSelfPickupAddressId">
        <ldAddresszt
          :value="orderInfo.orderSelfPickup"
          :link="false"
        ></ldAddresszt>
      </view>
      <view v-if="orderInfo.orderPackages">
        <OrderPickUp
          v-for="v in orderInfo.orderPackages || []"
          :key="v.packageId"
          :item="v"
        />
        <!-- <view
          class="u-flex-column-center u-bg-fff"
          v-for="v in orderInfo.orderPackages || []"
          :key="v.packageId"
        >
          <text class="u-font22 u-999 u-mt15">出示数字码向店长核销</text>
          <view class="u-flex-center u-mt15">
            <text class="u-font40 u-333 u-bold">{{
              v.packagePickupVo.verificationCode || ""
            }}</text>
            <text
              class="u-font28 u-666 u-ml20"
              @click="copy(v.packagePickupVo.verificationCode || '')"
              >复制</text
            >
          </view>
        </view> -->
      </view>
    </template>

    <!-- 包裹选项卡 -->
    <view
      class="packAge"
      v-if="packAgeList.length > 0 && orderInfo.shippingMethod == 0"
    >
      <scroll-view scroll-X="true" class="packAge-scoll">
        <view
          class="every"
          v-for="(item, index) in packAgeList"
          :key="index"
          @click="toPackAgeDetail(item, index)"
        >
          包裹{{ index + 1 }}
        </view>
      </scroll-view>
    </view>

    <view class="pabox" v-if="orderGoodsList.length > 0">
      <view class="u-font28 u-flex-center-sb shop-info">
        <view class="name u-flex-center">
          <view>
            {{ orderInfo.businessName }}
          </view>
          <text class="iconfont">&#xe671;</text>
        </view>
        <view
          class="service"
          @click.stop="MakePhoneCall(orderInfo.customerServicePhone)"
        >
          <text class="iconfont">&#xe605;</text>
          <text>联系客服</text>
        </view>
      </view>
      <view v-for="(item, index) in orderGoodsList" :key="item.id">
        <ld-goods
          :value="item"
          :keys="index"
          :exchange="orderInfo.exchange"
          :item="orderInfo"
          @parentevaluation="parentevaluation"
        >
        </ld-goods>
      </view>
      <view class="u-font28 u-1A1A1A u-mt30 bg-fff">
        <view class="u-flex-center-sb u-border-one pt-pb25">
          <view>运费</view>
          <view class="u-999 u-font30" v-if="orderInfo.shippingFee != 0"
            >+{{ orderInfo.shippingFee }}元</view
          >
          <view class="u-999 u-font30" v-else>免运费</view>
        </view>

        <!-- 使用优惠卷情况 -->
        <template
          v-if="
            orderInfo.orderUseCoupons && orderInfo.orderUseCoupons.length > 0
          "
        >
          <view
            class="u-flex-center-sb u-border-one pt-pb25"
            v-for="(v, i) in orderInfo.orderUseCoupons"
            :key="i"
          >
            <view>
              优惠卷：{{ v.businessCouponName }}
              <text class="u-999 u-font24"></text>
            </view>
            <view class="u-999 u-font30"
              >-¥ {{ v.businessCouponFaceValue }}</view
            >
          </view>
        </template>

        <view class="u-flex-center pt-pb25" style="justify-content: flex-end">
          <view class="">共{{ orderInfo.productNumber }}件商品</view>
          <view style="display: flex; align-items: center">
            <view class="u-bold u-FF0000" v-if="orderInfo.exchange"
              >{{ orderInfo.paymentPoints }}积分</view
            >
            <view class="u-bold u-FF0000" v-else
              >¥ {{ orderInfo.totalRealPrice }}</view
            >
          </view>
        </view>
        <view class="u-flex-column-start pt-pb25">
          <view>购买备注</view>
          <view class="boxTextarea">{{
            orderInfo.buyerRemark ? orderInfo.buyerRemark : "无"
          }}</view>
        </view>
      </view>
    </view>

    <view class="upb120">
      <view class="u-font28 u-1A1A1A u-mt10 bg-fff">
        <view class="u-flex-center-sb u-border-one u-plr30 pt-pb25">
          <view>积分抵扣</view>
          <view class="u-999">-¥{{ orderInfo.pointReduced || 0 }}</view>
        </view>
        <view class="u-flex-center-sb u-border-one u-plr30 pt-pb25">
          <view>总优惠</view>
          <view v-if="orderInfo.totalReduced" class="u-999"
            >-¥{{ orderInfo.totalReduced }}</view
          >
          <view v-else class="u-999">无优惠</view>
        </view>
        <view class="u-flex-center-sb u-plr30 pt-pb25">
          <view>支付金额</view>
          <view class="u-FF0000 u-font32 u-bold">
            <text v-if="orderInfo.exchange"
              >{{ orderInfo.paymentPoints }}积分</text
            >
            <rich-text
              v-else
              :nodes="$mUtil.priceBigSmall(orderInfo.actualPayment || 0)"
            ></rich-text>
          </view>
        </view>
      </view>
      <view class="u-font28 u-1A1A1A u-mt10 bg-fff">
        <view class="u-flex-center-sb u-plr30 pt-pb25">
          <view>订单编号</view>
          <view class="u-999 u-font3">{{ orderInfo.orderNo }}</view>
        </view>
        <view class="u-flex-center-sb u-plr30 pt-pb25">
          <view>下单时间</view>
          <view class="u-999">{{ orderInfo.orderTime }}</view>
        </view>
        <view
          class="u-flex-center-sb u-plr30 pt-pb25"
          v-if="orderInfo.transactionStatus != 0 && orderInfo.paymentTime"
        >
          <view>支付时间</view>
          <view class="u-999">{{ orderInfo.paymentTime }}</view>
        </view>
        <view
          class="u-flex-center-sb u-plr30 pt-pb25"
          v-if="orderInfo.transactionStatus != 0"
        >
          <view>支付方式</view>

          <view class="u-999" v-if="orderInfo.paymentMethod == 0">余额</view>
          <view class="u-999" v-if="orderInfo.paymentMethod == 1">微信</view>
          <view class="u-999" v-if="orderInfo.paymentMethod == 2">支付宝</view>
          <view class="u-999" v-if="orderInfo.paymentMethod == 3"
            >积分兑换</view
          >
        </view>
        <view
          class="u-flex-center-sb u-plr30 pt-pb25"
          v-if="orderInfo.transactionStatus >= 20"
        >
          <view>配送方式</view>
          <view class="u-999">{{
            shipmentModeList[orderInfo.shippingMethod]
          }}</view>
        </view>

        <view
          class="u-flex-center-sb u-plr30 pt-pb25"
          v-if="orderInfo.transactionStatus >= 20"
        >
          <view>发货时间</view>
          <view class="u-999">{{ orderInfo.shippingTime || "--" }}</view>
        </view>

        <view
          class="u-flex-center-sb u-plr30 pt-pb25"
          v-if="orderInfo.transactionStatus >= 30"
        >
          <view>收货时间</view>
          <view class="u-999">{{ orderInfo.actualReceivingTime || "--" }}</view>
        </view>
      </view>
    </view>
    <!--待付款-->
    <view
      class="bg-fff u-mt30 btn u-flex"
      v-if="
        orderInfo.transactionStatus == 0 &&
        orderInfo.paymentStatus == 0 &&
        !orderInfo.end &&
        orderInfo.effective
      "
    >
      <view class="cancel-btn" @click="cancelOrder">取消订单</view>
      <button class="pay-btn" @click="goPay()">去付款</button>
    </view>
    <template v-else>
      <view class="bg-fff u-mt30 u-plr30 ptb22 btn u-flex-column-end">
        <view class="u-flex-center u-mr25">
          <button
            class="u-order-btn u-br-999 u-999"
            @click="goRefundType(2)"
            v-if="
              orderInfo.rightsStatus != 10 &&
              orderInfo.effective &&
              orderInfo.transactionStatus != 100 &&
              orderInfo.transactionStatus != 10 &&
              orderInfo.rightsMethod == 0
            "
          >
            申请售后
          </button>
          <!--等待商家发货-->
          <template
            v-if="
              orderInfo.transactionStatus == 10 &&
              !orderInfo.end &&
              orderInfo.rightsStatus != 10 &&
              orderInfo.rightsMethod == 0
            "
          >
            <button
              class="u-order-btn u-br-999 u-999"
              v-if="orderInfo.effective"
              @click="goRefundType(1)"
            >
              申请售后
            </button>
            <!-- <button
              class="u-order-btn u-br-f00 u-FF0000"
              v-if="orderInfo.shippingMethod == 0"
              @click="changeAddress"
            >
              修改地址
            </button> -->
          </template>
          <!--商家已发货-->
          <template v-if="orderInfo.transactionStatus == 20 && !orderInfo.end && orderInfo.shippingMethod != 10">
            <button class="u-order-btn u-br-999 u-999" @click="goLogistics">
              查看物流
            </button>
            <button
              v-if="
                orderInfo.receivingStatus != 20 &&
                orderInfo.rightsMethod == 0 &&
                orderInfo.shippingStatus == 20 &&
                orderInfo.rightsMethod == 0
              "
              class="u-order-btn u-br-f00 u-FF0000 u-mr25"
              @click="sureGetOrder"
            >
              确认收货
            </button>
          </template>
        </view>
      </view>
    </template>

    <!--弹窗评价-->
    <uv-popup mode="bottom" ref="uniPopupRef" round="20rpx" z-index="9999">
      <view class="popup">
        <view class="u-flex-sb u-plr30">
          <view class="u-flex">
            <image class="pic" :src="choseGoods.productCover"></image>
            <view class="u-ml30 wt378">
              <view class="u-1A1A1A u-font28">{{
                choseGoods.productTitle
              }}</view>
              <view class="u-999 u-font22 u-mt10" v-if="choseGoods.skuSetName">
                规格：{{ choseGoods.skuSetName }}</view
              >
              <view class="u-mt10 u-flex-center">
                <view class="u-FF0000 u-font32">
                  <rich-text
                    :nodes="
                      $mUtil.priceBigSmall(choseGoods.singlePaymentAmount)
                    "
                  ></rich-text>
                </view>
                <text class="u-ml10 u-999 u-font24"
                  >x {{ choseGoods.productNum }}</text
                >
              </view>
            </view>
          </view>
          <view @click.stop="handleClose">
            <uv-icon name="close-circle" color="#999999" size="40rpx"></uv-icon>
          </view>
        </view>
        <view class="u-bg-fff u-plr30 u-mt5">
          <view class="pt-pb25 u-font28 u-flex-center">
            <text>总体评价：</text>
            <view>
              <text
                v-for="(item, index) in 5"
                :key="index"
                @click="startNum(index)"
                class="iconfont u-font34 u-mr5"
                :class="gradeNum >= item ? 'grade-active' : 'u-B3B3B3'"
              >
                &#xe732;
              </text>
            </view>
          </view>
          <view class="u-font26">
            <textarea
              class="u-font26"
              v-model="textareaVal"
              placeholder="请输入文字评价"
              placeholder-class="cccfont"
            ></textarea>
          </view>
          <view class="u-mt25 u-font30">添加图片</view>
          <view class="u-mt25">
            <uploadImg :imgCount="6" :imgArr="imgArray" @result="resultUrl">
            </uploadImg>
          </view>
          <view class="evaluate-submit"
            ><button class="u-btn-two" @click="submitCom()">
              确认提交
            </button></view
          >
        </view>
      </view>
    </uv-popup>
  </view>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import $mUtil from "@/util/index.js";
import {
  shoporderInfo_Api,
  shopOrderList_Api,
  receiptOrder_Api,
  shoporderCancel_Api,
} from "@/api/order.js";
import { shopOrderCommentAdd_Api } from "@/api/shop.js";
import ldAddresszt from "@/components/ldAddress/ldAddresszt.vue";
import OrderPickUp from "./components/OrderPickUp.vue";
import { MakePhoneCall } from "@/util/tools.ts";

//配送方式
const shipmentModeList = ref({
  0: "物流",
  10: "自提",
});
// 包裹列表
const packAgeList = ref([]);
const orderInfo = ref({}); // 订单详情
const orderGoodsList = ref([]); // 订单列表

const choseGoods = ref({}); // 选择的商品
const gradeNum = ref(0); // 评价星级
const textareaVal = ref(""); // 评价内容
const imgArray = ref([]); // 评价图片数组
// 组件引用
const uniPopupRef = ref(null);
const timeData = ref({}); // 倒计时
const timeDataNum = ref(0);

const eventChannel = ref(null);
onMounted(() => {
  const instance = getCurrentInstance().proxy;
  eventChannel.value = instance.getOpenerEventChannel();
});

// 页面加载
onLoad((options) => {
  // console.log(options);
  if (options.orderId) {
    orderDetail(options.orderId);
  }
});

const onTimeChange = (e) => {
  timeData.value = e;
};

// 复制
const copy = (code) => {
  uni.setClipboardData({
    data: code,
    success: () => {
      uni.showToast({
        title: "复制成功",
      });
    },
  });
};

// 更新订单
const updateOrder = () => {
  try {
    eventChannel.value.emit("handleReset");
  } catch (error) {}
  orderDetail(orderInfo.value.orderId);
};

// 确认收货
const sureGetOrder = () => {
  uni.showModal({
    title: "是否确认收货？",
    content: "确认收货后，将无法撤销",
    success: (res) => {
      if (res.confirm) {
        console.log("用户点击确定");
        uni.showLoading({
          title: "加载中",
          mask: true,
        });
        receiptOrder_Api({ orderId: orderInfo.value.orderId })
          .then((res) => {
            uni.hideLoading();
            if (res && res.code == 200) {
              uni.showToast({
                title: "确认收货成功",
                icon: "success",
              });
              setTimeout(() => {
                updateOrder();
              }, 500);
            }
          })
          .catch((err) => {
            // uni.hideLoading();
          });
      } else if (res.cancel) {
        console.log("用户点击取消");
      }
    },
  });
};

// 评价
const parentevaluation = (data) => {
  // console.log(data);
  choseGoods.value = orderGoodsList.value[data.keys];
  uniPopupRef.value.open();
};

const startNum = (index) => {
  gradeNum.value = index * 1 + 1;
};

const resultUrl = (e) => {
  if (e) {
    imgArray.value = e;
  }
};

// 关闭弹窗
const handleClose = () => {
  uniPopupRef.value.close();
  gradeNum.value = 0;
  textareaVal.value = "";
  imgArray.value = [];
  choseGoods.value = [];
};

// 确认评价
const submitCom = () => {
  if (gradeNum.value == 0) {
    return uni.$uv.toast("请评价星星");
  }
  if (textareaVal.value == "") {
    return uni.$uv.toast("请输入文字评价");
  }
  let objs = {
    orderId: orderInfo.value.orderId,
    productId: choseGoods.value.productId,
    commentScore: gradeNum.value,
    comment: textareaVal.value,
    commentImages: imgArray.value,
    shopOrderDetailId: choseGoods.value.orderDetailId,
  };
  uni.showLoading({
    title: "提交中",
    mask: true,
  });
  shopOrderCommentAdd_Api(objs)
    .then((res) => {
      uni.hideLoading();
      if (res && res.code == 200) {
        uni.$uv.toast("评论成功");
        handleClose();
        setTimeout(() => {
          updateOrder();
        }, 500);
      }
    })
    .catch((err) => {
      // uni.hideLoading();
    });
};

// 修改地址
const changeAddress = () => {
  uni.navigateTo({
    url: "/pages/user/address/addressList",
  });
};

// 取消订单
const cancelOrder = () => {
  uni.showModal({
    title: "提示",
    content: "确定取消该订单吗？",
    success: (res) => {
      if (res.confirm) {
        shoporderCancel_Api({
          orderId: orderInfo.value.orderId,
          cancellationMethod: 10,
        }).then((res) => {
          if (res && res.code == 200) {
            uni.$uv.toast("取消成功");
            setTimeout(() => {
              try {
                eventChannel.value.emit("handleReset");
              } catch (error) {}
              uni.navigateBack();
            }, 1000);
          }
        });
      } else if (res.cancel) {
      }
    },
  });
};

// 订单详情
const orderDetail = (orderId) => {
  if (!orderId) return;
  uni.showLoading({
    title: "加载中...",
    mask: true,
  });
  shoporderInfo_Api(orderId)
    .then((res) => {
      uni.hideLoading();
      if (res && res.code == 200) {
        let target = res.data || {};
        orderInfo.value = target;
        orderGoodsList.value = target.orderDetails || [];
        if (target.transactionStatus == 0 && target.cancellationMethod == 0) {
          let expiredTime = new Date(res.data.expiredTime).getTime();
          timeDataNum.value = expiredTime - new Date().getTime();
        }
        getPackAge(target.orderId);
      }
    })
    .catch((err) => {
      // uni.hideLoading();
      setTimeout(() => {
        uni.navigateBack();
      }, 500);
    });
};

// 包裹信息
const getPackAge = (orderId) => {
  shopOrderList_Api(orderId).then((res) => {
    if (res.code === 200) {
      packAgeList.value = res.data;
    }
  });
};

// 跳转到包裹详情
const toPackAgeDetail = (item, index) => {
  uni.navigateTo({
    url: `/pages/order/logisticsNew?id=${item.orderId}&index=${index}`,
  });
};

// 支付页
const goPay = () => {
  let expiredTime = new Date(orderInfo.value.expiredTime).getTime();
  let expiredNum = expiredTime - new Date().getTime();
  // console.log(expiredNum);
  // console.log(expiredTime);
  if (expiredNum <= 0) {
    uni.$uv.toast("订单已过期，请重新下单");
    setTimeout(() => {
      updateOrder();
    }, 500);
    return;
  }
  let url = `/pages/order/pay?orderNo=${orderInfo.value.orderNo}&total_amount=${
    orderInfo.value.actualPayment || ""
  }&expired_pay_time=${expiredTime}&orderId=${
    orderInfo.value.orderId
  }&pagesType=1`;
  uni.navigateTo({
    url,
    events: {
      callback: function (data) {
        console.log(data);
        updateOrder();
      },
    },
  });
};

// 申请售后
const goRefundType = (i) => {
  //i:1未发货，退款，2收到货退款/退货
  uni.setStorageSync("blackgoodsList", orderGoodsList.value);
  if (orderInfo.value.shippingStatus == 0 || orderInfo.value.shippingMethod == 10) {
    uni.navigateTo({
      url: `/pages/order/applicationDrawback?orderId=${orderInfo.value.orderId}&keystatus=1`,
    });
  } else {
    uni.navigateTo({
      url: "/pages/order/refundType?orderId=" + orderInfo.value.orderId,
    });
  }
};

// 查看物流
const goLogistics = () => {
  uni.navigateTo({
    url: "/pages/order/logisticsNew?id=" + orderInfo.value.orderId + "&index=0",
  });
};
</script>

<style lang="scss">
page {
  background-color: #f5f5f5;
}

.uni-countdown-class {
  height: 32rpx;

  ::v-deep .uni-countdown__splitor {
    padding: 0 4rpx;
    margin-top: -6rpx;
  }
}

.border {
  border-bottom: 3rpx solid #e7e7e7;
}

.cccfont {
  font-size: 26rpx;
  color: #eee;
}

.grade-active {
  color: #ffc336;
}

.u-B3B3B3 {
  color: #b3b3b3;
}

.user_remark {
  background-color: #fff;
  padding: 30rpx;
  border-top: 1px solid #eee;
}

.boxTextarea {
  width: 686rpx;
  border: 1px solid #ededed;
  border-radius: 20rpx;
  background-color: #fafafa;
  padding: 20rpx;
  box-sizing: border-box;
  margin-top: 20rpx;
}

.pabox {
  background-color: #fff;
  padding: 30rpx 30rpx 0;
  margin-top: 10rpx;

  .consumption_value {
    color: #ffffff;
    margin-right: 10rpx;
  }

  .consumption_value-icon {
    font-size: 60rpx;
    color: #ff9651;
  }

  .shop-info {
    .name {
      font-size: 36rpx;
      font-family: PingFang SC, PingFang SC-Bold;
      font-weight: 700;
      text-align: left;
      color: #1a1a1a;
      .iconfont {
        margin-left: 5rpx;
        flex-shrink: 0;
      }
    }
    .service {
      flex-shrink: 0;
      margin-left: 10rpx;
      .iconfont {
        margin-right: 10rpx;
      }
    }
  }
}

.upb120 {
  padding-bottom: 140rpx;
}

.bg-fff {
  background-color: #ffffff;
}

.ptb22 {
  padding-top: 22rpx;
  padding-bottom: 22rpx;
}

.pt-pb25 {
  padding-top: 25rpx;
  padding-bottom: 25rpx;
}

.pt28-pb24 {
  padding-top: 28rpx;
  padding-bottom: 24rpx;
}

.iconfont58 {
  font-size: 58rpx;
}

.mt44 {
  margin-top: 44rpx;
}

.ml38 {
  margin-left: 38rpx;
}

.ml82 {
  margin-left: 82rpx;
}

.wt378 {
  width: 378rpx;
}

.wt504 {
  width: 504rpx;
}

.u-br-999 {
  border: 1px solid #999999;
}

.u-br-f00 {
  border: 1px solid #ff0000;
}

.bg-00321e {
  background: #0b844a;
}

.account-paid {
  padding: 44rpx 0rpx;
}

.account-paid image {
  width: 202rpx;
  height: 124rpx;
}

.btn {
  width: 100%;
  position: fixed;
  bottom: 0rpx;
  padding: 22rpx 0rpx;
}

.cancel-btn {
  margin-left: auto;
  // background-color: #E7EEFC;
  // color: #ffffff;
  background: #ffffff;
  border: 1rpx solid #cccccc;
}

.cancel-btn,
.pay-btn {
  box-sizing: border-box;
  width: 202rpx;
  height: 70rpx;
  line-height: 70rpx;
  border-radius: 35px;
  font-size: 28rpx;
  // margin-right: 30rpx;
  display: inline-block;
  text-align: center;
}

.pay-btn {
  background-color: #eb5153;
  color: #ffffff;
}

.top-state {
  background-color: #ffffff;
  // color: #fff;
  padding: 35rpx 30rpx;

  // 待支付
  .obligation {
    display: flex;
    justify-content: space-between;

    .timeImg {
      display: none;
      width: 70rpx;
      height: 54rpx;
      margin-right: 40rpx;
    }
  }
}

.address {
  background-color: #ffffff;
  padding-top: 72rpx;

  .linkman {
    padding-bottom: 34rpx;
  }

  .remark {
    padding: 35rpx 0rpx 35rpx 50rpx;
  }
}

//弹窗填写物流信息
.logisticsPopup {
  background-color: #ffffff;
  width: 100%;
  border-radius: 20rpx;

  .pd {
    padding: 15rpx 98rpx 68rpx;
  }

  input {
    height: 70rpx;
    line-height: 70rpx;
    border: 1rpx solid #cccccc;
    border-radius: 15rpx;
    padding-left: 8rpx;
    color: #999999;
  }

  .icon {
    margin-top: -65rpx;
  }

  .pl-pr {
    padding-left: 74rpx;
  }

  button {
    margin-top: 66rpx;
    background-color: #01331f;
    width: 345rpx;
  }
}

// 弹窗评价
.popup {
  background-color: #f5f5f5;
  width: 100%;
  border-radius: 18rpx 18rpx 0px 0px;
}

.u-flex-sb {
  display: flex;
  justify-content: space-between;
  padding-top: 30rpx;
  padding-bottom: 30rpx;
  background-color: #ffffff;
  border-radius: 18rpx 18rpx 0px 0px;

  .pic {
    width: 155rpx;
    height: 155rpx;
  }
}

textarea {
  width: 100%;
  height: 210rpx;
  opacity: 0.66;
  border: 1rpx solid #e6e6e6;
  border-radius: 8rpx;
  padding-left: 22rpx;
  padding-top: 14rpx;
  box-sizing: border-box;
}

.evaluate-submit {
  margin-top: 58rpx;
  padding-bottom: 25rpx;
}

.evaluate-submit button {
  height: 80rpx;
  line-height: 80rpx;
  // background-color: #ffffff;
  // color: #ffffff;
}

// 包裹选项卡
.packAge {
  width: 100%;
  height: 100rpx;
  margin-bottom: 10rpx;
  padding-left: 30rpx;
  line-height: 100rpx;
  background-color: #fff;

  .packAge-scoll {
    width: 100%;
    height: 100%;
    white-space: nowrap;
  }

  .every {
    display: inline-block;
    width: 140rpx;
    height: 80rpx;
    margin-right: 20rpx;
    line-height: 80rpx;
    // padding-left: 20rpx;
    border-radius: 10rpx;
    border: 1rpx solid #3775f6;
    text-align: center;
    box-sizing: border-box;

    image {
      width: 30rpx;
      height: 30rpx;
      margin-right: 20rpx;
      vertical-align: middle;
    }
  }
}
</style>