VAVABUY/pages/order/details.vue

<template>
  <Theme>
    <Navbar fixed>
      <template #center>
        <view class="nav_title">
          <trans _t="tabbar.订单详情" />
        </view>
      </template>
    </Navbar>
    <view class="content">
      <view class="overview">
        <view class="img_box">
          <image
            class="img"
            mode="aspectFit"
            :src="queryData?.goods[0]['pic_url']"
          ></image>
        </view>
        <view class="information">
          <text class="name">{{ queryData?.goods[0]["goodTitle"] }}</text>
          <view>
            {{ queryData?.goods[0]["sku_desc"] }}
          </view>
          <view class="num">x{{ queryData?.goods[0]["total"] }}</view>
        </view>
      </view>
      <view class="price_box">
        <text class="currency">{{ symbol.symbol }}:</text>
        <rich-text
          class="texts"
          :nodes="Moneyhtml(queryData?.goods[0]['price'])"
        ></rich-text>
      </view>

      <view class="dashed"></view>

      <view class="text_box">
        <trans class="title" _t="实付"></trans>
        <view class="price_box">
          <text class="currency">{{ symbol.symbol }}</text>
          <rich-text
            class="texts"
            :nodes="Moneyhtml(queryData?.amount)"
          ></rich-text>
        </view>
      </view>
      <view class="text_box" v-if="queryData?.payType">
        <trans class="title" _t="支付方式"></trans>
        <text>{{ queryData?.payType }}</text>
      </view>
      <view class="text_box">
        <trans class="title" _t="订单状态"></trans>
        <text>{{ queryData?.status_txt }}</text>
      </view>
      <view class="text_box">
        <trans class="title" _t="平台订单号"></trans>
        <up-copy
          :content="queryData?.orderNo"
          :notice="t('复制成功')"
          class="right_value"
        >
          <up-icon name="file-text" size="16px"></up-icon>
          <text>{{ queryData?.orderNo }}</text>
        </up-copy>
      </view>
      <view class="text_box" v-if="queryData?.payDate">
        <trans class="title" _t="订单时间"></trans>
        <text>{{ useGlobal().$format(queryData?.payDate) }}</text>
      </view>

      <view class="dashed" v-if="queryData?.checkImg.length"></view>
      <view class="check_box" v-if="queryData?.checkImg.length">
        <trans class="title" _t="质检照片"></trans>
        <scroll-view class="image-scroll" scroll-x show-scrollbar="false">
          <view class="image-row">
            <view
              class="image-item"
              v-for="(img, index) in queryData?.checkImg"
              :key="index"
              @click="previewImage(index)"
            >
              <image :src="img" mode="cover" class="img"></image>
            </view>
          </view>
        </scroll-view>
      </view>
      <view class="dashed"></view>
      <view class="title_box">
        <trans _t="五项服务全面呵护你的包裹号"></trans>
      </view>

      <view class="hint">
        <trans _t="点击步骤即可查看详情哦~"></trans>
        <scroll-view
          :scroll-x="true"
          :scroll-left="flexdw"
          :scroll-with-animation="true"
          class="steps-scroll-view"
        >
          <up-steps
            class="custom-steps"
            :current="currentStatus"
            activeColor="#000"
            inactiveColor="#d8d8d8"
            direction="row"
          >
            <up-steps-item
              class="step-item"
              v-for="(item, index) in queryData?.bzList"
              :key="item.id || index"
              :title="item.name"
            >
            </up-steps-item>
          </up-steps>
        </scroll-view>
      </view>

      <view class="quality_inspection" v-if="queryData?.checkStatus > 0">
        <view class="head">
          <text class="state">{{ t("当前状态") }}:</text>
          <view class="progress">
            <text class="text_red">{{ currentStatus + 1 }}</text>
            <text class="icon">/</text>
            <text class="sum">{{
              !queryData?.bzList.length ? 0 : queryData?.bzList.length
            }}</text>
          </view>
          <text class="hint">{{ t("专业质检") }}</text>
          <!-- <up-icon class="icon" color="#FF0000" name="info-circle"></up-icon> -->
        </view>

        <view class="body">
          <text>{{ queryData?.checkRemark }}</text>
        </view>

        <view class="foot">
          <view class="button" @click="noLook">
            <trans _t="查看" />
          </view>
        </view>
      </view>
      <view v-if="checkstatus" class="popup_close" @click="toPay">
        <trans class="menu_text" _t="去支付" />
      </view>
      <view
        v-if="queryData?.status > 300"
        class="popup_cancle"
        @click="logisticsPop"
      >
        <trans class="menu_text" _t="查看物流" />
      </view>
      <view
        class="popup_cancle"
        @click="orderCancel"
        v-if="queryData?.status == 100"
      >
        <trans class="menu_text" _t="取消" />
      </view>
      <view class="popup_cancle" @click="onClose">
        <trans class="menu_text" _t="返回" />
      </view>
      <Popup ref="popRef" mode="center" isClose>
        <template #content>
          <view class="popup_content">
            <view class="img_box">
              <Swiper
                :listArr="queryData?.checkImg"
                urlName=""
                autoplay
                indicatorDots
                circular
              />
            </view>
            <view class="hint" @click="openKf">
              <text class="text"
                >{{ t("kf_hint")
                }}<up-icon
                  class="icon"
                  color="#EB3A68"
                  name="kefu-ermai"
                ></up-icon
              ></text>
            </view>
            <view class="checkbox" v-if="queryData?.checkStatus != 10">
              <Tip title="同意并已阅读免责说明" :show="tipShow">
                <view class="confirm_box" style="">
                  <up-checkbox
                    activeColor="var(--black)"
                    labelSize="14"
                    labelColor="#000000"
                    iconSize="16"
                    size="16"
                    name="agree"
                    usedAlone
                    v-model:checked="aloneChecked"
                    shape="circle"
                  >
                    <template #label>
                      <trans class="text" _t="同意并已阅读免责说明" />
                    </template>
                  </up-checkbox>
                </view>
              </Tip>
            </view>
          </view>
        </template>
        <template #footer>
          <view class="footer_button">
            <template v-if="queryData?.checkStatus != 10">
              <view class="accept" @click="accept">{{ t("接受瑕疵") }}</view>
              <view class="refund" @click="refund">{{ t("退款") }}</view>
            </template>
            <view class="refund" @click="close" v-else>{{ t("关闭") }}</view>
          </view>
        </template>
      </Popup>

      <popup ref="popRefExpress" :title="t('物流详细')" isClose>
        <template #content>
          <up-steps direction="column" current="0">
            <up-steps-item v-for="(item, index) in detail" :key="index">
              <template #content>
                <view class="default" :class="index == 0 ? 'express' : ''">
                  <view class="slot-title">{{ item.status }}</view>
                  <view class="slot-time">{{ item.time }}</view>
                  <view class="slot-desc">{{ item.context }}</view>
                </view>
              </template>
            </up-steps-item>
          </up-steps>
        </template>
      </popup>
    </view>

    <cancelModel ref="cancelModelRef" />
  </Theme>
