refactor: define setup in script label

web/src/views/Contract.vue

@@ -170,7 +170,7 @@
     </div>
 </template>
 
-<script>
+<script setup>
 import { ref, reactive, onMounted, createVNode } from 'vue';
 import { SearchOutlined, ExclamationCircleOutlined, ExportOutlined } from '@ant-design/icons-vue';
 import moment from 'moment'
@@ -179,132 +179,125 @@ import { queryProductList } from "../api/product";
 import { queryCustomerOption } from "../api/customer";
 import { message, Modal } from 'ant-design-vue';
 
-export default {
+// 合同表格字段
-    components: {
+const columns = [{
-        SearchOutlined,
-        ExportOutlined
-    },
-    setup() {
-
-        // 合同表格字段
-        const columns = [{
     title: '合同编号',
     dataIndex: 'id',
     width: 100,
     fixed: 'left',
     ellipsis: true,
-        }, {
+}, {
     title: '合同名称',
     dataIndex: 'name',
     width: 100,
     fixed: 'left',
     ellipsis: true,
-        }, {
+}, {
     title: '客户名称',
     dataIndex: 'cname',
     width: 240,
-        }, {
+}, {
     title: '合同金额',
     dataIndex: 'amount',
     width: 100,
-        }, {
+}, {
     title: '合同开始时间',
     dataIndex: 'beginTime',
     width: 150,
-        }, {
+}, {
     title: '合同结束时间',
     dataIndex: 'overTime',
     width: 150,
-        }, {
+}, {
     title: '备注',
     dataIndex: 'remarks',
     width: 240,
     ellipsis: true,
-        }, {
+}, {
     title: '签约状态',
     dataIndex: 'status',
     width: 100,
     ellipsis: true,
-        }, {
+}, {
     title: '创建时间',
     dataIndex: 'created',
     width: 185,
     customRender: text => {
         return text.value == 0 ? '' : moment(text.value * 1000).format('YYYY-MM-DD HH:mm:ss')
     }
-        }, {
+}, {
     title: '更新时间',
     dataIndex: 'updated',
     width: 185,
     customRender: text => {
         return text.value == 0 ? '' : moment(text.value * 1000).format('YYYY-MM-DD HH:mm:ss')
     }
-        }];
+}];
 
-        // 新建或编辑合同，已添加产品表格字段
+// 新建或编辑合同，已添加产品表格字段
-        const productColumns = [{
+const productColumns = [{
     title: '产品名称',
     dataIndex: 'name',
     width: 100,
-        }, {
+}, {
     title: '产品类别',
     dataIndex: 'type',
     width: 90,
-        }, {
+}, {
     title: '单位',
     dataIndex: 'unit',
     width: 80,
-        }, {
+}, {
     title: '价格',
     dataIndex: 'price',
     width: 100,
-        }, {
+}, {
     title: '数量',
     dataIndex: 'count',
     width: 120,
-        }, {
+}, {
     title: '合计',
     dataIndex: 'total',
     width: 100,
-        }, {
+}, {
     title: '操作',
     dataIndex: 'operation',
     width: 100,
-        }]
+}]
 
-        // 产品表格字段
+// 产品表格字段
-        const productListColumns = [{
+const productListColumns = [{
     title: '产品名称',
     dataIndex: 'name',
     width: 100,
     fixed: 'left',
     ellipsis: true,
-        }, {
+}, {
     title: '是否上下架',
     dataIndex: 'status',
     width: 120,
-        }, {
+}, {
     title: '产品类型',
     dataIndex: 'type',
     width: 100,
-        }, {
+}, {
     title: '产品单位',
     dataIndex: 'unit',
     width: 100,
-        }, {
+}, {
     title: '产品编码',
     dataIndex: 'code',
     width: 150,
-        }, {
+}, {
     title: '价格',
     dataIndex: 'price',
     width: 150,
-        }, {
+}, {
     title: '产品描述',
     dataIndex: 'description',
     width: 240,
     ellipsis: true,
-        }, {
+}, {
     title: '创建时间',
     dataIndex: 'created',
     width: 185,
@@ -312,7 +305,7 @@ export default {
         let m = moment(text.value * 1000).format('YYYY-MM-DD HH:mm:ss')
         return m == 'Invalid date' ? '' : m
     }
-        }, {
+}, {
     title: '更新时间',
     dataIndex: 'updated',
     width: 185,
@@ -320,21 +313,21 @@ export default {
         let m = moment(text.value * 1000).format('YYYY-MM-DD HH:mm:ss')
         return m == 'Invalid date' ? '' : m
     }
-        }, {
+}, {
     title: '创建人',
     dataIndex: 'creator',
     width: 150,
-        }];
+}];
 
-        // 表单校验
+// 表单校验
-        const rules = {
+const rules = {
     name: [{ required: true, message: '请输入合同名称', trigger: 'blur' }],
     cid: [{ required: true, message: '请选择客户', trigger: 'blur' }],
     status: [{ required: true, message: '请选择合同状态' }]
-        };
+};
 
-        // 合同属性
+// 合同属性
-        let contract = reactive({
+let contract = reactive({
     id: undefined,
     name: undefined,
     amount: undefined,
@@ -344,9 +337,9 @@ export default {
     remarks: undefined,
     status: undefined,
     productlist: [],
-        });
+});
 
-        const data = reactive({
+const data = reactive({
     contractId: 0,
     contractList: [],
     contractIds: [],
@@ -355,35 +348,35 @@ export default {
     addedProductList: [],
     customerOption: [],
     defaultSelectedIds: []
-        })
+})
 
-        // 表格分页
+// 表格分页
-        let pagination = reactive({
+let pagination = reactive({
     current: 1,
     pageSize: 10,
     total: undefined,
-        })
+})
 
-        // 点击搜索
+// 点击搜索
-        const onSearch = () => { getContractList() };
+const onSearch = () => { getContractList() };
 
-        const title = ref('');
+const title = ref('');
-        const visible = ref(false);
+const visible = ref(false);
-        const disabled = ref(true)
+const disabled = ref(true)
-        const operation = ref(0);
+const operation = ref(0);
-        const contractFormRef = ref();
+const contractFormRef = ref();
-        const keyWord = ref('')
+const keyWord = ref('')
-        const productListVisible = ref(false);
+const productListVisible = ref(false);
 
-        // 点击新建合同
+// 点击新建合同
-        const onCreate = () => {
+const onCreate = () => {
     title.value = '新建合同'
     operation.value = 1
     visible.value = true
-        }
+}
 
-        // 点击编辑合同
+// 点击编辑合同
-        const onEdit = (row) => {
+const onEdit = (row) => {
     title.value = '编辑合同'
     operation.value = 2
     getCustomerOption()
@@ -405,10 +398,10 @@ export default {
     })
     data.contractId = row.id
     visible.value = true
-        }
+}
 
-        // 点击保存合同
+// 点击保存合同
-        const onSave = () => {
+const onSave = () => {
     contractFormRef.value.validateFields().then(() => {
         if (operation.value == 1) {
             let param = {
@@ -452,10 +445,10 @@ export default {
         contractFormRef.value.resetFields()
         visible.value = false;
     });
-        };
+};
 
-        // 点击删除合同
+// 点击删除合同
-        const onDelete = () => {
+const onDelete = () => {
     let param = {
         ids: data.contractIds
     }
@@ -478,23 +471,23 @@ export default {
             console.log('Cancel');
         },
     });
-        }
+}
 
-        // 初始化数据
+// 初始化数据
-        onMounted(() => { getContractList() })
+onMounted(() => { getContractList() })
 
-        // 点击全部合同
+// 点击全部合同
-        const onContracts = () => {
+const onContracts = () => {
     keyWord.value = ''
     getContractList()
-        }
+}
 
-        // 分页查询合同列表
+// 分页查询合同列表
-        const onPagination = (page) => {
+const onPagination = (page) => {
     pagination.current = page
     getContractList()
-        }
+}
-        const getContractList = () => {
+const getContractList = () => {
     let param = {
         id: parseInt(keyWord.value == '' ? '0' : keyWord.value),
         pageNum: pagination.current,
@@ -506,10 +499,10 @@ export default {
             data.contractList = res.data.data.list
         }
     })
-        }
+}
 
-        // 点击添加产品
+// 点击添加产品
-        const onAddProduct = () => {
+const onAddProduct = () => {
     let param = {
         pageNum: pagination.current,
         pageSize: pagination.pageSize
@@ -527,10 +520,10 @@ export default {
         }
     }
     productListVisible.value = true
-        }
+}
 
-        // 分页查询产品列表
+// 分页查询产品列表
-        const onPaginationProduct = (page) => {
+const onPaginationProduct = (page) => {
     pagination.current = page
     let param = {
         pageNum: pagination.current,
@@ -542,36 +535,36 @@ export default {
             data.productList = res.data.data.list
         }
     })
-        }
+}
 
-        // 已选中的合同ID
+// 已选中的合同ID
-        const onSelectedConteactIds = selectedRowKeys => {
+const onSelectedConteactIds = selectedRowKeys => {
     data.contractIds = selectedRowKeys
     if (data.contractIds.length !== 0) {
         disabled.value = false
     } else {
         disabled.value = true
     }
-        };
+};
 
-        // 已选中的产品ID
+// 已选中的产品ID
-        const onSelectedProductIds = selectedRowKeys => {
+const onSelectedProductIds = selectedRowKeys => {
     data.productIds = selectedRowKeys
     data.defaultSelectedIds = selectedRowKeys
-        };
+};
 
-        // 删除选中的产品
+// 删除选中的产品
-        const delProduct = (row) => {
+const delProduct = (row) => {
     for (let i = 0; i < data.addedProductList.length; i++) {
         if (data.addedProductList[i].id == row.id) {
             data.addedProductList.splice(i, 1);
         }
     }
     calculatedAmount()
-        }
+}
 
-        // 点击确定选中的产品ID
+// 点击确定选中的产品ID
-        const onConfirm = () => {
+const onConfirm = () => {
     console.log("xzx", data.productIds)
     let param = {
         id: data.contractId,
@@ -583,44 +576,44 @@ export default {
         }
     })
     productListVisible.value = false
-        }
+}
 
-        // 查询客户选项
+// 查询客户选项
-        const getCustomerOption = () => {
+const getCustomerOption = () => {
     queryCustomerOption().then((res) => {
         if (res.data.code == 0) {
             data.customerOption = res.data.data
             console.log("zxxzc", data.customerOption)
         }
     })
-        }
+}
 
-        const changeCustomerOption = (value) => {
+const changeCustomerOption = (value) => {
     contract.cid.value = value
-        }
+}
 
-        // 计算金额
+// 计算金额
-        const calculatedAmount = () => {
+const calculatedAmount = () => {
     contract.amount = 0
     let totalAmount = 0
     for (let i = 0; i < data.addedProductList.length; i++) {
         totalAmount = totalAmount + (data.addedProductList[i].price * data.addedProductList[i].count)
     }
     contract.amount = totalAmount
-        }
+}
 
-        // 点击合同取消按钮
+// 点击合同取消按钮
-        const onCancel = () => {
+const onCancel = () => {
     contractFormRef.value.resetFields()
     data.addedProductList = []
     data.contractId = undefined
     visible.value = false
-        };
+};
 
-        // 导出表格
+// 导出表格
-        const onExport = () => {
+const onExport = () => {
     contractExport().then((res) => {
-                if (res.data.type == 'application/json'){
+        if (res.data.type == 'application/json') {
             message.error('导出错误！')
         } else {
             let blob = new Blob([res.data], {
@@ -633,53 +626,14 @@ export default {
             window.URL.revokeObjectURL(a.href)
         }
     })
-        }
+}
 
-        // 点击取消产品列表
+// 点击取消产品列表
-        const onCancelProductList = () => {
+const onCancelProductList = () => {
     productListVisible.value = false
     data.contractId = undefined
     pagination.current = 1,
         pagination.total = undefined
-        }
-
-        return {
-            columns,
-            productColumns,
-            productListColumns,
-            rules,
-            data,
-            onSelectedConteactIds,
-            onSelectedProductIds,
-            onSearch,
-            contract,
-            title,
-            visible,
-            disabled,
-            productListVisible,
-            operation,
-            onCreate,
-            onEdit,
-            contractFormRef,
-            onSave,
-            onCancel,
-            onDelete,
-            onCancelProductList,
-            getContractList,
-            keyWord,
-            onConfirm,
-            onAddProduct,
-            getCustomerOption,
-            changeCustomerOption,
-            calculatedAmount,
-            delProduct,
-            pagination,
-            onPagination,
-            onExport,
-            onContracts,
-            onPaginationProduct,
-        };
-    },
 }
 </script>
 

web/src/views/Customer.vue

@@ -160,7 +160,7 @@
     </div>
 </template>
 
-<script>
+<script setup>
 import { ref, reactive, onMounted, createVNode } from 'vue';
 import { SearchOutlined, ExclamationCircleOutlined, ExportOutlined, MailTwoTone } from '@ant-design/icons-vue';
 import moment from 'moment'
@@ -168,77 +168,71 @@ import { createCustomer, updateCustomer, sendMailToCustomer, queryCustomerList,
 import { message, Modal } from 'ant-design-vue';
 import regionData from '../assets/region';
 
-export default {
+// 表格字段
-    components: {
+const columns = [{
-        SearchOutlined,
-        ExportOutlined,
-        MailTwoTone
-    },
-    setup() {
-        const columns = [{
     title: '客户名称',
     dataIndex: 'name',
     width: 200,
     fixed: 'left',
     ellipsis: true,
-        }, {
+}, {
     title: '客户来源',
     dataIndex: 'source',
     width: 150,
-        }, {
+}, {
     title: '手机号',
     dataIndex: 'phone',
     width: 150,
-        }, {
+}, {
     title: '邮箱',
     dataIndex: 'email',
     width: 200,
-        }, {
+}, {
     title: '客户行业',
     dataIndex: 'industry',
     width: 150,
-        }, {
+}, {
     title: '客户级别',
     dataIndex: 'level',
     width: 150,
-        }, {
+}, {
     title: '备注',
     dataIndex: 'remarks',
     width: 150,
     ellipsis: true,
-        }, {
+}, {
     title: '成交状态',
     dataIndex: 'status',
     width: 150,
-        }, {
+}, {
     title: '详细地址',
     dataIndex: 'address',
     width: 240,
     ellipsis: true,
-        }, {
+}, {
     title: '创建时间',
     dataIndex: 'created',
     width: 185,
     customRender: text => {
         return text == 0 ? '' : moment(text.value * 1000).format('YYYY-MM-DD HH:mm:ss')
     }
-        }, {
+}, {
     title: '更新时间',
     dataIndex: 'updated',
     width: 185,
     customRender: text => {
         return text.value == 0 ? '' : moment(text.value * 1000).format('YYYY-MM-DD HH:mm:ss')
     }
-        }, {
+}, {
     title: '操作',
     dataIndex: 'operation',
     width: 65,
     fixed: 'right',
     ellipsis: true,
-        }];
+}];
 
-        // 表单校验
+// 表单校验
-        const rules = {
+const rules = {
     name: [{ required: true, message: '请输入客户名称', trigger: 'blur' }],
     phone: [{
         pattern: /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/,
@@ -250,36 +244,36 @@ export default {
         message: '邮箱格式不正确',
         trigger: 'blur',
     }],
-        };
+};
 
-        const data = reactive({
+const data = reactive({
     customerList: [],
     selectedIds: []
-        })
+})
 
 
-        const onSelectChange = selectedRowKeys => {
+const onSelectChange = selectedRowKeys => {
     data.selectedIds = selectedRowKeys
     if (data.selectedIds.length !== 0) {
         disabled.value = false
     } else {
         disabled.value = true
     }
-        };
+};
 
-        // 点击搜索
+// 点击搜索
-        const onSearch = () => {
+const onSearch = () => {
     getCustomerList()
-        };
+};
 
-        // 点击全部客户
+// 点击全部客户
-        const onCustomers = () => {
+const onCustomers = () => {
     keyWord.value = ''
     getCustomerList()
-        }
+}
 
-        // 客户属性
+// 客户属性
-        let customer = reactive({
+let customer = reactive({
     id: undefined,
     name: undefined,
     source: undefined,
@@ -291,32 +285,32 @@ export default {
     region: undefined,
     address: undefined,
     status: undefined,
-        });
+});
 
-        // 表格分页
+// 表格分页
-        let pagination = reactive({
+let pagination = reactive({
     current: 1,
     pageSize: 10,
     total: undefined,
-        })
+})
 
-        const title = ref('');
+const title = ref('');
-        const visible = ref(false);
+const visible = ref(false);
-        const disabled = ref(true)
+const disabled = ref(true)
-        const operation = ref(0);
+const operation = ref(0);
-        const customerFormRef = ref();
+const customerFormRef = ref();
-        const keyWord = ref('')
+const keyWord = ref('')
-        const visibleMail = ref(false)
+const visibleMail = ref(false)
 
-        // 点击新建客户
+// 点击新建客户
-        const onCreate = () => {
+const onCreate = () => {
     title.value = '新建客户'
     operation.value = 1
     visible.value = true
-        }
+}
 
-        // 点击客户名称
+// 点击客户名称
-        const onEdit = (row) => {
+const onEdit = (row) => {
     title.value = '编辑客户'
     operation.value = 2
     let param = { id: row.id }
@@ -338,10 +332,10 @@ export default {
         }
     })
     visible.value = true
-        }
+}
 
-        // 点击保存客户
+// 点击保存客户
-        const onSave = () => {
+const onSave = () => {
     customerFormRef.value.validateFields().then(() => {
         if (customer.region !== undefined) {
             customer.region = customer.region.toString()
@@ -365,10 +359,10 @@ export default {
         customerFormRef.value.resetFields()
         visible.value = false;
     });
-        };
+};
 
-        // 点击删除客户
+// 点击删除客户
-        const onDelete = () => {
+const onDelete = () => {
     let param = {
         ids: data.selectedIds
     }
@@ -391,18 +385,18 @@ export default {
             console.log('Cancel');
         },
     });
-        }
+}
 
-        // 分页查询客户列表
+// 分页查询客户列表
-        const onPagination = (page) => {
+const onPagination = (page) => {
     pagination.current = page
     getCustomerList()
-        }
+}
 
-        // 初始化数据
+// 初始化数据
-        onMounted(() => { getCustomerList() })
+onMounted(() => { getCustomerList() })
 
-        const getCustomerList = () => {
+const getCustomerList = () => {
     let param = {
         name: keyWord.value,
         pageNum: pagination.current,
@@ -414,10 +408,10 @@ export default {
             data.customerList = res.data.data.list
         }
     })
-        }
+}
 
-        // 导出表格
+// 导出表格
-        const onExport = () => {
+const onExport = () => {
     customerExport().then((res) => {
         if (res.data.type == 'application/json') {
             message.error('导出错误！')
@@ -432,24 +426,24 @@ export default {
             window.URL.revokeObjectURL(a.href)
         }
     })
-        }
+}
 
-        const mail = reactive({
+const mail = reactive({
     customerName: '',
     receiver: '',
     subject: '',
     content: ''
-        })
+})
 
-        // 点击邮件
+// 点击邮件
-        const onMail = (cname, email) => {
+const onMail = (cname, email) => {
     mail.customerName = cname
     mail.receiver = email
     visibleMail.value = true
-        }
+}
 
-        // 点击发送邮件
+// 点击发送邮件
-        const onSend = () => {
+const onSend = () => {
     let param = {
         receiver: mail.receiver,
         subject: mail.subject,
@@ -466,53 +460,18 @@ export default {
             message.warn("邮件服务未开启")
         }
     })
-        }
+}
 
-        // 点击取消按钮
+// 点击取消按钮
-        const onCancel = () => {
+const onCancel = () => {
     customerFormRef.value.resetFields()
     visible.value = false
-        };
+};
 
-        const options = regionData
+const options = regionData
 
-        const selectedOptions = (value) => {
+const selectedOptions = (value) => {
     customer.region = value
-        }
-
-        return {
-            data,
-            columns,
-            rules,
-            onSearch,
-            visible,
-            disabled,
-            onSelectChange,
-            onSearch,
-            customer,
-            title,
-            visible,
-            operation,
-            onCustomers,
-            onCreate,
-            onEdit,
-            customerFormRef,
-            onSave,
-            onCancel,
-            onDelete,
-            getCustomerList,
-            onExport,
-            keyWord,
-            options,
-            onPagination,
-            pagination,
-            selectedOptions,
-            mail,
-            visibleMail,
-            onMail,
-            onSend
-        };
-    },
 }
 </script>
 

web/src/views/Dashboard.vue

@@ -102,7 +102,7 @@
     </div>
 </template>
 
-<script>
+<script setup>
 import { QuestionCircleTwoTone } from '@ant-design/icons-vue'
 import * as echarts from "echarts";
 import { reactive, ref, onBeforeMount } from 'vue';
@@ -110,29 +110,23 @@ import { getSummary } from "../api/dashboard";
 import { getSubscribeInfo } from '../api/subscribe';
 import { useRouter } from 'vue-router'
 
-export default {
+const daysRange = ref(7);
-    components: {
-        QuestionCircleTwoTone
-    },
-    setup() {
 
-        const daysRange = ref(7);
+const router = useRouter()
 
-        const router = useRouter()
+const data = reactive({
-
-        const data = reactive({
     customers: 0,
     contracts: 0,
     contractAmount: 0.00,
     products: 0,
-        })
+})
 
-        onBeforeMount(() => {
+onBeforeMount(() => {
     subscribeInfo();
     initChart();
-        });
+});
 
-        const initChart = () => {
+const initChart = () => {
     let param = {
         daysRange: daysRange.value
     }
@@ -212,24 +206,15 @@ export default {
             })
         }
     })
-        }
+}
 
-        // 获取用户订阅信息
+// 获取用户订阅信息
-        const subscribeInfo = () => {
+const subscribeInfo = () => {
     getSubscribeInfo().then((res) => {
         if (res.data.code == 0 && res.data.data.version == 1) {
             router.push('/result')
         }
     })
-        }
-
-        return {
-            data,
-            daysRange,
-            initChart,
-            subscribeInfo,
-        }
-    }
 }
 </script>
 

web/src/views/Error.vue

@@ -8,18 +8,11 @@
     </div>
 </template>
 
-<script>
+<script setup>
 import router from '../router/index';
 
-export default {
+const refresh = () => {
-    setup() {
-        const refresh = () => {
     router.push('/')
-        }
-        return {
-            refresh
-        }
-    }
 }
 </script>
 

web/src/views/Home.vue

@@ -2,8 +2,8 @@
     <a-layout has-sider>
         <a-layout-sider class="layout-sider" width="150">
             <div class="logo">
-        <div><img src="../assets/logo.svg" style="width: 32px;height: 32px;filter: drop-shadow(2px 2px 6px #79bbff);" />
+                <div><img src="../assets/logo.svg"
-        </div>
+                        style="width: 32px;height: 32px;filter: drop-shadow(2px 2px 6px #79bbff);" /></div>
                 <div v-if="collapsed == false" class="title"><b>Z</b>O<b style="color: #1283FF;">C</b>RM</div>
             </div>
             <a-menu style="border-right: none;width: 149px;" v-model:selectedKeys="selectedKeys" mode="inline">
@@ -32,16 +32,20 @@
                                                         <BellFilled style="font-size: 18px;" />
                                                     </template>
                                                 </a-avatar>
-                        <a-avatar shape="square" style="color: #476FFF; background-color: #ccd6fa" :size="20" v-else>
+                                                <a-avatar shape="square"
+                                                    style="color: #476FFF; background-color: #ccd6fa" :size="20" v-else>
                                                     <template #icon>
                                                         <BellFilled style="font-size: 18px;" />
                                                     </template>
                                                 </a-avatar>
-                        <div v-if="item.status == 1" style="color: #717171;">&nbsp;&nbsp;&nbsp;{{ item.content }}</div>
+                                                <div v-if="item.status == 1" style="color: #717171;">
+                                                    &nbsp;&nbsp;&nbsp;{{ item.content }}</div>
                                                 <div v-else>&nbsp;&nbsp;&nbsp;{{ item.content }}</div>
                                             </div>
                                             <template #actions>
-                        <span v-if="item.status == 2" style="color: black;">{{ formatDate(item.created) }}</span>
+                                                <span v-if="item.status == 2" style="color: black;">{{
+                                                    formatDate(item.created)
+                                                }}</span>
                                                 <span v-else>{{ formatDate(item.created) }}</span>
                                             </template>
                                         </a-list-item>
@@ -49,8 +53,8 @@
                                 </a-list>
                             </div>
                             <div style="margin-top: 10px;display: flex;align-items: center;justify-content: center;">
-                <a-button v-if="data.noticeList.length != 0" @click="onDeleteNotice" type="primary" style="width: 92%;"
+                                <a-button v-if="data.noticeList.length != 0" @click="onDeleteNotice" type="primary"
-                  shape="round">清空全部 {{ data.noticeList.length }} 条通知</a-button>
+                                    style="width: 92%;" shape="round">清空全部 {{ data.noticeList.length }} 条通知</a-button>
                             </div>
                         </template>
                         <a-badge :count="data.noticeCount">
@@ -72,8 +76,8 @@
                     </a-dropdown>
                 </div>
                 <!-- 注销账号弹出框 -->
-        <a-modal v-model:visible="visible" title="注销账号" @ok="onConfirm" @cancel="onCancel" cancelText="取消" okText="注销"
+                <a-modal v-model:visible="visible" title="注销账号" @ok="onConfirm" @cancel="onCancel" cancelText="取消"
-          width="400px" :centered="true">
+                    okText="注销" width="400px" :centered="true">
                     <a-alert message="账号注销后，会清空账号相关的所有数据。" type="warning" show-icon /><br />
                     <a-form :model="user" layout="vertical" @finish="onSubmit" :rules="rules">
                         <a-form-item name="email">
@@ -81,14 +85,14 @@
                         </a-form-item>
                         <a-form-item name="code">
                             <a-input v-model:value="user.code" style="width: 55%;" placeholder="验证码" />
-              <a-button @click="onGetCode" style="width: 40%;float: right;" :loading="loading" :disabled="disabled">
+                            <a-button @click="onGetCode" style="width: 40%;float: right;" :loading="loading"
+                                :disabled="disabled">
                                 {{ buttonText }}</a-button>
                         </a-form-item>
                     </a-form>
                 </a-modal>
             </a-layout-header>
-      <a-layout-content
+            <a-layout-content :style="{ margin: '10px', background: '#fff', overflow: 'initial', borderRadius: '5px' }">
-        :style="{ margin: '10px', background: '#fff', overflow: 'initial', borderRadius: '5px' }">
                 <transition name="fade">
                     <router-view v-slot="{ Component }">
                         <component :is="Component" />
@@ -99,7 +103,7 @@
     </a-layout>
 </template>
 
-<script>
+<script setup>
 import { reactive, ref, onBeforeMount } from 'vue';
 import { useRouter } from 'vue-router'
 import { useStore } from '../store/index';
@@ -110,55 +114,41 @@ import { DashboardOutlined, SmileOutlined, MehOutlined, ShoppingOutlined, Profil
 import { QuestionCircleFilled, BellFilled, ExclamationCircleOutlined, LogoutOutlined } from '@ant-design/icons-vue';
 import moment from 'moment'
 
-export default {
+// 菜单选项
-  components: {
+const menuItem = reactive([{
-    DashboardOutlined,
-    SmileOutlined,
-    MehOutlined,
-    ShoppingOutlined,
-    ProfileOutlined,
-    CrownOutlined,
-    QuestionCircleFilled,
-    BellFilled,
-    ExclamationCircleOutlined,
-    LogoutOutlined
-  },
-  setup() {
-    // 菜单选项
-    const menuItem = reactive([{
     key: "dashboard",
     to: "/dashboard",
-      icon: "dashboard-outlined",
+    icon: DashboardOutlined,
     name: "仪表盘"
-    }, {
+}, {
     key: "customer",
     to: "/customer",
-      icon: "smile-outlined",
+    icon: SmileOutlined,
     name: "客户"
-    }, {
+}, {
     key: "contract",
     to: "/contract",
-      icon: "meh-outlined",
+    icon: MehOutlined,
     name: "合同"
-    }, {
+}, {
     key: "product",
     to: "/product",
-      icon: "shopping-outlined",
+    icon: ShoppingOutlined,
     name: "产品"
-    }, {
+}, {
     key: "config",
     to: "/config",
-      icon: "profile-outlined",
+    icon: ProfileOutlined,
     name: "配置"
-    }, {
+}, {
     key: "subscribe",
     to: "/subscribe",
-      icon: "crown-outlined",
+    icon: CrownOutlined,
     name: "订阅"
-    }])
+}])
 
-    // 表单校验
+// 表单校验
-    const rules = {
+const rules = {
     email: [{
         required: true,
         message: '请输入邮箱!',
@@ -169,47 +159,47 @@ export default {
         trigger: 'blur',
     }],
     code: [{ required: true, message: '请输入验证码!' }],
-    };
+};
 
-    const store = useStore();
+const store = useStore();
 
-    const selectedKeys = ref([store.selectedKeys])
+const selectedKeys = ref([store.selectedKeys])
-    const collapsed = ref(false)
+const collapsed = ref(false)
 
-    const data = reactive({
+const data = reactive({
     noticeCount: 0,
     noticeList: []
-    })
+})
 
-    store.$subscribe((mutation, state) => {
+store.$subscribe((mutation, state) => {
     selectedKeys.value = [state.selectedKeys]
-    })
+})
 
-    const router = useRouter()
+const router = useRouter()
 
-    const user = reactive({
+const user = reactive({
     name: undefined,
     email: undefined,
     verison: undefined,
     code: undefined,
     versionText: undefined
-    })
+})
 
-    const visible = ref(false)
+const visible = ref(false)
-    const visibleLogo = ref(false)
+const visibleLogo = ref(false)
-    const loading = ref(false)
+const loading = ref(false)
-    const disabled = ref(false)
+const disabled = ref(false)
-    const buttonText = ref('获取验证码')
+const buttonText = ref('获取验证码')
 
-    // 初始化数据
+// 初始化数据
-    onBeforeMount(() => {
+onBeforeMount(() => {
     store.selectedKeys = 'dashboard'
     router.push('dashboard')
     noticeCount()
-    })
+})
 
-    // 点击用户头像
+// 点击用户头像
-    const onUserAvatar = () => {
+const onUserAvatar = () => {
     getUserInfo().then((res) => {
         if (res.data.code == 0) {
             user.name = res.data.data.name
@@ -217,15 +207,15 @@ export default {
             user.version = res.data.data.version
         }
     })
-    }
+}
 
-    // 跳转到项目文档
+// 跳转到项目文档
-    const toDocs = () => {
+const toDocs = () => {
     window.open("https://docs.zocrm.cloud")
-    }
+}
 
-    // 点击获取验证码
+// 点击获取验证码
-    const onGetCode = () => {
+const onGetCode = () => {
     if (user.email == '') {
         message.warn('邮箱不能为空')
         return
@@ -245,10 +235,10 @@ export default {
             message.error('验证码发送失败')
         }
     })
-    }
+}
 
-    // 点击确认注销账号
+// 点击确认注销账号
-    const onConfirm = () => {
+const onConfirm = () => {
     let param = {
         email: user.email,
         code: user.code
@@ -259,10 +249,10 @@ export default {
             message.success('账号已注销')
         }
     })
-    }
+}
 
-    // 日期格式化
+// 日期格式化
-    const formatDate = (timeStamp) => {
+const formatDate = (timeStamp) => {
     let now = (Date.parse(new Date())) / 1000
     if (now - timeStamp < 60) {
         return "刚刚"
@@ -271,38 +261,38 @@ export default {
         return "今天 " + moment(timeStamp * 1000).format('HH:mm')
     }
     return moment(timeStamp * 1000).format('YYYY-MM-DD')
-    }
+}
 
-    // 点击读取通知
+// 点击读取通知
-    const onReadNotice = (id) => {
+const onReadNotice = (id) => {
     updateNotice({ id: id }).then((res) => {
         if (res.data.code == 0) {
             onNotice()
             noticeCount()
         }
     })
-    }
+}
 
-    // 获取通知数量
+// 获取通知数量
-    const noticeCount = () => {
+const noticeCount = () => {
     getNoticeCount().then((res) => {
         if (res.data.code == 0) {
             data.noticeCount = res.data.data.count
         }
     })
-    }
+}
 
-    // 获取通知列表
+// 获取通知列表
-    const onNotice = () => {
+const onNotice = () => {
     getNoticeList().then((res) => {
         if (res.data.code == 0) {
             data.noticeList = res.data.data
         }
     })
-    }
+}
 
-    // 删除通知
+// 删除通知
-    const onDeleteNotice = () => {
+const onDeleteNotice = () => {
     let ids = []
     for (let index = 0; index < data.noticeList.length; index++) {
         ids[index] = data.noticeList[index].id
@@ -313,48 +303,20 @@ export default {
             onNotice()
         }
     })
-    }
+}
 
-    // 点击退出账号
+// 点击退出账号
-    const onLogout = () => {
+const onLogout = () => {
     localStorage.removeItem("uid")
     localStorage.removeItem("token")
     router.push('/')
-    }
+}
 
-    // 点击取消按钮
+// 点击取消按钮
-    const onCancel = () => {
+const onCancel = () => {
     disabled.value = false
     modalFormRef.value.resetFields()
     visible.value = false
-    };
-
-    return {
-      menuItem,
-      rules,
-      selectedKeys,
-      collapsed,
-      user,
-      visible,
-      visibleLogo,
-      loading,
-      disabled,
-      buttonText,
-      onUserAvatar,
-      onLogout,
-      onGetCode,
-      onConfirm,
-      onNotice,
-      onReadNotice,
-      noticeCount,
-      onDeleteNotice,
-      onCancel,
-      store,
-      formatDate,
-      data,
-      toDocs
-    };
-  },
 }
 </script>
 

web/src/views/Index.vue

@@ -24,10 +24,8 @@
     </div>
 </template>
 
-<script>
+<script setup>
-export default {
 
-}
 </script>
 
 <style scoped>

web/src/views/Login.vue

@@ -31,7 +31,7 @@
     </a-form>
 </template>
 
-<script>
+<script setup>
 import { reactive } from 'vue';
 import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
 import { useRouter } from 'vue-router'
@@ -39,21 +39,15 @@ import { userLogin } from '../api/user';
 import { message } from 'ant-design-vue';
 import { initData } from '../api/common';
 
-export default {
+const router = useRouter()
-    components: {
-        UserOutlined,
-        LockOutlined,
-    },
-    setup() {
-        const router = useRouter()
 
-        // 用户登录
+// 用户登录
-        const formData = reactive({
+const formData = reactive({
     email: '1655064994@qq.com',
     password: '1655064994',
     remember: true,
-        });
+});
-        const onLogin = () => {
+const onLogin = () => {
     let param = {
         email: formData.email,
         password: formData.password
@@ -75,23 +69,23 @@ export default {
             message.error('用户名或密码错误');
         }
     })
-        };
+};
-        const onLoginFailed = errorInfo => {
+const onLoginFailed = errorInfo => {
     console.log('Failed:', errorInfo);
-        };
+};
 
-        // 忘记密码
+// 忘记密码
-        const forgotPass = () => {
+const forgotPass = () => {
     router.push("/pass")
-        }
+}
 
-        // 用户注册
+// 用户注册
-        const toRegister = () => {
+const toRegister = () => {
     router.push("/register")
-        }
+}
 
-        // 初始化数据（只会在生产环境中初始化）
+// 初始化数据（只会在生产环境中初始化）
-        const initSysData = () => {
+const initSysData = () => {
     initData().then((res) => {
         if (res.data.code == 10) {
             message.success('初始化数据成功！')
@@ -100,18 +94,7 @@ export default {
             message.error('初始化数据失败！')
         }
     })
-        }
+}
-
-        return {
-            formData,
-            onLogin,
-            onLoginFailed,
-            forgotPass,
-            toRegister,
-            initSysData,
-        };
-    }
-};
 </script>
 
 <style scoped>

web/src/views/Pass.vue

@@ -22,26 +22,24 @@
     </a-form>
 </template>
 
-<script>
+<script setup>
 import { ref, reactive } from 'vue';
 import { useRouter } from 'vue-router';
 import { userForgotPass, getVerifyCode } from '../api/user'
 import { message } from 'ant-design-vue';
 
-export default {
+const router = useRouter()
-    setup() {
-        const router = useRouter()
 
-        // 重置密码
+// 重置密码
-        const formData = reactive({
+const formData = reactive({
     email: '',
     code: '',
     password1: '',
     password2: '',
-        });
+});
 
-        // 表单校验
+// 表单校验
-        const rules = {
+const rules = {
     email: [{
         required: true,
         message: '请输入邮箱!'
@@ -53,14 +51,14 @@ export default {
     code: [{ required: true, message: '请输入验证码!' }],
     password1: [{ required: true, message: '请输入密码!' }],
     password2: [{ required: true, message: '请输入密码!' }],
-        };
+};
 
-        const loading = ref(false)
+const loading = ref(false)
-        const disabled = ref(false)
+const disabled = ref(false)
-        const passFormRef = ref()
+const passFormRef = ref()
-        const buttonText = ref('获取验证码')
+const buttonText = ref('获取验证码')
 
-        const onSubmit = () => {
+const onSubmit = () => {
     passFormRef.value.validateFields().then(() => {
         let param = {
             email: formData.email,
@@ -77,10 +75,10 @@ export default {
             }
         })
     })
-        };
+};
 
-        // 获取验证码
+// 获取验证码
-        const onGetCode = () => {
+const onGetCode = () => {
     if (formData.email == '') {
         message.warn('邮箱不能为空')
         return
@@ -100,25 +98,11 @@ export default {
             message.error('验证码发送失败')
         }
     })
-        }
+}
 
-        // 跳转到登录页面
+// 跳转到登录页面
-        const onLogin = () => {
+const onLogin = () => {
     router.push("/login")
-        }
-
-        return {
-            formData,
-            rules,
-            passFormRef,
-            loading,
-            disabled,
-            buttonText,
-            onSubmit,
-            onGetCode,
-            onLogin,
-        };
-    },
 }
 </script>
 

web/src/views/Product.vue

@@ -107,78 +107,72 @@
     </div>
 </template>
 
-<script>
+<script setup>
 import { ref, reactive, onMounted, createVNode } from 'vue';
 import { SearchOutlined, ExclamationCircleOutlined, ExportOutlined } from '@ant-design/icons-vue';
 import moment from 'moment'
 import { createProduct, updateProduct, queryProductList, deleteProduct, queryProductInfo, productExport } from '../api/product';
 import { message, Modal } from 'ant-design-vue';
 
-export default {
+// 表格字段
-    components: {
+const columns = [{
-        SearchOutlined,
-        ExportOutlined
-    },
-    setup() {
-        // 表格字段
-        const columns = [{
     title: '产品名称',
     dataIndex: 'name',
     width: 100,
     fixed: 'left',
     ellipsis: true,
-        }, {
+}, {
     title: '是否上下架',
     dataIndex: 'status',
     width: 120,
-        }, {
+}, {
     title: '产品类型',
     dataIndex: 'type',
     width: 100,
-        }, {
+}, {
     title: '产品单位',
     dataIndex: 'unit',
     width: 100,
-        }, {
+}, {
     title: '产品编码',
     dataIndex: 'code',
     width: 150,
-        }, {
+}, {
     title: '价格',
     dataIndex: 'price',
     width: 150,
-        }, {
+}, {
     title: '产品描述',
     dataIndex: 'description',
     width: 240,
     ellipsis: true,
-        }, {
+}, {
     title: '创建时间',
     dataIndex: 'created',
     width: 185,
     customRender: text => {
         return text.value == 0 ? '' : moment(text.value * 1000).format('YYYY-MM-DD HH:mm:ss')
     }
-        }, {
+}, {
     title: '更新时间',
     dataIndex: 'updated',
     width: 185,
     customRender: text => {
         return text.value == 0 ? '' : moment(text.value * 1000).format('YYYY-MM-DD HH:mm:ss')
     }
-        }];
+}];
 
-        // 表单校验
+// 表单校验
-        const rules = {
+const rules = {
     name: [{ required: true, message: '请输入产品名称', trigger: 'blur' }],
     type: [{ required: true, message: '请选择产品类型' }],
     code: [{ pattern: /^\d+$/, message: '产品编码格式不正确', trigger: 'blur' }],
     price: [{ required: true, message: '请输入产品价格' }],
     status: [{ required: true, message: '请选择是否上下架' }]
-        };
+};
 
-        // 产品属性
+// 产品属性
-        let product = reactive({
+let product = reactive({
     id: undefined,
     name: undefined,
     type: undefined,
@@ -187,59 +181,59 @@ export default {
     price: undefined,
     status: undefined,
     description: undefined,
-        });
+});
 
-        // 产品列表
+// 产品列表
-        const data = reactive({
+const data = reactive({
     productList: [],
     selectedIds: []
-        })
+})
 
-        // 表格分页
+// 表格分页
-        let pagination = reactive({
+let pagination = reactive({
     current: 1,
     pageSize: 10,
     total: undefined,
-        })
+})
 
-        const title = ref('');
+const title = ref('');
-        const visible = ref(false);
+const visible = ref(false);
-        const disabled = ref(true)
+const disabled = ref(true)
-        const operation = ref(0);
+const operation = ref(0);
-        const productFormRef = ref();
+const productFormRef = ref();
-        const keyWord = ref('')
+const keyWord = ref('')
 
-        // 初始化数据
+// 初始化数据
-        onMounted(() => { getProductList() })
+onMounted(() => { getProductList() })
 
-        // 表格记录多选
+// 表格记录多选
-        const onSelectChange = selectedRowKeys => {
+const onSelectChange = selectedRowKeys => {
     data.selectedIds = selectedRowKeys
     if (data.selectedIds.length !== 0) {
         disabled.value = false
     } else {
         disabled.value = true
     }
-        };
+};
 
-        // 点击搜索
+// 点击搜索
-        const onSearch = () => { getProductList() };
+const onSearch = () => { getProductList() };
 
-        // 点击全部产品
+// 点击全部产品
-        const onProducts = () => {
+const onProducts = () => {
     keyWord.value = ''
     getProductList()
-        }
+}
 
-        // 点击新建产品
+// 点击新建产品
-        const onCreate = () => {
+const onCreate = () => {
     title.value = '新建产品'
     operation.value = 1
     visible.value = true
-        }
+}
 
-        // 点击产品名称
+// 点击产品名称
-        const onEdit = (row) => {
+const onEdit = (row) => {
     title.value = '编辑产品'
     operation.value = 2
     let param = { id: row.id }
@@ -257,10 +251,10 @@ export default {
         }
     })
     visible.value = true
-        }
+}
 
-        // 点击保存产品
+// 点击保存产品
-        const onSave = () => {
+const onSave = () => {
     productFormRef.value.validateFields().then(() => {
         if (operation.value == 1) {
             createProduct(product).then((res) => {
@@ -281,10 +275,10 @@ export default {
         productFormRef.value.resetFields()
         visible.value = false;
     });
-        };
+};
 
-        // 点击删除产品
+// 点击删除产品
-        const onDelete = () => {
+const onDelete = () => {
     Modal.confirm({
         title: '确定删除选中的' + data.selectedIds.length + '项吗?',
         icon: createVNode(ExclamationCircleOutlined),
@@ -304,16 +298,16 @@ export default {
             console.log('Cancel');
         },
     });
-        }
+}
 
-        // 分页查询产品列表
+// 分页查询产品列表
-        const onPagination = (page) => {
+const onPagination = (page) => {
     pagination.current = page
     getProductList()
-        }
+}
 
-        // 查询产列表
+// 查询产列表
-        const getProductList = () => {
+const getProductList = () => {
     let param = {
         name: keyWord.value,
         pageNum: pagination.current,
@@ -325,12 +319,12 @@ export default {
             data.productList = res.data.data.list
         }
     })
-        }
+}
 
-        // 导出表格
+// 导出表格
-        const onExport = () => {
+const onExport = () => {
     productExport().then((res) => {
-                if (res.data.type == 'application/json'){
+        if (res.data.type == 'application/json') {
             message.error('导出错误！')
         } else {
             let blob = new Blob([res.data], {
@@ -343,39 +337,12 @@ export default {
             window.URL.revokeObjectURL(a.href)
         }
     })
-        }
+}
 
-        // 点击取消按钮
+// 点击取消按钮
-        const onCancel = () => {
+const onCancel = () => {
     productFormRef.value.resetFields()
     visible.value = false
-        };
-
-        return {
-            columns,
-            rules,
-            data,
-            onSelectChange,
-            onSearch,
-            product,
-            title,
-            visible,
-            disabled,
-            operation,
-            onProducts,
-            onCreate,
-            onEdit,
-            productFormRef,
-            onSave,
-            onCancel,
-            onDelete,
-            getProductList,
-            onExport,
-            keyWord,
-            pagination,
-            onPagination,
-        };
-    },
 }
 </script>
 

web/src/views/Register.vue

@@ -22,26 +22,24 @@
     </a-form>
 </template>
 
-<script>
+<script setup>
 import { ref, reactive } from 'vue';
 import { useRouter } from 'vue-router';
 import { userRegister, getVerifyCode } from '../api/user';
 import { message } from 'ant-design-vue';
 
-export default {
+const router = useRouter()
-    setup() {
-        const router = useRouter()
 
-        // 用户注册
+// 用户注册
-        const formData = reactive({
+const formData = reactive({
     email: '',
     code: '',
     password1: '',
     password2: '',
-        });
+});
 
-        // 表单校验
+// 表单校验
-        const rules = {
+const rules = {
     email: [{
         required: true,
         message: '请输入邮箱!',
@@ -54,14 +52,14 @@ export default {
     code: [{ required: true, message: '请输入验证码!' }],
     password1: [{ required: true, message: '请输入密码!' }],
     password2: [{ required: true, message: '请输入密码!' }],
-        };
+};
 
-        const loading = ref(false)
+const loading = ref(false)
-        const disabled = ref(false)
+const disabled = ref(false)
-        const registerFormRef = ref()
+const registerFormRef = ref()
-        const buttonText = ref('获取验证码')
+const buttonText = ref('获取验证码')
 
-        const onRegister = () => {
+const onRegister = () => {
     registerFormRef.value.validateFields().then(() => {
         if (formData.password1 != formData.password2) {
             message.warn('密码不一致');
@@ -85,10 +83,10 @@ export default {
             }
         })
     })
-        };
+};
 
-        // 获取验证码
+// 获取验证码
-        const onGetCode = () => {
+const onGetCode = () => {
     if (formData.email == '') {
         message.warn('邮箱不能为空')
         return
@@ -108,25 +106,11 @@ export default {
             message.error('验证码发送失败')
         }
     })
-        }
+}
 
-        // 跳转到登录页面
+// 跳转到登录页面
-        const onLogin = () => {
+const onLogin = () => {
     router.push("/login")
-        }
-
-        return {
-            formData,
-            rules,
-            registerFormRef,
-            loading,
-            disabled,
-            buttonText,
-            onRegister,
-            onLogin,
-            onGetCode,
-        };
-    },
 }
 </script>
 

web/src/views/Result.vue

@@ -8,24 +8,16 @@
     </div>
 </template>
 
-<script>
+<script setup>
 import { useRouter } from 'vue-router'
 import { useStore } from '../store/index';
 
-export default {
+const router = useRouter()
-    setup() {
+const store = useStore()
 
-        const router = useRouter()
+const onBuy = () => {
-        const store = useStore()
-        
-        const onBuy = () => {
     store.selectedKeys = 'subscribe'
     router.push('/subscribe')
-        }
-        return {
-            onBuy
-        }
-    }
 }
 </script>
 

web/src/views/Subscribe.vue

@@ -25,7 +25,8 @@
                     <div class="content">能力不设限，新功能优先体验</div><br />
                     <a-button v-if="version == 1 || version == 3" type="primary" size="large" class="btn-buy"
                         @click="onPay(2)" shape="round" :disabled="disabled">立即购买</a-button>
-                    <a-button v-if="version == 2" type="primary" size="large" class="btn-buy" shape="round">{{ expired
+                    <a-button v-if="version == 2" type="primary" size="large" class="btn-buy" shape="round">{{
+                        expired
                     }} 到期</a-button>
                     <br />
                     <div class="subscribe-list" v-for="item in ['客户管理', '合同管理', '产品管理', '仪表盘可体验30天']">
@@ -41,7 +42,8 @@
                     <div class="content">能力不设限，新功能优先体验</div><br />
                     <a-button v-if="version == 1 || version == 2" type="primary" size="large" class="btn-buy"
                         @click="onPay(3)" shape="round" :disabled="disabled">立即购买</a-button>
-                    <a-button v-if="version == 3" type="primary" size="large" class="btn-buy" shape="round">{{ expired
+                    <a-button v-if="version == 3" type="primary" size="large" class="btn-buy" shape="round">{{
+                        expired
                     }} 到期</a-button>
                     <br />
                     <div class="subscribe-list" v-for="item in ['客户管理', '合同管理', '产品管理', '仪表盘可体验365天']">
@@ -54,41 +56,35 @@
     </div>
 </template>
 
-<script>
+<script setup>
 import { ref, reactive, onBeforeMount } from 'vue';
 import { CheckCircleFilled } from '@ant-design/icons-vue';
 import { subscribePay, getSubscribeInfo } from '../api/subscribe';
 import { useRouter } from 'vue-router'
 import moment from 'moment'
 
-export default {
+const router = useRouter()
-    components: {
-        CheckCircleFilled
-    },
-    setup() {
 
-        const router = useRouter()
+const version = ref(0)
+const expired = ref(undefined)
+const payUrl = ref()
+const visible = ref(false)
+const disabled = ref(false)
+const activedClass = reactive(['card', 'card', 'card'])
 
-        const version = ref(0)
+const payResult = ref(false)
-        const expired = ref(undefined)
+const title = ref('')
-        const payUrl = ref()
+const buttonText = ref(undefined)
-        const visible = ref(false)
-        const disabled = ref(false)
-        const activedClass = reactive(['card', 'card', 'card'])
 
-        const payResult = ref(false)
+const isClick = (index) => {
-        const title = ref('')
-        const buttonText = ref(undefined)
-
-        const isClick = (index) => {
     active.value = index
-        }
+}
 
-        // 初始化数据
+// 初始化数据
-        onBeforeMount(() => { subscribeInfo() })
+onBeforeMount(() => { subscribeInfo() })
 
-        // 点击支付
+// 点击支付
-        const onPay = (ver) => {
+const onPay = (ver) => {
     let param = {
         version: ver
     }
@@ -99,10 +95,10 @@ export default {
             window.open(res.data.data.payUrl, '_self')
         }
     })
-        }
+}
 
-        // 获取用户订阅信息
+// 获取用户订阅信息
-        const subscribeInfo = () => {
+const subscribeInfo = () => {
     getSubscribeInfo().then((res) => {
         if (res.data.code == 0) {
             version.value = res.data.data.version
@@ -114,27 +110,10 @@ export default {
                 activedClass[0] = 'selected-free-card'
             }
             if (res.data.data.version == 2 || res.data.data.version == 3) {
-                        activedClass[res.data.data.version-1] = 'selected-card'
+                activedClass[res.data.data.version - 1] = 'selected-card'
             }
         }
     })
-        }
-
-        return {
-            version,
-            expired,
-            onPay,
-            payUrl,
-            visible,
-            disabled,
-            payResult,
-            title,
-            activedClass,
-            buttonText,
-            isClick,
-            subscribeInfo,
-        }
-    }
 }
 </script>