UI调整

src/lang/en.js

@@ -240,6 +240,7 @@ export default {
     hint: 'Hint',
     cancel: 'Cancel',
     confirm: 'Confirm',
+    successfully: 'Successfully',
   },
 
   shop: {

src/lang/zh.js

@@ -238,7 +238,8 @@ export default {
     deleteTips: '确认删除所选数据?',
     hint: '提示',
     confirm: '确定',
-    cancel: '取消'
+    cancel: '取消',
+    successfully: '成功',
   },
   shop: {
     productCode: '商品编号',

src/layout/components/AppMain.vue

@@ -1,9 +1,9 @@
 <template>
   <section class="app-main">
     <transition name="fade-transform" mode="out-in">
-      <keep-alive :include="cachedViews">
+<!--      <keep-alive :include="cachedViews">-->
         <router-view :key="key" />
-      </keep-alive>
+<!--      </keep-alive>-->
     </transition>
   </section>
 </template>

src/layout/components/TagsView/ScrollPane.vue

@@ -1,94 +0,0 @@
-<template>
-  <el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll">
-    <slot />
-  </el-scrollbar>
-</template>
-
-<script>
-const tagAndTagSpacing = 4 // tagAndTagSpacing
-
-export default {
-  name: 'ScrollPane',
-  data() {
-    return {
-      left: 0
-    }
-  },
-  computed: {
-    scrollWrapper() {
-      return this.$refs.scrollContainer.$refs.wrap
-    }
-  },
-  mounted() {
-    this.scrollWrapper.addEventListener('scroll', this.emitScroll, true)
-  },
-  beforeDestroy() {
-    this.scrollWrapper.removeEventListener('scroll', this.emitScroll)
-  },
-  methods: {
-    handleScroll(e) {
-      const eventDelta = e.wheelDelta || -e.deltaY * 40
-      const $scrollWrapper = this.scrollWrapper
-      $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
-    },
-    emitScroll() {
-      this.$emit('scroll')
-    },
-    moveToTarget(currentTag) {
-      const $container = this.$refs.scrollContainer.$el
-      const $containerWidth = $container.offsetWidth
-      const $scrollWrapper = this.scrollWrapper
-      const tagList = this.$parent.$refs.tag
-
-      let firstTag = null
-      let lastTag = null
-
-      // find first tag and last tag
-      if (tagList.length > 0) {
-        firstTag = tagList[0]
-        lastTag = tagList[tagList.length - 1]
-      }
-
-      if (firstTag === currentTag) {
-        $scrollWrapper.scrollLeft = 0
-      } else if (lastTag === currentTag) {
-        $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth
-      } else {
-        // find preTag and nextTag
-        const currentIndex = tagList.findIndex(item => item === currentTag)
-        const prevTag = tagList[currentIndex - 1]
-        const nextTag = tagList[currentIndex + 1]
-
-        // the tag's offsetLeft after of nextTag
-        const afterNextTagOffsetLeft = nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing
-
-        // the tag's offsetLeft before of prevTag
-        const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing
-
-        if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
-          $scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth
-        } else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
-          $scrollWrapper.scrollLeft = beforePrevTagOffsetLeft
-        }
-      }
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.scroll-container {
-  white-space: nowrap;
-  position: relative;
-  overflow: hidden;
-  width: 100%;
-  ::v-deep {
-    .el-scrollbar__bar {
-      bottom: 0px;
-    }
-    .el-scrollbar__wrap {
-      height: 49px;
-    }
-  }
-}
-</style>

src/layout/components/TagsView/index.vue

@@ -1,294 +0,0 @@
-<template>
-  <div id="tags-view-container" class="tags-view-container">
-    <scroll-pane ref="scrollPane" class="tags-view-wrapper" @scroll="handleScroll">
-      <router-link
-        v-for="tag in visitedViews"
-        ref="tag"
-        :key="tag.path"
-        :class="isActive(tag)?'active':''"
-        :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
-        tag="span"
-        class="tags-view-item"
-        @click.middle.native="!isAffix(tag)?closeSelectedTag(tag):''"
-        @contextmenu.prevent.native="openMenu(tag,$event)"
-      >
-        {{ generateTitle(tag.title) }}
-        <span v-if="!isAffix(tag)" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
-      </router-link>
-    </scroll-pane>
-    <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
-      <li @click="refreshSelectedTag(selectedTag)">{{ $t('tagsView.refresh') }}</li>
-      <li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)">{{ $t('tagsView.close') }}</li>
-      <li @click="closeOthersTags">{{ $t('tagsView.closeOthers') }}</li>
-      <li @click="closeAllTags(selectedTag)">{{ $t('tagsView.closeAll') }}</li>
-    </ul>
-  </div>
-</template>
-
-<script>
-import ScrollPane from './ScrollPane'
-import { generateTitle } from '@/utils/i18n'
-import path from 'path'
-
-export default {
-  components: { ScrollPane },
-  data() {
-    return {
-      visible: false,
-      top: 0,
-      left: 0,
-      selectedTag: {},
-      affixTags: []
-    }
-  },
-  computed: {
-    visitedViews() {
-      return this.$store.state.tagsView.visitedViews
-    },
-    routes() {
-      return this.$store.state.permission.routes
-    }
-  },
-  watch: {
-    $route() {
-      this.addTags()
-      this.moveToCurrentTag()
-    },
-    visible(value) {
-      if (value) {
-        document.body.addEventListener('click', this.closeMenu)
-      } else {
-        document.body.removeEventListener('click', this.closeMenu)
-      }
-    }
-  },
-  mounted() {
-    this.initTags()
-    this.addTags()
-  },
-  methods: {
-    generateTitle, // generateTitle by vue-i18n
-    isActive(route) {
-      return route.path === this.$route.path
-    },
-    isAffix(tag) {
-      return tag.meta && tag.meta.affix
-    },
-    filterAffixTags(routes, basePath = '/') {
-      let tags = []
-      routes.forEach(route => {
-        if (route.meta && route.meta.affix) {
-          const tagPath = path.resolve(basePath, route.path)
-          tags.push({
-            fullPath: tagPath,
-            path: tagPath,
-            name: route.name,
-            meta: { ...route.meta }
-          })
-        }
-        if (route.children) {
-          const tempTags = this.filterAffixTags(route.children, route.path)
-          if (tempTags.length >= 1) {
-            tags = [...tags, ...tempTags]
-          }
-        }
-      })
-      return tags
-    },
-    initTags() {
-      const affixTags = this.affixTags = this.filterAffixTags(this.routes)
-      for (const tag of affixTags) {
-        // Must have tag name
-        if (tag.name) {
-          this.$store.dispatch('tagsView/addVisitedView', tag)
-        }
-      }
-    },
-    addTags() {
-      const { name } = this.$route
-      if (name) {
-        this.$store.dispatch('tagsView/addView', this.$route)
-      }
-      return false
-    },
-    moveToCurrentTag() {
-      const tags = this.$refs.tag
-      this.$nextTick(() => {
-        for (const tag of tags) {
-          if (tag.to.path === this.$route.path) {
-            this.$refs.scrollPane.moveToTarget(tag)
-            // when query is different then update
-            if (tag.to.fullPath !== this.$route.fullPath) {
-              this.$store.dispatch('tagsView/updateVisitedView', this.$route)
-            }
-            break
-          }
-        }
-      })
-    },
-    refreshSelectedTag(view) {
-      this.$store.dispatch('tagsView/delCachedView', view).then(() => {
-        const { fullPath } = view
-        this.$nextTick(() => {
-          this.$router.replace({
-            path: '/redirect' + fullPath
-          })
-        })
-      })
-    },
-    closeSelectedTag(view) {
-      this.$store.dispatch('tagsView/delView', view).then(({ visitedViews }) => {
-        if (this.isActive(view)) {
-          this.toLastView(visitedViews, view)
-        }
-      })
-    },
-    closeOthersTags() {
-      this.$router.push(this.selectedTag)
-      this.$store.dispatch('tagsView/delOthersViews', this.selectedTag).then(() => {
-        this.moveToCurrentTag()
-      })
-    },
-    closeAllTags(view) {
-      this.$store.dispatch('tagsView/delAllViews').then(({ visitedViews }) => {
-        if (this.affixTags.some(tag => tag.path === view.path)) {
-          return
-        }
-        this.toLastView(visitedViews, view)
-      })
-    },
-    toLastView(visitedViews, view) {
-      const latestView = visitedViews.slice(-1)[0]
-      if (latestView) {
-        this.$router.push(latestView.fullPath)
-      } else {
-        // now the default is to redirect to the home page if there is no tags-view,
-        // you can adjust it according to your needs.
-        if (view.name === 'Dashboard') {
-          // to reload home page
-          this.$router.replace({ path: '/redirect' + view.fullPath })
-        } else {
-          this.$router.push('/')
-        }
-      }
-    },
-    openMenu(tag, e) {
-      const menuMinWidth = 105
-      const offsetLeft = this.$el.getBoundingClientRect().left // container margin left
-      const offsetWidth = this.$el.offsetWidth // container width
-      const maxLeft = offsetWidth - menuMinWidth // left boundary
-      const left = e.clientX - offsetLeft + 15 // 15: margin right
-
-      if (left > maxLeft) {
-        this.left = maxLeft
-      } else {
-        this.left = left
-      }
-
-      this.top = e.clientY
-      this.visible = true
-      this.selectedTag = tag
-    },
-    closeMenu() {
-      this.visible = false
-    },
-    handleScroll() {
-      this.closeMenu()
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.tags-view-container {
-  height: 34px;
-  width: 100%;
-  background: #fff;
-  border-bottom: 1px solid #d8dce5;
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
-  .tags-view-wrapper {
-    .tags-view-item {
-      display: inline-block;
-      position: relative;
-      cursor: pointer;
-      height: 26px;
-      line-height: 26px;
-      border: 1px solid #d8dce5;
-      color: #495060;
-      background: #fff;
-      padding: 0 8px;
-      font-size: 12px;
-      margin-left: 5px;
-      margin-top: 4px;
-      &:first-of-type {
-        margin-left: 15px;
-      }
-      &:last-of-type {
-        margin-right: 15px;
-      }
-      &.active {
-        background-color: #42b983;
-        color: #fff;
-        border-color: #42b983;
-        &::before {
-          content: '';
-          background: #fff;
-          display: inline-block;
-          width: 8px;
-          height: 8px;
-          border-radius: 50%;
-          position: relative;
-          margin-right: 2px;
-        }
-      }
-    }
-  }
-  .contextmenu {
-    margin: 0;
-    background: #fff;
-    z-index: 3000;
-    position: absolute;
-    list-style-type: none;
-    padding: 5px 0;
-    border-radius: 4px;
-    font-size: 12px;
-    font-weight: 400;
-    color: #333;
-    box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
-    li {
-      margin: 0;
-      padding: 7px 16px;
-      cursor: pointer;
-      &:hover {
-        background: #eee;
-      }
-    }
-  }
-}
-</style>
-
-<style lang="scss">
-//reset element css of el-icon-close
-.tags-view-wrapper {
-  .tags-view-item {
-    .el-icon-close {
-      width: 16px;
-      height: 16px;
-      vertical-align: 2px;
-      border-radius: 50%;
-      text-align: center;
-      transition: all .3s cubic-bezier(.645, .045, .355, 1);
-      transform-origin: 100% 50%;
-      &:before {
-        transform: scale(.6);
-        display: inline-block;
-        vertical-align: -3px;
-      }
-      &:hover {
-        background-color: #b4bccc;
-        color: #fff;
-      }
-    }
-  }
-}
-</style>

src/layout/components/index.js

@@ -2,4 +2,3 @@ export { default as AppMain } from './AppMain'
 export { default as Navbar } from './Navbar'
 export { default as Settings } from './Settings'
 export { default as Sidebar } from './Sidebar/index.vue'
-export { default as TagsView } from './TagsView/index.vue'

src/router/modules/finance.js

@@ -16,12 +16,6 @@ const financeRouter = {
       name: 'TransferList',
       meta: { title: 'transferList', icon: 'el-icon-coin' }
     },
-    {
-      path: 'transfer-apply',  // 发起转账
-      component: () => import('@/views/finance/transfer-apply'),
-      name: 'TransferApply',
-      meta: { title: 'transferApply', icon: 'el-icon-coin' }
-    },
   ]
 }
 export default financeRouter

src/settings.js

@@ -5,7 +5,7 @@ module.exports = {
    * @type {boolean} true | false
    * @description Whether show the settings right-panel
    */
-  showSettings: true,
+  showSettings: false,
 
   /**
    * @type {boolean} true | false

src/utils/index.js

@@ -355,3 +355,51 @@ export function removeClass(ele, cls) {
     ele.className = ele.className.replace(reg, ' ')
   }
 }
+
+/**
+ * 查询操作系统
+ * @returns {string}
+ */
+export function getOperatingSystem() {
+  try {
+    //检测当前操作系统
+    if (/(android|Android|ANDROID)/i.test(navigator.userAgent)) {
+      //这是Android平台下浏览器
+      return "Android";
+    }
+    if (/(iPhone|iPad|iPod|iOS|iphone|ipad|ipod|ios)/i.test(navigator.userAgent)) {
+      //这是iOS平台下浏览器
+      return "ios"
+    }
+    if (/win|windows|Win|Windows/i.test(navigator.userAgent)) {
+      //这是Linux平台下浏览器
+      return "windows"
+    }
+    if (/Linux/i.test(navigator.platform)) {
+      //这是Linux操作系统平台
+      return "linux"
+    }
+  } catch (e) {
+    //可以看看e是什么玩意
+    console.log(e);
+    //返回未知
+    return "unknow";
+  }
+}
+
+/**
+ * 查询屏幕分辨率宽度
+ * @returns {number}
+ */
+export function getScreenWidth() {
+  // return window.screen.width * window.devicePixelRatio
+  return window.screen.width
+}
+
+/**
+ * 查询屏幕分辨率宽度
+ * @returns {number}
+ */
+export function getScreenHeight() {
+  return window.screen.height * window.devicePixelRatio
+}

src/views/bonus/account-list.vue

@@ -3,10 +3,10 @@
 		<el-row :gutter="20">
 			<el-col :xs="24" :sm="12" :lg="6" :span="6" v-for="item in walletData" :key="item.walletType">
 				<el-card shadow="hover" style="margin: 10px auto;">
-					<el-result icon="success" :title="item.walletName" :subTitle="item.amount">
-						<template slot="icon">
-							<el-image fit="cover" :src="tool.getArImage(item.walletType + '.png', '/files/')" style="width: 100px; height: 100px; border-radius: 50%;"></el-image>
-						</template>
+					<el-result icon="info" :title="item.walletName" :subTitle="item.amount">
+<!--						<template slot="icon">-->
+<!--							<el-image fit="cover" :src="tool.getArImage(item.walletType + '.png', '/files/')" style="width: 100px; height: 100px; border-radius: 50%;"></el-image>-->
+<!--						</template>-->
 						<template slot="extra">
 							<el-button type="primary" size="small" @click="handleBonusFlow(item.walletType, item.walletName)" v-show="dealSwitch">{{ $t('bonus.viewRecord') }}</el-button>
 						</template>
@@ -15,11 +15,9 @@
 			</el-col>
 		</el-row>
 
-		<el-dialog :title="bonusFlowType" :visible.sync="dialog" width="80%" v-loading="loading">
-			<div class="app-container" style="margin-top: -40px;">
-				<div class="filter-container">
-					<el-row :gutter="20">
-						<el-col :xs="24" :sm="24" :lg="6" :span="6">
+		<el-dialog :title="bonusFlowType" :visible.sync="dialog" :width="screenWidth" v-loading="loading" style="margin-top: -70px;">
+			<el-row :gutter="10" style="margin-top: -30px;">
+						<el-col :xs="24" :sm="24" :lg="6">
 							<el-date-picker
 								v-model="listQuery.createAt[0]"
 								type="date"
@@ -54,14 +52,13 @@
 							</div>
 						</el-col>
 					</el-row>
-				</div>
 
-				<el-table
+			<el-table
 					:data="bonusData"
 					border
 					fit
 					highlight-current-row
-					style="width: 100%;"
+					style="margin-top: 10px;"
 					:xs="24" :sm="24" :lg="6"
 				>
 					<el-table-column :label="$t('bonus.transTime')" align="center" min-width="140px">
@@ -98,12 +95,11 @@
 					</el-table-column>
 				</el-table>
 
-				<el-row :gutter="20">
+			<el-row :gutter="10">
 					<el-col :xs="24" :sm="24" :lg="24" :span="24">
 						<pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.pageSize" @pagination="handleBonusFlow(listQuery.walletType, walletName)" />
 					</el-col>
 				</el-row>
-			</div>
 		</el-dialog>
 	</div>
 </template>
@@ -112,6 +108,7 @@
 import {fetchAccount,fetchAccountFlow} from '@/api/bonus'
 import Pagination from '@/components/Pagination'
 import tool from "@/utils/tool"
+import {getScreenWidth} from "@/utils";
 
 export default {
   name: 'accountList',
@@ -138,6 +135,7 @@ export default {
 				remark: '',
 				dealType: '',
 			},
+			screenWidth: getScreenWidth() > 600 ? '70%' : getScreenWidth() + 'px'
     }
   },
   created() {

src/views/bonus/bonus-list.vue

@@ -5,15 +5,14 @@
       border
       fit
       highlight-current-row
-      style="width: 100%; margin-top: 25px;"
     >
-      <el-table-column width="100px" align="center" :label="$t('bonus.payCycle')" prop="PERIOD_NUM.value"></el-table-column>
-			<el-table-column width="140px" align="center" :label="$t('bonus.welcomeBonus')" prop="BONUS_TG.value" v-show="welcomeBonusSwitch === 1"></el-table-column>
-      <el-table-column width="120px" align="center" :label="$t('bonus.teamBonus')" prop="ORI_BONUS_QY.value" v-show="teamBonusSwitch === 1"></el-table-column>
-      <el-table-column width="130px" align="center" :label="$t('bonus.directorBonus')" prop="ORI_BONUS_BS.value"></el-table-column>
-      <el-table-column width="180px" align="center" :label="$t('bonus.quarterlyBonus')" prop="ORI_BONUS_QUARTER.value"></el-table-column>
-			<el-table-column width="180px" align="center" :label="$t('bonus.stockistCommission')" prop="BONUS_BD.value" v-show="stockistCommissionSwitch === 1"></el-table-column>
-			<el-table-column width="180px" align="center" :label="$t('bonus.actualBonus')" prop="BONUS_REAL.value"></el-table-column>
+      <el-table-column align="center" :label="$t('bonus.payCycle')" prop="PERIOD_NUM.value"></el-table-column>
+			<el-table-column align="center" :label="$t('bonus.welcomeBonus')" prop="BONUS_TG.value" v-show="welcomeBonusSwitch === 1"></el-table-column>
+      <el-table-column align="center" :label="$t('bonus.teamBonus')" prop="ORI_BONUS_QY.value" v-show="teamBonusSwitch === 1"></el-table-column>
+      <el-table-column align="center" :label="$t('bonus.directorBonus')" prop="ORI_BONUS_BS.value"></el-table-column>
+      <el-table-column align="center" :label="$t('bonus.quarterlyBonus')" prop="ORI_BONUS_QUARTER.value"></el-table-column>
+			<el-table-column align="center" :label="$t('bonus.stockistCommission')" prop="BONUS_BD.value" v-show="stockistCommissionSwitch === 1"></el-table-column>
+			<el-table-column align="center" :label="$t('bonus.actualBonus')" prop="BONUS_REAL.value"></el-table-column>
       <el-table-column align="center" :label="$t('common.action')">
         <template slot-scope="{row}">
 					<el-button-group>
@@ -23,8 +22,8 @@
       </el-table-column>
     </el-table>
 
-		<el-dialog :title="bonusPayCycle" :visible.sync="dialog" width="60%">
-			<el-descriptions title="" class="bonus-list" :column="2" border size="medium" style="width: 100%" v-if="bonusData">
+		<el-dialog :title="bonusPayCycle" :visible.sync="dialog" :width="screenWidth" v-if="bonusData" style="margin-top: -70px">
+			<el-descriptions title="" class="bonus-list" :column="2" border size="medium" style="width: 100%">
 				<el-descriptions-item class="bonus-item" :label="$t('shop.memberCode')">{{ bonusData.USER_NAME.value }}</el-descriptions-item>
 				<el-descriptions-item class="bonus-item" :label="$t('bonus.payCycle')">{{ bonusData.PERIOD_NUM.value }}</el-descriptions-item>
 				<el-descriptions-item class="bonus-item" :label="$t('profile.memberLevel')">{{ bonusData.LAST_DEC_LV.value }}</el-descriptions-item>
@@ -48,6 +47,7 @@
 
 <script>
 import {fetchBonusList, fetchBonusDetail} from '@/api/bonus'
+import {getScreenWidth} from "@/utils";
 
 export default {
   name: 'bonusList',
@@ -63,7 +63,9 @@ export default {
 
 			dialog: false,
 			bonusData: null,
-			bonusPayCycle: ''
+			bonusPayCycle: '',
+
+			screenWidth: getScreenWidth() > 600 ? '70%' : getScreenWidth() + 'px'
     }
   },
   created() {

src/views/config/receive-address-list.vue

@@ -1,123 +1,101 @@
 <template>
   <div class="app-container" v-loading="listLoading">
-		<el-button size="small" type="primary" @click="dialog = true">{{ $t('config.createAddress') }}</el-button>
-    <el-table
-      :data="list"
-      border
-      fit
-      highlight-current-row
-      style="width: 100%; margin-top: 25px;"
-    >
-      <el-table-column width="120px" align="center" :label="$t('config.consignee')" prop="CONSIGNEE">
-        <template slot-scope="{row}">
-          <span>{{ row.CONSIGNEE }}</span>
-        </template>
-      </el-table-column>
-			<el-table-column width="130px" align="center" :label="$t('shop.phoneNumber')" prop="MOBILE">
-				<template slot-scope="{row}">
-					<span>{{ row.MOBILE }}</span>
-				</template>
-			</el-table-column>
-      <el-table-column align="center" :label="$t('config.detailedAddress')" prop="ADDRESS">
-        <template slot-scope="{row}">
-          <span>{{ row.ADDRESS }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column width="130px" align="center" :label="$t('config.city')" prop="CITY_NAME">
-        <template slot-scope="{row}">
-          <span>{{ row.CITY_NAME }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column width="180px" align="center" :label="$t('config.localGovernmentArea')" prop="LGA_NAME">
-        <template slot-scope="{row}">
-          <span>{{ row.LGA_NAME }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column width="120px" align="center" :label="$t('config.state')" prop="PROVINCE_NAME">
-        <template slot-scope="{row}">
-          <span>{{ row.PROVINCE_NAME }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column width="130px" align="center" :label="$t('config.default')" prop="IS_DEFAULT">
+    <el-table :data="list" border fit highlight-current-row>
+      <el-table-column align="center" :label="$t('config.consignee')" prop="CONSIGNEE"></el-table-column>
+			<el-table-column align="center" :label="$t('shop.phoneNumber')" prop="MOBILE"></el-table-column>
+      <el-table-column align="center" :label="$t('config.detailedAddress')" prop="ADDRESS"></el-table-column>
+      <el-table-column align="center" :label="$t('config.city')" prop="CITY_NAME"></el-table-column>
+      <el-table-column align="center" :label="$t('config.localGovernmentArea')" prop="LGA_NAME"></el-table-column>
+      <el-table-column align="center" :label="$t('config.state')" prop="PROVINCE_NAME"></el-table-column>
+      <el-table-column align="center" :label="$t('config.default')" prop="IS_DEFAULT">
         <template slot-scope="{row}">
 					<el-switch size="small" v-model="row.IS_DEFAULT" active-value="1" inactive-value="0" @change="changeDefault($event, row)"></el-switch>
         </template>
       </el-table-column>
-      <el-table-column width="150px" align="center" :label="$t('common.action')" class-name="small-padding fixed-width">
+      <el-table-column align="center" :label="$t('common.action')" min-width="90px">
         <template slot-scope="{row}">
-					<el-button-group>
-						<el-button type="primary" size="mini" @click="handleEdit(row)">{{ $t('common.edit') }}</el-button>
-						<el-button type="danger" size="mini" @click="handleDelete(row.ID)">{{ $t('common.delete') }}</el-button>
-					</el-button-group>
+						<el-button type="text" size="mini" @click="handleEdit(row)">{{ $t('common.edit') }}</el-button>
+						<el-button type="text" size="mini" @click="handleDelete(row.ID)">{{ $t('common.delete') }}</el-button>
         </template>
       </el-table-column>
     </el-table>
 
-    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.pageSize" @pagination="getList" />
+		<div class="white-box-footer" style="margin-top: 10px;">
+			<el-button size="small" type="primary" @click="dialog = true">{{ $t('config.createAddress') }}</el-button>
+			<pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.pageSize" @pagination="getList" />
+		</div>
 
-		<el-dialog :title="$t('config.createAddress')" :visible.sync="dialog" v-loading="dialogLoading" style="margin-top: -50px;">
-			<el-form ref="dataForm" :model="dataForm" label-position="right" label-width="180px" style="width: 500px; margin-left:50px;">
-				<el-form-item :label="$t('config.consignee')" prop="consignee" required>
-					<el-input size="small" v-model="dataForm.consignee" type="text" />
-				</el-form-item>
-				<el-form-item :label="$t('shop.phoneNumber')" prop="mobile" required>
-					<el-input size="small" v-model="dataForm.mobile" />
-				</el-form-item>
-				<el-form-item :label="$t('config.state')" prop="province" required style="width: 100%;">
-					<el-select v-model="dataForm.province" class="filter-item" >
-						<el-option v-for="item in regionData" :key="item.id" :label="item.address" :value="item.id" />
-					</el-select>
-				</el-form-item>
-				<el-form-item :label="$t('config.detailedAddress')" prop="address" required>
-					<el-input size="small" v-model="dataForm.address" />
-				</el-form-item>
-				<el-form-item :label="$t('config.city')" prop="cityName" required>
-					<el-input size="small" v-model="dataForm.cityName" />
-				</el-form-item>
-				<el-form-item :label="$t('config.localGovernmentArea')" prop="lgaName" required>
-					<el-input size="small" v-model="dataForm.lgaName" />
-				</el-form-item>
-				<el-form-item :label="$t('config.default')" prop="isDefault">
-					<el-switch size="small" v-model="dataForm.isDefault" active-value="1" inactive-value="0"></el-switch>
-				</el-form-item>
-			</el-form>
-			<div slot="footer" class="dialog-footer" style="margin-right: 110px; margin-top: -30px;">
-				<el-button type="warning" size="small" @click="dialog = false">{{ $t('table.cancel') }}</el-button>
-				<el-button type="primary" size="small" @click="createAddress">{{ $t('table.confirm') }}</el-button>
-			</div>
+		<el-dialog :title="$t('config.createAddress')" :width="screenWidth" :visible.sync="dialog" v-loading="dialogLoading" style="margin-top: -70px;">
+			<el-form ref="dataForm" :model="dataForm" :label-position="labelPosition" style="margin-top: -30px; margin-bottom: -25px;">
+				<el-row :gutter="1">
+					<el-col :xs="24" :sm="24" :lg="24">
+						<el-form-item :label="$t('config.consignee')" prop="consignee" required style="margin-bottom: 10px;">
+							<el-input size="small" v-model="dataForm.consignee" type="text" />
+						</el-form-item>
+						<el-form-item :label="$t('shop.phoneNumber')" prop="mobile" required style="margin-bottom: 10px;">
+							<el-input size="small" v-model="dataForm.mobile" />
+						</el-form-item>
+						<el-form-item :label="$t('config.state')" prop="province" required style="margin-bottom: 10px;">
+							<el-select v-model="dataForm.province" class="filter-item" style="width: 100%;">
+								<el-option v-for="item in regionData" :key="item.id" :label="item.address" :value="item.id" />
+							</el-select>
+						</el-form-item>
+						<el-form-item :label="$t('config.detailedAddress')" prop="address" required style="margin-bottom: 10px;">
+							<el-input size="small" v-model="dataForm.address" />
+						</el-form-item>
+						<el-form-item :label="$t('config.city')" prop="cityName" required style="margin-bottom: 10px;">
+							<el-input size="small" v-model="dataForm.cityName" />
+						</el-form-item>
+						<el-form-item :label="$t('config.localGovernmentArea')" prop="lgaName" required style="margin-bottom: 10px;">
+							<el-input size="small" v-model="dataForm.lgaName" />
+						</el-form-item>
+						<el-form-item :label="$t('config.default')" prop="isDefault" style="margin-bottom: 10px;">
+							<el-switch size="small" v-model="dataForm.isDefault" active-value="1" inactive-value="0"></el-switch>
+						</el-form-item>
+						<el-form-item style="margin-bottom: 10px;">
+							<el-button type="warning" size="small" @click="dialog = false">{{ $t('table.cancel') }}</el-button>
+							<el-button type="primary" size="small" @click="createAddress">{{ $t('table.confirm') }}</el-button>
+						</el-form-item>
+					</el-col>
+				</el-row>
+				</el-form>
 		</el-dialog>
 
-		<el-dialog :title="$t('config.editAddress')" :visible.sync="dialogEdit" v-loading="editLoading" style="margin-top: -50px;">
-			<el-form ref="editForm" :model="editForm" label-position="right" label-width="180px" style="width: 500px; margin-left:50px;">
-				<el-input size="small" v-model="editForm.id" type="text" v-show="false" />
-				<el-form-item :label="$t('config.consignee')" prop="consignee" required>
-					<el-input size="small" v-model="editForm.consignee" type="text" />
-				</el-form-item>
-				<el-form-item :label="$t('shop.phoneNumber')" prop="mobile" required>
-					<el-input size="small" v-model="editForm.mobile" />
-				</el-form-item>
-				<el-form-item :label="$t('config.state')" prop="province" required style="width: 100%;">
-					<el-select v-model="editForm.province" class="filter-item" >
-						<el-option v-for="item in regionData" :key="item.id" :label="item.address" :value="item.id" />
-					</el-select>
-				</el-form-item>
-				<el-form-item :label="$t('config.detailedAddress')" prop="address" required>
-					<el-input size="small" v-model="editForm.address" />
-				</el-form-item>
-				<el-form-item :label="$t('config.city')" prop="cityName" required>
-					<el-input size="small" v-model="editForm.cityName" />
-				</el-form-item>
-				<el-form-item :label="$t('config.localGovernmentArea')" prop="lgaName" required>
-					<el-input size="small" v-model="editForm.lgaName" />
-				</el-form-item>
-				<el-form-item :label="$t('config.default')" prop="isDefault">
-					<el-switch size="small" v-model="editForm.isDefault" active-value="1" inactive-value="0"></el-switch>
-				</el-form-item>
+		<el-dialog :title="$t('config.editAddress')" :width="screenWidth" :visible.sync="dialogEdit" v-loading="editLoading" style="margin-top: -70px;">
+			<el-form ref="editForm" :model="editForm" :label-position="labelPosition" style="margin-top: -30px; margin-bottom: -25px;">
+				<el-row :gutter="3">
+					<el-col :xs="24" :sm="24" :lg="24">
+						<el-input size="small" v-model="editForm.id" type="text" v-show="false" />
+						<el-form-item :label="$t('config.consignee')" prop="consignee" required style="margin-bottom: 10px;">
+							<el-input size="small" v-model="editForm.consignee" type="text" />
+						</el-form-item>
+						<el-form-item :label="$t('shop.phoneNumber')" prop="mobile" required style="margin-bottom: 10px;">
+							<el-input size="small" v-model="editForm.mobile" />
+						</el-form-item>
+						<el-form-item :label="$t('config.state')" prop="province" required style="margin-bottom: 10px;">
+							<el-select v-model="editForm.province" class="filter-item" style="width: 100%;">
+								<el-option v-for="item in regionData" :key="item.id" :label="item.address" :value="item.id" />
+							</el-select>
+						</el-form-item>
+						<el-form-item :label="$t('config.detailedAddress')" prop="address" required style="margin-bottom: 10px;">
+							<el-input size="small" v-model="editForm.address" />
+						</el-form-item>
+						<el-form-item :label="$t('config.city')" prop="cityName" required style="margin-bottom: 10px;">
+							<el-input size="small" v-model="editForm.cityName" />
+						</el-form-item>
+						<el-form-item :label="$t('config.localGovernmentArea')" prop="lgaName" required style="margin-bottom: 10px;">
+							<el-input size="small" v-model="editForm.lgaName" />
+						</el-form-item>
+						<el-form-item :label="$t('config.default')" prop="isDefault" style="margin-bottom: 10px;">
+							<el-switch size="small" v-model="editForm.isDefault" active-value="1" inactive-value="0"></el-switch>
+						</el-form-item>
+						<el-form-item style="margin-bottom: 10px;">
+							<el-button type="warning" size="small" @click="dialogEdit = false">{{ $t('table.cancel') }}</el-button>
+							<el-button type="primary" size="small" @click="updateAddress">{{ $t('table.confirm') }}</el-button>
+						</el-form-item>
+					</el-col>
+				</el-row>
 			</el-form>
-			<div slot="footer" class="dialog-footer" style="margin-right: 110px; margin-top: -30px;">
-				<el-button type="warning" size="small" @click="dialogEdit = false">{{ $t('table.cancel') }}</el-button>
-				<el-button type="primary" size="small" @click="updateAddress">{{ $t('table.confirm') }}</el-button>
-			</div>
 		</el-dialog>
   </div>
 </template>
@@ -126,6 +104,7 @@
 import {createAddress, fetchAddressList, updateAddress, deleteAddress} from '@/api/config'
 import waves from '@/directive/waves'
 import Pagination from '@/components/Pagination'
+import {getScreenWidth} from "@/utils";
 
 export default {
   name: 'receiveAddressList',
@@ -176,6 +155,8 @@ export default {
 					address: 'test2',
 				},
 			],
+			screenWidth: getScreenWidth() > 600 ? '500px' : getScreenWidth() + 'px',
+			labelPosition: getScreenWidth() > 600 ? 'right' : 'top',
     }
   },
   created() {
@@ -197,7 +178,7 @@ export default {
 			this.dialogLoading = true
 			createAddress(this.dataForm).then(() => {
 				this.$message({
-					message: this.$t('config.messageCreate'),
+					message: this.$t('common.successfully'),
 					type: 'success',
 					duration: 5 * 1000
 				})
@@ -229,7 +210,7 @@ export default {
 			this.listLoading = true
 			updateAddress(data).then(() => {
 				this.$message({
-					message: this.$t('config.messageUpdate'),
+					message: this.$t('common.successfully'),
 					type: 'success',
 					duration: 5 * 1000
 				})
@@ -248,15 +229,15 @@ export default {
 		},
 		handleDelete(id) {
 			this.$confirm(this.$t('common.deleteTips'), this.$t('common.hint'), {
-				confirmButtonText: 'Confirm',
-				cancelButtonText: 'Cancel',
+				confirmButtonText: this.$t('common.confirm'),
+				cancelButtonText: this.$t('common.cancel'),
 				type: 'warning'
 			}).then(() => {
 				const data = { selected: [id]}
 				this.listLoading = true
 				deleteAddress(data).then(() => {
 					this.$message({
-						message: this.$t('config.messageDelete'),
+						message: this.$t('common.successfully'),
 						type: 'success',
 						duration: 5 * 1000
 					})
@@ -290,7 +271,7 @@ export default {
 			this.editLoading = true
 			updateAddress(this.editForm).then(() => {
 				this.$message({
-					message: this.$t('config.messageUpdate'),
+					message: this.$t('common.successfully'),
 					type: 'success',
 					duration: 5 * 1000
 				})

src/views/dashboard/admin/components/PanelGroup.vue

@@ -9,7 +9,7 @@
           <div class="card-panel-text">
             {{ $t('dashboard.highestDirector') }}
           </div>
-          <div class="">
+          <div class="" style="padding: 10px;">
             {{ $t(`empLevels.${heightEmpLv}`) }}
           </div>
         </div>
@@ -24,7 +24,7 @@
 					<div class="card-panel-text">
 						{{ $t('dashboard.highestCrown') }}
 					</div>
-					<div class="">
+					<div class="" style="padding: 10px;">
 						{{ $t(`crownLevels.${heightCrownLv}`) }}
 					</div>
 				</div>
@@ -39,7 +39,7 @@
           <div class="card-panel-text">
             {{ $t('dashboard.memberLevel') }}
           </div>
-          <div class="">
+          <div class="" style="padding: 10px;">
             {{ $t(`decLvs.${decLv}`) }}
           </div>
         </div>
@@ -54,7 +54,7 @@
           <div class="card-panel-text">
             {{ $t('dashboard.payCycle') }}
           </div>
-          <div class="">
+          <div class="" style="padding: 10px;">
             {{ cycle }}
           </div>
         </div>

src/views/finance/transfer-apply.vue

@@ -1,208 +0,0 @@
-<template>
-	<div class="app-container" v-loading="loading">
-		<el-form ref="form" :model="form" label-position="right" label-width="130px">
-			<el-row :gutter="10">
-				<el-col :xs="24" :sm="24" :lg="6">
-					<el-form-item :label="$t('finance.transferType')" prop="type" :placeholder="$t('finance.selectTransferType')" required>
-						<el-select v-model="form.type" class="filter-item">
-							<el-option v-for="(item,key) in transferConfig" :key="key" :label="item.outName + ' To ' + item.inName" :value="item.typeId" />
-						</el-select>
-					</el-form-item>
-					<el-form-item :label="$t('finance.currentAvailableBonus')">
-						<el-tag type="success">{{ balance }} {{ $t('currency.naira') }}</el-tag>
-					</el-form-item>
-					<el-form-item :label="$t('finance.currentAvailableEcoin')">
-						<el-tag type="success">{{ cash }} {{ $t('currency.naira') }}</el-tag>
-					</el-form-item>
-					<el-form-item :label="$t('finance.currentTransferRatio')" v-if="false">
-						<el-tag type="info">{{ transferProp }}%</el-tag>
-					</el-form-item>
-					<el-form-item :label="$t('finance.maximumTransferAmount')" v-if="false">
-						<el-tag type="info">{{ maxAmount }} {{ $t('currency.naira') }}</el-tag>
-					</el-form-item>
-					<el-form-item :label="$t('finance.memberCode')" prop="toUserName" required>
-						<el-input size="small" v-model.trim="form.toUserName" type="text" @change="fetchMember"></el-input>
-					</el-form-item>
-					<el-form-item :label="$t('finance.memberName')" prop="toRealName" v-show="form.toRealName !== null">
-						<el-input size="small" v-model.trim="form.toRealName" type="text" disabled></el-input>
-					</el-form-item>
-					<el-form-item :label="$t('finance.transferAmount')" prop="amount" required>
-						<el-input v-model.number="form.amount" type="number" :min="minAmount" :max="maxAmount" @change="chkReal"></el-input>
-					</el-form-item>
-					<el-form-item :label="$t('finance.transferAmount')" v-show="fee > 0">
-						<el-tag type="info">{{ fee }}%</el-tag>
-					</el-form-item>
-					<el-form-item :label="$t('finance.actualAmountTransferredInto')" v-show="fee > 0">
-						<el-tag type="warning">{{ realAmount }} {{ $t('currency.naira') }}</el-tag>
-					</el-form-item>
-					<el-form-item :label="$t('finance.remark')" prop="remark">
-						<el-input size="small" v-model.trim="form.remark" type="text"></el-input>
-					</el-form-item>
-					<el-form-item>
-						<el-button type="warning" size="small" @click="transferList">{{ $t('table.cancel') }}</el-button>
-						<el-button type="primary" size="small" @click="submit('form')">{{ $t('table.confirm') }}</el-button>
-					</el-form-item>
-				</el-col>
-			</el-row>
-		</el-form>
-	</div>
-</template>
-
-<script>
-import {fetchApplyTransfer, fetchBalance, fetchChkTransferUser, fetchFullInfo, fetchTransferCode} from '@/api/finance'
-import waves from '@/directive/waves'
-import Pagination from '@/components/Pagination'
-import tool from "@/utils/tool"
-import usersInfo from "@/utils/usersInfo";
-
-export default {
-	name: 'transferApply',
-	components: { Pagination },
-	directives: { waves },
-	data() {
-		return {
-			tool: tool,
-			loading: false,
-			form: {
-				type: 1,
-				toUserName: '',
-				toRealName: null,
-				amount: 0,
-				payPassword: '',
-				remark: '',
-				transferCode: '',
-			},
-			userInfo: {
-				TRANSFER_PROP: 100
-			},
-			transferConfig: [],
-			minAmount: 0,
-			maxAmount: 0,
-			transferProp: 0,
-			fee: 0,
-			cash: 0,
-			balance: 0,
-			realAmount: 0,
-			minAmountAllow: 5000,
-
-			submitButtonStat: false,
-		}
-	},
-	created() {
-		this.applyTransfer()
-	},
-	mounted() {
-		this.fetchBalance()
-	},
-	methods: {
-		applyTransfer() {
-			this.loading = true
-			fetchChkTransferUser().then(response => {
-				this.userInfo = response.data.userInfo
-				this.transferConfig = response.data.transferConfig
-				this.minAmount = response.data.minAmount
-				// 奖金转现金
-				this.fee = this.transferConfig[this.form.type - 1].fee
-
-				setTimeout(() => {
-					this.loading = false
-				}, 0.5 * 1000)
-			})
-		},
-		fetchBalance() {
-			fetchBalance().then(response => {
-				this.balance = response.data.bonus
-				this.cash = response.data.cash
-				this.maxAmount = parseFloat(tool.formatPrice(this.balance * this.userInfo.TRANSFER_PROP * 0.01))
-				this.transferProp = this.userInfo.TRANSFER_PROP
-			})
-		},
-		fetchMember () {
-			let toUserName = this.form.toUserName.trim()
-			// 不允许向自己转账
-			if (usersInfo.userName() === toUserName) {
-				this.form.toUserName = ''
-				this.$message({
-					message: this.$t('finance.transferNotAllow'),
-					type: 'error'
-				})
-				return false
-			}
-
-			this.listLoading = true
-			fetchFullInfo({ userName: toUserName }).then(response => {
-				this.form.toRealName = response.data.REAL_NAME
-				this.listLoading = false
-			})
-		},
-		chkReal () {
-			this.realAmount = tool.formatPrice(this.form.amount * (100 - this.fee) * 0.01)
-			if (this.realAmount < this.minAmountAllow) {
-				this.$message({
-					message: this.$t('finance.lessTransferHint').replace('%s', this.minAmountAllow + ' NGN'),
-					type: 'error',
-					duration: 3 * 1000
-				})
-				return false
-			}
-			return true
-		},
-		submit() {
-			if (this.chkReal() === false) {
-				return false
-			}
-
-			// 获取转账码
-			fetchTransferCode().then(response => {
-				this.form.transferCode = response.data.transferCode
-			}).catch((err) => {
-				this.$message({
-					message: err,
-					type: 'error',
-					duration: 3 * 1000
-				})
-				return false
-			})
-
-			this.$prompt(this.$t('finance.enterPasswordTips'), this.$t('common.hint'), {
-				confirmButtonText: this.$t('common.confirm'),
-				cancelButtonText: this.$t('common.cancel'),
-				inputType: 'password',
-				inputPattern: /\S+/,
-				inputErrorMessage: this.$t('finance.enterPasswordTips'),
-				beforeClose: async (action, instance, done) => {
-					if (action === 'confirm') {
-						instance.confirmButtonLoading = true
-						instance.confirmButtonText = 'executing..'// this.$t('finance.executing')
-						this.form.payPassword = instance.inputValue
-						this.submitButtonStat = true
-						fetchApplyTransfer(this.form).then(() => {
-							this.$refs['form'].resetFields()
-							this.$message({
-								message: this.$t('finance.messageApplyTransfer'),
-								type: 'success',
-								duration: 3 * 1000
-							})
-							this.submitButtonStat = false
-						}).catch((err) => {
-							this.$message({
-								message: err,
-								type: 'error',
-								duration: 3 * 1000
-							})
-							this.submitButtonStat = false
-						})
-					} else {
-						this.submitButtonStat = false
-						done()
-					}
-				}
-			})
-		},
-		transferList() {
-			this.$refs['form'].resetFields()
-			this.$router.push({path: `/finance/transfer-list`})
-		},
-	}
-}
-</script>

src/views/finance/transfer-list.vue

@@ -1,6 +1,5 @@
 <template>
 	<div class="app-container" v-loading="listLoading">
-		<el-button size="small" type="success" @click="applyTransfer">{{ $t('finance.applyTransfer') }}</el-button>
 		<div class="filter-container">
 			<el-row :gutter="20">
 				<el-col :xs="24" :sm="24" :lg="6" :span="6">
@@ -49,49 +48,117 @@
 				</el-col>
 			</el-row>
 		</div>
+
 		<el-table
 			:data="list"
 			border
 			fit
 			highlight-current-row
-			style="width: 100%; margin-top: 25px;"
 		>
-			<el-table-column min-width="120px" align="center" :label="$t('finance.transferAccounts')" prop="OUT_WALLET_NAME"></el-table-column>
-			<el-table-column min-width="130px" align="center" :label="$t('finance.receivingMemberCode')" prop="LAST_IN_USER_NAME"></el-table-column>
-			<el-table-column min-width="130px" align="center" :label="$t('finance.receivingMemberName')" prop="LAST_IN_REAL_NAME"></el-table-column>
-			<el-table-column min-width="130px" align="center" :label="$t('finance.transferIntoAccount')" prop="IN_WALLET_NAME"></el-table-column>
-			<el-table-column min-width="130px" align="center" :label="$t('finance.transferAmount')" prop="ORI_AMOUNT">
+			<el-table-column align="center" :label="$t('finance.transferAccounts')" prop="OUT_WALLET_NAME"></el-table-column>
+			<el-table-column align="center" :label="$t('finance.receivingMemberCode')" prop="LAST_IN_USER_NAME"></el-table-column>
+			<el-table-column align="center" :label="$t('finance.receivingMemberName')" prop="LAST_IN_REAL_NAME"></el-table-column>
+			<el-table-column align="center" :label="$t('finance.transferIntoAccount')" prop="IN_WALLET_NAME"></el-table-column>
+			<el-table-column align="center" :label="$t('finance.transferAmount')" prop="ORI_AMOUNT">
 				<template slot-scope="{row}">
 					<span>{{ tool.formatPrice(row.ORI_AMOUNT) }}</span>
 				</template>
 			</el-table-column>
-			<el-table-column min-width="180px" align="center" :label="$t('finance.serviceCharge')" prop="FEE" v-if="showFee">
+			<el-table-column align="center" :label="$t('finance.serviceCharge')" prop="FEE" v-if="showFee">
 				<template slot-scope="{row}">
 					<span>{{ tool.formatPrice(row.FEE) }}</span>
 				</template>
 			</el-table-column>
-			<el-table-column min-width="120px" align="center" :label="$t('finance.actualAmountTransferredInto')" prop="AMOUNT" v-if="showFee">
+			<el-table-column align="center" :label="$t('finance.actualAmountTransferredInto')" prop="AMOUNT" v-if="showFee">
 				<template slot-scope="{row}">
 					<span>{{ tool.formatPrice(row.AMOUNT) }}</span>
 				</template>
 			</el-table-column>
-			<el-table-column min-width="150px" align="center" :label="$t('finance.transferTime')" prop="CREATED_AT">
+			<el-table-column min-width="100px" align="center" :label="$t('finance.transferTime')" prop="CREATED_AT">
 				<template slot-scope="{row}">
 					<span>{{ row.CREATED_AT | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</span>
 				</template>
 			</el-table-column>
-			<el-table-column min-width="130px" align="center" :label="$t('finance.remark')" prop="REMARK"></el-table-column>
+			<el-table-column align="center" :label="$t('finance.remark')" prop="REMARK"></el-table-column>
 		</el-table>
 
-		<pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.pageSize" @pagination="getList" />
+		<div class="white-box-footer" style="margin-top: 5px;">
+			<el-button size="small" type="primary" @click="dialog = true">{{ $t('finance.applyTransfer') }}</el-button>
+			<pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.pageSize" @pagination="getList" />
+		</div>
+
+		<el-dialog :title="$t('finance.applyTransfer')" :visible.sync="dialog" :width="screenWidth" v-loading="loading" style="margin-top: -70px;">
+			<el-form ref="form" :model="form" :label-position="labelPosition" v-loading="loading" style="margin-top: -20px; margin-bottom: -30px;">
+				<el-row :gutter="5">
+					<el-col :xs="24" :sm="24" :lg="24">
+						<el-form-item :label="$t('finance.transferType')" prop="type" :placeholder="$t('finance.selectTransferType')" required>
+							<el-select v-model="form.type" class="filter-item" style="width: 100%">
+								<el-option v-for="(item,key) in transferConfig" :key="key" :label="item.outName + ' To ' + item.inName" :value="item.typeId" />
+							</el-select>
+						</el-form-item>
+						<el-form-item :label="$t('finance.currentAvailableBonus')">
+							<el-input v-model="balance" readonly>
+								<template slot="append">{{ $t('currency.naira') }}</template>
+							</el-input>
+						</el-form-item>
+						<el-form-item :label="$t('finance.currentAvailableEcoin')">
+							<el-input v-model="cash" readonly>
+								<template slot="append">{{ $t('currency.naira') }}</template>
+							</el-input>
+						</el-form-item>
+						<el-form-item :label="$t('finance.currentTransferRatio')" v-if="false">
+							<el-input v-model="transferProp" readonly>
+								<template slot="append">{{ $t('currency.naira') }}</template>
+							</el-input>
+						</el-form-item>
+						<el-form-item :label="$t('finance.maximumTransferAmount')" v-if="false">
+							<el-input v-model="maxAmount" readonly>
+								<template slot="append">{{ $t('currency.naira') }}</template>
+							</el-input>
+						</el-form-item>
+						<el-form-item :label="$t('finance.memberCode')" prop="toUserName" required>
+							<el-input size="small" v-model.trim="form.toUserName" type="text" @change="fetchMember"></el-input>
+						</el-form-item>
+						<el-form-item :label="$t('finance.memberName')" prop="toRealName" v-show="form.toRealName !== null">
+							<el-input size="small" v-model.trim="form.toRealName" type="text" disabled></el-input>
+						</el-form-item>
+						<el-form-item :label="$t('finance.transferAmount')" prop="amount" required>
+							<el-input v-model.number="form.amount" type="number" :min="minAmount" :max="maxAmount" @change="chkReal"></el-input>
+						</el-form-item>
+						<el-form-item :label="$t('finance.transferAmount')" v-show="fee > 0">
+							<el-tag type="info">{{ fee }}%</el-tag>
+						</el-form-item>
+						<el-form-item :label="$t('finance.actualAmountTransferredInto')" v-show="fee > 0">
+							<el-tag type="warning">{{ realAmount }} {{ $t('currency.naira') }}</el-tag>
+						</el-form-item>
+						<el-form-item :label="$t('finance.remark')" prop="remark">
+							<el-input size="small" v-model.trim="form.remark" type="text"></el-input>
+						</el-form-item>
+						<el-form-item>
+							<el-button type="warning" size="small" @click="transferList">{{ $t('table.cancel') }}</el-button>
+							<el-button type="primary" size="small" @click="submit('form')">{{ $t('table.confirm') }}</el-button>
+						</el-form-item>
+					</el-col>
+				</el-row>
+			</el-form>
+		</el-dialog>
 	</div>
 </template>
 
 <script>
-import {fetchTransferList} from '@/api/finance'
+import {
+	fetchApplyTransfer,
+	fetchBalance,
+	fetchChkTransferUser,
+	fetchFullInfo,
+	fetchTransferCode,
+	fetchTransferList
+} from '@/api/finance'
 import waves from '@/directive/waves'
 import Pagination from '@/components/Pagination'
 import tool from "@/utils/tool"
+import usersInfo from "@/utils/usersInfo";
+import {getScreenWidth} from "@/utils";
 
 export default {
 	name: 'transferList',
@@ -123,11 +190,41 @@ export default {
 					label: 'Ecoin'
 				},
 			],
+			dialog: false,
+			loading: false,
+			form: {
+				type: 1,
+				toUserName: '',
+				toRealName: null,
+				amount: 0,
+				payPassword: '',
+				remark: '',
+				transferCode: '',
+			},
+			userInfo: {
+				TRANSFER_PROP: 100
+			},
+			transferConfig: [],
+			minAmount: 0,
+			maxAmount: 0,
+			transferProp: 0,
+			fee: 0,
+			cash: 0,
+			balance: 0,
+			realAmount: 0,
+			minAmountAllow: 5000,
+			submitButtonStat: false,
+			screenWidth: getScreenWidth() > 600 ? '500px' : getScreenWidth() + 'px',
+			labelPosition: getScreenWidth() > 600 ? 'right' : 'top',
 		}
 	},
 	created() {
 		this.getList()
 	},
+	mounted() {
+		this.applyTransfer()
+		this.fetchBalance()
+	},
 	methods: {
 		getList() {
 			this.listLoading = true
@@ -141,9 +238,6 @@ export default {
 				}, 0.5 * 1000)
 			})
 		},
-		applyTransfer() {
-			this.$router.push({path: `/finance/transfer-apply`})
-		},
 		handleFilterClear(){
 			this.listQuery.page = 1
 			this.listQuery.pageSize = 5
@@ -154,6 +248,114 @@ export default {
 			this.listQuery.dateRange = []
 			this.getList()
 		},
+		applyTransfer() {
+			this.loading = true
+			fetchChkTransferUser().then(response => {
+				this.userInfo = response.data.userInfo
+				this.transferConfig = response.data.transferConfig
+				this.minAmount = response.data.minAmount
+				// 奖金转现金
+				this.fee = this.transferConfig[this.form.type - 1].fee
+
+				setTimeout(() => {
+					this.loading = false
+				}, 0.5 * 1000)
+			})
+		},
+		fetchBalance() {
+			fetchBalance().then(response => {
+				this.balance = response.data.bonus
+				this.cash = response.data.cash
+				this.maxAmount = parseFloat(tool.formatPrice(this.balance * this.userInfo.TRANSFER_PROP * 0.01))
+				this.transferProp = this.userInfo.TRANSFER_PROP
+			})
+		},
+		fetchMember () {
+			let toUserName = this.form.toUserName.trim()
+			// 不允许向自己转账
+			if (usersInfo.userName() === toUserName) {
+				this.form.toUserName = ''
+				this.$message({
+					message: this.$t('finance.transferNotAllow'),
+					type: 'error'
+				})
+				return false
+			}
+
+			this.listLoading = true
+			fetchFullInfo({ userName: toUserName }).then(response => {
+				this.form.toRealName = response.data.REAL_NAME
+				this.listLoading = false
+			})
+		},
+		chkReal () {
+			this.realAmount = tool.formatPrice(this.form.amount * (100 - this.fee) * 0.01)
+			if (this.realAmount < this.minAmountAllow) {
+				this.$message({
+					message: this.$t('finance.lessTransferHint').replace('%s', this.minAmountAllow + ' NGN'),
+					type: 'error',
+					duration: 3 * 1000
+				})
+				return false
+			}
+			return true
+		},
+		submit() {
+			if (this.chkReal() === false) {
+				return false
+			}
+
+			// 获取转账码
+			fetchTransferCode().then(response => {
+				this.form.transferCode = response.data.transferCode
+			}).catch((err) => {
+				this.$message({
+					message: err,
+					type: 'error',
+					duration: 3 * 1000
+				})
+				return false
+			})
+
+			this.$prompt(this.$t('finance.enterPasswordTips'), this.$t('common.hint'), {
+				confirmButtonText: this.$t('common.confirm'),
+				cancelButtonText: this.$t('common.cancel'),
+				inputType: 'password',
+				inputPattern: /\S+/,
+				inputErrorMessage: this.$t('finance.enterPasswordTips'),
+				beforeClose: async (action, instance, done) => {
+					if (action === 'confirm') {
+						instance.confirmButtonLoading = true
+						instance.confirmButtonText = 'executing..'// this.$t('finance.executing')
+						this.form.payPassword = instance.inputValue
+						this.submitButtonStat = true
+						fetchApplyTransfer(this.form).then(() => {
+							this.$refs['form'].resetFields()
+							this.$message({
+								message: this.$t('finance.messageApplyTransfer'),
+								type: 'success',
+								duration: 3 * 1000
+							})
+							this.submitButtonStat = false
+						}).catch((err) => {
+							this.$message({
+								message: err,
+								type: 'error',
+								duration: 3 * 1000
+							})
+							this.submitButtonStat = false
+						})
+					} else {
+						this.submitButtonStat = false
+						done()
+					}
+				}
+			})
+		},
+		transferList() {
+			this.$refs['form'].resetFields()
+			this.$router.push({path: `/finance/transfer-list`})
+		},
 	}
 }
 </script>

src/views/profile/components/UserCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-card>
+  <el-card style="margin: 2px 1px;">
     <div slot="header" class="clearfix">
       <span>{{ $t('profile.personalInformation') }}</span>
     </div>

src/views/profile/index.vue

@@ -8,7 +8,7 @@
         </el-col>
 
         <el-col :span="8" :xs="24">
-          <el-card>
+          <el-card style="margin: 2px 1px;">
             <el-tabs v-model="activeTab">
               <el-tab-pane :label="$t('profile.account')" name="account">
                 <account :user="user" />