任务3-2操作步骤1：积分系统研发

任务三工单2

本工单最终效果：

3.2.1 积分兑换界面效果图.png

3.2.2 积分明细页面效果图.png

3.2.3 签到界面效果图.png

3.2.4 商品详情界面效果图.png

1、请根据指示创建一个名为integrals.vue的“积分兑换”界面，并在pages.json中配置相应的样式。代码示例如下。在index.vue文件中，为class为"integral_section"的view元素添加点击事件，使其能够跳转到integrals.vue界面，该事件处理函数为integrals方法。
pages.json

{
        "path" : "pages/integrals/integrals",
        "style" : {
        "navigationStyle":"custom", //导航栏样式，custom即取消默认的原生导航栏
        "onReachBottomDistance": 50 //页面上拉触底事件触发时距页面底部距离
        }
}

2、引入自定义组件navbar-back-button以构建头部布局。在onLoad()生命周期方法中调用this.$api('customPoints')方法以获取用户的积分信息，并在适当位置展示其积分，相关属性为customPoints.totalPoints，展示效果见图3.2.5。

3.2.5 顶部积分展示效果.png

对应代码

index.vue跳转

    <view class="integral_section"  @tap="integrals">
                    <view class="top">
                        <text class="title">我的积分</text>
                        <text class="value">411</text>
                    </view>
                    <view class="bottom">
                        进入积分商城兑换云鲤券及周边好礼
                        <view class="iconfont iconarrow-right"></view>
                    </view>
                </view>
...
...
...
integrals() {//点击我的积分
                if(!this.isLogin) {//做登录判断
                    uni.navigateTo({url: '/pages/login/login'})
                    return
                }
                uni.navigateTo({
                    url: '/pages/integrals/integrals'
                })
            },

integrals.vue 顶部源码

<template>
    <view class="container">
        <navbar-back-button></navbar-back-button>
        <view class="header">
            <image src="/static/images/integrals/bg.png" mode="scaleToFill"></image>
            <view class="sign-in-info">
                <view class="left">
                    <view class="d-flex align-items-baseline">
                        <image class="integral-icon" src="/static/images/integrals/integral.png"></image>
                        <view class="number">{{customPoints.totalPoints}}</view>
                        <view class="font-size-base">积分</view>
                        <view class="iconfont iconarrow-right line-height-100"></view>
                    </view>
                </view>
                <view class="right">
                    兑换记录
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import navbarBackButton from '@/components/navbar-back-button'
    export default {
        components: {
            navbarBackButton
        },
        data() {
            return {
                customPoints: {}, //用户积分数据
            };
        },
        async onLoad() {
            this.customPoints = await this.$api('customPoints') //获取数据积分
        },
    }
</script>

