310 lines
8.3 KiB
Vue
310 lines
8.3 KiB
Vue
<template>
|
|
<!-- 订单详情 页面 -->
|
|
<view class="content bg_F2F2F2">
|
|
<PublicTop page_title='订单详情'></PublicTop>
|
|
<!-- 占位 -->
|
|
<view class="place"></view>
|
|
<!-- 等待收货 -->
|
|
<view class="banner x-text-white margin-bottom22 banner1">
|
|
<view class="font-weight is_state">{{orderInfo.order_detail.order_status_str}}</view>
|
|
<view class="state_txt padding-zy64">收到货后将自动确认订单</view>
|
|
</view>
|
|
<view class="x-bg-white margin-bottom22 x_margin0auto w-90 my_order tip">
|
|
<view class="padding-30">
|
|
<view class="goods_info d-flex j-sb w-50 a-center">
|
|
<view class="font_28">{{orderInfo.user_address.consignee}}</view>
|
|
<view class="">{{orderInfo.user_address.tel}}</view>
|
|
</view>
|
|
<view class="goods_info d-flex j-sb a-center">
|
|
<image src="../../static/my/weizhi.png" mode="" style="height:26upx; width:26upx;"></image>
|
|
<view class="font_26 w-90">{{orderInfo.user_address.address}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view v-if="orderInfo.order_detail.express_status > 0" class="x-bg-white margin-bottom22 x_margin0auto w-90 my_order" @click.stop="dump_express(orderInfo.order_detail.order_id,orderInfo.order_detail.express_sn,orderInfo.order_detail.express_name)">
|
|
<view class="padding-30">
|
|
<view class="goods_info d-flex j-sb a-center">
|
|
<image src="../../static/my/mycar.png" mode="" style="height:26upx; width:26upx;"></image>
|
|
<view class="flex-1 padding-zy30">
|
|
<view class="x-text-159">点击可查看物流详情</view>
|
|
<view>{{orderInfo.order_detail.shipping_time}}</view>
|
|
</view>
|
|
<image src="../../static/my/right.png" mode="" style="height:33upx; width:21upx;"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="x-bg-white margin-bottom22 x_margin0auto w-90 my_order padding-30">
|
|
<view class="font-weight">订单信息</view>
|
|
<view class="d-flex j-sb">
|
|
<view>订单编号</view>
|
|
<view>{{orderInfo.order_detail.order_sn}}</view>
|
|
</view>
|
|
<view class="d-flex j-sb">
|
|
<view>下单时间</view>
|
|
<view>{{orderInfo.order_detail.create_time}}</view>
|
|
</view>
|
|
<view class="d-flex j-sb">
|
|
<view>支付方式</view>
|
|
<view>{{orderInfo.order_detail.pay_type_text}}</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- <view class="x-bg-white margin-bottom22 x_margin0auto w-90 my_order padding-30">
|
|
<view class="d-flex j-sb">
|
|
<view>开具发票</view>
|
|
<view>电子发票</view>
|
|
</view>
|
|
<view class="d-flex j-sb">
|
|
<view>明细内容-{{orderInfo.buyer_info.invoice_title}}</view>
|
|
|
|
</view>
|
|
</view> -->
|
|
|
|
<view class="x_margin0auto w-90 padding-30 x-bg-white my_order margin-bottom22">
|
|
<view class="d-flex goods_items a-center w-100" v-for="(item,index) of orderInfo.order_goods" :key='index'>
|
|
<view class="box_img">
|
|
<an-image :src="item.app_thumb?item.app_thumb:'https://ydyd-develop-file.oss-cn-hangzhou.aliyuncs.com/imageerror.jpg'" alt="https://ydyd-develop-file.oss-cn-hangzhou.aliyuncs.com/imageerror.jpg"></an-image>
|
|
<!-- <image :src="item.app_thumb?item.app_thumb:'../../static/noimg.png'" mode="" class="h-100 w-100"></image> -->
|
|
</view>
|
|
<view class="goods_txt flex-1 padding-zy30">
|
|
<view class="font-weight">{{item.name}}</view>
|
|
<view class="">{{item.manufacturer_name}}</view>
|
|
<view class="d-flex j-sb">
|
|
<view>{{item.spec_desc}}</view>
|
|
<view>{{item.retail_flag == 0 ? '零' : '整'}}</view>
|
|
<view>X {{item.goods_number}}</view>
|
|
</view>
|
|
<view class="d-flex j-sb margin-shu20">
|
|
<view class="x-text-159">￥ {{item.total}}</view>
|
|
<!-- <view class="customer_service text-center" @click="customer_service(index)">申请售后</view> -->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="x-bg-white margin-bottom22 x_margin0auto w-90 my_order padding-30">
|
|
<view class="d-flex j-sb">
|
|
<view>商品总额</view>
|
|
<view>¥ {{orderInfo.order_detail.goods_amount}}</view>
|
|
</view>
|
|
<view class="d-flex j-sb">
|
|
<view>运费</view>
|
|
<view>¥ {{orderInfo.order_detail.shipping_fee}}</view>
|
|
</view>
|
|
<view class="d-flex j-sb">
|
|
<view>订单总价</view>
|
|
<view>¥ {{orderInfo.order_detail.total_amount}}</view>
|
|
</view>
|
|
<view class="d-flex j-sb">
|
|
<view>实付金额</view>
|
|
<view>¥ {{orderInfo.order_detail.total_amount}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="x_public_box x-text-white x-bg-159 margin-shu20 shadow addBtn w-90" style="line-height: 80upx;" v-if='orderInfo.order_detail.order_status==1' @click="dump_pay()">去支付</view>
|
|
<!-- <view v-if="orderInfo.order_detail.order_status==1" class="d-flex bottom-0 right-0 w-100">
|
|
<view class="flex-1 main-bg-color text-white font-md py-2 text-center btn3"
|
|
hover-class="main-bg-hover-color" @click="add()">去支付</view>
|
|
</view> -->
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import uniCombox from "../../components/uni-combox/uni-combox/uni-combox.vue"
|
|
import PublicTop from '../../components/HeaderTop/PublicTop.vue'
|
|
import order from '../../utils/models/order.js'
|
|
import anImage from '@/components/an-image/an-image'
|
|
export default {
|
|
data() {
|
|
return {
|
|
id:0,
|
|
orderInfo: {
|
|
invalid_order_goods: [],
|
|
buyer_info: {},
|
|
user_address: {},
|
|
order_goods: [],
|
|
order_detail: {},
|
|
cancel_reason: ''
|
|
}
|
|
}
|
|
},
|
|
components: {
|
|
uniCombox,
|
|
PublicTop,
|
|
anImage
|
|
},
|
|
methods: {
|
|
//申请售后
|
|
customer_service(index){
|
|
|
|
},
|
|
// 去支付
|
|
dump_pay(){
|
|
// 跳转选择支付页面
|
|
uni.navigateTo({
|
|
url:'../my/pay_type?order_id='+this.orderInfo.order_detail.order_id
|
|
})
|
|
},
|
|
// 查看物流
|
|
dump_express(id,express_sn,express_name){
|
|
uni.navigateTo({
|
|
url:'../order/express?id='+id+'&express_sn='+express_sn+'&express_name='+express_name
|
|
})
|
|
},
|
|
async getInfo() {
|
|
let data = await order.getInfo(this.id)
|
|
this.orderInfo = data.data
|
|
this.handleError(data, res => {
|
|
|
|
})
|
|
},
|
|
},
|
|
created() {
|
|
this.getInfo()
|
|
},
|
|
onLoad(option) {
|
|
this.id = option.id
|
|
this.index = option.index
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.place{
|
|
background-color: #ffffff;
|
|
height: 148upx;
|
|
}
|
|
.content {
|
|
uni-textarea{
|
|
width:100%;
|
|
}
|
|
height:100%;
|
|
overflow-y: auto;
|
|
.banner {
|
|
|
|
background-position: center;
|
|
background-size: cover;
|
|
height: 221upx;
|
|
|
|
.is_state {
|
|
padding: 50upx 0 0 64upx;
|
|
line-height: 60upx;
|
|
}
|
|
|
|
}
|
|
.banner1{
|
|
background-image: url(../../static/my/banner1.png);
|
|
}
|
|
.banner2{
|
|
background-image: url(../../static/my/banner2.png);
|
|
}
|
|
.banner3{
|
|
background-image: url(../../static/my/banner3.png);
|
|
}
|
|
.banner4{
|
|
background-image: url(../../static/my/banner4.png);
|
|
}
|
|
.banner5{
|
|
background-image: url(../../static/my/banner5.png);
|
|
}
|
|
.banner6{
|
|
background-image: url(../../static/my/banner6.png);
|
|
}
|
|
.tip{
|
|
margin-top: -60upx;
|
|
}
|
|
.my_order {
|
|
border-radius: 20upx;
|
|
position: relative;
|
|
.refund_form{
|
|
height: 80upx;
|
|
.selection-component{
|
|
border:1upx solid #C3C3C3;
|
|
overflow: hidden;
|
|
margin-left:30upx;
|
|
z-index:88;
|
|
|
|
}
|
|
.selection-show{
|
|
position: relative;
|
|
}
|
|
.selection-list{
|
|
z-index:99;
|
|
border:1upx solid #C3C3C3;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
.box_img {
|
|
height: 153.3upx;
|
|
width: 198upx;
|
|
background-color: #F2F2F2;
|
|
padding: 10upx 20upx;
|
|
margin: 0 10upx;
|
|
}
|
|
.info{
|
|
line-height: 30upx;
|
|
margin-top:20upx;
|
|
}
|
|
.select_txt{
|
|
line-height: 80upx;
|
|
width:20%;
|
|
}
|
|
.select_input{
|
|
z-index: 106;
|
|
line-height: 38px;
|
|
width:75%;
|
|
}
|
|
.remarks{
|
|
padding:20upx 0 0 30upx ;
|
|
font-size: 26upx;
|
|
}
|
|
.updata_img{
|
|
height:143.6upx;
|
|
width:150upx;
|
|
}
|
|
.is_txt{
|
|
text-align: justify;
|
|
}
|
|
.is_txt:after{
|
|
content: " ";
|
|
display: inline-block;
|
|
width: 100%;
|
|
}
|
|
.customer_service{
|
|
border:1upx solid #989898;
|
|
border-radius: 20upx;
|
|
line-height: 45upx;
|
|
color: #989898;
|
|
padding:0 20upx;
|
|
}
|
|
}
|
|
|
|
.order_list {
|
|
height: calc(100% - 238upx);
|
|
overflow-y: auto;
|
|
|
|
.order_state {
|
|
border-radius: 20upx 0 0 20upx;
|
|
height: 46upx;
|
|
width: 120upx;
|
|
background-color: #EDCA4A;
|
|
line-height: 46upx;
|
|
position: absolute;
|
|
right: 0;
|
|
}
|
|
|
|
.order_items {
|
|
border-radius: 20upx;
|
|
position: relative;
|
|
}
|
|
|
|
}
|
|
.is_submit{
|
|
line-height: 82upx;
|
|
margin:100upx auto;
|
|
}
|
|
}
|
|
</style>
|