zhangsiye/mini/pages/share/components/Qrcode.vue

<template>
  <view class="qrcode-modal" :class="{show: show}">
    <view class="content">
      <view class="qrcode-modal-content dir-top-wrap cross-center">
        <view class="head-img">
          <u-image
            width="150rpx"
            height="150rpx"
            :src="userInfo.avatar"
            shape="circle"
          />
        </view>
        <view class="nickname">{{ userInfo.nickname }}</view>
        <u-line class="u-line" border-style="dashed" length="90%" />
        <view class="qrcode">
          <u-image
            width="320rpx"
            height="320rpx"
            :src="userInfo.share_qrcode"
          />
        </view>
      </view>
      <u-button
        shape="circle"
        hover-class="none"
        :custom-style="{
          background:'linear-gradient(270deg, #6EEBE8 0%, #FF74B9 100%)',
          boxShadow: '0 0 20rpx rgba(13,239,250,.3)',
          borderColor:'none',
          color: '#ffffff',
          marginTop: '50rpx'}"
        @click="handleSave"
      >保存</u-button>
      <u-button
        shape="circle"
        hover-class="none"
        :custom-style="{
          borderColor:'none',
          marginTop: '30rpx'}"
        @click="handleCancel"
      >取消</u-button>
    </view>
  </view>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'Qrcode',
  props: {
    show: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {}
  },
  computed: {
    ...mapState({
      userInfo: seate => seate.user.info
    })
  },
  methods: {
    handleSave() {
      console.log('-->data', this.userInfo.share_qrcode)
      this.$util.saveImage(this.userInfo.share_qrcode).then(res => {
        this.$emit('update:show', false)
      })
    },
    handleCancel() {
      this.$emit('update:show', false)
    }
  }
}
</script>

<style lang="scss" scoped>
.qrcode-modal{
  position: fixed;
  top: 0;
  left: 0;
  width: 750rpx;
  height: 100vh;
  background: $bg-color;
  z-index: 999;
  display: none;
  animation: show-modal linear .5s;
  &.show{
    display: block;
  }
  .content{
    position: absolute;
    width: 600rpx;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    .qrcode-modal-content{
      background: #1B203C;
      position: relative;
      width: 100%;
      height: 50vh;
      background: url("/static/image/share-qrcode-bg.png") no-repeat center;
      background-size: 100% 100%;
      .head-img{
        position: absolute;
        top: -75rpx;
      }
      .nickname{
        position: absolute;
        color: #ffffff;
        top: 15%;
        font-size: 34rpx;
      }
      .u-line{
        position: absolute;
        top: 28.55%;
      }
      .qrcode{
        position: absolute;
        top: 35%;
      }
    }
  }
}
@keyframes show-modal {
  0%{opacity: 0;}
  100%{opacity: 1;}
}
</style>