历时两个月，我终于研究透外卖红包是怎么一回事

近几年，推广外卖红包爆火，各种推广外卖红包的公众号层出不穷。于是，我就在想外卖红包究竟是怎么一回事。就这样，我带着问题开始了关于外卖红包的研究。

在研究的过程中，我开始了解隐藏优惠券、cps等一系列相关的术语。最后，我明白外卖红包其实就是推广分成，外卖平台会对某些店铺设置隐藏奖励，用户通过分享的链接领取红包进行下单后，分享者会获得一定的收入。了解这些后，我便着手如何将这些隐藏的奖励返钱给下单的用户，因此也就有了下面的小程序。

代码技术

服务端：使用PHP+MySQL编写服务端接口

前端：使用UniApp开发并封装成微信小程序

界面截图介绍

一、外卖红包

每天可领取美团和饿了么外卖红包，下单可获得返钱奖励

二、今天吃什么

提供一键解决今天吃什么难题，可随机抽取不同时间段的菜品。

随机抽取菜品，我使用的是定时器setInterval进行多次获取菜品

<template>
<view class="food-top">
    <view class="food-title flex-center">
            今天{{row.time_text && row.time_text != '不限' ? row.time_text: ''}}吃<text
                    class="ml5">{{formData.name}}</text>{{startLoading ? '！': '？'}}
    </view>

    <view class="food-start">
            <view class="start-text" @click="chooseMenu()">
                    {{buttonText}}
            </view>
    </view>
</view>
<script>
// 声明定时器
var timer = null;
export default {
    components: {},
    data() {
        return {
                buttonText: "开始", // 按钮文字
                row: {
                        cate_id: 0, // 就餐类型id
                        time_text: '', // 就餐类型文字
                },
                // 抽取菜品结果
                formData: {
                        name: '什么'
                },
                cateList: []
        };
    },
    onLoad() {
            this.getList();
    },
    onHide() {
            this.endMenu()
    },
    onUnload() {
            this.endMenu()
    },
    methods: {
            getList() {
                    this.$api.get('/api/food/menuList', this.queryForm).then(res => {

                            this.foodList = res.data.list;
                            this.cateList = res.data.cate_list;
                            this.row = res.data.row;

                    });
            },

            // 选择类型
            selectCate(item) {
                    this.playSound()
                    this.queryForm.cate_id = item.id
                    this.$global.showToast('成功选择“' + item.name + '”类型，请开始选择')

                    this.initMenu()
            },


            // 随机选择菜单
            chooseMenu() {
                    this.playSound()

                    if (this.buttonText == '开始' || this.buttonText == '换一个') {
                            // 开始选择
                            this.startMenu()
                    } else {
                            // 结束选择
                            this.buttonText = '换一个'
                            this.startLoading = true
                            this.endMenu()
                            this.recordMenu()
                    }

            },

            // 记录手动选择结果
            recordMenu() {
                    // menuChoose
                    this.$api.get('/api/food/menuChoose', this.formData).then(res => {
                            // console.log(res.data.length)
                            if (res.data.msg) {
                                    this.$global.showToast(res.data.msg)
                            }
                    });
            },

            // 初始化菜单
            initMenu() {
                    this.buttonText = '开始'
                    this.formData.name = '什么'
                    this.startLoading = false
                    clearInterval(timer)

                    this.getList()
            },

            // 开始选择
            startMenu() {
                    this.buttonText = '停'
                    this.startLoading = false
                    timer = setInterval(() => {
                            let row = this.getRandValue(this.foodList)
                            // console.log(row)
                            this.formData.name = row.name
                    }, 50)
            },

            // 结束选择
            endMenu() {
                    // 记录选择结果 清楚定时
                    clearInterval(timer)
            },

            getRandValue(list = []) {
                    let arr = list
                    let index = Math.floor((Math.random() * arr.length))
                    return arr[index];
            },
    }
};
</script>
</template>

三、我的页面

显示收益明细和排行、好友列表等功能。

收益明细页面，展示了最近10天内的收益、累计总收益和近30日的收益

收益明细的柱状图使用的是echarts官方提供的小程序版本echarts-for-weixin组件。详细代码如下：