</template>

<script setup>
import { ref, watchEffect, computed, watch, onMounted, nextTick } from "vue";
import { $post, useGlobal } from "@/utils";
import { useSystemStore } from "@/store";
import { Moneyhtml, Modal, Toast } from "@/utils";
import { t } from "@/locale";
import Navbar from "@/components/navbar";
import Popup from "@/components/popup.vue";
import { onLoad } from "@dcloudio/uni-app";
import { SHOP_ORDER_GETPAY, SHOP_ACTION, SHOP_ORDER_DETAIL } from "@/api";
import Swiper from "@/components/swiper";
import Tip from "@/components/tooltip";
import cancelModel from "@/pages/dashboard/components/cancelModel.vue";
import { SHOP_ORDER_EXPRESS } from "@/api";

const popRef = ref(null);
const parmes = ref();
const useSystem = useSystemStore();
const queryData = ref();
const currentStatus = ref(-1);
const flexdw = ref(0);
const symbol = computed(() => useSystem.getSymbol);
const tipShow = ref(false);
const aloneChecked = ref(false);

const popRefExpress = ref(null);
const detail = ref({});
watch(aloneChecked, (newVal) => {
  if (newVal) tipShow.value = false;
});

const checkstatus = ref(false);
watchEffect(async () => {
  try {
    const res = await SHOP_ORDER_DETAIL(parmes.value.oid);
    queryData.value = res.data;
    res.data.payStatus == 100
      ? (checkstatus.value = true)
      : (checkstatus.value = false);
    res.data?.bzList?.forEach((item) => {
      if (item.checked == 1) {
        currentStatus.value += item.checked;
        return;
      }
    });
    nextTick(() => {
      if (currentStatus.value >= 3) {
        flexdw.value = currentStatus.value * 90;
      }
    });
  } catch (err) {}
});

