GENGXIN

src/layout/user/vipForm.vue

@@ -0,0 +1,167 @@
+<template>
+  <div id="mainForm">
+    <el-row>
+      <el-col :span="24" class="linksForm">
+        <el-form ref="form" :model="form" label-width="100px">
+          <el-form-item label="用户名称" prop="name">
+            <el-input v-model="form.name" placeholder="请输入用户名称"></el-input>
+          </el-form-item>
+          <el-form-item label="手机号" prop="phone">
+            <el-input v-model="form.phone" placeholder="请输入手机号" :minlength="11" :maxlength="11"></el-input>
+          </el-form-item>
+          <el-form-item label="登录密码" prop="password">
+            <el-input v-model="form.password" placeholder="请输入登录密码" show-password></el-input>
+          </el-form-item>
+          <el-form-item label="身份证号" prop="cardnumber">
+            <el-input v-model="form.cardnumber" placeholder="请输入身份证号" :minlength="18" :maxlength="18"></el-input>
+          </el-form-item>
+          <el-form-item label="邮箱" prop="email">
+            <el-input v-model="form.email" placeholder="请输入邮箱"></el-input>
+          </el-form-item>
+          <el-form-item label="地址" prop="addr">
+            <el-input v-model="form.addr" placeholder="请输入地址"></el-input>
+          </el-form-item>
+          <el-form-item label="头像图片" prop="img_path">
+            <upload :limit="1" :data="form.img_path" type="img_path" :url="'/files/imgpath/upload'" @upload="uploadSuccess"></upload>
+          </el-form-item>
+          <!-- <el-form-item label="用户类别" prop="role">
+            <el-radio-group v-model="form.role">
+              <el-radio label="8">vip用户</el-radio>
+            </el-radio-group>
+          </el-form-item> -->
+          <el-form-item label="简介" v-if="form.role == '6'" prop="resume">
+            <el-input v-model="form.remark" placeholder="请输入备注"></el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button @click="handleCancel">返回</el-button>
+            <el-button type="primary" @click="handleSave()">提交</el-button>
+          </el-form-item>
+        </el-form>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import upload from '@/components/upload.vue';
+import { mapActions, mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: users } = createNamespacedHelpers('users');
+
+export default {
+  name: 'mainForm',
+  props: {},
+  components: { upload },
+  data: () => ({
+    form: {},
+    // 性别
+    gender_list: [
+      {
+        name: '男',
+      },
+      {
+        name: '女',
+      },
+    ],
+    // 学历
+    edu_list: [
+      {
+        name: '中专及以上',
+      },
+      {
+        name: '大专及以上',
+      },
+      {
+        name: '本科及以上',
+      },
+      {
+        name: '研究生及以上',
+      },
+    ],
+    // 学位
+    degree_list: [
+      {
+        name: '学士',
+      },
+      {
+        name: '博士',
+      },
+      {
+        name: '其他',
+      },
+    ],
+  }),
+  created() {},
+  methods: {
+    ...users(['fetch', 'create', 'update']),
+
+    async search() {
+      const res = await this.fetch(this.id);
+      if (this.$checkRes(res)) this.$set(this, `form`, res.data);
+    },
+    async handleSave() {
+      let res;
+      let msg;
+      let data = this.form;
+      if (this.isNew) {
+        data.status = '1';
+        data.code = this.user.code;
+        data.status = '1';
+        data.role = '8';
+        console.log(data);
+
+        res = await this.create(data);
+        msg = '用户创建成功';
+      } else {
+        res = await this.update(data);
+        msg = '修改成功';
+      }
+      if (this.$checkRes(res, msg)) {
+        this.handleCancel();
+      }
+    },
+    handleCancel() {
+      this.$router.push({ path: './index' });
+    },
+    setIsQy(data) {
+      let val = '0';
+      data == '2' ? (val = '0') : (val = '1');
+      this.$set(this.form, `is_qy`, val);
+    },
+    uploadSuccess({ type, data }) {
+      this.$set(this.form, `${type}`, data.uri);
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    id() {
+      return this.$route.query.id;
+    },
+    role() {
+      return this.$route.query.role;
+    },
+    isNew() {
+      return this.$route.query.id ? false : true;
+    },
+  },
+  watch: {
+    isNew: {
+      handler(val) {
+        if (!val) {
+          console.log('in function:');
+          this.search();
+        }
+      },
+      immediate: true,
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.linksForm {
+  margin: 20px 0 0 0;
+}
+.el-form {
+  padding: 0 200px;
+}
+</style>

src/views/vip/detail.vue

@@ -1,22 +1,33 @@
 <template>
   <div id="detail">
-    <p>添加</p>
+    <el-row>
+      <el-col :span="24" class="info">
+        <el-col :span="24" class="top">
+          <topInfo :topTitle="pageTitle"></topInfo>
+        </el-col>
+        <el-col :span="24" class="main">
+          <vipForm></vipForm>
+        </el-col>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
 <script>
-import { mapState, createNamespacedHelpers } from 'vuex';
+import topInfo from '@/layout/public/top.vue';
+import vipForm from '@/layout/user/vipForm.vue';
+
 export default {
   name: 'detail',
   props: {},
-  components: {},
-  data: function() {
-    return {};
+  components: {
+    topInfo, //头部标题
+    vipForm,
   },
+  data: () => ({}),
   created() {},
   methods: {},
   computed: {
-    ...mapState(['user']),
     pageTitle() {
       return `${this.$route.meta.title}`;
     },
@@ -27,4 +38,13 @@ export default {
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.top {
+  height: 40px;
+  background-color: #f5f5f5;
+}
+.main {
+  width: 97%;
+  margin: 0 15px;
+}
+</style>

src/views/vip/index.vue

@@ -1,20 +1,81 @@
 <template>
   <div id="index">
-    <p>vip用户</p>
+    <el-row>
+      <el-col :span="24" class="index">
+        <el-col :span="24" class="top">
+          <topInfo :topTitle="pageTitle"></topInfo>
+        </el-col>
+        <el-col :span="24" class="add" style="text-align:right">
+          <el-button size="mini" type="primary" @click="$router.push({ path: './detail' })" icon="el-icon-plus">添加用户</el-button>
+        </el-col>
+      </el-col>
+      <el-col :span="24" class="info">
+        <data-table :fields="fields" @delete="toDelete" :data="list" :opera="opera" @edit="toEdit" :total="total" @query="search"></data-table>
+      </el-col>
+    </el-row>
   </div>
 </template>
-
 <script>
-import { mapState, createNamespacedHelpers } from 'vuex';
+import topInfo from '@/layout/public/top.vue';
+import dataTable from '@/components/data-table.vue';
+import { mapActions, mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: users } = createNamespacedHelpers('users');
+// const { mapActions: exportuser } = createNamespacedHelpers('exportuser');
 export default {
   name: 'index',
   props: {},
-  components: {},
-  data: function() {
-    return {};
+  components: {
+    topInfo,
+    dataTable,
+  },
+  data: () => ({
+    opera: [
+      {
+        label: '编辑',
+        icon: 'el-icon-edit',
+        method: 'edit',
+      },
+      {
+        label: '删除',
+        icon: 'el-icon-delete',
+        method: 'delete',
+        confirm: true,
+      },
+    ],
+    fields: [
+      { label: '姓名', prop: 'name', filter: 'input' },
+      { label: '电话', prop: 'phone', filter: 'input' },
+      { label: '用戶类型', prop: 'role', format: i => (i == '2' ? '个人用户' : i == '3' ? '企业用户' : i == '6' ? '专家' : i == 8 ? 'vip用户' : '临时用户') },
+
+      { label: '状态', prop: 'status', format: i => (i == '1' ? '审核通过' : '') },
+    ],
+    list: [],
+    total: 0,
+  }),
+  created() {
+    this.search();
+  },
+  methods: {
+    ...users(['query', 'delete', 'update', 'userquery']),
+
+    async search({ skip = 0, limit = 10, ...info } = {}) {
+      if (this.user.code.length == 3) {
+        const res = await this.query({ skip, limit, role: '8', ...info });
+        if (this.$checkRes(res)) {
+          console.log(res);
+          this.$set(this, `list`, res.data);
+          this.$set(this, `total`, res.total);
+        }
+      }
+    },
+    toEdit({ data }) {
+      this.$router.push({ path: './detail', query: { id: data.id, role: data.role } });
+    },
+    async toDelete({ data }) {
+      const res = await this.delete(data.id);
+      if (this.$checkRes(res, '删除成功', res.errmsg || '删除失败')) this.search();
+    },
   },
-  created() {},
-  methods: {},
   computed: {
     ...mapState(['user']),
     pageTitle() {
@@ -26,5 +87,10 @@ export default {
   },
 };
 </script>
-
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.add {
+  height: 40px;
+  line-height: 40px;
+  padding: 0 15px;
+}
+</style>