<template>
  <view class="client-promotionCode">
    <page-navbar :hasBack="false" bgColor="transparent" title="推广"></page-navbar>
    <base-card marginBottom="48rpx">
      <view class="promotionCode-qrcode">
        <view class="promotionCode-avatar">
          <u-avatar :src="avatar" size="90" />
        </view>
        <view class="u-m-t-70 text-center">
          <view class="f-s-28 text-primary">{{ nickname }}</view>
          <view class="f-s-24 text-999 u-m-t-8">{{ location.address }}</view>
        </view>

        <view class="u-m-t-40">
          <uQrcode ref="qr" canvas-id="qr" :value="text" :options="options"> </uQrcode>
        </view>
        <view class="f-s-24 text-999 u-m-t-10">扫描上方二维码，加入我的团队</view>
      </view>
    </base-card>
    <base-card padding="0rpx">
      <view class="fl-flex-item promotionCode-share">
        <view class="direction" @click="handleShare">
          <u--image
            src="/static/pages/promotionCode/weixin.png"
            width="48rpx"
            height="48rpx"
          ></u--image>
          <view class="f-s-28 text-primary u-m-t-16">分享到微信</view>
        </view>
        <view class="promotionCode-line"></view>
        <view class="direction" @click="handleSave">
          <u--image
            src="/static/pages/promotionCode/phone.png"
            width="48rpx"
            height="48rpx"
          ></u--image>
          <view class="f-s-28 text-primary u-m-t-16">下载到相册</view>
        </view>
      </view>
    </base-card>
  </view>
</template>

<script>
import uQrcode from '@/uni_modules/Sansnn-uQRCode/components/u-qrcode/u-qrcode.vue';
import { mapGetters } from 'vuex';
export default {
  data() {
    return {
      text: `https://test.chelvc.com/static/${this.userId}`,
      options: {
        size: 142,
        margin: 10,
      },
    };
  },
  components: {
    uQrcode,
  },
  computed: {
    ...mapGetters(['location', 'avatar', 'nickname', 'userId']),
  },
  methods: {
    handleShare() {
      this.$u.toast('该功能暂未开发，尽情期待！');
    },
    handleSave() {
      uni.showLoading({
        title: '保存中',
        mask: true,
        foregroundImageSrc: this.avatar,
      });
      const ref = this.$refs['qr'];
      ref.save({
        success: res => {
          uni.hideLoading();
          uni.showToast({
            icon: 'success',
            title: '保存成功',
          });
        },
        fail: err => {
          uni.showToast({
            icon: 'none',
            title: JSON.stringify(err),
          });
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.client-promotionCode {
  height: 100vh;
  padding: 144rpx 48rpx 0 48rpx;
  box-sizing: border-box;
  background-image: linear-gradient(#e9f4ff, #dee6ff);
  .promotionCode-qrcode {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    .promotionCode-avatar {
      position: absolute;
      left: 50%;
      top: -120rpx;
      transform: translate(-50%);
      background-color: #fff;
      width: 180rpx;
      height: 180rpx;
      padding: 10rpx;
      border-radius: 50%;
      box-sizing: border-box;
    }
  }
  .promotionCode-share {
    padding: 32rpx 96rpx;
  }

  .promotionCode-line {
    height: 96rpx;
    width: 1rpx;
    background-color: #d8d8d8;
  }
}
</style>