<template>
|
<GlobalWindow title="套餐详情" :visible.sync="isShowModal" :confirm-working="isLoading" width="1000px" @close="close"
|
@confirm="close">
|
<div class="detail_header">
|
<div class="sp_bew">
|
<div class="left">
|
<el-image v-if="detail.fullImgurl" :src="detail.fullImgurl" class="img" />
|
<div class="title_wrap">
|
<div>
|
<span class="title">{{ detail.name }}</span>
|
<span class="status">{{ detail.status === '1' ? '已启用' : '禁用' }}</span>
|
</div>
|
<div class="placeholder9 mt10">每日销售限量：{{ detail.circulationDay }}</div>
|
</div>
|
</div>
|
<div class="right">
|
<div class="item">
|
<div class="key">总发放数量</div>
|
<div class="value">{{ detail.circulationAll || '-' }}</div>
|
</div>
|
<div class="item">
|
<div class="key">已销售数量</div>
|
<div class="value">{{ detail.sellNum }}</div>
|
</div>
|
<div class="item">
|
<div class="key">剩余数量</div>
|
<div v-if="detail.circulationAll" class="value">{{ detail.surplusDay }}</div>
|
<div v-else class="value">{{ detail.surplusDay || '-' }}</div>
|
</div>
|
</div>
|
</div>
|
<div class="createTime_wrap">
|
<span class="item">创建时间：{{ detail.createTime }}</span>
|
<span class="item">创建人：{{ detail.creator }}</span>
|
<span class="item">最后更新时间：{{ detail.editTime }}</span>
|
<span class="item">更新人：{{ detail.editor }}</span>
|
</div>
|
</div>
|
<div class="separate" />
|
<div class="property-title">套餐属性</div>
|
<div class="line">
|
<div class="key">套餐名称：</div>
|
<div class="value">{{ detail.name }}</div>
|
</div>
|
<div class="line">
|
<div class="key">套餐类型：</div>
|
<div v-if="detail.mealsType == '0'" class="value">期限卡</div>
|
</div>
|
<div class="line">
|
<div class="key">{{ detail.mealsType == '1' || detail.mealsType == '4' ? '每日骑行限制：' : '套餐次数：' }}</div>
|
<div v-if="detail.mealsType == '1' || detail.mealsType == '4'" class="value">
|
<span>{{ detail.inOutNum || '不限制' }}</span>
|
</div>
|
<div v-else class="value"><span>{{ detail.nums }}</span></div>
|
</div>
|
<div class="line">
|
<div class="key">使用说明：</div>
|
<div class="value">
|
<div>{{ detail.content }}</div>
|
</div>
|
</div>
|
|
<div class="property-title">适用规则</div>
|
<div class="line">
|
<div class="key">销售时间段：</div>
|
<div class="value">{{ detail.circulationAll || '不限量' }}</div>
|
</div>
|
<div class="line">
|
<div class="key">使用时间：</div>
|
<div class="value">{{ detail.circulationDay }}</div>
|
</div>
|
<div class="line">
|
<div class="key">适用范围：</div>
|
<div class="value">{{ detail.useVenue }}</div>
|
</div>
|
<div class="line">
|
<div class="key">适用项目：</div>
|
<div class="value">{{ detail.useProject }}</div>
|
</div>
|
<div class="line">
|
<div class="key">总限额：</div>
|
<div class="value">{{ detail.useClassInfo || '不限制' }}</div>
|
</div>
|
<div class="line">
|
<div class="key">每日限额：</div>
|
<div class="value">{{ detail.useTeacherInfo || '不限额' }}</div>
|
</div>
|
</GlobalWindow>
|
</template>
|
<script>
|
// import { comboDetailPost, mealsCancelUse } from '@/api'
|
// import dayjs from 'dayjs'
|
import GlobalWindow from '@/components/common/GlobalWindow'
|
export default {
|
name: 'ComboDetail',
|
components: {
|
GlobalWindow
|
},
|
data() {
|
return {
|
isShowModal: false,
|
isLoading: false,
|
activeTab: '0',
|
detail: {},
|
pagination: {
|
page: 1,
|
rows: 10
|
},
|
totalCount: 0,
|
dataList: [],
|
tableLoading: false
|
}
|
},
|
created() {
|
// this.detail = this.$route.query
|
// this.comboDetail()
|
},
|
methods: {
|
mealsCancelUseBtn(businessId, mealsMemberId) {
|
const that = this
|
this.$alert('确定要撤销使用？', '撤销使用', {
|
confirmButtonText: '确定',
|
callback: action => {
|
if (action === 'confirm') {
|
mealsCancelUse({
|
param: {
|
businessId, mealsMemberId
|
}
|
}).then((res) => {
|
if (res.errorCode === '000000') {
|
that.$message.success('撤销使用成功')
|
that.comboDetail()
|
}
|
})
|
}
|
}
|
})
|
},
|
getDetail(detail) {
|
const { activeTab, pagination } = this
|
const param = {
|
listType: activeTab,
|
type: detail.type,
|
id: detail.id
|
}
|
this.tableLoading = true
|
comboDetailPost({ pagination, param }).then(res => {
|
this.tableLoading = false
|
this.dataList = res.record.data || []
|
this.totalCount = res.record.count || 0
|
this.detail = { ...detail, useProject: res.record.useProject }
|
this.$nextTick(() => {
|
this.$refs.tableo.doLayout()
|
})
|
}, () => {
|
this.tableLoading = false
|
})
|
},
|
tabClick(val) {
|
this.comboDetail(this.detail)
|
},
|
goBack() {
|
this.$router.replace(`/combo/salesRecord`)
|
},
|
close() {
|
this.isShowModal = false
|
this.$emit('close')
|
},
|
currentPageChange(val) {
|
this.pagination.page = val
|
this.comboDetail()
|
},
|
pageSizeChange(val) {
|
this.pagination.rows = val
|
this.comboDetail()
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@import "@/assets/style/variables.scss";
|
|
.line {
|
display: flex;
|
align-items: center;
|
margin-bottom: 20px;
|
font-size: 14px;
|
|
// padding-left: 16px;
|
.key {
|
color: #666666;
|
width: 100px;
|
text-align: right;
|
}
|
|
.value {
|
color: #222222;
|
}
|
}
|
|
.detail_header {
|
font-size: 14px;
|
|
.sp_bew {
|
display: flex;
|
justify-content: space-between;
|
|
.left {
|
display: flex;
|
|
.img {
|
width: 50px;
|
height: 50px;
|
margin-right: 20px;
|
}
|
|
.title {
|
font-size: 18px;
|
font-weight: 600;
|
color: #222222;
|
}
|
|
.status {
|
border-radius: 2px;
|
border: 1px solid $primaryColor;
|
color: $primaryColor;
|
margin-left: 10px;
|
}
|
}
|
|
.right {
|
display: flex;
|
background-color: #F4F7FC;
|
border-radius: 2px;
|
|
.item {
|
padding: 14px 20px;
|
|
.key {
|
font-size: 12px;
|
color: #666666;
|
}
|
|
.value {
|
margin-top: 8px;
|
color: #222222;
|
font-weight: 600;
|
}
|
}
|
}
|
}
|
|
.createTime_wrap {
|
display: flex;
|
/* justify-content: flex-end; */
|
margin: 16px 0;
|
|
.item {
|
margin-right: 30px;
|
color: #999999;
|
}
|
}
|
}
|
|
.separate {
|
height: 1px;
|
margin: 20px -20px;
|
padding: 0 20px;
|
background-color: #DFE2E8;
|
}
|
|
.tip {
|
font-size: 14px;
|
line-height: 1.5;
|
color: #333;
|
}
|
.property-title{
|
margin-bottom: 16px;
|
color: $primaryColor;
|
}
|
.device-uploader {
|
width: 80px;
|
height: 80px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
background-color: #fff;
|
cursor: pointer;
|
border: 1px dashed #ccc;
|
border-radius: 8px;
|
transition: all 0.3s;
|
margin-right: 20px;
|
|
&:hover {
|
border-color: $primaryColor;
|
|
.uploader-icon {
|
color: $primaryColor;
|
}
|
}
|
|
::v-deep .el-upload {
|
width: 100%;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
position: relative;
|
|
.file {
|
width: 100%;
|
height: 100%;
|
position: absolute;
|
top: 0;
|
left: 0;
|
background-size: contain;
|
background-position: center;
|
background-repeat: no-repeat;
|
border-radius: 8px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
|
.delete {
|
background-color: rgba(0, 0, 0, 0.5);
|
position: absolute;
|
width: 100%;
|
height: 100%;
|
top: 0;
|
left: 0;
|
display: none;
|
align-items: center;
|
justify-content: center;
|
|
.icon {
|
color: #fff;
|
}
|
}
|
|
&:hover {
|
.delete {
|
display: flex;
|
}
|
}
|
}
|
}
|
|
.uploader-icon {
|
color: #aaaaaa;
|
font-size: 22px;
|
transition: all 0.3s;
|
}
|
}
|
|
.count-style {
|
display: inline-block;
|
width: 45%;
|
height: 60px;
|
}
|
|
.division-line {
|
text-align: center;
|
display: inline-block;
|
color: #999;
|
width: 50px;
|
}
|
|
.clock {
|
display: inline-block;
|
}
|
|
.upload-style {
|
vertical-align: middle;
|
display: inline-block;
|
// width: 60px;
|
// height: 60px;
|
border: none;
|
}
|
|
.img-style {
|
margin: auto;
|
background-color: #eee;
|
width: 90px;
|
height: 60px;
|
vertical-align: middle;
|
}
|
|
.avatar {
|
width: 60px;
|
height: 60px;
|
display: block;
|
}
|
|
.line-style {
|
background-color: #dfe2e8;
|
height: 1px;
|
// width: 80%;
|
// margin: 0 auto;
|
margin-bottom: 20px;
|
}
|
</style>
|
