充值模板优化

src/i18n/languages/en.ts

@@ -1,6 +1,6 @@
 const en = {
   system: {
-    name: '追书云短剧平台',
+    name: '追剧云平台',
     chinese: 'Chinese',
     english: 'English',
     confirm: 'Confirm',

src/i18n/languages/zh.ts

@@ -1,6 +1,6 @@
 const zh = {
   system: {
-    name: '追书云短剧平台',
+    name: '追剧云平台',
     chinese: '中文',
     english: '英文',
     confirm: '确定',

src/styles/index.scss

@@ -10,3 +10,6 @@
 
 // theme
 @import 'theme/index';
+
+
+@import 'iphone.css';

src/styles/iphone.css

@@ -0,0 +1,239 @@
+.md-iphone-5 .md-body {
+  width: 100%;
+  height: 100%;
+  border-radius: 3.75em;
+  border-style: solid;
+  border-width: 0.375em;
+  position: relative;
+}
+
+.md-iphone-5 .md-screen {
+  position: relative;
+  margin: 0 auto;
+  background-color: #161616;
+  border-radius: 0.25em;
+  overflow: hidden;
+  box-shadow: 0 0 0px 3px #161616;
+}
+.md-iphone-5 .md-screen img {
+  width: 100%;
+}
+
+.md-iphone-5 .md-home-button {
+  display: block;
+  width: 3.625em;
+  height: 3.625em;
+  margin: 0 auto;
+  position: relative;
+  border-radius: 100%;
+  border: none;
+  cursor: default;
+  font-size: 100%;
+}
+.md-iphone-5 .md-home-button:after {
+  content: "";
+  display: block;
+  width: 1.125em;
+  height: 1.125em;
+  margin: 0 auto;
+  position: relative;
+  border-style: solid;
+  border-width: 0.125em;
+  border-radius: 0.25em;
+}
+
+.md-iphone-5 .md-front-camera {
+  width: 0.875em;
+  height: 0.875em;
+  margin: 0 auto;
+  position: relative;
+  border-radius: 100%;
+}
+.md-iphone-5 .md-front-camera:after {
+  content: "";
+  display: block;
+  width: 0.375em;
+  height: 0.375em;
+  position: relative;
+  top: 0.25em;
+  left: 0.25em;
+  background-color: #8c8091;
+  border-radius: 100%;
+}
+
+.md-iphone-5.md-glare:before {
+  content: "";
+  display: block;
+  width: 50%;
+  height: 83%;
+  position: absolute;
+  top: 0.625em;
+  right: 0.625em;
+  border-radius: 0 3.125em 0 0;
+  z-index: 1;
+}
+
+.md-iphone-5:after {
+  content: "";
+  display: block;
+  width: 3.3125em;
+  height: 0.1875em;
+  position: absolute;
+  right: 3.625em;
+  top: -0.1875em;
+  border-radius: 0.125em 0.125em 0 0;
+}
+
+.md-iphone-5 {
+  width: 22.8125em;
+  height: 49em;
+  position: relative;
+}
+.md-iphone-5 .md-front-camera {
+  top: 1.25em;
+}
+.md-iphone-5 .md-top-speaker {
+  width: 3.75em;
+  height: 0.875em;
+  margin: 0 auto;
+  position: relative;
+  top: 2.25em;
+  border-radius: 3.125em;
+}
+.md-iphone-5 .md-top-speaker:after {
+  content: "";
+  display: block;
+  width: 3.25em;
+  height: 0.375em;
+  margin: 0 auto;
+  position: relative;
+  top: 0.25em;
+  background-color: #4b414a;
+  border-radius: 3.125em;
+}
+.md-iphone-5 .md-screen {
+  width: 20em;
+  height: 35.5em;
+  top: 3.75em;
+}
+.md-iphone-5 .md-home-button {
+  bottom: -5.9375em;
+}
+.md-iphone-5 .md-buttons {
+  width: 0.1875em;
+  height: 1.875em;
+  position: absolute;
+  left: -0.5em;
+  top: 5.9375em;
+  border-radius: 0.125em 0 0 0.125em;
+}
+.md-iphone-5 .md-buttons:after, .md-iphone-5 .md-buttons:before {
+  content: "";
+  display: block;
+  position: absolute;
+  width: 0.1875em;
+  height: 1.5625em;
+  border-radius: 0.125em 0 0 0.125em;
+}
+.md-iphone-5 .md-buttons:after {
+  top: 3.125em;
+}
+.md-iphone-5 .md-buttons:before {
+  top: 6.25em;
+}
+.md-iphone-5.md-glare:before {
+  background: -webkit-linear-gradient(16deg, rgba(255, 255, 255, 0) 50%, rgba(247, 248, 240, 0.025) 50%, rgba(250, 245, 252, 0.08));
+  background: -moz-linear-gradient(16deg, rgba(255, 255, 255, 0) 50%, rgba(247, 248, 240, 0.025) 50%, rgba(250, 245, 252, 0.08));
+  background: -o-linear-gradient(16deg, rgba(255, 255, 255, 0) 50%, rgba(247, 248, 240, 0.025) 50%, rgba(250, 245, 252, 0.08));
+  background: linear-gradient(74deg, rgba(255, 255, 255, 0) 50%, rgba(247, 248, 240, 0.025) 50%, rgba(250, 245, 252, 0.08));
+}
+.md-iphone-5.md-landscape {
+  -webkit-transform: rotateZ(90deg);
+  -moz-transform: rotateZ(90deg);
+  -ms-transform: rotateZ(90deg);
+  -o-transform: rotateZ(90deg);
+  transform: rotateZ(90deg);
+}
+.md-iphone-5.md-landscape.md-glare:before {
+  -webkit-transform: rotateY(180deg);
+  -moz-transform: rotateY(180deg);
+  -ms-transform: rotateY(180deg);
+  -o-transform: rotateY(180deg);
+  transform: rotateY(180deg);
+  left: 0.625em;
+  top: 0.625em;
+}
+
+.md-white-device .md-front-camera, .md-white-device .md-top-speaker, .md-white-device .md-home-button {
+  background: -webkit-linear-gradient(#d0d0c5, #eeeeea);
+  background: -moz-linear-gradient(#d0d0c5, #eeeeea);
+  background: -o-linear-gradient(#d0d0c5, #eeeeea);
+  background: linear-gradient(#d0d0c5, #eeeeea);
+}
+
+.md-black-device .md-front-camera, .md-black-device .md-top-speaker, .md-black-device .md-home-button {
+  background: -webkit-linear-gradient(#141917, #202623);
+  background: -moz-linear-gradient(#141917, #202623);
+  background: -o-linear-gradient(#141917, #202623);
+  background: linear-gradient(#141917, #202623);
+}
+
+.md-white-device.md-landscape .md-home-button, .md-white-device.md-landscape .md-front-camera, .md-white-device.md-landscape .md-top-speaker {
+  background: -webkit-linear-gradient(left, #d0d0c5, #eeeeea);
+  background: -moz-linear-gradient(left, #d0d0c5, #eeeeea);
+  background: -o-linear-gradient(left, #d0d0c5, #eeeeea);
+  background: linear-gradient(to right, #d0d0c5, #eeeeea);
+}
+
+.md-black-device.md-landscape .md-home-button, .md-black-device.md-landscape .md-front-camera, .md-black-device.md-landscape .md-top-speaker {
+  background: -webkit-linear-gradient(left, #141917, #202623);
+  background: -moz-linear-gradient(left, #141917, #202623);
+  background: -o-linear-gradient(left, #141917, #202623);
+  background: linear-gradient(to right, #141917, #202623);
+}
+
+.md-white-device .md-body {
+  background-color: #ebebe4;
+  border-color: #f1f2eb;
+}
+.md-white-device .md-buttons {
+  background-color: #ebebe4;
+}
+.md-white-device .md-buttons:after, .md-white-device .md-buttons:before {
+  background-color: #ebebe4;
+}
+.md-white-device .md-front-camera:after {
+  background-color: #8c8091;
+}
+.md-white-device .md-top-speaker:after {
+  background-color: #4b414a;
+}
+.md-white-device .md-home-button:after {
+  border-color: #eff1e6;
+}
+.md-white-device:after {
+  background: #ebebe4;
+}
+
+.md-black-device .md-body {
+  background-color: #1b211e;
+  border-color: #282e2b;
+}
+.md-black-device .md-buttons {
+  background-color: #1b211e;
+}
+.md-black-device .md-buttons:after, .md-black-device .md-buttons:before {
+  background-color: #1b211e;
+}
+.md-black-device .md-front-camera:after {
+  background-color: #2c292f;
+}
+.md-black-device .md-top-speaker:after {
+  background-color: #191616;
+}
+.md-black-device .md-home-button:after {
+  border-color: #444a45;
+}
+.md-black-device:after {
+  background: #1b211e;
+}

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

@@ -0,0 +1,70 @@
+<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/index.vue

@@ -1,70 +1,32 @@
 <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>
+    <el-card shadow="always" :body-style="{ padding: '20px' }">
+      <el-tabs v-model="activeName" class="demo-tabs" @tab-change="handChange">
+        <el-tab-pane label="非首充模板" name="nofirstTemplate">
+          <nofirstTemplate v-if="activeName == 'nofirstTemplate'"></nofirstTemplate>
+        </el-tab-pane>
+        <el-tab-pane label="首充模板" name="firstTemplate">
+          <firstTemplate v-if="activeName == 'firstTemplate'"></firstTemplate>
+        </el-tab-pane>
+      </el-tabs>
+    </el-card>
   </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()
-  })
-};
+import { useRouter, useRoute } from 'vue-router'
+import type { TabsPaneContext } from 'element-plus'
+import nofirstTemplate from "./tabs/nofirstTemplate/index.vue"
+import firstTemplate from "./tabs/firstTemplate/index.vue"
+const router = useRouter()
+const route = useRoute()
+const handChange = (tab: TabsPaneContext, event: Event) => {
+  activeName.value = tab
+}
+const activeName = ref('nofirstTemplate')
 onMounted(() => {
-  search();
+  activeName.value = route.query.tab || 'nofirstTemplate'
 });
 </script>
+
+<style scoped lang="scss"></style>

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

@@ -0,0 +1,70 @@
+<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/form/create.vue

@@ -1,8 +1,8 @@
 <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">
@@ -11,44 +11,56 @@
         <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/nofirstTemplate/index.vue

@@ -0,0 +1,190 @@
+<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 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>
+
+<script lang="ts" setup>
+import { computed, onMounted, ref } from 'vue';
+import Create from './form/create.vue';
+import { useGetList } from '@/hook/curd/useGetList';
+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) {
+    primary.value = data.id
+  } else {
+    primary.value = data
+  }
+};
+const cancel = () => {
+  showCreate.value = false
+  search()
+};
+onMounted(() => {
+  search();
+  // query.value = Object.assign()
+});
+</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/dashboard/index.vue

@@ -3,7 +3,7 @@
     <div class="welcome">
       <div class="header">
         <!-- <img src="@/assets/logo.png" alt="logo" class="logo"> -->
-        <h1>追书云短剧平台</h1>
+        <h1>追剧云平台</h1>
       </div>
       <div class="content">
         <h2>欢迎使用</h2>

vite.config.js

@@ -76,7 +76,7 @@ export default defineConfig(({ command, mode }) => {
             enabledCollections: ['ep'] //@iconify-json/ep 是 Element Plus 的图标库
           }),
           // 自动导入 Element Plus 组件//dev环境会特别慢加上,build的时候可以放开
-          // ElementPlusResolver()
+          ElementPlusResolver()
         ],
         dirs: ['src/components/', 'src/layout/'],