mall-web-ssr/pages/mobile/center/user/payCenter.vue

<template>
  <div class="mobile-pay-center mobile-fix-content mobile-centerfix-content" :style="switchType === 'account' ? 'padding-bottom: 1rem;' : ''" id="mobileFixContent" @click="setShowSelect('all', false)">
    <!--<div class="mp-head" v-if="!fromUserPage">-->
      <!--<span class="inline-block" :class="{'active': switchType === 'record'}" @click="setSwitchType('record')">交易记录</span>-->
      <!--<span class="inline-block" :class="{'active': switchType === 'account'}" @click="setSwitchType('account')">付款账户</span>-->
    <!--</div>-->
    <div class="mp-content" v-if="switchType == 'account'">
      <!--<p class="mp-content-header">已设置的账户信息<span class="fr" @click="openAddAccount"><i class="iconfont icon-xinzeng"></i>新增账户</span></p>-->
      <template v-if="accountList && accountList.length === 0">
        <div class="new-account">
          <div class="new-content-line">
            <span class="inline-block"><i>*</i>开户名称：</span>
            <input type="text" placeholder="请填写开户人姓名或企业名称" v-model="bankAccountObj.accountname" @blur="checkAccountname">
          </div>
          <div class="new-content-line">
            <span class="inline-block"><i>*</i>银行账号：</span>
            <input type="text" placeholder="请填写银行账号" v-model="bankAccountObj.number" @blur="checkNumber">
          </div>
          <div class="new-content-line">
            <span class="inline-block"><i>*</i>开户银行：</span>
            <input type="text" readonly placeholder="例如：中国银行" v-model="bankAccountObj.bankname" @click.stop="showSimilar = !showSimilar">
            <ul v-if="showSimilar" class="similar">
              <li class="text-ellipse" v-for="bank in bankList" @click.stop="setBankName(bank)">{{bank}}</li>
            </ul>
          </div>
          <div class="new-content-line">
            <span class="inline-block"><i>*</i>开户支行：</span>
            <input type="text" placeholder="例如：侨香支行" v-model="bankAccountObj.branchname" @blur="checkBranchname">
          </div>
          <div class="new-content-line clearfix">
            <p class="remind"><i>*</i>为保障您的资金安全，账户信息加密显示且不可修改，只能删除后重新提交。</p>
          </div>
          <div class="am-btn-wrap">
            <button @click="addAccount">确认</button>
          </div>
        </div>
      </template>
      <template v-else>
        <ul class="mp-list">
          <li v-for="account in accountList">
            <div class="content-line">
              <span class="inline-block title">开户名称：</span>
              <span class="inline-block content text-ellipse">{{account.accountname}}</span>
            </div>
            <div class="content-line">
              <span class="inline-block title">银行账户：</span>
              <span class="inline-block content text-ellipse">{{account.number}}</span>
            </div>
            <div class="content-line">
              <span class="inline-block title">开户银行：</span>
              <span class="inline-block content text-ellipse">{{account.bankname}}</span>
            </div>
            <div class="content-line">
              <span class="inline-block title">开户支行：</span>
              <span class="inline-block content text-ellipse">{{account.branchname}}</span>
            </div>
            <!-- <div class="content-line clearfix">
               <span class="inline-block title">操作：</span>
               <a class="fr inline-block default-icon" v-if="account.num == 1">默认账户</a>
               <a class="fr inline-block set-default-icon" v-if="account.num != 1" @click="setDefaultAccount(account)">设为默认</a>
               <a class="fr inline-block" @click="deleteAccount(account)">删除</a>
             </div>-->
            <div class="btn-wrap">
              <a class="inline-block default-icon" v-if="account.num == 1" @click="setRemindText('该账户是默认账户')"><i class="iconfont icon-gouxuan1"></i>默认账户</a>
              <a class="inline-block" v-if="account.num != 1" @click="setDefaultAccount(account)"><i class="iconfont icon-gouxuan1"></i>设为默认</a>
              <a class="inline-block" @click="deleteAccount(account)"><i class="iconfont icon-lajitong"></i>删除</a>
            </div>
          </li>
        </ul>
        <div class="com-btn-wrap mp-btn-wrap">
          <button @click.stop="openAddAccount"><i class="iconfont icon-add"></i>新增账户</button>
        </div>
      </template>
    </div>
    <div class="mp-record" v-if="switchType == 'record'">
      <div class="search-content">
        <input type="text" placeholder="卖家名称/订单号" v-model="filterParams.keyword" @keyup.13="filterRecord">
        <span @click="filterRecord"><i class="iconfont icon-sousuo"></i></span>
      </div>
      <!--<div class="filters-wrap">
        <div class="date-wrap">
          <label>
            <i class="iconfont icon-ico-date"></i>
            <input type="date" v-model="dateObj.fromDate" @change="setDate('fromDate')">
            <p v-if="filterParams.fromDate">{{filterParams.fromDate | date}}</p>
          </label>
          <span>—</span>
          <label>
            <i class="iconfont icon-ico-date"></i>
            <input type="date" v-model="dateObj.toDate" @change="setDate('toDate')">
            <p v-if="filterParams.toDate">{{filterParams.toDate | date}}</p>
          </label>
        </div>
        <ul class="select-wrap">
          <li class="inline-block">
            <div @click.stop="setShowSelect('method', !showSelectMethod)">{{filterParams.method ? filterParams.method == 1103 ? '线下支付' : '线上支付' : '交易方式'}}</div>
            <ul class="select-list" v-show="showSelectMethod">
              <li @click.stop="setSelect('method', null)">交易方式</li>
              <li @click.stop="setSelect('method', 1103)">线下支付</li>
              <li @click.stop="setSelect('method', 1102)">线上支付</li>
            </ul>
          </li>
          <li class="inline-block">
            <div @click.stop="setShowSelect('currencyName', !showSelectCurrency)">{{filterParams.currencyName || '币种'}}</div>
            <ul class="select-list" v-show="showSelectCurrency">
              <li @click.stop="setSelect('currencyName', null)">币种</li>
              <li @click.stop="setSelect('currencyName', 'RMB')">RMB</li>
              <li @click.stop="setSelect('currencyName', 'USD')">USD</li>
            </ul>
          </li>
          <li class="inline-block">
            <div @click.stop="setShowSelect('status', !showSelectStatus)">{{filterParams.status || '状态'}}</div>
            <ul class="select-list" v-show="showSelectStatus">
              <li @click.stop="setSelect('status', null)">状态</li>
              <li @click.stop="setSelect('status', '支付成功')">支付成功</li>
            </ul>
          </li>
        </ul>
      </div>-->
      <div class="filters-wrap">
        <base-filter
          v-for="filterOption in filterOptions"
          :key="filterOption.selectOption"
          :selectItems="filterOption.selectItems"
          :defaultVal="filterOption.defaultVal"
          :selectOption="filterOption.selectOption"
          @selectAction="onSelectAction"
          :title="filterOption.title"></base-filter>
      </div>
      <ul class="mp-list record-list mp-list-record">
        <li v-for="record in recordList">
          <div class="content-line">
            <span class="inline-block title">订单号：</span>
            <nuxt-link :to="`/mobile/order/details?uuid=${baseUtils.enidfilter(record.orderid)}&type=buyer`" class="inline-block content link">{{record.orderid}}</nuxt-link>
          </div>
          <div class="content-line">
            <span class="inline-block title">金额：</span>
            <span class="inline-block content">{{record.currencyName | currencyFilter}}{{record.ensurePrice}}</span>
          </div>
          <div class="content-line">
            <span class="inline-block title">卖家：</span>
            <span class="inline-block content">{{record.sellername}}</span>
          </div>
          <!--<div class="content-line">
            <span class="inline-block title">交易方式：</span>
            <span class="inline-block content text-ellipse">{{record.paytype == 1103 ? '线下支付' : '线上支付'}}</span>
          </div>-->
          <div class="content-line">
            <span class="inline-block title">交易方式：</span>
            <span class="inline-block content">{{record.remitteeType | payTypeFilter}}</span>
          </div>
          <div class="content-line">
            <span class="inline-block title">时间：</span>
            <span class="inline-block content">{{record.paytime | time}}</span>
          </div>
          <div class="content-line">
            <span class="inline-block title">状态：</span>
            <span class="inline-block content">支付成功</span>
          </div>
        </li>
      </ul>
    </div>
    <remind-box :title="remindText" :timeoutCount="timeoutCount"></remind-box>
    <pull-up :fixId="'mobileFixContent'" :searchMore="fetching" :allPage="allPage" :page="page" @pullUpAction="onPullUpAction"></pull-up>
    <!-- 新增账户弹框start -->
    <div class="mobile-modal account-modal" @click="showSimilar = false" v-if="showModal">
      <div class="account-modal-wrap add-account-modal">
        <div class="account-modal">
          <p class="title">新增账户</p>
          <div class="modal-content-line">
            <span class="inline-block"><i>*</i>开户名称：</span>
            <input type="text" placeholder="请填写开户人姓名或企业名称" v-model="bankAccountObj.accountname" @blur="checkAccountname">
          </div>
          <div class="modal-content-line">
            <span class="inline-block"><i>*</i>银行账号：</span>
            <input type="text" placeholder="请填写银行账号" v-model="bankAccountObj.number" @blur="checkNumber">
          </div>
          <div class="modal-content-line">
            <span class="inline-block"><i>*</i>开户银行：</span>
            <input type="text" readonly placeholder="例如：中国银行" v-model="bankAccountObj.bankname" @click.stop="showSimilar = !showSimilar">
            <ul v-if="showSimilar" class="similar">
              <li class="text-ellipse" v-for="bank in bankList" @click.stop="setBankName(bank)">{{bank}}</li>
            </ul>
          </div>
          <div class="modal-content-line">
            <span class="inline-block"><i>*</i>开户支行：</span>
            <input type="text" placeholder="例如：侨香支行" v-model="bankAccountObj.branchname" @blur="checkBranchname">
          </div>
          <div class="modal-content-line clearfix">
            <p class="remind"><i>*</i>为保障您的资金安全，账户信息加密显示且不可修改，只能删除后重新提交。</p>
          </div>
          <div class="am-btn-wrap">
            <button @click="showModal = false">取消</button>
            <button @click="addAccount">确认</button>
          </div>
        </div>
      </div>
    </div>
    <empty-status v-if="isEmpty" :text="'暂无支付记录，请下单购买商品吧！'" :showLink="true"></empty-status>
    <!-- 新增账户弹框end -->
  </div>
