city-gather/src/subPack-videoRights/videoRightsOrderInfo/videoRightsOrderInfo.vue

<script setup lang="ts">
import StatusDisplay from '../components/StatusDisplay.vue'
import { StaticUrl } from '@/config'
import router from '@/router'

definePage({
  name: 'video-rights-order-info',
  islogin: true,
  style: {
    navigationBarTitleText: '订单确认',
  },
})

const orderNo = ref('')
onLoad((options: any) => {
  orderNo.value = options.orderNo
  console.log(options, '页面数据')
})
onMounted(() => {
  getOrderDetail()
})

const videoRightOrderDetail = ref<Api.VirtualOrderDetailVo>()
async function getOrderDetail() {
  const res = await Apis.videoRight.orderDetail({ data: { orderNumber: orderNo.value } })
  videoRightOrderDetail.value = res.data
}
</script>

<template>
  <view class="video-rights-order-info-page">
    <view class="box-border px24rpx">
      <view class="h-22rpx" />
      <StatusDisplay
        v-if="videoRightOrderDetail?.rechargeStatus"
        :status="videoRightOrderDetail.rechargeStatus"
        :static-url="StaticUrl"
      />
      <view class="mt-20rpx rounded-16rpx bg-#FFF p-24rpx">
        <view class="flex items-center gap-20rpx">
          <view class="h-160rpx w-160rpx">
            <image class="h-160rpx w-160rpx" :src="`${StaticUrl}/list-page-img.png`" />
          </view>
          <view>
            <view class="text-32rpx font-bold">
              {{ videoRightOrderDetail?.productName }}
            </view>
            <view class="mt-20rpx text-22rpx">
              ×{{ videoRightOrderDetail?.quantity }}
            </view>
          </view>
        </view>
        <view class="mt-26rpx h-2rpx w-full bg-#F0F0F0" />
        <view class="mt-24rpx flex items-center justify-between text-28rpx">
          <view>商品总价</view>
          <view>￥{{ videoRightOrderDetail?.totalPrice }}</view>
        </view>
        <view class="mt-24rpx flex items-center justify-between text-28rpx">
          <view>已支付</view>
          <view class="text-#FF4A39">
            ￥{{ videoRightOrderDetail?.paidAmount }}
          </view>
        </view>
        <view class="mt-24rpx flex items-center justify-between text-28rpx">
          <view>积分抵扣</view>
          <view class="text-#FF4A39">
            -{{ videoRightOrderDetail?.offsetPoints }}
          </view>
        </view>
        <view class="mt-26rpx h-2rpx w-full bg-#F0F0F0" />
        <view class="mt-24rpx text-22rpx">
          充值账号:{{ videoRightOrderDetail?.rechargeAccount }}
        </view>
      </view>
      <view class="mt-20rpx rounded-16rpx bg-#FFF p-24rpx">
        <view class="flex items-center justify-between">
          <view class="text-28rpx text-#AAA">
            订单编号
          </view>
          <view class="text-28rpx font-bold">
            {{ videoRightOrderDetail?.orderNumber }}
          </view>
        </view>
        <view class="mt-28rpx flex items-center justify-between">
          <view class="text-28rpx text-#AAA">
            订单时间
          </view>
          <view class="text-28rpx font-bold">
            {{ videoRightOrderDetail?.createTime }}
          </view>
        </view>
        <view class="mt-28rpx flex items-center justify-between">
          <view class="text-28rpx text-#AAA">
            支付方式
          </view>
          <view class="text-28rpx font-bold">
            {{ videoRightOrderDetail?.payType }}
          </view>
        </view>
      </view>
    </view>
    <view class="fixed bottom-0 h-174rpx w-full border-[1rpx_solid_#EEEEEE] bg-#FFF px-24rpx">
      <wd-button custom-class="w-702rpx mt-10rpx" block size="large" @click="router.back()">
        返回
      </wd-button>
    </view>
  </view>
</template>

<style lang="scss" scoped></style>