contract/src/views/sign.vue

<template>
    <multi-color-background>
      <div class="main">
        <h1 class="title">我的签名</h1>
        <mt-navbar class="navbar" v-model="selected">
          <mt-tab-item id="1">有效签名</mt-tab-item>
          <mt-tab-item id="2">审核中</mt-tab-item>
          <mt-tab-item id="3">已驳回</mt-tab-item>

        </mt-navbar>
        <button class="add-sign" @click="popupVisible=true">
          <i class="icon-add">+</i>创建签名
        </button>
        <mt-tab-container v-model="selected">
          <mt-tab-container-item id="1">
            <sign-block @setDefault="setDefault" v-for="item,index in signData" :key="index" v-model="defaultSign" :sign-data="item"></sign-block>
          </mt-tab-container-item>
          <mt-tab-container-item id="2">
            <!--<mt-cell v-for="n in 4" :title="'测试 ' + n" />-->
          </mt-tab-container-item>

        </mt-tab-container>
      </div>
      <mt-popup
        v-model="popupVisible">
        <div class="sign-button-container">
          <button class="sign-button">拍照签名</button>
          <button class="sign-button" @click="$router.push('/draw-sign')">手绘签名</button>
          <button class="sign-button">模板签名</button>
          <button class="cancel-button" @click="popupVisible=false">取消</button>
        </div>

      </mt-popup>
    </multi-color-background>

</template>

<script>
    import MultiColorBackground from "../components/multiColorBackground";
    import SignBlock from "../components/signBlock";
    export default {
        name: "sign",
      components: {SignBlock, MultiColorBackground},
      data(){
          return{
            selected:'1',
            defaultSign:'1',
            popupVisible:false,
            signData:[
              {
                id:'1',
                src:''
              },
              {
                id:'2',
                src:''
              }
            ]
          }
    },
      methods:{
          setDefault(){
            console.log('hellp')
          }
      }
    }
</script>

<style scoped>
  .navbar{
    margin-top: 0.9rem;
  }
  .main{
    width: 9.2rem;
    margin: 0 0.4rem;
  }
  .add-sign{
    width: 100%;
    height: 1.4rem;
    background-color: white;
    margin-top: 0.4rem;
    border-radius: 0.1rem;
    border: none;
    font-size: 0.4rem;
    color:  #60c0ff;
  }
  .sign-button-container{
    width: 7.2rem;
    margin: 0.7rem 0.4rem;
  }
  .sign-button{
    width: 100%;
    height: 1.1rem;
    margin-bottom: 0.4rem;
    background-color: #60c0ff;
    border-radius: 0.6rem;
    border: none;
    color: white;
    font-size: 0.4rem;
  }
  .cancel-button{
    width: 100%;
    height: 1.1rem;
    border-radius: 0.6rem;
    border: solid 1px #60c0ff;
    background-color: white;
    color: #60c0ff;
    font-size: 0.4rem;
  }
</style>