<!--
 * @Author: your name
 * @Date: 2019-11-07 17:48:53
 * @LastEditTime: 2019-12-11 15:25:51
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 -->
<!-- -->
<template>
  <h-view id="my-info">
    <h-header class="bar-custom">
      <div slot="center">个人中心</div>
    </h-header>

    <div class="top" style="margin-top:-1px;">
      <div class="card-top">
        <img :src="upLoadObj" @click="checkType" >
        <div class="sign">
          <span>{{ user_phone }}</span>
          <div>
            电子签
            <p
              :class="[elecStatus?'across':'un-across']"
              @click="certification"
            >{{ elecStatusDesceibe }}</p>
          </div>
        </div>
      </div>
      <div class="card">
        <div class="card-info">
          <div class="card-bottom">
            <div v-if="(user_bp_type!=='TENANT')&&(user_bp_type!=='GUTA')" @click="goStart">
              <img src="@/assets/myInfo/car.png" >
              <p>发车申请</p>
            </div>
            <div v-if="(user_bp_type==='TENANT')||(user_bp_type==='GUTA')" @click="changePay">
              <img src="@/assets/myInfo/pay.png" >
              <p>首付还款</p>
            </div>
            <div v-if="(user_bp_type==='TENANT')||(user_bp_type==='GUTA')" @click="changeRent">
              <img src="@/assets/myInfo/refund.png" >
              <p>租金还款</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <h-content class="my-content">
      <div class="content-top">
        <div class="userInfo">我的合同</div>
        <div class="my-contract">
          <div class="content-wrap" @click="goSign">
            <span
              v-if="signCount > 0"
              :class="{'content-wrap-class-width':signCount>99, 'content-wrap-class':signCount<99}"
            >{{ signCount > 99 ? '99+' : signCount }}</span>
            <img src="@/assets/myInfo/unSign.png" >
            <p>待签约</p>
          </div>
          <!-- <div class="content-wrap" @click="goConfirm">
            <span
              :class="{'content-wrap-class-width':confirmCount>99, 'content-wrap-class':confirmCount<99}"
            >{{ confirmCount > 99 ? '99+' : confirmCount }}</span>
            <img src="@/assets/myInfo/unConfirm.png" >
            <p>待确认</p>
          </div>-->
          <div v-if="user_bp_type!=='FACTORY'" class="content-wrap" @click="goVideoSign">
            <span
              v-if="vedioCount > 0"
              :class="{'content-wrap-class-width':vedioCount>99, 'content-wrap-class':vedioCount<99}"
            >{{ vedioCount > 99 ? '99+' : vedioCount }}</span>
            <img src="@/assets/myInfo/unFace.png" >
            <p>待面签</p>
          </div>
          <div
            v-if="(user_bp_type==='TENANT')||(user_bp_type==='GUTA')"
            class="content-wrap"
            @click="goCarConfirm"
          >
            <span
              v-if="carCount > 0"
              :class="{'content-wrap-class-width':carCount>99, 'content-wrap-class':carCount<99}"
              style="margin-left:5px;"
            >{{ carCount > 99 ? '99+' : carCount }}</span>
            <img src="@/assets/myInfo/carConfirm.png" >
            <p>发车确认</p>
          </div>
        </div>
        <list-item :item-height="44" class="list">
          <item
            v-if="(user_bp_type==='TENANT')||(user_bp_type==='GUTA')"
            @click.native="goReimburse"
          >
            <img slot="left-icon" src="@/assets/myInfo/myRefund.png" class="left-icon" >
            <div slot="name">我的还款</div>
          </item>
          <!--  <item @click.native="changeDrawbackList">
            <img slot="left-icon" src="@/assets/myInfo/repay.png" class="left-icon" >
            <div slot="name">业务退款</div>
          </item>-->
          <item @click.native="goMyProduct">
            <img slot="left-icon" src="@/assets/myInfo/collect.png" class="left-icon" >
            <div slot="name">我的收藏</div>
            <div
              v-if="productCount > 0"
              slot="right-icon"
              :class="{'right-icon-width':productCount>99, 'right-icon':productCount<99}"
            >{{ productCount > 99 ? '99+' : productCount }}</div>
          </item>
          <item @click.native="changeHelp">
            <img slot="left-icon" src="@/assets/myInfo/help.png" class="left-icon" >
            <div slot="name">帮助与反馈</div>
          </item>
          <item>
            <img slot="left-icon" src="@/assets/myInfo/about.png" class="left-icon" >
            <div slot="name">关于徐工</div>
          </item>
          <item @click.native="updateVersion">
            <img slot="left-icon" src="@/assets/myInfo/refresh.png" class="left-icon" >
            <div slot="name">检查更新</div>
          </item>
          <item @click.native="openTest">
            <img slot="left-icon" src="@/assets/myInfo/refresh.png" class="left-icon" >
            <div slot="name">当前版本</div>
            <div slot="content">{{ currentVersion }}</div>
          </item>
          <item @click.native="logOut">
            <img slot="left-icon" src="@/assets/myInfo/exit.png" class="left-icon" >
            <div slot="name">退出登录</div>
          </item>
        </list-item>
        <button @click="approveBtn ? unBind() : changePageHead()">{{ description }}</button>
      </div>
    </h-content>
    <role-switch
      v-show="roleSwitchFlag"
      ref="roleSwitch"
      :roleList="roleList"
      @roleConfirm="roleConfirm"
      @roleCancle="roleCancle"
    />
  </h-view>
