smart-admin-h5

smart-admin-h5/src/views/bpm/index.vue

@@ -0,0 +1,97 @@
+<!-- home -->
+<template>
+  <div>
+    <van-nav-bar title="审批中心">
+      <template #right>
+        <van-icon name="search" size="18" style="margin-right: 20px" />
+        <van-icon name="filter-o" size="18" />
+      </template>
+    </van-nav-bar>
+
+    <van-tabs v-model="bpmStatusActive" sticky>
+      <van-tab title="标签 1">
+        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
+          <van-list
+            v-model="loading"
+            :finished="finished"
+            finished-text="没有更多了"
+            @load="onLoad"
+          >
+
+            <van-cell title="单元格" value="内容" size="large" label="描述信息" />
+            <van-cell title="单元格" value="内容" size="large" label="描述信息" />
+            <van-cell title="单元格" value="内容" size="large" label="描述信息" />
+            <van-cell title="单元格" value="内容" size="large" label="描述信息" />
+
+          </van-list>
+        </van-pull-refresh>
+      </van-tab>
+      <van-tab title="标签 2">内容 2</van-tab>
+      <van-tab title="标签 3">内容 3</van-tab>
+      <van-tab title="标签 4">内容 4</van-tab>
+    </van-tabs>
+
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      list: ['asdasd', 'asdasd', 'asdasd'],
+      bpmStatusActive: 0,
+      finished: true,
+      refreshing: true,
+      loading: true
+    };
+  },
+
+  computed: {},
+
+  mounted() {
+  },
+
+  methods: {
+    onRefresh() {
+
+    },
+    onLoad() {
+      this.finished = true;
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+.index-container {
+  .warpper {
+    padding: 12px;
+    background: #fff;
+
+    .demo-home__title {
+      margin: 0 0 6px;
+      font-size: 32px;
+
+      .demo-home__title img,
+      .demo-home__title span {
+        display: inline-block;
+        vertical-align: middle;
+      }
+
+      img {
+        width: 32px;
+      }
+
+      span {
+        margin-left: 16px;
+        font-weight: 500;
+      }
+    }
+
+    .demo-home__desc {
+      margin: 0 0 20px;
+      color: rgba(69, 90, 100, 0.6);
+      font-size: 14px;
+    }
+  }
+}
+</style>

smart-admin-h5/src/views/business/index.vue

@@ -0,0 +1,66 @@
+<!-- home -->
+<template>
+  <div class="index-container">
+    <div class="warpper">
+      <h2 class="demo-home__desc">
+        业务
+      </h2>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Cell } from 'vant';
+
+export default {
+  components: {
+    [Cell.name]: Cell
+  },
+  data() {
+    return {
+      list: []
+    };
+  },
+
+  computed: {},
+
+  mounted() {
+  },
+
+  methods: {}
+};
+</script>
+<style lang="scss" scoped>
+.index-container {
+  .warpper {
+    padding: 12px;
+    background: #fff;
+
+    .demo-home__title {
+      margin: 0 0 6px;
+      font-size: 32px;
+
+      .demo-home__title img,
+      .demo-home__title span {
+        display: inline-block;
+        vertical-align: middle;
+      }
+
+      img {
+        width: 32px;
+      }
+
+      span {
+        margin-left: 16px;
+        font-weight: 500;
+      }
+    }
+
+    .demo-home__desc {
+      margin: 0 0 20px;
+      color: rgba(69, 90, 100, 0.6);
+      font-size: 14px;
+    }
+  }
+}
+</style>

smart-admin-h5/src/views/develop/config.vue

@@ -0,0 +1,46 @@
+<!-- home -->
+<template>
+  <div>
+    <router-nav-bar path="/mine" title="开发专用配置" left-text="返回" left-arrow />
+
+    <van-cell center title="VConsole">
+      <van-switch v-model="vconsoleFlag" @change="switchVConsole" />
+    </van-cell>
+  </div>
+</template>
+
+<script>
+import RouterNavBar from 'components/van-bar/RouterNavBar';
+const VCONSOLE_ID = '__vconsole';
+export default {
+  components: {
+    RouterNavBar
+  },
+  data() {
+    return {
+      vconsole: null,
+      vconsoleFlag: false
+    };
+  },
+  mounted() {
+    this.checkVConsoleExist();
+  },
+  methods: {
+    // 检测vconsole是否存在
+    checkVConsoleExist() {
+      const vconsoleElement = document.getElementById(VCONSOLE_ID);
+      this.vconsoleFlag = !!vconsoleElement;
+    },
+    // 提交表单
+    switchVConsole(flag) {
+      if (flag) {
+        this.vconsole = new VConsole();
+      } else {
+        delete this.vconsole;
+        document.getElementById(VCONSOLE_ID).remove();
+        this.vconsole = null;
+      }
+    }
+  }
+};
+</script>

smart-admin-h5/src/views/error/404.vue

@@ -0,0 +1,23 @@
+<!-- home -->
+<template>
+  <div class="index-container">
+    <h1>404!</h1>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      list: []
+    };
+  },
+
+  computed: {},
+
+  mounted() {
+  },
+
+  methods: {}
+};
+</script>

