充值模板等

src/views/chargeManage/chargeTemplate/tabs/firstTemplate/form/create.vue

@@ -1,18 +1,18 @@
 <template>
-  <el-card shadow="always" :body-style="{ padding: '10px' }">
+  <el-card shadow="always" style="overflow: auto;" :body-style="{ padding: '10px' }">
     <template #header>
       <div class="card-header">
         <span>{{ props.primary ? '编辑' : '添加' }}首充模板</span>
       </div>
     </template>
-    <el-form :model="dataForm" label-width="140px" ref="form" v-loading="loading" class="pr-6">
+    <el-form :model="dataForm" label-width="130px" ref="form" v-loading="loading" class="pr-6">
       <el-form-item label="模板名称" prop="name"
         :rules="[{ required: true, message: '模板名称必须填写' }, { max: 20, message: '至多输入20个字符', trigger: 'blur' }]">
-        <el-input :disabled="Boolean(props.primary)" class="item" v-model="dataForm.name" clearable />
+        <el-input class="item" v-model="dataForm.name" clearable />
       </el-form-item>
       <el-form-item label="充值档位" prop="options" :rules="[{ required: true, message: '请添加充值档位' }]">
-        <div class="flex flex-wrap justify-start w-full" shadow="never">
-          <div class="mr-6" style="width:600px;">
+        <div class="flex justify-start w-full" shadow="never">
+          <div class="mr-6" style="min-width:400px;">
             <div class="pt-5 pl-2">
               <Add @click="openGears(null, null)" />
             </div>
@@ -60,7 +60,8 @@
           </div>
         </div>
       </el-form-item>
-      <el-form-item label="是否为默认模板" prop="status" :rules="[{ required: true, message: '请设置是否为默认模板' }]">
+      <el-form-item label="是否为默认模板" prop="status" :rules="[{ required: true, message: '请设置是否为默认模板' }]"
+        v-if="!rolesIdentify.includes('optimizer')">
         <el-switch v-model="dataForm.status" :active-value="1" :inactive-value="0" />
       </el-form-item>
       <div class="flex justify-start ml-9">
@@ -83,7 +84,8 @@ import {
   channelPaytemplateOptionTypeList
 } from '@/api/charge/index'
 import { FormInstance } from 'element-plus';
-import createGears from './createGears.vue'
+import createGears from './createGears.vue';
+const rolesIdentify = inject('rolesIdentify')
 const visibleGears = ref(false)
 const dialogVisible = ref(true)
 const loading = ref(false)
@@ -91,7 +93,7 @@ const gearsData = ref()
 const tableData = ref([])
 const form = ref()
 const emit = defineEmits(['close']);
