studytour-front/pages_order/auth/roleChoose.vue

<template>
  <view class="page__view">
		<navbar title="选择角色" leftClick @leftClick="$utils.navigateBack" bgColor="transparent" color="#191919" />

    <view class="main">
      <view class="card">
        <view class="card-header">角色信息</view>
        <view class="card-content">
          <uv-radio-group v-model="role" placement="column" activeColor="#00A9FF">
            <view class="flex option" v-for="item in roleOptions" :key="item.id" @click="onSelect(item.value)">
              <view>
                <uv-radio :name="item.value"></uv-radio>
              </view>
              <view>{{ item.label }}</view>
            </view>

            </uv-radio-group>
        </view>
      </view>
    </view>

    <view class="flex bottom">
      <view class="flex bar">
        <button class="btn" @click="onConfirm">确定</button>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        role: null,
        roleOptions: [],
      }
    },
    onLoad() {
      this.roleOptions = [
        { id: '001', label: '家长', value: '0' },
        { id: '002', label: '学生', value: '1' },
      ]
      this.role = this.roleOptions[0].value
    },
    methods: {
      onSelect(val) {
        this.role = val
      },
      async onConfirm() {
        try {
          const params = {
            role: this.role
          }

					await this.$fetch('updateInfo', params, false)

          uni.showToast({
            icon: 'success',
            title: '保存成功',
          });

          this.$store.commit('getUserInfo')
          
          setTimeout(() => {
            uni.reLaunch({
              url:'/pages/index/index'
            })
          }, 800)
        } catch (err) {

        }

      },
    },
  }
</script>

<style scoped lang="scss">
  .page__view {
    background-image: linear-gradient(#DAF3FF, #F3F3F3 200rpx, #F3F3F3);
  }

  .main {
    padding: 24rpx 40rpx;
  }

  .card {
    width: 100%;
    height: 100%;
    padding: 32rpx 32rpx 450rpx 32rpx;
    box-sizing: border-box;
    background: #FFFFFF;
    border-radius: 24rpx;

    &-header {
      font-size: 32rpx;
      font-weight: 500;
      color: #181818;
    }
    
  }

  .option {
    margin-top: 32rpx;
    width: 100%;
    height: 252rpx;
    justify-content: flex-start;
    column-gap: 24rpx;
    padding: 24rpx;
    box-sizing: border-box;
    background: #F5F8FF;
    border-radius: 24rpx;

    &:nth-child(2n) {
      background: #F9F9F9;
    }
  }
  
  .bottom {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100vw;
    height: 146rpx;
    padding-bottom: env(safe-area-inset-bottom);
    background: #FFFFFF;

    .bar {
      width: 100%;
      padding: 0 40rpx;
      box-sizing: border-box;
    }

    .btn {
      width: 100%;
      padding: 16rpx 0;
      box-sizing: border-box;
      font-size: 36rpx;
      color: #FFFFFF;
      background-image: linear-gradient(to right, #21FEEC, #019AF9);
      border: 2rpx solid $uni-color;
      border-radius: 42rpx;
    }
  }
</style>