lcoco/pages/perfect/cards.vue

<template>
  <view class="pass-box">
    <en-nav  ></en-nav>
    <view class="login-box" :style="{'height':'calc(100vh - '+navHeight+'px)'}" >
      <view class="login-top">
        <view class="login-title">
          <text class="title-item sys-color-black sys-weight-600">个性卡牌</text>
        </view>
        <view class="card-text">
          <text class="sys-color-gray-9">请使用本人</text>
          <text class="sys-color-green">真实照片</text>
          <text class="sys-color-gray-9">，否则部分功能可能会受限</text>
        </view>
        <view class="card-img" :class="{'open-img':imgBg}" @click="openPopup" :style="{'height':'calc(100vh - '+navHeight+'px  - 278rpx - 270rpx - env(safe-area-inset-bottom)','background-image':'url('+imgBg+')'}">
          <view class="add-box" v-if="!imgBg">
            <image class="add-img" src="/static/img/common/add.png" mode="aspectFill"></image>
          </view>

        </view>
        <view class="card-agreement">
          <login-agreement :type="2" v-model="isCheck"></login-agreement>
        </view>
      </view>
      <view class="login-bottom">
        <view class="login-but sys-color-white sys-background-black sys-selected-but" @click="setNextStep" :class="{'sys-unselected-but':!isOK,'apply-shake':isShakeBut}">下一步</view>
      </view>
    </view>
    <en-popup ref="cardPopup">
      <template v-slot:popupInfo="{pagingData}">
        <view class="img-popup">
          <view class="popup-title sys-weight-600 sys-color-black">上传清晰的本人照片</view>
          <view class="popup-text sys-color-gray-9 ">
            展示你真实有趣的一面
          </view>
          <view class="popup-img">
            <view class="popup-item">
              <image class="item-img" src="/static/img/perfect/img3.png" mode="widthFix"></image>
              <view class="item-describe">
                <image class="describe-img" src="/static/img/perfect/ok.png" mode="widthFix"></image>
                <view class="describe-text sys-color-white sys-weight-600" >半身/全身</view>
              </view>
            </view>
            <view class="popup-item">
              <image class="item-img" src="/static/img/perfect/img1.png" mode="widthFix"></image>
              <view class="item-describe">
                <image class="describe-img" src="/static/img/perfect/no.png" mode="widthFix"></image>
                <view class="describe-text sys-color-white sys-weight-600" >怼脸自拍</view>
              </view>
            </view>
            <view class="popup-item">
              <image class="item-img" src="/static/img/perfect/img2.png" mode="widthFix"></image>
              <view class="item-describe">
                <image class="describe-img" src="/static/img/perfect/no.png" mode="widthFix"></image>
                <view class="describe-text sys-color-white sys-weight-600" >网红非人</view>
              </view>
            </view>

          </view>
          <view class="popup-but sys-color-white sys-background-black sys-selected-but" @click="openChooseImage">从相册中选择</view>
        </view>
      </template>

    </en-popup>
  </view>
</template>


