3304,3316,3318

.env.development

@@ -1,10 +1,19 @@
 # just a flag
 ENV='development'
 
+# base api
+# VUE_APP_BASE_API=''
+# VUE_APP_BASE_DO_API='http://local.ng.frontend.api.com'
+# VUE_APP_CDN_API='http://16.163.228.151:8041'
+# VUE_APP_BASE_WEBSITE='http://local.ng.frontend.ele.com'
+# VUE_APP_BASE_PAY_STACK_PUBLIC_KEY='pk_test_2eed10135c4a958c5073795b22854ded9d1a6c55'
+# VUE_APP_ACCESS_TOKEN_PREFIX='Bearer '
+
+
 # base api
 VUE_APP_BASE_API=''
-VUE_APP_BASE_DO_API='http://local.ng.frontend.api.com'
+VUE_APP_BASE_DO_API='http://16.163.228.151:8043'
 VUE_APP_CDN_API='http://16.163.228.151:8041'
-VUE_APP_BASE_WEBSITE='http://local.ng.frontend.ele.com'
+VUE_APP_BASE_WEBSITE='http://16.163.228.151:8045'
 VUE_APP_BASE_PAY_STACK_PUBLIC_KEY='pk_test_2eed10135c4a958c5073795b22854ded9d1a6c55'
-VUE_APP_ACCESS_TOKEN_PREFIX='Bearer '
+VUE_APP_ACCESS_TOKEN_PREFIX='Bearer '

.gitignore

@@ -23,3 +23,5 @@ package-lock.json
 yarn.lock
 
 .env.development
+
+.prettieirc.json

package.json

