XIGUASSR
2022-11-11 cc0a3ae1b6e72ddfdcedfca3c4cfb9ed57b41b73
11.11最新
6 files modified
20 files added
2733 ■■■■■ changed files
src/assets/img/eslogo.png patch | view | raw | blame | history
src/assets/img/huazhuan.png patch | view | raw | blame | history
src/assets/img/huazhuan2.png patch | view | raw | blame | history
src/assets/img/jinggao.png patch | view | raw | blame | history
src/assets/img/liucheng.png patch | view | raw | blame | history
src/assets/img/out.png patch | view | raw | blame | history
src/assets/img/out2.png patch | view | raw | blame | history
src/assets/img/qianbao.png patch | view | raw | blame | history
src/assets/img/qiandai.png patch | view | raw | blame | history
src/assets/img/shiming.png patch | view | raw | blame | history
src/assets/img/tou2.png patch | view | raw | blame | history
src/assets/img/xiugaimima.png patch | view | raw | blame | history
src/components/foot.vue 8 ●●●● patch | view | raw | blame | history
src/main.js 4 ●●●● patch | view | raw | blame | history
src/page/authentication/index.vue 477 ●●●●● patch | view | raw | blame | history
src/page/bankCard/index.vue 179 ●●●●● patch | view | raw | blame | history
src/page/cashWithdrawalRecord/compontents/cash-list.vue 190 ●●●●● patch | view | raw | blame | history
src/page/cashWithdrawalRecord/index.vue 126 ●●●●● patch | view | raw | blame | history
src/page/login/components/header.vue 2 ●●● patch | view | raw | blame | history
src/page/newUser/index.vue 267 ●●●●● patch | view | raw | blame | history
src/page/transfer/index.vue 226 ●●●●● patch | view | raw | blame | history
src/page/transferRecord/compontents/recharge-list.vue 242 ●●●●● patch | view | raw | blame | history
src/page/transferRecord/index.vue 169 ●●●●● patch | view | raw | blame | history
src/page/user/transfer.vue 2 ●●●●● patch | view | raw | blame | history
src/page/wallet/index.vue 764 ●●●●● patch | view | raw | blame | history
src/router/index.js 77 ●●●●● patch | view | raw | blame | history
src/assets/img/eslogo.png
src/assets/img/huazhuan.png
src/assets/img/huazhuan2.png
src/assets/img/jinggao.png
src/assets/img/liucheng.png
src/assets/img/out.png
src/assets/img/out2.png
src/assets/img/qianbao.png
src/assets/img/qiandai.png
src/assets/img/shiming.png
src/assets/img/tou2.png
src/assets/img/xiugaimima.png
src/components/foot.vue
@@ -26,12 +26,12 @@
      </div>
      <div :class="$store.state.select == '/warehouse'?'blueFont':''">仓位</div>
    </div>
    <div :class="touch==4?'footDemos':'footDemo'" @click="goRouter('/user',4)">
    <div :class="touch==4?'footDemos':'footDemo'" @click="goRouter('/newUser',4)">
      <div class="footImgDeft">
        <img v-show="$store.state.select == '/user'" src="~@/assets/foot/mine_selected.png" />
        <img v-show="$store.state.select != '/user'" src="~@/assets/foot/tab_main_mine_default.png" />
        <img v-show="$store.state.select == '/newUser'" src="~@/assets/foot/mine_selected.png" />
        <img v-show="$store.state.select != '/newUser'" src="~@/assets/foot/tab_main_mine_default.png" />
      </div>
      <div :class="$store.state.select == '/user'?'blueFont':''">我的</div>
      <div :class="$store.state.select == '/newUser'?'blueFont':''">我的</div>
    </div>
  </div>
