提交

src/components/ImagePreview/index.vue

+<template>
+  <el-image
+    :src="`${src}`"
+    fit="cover"
+    :style="`width:${realWidth};height:${realHeight};`"
+    :preview-src-list="srcList"
+  >
+    <div slot="error" class="image-slot">
+      <i class="el-icon-picture-outline" />
+    </div>
+  </el-image>
+</template>
+
+<script>
+import { isExternal } from '@/utils/validate'
+
+export default {
+  name: 'ImagePreview',
+  props: {
+    src: {
+      type: String,
+      required: true
+    },
+    width: {
+      type: [Number, String],
+      default: ''
+    },
+    height: {
+      type: [Number, String],
+      default: ''
+    },
+    srcList: {
+      type: Array,
+      required: false,
+      default: () => []
+    }
+  },
+  computed: {
+    // realSrc() {
+    //   const real_src = this.src.split(',')[0]
+    //   if (isExternal(real_src)) {
+    //     return real_src
+    //   }
+    //   // return process.env.VUE_APP_BASE_API + real_src;
+    //   return real_src
+    // },
+    // realSrcList() {
+    //   const real_src_list = this.src.split(',')
+    //   const srcList = []
+    //   real_src_list.forEach(item => {
+    //     if (isExternal(item)) {
+    //       return srcList.push(item)
+    //     }
+    //     // return srcList.push(process.env.VUE_APP_BASE_API + item);
+    //     return srcList.push(item)
+    //   })
+    //   return srcList
+    // },
+    realWidth() {
+      return typeof this.width === 'string' ? this.width : `${this.width}px`
+    },
+    realHeight() {
+      return typeof this.height === 'string' ? this.height : `${this.height}px`
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.el-image {
+  border-radius: 5px;
+  background-color: #ebeef5;
+  box-shadow: 0 0 5px 1px #ccc;
+  ::v-deep .el-image__inner {
+    transition: all 0.3s;
+    cursor: pointer;
+    &:hover {
+      transform: scale(1.2);
+    }
+  }
+  ::v-deep .image-slot {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    color: #909399;
+    font-size: 30px;
+  }
+}
+</style>

src/main.js

@@ -32,6 +32,8 @@ import Editor from "@/components/Editor"
 import FileUpload from "@/components/FileUpload"
 // 图片上传组件
 import ImageUpload from "@/components/ImageUpload"
+// 图片预览组件
+import ImagePreview from '@/components/ImagePreview'
 // 字典标签组件
 import DictTag from '@/components/DictTag'
 // 头部标签组件
@@ -60,6 +62,7 @@ Vue.component('RightToolbar', RightToolbar)
 Vue.component('Editor', Editor)
 Vue.component('FileUpload', FileUpload)
 Vue.component('ImageUpload', ImageUpload)
+Vue.component('ImagePreview', ImagePreview)
 Vue.component('FullScreenDialog', FullScreenDialog)
 Vue.component('UserDialog', UserDialog)
 

src/views/coupon/audit/detail.vue

 <template>
   <div class="app-container">
     <el-card class="card-layout">
-      <div class="detail-title">标题</div>
+      <div class="detail-title">
+        <div>状态: <dict-tag style="display: inline-block;" :options="dict.type.examine_status" :value="detail.examineStatus" /></div>
+      </div>
     </el-card>
 
     <el-card class="card-layout" style="margin-top: 20px;">
@@ -18,6 +20,62 @@
         <el-row>
           <el-col :span="12">有效期：{{detail.validityType === '1' ? `${detail.validityStartDate} ~ ${detail.validityEndDate}` : `领取后${detail.validityNum}天内`}}</el-col>
         </el-row>
+        <el-row>
+          <el-col :span="12">库存：{{ detail.issued }}</el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <div class="detail-label">领券限制：</div>
+            <div class="detail-value">
+              <div>每人总共可领取 {{detail.receiveTotal === -1 ? '不限制' : `${detail.receiveTotal}张`}} </div>
+              <div>每人每日可领取 {{detail.receiveDay === -1 ? '不限制' : `${detail.receiveDay}张`}} </div>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">适用门店：{{ detail.storeName }}</el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">优惠券照片：<ImagePreview :src="detail.url || ''" :src-list="[detail.url]" /></el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">使用须知：{{ detail.remarks }}</el-col>
+        </el-row>
+        <el-row v-if="detail.couponType === 'team'">
+          <el-col :span="12">套餐名称：{{ detail.mealTitle }}</el-col>
+        </el-row>
+        <el-row v-if="detail.couponType === 'team'">
+          <el-col :span="12">套餐原价：{{ detail.originalPrice }}元</el-col>
+        </el-row>
+        <el-row v-if="detail.couponType === 'team'">
+          <el-col :span="12">折扣价：{{ detail.presentPrice }}元</el-col>
+        </el-row>
+        <el-row v-if="detail.couponType === 'team'">
+          <el-col :span="12">备注：{{ detail.mealRemarks }}</el-col>
+        </el-row>
+        <template v-if="detail.couponType === 'team'">
+          <el-row v-for="(item, index) in detail.couponDetailList" :key="index">
+            <el-col :span="12">
+              <div style="width: 100%;">
+                <div>{{item.category}}</div>
+                <el-table :data="item.list" style="width: 100%;" size="small">
+                  <el-table-column label="菜品" prop="foodName">
+                  </el-table-column>
+                  <el-table-column label="份数" prop="foodNum">
+                  </el-table-column>
+                  <el-table-column label="价格" prop="foodPrice">
+                  </el-table-column>
+                </el-table>
+              </div>
+
+            </el-col>
+          </el-row>
+        </template>
+
+        <el-row>
+          <el-col :span="12">每日发放限制：{{ detail.grant === -1 ? '不限制' : `${detail.grant}张` }}</el-col>
+        </el-row>
+
         <!-- <el-row>
           <el-col :span="12">
             <div class="detail-label">默认决策：</div>
@@ -33,12 +91,6 @@
           <el-col :span="12">创建人：{{ detail.createBy }}</el-col>
         </el-row> -->
       </div>
-
-      <div class="detail-info">
-        <div class="detail-title-tip">决策配置信息</div>
-        <!-- <TreeFlowChartDetail ref="treeFlowChartDetail" :flow-data="flowData" /> -->
-        <ImagePreview :src="detail.policyImage || ''" :src-list="[detail.policyImage]" />
-      </div>
     </el-card>
 
   </div>
@@ -49,7 +101,7 @@ import { auditDetail } from '@/api/coupon/audit.js'
 
 export default {
   name: 'CouponAuditDetail',
-  dicts: ['coupon_type'],
+  dicts: ['coupon_type', 'examine_status'],
   data() {
     return {
       detail: {}