<style lang="scss" scoped>
.header {
        position: relative;
        width: 100%;
        height: 33.333vh;

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

    .sign-in-info {
        position: absolute;
        width: 100%;
        height: 33.333vh;
        display: flex;
        align-items: center;
        top: 0;
        left: 0;

        .left {
            color: #FFFFFF;
            margin-left: 40rpx;
            flex: 1;
            display: flex;

            .integral-icon {
                width: 64rpx;
                height: 64rpx;
                margin-right: 20rpx;
            }

            .number {
                font-size: 80rpx;
                margin-right: 10rpx;
            }
        }

        .right {
            background-color: #FFFFFF;
            color: $color-primary;
            font-size: $font-size-base;
            border-radius: 50rem 0 0 50rem;
            padding: 10rpx 30rpx;
        }
    }

</style>

3、引入了自定义组件uni-steps步骤条和uni-icons图标（专为uni-steps设计），如图3.2.6所示。自定义组件已调整了样式，仅需完成中间card区域的布局设计，并通过调用this.$api('attendance')方法获取签到激活数据，以调整步骤条的样式。布局设计主要涉及uni-steps的两个属性：active和options，其作用在表1中有详细解释。以下是相关重要方法的代码说明：

3.2.6 components中引入组件.png

async getStepsOptions() {
            let stepsOptions = []
            const attendance = await this.$api('attendance') //从api attendance获取数据
            attendance.forEach((item, index) => {
                if (item.is_day) { //哪天签到激活了的
                    this.activeDay = index
                }
                let arr = {
                    title: item.day_name + '天', //上方文字
                    desc: '+' + item.points //下方描述
                }
                if (index == attendance.length - 1) {//如果是已签到的
                    arr.circle = '/static/images/integrals/goal.png' //logo
                    arr.circleStyle = 'width: 47rpx; height: 39rpx;' //logo大小
                }
                stepsOptions.push(arr)//给stepsOption数组推送数据源
            })
            this.stepsOption = stepsOptions//赋值
        }

一旦完成uni-steps布局，接下来需要在下方添加一张展示的banner图片布局，其效果如图3.2.7所示，具体代码如下：

3.2.7 uni-steps步骤条效果图.png

integrals.vue uni-steps步骤条源码

<template>
    <view class="container">
        <navbar-back-button></navbar-back-button>
        <view class="header">
            <image src="/static/images/integrals/bg.png" mode="scaleToFill"></image>
            <view class="sign-in-info">
                <view class="left">
                    <view class="d-flex align-items-baseline">
                        <image class="integral-icon" src="/static/images/integrals/integral.png"></image>
                        <view class="number">{{customPoints.totalPoints}}</view>
                        <view class="font-size-base">积分</view>
                        <view class="iconfont iconarrow-right line-height-100"></view>
                    </view>
                </view>
                <view class="right">
                    兑换记录
                </view>
            </view>
        </view>
        <view style="padding: 0 30rpx;">
            <!-- 连续签到赚积分 中间card -->
            <view class="sign-in-box">
                <view class="text-color-base font-weight-bold font-size-lg" style="margin: 20rpx 0;">连续签到赚积分</view>
                <uni-steps :active="activeDay" :options="stepsOption"></uni-steps>
                <view class="d-flex flex-column align-items-center just-content-center" style="margin: 20rpx 0;">
                    <button type="primary" class="sign-in-btn" >签到</button>
                    <view class="font-size-base text-color-primary" style="margin-top: 20rpx;">查看签到日历</view>
                </view>
            </view>
            <!-- banner图 -->
            <view class="banner">
                <image src="https://s3.uuu.ovh/imgs/2024/12/10/f51b48e75b5d20f9.png" mode="widthFix"></image>
            </view>
        </view>
    </view>
</template>

<script>
    import navbarBackButton from '@/components/navbar-back-button'
    import uniSteps from '@/components/uni-steps/uni-steps'
    export default {
        components: {
            navbarBackButton,
            uniSteps
        },
        data() {
            return {
                customPoints: {}, //用户积分数据
                stepsOption: [],
                activeDay: 0, //哪天激活签到
            };
        },
        async onLoad() {
            await this.getStepsOptions() //获取激活数据
            this.customPoints = await this.$api('customPoints') //获取数据积分
        },
        methods:{
            async getStepsOptions() {
                let stepsOptions = []
                const attendance = await this.$api('attendance') //从api attendance获取数据
                attendance.forEach((item, index) => {
                    if (item.is_day) { //哪天签到激活了的
                        this.activeDay = index
                    }
                    let arr = {
                        title: item.day_name + '天', //上方文字
                        desc: '+' + item.points //下方描述
                    }
                    if (index == attendance.length - 1) {//如果是已签到的
                        arr.circle = '/static/images/integrals/goal.png' //logo
                        arr.circleStyle = 'width: 47rpx; height: 39rpx;' //logo大小
                    }
                    stepsOptions.push(arr)//给stepsOption数组推送数据源
                })
                this.stepsOption = stepsOptions//赋值
            },
        }
    }
</script>

<style lang="scss" scoped>
.header {
        position: relative;
        width: 100%;
        height: 33.333vh;

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

    .sign-in-info {
        position: absolute;
        width: 100%;
        height: 33.333vh;
        display: flex;
        align-items: center;
        top: 0;
        left: 0;

        .left {
            color: #FFFFFF;
            margin-left: 40rpx;
            flex: 1;
            display: flex;

            .integral-icon {
                width: 64rpx;
                height: 64rpx;
                margin-right: 20rpx;
            }

            .number {
                font-size: 80rpx;
                margin-right: 10rpx;
            }
        }

        .right {
            background-color: #FFFFFF;
            color: $color-primary;
            font-size: $font-size-base;
            border-radius: 50rem 0 0 50rem;
            padding: 10rpx 30rpx;
        }
    }

    .sign-in-box {
        position: relative;
        background-color: #FFFFFF;
        margin-top: -90rpx;
        margin-bottom: 30rpx;
        width: 100%;
        border-radius: 8rpx;
        box-shadow: 0 0 20rpx rgba($color: #000000, $alpha: 0.1);
        padding: 20rpx;
        display: flex;
        flex-direction: column;

        .sign-in-btn {
            width: 50%;
            border-radius: 50rem !important;
        }
    }

    .banner {
        width: 100%;
        margin: 30rpx 0;

        image {
            width: 100%;
        }
    }
</style>

4、在onLoad()生命周期方法中，通过调用this.$api('customPoints')方法来获取积分商品列表数据，相关数据源展示在图3.2.8中。利用v-for指令对pointsMall数据进行操作，其中循环的key代表种类名称，items代表该种类下的商品列表。接着，对items进行二次循环，以展示每个商品的详细信息。特别注意，若item.amount大于0，则意味着用户需要额外支付金额才能进行兑换，这一点通过v-if指令来实现，具体效果如图3.2.9所示。“积分兑换”界面的布局已经完成，其效果如图3.2.1所示。

3.2.8 数据源对应属性.png

3.2.9 需额外加费用效果.png

5、在integrals.vue界面中，用户通过点击积分区域的设置事件@tap="flow"，可以跳转至“积分明细”界面。以下是该界面布局的代码。接着，在integrals文件夹下创建一个新的flow.vue文件，用于构建“积分明细”页面，并对其样式进行配置。

<view class="left">
    <view class="d-flex align-items-baseline" @tap="flow">
    <image class="integral-icon" src="/static/images/integrals/integral.png"></image>
        <view class="number">{{customPoints.totalPoints}}</view>
...
...
...
    methods: {
                 flow() {
                  uni.navigateTo({
                      url: '/pages/integrals/flow'
                   })
            },

调用 /api/points-flow 中的数据，效果如图3.2.10所示。利用 pointsFlow 数据对 list-cell 进行循环展示，最终效果图如图3.2.11所示。涉及的相关代码如下：

<!-- 下方积分增减列表 -->
<list-cell v-for="(item, index) in pointsFlow" :key="index" :hover="false" bgcolor="#F5F9FB">
    <view class="w-100 d-flex align-items-center">
        <view class="flex-fill d-flex flex-column">
            <view class="font-size-lg text-color-base mb-10">{{ item.reason }}</view>
            <view class="font-size-base text-color-assist">{{ item.createdAt }}</view>
        </view>
        <view class="d-flex flex-column align-items-center">
            <view class="font-size-lg text-color-base font-weight-bold">
                {{ item.changeType == 1 ? '+' : '-' }}{{ item.changeNum }}
            </view>
            <view class="font-size-sm text-color-assist">{{ item.sellerName }}</view>
        </view>
    </view>
</list-cell>

3.2.10 积分明细list对应数据源.png

3.2.11 积分明细页面效果图.png

具体代码如下：

integrals.vue代码

<template>
    <view class="container">
        <navbar-back-button></navbar-back-button>
        <view class="header">
            <image src="/static/images/integrals/bg.png" mode="scaleToFill"></image>
            <view class="sign-in-info">
                <view class="left">
                    <view class="d-flex align-items-baseline">
                        <image class="integral-icon" src="/static/images/integrals/integral.png"></image>
                        <view class="number">{{customPoints.totalPoints}}</view>
                        <view class="font-size-base">积分</view>
                        <view class="iconfont iconarrow-right line-height-100"></view>
                    </view>
                </view>
                <view class="right">
                    兑换记录
                </view>
            </view>
        </view>
        <view style="padding: 0 30rpx;">
            <!-- 连续签到赚积分 中间card -->
            <view class="sign-in-box">
                <view class="text-color-base font-weight-bold font-size-lg" style="margin: 20rpx 0;">连续签到赚积分</view>
                <uni-steps :active="activeDay" :options="stepsOption"></uni-steps>
                <view class="d-flex flex-column align-items-center just-content-center" style="margin: 20rpx 0;">
                    <button type="primary" class="sign-in-btn">签到</button>
                    <view class="font-size-base text-color-primary" style="margin-top: 20rpx;">查看签到日历</view>
                </view>
            </view>
            <!-- banner图 -->
            <view class="banner">
                <image src="https://s3.uuu.ovh/imgs/2024/12/10/f51b48e75b5d20f9.png" mode="widthFix"></image>
            </view>
            <!-- 积分商品列表 begin -->
            <view clas="d-flex flex-column" v-for="(items, cate) in pointsMall" :key="cate">
                <!-- 上方标题 -->
                <view class="d-flex justify-content-between align-items-center mb-30">
                    <view class="font-size-lg text-color-base">{{ cate }}</view>
                    <image src="/static/images/navigator.png" style="width: 40rpx; height: 40rpx;"></image>
                </view>
                <!-- 下方列表  -->
                <view class="d-flex flex-wrap justify-content-between">
                    <!-- 每一个物品列表 做循环 -->
                    <block v-for="(item, key) in items" :key="key">
                        <view class="d-flex bg-white flex-column align-items-stretch point-box">
                            <!-- 商品图片 -->
                            <image :src="item.img.length ? item.img[0] : '/static/images/integrals/ticket.png'"
                                class="w-100" mode="widthFix"></image>
                            <view class="d-flex flex-column overflow-hidden">
                                <!-- 商品名称 -->
                                <view class="font-size-lg text-color-base text-truncate font-weight-bold"
                                    style="margin-bottom: 10rpx;">{{ item.goods_name }}</view>
                                <view class="d-flex align-items-center">
                                    <!-- 商品价格 -->
                                    <view class="d-flex align-items-baseline">
                                        <view class="font-size-base text-color-primary mr-10">{{ item.points_price }}
                                        </view>
                                        <view class="font-size-sm text-color-assist">积分</view>
                                    </view>
                                    <!-- 商品需要加费用 需说明 -->
                                    <view v-if="item.amount > 0"
                                        class="d-flex align-items-center font-size-sm text-color-assist"
                                        style="margin: 0 10rpx;">+</view>
                                    <view v-if="item.amount > 0" class="d-flex align-items-baseline">
                                        <view class="font-size-base text-color-primary mr-10">
                                            {{ parseFloat(item.amount) }}</view>
                                        <view class="font-size-sm text-color-assist">元</view>
                                    </view>
                                </view>
                                <!-- 剩余多少件 -->
                                <view class="font-size-sm text-color-assist">剩余{{ item.goods_stock }}件</view>
                            </view>
                        </view>
                    </block>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import navbarBackButton from '@/components/navbar-back-button'
    import uniSteps from '@/components/uni-steps/uni-steps'
    export default {
        components: {
            navbarBackButton,
            uniSteps
        },
        data() {
            return {
                customPoints: {}, //用户积分数据
                stepsOption: [],
                activeDay: 0, //哪天激活签到
                pointsMall: [], //下方循环列表数据
            };
        },
        async onLoad() {
            await this.getStepsOptions() //获取激活数据
            this.customPoints = await this.$api('customPoints') //获取数据积分
            await this.getPointsMall()//获取下方数据
        },
        methods:{
            async getStepsOptions() {
                let stepsOptions = []
                const attendance = await this.$api('attendance') //从api attendance获取数据
                attendance.forEach((item, index) => {
                    if (item.is_day) { //哪天签到激活了的
                        this.activeDay = index
                    }
                    let arr = {
                        title: item.day_name + '天', //上方文字
                        desc: '+' + item.points //下方描述
                    }
                    if (index == attendance.length - 1) {//如果是已签到的
                        arr.circle = '/static/images/integrals/goal.png' //logo
                        arr.circleStyle = 'width: 47rpx; height: 39rpx;' //logo大小
                    }
                    stepsOptions.push(arr)//给stepsOption数组推送数据源
                })
                this.stepsOption = stepsOptions//赋值
            },
            async getPointsMall() {//获取下方兑换商品列表数据
                this.pointsMall = await this.$api('pointsMall')
            },
        }
    }
</script>

<style lang="scss" scoped>
.header {
        position: relative;
        width: 100%;
        height: 33.333vh;

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

    .sign-in-info {
        position: absolute;
        width: 100%;
        height: 33.333vh;
        display: flex;
        align-items: center;
        top: 0;
        left: 0;

        .left {
            color: #FFFFFF;
            margin-left: 40rpx;
            flex: 1;
            display: flex;

            .integral-icon {
                width: 64rpx;
                height: 64rpx;
                margin-right: 20rpx;
            }

            .number {
                font-size: 80rpx;
                margin-right: 10rpx;
            }
        }

        .right {
            background-color: #FFFFFF;
            color: $color-primary;
            font-size: $font-size-base;
            border-radius: 50rem 0 0 50rem;
            padding: 10rpx 30rpx;
        }
    }

    .sign-in-box {
        position: relative;
        background-color: #FFFFFF;
        margin-top: -90rpx;
        margin-bottom: 30rpx;
        width: 100%;
        border-radius: 8rpx;
        box-shadow: 0 0 20rpx rgba($color: #000000, $alpha: 0.1);
        padding: 20rpx;
        display: flex;
        flex-direction: column;

        .sign-in-btn {
            width: 50%;
            border-radius: 50rem !important;
        }
    }

    .banner {
        width: 100%;
        margin: 30rpx 0;

        image {
            width: 100%;
        }
    }
    .point-box {
        width: 49%;
        margin-bottom: 30rpx;
        border-radius: 8rpx;
        padding: 20rpx;
    }
</style>

flow.vue 积分明细页面

<template>
    <!-- 积分明细 -->
    <view>
        <!-- 上方 -->
        <view class="masthead d-flex flex-column just-content-center align-items-center">
            <view class="point-num">{{ pointNum }}</view>
            <view class="font-size-sm text-color-primary">查看积分规则</view>
        </view>
        <view>
            <!-- 下方积分增减列表 -->
            <list-cell v-for="(item, index) in pointsFlow" :key="index" :hover="false" bgcolor="#F5F9FB">
                <view class="w-100 d-flex align-items-center">
                    <view class="flex-fill d-flex flex-column">
                        <view class="font-size-lg text-color-base mb-10">{{ item.reason }}</view>
                        <view class="font-size-base text-color-assist">{{ item.createdAt }}</view>
                    </view>
                    <view class="d-flex flex-column align-items-center">
                        <view class="font-size-lg text-color-base font-weight-bold">
                            {{ item.changeType == 1 ? '+' : '-' }}{{ item.changeNum }}
                        </view>
                        <view class="font-size-sm text-color-assist">{{ item.sellerName }}</view>
                    </view>
                </view>
            </list-cell>
        </view>
    </view>
</template>

<script>
    import pointsFlow from '@/api/points-flow'

    export default {
        data() {
            return {
                pointNum: 0,
                pointsFlow: [] //积分列表
            }
        },
        onLoad() {
            const member = this.$store.state.member //用户信息
            this.pointNum = member.pointNum
            this.pointsFlow = pointsFlow
        }
    }
</script>

<style lang="scss" scoped>
    .masthead {
        height: 300rpx;
        position: relative;

        .point-num {
            font-size: 72rpx;
            color: $text-color-base;
        }

        &::after {
            content: '';
            position: absolute;
            border-bottom: 2rpx solid #e2e2e2;
            transform: scaleY(0.8);
            bottom: 0;
            right: 0;
            left: 0;
        }
    }

    .tui-list-cell:after {
        transform: scaleY(0.8);
    }
</style>

最后编辑于：2024.12.13 13:25:46

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 218,036评论 6赞 506
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 93,046评论 3赞 395
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 164,411评论 0赞 354
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 58,622评论 1赞 293
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 67,661评论 6赞 392
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 51,521评论 1赞 304
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 40,288评论 3赞 418
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 39,200评论 0赞 276
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 45,644评论 1赞 314
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 37,837评论 3赞 336
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,953评论 1赞 348
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 35,673评论 5赞 346
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 41,281评论 3赞 329
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,889评论 0赞 22
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 33,011评论 1赞 269
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 48,119评论 3赞 370
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 44,901评论 2赞 355

任务3-2操作步骤1：积分系统研发

任务三 工单2

对应代码

具体代码如下：

推荐阅读更多精彩内容

任务三工单2