1

src/views/adminCenter/company/coupons/detail.vue

@@ -50,6 +50,32 @@
                   <el-input v-model="form.desc" type="textarea" :autosize="{ minRows: 4, maxRows: 6 }" show-word-limit disabled></el-input>
                 </el-form-item>
               </el-col>
+              <el-col :span="24" class="text">
+                <el-form-item label="创新券">
+                  <el-col :span="10" class="coupons">
+                    <el-col :span="24" class="coupons_1">
+                      <el-col :span="3" class="image">
+                        <el-image :src="logo"></el-image>
+                      </el-col>
+                      <el-col :span="21" class="title"> 环南湖科创先导区双创服务平台 </el-col>
+                    </el-col>
+                    <el-col :span="24" class="coupons_2">
+                      <p>科技创新券</p>
+                      <p>伍万圆</p>
+                    </el-col>
+                    <el-col :span="24" class="coupons_3">
+                      <p>
+                        有效期:
+                        <span>{{ getDate(form.create_time, '1') }}</span>
+                        -<span>{{ getDate('2021', '2') }}</span>
+                      </p>
+                      <p>
+                        NO.<span>{{ getDate(form.create_time, '3') }}</span>
+                      </p>
+                    </el-col>
+                  </el-col>
+                </el-form-item>
+              </el-col>
               <el-col :span="24" class="formBtn" v-if="form.status == ''">
                 <el-button type="danger" size="mini" @click="back">取消申领</el-button>
                 <el-button type="primary" size="mini" @click="onSubmit('form')">提交资料</el-button>
@@ -64,9 +90,11 @@
 
 <script>
 const _ = require('lodash');
+const moment = require('moment');
 const { policyType, policyStatus } = require('@common/dict/index');
 import { mapState, createNamespacedHelpers } from 'vuex';
 const { mapActions: policy } = createNamespacedHelpers('policy');
+moment.locale('zh-cn');
 export default {
   name: 'detail',
   props: {},
@@ -82,6 +110,7 @@ export default {
       rules: {},
       typeList: policyType,
       statusList: policyStatus,
+      logo: require('@a/jszx1.png'),
     };
   },
   created() {
@@ -118,6 +147,19 @@ export default {
     back() {
       this.$router.push({ path: '/adminCenter/company/coupons' });
     },
+    // 整理时间
+    getDate(date, type) {
+      if (type == '1') {
+        let newDate = moment(date).format('LL');
+        return newDate;
+      } else if (type == '2') {
+        let newDate = moment(date).endOf('year').format('LL');
+        return newDate;
+      } else if (type == '3') {
+        let newDate = moment().valueOf();
+        return newDate;
+      }
+    },
   },
   computed: {
     ...mapState(['user']),
@@ -164,6 +206,67 @@ export default {
         padding: 15px 0;
       }
     }
+    .coupons {
+      height: 250px;
+      border: 5px solid #008000;
+      line-height: normal;
+      padding: 5px;
+      background: #b3e2be5f;
+      .coupons_1 {
+        .image {
+          text-align: center;
+          .el-image {
+            width: 60px;
+            height: 60px;
+          }
+        }
+        .title {
+          height: 60px;
+          line-height: 60px;
+          font-size: 32px;
+          font-family: cursive;
+          color: #000;
+
+          font-weight: bold;
+          letter-spacing: 3px;
+        }
+      }
+      .coupons_2 {
+        p {
+          text-align: center;
+        }
+        p:nth-child(1) {
+          font-size: 60px;
+          font-family: cursive;
+          -webkit-text-stroke: 1px #000;
+          -webkit-text-fill-color: #cccccc5f;
+        }
+        p:nth-child(2) {
+          font-size: 40px;
+          font-family: cursive;
+          -webkit-text-stroke: 1px #000;
+          -webkit-text-fill-color: #cccccc5f;
+          letter-spacing: 15px;
+        }
+      }
+      .coupons_3 {
+        p {
+          text-align: center;
+          padding: 2px 0;
+        }
+        p:nth-child(1) {
+          font-size: 16px;
+          font-weight: bold;
+        }
+        p:nth-child(2) {
+          font-size: 16px;
+          font-weight: bold;
+          span {
+            color: #ff0000;
+          }
+        }
+      }
+    }
   }
 }
 .main:hover {