yihuo/pages/weal/topic.vue

<template>
    <scroll-view class="scroll-wrapper" :style="{top: top + 'px'}" scroll-y refresher-enabled refresher-default-style="white"
        @refresherrefresh="pullRefresh" :refresher-triggered="refreshing" @scrolltolower="loadMore">
        <view style="padding: 0 14px">
            <view v-for="(item) in tableData" :key="item.id" class="cell marginB12">
                <view class="flex-align">
                    <image :src="item.avatar" style="width: 88rpx;height: 88rpx;border-radius: 44rpx;" />
                    <view class="font2 color-white flex1 marginL10">{{item.nickname}}</view>
                </view>
                <view class="paddingY12 color-white bold color-white font6">
                    {{item.question}}
                </view>
                <view style="height: 20px; border-radius: 10px; overflow: hidden;" class="flex-align relative">
                    <view v-for="(aItem, aIndex) in item.chooseList" :key="aItem.answer"
                        :style="{background: aItem.color, width: aItem.width, height: '100%'}"
                        :class="[aIndex != 0 && aItem.width != '0%' && 'marginL4']"></view>
                </view>
                <view class="paddingY12 flex-align-center">
                    <view v-for="(aItem, aIndex) in item.chooseList" :key="aItem.answer" class="btn flex-align-center"
                        @click="join(item, aItem.answer)">
                        <image v-if="item.myAnswer === aItem.answer" :src="resource[`${aItem.btn}_active`]" class="image" />
                        <image v-else :src="resource[aItem.btn]" class="image" />
                        <div class="color-white font6 relative" :style="{opacity: item.myAnswer === aItem.answer ? 1 : 0.4}">{{aItem.answer}}</div>
                    </view>
                </view>
                <view class="flex-align">
                    <view class="font2 color-white" style="opacity: 0.5">{{item.publishTime}}</view>
                    <view class="paddingL10 font2 color-white">{{item.participatedQuantity}}投票</view>
                </view>
            </view>
        </view>
        <empty v-if="isEmpty" :top="180" />
        <image :src="resource.weal_topic_publish" class="publish_btn" @click="showPublish" />
    </scroll-view>
</template>

<script>
import pageMixin from './../../mixin/page'
import resource from '@/utils/resource'
import empty from '../../components/empty.vue'

export default {
    components: { empty },
    mixins: [pageMixin],
    props: {
        statusBarHeight: Number
    },
    data() {
        return {
            resource,
            refreshing: false,
            requesting: false,
            isRefreshClear: false
        }
    },
    computed: {
        top() {
            return this.statusBarHeight + uni.upx2px(72) + 45
        },
        width() {
            return this.$store.state.systemInfo.screenWidth - 28 - 30
        }
    },
    mounted() {
        this.refresh(true)
    },
    methods: {
        search() {
            this.refresh(true)
        },
        pullRefresh() {
            this.refreshing = true
            this.refresh()
        },
        async loadData(loading = false) {
            this.requesting = true
            const res = await this.$service.weal.topics(this.pageNum, this.pageSize, loading)
            if (res && res.length > 0) {
                res.forEach((item) => {
                    const colors = item.answerSet.split(',').length === 3 ? ['#6F62E3', '#E44E58', '#4CA1BB'] : ['#6F62E3', '#4CA1BB']
                    const btns = item.answerSet.split(',').length === 3 ? ['weal_topic_btn_1', 'weal_topic_btn_2', 'weal_topic_btn_3'] : ['weal_topic_btn_1', 'weal_topic_btn_3']
                    let defaulWidth = (100 / (item.answerSet.split(',').length)).toFixed(2) + '%'
                    let map = {}
                    let total = 0
                    item.answerQuantityList.forEach((item, index) => {
                        map[item.answer] = item
                        total += item.quantity
                    })
                    for (var x in map) {
                        map[x].width = total == 0 ? defaulWidth : ((map[x].quantity / total * 100).toFixed(2) + '%')
                    }
                    item.chooseList = item.answerSet.split(',').map((item, index) => {
                        return {
                            answer: item,
                            color: colors[index],
                            btn: btns[index],
                            width: total == 0 ? defaulWidth : (!!map[item] ? map[item].width : '0%')
                        }
                    })
                })
            }
            setTimeout(() => {
                this.refreshing = false
                this.requesting = false
            }, 1000)
            return res
        },
        async join(item, answer) {
            if (!this.$common.checkLogin()) return;
            if (item.myAnswer) return
            const res = await this.$service.weal.topicJoin(item.id, answer)
            if (res) {
                this.refresh()
            }
        },
        showPublish() {
            this.$router.pushCheck('topic_create')
        }
    }
}
</script>
<style lang="scss" scoped>
.scroll-wrapper {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
}
.cell {
    padding: 15px;
    background: rgba(0, 0, 0, 0.6);
    box-shadow: 0px 0px 4px 2px rgba(147, 67, 255, 0.3);
    border-radius: 10px;
    border: 1px solid rgba(174, 231, 255, 0.5);
    .btn {
        width: 184rpx;
        height: 60rpx;
        position: relative;
        .image {
            position: absolute;
            left: 0;
            top: 0;
            width: 184rpx;
            height: 60rpx;
        }
    }
    .bar-mask {
        background: rgb(0, 0, 0);
        height: 100%;
        position: absolute;
        width: 16px;
        top: 0;
    }
}
.publish_btn {
    position: fixed;
    right: 20rpx;
    bottom: 100rpx;
    width: 94rpx;
    height: 100rpx;
}
</style>