首页-企业首页、非企业首页

src/views/dashboard/Analysis.vue

@@ -1,229 +1,460 @@
 <template>
-  <div class='page-header-index-wide welcome'>
-    <img src='~@/assets/welcome.jpg' class='logo'>
-<!--    <div class='content'>-->
-<!--      <div class='title'>-->
-<!--        欢迎使用开心灵工-->
-<!--      </div>-->
-<!--      <div class='tips'>-->
-<!--        灵活用工一站式服务平台-->
-<!--      </div>-->
-<!--      <div class='btn' @click='toAccount' v-has="'account:manager'">-->
-<!--        进入我的账户-->
-<!--      </div>-->
-<!--    </div>-->
-    <!--<a-row :gutter="24">-->
-    <!--<a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">-->
-    <!--<chart-card :loading="loading" title="总销售额" total="￥126,560">-->
-    <!--<a-tooltip title="指标说明" slot="action">-->
-    <!--<a-icon type="info-circle-o" />-->
-    <!--</a-tooltip>-->
-    <!--<div>-->
-    <!--<trend flag="up" style="margin-right: 16px;">-->
-    <!--<span slot="term">周同比</span>-->
-    <!--12%-->
-    <!--</trend>-->
-    <!--<trend flag="down">-->
-    <!--<span slot="term">日同比</span>-->
-    <!--11%-->
-    <!--</trend>-->
-    <!--</div>-->
-    <!--<template slot="footer">日均销售额<span>￥ 234.56</span></template>-->
-    <!--</chart-card>-->
-    <!--</a-col>-->
-    <!--<a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">-->
-    <!--<chart-card :loading="loading" title="访问量" :total="8846 | NumberFormat">-->
-    <!--<a-tooltip title="指标说明" slot="action">-->
-    <!--<a-icon type="info-circle-o" />-->
-    <!--</a-tooltip>-->
-    <!--<div>-->
-    <!--<mini-area />-->
-    <!--</div>-->
-    <!--<template slot="footer">日访问量<span> {{ '1234' | NumberFormat }}</span></template>-->
-    <!--</chart-card>-->
-    <!--</a-col>-->
-    <!--<a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">-->
-    <!--<chart-card :loading="loading" title="支付笔数" :total="6560 | NumberFormat">-->
-    <!--<a-tooltip title="指标说明" slot="action">-->
-    <!--<a-icon type="info-circle-o" />-->
-    <!--</a-tooltip>-->
-    <!--<div>-->
-    <!--<mini-bar :height="40" />-->
-    <!--</div>-->
-    <!--<template slot="footer">转化率 <span>60%</span></template>-->
-    <!--</chart-card>-->
-    <!--</a-col>-->
-    <!--<a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">-->
-    <!--<chart-card :loading="loading" title="运营活动效果" total="78%">-->
-    <!--<a-tooltip title="指标说明" slot="action">-->
-    <!--<a-icon type="info-circle-o" />-->
-    <!--</a-tooltip>-->
-    <!--<div>-->
-    <!--<mini-progress color="rgb(19, 194, 194)" :target="80" :percentage="78" :height="8" />-->
-    <!--</div>-->
-    <!--<template slot="footer">-->
-    <!--<trend flag="down" style="margin-right: 16px;">-->
-    <!--<span slot="term">同周比</span>-->
-    <!--12%-->
-    <!--</trend>-->
-    <!--<trend flag="up">-->
-    <!--<span slot="term">日环比</span>-->
-    <!--80%-->
-    <!--</trend>-->
-    <!--</template>-->
-    <!--</chart-card>-->
-    <!--</a-col>-->
-    <!--</a-row>-->
-
-    <!--<a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}">-->
-    <!--<div class="salesCard">-->
-    <!--<a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">-->
-    <!--<div class="extra-wrapper" slot="tabBarExtraContent">-->
-    <!--<div class="extra-item">-->
-    <!--<a>今日</a>-->
-    <!--<a>本周</a>-->
-    <!--<a>本月</a>-->
-    <!--<a>本年</a>-->
-    <!--</div>-->
-    <!--<a-range-picker :style="{width: '256px'}" />-->
-    <!--</div>-->
-    <!--<a-tab-pane loading="true" tab="销售额" key="1">-->
-    <!--<a-row>-->
-    <!--<a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">-->
-    <!--<bar title="销售额排行" :dataSource="barData"/>-->
-    <!--</a-col>-->
-    <!--<a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">-->
-    <!--<rank-list title="门店销售排行榜" :list="rankList"/>-->
-    <!--</a-col>-->
-    <!--</a-row>-->
-    <!--</a-tab-pane>-->
-    <!--<a-tab-pane tab="访问量" key="2">-->
-    <!--<a-row>-->
-    <!--<a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">-->
-    <!--<bar title="销售额趋势" :dataSource="barData"/>-->
-    <!--</a-col>-->
-    <!--<a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">-->
-    <!--<rank-list title="门店销售排行榜" :list="rankList"/>-->
-    <!--</a-col>-->
-    <!--</a-row>-->
-    <!--</a-tab-pane>-->
-    <!--</a-tabs>-->
-    <!--</div>-->
-    <!--</a-card>-->
-
-    <!--<a-row>-->
-    <!--<a-col :span="24">-->
-    <!--<a-card :loading="loading" :bordered="false" title="最近一周访问次数统计" :style="{ marginTop: '24px' }">-->
-    <!--<a-row>-->
-    <!--<a-col :span="6">-->
-    <!--<head-info title="今日访问IP数" :content="loginfo.todayIp"></head-info>-->
-    <!--</a-col>-->
-    <!--<a-col :span="2">-->
-    <!--<a-spin class='circle-cust'>-->
-    <!--<a-icon slot="indicator" type="environment" style="font-size: 24px"  />-->
-    <!--</a-spin>-->
-    <!--</a-col>-->
-    <!--<a-col :span="6">-->
-    <!--<head-info title="今日访问次数" :content="loginfo.todayVisitCount"></head-info>-->
-    <!--</a-col>-->
-    <!--<a-col :span="2">-->
-    <!--<a-spin class='circle-cust'>-->
-    <!--<a-icon slot="indicator" type="team" style="font-size: 24px"  />-->
-    <!--</a-spin>-->
-    <!--</a-col>-->
-    <!--<a-col :span="6">-->
-    <!--<head-info title="访问总次数" :content="loginfo.totalVisitCount"></head-info>-->
-    <!--</a-col>-->
-    <!--<a-col :span="2">-->
-    <!--<a-spin class='circle-cust'>-->
-    <!--<a-icon slot="indicator" type="rise" style="font-size: 24px"  />-->
-    <!--</a-spin>-->
-    <!--</a-col>-->
-    <!--</a-row>-->
-    <!--<line-chart-multid :fields="visitFields" :dataSource="visitInfo"></line-chart-multid>-->
-    <!--</a-card>-->
-    <!--</a-col>-->
-    <!--</a-row>-->
-  </div>
+    <div class='page-header-index-wide welcome' v-if="!isCompany">
+      <img src='~@/assets/welcome.jpg' class='logo'>
+    </div>
+    <div v-else>
+      <div class='content step-list'>
+        <div class='step-list-item' v-for='(item,index) in stepList' :key='index'>
+          <div class='step-list-item-top'>
+            <img :src='item.icon' :alt='item.title'>
+            <div class='title'>{{ item.title }}</div>
+            <div class='bar' v-if='index !== stepList.length - 1'></div>
+          </div>
+          <div class='step-list-item-bottom'>
+            {{ item.content }}
+          </div>
+        </div>
+      </div>
+
+      <div class='account-data-content'>
+        <div class='content account-data' v-for='(item,index) in dataList' :key='index'>
+          <img :src='item.image' alt=''>
+          <div class='account-data-count'>
+            <div class='account-data-title'>{{ accountData[item.title] }}</div>
+            <div class='account-data-description'>{{ item.content }}</div>
+          </div>
+        </div>
+      </div>
+
+      <div class='content' v-show='subcontractorName.length'>
+        <div class='account-info'>
+          <!-- 查询区域 -->
+          <a-tabs @change='chooseSubcontractor' style='width: 100%;padding:0 10px'>
+            <a-tab-pane v-for='(item,index) in Subcontractor' :key='index.toString()'
+                        :tab='item.subcontractorName'></a-tab-pane>
+          </a-tabs>
+          <div class='table-page-search-wrapper'>
+            <a-spin :spinning='sendLoading'>
+              <a-row type='flex' justify='space-between'>
+                <!--            <div class='title'>我的账户</div>-->
+                <a-col :span='11' class='account-manager-content'>
+                  <a-row type='flex'>
+                    <a-col span='12'>
+                      <a-row type='flex' align='middle'>
+                        <a-col span='24'>
+                          <a-row type='flex' align='middle'>
+                            <a-col span='24'>
+
+                            <span class='money'>
+                              {{ information.balance || '0.00' | moneyFixed }}
+                            </span>
+                            </a-col>
+                            <a-col span='24'>
+                              <div class='yue'>
+                                <span>当前余额(元)</span>
+                              </div>
+                              <div>
+                                <a-button type='primary' size='large' @click='handleRecharge' style='margin:10px 0'>
+                                  <img src='@/assets/icon/account/charge.png' alt='我要充值'
+                                       style='width: 16px;height: 16px;margin-right: 8px'>
+                                  <span style='font-size: 14px;'>我要充值</span>
+                                </a-button>
+                                <br>
+                                <div style='display: flex;align-items: center;'>
+                                  <span>我已充值，提醒平台完成发放</span>
+                                  <a-button type='primary' ghost size='small' style='margin-left: 5px'
+                                            @click='handleSendMessage'>发送短信
+                                  </a-button>
+                                </div>
+                              </div>
+                            </a-col>
+                            <!--<a-col>-->
+                            <!--<div v-show='information.isOn === 0'>-->
+                            <!--该服务商暂时停用，若有疑问请联系客服-->
+                            <!--</div>-->
+                            <!--</a-col>-->
+                          </a-row>
+                          <a-row type='flex' align='middle' style='margin-top: 15px;'>
+
+
+                          </a-row>
+                        </a-col>
+                      </a-row>
+                    </a-col>
+                    <a-col span='12' class='accept-info'>
+                      <div class='accept-info-title'>
+                        收款信息
+                        <img class='accept-info-copy-image' src='../../assets/icon/account/copy.png' alt=''
+                             :data-clipboard-text='subcontractorCopyInfo'
+                             @click='copy'>
+                      </div>
+                      <div class='accept-info-detail'>
+                        <div>银行账户：{{ subcontractorName }}</div>
+                        <div>银行账号：{{ subcontractorBankInfo.bankAccount }}</div>
+                        <div>开户行：{{ subcontractorBankInfo.bankName }}</div>
+                      </div>
+                    </a-col>
+                  </a-row>
+                  <a-row class='tips'>
+                    温馨提示：
+                    受银行处理时间影响，线下汇款方式到账会有延误。
+                    请避免北京时间21：00-00：00进行汇款，否则受银行出账时间影响，可能出现延迟一天到账情况。
+                  </a-row>
+                  <a-row class='tips2'>
+                    <img src='../../assets/icon/account/warning.png' alt=''>
+                    <span>充值转账附言不要填写，如必填写请填写“服务费”</span>
+                  </a-row>
+                </a-col>
+                <a-col :span='11' class='account-manager-content' style='padding: 15px 45px'>
+                  <a-row>
+                    <a-list :grid='{ gutter: 0, column: 4 }' :data-source='supplierDataList' :bordered='false'>
+                      <a-list-item slot='renderItem' slot-scope='item, index' :bordered='false'>
+                        <a-card :bordered='false'>
+                          <a-card-meta>
+                            <template slot='title'>
+                              <div
+                                style='text-align:center;font-size: 30px;font-family: HelveticaNeue-Bold, HelveticaNeue;font-weight: bold;color: rgba(0,0,0,0.85);'>
+                                {{ supplierData[item.title] }}
+                              </div>
+                            </template>
+                            <template slot='description'>
+                              <div
+                                style='text-align:center;font-size: 14px;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: rgba(0,0,0,0.65);'>
+                                {{ item.content }}
+                              </div>
+                            </template>
+                          </a-card-meta>
+                        </a-card>
+                      </a-list-item>
+                    </a-list>
+                  </a-row>
+                  <a-row class='money-list'>
+                    <div>
+                      付款金额（元）：<span>{{ noPayment }}</span>
+                    </div>
+                    <div>
+                      服务费（元）：<span>{{ noServiceFee }}</span>
+                    </div>
+                  </a-row>
+                  <a-row class='total'>
+                    待付款金额合计（元）： <span>{{ noTotalPayment }}</span>
+                  </a-row>
+                </a-col>
+
+              </a-row>
+            </a-spin>
+          </div>
+          <!-- 查询区域-END -->
+        </div>
+      </div>
+      <HwPaymentRechargeModal ref='rechargeModal'></HwPaymentRechargeModal>
+    </div>
 </template>
 
 <script>
