<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 == '0' ? '已启用' : '禁用' }}</span>
|
</div>
|
<div class="placeholder9 mt10">每日销售限量：{{ detail.saleDayLimit || '不限额' }}</div>
|
</div>
|
</div>
|
<div class="right">
|
<div class="item">
|
<div class="key">总发放数量</div>
|
<div class="value">{{ detail.saleLimit || '-' }}</div>
|
</div>
|
<div class="item">
|
<div class="key">已销售数量</div>
|
<div class="value">{{ detail.saleNum }}</div>
|
</div>
|
<div class="item">
|
<div class="key">剩余数量</div>
|
<div v-if="detail.saleLimit" class="value">{{ detail.saleLimit - detail.saleNum }}</div>
|
<div v-else class="value">-</div>
|
</div>
|
</div>
|
</div>
|
<div class="createTime_wrap">
|
<span class="item">创建时间：{{ detail.createDate }}</span>
|
<span class="item">创建人：{{ detail.creatorName }}</span>
|
<span class="item">最后更新时间：{{ detail.editDate }}</span>
|
<span class="item">更新人：{{ detail.editorName }}</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.type == '0'" class="value">期限卡</div>
|
</div>
|
<div class="line">
|
<div class="key">每日骑行限制：</div>
|
<div class="value">
|
<span>{{ detail.limitType == 0 ? '不限制' : detail.limitTime + '分钟' }}</span>
|
</div>
|
</div>
|
<div class="line">
|
<div class="key">套餐简介：</div>
|
<div class="value">
|
<div>{{ detail.descs }}</div>
|
</div>
|
</div>
|
|
<div class="property-title">适用规则</div>
|
<div class="line">
|
<div class="key">销售时间段：</div>
|
<div class="value">{{ detail.startDate }} 至 {{ detail.endDate }}</div>
|
</div>
|
<div class="line">
|
<div class="key">使用时间：</div>
|
<div class="value" v-if="detail.useType == 0">{{ detail.useStartDate }} 至 {{ detail.useEndDate }}内有效</div>
|
<div class="value" v-if="detail.useType == 1">购买后立即生效，有效期{{ detail.useDays }}天</div>
|
<div class="value" v-if="detail.useType == 2">自{{ detail.useStartDate }}起{{ detail.useDays }}天内有效</div>
|
</div>
|
<div class="line">
|
<div class="key">适用范围：</div>
|
<div class="value">{{ detail.useWorkday == 1 ? '工作日' : ''}} {{ detail.useWorkday && detail.useHoliday ? '|' : '' }} {{ detail.useHoliday == 1 ? '节假日' : '' }}</div>
|
</div>
|
<div class="line">
|
<div class="key">适用项目：</div>
|
<div class="value">{{ detail.isbike == 1 ? '自行车' : '' }} {{ detail.isbike && detail.iselecbike ? '|' : '' }} {{ detail.iselecbike == 1 ? '电动车' :'' }}</div>
|
|
</div>
|
<div class="line">
|
<div class="key">总限额：</div>
|
<div class="value">{{ detail.saleLimit || '不限额' }}</div>
|
</div>
|
<div class="line">
|
<div class="key">每日限额：</div>
|
<div class="value">{{ detail.saleDayLimit || '不限额' }}</div>
|
</div>
|
</GlobalWindow>
|
</template>
|
<script>
|
import { comboDetailPost } from '@/api/business/combo.js'
|
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(id) {
|
comboDetailPost(id).then(res => {
|
console.log('res', res)
|
|
this.detail = res
|
}, () => {
|
|
})
|
},
|
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;
|
padding: 0 4px;
|
}
|
}
|
|
.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>
|
