VAVABUY/pages/order/components/OrderDetails.vue

<template>
  <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 v-for="(title, index) in queryData?.goods[0]['sku_desc'].split(';')" :key="index">
          <text>{{ title }}</text>
        </view>
      </view>
    </view>

    <view class="price_box">
      <text class="currency">{{ currency }}:</text>
      <rich-text class="texts" :nodes="Moneyhtml(queryData?.goods[0]['orginal_price'])"></rich-text>
    </view>

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

    <view class="text_box">
      <trans class="title" _t="实付"></trans>
      <view class="price_box">
        <text class="currency">{{ currency }}</text>
        <rich-text class="texts" :nodes="Moneyhtml(queryData?.goods[0]['price'])"></rich-text>
      </view>
    </view>
    <view class="text_box">
      <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>
      <text>{{ queryData?.orderNo }}</text>
    </view>
    <view class="text_box">
      <trans class="title" _t="订单时间"></trans>
      <text>{{ queryData?.payDate }}</text>
    </view>

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

    <view class="title_box">
      <trans _t="五项服务全面呵护你的包裹号"></trans>
    </view>

    <view class="hint">
      <trans _t="点击步骤即可查看详情哦~"></trans>

      <view class="steps_box">
        <view style="width: 300%;overflow-x: scroll !important;">
          <up-steps :current="currentStatus" activeColor="#000" inactiveColor="#d8d8d8" direction="row">
            <up-steps-item v-for="item in queryData?.bzList" :key="item.id" :title="item.name">
            </up-steps-item>
          </up-steps>
        </view>
      </view>
    </view>

    <view class="quality_inspection">
      <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>
        <trans class="hint" _t="专业质检" />
        <up-icon class="icon" color="#FF0000" name="info-circle"></up-icon>
      </view>

      <view class="body">
        <text>商品存在破损问题</text>
      </view>

      <view class="foot">
        <view class="button" @click="noLook">查看</view>
      </view>
    </view>

    <Popup ref="popRef" mode="center">
      <template #content>
        <view class="popup_content">
          <view class="img_box">
            <image class="img" mode="aspectFit" :src="queryData?.goods[0]['pic_url']"></image>
          </view>
          <view class="hint">
            <trans _t="kf_hint" class="text" />
            <up-icon class="icon" color="#EB3A68" name="kefu-ermai"></up-icon>
          </view>
          <view class="checkbox">
            <up-checkbox activeColor="#000000" size="12" labelSize="12" label="同意并已阅读免责说明" name="agree" shape="circle"
              usedAlone :checked="aloneChecked">
            </up-checkbox>
          </view>
        </view>
        <view class="popup_close" @click.stop="onClose()">
          <up-icon class="icon" color="#000000" name="close" size="12"></up-icon>
        </view>
      </template>
      <template #footer>
        <view class="footer_button">
          <view class="accept" @click="accept">{{ t('接受瑕疵') }}</view>
          <view class="refund" @click="refund">{{ t('退款') }}</view>
        </view>
      </template>
    </Popup>

  </view>
</template>

<script setup>
import { defineProps, ref, watchEffect, computed } from "vue";
import { $post } from '@/utils';
import { useSystemStore } from "@/store";
import { Moneyhtml } from "@/utils";
import { t } from "@/locale";
import Popup from "@/components/popup.vue"
const popRef = ref(null)
const props = defineProps({
  orderId: Number
})

const useSystem = useSystemStore();

const queryData = ref();
const currentStatus = ref(-1);

const currency = computed(() => useSystem.getCurrency);

const aloneChecked = ref(false)

watchEffect(async () => {
  try {
    const { data: { data } } = await $post('/shop/order/detail', { orderid: props.orderId })
    queryData.value = data;
    data?.bzList?.forEach((item) => {
      if (item.checked == 1) {
        currentStatus.value += item.checked;
        return
      }
    });
  } catch (err) {
    console.log(err)
  }
})

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

const onClose = () => {
  popRef.value && popRef.value.close();
}

const accept = () => {
  onClose();
}
const refund = () => {
  onClose();
}
</script>

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

.snap-container {
  width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  display: flex;
}

.snap-item {
  scroll-snap-align: start;
  min-width: 100%;
  height: 200px;
  flex-shrink: 0;
}

.slider-container {
  width: 100%;
  overflow-x: auto;
  /* 允许水平滚动 */
  white-space: nowrap;
  /* 防止内容换行 */
  scrollbar-width: none;
  /* 隐藏滚动条 - Firefox */
  -ms-overflow-style: none;
  /* 隐藏滚动条 - IE/Edge */
}

.slider-container::-webkit-scrollbar {
  display: none;
  /* 隐藏滚动条 - Chrome/Safari */
}

.slider-content {
  display: inline-block;
  /* 使内容保持在一行 */
}

.item {
  display: inline-block;
  width: 200px;
  height: 150px;
  margin-right: 10px;
  background-color: #f0f0f0;
}

.content {
  .steps_box {
    width: 100%;
    overflow: scroll !important;
    overflow-x: scroll !important;
    margin: 20rpx;
  }

  .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);

      }

    }
  }

  .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;
    }
  }

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

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

  .texts /deep/ {
    .price {
      .size();
    }
  }

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

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

  .quality_inspection {
    margin-top: 40rpx;
    background-color: var(--bor-color);
    padding: 10rpx 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%;

  }
}
</style>