<script>
import EnNav from "@/components/en-utils/en-nav/en-nav";
import tools from "@/service/tools";
import LoginAgreement from "@/pages/login/model/loginAgreement";
import EnPopup from "@/components/en-utils/en-popup/en-popup";
import cosServe from "@/service/txOssSts";
import {setCard} from "@/api/login";
export default {
  components: {EnPopup, LoginAgreement, EnNav},
  data() {
    return {
      navHeight:40,
      isOK:false,
      isShakeBut:false,
      nickname:'',
      password:'',
      imgList:[],
      imgBg:'',
      isCheck:false
    }
  },
  watch:{
    'isCheck':function (){
      this.verifyIsOK()
    }
  },
  methods: {
    openChooseImage(){
      uni.chooseImage({
        count: 6, //默认9
        sizeType: ['original'], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album'], //从相册选择
        success:  (res) =>{
          console.log(res)
          if(res.tempFiles.length>0){
            console.log(res.tempFiles)
            res.tempFiles.forEach((item,key)=>{
              cosServe.txUploadFile(item,'gallery').then(async (res)=>{
                if(key===0){
                  this.imgBg=res.Location
                  this.imgBg=await cosServe.getSignUrl(this.imgBg)
                }
                this.imgList.push(res.Location)
              })
            })
            console.log( this.imgList)
            this.verifyIsOK()
          }
          this.$refs.cardPopup.close()
        }
      });
    },
    openPopup(){
      this.$refs.cardPopup.open()
    },
    setNextStep(){
      if(this.isOK){
        let mobile=uni.getStorageSync('mobile')
        setCard({'mobile':mobile,'cards':this.imgList}).then((res)=>{
          if(res.code===0){
            uni.switchTab({
              'url':'/pages/index/index'
            })
          }else {
            tools.error(res.msg)
          }
        })

      }else {
        tools.error('请完善信息')
        this.isShakeBut=true
        setTimeout(()=>{
          this.isShakeBut=false
        },500)
      }
    },
    verifyIsOK(){
      this.isOK = this.isCheck && this.imgList.length>=0;
    },
    setNavHeight(navHeight){
      this.navHeight=navHeight+41
    },

  }
}
</script>

<style scoped lang="scss">
@import "/static/css/shake.css";
.pass-box{
  .login-box{
    padding: 82rpx 80rpx 0 80rpx;
    box-sizing: border-box;
    position: relative;
    .login-top{
      .login-title{
        padding-bottom: 24rpx;
        .title-item{
          font-size: 48rpx;
        }
      }
      .card-text{
        padding-bottom: 16rpx;
        text{
          font-size: 28rpx;
        }
      }

      .card-img{
        width: calc(100vw - 160rpx);
        background: #F6F6F6;
        border-radius: 20rpx;
        position: relative;
        .add-box{
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%,-50%);
          .add-img{
            margin: auto auto;
            width: 84rpx;
            height: 84rpx;
          }
        }
      }
      .open-img{
        background-repeat: no-repeat;//不平铺
        background-position: center center;//居中
        background-size: cover;//随容器大小
      }
      .card-agreement{
        margin-top: 32rpx;
      }

    }
    .login-bottom{
      padding-bottom: calc(58rpx + env(safe-area-inset-bottom));
      position: absolute;
      bottom: 0;
      left: 68rpx;
      width:calc(100vw - 136rpx);
      .login-but{
        margin-top: 120rpx;
      }
    }

  }
  .img-popup{
    margin-top: 40rpx;
    padding: 0 32rpx calc(58rpx + env(safe-area-inset-bottom)) 32rpx;
    .popup-title{
      font-size: 36rpx;
    }
    .popup-text{
      padding: 16rpx 0 32rpx;
      font-size: 28rpx;
    }
    .popup-img{
      display: flex;
      justify-content: space-between;
      .popup-item{
        display: inline-block;
        margin-right:10rpx;
        position: relative;
        .item-img{
          border-radius: 16rpx;
          width: calc((100vw - 80rpx)/3);
          height: 276rpx;
        }
        .item-describe{
          position: absolute;
          left: 32rpx;
          bottom: 20rpx;
          width: calc((100vw - 80rpx)/3 - 64rpx);
          height: 36rpx;
          border-radius: 200rpx;
          background: rgba(0,0,0,0.6);
          display: flex;
          justify-content: flex-start;
          .describe-img{
            width: 36rpx;
            height: 36rpx;
          }
          .describe-text{
            margin-left: 8rpx;
            font-size: 24rpx;
            line-height: 36rpx;
          }
        }
      }
      .popup-item:nth-of-type(3n+0){
        margin-right:0;
      }
    }
    .popup-but{
      margin-top: 58rpx;
    }
  }
}


</style>