smart-admin-h5/src/views/home/index.vue

@@ -0,0 +1,68 @@
+<!-- home -->
+<template>
+  <div>
+    <div style="background-color: #1989fa;height: ">
+      <h4>
+        <center>首页</center>
+      </h4>
+      <van-row gutter="20">
+        <van-col span="12">span: 8</van-col>
+        <van-col span="12">span: 8</van-col>
+      </van-row>
+
+    </div>
+
+  </div>
+</template>
+
+<script>
+
+export default {
+  data() {
+    return {
+      list: []
+    };
+  },
+
+  computed: {},
+
+  mounted() {
+  },
+
+  methods: {}
+};
+</script>
+<style lang="scss" scoped>
+.index-container {
+  .warpper {
+    padding: 12px;
+    background: #fff;
+
+    .demo-home__title {
+      margin: 0 0 6px;
+      font-size: 32px;
+
+      .demo-home__title img,
+      .demo-home__title span {
+        display: inline-block;
+        vertical-align: middle;
+      }
+
+      img {
+        width: 32px;
+      }
+
+      span {
+        margin-left: 16px;
+        font-weight: 500;
+      }
+    }
+
+    .demo-home__desc {
+      margin: 0 0 20px;
+      color: rgba(69, 90, 100, 0.6);
+      font-size: 14px;
+    }
+  }
+}
+</style>

smart-admin-h5/src/views/login/login.vue

@@ -0,0 +1,80 @@
+<!-- home -->
+<template>
+  <div style="padding: 0.4rem">
+    <h1 align="center">Smart-Admin-H5</h1>
+    <van-form @submit="onSubmit">
+      <van-field
+        v-model="formData.loginName"
+        name="用户名"
+        label="用户名"
+        placeholder="用户名"
+        :rules="[{ required: true, message: '请填写用户名' }]"
+      />
+      <van-field
+        v-model="formData.loginPwd"
+        type="password"
+        name="密码"
+        label="密码"
+        placeholder="密码"
+        :rules="[{ required: true, message: '请填写密码' }]"
+      />
+      <div style="margin: 16px;">
+        <van-button  block type="info" native-type="submit">
+          登录
+        </van-button>
+      </div>
+    </van-form>
+  </div>
+</template>
+
+<script>
+import { loginApi } from '@/api/login';
+import cookie from '@/lib/cookie';
+
+export default {
+  data() {
+    return {
+      formData: {
+        loginName: '',
+        loginPwd: ''
+      },
+      codeUrl: ''
+    };
+  },
+  mounted() {
+  },
+  methods: {
+    // 获取验证码
+    async getVerificationCode() {
+      try {
+        const res = await loginApi.getVerificationCode();
+        const data = res.data;
+        this.formData.codeUuid = data.uuid;
+        this.codeUrl = data.code;
+        this.formData.code = '';
+        console.log(this.codeUrl);
+      } catch (e) {
+        this.$smartSentry.captureException(e);
+      }
+    },
+    // 提交表单
+    async onSubmit() {
+      this.$smart.loading();
+      try {
+        const res = await loginApi.login(this.formData);
+        const loginInfo = res.data;
+        this.$store.commit('user/updateSession', loginInfo);
+        cookie.setToken(loginInfo.xaccessToken);
+        this.$toast.success('登录成功');
+        this.$router.replace('/bpm');
+      } catch (e) {
+        console.log(e);
+        this.$smartSentry.captureException(e);
+        await this.getVerificationCode();
+      } finally {
+        this.$smart.loadingClear();
+      }
+    }
+  }
+};
+</script>

smart-admin-h5/src/views/main/main-mixin.js