</template>
<script>
  import { RemindBox, PullUp, EmptyStatus } from '~components/mobile/common'
  import { ModalWrapper, BaseFilter } from '~components/mobile/base'
  export default {
    layout: 'mobile',
    middleware: 'authenticated',
    data () {
      return {
        fromUserPage: false,
        remindText: '',
        timeoutCount: '',
        page: 1,
        count: 10,
        accountList: [],
        recordList: [],
        switchType: 'record',
        // 分页重置标志
        isChange: false,
        showModal: false,
        bankList: [],
        showSimilar: false,
        bankAccountObj: {
          bankname: '',
          branchname: '',
          number: '',
          accountname: '',
          accountType: 'PAY_TYPE'
        },
        validBankAccountObj: {
          bankname: false,
          branchname: false,
          number: false,
          accountname: false
        },
        filterParams: {
          keyword: '',
          fromDate: '',
          toDate: '',
          currencyName: '',
          // 交易方式
          remitteeType: ''
        },
        showSelectMethod: false,
        showSelectCurrency: false,
        showSelectStatus: false,
        dateObj: {
          fromDate: '',
          toDate: ''
        },
        filterOptions: [
          {
            title: '交易方式',
            selectOption: 'remitteeType',
            selectItems: [{
              key: '平台代收',
              val: 'PAIDTOPLATFORM'
            }, {
              key: '卖家收款',
              val: 'PAIDTOVENDOR'
            }],
            defaultVal: 'PAIDTOPLATFORM'
          },
          {
            title: '交易币种',
            selectOption: 'currencyName',
            selectItems: [{
              key: 'RMB',
              val: 'RMB'
            }, {
              key: 'USD',
              val: 'USD'
            }],
            defaultVal: 'RMB'
          },
//          {
//            title: '交易状态',
//            selectOption: 'status',
//            selectItems: [{key: '全部',
//              val: null
//            }, {
//              key: '已付款',
//              val: 1
//            }, {
//              key: '待付款',
//              val: 2
//            }],
//            defaultVal: null
//          },
          {
            title: '交易时间',
            selectOption: 'date',
            selectItems: [{
              key: '30天',
              val: 1
            }, {
              key: '90天',
              val: 2
            }, {
              key: '180天',
              val: 3
            }, {
              key: '自定义',
              val: 4
            }],
            defaultVal: 1
          }
        ]
      }
    },
    components: {
      RemindBox,
      PullUp,
      ModalWrapper,
      EmptyStatus,
      BaseFilter
    },
    fetch ({store, route}) {
      return
    },
    filters: {
      payTypeFilter: function (type) {
        if (type === 'PAIDTOVENDOR') {
          return '卖家收款'
        } else if (type === 'PAIDTOPLATFORM') {
          return '平台代收'
        } else {
          return '其他'
        }
      }
    },
    asyncData({route}) {
      return {
        fromUserPage: route.query.type ? true : false,
        switchType: route.query.switchType || 'record'
      }
    },
    watch: {
      'buyerAccount': {
        handler: function (val) {
          if (val && val.content) {
            if (this.isChange) {
              this.accountList = []
              this.isChange = false
            }
            this.accountList = [...this.accountList, ...val.content]
          }
        }
      },
      'buyerRecord': {
        handler: function (val) {
          if (val && val.content) {
            if (this.isChange) {
              this.recordList = []
              this.isChange = false
            }
            this.recordList = [...this.recordList, ...val.content]
          }
        }
      }
    },
    created () {
      let currentTime = this.baseUtils.getClearDay(new Date())
      let fromDate = currentTime - 29 * 24 * 60 * 60 * 1000
      let toDate = currentTime + 23 * 60 * 60 * 1000 + 59 * 60 * 1000 + 59 * 1000
      if (this.$route.query.type) {
        this.$store.dispatch('payCenter/loadBuyerAccount', {count: 10, page: 1, sorting: {num: 'ASC'}, type: 'buyer'})
      } else {
        this.$store.dispatch('payCenter/loadBuyerRecord', {count: 10, page: 1, sorting: {'paytime': 'DESC'}, fromDate: fromDate, toDate: toDate, remitteeType: 'PAIDTOPLATFORM'})
      }
    },
    mounted () {
      this.$http.get('/data/bank.json').then(res => {
        this.bankList = res.data.list
      })
    },
    computed: {
      accountData () {
        return this.$store.state.payCenter.data.buyerAccount
      },
      recordData () {
        return this.$store.state.payCenter.data.buyerRecord
      },
      buyerAccount () {
        return this.accountData.data
      },
      buyerRecord () {
        return this.recordData.data
      },
      fetching () {
        return this.switchType === 'account' ? this.accountData.fetching : this.recordData.fetching
      },
      allPage () {
        return this.switchType === 'account' ? this.buyerAccount.totalPages : this.buyerRecord.totalPages
      },
      isEmpty () {
        return (this.switchType === 'record' && this.recordList.length === 0)
      }
    },
    methods: {
      setRemindText: function (str) {
        this.remindText = str
        this.timeoutCount++
      },
      reloadList () {
        if (this.switchType === 'account') {
          this.$store.dispatch('payCenter/loadBuyerAccount', {
            count: this.count,
            page: this.page,
            sorting: {num: 'ASC'},
            type: 'buyer'
          })
        } else {
          this.$store.dispatch('payCenter/loadBuyerRecord', {
            count: this.count,
            page: this.page,
            sorting: {'paytime': 'DESC'},
            currencyName: this.filterParams.currencyName || null,
            fromDate: this.filterParams.fromDate || null,
            toDate: this.filterParams.toDate || null,
            remitteeType: this.filterParams.remitteeType || null,
            keyword: this.filterParams.keyword || null
          })
        }
      },
      initList () {
        this.isChange = true
        this.page = 1
        this.reloadList()
      },
      onPullUpAction () {
        this.page++
        this.reloadList()
      },
      setSwitchType (type) {
        this.switchType = type
        if (type === 'record') {
          this.initFilterParams()
        }
        this.initList()
      },
      initFilterParams () {
        this.filterParams = {
          keyword: '',
          fromDate: '',
          toDate: '',
          currencyName: '',
          method: ''
        }
      },
      filterRecord () {
        this.page = 1
        this.isChange = true
        this.reloadList()
      },
      setShowSelect (type, flag) {
        if (type === 'all') {
          this.showSelectMethod = flag
          this.showSelectCurrency = flag
          this.showSelectStatus = flag
        } else if (type === 'method') {
          this.showSelectMethod = flag
          this.showSelectCurrency = false
          this.showSelectStatus = false
        } else if (type === 'currencyName') {
          this.showSelectCurrency = flag
          this.showSelectStatus = false
          this.showSelectMethod = false
        } else if (type === 'status') {
          this.showSelectStatus = flag
          this.showSelectMethod = false
          this.showSelectCurrency = false
        }
      },
      setSelect (type, val) {
//        if (type === 'method') {
//          this.filterParams.method = val
//          this.setShowSelect('method', false)
//        } else if (type === 'currencyName') {
//          this.filterParams.currencyName = val
//          this.setShowSelect('currencyName', false)
//        } else if (type === 'status') {
//          this.filterParams.status = val
//          this.setShowSelect('status', false)
//        }
        if (type === 'date') {
          if (val) {
            this.filterParams.fromDate = val.fromDate
            this.filterParams.toDate = val.toDate
          } else {
            this.filterParams.fromDate = null
            this.filterParams.toDate = null
          }
        } else {
          this.filterParams[type] = val
        }
        this.filterRecord()
      },
      onSelectAction (selectObj) {
        this.setSelect(selectObj.key, selectObj.value)
      },
      setDate (type) {
        if (this.dateObj[type]) {
          this.filterParams[type] = new Date(this.dateObj[type]).getTime() - 8 * 60 * 60 * 1000
          if (this.filterParams.fromDate && this.filterParams.toDate && this.filterParams.fromDate > this.filterParams.toDate) {
            if (type === 'fromDate') {
              this.setRemindText('起始时间不能大于结束时间')
            } else {
              this.setRemindText('结束时间不能小于起始时间')
            }
            this.filterParams[type] = null
            this.dateObj[type] = null
          } else {
            if (this.filterParams.fromDate && this.filterParams.toDate && this.filterParams.fromDate === this.filterParams.toDate) {
              // 23:59:59
              this.filterParams.toDate += 23 * 60 * 60 * 1000 + 59 * 60 * 1000 + 59 * 1000
            }
            this.filterRecord()
          }
        } else {
          this.filterParams[type] = null
          this.filterRecord()
        }
      },
      setDefaultAccount (account) {
        this.$http.get(`/trade/bankInfo/setDefaultAccount/${account.id}`).then(() => {
          this.setRemindText('设置完成')
          this.initList()
        })
      },
      deleteAccount (account) {
        this.$http.delete(`/trade/bankInfo/delete/${account.id}`).then(res => {
          if (res.data === 'success') {
            this.setRemindText('删除成功')
            this.initList()
          }
        })
      },
      initAccount () {
        this.bankAccountObj = {
          bankname: '',
          branchname: '',
          number: '',
          accountname: '',
          accountType: 'PAY_TYPE'
        }
        this.validBankAccountObj = {
          bankname: false,
          branchname: false,
          number: false,
          accountname: false
        }
      },
      openAddAccount () {
        if (!this.bankList || !this.bankList.length) {
          this.$http.get('/data/bank.json').then(res => {
            this.bankList = res.data.list
            this.initAccount()
            this.showModal = true
          })
        } else {
          this.initAccount()
          this.showModal = true
        }
      },
      setBankName (name) {
        this.bankAccountObj.bankname = name
        this.showSimilar = false
        this.validBankAccountObj.bankname = true
      },
      checkBranchname () {
        this.validBankAccountObj.branchname = true
        if (!(this.bankAccountObj.branchname && this.bankAccountObj.branchname.length)) {
          this.setRemindText('开户支行不能为空')
          this.validBankAccountObj.branchname = false
        } else if (this.baseUtils.getRealLen(this.bankAccountObj.branchname) > 40) {
          this.setRemindText('开户支行不能大于40字符')
          this.validBankAccountObj.branchname = false
        } else if (!/^[\u2E80-\u9FFF]+$/.test(this.bankAccountObj.branchname)) {
          this.setRemindText('请输入正确的开户支行')
          this.validBankAccountObj.branchname = false
        }
      },
      checkNumber () {
        this.validBankAccountObj.number = true
        if (!(this.bankAccountObj.number && this.bankAccountObj.number.length)) {
          this.validBankAccountObj.number = false
          this.setRemindText('银行账号不能为空')
        } else if (this.baseUtils.getRealLen(this.bankAccountObj.number) > 30) {
          this.setRemindText('银行账号不能大于30字符')
          this.validBankAccountObj.number = false
        } else if (!/^[0-9]+$/.test(this.bankAccountObj.number)) {
          this.setRemindText('请输入正确的银行账号')
          this.validBankAccountObj.number = false
        }
        if (this.validBankAccountObj.number) {
          this.$http.get('/trade/bankInfo/number/count', {params: {accountType: 'PAY_TYPE', number: this.bankAccountObj.number,type:1061}}).then(res => {
            if (res.data.success) {
              this.validBankAccountObj.number = res.data.data === 0
            } else {
              this.validBankAccountObj.number = false
              this.setRemindText(res.data.message || '银行账号校验失败')
            }
          }, err => {
            this.validBankAccountObj.number = false
            this.setRemindText(err.response.data || '银行账号校验失败')
            console.log(err)
          })
        }
      },
      checkAccountname () {
        this.validBankAccountObj.accountname = true
        if (!(this.bankAccountObj.accountname && this.bankAccountObj.accountname.length)) {
          this.validBankAccountObj.accountname = false
          this.setRemindText('账户名称不能为空')
        } else if (this.baseUtils.getRealLen(this.bankAccountObj.accountname) > 100) {
          this.setRemindText('账户名称不能大于100个字符')
          this.validBankAccountObj.accountname = false
        }
      },
      addAccount () {
        if (!this.validBankAccountObj.bankname) {
          this.setRemindText('请选择开户银行')
        } else if (!this.validBankAccountObj.branchname) {
          this.setRemindText('请填写正确的开户支行')
        } else if (!this.validBankAccountObj.number) {
          this.setRemindText('请填写正确的银行账号')
        } else if (!this.validBankAccountObj.accountname) {
          this.setRemindText('请填写正确的开户名称')
        } else {
          this.$http.post('/trade/bankInfo/save/personal?type=buyer', this.bankAccountObj).then(res => {
            if (res.data.id) {
              this.setRemindText('新增账户成功')
              this.initList()
              this.initAccount()
              this.showModal = false
            } else {
              this.setRemindText('新增账户失败')
            }
          }, err => {
            this.setRemindText(err.response.data || '新增账户失败')
            console.log(err)
          })
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  @import '~assets/scss/mobilePayCenter';
  .new-account {
    padding: .24rem;
    background: #fff;
    i {
      font-style: normal;
      color: #ff0000;
    }
    .new-content-line {
      margin-bottom: .3rem;
      position: relative;
      span {
        width: 2.5rem;
        color: #226ce7;
        font-size: .28rem;
        text-align: right;
      }
      input[type='text'] {
        width: 3.59rem;
        height: .56rem;
        font-size: .24rem;
        border-radius: .04rem;
        border: 1px solid #d2d2d2;
        padding: 0 .2rem;
      }
      input[readonly] {
        background: url('/images/mobile/select-arrow.png') no-repeat;
        background-size: .24rem .15rem;
        background-position: 3.1rem .2rem;
      }
      .similar {
        position: absolute;
        left: 2.5rem;
        border: 1px solid $base-color;
        border-radius: .04rem;
        top: .56rem;
        width: 3.59rem;
        background: #fff;
        z-index: 1;
        max-height: 3.96rem;
        overflow-y: auto;
        li {
          height: .66rem;
          line-height: .66rem;
          padding: 0 .19rem;
          font-size: .24rem;
          &:active, &:focus {
            background: #f7f7f7;
          }
        }
      }
    }
    .remind {
      color: #666;
      font-size: .24rem;
      width: 3.59rem;
      float: right;
      margin-right: .44rem;
      line-height: .37rem;
      i {
        margin-right: .05rem;
      }
    }
    .am-btn-wrap {
      margin-top: .74rem;
      button {
        width: 92%;
        height: .77rem;
        line-height: .77rem;
        color: #fff;
        font-size: .32rem;
        border-radius: .08rem;
        background: #bfbfbf;
        &:last-child {
          background: $base-color;
          margin-left: .3rem;
        }
      }
    }
  }
  .ra-remind {
    width: 6.3rem;
    height: 3.5rem;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -1.75rem;
    margin-left: -3.15rem;
    border-radius: .15rem;
    .header {
      height: .6rem;
      line-height: .6rem;
      background: #3976f4;
      border-top-left-radius: .15rem;
      border-top-right-radius: .15rem;
      i {
        font-size: .32rem;
        color: #fff;
        float: right;
        margin-right: .28rem;
      }
    }
    .content {
      background: #fff;
      padding: .53rem .77rem;
      span {
        font-size: .32rem;
      }
      i {
        font-size: .44rem;
        color: #3976f4;
        float: left;
        margin-right: .2rem;
      }
    }
    .footer {
      background: #fff;
      padding-bottom: .37rem;
      text-align: center;
      border-bottom-left-radius: .15rem;
      border-bottom-right-radius: .15rem;
      margin-top: -0.05rem;
      button {
        width: 2.22rem;
        height: .77rem;
        line-height: .77rem;
        color: #fff;
        font-size: .32rem;
        border-radius: .08rem;
        background: #bfbfbf;
        &:last-child {
          background: $base-color;
          margin-left: .3rem;
        }
      }
    }
  }
</style>