com.kasite.client.uniapp.patient/pages/st1/components/authorizeMode/authorizeMode.vue

<template>
  <view>
    <view class="public_tip">尊敬的用户，为了充分保障患者的隐私安全，该项功能需要患者本人的授权才可进行使用，请选择授权方式</view>
    <view class="list">
      <view class="item" @click="optionsClick('authSms')" v-if="level > (userInfo.userLevel || 0) && level <= 1">
        <image class="item_img" :src="iconUrl.icon_authSjyz"></image>
        <image class="public_right_img" :src="iconUrl.icon_right"></image>
        <view class="item_con">
          <view class="item_con_tit">手机验证码授权</view>
          <view class="item_con_subtit">使用填写手机动态验证码方式</view>
        </view>
      </view>
      <view class="item" @click="optionsClick('authFace')" v-if="level > (userInfo.userLevel || 0) && level <= 2">
        <image class="item_img" :src="iconUrl.icon_authSlhs"></image>
        <view class="item_con">
          <view class="item_con_tit">人脸识别授权</view>
          <view class="item_con_subtit">使用活体扫脸识别方式</view>
        </view>
        <image class="public_right_img" :src="iconUrl.icon_right"></image>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { common } from '@/utils';
import icon from '@/utils/icon';

const props = withDefaults(defineProps<{
  level?: string | number;
  userInfo?: any;
}>(), {
  level: '',
  userInfo: () => ({})
});

const iconUrl = ref(icon);

/**
 * 授权选项点击
 */
const optionsClick = (type: string) => {
  console.log(`/pagesPersonal/st1/business/patientAuth/${type}/${type}`) 
  common.goToUrl(`/pagesPersonal/st1/business/patientAuth/${type}/${type}`)
};
</script>

<style lang="scss" scoped>
.list {
  padding: 0 30upx;
}

.item {
  position: relative;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 0px 40upx 0px rgba(0, 0, 0, 0.06);
  border-radius: 24upx;
  padding: 48upx 30upx;
  display: flex;
  align-items: center;
  margin: 30upx 0;
}

.item_img {
  width: 100upx;
  height: 100upx;
  margin-right: 30upx;
}

.item_con_tit {
  margin-bottom: 22upx;
  font-size: 32upx;
  font-weight: 500;
  color: rgba(0, 0, 0, 1);
}

.item_con_subtit {
  font-size: 28upx;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: rgba(166, 166, 166, 1);
}
.public_tip{
  margin: 40upx 0;
  padding: 0 30upx;
}
.public_right_img{
  right: 30upx;
} 
</style>