环境变量配置

  1. # 开发环境接口配置 /.env.development
  2. ENV = 'production'
  3. VUE_APP_BASE_URL = 'https://duanju.xun-hu.net'
  5. # 测试环境接口配置 /.env.test
  6. ENV = 'test'
  7. VUE_APP_BASE_URL = 'https://duanju.xun-hu.net'
  9. # 正式环境接口配置 /.env.production
  10. ENV = 'production'
  11. VUE_APP_BASE_URL = 'https://duanju.xun-hu.net'
  13. # 打包时区分不同环境打包
  14. npm run build:dev // 开发环境
  15. npm run build:test // 测试环境
  16. npm run build // 正式环境

可以根据业务需求，新增环境变量

使用：process.env.VUE_APP_BASE_URL

请求

  1. # /utils/request.js
  3. # 您可以根据实际的业务需求修改请求拦截器和响应拦截器
  5. // 请求拦截器
  6. service.interceptors.request.use(
  7.   config => {
  8.      config.header.key = 'abcd' // 自定义请求头，比如新增加密参数
  9.     return config
  10.   }
  11. )
  13. // 响应拦截器
  14. service.interceptors.response.use(
  15.   response => {
  16.       // 处理响应的业务逻辑
  17.     return response.data
  18.   },
  20.   err => {
  21.       // 处理响应的业务逻辑
  22.   }
  23. )

ui组件

项目ui库使用的element-ui 2.15.12

基于element-ui二次开发的组件 /src/components/ui 您可以自己修改或增加

