uni_mattress/sleep/pages/auth/auth.vue

<template>
	<view class="flex-col section">
	  <cu-custom bgColor="#fff"><view slot="content" style="color: #FFFFFF">UU睡眠</view></cu-custom>

	  <view class="flex-col items-center group_3 space-y-20">
	    <text class="text_2 text_3">UU睡眠</text>
	    <text class="font_1 text_2">AI时代，全家人的睡眠健康顾问</text>
	  </view>
	  <view class="flex-col group_4 space-y-20">
	    <text class="font_2 text_4">为了保证用户安全和更好的用户体验，请确认授权以下信息</text>
	    <view class="flex-row items-center group_5 space-x-6">
	      <view class="section_5"></view>
	      <text class="font_3 text_5">获取你的昵称、头像、地区、性别</text>
	    </view>
	    <view class="flex-row items-center group_5 space-x-6">
	      <view class="section_5"></view>
	      <text class="font_3 text_5">获取你的手机号码</text>
	    </view>
	  </view>
	  <view class="flex-col justify-start items-center self-end button" @click="getUserProfile"><text class="font_2 text_6">确认授权</text></view>
	</view>
</template>

<script>
import Storage from '@/utils/storage'
	export default {
		data() {
			return {

			};
		},
    methods: {
      getUserProfile(e) {
        wx.getUserProfile({
          desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
          success: (res) => {
            const data = {
              gender: res.userInfo.gender,
              nickName: res.userInfo.nickName,
            }
            Storage.setItem("agreeLogin", true)
            Storage.setItem("myWeixinInfo", res.userInfo)
            // this.hasAuth = true;
            this.toAutoLogin()
          }
        })
      }
    }
	}
</script>

<style lang="scss">
.section {
  padding-bottom: 20.5rem;
  backdrop-filter: blur(0.19rem);
  background-image: url('http://wdklmall.oss-cn-shenzhen.aliyuncs.com/mallgoods/goods/C34A0AB308944EF9A3BB4135827924DF.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  .section_2 {
    padding: 1.13rem 0.44rem 0.38rem;
    background-color: #ffffff4d;
    .group {
      padding: 0 0.5rem;
      .image {
        width: 1.06rem;
        height: 0.69rem;
      }
      .image_2 {
        width: 0.94rem;
        height: 0.69rem;
      }
      .image_3 {
        width: 1.5rem;
        height: 0.72rem;
      }
    }
    .space-x-6-reverse {
      & > view:not(:last-child),
      & > text:not(:last-child),
      & > image:not(:last-child) {
        margin-right: 0.38rem;
      }
    }
    .group_2 {
      padding: 0.63rem 0 0.38rem;
      .text {
        font-size: 1.16rem;
      }
      .section_3 {
        padding: 0.38rem 0.75rem;
        background-color: #ffffff99;
        border-radius: 1rem;
        border: solid 0.031rem #00000014;
        .image-wrapper {
          width: 1.19rem;
          .image_5 {
            width: 1.19rem;
            height: 0.44rem;
          }
          .image_4 {
            width: 1.13rem;
            height: 1.06rem;
          }
        }
        .section_4 {
          background-color: #00000033;
          width: 0.063rem;
          height: 1.16rem;
        }
      }
      .space-x-11 {
        & > view:not(:first-child),
        & > text:not(:first-child),
        & > image:not(:first-child) {
          margin-left: 0.69rem;
        }
      }
      .pos {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
      }
    }
  }
  .space-y-22 {
    & > view:not(:first-child),
    & > text:not(:first-child),
    & > image:not(:first-child) {
      margin-top: 1.38rem;
    }
  }
  .group_3 {
    padding: 4rem 0;
    .text_2 {
      opacity: 0.76;
    }
    .text_3 {
      color: #ffffff;
      font-size: 1.88rem;
      font-family: PingFangSC;
      line-height: 1.72rem;
    }
  }
  .space-y-20 {
    & > view:not(:first-child),
    & > text:not(:first-child),
    & > image:not(:first-child) {
      margin-top: 1.25rem;
    }
  }
  .font_1 {
    font-size: 1.13rem;
    font-family: PingFangSC;
    line-height: 1.06rem;
    color: #ffffff;
  }
  .group_4 {
    margin: 0.25rem 1.25rem 0;
    padding-top: 1.38rem;
    border-top: solid 0.063rem #ffffff4d;
    .text_4 {
      margin: 0 0.5rem;
      line-height: 1.19rem;
    }
    .group_5 {
      padding: 0 0.44rem;
      .section_5 {
        background-color: #ffffff99;
        border-radius: 50%;
        width: 0.13rem;
        height: 0.13rem;
      }
      .font_3 {
        font-size: 0.75rem;
        font-family: PingFangSC;
        line-height: 0.69rem;
        color: #ffffff;
      }
      .text_5 {
        opacity: 0.6;
      }
    }
    .space-x-6 {
      & > view:not(:first-child),
      & > text:not(:first-child),
      & > image:not(:first-child) {
        margin-left: 0.38rem;
      }
    }
  }
  .button {
    margin-right: 0.81rem;
    margin-top: 2.5rem;
    padding: 0.5rem 0;
    background-image: linear-gradient(90deg, #0a1ecf 0%, #5611f7f5 100%);
    border-radius: 1rem;
    width: 20.94rem;
    .text_6 {
      line-height: 0.94rem;
    }
  }
  .font_2 {
    font-size: 1rem;
    font-family: PingFangSC;
    color: #ffffff;
  }
}
</style>