充值模板优化

src/views/chargeManage copy/chargeTemplate/form/create.vue

@@ -1,220 +0,0 @@
-<template>
-  <el-card shadow="always" :body-style="{ padding: '20px' }">
-    <template #header>
-      <div class="card-header">
-        <span>{{ props.primary ? '编辑' : '添加' }}充值模板</span>
-      </div>
-    </template>
-    <el-form :model="dataForm" label-width="120px" 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-form-item>
-      <el-form-item label="充值档位" prop="options" :rules="[{ required: true, message: '请添加充值档位' }]">
-        <el-card class="w-full" shadow="never">
-          <div class="pt-5 pl-2">
-            <Add @click="openGears(null, null)" />
-          </div>
-          <el-table :data="tableData" class="w-full mt-3" v-loading="loading">
-            <el-table-column prop="price" label="价格">
-              <template #default="scope">
-                <span>{{ scope.row.price }}元</span>
-              </template>
-            </el-table-column>
-            <el-table-column prop="sequence_text" label="位置" />
-            <el-table-column prop="type_name" label="挡位类型" />
-            <el-table-column prop="charge_coin" label="充看币">
-              <template #default="scope">
-                <span v-if="!isShowKb(scope.row)">{{ Math.round(Number(scope.row.price) * 100) }}k币</span>
-                <span v-else>{{ scope.row.type_name }}</span>
-              </template>
-            </el-table-column>
-            <el-table-column prop="given" label="充看送币">
-              <template #default="scope">
-                <span>{{ scope.row.given }}k币</span>
-              </template>
-            </el-table-column>
-            <el-table-column prop="default_text" label="默认项">
-              <template #default="scope">
-                <span>{{ scope.row.is_default ? '默认项' : '非默认项' }}</span>
-              </template>
-            </el-table-column>
-            <el-table-column label="操作" width="200">
-              <template #default="scope">
-                <el-button link type="primary" size="small" @click="openGears(scope.$index, scope.row)">编辑</el-button>
-                <el-button link type="danger" size="small" @click.prevent="deleteRow(scope.$index)">删除</el-button>
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-card>
-      </el-form-item>
-      <el-form-item label="启用状态" prop="status" :rules="[{ required: true, message: '请设置启用状态' }]">
-        <el-switch v-model="dataForm.status" :active-value="1" :inactive-value="0" />
-      </el-form-item>
-      <div class="flex justify-start ml-9">
-        <el-button type="primary" size="default" @click="cancel">取消</el-button>
-        <el-button type="primary" @click="submitFormChange(form)">确认</el-button>
-      </div>
-    </el-form>
-    <Dialog v-model="visibleGears" :title="title" width="40%" destroy-on-close>
-      <createGears @close="gearsClose" @success="success" :data="tableData" :primary="gearsData" />
-    </Dialog>
-  </el-card>
-</template>
-
-<script lang="ts" setup>
-import { onMounted, ref } from 'vue';
-import {
-  channelPaytemplateShow,
-  channelPaytemplateStore,
-  channelPaytemplateUpdate,
-  channelPaytemplateOptionTypeList
-} from '@/api/charge/index'
-import { FormInstance } from 'element-plus';
-import createGears from './createGears.vue'
-const visibleGears = ref(false)
-const loading = ref(false)
-const gearsData = ref()
-const tableData = ref([])
-const form = ref()
-const emit = defineEmits(['close']);
-const dataForm = ref({ status: 1 })
-
-const title = computed(() =>
-  gearsData.value ?
-    '编辑充值档位' : '添加充值档位'
-)
-
-const optionTypeList = ref([]);
-const props = defineProps({
-  primary: String | Number | Object,
-  api: String,
-});
-const filtersObj = ['MONTH', 'QUARTER', 'YEAR']
-
-const isShowKb = (e) => {
-  return filtersObj.includes(e.type)
-}
-const gearsClose = () => {
-  visibleGears.value = false
-}
-const openGears = (index: number | null, row: object) => {
-  if (row) {
-    gearsData.value = row
-    gearsData.value.index = index
-    visibleGears.value = true
-  } else {
-    if (tableData.value.length >= 6) return ElMessageBox.alert('当前充值档位位置已满')
-    gearsData.value = null
-    visibleGears.value = true
-  }
-}
-const deleteRow = (index: number) => {
-  ElMessageBox.confirm(
-    '确定要删除此条充值档位吗?',
-    '提示',
-    {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-    }
-  )
-    .then(() => {
-      tableData.value.splice(index, 1)
-    })
-    .catch(() => {
-
-    })
-}
-const success = (e) => {
-  console.log(e, 'successsuccesssuccess');
-  const data = {
-    ...e,
-    ...e.typeObj,
-    ...e.sequenceObj
-  };
-  if (e.index != undefined) {
-    tableData.value[e.index] = data
-  } else {
-    tableData.value.push(data)
-  }
-}
-const cancel = () => {
-  emit('close')
-}
-const submitFormChange = (formEl: FormInstance | undefined) => {
-  if (!formEl) return;
-  dataForm.value.options = tableData.value.map(el => {
-    return {
-      price: Number(el.price),
-      type: el.type,
-      given: Number(el.given),
-      sequence: el.sequence,
-      is_default: el.is_default
-    }
-  })
-  loading.value = true;
-  formEl
-    .validate(valid => {
-      if (valid) {
-        const params = {
-          name: dataForm.value.name,
-          status: dataForm.value.status,
-          options: JSON.stringify(dataForm.value.options),
-        }
-        console.log(params, 'paramsparams');
-        if (props.primary) {
-          channelPaytemplateUpdate(dataForm.value.id, params).then(res => {
-            loading.value = false;
-            ElMessage.success(res.message)
-            emit('close')
-          }).catch(e => {
-            loading.value = false;
-          })
-        } else {
-          channelPaytemplateStore(params).then(res => {
-            loading.value = false;
-            ElMessage.success(res.message)
-            emit('close')
-          }).catch(e => {
-            loading.value = false;
-          })
-        }
-      } else {
-        loading.value = false;
-      }
-    })
-    .then(() => { });
-}
-
-if (props.primary) {
-  console.log(props.primary, 'props.primary');
-  channelPaytemplateShow(props.primary).then(res => {
-    dataForm.value = res.data.template_info
-    console.log(res, 'channelPaytemplateShowchannelPaytemplateShow');
-    tableData.value = res.data.template_item_list
-  })
-}
-
-onMounted(() => {
-  channelPaytemplateOptionTypeList().then(res => {
-    console.log(res);
-    optionTypeList.value = res.data
-
-  })
-});
-</script>
-<style scoped lang="scss">
-.item {
-  width: 300px;
-}
-
-.type-wrapper {
-  width: 80%;
-  display: flex;
-
-  .btn {
-    margin: 0 6px;
-  }
-}
-</style>