</template>
src/main.js
@@ -11,7 +11,7 @@
import state from './event'
import Vant from 'vant';
import 'vant/lib/index.css';
import { Swipe, SwipeItem, Skeleton, Switch } from 'vant';
import { Swipe, SwipeItem, Skeleton, Switch, Notify } from 'vant';
import './assets/css/style.css';
@@ -47,7 +47,7 @@
Vue.use(Vant);
Vue.use(Mint)
Vue.use(Tab);
Vue.use(Tabs, Popup, DatetimePicker, Switch);
Vue.use(Tabs, Popup, DatetimePicker, Switch, Notify);
Vue.component('icon', Icon)
Vue.config.productionTip = false
Object.keys(filters).forEach(key => {
src/page/authentication/index.vue
New file
@@ -0,0 +1,477 @@
<template>
  <div class="wrapper">
    <div class="header">
      <div class="left_back" @click="handleGoToBack()">
        <img src="../../assets/img/zuojiantou.png" alt="">
      </div>
      <div class="header_titles">
        <span>{{ '实名认证' }}</span>
      </div>
    </div>
    <div class="boxs"></div>
    <div class="box transaction">
      <div class="box-contain clearfix">
        <div class="empty text-center">
          <!-- 您已通过实名认证 -->
          <i v-if="this.$store.state.userInfo.isActive == 1" style="color:red;font-size: 1.5rem;"
             class="iconfont icon-shenhezhong"></i>
          <i v-if="!showBtn && this.$store.state.userInfo.isActive != 1" style="color:red;font-size: 1.5rem;"
             class="iconfont icon-tongguo1"></i>
          <i v-if="showBtn" style="color:red;font-size: 1.5rem;" class="iconfont icon-icon-test"></i>
        </div>
      </div>
    </div>
    <div class="form-block">
      <div class="auth-msg" v-if="this.$store.state.userInfo.isActive == 3">
        <p>认证失败,请重新认证</p>
        <div>
          失败原因:{{this.$store.state.userInfo.authMsg}}
        </div>
      </div>
      <!-- <mt-field label="手机号" placeholder="请输入您的手机号" v-model="form.phone"></mt-field> -->
      <mt-field label="真实姓名" placeholder="请输入您的真实姓名" type="text" v-model="form.name"></mt-field>
      <mt-field label="身份证号" placeholder="请输入您的身份证号" type="text" v-model="form.idCard"></mt-field>
    </div>
    <div class="upload-box clearfix">
      <!-- <form action=""> -->
      <div class="upload-btn">
        <el-upload
          :with-credentials='true'
          class="avatar-uploader"
          :action="admin+'/user/upload.do'"
          list-type="picture-card"
          name="upload_file"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :on-error='handleError'
          :before-upload="beforeAvatarUpload">
          <img v-if="form.img1key" :src="form.img1key" class="id-img avatar">
          <i v-else class="iconfont icon-zhaopian"></i>
          <span v-if="!form.img1key && !imgStatus" class="btn-title">身份证正面</span>
          <span v-if="imgStatus" class="btn-title">正在上传中...</span>
        </el-upload>
        <!-- <i class="iconfont icon-tupian"></i> -->
        <!-- <span class="btn-title">身份证正面</span> -->
        <!-- <input class="btn-hidden" type="file" accept="image/jpeg, image/png, image/jpg" @change="handleFile"/> -->
        <!-- <img class="id-img" :src="this.form.img2Key" alt=""> -->
      </div>
      <div class="upload-btn">
        <el-upload
          :with-credentials='true'
          class="avatar-uploader"
          :action="admin+'/user/upload.do'"
          list-type="picture-card"
          name="upload_file"
          :show-file-list="false"
          :on-success="handleAvatarSuccess2"
          :on-error='handleError2'
          :before-upload="beforeAvatarUpload2">
          <img v-if="form.img2key" :src="form.img2key" class="id-img avatar">
          <i v-else class="iconfont icon-zhaopian"></i>
          <span v-if="!form.img2key && !imgStatus2" class="btn-title">身份证背面</span>
          <span v-if="imgStatus2" class="btn-title">正在上传中...</span>
        </el-upload>
        <!--
            :auto-upload="false"
            身份证背面 -->
      </div>
      <!-- <div class="upload-btn">
          <el-upload
              :with-credentials='true'
              class="avatar-uploader"
              :action="admin+'/user/upload.do'"
              list-type="picture-card"
              name="upload_file"
              :show-file-list="false"
              :on-success="handleAvatarSuccess3"
              :before-upload="beforeAvatarUpload3">
              <img v-if="form.img3key" :src="form.img3key" class="id-img avatar">
              <i v-else class="iconfont icon-zhaopian"></i>
              <span v-if="!form.img3key"  class="btn-title">手持身份证</span>
          </el-upload>
      </div> -->
    </div>
    <div class="rule-box">
      <div class="title">认证规则:</div>
      <ul>
        <li>1、新用户注册后必须通过实名认证审核。</li>
        <li>2、姓名和身份证号码一经认证不予修改,修改请联系客服。</li>
        <li>3、真实姓名必须和出金银行卡户名一致。</li>
      </ul>
    </div>
    <div v-if="showBtn" class="btnbox">
      <span class="" @click="toSure">确定</span>
    </div>
  </div>
</template>
<script>
import * as api from '@/axios/api'
import { Toast } from 'mint-ui'
import { isNull, idCardReg, isName } from '@/utils/utils'
import { compress } from '@/utils/imgupload'
export default {
  components: {},
  props: {},
  data () {
    return {
      form: {
        phone: '',
        name: '',
        idCard: '',
        img1key: '',
        img2key: '',
        img3key: ''
      },
      img1Key: '',
      img2Key: '',
      img3Key: '',
      showBtn: true,
      admin: '',
      imgStatus: false,
      imgStatus2: false
    }
  },
  watch: {},
  computed: {},
  created () {
    if (this.$store.state.userInfo.isActive === 1 || this.$store.state.userInfo.isActive === 2) {
      this.form.idCard = this.$store.state.userInfo.idCard
      this.form.name = this.$store.state.userInfo.realName
      this.form.img1key = this.$store.state.userInfo.img1Key
      this.form.img2key = this.$store.state.userInfo.img2Key
      //   this.form.img3key = this.$store.state.userInfo.img3Key
      this.showBtn = false
    }
  },
  beforeDestroy () {
    if (this.$state.theme =='red') {
      document.body.classList.remove('red-bg')
        document.body.classList.add('black-bg')
    }
  },
  mounted () {
    if (this.$state.theme =='red') {
        document.body.classList.remove('black-bg')
        document.body.classList.add('red-bg')
    }
    this.admin = process.env.API_HOST
    if (this.admin === undefined) {
      this.admin = ''
    }
  },
  methods: {
    handleAvatarSuccess (res, file) {
      this.imgStatus = false
      this.form.img1key = res.data.url
    },
    handleGoToBack() {
      this.$router.go(-1);
    },
    beforeAvatarUpload (file) {
      this.imgStatus = true
      //     const isJPG = file.type === 'image/jpg' || file.type === 'image/jpeg' || file.type === 'image/png';
      //     const isLt2M = file.size / 1024 / 1024 < 20;
      //     if (!isJPG) {
      //         Toast('请选择jpg或者png的图片格式!');
      //     }
      // // if (!isLt2M) {
      // //     Toast('上传头像图片大小不能超过 2MB!');
      // // }
      //     return isJPG && isLt2M;
    },
    handleError () {
      this.imgStatus = false
    },
    handleAvatarSuccess2 (res, file) {
      this.imgStatus2 = false
      this.form.img2key = res.data.url // URL.createObjectURL(file.raw);
    },
    // 自动义图片上传 uploadFileFun2
    // async uploadFileFun2 (params) {
    //   console.log('uploadFile', params)
    //   const _that = this
    //   const isLt10M = file.size / 1024 / 1024 < 10
    //   if (!isLt10M) {
    //     this.$message.error('上传图片大小不能超过 10M!')
    //     return false
    //   } else {
    //     this.form.img2key = URL.createObjectURL(file.raw)
    //     compress(file.raw, function (val) {
    //       _that.form.img2key = val
    //     })
    //   }
    //   // 通过 FormData 对象上传文件
    //   const _file = params.file
    //   var formData = new FormData()
    //   formData.append('upload_file', _file)
    //   let data = await api.uploadimg(formData)
    //   if (data.status === 0) {
    //     this.form.img2key = data.data
    //   } else {
    //     Toast(data.msg)
    //   }
    // },
    beforeAvatarUpload2 (file) {
      this.imgStatus2 = true
      // const _that = this
      const isLt10M = file.size / 1024 / 1024 < 10
      if (!isLt10M) {
        this.$message.error('上传图片大小不能超过 10M!')
        return false
      } else {
        this.form.img2key = URL.createObjectURL(file)
        compress(file, function (val) {
          // _that.theForm.picUrl = val
          // _that.imgFile = val
          // _that.showDelete = true
          // _that.$refs['addBuildingForm'].validateField('picUrl')
        })
      }
      // const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
      // const isLt2M = file.size / 1024 / 1024 < 20;
      // return isJPG && isLt2M;
    },
    handleError2 () {
      this.imgStatus2 = false
    },
    handleAvatarSuccess3 (res, file) {
      this.form.img3key = res.data.url // URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload3 (file) {
      // const isJPG = file.type === 'image/jpeg' || file.type === 'image/jpeg' || file.type === 'image/png';
      // const isLt2M = file.size / 1024 / 1024 < 20;
      // if (!isJPG) {
      //     Toast('请选择jpg或者png的图片格式!');
      // }
      // return isJPG && isLt2M;
    },
    // 上传
    handleFile: function (e) {
      // var that = this
      let $target = e.target || e.srcElement
      let file = $target.files[0]
      // if(file.size > 1024 * 1024 *20){
      console.log(file, 'file')
      let i = false
      if (i) {
        Toast('您上传的照片过大,请选择20M以下的图片')
      } else {
        // Indicator.open('Loading...')
        this.img1Key = file
        // this.$refs.formDate.submit()
        // this.uploadIdImg({upload_file:file})
        var reader = new FileReader()
        reader.onload = (data) => {
          let res = data.target || data.srcElement
          this.form.img1Key = res.result
          // Indicator.close()
        }
        // reader.onloadend = () => {
        //   Indicator.close()
        // }
        reader.readAsDataURL(file)
      }
    },
    // async uploadIdImg(){
    //      let imgformData = new FormData()
    //         imgformData.append('upload_file', this.img1Key)
    //     let data = await api.uploadFile({upload_file:this.img1Key})
    //     if(data.status == 0){
    //         Toast('认证成功!')
    //     }else{
    //         Toast(data.msg)
    //     }
    // },
    toSure () {
      // 实名认证弹框
      if (isNull(this.form.name) || !isName(this.form.name)) {
        Toast('请输入您的真实姓���')
      } else if (isNull(this.form.idCard) || !idCardReg(this.form.idCard)) {
        Toast('请输入您的正确的身份证号码')
      } else if (isNull(this.form.img1key) || isNull(this.form.img2key)) {
        Toast('请上传您的身份证照片')
      } else {
        // 显示确认弹窗
        this.toAuthentication()
      }
    },
    async toAuthentication () {
      let opts = {
        realName: this.form.name,
        idCard: this.form.idCard,
        img1key: this.form.img1key,
        img2key: this.form.img2key,
        img3key: this.form.img3key
      }
      let data = await api.userAuth(opts)
      if (data.status === 0) {
        Toast('提交成功!')
        this.goBack()
      } else {
        Toast(data.msg)
      }
    },
    goBack () {
      this.$router.back(-1)
    }
  }
}
</script>
<style lang="less" scoped>
  .transaction {
    color: rgba(100, 100, 100, 0.78);
    .empty {
      width: 100%;
      // height: 1.34rem;
      font-size: 0.43rem;
      color: #888888;
      text-align: center;
      line-height: 2rem;
      // background: url('../../assets/img/thingsOk.png') no-repeat center center;
      background-size: 70%;
    }
  }
  .rule-box {
    padding: 0.2rem 0.3rem;
    .title {
      font-size: 0.3rem;
      height: 0.5rem;
      line-height: 0.5rem;
      margin-bottom: 0.2rem;
    }
    ul {
      li {
        color: #999;
        line-height: 0.5rem;
      }
    }
  }
  .upload-box {
    padding: 0.5rem;
    .upload-btn {
      // border: 1px solid #ddd;
      border-radius: 4px;
      width: 40%;
      height: 1.6rem;
      margin-bottom: 10px;
      float: left;
      margin: 0.2rem 5%;
      text-align: center;
      position: relative;
      .btn-hidden {
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 3;
        opacity: 0;
      }
      .id-img {
        max-width: 100%;
        max-height: 100%;
      }
      /deep/ .el-upload--picture-card {
        background: none;
        width: 100%;
        height: 1.6rem;
        line-height: 1.6rem;
      }
      .btn-title {
        position: absolute;
        top: 23px;
        left: 0;
        width: 100%;
      }
      /deep/ .el-upload__input {
        display: none;
      }
    }
  }
  .auth-msg {
    padding: 0.2rem 0.6rem;
    line-height: 0.4rem;
    p {
      color: red;
    }
    div {
      color: #ddd;
    }
  }
  .header {
    width: 100%;
    height: 1.5rem;
    background: #fff;
    position: fixed;
    z-index: 999;
    border-radius: 0 0 .15rem .15rem;
    .left_back {
      width: 1rem;
      height: 100%;
      left: 0;
      position: absolute;
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        width: .6rem;
        height: .6rem;
      }
    }
    .header_titles {
      width: 100%;
      height: 100%;
      text-align: center;
      font-size: .4615rem;
      line-height: 1.5rem;
      span {
        font-weight: 600;
      }
    }
  }
  .boxs {
    width: 100%;
    height: 1.7rem;
  }
  .btnbox {
    width: 100%;
    height: 1rem;
    padding: 0 .3rem;
    font-size: .4615rem;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    span {
      display: inline-block;
      width: 100%;
      height: 1rem;
      line-height: 1rem;
      background: #2d6ae9;
      text-align: center;
      font-weight: 600;
      border-radius: .12rem;
    }
  }
</style>
src/page/bankCard/index.vue
New file
@@ -0,0 +1,179 @@
<template>
  <div class="bank_card_page">
    <div class="content">
      <div class="top_back">
        <div class="left_back_icon" @click="$router.go(-1)">
          <img src="../../assets/img/zuojiantou.png" alt />
        </div>
      </div>
      <div class="titles">
        <span>{{ addBank ? '绑定银行卡' : '银行卡信息' }}</span>
      </div>
      <div class="bank_name">
        <div class="lefts">
          <span>{{ '银行名称:' }}</span>
        </div>
        <div class="rights">
          <input type="text" v-model="bankName" :disabled="!addBank" />
        </div>
      </div>
      <div class="bank_name">
        <div class="lefts">
          <span>{{ '开户支行:' }}</span>
        </div>
        <div class="rights">
          <input type="text" v-model="bankAddress" :disabled="!addBank" />
        </div>
      </div>
      <div class="bank_name">
        <div class="lefts">
          <span>{{ '银行卡号:' }}</span>
        </div>
        <div class="rights">
          <input type="text" v-model="bankNo" :disabled="!addBank" />
        </div>
      </div>
      <div class="bank_name bind" @click="toSure" v-if="addBank">
        <span>{{ '确认绑定' }}</span>
      </div>
      <div class="bank_hck"></div>
      <div class="bank_code"></div>
    </div>
  </div>
</template>
<script>
import * as api from "@/axios/api";
import { Toast } from "mint-ui";
import { isNull, bankNoReg, isName } from '@/utils/utils'
export default {
  name: "bankCard",
  data() {
    return {
      bankName: "", //银行名称,
      bankAddress: "", //需要精确到分行或者支行,
      bankNo: "", // 印象卡号
      addBank: false
    };
  },
  created() {
    this.getCardDetail();
  },
  methods: {
    async toSure() {
      // 添加银行卡
      if (isNull(this.bankNo) || !bankNoReg(this.bankNo)) {
        Toast("请输入银行卡号");
      } else if (isNull(this.bankName) || !isName(this.bankName)) {
        Toast("请输入银行名称");
      } else if (isNull(this.bankAddress) || !isName(this.bankAddress)) {
        Toast("请输入开户支行");
      } else {
        let opts = {
          bankName: this.bankName,
          bankNo: this.bankNo,
          bankAddress: this.bankAddress
        };
        let data = await api.addBankCard(opts);
          if (data.status === 0) {
            Toast("添加成功!");
            this.$router.push("/newUser");
          } else {
            Toast(data.msg);
          }
      }
    },
    async getCardDetail () {
      // 获取银行卡信息
      let data = await api.getBankCard()
      if (data.status === 0) {
        const {bankAddress, bankName, bankNo} = data.data;
        this.bankAddress = bankAddress;
        this.bankName = bankName;
        this.bankNo = bankNo;
        this.addBank = false;
      } else {
        this.addBank = true;
      }
    },
  }
};
</script>
<style scoped lang="less">
.bank_card_page {
  width: 100%;
  height: 100%;
  background: #fff;
  .content {
    width: 100%;
    height: 100%;
    padding: 0 0.6rem;
    .top_back {
      width: 100%;
      height: 2rem;
      > div {
        width: 10%;
        height: 100%;
        display: flex;
        align-items: center;
      }
      img {
        width: 0.6rem;
        height: 0.6rem;
      }
    }
    .titles {
      width: 100%;
      height: 1.5rem;
      font-size: 0.641rem;
      margin-top: 1rem;
      span {
        font-weight: 600;
      }
    }
  }
  .bank_name {
    width: 100%;
    height: 1.5rem;
    display: flex;
    padding: 0 0.2rem;
    background: rgb(247, 247, 247);
    border-radius: 0.2rem;
    margin-top: 0.3rem;
    .lefts {
      width: 25%;
      height: 100%;
      display: flex;
      align-items: center;
      font-size: 0.3846rem;
      span {
        font-weight: 600;
      }
    }
    .rights {
      width: 75%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      input {
        width: 100%;
        height: 100%;
      }
    }
  }
}
.bank_name.bind {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #2d6ae9;
  font-size: 0.4103rem;
  color: #fff;
  span {
    font-weight: 600;
  }
}
</style>
src/page/cashWithdrawalRecord/compontents/cash-list.vue
New file
@@ -0,0 +1,190 @@
<template>
  <div class="wrapper">
    <div v-if="list.length<=0" class="empty text-center">
      暂无提现信息!
    </div>
    <div v-else>
      <ul
        class="table-list"
        v-infinite-scroll="loadMore"
        infinite-scroll-disabled="loading"
        infinite-scroll-distance="10">
        <li class="list-body" v-for="(item) in list" :key="item.key">
          <div class="order-info-box" style="border-radius: .15rem">
            <div class="order-title">
                    <span class="main">
                        提现至银行卡
                    </span>
              <span class="payNumber">¥{{item.withAmt}}</span>
              <span class="red pull-right">
                        {{item.withStatus == 1?'提现成功':item.withStatus == 2?'提现失败':item.withStatus == 3?'订单取消':'审核中'}}
                        <i v-if="item.withStatus == 1" class="iconfont icon-tongguo4 animated bounceIn"></i>
                        <i v-if="item.withStatus==0" class="iconfont icon-dengdai animated bounceInDown"></i>
                        <i v-if="item.withStatus == 2" class="iconfont icon-failure animated bounceInDown"></i>
                        <i v-if="item.withStatus == 3"
                           class="iconfont icon-iconfontweitongguo animated bounceInDown"></i>
                    </span>
              <!-- <span class="secondary ">123456789</span> -->
            </div>
            <div class="order-info">
              <p class="clearfix">
                <span class="col-xs-6">手续费:<b class="space">¥{{item.withFee}}</b></span>
                <!-- <span class="col-xs-6">实际到账金额:<b class="space" style="font-size:0.26rem">{{item.withAmt - item.withFee}}</b>元</span>                         -->
              </p>
              <p class="clearfix">
                <span class="col-xs-12">银行卡:<b class="space">{{item.bankName}}-{{item.bankAddress}}</b></span>
              </p>
              <p class="clearfix">
                <span class="col-xs-12">卡号:<b class="space">{{item.bankNo}}</b></span>
              </p>
              <p v-if="item.withStatus == 3" class="clearfix">
                <span class="col-xs-12">取消原因:<b class="space">{{item.withMsg}}</b></span>
              </p>
              <p v-if="item.withStatus == 2" class="clearfix">
                <span class="col-xs-12">失败原因:<b class="space">{{item.withMsg}}</b></span>
              </p>
              <p class="clearfix">
                        <span class="secondary col-xs-6">时间:
                            <b v-if="item.applyTime">{{new Date(item.applyTime) | timeFormat}}</b>
                            <b v-else></b>
                        </span>
              </p>
            </div>
            <div v-if="item.withStatus == 0" class="order-foot clearfix">
              <div @click="cancle(item.id)" class="foot-btn">
                <i class='font-icon'></i>
                取消提现
              </div>
            </div>
          </div>
          <!-- <div class="capital">
              <div class="pro">
                  股票:300092/开山股份 <span class="pull-right">金额:50.241</span>
              </div>
              <div class=" clearfix">
                  <div class="col-xs-8">01-21 13:22</div>
                  <div class="col-xs-4 ">
                      <span class="pull-right">交易状态</span>
                  </div>
              </div>
          </div> -->
        </li>
      </ul>
      <div v-show="loading" class="load-all text-center">
        <mt-spinner type="fading-circle"></mt-spinner>
        加载中...
      </div>
      <div v-show="!loading" class="load-all text-center">
        已全部加载
      </div>
    </div>
  </div>
</template>
<script>
import { Toast } from 'mint-ui'
import * as api from '@/axios/api'
export default {
  components: {},
  props: {},
  data () {
    return {
      loading: false,
      list: [],
      pageNum: 1,
      pageSize: 15
    }
  },
  watch: {},
  computed: {},
  created () {},
  mounted () {
    this.getListDetail()
  },
  methods: {
    async getListDetail () {
      let opt = {
        withStatus: '', // 提现状态 0已提交,1转账成功,2转账失败
        pageNum: this.pageNum,
        pageSize: 15
      }
      let data = await api.withdrawList(opt)
      if (data.status === 0) {
        data.data.list.forEach(element => {
          this.list.push(element)
        })
      } else {
        Toast(data.msg)
      }
    },
    async loadMore () {
      if (this.list.length < 10) {
        return
      }
      this.loading = true
      // 加载下一页
      this.pageNum++
      await this.getListDetail()
      this.loading = false
    },
    async cancle (val) {
      // 取消提现
      // MessageBox.confirm('您确定要平仓吗?').then(async action => {
      let opt = {
        withId: val
      }
      let data = await api.canceloutMoney(opt)
      if (data.status === 0) {
        this.list = []
        Toast(data.msg)
        this.getListDetail()
      } else {
        Toast(data.msg)
      }
      // });
    }
  }
}
</script>
<style lang="less" scoped>
  .wrapper {
    // padding-top: 0.9rem;
  }
  .payNumber {
    font-size: 0.3rem;
    color: #ff8000;
  }
  .table-list {
    padding: 0.2rem 0;
    .list-body {
      padding: 0.1rem 0.2rem;
      .capital:nth-child(1) {
        border-top: 0.01rem solid #3f444a;
      }
      .capital {
        padding: 0.2rem;
        // border-radius: 0.2rem;
        border-bottom: 0.01rem solid #3f444a;
        div {
          line-height: 0.4rem;
        }
        .col-xs-4 {
          padding-left: 0;
          padding-right: 0;
        }
        .pro {
          color: #999;
        }
      }
    }
  }
</style>
src/page/cashWithdrawalRecord/index.vue
New file
@@ -0,0 +1,126 @@
<template>
  <div class="wrapper">
    <!-- <div class="header">
      <mt-header title="提现记录">
        <router-link to="/user" slot="left">
          <mt-button icon="back">我的</mt-button>
        </router-link>
      </mt-header>
    </div> -->
    <div class="text-center">
      <div class="btn-group">
        <a href="#/cash" class="with-draw-btn">提现</a>
        <a href="javascript:;" class="with-draw-detai-btn on">记录</a>
      </div>
    </div>
    <div>
      <div class="box page-part transaction">
        <div class="box-contain clearfix">
          <cashList></cashList>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import cashList from './compontents/cash-list'
export default {
  components: {
    cashList
  },
  props: {},
  data () {
    return {
      number: ''
    }
  },
  watch: {},
  computed: {},
  created () {},
  mounted () {
    if (this.$state.theme =='red') {
        document.body.classList.remove('black-bg')
        document.body.classList.add('red-bg')
    }
  },
  beforeDestroy () {
    if (this.$state.theme =='red') {
      document.body.classList.remove('red-bg')
      document.body.classList.add('black-bg')
    }
  },
  methods: {
    toSure () {
      // 确定
    }
  }
}
</script>
<style lang="less" scoped>
  .text-center {
    width: 100%;
    height: 1.7rem;
    display: flex;
    align-items: center;
  }
  .mint-header {
    // background: #f4f4f4;
    margin-bottom: 0.2rem;
  }
  .btn-group {
    // background: #f4f4f4;
    text-align: center;
    margin: 0 auto;
    a {
      display: inline-block;
      text-align: center;
      font-size: 0.29rem;
      height: 0.7rem;
      line-height: 0.6rem;
      width: 1.44rem;
      margin: 0;
      margin-top: 0;
      padding: 0;
    }
    .with-draw-btn {
      position: relative;
      right: -10px;
      width: 1.51rem;
      border-top-left-radius: 0.695rem;
      border-bottom-left-radius: 0.695rem;
    }
    .with-draw-detai-btn {
      border-top-right-radius: 0.695rem;
      border-bottom-right-radius: 0.695rem;
    }
    .on {
      color: #fff;
    }
  }
  .transaction {
    margin-top: 0.2rem;
    color: rgba(100, 100, 100, 0.78);
    .transaction-title {
      padding: 0.15rem 0.3rem;
    }
    .empty {
      height: 2.8rem;
      line-height: 2.8rem;
    }
  }
  .wrapper {
    width: 100%;
    height: 100%;
    background: #fff;
  }
</style>
src/page/login/components/header.vue
@@ -12,6 +12,7 @@
<script>
import Service from "@/assets/home/icon_talk.png";
import * as api from "@/axios/api";
export default {
    name: 'headers',
    props: ['mess'],
@@ -27,7 +28,6 @@
            window.location.href = this.onlineService;
        },
        async getInfoSite() {
            let data = await api.getInfoSite()
            if (data.status === 0) {
                this.onlineService = data.data.onlineService
src/page/newUser/index.vue
@@ -3,8 +3,8 @@
    <div class="content">
      <div class="top_icon">
        <div class="right_icon">
          <div>
            <img src="../../assets/img/dun.png" alt />
          <div @click="goToTopUp()">
            <img src="../../assets/img/qiandai.png" alt />
          </div>
          <div>
            <img src="../../assets/img/kefu.png" alt />
@@ -14,10 +14,12 @@
      <div class="users">
        <div class="left_tou">
          <div class="left_tx">
            <div></div>
            <div>
              <img src="../../assets/img/eslogo.png" alt />
            </div>
          </div>
          <div class="right_name">
            <span>{{ name }}</span>
            <span>{{ userInfo.realName ? userInfo.realName : userInfo.phone }}</span>
          </div>
        </div>
        <div class="right_go">
@@ -60,7 +62,7 @@
        </div>
        <div class="yk as">
          <div>
            <span v-if="selectUserFlag">
            <span v-if="!selectUserFlag">
              <span
                :class="$store.state.userInfo.allIndexProfitAndLose > 0 ? ' red' : $store.state.userInfo.allIndexProfitAndLose < 0 ? ' green' : ''"
              >{{ '¥ ' + $store.state.userInfo.allIndexProfitAndLose }}</span>
@@ -72,16 +74,11 @@
            </span>
          </div>
          <div>
            <span class="bzz" v-if="selectUserFlag">
              {{ '¥ ' + $store.state.userInfo.userIndexAmt }}
            </span>
            <span class="bzz" v-else>
              {{ '¥ ' + $store.state.userInfo.userAmt }}
            </span>
            <span class="bzz" v-if="!selectUserFlag">{{ '¥ ' + $store.state.userInfo.userIndexAmt }}</span>
          </div>
        </div>
        <div class="btns" @click="handleZh()" :class="selectUserFlag ? '' : 'active'">
          <span>{{ selectUserFlag ? '切换沪深账户' : '切换指数账户' }}</span>
          <span>{{ selectUserFlag ? '切换指数账户' : '切换沪深账户' }}</span>
        </div>
      </div>
      <div class="jy">
@@ -97,32 +94,212 @@
          <img src="../../assets/img/youjiantou.png" alt />
        </div>
      </div>
      <div class="jy" @click="goToSettings()">
        <div class="left_gn">
          <div class="l_icon">
            <img src="../../assets/img/xiugaimima.png" alt />
          </div>
          <div class="r_title">
            <span>{{ '修改密码' }}</span>
          </div>
        </div>
        <div class="right_gos">
          <img src="../../assets/img/youjiantou.png" alt />
        </div>
      </div>
      <div class="jy" @click="handleGoToTransfer()">
        <div class="left_gn">
          <div class="l_icon">
            <img src="../../assets/img/huazhuan2.png" alt />
          </div>
          <div class="r_title">
            <span>{{ '资金划转' }}</span>
          </div>
        </div>
        <div class="right_gos">
          <img src="../../assets/img/youjiantou.png" alt />
        </div>
      </div>
      <div class="jy" @click="handleGoToAuthentication()">
        <div class="left_gn">
          <div class="l_icon">
            <img src="../../assets/img/shiming.png" alt />
          </div>
          <div class="r_title">
            <span>{{ '实名认证' }}</span>
          </div>
        </div>
        <div class="right_gos">
          <img src="../../assets/img/youjiantou.png" alt />
        </div>
      </div>
      <div class="jy" @click="handleGoToBankCard()">
        <div class="left_gn">
          <div class="l_icon">
            <img src="../../assets/img/shiming.png" alt />
          </div>
          <div class="r_title">
            <span>{{ '绑定银行卡' }}</span>
          </div>
        </div>
        <div class="right_gos">
          <img src="../../assets/img/youjiantou.png" alt />
        </div>
      </div>
      <div class="jy" @click="handleOutLoginClick()">
        <div class="left_gn">
          <div class="l_icon">
            <img src="../../assets/img/out2.png" alt />
          </div>
          <div class="r_title">
            <span>{{ '退出登录' }}</span>
          </div>
        </div>
        <div class="right_gos">
          <img src="../../assets/img/youjiantou.png" alt />
        </div>
      </div>
    </div>
    <van-popup v-model="settingDialog" position="bottom" :style="{ height: '35%' }">
      <div class="setting_content">
        <div class="old_password">
          <div class="left_titles">
            <span>{{ '旧密码:' }}</span>
          </div>
          <div class="right_password_input">
            <input type="password" v-model="oldPassword" />
          </div>
        </div>
        <div class="old_password">
          <div class="left_titles">
            <span>{{ '新密码:' }}</span>
          </div>
          <div class="right_password_input">
            <input type="password" v-model="newPassword" />
          </div>
        </div>
        <div class="old_password">
          <div class="left_titles">
            <span>{{ '确认新密码:' }}</span>
          </div>
          <div class="right_password_input">
            <input type="password" v-model="cirNewPassword" />
          </div>
        </div>
        <div class="btn_setting" @click="changeLoginPsd()">
          <span>{{ '确认修改' }}</span>
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script>
import * as api from "@/axios/api";
import { Toast } from "mint-ui";
import { isNull, pwdReg } from "@/utils/utils";
export default {
  name: "newUser",
  data() {
    return {
      name: "大狗子",
      selectUserFlag: true
      selectUserFlag: true,
      settingDialog: false,
      oldPassword: "", // 旧密码
      newPassword: "", // 新密码
      cirNewPassword: "", //确认新密码
      userInfo: {}
    };
  },
  created() {
    this.userInfo();
    this.getUserInfo();
  },
  methods: {
    handleZh() {
      this.selectUserFlag = !this.selectUserFlag;
    },
    userInfo() {
      api.getUserInfo().then(res => {
        console.log(res);
      });
    async getUserInfo() {
      // 获取用户信息
      let data = await api.getUserInfo();
      if (data.status === 0) {
        // 判断是否登录
        this.$store.state.userInfo = data.data;
        this.userInfo = data.data;
      } else {
      }
    },
    goToTopUp() {
      this.$router.push("/wallet");
    },
    handleOutLoginClick() {
      // 退出登录
      this.toRegister();
    },
    goToSettings() {
      // 每次打开dialog 清空密码数据
      this.settingDialog = !this.settingDialog;
      if (this.settingDialog) {
        this.oldPassword = "";
        this.newPassword = "";
        this.cirNewPassword = "";
      }
    },
    handleGoToTransfer() {
      this.$router.push("/transfers");
    },
    handleGoToAuthentication() {
      this.$router.push("/authentications");
    },
    handleGoToBankCard() {
      this.$router.push("/bankCard");
    },
    async toRegister() {
      // 注销登陆
      window.localStorage.clear("USERTOKEN"); // 清空本地存储 USERTOKEN字段
      this.clearCookie();
      let data = await api.logout();
      if (data.status === 0) {
        // Toast(data.msg)
        this.$router.push("/login");
      } else {
        Toast(data.msg);
      }
      this.$router.push("/login");
    },
    async changeLoginPsd() {
      // 修改密码
      if (
        isNull(this.oldPassword) ||
        isNull(this.newPassword) ||
        isNull(this.cirNewPassword)
      ) {
        Toast("请输入新旧密码");
        this.settingDialog = false;
      } else if (!pwdReg(this.newPassword)) {
        Toast("密码为6~12位,数字、字母或符号");
        this.settingDialog = false;
      } else {
        // 修改密码
        if (this.newPassword === this.cirNewPassword) {
          let opts = {
            oldPwd: this.oldPassword,
            newPwd: this.newPassword
          };
          let data = await api.changePassword(opts);
          if (data.status === 0) {
            this.changeLoginPsdBox = false;
            Toast(data.msg);
            this.settingDialog = false;
          } else {
            Toast(data.msg);
            this.settingDialog = false;
          }
        } else {
          Toast("新密码不一致");
          this.settingDialog = false;
        }
      }
    }
  }
};
@@ -184,6 +361,10 @@
            border-radius: 50%;
            overflow: hidden;
            background: rgb(211, 211, 211);
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
        .right_name {
@@ -337,4 +518,54 @@
    }
  }
}
.setting_content {
  width: 100%;
  height: 5rem;
  padding: 0.3rem;
  .old_password {
    width: 100%;
    height: 1rem;
    background: rgb(243, 243, 243);
    border-radius: 0.15rem;
    display: flex;
    margin-top: 0.5rem;
    .left_titles {
      width: 25%;
      height: 100%;
      display: flex;
      align-items: center;
      padding-left: 0.2rem;
      // justify-content: flex-end;
      span {
        font-weight: 600;
      }
    }
    .right_password_input {
      width: 80%;
      height: 100%;
      display: flex;
      align-items: center;
      input {
        width: 100%;
        height: 100%;
        padding-left: 0.2rem;
      }
    }
  }
  .btn_setting {
    width: 100%;
    height: 1.3rem;
    border-radius: 0.15rem;
    background: #2d6ae9;
    color: #fff;
    font-size: 0.4615rem;
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    span {
      font-weight: 600;
    }
  }
}
</style>
src/page/transfer/index.vue
New file
@@ -0,0 +1,226 @@
<template>
  <div class="wrapper">
    <div class="header">
      <div class="left_back" @click="handleBackClick()">
        <img src="../../assets/img/zuojiantou.png" alt="">
      </div>
      <div class="header_titles">
        <span>{{ '资金划转' }}</span>
      </div>
    </div>
    <div class="bars"></div>
    <mt-navbar v-model="selected">
      <mt-tab-item v-if="this.$store.state.settingForm.indexDisplay" id="1">融资转指数</mt-tab-item>
      <mt-tab-item v-if="this.$store.state.settingForm.indexDisplay" id="2">指数转融资</mt-tab-item>
      <mt-tab-item v-if="this.$store.state.settingForm.futuresDisplay" id="3">融资转期货</mt-tab-item>
      <mt-tab-item v-if="this.$store.state.settingForm.futuresDisplay" id="4">期货转融资</mt-tab-item>
    </mt-navbar>
    <mt-tab-container class="order-list" v-model="selected">
      <mt-tab-container-item id="1">
        <div class="form-block">
          <mt-field label="可转金额" placeholder="可转金额" type="text" disabled
                    v-model="this.$store.state.userInfo.enableAmt"></mt-field>
        </div>
        <div class="form-block">
          <mt-field label="转账金额" name="amt" v-model="form.account1" placeholder="请输入转账金额" type="text">
            <span @click="selectAll1">全部</span>
          </mt-field>
        </div>
        <!-- <div class="form-block">
            <mt-field label="资金密码" placeholder="资金密码" type="password" v-model="form.password"></mt-field>
        </div>
        <p class="prompt">资金密码默认为登录密码</p> -->
        <div class="btnbox">
          <span class="text-center btnok loginout" @click="tosubmit">确认转入指数账户</span>
        </div>
      </mt-tab-container-item>
      <mt-tab-container-item id="2">
        <div class="form-block">
          <mt-field label="可转金额" placeholder="可转金额" type="text" disabled
                    v-model="this.$store.state.userInfo.enableIndexAmt"></mt-field>
        </div>
        <div class="form-block">
          <mt-field label="转账金额" v-model="form.account2" placeholder="请输入转账金额" type="text">
            <span @click="selectAll2">全部</span>
          </mt-field>
        </div>
        <div class="btnbox">
          <span class="text-center btnok loginout" @click="tosubmit">确认转入融资账户</span>
        </div>
      </mt-tab-container-item>
      <mt-tab-container-item id="3">
        <div class="form-block">
          <mt-field label="可转金额" placeholder="可转金额" type="text" disabled
                    v-model="this.$store.state.userInfo.enableAmt"></mt-field>
        </div>
        <div class="form-block">
          <mt-field label="转账金额" v-model="form.account3" placeholder="请输入转账金额" type="text">
            <span @click="selectAll3">全部</span>
          </mt-field>
        </div>
        <div class="btnbox">
          <span class="text-center btnok loginout" @click="tosubmit">确认转入期货账户</span>
        </div>
      </mt-tab-container-item>
      <mt-tab-container-item id="4">
        <div class="form-block">
          <mt-field label="可转金额" placeholder="可转金额" type="text" disabled
                    v-model="this.$store.state.userInfo.enableFuturesAmt"></mt-field>
        </div>
        <div class="form-block">
          <mt-field label="转账金额" v-model="form.account4" placeholder="请输入转账金额" type="text">
            <span @click="selectAll4">全部</span>
          </mt-field>
        </div>
        <div class="btnbox">
          <span class="text-center btnok loginout" @click="tosubmit">确认转入融资账户</span>
        </div>
      </mt-tab-container-item>
    </mt-tab-container>
  </div>
</template>
<script>
// import '@/assets/style/common.less'
import * as api from '@/axios/api'
import { Toast } from 'mint-ui'
export default {
  components: {
  },
  data () {
    return {
      selected: '1', // 选中
      form: {
        account1: '',
        account2: '',
        account3: '',
        account4: '',
        password: ''
      },
      userInfo: {
        realName: ''
      }
    }
  },
  watch: {},
  computed: {},
  created () {
    this.getProductSetting()
  },
  mounted () {
    if (this.$route.query.type) {
      this.selected = this.$route.query.type + ''
    }
    this.getUserInfo()
  },
  methods: {
    async getProductSetting () {
      let data = await api.getProductSetting()
      if (data.status === 0) {
        this.$store.state.settingForm = data.data
        if (!this.$store.state.settingForm.indexDisplay) {
          this.selected = '3'
        }
      } else {
        this.$message.error(data.msg)
      }
    },
    handleBackClick() {
      this.$router.go(-1);
    },
    selectAll1 () {
      // 选择全部
      this.form.account1 = this.$store.state.userInfo.enableAmt
    },
    selectAll2 () {
      // 选择全部
      this.form.account2 = this.$store.state.userInfo.enableIndexAmt
    },
    selectAll3 () {
      // 选择全部
      this.form.account3 = this.$store.state.userInfo.enableAmt
    },
    selectAll4 () {
      // 选择全部
      this.form.account4 = this.$store.state.userInfo.enableFuturesAmt
    },
    async tosubmit () {
      // 融资转指数
      let opt = {
        amt: this.selected === '1' ? this.form.account1 : this.selected === '2' ? this.form.account2 : this.selected === '3' ? this.form.account3 : this.form.account4,
        type: this.selected // 1 融资转指数 2 指数转融资
      }
      let data = await api.AmtChange(opt)
      if (data.status === 0) {
        Toast(data.msg)
        this.$router.push('/user')
      } else {
        Toast(data.msg)
      }
    },
    async getUserInfo () {
      // 获取用户信息
      let data = await api.getUserInfo()
      if (data.status === 0) {
        this.$store.state.userInfo = data.data
      } else {
        Toast(data.msg)
      }
    }
  }
}
</script>
<style lang="less" scoped>
  .header {
    width: 100%;
    height: 1.5rem;
    background: #fff;
    position: fixed;
    z-index: 999;
    border-radius: 0 0 .15rem .15rem;
    .left_back {
      width: 1rem;
      height: 100%;
      left: 0;
      position: absolute;
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        width: .6rem;
        height: .6rem;
      }
    }
    .header_titles {
      width: 100%;
      height: 100%;
      text-align: center;
      font-size: .4615rem;
      line-height: 1.5rem;
      span {
        font-weight: 600;
      }
    }
  }
  .bars {
    width: 100%;
    height: 1.7rem;
  }
  .mint-cell.mint-field{
    background: #fff !important;
    color: #000 !important;
  }
  /deep/ .mint-cell-text {
    color: #000 !important;
  }
  .text-center.btnok {
    display: inline-block;
    height: 1rem;
    line-height: 1rem;
    background: #2d6ae9;
    border: none;
    border-radius: .1rem;
  }
</style>
src/page/transferRecord/compontents/recharge-list.vue
New file
@@ -0,0 +1,242 @@
<template>
  <div>
    <div v-if="list.length<=0" class="empty text-center">
      暂无充值信息!
    </div>
    <div v-else>
      <ul
        class="table-list"
        v-infinite-scroll="loadMore"
        infinite-scroll-disabled="loading"
        infinite-scroll-distance="10">
        <li class="list-body" v-for="(item) in list" :key="item.key">
          <div class="order-info-box">
            <div class="order-title">
                    <span :class="['main',item.payChannel == 0?'ali':item.payChannel == 1?'cart':'wechat']">
                        <!-- <i v-if="item.payChannel == 0 || item.payChannel == '支付宝'" style="color:#1296db;"
                           class="iconfont icon-zhifubao"></i>
                        <i v-if="item.payChannel == '微信' " style="color:#1296db;" class="iconfont icon-weixin"></i>
                        <i v-if="item.payChannel == 1 || item.payChannel == '对公转账'" style="color:#1296db;"
                           class="iconfont icon-yinlian"></i> -->
                        {{item.payChannel == 0?'支付宝':item.payChannel == 1?'对公转账':item.payChannel}}
                    </span>
              <span class="payNumber">充值:<span :style="{color:$state.theme =='red'?'#BB1815':''}">¥{{item.payAmt}}</span></span>
              <span
                :class="item.orderStatus == 1?'green pull-right':item.orderStatus == 2?'red pull-right':'red pull-right'">
                        <i v-if="item.orderStatus == 1" class="iconfont icon-tongguo4 animated bounceIn"></i>
                        <i v-if="item.orderStatus==0" class="iconfont icon-dengdai animated bounceInDown"></i>
                        <i v-if="item.orderStatus == 2" class="iconfont icon-failure animated bounceInDown"></i>
                        <i v-if="item.orderStatus == 3"
                           class="iconfont icon-iconfontweitongguo animated bounceInDown"></i>
                        <!-- 1 => 成功 2 失败 3取消 4 等待 -->
                        {{item.orderStatus == 1?'充值成功':item.orderStatus == 2?'充值失败':item.orderStatus == 3?'取消充值':'审核中'}}
                    </span>
              <!-- <span class="secondary ">123456789</span> -->
            </div>
            <div class="order-info">
              <!-- <p class="clearfix">
                <span class="col-xs-5">{{item.orderDesc}}</span>
              </p> -->
              <!-- <p class="clearfix">
                <span class="col-xs-12">订单号:<b>{{item.orderSn}}</b></span>
              </p>
              <p class="clearfix">
                        <span class="secondary col-xs-6">时间:
                            <b v-if="item.addTime">{{new Date(item.addTime) | timeFormat}}</b>
                            <b v-else></b>
                        </span>
              </p> -->
              <div class="info-mix ">
                <span class="info-item">订单号:<b>{{item.orderSn}}</b></span>
                <span class="info-item">时间:
                    <b v-if="item.addTime">{{new Date(item.addTime) | timeFormat}}</b>
                    <b v-else></b>
                </span>
              </div>
            </div>
          </div>
          <!-- <div class="capital">
              <div class="pro">
                  {{item.payChannel}} <span class="pull-right">金额:{{item.payAmt}}</span>
              </div>
              <div class=" clearfix">
                  <div class="col-xs-4"></div>
                  <div class="col-xs-8">
                      <span class="pull-right">
                          {{new Date(item.addTime) | timeFormat}}
                      </span>
                  </div>
              </div>
          </div> -->
        </li>
      </ul>
      <div v-show="loading" class="load-all text-center">
        <mt-spinner type="fading-circle"></mt-spinner>
        加载中...
      </div>
      <div v-show="!loading" class="load-all text-center">
        已全部加载
      </div>
    </div>
  </div>
</template>
<script>
import { Toast } from 'mint-ui'
import * as api from '@/axios/api'
export default {
  components: {},
  props: {},
  data () {
    return {
      loading: false,
      list: [],
      pageNum: 1,
      pageSize: 15,
      total: 0
    }
  },
  watch: {},
  computed: {},
  created () {},
  mounted () {
    this.getListDetail()
  },
  methods: {
    async getListDetail () {
      let opt = {
        payChannel: '', // 支付方式
        orderStatus: '', // 订单状态
        pageNum: this.pageNum,
        pageSize: 15
      }
      let data = await api.rechargeList(opt)
      if (data.status === 0) {
        data.data.list.forEach(element => {
          this.list.push(element)
        })
        this.total = data.data.total
      } else {
        Toast(data.msg)
      }
    },
    async loadMore () {
      if (this.list.length < 10 || this.total <= this.pageNum * this.pageNum) {
        return
      }
      this.loading = true
      // 加载下一页
      this.pageNum++
      await this.getListDetail()
      this.loading = false
    }
  }
}
</script>
<style lang="less" scoped>
  .wrapper {
    padding-top: 0.9rem;
  }
  .table-list {
    padding: 0.2rem 0;
    .list-body {
      padding: 0.1rem 0.3rem;
      .capital:nth-child(1) {
        border-top: 0.01rem solid #3f444a;
      }
      .capital {
        padding: 0.2rem;
        // border-radius: 0.2rem;
        border-bottom: 0.01rem solid #3f444a;
        div {
          line-height: 0.4rem;
        }
        .col-xs-4 {
          padding-left: 0;
          padding-right: 0;
        }
        .pro {
          color: #999;
        }
      }
    }
  }
  .payNumber {
    font-size: 0.24rem;
    font-weight: bold;
    span {
      font-family: lightnumber;
    }
  }
  /deep/.order-info-box {
    background-color: #16171d;
    padding: 0;
    .main{
      padding: 0.05rem .15rem;
      letter-spacing:0;
      text-align: center;
      margin-right: .16rem;
      font-size: 0.24rem;
      border-radius: 3px;
      &.ali {
        background-color: #138EB4;
      }
      &.cart {
        background-color: #7266BA;
      }
      &.wechat {
        background-color: #009C46;
      }
    }
    .order-info {
      border-bottom: 1px solid #2e3237;
      padding-bottom: .3rem;
    }
    .order-title{
      border-bottom: none;
    }
    .info-mix{
      display: flex;
      font-size: .2rem;
      width: 100%;
      .info-item {
        margin-right: .2rem;
        color: #fff8;
      }
    }
  }
  .red-theme {
    .list-body {
      background-color: #fff;
    }
    .order-info-box {
      background-color: #fff;
      .order-info {
        border-bottom-color: #e9e9e9;
      }
    }
    .order-info-box .main.cart {
      color: #fff;
    }
    .payNumber {
      color: #000;
    }
    .order-info-box .info-mix .info-item{
      color: #666666;
    }
    .load-all{
      background-color: #fff;
    }
  }
</style>
src/page/transferRecord/index.vue
New file
@@ -0,0 +1,169 @@
<template>
  <div class="wrapper">
    <div class="header">
      <div class="left_back" @click="handleGoToBack()">
        <img src="../../assets/img/zuojiantou.png" alt="">
      </div>
      <div class="header_titles">
        <span>{{ '充值记录' }}</span>
      </div>
    </div>
    <!-- <div class="text-center">
      <div class="btn-group">
        <a href="#/recharge" class="with-draw-btn">充值</a>
        <a href="javascript:;" class="with-draw-detai-btn on">记录</a>
      </div>
    </div> -->
    <div class="history_content">
      <div class="box page-part transaction">
        <div class="box-contain clearfix">
          <rechargeList></rechargeList>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import rechargeList from './compontents/recharge-list'
export default {
  components: {
    rechargeList
  },
  props: {},
  data () {
    return {
      number: ''
    }
  },
  watch: {},
  computed: {},
  created () {},
  mounted () {},
  methods: {
    handleGoToBack() {
      this.$router.go(-1);
    }
  }
}
</script>
<style lang="less" scoped>
  .mint-header {
    // background: #f4f4f4;
    margin-bottom: 0.2rem;
  }
  .wrapper {
    // padding-top: 1.5rem;
    background-color: #ffffff !important;
  }
  .btn-group {
    // background: #f4f4f4;
    text-align: center;
    margin: 0 auto;
    margin-bottom: 0.5rem;
    a {
      display: inline-block;
      text-align: center;
      font-size: 0.29rem;
      height: 0.7rem;
      line-height: 0.6rem;
      width: 1.44rem;
      margin: 0;
      margin-top: 0;
      padding: 0;
    }
    .with-draw-btn {
      position: relative;
      right: -10px;
      width: 1.51rem;
      border-top-left-radius: 0.695rem;
      border-bottom-left-radius: 0.695rem;
    }
    .with-draw-detai-btn {
      border-top-right-radius: 0.695rem;
      border-bottom-right-radius: 0.695rem;
    }
    .on {
      color: #fff;
    }
  }
  .transaction {
    color: rgba(100, 100, 100, 0.78);
    .transaction-title {
      padding: 0.15rem 0.3rem;
    }
    .empty {
      height: 2.8rem;
      line-height: 2.8rem;
    }
  }
  .box.page-part.transaction {
    background-color: #16171d;
    .box-contain {
      background-color: #16171d;
    }
  }
  .red-theme {
    .wrapper{
      background-color: #E9E9E9;
    }
    .box.page-part.transaction {
      background-color: #E9E9E9;
      .box-contain {
      background-color: #E9E9E9;
        .list-body{
          background-color: #fff;
          .order-info-box {
            background-color: #fff;
          }
        }
      }
    }
  }
  .header {
    width: 100%;
    height: 1.5rem;
    background: #fff;
    position: fixed;
    z-index: 999;
    border-radius: 0 0 .15rem .15rem;
    .left_back {
      width: 1rem;
      height: 100%;
      left: 0;
      position: absolute;
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        width: .6rem;
        height: .6rem;
      }
    }
    .header_titles {
      width: 100%;
      height: 100%;
      text-align: center;
      font-size: .4615rem;
      line-height: 1.5rem;
      span {
        font-weight: 600;
      }
    }
  }
  .history_content {
    height: calc(100% - 1.7rem);
  }
