CompanyProject/滴滴淘/h5(1)/src/view/pages/Authentication.vue

<template lang="pug">
  .authentication.content
    NavbarComponent(:title=" mode == 'add'?'修改地址':'买号认证'" showLeft)
    .line
    .pd43
      .platform_list(v-for='item in bindAccount.info')
        div(@click='goUrl(item.account_id,item.status)')
          .platform.mt30.flex.pd30
            Icons(name='buyer-icon-taobao_' size='1' color='#ff5000' v-if='item.account_type == 10')
            Icons(name='buyer-icon-jingdong_' size='1' color='#e6241a' v-if='item.account_type == 20')
            p.flex1.ml40 {{item.account_type_text}}
            span.examine(v-if='item.status == -1') {{item.status_text}}
            span.examine(v-if='item.status == 0') {{item.status_text}}
            span.already(v-if='item.status == 1') {{item.status_text}}
            span.examine(v-if='item.status == -9') {{item.status_text}}
            van-icon(name="arrow" size='0.46rem')
      .platform_list(v-for='item in platform' v-if="mode !== 'add'")
        div(@click='goAdd(item.id)')
          .platform.mt30.flex.pd30
            Icons( :name='item.icon' size='1' :color='item.color')
            p.flex1.ml40 {{item.name}}
            span 去认证
            van-icon(name="arrow" size='0.46rem')
</template>
<script lang="ts">
  import {Component, Provide, Vue, Inject} from 'vue-property-decorator';
  import NavbarComponent from "@/components/Navbar.vue";
  import { Dialog } from 'vant';
  import Icons from '@/components/Icons.vue'

  @Component({
    components: {
      NavbarComponent,
      Icons
    }
  })
  export default class Authentication extends Vue {
    $http: any

    // inject 注入 App.vue 提供的变量
    @Inject() readonly HiddenTabBar!: Function
    @Inject() readonly ShowTabBar!: Function

    // 进入此页面的不同方式 add表示地址不显示添加买号
    private mode: string = ''

    private platform: Array<any> = [
      {
        name: '淘宝认证',
        id: 10,
        num: 0,
        icon: 'buyer-icon-taobao_',
        color: '#ff5000'
      }
      // {
      //   name: '京东认证',
      //   id: 20,
      //   num: 0,
      //   icon: 'buyer-icon-jingdong_',
      //   color: '#e6241a'
      // }
      // {
      //   name: '拼多多认证',
      //   id: 3,
      //   num: 0,
      //   icon: ''
      // }
    ]

    // 已绑账号数据
    private bindAccount: any = {}

    private created(): void {
      this.HiddenTabBar()
      this.getAccountlist()
      if(this.$route.query.mode !== void 0){
        this.mode = this.$route.query.mode as string
      }
    }

    beforeRouteLeave (to: any, from: any, next: any) {
      this.ShowTabBar()
      next()
    }

    // 获取买号列表
    private async getAccountlist(): Promise<void> {
      let res = await this.$http.UserService.getAccountlist()
      this.bindAccount = res
      res.info.forEach((v: any, i: number) => {
        switch (v.account_type) {
          case 10:
            this.platform[0].num++
            break;
          case 20:
            this.platform[1].num++
            break;
          case 30:
            this.platform[2].num++
            break;
          default:
            break;
        }
      });
    }
    private goUrl(id: string, status: number): void {
      let url = "";
      if (status == -1) {
        url = "/AddAccount";
      } else if (status == 1) {
        url = "/ModifyAddress";
      }else{
        return
      }
      this.$router.push({ path: url, query: { id: id, status: String(status),type: '10' } });
    }
    private goAdd(id: string): void {
      let info: any = this.bindAccount
      switch (info.auth_status) {
        case -4:
          Dialog.alert({
            message: info.auth_msg,
            confirmButtonText: '前往'
          }).then(()=>{
            this.$router.push({ path: '/realName' });
          })
          break;
        case -3:
          Dialog.alert({
            message: info.auth_msg
          })
          break;
        case -2:
          Dialog.alert({
            message: info.auth_msg,
            confirmButtonText: '前往'
          }).then(()=>{
            this.$router.push({ path: '/realName' });
          })
          break;
        case -1:
          Dialog.alert({
            message: info.auth_msg
          })
          break;
        case 1:
          let index = parseInt(id) == 10?0:1
          if(this.platform[index].num >= 2) {
            Dialog.alert({
              title: '账号已达到上限',
              message: '每个平台最多添加2个账号'
            })
            return
          }
          this.$router.push({ path: '/AddAccount', query: { type: id } });
          break;
        default:
          break;
      }
    }
  }
</script>
<style lang="stylus" scoped>
@import '~@assets/stylus/page/authentication';
</style>