src/views/chargeManage copy/chargeTemplate/form/createGears.vue

@@ -1,204 +0,0 @@
-<template>
-  <el-form :model="formData" label-width="120px" ref="ruleForm" :rules="rules" class="pr-4">
-    <div class="flex flex-row justify-between">
-      <div class="w-full">
-        <el-form-item label="位置" prop="sequenceObj">
-          <el-select class="w-full" v-model="formData.sequenceObj" @change="sequenceChange" value-key="sequence"
-            filterable clearable placeholder="请选择位置">
-            <el-option v-for="(item, index) in optionSequence" :key="index" :label="item.sequence_text" :value="item" />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="档位类型" prop="typeObj">
-          <el-select class="w-full" v-model="formData.typeObj" value-key="type" filterable clearable
-            placeholder="请选择档位类型">
-            <el-option v-for="(item, index) in optionTypeList" :key="index" :label="item.type_name" :value="item" />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="价格" prop="price">
-          <div class="items-center w-full">
-            <span>充</span>
-            <el-input style="width:200px;margin:0 5px;" v-model="formData.price" placeholder="请输入金额">
-              <template #append>元</template>
-            </el-input>
-          </div>
-        </el-form-item>
-        <el-form-item prop="given" v-if="!isShowBi" style="margin-bottom:0px;">
-          <div class="items-center w-full">
-            <span>送</span>
-            <el-input style="width:200px;margin:0 5px;" v-model="formData.given" placeholder="请输入充送看币">
-              <template #append>币</template>
-            </el-input>
-          </div>
-        </el-form-item>
-        <el-form-item v-if="!isShowBi">
-          <div class="mt-4 text-sm text-gray-400">1元=100k币，充送看币不能超过当前价格的3倍</div>
-        </el-form-item>
-        <el-form-item label="默认项" prop="is_default">
-          <el-select class="mr-2 w-300" v-model="formData.is_default" @change="defaultChange" filterable clearable
-            placeholder="请选择默认项">
-            <el-option label="默认项" :value="1" />
-            <el-option label="非默认项" :value="0" />
-          </el-select>
-          <el-tooltip placement="top">
-            <template #content> 默认选中的充值档位 </template>
-            <el-icon>
-              <InfoFilled />
-            </el-icon>
-          </el-tooltip>
-        </el-form-item>
-      </div>
-    </div>
-    <div class="flex justify-end">
-      <el-button type="primary" @click="submitForm(ruleForm)">{{ $t('system.confirm') }}</el-button>
-    </div>
-  </el-form>
-</template>
-
-<script lang="ts" setup>
-import { InfoFilled } from '@element-plus/icons-vue';
-import type { FormInstance, FormRules } from 'element-plus'
-import {
-  channelPaytemplateOptionTypeList,
-  channelPaytemplateOptionOptionSequence
-} from '@/api/charge/index'
-const ruleForm = ref<FormInstance>()
-const props = defineProps({
-  primary: String | Number,
-  data: Array
-});
-
-const filtersObj = ['MONTH', 'QUARTER', 'YEAR']
-
-const isShowBi = computed(() => filtersObj.includes(formData.value?.typeObj?.type))
-const optionTypeList = ref([]);
-const optionSequence = ref([])
-const formData = ref({})
-const rules = reactive({
-  price: [
-    {
-      required: true,
-      message: '请输入金额',
-      trigger: 'blur'
-    },
-    { pattern: /^\d+(\.\d{1,2})?$/, message: '金额最多只能有两位小数', trigger: 'blur' },
-    { pattern: /^(?!0\d+)\d+(\.\d+)?$/, message: '请输入有效的金额', trigger: 'blur' },
-  ],
-  given: [
-    {
-      required: true,
-      message: '请输入充送看币',
-      trigger: 'blur'
-    },
-    { pattern: /^[1-9]\d*$/, message: '请输入正整数充送看币', trigger: 'blur' },
-  ],
-  sequenceObj: [
-    {
-      required: true,
-      message: '请选择位置',
-      trigger: 'change'
-    }
-  ],
-  typeObj: [
-    {
-      required: true,
-      message: '请选择档位类型',
-      trigger: 'change'
-    }
-  ],
-
-  is_default: [
-    {
-      required: true,
-      message: '请选择默认项',
-      trigger: 'change'
-    }
-  ],
-});
-const init = () => {
-  channelPaytemplateOptionTypeList().then(res => {
-    optionTypeList.value = res.data
-
-  })
-  channelPaytemplateOptionOptionSequence().then(res => {
-    optionSequence.value = res.data
-  })
-}
-
-const sequenceChange = (e) => {
-  const findSequence = props.data.find(el => el.sequence == e.sequence)
-  if (findSequence?.sequence_text) {
-    ElMessage.error(`${findSequence.sequence_text},已存在请重新选择`)
-    const timer = setTimeout(() => {
-      formData.value.sequenceObj = ''
-      clearTimeout(timer)
-    }, 300)
-  }
-}
-
-
-const defaultChange = (e) => {
-  console.log(e, 'defaultChange', props.data);
-}
-
-const submitForm = (formEl: FormInstance | undefined) => {
-  if (!formEl) return;
-  formEl
-    .validate(valid => {
-      if (valid) {
-        if (!formData.value.given) {
-          formData.value.given = 0
-        }
-        const findSequence = props.data.find(el => el.is_default == 1)
-        if (findSequence?.sequence_text && formData.value.is_default == 1) {
-          ElMessageBox.confirm(
-            `当前默认项为${findSequence.sequence_text}，确定要更改吗?`,
-            '提示',
-            {
-              confirmButtonText: '确定',
-              cancelButtonText: '取消',
-              type: 'warning',
-            }
-          )
-            .then(() => {
-              findSequence.is_default = 0
-              emit('success', formData.value)
-              emit('close')
-            })
-            .catch(() => {
-
-            })
-        } else {
-          emit('success', formData.value)
-          emit('close')
-        }
-
-
-
-      } else {
-      }
-    })
-    .then(() => { });
-}
-
-if (props.primary) {
-  formData.value = JSON.parse(JSON.stringify(props.primary))
-  formData.value.sequenceObj = { sequence_text: props.primary.sequence_text, sequence: props.primary.sequence }
-  formData.value.typeObj = { type_name: props.primary.type_name, type: props.primary.type }
-}
-
-const emit = defineEmits(['close', 'success']);
-onMounted(() => {
-  init()
-});
-</script>
-
-<style lang="scss" scoped>
-:deep(.form-item) {
-  display: inline-table;
-  width: 30%;
-}
-
-:deep(.form-item-price) {
-  flex-wrap: nowrap;
-}
-</style>