-import ChartCard from '@/components/ChartCard'
-import ACol from 'ant-design-vue/es/grid/Col'
-import ATooltip from 'ant-design-vue/es/tooltip/Tooltip'
-import MiniArea from '@/components/chart/MiniArea'
-import MiniBar from '@/components/chart/MiniBar'
-import MiniProgress from '@/components/chart/MiniProgress'
-import RankList from '@/components/chart/RankList'
-import Bar from '@/components/chart/Bar'
-import LineChartMultid from '@/components/chart/LineChartMultid'
-import HeadInfo from '@/components/tools/HeadInfo.vue'
-
-import Trend from '@/components/Trend'
-import { getLoginfo, getVisitInfo } from '@/api/api'
-
-const rankList = []
-for (let i = 0; i < 7; i++) {
-  rankList.push({
-    name: '白鹭岛 ' + (i + 1) + ' 号店',
-    total: 1234.56 - i * 100
-  })
-}
-const barData = []
-for (let i = 0; i < 12; i += 1) {
-  barData.push({
-    x: `${i + 1}月`,
-    y: Math.floor(Math.random() * 1000) + 200
-  })
-}
+  import { USER_AUTH,SYS_BUTTON_AUTH } from "@/store/mutation-types"
+  import { Arithmetic } from '@/mixins/Arithmetic'
+  import HwPaymentRechargeModal from '../hwaccount/modules/HwPaymentRechargeModal'
+  import { httpAction, getAction, downFile } from '@/api/manage'
+  import Clipboard from 'clipboard'
+
 export default {
   name: 'Analysis',
+  mixins: [Arithmetic],
   components: {
-    ATooltip,
-    ACol,
-    ChartCard,
-    MiniArea,
-    MiniBar,
-    MiniProgress,
-    RankList,
-    Bar,
-    Trend,
-    LineChartMultid,
-    HeadInfo
+    HwPaymentRechargeModal
+  },
+  filters: {
+    moneyFixed(money) {
+      return Number(money).toLocaleString()
+    }
   },
   data() {
     return {
-      loading: true,
-      center: null,
-      rankList,
-      barData,
-      loginfo: {},
-      visitFields: ['ip', 'visit'],
-      visitInfo: [],
-      indicator: <a-icon type='loading' style='font-size: 24px' spin />
+      isCompany: false,
+      stepList: [
+        {
+          title: '发布需求',
+          content: '前往需求大厅发布需求',
+          icon: require('../../assets/icon/account/requirement.png')
+        },
+        {
+          title: '导入报名',
+          content: '在具体需求中导入接单人名单',
+          icon: require('../../assets/icon/account/import.png')
+        },
+        {
+          title: '电签确认',
+          content: '接单人登录开心灵工小程序确认订单',
+          icon: require('../../assets/icon/account/confirm.png')
+        },
+        {
+          title: '导入付款单',
+          content: '导入付款人名单进行结算',
+          icon: require('../../assets/icon/account/payment.png')
+        },
+        {
+          title: '账户充值',
+          content: '根据付款金额提示进行余额充值',
+          icon: require('../../assets/icon/account/charge-icon.png')
+        }
+      ],
+      dataList: [
+        {
+          image: require('../../assets/icon/account/requirementCount.png'),
+          title: 'requirementCount',
+          content: '总需求数'
+        },
+        {
+          image: require('@/assets/icon/account/userCount.png'),
+          title: 'userCount',
+          content: '总用户数'
+        },
+        {
+          image: require('@/assets/icon/account/orderCount.png'),
+          title: 'orderCount',
+          content: '总订单数'
+        },
+        {
+          image: require('@/assets/icon/account/paymentCount.png'),
+          title: 'paymentCount',
+          content: '总支付数'
+        }
+      ],
+      accountData: {
+        requirementCount: 0,
+        userCount: 0,
+        orderCount: 0,
+        paymentCount: 0
+      },
+      supplierData: {
+        noPaymentCount: 0,
+        onPaymentCount: 0,
+        alPaymentCount: 0,
+        serviceRate: '0%'
+      },
+      supplierDataList: [
+        {
+          title: 'noPaymentCount',
+          content: '待支付'
+        },
+        {
+          title: 'onPaymentCount',
+          content: '支付中'
+        },
+        {
+          title: 'alPaymentCount',
+          content: '已支付'
+        },
+        {
+          title: 'serviceRate',
+          content: '服务费率'
+        }
+      ],
+      form: this.$form.createForm(this),
+      description: '账户信息表管理页面',
+      // 表头
+      columns: [
+        {
+          title: '时间',
+          align: 'left',
+          dataIndex: 'updateTime',
+          customRender: (text) => {
+            return <span style='padding-left:20px'>{text}</span>
+          }
+        },
+        {
+          title: '收支方向',
+          align: 'left',
+          dataIndex: 'type_dictText',
+          scopedSlots: { customRender: 'type_dictText' }
+        },
+        {
+          title: '金额',
+          align: 'left',
+          dataIndex: 'amount',
+          scopedSlots: { customRender: 'amount' }
+        },
+        {
+          title: '服务费',
+          align: 'left',
+          dataIndex: 'serviceFee',
+          scopedSlots: { customRender: 'serviceFee' }
+        },
+        {
+          title: '备注',
+          align: 'left',
+          dataIndex: 'paymentCode',
+          customRender: (value, record) => {
+            return value ? value : '--'
+          }
+        }
+      ],
+      url: {
+        list: '/saasmanager/hwPlatformCompanyAccount/myAccount',
+        exportXlsUrl: '/saasmanager/hwPlatformCompanyAccountDetail/exportXlsManager',
+        detail: '/saasmanager/hwPlatformCompanyAccountDetail/managerList',
+        sendMessage: '/saasmanager/hwPlatformCompanyAccount/sendMessage',
+        getAllSubcontractorData: '/saasmanager/hwPlatformCompanyAccount/getAllSubcontractorData',
+        getSubcontractorBankInformation: '/saasmanager/hwPlatformCompanyAccount/getSubcontractorBankInformation'
+      },
+      dictOptions: {},
+      Subcontractor: [],
+      subcontractorBankInfo: {},
+      dataSource: [],
+      information: {},
+      accountId: '',
+      subcontractorId: '',
+      subcontractorName: '',
+      subcontractorKey: '0',
+      cpType: '',
+      companyId: '',
+      noPayment: 0,
+      noServiceFee: 0,
+      noTotalPayment: 0,
+      sendLoading: false,
+      subcontractorCopyInfo: ''
     }
   },
   created() {
-    setTimeout(() => {
-      this.loading = !this.loading
-    }, 1000)
-    this.initLogInfo()
+    this.initColumns();
   },
   methods: {
-    initLogInfo() {
-      getLoginfo(null).then((res) => {
+    initColumns(){
+      //获取页面权限
+      let authList = JSON.parse(sessionStorage.getItem(USER_AUTH) || "[]");
+      var bo = false;
+      for (var auth of authList) {
+        if(auth.action === 'account:manager') {
+          bo = true;
+          break;
+        }
+      }
+      console.log('bo',bo)
+      if (bo) {
+       this.isCompany = true;
+       this.getAllSubcontractorData();
+       this.loadDataOne();
+      } else {
+        this.isCompany = false;
+      }
+    },
+    loadDataOne() {
+      this.loading = true
+      getAction(this.url.list, {}).then((res) => {
         if (res.success) {
-          Object.keys(res.result).forEach(key => {
-            res.result[key] = res.result[key] + ''
-          })
-          this.loginfo = res.result
+          if (res.result && res.result.length >= 1) {
+            this.subcontractorId = res.result[0].subcontractorId
+            this.subcontractorName = res.result[0].subcontractorName
+            this.information = res.result[0]
+            this.subcontractorKey = 0
+            this.cpType = res.result[0].cpType
+            this.companyId = res.result[0].companyId
+          }
+          this.Subcontractor = res.result
+          if (this.Subcontractor.length) {
+            this.chooseSubcontractor(0)
+          }
         }
+        if (res.code === 510) {
+          this.$message.warning(res.message)
+        }
+        this.loading = false
       })
-      getVisitInfo().then(res => {
+    },
+    //获取企业所有服务商数据
+    getAllSubcontractorData() {
+      getAction(this.url.getAllSubcontractorData, {}).then((res) => {
         if (res.success) {
-          console.log('aaaaaa', res.result)
-          this.visitInfo = res.result
+          //企业需求总数
+          this.requirementCount = res.result.requirementCount
+          //企业订单总数
+          this.orderCount = res.result.orderCount
+          //企业用户总数
+          this.userCount = res.result.userCount
+          //企业已付款订单数
+          this.paymentCount = res.result.paymentCount
+          this.accountData = res.result
+        }
+        if (res.code === 510) {
+          this.$message.warning(res.message)
+        }
+        this.loading = false
+      })
+    },
+    handleRecharge() {
+      this.$refs.rechargeModal.edit(this.information)
+      this.$refs.rechargeModal.title = '我要充值'
+      this.$refs.rechargeModal.disableSubmit = false
+    },
+    //发送短信
+    handleSendMessage() {
+      var params = {}
+      params.subcontractorName = this.information.subcontractorName
+      params.balance = this.information.balance
+      //企业服务商银行信息接口获取
+      params.noPaymentCount = this.noPaymentCount
+      params.noTotalPayment = this.noTotalPayment
+      this.sendLoading = true
+      getAction(this.url.sendMessage, params).then((res) => {
+        if (res.success) {
+          this.$message.success(res.message)
+        } else {
+          this.$message.warning(res.message)
+        }
+        if (res.code === 510) {
+          this.$message.warning(res.message)
         }
+        this.sendLoading = false
+      })
+    },
+    chooseSubcontractor(index) {
+      this.information = this.Subcontractor[index]
+      this.subcontractorId = this.Subcontractor[index].subcontractorId
+      this.subcontractorName = this.Subcontractor[index].subcontractorName
+      this.subcontractorKey = index
+      this.cpType = this.Subcontractor[index].cpType
+      this.companyId = this.Subcontractor[index].companyId
+      this.getSubcontractorBankInformation(this.subcontractorId, this.cpType, this.companyId)
+    }
+    ,
+    getSubcontractorBankInformation(subcontractorId, cpType, companyId) {
+      getAction(this.url.getSubcontractorBankInformation, {
+        subcontractorId,
+        cpType,
+        companyId
+      }).then(data => {
+        console.log('result=>', data.result)
+        const { noPaymentCount, onPaymentCount, alPaymentCount, serviceRate } = data.result
+        this.supplierData = { noPaymentCount, onPaymentCount, alPaymentCount, serviceRate: serviceRate + '%' }
+        this.subcontractorBankInfo = data.result.bankList[0]
+        //待支付金额
+        this.noPayment = data.result.noPayment
+        //待支付服务费
+        this.noServiceFee = data.result.noServiceFee
+        //待支付金额合计
+        this.noTotalPayment = data.result.noTotalPayment
+        //待支付付款单数量
+        this.noPaymentCount = data.result.noPaymentCount
+        //支付中付款单数量
+        this.onPaymentCount = data.result.onPaymentCount
+        //已支付付款单数量
+        this.alPaymentCount = data.result.alPaymentCount
+        // 服务费率
+        this.serviceRate = data.result.serviceRate
+        this.subcontractorCopyInfo = `银行账户：${this.subcontractorName} 银行账号：${this.subcontractorBankInfo.bankAccount} 开户行：${this.subcontractorBankInfo.bankName}`
+      })
+    },
+    copy() {
+      console.log(this.subcontractorCopyInfo)
+      var clipboard = new Clipboard('.accept-info-copy-image')
+      clipboard.on('success', () => {
+        clipboard.destroy()
+        this.$message.success('复制成功')
+      })
+      clipboard.on('error', () => {
+        this.$message.error('该浏览器不支持自动复制')
+        clipboard.destroy()
       })
     },
     toAccount() {
@@ -309,36 +540,243 @@ export default {
     }
   }
 }
+.title {
+  font-size: 24px;
+  font-weight: 400;
+  margin-bottom: 15px
+}
 
+.content {
+  background: #FFFFFF;
+  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.15);
+  border-radius: 4px;
+  margin-bottom: 10px;
+}
 
-/* 首页访问量统计 */
-.head-info {
-  position: relative;
-  text-align: left;
-  padding: 0 32px 0 0;
-  min-width: 125px;
+.step-list {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  .step-list-item {
+    width: 20%;
+    min-height: 139px;
+    padding: 25px 0 25px 25px;
+
+    .step-list-item-top {
+      font-size: 20px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: rgba(0, 0, 0, 0.85);
+      display: flex;
+      align-items: center;
+      //justify-content: space-between;
+      margin-bottom: 8px;
+
+      img {
+        height: 32px;
+        width: 32px;
+      }
 
-  &.center {
-    text-align: center;
-    padding: 0 32px;
+      .title {
+        margin: 0 10px 0 20px;
+      }
+
+      .bar {
+        flex: 1;
+        height: 1px;
+        background: #000000;
+        opacity: 0.25;
+      }
+    }
+
+    .step-list-item-bottom {
+      font-size: 14px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: rgba(0, 0, 0, 0.65);
+      padding-left: 55px;
+      padding-right: 25px;
+    }
   }
+}
 
-  span {
-    color: rgba(0, 0, 0, .45);
-    display: inline-block;
-    font-size: .95rem;
-    line-height: 42px;
-    margin-bottom: 4px;
+.account-data-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  .account-data {
+    flex: 1;
+    margin-right: 10px;
+
+    &:last-child {
+      margin-right: 0;
+    }
   }
+}
 
-  p {
-    line-height: 42px;
-    margin: 0;
+.account-data {
+  width: 90%;
+  padding: 27px 0 27px 0;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
-    a {
-      font-weight: 600;
-      font-size: 1rem;
+  img {
+    width: 28px;
+    height: 28px;
+    margin-right: 20px;
+  }
+
+  .account-data-count {
+
+  }
+
+  .account-data-title {
+    font-size: 34px;
+    font-family: HelveticaNeue-Bold, HelveticaNeue;
+    font-weight: bold;
+    color: rgba(0, 0, 0, 0.85);
+  }
+
+  .account-data-description {
+    font-size: 14px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: rgba(0, 0, 0, 0.65);
+  }
+}
+
+.table-page-search-wrapper {
+  padding: 40px;
+}
+
+.account-manager-content {
+  //border: 1px solid #ccc;
+  box-sizing: border-box
+}
+
+.money {
+  font-size: 30px;
+  font-family: HelveticaNeue-Bold, HelveticaNeue;
+  font-weight: bold;
+  color: rgba(0, 0, 0, 0.85);
+}
+
+.yue {
+  font-size: 14px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.65);
+}
+
+.tips {
+  font-size: 12px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #DA5631;
+  margin-bottom: 15px;
+}
+
+.tips2 {
+  height: 40px;
+  background: #FFFBE6;
+  border-radius: 4px;
+  border: 1px solid #FFE58F;
+  line-height: 40px;
+  padding: 0 16px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+
+  img {
+    height: 14px;
+    width: 14px;
+    margin-right: 8px;
+  }
+}
+
+.accept-info {
+  font-size: 16px;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.85);
+
+  .accept-info-title {
+    display: flex;
+    align-items: center;
+
+    img {
+      height: 12px;
+      width: 12px;
+      cursor: pointer;
+      margin-left: 5px;
     }
   }
+
+  .accept-info-detail {
+    font-size: 14px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: rgba(0, 0, 0, 0.65);
+    margin-top: 15px;
+  }
+}
+
+.money-list {
+  text-align: right;
+  font-size: 14px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.65);
+  margin-top: 49px;
+
+  span {
+    font-size: 14px;
+    font-family: HelveticaNeue-Bold, HelveticaNeue;
+    font-weight: bold;
+    color: rgba(0, 0, 0, 0.85);
+  }
+}
+
+.total {
+  text-align: right;
+  font-size: 14px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #D4380D;
+  margin-top: 12px;
+
+  span {
+    font-size: 30px;
+    font-family: HelveticaNeue-Bold, HelveticaNeue;
+    font-weight: bold;
+    color: rgba(212, 56, 13, 0.85);
+  }
+}
+
+::v-deep .ant-table-thead th[key="updateTime"] {
+  padding-left: 30px !important;
+}
+
+.red {
+  color: #D9001b;
+}
+
+.green {
+  color: #70b603;
+}
+
+.account-info ::v-deep .ant-card-body {
+  padding: 0;
+}
+
+::v-deep .ant-table-pagination {
+  float: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 </style>