jdt-user/src/pages/admin/order_manage/detail/index.vue

<template>
  <view>
    <!--    订单信息    -->
    <nut-cell-group>
      <nut-cell>
        <template #default>
          <view class="center-box">
            <view
              class="top"
              v-for="(item, index) in info.OrderGoods"
              :key="index">
              <image class="mr-10" :src="item.Goods?.cover" />
              <view class="flex-1">
                <view class="title">{{ item.Goods?.name }}</view>
                <view class="text-[#F83D3D] mt-5">
                  <view>{{ item.pay_price }}元</view>
                  <view>{{ item.pay_integral }}积分</view>
                </view>
              </view>
              <view class="right">
                <view>x{{ item.number }}</view>
              </view>
            </view>
            <view
              class="flex justify-between items-center mt-2 mb-2 text-[25px]">
              <view class="text-[#9C9C9C]">{{ `共${info.count}件商品` }}</view>
              <view
                >{{ info.status !== 0 ? '实' : '应' }}付款{{
                  info.pay_type === 1 ? '(元): ' : '(积分): '
                }}{{ info.pay_type === 1 ? info.price : info.exchange }}</view
              >
            </view>
          </view>
        </template>
      </nut-cell>
    </nut-cell-group>
    <nut-cell-group>
      <nut-cell title="订单号:" :desc="info.oid"></nut-cell>
      <nut-cell
        title="订单状态:"
        :desc="
          info.status === 0
            ? '待付款'
            : info.status === 1
            ? '待使用'
            : info.status === 2
            ? '已使用'
            : '已失效'
        ">
      </nut-cell>
      <nut-cell title="下单用户:" :desc="info.User?.nickName"></nut-cell>
      <nut-cell title="用户手机号:" :desc="info.User?.phone"></nut-cell>
      <nut-cell title="下单时间:" :desc="info.add_time"></nut-cell>
      <nut-cell title="核销时间:" :desc="info.User?.phone"></nut-cell>
      <nut-cell
        v-if="info.status === 2"
        title="核销人员:"
        :desc="info.CancelUser?.nickName"></nut-cell>
      <nut-cell
        v-if="info.status === 2"
        title="核销人手机号:"
        :desc="info.CancelUser?.phone"></nut-cell>
    </nut-cell-group>
  </view>
</template>

<script setup lang="ts">
import Taro from '@tarojs/taro';
import {ref} from 'vue';

const info = ref<any>({});

Taro.useLoad(() => {
  info.value = Taro.getStorageSync('ver_order_info');
});
</script>

<style lang="scss">
page {
  --nut-cell-desc-color: #000;
}

.line {
  width: 100%;
  height: 1px;
  background-color: #f5f5f5;
  margin: 10px;
}

.header {
  background: linear-gradient(90deg, #2291f8 0, #1cd1dc);
  padding: 30px;
  color: #fff;
  font-size: 30px;
}

.user-info {
  background-color: #fff;
  width: 100%;
}

.good-info {
  margin-top: 20px;
  width: 100%;
  background-color: #fff;
  padding: 20px;

  .top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    image {
      width: 200px;
      height: 200px;
      border-radius: 10px;
    }

    .title {
      flex: 1;
      padding: 10px;
    }

    .price {
      text-align: right;
    }
  }

  .public-total {
    font-size: 28px;
    color: #282828;
    border-top: 1px solid #eee;
    height: 92px;
    line-height: 92px;
    text-align: right;
    padding: 0 30px;
    background-color: #fff;
  }

  .public-total .money {
    color: #ff4c3c;
  }
}

.card {
  box-sizing: border-box;
  margin: 15px auto;
  background-color: #fff;
  padding: 20px;
}

.center {
  .top {
    display: flex;
    justify-content: space-between;
    // align-items: flex-start;
    margin-bottom: 10px;

    image {
      width: 150px;
      height: 150px;
      border-radius: 10px;
    }

    .title {
      margin-left: 10px;
      display: -webkit-box;
      overflow: hidden;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      text-overflow: ellipsis;
      width: 350px;
    }

    .right {
      margin-left: 10px;
      font-size: 28px;
      text-align: right;
    }
  }
}

.center-box {
  display: flex;
  flex-direction: column;
  width: 100%;

  .top {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10rpx;

    image {
      width: 150px;
      height: 150px;
      border-radius: 10rpx;
      margin-right: 10px;
    }

    .title {
      margin-left: 10px;
      display: -webkit-box;
      overflow: hidden;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      text-overflow: ellipsis;
      width: 350px;
    }

    .right {
      margin-left: 10px;
      font-size: 28px;
      text-align: right;
    }
  }
}
</style>