const noLook = () => {
  popRef.value && popRef.value.open();
};

const close = () => {
  popRef.value && popRef.value.close();
};
const openKf = () => {
  uni.navigateTo({ url: "/pages/setting/system" });
};
const onClose = () => {
  uni.navigateBack();
};
const previewImage = (index) => {
  uni.previewImage({
    current: index,
    urls: queryData.value.checkImg,
    indicator: "number",
    loop: true,
  });
};

const oids = ref("");
const buyCart = async (oid) => {
  const res = await SHOP_ORDER_GETPAY(oid);
  oids.value = res.data.oid;
};
const toPay = () => {
  uni.navigateTo({ url: `/pages/shop/payment?oid=${oids.value}&type=order` });
};
const accept = () => {
  if (aloneChecked.value == false) {
    tipShow.value = true;
  } else {
    acfun(30);
  }
};

const acfun = async (val) => {
  try {
    const res = await SHOP_ACTION({
      orderid: parmes.value.oid,
      type: val,
    });
    Toast(res.msg, 1000).then(() => {
      let timer = setTimeout(() => {
        popRef.value && popRef.value.close();
        clearTimeout(timer);
      }, 1000);
    });
  } catch (error) {
    Toast(error.msg);
  }
};

const logisticsPop = async () => {
  try {
    const res = await SHOP_ORDER_EXPRESS(queryData.value.id);
    detail.value = res.data;
    nextTick(() => {
      popRefExpress.value && popRefExpress.value.open();
    });
  } catch (error) {
    Toast(error.msg);
  }
};

const cancelModelRef = ref(null);

const orderCancel = () => {
  cancelModelRef.value && cancelModelRef.value.open(queryData.value.id);
};

const refund = () => {
  acfun(40);
};
onLoad((options) => {
  parmes.value = options;
  buyCart(options.oid);
});
</script>

<style lang="less" scoped>
@import url("@/style.less");

.scroll-Y {
  height: 300rpx;
}

.scroll-view_H {
  width: 280%;
}

.scroll-view-item_H {
  width: 35%;
}