@@ -4,7 +4,7 @@
   "description": "A magical vue admin. An out-of-box UI solution for enterprise applications. Newest development stack of vue. Lots of awesome features",
   "author": "Pan <panfree23@gmail.com>",
   "scripts": {
-    "dev": "vue-cli-service serve",
+    "dev": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
     "lint": "eslint --ext .js,.vue src",
     "build:prod": "vue-cli-service build",
     "build:stage": "vue-cli-service build --mode staging",

src/api/shop.js

@@ -39,7 +39,7 @@ export function downloadDecOrder(orderSn) {
 // 订单列表
 export function fetchOrderList(query) {
   return request({
-    url: '/v1/shop/order-list',
+    url: '/v1/shop/own-order',
     method: 'get',
     params: query
   })

src/api/user.js

@@ -7,7 +7,7 @@ import request from '@/utils/request'
  * @returns {*}
  */
 export function login(data, pageId = '') {
-  let url = pageId ? '/v1/oauth/login?page_id='+pageId : '/v1/oauth/login'
+  const url = pageId ? '/v1/oauth/login?page_id=' + pageId : '/v1/oauth/login'
   return request({
     url,
     method: 'post',
@@ -21,7 +21,7 @@ export function login(data, pageId = '') {
  * @returns {*}
  */
 export function backendQuickLogin(params) {
-  let url = '/v1/oauth/login-by-backend'
+  const url = '/v1/oauth/login-by-backend'
   return request({
     url,
     method: 'post',
@@ -126,7 +126,7 @@ export function updatePaymentPassword(data) {
 export function fetchBrandAmbassador() {
   return request({
     url: '/v1/user/ba-dec',
-    method: 'get',
+    method: 'get'
   })
 }
 
@@ -155,7 +155,7 @@ export function fetchFullInfo(data) {
 export function fetchUpgrade() {
   return request({
     url: '/v1/user/upgrade',
-    method: 'get',
+    method: 'get'
   })
 }
 
@@ -212,3 +212,22 @@ export function createWelcomePack(data) {
     data
   })
 }
+
+// 订单列表
+export function fetchOrderList(query) {
+  return request({
+    url: '/v1/shop/member-order',
+    method: 'get',
+    params: query
+  })
+}
+
+// 下载订单PDF
+export function downloadOrder(orderSn) {
+  return request({
+    url: `/v1/shop/order-export/${orderSn}`,
+    method: 'get',
+    params: {}
+  })
+}
+

src/components/Breadcrumb/index.vue

@@ -38,13 +38,15 @@ export default {
     getBreadcrumb() {
       // only show routes with meta.title
       let matched = this.$route.matched.filter(item => item.meta && item.meta.title)
+      console.log(matched)
       const first = matched[0]
 
       if (!this.isDashboard(first)) {
         matched = [{ path: '/dashboard/index', meta: { title: 'dashboard' }}].concat(matched)
       }
 
-      this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
+      const levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
+      this.levelList = levelList.slice(-1)
     },
     isDashboard(route) {
       const name = route && route.name
@@ -76,11 +78,16 @@ export default {
   display: inline-block;
   font-size: 14px;
   line-height: 50px;
-  margin-left: 8px;
-
+  margin-left: 5px;
+  max-width: 50%;
   .no-redirect {
     color: #97a8be;
     cursor: text;
+    width:220px;
+    overflow:hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    -o-text-overflow:ellipsis;
   }
 }
 </style>

src/lang/en.js

@@ -6,12 +6,12 @@ export default {
     bonus: 'Bonus Management',
     atlas: 'Network Chart',
     article: 'Article Management',
-    config: 'Setting',
+    config: 'Personal Center',
 
     indexShop: 'Products list',
     shopReconsume: 'Reconsume List',
     memberManagement: 'Member management',
-    personalInfo: 'Personal Info',
+    personalInfo: 'Personal Information',
     documentation: 'Documentation',
     guide: 'Guide',
     permission: 'Permission',
@@ -92,22 +92,25 @@ export default {
     networkChart: 'Network Chart',
     bonusManagement: 'Bonus Management',
     articleManagement: 'Article Management',
-    setting: 'Setting',
+    setting: 'Personal Center',
     // 二级菜单/接口-dashboard
     monthBonus: 'Month Bonus',
     // 二级菜单/接口-shoppingMall
-    standardProducts: 'Standard Products',
+    repeatPurchase: 'Repeat Purchase',
+    ownOrder: 'ownOrder',
     carFundProducts: 'Car Fund Products',
     villaFundProducts: 'Villa Fund Products',
-    welcomePack: 'Welcome Pack',
+    welcomePack: 'Member Welcome Pack',
+    memberRepeatPurchase: 'Member Repeat Purchase',
     welcomePackList: 'Welcome Pack Listing',
-    memberUpgrade: 'Upgrade Management',
+    memberUpgrade: 'Member Upgrade',
+    memberOrder: 'Member Order',
     reconsume: 'Reconsume',
     orderList: 'Order List',
     brandAmbassador: 'Brand Ambassador',
     BAOrderList: 'Brand Ambassador Order',
     // 二级菜单/接口-memberManagement
-    personalInfo: 'Personal Info',
+    personalInfo: 'Personal Information',
     resetPassword: 'Reset Password',
     // 二级菜单/接口-networkChart
     placementNetwork: 'Placement Network',

src/lang/zh.js

@@ -6,12 +6,12 @@ export default {
     bonus: '奖金管理',
     atlas: '网络图谱',
     article: '文章管理',
-    config: '设置',
+    config: '个人中心',
 
     indexShop: '商品管理',
     shopReconsume: '复消商品',
     memberManagement: '会员管理',
-    personalInfo: '个人资料',
+    personalInfo: '个人信息',
     documentation: '文档',
     guide: '引导页',
     permission: '权限测试页',
@@ -92,22 +92,25 @@ export default {
     networkChart: '会员网络',
     bonusManagement: '奖金管理',
     articleManagement: '文章管理',
-    setting: '设置',
+    setting: '个人中心',
     // 二级菜单/接口-dashboard
     monthBonus: '月奖',
     // 二级菜单/接口-shoppingMall
-    standardProducts: '普通商品',
+    repeatPurchase: '复消',
+    ownOrder: '我的订单',
     carFundProducts: '车奖商品',
     villaFundProducts: '房奖商品',
-    welcomePack: '报单管理',
+    welcomePack: '会员报单',
+    memberRepeatPurchase: '会员复消',
     welcomePackList: '报单列表',
-    memberUpgrade: '升级管理',
+    memberUpgrade: '会员升级',
+    memberOrder: '会员订单',
     reconsume: '复消商品',
     orderList: '订单列表',
     brandAmbassador: 'BA会员',
     BAOrderList: 'BA订单',
     // 二级菜单/接口-memberManagement
-    personalInfo: '个人资料',
+    personalInfo: '个人信息',
     resetPassword: '重设密码',
     // 二级菜单/接口-networkChart
     placementNetwork: '安置网络',
@@ -321,7 +324,7 @@ export default {
     memberCode: '会员编号',
     memberName: '会员姓名',
     recipientName: '收货人',
-    phoneNumber: '收货电话',
+    phoneNumber: '电话',
     shippingAddress: '收货地址',
     shipping: '收货方式',
     payment: '支付方式',
@@ -358,9 +361,9 @@ export default {
     customerInfo: '会员信息',
     reconsumeUserCode: '复消用户编号',
     mobile: '手机号',
-    province: 'State',
-    lgaName: 'Local Government Area',
-    cityName: 'City',
+    province: '收货地址',
+    lgaName: '行政区',
+    cityName: '城市',
     address: '详细地址',
     memberNotFound: '找不到这个用户'
   },

src/layout/components/Navbar.vue

@@ -6,9 +6,9 @@
 
     <div class="right-menu">
       <template v-if="device!=='mobile'">
-<!--        <search id="header-search" class="right-menu-item" />-->
+        <!--        <search id="header-search" class="right-menu-item" />-->
 
-<!--        <error-log class="errLog-container right-menu-item hover-effect" />-->
+        <!--        <error-log class="errLog-container right-menu-item hover-effect" />-->
 
         <screenfull id="screenfull" class="right-menu-item hover-effect" />
 
@@ -16,22 +16,24 @@
           <size-select id="size-select" class="right-menu-item hover-effect" />
         </el-tooltip>
 
-        <lang-select class="right-menu-item hover-effect" />
-
       </template>
+      <lang-select class="right-menu-item hover-effect" />
 
-      <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
+      <el-dropdown :class="device == 'mobile'? 'avatar-container_m' :'avatar-container'" class=" right-menu-item hover-effect" trigger="click">
         <div class="avatar-wrapper">
           <img src="@/assets/user_images/avatar.png" class="user-avatar" alt="">
-          <i class="el-icon-caret-bottom" />
+          <i v-if="device!=='mobile'" class="el-icon-caret-bottom" />
         </div>
         <el-dropdown-menu slot="dropdown">
-					<router-link to="/">
+          <el-dropdown-item>
+            {{ userName }}
+          </el-dropdown-item>
+          <!-- <router-link to="/">
 						<el-dropdown-item>
 							{{ $t('navbar.dashboard') }}
 						</el-dropdown-item>
-					</router-link>
-          <router-link to="/profile/index">
+					</router-link> -->
+          <!-- <router-link to="/profile/index">
             <el-dropdown-item>
               {{ $t('navbar.profile') }}
             </el-dropdown-item>
@@ -40,10 +42,10 @@
 						<el-dropdown-item>
 							{{ $t('navbar.shippingAddress') }}
 						</el-dropdown-item>
-					</router-link>
-					<el-dropdown-item>
+					</router-link> -->
+          <!-- <el-dropdown-item>
 						<a target="_blank" :href="visitWebsite">{{ $t('navbar.visitPreviousVersion') }}</a>
-					</el-dropdown-item>
+					</el-dropdown-item> -->
           <el-dropdown-item divided @click.native="logout">
             <span style="display:block;">{{ $t('navbar.logOut') }}</span>
           </el-dropdown-item>
@@ -54,17 +56,14 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
 import Breadcrumb from '@/components/Breadcrumb'
-import Hamburger from '@/components/Hamburger'
 import ErrorLog from '@/components/ErrorLog'
+import Hamburger from '@/components/Hamburger'
+import Search from '@/components/HeaderSearch'
+import LangSelect from '@/components/LangSelect'
 import Screenfull from '@/components/Screenfull'
 import SizeSelect from '@/components/SizeSelect'
-import LangSelect from '@/components/LangSelect'
-import Search from '@/components/HeaderSearch'
-import tool from "@/utils/tool";
-import usersInfo from "@/utils/usersInfo";
-import {getScreenWidth} from "@/utils";
+import { mapGetters } from 'vuex'
 
 export default {
   components: {
@@ -76,17 +75,21 @@ export default {
     LangSelect,
     Search
   },
-	data() {
-		return {
-			visitWebsite: process.env.NODE_ENV === 'production' ? 'http://ngds.elken.com:8010/' : 'http://16.163.228.151:8035',
-		}
-	},
+  data() {
+    return {
+      visitWebsite: process.env.NODE_ENV === 'production' ? 'http://ngds.elken.com:8010/' : 'http://16.163.228.151:8035',
+      userName: ''
+    }
+  },
   computed: {
     ...mapGetters([
       'sidebar',
       'device'
     ])
   },
+  mounted() {
+    this.getUserInfo()
+  },
   methods: {
     toggleSideBar() {
       this.$store.dispatch('app/toggleSideBar')
@@ -95,6 +98,9 @@ export default {
       await this.$store.dispatch('user/logout')
       this.$router.push(`/login?redirect=${this.$route.fullPath}`)
     },
+    getUserInfo() {
+      this.userName = window.localStorage.getItem('userName')
+    }
   }
 }
 </script>
@@ -156,6 +162,28 @@ export default {
       }
     }
 
+    .avatar-container_m{
+      margin-right: 3px;
+      .avatar-wrapper {
+        margin-top: 5px;
+        position: relative;
+
+        .user-avatar {
+          cursor: pointer;
+          width: 40px;
+          height: 40px;
+          border-radius: 10px;
+        }
+
+        .el-icon-caret-bottom {
+          cursor: pointer;
+          position: absolute;
+          right: -20px;
+          top: 25px;
+          font-size: 12px;
+        }
+      }
+    }
     .avatar-container {
       margin-right: 30px;
 

src/router/modules/config.js

@@ -11,11 +11,17 @@ const configRouter = {
   },
   children: [
     {
-      path: 'receive-address-list',  // 收货地址列表
+      path: 'receive-address-list', // 收货地址列表
       component: () => import('@/views/config/shipping-address-list'),
       name: 'ShippingAddressList',
       meta: { title: 'Shipping Address', icon: 'el-icon-location' }
     },
+    {
+      path: 'profile', // 用户中心
+      component: () => import('@/views/profile/index'),
+      name: 'Profile',
+      meta: { title: 'Personal Info', icon: 'user', noCache: true }
+    }
   ]
 }
 export default configRouter

src/router/modules/shop.js

@@ -13,8 +13,8 @@ const shopRouter = {
     {
       path: 'standard-products', // 普通商品列表
       component: () => import('@/views/shop/standard-products'),
-      name: 'StandardProducts',
-      meta: { title: 'Standard Products', icon: 'el-icon-goods' }
+      name: 'repeatPurchase',
+      meta: { title: 'Repeat Purchase', icon: 'el-icon-goods' }
     },
     {
       path: 'car-fund-products', // 车奖商品列表
@@ -37,11 +37,11 @@ const shopRouter = {
     {
       path: 'reconsume', // 复消
       component: () => import('@/views/shop/reconsume'),
-      name: 'reconsume',
-      meta: { title: 'Reconsume', icon: 'el-icon-goods' }
+      name: 'memberRepeatPurchase',
+      meta: { title: 'Member Repeat Purchase', icon: 'el-icon-goods' }
     },
     {
-      path: 'order-list', // 订单列表
+      path: 'own-order', // 订单列表
       component: () => import('@/views/shop/order-list'),
       name: 'OrderList',
       meta: { title: 'Order List', icon: 'el-icon-goods' }
@@ -51,6 +51,12 @@ const shopRouter = {
       component: () => import('@/views/shop/ba-dec-order-list'),
       name: 'BaDecOrderList',
       meta: { title: 'Welcome Listing', icon: 'el-icon-goods' }
+    },
+    {
+      path: 'member-order', // 会员订单
+      component: () => import('@/views/user/member-order'),
+      name: 'memberOrder',
+      meta: { title: 'Member Order', icon: 'user', noCache: true }
     }
   ]
 }

src/router/modules/user.js

@@ -7,23 +7,29 @@ const userRouter = {
   hidden: true,
   children: [
     {
-      path: 'ba-dec',  // 新建BA会员
+      path: 'ba-dec', // 新建BA会员
       component: () => import('@/views/user/brand-ambassador'),
       name: 'brandAmbassador',
       meta: { title: 'Welcome Brand Ambassador', icon: 'user', noCache: true }
     },
     {
-      path: 'upgrade',  // 会员升级
+      path: 'upgrade', // 会员升级
       component: () => import('@/views/user/member-upgrade'),
-      name: 'upgradeManagement',
-      meta: { title: 'Upgrade Management', icon: 'user', noCache: true }
+      name: 'memberUpgrade',
+      meta: { title: 'Member Upgrade', icon: 'user', noCache: true }
     },
     {
-      path: 'dec',  // 会员报单/BA升级
+      path: 'dec', // 会员报单/BA升级
       component: () => import('@/views/user/welcome-pack'),
       name: 'welcomePack',
-      meta: { title: 'Welcome Pack Management', icon: 'user', noCache: true }
+      meta: { title: 'Member Welcome Pack', icon: 'user', noCache: true }
     },
+    {
+      path: 'index', // 用户中心
+      component: () => import('@/views/profile/index'),
+      name: 'Profile',
+      meta: { title: 'Personal Info', icon: 'user', noCache: true }
+    }
   ]
 }
 export default userRouter

src/views/bonus/account-list.vue

@@ -1,179 +1,205 @@
 <template>
-  <div class="app-container" v-loading="loading">
-		<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="info" :title="item.walletName" :subTitle="item.amount | toThousandFilter">
-<!--						<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>
-					</el-result>
-				</el-card>
-			</el-col>
-		</el-row>
+  <div v-loading="loading" class="app-container">
+    <el-row :gutter="20">
+      <el-col v-for="item in walletData" :key="item.walletType" :xs="24" :sm="12" :lg="6" :span="6">
+        <el-card shadow="hover" style="margin: 10px auto;">
+          <el-result icon="info" :title="item.walletName" :sub-title="item.amount | toThousandFilter">
+            <!--						<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="icon">
+              <i class="el-icon-wallet" />
+            </template>
+            <template slot="extra">
+              <el-button v-show="dealSwitch" type="primary" size="small" @click="handleBonusFlow(item.walletType, item.walletName)">{{ $t('bonus.viewRecord') }}</el-button>
+            </template>
+          </el-result>
+        </el-card>
+      </el-col>
+    </el-row>
 
-		<el-dialog :title="bonusFlowType" :visible.sync="dialog" :width="screenWidth" v-loading="loading" style="margin-top: -80px;">
-			<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"
-								:placeholder="$t('common.startDate')"
-								value-format="yyyy-MM-dd"
-								clearable
-								style="width: 100%; margin: 10px 0;">
-							</el-date-picker>
-						</el-col>
-						<el-col :xs="24" :sm="24" :lg="6" :span="6">
-								<el-date-picker
-									v-model="listQuery.createAt[1]"
-									type="date"
-									:placeholder="$t('common.endDate')"
-									value-format="yyyy-MM-dd"
-									clearable
-									style="width: 100%; margin: 10px 0;">
-								</el-date-picker>
-						</el-col>
-						<el-col :xs="24" :sm="24" :lg="6" :span="6" v-if="listQuery.walletType !== 'cash'">
-								<el-select size="small" v-model="listQuery.dealType" :placeholder="$t('bonus.transType')" clearable style="width: 100%; margin: 10px 0;">
-									<el-option v-for="(item, key) in dealTypeList" :label="item" :value="key" :key="key"></el-option>
-								</el-select>
-						</el-col>
-						<el-col :xs="24" :sm="24" :lg="6" :span="6">
-								<el-input size="small" v-model="listQuery.remark" :placeholder="$t('bonus.remark')" clearable  style="width: 100%; margin: 10px 0;"></el-input>
-						</el-col>
-						<el-col :xs="24" :sm="24" :lg="24" :span="24">
-							<div class="grid-content bg-purple">
-								<el-button size="small" type="primary" @click="handleBonusFlow(listQuery.walletType, walletName)">{{ $t('common.select') }}</el-button>
-								<el-button size="small" type="warning" @click="handleFilterClear(listQuery.walletType, walletName)">{{ $t('common.reset') }}</el-button>
-							</div>
-						</el-col>
-					</el-row>
+    <el-dialog v-loading="loading" :title="bonusFlowType" :visible.sync="dialog" :width="screenWidth" style="margin-top: -80px;">
+      <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"
+            :placeholder="$t('common.startDate')"
+            value-format="yyyy-MM-dd"
+            clearable
+            style="width: 100%; margin: 10px 0;"
+          />
+        </el-col>
+        <el-col :xs="24" :sm="24" :lg="6" :span="6">
+          <el-date-picker
+            v-model="listQuery.createAt[1]"
+            type="date"
+            :placeholder="$t('common.endDate')"
+            value-format="yyyy-MM-dd"
+            clearable
+            style="width: 100%; margin: 10px 0;"
+          />
+        </el-col>
+        <el-col v-if="listQuery.walletType !== 'cash'" :xs="24" :sm="24" :lg="6" :span="6">
+          <el-select v-model="listQuery.dealType" size="small" :placeholder="$t('bonus.transType')" clearable style="width: 100%; margin: 10px 0;">
+            <el-option v-for="(item, key) in dealTypeList" :key="key" :label="item" :value="key" />
+          </el-select>
+        </el-col>
+        <el-col :xs="24" :sm="24" :lg="6" :span="6">
+          <el-input v-model="listQuery.remark" size="small" :placeholder="$t('bonus.remark')" clearable style="width: 100%; margin: 10px 0;" />
+        </el-col>
+        <el-col :xs="24" :sm="24" :lg="24" :span="24">
+          <div class="grid-content bg-purple">
+            <el-button size="small" type="primary" @click="handleBonusFlow(listQuery.walletType, walletName)">{{ $t('common.select') }}</el-button>
+            <el-button size="small" type="warning" @click="handleFilterClear(listQuery.walletType, walletName)">{{ $t('common.reset') }}</el-button>
+          </div>
+        </el-col>
+      </el-row>
 
-			<el-table
-					:data="bonusData"
-					border
-					fit
-					highlight-current-row
-					style="margin-top: 10px;"
-					:xs="24" :sm="24" :lg="6"
-				>
-					<el-table-column :label="$t('bonus.transTime')" align="center" min-width="140px">
-						<template slot-scope="{row}">
-							<span>{{ row.CREATED_AT | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
-						</template>
-					</el-table-column>
-					<el-table-column :label="$t('bonus.transType')" align="center" min-width="150px" v-if="dealTypeSwitch">
-						<template slot-scope="{row}">
-							<span>{{ row.DEAL_TYPE_NAME }}</span>
-						</template>
-					</el-table-column>
-					<el-table-column :label="$t('bonus.preTransactionBalance')" align="center" min-width="150px">
-						<template slot-scope="{row}">
-							<span>{{ tool.formatPrice(row.TOTAL - row.AMOUNT) | amountFilter }}</span>
-						</template>
-					</el-table-column>
-					<el-table-column :label="$t('bonus.postTransactionBalance')" align="center" min-width="160px">
-						<template slot-scope="{row}">
-							<span>{{ row.AMOUNT | amountFilter }}</span>
-						</template>
-					</el-table-column>
-					<el-table-column :label="$t('bonus.transAmount')" align="center" min-width="120px">
-						<template slot-scope="{row}">
-							<el-tag :type="row.IS_INCR > 0 ? 'danger' : 'info'" size="small" class="no-border">
-								<span class="text-danger">{{ row.IS_INCR > 0 ? '+' : '' }}  {{ row.AMOUNT | amountFilter }}</span>
-							</el-tag>
-						</template>
-					</el-table-column>
-					<el-table-column :label="$t('bonus.remark')" align="center" min-width="240px">
-						<template slot-scope="{row}">
-							<span>{{ row.REMARK }}</span>
-						</template>
-					</el-table-column>
-				</el-table>
+      <el-table
+        :data="bonusData"
+        border
+        fit
+        highlight-current-row
+        style="margin-top: 10px;"
+        :xs="24"
+        :sm="24"
+        :lg="6"
+      >
+        <el-table-column :label="$t('bonus.transTime')" align="center" min-width="140px">
+          <template slot-scope="{row}">
+            <span>{{ row.CREATED_AT | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column v-if="dealTypeSwitch" :label="$t('bonus.transType')" align="center" min-width="150px">
+          <template slot-scope="{row}">
+            <span>{{ row.DEAL_TYPE_NAME }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column :label="$t('bonus.preTransactionBalance')" align="center" min-width="150px">
+          <template slot-scope="{row}">
+            <span>{{ tool.formatPrice(row.TOTAL - row.AMOUNT) | amountFilter }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column :label="$t('bonus.postTransactionBalance')" align="center" min-width="160px">
+          <template slot-scope="{row}">
+            <span>{{ row.AMOUNT | amountFilter }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column :label="$t('bonus.transAmount')" align="center" min-width="120px">
+          <template slot-scope="{row}">
+            <el-tag :type="row.IS_INCR > 0 ? 'danger' : 'info'" size="small" class="no-border">
+              <span class="text-danger">{{ row.IS_INCR > 0 ? '+' : '' }}  {{ row.AMOUNT | amountFilter }}</span>
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column :label="$t('bonus.remark')" align="center" min-width="240px">
+          <template slot-scope="{row}">
+            <span>{{ row.REMARK }}</span>
+          </template>
+        </el-table-column>
+      </el-table>
 
-			<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>
-		</el-dialog>
-	</div>
+      <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>
+    </el-dialog>
+  </div>
 </template>
 
 <script>
-import {fetchAccount,fetchAccountFlow} from '@/api/bonus'
+import { fetchAccount, fetchAccountFlow } from '@/api/bonus'
 import Pagination from '@/components/Pagination'
-import tool from "@/utils/tool"
-import {formatAmount, getScreenWidth} from "@/utils"
+import { getScreenWidth } from '@/utils'
+import tool from '@/utils/tool'
 
 export default {
-  name: 'memberAccount',
-	components: { Pagination },
+  name: 'MemberAccount',
+  components: { Pagination },
   data() {
     return {
-			tool: tool,
-			loading: true,
-			walletData: [],
-			dealSwitch: 0,
-			dealTypeSwitch: true,
+      tool: tool,
+      loading: true,
+      walletData: [],
+      dealSwitch: 0,
+      dealTypeSwitch: true,
 
-			dialog: false,
-			bonusFlowType: '',
-			walletName: '',
-			dealTypeList: null,
-			bonusData: null,
-			total: 0,
-			listQuery: {
-				page: 1,
-				pageSize: 10,
-				walletType: '',
-				createAt: [],
-				remark: '',
-				dealType: '',
-			},
-			screenWidth: getScreenWidth() > 600 ? '70%' : getScreenWidth() + 'px'
+      dialog: false,
+      bonusFlowType: '',
+      walletName: '',
+      dealTypeList: null,
+      bonusData: null,
+      total: 0,
+      listQuery: {
+        page: 1,
+        pageSize: 10,
+        walletType: '',
+        createAt: [],
+        remark: '',
+        dealType: ''
+      },
+      screenWidth: getScreenWidth() > 600 ? '70%' : getScreenWidth() + 'px'
     }
   },
   created() {
     this.getList()
   },
-	methods: {
+  methods: {
     getList() {
       this.loading = true
-			fetchAccount().then(response => {
-				this.walletData = response.data.wallet
-				this.dealSwitch = parseInt(response.data.dealSwitch) === 1
-				this.loading = false
+      fetchAccount().then(response => {
+        this.walletData = response.data.wallet
+        this.dealSwitch = parseInt(response.data.dealSwitch) === 1
+        this.loading = false
       })
     },
-		handleBonusFlow(walletType, walletName) {
-			this.loading = true
-			this.bonusFlowType = this.$t('bonus.bonusFlowTitle').replace('%s', walletName)
-			this.listQuery.walletType = walletType
-			this.walletName = walletName
-			fetchAccountFlow(this.listQuery).then(response => {
-				this.bonusData = response.data.list
-				this.total = response.data.totalCount
-				this.dealTypeList = response.data.dealTypes
-				this.dealTypeSwitch = walletType !== 'cash'
-				this.dialog = true
-				this.loading = false
-			})
-		},
-		handleFilterClear(walletType, walletName){
-			this.walletName = walletName
-			this.listQuery.page = 1
-			this.listQuery.pageSize = 5
-			this.listQuery.walletType = walletType
-			this.listQuery.createAt = []
-			this.listQuery.remark = ''
-			this.listQuery.dealType = ''
-			this.handleBonusFlow(walletType, walletName)
-		},
+    handleBonusFlow(walletType, walletName) {
+      this.loading = true
+      this.bonusFlowType = this.$t('bonus.bonusFlowTitle').replace('%s', walletName)
+      this.listQuery.walletType = walletType
+      this.walletName = walletName
+      fetchAccountFlow(this.listQuery).then(response => {
+        this.bonusData = response.data.list
+        this.total = response.data.totalCount
+        this.dealTypeList = response.data.dealTypes
+        this.dealTypeSwitch = walletType !== 'cash'
+        this.dialog = true
+        this.loading = false
+      })
+    },
+    handleFilterClear(walletType, walletName) {
+      this.walletName = walletName
+      this.listQuery.page = 1
+      this.listQuery.pageSize = 5
+      this.listQuery.walletType = walletType
+      this.listQuery.createAt = []
+      this.listQuery.remark = ''
+      this.listQuery.dealType = ''
+      this.handleBonusFlow(walletType, walletName)
+    }
   }
 }
 </script>
+
+<style lang="scss" scoped>
+
+.app-container{
+	i{
+		display: block;
+		font-size: 60px;
+		/* margin-bottom: 15px; */
+		transition: color .15s linear;
+		// color: #13ce66;
+	}
+
+}
+::v-deep .el-result__subtitle{
+		font-weight: bold;
+		p{
+			font-size: 1.5em!important;
+			color: #000;
+		}
+	}
+</style>

src/views/bonus/historical-cumulative-bonus.vue

@@ -1,116 +1,161 @@
 <template>
-  <div class="app-container" v-loading="loading">
-		<el-row :gutter="20">
-			<el-col :xs="24" :sm="12" :lg="6" :span="6" v-show="welcomeBonusSwitch === 1">
-				<el-card shadow="hover" style="margin: 10px auto;">
-					<el-result icon="success" :title="$t('bonus.welcomeBonus')" :subTitle="tableData.BONUS_TG.value | toThousandFilter"></el-result>
-				</el-card>
-			</el-col>
+  <div v-loading="loading" class="app-container">
+    <el-row :gutter="20">
+      <el-col v-if="welcomeBonusSwitch === 1" :xs="24" :sm="12" :lg="6" :span="6">
+        <el-card shadow="hover" style="margin: 10px auto;">
+          <el-result :title="$t('bonus.welcomeBonus')" :sub-title="tableData.BONUS_TG.value | toThousandFilter">
+            <template slot="icon">
+              <i class="el-icon-money" />
+            </template>
+          </el-result>
+        </el-card>
+      </el-col>
 
-			<el-col :xs="24" :sm="12" :lg="6" :span="6" v-show="teamBonusSwitch === 1">
-				<el-card shadow="hover" style="margin: 10px auto;">
-					<el-result icon="success" :title="$t('bonus.teamBonus')" :subTitle="tableData.ORI_BONUS_QY.value | toThousandFilter"></el-result>
-				</el-card>
-			</el-col>
+      <el-col v-show="teamBonusSwitch === 1" :xs="24" :sm="12" :lg="6" :span="6">
+        <el-card shadow="hover" style="margin: 10px auto;">
+          <el-result icon="success" :title="$t('bonus.teamBonus')" :sub-title="tableData.ORI_BONUS_QY.value | toThousandFilter">
+            <template slot="icon">
+              <i class="el-icon-money" />
+            </template>
+          </el-result>
+        </el-card>
+      </el-col>
 
-			<el-col :xs="24" :sm="12" :lg="6" :span="6">
-				<el-card shadow="hover" style="margin: 10px auto;">
-					<el-result icon="success" :title="$t('bonus.directorBonus')" :subTitle="tableData.ORI_BONUS_BS.value | toThousandFilter"></el-result>
-				</el-card>
-			</el-col>
+      <el-col :xs="24" :sm="12" :lg="6" :span="6">
+        <el-card shadow="hover" style="margin: 10px auto;">
+          <el-result icon="success" :title="$t('bonus.directorBonus')" :sub-title="tableData.ORI_BONUS_BS.value | toThousandFilter">
+            <template slot="icon">
+              <i class="el-icon-money" />
+            </template>
+          </el-result>
+        </el-card>
+      </el-col>
 
-			<el-col :xs="24" :sm="12" :lg="6" :span="6">
-				<el-card shadow="hover" style="margin: 10px auto;">
-					<el-result icon="success" :title="$t('bonus.quarterlyBonus')" :subTitle="tableData.ORI_BONUS_QUARTER.value | toThousandFilter"></el-result>
-				</el-card>
-			</el-col>
+      <el-col :xs="24" :sm="12" :lg="6" :span="6">
+        <el-card shadow="hover" style="margin: 10px auto;">
+          <el-result icon="success" :title="$t('bonus.quarterlyBonus')" :sub-title="tableData.ORI_BONUS_QUARTER.value | toThousandFilter">
+            <template slot="icon">
+              <i class="el-icon-money" />
+            </template>
+          </el-result>
+        </el-card>
+      </el-col>
 
-			<el-col :xs="24" :sm="12" :lg="6" :span="6" v-show="stockistCommissionSwitch === 1">
-				<el-card shadow="hover" style="margin: 10px auto;">
-					<el-result icon="success" :title="$t('bonus.stockistCommission')" :subTitle="tableData.BONUS_BD.value | toThousandFilter"></el-result>
-				</el-card>
-			</el-col>
+      <el-col v-show="stockistCommissionSwitch === 1" :xs="24" :sm="12" :lg="6" :span="6">
+        <el-card shadow="hover" style="margin: 10px auto;">
+          <el-result icon="success" :title="$t('bonus.stockistCommission')" :sub-title="tableData.BONUS_BD.value | toThousandFilter">
+            <template slot="icon">
+              <i class="el-icon-money" />
+            </template>
+          </el-result>
+        </el-card>
+      </el-col>
 
-			<el-col :xs="24" :sm="12" :lg="6" :span="6" >
-				<el-card shadow="hover" style="margin: 10px auto;">
-					<el-result icon="success" :title="$t('bonus.totalBonus')" :subTitle="tableData.BONUS_TOTAL.value | toThousandFilter"></el-result>
-				</el-card>
-			</el-col>
-		</el-row>
+      <el-col :xs="24" :sm="12" :lg="6" :span="6">
+        <el-card shadow="hover" style="margin: 10px auto;">
+          <el-result icon="success" :title="$t('bonus.totalBonus')" :sub-title="tableData.BONUS_TOTAL.value | toThousandFilter">
+            <template slot="icon">
+              <i class="el-icon-money" />
+            </template>
+          </el-result>
+        </el-card>
+      </el-col>
+    </el-row>
 
-<!--    <el-table-->
-<!--      :data="tableData"-->
-<!--      border-->
-<!--      fit-->
-<!--      highlight-current-row-->
-<!--      style="width: 100%; margin-top: 25px;"-->
-<!--    >-->
-<!--			<el-table-column align="center" min-width="130px" :label="$t('bonus.welcomeBonus')" prop="BONUS_TG.value" v-show="welcomeBonusSwitch === 1">-->
-<!--				<template slot-scope="{row}">-->
-<!--					{{ row.BONUS_TG.value | toThousandFilter }}-->
-<!--				</template>-->
-<!--			</el-table-column>-->
-<!--      <el-table-column align="center" min-width="120px" :label="$t('bonus.teamBonus')" prop="ORI_BONUS_QY.value" v-show="teamBonusSwitch === 1">-->
-<!--				<template slot-scope="{row}">-->
-<!--					{{ row.ORI_BONUS_QY.value | toThousandFilter }}-->
-<!--				</template>-->
-<!--			</el-table-column>-->
-<!--      <el-table-column align="center" min-width="130px" :label="$t('bonus.directorBonus')" prop="ORI_BONUS_BS.value">-->
-<!--				<template slot-scope="{row}">-->
-<!--					{{ row.ORI_BONUS_BS.value | toThousandFilter }}-->
-<!--				</template>-->
-<!--			</el-table-column>-->
-<!--      <el-table-column align="center" min-width="140px" :label="$t('bonus.quarterlyBonus')" prop="ORI_BONUS_QUARTER.value">-->
-<!--				<template slot-scope="{row}">-->
-<!--					{{ row.ORI_BONUS_QUARTER.value | toThousandFilter }}-->
-<!--				</template>-->
-<!--			</el-table-column>-->
-<!--			<el-table-column align="center" min-width="170px" :label="$t('bonus.stockistCommission')" prop="BONUS_BD.value" v-show="stockistCommissionSwitch === 1">-->
-<!--				<template slot-scope="{row}">-->
-<!--					{{ row.BONUS_BD.value | toThousandFilter }}-->
-<!--				</template>-->
-<!--			</el-table-column>-->
-<!--			<el-table-column align="center" min-width="120px" :label="$t('bonus.totalBonus')" prop="BONUS_TOTAL.value">-->
-<!--				<template slot-scope="{row}">-->
-<!--					{{ row.BONUS_TOTAL.value | toThousandFilter }}-->
-<!--				</template>-->
-<!--			</el-table-column>-->
-<!--    </el-table>-->
-	</div>
+    <!--    <el-table-->
+    <!--      :data="tableData"-->
+    <!--      border-->
+    <!--      fit-->
+    <!--      highlight-current-row-->
+    <!--      style="width: 100%; margin-top: 25px;"-->
+    <!--    >-->
+    <!--			<el-table-column align="center" min-width="130px" :label="$t('bonus.welcomeBonus')" prop="BONUS_TG.value" v-show="welcomeBonusSwitch === 1">-->
+    <!--				<template slot-scope="{row}">-->
+    <!--					{{ row.BONUS_TG.value | toThousandFilter }}-->
+    <!--				</template>-->
+    <!--			</el-table-column>-->
+    <!--      <el-table-column align="center" min-width="120px" :label="$t('bonus.teamBonus')" prop="ORI_BONUS_QY.value" v-show="teamBonusSwitch === 1">-->
+    <!--				<template slot-scope="{row}">-->
+    <!--					{{ row.ORI_BONUS_QY.value | toThousandFilter }}-->
+    <!--				</template>-->
+    <!--			</el-table-column>-->
+    <!--      <el-table-column align="center" min-width="130px" :label="$t('bonus.directorBonus')" prop="ORI_BONUS_BS.value">-->
+    <!--				<template slot-scope="{row}">-->
+    <!--					{{ row.ORI_BONUS_BS.value | toThousandFilter }}-->
+    <!--				</template>-->
+    <!--			</el-table-column>-->
+    <!--      <el-table-column align="center" min-width="140px" :label="$t('bonus.quarterlyBonus')" prop="ORI_BONUS_QUARTER.value">-->
+    <!--				<template slot-scope="{row}">-->
+    <!--					{{ row.ORI_BONUS_QUARTER.value | toThousandFilter }}-->
+    <!--				</template>-->
+    <!--			</el-table-column>-->
+    <!--			<el-table-column align="center" min-width="170px" :label="$t('bonus.stockistCommission')" prop="BONUS_BD.value" v-show="stockistCommissionSwitch === 1">-->
+    <!--				<template slot-scope="{row}">-->
+    <!--					{{ row.BONUS_BD.value | toThousandFilter }}-->
+    <!--				</template>-->
+    <!--			</el-table-column>-->
+    <!--			<el-table-column align="center" min-width="120px" :label="$t('bonus.totalBonus')" prop="BONUS_TOTAL.value">-->
+    <!--				<template slot-scope="{row}">-->
+    <!--					{{ row.BONUS_TOTAL.value | toThousandFilter }}-->
+    <!--				</template>-->
+    <!--			</el-table-column>-->
+    <!--    </el-table>-->
+  </div>
 </template>
 
 <script>
-import {fetchHistoricalCumulativeBonus} from '@/api/bonus'
+import { fetchHistoricalCumulativeBonus } from '@/api/bonus'
 
 export default {
-  name: 'historicalCumulativeBonus',
+  name: 'HistoricalCumulativeBonus',
   data() {
     return {
-			tableData: [],
+      tableData: [],
       total: 0,
-			loading: true,
+      loading: true,
 
-			welcomeBonusSwitch: 0,
-			teamBonusSwitch: 0,
-			stockistCommissionSwitch: 0,
+      welcomeBonusSwitch: 0,
+      teamBonusSwitch: 0,
+      stockistCommissionSwitch: 0
     }
   },
   created() {
     this.getList()
   },
-	methods: {
+  methods: {
     getList() {
       this.loading = true
-			fetchHistoricalCumulativeBonus().then(response => {
-				const {tableData, bonusSwitch} = response.data
-				this.tableData = tableData.length > 0 ? tableData[0] : {}
-				this.welcomeBonusSwitch = bonusSwitch.welcomeBonusSwitch
-				this.teamBonusSwitch = bonusSwitch.teamBonusSwitch
-				this.stockistCommissionSwitch = bonusSwitch.stockistCommissionSwitch
+      fetchHistoricalCumulativeBonus().then(response => {
+        const { tableData, bonusSwitch } = response.data
+        this.tableData = tableData.length > 0 ? tableData[0] : {}
+        this.welcomeBonusSwitch = bonusSwitch.welcomeBonusSwitch
+        this.teamBonusSwitch = bonusSwitch.teamBonusSwitch
+        this.stockistCommissionSwitch = bonusSwitch.stockistCommissionSwitch
 
-				this.loading = false
+        this.loading = false
       })
-    },
+    }
   }
 }
 </script>
+
+<style lang="scss" scoped>
+
+.app-container{
+	i{
+		display: block;
+		font-size: 60px;
+		/* margin-bottom: 15px; */
+		transition: color .15s linear;
+		// color: #13ce66;
+	}
+
+}
+::v-deep .el-result__subtitle{
+		font-weight: bold;
+		p{
+			font-size: 1.5em!important;
+			color: #000;
+		}
+	}
+</style>

src/views/bonus/team-inquiry.vue

@@ -1,107 +1,107 @@
 <template>
-  <div class="app-container" v-loading="loading">
-		<el-table border :data="userData" style="width: 100%" :cell-style="tableCellStyle">
-			<el-table-column :label="$t('bonus.personalDetails')">
-				<el-table-column type="index" :index="indexMethod" width="60px" label=""></el-table-column>
-				<el-table-column min-width="120px" prop="number" :label="$t('shop.memberCode')"></el-table-column>
-				<el-table-column min-width="210px" prop="name" :label="$t('shop.memberName')"></el-table-column>
-				<el-table-column min-width="70px" prop="perf_status_name" :label="$t('bonus.status')"></el-table-column>
-				<el-table-column min-width="120px" prop="user_perf" :label="$t('bonus.personalBV')">
-					<template slot-scope="{row}">
-						{{ row.user_perf | toThousandFilter }}
-					</template>
-				</el-table-column>
-				<el-table-column min-width="120px" prop="team_perf" :label="$t('bonus.PGS')">
-					<template slot-scope="{row}">
-						{{ row.team_perf | toThousandFilter }}
-					</template>
-				</el-table-column>
-				<el-table-column min-width="120px" prop="total_perf" :label="$t('bonus.totalBV')">
-					<template slot-scope="{row}">
-						{{ row.total_perf | toThousandFilter }}
-					</template>
-				</el-table-column>
-			</el-table-column>
-		</el-table>
+  <div v-loading="loading" class="app-container">
+    <el-table border :data="userData" style="width: 100%" :cell-style="tableCellStyle">
+      <el-table-column :label="$t('bonus.personalDetails')">
+        <el-table-column type="index" :index="indexMethod" width="60px" label="" />
+        <el-table-column min-width="120px" prop="number" :label="$t('shop.memberCode')" />
+        <el-table-column min-width="210px" prop="name" :label="$t('shop.memberName')" />
+        <el-table-column min-width="70px" prop="perf_status_name" :label="$t('bonus.status')" />
+        <el-table-column min-width="120px" prop="user_perf" :label="$t('bonus.personalBV')">
+          <template slot-scope="{row}">
+            {{ row.user_perf | toThousandFilter }}
+          </template>
+        </el-table-column>
+        <el-table-column min-width="120px" prop="team_perf" :label="$t('bonus.PGS')">
+          <template slot-scope="{row}">
+            {{ row.team_perf | toThousandFilter }}
+          </template>
+        </el-table-column>
+        <el-table-column min-width="120px" prop="total_perf" :label="$t('bonus.totalBV')">
+          <template slot-scope="{row}">
+            {{ row.total_perf | toThousandFilter }}
+          </template>
+        </el-table-column>
+      </el-table-column>
+    </el-table>
 
-		<el-table border :data="tableData" style="width: 100%;margin-top:20px;" :cell-style="tableCellStyle">
-			<el-table-column :label="$t('bonus.teamDetails')">
-				<el-table-column type="index" :index="indexMethod" width="60px" label=""></el-table-column>
-				<el-table-column min-width="120px" prop="number" :label="$t('shop.memberCode')"></el-table-column>
-				<el-table-column min-width="210px" prop="name" :label="$t('shop.memberName')"></el-table-column>
-				<el-table-column min-width="70px" prop="perf_status_name" :label="$t('bonus.status')"></el-table-column>
-				<el-table-column min-width="120px" prop="user_perf" :label="$t('bonus.personalBV')">
-					<template slot-scope="{row}">
-						{{ row.user_perf | toThousandFilter }}
-					</template>
-				</el-table-column>
-				<el-table-column min-width="120px" prop="team_perf" :label="$t('bonus.PGS')">
-					<template slot-scope="{row}">
-						{{ row.team_perf | toThousandFilter }}
-					</template>
-				</el-table-column>
-				<el-table-column min-width="120px" prop="total_perf" :label="$t('bonus.totalBV')">
-					<template slot-scope="{row}">
-						{{ row.total_perf | toThousandFilter }}
-					</template>
-				</el-table-column>
-			</el-table-column>
-		</el-table>
+    <el-table border :data="tableData" style="width: 100%;margin-top:20px;" :cell-style="tableCellStyle">
+      <el-table-column :label="$t('bonus.teamDetails')">
+        <el-table-column type="index" :index="indexMethod" width="60px" label="" />
+        <el-table-column min-width="120px" prop="number" :label="$t('shop.memberCode')" />
+        <el-table-column min-width="210px" prop="name" :label="$t('shop.memberName')" />
+        <el-table-column min-width="70px" prop="perf_status_name" :label="$t('bonus.status')" />
+        <el-table-column min-width="120px" prop="user_perf" :label="$t('bonus.personalBV')">
+          <template slot-scope="{row}">
+            {{ row.user_perf | toThousandFilter }}
+          </template>
+        </el-table-column>
+        <el-table-column min-width="120px" prop="team_perf" :label="$t('bonus.PGS')">
+          <template slot-scope="{row}">
+            {{ row.team_perf | toThousandFilter }}
+          </template>
+        </el-table-column>
+        <el-table-column min-width="120px" prop="total_perf" :label="$t('bonus.totalBV')">
+          <template slot-scope="{row}">
+            {{ row.total_perf | toThousandFilter }}
+          </template>
+        </el-table-column>
+      </el-table-column>
+    </el-table>
 
-		<el-descriptions  :column="2">
-			<el-descriptions-item :label="$t('bonus.latestCalculationTime')">{{ getWatTime(calcTime) }}</el-descriptions-item>
-		</el-descriptions>
-	</div>
+    <el-descriptions :column="2">
+      <el-descriptions-item :label="$t('bonus.latestCalculationTime')">{{ getWatTime(calcTime) }}</el-descriptions-item>
+    </el-descriptions>
+  </div>
 </template>
 
 <script>
-import {fetchTeamInquiry} from '@/api/bonus'
-import tool from "@/utils/tool"
+import { fetchTeamInquiry } from '@/api/bonus'
+import tool from '@/utils/tool'
 
 export default {
-  name: 'teamInquiry',
+  name: 'TeamInquiry',
   data() {
     return {
-			calcTime: '',
-			userData: [],
-			tableData: [],
-			loading: true,
+      calcTime: '',
+      userData: [],
+      tableData: [],
+      loading: true,
 
-			tool: tool,
+      tool: tool
     }
   },
   created() {
     this.getList()
   },
-	methods: {
+  methods: {
     getList() {
       this.loading = true
-			fetchTeamInquiry().then(response => {
-				this.calcTime = response.data.calcAt
-				this.tableData = response.data.team
-				this.userData = response.data.user
+      fetchTeamInquiry().then(response => {
+        this.calcTime = response.data.calcAt
+        this.tableData = response.data.team
+        this.userData = response.data.user
 
-				this.loading = false
+        this.loading = false
       })
     },
-		tableCellStyle ({row, column, rowIndex, columnIndex}) {
-			if (row.perf_status === '0' && columnIndex === 3) {
-				return 'background-color:rgb(225, 25, 98);font-weight:bold'
-			} else if (row.perf_status === '1' && columnIndex === 3) {
-				return 'background-color:rgb(31, 156, 18);font-weight:bold'
-			}
-		},
-		indexMethod(index) {
-			return index + 1
-		},
-		getWatTime(ts) {
-			ts = parseInt(ts)
-			if (ts) {
-				return this.$moment(ts * 1000).utcOffset('+0100').format('YYYY-MM-DD HH:mm:ss')
-			} else {
-				return ''
-			}
-		}
+    tableCellStyle({ row, column, rowIndex, columnIndex }) {
+      if (row.perf_status === '0' && columnIndex === 3) {
+        return 'background-color:rgb(225, 25, 98);font-weight:bold'
+      } else if (row.perf_status === '1' && columnIndex === 3) {
+        return 'background-color:rgb(31, 156, 18);font-weight:bold'
+      }
+    },
+    indexMethod(index) {
+      return index + 1
+    },
+    getWatTime(ts) {
+      ts = parseInt(ts)
+      if (ts) {
+        return this.$moment(ts * 1000).utcOffset('+0100').format('YYYY-MM-DD HH:mm:ss')
+      } else {
+        return ''
+      }
+    }
   }
 }
 </script>
@@ -160,10 +160,10 @@ export default {
 .el-descriptions {
 	margin-top:20px;
 }
-/deep/ .el-descriptions-item__container {
+::v-deep .el-descriptions-item__container {
 	margin-top:10px;
 }
-/deep/ .el-descriptions-item__label.has-colon {
+::v-deep .el-descriptions-item__label.has-colon {
 	margin-left:10px;
 }
 </style>

src/views/shop/reconsume.vue

@@ -70,8 +70,10 @@
                       <el-col :xs="24" :sm="4" :lg="4">
                         <span style="color: #9c9c9c; cursor: pointer;">{{ row.GOODS_NO }}</span>
                       </el-col>
-                      <el-col :xs="16" :sm="4" :lg="4">
+                      <el-col :xs="20" :sm="8" :lg="8">
                         <span style="font-weight: bold;">{{ $t('currency.sign') }} {{ row.member_price | toThousandFilter }}</span>
+                        <!-- <span style="font-weight:normal; color: #606266;">({{ row.PRICE_PV | toThousandFilter }}{{ $t('shop.productBV') }})</span> -->
+
                       </el-col>
                       <el-col :xs="8" :sm="3" :lg="3">
                         <span style="">x {{ row.chose_num }}</span>
@@ -101,58 +103,57 @@
             </div>
             <el-divider />
             <div class="" style="margin: 15px 0;">
-              <el-row :gutter="20">
-                <el-form>
-                  <el-col :xs="24" :sm="24" :lg="3">
-                    <span style="font-weight: bold; word-break: normal; white-space: normal; line-height: 28px;">{{ $t('shop.customerInfo') }}：</span>
+
+              <el-form label-position="top">
+                <el-col :xs="24" :sm="24" :lg="24">
+                  <span style="font-weight: bold; word-break: normal; white-space: normal; line-height: 28px;">{{ $t('shop.customerInfo') }}：</span>
+                </el-col>
+                <el-form-item>
+                  <el-col :xs="24" :sm="24" :lg="15">
+                    <span>{{ $t('shop.reconsumeUserCode') }}</span>
                   </el-col>
-                  <el-col :xs="24" :sm="24" :lg="5" style="word-break: normal; white-space: nowrap; line-height: 28px;">
-                    <el-form-item>
-                      <el-col :xs="24" :sm="24" :lg="15">
-                        <span>{{ $t('shop.reconsumeUserCode') }}</span>
-                      </el-col>
-                      <el-input v-model.trim="newOrder.userName" @change="handleChkRecUser" />
-                      <span style="margin-left: 10px">【{{ newOrder.recRealName }}】</span>
-                    </el-form-item>
-                    <el-form-item>
-                      <el-col :xs="24" :sm="24" :lg="15">
-                        <span>{{ $t('shop.recipientName') }}</span>
-                      </el-col>
-                      <el-input v-model.trim="newOrder.consignee" />
-                    </el-form-item>
-                    <el-form-item>
-                      <el-col :xs="24" :sm="24" :lg="15">
-                        <span>{{ $t('shop.mobile') }}</span>
-                      </el-col>
-                      <el-input v-model.trim="newOrder.mobile" />
-                    </el-form-item>
-                    <el-form-item>
-                      <el-col :xs="24" :sm="24" :lg="15">
-                        <span>{{ $t('shop.province') }}</span>
-                      </el-col>
-                      <el-cascader v-model="newOrder.areaSelected" :disabled="areaDisabled" size="large" :placeholder="$t('shop.delivery')" :options="regionData" style="width: 100%;" />
-                    </el-form-item>
-                    <el-form-item>
-                      <el-col :xs="24" :sm="24" :lg="15">
-                        <span>{{ $t('shop.lgaName') }}</span>
-                      </el-col>
-                      <el-input v-model.trim="newOrder.lgaName" />
-                    </el-form-item>
-                    <el-form-item>
-                      <el-col :xs="24" :sm="24" :lg="15">
-                        <span>{{ $t('shop.cityName') }}</span>
-                      </el-col>
-                      <el-input v-model.trim="newOrder.cityName" />
-                    </el-form-item>
-                    <el-form-item>
-                      <el-col :xs="24" :sm="24" :lg="15">
-                        <span>{{ $t('shop.address') }}</span>
-                      </el-col>
-                      <el-input v-model.trim="newOrder.address" />
-                    </el-form-item>
+                  <el-input v-model.trim="newOrder.userName" @change="handleChkRecUser" />
+                  <span style="margin-left: 10px">【{{ newOrder.recRealName }}】</span>
+                </el-form-item>
+                <el-form-item>
+                  <el-col :xs="24" :sm="24" :lg="15">
+                    <span>{{ $t('shop.recipientName') }}</span>
                   </el-col>
-                </el-form>
-              </el-row>
+                  <el-input v-model.trim="newOrder.consignee" />
+                </el-form-item>
+                <el-form-item>
+                  <el-col :xs="24" :sm="24" :lg="15">
+                    <span>{{ $t('shop.mobile') }}</span>
+                  </el-col>
+                  <el-input v-model.trim="newOrder.mobile" />
+                </el-form-item>
+                <el-form-item>
+                  <el-col :xs="24" :sm="24" :lg="15">
+                    <span>{{ $t('shop.province') }}</span>
+                  </el-col>
+                  <el-cascader v-model="newOrder.areaSelected" :disabled="areaDisabled" size="large" :placeholder="$t('shop.delivery')" :options="regionData" style="width: 100%;" />
+                </el-form-item>
+                <el-form-item>
+                  <el-col :xs="24" :sm="24" :lg="15">
+                    <span>{{ $t('shop.lgaName') }}</span>
+                  </el-col>
+                  <el-input v-model.trim="newOrder.lgaName" />
+                </el-form-item>
+                <el-form-item>
+                  <el-col :xs="24" :sm="24" :lg="15">
+                    <span>{{ $t('shop.cityName') }}</span>
+                  </el-col>
+                  <el-input v-model.trim="newOrder.cityName" />
+                </el-form-item>
+                <el-form-item>
+                  <el-col :xs="24" :sm="24" :lg="15">
+                    <span>{{ $t('shop.address') }}</span>
+                  </el-col>
+                  <el-input v-model.trim="newOrder.address" />
+                </el-form-item>
+
+              </el-form>
+
             </div>
             <el-divider />
             <!-- 支付方式/账户余额 {{ cashCurrency }}:  -->
@@ -252,20 +253,20 @@
 
 <script>
 import {
-  fetchReconsumeProductList,
-  deleteApproachOrder,
-  fetchShoppingCart,
+  createApproachReconsumeOrder,
   createReconsumeOrder,
-  createApproachReconsumeOrder
+  deleteApproachOrder,
+  fetchReconsumeProductList,
+  fetchShoppingCart
 } from '@/api/shop'
 import { fetchFullInfo } from '@/api/user'
+import Pagination from '@/components/Pagination'
 import waves from '@/directive/waves'
+import region from '@/store/modules/region'
 import { getScreenWidth } from '@/utils'
 import tool from '@/utils/tool'
-import Pagination from '@/components/Pagination'
 import usersInfo from '@/utils/usersInfo'
 import paystack from 'vue-paystack'
-import region from '@/store/modules/region'
 
 export default {
   name: 'StandardProducts',
@@ -813,7 +814,7 @@ export default {
 }
 </script>
 
-<style>
+<style >
 .el-table--medium .el-table__cell {
   padding: 3px 0;
 }

src/views/user/member-order.vue

@@ -0,0 +1,199 @@
+<template>
+  <div class="app-container">
+    <el-table
+      v-loading="listLoading"
+      fit
+      lazy
+      highlight-current-row
+      :data="tableData"
+    >
+      <el-table-column type="expand">
+        <template slot-scope="props">
+          <el-col :xs="18" :sm="18" :lg="18">
+            <el-card class="box-card" shadow="hover">
+              <el-table v-loading="listLoading" fit lazy highlight-current-row :data="props.row.hasChildren">
+                <el-table-column align="center" min-width="120px" :label="$t('shop.productCode')" prop="SKU_CODE">
+                  <template slot-scope="{row}">
+                    <span style="white-space: nowrap;">{{ row.SKU_CODE }}</span>
+                  </template>
+                </el-table-column>
+                <el-table-column align="center" min-width="200px" :label="$t('shop.productName')" prop="GOODS_TITLE">
+                  <template slot-scope="{row}">
+                    <span>{{ row.GOODS_TITLE }}</span>
+                  </template>
+                </el-table-column>
+                <el-table-column align="center" :label="$t('shop.qty')" prop="BUY_NUMS">
+                  <template slot-scope="{row}">
+                    <span style="white-space: nowrap;">{{ row.BUY_NUMS }}</span>
+                  </template>
+                </el-table-column>
+                <el-table-column align="center" :label="$t('shop.productPrice')" min-width="150px">
+                  <template slot-scope="{row}">
+                    <span style="white-space: nowrap;">{{ $t('currency.sign') }} {{ row.REAL_PRICE | toThousandFilter }}</span>
+                  </template>
+                </el-table-column>
+                <el-table-column align="center" :label="$t('shop.totalPrice')">
+                  <template slot-scope="{row}">
+                    <span style="white-space: nowrap;">{{ $t('currency.sign') }} {{ row | priceAmountFilter | toThousandFilter }}</span>
+                  </template>
+                </el-table-column>
+                <el-table-column align="center" :label="$t('shop.totalBV')">
+                  <template slot-scope="{row}">
+                    <span style="white-space: nowrap;">{{ row | bvFilter | toThousandFilter }}</span>
+                  </template>
+                </el-table-column>
+                <el-table-column align="center" :label="$t('shop.taxRate')">
+                  <template slot-scope="{row}">
+                    <span style="white-space: nowrap;">{{ row.TAX_RATE / 100 }}</span>
+                  </template>
+                </el-table-column>
+                <el-table-column align="center" :label="$t('shop.totalTaxAmount')">
+                  <template slot-scope="{row}">
+                    <span style="white-space: nowrap;">{{ $t('currency.sign') }} {{ row | taxAmountFilter | toThousandFilter }}</span>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </el-card>
+          </el-col>
+        </template>
+      </el-table-column>
+      <el-table-column align="center" :label="$t('shop.orderCode')" prop="SN" min-width="120px" style="white-space: pre-wrap;">
+        <template slot-scope="{row}">
+          <span style="white-space: pre-wrap; display: inline-block; min-width: 120px; word-break: break-all;">{{ row.SN }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column align="center" :label="$t('shop.memberCode')" prop="USER_NAME" min-width="150px" />
+      <el-table-column align="center" :label="$t('shop.memberName')" prop="REAL_NAME" min-width="150px">
+        <template slot-scope="{row}">
+          <span style="white-space: pre-wrap; display: inline-block; min-width: 120px; word-break: break-all;">{{ row.REAL_NAME }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column align="center" :label="$t('shop.recipientName')" prop="CONSIGNEE" min-width="150px">
+        <template slot-scope="{row}">
+          <span style="white-space: pre-wrap; min-width: 120px; word-break: break-all;">{{ row.CONSIGNEE }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column align="center" :label="$t('shop.phoneNumber')" prop="MOBILE" min-width="130px" />
+      <el-table-column align="center" :label="$t('shop.shippingAddress')" prop="FULL_ADDRESS" min-width="140px">
+        <template slot-scope="{row}">
+          <span>{{ row.FULL_ADDRESS }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column align="center" :label="$t('shop.payment')" prop="PAY_TYPE" min-width="100px" />
+      <el-table-column align="center" :label="$t('shop.createdTime')" prop="CREATED_AT" min-width="110px">
+        <template slot-scope="{row}">
+          <span>{{ row.CREATED_AT | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column align="center" :label="$t('shop.payTime')" prop="PAY_AT" min-width="110px">
+        <template slot-scope="{row}">
+          <span>{{ row.PAY_AT | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column align="center" :label="$t('shop.payStatus')" prop="STATUS" min-width="110px">
+        <template slot-scope="{row}">
+          <el-tag :type="row.STATUS | statusFilter">
+            {{ row.STATUS }}
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column align="center" :label="$t('shop.orderType')" prop="ORDER_TYPE" min-width="110px" />
+      <el-table-column align="center" :label="$t('shop.action')" class-name="small-padding fixed-width">
+        <template slot-scope="{row}">
+          <el-button type="text" size="mini" @click="handleDownload(row.SN)">{{ $t('shop.download') }}</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>
+</template>
+
+<script>
+import { downloadOrder, fetchOrderList } from '@/api/user'
+import Pagination from '@/components/Pagination'
+import waves from '@/directive/waves'
+import { getScreenWidth } from '@/utils'
+import tool from '@/utils/tool'
+
+export default {
+  name: 'MemberOrder',
+  components: { Pagination },
+  directives: { waves },
+  filters: {
+    bvFilter(row) {
+      return tool.calculateBV(row.REAL_PV, row.BUY_NUMS)
+    },
+    taxAmountFilter(row) {
+      return tool.calculateTax(row.REAL_PRICE, row.BUY_NUMS)
+    },
+    priceAmountFilter(row) {
+      return tool.formatPrice(row.REAL_PRICE * row.BUY_NUMS)
+    },
+    statusFilter(status) {
+      const statusMap = {
+        Unpaid: 'info',
+        Paid: 'success'
+      }
+      return statusMap[status]
+    }
+  },
+  data() {
+    return {
+      tableKey: 0,
+      total: 0,
+      tableData: [],
+      listLoading: true,
+      downloadLoading: false,
+      listQuery: {
+        v: 2,
+        page: 1,
+        pageSize: 20
+      },
+      childrenNode: [],
+      screenWidth: getScreenWidth() > 600 ? '500px' : getScreenWidth() + 'px',
+      labelPosition: getScreenWidth() > 600 ? 'right' : 'top'
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    getList() {
+      this.listLoading = true
+      fetchOrderList(this.listQuery).then(response => {
+        this.tableData = response.data.list
+        this.total = +response.data.totalCount
+
+        setTimeout(() => {
+          this.listLoading = false
+        }, 0.5 * 1000)
+      })
+    },
+    handleDownload(orderSn) {
+      this.downloadLoading = true
+      downloadOrder(orderSn).then(response => {
+        const { fileUrl, targetName } = response.data
+        const downloadElement = document.createElement('a')
+        downloadElement.target = '_blank'
+        downloadElement.href = process.env.VUE_APP_BASE_DO_API + '/' + fileUrl
+        downloadElement.download = targetName
+        downloadElement.click()
+      })
+
+      this.downloadLoading = false
+    }
+  }
+}
+</script>
+
+<style>
+.el-table th.el-table__cell > .cell {
+	white-space: nowrap;
+}
+
+.el-table td.el-table__cell > .cell {
+	word-break: keep-all;
+	white-space: pre-wrap;
+}
+</style>

vue.config.js

@@ -38,7 +38,7 @@ module.exports = {
     },
     proxy: {
       [process.env.VUE_APP_BASE_API]:{
-        target:"http://localhost:8013",
+        target:"http://16.163.228.151:8043",
         changeOrigin:true,
         pathRewrite:{
           ["^" + process.env.VUE_APP_BASE_API] : ""