</template>
<script>
import roleSwitch from './role-switch-component'
import defaultImg from '../../assets/myInfo/1.png'
export default {
  components: {
    roleSwitch,
  },
  data () {
    return {
      currentVersion: process.env.currentVersion,
      upLoadObj: defaultImg, // 上传的图片
      flag: true,
      isAGENT: false,
      elecStatusDesceibe: '',
      user_bp_status: '',
      user_bp_class: '',
      bp_id: '',
      user_phone: '',
      user_bp_name: '',
      user_bp_type: '',
      signCount: '0',
      carNum: '0',
      confirmCount: '0',
      vedioCount: '0',
      productCount: '0',
      carCount: '0',
      description: '',
      bp_identity: '',
      approveBtn: false,
      elecStatus: false,
      roleSwitchFlag: false, // 选择角色模态框显示标志
      roleList: [
        {
          bp_type: 'TENANT',
          bp_type_desc: '主承租人',
        },
        {
          bp_type: 'GUTA',
          bp_type_desc: '担保人',
        },
      ],
    }
  },
  watch: {
    user_bp_type (newVal, oldVal) {
      if (newVal === 'AGENT') {
        this.isAGENT = true
      } else {
        this.isAGENT = false
      }
    },
    bp_identity (newVal, oldVal) {
      switch (newVal) {
        case 'NP_NO': {
          this.elecStatusDesceibe = '个人待认证'
          this.elecStatus = false
          break
        }
        case 'NP_YES': {
          this.elecStatusDesceibe = '个人认证通过'
          this.elecStatus = true
          break
        }
        case 'ORG_NO': {
          this.elecStatusDesceibe = '企业待认证'
          this.elecStatus = false
          break
        }
        case 'ORG_YES': {
          this.elecStatusDesceibe = '企业认证通过'
          this.elecStatus = true
          break
        }
        case 'ORG_L_NO': {
          this.elecStatusDesceibe = '法人待认证'
          this.elecStatus = false
          break
        }
        case 'ORG_L_YES': {
          this.elecStatusDesceibe = '法人认证通过'
          this.elecStatus = true
          break
        }
        case 'ORG_AUTH_NO': {
          this.elecStatusDesceibe = '授权人待认证'
          this.elecStatus = false
          break
        }
        case 'ORG_AUTH_YES': {
          this.elecStatusDesceibe = '授权人认证通过'
          this.elecStatus = true
          break
        }
        default: {
          this.elecStatusDesceibe = '用户未绑定'
          this.elecStatus = false
          break
        }
      }
    },
  },
  created () {},
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.userQuery()
      vm.numQuery()
    })
    next()
  },
  activated () {},
  methods: {
    openTest () {
      cordova.InAppBrowser.open('http://www.baidu.com', '_blank', 'location=yes')
    },
    // 查询头像
    getHead () {
      let vm = this
      let url = process.env.basePath + 'app_attment_query'
      let param = {
        master: {
          source_type: 'HLS_APP_USER',
          pkvalue: vm.bp_id,
        },
      }
      hlsPopup.showLoading('请稍候')
      vm.$post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          if (res.info) {
            vm.upLoadObj = process.env.filePath +
              'attachment_id=' +
              res.info.attachment_id +
              '&access_token=' +
              window.localStorage.access_token
          }
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
    // 选择角色后确定
    roleConfirm (role) {
      this.roleSwitchFlag = false
      console.log('选择后的角色为:' + role)
    },
    // 选择角色后取消
    roleCancle () {
      this.roleSwitchFlag = false
    },
    // 监听用户状态
    watchBpStatus () {
      if (!this.bp_id && this.user_bp_status === 'NEW') {
        this.description = '用户绑定'
        this.approveBtn = false
      } else if (this.bp_id && this.user_bp_status === 'NEW') {
        this.description = '待提交'
      } else if (this.bp_id && this.user_bp_status === 'APPROVED') {
        this.description = '解除绑定'
        this.approveBtn = true
      } else if (
        (this.bp_id && this.user_bp_status === 'RETURN') ||
        (this.bp_id && this.user_bp_status === 'REJECT')
      ) {
        this.description = '审核未通过'
      } else {
        this.description = '审批中'
      }
    },
    // 进入待签约功能,客户类型为经销商则进入经销商功能,非经销商则进入合同签约
    goSign () {
      if (this.bp_id) {
        if (this.user_bp_type === 'AGENT') {
          this.$router.push({
            name: 'ContractList',
          })
        } else {
          this.$router.push({
            name: 'ContractSigning',
            params: {
              user_bp_type: this.user_bp_type,
            },
          })
        }
      } else {
        hlsPopup.showLongCenter('请先进行用户绑定')
      }
    },
    // 进入待确认,(进件确认)
    goConfirm () {
      this.$router.push({
        name: 'IntoList',
      })
      // this.$router.push({
      //   name: 'IframTest',
      // })
    },
    // 进入我的还款
    goReimburse () {
      if (this.bp_id) {
        this.$router.push({
          name: 'ReimburseMyselfList',
        })
      } else {
        hlsPopup.showLongCenter('请先进行用户绑定')
      }
    },
    // 进入我的收藏
    goMyProduct () {
      this.$router.push({
        name: 'MyProductList',
      })
    },
    // 进入发车申请
    goStart () {
      if (this.bp_id) {
        this.$router.push({
          name: 'StartList',
        })
      } else {
        hlsPopup.showLongCenter('请先进行用户绑定')
      }
    },
    // 进入发车确认
    goCarConfirm () {
      if (this.bp_id) {
        this.$router.push({
          name: 'ConfirmList',
        })
      } else {
        hlsPopup.showLongCenter('请先进行用户绑定')
      }
    },
    goVideoSign () {
      if (this.bp_id) {
        this.$router.push({
          name: 'VideoSign',
        })
      } else {
        hlsPopup.showLongCenter('请先进行用户绑定')
      }
    },
    changeHelp () {
      this.$router.push({
        name: 'HelpList',
      })
    },
    changeDrawbackList () {
      if (this.bp_id) {
        this.$router.push({
          name: 'DrawbackList',
        })
      } else {
        hlsPopup.showLongCenter('请先进行用户绑定')
      }
    },
    changePay () {
      if (window.localStorage.getItem('bp_id') !== 'undefined') {
        this.$router.push({
          name: 'FirstPay',
        })
      } else {
        hlsPopup.showLongCenter('请先进行用户绑定')
      }
    },
    changeRent () {
      if (window.localStorage.getItem('bp_id') !== 'undefined') {
        this.$router.push({
          name: 'NewList',
        })
      } else {
        hlsPopup.showLongCenter('请先进行用户绑定')
      }
    },
    updateVersion () {
      if (vum.Platform.isAndroid()) {
        this.hote_update_version(
          '发现新版本是否更新',
          'http://hlsapp.hand-china.com/file/XCMG/www/android/www.zip'
        )
      } else {
        this.hote_update_version(
          '发现新版本是否更新',
          'http://hlsapp.hand-china.com/file/XCMG/www/ios/www.zip'
        )
      }
    },
    hote_update_version (content, url) {
      hlsPopup.showConfirm({
        title: '版本更新',
        content: content,
        onConfirm: function (index) {
          if (index === 1) {
            hotpatch.updateNewVersion(url)
          }
        },
      })
    },
    logOut () {
      let vm = this
      hlsPopup.showConfirm({
        title: '提示',
        content: '确定退出',
        onConfirm: function (index) {
          if (index === 1) {
            let width = window.localStorage.getItem('width')
            let height = window.localStorage.getItem('height')
            window.localStorage.clear()
            window.localStorage.setItem('width', width)
            window.localStorage.setItem('height', height)
            vm.$router.push('/login')
          }
        },
      })
    },
    unBind () {
      let vm = this
      hlsPopup.showConfirm({
        title: '提示',
        content: '确定解除绑定?',
        onConfirm: function (index) {
          if (index === 1) {
            // window.localStorage.clear()
            // vm.$router.push('/login')
            let myPhone = window.localStorage.getItem('user_phone')
            let myPassword = window.localStorage.getItem('password')
            let url = process.env.basePath + 'bp_unbind'
            let param = {
              master: {
                phone: myPhone,
                password: myPassword,
              },
            }
            vm.hlsPopup.showLoading('请稍候')
            vm.hlsHttp
              .post(url, param)
              .then(function (res) {
                vm.hlsPopup.hideLoading()
                if (res.result === 'S') {
                  vm.hlsPopup.showLongCenter('解绑成功')
                  vm.userQuery()
                  // vm.flag = true
                  vm.approveBtn = false
                } else {
                  vm.hlsPopup.showLongCenter(res.message)
                }
              })
              .catch(() => {
                vm.hlsPopup.showLongCenter('传入参数异常')
              })
          }
        },
      })
    },
    checkType () {
      let vm = this
      this.hlsPopup.showActionSheet({
        buttonArray:
          this.bp_id === undefined
            ? ['修改头像']
            : ['修改头像', '用户信息', '角色切换'],
        callback: index => {
          if (index === 0) {
            this.imgUploadShow(vm.bp_id)
          } else if (index === 1) {
            this.changePageHead()
          } else if (index === 2) {
            this.$refs.roleSwitch.show()
          }
        },
      })
    },
    // 图片上传入口
    imgUploadShow (check_id) {
      let vm = this
      // vm.upload_list = []
      hlsPopup.showActionSheet({
        titleText: '请选择照片',
        buttonArray: ['拍照', '从相册取'],
        callback: index => {
          if (index === 0) {
            vm.imgUploadOpenCamera(check_id)
          } else {
            vm.imgUploadTakePicture(check_id)
          }
        },
      })
    },
    imgUploadOpenCamera (check_id) {
      let vm = this
      let obj = {
        pkvalue: check_id,
        source_type: 'HLS_APP_USER',
        picture: '',
        check_id: check_id,
        filePath: '',
        attachment_id: '',
        user_id: 1,
        fileName: '',
      }
      let cameraoptions = {
        quality: 100,
      }
      let success = function (imgdata) {
        obj.picture = imgdata
        obj.filePath = imgdata
        vm.upLoadObj = obj.picture
        vm.save_picture(obj)
      }
      let error = function () {
        hlsPopup.showLongCenter('请拍照')
      }
      hlsUtil.openCamera(cameraoptions, success, error)
    },
    imgUploadTakePicture (check_id) {
      let vm = this
      let obj = {
        pkvalue: check_id,
        source_type: 'HLS_APP_USER',
        picture: '',
        check_id: check_id,
        filePath: '',
        attachment_id: '',
        user_id: 1,
        fileName: '',
      }
      let cameraoptions = {
        quality: 100,
      }
      let success = function (imgUrl) {
        obj.picture = imgUrl[0]
        obj.filePath = imgUrl[0]
        vm.upLoadObj = obj.picture
        // 拍完一张立马执行保存图片逻辑
        vm.save_picture(obj)
      }
      let error = function () {
        hlsPopup.showLongCenter('请选择图片')
      }
      vm.hlsUtil.takePicture(cameraoptions, success, error)
    },
    openCamera (ocrType, type) {
      let vm = this
      let cameraoptions = {
        quality: 60,
        width: 1843,
        height: 1382,
      }
      let success = function (imgdata) {
        if (!imgdata) {
          hlsPopup.showLongCenter('请拍照')
        }
      }
      let error = function () {
        hlsPopup.showLongCenter('请拍照')
      }
      hlsUtil.openCamera(cameraoptions, success, error)
    },
    takePicture (ocrType, type) {
      let vm = this
      var cameraoptions = {
        quality: 70,
        width: 1843,
        height: 1382,
        maxCount: 1,
      }
      let success = function (imgUrl) {
        if (imgUrl.length === 0) {
          hlsPopup.showLongCenter('请选择一张图片')
        }
      }
      let error = function () {
        hlsPopup.showLongCenter(error)
      }
      vm.hlsUtil.takePicture(cameraoptions, success, error)
    },
    save_picture (obj) {
      if (obj) {
        let success = function () {
          hlsPopup.showLongCenter('头像上传成功')
        }
        hlsUtil.fileUploadSvc(obj, success)
      } else {
        hlsPopup.hideLoading()
      }
    },
    changePageHead () {
      let vm = this
      if (vm.bp_id) {
        if (
          vm.user_bp_status === 'NEW' ||
          vm.user_bp_status === 'REJECT' ||
          vm.user_bp_status === 'RETURN'
        ) {
          vm.flag = true
          if (vm.user_bp_class === 'NP') {
            vm.$router.push({
              name: 'NaturePerson',
              params: {
                bp_id: this.bp_id,
                user_bp_name: this.user_bp_name,
              },
            })
          } else {
            this.$router.push({
              name: 'EnterpriseNew',
              params: {
                bp_id: this.bp_id,
                user_bp_name: this.user_bp_name,
              },
            })
          }
        } else if (vm.user_bp_status === 'APPROVED') {
          vm.flag = false
          if (vm.user_bp_class === 'NP') {
            vm.$router.push({
              name: 'NaturePerson',
              params: {
                bp_id: this.bp_id,
                user_bp_name: this.user_bp_name,
                isAGENT: this.isAGENT,
                status: 'APPROVED',
                isMultiRole: this.isMultiRole,
              },
            })
          } else {
            this.$router.push({
              name: 'EnterpriseNew',
              params: {
                bp_id: this.bp_id,
                user_bp_name: this.user_bp_name,
                isAGENT: this.isAGENT,
                status: 'APPROVED',
                isMultiRole: this.isMultiRole,
              },
            })
          }
        } else if (vm.user_bp_status === 'APPROVING') {
          vm.flag = true
          this.hlsPopup.showLongCenter('您的绑定申请还在流程中')
        }
      } else {
        vm.flag = true
        this.$router.push({
          name: 'UserBind',
        })
      }
    },
    userQuery () {
      let vm = this
      let url = $config.basePath + 'user_query'
      let param = {
        phone: window.localStorage.getItem('user_phone'),
      }
      vm.$post(url, param).then(function (res) {
        if (res.result === 'S') {
          if (res.info.user_bp_status === 'APPROVED') {
            vm.flag = false
          }
          vm.user_bp_status = res.info.user_bp_status
          vm.user_bp_class = res.info.user_bp_class
          vm.bp_id = res.info.user_bp_id
          vm.bp_identity = res.info.bp_identity
          window.localStorage.setItem('bp_id', res.info.user_bp_id)
          window.localStorage.setItem('bp_name', res.info.user_bp_name)
          vm.user_bp_name = res.info.user_bp_name
          vm.user_bp_type = res.info.user_bp_type
          vm.user_phone = res.info.user_phone
          vm.watchBpStatus()
          vm.getHead()
          if (vm.user_bp_type === 'AGENT') {
            vm.isAGENT = true
          } else {
            vm.isAGENT = false
          }
          if (vm.user_bp_type === 'GUTA' || vm.user_bp_type === 'TENANT') {
            vm.isMultiRole = true
          } else {
            vm.isMultiRole = false
          }
        } else {
          this.hlsPopup.showLongCenter(res.message)
        }
      })
    },
    numQuery () {
      let vm = this
      let url = $config.basePath + 'number_display_query'
      let param = {
        user_phone: window.localStorage.getItem('user_phone'),
      }
      vm.$post(url, param).then(function (res) {
        if (res.result === 'S') {
          if ('info' in res) {
            vm.signCount = res.info.con_confirm_num || 0
            // vm.confirmCount = res.info.con_confirm_num
            vm.productCount = res.info.collect_num || 0
            vm.carCount = res.info.car_confirm_num || 0
          }
        } else {
          this.hlsPopup.showLongCenter(res.message)
        }
      })
    },

    // 认证入口
    async certification () {
      let vm = this
      if (vm.bp_id) {
        if (
          vm.bp_identity === 'NP_NO' ||
          vm.bp_identity === 'ORG_L_NO' ||
          vm.bp_identity === 'ORG_AUTH_NO'
        ) {
          let authUrl = await vm.getNpCertificationUrl()
          if (authUrl) {
            vm.$router.push({
              name: 'Certification',
              params: {
                authUrl: authUrl,
              },
            })
          } else {
            // hlsPopup.showLongCenter('获取认证url失败')
          }
        } else if (vm.bp_identity === 'ORG_NO') {
          let authUrl = await vm.getOrgCertificationUrl()
          if (authUrl) {
            vm.$router.push({
              name: 'Certification',
              params: {
                authUrl: authUrl,
              },
            })
          } else {
            // hlsPopup.showLongCenter('获取认证url失败')
          }
        } else {
          hlsPopup.showLongCenter('您已认证通过')
        }
      } else {
        hlsPopup.showLongCenter('请先进行用户绑定')
      }
    },
    // 获取个人认证url
    async getNpCertificationUrl () {
      let vm = this
      let url = $config.basePath + 'auth_user_sign'
      let param = {
        phone: vm.user_phone,
      }
      hlsPopup.showLoading('请稍候')
      let res = await vm.$post(url, param)
      hlsPopup.hideLoading()
      if (res.info.code === 0) {
        return res.info.data.authUrl
      } else {
        hlsPopup.showLongCenter(res.info.msg)
        return null
      }
    },
    // 获取企业认证url
    async getOrgCertificationUrl () {
      let vm = this
      let url = $config.basePath + 'auth_company_sign'
      let param = {
        phone: vm.user_phone,
      }
      hlsPopup.showLoading('请稍候')
      let res = await vm.$post(url, param)
      hlsPopup.hideLoading()
      if (res.info.code === 0) {
        return res.info.data.authUrl
      } else {
        hlsPopup.showLongCenter(res.info.msg)
        return null
      }
    },
  },
}
</script>

