quickapp_front/src/views/Leaderboard/index.ux

<import name="x-book" src="../../components/book/book.ux"></import>

<template>
    <div class="leaderboard-wrap">
        <div class="type-bar">
            <block for="type in typeList">
                <div class="type-item" @click="typeChange(type.index)">
                    <text class="{{type.index === current ? 'cur' : ''}}">{{type.name}}</text>
                    <text class="choose-bar" show="{{type.index === current}}"></text>
                </div>
            </block>
        </div>
        <list>
            <list-item type="multi" class="book-list__wrap book-list__wrap--multi">
                <div class="book-list__multi">
                    <block for="book in list">
                        <div class="book-item">
                            <div style="width:60px;margin-right:15px">
                                <image if="$idx<3" src="{{img[$idx]}}" class="book-index"></image>
                                <div else class="book-index_follow">
                                    <text>{{$idx+1}}</text>
                                </div>
                            </div>
                            <x-book multi="{{true}}" width="{{150}}" book="{{book}}">
                                <div class="book-info__multi">
                                    <text class="name">{{book.book_name}}</text>
                                    <text class="intro">{{book.book_summary}}</text>
                                </div>
                            </x-book>
                        </div>
                    </block>
                </div>
            </list-item>
        </list>
    </div>
</template>

<script>
import { getRank } from "../../api";

export default {
    data() {
        return {
            typeList: [
                {
                    name: "女生",
                    index: 0
                },
                {
                    name: "男生",
                    index: 1
                },
            ],
            list: [],
            current: 0,
            img: ['../../assets/imgs/rank_1.png', '../../assets/imgs/rank_2.png', '../../assets/imgs/rank_3.png']
        }
    },
    async onInit() {
        await this.getCityListByTabChange();
        this.$watch('current', 'getCityListByTabChange')
    },
    onShow() { },
    typeChange(index) {
        this.current = index;
    },
    async getCityListByTabChange(index = 0) {
        let sex = index ? "1" : "2";
        let ret = await getRank(sex);
        this.list = ret;
    }
}
</script>

<style lang="less">
@import "../../assets/less/leaderboard.less";
</style>