assessment-front/pages_order/test/start.vue

<template>
  <view class="page__view">
		<navbar title="答题测评" leftClick @leftClick="$utils.navigateBack" bgColor="transparent" />

    <view class="main">
      <view class="card">
        <view class="flex flex-column card-header">
          <view>您好 !</view>
          <view>请选择您要答题的题库（可多选）</view>
        </view>
        <view class="card-content list">
          <uv-checkbox-group
            v-model="selectedArr"
            shape="circle"
          >
            <view class="flex list-item" v-for="item in list" :key="item.id">
              <view class="flex left">
                <image class="icon" src="@/static/image/icon.png" mode="widthFix"></image>
                <view>{{ item.title }}</view>
              </view>
              <view>
                <uv-checkbox
                  size="40rpx"
                  icon-size="40rpx"
                  activeColor="#014FA2"
                  :name="item.id"
                ></uv-checkbox>
              </view>
            </view>
          </uv-checkbox-group>
        </view>
      </view>
    </view>

    <view class="bottom">
      <button class="btn" @click="onStart">开始答题</button>
    </view>

  </view>
</template>

<script>
	import mixinsList from '@/mixins/list.js'

  export default {
		mixins: [mixinsList],
    data() {
      return {
				list: [],
				selectedArr: [],
        // todo
        mixinsListApi: '',
      }
    },
    computed: {
    },
    onLoad() {
    },
    methods: {
      onStart() {
				console.log('onStartTest', this.selectedArr)

				// todo: fetch
				let ids = this.selectedArr.map(item => item.id).join(';')

				uni.navigateTo({
					url: `/pages_order/test/answer?ids=${ids}`
				})
      },
    },
  }
</script>

<style scoped lang="scss">
	.page__view {
		width: 100vw;
		min-height: 100vh;
    background: linear-gradient(164deg, #014FA2, #014FA2, #2E8AED);
		position: relative;
	}

  .main {
    width: 100%;
    padding: 54rpx 36rpx;
    padding-bottom: calc(env(safe-area-inset-bottom) + 152rpx + 73rpx);
    box-sizing: border-box;
  }

  
	.card {
		padding: 34rpx 43rpx 34rpx 19rpx;
		background: linear-gradient(rgba($color: #3381D4, $alpha: 0.50), rgba($color: #FCFDFE, $alpha: 0.90) 281rpx, rgba($color: #FCFDFE, $alpha: 0.90));
		border-radius: 25rpx;
		// border: 3rpx solid #FFFFFF;
		box-shadow: 0rpx 3rpx 6rpx 0rpx rgba(0,0,0,0.16); 

		&-header {
    	align-items: flex-start;
			row-gap: 10rpx;
			padding: 0 0 27rpx 5rpx;
			font-size: 30rpx;
      line-height: 1.4;
			color: #FFFFFF;
		}

		&-content {
			// padding: 0 16rpx;
		}
	}

	.list {
		&-item {
			width: 100%;
			justify-content: space-between;
			padding: 30rpx 42rpx 30rpx 24rpx;
			box-sizing: border-box;
			font-size: 30rpx;
			color: #000000;
			background: rgba($color: #62BBFF, $alpha: 0.06);
			border-radius: 16rpx;

			& + & {
				margin-top: 17rpx;
			}

			.left {
				column-gap: 18rpx;
			}

			.icon {
				width: 48rpx;
				height: auto;
			}
		}
	}

  .bottom {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 17rpx 72rpx;
    padding-bottom: calc(env(safe-area-inset-bottom) + 17rpx);
    background: #FFFFFF;
    box-sizing: border-box;

    .btn {
      width: 100%;
      padding: 26rpx 0;
      font-size: 30rpx;
	    line-height: 1.4;
      color: #FFFFFF;
      background: #014FA2;
      border-radius: 42rpx;
    }
  }
  
</style>