@@ -0,0 +1,25 @@
+import cookie from '@/lib/cookie';
+import { userApi } from 'api/user';
+
+/**
+ * 此 mixin为登录以后的页面用的，因为所有的有效路由（排除登录、注册、404,500 这个几个特殊页面）都会走 other-main 或者 tabber-main两个父级组件。
+ * 所以对于一些session的信息获取只能放到这个两个main组件上，故此mixin只用于两个main组件，起到全局的作用
+ */
+export default {
+  created: function() {
+    const token = cookie.getToken();
+    // 如果登录过，获取token
+    if (token && !this.$store.state.user.isHaveGotSessionInfo) {
+      (async() => {
+        try {
+          console.debug(' request session info ');
+          const res = await userApi.getSession();
+          const loginInfo = res.data;
+          this.$store.commit('user/updateSession', loginInfo);
+        } catch (e) {
+          this.$smartSentry.captureException(e);
+        }
+      })();
+    }
+  }
+};

smart-admin-h5/src/views/main/other-main.vue

@@ -0,0 +1,31 @@
+<template>
+  <div>
+
+    <!---------------- 頁面内容 begin ---------------->
+    <div class="main-content">
+      <keep-alive>
+        <router-view v-if="$route.meta.keepAlive" />
+      </keep-alive>
+      <router-view v-if="!$route.meta.keepAlive" />
+    </div>
+
+  </div>
+</template>
+
+<script type="text/javascript">
+import mainMixin from './main-mixin';
+
+export default {
+  name: 'OtherMain',
+  mixins: [mainMixin],
+  data() {
+    return {};
+  },
+  created() {
+  },
+  computed: {},
+  methods: {}
+};
+</script>
+<style lang="less" scoped>
+</style>

smart-admin-h5/src/views/main/tabbar-main.vue

@@ -0,0 +1,96 @@
+<template>
+  <div>
+
+    <!---------------- 頁面内容 begin ---------------->
+    <div class="main-content">
+      <keep-alive>
+        <router-view v-if="$route.meta.keepAlive" />
+      </keep-alive>
+      <router-view v-if="!$route.meta.keepAlive" />
+    </div>
+    <!---------------- 頁面内容 end ---------------->
+
+    <!---------------- 底部 tabbar begin ---------------->
+    <div class="main-footer">
+      <van-tabbar
+        fixed
+        route
+        v-model="active"
+      >
+        <van-tabbar-item
+          v-for="(item, index) in tabbar"
+          :to="item.to"
+          :icon="item.icon"
+          :name="item.name"
+          :key="index">
+          {{ item.title }}
+        </van-tabbar-item>
+      </van-tabbar>
+    </div>
+    <!---------------- 底部 tabbar end ---------------->
+
+  </div>
+</template>
+
+<script type="text/javascript">
+import mainMixin from 'views/main/main-mixin';
+
+export default {
+  name: 'TabbarMain',
+  mixins: [mainMixin],
+  data() {
+    return {
+      active: 'ContactCompany',
+      tabbar: [
+        // {
+        //   name: 'Home',
+        //   title: '首页',
+        //   icon: 'wap-home-o',
+        //   to: '/home'
+        // },
+        // {
+        //   name: 'Business',
+        //   title: '业务中心',
+        //   icon: 'apps-o',
+        //   to: '/business'
+        // },
+        {
+          name: 'ContactCompany',
+          title: '往来机构',
+          icon: 'user-o',
+          badge: 0,
+          to: '/contact-company'
+        },
+        {
+          name: 'Mine',
+          title: '我的',
+          icon: 'user-o',
+          to: '/mine'
+        }
+      ]
+    };
+  },
+  created() {
+    // 通过路由跳转绑定Tabbar的选中
+    this.updateTabbarSelected(this.$route.name);
+  },
+  watch: {
+    // 监听路由变化,保证路由跳转Tabbar选中正常
+    $route: {
+      handler(val, oldval) {
+        // this.updateTabbarSelected(val.name)
+      }
+    },
+    deep: true
+  },
+  computed: {},
+  methods: {
+    updateTabbarSelected(item) {
+      console.log(item, 12222);
+      this.active = item;
+    }
+  }
+};
+</script>
+<style lang="less" scoped>
+</style>

smart-admin-h5/src/views/mine/change-password.vue

