历时三个月，我发布了一款领取外卖红包小程序

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

在研究的过程中，我开始了解隐藏优惠券、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: ''}}吃<textclass="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, // 就餐类型idtime_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.idthis.$global.showToast('成功选择“' + item.name + '”类型，请开始选择')this.initMenu()},// 随机选择菜单chooseMenu() {this.playSound()if (this.buttonText == '开始' || this.buttonText == '换一个') {// 开始选择this.startMenu()} else {// 结束选择this.buttonText = '换一个'this.startLoading = truethis.endMenu()this.recordMenu()}},// 记录手动选择结果recordMenu() {// menuChoosethis.$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 = falseclearInterval(timer)this.getList()},// 开始选择startMenu() {this.buttonText = '停'this.startLoading = falsetimer = setInterval(() => {let row = this.getRandValue(this.foodList)// console.log(row)this.formData.name = row.name}, 50)},// 结束选择endMenu() {// 记录选择结果 清楚定时clearInterval(timer)},getRandValue(list = []) {let arr = listlet 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>