-const dataForm = ref({ status: 1 })
+const dataForm = ref({ status: 1, type: 1 })
 
 const title = computed(() =>
   gearsData.value ?
@@ -182,6 +184,7 @@ const submitFormChange = (formEl: FormInstance | undefined) => {
           name: dataForm.value.name,
           status: dataForm.value.status,
           options: JSON.stringify(dataForm.value.options),
+          type: dataForm.value.type,
         }
         console.log(params, 'paramsparams');
         if (props.primary) {

src/views/chargeManage/chargeTemplate/tabs/firstTemplate/index.vue

@@ -13,7 +13,7 @@
       </div>
       <el-table :data="tableData" class="mt-3" v-loading="loading">
         <el-table-column prop="name" label="模板名称" />
-        <el-table-column prop="name" label="是否为默认模板" />
+        <el-table-column prop="status_str" label="是否为默认模板" v-if="!rolesIdentify.includes('optimizer')" />
         <el-table-column label="操作" width="200">
           <template #default="scope">
             <el-button link type="primary" size="small" @click="openForm(scope.row)"
@@ -59,6 +59,7 @@ import { useGetList } from '@/hook/curd/useGetList';
 import { channelPaytemplateShow } from '@/api/charge/index'
 const api = 'channel/paytemplate/list';
 let editapi = 'system/notices/notice/edit';
+const rolesIdentify = inject('rolesIdentify')
 const dialogVisible = ref(false)
 const detailData = ref([])
 let showCreate = ref(false)

src/views/chargeManage/chargeTemplate/tabs/nofirstTemplate/form/create.vue

@@ -1,18 +1,18 @@
 <template>
-  <el-card shadow="always" :body-style="{ padding: '10px' }">
+  <el-card shadow="always" style="overflow: auto;" :body-style="{ padding: '10px' }">
     <template #header>
       <div class="card-header">
         <span>{{ props.primary ? '编辑' : '添加' }}非首充模板</span>
       </div>
     </template>
-    <el-form :model="dataForm" label-width="140px" ref="form" v-loading="loading" class="pr-6">
+    <el-form :model="dataForm" label-width="130px" ref="form" v-loading="loading" class="pr-6">
       <el-form-item label="模板名称" prop="name"
         :rules="[{ required: true, message: '模板名称必须填写' }, { max: 20, message: '至多输入20个字符', trigger: 'blur' }]">
-        <el-input :disabled="Boolean(props.primary)" class="item" v-model="dataForm.name" clearable />
+        <el-input class="item" v-model="dataForm.name" clearable />
       </el-form-item>
       <el-form-item label="充值档位" prop="options" :rules="[{ required: true, message: '请添加充值档位' }]">
-        <div class="flex flex-wrap justify-start w-full" shadow="never">
-          <div class="mr-6" style="width:600px;">
+        <div class="flex justify-start w-full" shadow="never">
+          <div class="mr-6" style="min-width:400px;">
             <div class="pt-5 pl-2">
               <Add @click="openGears(null, null)" />
             </div>
@@ -60,7 +60,8 @@
           </div>
         </div>
       </el-form-item>
-      <el-form-item label="是否为默认模板" prop="status" :rules="[{ required: true, message: '请设置是否为默认模板' }]">
+      <el-form-item label="是否为默认模板" prop="status" :rules="[{ required: true, message: '请设置是否为默认模板' }]"
+        v-if="!rolesIdentify.includes('optimizer')">
         <el-switch v-model="dataForm.status" :active-value="1" :inactive-value="0" />
       </el-form-item>
       <div class="flex justify-start ml-9">
@@ -83,7 +84,8 @@ import {
   channelPaytemplateOptionTypeList
 } from '@/api/charge/index'
 import { FormInstance } from 'element-plus';
-import createGears from './createGears.vue'
+import createGears from './createGears.vue';
+const rolesIdentify = inject('rolesIdentify')
 const visibleGears = ref(false)
 const dialogVisible = ref(true)
 const loading = ref(false)
@@ -91,7 +93,7 @@ const gearsData = ref()
 const tableData = ref([])
 const form = ref()
 const emit = defineEmits(['close']);
-const dataForm = ref({ status: 1 })
+const dataForm = ref({ status: 1, type: 2 })
 
 const title = computed(() =>
   gearsData.value ?
@@ -182,6 +184,7 @@ const submitFormChange = (formEl: FormInstance | undefined) => {
           name: dataForm.value.name,
           status: dataForm.value.status,
           options: JSON.stringify(dataForm.value.options),
+          type: dataForm.value.type,
         }
         console.log(params, 'paramsparams');
         if (props.primary) {

src/views/chargeManage/chargeTemplate/tabs/nofirstTemplate/index.vue

@@ -13,7 +13,7 @@
       </div>
       <el-table :data="tableData" class="mt-3" v-loading="loading">
         <el-table-column prop="name" label="模板名称" />
-        <el-table-column prop="name" label="是否为默认模板" />
+        <el-table-column prop="status_str" label="是否为默认模板" v-if="!rolesIdentify.includes('optimizer')" />
         <el-table-column label="操作" width="200">
           <template #default="scope">
             <el-button link type="primary" size="small" @click="openForm(scope.row)"
@@ -59,6 +59,7 @@ import { useGetList } from '@/hook/curd/useGetList';
 import { channelPaytemplateShow } from '@/api/charge/index'
 const api = 'channel/paytemplate/list';
 let editapi = 'system/notices/notice/edit';
+const rolesIdentify = inject('rolesIdentify')
 const dialogVisible = ref(false)
 const detailData = ref([])
 let showCreate = ref(false)

src/views/promotion/promotionList/form/create.vue

@@ -10,6 +10,33 @@
           :value="item.series_sequence" />
       </el-select>
     </el-form-item>
+    <el-form-item label="充值模板配置">
+      <template #label>
+        <div class="flex items-center">
+          <span class="mr-1 text-red-600">*</span>充值模板配置
+        </div>
+      </template>
+      <div class="items-center w-full withdraw-popup-warn">
+        <div>如果没有目标充值模板，请前往<span class="text-lg font-bold text-blue-400 cursor-pointer" @click="toCharge">充值管理</span>进行添加
+        </div>
+      </div>
+      <div class="flex flex-col">
+        <div class="flex items-center">
+          <div style="width:80px;text-align: end;" class="mb-3 mr-2">首充模板:</div>
+          <el-select v-model="formDataForm.first_charge_template_id" filterable remote clearable
+            :remote-method="(query) => { remoteMethod(query, 'firstCharge') }" placeholder="请选择首充模板">
+            <el-option v-for="(item, index) in firstTemplateList" :key="index" :label="item.name" :value="item.id" />
+          </el-select>
+        </div>
+        <div class="flex items-center">
+          <div style="width:80px;text-align: end;" class="mr-2">非首充模板:</div>
+          <el-select v-model="formDataForm.not_first_charge_template_id" filterable remote clearable
+            :remote-method="(query) => { remoteMethod(query, 'notFirstCharge') }" placeholder="请选择非首充模板">
+            <el-option v-for="(item, index) in nofirstTemplate" :key="index" :label="item.name" :value="item.id" />
+          </el-select>
+        </div>
+      </div>
+    </el-form-item>
     <el-form-item label="备注" prop="name" :rules="[{ required: false, message: '备注必须填写' }]">
       <el-input v-model="formDataForm.remark" clearable />
     </el-form-item>
@@ -26,31 +53,77 @@ import Cache from '@/support/cache';
 import { FormInstance } from 'element-plus';
 import { videoStockEpisodeList } from '@/api/video/index'
 import { tuiguangPromotionUpdateSeriesSequence } from '@/api/promotion/index'
+import { channelPaytemplateList } from '@/api/charge/index'
 const props = defineProps({
   primary: String | Number,
 });
+const router = useRouter()
 const emit = defineEmits(['close']);
 const loading = ref(false)
 const form = ref()
+const firstTemplateList = ref([])
+const nofirstTemplate = ref([])
 const sequenceOptions = ref([])
 const formDataForm = ref({})
 if (props.primary) {
-  formDataForm.value.id = props.primary.id
-  formDataForm.value.series_sequence = props.primary.series_sequence
+  formDataForm.value = JSON.parse(JSON.stringify(props.primary))
   console.log(props.primary, 'props.primaryprops.primary');
 }
 
+
+const remoteMethod = (query: string, type: string,) => {
+  console.log(query, 'queryquery', type);
+  switch (type) {
+    case 'firstCharge':
+      initRemoteOption('firstCharge', { name: query })
+      break;
+    case 'notFirstCharge':
+      initRemoteOption('notFirstCharge', { name: query })
+      break;
+  }
+}
+const toCharge = () => {
+  router.push({ path: '/chargeManage/charge' })
+}
+
+const initRemoteOption = (type: string, params?: object) => {
+  switch (type) {
+    case 'firstCharge':
+      channelPaytemplateList({ limit: 999, type: 1, ...params }).then(res => {
+        firstTemplateList.value = res.data
+      })
+      break;
+    case 'notFirstCharge':
+      channelPaytemplateList({ limit: 999, type: 2, ...params }).then(res => {
+        nofirstTemplate.value = res.data
+      })
+      break;
+  }
+}
+
+
 const submitForm = (formEl: FormInstance | undefined) => {
+  if (!formDataForm.value.first_charge_template_id) return ElMessage.error('请选择首充模板')
+  if (!formDataForm.value.not_first_charge_template_id) return ElMessage.error('请选择非首充模板')
   loading.value = true;
   if (!formEl) return;
   formEl
     .validate(valid => {
       if (valid) {
-        tuiguangPromotionUpdateSeriesSequence(formDataForm.value).then(res => {
+        const params = {
+          id: formDataForm.value.id,
+          series_sequence: formDataForm.value.series_sequence,
+          remark: formDataForm.value.remark,
+          first_charge_template_id: formDataForm.value.first_charge_template_id,
+          not_first_charge_template_id: formDataForm.value.not_first_charge_template_id,
+        }
+        tuiguangPromotionUpdateSeriesSequence(params).then(res => {
           console.log(res, 'tuiguangPromotionAddtuiguangPromotionAdd');
           ElMessage.success(res.message)
           emit('close')
           loading.value = false;
+        }).catch(e => {
+          loading.value = false;
         })
       } else {
         loading.value = false;
@@ -59,12 +132,16 @@ const submitForm = (formEl: FormInstance | undefined) => {
     .then(() => { });
 }
 const initSequence = (params?: object) => {
-  videoStockEpisodeList({ video_id: props.primary.video_id, limit: 300, ...params }).then(res => {
+  videoStockEpisodeList({ video_id: props.primary.video_id, limit: 999, ...params }).then(res => {
     sequenceOptions.value = res.data
   })
 }
 
 onMounted(() => {
+  initRemoteOption('firstCharge')
+  initRemoteOption('notFirstCharge')
+  // initRemoteOption('firstCharge', { name: props.primary.first_charge_template_str.slice(0, 1) })
+  // initRemoteOption('notFirstCharge', { name: props.primary.not_first_charge_template_str.slice(0, 1) })
   initSequence()
 });
 </script>

src/views/promotion/promotionList/index.vue

@@ -118,6 +118,12 @@
                   </div>
                 </template>
               </el-table-column>
+              <el-table-column prop="total_episode_num" label="充值模板" min-width="130px">
+                <template #default="scope">
+                  <el-button v-if="scope.row.first_charge_template_str || scope.row.not_first_charge_template_str" link
+                    type="primary" size="default" @click="openDetail(scope.row)">充值模板详情</el-button>
+                </template>
+              </el-table-column>
               <el-table-column prop="callback_config_id" label="备注">
                 <template #default="scope">
                   <div class="wrapper">
@@ -146,7 +152,7 @@
               <el-table-column label="推广名称" show-overflow-tooltip>
                 <template #default="scope">
                   <div class="wrapper">
-                    <span class="text-lg font-bold text-blue-400 content">
+                    <span class="content">
                       {{ scope.row.name }}
                     </span>
                   </div>
@@ -159,7 +165,7 @@
               <el-table-column prop="total_episode_num" label="入口章节">
                 <template #default="scope">
                   <div class="wrapper">
-                    <span class="text-lg font-bold text-blue-400 content">
+                    <span class="content">
                       {{ scope.row.video_name }}
                     </span>
                   </div>
@@ -168,6 +174,12 @@
                   </div>
                 </template>
               </el-table-column>
+              <el-table-column prop="total_episode_num" label="充值模板" min-width="130px">
+                <template #default="scope">
+                  <el-button v-if="scope.row.first_charge_template_str || scope.row.not_first_charge_template_str" link
+                    type="primary" size="default" @click="openDetail(scope.row)">充值模板详情</el-button>
+                </template>
+              </el-table-column>
               <el-table-column label="操作">
                 <template #default="scope">
                   <el-button @click="openType('promotionVisible', scope.row)" link type="primary"
@@ -192,6 +204,67 @@
     <Dialog v-model="backConfigVisible" width="50%" :title="titleBack" destroy-on-close>
       <backConfig @close="closeType('backConfigVisible')" :primary="backConfigData"></backConfig>
     </Dialog>
+
+    <el-dialog v-model="dialogVisible" title="充值模板详情" width="85%">
+      <div class="flex items-center justify-center">
+        <el-card class="w-full mr-16 box-card" shadow="never">
+          <template #header>
+            <div class="card-header">
+              <span>首充模板</span>
+            </div>
+          </template>
+          <div class="w-full device-wrap" style="margin:0 auto;">
+            <div class="md-iphone-5 md-white-device">
+              <div class="md-body">
+                <div class="md-buttons"></div>
+                <div class="md-front-camera"></div>
+                <div class="md-top-speaker"></div>
+                <div class="md-screen">
+                  <img src="@/assets/pay-config-bg.jpg" alt="" />
+                  <div class="preview-list">
+                    <div class="pay-item" v-for="(row, i) in detailData?.firstTemplate" :key="i"
+                      :class="[row.is_default == 1 ? 'defalut' : '']">
+                      <p>{{ row.price }}元</p>
+                      <p v-show="row.given">多送{{ row.given }}看币</p>
+                      <div class="tipss">{{ gearsName[row.type] }}</div>
+                    </div>
+                  </div>
+                </div>
+                <button class="md-home-button"></button>
+              </div>
+            </div>
+          </div>
+        </el-card>
+        <el-card class="w-full box-card" shadow="never">
+          <template #header>
+            <div class="card-header">
+              <span>非首充模板</span>
+            </div>
+          </template>
+          <div class="w-full device-wrap" style="margin:0 auto;">
+            <div class="md-iphone-5 md-white-device">
+              <div class="md-body">
+                <div class="md-buttons"></div>
+                <div class="md-front-camera"></div>
+                <div class="md-top-speaker"></div>
+                <div class="md-screen">
+                  <img src="@/assets/pay-config-bg.jpg" alt="" />
+                  <div class="preview-list">
+                    <div class="pay-item" v-for="(row, i) in detailData?.notFirstTemplate" :key="i"
+                      :class="[row.is_default == 1 ? 'defalut' : '']">
+                      <p>{{ row.price }}元</p>
+                      <p v-show="row.given">多送{{ row.given }}看币</p>
+                      <div class="tipss">{{ gearsName[row.type] }}</div>
+                    </div>
+                  </div>
+                </div>
+                <button class="md-home-button"></button>
+              </div>
+            </div>
+          </div>
+        </el-card>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -206,6 +279,7 @@ import { useGetList } from '@/hook/curd/useGetList';
 import Cache from '@/support/cache';
 const activeName = ref(1)
 import { tuiguangPromotionDel } from '@/api/promotion/index'
+import { channelPaytemplateShow } from '@/api/charge/index'
 const api = 'tuiguang/promotion/list';
 const router = useRouter()
 const route = useRoute()
@@ -215,7 +289,17 @@ const promotionData = ref({})
 const backConfigVisible = ref(false)
 const backConfigData = ref({})
 const current = ref({})
+const dialogVisible = ref(false)
+const detailData = ref({ firstTemplate: [], notFirstTemplate: [] })
 const titleBack = computed(() => activeName.value ? '更新回传配置' : '回传配置')
+const gearsName = ref({
+  FIRST_COIN: "首充",
+  COIN: "普通充值",
+  YEAR: "包年",
+  QUARTER: "包季",
+  MONTH: "包月",
+})
+
 const colorType = (data: object) => {
   const type = data.status
   switch (type) {
@@ -236,6 +320,19 @@ const timeChange = (e) => {
   }
 }
 
+const openDetail = (row: object) => {
+  current.value = row;
+  channelPaytemplateShow(row.first_charge_template_id).then(res => {
+    dialogVisible.value = true;
+    detailData.value.firstTemplate = res.data.template_item_list
+  })
+  channelPaytemplateShow(row.not_first_charge_template_id).then(res => {
+    dialogVisible.value = true;
+    detailData.value.notFirstTemplate = res.data.template_item_list
+  })
+  console.log(detailData.value, 'detailData.valuedetailData.value');
+}
+
 const goToTtHuicHuan = (row: object) => {
   router.push({ path: '/payback/juliangAccount', query: { id: row.callback_config_id } })
 }
@@ -345,4 +442,94 @@ onMounted(() => {
     }
   }
 }
+
+.device-wrap {
+  width: 350px;
+  margin-left: 20px;
+  margin-top: 20px;
+
+  img {
+    width: 100%;
+    height: 100%;
+    border-bottom-left-radius: 40px;
+    border-bottom-right-radius: 40px;
+  }
+
+  .preview-list {
+    position: absolute;
+    top: 100px;
+    left: 0;
+    right: 0;
+    padding: 15px;
+    padding-top: 30px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-flow: row wrap;
+  }
+
+  .pay-item {
+    width: 46%;
+    margin-right: 4%;
+    height: 80px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 10px;
+    background: #e6e6e6;
+    border-radius: 10px;
+    position: relative;
+    box-sizing: border-box;
+    overflow: hidden;
+
+    &.defalut {
+      border: 1px solid #fd555d;
+    }
+
+    .tipss {
+      position: absolute;
+      right: 0;
+      height: 20px;
+      line-height: 20px;
+      top: 0;
+      padding: 0 4px;
+      background-color: #fd555d;
+      color: #fff;
+      font-size: 12px;
+    }
+
+    &:nth-child(2n) {
+      margin-right: 0;
+    }
+
+    p {
+      width: 100%;
+      line-height: 20px;
+      color: #000;
+      font-size: 12px;
+      text-align: center;
+
+      &:first-child {
+        font-size: 14px;
+        font-weight: bold;
+
+        span {
+          display: inline-block;
+          padding: 0 2px;
+          background: #fd555d;
+          color: #fff;
+          font-size: 10px;
+          margin-left: 5px;
+          vertical-align: top;
+          transform: scale(0.8);
+        }
+      }
+
+      &:last-child {
+        color: #666;
+      }
+    }
+  }
+}
 </style>

src/views/videoManage/videoLibraryList/detail.vue

@@ -96,13 +96,15 @@
               @click="toCharge">充值管理</span>进行添加</div>
         </div>
         <div class="flex flex-col">
-          <div>
+          <div class="flex items-center">
+            <div style="width:80px;text-align: end;" class="mb-3 mr-2">首充模板:</div>
             <el-select v-model="formDataForm.first_charge_template_id" filterable remote clearable
               :remote-method="(query) => { remoteMethod(query, 'firstCharge') }" placeholder="请选择首充模板">
               <el-option v-for="(item, index) in firstTemplateList" :key="index" :label="item.name" :value="item.id" />
             </el-select>
           </div>
-          <div>
+          <div class="flex items-center">
+            <div style="width:80px;text-align: end;" class="mr-2">非首充模板:</div>
             <el-select v-model="formDataForm.not_first_charge_template_id" filterable remote clearable
               :remote-method="(query) => { remoteMethod(query, 'notFirstCharge') }" placeholder="请选择非首充模板">
               <el-option v-for="(item, index) in nofirstTemplate" :key="index" :label="item.name" :value="item.id" />
@@ -175,12 +177,12 @@ const toCharge = () => {
 const initRemoteOption = (type: string, params?: object) => {
   switch (type) {
     case 'firstCharge':
-      channelPaytemplateList({ limit: 666, type: 1, ...params }).then(res => {
+      channelPaytemplateList({ limit: 999, type: 1, ...params }).then(res => {
         firstTemplateList.value = res.data
       })
       break;
     case 'notFirstCharge':
-      channelPaytemplateList({ limit: 666, type: 2, ...params }).then(res => {
+      channelPaytemplateList({ limit: 999, type: 2, ...params }).then(res => {
         nofirstTemplate.value = res.data
       })
       break;
@@ -235,11 +237,8 @@ video#my-player.video-js {
 }
 
 .withdraw-popup-warn {
-  padding: 10px;
   margin-bottom: 10px;
   font-weight: 600;
   line-height: 1.8;
-  padding-left: 30px;
-  background-color: #ffecf4;
 }
 </style>

src/views/videoManage/videoLibraryList/index.vue

@@ -179,7 +179,6 @@ import moment from 'moment';
 import { videoStockVideoUpdate, videoStockVideoAdd, videoStockVideoCategoryList } from '@/api/video/index'
 import { useUserStore } from '@/stores/modules/user/index'
 import Cache from '@/support/cache';
-import { fa } from 'element-plus/es/locale';
 const ismulSet = ref(false)
 const api = 'videoStock/video/list';
 const addApi = 'contentManage/book/edit_author';