1

MrShi

2025-03-18 a836f03a5d1fbfa81e147d09ffdfa87ba3975c13

 admin/src/views/combo/components/ComboDetail.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,395 @@
<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>