我们发布啦

admin/src/views/sms/smsConfig/index.vue

@@ -0,0 +1,190 @@
+<template>
+  <div class="divBox">
+    <el-card v-if="isShowList" v-loading="fullscreenLoading" class="box-card">
+      <div slot="header" class="clearfix">
+        <div class="content acea-row row-middle">
+          <div class="demo-basic--circle acea-row row-middle">
+            <el-avatar :size="50" :src="circleUrl" class="mr20" />
+            <div class="dashboard-workplace-header-tip">
+              <div class="dashboard-workplace-header-tip-title">{{ smsAccount }}，祝您每一天开心！</div>
+              <div class="dashboard-workplace-header-tip-desc">
+                <span class="mr10">修改密码</span>
+                <span @click="signOut">退出登录</span>
+              </div>
+            </div>
+          </div>
+          <div class="dashboard-workplace-header-extra">
+            <el-row type="flex" justify="center" align="middle" :gutter="12">
+              <el-col :span="8">
+                <span class="pfont acea-row row-middle">
+                  <el-avatar icon="el-icon-user-solid" size="small" class="mr10" />
+                  <span>剩余条数</span>
+                </span>
+                <span class="rR" v-text="numbers" />
+              </el-col>
+              <el-col :span="8">
+                <span class="pfont acea-row row-middle">
+                  <el-avatar icon="el-icon-user-solid" size="small" class="mr10" />
+                  <span>已发送</span>
+                </span>
+                <span class="rR" v-text="sendTotal" />
+              </el-col>
+              <el-col :span="8">
+                <span class="pfont acea-row row-middle">
+                  <el-avatar icon="el-icon-user-solid" size="small" class="mr10" />
+                  <span>总条数</span>
+                </span>
+                <span class="rR" v-text="amount" />
+              </el-col>
+            </el-row>
+          </div>
+        </div>
+      </div>
+    </el-card>
+    <table-list v-if="isShowList" />
+    <login-from v-if="isShowLogn" @on-changes="onChangeReg" @on-Login="onLogin" />
+    <register-from v-if="isShowReg" @on-change="logoup" />
+  </div>
+</template>
+
+<script>
+import tableList from './components/tableList'
+import loginFrom from './components/loginFrom'
+import registerFrom from './components/register'
+import { logoutApi, smsNumberApi, smsInfoApi } from '@/api/sms'
+import { mapGetters } from 'vuex'
+export default {
+  name: 'SmsConfig',
+  components: { tableList, loginFrom, registerFrom },
+  data() {
+    return {
+      fullscreenLoading: false,
+      smsAccount: '',
+      circleUrl: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
+      spinShow: false,
+      isShowLogn: false,
+      isShow: false,
+      isShowReg: false,
+      isShowList: false,
+      amount: 0,
+      numbers: 0,
+      sendTotal: 0
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'isLogin'
+    ])
+  },
+  mounted() {
+    this.onIsLogin()
+    // if (!this.isLogin) {
+    //   this.onIsLogin()
+    // } else {
+    //   this.isShowList = true
+    // }
+  },
+  methods: {
+    // 剩余条数
+    getNumber() {
+      smsInfoApi().then(async res => {
+        const data = res
+        this.numbers = data.number
+        this.sendTotal = data.send_total
+        this.amount = data.number + data.send_total
+        this.smsAccount = data.account
+      })
+    },
+    // 登录跳转
+    onLogin() {
+      const url = this.$route.query.url
+      if (url) {
+        this.$router.replace(url)
+      } else {
+        this.isShowLogn = false
+        this.isShow = false
+        this.isShowReg = false
+        this.isShowList = true
+      }
+    },
+    // 查看是否登录
+    onIsLogin() {
+      this.fullscreenLoading = true
+      this.$store.dispatch('user/isLogin').then(async res => {
+        const data = res
+        this.isShowLogn = !data.status
+        this.isShowList = data.status
+        if (data.status) {
+          this.smsAccount = data.info
+        }
+        this.getNumber()
+        this.fullscreenLoading = false
+      }).catch(res => {
+        this.fullscreenLoading = false
+        this.isShowLogn = true
+      })
+    },
+    // 退出登录
+    signOut() {
+      logoutApi().then(async res => {
+        this.isShowLogn = true
+        this.isShowList = false
+        this.$store.dispatch('user/isLogin')
+      }).catch(res => {
+        this.$message.error(res.message)
+      })
+    },
+    // 立即注册
+    onChangeReg() {
+      this.isShowLogn = false
+      this.isShow = false
+      this.isShowReg = true
+    },
+    // 立即登录
+    logoup() {
+      this.isShowLogn = true
+      this.isShow = false
+      this.isShowReg = false
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+  $cursor: #1890ff;
+  .content{
+    justify-content: space-between;
+  }
+  .rR{
+    text-align: center;
+    font-size: 22px;
+    display: block;
+  }
+  .dashboard-workplace-header-tip {
+    display: inline-block;
+    vertical-align: middle;
+  }
+  .dashboard-workplace-header-tip-title {
+    font-size: 20px;
+    font-weight: 700;
+    margin-bottom: 12px;
+  }
+  .dashboard-workplace-header-tip-desc{
+    /*line-height: 0 !important;*/
+    display: block;
+    span{
+      font-size: 12px;
+      color: $cursor;
+      cursor: pointer;
+      display: inline-block;
+    }
+  }
+  .dashboard-workplace-header-extra{
+    width: auto!important;
+    min-width: 400px;
+  }
+  .pfont{
+    font-size: 12px;
+    color: #808695;
+  }
+</style>