qn-plateShare-wx/pages/login/index.vue

<template>
  <view class="content">
    <uni-nav-bar left-icon="back" @clickLeft="back" statusBar fixed title="飞鸟快印"></uni-nav-bar>
    <view class="flex-col group_5">
      <view class="group_6">
        <view class="section_3"><!--*--></view>
        <view class="justify-center group_7">
          <image src="/static/imgs/general/logo-icon.png" class="image_6" />
          <text class="text_4">飞鸟快印</text>
        </view>
      </view>
      <view class="flex-col group_8">
        <text class="text_5">手机里的打印店</text>
        <view class="justify-center">
          <button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
            <image class="avatar" :src="avatarUrl"></image>
          </button>
        </view>
        <view class="nick-form">
          <view style="width: 100rpx">昵称:</view>
          <input type="nickname" class="weui-input" placeholder="请输入昵称" v-model="nickname" />
        </view>
        <view class="flex-col items-center button" @tap="signIn"><text class="text_6">注册账号</text></view>
      </view>
      <view class="section_4"><!--*--></view>
    </view>
  </view>
</template>

<script>
  import { go2, back } from '@/utils/hook.js'
  import { changeUserInfo, uploadAvatar } from '@/apis/commonApi'

  const defaultAvatarUrl = 'https://qncloud.oss-cn-shenzhen.aliyuncs.com/wukong-printer-wx/default-avatar-add.png'
  export default {
    data() {
      return {
        params: {},
        target: '',
        avatarUrl: defaultAvatarUrl,
        nickname: ''
      }
    },
    onLoad(options) {
      this.target = options.target
      this.params = JSON.parse(options.data || '{}')
    },
    methods: {
      go2,
      back,
      signIn() {
        if (this.avatarUrl == defaultAvatarUrl || !this.avatarUrl) {
          uni.showToast({
            title: '请选择头像',
            icon: 'none'
          })
          return
        }
        if (!this.nickname || !this.nickname.trim()) {
          uni.showToast({
            title: '请输入昵称',
            icon: 'none'
          })
          return
        }
        uploadAvatar(this.avatarUrl).then((res) => {
          if (res) {
            res = JSON.parse(res)
          }
          if (res.data) {
            changeUserInfo({ avatar: res.data, nickname: this.nickname }).then(() => {
              // 更新全局用户信息
              let changeMap = [
                { key: 'avatar', value: res.data },
                { key: 'name', value: this.nickname }
              ]
              this.$store.commit('changeUserInfo', changeMap)
              this.nextPage()
            })
          }
        })
      },
      onChooseAvatar(e) {
        const { avatarUrl } = e.detail
        this.avatarUrl = avatarUrl
      },
      nextPage() {
        go2(this.target, this.params, true)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .content {
    width: 750rpx;
  }
  .group_5 {
    padding: 42rpx 0 316rpx;
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    .group_6 {
      width: 750rpx;
      .section_3 {
        background-image: linear-gradient(149.4deg, #007aff26 0%, #007aff26 2.73%, #ffffff26 98.65%, #ffffff26 100%);
        border-radius: 0 50% 50% 0;
        width: 288rpx;
        height: 288rpx;
        position: absolute;
        transform: translateX(-50%);
      }
      .group_7 {
        margin-top: 90rpx;
        width: 750rpx;
        .image_6 {
          margin: 10rpx 0 9rpx;
          flex-shrink: 0;
          width: 75rpx;
          height: 75rpx;
        }
        .text_4 {
          margin-left: 21rpx;
          color: #000000;
          font-size: 80rpx;
          font-family: '.AppleSystemUIFont';
          line-height: 94rpx;
        }
      }
    }
    .group_8 {
      margin: 28rpx 0 0;
      .text_5 {
        align-self: center;
        color: #000000;
        font-size: 30rpx;
        font-family: 'PingFangSC-Regular';
        line-height: 42rpx;
        letter-spacing: 34rpx;
        margin-left: 34rpx;
      }
      .button {
        padding: 23rpx 0 20rpx;
        margin: 120rpx 32rpx 0;
        background-color: #28c445;
        border-radius: 44rpx;
        .text_6 {
          color: #ffffff;
          font-size: 32rpx;
          font-family: 'PingFangSC-Medium';
          font-weight: 500;
          line-height: 45rpx;
        }
      }
    }
    .section_4 {
      margin-left: 562rpx;
      margin-top: 282rpx;
      align-self: flex-start;
      background-image: linear-gradient(149.4deg, #007aff26 0%, #007aff26 2.73%, #ffffff26 98.65%, #ffffff26 100%);
      border-radius: 50%;
      width: 288rpx;
      height: 288rpx;
    }
  }
  .avatar-wrapper {
    width: 150rpx;
    height: 150rpx;
    margin-top: 140rpx;
    border-radius: 50%;
    overflow: hidden;
    padding: 0;
    .avatar {
      width: 150rpx;
      height: 150rpx;
    }
  }
  .weui-input {
    width: 400rpx;
    height: 80rpx;
  }
  .nick-form {
    margin-top: 32rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 750rpx;
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
  }
</style>