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

<template>
	<view class="submit_main">
    <view class="img-banner">
      <image mode="aspectFill" src="https://mn.wenlvti.net/app_static/xiangan/banner_submit.jpg"></image>
    </view>
    <view class="main">
      <template v-if="!villageListLoader.content.value?.length">
        <view class="cat">
          <text>村庄认领</text>
        </view>
        <u-button type="primary" @click="goClamVillage">
          <text>+</text>
          认领新村庄
        </u-button>
      </template>
      <view class="cat">
        <text>已认领村庄</text>
      </view>
      <RequireLogin unLoginMessage="登录后查看我认领的村庄">
        <SimplePageContentLoader
          :loader="villageListLoader"
          :showEmpty="villageListLoader.content.value?.length == 0"
          :emptyView="{
            text: '你还没有认领的村庄',
            button: true,
            buttonText: '去认领',
            buttonClick: goClamVillage,
          }"
        >
          <view class="village-list">
            <view 
              v-for="item in villageListLoader.content.value"
              :key="item.id"
              class="item"
            >
              <ImageWrapper 
                mode="aspectFill"
                :src="item.image" 
                width="154rpx"
                height="154rpx"
              />
              <view class="info">
                <view class="name">{{ item.villageName }}</view>
                <view class="d-flex flex-row align-center">
                  <view class="btn p-1 pl-2 pr-2" @click="navTo('/pages/inherit/village/details', { id: item.villageId })">
                    <text class="iconfont icon-view"></text>预览
                  </view>
                  <view class="btn p-1 pl-2 pr-2 active" @click="goSubmitDigPage(item)">
                    <text class="iconfont icon-search"></text>采编
                  </view>
                </view>
              </view>
            </view>
          </view>
        </SimplePageContentLoader>
      </RequireLogin>

      <view class="cat">
        <text>我的贡献</text>
      </view>
      <RequireLogin unLoginMessage="登录后贡献，加入排行榜">
        <view class="retribution">
          <view class="item">
            <text class="iconfont icon-total-points"></text>
            <view class="num">{{ volunteerInfoLoader.content.value?.points }}</view>
            <view>文化积分</view>
          </view>
          <view>
            <text class="iconfont icon-art-arrow"></text>
          </view>
          <view class="item">
            <text class="iconfont icon-level"></text>
            <view class="level">Lv.{{ volunteerInfoLoader.content.value?.level }}</view>
            <view>等级</view>
          </view>
        </view>
      </RequireLogin>
    </view>
	</view>
</template>

<script setup lang="ts">
import VillageApi, { VillageListItem } from '@/api/inhert/VillageApi';
import ImageWrapper from '@/common/components/ImageWrapper.vue';
import RequireLogin from '@/common/components/RequireLogin.vue';
import SimplePageContentLoader from '@/common/components/SimplePageContentLoader.vue';
import { useReqireLogin } from '@/common/composeabe/RequireLogin';
import { useSimpleDataLoader } from '@/common/composeabe/SimpleDataLoader';
import { navTo } from '@imengyu/imengyu-utils/dist/uniapp/PageAction';

const villageListLoader = useSimpleDataLoader(async () => await VillageApi.getClaimedVallageList(), true);
const volunteerInfoLoader = useSimpleDataLoader(async () => await VillageApi.getVolunteerInfo(), true);
const rankListLoader = useSimpleDataLoader(async () => await VillageApi.getVolunteerRanklist(), true);

const { requireLogin } = useReqireLogin();

function goClamVillage() {
  requireLogin(() => navTo('forms/village_claim'), '登录后才能认领村庄哦！');
}
function goSubmitDigPage(item: VillageListItem) {
  navTo('details', { 
    id: item.villageId,
    name: item.villageName,
    villageVolunteerId: item.villageVolunteerId,
    points: volunteerInfoLoader.content.value?.points,
    level: volunteerInfoLoader.content.value?.level,
  })
}
</script>

<style lang="scss">
.submit_main {
  .img-banner{
    border-radius: 0;
    height: 466rpx;
  }
  .cat{
    font-weight: 600;
    display: flex;
    margin: 36rpx 0 40rpx;
    align-items: center;
    text{
      display: block;
      font-size: 36rpx;
      color: #312520;
      flex:1;
    }
    .btn{
      border-radius: 28rpx;
      border: 1px solid #999999;
      font-size: 27rpx;
      color: #666666;
      padding:15rpx 28rpx;
      display: inline-block;
      margin-left: 18rpx;
      &.active{
        color:#fff;
        background: #FF8719;
        border-color: #FF8719;
      }
    }
  }
  .village-list{
    .item{
      background: #FFFFFF;
      border-radius: 10rpx;
      padding:18rpx 14rpx 11rpx;
      display: flex;
      margin-bottom: 27rpx;
      image,.image-wrapper {
        border-radius: 10rpx;
        width: 154rpx;
        height: 154rpx;
        display: block;
        margin-right: 25rpx;
        overflow: hidden;
      }
      .info{
        .name{
          font-size: 30rpx;
          color: #333333;
          margin-bottom: 35rpx;
          margin-top: 14rpx;
        }
        .btn{
          border-radius: 10rpx;
          border: 1px solid #25515E;
          padding:16rpx 44rpx;
          font-size: 28rpx;
          color:#25515E;
          margin-right: 34rpx;
          display: inline-block;
          &.active{
            background: #FF8719;
            color:#fff;
            border-color: #FF8719;
          }
          text.iconfont{
            display: inline-block;
            margin-right: 15rpx;
            font-size: 36rpx;
          }
        }
      }
    }
  }
  .retribution{
    background: #FFFFFF;
    border-radius: 10rpx;
    display: flex;
    justify-content: space-around;
    .item{
      text-align: center;
      font-size: 24rpx;
      color: #312520;
      padding: 35rpx 0 33rpx;
      text.iconfont{
        font-size: 56rpx;
        color:#25515E;
        display: block;
      }
      .num{
        font-weight: 600;
        font-size: 48rpx;
        color: #FF8719;
        margin-top: 12rpx;
        line-height: 48rpx;
        margin-bottom: 15rpx;
      }
      .level{
        margin-top: 12rpx;
        margin-bottom: 15rpx;
        font-family: Rockwell;
        font-size: 44rpx;
        line-height: 48rpx;
        color: #FF8719;
      }
    }
  }
  .people-list{
    .item{
      width: 100%;
      display: flex;
      align-items: center;
      padding: 28rpx 21rpx 28rpx 10rpx;
      text-align: left;
      .rank{
        position: relative;
        top:inherit;
        left:inherit;
        margin-right: 25rpx;
        width: 77rpx;
      }
      .info{
        flex:1;
      }
      .level{
        font-family: Rockwell;
        font-size: 36rpx;
        color: #FF8719;
      }
      image.avatar{
        margin-bottom: 0;
        margin-right: 51rpx;
        background-color: #efefef;
        border-radius: 50%;
      }
    }
  }
}
</style>