xiangyuan-app/src/pages/dig/details.vue

<template>
  <view class="main">
    <view class="img-banner">
      <image mode="aspectFill" src="https://mn.wenlvti.net/app_static/xiangan/banner_dig_1.jpg"></image>
    </view>
    <view class="level-info">
      <view>
        <view class="label">已认领：</view>
        <view class="value">{{ querys.name }}
          <text class="em">Lv.{{ querys.level }}</text>
        </view>
      </view>
      <view>
        <view class="label">文化积分:</view>
        <view class="value">{{ querys.points }}</view>
      </view>
      <view class="btn">
        <text class="iconfont icon-point"></text>
        积分兑换
      </view>
    </view>
    <view class="task-list">
      <view class="item">
        <text class="iconfont icon-task-summary"></text>
        <view class="info">
          <view class="title">村落概况</view>
          <view class="desc">探索村落的历史渊源与发生轨迹</view>
        </view>
        <view class="btn" @click="navTo('task/summary', nextPageData)">去完成</view>
      </view>
      <view class="item">
        <text class="iconfont icon-task-history"></text>
        <view class="info">
          <view class="title">历史文化</view>
          <view class="desc">传承百年文化遗产和精神财富</view>
        </view>
        <view class="btn" @click="navTo('task/history', nextPageData)">
          去完成
        </view>
      </view>
      <view class="item">
        <text class="iconfont icon-task-environment"></text>
        <view class="info">
          <view class="title">环境格局</view>
          <view class="desc">感受自然人文环境之美</view>
        </view>
        <view class="btn" @click="navTo('task/environment', nextPageData)">
          去完成
        </view>
      </view>
      <view class="item">
        <text class="iconfont icon-task-building"></text>
        <view class="info">
          <view class="title">传统建筑</view>
          <view class="desc">领略古建筑的独特魅力</view>
        </view>
        <view class="btn" @click="navTo('task/building', nextPageData)">
          去完成
        </view>
      </view>
      <view class="item">
        <text class="iconfont icon-task-custom"></text>
        <view class="info">
          <view class="title">民俗文化</view>
          <view class="desc">体验民间传统习俗与节庆</view>
        </view>
        <view class="btn" @click="navTo('task/custom', nextPageData)">
          去完成
        </view>
      </view>
      <view class="item">
        <text class="iconfont icon-task-food"></text>
        <view class="info">
          <view class="title">地道美食</view>
          <view class="desc">正宗、传统地方特色美食</view>
        </view>
        <view class="btn" @click="navTo('task/food', nextPageData)">
          去完成
        </view>
      </view>
      <view class="item">
        <text class="iconfont icon-task-mine"></text>
        <view class="info">
          <view class="title">物产资源</view>
          <view class="desc">特定地域的植物、矿物或手工艺</view>
        </view>
        <view class="btn" @click="navTo('task/mine', nextPageData)">
          去完成
        </view>
      </view>
      <view class="item">
        <text class="iconfont icon-task-trip"></text>
        <view class="info">
          <view class="title">旅游路线</view>
          <view class="desc">体验独特的文化魅力</view>
        </view>
        <view class="btn" @click="navTo('task/trip', nextPageData)">
          去完成
        </view>
      </view>
      <view class="item">
        <text class="iconfont icon-task-other"></text>
        <view class="info">
          <view class="title">其他</view>
          <view class="desc">更多文化传承相关信息</view>
        </view>
        <view class="btn active">
          待开放
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { useLoadQuerys } from '@/common/composeabe/LoadQuerys';
import { navTo } from '@imengyu/imengyu-utils/dist/uniapp/PageAction';
import { computed } from 'vue';

const { querys } = useLoadQuerys({ 
  id: 0,  
  name: '',
  points: 0,
  level: 0,
  villageVolunteerId: 0,
});

const nextPageData = computed(() => ({
  villageId: querys.value.id,  
  villageVolunteerId: querys.value.villageVolunteerId,
}));

function goForm(subType: string, subId: number) {
  navTo('../forms/list', {
    villageId: querys.value.id,  
    villageVolunteerId: querys.value.villageVolunteerId,  
    subType,
    subId,
  })
}
</script>

<style lang="scss" scoped>
.img-banner {
  height: 246rpx;
  width: 100%;

  image {
    height: 100%;
    width: 100%;
  }
}

.level-info {
  padding: 48rpx 36rpx 36rpx;
  background: #FFF2E6;
  border-radius: 20rpx;
  position: relative;
  margin-top: 42rpx;
  margin-bottom: 37rpx;
  > view:first-child {
    margin-bottom: 44rpx;
  }

  .label {
    font-size: 28rpx;
    color: #111111;
    display: inline-block;
  }

  .value {
    font-weight: bold;
    font-size: 28rpx;
    display: inline-block;
    color: #333333;

    .em {
      font-family: Rockwell;
      font-weight: 600;
      font-size: 30rpx;
      color: #FF8719;
      display: inline-block;
      margin-left: 35rpx;
    }
  }

  .btn {
    position: absolute;
    top: 30rpx;
    right: 30rpx;
    border-radius: 10rpx;
    border: 1px solid #FF8719;
    padding: 15rpx 20rpx;
    display: flex;
    align-items: center;
    font-weight: 400;
    font-size: 28rpx;
    color: #FF8719;

    text.iconfont {
      display: inline-block;
      margin-right: 15rpx;
      font-size: 40rpx;
    }
  }
}
.task-list{
  .item{
    display: flex;
    align-items: center;
    background: #fff;
    margin-bottom: 36rpx;
    padding:39rpx 27rpx 38rpx;
    text.iconfont{
      width: 91rpx;
      height: 91rpx;
      border-radius: 50%;
      border: 1px solid #25515E;
      text-align: center;
      color: #25515E;
      font-size: 60rpx;
      line-height: 91rpx;
      display: inline-block;
      margin-right: 17rpx;
    }
    .btn{
      background: #FF8719;
      border-radius: 28rpx;
      color:#fff;
      font-size: 28rpx;
      padding:14rpx 24rpx;
      &.active{
        background: #EFEFEF;
        color:#999999;
      }
    }
    .info{
      flex:1;
      .title{
        font-weight: 600;
        font-size: 30rpx;
        color: #333333;
        margin-bottom: 22rpx;
      }
      .desc{
        font-weight: 400;
        font-size: 24rpx;
        color: #999999;
      }
    }
  }
}
</style>