feat: 添加额度

.env.development

@@ -2,4 +2,4 @@
 ENV = 'development'
 
 # base api
-VUE_APP_BASE_API = 'http://39.105.11.109:17861'
+VUE_APP_BASE_API = 'http://39.105.11.109:6900'

src/components/ResultPage.vue

@@ -80,6 +80,7 @@
 </template>
 <script setup>
 import {ref, onMounted, reactive, watch} from 'vue'
+import { useStore } from 'vuex'
 import {postCreatTask, postCollectTask, postTaskList} from '@/network/api/user'
 import emitter from '@/utils/bus'
 import Operation from './OperationPage'
@@ -95,6 +96,8 @@ const props = defineProps({
 })
 const emit = defineEmits(['taskDetail', 'getTaskList'])
 
+const { dispatch } = useStore()
+
 let isShowResult = ref(false)
 let resultData = reactive({})
 let queryParams = reactive({
@@ -154,6 +157,7 @@ const refreshImg = async () => {
     emit('getTaskList')
     ElMessage.success(res.message)
     loading.value = false
+    dispatch('user/getInfo')
   }
 }
 // 下载
@@ -270,7 +274,7 @@ onMounted(() => {
 
   .content {
     width: 100%;
-    background-color: var(--el-fill-color-blank);
+    background-color: var(--page-bg-color);
     margin-top: 14px;
     margin-bottom: 14px;
     overflow: hidden;
@@ -313,7 +317,7 @@ onMounted(() => {
 .right-bar {
   width: 78px;
   height: 100%;
-  background-color: var(--el-fill-color-blank);
+  background-color: var(--page-bg-color);
   overflow-y: auto;
 }
 
@@ -323,7 +327,7 @@ onMounted(() => {
   .history-box {
     height: 240px;
     width: 100%;
-    background-color: var(--el-fill-color-blank);
+    background-color: var(--page-bg-color);
     border-radius: 12px;
     margin-top: 14px;
     padding: 24px 10px 28px 10px;

src/components/StyleSetting.vue

@@ -180,6 +180,9 @@
               </div>
             </div>
           </div>
+          <div class="silder-item">
+            <div class="tips">今日剩余额度<b>{{ state.user.quota }}</b></div>
+          </div>
         </div>
       </div>
       <div class="s-footer center-center">
@@ -190,6 +193,7 @@
 </template>
 <script setup>
 import { ref, reactive, onMounted, getCurrentInstance, watch } from 'vue'
+import { useStore } from 'vuex'
 import { ElMessage } from 'element-plus'
 import emitter from '@/utils/bus'
 import {
@@ -210,6 +214,9 @@ const internalInstance = getCurrentInstance()
 const props = defineProps({
   taskDetail: Object
 })
+
+let { state, dispatch } = useStore()
+
 let loading = ref(false)
 let formData = reactive({
   description: '',
@@ -256,6 +263,7 @@ const creatTask = async () => {
     loading.value = false
     emitter.emit('getDaskDetail', res.data)
     ElMessage.success(res.message)
+    dispatch('user/getInfo')
   }
 }
 // const isPage = ref(false)
@@ -312,6 +320,14 @@ onMounted(() => {
     margin-top: 5px;
   }
 }
+.silder-item {
+  .tips {
+    padding-top: 20px;
+    text-align: center;
+    font-size: 14px;
+    color: #fc011a;
+  }
+}
 .s-footer {
   margin-top: 40px;
   padding-top: 23px;

src/network/api/user.js

@@ -7,3 +7,4 @@ export const postCollectTask = (d) => POST_JSON('/poc/task/edit', d)
 export const postTaskList = (d) => POST_JSON('/poc/task/list', d)
 
 export const postLogin = (d, b) => POST_JSON('/poc/user/login', d, b)
+export const postInfo = (d, b) => POST_JSON('/poc/user/info', d, b)

src/store/modules/user.js

@@ -2,12 +2,11 @@
  * @description demo
  */
 // 状态树
-import { postLoginApi } from '@/network/api/user'
+import { postInfo } from '@/network/api/user'
 import { getToken, setToken, removeToken } from '@/utils/auth'
 const state = () => ({
   token: getToken() || '',
-  // permissions: JSON.parse(sessionStorage.getItem('permissions')) || [],
-  // menu: []
+  quota: 0
 })
 // 获取
 const getters = {
@@ -19,6 +18,9 @@ const mutations = {
   SET_TOKEN: (state, token) => {
     state.token = token
   },
+  SET_QUOTA: (state, quota) => {
+    state.quota = quota
+  }
   // SET_PERMISSIONS: (state, permissions) => {
   //   state.permissions = permissions
   // },
@@ -26,6 +28,20 @@ const mutations = {
   //   state.menu = menu
   // }
 }
+const actions = {
+  getInfo ({ commit }, data) {
+    return new Promise(async(resolve, reject) => {
+      const res = await postInfo(data)
+      // console.log(res)
+      if (res && res.code === 0) {
+        commit('SET_QUOTA', res.data.freeBalance)
+        resolve(res)
+      } else {
+        reject()
+      }
+    })
+  }
+}
 // 异步修改
 // const actions = {
 //   login ({ commit }, data) {
@@ -55,5 +71,5 @@ export default {
   state,
   getters,
   mutations,
-  // actions,
+  actions,
 }

src/styles/theme.scss

@@ -14,5 +14,6 @@
   // 自定义样式
   --page-border-color: #ccc;
   --page-text-color: #333;
-  --page-textsub-color: rgb(96, 98, 102)
+  --page-textsub-color: rgb(96, 98, 102);
+  --page-bg-color: #fdf9f9;
 }

src/views/HomeView.vue

@@ -40,6 +40,7 @@
 <script setup>
 import {reactive, ref, onMounted} from 'vue'
 import {useRoute} from 'vue-router'
+import { useStore } from 'vuex'
 // import { useStore } from 'vuex'
 import StyleSetting from '@/components/StyleSetting'
 import ResultPage from '@/components/ResultPage'
@@ -49,6 +50,9 @@ import {postTaskDetail, postLogin, postTaskList} from '@/network/api/user'
 import emitter from '@/utils/bus'
 
 const router = useRoute()
+
+let {state, dispatch} = useStore()
+
 let pageType = ref('setting')
 
 // const store = useStore
@@ -105,6 +109,8 @@ const login = async () => {
       // setToken(res.data.token)
       loginLoading.value = false
       getList()
+      console.log(dispatch)
+      dispatch('user/getInfo', {})
     } else {
       // removeToken()
       loginLoading.value = false