153 lines
3.2 KiB
Vue
153 lines
3.2 KiB
Vue
<script setup>
|
||
//
|
||
import {
|
||
ref,
|
||
reactive,
|
||
computed
|
||
} from 'vue';
|
||
// 产品列表
|
||
import productList from '@/components/shop/productList/productList.vue';
|
||
|
||
// 物流状态
|
||
const flow = reactive([{
|
||
content: '您的宝贝正在运输中',
|
||
},
|
||
{
|
||
content: '您的快递正在由普通快递运送，预计三日后到达',
|
||
},
|
||
{
|
||
content: '您的宝贝已被普通快递捡收',
|
||
},
|
||
{
|
||
content: '您的宝贝已出仓',
|
||
},
|
||
])
|
||
// 查看更多订单信息
|
||
const showMore = ref(false)
|
||
|
||
// 物流状态
|
||
const formatFlow = computed(() => {
|
||
let result = [...flow]
|
||
if (!showMore.value) result.length = Math.min(flow.length, 2)
|
||
return result
|
||
})
|
||
</script>
|
||
|
||
<template>
|
||
<view class="app">
|
||
<!-- 地址详情 -->
|
||
<view class="address rows 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>
|
||
|
||
<!-- 快递公司 -->
|
||
<view class="container rows ptb20 f28">
|
||
<image class="wh70" src="/static/shop-logistics.png" mode="aspectFit" />
|
||
<view class="value f1 mlr20">快递公司：普通快递</view>
|
||
<view class="btn sm closeHollow plr20">复制</view>
|
||
</view>
|
||
|
||
<!-- 订单编号 -->
|
||
<view class="container rows ptb20 f28">
|
||
<image class="wh70" src="/static/shop-document.png" mode="aspectFit" />
|
||
<view class="value f1 mlr20">订单编号：kd11111111111</view>
|
||
<view class="btn sm closeHollow plr20">复制</view>
|
||
</view>
|
||
|
||
<!-- 订单流程 -->
|
||
<view class="container">
|
||
<view class="flow mtb30">
|
||
<view class="item df" v-for="(item,index) in formatFlow" :key="index">
|
||
<view class="rank ver">
|
||
<view class="line first"></view>
|
||
<view class="circle cir"></view>
|
||
<view class="line f1"></view>
|
||
</view>
|
||
<view class="content f1 ml20 pb20">
|
||
<view class="f30">{{item.content}}</view>
|
||
<view class="mt10 f28">2024-03-05 13:24:00</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="mtb30 fmid c999" @click="showMore = !showMore">
|
||
<template v-if="!showMore">
|
||
<text>查看更多订单信息</text>
|
||
<uni-icons type="bottom" color="" />
|
||
</template>
|
||
<template v-else>
|
||
<text>收起</text>
|
||
<uni-icons type="top" color="" />
|
||
</template>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 推荐产品列表 -->
|
||
<view class="productList mtb30 mlr30">
|
||
<productList choicenessTitle="true" />
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<style lang="scss" scoped>
|
||
//
|
||
.container {
|
||
overflow: hidden;
|
||
margin: 20rpx 0;
|
||
padding-left: 20rpx;
|
||
padding-right: 20rpx;
|
||
color: #333;
|
||
background-color: #fff;
|
||
}
|
||
|
||
// 流程
|
||
.flow {
|
||
.item {
|
||
color: #999;
|
||
|
||
&:nth-child(1) {
|
||
color: #37B111;
|
||
|
||
.circle {
|
||
background-color: #37B111;
|
||
}
|
||
|
||
.line.first {
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
//
|
||
&:nth-last-child(1) {
|
||
.line:nth-last-child(1) {
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
//
|
||
.circle {
|
||
width: 20rpx;
|
||
height: 20rpx;
|
||
background-color: #ccc;
|
||
}
|
||
|
||
//
|
||
.line {
|
||
border-left: 2rpx solid #ccc;
|
||
|
||
//
|
||
&.first {
|
||
height: 15rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |