sign-stream/src/views/reg-details/index.vue

<script setup>
import {ref,computed} from "vue";
import {useUserStore} from '@/stores/userStore.js'
import {storeToRefs} from "pinia";
import dayjs from "dayjs";
import {showToast} from "vant";
import {save_register_info, send_code, upload_img} from "@/apis/index.js";
import {areaList} from "@vant/area-data";
import { cloneDeep } from 'lodash';
import {useRouter} from "vue-router";
const router = useRouter();
const userStore = useUserStore()
const {submitReturnData,telNum,selectAddress,temSubmitReturnData} = storeToRefs(userStore);
const btnStatus=ref(0)
const isCountingDown = ref(false);
const countdownInterval = ref(null);
const code=ref('')
const timeLeft = ref(60);
const showBottom = ref(false)
const sendCodeApi=async ()=>{
  const data={
    TelNum:telNum.value
  }
  const res=await send_code(data)
  if (res.status===0){
  }
}
const rightClick=async ()=>{
  const res=await save_register_info(submitReturnData.value)
  if (res.status===0){
    showToast({
      message:'修改成功',
      className: 'particulars-detail-popup'
    });
  }
}
const leftClick=()=>{
  switch (btnStatus.value){
    case 0:
      temSubmitReturnData.value = cloneDeep(submitReturnData.value)
      btnStatus.value=1
     break
    case 1:
      submitReturnData.value=cloneDeep(temSubmitReturnData.value)
      btnStatus.value=0
      break
  }
}
const btnLabel=computed(()=>{
  switch (btnStatus.value){
    case 0:
      return '修改'
    case 1:
      return '取消'
  }
})
const afterRead = async (file) => {
  const res = await upload_img({
    file: file.file,
    source: "artwork",
    type: 'image'
  })
  if (res.status === 0) {
    submitReturnData.value.artistPhoto=res.data.ori_url
  }
}
const confirmAddress = (data) => {
  submitReturnData.value.address=JSON.stringify(data.selectedOptions)
  showBottom.value = false
}
const sendCode = async () => {
  if (!isCountingDown.value){
    if(!/^1[3-9]\d{9}$/.test(telNum.value)){
      showToast({
        message:'请输入合规的手机号码',
        className:'particulars-detail-popup'
      });
      return
    }
    await sendCodeApi()

  }
  isCountingDown.value = true;
  countdownInterval.value = setInterval(() => {
    if (timeLeft.value > 0) {
      timeLeft.value--;
    } else {
      clearInterval(countdownInterval.value);
      isCountingDown.value = false;
      timeLeft.value = 60;
    }
  }, 1000);
};
const goRouter=()=>{
  router.push(`/title-forward/replace-id-card`)
}
</script>
<template>
  <div class="container">
    <div class="content1">
      报名日期：{{userStore.formatToCustomDate(submitReturnData.createdAt)}}
    </div>
    <div class="content2">
      <div class="wrap1">
        <div class="wrap1_1">身份证人像面</div>
        <div class="wrap1_2"><img class="wrap1_2_1" :src="submitReturnData.idCardPhoto">
          <img class="wrap1_2_2" src="@/assets/images/zu1179@2x.png" alt="">
        </div>
      </div>
      <div class="wrap1">
        <div class="wrap1_1">身份证国徽面</div>
        <div class="wrap1_2"><img class="wrap1_2_1" :src="submitReturnData.idCardBackPhoto">
          <img class="wrap1_2_2" src="@/assets/images/zu1179@2x.png" alt="">
        </div>
      </div>
    </div>
    <div class="content3">
      <div class="wrap1">
        <div class="wrap1_1">
          <div class="wrap1_1_1">姓名</div>
          <div class="wrap1_1_2">{{submitReturnData.artistName}}</div>
        </div>
      </div>
      <div class="wrap1">
        <div class="wrap1_1">
          <div class="wrap1_1_1">性别</div>
          <div class="wrap1_1_2">{{submitReturnData.gender===1?'男':'女'}}</div>
        </div>
      </div>
      <div class="wrap1">
        <div class="wrap1_1">
          <div class="wrap1_1_1">身份证号码</div>
          <div class="wrap1_1_2">{{submitReturnData.idCard}}</div>
        </div>
      </div>
      <div class="wrap1">
        <div class="wrap1_1">
          <div class="wrap1_1_1">有效日期</div>
          <div class="wrap1_1_2">{{dayjs(submitReturnData.idCardStartDate).format('YYYY年MM月DD日')}}-{{dayjs(submitReturnData.idCardEndDate).format('YYYY年MM月DD日')}}</div>
        </div>
      </div>
    </div>
    <div class="content7">
      <div class="wrap1">*身份证即将到期/已到期，请及时更换→→→</div>
      <div class="wrap2" @click="goRouter">更换身份证</div>
    </div>
    <div class="content4">
      <div class="wrap1">近照</div>
      <div class="wrap2">
        <div class="wrap2_1">
          <img :src="submitReturnData.artistPhoto" alt="">
        </div>
        <div v-show="btnStatus===0" class="wrap2_2">
          <img src="@/assets/images/zu1181@2x.png" alt="">
        </div>
        <div  class="wrap2_3" v-show="btnStatus===1">
          <van-uploader :afterRead="afterRead">
            <div>更换</div>
          </van-uploader>
        </div>

      </div>
    </div>
    <van-popup
        v-model:show="showBottom"
        position="bottom"
    >
      <van-area title="请选择通讯地址" @cancel="showBottom=false"
                @confirm="confirmAddress" :area-list="areaList"/>
    </van-popup>
    <div class="content6">
      <div class="wrap1">
        <div class="wrap1_1">
          <div class="wrap1_1_1">手机号 <span class="c86">(+86)</span> </div>
          <div class="wrap1_1_2">
            <input placeholder="手机号" v-model="submitReturnData.phoneNum" v-no-space>
          </div>
        </div>
      </div>
      <div class="wrap3" v-show="btnStatus===1">
        <div class="wrap3_1">
          <div class="wrap2_1">验证码 </div>
          <div class="wrap2_2" >
            <input placeholder="验证码" v-model="code" v-no-space>
          </div>
          <div class="wrap2_3" @click="sendCode"> {{ isCountingDown ? `(${timeLeft})重新发送` : '发送验证码' }}</div>
        </div>
      </div>
      <div class="wrap1">
        <div class="wrap1_1">
          <div class="wrap1_1_1">通讯地址</div>
          <div class="wrap1_1_2">{{JSON.parse(submitReturnData.address).map(x=>x.text).join('/')}}
          </div>
          <div class="wrap1_1_3" v-show="btnStatus===1" @click="showBottom=true">
            <img src="@/assets/images/gh123.png" alt="">
          </div>
        </div>
      </div>
      <div class="wrap2">
        <div class="wrap2_1">详细地址</div>
        <div class="wrap2_2">
               <textarea :disabled="btnStatus!==1" rows="4" cols="50" v-model="submitReturnData.address1" placeholder="在此输入详细地址">
