引流管理

src/views/drainageManage/drainageList/form/create.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-form :model="formData" :disabled="props.primary?.look" label-width="130px" ref="ruleForm" :rules="rules"
+  <el-form :model="formData" :disabled="props.primary?.look" label-width="140px" ref="ruleForm" :rules="rules"
     v-loading="loading" class="pr-4">
     <div class="flex flex-row justify-between">
       <div class="w-full">
@@ -14,7 +14,24 @@
             <el-option v-for="item in officialAccountsList" :key="item.id" :label="item.nick_name" :value="item.id" />
           </el-select>
         </el-form-item>
-        <el-form-item label="播放页弹窗设置" prop="pop_type">
+        <el-form-item label="播放页弹窗设置" prop="pop_type" label-width="140px">
+          <template #label>
+            <div class="flex items-center">
+              <el-tooltip placement="top">
+                <template #content>
+                  <div>强制关注：在设置的强关剧集展示关注弹窗，不关注无法观看后续剧集，弹窗不可关闭</div>
+                  <div>
+                    引导关注：在设置的关注剧集展示关注弹窗一次，以及在设置剧集及后每集都弹关注弹窗，不关注可观看后续短剧，用户点击空白处可关闭；
+                  </div>
+                  <div>不关注：不弹关注弹窗</div>
+                </template>
+                <el-icon>
+                  <InfoFilled />
+                </el-icon>
+              </el-tooltip>
+              <span>播放页弹窗设置</span>
+            </div>
+          </template>
           <el-radio-group v-model="formData.pop_type">
             <el-radio :label="1">强制关注</el-radio>
             <el-radio :label="2">引导关注</el-radio>
@@ -33,15 +50,15 @@
             <el-radio :label="2">关注二维码</el-radio>
           </el-radio-group>
         </el-form-item>
-        <el-form-item v-if="formData.link_type == 1" label="关注链接" prop="_link_url"
-          :rules="[{ required: true, message: '关注链接必须填写' }]" label-width="120px">
+        <el-form-item v-if="formData.link_type == 1" label="关注链接" prop="_link_url">
           <el-input style="width:300px;" autosize v-model="formData._link_url" auto-complete="off"
             placeholder="关注链接地址要与配置的公众号保存一致"></el-input>
           <el-popover placement="top" :width="300" trigger="click">
             <template #reference>
-              <el-text type="primary" class="cursor-pointer" style="margin-left: 16px">弹窗预览</el-text>
+              <el-text type="primary" v-if="formData._link_url" class="cursor-pointer"
+                style="margin-left: 16px">弹窗预览</el-text>
             </template>
-            <img src="@/assets/Icon.png" class="rounded-full w-7 h-7" />
+            <img src="@/assets/ertongguoxue.png" class="tan-img" />
           </el-popover>
         </el-form-item>
         <el-form-item v-if="formData.link_type == 2" label="关注二维码" prop="link_url">
@@ -53,9 +70,13 @@
           <div>
             <el-popover placement="top" :width="300" trigger="click">
               <template #reference>
-                <el-text type="primary" class="cursor-pointer" style="margin-left: 16px">弹窗预览</el-text>
+                <el-text type="primary" v-if="formData.link_url" class="cursor-pointer"
+                  style="margin-left: 16px">弹窗预览</el-text>
               </template>
-              <img src="@/assets/Icon.png" class="rounded-full w-7 h-7" />
+              <div class="code-wrapper">
+                <img src="@/assets/code.png" class="code-img" />
+                <img :src="formData.link_url" class="code" />
+              </div>
             </el-popover>
           </div>
         </el-form-item>
@@ -99,20 +120,21 @@ const rules = reactive({
     {
       required: true,
       message: '请选择播放页弹窗设置',
-      trigger: 'change'
+      trigger: 'change',
     }
   ],
   pop_type_sub: [
     {
       required: true,
-      message: '请选择弹窗类型',
-      trigger: 'change'
-    }
+      message: '请选择弹窗设置',
+      trigger: 'change',
+    },
+    { pattern: /^(1|2)$/, message: '请选择弹窗设置', trigger: 'change' }
   ],
   link_type: [
     {
       required: true,
-      message: '请选择弹窗设置',
+      message: '请选择弹窗类型',
       trigger: 'change'
     }
   ],
@@ -206,3 +228,24 @@ onMounted(() => {
   initRemoteOption('wechatPlatformOfficialAccountList')
 });
 </script>
+<style lang="scss" scoped>
+.tan-img {
+  object-fit: contain;
+}
+
+.code-wrapper {
+  .code-img {
+    object-fit: contain;
+  }
+
+  .code {
+    width: 136px;
+    height: 136px;
+    position: absolute;
+    border-radius: 9px;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+}
+</style>

src/views/drainageManage/drainageList/index.vue

@@ -13,7 +13,7 @@
         <template v-slot:content>
           <div class="table-default">
             <div class="pt-5 pl-2">
-              <el-button type="primary" v-action="'wechatPlatform.KFMessage.add'" size="default"
+              <el-button type="primary" v-action="'yinliu.yinliuManage.save'" size="default"
                 @click="openType('createVisible', null)">新增</el-button>
             </div>
             <el-table :data="tableData" class="mt-3" v-loading="loading">
@@ -43,15 +43,15 @@
               </el-table-column>
               <el-table-column label="操作" width="200" fixed="right">
                 <template #default="scope">
-                  <div v-action="'wechatPlatform.KFMessage.updateContent'">
+                  <div v-action="'yinliu.yinliuManage.save'">
                     <el-button link type="primary" size="small"
                       @click="openType('createVisible', scope.row)">编辑</el-button>
                   </div>
                   <div>
-                    <el-button link type="primary" size="small" v-action="'wechatPlatform.KFMessage.detail'"
+                    <el-button link type="primary" size="small"
                       @click="openType('createVisible', { look: true, ...scope.row })">查看</el-button>
                   </div>
-                  <div v-action="'wechatPlatform.KFMessage.delete'">
+                  <div v-action="'yinliu.yinliuManage.delete'">
                     <el-button link type="primary" size="small" @click="deleteChange(scope.row)">删除</el-button>
                   </div>
                 </template>