health-front/pages_order/report/test/intro.vue

<template>
  <view class="page__view">
		<navbar title="问卷测评" leftClick @leftClick="$utils.navigateBack" color="#191919" bgColor="transparent" />

    <view class="main">
      <view class="title">
        <view class="title-zh">个人营养问卷</view>
        <view class="title-en">Personal Nutrition Survey</view>
      </view>
      <view class="flex desc">
        <view class="dot"></view>完成问卷大概需要3~5分钟
      </view>
    </view>

    <view class="footer">
      <view class="agreement">
				<uv-checkbox-group
					v-model="checkboxValue"
					shape="circle"
				>
					<uv-checkbox
						size="40rpx"
						icon-size="40rpx"
						activeColor="#7451DE"
						:name="1"
					></uv-checkbox>
				</uv-checkbox-group>
				<view class="desc">
          我已阅读并同意
					<!-- todo: 替换配置项key -->
					<text class="highlight" @click="$refs.modal.open('config_agreement', '用户协议')">《用户协议》</text>
					<!-- todo: 替换配置项key -->
					<text class="highlight" @click="$refs.modal.open('config_privacy', '隐私协议')">《隐私协议》</text>
				</view>
			</view>
      <view class="bar">
        <button class="btn" @click="onStart">开始答题</button>
      </view>
    </view>

		<agreementModal ref="modal" @confirm="onConfirmAgreement"></agreementModal>

  </view>
</template>

<script>
	import agreementModal from '@/pages_order/components/agreementModal.vue'

  export default {
    components: {
      agreementModal,
    },
    data() {
      return {
        checkboxValue : []
      }
    },
    methods: {
      onStart(){
        if(!this.checkboxValue.length){
          return uni.showToast({
            title: '请先同意《用户协议》《隐私协议》',
            icon:'none'
          })
        }
        this.$utils.navigateTo('/pages_order/report/test/step?step=0')
      },
      onConfirmAgreement(confirm) {
        if (confirm) {
          this.checkboxValue = [1]
        } else {
          this.checkboxValue = []
        }
      },
    },
  }
</script>

<style scoped lang="scss">
	.page__view {
		width: 100vw;
		min-height: 100vh;
		background-color: $uni-bg-color;
		position: relative;
	}

  .main {
    margin-top: 448rpx;

    .title {
      text-align: center;
      font-family: PingFang SC;
      line-height: 1.4;
      color: #252545;

      &-zh {
        font-size: 48rpx;
        font-weight: 600;
      }

      &-en {
        font-size: 26rpx;
        font-weight: 400;
      }
    }

    .desc {
      margin-top: 48rpx;
      text-align: center;
      font-size: 28rpx;
      font-weight: 400;
      font-family: PingFang SC;
      line-height: 1.4;
      color: #989898;

      .dot {
        display: inline-block;
        width: 10rpx;
        height: 10rpx;
        border-radius: 50%;
        background: #989898;
        margin-right: 20rpx;
      }
    }
  }

  .footer {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;

    .agreement {
      display: flex;
      padding: 16rpx 40rpx;
      background: #EFEAFF;

      /deep/ .uv-checkbox-group {
        flex: none;
      }

      .desc {
        flex: 1;
        font-family: PingFang SC;
        font-size: 24rpx;
        font-weight: 400;
        line-height: 40rpx;
        color: #8B8B8B;
      }

      .highlight {
        color: $uni-color;
      }
    }

    .bar {
      padding: 24rpx 40rpx;
      box-sizing: border-box;
      height: 200rpx;
      background: #FFFFFF;

      .btn {
        padding: 16rpx 0;
        font-family: PingFang SC;
        font-weight: 600;
        font-size: 36rpx;
        line-height: 1.2;
        color: #FFFFFF;
        background-image: linear-gradient(to right, #4B348F, #845CFA);
        border-radius: 42rpx;
      }
    }
  }
</style>