@@ -0,0 +1,96 @@
+<!-- home -->
+<template>
+  <div>
+    <router-nav-bar path="/mine" title="修改密码" left-text="返回" left-arrow />
+
+    <van-form @submit="onSubmit">
+      <van-field
+        v-model="formData.loginName"
+        name="旧密码"
+        label="旧密码"
+        placeholder="旧密码"
+        :rules="[{ required: true, message: '请填写旧密码' }]"
+      />
+      <van-field
+        v-model="formData.loginPwd"
+        type="password"
+        name="新密码"
+        label="新密码"
+        placeholder="新密码"
+        :rules="[{ required: true, message: '请填写新密码' }]"
+      />
+        <van-field
+          style="width: 60%;float:left"
+          v-model="formData.code"
+          name="新密码"
+          label="新密码"
+          placeholder="新密码"
+          :rules="[{ required: true, message: '请填写新密码' }]"
+        />
+      <div style="margin: 16px;">
+        <van-button block type="info" native-type="submit" size="small">
+          提交
+        </van-button>
+      </div>
+    </van-form>
+  </div>
+</template>
+
+<script>
+import { loginApi } from '@/api/login';
+import cookie from '@/lib/cookie';
+import RouterNavBar from 'components/van-bar/RouterNavBar';
+
+export default {
+  components: {
+    RouterNavBar
+  },
+  data() {
+    return {
+      formData: {
+        loginName: '',
+        loginPwd: '',
+        code: '',
+        codeUuid: ''
+      },
+      codeUrl: ''
+    };
+  },
+  mounted() {
+    this.getVerificationCode();
+  },
+  methods: {
+    // 获取验证码
+    async getVerificationCode() {
+      try {
+        const res = await loginApi.getVerificationCode();
+        const data = res.data;
+        this.formData.codeUuid = data.uuid;
+        this.codeUrl = data.code;
+        this.formData.code = '';
+        console.log(this.codeUrl);
+      } catch (e) {
+        this.$smartSentry.captureException(e);
+      }
+    },
+    // 提交表单
+    async onSubmit() {
+      this.$smart.loading();
+      try {
+        const res = await loginApi.login(this.formData);
+        const loginInfo = res.data;
+        this.$store.commit('user/updateSession', loginInfo);
+        cookie.setToken(loginInfo.xaccessToken);
+        this.$toast.success('登录成功');
+        this.$router.replace('/home');
+      } catch (e) {
+        console.log(e);
+        this.$smartSentry.captureException(e);
+        await this.getVerificationCode();
+      } finally {
+        this.$smart.loadingClear();
+      }
+    }
+  }
+};
+</script>

smart-admin-h5/src/views/mine/index.vue

@@ -0,0 +1,73 @@
+<!-- home -->
+<template>
+  <div>
+    <van-nav-bar title="个人中心"/>
+
+    <van-grid :column-num="1">
+      <van-grid-item icon="home-o" :text="actualName"/>
+    </van-grid>
+
+    <van-cell-group>
+      <!--      <van-cell icon="user-o" title="订单" is-link />-->
+      <!--      <van-cell icon="location-o" title="设置" is-link />-->
+      <!--      <van-cell icon="location-o" to="/user/change-password" title="修改密码" is-link />-->
+      <van-cell icon="bulb-o" title="更新权限" @click="updatePrivilege" is-link/>
+      <van-cell icon="apps-o" title="开发专用" is-link to="/develop/config"/>
+    </van-cell-group>
+
+    <div style="margin: 16px;">
+      <van-button block @click="logout" type="warning" size="small">
+        退出登录
+      </van-button>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import { loginApi } from 'api/login';
+import cookie from '@/lib/cookie';
+import { userApi } from 'api/user';
+
+export default {
+  data() {
+    return {
+      actualName: null
+    };
+  },
+
+  computed: {},
+
+  mounted() {
+    this.actualName = '你好, ' + this.$store.getters['user/actualName'];
+  },
+
+  methods: {
+    async updatePrivilege() {
+      this.$smart.loading();
+      try {
+        const res = await userApi.getSession();
+        const loginInfo = res.data;
+        this.$store.commit('user/updateSession', loginInfo);
+        this.$toast('已成功更新权限!');
+      } catch (e) {
+        this.$smartSentry.captureException(e);
+      } finally {
+        this.$smart.loadingClear();
+      }
+    },
+    async logout() {
+      this.$smart.loading();
+      try {
+        await loginApi.logout(cookie.getToken());
+      } catch (e) {
+        this.$smartSentry.captureException(e);
+      } finally {
+        cookie.clearToken();
+        this.$smart.loadingClear();
+        this.$router.replace('/login');
+      }
+    }
+  }
+};
+</script>