VAVABUY/pages/store/detail.vue

<template>
  <Theme>
    <Navbar fixed>
      <template #center>
        <view class="nav_title">
          <trans _t="店铺订单详情" />
        </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
            v-for="(title, index) in queryData?.goods[0]['sku_desc'].split(';')"
            :key="index"
          >
            <text>{{ title }}</text>
          </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" v-if="queryData.status == 300">
        <trans class="title" _t="运费"></trans>
        <view class="price_box">
          <text class="currency">{{ symbol.symbol }}</text>
          <rich-text
            class="texts"
            :nodes="Moneyhtml(queryData?.money)"
          ></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="adrData"></view>
      <view class="address_box" v-if="adrData">
        <trans class="title" _t="收货地址"></trans>
        <view class="_item">
          <view class="_item_top">
            <view class="_top_left">
              <view class="name"
                >{{ adrData.firstName }}&nbsp;{{ adrData.lastName }}</view
              >
              <view class="phone">{{ adrData.phoneNo }}</view>
              <view class="code">{{ adrData.zipCode }}</view>
            </view>
          </view>
          <view class="_item_middle">
            {{ adrData.country }}&nbsp;{{ adrData.province }},{{
              adrData.city
            }},{{ adrData.address }}
          </view>
        </view>
      </view>

      <view class="dashed"></view>
      <view v-if="queryData.status == 300" class="popup_close" @click="buyCart">
        <trans class="menu_text" _t="去支付" />
      </view>
      <view class="popup_cancle" @click="onClose">
        <trans class="menu_text" _t="返回" />
      </view>
    </view>
  </Theme>
</template>

<script setup>
import { ref, computed, watch, onMounted, nextTick } from "vue";
import { useSystemStore } from "@/store";
import { useGlobal, Moneyhtml, Modal, Toast } from "@/utils";
import { t } from "@/locale";
import Navbar from "@/components/navbar";
import { onLoad } from "@dcloudio/uni-app";
import { SELLER_SELLER_GETPAY, SHOP_ACTION, SELLER_SELLER_DETAIL } from "@/api";

const parmes = ref(null);
const useSystem = useSystemStore();
const queryData = ref(null);
const symbol = computed(() => useSystem.getSymbol);

const adrData = ref(null);

const onClose = () => {
  uni.navigateBack();
};

const buyCart = async (oid) => {
  const res = await SELLER_SELLER_GETPAY(parmes.value.id);
  toPay(res.data.sid);
};
const toPay = (oid) => {
  uni.navigateTo({
    url: `/pages/shop/payment?oid=${oid}&type=sellerpay`,
  });
};

const cancelModelRef = ref(null);

const orderCancel = () => {
  cancelModelRef.value && cancelModelRef.value.open(queryData.value.id);
};
const getDetail = async () => {
  try {
    const res = await SELLER_SELLER_DETAIL(parmes.value.id);
    queryData.value = res.data;
    adrData.value = JSON.parse(res.data.adrData);
  } catch (error) {
    Toast(error.msg);
  }
};
onLoad((options) => {
  parmes.value = options;
  getDetail();
});
</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: 2;
      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();
    }
  }

  .address_box {
    margin: 8rpx 0;
    .size(24rpx);

    .title {
      color: var(--text-01);
      margin-bottom: 12rpx;
    }

    ._item {
      overflow: hidden;

      &_top {
        .flex_position(space-between);
        padding-right: 30rpx;
        line-height: 60rpx;

        ._top_left {
          .ver();

          .name {
            .size(36rpx);
            font-weight: 700;
            color: var(--text);
          }

          .phone,
          .code {
            color: var(--text-01);
            margin-left: 30rpx;
            .size(28rpx);
            font-weight: 700;
          }
        }

        .icon-left {
          color: var(--text-01);
          transform: rotate(180deg);
          .size();
        }
      }

      &_middle {
        text-wrap: wrap;
        white-space: pre-wrap;
        word-wrap: break-word;
        .size(28rpx);
        color: var(--text-01);
        margin-top: 8rpx;
        line-height: 48rpx;
        margin-bottom: 12rpx;
      }
    }
  }

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