302 lines
6.3 KiB
Vue
302 lines
6.3 KiB
Vue
<template>
|
||
<view class="order_item">
|
||
<view class="expresser">
|
||
<view class="header">#<text>38</text></view>
|
||
<view class="body">
|
||
<view class="item info">
|
||
<view class="name"> 谭金宇 </view>
|
||
<view class="btn_call"> 催快递 </view>
|
||
</view>
|
||
<view class="item time">立即送达/07-29 20:21前送达</view>
|
||
</view>
|
||
<view class="footer">
|
||
<view class="status">已接单</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="user">
|
||
<view class="header">
|
||
<view class="info">
|
||
<view class="name">谢能坤</view>
|
||
<view class="mobile">13128997057</view>
|
||
</view>
|
||
<view class="box">
|
||
<view class="btn_call">联系顾客</view>
|
||
</view>
|
||
</view>
|
||
<view class="body">
|
||
<view class="info">
|
||
广西壮族自治区贵港市桂平市中山南路中山医院斜对面烧鹅大厦 8楼801
|
||
</view>
|
||
<view class="box">
|
||
<view class="btn_map"></view>
|
||
</view>
|
||
</view>
|
||
<view class="footer">
|
||
<view class="info"><text>备注:</text>不需要筷子，小哥请送到驿站</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="goods">
|
||
<view class="body">
|
||
<view class="info">
|
||
<image src="111" mode="aspectFit" class="img" />
|
||
<image src="111" mode="aspectFit" class="img" />
|
||
<image src="111" mode="aspectFit" class="img" />
|
||
<view class="total">共10件商品</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="footer">
|
||
<view class="text">合计</view>
|
||
<view class="prize_type">¥</view>
|
||
<view class="prize_num">289.45</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="tool">
|
||
<view class="header"> 更多订单信息<u-icon name="arrow-down" color="#666" class="icon"></u-icon> </view>
|
||
<view class="body">
|
||
<view class="btn btn_cancel">取消订单</view>
|
||
<view class="btn btn_refund">退款</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@import "@/styles/variables.scss";
|
||
|
||
.order_item {
|
||
padding: 24rpx;
|
||
border-radius: 10rpx;
|
||
background: #fff;
|
||
font-size: 24rpx;
|
||
color: #222;
|
||
|
||
.expresser {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 24rpx;
|
||
|
||
.header {
|
||
text {
|
||
font-size: 48rpx;
|
||
}
|
||
}
|
||
.body {
|
||
flex: 1;
|
||
padding-left: 24rpx;
|
||
position: relative;
|
||
|
||
&::after{
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
height: 100%;
|
||
display: block;
|
||
content: " ";
|
||
width: 1px;
|
||
background-image: linear-gradient(to bottom, #000 80%, transparent 20%);
|
||
background-size: 100% 16rpx;
|
||
opacity: 0.2;
|
||
}
|
||
|
||
.item {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
&.info{
|
||
margin-bottom: 8rpx;
|
||
}
|
||
.time {
|
||
color: rgba(34, 34, 34, 0.9);
|
||
}
|
||
.name {
|
||
font-weight: bold;
|
||
display: flex;
|
||
align-items: center;
|
||
&::before {
|
||
display: block;
|
||
content: " ";
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
border: 1px solid rgba(0, 0, 0, 0.2);
|
||
border-radius: 6rpx;
|
||
margin-right: 12rpx;
|
||
background: url("@/static/icon_mt.png") no-repeat 50% 50%;
|
||
background-size: 28rpx 28rpx;
|
||
}
|
||
}
|
||
.btn_call {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-left: 24rpx;
|
||
&::before {
|
||
display: block;
|
||
content: " ";
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
background: url("@/static/icon_phone.png") no-repeat;
|
||
background-size: 100%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.footer{
|
||
width: 228rpx;
|
||
.status{
|
||
text-align: center;
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
}
|
||
|
||
.user {
|
||
margin-bottom: 24rpx;
|
||
.header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 12rpx;
|
||
.info {
|
||
display: flex;
|
||
align-items: center;
|
||
.name {
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
.btn_call {
|
||
display: flex;
|
||
align-items: center;
|
||
&::before {
|
||
display: block;
|
||
content: " ";
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
background: url("@/static/icon_phone.png") no-repeat;
|
||
background-size: 100%;
|
||
}
|
||
}
|
||
}
|
||
|
||
.body {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
.btn_map {
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
border: 1px solid rgba(0, 0, 0, 0.2);
|
||
border-radius: 6rpx;
|
||
background: url("@/static/icon_map.png") no-repeat 50% 50%;
|
||
background-size: 28rpx 28rpx;
|
||
}
|
||
.box{
|
||
padding-left: 40rpx;
|
||
}
|
||
}
|
||
|
||
.footer{
|
||
.info{
|
||
margin: 16rpx 0 24rpx;
|
||
background: rgba(254, 247, 234, 0.5);
|
||
padding: 12rpx 24rpx;
|
||
border-radius: 8rpx;
|
||
text{
|
||
color: #FF801F;
|
||
display: inline-block;
|
||
margin-right: 12rpx;
|
||
}
|
||
}
|
||
|
||
&::after{
|
||
display: block;
|
||
content: " ";
|
||
height: 1px;
|
||
background-image: linear-gradient(to right, #000 50%, transparent 20%);
|
||
background-size: 16rpx 100%;
|
||
opacity: 0.2;
|
||
}
|
||
}
|
||
}
|
||
|
||
.goods {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 24rpx;
|
||
.body {
|
||
display: flex;
|
||
align-items: center;
|
||
.info {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.img {
|
||
width: 96rpx;
|
||
height: 96rpx;
|
||
margin-right: 12rpx;
|
||
border-radius: 10rpx;
|
||
background: #666;
|
||
}
|
||
}
|
||
.footer {
|
||
display: flex;
|
||
align-items: baseline;
|
||
line-height: 36rpx;
|
||
.text{
|
||
color: #666;
|
||
}
|
||
.prize_type{
|
||
margin-left: 14rpx;
|
||
}
|
||
.prize_num {
|
||
font-size: 36rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.tool {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
.header{
|
||
color: #666;
|
||
display: flex;
|
||
align-items: center;
|
||
.icon{
|
||
margin-left: 8rpx;
|
||
}
|
||
}
|
||
.body {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
.btn{
|
||
width: 132rpx;
|
||
height: 48rpx;
|
||
line-height: 48rpx;
|
||
text-align: center;
|
||
border: 1px solid #666;
|
||
border-radius: 8rpx;
|
||
margin-left: 24rpx;
|
||
}
|
||
.btn_refund{
|
||
border-color: $base-color;
|
||
color: $base-color;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
</style>
|