<!--
|
* @Author: 小明丶
|
* @Date: 2019-08-19 16:20:48
|
* @LastEditors: 小明丶
|
* @LastEditTime: 2019-09-06 15:38:14
|
* @Description: 购机直降——订单详情
|
-->
|
<template>
|
<div class="hb-detail-box h-100-g">
|
<v-navbar title="订单详情" fixed></v-navbar>
|
<div class="content">
|
<group title="合约信息">
|
<van-cell title="合约套餐" :value="form.contName"></van-cell>
|
<van-cell title="直降金额" :value="form.strDownAmt"></van-cell>
|
<van-cell title="电子券金额" :value="form.eleBondAmt"></van-cell>
|
<van-cell title="月缴话费" :value="form.monthConsAmt"></van-cell>
|
<van-cell title="期数" :value="form.term"></van-cell>
|
</group>
|
<group title="商品信息">
|
<van-cell title="设备类型" :value="form.deviceType"></van-cell>
|
<van-cell title="品牌" :value="form.goodsBrand"></van-cell>
|
<van-cell title="名称" :value="form.goodsName"></van-cell>
|
<van-cell title="价格" :value="form.goodsPrice"></van-cell>
|
<van-cell title="IMEI/SN" :value="form.goodsImei||form.snCode"></van-cell>
|
</group>
|
<group title="订单信息">
|
<van-cell title="订单号" :value="form.orderId"></van-cell>
|
<van-cell title="订单状态" :value="form.status"></van-cell>
|
<van-cell title="用户姓名" :value="form.userName"></van-cell>
|
<van-cell title="合约手机号" :value="form.mblNo"></van-cell>
|
<van-cell v-if="form.applyTime" title="申请日期" :value="form.applyTime | timeformat('yyyy-MM-dd HH:mm:ss')"></van-cell>
|
<van-cell v-if="form.signTime" title="签约日期" :value="form.signTime | timeformat('yyyy-MM-dd HH:mm:ss')"></van-cell>
|
</group>
|
<group title="照片信息">
|
<div class="content_item fl_flex fl_row" @click="enterPics">
|
<div>相关图片</div>
|
<van-icon name="arrow" />
|
</div>
|
</group>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import Vue from "vue";
|
import { Dialog } from "vant";
|
import {
|
dateFormat
|
} from 'vux'
|
Vue.use(Dialog);
|
export default {
|
data(){
|
return {
|
form:{},
|
canRefund: 0,
|
orderId: this.$route.query.id,
|
showModal: false
|
}
|
},
|
created(){
|
this.init()
|
},
|
methods:{
|
init() {
|
this.$api.getGzzjDetail(this.$route.query.id).then(res => {
|
this.form = res.body;
|
this.canRefund = res.body.canRefund;
|
});
|
},
|
enterPics() {
|
sessionStorage.pics = JSON.stringify(this.form.gzzjPicUrlVoList)
|
let queryObj = JSON.stringify(this.form.gzzjPicUrlVoList)
|
this.$router.push({
|
path: '/product/gzzj_order_detail_pics',
|
query:queryObj
|
})
|
}
|
}
|
}
|
</script>
|
<style lang="less" scoped>
|
.status-val-done {
|
color:#19BE6B;
|
}
|
.status-val-refund {
|
color:#FF9900;
|
}
|
.status-val-wait {
|
color:#FF9900;
|
}
|
.status-val-error {
|
color:#ED4014;
|
}
|
.hb-detail-box {
|
padding-top: 44px;
|
background-color: @c-bg-f5;
|
|
.content {
|
padding: 10px 8px;
|
}
|
|
.van-cell-group {
|
margin-bottom: 10px;
|
}
|
}
|
.btn{
|
width: 320px;
|
background: @c-bg-default;
|
color: @c-text-fff;
|
display: block;
|
margin: 30px auto;
|
}
|
.btn-return {
|
width: 84%;
|
margin: 0 8%;
|
background: @c-default;
|
color: @c-text-fff;
|
display: block;
|
margin-top: 15px;
|
}
|
.content_item {
|
width: 100%;
|
min-height: 39px;
|
padding-right: 20px;
|
padding-left: 10px;
|
margin: 10px;
|
margin-top: 20px;
|
border-bottom: 1px solid #F1F1F1;
|
justify-content: space-between;
|
box-sizing: border-box;
|
position: relative;
|
display: flex;
|
div:nth-child(1) {
|
width: 35%;
|
}
|
div:nth-child(2) {
|
width: 60%;
|
text-align: right;
|
word-break:break-all;
|
span {
|
display: inline-block;
|
text-align: left;
|
}
|
}
|
}
|
</style>
|
