hn-hlw-app/pages/cloud-service/order.vue

<template>
  <scroll-view v-if="order" scroll-y class="h-full bg-gray leading-normal break-all">
    <view class="py-12 px-15 flex items-center">
      <view class="text-lg text-dark font-semibold">患者订单概览</view>
      <view class="text-sm text-gray">（最近一次配药订单）</view>
    </view>
    <view class="mb-10 bg-white shadow-lg">
      <view class="flex px-15 py-12 border-b">
        <view class="mr-10 flex-shrink-0 text-base text-gray">订单编号</view>
        <view class="mr-10 w-0 flex-grow text-dark text-base">{{ order.orderNo }}</view>
        <view class="flex-shrink-0 text-base text-primary cursor-pointer" @click="copy(order.orderNo)">
          复制
        </view>
      </view>
      <view class="flex px-15 py-12 border-b">
        <view class="mr-10 flex-shrink-0 text-base text-gray">订单状态</view>
        <view v-if="order.statusText" class="text-white px-10 rounded-full" :class="order.statusClass">
          {{ order.statusText }}
        </view>
      </view>
      <view class="flex px-15 py-12 border-b">
        <view class="mr-10 flex-shrink-0 text-base text-gray">下单时间</view>
        <view class="text-dark text-base">{{ order.time }}</view>
      </view>
    </view>
    <view class="mb-10 bg-white shadow-lg">
      <view class="flex px-15 py-12 border-b">
        <view class="mr-10 flex-shrink-0 text-base text-gray">开方患者</view>
        <view class="mr-10 w-0 flex-grow text-dark text-base">
          {{ order.name }} {{ order.sex }} {{ order.age > 0 ? `${order.age}岁` : '' }}
        </view>
      </view>
      <view class="flex px-15 py-12 border-b">
        <view class="mr-10 flex-shrink-0 text-base text-gray">问诊医生</view>
        <view class="text-dark text-base">{{ order.doctorName }}</view>
      </view>
      <view class="flex px-15 py-12 border-b">
        <view class="mr-10 flex-shrink-0 text-base text-gray">收件信息</view>
        <view class="w-0 flex-grow">
          <view class="text-base">{{ order.receiveName }} {{ order.receivePhone }}</view>
          <view class="text-base">{{ address }}</view>
        </view>
      </view>
    </view>
    <view class="mb-10 bg-white shadow-lg">
      <view class="flex px-15 py-12 border-b text-lg text-dark font-semibold">
        配药清单
      </view>
      <view v-for="med in order.drugs" class="px-15 py-12 border-b">
        <view class="flex mb-5">
          <view class="w-0 flex-grow text-base text-dark">{{ med.drugName }}</view>
          <view class="flex-shrink-0 text-danger">¥{{ med.price }}</view>
        </view>
        <view class="flex">
          <view class="flex-grow w-0 text-base text-gray">规格：{{ med.spec }}</view>
          <view class="flex-shrink-0 text-base text-gray">x{{ med.quantity }}</view>
        </view>
      </view>
      <view class="flex items-center justify-end px-15 py-12 ">
        <view v-if="order.hasShippingFee" class="text-sm text-gray">
          （含互联网诊查费¥{{ countDetails.regFee }}、{{ order.shippingFee > 0 ? '运费¥' + countDetails.shippingFee : '免运费' }}）
        </view>
        <view v-else class="text-sm text-gray">（含互联网诊查费¥{{ countDetails.regFee }}）</view>
        <view class="flex-shrink-0 text-base text-dark">合计：</view>
        <view class="flex-shrink-0 text-base text-danger">¥{{ countDetails.totalFee }}</view>
      </view>
    </view>
    <view style="height: 160rpx;"></view>
  </scroll-view>
  <view v-else class="flex flex-col items-center justify-center">
    <empty-data text="暂无订单" />
  </view>
</template>
<script setup>
import { computed, ref } from 'vue';
import { onLoad } from "@dcloudio/uni-app";
import dayjs from 'dayjs';
import BigNumber from 'bignumber.js';
import { toast, loading, hideLoading } from '@/utils/widget';
import emptyData from "@/components/empty.vue";
import { getCloudServiceData } from '@/utils/ykf-api';

const order = ref(null)
const ciphertext = ref('');
const address = computed(() => {
  const region = order.value && Array.isArray(order.value.receiveRegion) ? order.value.receiveRegion.join('') : '';
  const address = order.value && order.value.receiveAddress ? order.value.receiveAddress : '';
  return `${region} ${address}`;
})
const countDetails = computed(() => {
  const drugFee = order.value && typeof order.value.drugFee === 'number' ? order.value.drugFee : undefined;
  const shippingFee = order.value && typeof order.value.shippingFee === 'number' ? order.value.shippingFee : undefined;
  const regFee = order.value && typeof order.value.regFee === 'number' ? order.value.regFee : undefined;
  const total = new BigNumber(drugFee || 0).plus(regFee || 0).plus(shippingFee || 0);
  const ybFee = new BigNumber(regFee || 0).plus(drugFee || 0).toNumber();
  return {
    drugFee: typeof drugFee === 'number' ? drugFee.toFixed(2) : '',
    regFee: typeof regFee === 'number' ? regFee.toFixed(2) : '',
    shippingFee: typeof shippingFee === 'number' ? shippingFee.toFixed(2) : '',
    totalFee: total.toFixed(2),
    ybFee: ybFee.toFixed(2),
  }
})

const statusSet = {
  shipped: { text: '已配送', classnames: 'bg-success text-white' },
  ybPaid: { text: '待支付运费', classnames: 'bg-primary text-white' },
  ybFeeRefunded: { text: '药诊费已退', classnames: 'bg-gray-500 text-white' },
  refunded: { text: '已退费', classnames: 'bg-gray-500 text-white' }
}

function copy(data) {
  uni.setClipboardData({
    data,
    success: () => {
      toast('复制成功')
    }
  })
}

async function getOrder() {
  loading('请求中')
  const res = await getCloudServiceData(ciphertext.value);
  hideLoading()
  if (res && res.order) {
    const status = statusSet[res.order.status] || {};
    order.value = {
      ...res.order,
      hasShippingFee: 'shippingFee' in res.order,
      statusText: status ? status.text : '',
      statusClass: status ? status.classnames : '',
      time: dayjs(res.order.createTime).format('YYYY-MM-DD HH:mm:ss')
    };
  }
}

onLoad(() => {
  // #ifdef H5
  const search = location.search;
  const params = new URLSearchParams(search);
  ciphertext.value = params.get('remark') || '';
  if (ciphertext.value) {
    getOrder()
  }
  // #endif
}) 
</script>
<style>
#app {
  --text-base: 14px;
  --text-sm: 12px;
  --text-xs: 10px;
  --text-lg: 16px;
  --text-xl: 18px;
}
</style>
<style scoped>
.h-full {
  height: 100%;
}

.cursor-pointer {
  cursor: pointer;
}

.mb-5 {
  margin-bottom: 10rpx;
}

.bg-gray-500 {
  background: #999;
}
</style>