yanyuan/src/pagesYanyuan/ascription/ascription.vue

<template>
  <view>
    <view v-for="(list, index) in lists" :key="index">
      <view class="flex flex-col px-3 bg-white pb-4">
        <text class="my-3">{{ list.title }}</text>
        <img :src="list.img" class="w-full" />
        <text class="py-3">训练结果</text>
        <view class="flex flex-nowrap mt-10 rounded-3xl relative">
          <view
            class="bubble"
            :style="{
              left: list.position.left,
              color: list.position.color,
              backgroundImage: `url(${list.position.bgPic})`,
              backgroundSize: '100% 100%',
              backgroundRepeat: 'no-repeat',
            }"
          >
            {{ list.position.value }}
          </view>
          <view v-for="i in list.levels" :key="i.value" class="flex-1" :class="i.value === 6 ? '' : 'box'">
            <view
              class="w-full h-2"
              :class="i.checked ? list.position.boxBg : 'bg-gray-100'"
              @click="chooseLevel($event, index, i.value)"
            ></view>
          </view>
        </view>
      </view>
      <view class="flex flex-col px-3 bg-white mt-2">
        <view class="py-3 flex justify-between" @click="changeShow(index)">
          训练者
          <u-icon name="arrow-down" v-if="!list.showTrain"></u-icon>
          <u-icon name="arrow-up" v-else></u-icon>
        </view>
        <view class="flex flex-wrap pb-3" v-if="list.showTrain">
          <u-radio-group v-model="list.train" class="mr-1">
            <u-radio class="mr-1" @change="radioChange" v-for="(item, trainIndex) in list.trainer" :key="trainIndex" :name="item">
              {{ item }}
            </u-radio>
          </u-radio-group>
        </view>
      </view>
    </view>
    <view class="w-full bg-gray text-gray-200 text-center pt-4 pb-12">----------我也是有底线的----------</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      lists: [
        {
          title: '迷宫',
          img: 'https://www.tall.wiki/staticrec/yanyuan/1.png',
          train: '',
          showTrain: false,
          trainer: ['张斌', '思南', '雪梅', '方圆', '张野', '马壮', '慧娟'],
          levels: [
            {
              value: 1,
              checked: false,
            },
            {
              value: 2,
              checked: false,
            },
            {
              value: 3,
              checked: false,
            },
            {
              value: 4,
              checked: false,
            },
            {
              value: 5,
              checked: false,
            },
            {
              value: 6,
              checked: false,
            },
          ],
          position: {
            left: 0,
            color: '#EDEDED',
            value: '非常困难',
            bgPic: 'https://www.tall.wiki/staticrec/yanyuan/bubble-gray.png',
            boxBg: '',
          },
        },
        {
          title: '迷宫',
          img: 'https://www.tall.wiki/staticrec/yanyuan/1.png',
          train: '',
          showTrain: false,
          trainer: ['张斌', '思南', '雪梅', '方圆', '张野', '马壮', '慧娟'],
          levels: [
            {
              value: 1,
              checked: false,
            },
            {
              value: 2,
              checked: false,
            },
            {
              value: 3,
              checked: false,
            },
            {
              value: 4,
              checked: false,
            },
            {
              value: 5,
              checked: false,
            },
            {
              value: 6,
              checked: false,
            },
          ],
          position: {
            left: 0,
            color: '#EDEDED',
            value: '非常困难',
            bgPic: 'https://www.tall.wiki/staticrec/yanyuan/bubble-gray.png',
            boxBg: '',
          },
        },
      ],
    };
  },

  methods: {
    chooseLevel(e, index, value) {
      const position = this.lists[index].position;
      position.left = e.target.offsetLeft + 'px';
      console.log('value: ', value, 0 < value < 3);
      if (value < 3) {
        position.color = '#EB5A0D';
        position.value = '非常困难';
        position.bgPic = 'https://www.tall.wiki/staticrec/yanyuan/bubble-red.png';
        position.boxBg = 'bg-red-500';
      } else if (value < 5) {
        position.color = '#F4C130';
        position.value = '略有困难';
        position.bgPic = 'https://www.tall.wiki/staticrec/yanyuan/bubble-yellow.png';
        position.boxBg = 'bg-yellow-500';
      } else {
        position.color = '#1890FF';
        position.value = '轻松完成';
        position.bgPic = 'https://www.tall.wiki/staticrec/yanyuan/bubble-blue.png';
        position.boxBg = 'bg-blue-500';
      }

      this.lists[index].levels.forEach((line, i) => {
        if (i < value) {
          line.checked = true;
        } else {
          line.checked = false;
        }
      });
    },

    radioChange(e) {
      console.log(e);
    },

    changeShow(index) {
      this.lists[index].showTrain = !this.lists[index].showTrain;
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  background-color: $uni-bg-color-grey;
}

.box {
  margin-right: 2px;
}

.bubble {
  position: absolute;
  top: -40px;
  width: 70px;
  height: 30px;
  line-height: 26px;
  text-align: center;
  font-size: 14px;
}

.bg-gray {
  background-color: $uni-bg-color-grey;
}
</style>