src/views/chargeManage copy/chargeTemplate/index.vue

@@ -1,70 +0,0 @@
-<template>
-  <div v-if="!showCreate">
-    <Search :search="search" :reset="reset">
-      <template v-slot:body>
-        <el-form-item label="模板名称">
-          <el-input v-model="query.name" clearable />
-        </el-form-item>
-      </template>
-    </Search>
-    <div class="table-default">
-      <div class="pt-5 pl-2">
-        <Add @click="openForm(null)" v-action="'channel.payTemplate.store'" />
-      </div>
-      <el-table :data="tableData" class="mt-3" v-loading="loading">
-        <el-table-column prop="name" label="模板名称" />
-        <el-table-column label="状态" v-action="'channel.payTemplate.updateStatus'">
-          <template #default="scope">
-            <el-switch v-model="scope.row.status" @change="statusChange($event, scope.row)" :active-value="1"
-              :inactive-value="0" />
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" width="200">
-          <template #default="scope">
-            <el-button link type="primary" size="small" @click="openForm(scope.row)"
-              v-action="'channel.payTemplate.update'">编辑</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-      <Paginate />
-    </div>
-  </div>
-  <Create v-else @close="cancel(search)" :primary="primary" :api="editapi" />
-</template>
-
-<script lang="ts" setup>
-import { computed, onMounted, ref } from 'vue';
-import Create from './form/create.vue';
-import { useGetList } from '@/hook/curd/useGetList';
-import { channelPaytemplateUpdateStatus } from '@/api/charge/index'
-
-const api = 'channel/paytemplate/list';
-let editapi = 'system/notices/notice/edit';
-let showCreate = ref(false)
-
-const { data, query, search, reset, loading } = useGetList(api, true);
-const tableData = computed(() => data.value?.data);
-const primary = ref({})
-
-const openForm = (data: any) => {
-  showCreate.value = true
-  if (data) {
-    primary.value = data.id
-  } else {
-    primary.value = data
-  }
-};
-const cancel = () => {
-  showCreate.value = false
-  search()
-};
-const statusChange = (e, row) => {
-  channelPaytemplateUpdateStatus(row.id, { status: e }).then(res => {
-    ElMessage.success(res.message)
-    search()
-  })
-};
-onMounted(() => {
-  search();
-});
-</script>

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

