city-gather/src/subPack-xsb/my/orderDetaile/index.vue

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

definePage({
  name: 'xsb-orderDetaile',
  style: {
    navigationBarTitleText: '订单详情',
  },
})
const collapse = ref(false)
function handleCollapse() {
  collapse.value = !collapse.value
}
</script>

<template>
  <view class="page-xsb">
    <view class="px24rpx pt20rpx">
      <view class="text-36rpx font-semibold">
        <view>
          <view>
            请在 <text class="text-#FF4D3A">
              14分59秒
            </text> 内支付
          </view>
          <view class="mt20rpx text-28rpx text-#AAAAAA">
            现在支付：预计10:40-10:55送达
          </view>
          <view class="mt20rpx flex items-center">
            <view class="info-btn mr20rpx w226rpx">
              <wd-button type="info" block>
                取消订单1
              </wd-button>
            </view>
            <view class="flex-1">
              <wd-button block>
                立即支付￥119
              </wd-button>
            </view>
          </view>
        </view>
        <view class="flex items-center" @click="handleCollapse">
          <view class="mr10rpx">
            待商家接单
          </view>
          <view :class="[collapse ? 'rotate-90' : '']">
            <wd-icon name="arrow-right" size="22px" />
          </view>
        </view>
      </view>
    </view>
    <view class="mt20rpx">
      <wd-card>
        <view class="grid grid-cols-5 py24rpx text-28rpx text-#222">
          <view class="flex flex-col items-center">
            <image
              :src="`${StaticUrl}/orderDetaile-del.png`"
              class="h40rpx w40rpx"
            />
            <view class="mt20rpx">
              删除订单
            </view>
          </view>
          <view class="flex flex-col items-center">
            <image
              :src="`${StaticUrl}/orderDetaile-wx.png`"
              class="h40rpx w40rpx"
            />
            <view class="mt20rpx">
              联系商家
            </view>
          </view>
          <view class="flex flex-col items-center" @click="router.push({ name: 'xsb-afterSales' })">
            <image
              :src="`${StaticUrl}/orderDetaile-shou.png`"
              class="h40rpx w40rpx"
            />
            <view class="mt20rpx">
              申请售后
            </view>
          </view>
          <view class="flex flex-col items-center">
            <image
              :src="`${StaticUrl}/orderDetaile-pj.png`"
              class="h40rpx w40rpx"
            />
            <view class="mt20rpx">
              评价晒单
            </view>
          </view>
          <view class="flex flex-col items-center">
            <image
              :src="`${StaticUrl}/orderDetaile-bao.png`"
              class="h40rpx w40rpx"
            />
            <view class="mt20rpx">
              再次购买
            </view>
          </view>
        </view>
      </wd-card>
    </view>
    <view class="mt20rpx">
      <wd-card>
        <view class="py28rpx">
          <view class="flex items-center">
            <image
              :src="`${StaticUrl}/orderDetaile-user.png`"
              class="mr20rpx h40rpx w40rpx"
            />
            <view class="text-32rpx text-#222 font-semibold">
              杨先生 152****4972
            </view>
          </view>
          <view class="mt20rpx text-28rpx text-#AAAAAA">
            贵州省贵阳市观山湖区富力中心A7座
          </view>
        </view>
      </wd-card>
    </view>
    <view class="mt20rpx">
      <wd-card>
        <template #title>
          <view class="flex items-center">
            <image
              :src="`${StaticUrl}/order-icon.png`"
              class="h36rpx w36rpx"
            />
            <view class="ml20rpx text-32rpx font-semibold">
              中数超市（富力中心店）
            </view>
          </view>
          <view class="mt24rpx h2rpx w-full bg-#F0F0F0" />
        </template>
        <CollapsePanel :line-height="150">
          <view v-for="item in 5" :key="item" class="mb20rpx w-full flex items-center">
            <view class="mr20rpx w120rpx flex-shrink-0">
              <image
                :src="`${StaticUrl}/shu.png`"
                class="h120rpx w120rpx"
              />
            </view>
            <view class="flex-1">
              <view class="w-full flex items-center justify-between font-semibold">
                <view class="text-28rpx">
                  赶海季生鲜大闸蟹
                </view>
                <view class="text-32rpx text-#FF4D3A">
                  ￥103.95
                </view>
              </view>
              <view class="text-24rpx text-#AAAAAA">
                规格：5kg，盒
              </view>
              <view class="text-24rpx text-#AAAAAA">
                ×1
              </view>
            </view>
          </view>
        </CollapsePanel>

        <view class="mt24rpx h2rpx w-full bg-#F0F0F0" />
        <view class="mt24rpx flex items-center justify-between">
          <view class="text-28rpx">
            商品金额
          </view>
          <view class="text-#FF4A39 font-semibold">
            ￥54.00
          </view>
        </view>
        <view class="mt24rpx flex items-center justify-between">
          <view class="text-28rpx">
            配送费（即时配送）
          </view>
          <view class="text-#FF4A39 font-semibold">
            ￥54.00
          </view>
        </view>
        <view class="mt24rpx flex items-center justify-between">
          <view class="text-28rpx">
            积分（1400）
          </view>
          <view class="text-#FF4A39 font-semibold">
            ￥54.00
          </view>
        </view>
        <view class="mt24rpx h2rpx w-full bg-#F0F0F0" />
        <template #footer>
          <view class="flex items-center justify-end">
            <view class="text-28rpx">
              总计233.5 共减2.5
            </view>
            <view class="ml20rpx text-28rpx text-#FF4D3A font-semibold">
              需付款￥54.00
            </view>
          </view>
        </template>
      </wd-card>
    </view>
    <view class="mt20rpx">
      <wd-card title="订单信息">
        <view class="pb20rpx">
          <view class="mb28rpx flex items-center justify-between">
            <view class="text-28rpx text-#AAAAAA">
              订单编号
            </view>
            <view class="flex items-center">
              <text class="text-#222">
                1867402054587256856
              </text>
              <view class="ml10rpx">
                <wd-icon name="file-copy" size="22px" />
              </view>
            </view>
          </view>
          <view class="mb28rpx flex items-center justify-between">
            <view class="text-28rpx text-#AAAAAA">
              支付方式
            </view>
            <view class="text-#222">
              微信支付
            </view>
          </view>
          <view class="mb28rpx flex items-center justify-between">
            <view class="text-28rpx text-#AAAAAA">
              下单时间
            </view>
            <view class="text-#222">
              2024-12-13 11：12：30
            </view>
          </view>
          <view class="mb28rpx flex items-center justify-between">
            <view class="text-28rpx text-#AAAAAA">
              备注信息
            </view>
            <view class="text-#222">
              无
            </view>
          </view>
        </view>
      </wd-card>
    </view>
    <view class="h30rpx" />
  </view>
</template>

<style scoped lang="scss">
.page-xsb {
  :deep(){
    .info-btn .wd-button{
      background: #fff !important;
      color: #aaa !important;
    }
  }
}
</style>