</style>
src/page/user/transfer.vue
@@ -79,14 +79,12 @@
</template>
<script>
import foot from '@/components/foot/foot'
// import '@/assets/style/common.less'
import * as api from '@/axios/api'
import { Toast } from 'mint-ui'
export default {
  components: {
    foot
  },
  data () {
    return {
src/page/wallet/index.vue
New file
@@ -0,0 +1,764 @@
<template>
  <div class="user_page">
    <div class="content">
      <div class="top_icon">
        <div class="left_back" @click="handleBack()">
          <img src="../../assets/img/zuojiantou.png" alt />
        </div>
        <div class="right_icon">
          <div @click="goToTopUp()">
            <img src="../../assets/img/qianbao.png" alt />
          </div>
          <div>
            <img src="../../assets/img/kefu.png" alt />
          </div>
        </div>
      </div>
      <div class="tabs">
        <div
          v-for="(item, index) in tabsArr"
          :key="index"
          @click="handleTabsClick(item, index)"
          :class="tabsCurrentIndex === index ? 'active' : ''"
        >
          <span>{{ item }}</span>
        </div>
      </div>
      <div class="center_card" v-if="tabsCurrentIndex === 0">
        <div class="keyon">
          <span>{{ '总资产' }}</span>
        </div>
        <div class="num_price">
          <p
            v-if="this.$store.state.settingForm.indexDisplay && !this.$store.state.settingForm.futuresDisplay"
            class="account"
          >
            ¥{{ $store.state.hide ? '****' : Number($store.state.userInfo.userAmt +
            $store.state.userInfo.userIndexAmt).toFixed(2)
            }}
          </p>
          <p
            v-else-if="!this.$store.state.settingForm.indexDisplay && this.$store.state.settingForm.futuresDisplay"
            class="account"
          >
            ¥{{ $store.state.hide ? '****' : Number($store.state.userInfo.userAmt +
            $store.state.userInfo.userFuturesAmt).toFixed(2)
            }}
          </p>
          <p
            v-else-if="!this.$store.state.settingForm.indexDisplay && !this.$store.state.settingForm.futuresDisplay"
            class="account"
          >¥{{ $store.state.hide ? '****' : Number($store.state.userInfo.userAmt).toFixed(2) }}</p>
        </div>
        <div class="yk es">
          <div>
            <span>{{ '沪深账户' }}</span>
          </div>
          <div>
            <span>{{ '指数账户' }}</span>
          </div>
        </div>
        <div class="yk as">
          <div>
            <span>{{ '¥ ' + $store.state.userInfo.userAmt }}</span>
          </div>
          <div>
            <span>{{ '¥ ' + $store.state.userInfo.userIndexAmt }}</span>
          </div>
        </div>
        <div class="btns" @click="handleGoToTransfers()">
          <span>{{ '账户金额互转' }}</span>
        </div>
      </div>
      <div class="withdrawal" v-if="tabsCurrentIndex === 1">
        <div class="ttx">
          <span>{{ '可提现金额 (元)' }}</span>
        </div>
        <div class="ttx_price">
          <span>{{ $store.state.userInfo.enableAmt }}</span>
        </div>
        <div class="ttx_input">
          <div class="titles">
            <span>{{ '提现金额' }}</span>
          </div>
          <div class="num">
            <input type="text" v-model="withdrawalValue" />
          </div>
          <div class="all" @click="withdrawalAll()">
            <span>{{ '全部' }}</span>
          </div>
        </div>
        <div class="btns" @click="handleToSure()">
          <span>{{ '确定' }}</span>
        </div>
      </div>
      <div class="banks" v-if="tabsCurrentIndex === 1">
        <div class="bank_1">
          <div class="left_name">
            <span>{{ '提现记录' }}</span>
          </div>
          <div class="center_input"></div>
          <div class="right_copy img_right" @click="handleGoToCashWithdrawalRecord()">
            <img src="../../assets/img/youjiantou.png" alt />
          </div>
        </div>
      </div>
      <div class="banks" v-if="tabsCurrentIndex === 0">
        <div class="bank_1">
          <div class="left_name">
            <span>{{ '收款名称' }}</span>
          </div>
          <div class="center_input">
            <input type="text" v-model="skName" />
          </div>
          <div class="right_copy">
            <span
              v-clipboard:copy="skName"
              v-clipboard:success="onCopy"
              v-clipboard:error="onError"
            >{{ '复制' }}</span>
          </div>
        </div>
        <div class="bank_1">
          <div class="left_name">
            <span>{{ '收款银行' }}</span>
          </div>
          <div class="center_input">
            <input type="text" v-model="skBankName" />
          </div>
          <div class="right_copy">
            <span
              v-clipboard:copy="skBankName"
              v-clipboard:success="onCopy"
              v-clipboard:error="onError"
            >{{ '复制' }}</span>
          </div>
        </div>
        <div class="bank_1">
          <div class="left_name">
            <span>{{ '收款账号' }}</span>
          </div>
          <div class="center_input">
            <input type="text" v-model="skUser" />
          </div>
          <div class="right_copy">
            <span
              v-clipboard:copy="skUser"
              v-clipboard:success="onCopy"
              v-clipboard:error="onError"
            >{{ '复制' }}</span>
          </div>
        </div>
        <div class="bank_1">
          <div class="left_name">
            <span>{{ '充值金额' }}</span>
          </div>
          <div class="center_input">
            <input type="text" v-model="walletNum" />
          </div>
          <div class="right_copy" @click="handleGoCz()">
            <span>{{ '充值' }}</span>
          </div>
        </div>
        <div class="bank_1" @click="handleGoToTransferRecord()">
          <div class="left_name">
            <span>{{ '充值记录' }}</span>
          </div>
          <div class="center_input"></div>
          <div class="right_copy img_right">
            <img src="../../assets/img/youjiantou.png" alt />
          </div>
        </div>
      </div>
    </div>
    <van-notify v-model="messShow" type="primary">
      <span>{{ mess }}</span>
    </van-notify>
    <van-popup v-model="messDialog" position="bottom" :style="{ height: '70%' }">
      <div class="mess_content">
        <div class="top_title">
          <div class="tt">
            <div class="left_icon">
              <img src="../../assets/img/liucheng.png" alt />
            </div>
            <div class="right_title">
              <span>{{ '操作流程:' }}</span>
            </div>
          </div>
          <div class="_on">
            <span>{{ '①' }}</span>
            <span>{{ '点击"复制", 复制信息' }}</span>
          </div>
          <div class="_on">
            <span>{{ '②' }}</span>
            <span>{{ '完成复制, 打开手机银行进行转账' }}</span>
          </div>
        </div>
        <div class="top_title" style="color: red;">
          <div class="tt">
            <div class="left_icon">
              <img src="../../assets/img/jinggao.png" alt />
            </div>
            <div class="right_title">
              <span>{{ '操作流程:' }}</span>
            </div>
          </div>
          <div class="_on">
            <span>{{ '①' }}</span>
            <span class="hgg">{{ '为确保入金及时到账, 请确认您输入的金额和提交的充值金额一致' }}</span>
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script>
import * as api from "@/axios/api";
import { Toast } from "mint-ui";
import { mapState } from "vuex";
export default {
  name: "newUser",
  data() {
    return {
      name: "大狗子",
      selectUserFlag: true,
      tabsArr: ["充值", "提现"],
      tabsCurrentIndex: 0,
      walletNum: "",
      skName: "",
      skBankName: "",
      skUser: "",
      messShow: false,
      mess: "",
      messDialog: false,
      withdrawalValue: "",
      settingInfo: {}
    };
  },
  computed: {
    ...mapState(["userInfo", "bankInfo"])
  },
  created() {
    this.getSettingInfo();
    this.getCardDetail(); // 获取银行卡信息
  },
  methods: {
    handleZh() {
      //cho
      this.selectUserFlag = !this.selectUserFlag;
    },
    handleBack() {
      // 点击返回/
      this.$router.go(-1);
    },
    goToTopUp() {
      this.$router.push("/wallet");
    },
    handleTabsClick(item, index) {
      this.tabsCurrentIndex = index;
    },
    withdrawalAll() {
      // 点击全部提现
      this.withdrawalValue = this.userInfo.enableAmt;
    },
    async handleToSure() {
      // 点击确定提现
      if (!this.userInfo.idCard) {
        Toast("请先实名认证");
        return;
      }
      if (!this.bankInfo.bankNo) {
        Toast("请先绑定银行卡");
        return;
      } else {
      }
      if (!this.withdrawalValue || this.withdrawalValue <= 0) {
        Toast("请输入正确的提现金额");
      } else if (this.withdrawalValue - this.settingInfo.withMinAmt < 0) {
        Toast("提现金额不得小于" + this.settingInfo.withMinAmt);
      } else {
        let opts = {
          amt: this.withdrawalValue
        };
        let data = await api.outMoney(opts);
        if (data.status === 0) {
          // 成功
          Toast("申请成功,请等待审核!");
          this.$router.push("/cashlist");
        } else {
          Toast(data.msg ? data.msg : "提现失败,请重新提现或者联系管理员");
        }
      }
    },
    async getCardDetail() {
      // 获取银行卡信息
      let data = await api.getBankCard();
      if (data.status === 0) {
        this.$store.state.bankInfo = data.data;
      } else {
        // Toast(data.msg)
      }
    },
    async getSettingInfo() {
      let data = await api.getSetting();
      if (data.status === 0) {
        // 成功
        this.settingInfo = data.data;
        console.log(this.settingInfo, "settingInfo");
      } else {
        Toast(data.msg);
      }
    },
    handleGoToTransferRecord() { // 充值记录
      this.$router.push('/transferRecord');
    },
    handleGoToCashWithdrawalRecord() { // 提现记录
      this.$router.push('/cashWithdrawalRecord');
    },
    handleGoToTransfers() {
      this.$router.push('/transfers');
    },
    handleGoCz() {
      if (this.walletNum === "") {
        this.messShow = true;
        this.mess = "请输入充值金额";
        setTimeout(() => {
          this.messShow = false;
        }, 1500);
      } else if (this.walletNum < 200) {
        this.messShow = true;
        this.mess = "小于最少充值金额";
        setTimeout(() => {
          this.messShow = false;
        }, 1500);
      } else if (this.walletNum !== "" && this.walletNum >= 200) {
        this.getPayInfo();
        this.messDialog = true;
      }
    },
    onCopy() {
      Toast("复制成功");
    },
    onError() {
      Toast("复制失败请重试");
    },
    async getPayInfo() {
      // 获取支付渠道 详细信息
      let data = await api.getPayInfoDetail({ payId: 3 });
      if (data.status === 0) {
        const { channelName, channelAccount, channelDesc } = data.data;
        this.skName = channelName;
        this.skUser = channelAccount;
        this.skBankName = channelDesc;
      } else {
        this.messShow = true;
        this.mess = data.msg;
        setTimeout(() => {
          this.messShow = false;
        }, 1500);
      }
    }
  }
};
</script>
<style scoped lang="less">
.user_page {
  width: 100%;
  height: calc(100% - 1.3rem);
  .content {
    width: 100%;
    height: 100%;
    padding: 0 0.3rem;
    .top_icon {
      width: 100%;
      height: 1.5rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left_back {
        width: 10%;
        height: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        img {
          width: 0.6rem;
          height: 0.6rem;
        }
      }
      .right_icon {
        width: 25%;
        height: 50%;
        display: flex;
        > div {
          width: 50%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          img {
            width: 0.6rem;
            height: 0.6rem;
          }
        }
      }
    }
    .users {
      width: 100%;
      height: 1.7949rem;
      background: #fff;
      border-radius: 0.15rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .left_tou {
        width: 80%;
        height: 70%;
        display: flex;
        .left_tx {
          width: 20%;
          height: 100%;
          margin-left: 0.3rem;
          display: flex;
          align-items: center;
          justify-content: center;
          > div {
            width: 1rem;
            height: 1rem;
            border-radius: 50%;
            overflow: hidden;
            background: rgb(211, 211, 211);
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
        .right_name {
          width: 80%;
          height: 100%;
          display: flex;
          align-items: center;
          font-size: 0.4415rem;
          span {
            font-weight: 600;
          }
        }
      }
      .right_go {
        width: 20%;
        height: 70%;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding-right: 0.2rem;
        img {
          width: 0.6rem;
          height: 0.6rem;
        }
      }
    }
    .center_card {
      width: 100%;
      height: 5.3846rem;
      background-image: linear-gradient(to right bottom, #ffffff, #dfedfc);
      // background-image: linear-gradient(to right, #ffffff , #dfedfc);
      border-radius: 0.15rem;
      padding: 0.5rem 0.4rem;
      .keyon {
        width: 100%;
        height: 0.5128rem;
        font-size: 0.359rem;
        display: flex;
        align-items: center;
        color: #3d4144;
        span {
          font-weight: 600;
        }
      }
      .num_price {
        width: 100%;
        height: 0.6667rem;
        margin-top: 0.1rem;
        display: flex;
        align-items: center;
        font-size: 0.5528rem;
        span {
          font-weight: 600;
        }
      }
      .yk {
        width: 100%;
        height: 0.5rem;
        display: flex;
        align-items: center;
        > div {
          width: 50%;
          height: 100%;
          color: #97989d;
          display: flex;
          align-items: center;
        }
      }
      .yk.es {
        margin-top: 0.3rem;
      }
      .yk.as {
        font-size: 0.4033rem;
        margin-top: 0.1rem;
        span {
          color: #000;
          font-weight: 600;
        }
        .bzz {
          color: #4ea364;
        }
      }
      .btns {
        width: 100%;
        height: 1.2821rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 0.25rem;
        background: #2d6ae9;
        font-size: 0.4015rem;
        color: #fff;
        margin-top: 0.35rem;
        span {
          font-weight: 600;
        }
      }
      .active {
        background: #4ea364;
      }
    }
    .jy {
      width: 100%;
      height: 1.5rem;
      border-radius: 0.2rem;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 0.3rem;
      margin-top: 0.3rem;
      .left_gn {
        width: 40%;
        height: 60%;
        display: flex;
        .l_icon {
          width: 30%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          img {
            width: 0.5041rem;
            height: 0.5041rem;
          }
        }
        .r_title {
          width: 70%;
          height: 100%;
          display: flex;
          align-items: center;
          font-size: 0.4046rem;
          color: #404040;
          span {
            font-weight: 600;
          }
        }
      }
      .right_gos {
        width: 20%;
        height: 60%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        img {
          width: 0.6rem;
          height: 0.6rem;
        }
      }
    }
  }
}
.tabs {
  width: 100%;
  height: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  > div {
    width: 48%;
    height: 70%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .active {
    background: rgb(255, 255, 255);
    border-radius: 0.15rem;
  }
}
.banks {
  width: 100%;
  background: #fff;
  padding: 0 0.3rem;
  border-radius: 0.15rem;
  margin-top: 0.3rem;
  > div {
    width: 100%;
    height: 1.5385rem;
    margin-top: 0.3rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 0.05rem solid rgb(224, 224, 224);
    font-size: 0.359rem;
    span {
      font-weight: 600;
    }
    .left_name {
      width: 25%;
      height: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .center_input {
      width: 60%;
      height: 50%;
      input {
        width: 100%;
        height: 100%;
      }
    }
    .right_copy {
      width: 15%;
      height: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
.img_right {
  > img {
    width: 0.8rem;
    height: 0.8rem;
  }
}
.mess_content {
  width: 100%;
  height: 100%;
  padding: 0.5rem 0.3rem;
  .top_title {
    width: 100%;
    height: 2.5rem;
    .tt {
      width: 100%;
      height: 30%;
      display: flex;
      align-items: center;
      .left_icon {
        width: 0.5rem;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        img {
          width: 0.4rem;
          height: 0.4rem;
        }
      }
      .right_title {
        margin-left: 0.2rem;
      }
    }
  }
  ._on {
    width: 100%;
    height: 0.5rem;
    padding: 0 0.3rem;
    margin-top: 0.1rem;
  }
  .hgg {
    line-height: 0.5rem;
  }
}
.withdrawal {
  width: 100%;
  height: 5rem;
  background: #fff;
  border-radius: 0.15rem;
  padding: 0.5rem 0.4rem;
  background-image: linear-gradient(to right bottom, #ffffff, #dfedfc);
  .ttx {
    width: 100%;
    height: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .ttx_price {
    width: 100%;
    height: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2d6ae9;
    font-size: 0.6615rem;
    span {
      font-weight: 600;
    }
  }
  .ttx_input {
    width: 100%;
    height: 1rem;
    display: flex;
    > div {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .titles {
      width: 20%;
      height: 100%;
    }
    .num {
      width: 70%;
      height: 100%;
      input {
        width: 100%;
        height: 100%;
        padding-left: 1rem;
        font-weight: 600;
      }
    }
    .all {
      width: 10%;
      height: 100%;
    }
  }
}
.btns {
  width: 100%;
  height: 1.2821rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  background: #2d6ae9;
  font-size: 0.4015rem;
  color: #fff;
  margin-top: 0.35rem;
  span {
    font-weight: 600;
  }
}
</style>
src/router/index.js
@@ -50,6 +50,12 @@
import KLine from '@/page/kline/index.vue'
import TradingBuy from '@/page/trading/buy.vue'
import NewUser from '@/page/newUser/index.vue'
import Wallet from '@/page/wallet/index.vue';
import TransferRecord from '@/page/transferRecord/index.vue'
import CashWithdrawalRecord from '@/page/cashWithdrawalRecord/index.vue'
import Transfers from '@/page/transfer/index.vue'
import Authentications from '@/page/authentication/index.vue'
import BankCard from '@/page/bankCard/index.vue'
Vue.use(Router)
@@ -636,6 +642,77 @@
      component: NewUser
    },
    {
      path: '/wallet',
      name: 'Wallet',
      meta: {
        title: '图标',
        requireAuth: false,
        hasHeader: false,
        index: 52,
      },
      component: Wallet
    },
    {
      path: '/transferRecord',
      name: 'transferRecord',
      meta: {
        title: '图标',
        requireAuth: false,
        hasHeader: false,
        index: 53,
        show: true
      },
      component: TransferRecord
    },
    {
      path: '/cashWithdrawalRecord',
      name: 'cashWithdrawalRecord',
      meta: {
        title: '图标',
        requireAuth: false,
        hasHeader: false,
        index: 54,
        show: true
      },
      component: CashWithdrawalRecord
    },
    {
      path: '/transfers',
      name: 'transfers',
      meta: {
        title: '图标',
        requireAuth: false,
        hasHeader: false,
        index: 55,
        show: true
      },
      component: Transfers
    },
    {
      path: '/authentications',
      name: 'authentications',
      meta: {
        title: '图标',
        requireAuth: false,
        hasHeader: false,
        index: 56,
        show: true
      },
      component: Authentications
    },
    {
      path: '/bankCard',
      name: 'bankCard',
      meta: {
        title: '图标',
        requireAuth: false,
        hasHeader: false,
        index: 57,
        show: true
      },
      component: BankCard
    },
    {
      // 会匹配所有路径
      path: '*',
      redirect: '/home'