@@ -1,54 +1,66 @@
 <template>
-  <el-card shadow="always" :body-style="{ padding: '20px' }">
+  <el-card shadow="always" :body-style="{ padding: '10px' }">
     <template #header>
       <div class="card-header">
-        <span>{{ props.primary ? '编辑' : '添加' }}充值模板</span>
+        <span>{{ props.primary ? '编辑' : '添加' }}首充模板</span>
       </div>
     </template>
-    <el-form :model="dataForm" label-width="120px" ref="form" v-loading="loading" class="pr-6">
+    <el-form :model="dataForm" label-width="140px" 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-form-item>
       <el-form-item label="充值档位" prop="options" :rules="[{ required: true, message: '请添加充值档位' }]">
-        <el-card class="w-full" shadow="never">
-          <div class="pt-5 pl-2">
-            <Add @click="openGears(null, null)" />
+        <div class="flex flex-wrap justify-start w-full" shadow="never">
+          <div class="mr-6" style="width:600px;">
+            <div class="pt-5 pl-2">
+              <Add @click="openGears(null, null)" />
+            </div>
+            <el-table :data="tableData" class="w-full mt-3" v-loading="loading">
+              <el-table-column prop="price" label="价格">
+                <template #default="scope">
+                  <span>{{ scope.row.price }}元</span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="sequence_text" label="位置" />
+              <el-table-column prop="type_name" label="挡位类型" />
+              <el-table-column prop="default_text" label="默认项">
+                <template #default="scope">
+                  <span>{{ scope.row.is_default ? '默认项' : '非默认项' }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column label="操作" width="200">
+                <template #default="scope">
+                  <el-button link type="primary" size="small" @click="openGears(scope.$index, scope.row)">编辑</el-button>
+                  <el-button link type="danger" size="small" @click.prevent="deleteRow(scope.$index)">删除</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
           </div>
-          <el-table :data="tableData" class="w-full mt-3" v-loading="loading">
-            <el-table-column prop="price" label="价格">
-              <template #default="scope">
-                <span>{{ scope.row.price }}元</span>
-              </template>
-            </el-table-column>
-            <el-table-column prop="sequence_text" label="位置" />
-            <el-table-column prop="type_name" label="挡位类型" />
-            <el-table-column prop="charge_coin" label="充看币">
-              <template #default="scope">
-                <span v-if="!isShowKb(scope.row)">{{ Math.round(Number(scope.row.price) * 100) }}k币</span>
-                <span v-else>{{ scope.row.type_name }}</span>
-              </template>
-            </el-table-column>
-            <el-table-column prop="given" label="充看送币">
-              <template #default="scope">
-                <span>{{ scope.row.given }}k币</span>
-              </template>
-            </el-table-column>
-            <el-table-column prop="default_text" label="默认项">
-              <template #default="scope">
-                <span>{{ scope.row.is_default ? '默认项' : '非默认项' }}</span>
-              </template>
-            </el-table-column>
-            <el-table-column label="操作" width="200">
-              <template #default="scope">
-                <el-button link type="primary" size="small" @click="openGears(scope.$index, scope.row)">编辑</el-button>
-                <el-button link type="danger" size="small" @click.prevent="deleteRow(scope.$index)">删除</el-button>
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-card>
+          <div class="device-wrap">
+            <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 tableData" :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>
+        </div>
       </el-form-item>
-      <el-form-item label="启用状态" prop="status" :rules="[{ required: true, message: '请设置启用状态' }]">
+      <el-form-item label="是否为默认模板" prop="status" :rules="[{ required: true, message: '请设置是否为默认模板' }]">
         <el-switch v-model="dataForm.status" :active-value="1" :inactive-value="0" />
       </el-form-item>
       <div class="flex justify-start ml-9">
@@ -73,6 +85,7 @@ import {
 import { FormInstance } from 'element-plus';
 import createGears from './createGears.vue'
 const visibleGears = ref(false)
+const dialogVisible = ref(true)
 const loading = ref(false)
 const gearsData = ref()
 const tableData = ref([])
@@ -85,6 +98,14 @@ const title = computed(() =>
     '编辑充值档位' : '添加充值档位'
 )
 
+const gearsName = ref({
+  FIRST_COIN: "首充",
+  COIN: "普通充值",
+  YEAR: "包年",
+  QUARTER: "包季",
+  MONTH: "包月",
+})
+
 const optionTypeList = ref([]);
 const props = defineProps({
   primary: String | Number | Object,
@@ -217,4 +238,94 @@ onMounted(() => {
     margin: 0 6px;
   }
 }
+
+.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/chargeManage/chargeTemplate/tabs/firstTemplate/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div v-if="!showCreate">
-    <Search :search="search" :reset="reset">
+    <Search :search="search" :reset="resetQuery">
       <template v-slot:body>
         <el-form-item label="模板名称">
           <el-input v-model="query.name" clearable />
@@ -13,22 +13,42 @@
       </div>
       <el-table :data="tableData" class="mt-3" v-loading="loading">
         <el-table-column prop="name" label="模板名称" />
-        <el-table-column label="状态" v-action="'channel.payTemplate.updateStatus'">
-          <template #default="scope">
-            <el-switch v-model="scope.row.status" @change="statusChange($event, scope.row)" :active-value="1"
-              :inactive-value="0" />
-          </template>
-        </el-table-column>
+        <el-table-column prop="name" label="是否为默认模板" />
         <el-table-column label="操作" width="200">
           <template #default="scope">
             <el-button link type="primary" size="small" @click="openForm(scope.row)"
               v-action="'channel.payTemplate.update'">编辑</el-button>
+            <el-button link type="primary" size="small" @click="openDetail(scope.row)">查看详情</el-button>
           </template>
         </el-table-column>
       </el-table>
       <Paginate />
     </div>
+    <el-dialog v-model="dialogVisible" title="查看详情" width="30%">
+      <div class="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" :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-dialog>
   </div>
+
   <Create v-else @close="cancel(search)" :primary="primary" :api="editapi" />
 </template>
 
@@ -36,16 +56,30 @@
 import { computed, onMounted, ref } from 'vue';
 import Create from './form/create.vue';
 import { useGetList } from '@/hook/curd/useGetList';
-import { channelPaytemplateUpdateStatus } from '@/api/charge/index'
-
+import { channelPaytemplateShow } from '@/api/charge/index'
 const api = 'channel/paytemplate/list';
 let editapi = 'system/notices/notice/edit';
+const dialogVisible = ref(false)
+const detailData = ref([])
 let showCreate = ref(false)
-
+const gearsName = ref({
+  FIRST_COIN: "首充",
+  COIN: "普通充值",
+  YEAR: "包年",
+  QUARTER: "包季",
+  MONTH: "包月",
+})
 const { data, query, search, reset, loading } = useGetList(api, true);
 const tableData = computed(() => data.value?.data);
 const primary = ref({})
-
+const current = ref({})
+const openDetail = (row: object) => {
+  current.value = row;
+  channelPaytemplateShow(row.id).then(res => {
+    dialogVisible.value = true;
+    detailData.value = res.data.template_item_list
+  })
+}
 const openForm = (data: any) => {
   showCreate.value = true
   if (data) {
@@ -58,13 +92,103 @@ const cancel = () => {
   showCreate.value = false
   search()
 };
-const statusChange = (e, row) => {
-  channelPaytemplateUpdateStatus(row.id, { status: e }).then(res => {
-    ElMessage.success(res.message)
-    search()
-  })
-};
+const resetQuery = () => {
+  query.value = Object.assign({ page: query.value.page, limit: query.value.limit, type: 1 });
+  search()
+}
 onMounted(() => {
+  query.value = Object.assign({ page: query.value.page, limit: query.value.limit, type: 1 });
   search();
 });
 </script>
+<style lang="scss" scoped>
+.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/chargeManage/chargeTemplate/tabs/nofirstTemplate/form/create.vue

@@ -5,7 +5,7 @@
         <span>{{ props.primary ? '编辑' : '添加' }}非首充模板</span>
       </div>
     </template>
-    <el-form :model="dataForm" label-width="120px" ref="form" v-loading="loading" class="pr-6">
+    <el-form :model="dataForm" label-width="140px" 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 />

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

@@ -1,6 +1,6 @@
 <template>
   <div v-if="!showCreate">
-    <Search :search="search" :reset="reset">
+    <Search :search="search" :reset="resetQuery">
       <template v-slot:body>
         <el-form-item label="模板名称">
           <el-input v-model="query.name" clearable />
@@ -92,9 +92,13 @@ const cancel = () => {
   showCreate.value = false
   search()
 };
+const resetQuery = () => {
+  query.value = Object.assign({ page: query.value.page, limit: query.value.limit, type: 2 });
+  search()
+}
 onMounted(() => {
+  query.value = Object.assign({ page: query.value.page, limit: query.value.limit, type: 2 });
   search();
-  // query.value = Object.assign()
 });
 </script>
 <style lang="scss" scoped>

src/views/videoManage/videoLibraryList/detail.vue

@@ -85,6 +85,31 @@
       <el-form-item label="入口章节" prop="series_sequence" :rules="[{ required: false, message: '入口章节必须填写' }]">
         <el-input disabled v-model="current.series_name" name="author" clearable />
       </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="flex flex-col">
+          <div>
+            <el-select v-model="formDataForm.callback_config_id" filterable remote clearable :remote-method="remoteMethod"
+              placeholder="请选择首充模板">
+              <el-option v-for="(item, index) in firstTemplateList" :key="index" :label="item.name" :value="item.id" />
+            </el-select>
+          </div>
+          <div>
+            <el-select v-model="formDataForm.callback_config_id" filterable remote clearable :remote-method="remoteMethod"
+              placeholder="请选择非首充模板">
+              <el-option v-for="(item, index) in nofirstTemplate" :key="index" :label="item.name" :value="item.id" />
+            </el-select>
+          </div>
+          <div>
+            <el-button type="primary" link size="default" @click="addTemplate">新增模板</el-button>
+          </div>
+        </div>
+
+      </el-form-item>
       <div class="flex justify-end">
         <el-button type="primary" @click="submitForm(form)">{{
           $t('system.confirm')
@@ -102,6 +127,7 @@ import { useGetList } from '@/hook/curd/useGetList';
 import { useOpen } from '@/hook/curd/useOpen';
 import { FormInstance } from 'element-plus';
 import { tuiguangPromotionAdd } from '@/api/promotion/index'
+import { channelPaytemplateList } from '@/api/charge/index'
 const api = 'videoStock/episode/list';
 const props = defineProps({
   primary: String | Number,
@@ -118,6 +144,8 @@ const playVisible = ref(false)
 const linkVisible = ref(false)
 const { data, query, search, reset, loading } = useGetList(api);
 const { open, close, title, visible, id } = useOpen();
+const firstTemplateList = ref([])
+const nofirstTemplate = ref([])
 if (props.primary) {
   query.value.video_id = props.primary.id
   formDataForm.value.video_id = props.primary.id
@@ -128,6 +156,26 @@ const play = (e: object) => {
   current.value = e;
   playVisible.value = true;
 }
+const init = (params?: object) => {
+  channelPaytemplateList({ limit: 666, type: 1, ...params }).then(res => {
+    firstTemplateList.value = res.data
+  })
+  channelPaytemplateList({ limit: 666, type: 2, ...params }).then(res => {
+    nofirstTemplate.value = res.data
+  })
+}
+
+const remoteMethod = (query: string) => {
+  if (query) {
+    init({ name: query })
+  } else {
+    init()
+  }
+}
+const addTemplate = () => {
+  router.push({ path: '/chargeManage/charge', query: { id: props.primary.id } })
+}
+
 const createLink = (e: object) => {
   current.value = e;
   formDataForm.value.series_sequence = e.series_sequence
@@ -156,6 +204,7 @@ const submitForm = (formEl: FormInstance | undefined) => {
 
 onMounted(() => {
   search();
+  init()
 });
 </script>