You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
232 lines
7.4 KiB
232 lines
7.4 KiB
<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> |