From a836f03a5d1fbfa81e147d09ffdfa87ba3975c13 Mon Sep 17 00:00:00 2001
From: MrShi <1878285526@qq.com>
Date: 星期二, 18 三月 2025 16:45:02 +0800
Subject: [PATCH] 1

---
 admin/src/views/combo/components/ComboDetail.vue |  395 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 files changed, 395 insertions(+), 0 deletions(-)

diff --git a/admin/src/views/combo/components/ComboDetail.vue b/admin/src/views/combo/components/ComboDetail.vue
new file mode 100644
index 0000000..ea24c96
--- /dev/null
+++ b/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>
\ No newline at end of file

--
Gitblit v1.9.3