<template>
// 2. 页面使用echarts组件
<uni-ec-canvas class="uni-ec-canvas" id="year-canvas" ref="yearCanvas" canvas-id="year-canvas" :ec="ec"></uni-ec-canvas>
</template>
<script>
// 1. 需要引入echarts相关的组件
import uniEcCanvas from '@/pagesMine/components/cloud/uni-ec-canvas/uni-ec-canvas.vue';
import * as echarts from '@/pagesMine/components/cloud/uni-ec-canvas/echarts.min.js';
var chart = null;
export default {
        components: {
            // 注册echarts组件
            uniEcCanvas
        },
        data() {
            return {
                    // 格式化echarts组件为柱状图样式
                    ec: {
                            lazyLoad: true
                    },
                    optionYear: {
                            tooltip: {
                                    trigger: 'axis',
                                    axisPointer: {
                                            // 坐标轴指示器，坐标轴触发有效
                                            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                                    }
                            },
                            grid: {
                                    //设置 上下左右距离dom容器距离 控制图标大小
                                    left: '1%',
                                    right: '1%',
                                    bottom: '2%',
                                    top: '8%',
                                    //是否显示刻度标签 true显示
                                    containLabel: true
                            },
                            //直角坐标系配置
                            //设置x轴配置
                            xAxis: {
                                    type: 'category',
                                    axisTick: {
                                            show: false,
                                            alignWithLabel: true
                                    },
                                    nameTextStyle: {
                                            color: '#666666'
                                    },
                                    axisLabel: {
                                            show: true,
                                            interval: 0,
                                            // rotate: 40,
                                            textStyle: {
                                                    color: '#666',
                                                    fontSize: '10',
                                                    fontWeight: 'bold'
                                            }
                                    },
                                    axisLine: {
                                            lineStyle: {
                                                    color: '#666',
                                                    width: 1
                                            }
                                    },
                                    data: ['寿险', '重疾', '意外', '医疗', '年金']
                            },
                            //设置y轴配置
                            yAxis: {
                                    type: 'value',
                                    axisLine: {
                                            show: false //y轴线消失
                                    },
                                    axisLabel: {
                                            show: true,
                                            textStyle: {
                                                    color: '#666',
                                                    fontSize: '10'
                                            }
                                    },

                                    axisTick: {
                                            show: false
                                    }
                            },
                            series: [{
                                    type: 'line',
                                    data: [20, 50, 40, 10, 20],
                                    smooth: true,
                                    areaStyle: {
                                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                                            offset: 0,
                                                            color: '#6f9989'
                                                    },
                                                    {
                                                            offset: 1,
                                                            color: '#c4d7c7'
                                                    }
                                            ])
                                    },
                                    itemStyle: {
                                            color: '#6f9989',
                                            lineStyle: {
                                                    color: '#6f9989'
                                            }
                                    },
                                    label: {
                                            show: true,
                                            position: 'top',
                                            formatter: params => {
                                                    // console.log(params);
                                                    if (params.data > 0) {
                                                            return params.data;
                                                    } else {
                                                            return '';
                                                    }
                                            },

                                            color: '#666666',
                                            fontStyle: 'PingFang SC',
                                            fontWeight: 'bold',
                                            fontSize: '12'
                                    }
                            }]
                    }
            };
        },
        onLoad(options) {
            this.getIncome();
        },
        methods: {
            // 获取服务端数据 并进行绘图
            getIncome() {
                this.$api.get('/api/person/incomeStatistics', {}).then(
                        res => {
                                this.row = res.data;
                                this.optionYear.xAxis.data = res.data.income_day[0];
                                this.optionYear.series[0].data = res.data.income_day[1];

                                // 获取不到 canvas实例
                                this.$nextTick(() => {
                                        setTimeout(() => {
                                                this.$refs.yearCanvas.init(this.initYearChart);
                                        }, 300);
                                });

                                this.isLoading = false;
                        },
                        rs => {
                                this.isLoading = false;
                        }
                );
            },

            // 绘成柱状图
            initYearChart(canvas, width, height, canvasDpr) {
                // console.log(canvas, width, height, canvasDpr);
                chart = echarts.init(canvas, null, {
                        width: width,
                        height: height,
                        devicePixelRatio: canvasDpr
                });
                canvas.setChart(chart);
                chart.setOption(this.optionYear);
                return chart;
            },
    }
}
</script>