《从入门到放弃-投票小程序源码分析》第三天-构建动态交互式投票页面

hello，大家好，今天我们继续深入探讨投票小程序的核心功能，特别关注它是如何构建一个动态交互式的投票页面。这段代码充分展示了如何利用前端技术实现用户友好的界面设计，同时保持数据的动态加载和实时更新。让我们一起走进这些代码的世界，看看它们是如何鲜活地转变成一个功能完整的投票应用界面。

动态界面设计和用户交互

用户头像和昵称编辑

<view class="dflex p12 jcsb aic vote_header bg_fff">
    <view class="dflex aic">
        <view class="dflex p_relative">
            <image :src="voteSetting.voteMaster.avatarUrl"
                style="width: 50px; height: 50px; border-radius: 5px;"></image>
            <view class="dflex p_absolute bg_fff bottom_0 glass zindex5 w100percent radiusBottom5 aic jcc"
                @click="cropAvatar">
                <text class="f10">编辑标志</text>
            </view>
        </view>
        <view class="cflex ml5">
            <view class="dflex" @click="showChangeNickName">
                <text class="ml3 f14 mr3"
                    style="max-width: 170px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">{{ voteSetting.voteMaster.nickName }}</text>
                <u-icon name="edit-pen" size="22"></u-icon>
            </view>
        </view>
    </view>
</view>

上面这段代码实现了用户头像和昵称的展示与编辑功能。用户可以点击头像区域进行编辑，同时昵称旁边的编辑图标允许用户直接修改昵称。通过动态绑定数据和响应点击事件，该功能提升了用户体验，使得个性化设置变得简单直观。

投票规则设置

<view class="dflex jcsb aic border_bottom_eee ptb12">
    <view class="dflex">
        <text class="f16 fbold">投票次数</text>
        <u-icon name="question-circle" color="#666" customStyle="margin-left:2px;" size="18"  @click.stop="voteHelp('投票次数','可以设置每人每天可以投多少次，或者总共可以投多少次')"></u-icon>
    </view>
    <voteTimesSelect @onTimesSelected="handleTimesSelected" :localdata="voteSetting.voteRule.voteTimes">
    </voteTimesSelect>
</view>

此段代码负责投票规则的设置，特别是投票次数的部分。它提供了一个选择器组件，让用户可以自定义每人每天或总共的投票次数。通过这种方式，投票活动的主持人可以灵活地设置投票规则，满足不同场景的需求。

投票时间设定

<view class="dflex jcsb aic border_bottom_eee ptb12">
    <view class="dflex">
        <text class="f16 fbold">投票开始时间</text>
        <text class="ml3 cff0000">*必填</text>
    </view>
    <view class="dflex fg1 ml5 aic" @click="showVoteStartTimeClick">
        <text class="f14 w100percent talignright mr5">{{ voteSetting.voteRule.voteStartTime == '' ? '点击设置' :  formatDate(voteSetting.voteRule.voteStartTime) }}</text>
        <u-icon name="arrow-right" color="#666" size="18"></u-icon>
    </view>
</view>

这部分代码用于设定投票的开始时间。它提供了一个交互式的界面，用户可以点击来设置开始时间。时间的格式化显示和简洁的用户界面使得操作直观易懂，确保了用户在设置投票时间时的准确性和便利性。

投票封面和模板选择

封面图展示与模板更换

<view class="p12 mt12 bg_fff m15 radius5 shadow">
    <view class="dflex aic">
        <text class="f16 fbold mr5">封面图</text>
        <text class="f12 main_color">PNG/JPG格式，单张图片5MB以内</text>
    </view>
    <view class="dflex p12 radius5 mt12" style="border: 1px solid #2879FE;">
        <u-icon name="grid" color="#2879FE" size="18"></u-icon>
        <text class="f14">当前模版：{{ themeName }}</text>
    </view>
    <view class="border_eee mt12">
        <u-image v-if="voteSetting.voteBasic.voteBanner.length == 1" :showLoading="true"
            :src="voteSetting.voteBasic.voteBanner[0].image" :width="boxWidth" :height="boxHeight"></u-image>
        <u-swiper v-else="voteSetting.voteBasic.voteBanner.length > 1" :list="voteSetting.voteBasic.voteBanner"
            keyName="image" indicator :indicatorActiveColor="theme.mainColor" indicatorMode="line"
            :height="boxHeight" :current="coverCurrent" :width="boxWidth" :autoplay="false" circular
            :bgColor="theme.backgroundColor"></u-swiper>
    </view>
    <view class="mt12 dflex jcsa">
        <view class="dflex aic to_more jcc main_bg_blue cffffff" @click="changeTemplateList">
            <u-icon name="grid" color="#fff" size="18"></u-icon>
            <text class="ml3 f14">更换模版</text>
        </view>
    </view>
</view>

这段代码负责投票小程序的封面图展示和模板选择功能。它允许用户查看当前选定的模板名称，并且可以通过点击来更换模板。如果投票设置包含多个封面图，它会使用u-swiper组件来展示一个轮播效果。这样的设计提供了丰富的视觉体验和操作便利性，使用户能够轻松地个性化他们的投票页面。

投票基本设置

投票标题和公告设置

<view class="dflex jcsb aic border_bottom_eee ptb12">
    <view class="dflex">
        <text class="f16 fbold">投票标题</text>
        <text class="ml3 cff0000">*必填</text>
    </view>
    <view class="dflex fg1 ml5">
        <u-input border="none" :maxlength="30" placeholder="请输入投票活动标题" inputAlign="right"
            v-model="voteSetting.voteBasic.voteTitle"></u-input>
    </view>
</view>
<view class="dflex jcsb aic border_bottom_eee ptb12">
    <view class="dflex">
        <text class="f16 fbold">投票公告</text>
    </view>
    <view class="dflex fg1 ml5">
        <u-input border="none" :maxlength="50" placeholder="请输入投票公告" inputAlign="right"
            v-model="voteSetting.voteBasic.voteNotice"></u-input>
    </view>
</view>

这部分代码提供了投票标题和公告的设置功能。用户可以在指定的输入框中输入投票的标题和公告，用于定义投票活动的主要信息。通过设置最大长度和占位符提示，代码确保了信息的简洁性和明确性，同时为用户提供了良好的输入体验。

投票隐私和安全设置

投票活动的隐私限制

<view class="dflex jcsb aic border_bottom_eee ptb12">
    <view class="dflex aic">
        <text class="f16 fbold mr5">智能防刷</text>
        <u-icon name="question-circle" color="#666" customStyle="margin-left:2px;" size="18"
            @click="voteHelp('智能防刷', '多维度智能防止刷票，有效提高投票数据正式性。')"></u-icon>
    </view>
    <view class="dflex ml5 aic">
        <u-switch v-model="voteSetting.voteLimit.voteSmart" inactiveColor="#e4f1fe" @change="voteSmartChange"></u-switch>
    </view>
</view>

这段代码涉及到投票活动的智能防刷功能。它使用一个开关组件允许用户启用或禁用智能防刷功能，以防止投票数据被操纵。此功能的设计强调了投票的公正性和数据的准确性，确保投票结果的真实性和可信度。

好了，本次文章的小程序来源是：点点投票，在线投票小程序，支持H5版本，设计的非常漂亮，插件区颜值天花板，关注我，每天为您拆解优秀项目。这只是我们分析此投票小程序的起点。在接下来的文章中，我们将继续深入探索更多功能和实现细节。不要错过，一起见证一个现代投票系统的构建过程！