.content {
  padding: 15rpx 5%;
  border-top: 1rpx solid #ccc;

  .popup_close {
    background-color: var(--black);
    color: var(--light);
    .flex_center();
    padding: 28rpx 0;
    border-radius: 20rpx;
  }

  .popup_cancle {
    background-color: var(--white);
    color: var(--black);
    .flex_center();
    border-radius: 20rpx;
    margin-top: 15rpx;
    padding: 28rpx 0;
    border: 1px solid var(--black);
  }

  .steps_box {
    width: 100%;
    overflow-x: scroll;
    margin: 20rpx 0;
    border: 1px solid #ccc;
    padding: 10rpx 0;
  }

  .overview {
    color: var(--text);
    .flex();
    gap: 24rpx;

    .img_box {
      flex: 4;
      border-radius: 20rpx;

      .img {
        width: 100%;
        height: 100%;
      }
    }

    .information {
      flex: 6;
      .size(24rpx);

      .name {
        // .ellipsis(2);
        margin-bottom: 26rpx;
        .size(28rpx);
      }

      .num {
        text-align: right;
      }
    }
  }

  .orginal_price {
    .hor(end);
  }

  .text_box {
    .flex_position(space-between, flex-end);
    margin: 8rpx 0;
    .size(24rpx);

    .title {
      color: var(--text-01);
    }

    .currency,
    .texts {
      color: var(--red);
      .size(28rpx);
      font-weight: 500;
    }

    .right_value {
      .flex();
    }
  }

  .price_box {
    .flex_position(end, flex-end);
    color: var(--black);
    .size(28rpx);

    .currency {
      margin-right: 10rpx;
    }
  }

  .texts /deep/ {
    .price {
      .size();
    }
  }
  .check_box {
    .image-scroll {
      width: 100%;
      margin: 20rpx 0;
      white-space: nowrap;
      .image-row {
        display: inline-flex;
        gap: 12rpx;
        .image-item {
          width: 140rpx;
          height: 140rpx;
          border-radius: 12rpx;
          overflow: hidden;
          box-shadow: 0 2rpx 5rpx rgba(0, 0, 0, 0.1);
          .img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
      }
    }

    // 图片行容器

    // 图片项
  }
  .title_box {
    .size(28rpx);
    font-weight: 500;
    color: var(--text);
  }

  .hint {
    .size(24rpx);
    color: var(--text-01);
    margin-top: 10rpx;

    .steps-scroll-view {
      flex: 1;
      width: 100%;
      white-space: nowrap;
      padding: 24rpx 0;
      scroll-behavior: smooth;

      .custom-steps {
        display: inline-flex;
        min-width: 100%;

        .step-item {
          min-width: 120px;
          max-width: 180px;
          padding: 0 12rpx;
          box-sizing: border-box;
          white-space: normal;
          word-break: break-word;
          cursor: pointer;
          transition: all 0.3s;

          &:deep(.up-steps-item-title) {
            .size(28rpx);
            color: #333;
            font-weight: 500;
            // text-align: center;
          }
        }
      }
    }
  }

  .quality_inspection {
    margin-top: 10rpx;
    background-color: var(--bor-color);
    padding: 0 20rpx;
    border-radius: 20rpx;

    .head {
      .ver(flex-end);

      .icon {
        margin-left: 5rpx;
      }

      .state {
        .size(20rpx);
      }

      .progress {
        .ver(baseline);

        .text_red {
          color: var(--red);
          .size(28rpx);
          margin-left: 10rpx;
        }

        .icon,
        .sum {
          .size(24rpx);
          color: var(--text);
        }
      }

      .hint {
        .size(24rpx);
        font-weight: 500;
        margin-left: 10rpx;
      }
    }

    .body {
      .size(24rpx);
      color: var(--text);
      margin-top: 16rpx;
    }

    .foot {
      margin-top: 26rpx;
      .hor(end);

      .button {
        .size(24rpx);
        color: var(--light);
        background-color: var(--black);
        padding: 14rpx 28rpx;
        border-radius: 20rpx;
        margin-bottom: 16rpx;
      }
    }
  }

  /deep/ .u-popup__content {
    width: 80vw !important;
    position: relative;
  }

  .popup_content {
    .img_box {
      height: 400rpx;
      border-radius: 20rpx;

      .img {
        max-width: 100%;
        max-height: 100%;
      }
    }

    .hint {
      .ver(flex-start);

      .text {
        flex: 1;
        word-break: break-word;
        padding-right: 40rpx;
        position: relative;
      }

      .icon {
        position: absolute;
        right: 40rpx;
        bottom: 0;
        margin-left: 8rpx;
      }
    }

    .checkbox {
      margin-top: 44rpx;

      /deep/ .u-checkbox {
        .ver(baseline);
      }
    }
  }

  .footer_button {
    .hor(space-between);
    .size(28rpx);
    gap: 50rpx;
    text-align: center;

    .accept {
      flex: 1;
      color: var(--text);
      padding: 24rpx 0;
      border: 2rpx solid var(--black);
      border-radius: 20rpx;
    }

    .refund {
      flex: 1;
      color: var(--light);
      padding: 24rpx 0rpx;
      background-color: var(--black);
      border-radius: 20rpx;
    }
  }

  // .popup_close {
  //   position: absolute;
  //   top: -50rpx;
  //   right: 4rpx;
  //   padding: 6rpx;
  //   .flex_position(center, center);
  //   background-color: var(--light);
  //   border-radius: 50%;

  // }
}

.default {
  color: var(--text-02);

  &.express {
    color: var(--black);
  }

  .slot-title {
    .size(28rpx);
    font-weight: 600;
  }

  .slot-desc {
    .size(20rpx);
  }

  .slot-time {
    .size(22rpx);
  }
}
</style>