mini-h5/src/pages/play/detail.vue

<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '',
  },
}
</route>
<template>
  <image src="@/static/images/play/detailbg.png" class="w-full h-411rpx absolute top-70rpx"></image>
  <view class="w-full min-h-screen bg-bgc flex flex-col items-center">
    <view class="w-full text-48rpx font-700 text-white text-center mt-30rpx z-1">
      Increase in profit per hour
    </view>
    <view
      class="w-456rpx h-182rpx rounded-20rpx bg-cardlight flex flex-col items-center mt-40rpx z-1"
    >
      <view class="mt-50rpx">
        <view
          v-if="scoreData < correctData / 3"
          class="h-80rpx rounded-10rpx mb-10rpx flex items-center justify-between box-border p-x-30rpx"
        >
          <image src="@/static/images/play/shalou.png" class="w-35rpx h-35rpx"></image>
          <text class="text-white text-26rpx">{{ $t('play.again') }}</text>
        </view>
        <view
          v-else
          class="h-80rpx rounded-10rpx mb-10rpx flex flex-col items-center justify-between box-border p-x-30rpx"
        >
          <view
            class="flex items-center"
            v-if="scoreData >= correctData / 3 && scoreData < correctData / 3 + correctData / 3"
          >
            <image src="/static/images/play/star.png" class="w-38rpx h-38rpx mr-1"></image>
            <image
              src="/static/images/play/no.png"
              mode="scaleToFill"
              class="w-38rpx h-38rpx mr-1"
            />
            <image src="/static/images/play/no.png" mode="scaleToFill" class="w-38rpx h-38rpx" />
          </view>

          <view
            class="flex items-center"
            v-if="
              scoreData >= correctData / 3 + correctData / 3 &&
              scoreData < correctData / 3 + correctData / 3 + correctData / 3
            "
          >
            <image src="/static/images/play/star.png" class="w-38rpx h-38rpx mr-1"></image>
            <image src="/static/images/play/star.png" class="w-38rpx h-38rpx mr-1"></image>
            <image src="/static/images/play/no.png" mode="scaleToFill" class="w-38rpx h-38rpx" />
          </view>

          <view
            class="flex items-center"
            v-if="scoreData >= correctData / 3 + correctData / 3 + correctData / 3"
          >
            <image src="/static/images/play/star.png" class="w-38rpx h-38rpx mr-1"></image>
            <image src="/static/images/play/star.png" class="w-38rpx h-38rpx mr-1"></image>
            <image src="/static/images/play/star.png" class="w-38rpx h-38rpx mr-1"></image>
          </view>
          <view class="w-130rpx flex items-center text-white justify-between mt-10rpx">
            <image src="@/static/images/play/shalou.png" class="w-35rpx h-35rpx"></image>
            <text class="text-26rpx">X{{ proportion }}%</text>
          </view>
        </view>
      </view>
    </view>
    <view class="w-690rpx h-266rpx rounded-20rpx bg-cardlight mt-190rpx flex flex-col items-center">
      <text class="w-616rpx mt-32rpx text-white flex items-center justify-center h-180rpx">
        <view class="w-616rpx flex justify-between items-center mb-20rpx">
          <text class="text-26rpx">{{ $t('play.Duration') }}:</text>
          <text class="text-24rpx">00:00:45</text>
        </view>
        <view class="w-616rpx flex justify-between items-center mb-20rpx">
          <text class="text-26rpx">Quantity of food:</text>
          <text class="text-24rpx">{{ correctData }}</text>
        </view>
        <view class="w-616rpx flex justify-between items-center mb-20rpx">
          <text class="text-26rpx">Received food:</text>
          <text class="text-24rpx">{{ scoreData }}</text>
        </view>
      </text>
    </view>
    <view
      @click="onConfirm"
      class="w-630rpx h-100rpx rounded-20rpx bg-primary flex items-center justify-center text-textc items-center mt-40rpx"
    >
      {{ $t('play.OK') }}
    </view>
  </view>
</template>

<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app'
import { useTelegramBackButton } from '@/hooks/useTelegramBackButton'

const { isVisible } = useTelegramBackButton(() => {
  uni.navigateTo({
    url: '/pages/play/index',
  })
})
const correctData = ref(0)
const scoreData = ref(0) // 点击数量
// 当前比例
const proportion = ref(0)

const onConfirm = () => {
  uni.redirectTo({
    url: '/pages/play/index',
  })
}

// 判断比例方法
const da = (bl: number) => {
  if (scoreData.value >= correctData.value / 3) {
    proportion.value = 5 + bl
  }
  if (scoreData.value >= correctData.value / 3 + correctData.value / 3) {
    proportion.value = 10 + bl
  }
  if (scoreData.value >= correctData.value / 3 + correctData.value / 3 + correctData.value / 3) {
    proportion.value = 15 + bl
  }
}

// 提交数据方法
const submit = async () => {
  console.log(correctData.value)
  // 默认难度
  if (correctData.value === 30) {
    da(0)
  } else if (correctData.value === 60) {
    console.log('中级难度')
    da(1)
  } else {
    da(2)
    console.log('告级难度')
  }

  // 提交数据
  // const { data } = await postMusicRewardApi(proportion.value)
}

onLoad((res) => {
  if (res.correct !== '') {
    correctData.value = parseInt(res.correct)
  }
  if (res.score !== '') {
    scoreData.value = parseInt(res.score)
    if (scoreData.value >= correctData.value / 3) {
      submit()
    }
  }
})
</script>

<style scoped>
.header-bg {
  background: #636363;
  opacity: 0.4;
}

.tab-bg {
  background: #636363;
}

.button-bg {
  background: #8ae54a;
}

.page-container {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #10274e;
}

.header-bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 550rpx;
  background: #09090b;
  opacity: 0.4;
}

.content-container {
  position: relative;
  z-index: 2;
  flex: 1;
  height: 100%;
}
</style>