近幾年，推廣外賣紅包爆火，各種推廣外賣紅包的公眾號層出不窮。于是，我就在想外賣紅包究竟是怎么一回事。就這樣，我帶著問題開始了關于外賣紅包的研究。

在研究的過程中，我開始了解商品聯盟、推廣分成、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>