<template> <div class="DetailsSetmeal"> <v-select v-show="false" ref="payType" code="PAY_PROCUCT_TYPE" placeholder="支付方式"></v-select> <a-modal class="DetailsSetmealModal" title="套餐购买详情" width="80%" centered :footer="null" :maskClosable="false" :destroyOnClose="true" @cancel="isShow = false" v-model="isShow" > <a-row :gutter="20" v-if="detailsData"> <a-col :span="8" class="item-cont"> <p class="item-label">购买日期:</p> <p class="item-main">{{ detailsData.orderDate || '--' }}</p> </a-col> <a-col :span="8" class="item-cont"> <p class="item-label">订单号:</p> <p class="item-main">{{ detailsData.orderBundle.number || '--' }}</p> </a-col> <a-col :span="8" class="item-cont"> <p class="item-label">客户名称:</p> <p class="item-main">{{ detailsData.orderBundle.custName || '--' }}</p> </a-col> </a-row> <a-row :gutter="20" v-if="detailsData"> <a-col :span="8" class="item-cont"> <p class="item-label">手机号:</p> <p class="item-main">{{ detailsData.orderBundle.custMobile || '--' }}</p> </a-col> <a-col :span="8" class="item-cont"> <p class="item-label">销售合作商:</p> <p class="item-main">{{ detailsData.dataSourceName || '--' }}</p> </a-col> <a-col :span="8" class="item-cont"> <p class="item-label">套餐名称:</p> <p class="item-main">{{ detailsData.orderBundle.bundleName || '--' }}</p> </a-col> </a-row> <a-row :gutter="20" v-if="detailsData"> <a-col :span="8" class="item-cont"> <p class="item-label">套餐价格:</p> <p class="item-main">{{ detailsData.orderBundle.totalAmount ? detailsData.orderBundle.totalAmount + '元' : '--' }}</p> </a-col> <a-col :span="8" class="item-cont"> <p class="item-label">销售人员:</p> <p class="item-main">{{ detailsData.sellerName || '--' }}</p> </a-col> <a-col :span="8" class="item-cont"> <p class="item-label">收款金额:</p> <p class="item-main">{{ detailsData.orderBundle.payedAmount ? detailsData.orderBundle.payedAmount + '元' : '--' }}</p> </a-col> </a-row> <a-row :gutter="20" v-if="detailsData"> <a-col :span="8" class="item-cont"> <p class="item-label">支付方式:</p> <p class="item-main">{{ $refs.payType.getNameByCode(detailsData.paymentDetailList[0].payType) }}</p> </a-col> </a-row> <a-tabs type="card"> <a-tab-pane key="1" tab="套餐内容"> <!-- 套餐内容列表 --> <a-table ref="tcTable" size="middle" :rowKey="record => record.id" :columns="setMealColumns" :dataSource="setMealData" :pagination="false" :loading="loading" bordered> <!-- 到期时间 --> <span slot="expiryDate" slot-scope="text, record"> <span v-if="record.cycleFlag==0">{{ record.expiryDate }}</span> <span v-else>--</span> </span> <!-- 操作 --> <span slot="action" slot-scope="text, record"> <a-button v-if="record.isDelay" type="link" @click="openSetDelay(record)">延期</a-button> <span v-else>--</span> </span> </a-table> </a-tab-pane> <a-tab-pane key="2" tab="使用记录"> <!-- 使用记录列表 --> <a-table ref="recordTable" size="middle" :rowKey="record => record.id" :columns="recordColumns" :dataSource="recordData" :pagination="false" bordered> <!-- 车牌号 --> <span slot="vehicleNum" slot-scope="text, record">{{ record.vehicleNum || '--' }}</span> <!-- 服务门店 --> <span slot="usedStoreName" slot-scope="text, record">{{ record.usedStoreName || '--' }}</span> </a-table> </a-tab-pane> </a-tabs> <div class="btn-cont" v-if="detailsData"> <a-button id="detailsSetmealModal-back" @click="isShow = false">返回列表</a-button> <a-button v-if="detailsData.orderBundle.orderFlag=='PAED'&&detailsData.salesChannelSettleStatus=='NOT_SETTLE'&&recordData.length==0" id="detailsSetmealModal-cancel" type="primary" @click="cancelBuy">取消购买</a-button> </div> </a-modal> <!-- 延期 --> <delay-modal :openModal="setDelay" :serverData="serverData" @close="closeSetDelay" /> </div> </template> <script> import { STable, VSelect } from '@/components' import { customerBundleDetail, customerBundleUseHistory, orderCancel } from '@/api/customerBundle.js' import DelayModal from './delayModal.vue' export default { name: 'SetmealDetailModal', components: { STable, VSelect, DelayModal }, props: { openModal: { // 弹框是否展示 type: Boolean, default: false }, setmealId: { // 套餐id type: String, default: '' } }, data () { return { isShow: this.openModal, // 弹框是否展示 setMealColumns: [ { title: '序号', dataIndex: 'no', width: 60, align: 'center' }, { title: '服务名称', dataIndex: 'itemName', width: 200, align: 'center' }, { title: '到期时间', scopedSlots: { customRender: 'expiryDate' }, width: 100, align: 'center' }, { title: '总次数', dataIndex: 'times', width: 100, align: 'center' }, { title: '剩余次数', dataIndex: 'remainTimes', width: 100, align: 'center' }, { title: '已用次数', dataIndex: 'usedTimes', width: 100, align: 'center' }, { title: '过期次数', dataIndex: 'expiryTimes', width: 100, align: 'center' }, { title: '退款次数', dataIndex: 'refundTimes', width: 100, align: 'center' }, { title: '操作', scopedSlots: { customRender: 'action' }, width: 100, align: 'center' } ], recordColumns: [ { title: '序号', dataIndex: 'no', width: 60, align: 'center' }, { title: '使用时间', dataIndex: 'usedTime', width: 100, align: 'center' }, { title: '服务内容', dataIndex: 'itemName', width: 100, align: 'center' }, { title: '服务门店', scopedSlots: { customRender: 'usedStoreName' }, width: 100, align: 'center' }, { title: '核销单号', dataIndex: 'bizNum', width: 100, align: 'center' } ], setMealData: [], // 套餐内容 recordData: [], // 使用记录 detailsData: null, // 套餐数据 setDelay: false, // 延期设置 serverData: null, // 套餐包含服务 数据 loading: false } }, methods: { // 套餐详情 getSetmealInfo () { this.loading = true // 套餐详情 customerBundleDetail({ id: this.setmealId }).then(res => { if (res.status == 200) { this.detailsData = res.data if (res.data && res.data.customerBundleItemList && res.data.customerBundleItemList.length > 0) { res.data.customerBundleItemList.map((item, index) => { item.no = index + 1 item.isDelay = (item.expiryDate ? item.expiryDate.substr(0, 10) != '2099-01-01' : false) && (item.cycleFlag == 0) && (res.data.orderBundle.orderFlag != 'RUND') }) this.setMealData = res.data.customerBundleItemList } else { this.setMealData = [] } } else { this.detailsData = null this.setMealData = [] } this.loading = false }) // 使用记录 customerBundleUseHistory({ id: this.setmealId }).then(res => { if (res.status == 200) { if (res.data && res.data.length > 0) { res.data.map((item, index) => { item.no = index + 1 }) this.recordData = res.data } else { this.recordData = [] } } else { this.recordData = [] } }) }, // 取消购买 cancelBuy () { const _this = this this.$confirm({ title: '取消购买', content: '取消购买后,套餐内所有服务的剩余次数变为0,用户无法再使用套餐。确认取消购买吗?', onOk: () => { orderCancel({ id: _this.setmealId }).then(res => { if (res.status == 200) { _this.$emit('refrresh') } }) }, onCancel () {} }) }, // 延期 openSetDelay (row) { this.serverData = row this.setDelay = true }, // 关闭延期 closeSetDelay () { this.getSetmealInfo() this.serverData = null this.setDelay = false } }, watch: { // 父页面传过来的弹框状态 openModal (newValue, oldValue) { this.isShow = newValue }, // 重定义的弹框状态 isShow (val) { if (!val) { this.$emit('close') this.setMealData = [] this.recordData = [] this.detailsData = null } }, setmealId (newValue, oldValue) { if (newValue && this.isShow) { this.getSetmealInfo() } } } } </script> <style lang="less"> .DetailsSetmealModal { .ant-modal-body { padding: 24px 40px; } .item-cont { margin-bottom: 15px; display: flex; .item-label { width: 115px; font-size: 14px; color: rgba(0, 0, 0, 0.85); flex-shrink: 0; } .item-main { flex-grow: 1; .wd-icon { display: block; } } .guidance-con { border: 1px dashed #e8e8e8; border-radius: 6px; padding: 20px; img { max-width: 100%; } } .period-price-con { border-bottom: 1px solid #e8e8e8; } .item-period { display: flex; align-items: center; justify-content: space-evenly; flex-grow: 1; border: 1px solid #e8e8e8; border-width: 1px 1px 0; text-align: center; .period, .period-price { padding: 5px 0; border-right: 1px solid #e8e8e8; } .period-price:last-child { border-right: none; } } } .btn-cont { text-align: center; margin: 50px 0 10px; button{ margin: 0 20px; } } } </style>