22 changed files with 584 additions and 111 deletions
@ -0,0 +1,112 @@
|
||||
.wallpaper-container{ |
||||
background:{ |
||||
color:#F5F5F6; |
||||
} |
||||
height:100vh; |
||||
width:100%; |
||||
position: fixed; |
||||
top:0; |
||||
left:0; |
||||
z-index: -1; |
||||
} |
||||
.wallpaper-body{ |
||||
padding:16rpx 26rpx; |
||||
.order-item-info-container{ |
||||
margin-bottom:40rpx; |
||||
padding:40rpx; |
||||
background:{ |
||||
color:#fff; |
||||
} |
||||
border-radius: 10rpx; |
||||
.icon-label{ |
||||
&.address{ |
||||
margin-right:72rpx; |
||||
} |
||||
} |
||||
.title{ |
||||
margin-bottom:12rpx; |
||||
} |
||||
.title-container{ |
||||
height:100%; |
||||
align-content: space-between; |
||||
} |
||||
.item-info{ |
||||
justify-content: space-between; |
||||
.item-title{ |
||||
max-width:300rpx; |
||||
&.info-price{ |
||||
justify-content: flex-end; |
||||
} |
||||
.price-number{ |
||||
align-content: flex-end; |
||||
.label{ |
||||
display: flex; |
||||
align-content: flex-end; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.cell{ |
||||
padding-top:20rpx; |
||||
padding-bottom:20rpx; |
||||
.cell-item{ |
||||
margin-bottom:24rpx; |
||||
justify-content: space-between; |
||||
} |
||||
&.price-info{ |
||||
border-bottom:1px solid #d6d7d9; |
||||
} |
||||
|
||||
} |
||||
} |
||||
.tip{ |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
.left{ |
||||
.import-tip{ |
||||
.icon{ |
||||
margin-right:10rpx; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.foot-phone{ |
||||
padding-top:60rpx; |
||||
justify-content: center; |
||||
.foot-phone-container{ |
||||
.label,.phone{ |
||||
margin-bottom:10rpx; |
||||
} |
||||
} |
||||
} |
||||
.phone-button{ |
||||
display: flex; |
||||
justify-content: center; |
||||
width:auto; |
||||
.phone{ |
||||
text-align: center; |
||||
flex: 0 0 64rpx; |
||||
border-radius: 40rpx; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
text-align: center; |
||||
//width:56rpx; |
||||
height:64rpx; |
||||
//border-radius:50%; |
||||
background:{ |
||||
color:#FF9545; |
||||
} |
||||
} |
||||
} |
||||
::v-deep .u-cell__body{ |
||||
padding:26rpx 0 !important; |
||||
width:100%; |
||||
} |
||||
::v-deep .u-cell__left-icon-wrap{ |
||||
margin-bottom:auto; |
||||
} |
||||
::v-deep .u-cell__body__content{ |
||||
align-items: stretch !important; |
||||
} |
||||
@ -0,0 +1,232 @@
|
||||
<template> |
||||
<view class="body-background"></view> |
||||
<u-navbar |
||||
:title="title" |
||||
:auto-back="true" |
||||
left-icon-size="40rpx" |
||||
:safe-area-inset-top="true" |
||||
:placeholder="true" |
||||
bgColor="#ffffff" |
||||
></u-navbar> |
||||
<view class="wallpaper-container"></view> |
||||
<view class="wallpaper-body"> |
||||
<view class="order-item-info-container"> |
||||
<u-cell-group :border="false"> |
||||
<view class="info-label"> |
||||
<u-text text="配送信息" color="#FF9545" size="32"></u-text> |
||||
</view> |
||||
<u-cell border custom-style="align-items:flex-start;margin-bottom:20rpx;"> |
||||
<template #icon> |
||||
<view class="icon-label row col address"> |
||||
<u-text text="收货地址" color="#020B18" size="32"></u-text> |
||||
</view> |
||||
</template> |
||||
<template #title> |
||||
<view class="title"> |
||||
<u-text :text="detail.take_address" color="#020B18" size="28"></u-text> |
||||
</view> |
||||
</template> |
||||
<template #label> |
||||
<view class="label row"> |
||||
<view class="name" style="margin-right:36rpx;"> |
||||
<u-text :text="detail.take_name" color="#666666" size="28"></u-text> |
||||
</view> |
||||
<view class="phone"> |
||||
<u-text :text="detail.take_phone" color="#666666" size="28"></u-text> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
</u-cell> |
||||
<view class="info-label"> |
||||
<u-text text="商品信息" color="#FF9545" size="32"></u-text> |
||||
</view> |
||||
<u-cell border custom-style="align-items:flex-start;"> |
||||
<template #icon> |
||||
<view class="icon-label row col item-info-icon" style="margin-right:12rpx;"> |
||||
<u-image :src="detail.goods_cover" width="176" height="176" mode="widthFix" radius="24"></u-image> |
||||
</view> |
||||
</template> |
||||
<template #title> |
||||
<view class="title-container row"> |
||||
<view class="item-info row"> |
||||
<view class="item-title"> |
||||
<u-text :text="detail.goods_name" color="#020B18" size="28"></u-text> |
||||
</view> |
||||
<view class="item-title info-price"> |
||||
<view class="price-number row"> |
||||
<view class="price"> |
||||
<u-text :text="detail.coin_number" color="#FF9545" size="32" bold></u-text> |
||||
</view> |
||||
<view class="label"> |
||||
<u-text text="币" color="#020B18" size="26"></u-text> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="label-group row"> |
||||
<view class="label row"> |
||||
<view class="content"> |
||||
<u-text text="规格:" color="#666666" size="26"></u-text> |
||||
</view> |
||||
<view class="value"> |
||||
<u-text :text="detail.goods_spec" color="#666666" size="26"></u-text> |
||||
</view> |
||||
</view> |
||||
<view class="label row"> |
||||
<view class="content"> |
||||
<u-text text="数量:" color="#666666" size="26"></u-text> |
||||
</view> |
||||
<view class="value"> |
||||
<u-text :text="detail.goods_number+'件'" color="#666666" size="26"></u-text> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
</u-cell> |
||||
<view class="cell price-info"> |
||||
<!-- <view class="cell-item row">--> |
||||
<!-- <view class="label">--> |
||||
<!-- <u-text text="运费" color="#020B18" size="30"></u-text>--> |
||||
<!-- </view>--> |
||||
<!-- <view class="value">--> |
||||
<!-- <u-text text="0" mode="price" color="#020B18" size="32"></u-text>--> |
||||
<!-- </view>--> |
||||
<!-- </view>--> |
||||
<view class="cell-item row"> |
||||
<view class="label"> |
||||
<u-text text="支付方式" color="#020B18" size="30"></u-text> |
||||
</view> |
||||
<view class="value"> |
||||
<u-text text="全暖新币兑换" color="#020B18" size="32"></u-text> |
||||
</view> |
||||
</view> |
||||
<view class="cell-item row"> |
||||
<view class="label"> |
||||
<u-text text="实付暖新币" color="#020B18" size="30"></u-text> |
||||
</view> |
||||
<view class="value"> |
||||
<u-text :text="detail.coin_number+'币'" color="#FF9545" size="32"></u-text> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="cell pay-info"> |
||||
<view class="cell-item row"> |
||||
<view class="label"> |
||||
<u-text text="订单编号" color="#020B18" size="30"></u-text> |
||||
</view> |
||||
<view class="value" @click="copyContent(detail.no)"> |
||||
<u-text :text="detail.no" color="#999999" size="30"></u-text> |
||||
</view> |
||||
</view> |
||||
<view class="cell-item row"> |
||||
<view class="label"> |
||||
<u-text text="创建时间" color="#020B18" size="30"></u-text> |
||||
</view> |
||||
<view class="value"> |
||||
<u-text :text="detail.create_time" color="#999999" size="30"></u-text> |
||||
</view> |
||||
</view> |
||||
<view class="cell-item row"> |
||||
<view class="label"> |
||||
<u-text text="兑换时间" color="#020B18" size="30"></u-text> |
||||
</view> |
||||
<view class="value"> |
||||
<u-text :text="detail.create_time" color="#999999" size="30"></u-text> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</u-cell-group> |
||||
</view> |
||||
<view class="tip row"> |
||||
<view class="left"> |
||||
<view class="import-tip row"> |
||||
<view class="icon row col"> |
||||
<u-icon name="info-circle" color="#FF9545" size="32"></u-icon> |
||||
</view> |
||||
<view class="title"> |
||||
<u-text text="重要提示" color="#666666" size="28"></u-text> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="right"> |
||||
<u-text text="退换货请联系客服" color="#666666" size="28"></u-text> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="foot-phone row"> |
||||
<view class="foot-phone-container"> |
||||
<view class="label"> |
||||
<u-text text="售后联系电话" color="#666666" size="28" align="center"></u-text> |
||||
</view> |
||||
<view class="phone"> |
||||
<u-text :text="detail.tel" color="#666666" size="28" align="center"></u-text> |
||||
</view> |
||||
<view class="phone-button" @click="callPhone(detail.tel)"> |
||||
<view class="button phone col"> |
||||
<u-icon name="phone-fill" size="40" color="#fff"></u-icon> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import {orderItemInfo} from "@/api/user"; |
||||
|
||||
export default { |
||||
data() { |
||||
return { |
||||
title: '订单详情', |
||||
detail: { |
||||
goods_name:'', |
||||
no:'', |
||||
goods_cover:'', |
||||
goods_spec:'', |
||||
goods_number:'', |
||||
coin_number:'', |
||||
take_name:'', |
||||
take_phone:'', |
||||
take_address:'', |
||||
create_time:'', |
||||
send_time:'', |
||||
tel:'', |
||||
}, |
||||
} |
||||
}, |
||||
onLoad(option) { |
||||
this.getDetail(option.id) |
||||
}, |
||||
methods: { |
||||
navTo(url) { |
||||
uni.navigateTo({ |
||||
url: url |
||||
}) |
||||
}, |
||||
getDetail(id) { |
||||
orderItemInfo({ |
||||
goods_order_id : id |
||||
}).then(res => { |
||||
this.detail = res.data; |
||||
}); |
||||
}, |
||||
callPhone(phone){ |
||||
uni.makePhoneCall({ |
||||
phoneNumber: phone?.toString() |
||||
}); |
||||
}, |
||||
copyContent(content){ |
||||
uni.setClipboardData({ |
||||
data: content, |
||||
success: function () { |
||||
//调用方法成功 |
||||
} |
||||
}) |
||||
}, |
||||
}, |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss"> |
||||
@import './components/info.scss'; |
||||
</style> |
||||
Loading…
Reference in new issue