150 lines
4.4 KiB
Vue
150 lines
4.4 KiB
Vue
<script setup>
|
||
// 订单详情
|
||
import {
|
||
ref
|
||
} from 'vue';
|
||
|
||
//
|
||
import productList from '@/components/shop/productList/productList'
|
||
// 物流信息
|
||
import logistics from '@/components/shop/order/logistics';
|
||
|
||
// 订单详情
|
||
const detail = ref({
|
||
status: 1,
|
||
statusText: '待发货',
|
||
})
|
||
</script>
|
||
|
||
<template>
|
||
<view class="app">
|
||
<!-- 物流状态 -->
|
||
<view class="detail">
|
||
<logistics />
|
||
</view>
|
||
|
||
<!-- 地址详情 -->
|
||
<view class="address rows mtb20 ptb15 plr30 bfff">
|
||
<image class="wh30 oh fs0" src="/static/address.png" mode="aspectFill" />
|
||
<!-- -->
|
||
<view class="f1 mlr20">
|
||
<view class="f30">山东省济南市槐荫区绿地新城商务大厦</view>
|
||
<view class="mt10 c999 f26">
|
||
<text>海棠的秋</text>
|
||
<text class="ml10">15666006592</text>
|
||
</view>
|
||
</view>
|
||
<!-- 修改地址 -->
|
||
<view class="btn ti warmHollow plr10 bs0">修改地址</view>
|
||
</view>
|
||
|
||
<!-- 商品信息 -->
|
||
<view class="product oh plr30 bfff br20">
|
||
<view class="header line rows ptb20 f28">
|
||
<!-- 店铺 -->
|
||
<view class="store df aic thd f1">
|
||
<image class="wh50 br10"
|
||
src="https://img13.360buyimg.com/n1/jfs/t1/117234/35/34799/82687/6449f2b4Fd6e2eef9/a754c5e178c9e9be.jpg.avif"
|
||
mode="aspectFill" />
|
||
<view class="name ml10 c333">家纺专营店</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 商品信息 -->
|
||
<view class="product line df ptb20">
|
||
<view class="poster wh160">
|
||
<image class="wh160 br10"
|
||
src="https://img13.360buyimg.com/n1/jfs/t1/117234/35/34799/82687/6449f2b4Fd6e2eef9/a754c5e178c9e9be.jpg.avif"
|
||
mode="aspectFill" />
|
||
</view>
|
||
|
||
<!-- 产品名称 和 购买的规格 -->
|
||
<view class="info mlr20 f1">
|
||
<view class="name c333 f28">靠枕 纯棉靠枕 车载居家 纯棉100% 卡通靠枕 人体工学</view>
|
||
<view class="spec mt10 c999 f26">款式：普通款 小熊</view>
|
||
</view>
|
||
|
||
<!-- 单价 数量 -->
|
||
<view class="tar">
|
||
<view class="price c666">
|
||
<text class="f20">￥</text>
|
||
<text class="f26">89</text>
|
||
</view>
|
||
<view class="number f24 c999">x 1</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 订单信息 -->
|
||
<view class="order mt30 f26 c999">
|
||
<view class="line mtb20 rows">
|
||
<text>订单编号：251547812138</text>
|
||
<view class="btn ti closeHollow plr20">复制</view>
|
||
</view>
|
||
<view class="line mtb20">
|
||
<text>支付方式：微信支付</text>
|
||
</view>
|
||
<view class="line mtb20">
|
||
<text>物流公司：普通快递</text>
|
||
</view>
|
||
<view class="line mtb20 rows">
|
||
<view class="f1">快递单号：251547812138</view>
|
||
<view class="btn ti closeHollow plr20">复制</view>
|
||
</view>
|
||
<view class="line mtb20">
|
||
<text>下单时间：2024-12-10 12:00</text>
|
||
</view>
|
||
<view class="line mtb20">
|
||
<text>发货时间：2024-12-10 18:00</text>
|
||
</view>
|
||
<view class="line mtb20">
|
||
<text>收货时间：2024-12-15 17:00</text>
|
||
</view>
|
||
<view class="mtb30 fmid">
|
||
<template v-if="0">
|
||
<text>查看更多订单信息</text>
|
||
<uni-icons type="bottom" color="" />
|
||
</template>
|
||
<template v-else>
|
||
<text>收起</text>
|
||
<uni-icons type="top" color="" />
|
||
</template>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 商品列表 -->
|
||
<view class="productList mtb30 mlr20">
|
||
<productList choicenessTitle="true" />
|
||
</view>
|
||
|
||
<view class="fill"></view>
|
||
<view class="footer df jcr plr30 bfff shadow">
|
||
<template v-if="detail.status == 1">
|
||
<view class="btn bar closeHollow plr30">取消订单</view>
|
||
<view class="btn bar warmHollow plr30">继续付款</view>
|
||
</template>
|
||
<template v-if="detail.status == 2">
|
||
<view class="btn bar closeHollow plr30">申请退款</view>
|
||
<view class="btn bar warmHollow plr30">催发货</view>
|
||
</template>
|
||
<template v-if="detail.status == 3">
|
||
<view class="btn bar closeHollow plr30">申请退款</view>
|
||
<view class="btn bar closeHollow plr30">查看物流</view>
|
||
<view class="btn bar warmHollow plr30">确认收货</view>
|
||
</template>
|
||
<template v-if="detail.status == 4">
|
||
<view class="btn bar closeHollow plr30">申请退款</view>
|
||
<view class="btn bar warmHollow plr30">评价</view>
|
||
</template>
|
||
<template v-if="detail.status == 6">
|
||
<view class="btn bar closeHollow plr30">取消售后</view>
|
||
<view class="btn bar closeHollow plr30">钱款去向</view>
|
||
<view class="btn bar warmHollow plr30">平台介入</view>
|
||
</template>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<style>
|
||
|
||
</style>7 |