123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226 |
- <template>
- <div>
- <a-modal
- class="modalBox"
- title="详情"
- v-model="isshow"
- @cancle="cancel"
- width="70%"
- :centered="true">
- <a-row :gutter="48" >
- <a-col :span="8" class="item-cont">
- <p class="item-label">单号:</p>
- <p class="item-main">{{ pageInfo.orderReserveNo ? pageInfo.orderReserveNo : '--' }}</p>
- </a-col>
- <a-col :span="8" class="item-cont">
- <p class="item-label">状态:</p>
- <p class="item-main">{{ pageInfo.orderStatusDictValue ? pageInfo.orderStatusDictValue : '--' }}</p>
- </a-col>
- <a-col :span="8" class="item-cont">
- <p class="item-label">支付方式:</p>
- <p class="item-main">{{ pageInfo.payTypeDictValue ? pageInfo.payTypeDictValue : '--' }}</p>
- </a-col>
- </a-row>
- <a-row :gutter="48" >
- <a-col :span="8" class="item-cont">
- <p class="item-label">下单时间:</p>
- <p class="item-main">{{ pageInfo.createDate ? pageInfo.createDate : '--' }}</p>
- </a-col>
- <a-col :span="8" class="item-cont">
- <p class="item-label">预约时间:</p>
- <p class="item-main">{{pageInfo.reserveDateBegin ? pageInfo.reserveDateBegin.substring(0,10) :''}} {{pageInfo.reserveTimeTypeDictValue}}</p>
- <p v-if="!pageInfo.reserveDateBegin && !pageInfo.reserveTimeTypeDictValue">--</p>
- </a-col>
- <a-col :span="8" class="item-cont" v-if="pageInfo.orderStatus=='FINISH'">
- <p class="item-label">服务时间:</p>
- <p class="item-main">{{ pageInfo.finishDate ? pageInfo.finishDate : '--' }}</p>
- </a-col>
- </a-row>
- <a-row :gutter="48" >
- <a-col :span="8" class="item-cont">
- <p class="item-label">服务骑手:</p>
- <p class="item-main">{{ pageInfo.name ? pageInfo.name+'-' : '' }}{{ pageInfo.phone? pageInfo.phone :'' }}</p>
- <p v-if="!pageInfo.name && !pageInfo.phone">--</p>
- </a-col>
- <a-col :span="8" class="item-cont">
- <p class="item-label">回收重量(kg):</p>
- <p class="item-main">{{ pageInfo.TOTAL_WEIGHT ? (pageInfo.TOTAL_WEIGHT/1000).toFixed(3)/1 : '0' }}</p>
- </a-col>
- <a-col :span="8" class="item-cont" v-if="pageInfo.orderStatus=='FINISH'">
- <p class="item-label">支付金额(元):</p>
- <p class="item-main">{{ pageInfo.originalAmount ? pageInfo.originalAmount : '0' }}</p>
- </a-col>
- </a-row>
- <a-row :gutter="48" >
- <a-col :span="8" class="item-cont">
- <p class="item-label">联系人信息:</p>
- <p class="item-main">{{ pageInfo.contactName ? pageInfo.contactName+'-' : '' }} {{ pageInfo.contactMobile ? pageInfo.contactMobile : '' }}</p>
- <p class="item-main" v-if="!pageInfo.contactName && !pageInfo. contactName">--</p>
- </a-col>
- <a-col :span="8" class="item-cont">
- <p class="item-label">地址:</p>
- <p class="item-main">{{ pageInfo.contactAddress ? pageInfo.contactAddress : '' }}{{pageInfo.houseAddress ? pageInfo.houseAddress : ''}}</p>
- </a-col>
- <a-col :span="8" class="item-cont">
- <p class="item-label">门头照:</p>
- <viewer :image="pageInfo.imageHeader ? pageInfo.imageHeader :[]" class="viewer" ref="viewer" @inited="inited" rebuild>
- <img v-for="src in pageInfo.imageHeader" :src="src" :key="src" class="image1">
- </viewer>
- </a-col>
- </a-row>
- <a-row :gutter="48" >
- <a-col :span="8" class="item-cont">
- <p class="item-label">类型:</p>
- <p class="item-main">{{ pageInfo.addressTypeDictValue ? pageInfo.addressTypeDictValue : '--' }}</p>
- </a-col>
- <a-col :span="8" class="item-cont" v-if="pageInfo.cencelReason=='CANCEL'">
- <p class="item-label">取消原因:</p>
- <p class="item-main">{{ pageInfo.cencelReason ? pageInfo.cencelReason : '--' }}</p>
- </a-col>
- <a-col :span="8" class="item-cont">
- <p class="item-label">图片:</p>
- <viewer :images="pageInfo.imageList? pageInfo.imageList:[]" class="viewer" ref="viewer" @inited="inited" rebuild>
- <img v-for="src in pageInfo.imageList" :src="src" :key="src" class="image">
- </viewer>
- <P style="margin-bottom: 0;">{{ pageInfo.imageList ? pageInfo.imageList.length+' 张' :'0 张' }}</P>
- <!-- <img :src="item" alt="" v-for="item in pageInfo.imageList" style="width: 40px;height: 40px;"/> -->
- </a-col>
- </a-row>
- <a-row :gutter="48" >
- <a-col :span="8" class="item-cont">
- <p class="item-label">下单账号:</p>
- <p class="item-main">{{ pageInfo.mobile ? pageInfo.mobile : '--' }}</p>
- </a-col>
- </a-row>
- <!-- 列表 -->
- <div class="table-title">回收明细</div>
- <!-- 列表 -->
- <a-table
- ref="table"
- :rowKey="(record) => record.id"
- :columns="columns"
- :data-source="tableData"
- :pagination="false"
- :scroll="{ y: 450 }"
- bordered
- >
- </a-table>
- </a-modal>
- </div>
- </template>
- <script>
- import { orderDetails } from '@/api/recoveryManage.js'
- export default {
- name: 'RiderOrderModal',
- components: {
- // VSelect
- },
- props: {
- visible: {
- type: Boolean,
- default: false
- },
- itemOrderNo: {
- type: [String, Number],
- default: ''
- }
- },
- data () {
- return {
- isshow: this.visible,
- tableData: [], // 列表数据
- image:[],
- images:[],
- pageInfo: {},
- columns: [{ title: '序号', dataIndex: 'no', width: 60, align: 'center' },
- { title: '回收类别', dataIndex: 'rubbishTypeDictValue', width: 200, align: 'center', customRender: (text) => { return text || '--' } },
- { title: '回收名称', dataIndex: 'typeName', width: 200, align: 'center', customRender: (text) => { return text || '--' } },
- { title: '回收价格', dataIndex: 'rubbishPrice', width: 200, align: 'center', customRender: (text) => { return text || '--' } },
- { title: '回收重量(kg)', dataIndex: 'rubbishWeight', width: 150, align: 'center', customRender: (text) => { return (text / 1000).toFixed(3) / 1 || '0' } },
- { title: '交易金额(元)', dataIndex: 'totalAmount', width: 150, align: 'center', customRender: (text) => { return text || 0 } }]
- }
- },
- methods: {
- // 详情数据
- getPageData () {
- orderDetails({ orderReserveNo: this.itemOrderNo }).then(res => {
- if (res.status == 200) {
- this.pageInfo = res.data
- if(res.data.imageHeader){
- this.pageInfo.imageHeader=this.pageInfo.imageHeader.split()
- }
- console.log( this.pageInfo.imageHeader,'---------------v')
- this.tableData = res.data.orderReserveItemEntityList || []
- this.tableData.forEach((item,index)=>{
- item.no=index+1
- })
- }
- })
- },
- inited (viewer) {
- this.$viewer = viewer
- },
- isShow () {
- this.$viewer.update()
- },
- cancel (e) {
- this.clear()
- this.$emit('close')
- },
- // 取消
- handleCancel () {
- this.cancel()
- }
- },
- watch: {
- visible (newValue, oldValue) {
- this.isshow = newValue
- },
- isshow (newValue, oldValue) {
- if (newValue) {
- if (this.itemOrderNo) {
- this.getPageData()
- }
- } else {
- this.$emit('close')
- }
- }
- }
- }
- </script>
- <style lang="less">
- .ant-modal-footer {
- display: none;
- }
- .network-edit-search-jwd{
- margin-top: 8px;
- }
- .table-title{
- margin-bottom: 10px;
- }
- .item-cont{
- display: flex;
- }
- .image1 {
- width:25px;
- height: 25px;
- cursor: pointer;
- margin: 5px;
- display: inline-block;
- }
- .image {
- width:25px;
- height: 25px;
- cursor: pointer;
- margin: 5px;
- display: inline-block;
- }
- .image:not(:first-child){
- display: none;
- }
- </style>
|