最佳实践

  1. <template>
  2.   <ai-list class="list">
  3.     <ai-title
  4.       slot="title"
  5.       title="账号管理"
  6.       :isShowBottomBorder="true">
  7.     </ai-title>
  8.     <template slot="content">
  9.       <ai-search-bar>
  10.         <template #left>
  11.           <el-button type="primary" size="medium" icon="iconfont iconAdd" @click="isShow = true">添加</el-button>
  12.         </template>
  13.         <template #right>
  14.           <el-input
  15.             v-model="search.search_value"
  16.             class="search-input"
  17.             size="medium"
  18.             v-throttle="() => {search.current = 1, getList()}"
  19.             placeholder="请输入用户名"
  20.             clearable
  21.             @clear="search.current = 1, search.search_value = '', getList()"
  22.             suffix-icon="iconfont iconSearch">
  23.           </el-input>
  24.         </template>
  25.       </ai-search-bar>
  26.       <ai-table
  27.         :tableData="tableData"
  28.         :col-configs="colConfigs"
  29.         :total="total"
  30.         style="margin-top: 8px;"
  31.         :current.sync="search.current"
  32.         :size.sync="search.size"
  33.         v-loading="isLoading"
  34.         @getList="getList">
  35.         <el-table-column slot="status" width="140px" label="状态" align="center">
  36.           <template slot-scope="{ row }">
  37.             <el-switch
  38.               v-model="row.is_disable"
  39.               :active-value="0"
  40.               :inactive-value="1"
  41.               @change="e => onChange(row.two_member_id, e)">
  42.             </el-switch>
  43.           </template>
  44.         </el-table-column>
  45.         <el-table-column width="160px" fixed="right" label="操作" align="center">
  46.           <template slot-scope="{ row }">
  47.             <div class="table-options">
  48.               <el-button type="text" @click="edit(row)">编辑</el-button>
  49.               <el-button type="text" @click="toStatistics(row.two_member_id)">数据统计</el-button>
  50.               <el-button type="text" @click="remove(row)">删除</el-button>
  51.             </div>
  52.           </template>
  53.         </el-table-column>
  54.       </ai-table>
  55.       <ai-dialog
  56.         :title="id ? '编辑子账号' : '添加子账号'"
  57.         width="790px"
  58.         :visible.sync="isShow"
  59.         customFooter
  60.         @close="onClose">
  61.         <el-form class="ai-form" :model="form" ref="form" label-width="80px">
  62.           <el-form-item label="用户名" style="width: 100%;" prop="username" :rules="[{ required: true, message: '请输入用户名', trigger: 'blur' }]">
  63.             <el-input size="medium" placeholder="请输入用户名" v-model="form.username"></el-input>
  64.           </el-form-item>
  65.           <el-form-item label="昵称" style="width: 100%;" prop="nickname" :rules="[{ required: true, message: '请输入昵称', trigger: 'blur' }]">
  66.             <el-input size="medium" placeholder="请输入昵称" v-model="form.nickname"></el-input>
  67.           </el-form-item>
  68.           <el-form-item label="密码" style="width: 100%;" prop="password" :rules="[{ required: id ? false : true, message: '请输入密码', trigger: 'blur' }]">
  69.             <el-input size="medium" type="password" placeholder="请输入密码" v-model="form.password"></el-input>
  70.           </el-form-item>
  71.           <el-form-item label="手机号" style="width: 100%;" prop="phone">
  72.             <el-input size="medium" placeholder="请输入手机号" v-model="form.phone"></el-input>
  73.           </el-form-item>
  74.         </el-form>
  75.         <div class="dialog-footer" slot="footer">
  76.           <el-button @click="isShow = false">取消</el-button>
  77.           <el-button @click="onConfirm" type="primary" :loading="btnLoading">确定</el-button>
  78.         </div>
  79.       </ai-dialog>
  80.     </template>
  81.   </ai-list>
  82. </template>
  84. <script>
  85.   export default {
  86.     name: 'SubAccount',
  88.     data () {
  89.       return {
  90.         search: {
  91.           page: 1,
  92.           limit: 10,
  93.           search_field: 'username',
  94.           search_exp: 'like',
  95.           search_value: ''
  96.         },
  97.         form: {
  98.           username: '',
  99.           nickname: '',
  100.           phone: '',
  101.           password: ''
  102.         },
  103.         isLoading: false,
  104.         isShow: false,
  105.         colConfigs: [
  106.           { prop: 'username', label: '名称' },
  107.           { prop: 'nickname', label: '昵称', align: 'center' },
  108.           { prop: 'phone', label: '手机号', align: 'center' },
  109.           { prop: 'create_time', label: '注册时间', align: 'center' },
  110.           { slot: 'status', align: 'center' }
  111.         ],
  112.         btnLoading: false,
  113.         id: '',
  114.         tableData: [],
  115.         total: 0
  116.       }
  117.     },
  119.     created () {
  120.       this.getList()
  121.     },
  123.     methods: {
  124.       getList () {
  125.         this.isLoading = true
  126.         this.$http.post(`/api/member.MemberTwo/list`, null, {
  127.           params: {
  128.             ...this.search
  129.           }
  130.         }).then(res => {
  131.           if (res.code == 200) {
  132.             this.tableData = res.data.list
  133.             this.total = res.data.count
  134.           }
  136.           this.isLoading = false
  137.         }).catch(() => {
  138.           this.isLoading = false
  139.         })
  140.       },
  142.       toStatistics (memberId) {
  143.         this.$router.push(`/account/subAccountDetail?memberId=${memberId}`)
  144.       },
  146.       edit (e) {
  147.         this.id = e.two_member_id
  148.         this.form = {
  149.           ...e
  150.         }
  152.         this.isShow = true
  153.       },
  155.       onClose () {
  156.         this.id = ''
  157.         this.form.nickname = ''
  158.         this.form.username = ''
  159.         this.form.phone = ''
  160.         this.form.password = ''
  161.       },
  163.       onConfirm () {
  164.         const api = this.id ? `/api/member.MemberTwo/edit` : '/api/member.MemberTwo/add'
  166.         this.$refs.form.validate((valid) => {
  167.           if (valid) {
  168.             this.btnLoading = true
  169.             this.$http.post(api, {
  170.               ...this.form,
  171.               two_member_id: this.id || ''
  172.             }).then(res => {
  173.               if (res.code === 200) {
  174.                 this.isShow = false
  175.                 this.$message.success(this.id ? '修改成功' : '添加成功')
  176.                 this.getList()
  177.                 this.id = ''
  178.               }
  180.               this.btnLoading = false
  181.             }).catch(() => {
  182.               this.btnLoading = false
  183.             })
  184.           }
  185.         })
  186.       },
  188.       remove (e) {
  189.         this.$confirm('确定删除该数据？').then(() => {
  190.           this.$http.post(`/api/member.MemberTwo/dele`, {
  191.             ids: [e.two_member_id]
  192.           }).then(res => {
  193.             if (res.code == 200) {
  194.               this.$message.success('删除成功！')
  195.               this.getList()
  196.             }
  197.           })
  198.         })
  199.       },
  201.       onChange (userId, e) {
  202.         this.$http.post(`/api/member.MemberTwo/disable`, {
  203.           ids: [userId],
  204.           is_disable: e
  205.         }).then(res => {
  206.           if (res.code == 200) {
  207.             this.$message.success('操作成功！')
  208.             this.getList()
  209.           }
  210.         })
  211.       }
  212.     }
  213.   }
  214. </script>
  216. <style scoped lang="scss">
  217. </style>