</textarea>
        </div>
      </div>

    </div>
    <div class="content5">
      <div class="wrap1" @click="leftClick" :class="[`btn${btnStatus}`]">{{ btnLabel }}</div>
      <div class="wrap2" @click="rightClick">确认</div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.container {
  padding: 14px 22px 75px;
  .content7{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    .wrap2{
      font-size: 14px;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 116px;
      height: 30px;
      background-color:#E74747 ;
      border-radius: 15px;
    }
    .wrap1{
    font-size: 10px;
      color: #E74747;
    }
  }
  .content6 {
    margin-top: 10px;
    background-color: #fff;
    overflow: hidden;
    border-radius: 12px;
    .wrap3{

      padding-left: 14px;
      padding-right: 14px;
      .wrap3_1{
        padding-top: 14px;
        padding-bottom: 14px;
        display: flex;
        border-bottom: 1px solid #BBC5E0;
      }
      .wrap2_1{

        flex: 0 0 auto;
        font-size: 12px;
        width: 92px;
        border-right: 1px solid #BBC5E0;
        display: flex;
        justify-content: center;
        align-items: center;
        .wrap2_1_1{
          font-size: 10px;
        }
      }
      .wrap2_3{
        display: flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
        color: #2159C4;
        font-size: 12px;
      }
      .wrap2_2{
        color: #24437E;
        font-size: 12px;
        flex-shrink: 1;
        padding-left: 10px;
        input{
          width: 100%;
          border: none;
          &::placeholder{
            color: #CECECE;
            font-size: 12px;
          }
          &:focus{
            color: #24437E;
            font-size: 12px;
            outline: none;
            border: none;
          }
        }
      }
    }
    .wrap2{
      padding-left: 14px;
      padding-right: 14px;
      .wrap2_1{
        padding-top: 14px;
        padding-bottom: 14px;
        padding-left: 10px;
      color: #000;
        font-size: 12px;
      }
      .wrap2_2{
        textarea {
          width: 100%;
          box-sizing: border-box;
          padding: 3px 10px 11px 10px;
          border: none;
          color: #24437E;
          font-size: 12px;
          &::placeholder {
            color: #CECECE;
            font-size: 12px;
          }
          &:disabled{
            background: none;
          }
          &:focus {
            color: #24437E;
            font-size: 12px;
            outline: none;
            border: none;
          }
        }
      }
    }
    .wrap1 {
      padding-left: 14px;
      padding-right: 14px;

      &:last-child .wrap1_1 {
        border-bottom: none;
      }

      .wrap1_1 {
        padding-top: 14px;
        padding-bottom: 14px;
        border-bottom: #BBC5E0 solid 1px;
        display: flex;
        .wrap1_1_3{
          margin-left: auto;
          img{
            width: 32px;
            height: 16px;
          }
        }
        .wrap1_1_2 {
          display: flex;
          justify-content: center;
          align-items: center;
          padding-left: 10px;
          color: #24437E;
          font-size: 12px;
          input{
            width: 100%;
            border: none;
            &::placeholder{
              color: #CECECE;
              font-size: 12px;
            }
            &:focus{
              color: #24437E;
              font-size: 12px;
              outline: none;
              border: none;
            }
          }
        }

        .wrap1_1_1 {
          display: flex;
          align-items: center;
          flex-shrink: 0;
          border-right: #BBC5E0 solid 1px;
          width: 92px;
          font-size: 12px;
          color: #000;
          padding-left: 10px;
          .c86{
            font-size: 10px;
          }
        }
      }
    }
  }
  .content5{
    margin-top: 42px;
    display: flex;
    .wrap2{
      margin-left: auto;
      width: 200px;
      height: 30px;
      border-radius: 15px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      font-size: 14px;
      background-color: #2159C4;
    }
    .wrap1{
      border-radius: 15px;
      width: 116px;
      height: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      color: #fff;
      &.btn0{
        background-color: #24437E;
      }
      &.btn1{
        background-color: #5A5A5A;
      }
    }
  }
  .content4 {
    margin-top: 10px;
    background-color: #fff;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 22px 25px;

    .wrap2 {
      margin-top: 3px;
      border-radius: 10px;
      width: 100%;
      height: 325px;
      border: 3px solid #2159C4;
      position: relative;
      background-color: #000;
      overflow: hidden;
      .wrap2_1{
        width: 100%;
        height: 100%;
        img{
          width: 100%;
          height: 100%;
        }
      }
      .wrap2_3{
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        width: 66px;
        height: 32px;
        background-color: #2159C4;
        border-radius: 20px;
        bottom: 15px;
        right: 14px;
      }
      .wrap2_2{
        position: absolute;
        bottom: 16px;
        right: 16px;
        img{
          width: 16px;
          height: 16px;

        }

      }

    }

    .wrap1 {
      font-size: 10px;
      color: #2159C4;
    }
  }

  .content3 {
    margin-top: 10px;
    background-color: #fff;
    overflow: hidden;
    border-radius: 12px;

    .wrap1 {
      padding-left: 14px;
      padding-right: 14px;

      &:last-child .wrap1_1 {
        border-bottom: none;
      }

      .wrap1_1 {
        padding-top: 14px;
        padding-bottom: 14px;
        border-bottom: #BBC5E0 solid 1px;
        display: flex;

        .wrap1_1_2 {
          padding-left: 10px;
          color: #24437E;
          font-size: 12px;
        }

        .wrap1_1_1 {
          display: flex;
          align-items: center;
          flex-shrink: 0;
          border-right: #BBC5E0 solid 1px;
          width: 92px;
          font-size: 12px;
          color: #000;
          padding-left: 10px;
          .c86{
            font-size: 10px;
          }
        }
      }
    }
  }

  .content2 {
    margin-top: 10px;
    background-color: #fff;
    border-radius: 10px;
    padding: 12px 22px 14px;
    display: flex;
    justify-content: space-between;

    .wrap1 {
      width: 136px;
      display: flex;
      flex-direction: column;
      align-items: center;

      .wrap1_2 {
        margin-top: 3px;
        height: 79px;
        position: relative;

        .wrap1_2_2 {
          width: 16px;
          height: 16px;
          position: absolute;
          bottom: 5px;
          right: 6px;
        }

        .wrap1_2_1 {
          width: 100%;
          height: 100%;
        }
      }

      .wrap1_1 {
        font-size: 10px;
        color: #2159C4;
      }
    }
  }

  .content1 {
    height: 46px;
    background-color: #2159C4;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    color: #fff;
  }
}
</style>