<style lang="less" scoped>
#my-info {
  .card-top {
    width: 330px;
    margin: 0 auto;
    height: 110px;
    display: flex;
    align-items: center;
    .sign {
      margin-left: 24px;
      height: 55px;
      span {
        font-family: PingFangSC-Semibold;
        font-size: 18px;
        color: #fff;
        margin-top: 10px;
      }
      div {
        display: flex;
        align-items: center;
        margin-top: 20px;
        font-family: PingFangSC-Regular;
        font-size: 12px;
        color: #ffffff;
        letter-spacing: 0;
        p {
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 0 5px;
          height: 20px;
          margin-left: 10px;
          border: 1px solid #fff;
          border-radius: 4px;
          font-family: PingFangSC-Regular;
          font-size: 12px;
          color: #ffffff;
          letter-spacing: 0;
        }
        .across {
          background-color: #1d3fff;
        }
        .un-across {
          background: #0523ce;
        }
      }
    }
    img {
      width: 59px;
      height: 59px;
      border-radius: 50%;
      border: 1px solid #00469c;
    }
  }
  .top {
    width: 100%;
    height: 206px;
    background: url("../../assets/myInfo/back.png") no-repeat;
    background-size: 100% 156px;
    background-color: #efefef;
    .header {
      background-color: rgba(0, 0, 0, 0);
      .top-word {
        font-family: PingFangSC-Semibold;
        font-size: 17px;
        letter-spacing: 0.61px;
        color: #fff;
      }
    }
    .card {
      width: 359px;
      height: 108px;
      margin: 0 auto;
      z-index: 10;
      position: relative;
      top: 0px;
      left: 0px;
      background-color: #fff;
      border-radius: 4px;
      .card-info {
        width: 295px;
        margin: 0 auto;
        .card-bottom {
          height: 100px;
          width: 285px;
          margin: 0 auto;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          text-align: center;
          p {
            font-family: PingFangSC-Regular;
            font-size: 13px;
            color: #3c3d48;
            margin-top: 5px;
          }
          img {
            width: 48px;
            height: 48px;
          }
          div:not(:first-child) {
            margin-left: 60px;
          }
        }
      }
    }
  }
  .my-content {
    background-color: #efefef;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    .content-top {
      width: 359px;
      height: 121px;
      background-color: #fff;
      border-radius: 4px;
      margin-top: 18px;
    }
    .userInfo {
      height: 45px;
      line-height: 45px;
      color: @headerColor;
      font-size: 15px;
      margin-left: 16px;
      position: relative;
    }
    .userInfo::before {
      content: "";
      display: block;
      width: 4px;
      height: 20px;
      background-color: @headerColor;
      position: absolute;
      left: -15px;
      top: 12px;
    }
    .my-contract {
      width: 295px;
      margin: 0 auto;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      text-align: center;
      .content-wrap {
        position: relative;
        .content-wrap-class {
          position: absolute;
          top: -10px;
          left: 25px;
          font-size: 10px;
          width: 18px;
          height: 18px;
          text-align: center;
          line-height: 18px;
          background-color: red;
          color: #fff;
          border-radius: 50%;
        }
        .content-wrap-class-width {
          position: absolute;
          top: -10px;
          left: 25px;
          font-size: 10px;
          width: 24px;
          height: 18px;
          text-align: center;
          line-height: 18px;
          background-color: red;
          color: #fff;
          border-radius: 50%;
        }
      }
      img {
        width: 38px;
        height: 38px;
      }
      p {
        font-family: PingFangSC-Regular;
        font-size: 12px;
        color: #383f45;
        margin-top: 5px;
      }
      div:not(:first-child) {
        margin-left: 85px;
      }
    }
    .list {
      width: 359px;
      margin: 0 auto;
      background-color: #fff;
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #656464;
      letter-spacing: 0;
      line-height: 18px;
      margin-top: 25px;
    }
  }
  button {
    width: 359px;
    height: 40px;
    background: @headerColor;
    border-radius: 4px;
    color: #fff;
    margin: 0 auto;
    margin-bottom: 68px;
    margin-top: 10px;
  }
}
.content {
  background-color: #fff;
}
.right-icon {
  width: 18px;
  height: 18px;
  font-size: 10px;
  text-align: center;
  line-height: 18px;
  background-color: red;
  color: #fff;
  border-radius: 50%;
}
.right-icon-width {
  width: 24px;
  height: 18px;
  font-size: 10px;
  text-align: center;
  line-height: 18px;
  background-color: red;
  color: #fff;
  border-radius: 50%;
}
@media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) {
  .platform-ios {
    #my-info {
      button {
        margin-bottom: 98px;
      }
    }
  }
}
// iPhoneXR适配
@media (device-width: 414px) and (device-height: 896px) {
  .platform-ios {
    #my-info {
      button {
        margin-bottom: 98px;
      }
    }
  }
}
</style>