update: 查看示例

src/views/card/form.js

@@ -252,7 +252,8 @@ export default {
         code: '015f1e5a-3b2f-42f5-b638-6a29c17e8f7e',
         imgUrl: 'https://pic01-10001430.image.myqcloud.com/015f1e5a-3b2f-42f5-b638-6a29c17e8f7e'
       },
-      showWeimobDemoSelector: false
+      showWeimobDemoSelector: false,
+      showTipImg: false
     };
   },
   watch: {

src/views/card/form.vue

@@ -15,6 +15,10 @@
       </el-form-item>
       <el-form-item label="展示适用渠道文案" prop="channelTip">
         <dm-input v-model="form.channelTip" class="w400" placeholder="请输入小程序端展示的适用渠道文案" :byteType="1" :maxlength="18"></dm-input>
+        <div class="tip">
+          <el-button type="text" class="ml10" @mouseenter.native="showTipImg = true" @mouseleave.native="showTipImg = false">查看示例</el-button>
+          <img v-show="showTipImg" :src="require('@/assets/img/coupon-preview.png')" alt="" />
+        </div>
       </el-form-item>
       <el-form-item prop="cardName" label="卡券名称">
         <dm-input v-model="form.cardName" class="w400" placeholder="请输入卡券名称" :disabled="isEdit || isInfo" :byteType="1" :maxlength="30"></dm-input>
@@ -410,4 +414,13 @@ export default cardForm;
 .is-expand {
   transform: rotate(180deg);
 }
+.tip {
+  display: inline-block;
+  position: relative;
+  img {
+    position: absolute;
+    top: -126px;
+    left: 86px;
+  }
+}
 </style>