网站实现多语言,网站开发前端兼职,十四冶建设集团技工学校网站,wordpress本地音乐2m近几年#xff0c;推广外卖红包爆火#xff0c;各种推广外卖红包的公众号层出不穷。于是#xff0c;我就在想外卖红包究竟是怎么一回事。就这样#xff0c;我带着问题开始了关于外卖红包的研究。
在研究的过程中#xff0c;我开始了解隐藏优惠券、cps等一系列相关的术语。…近几年推广外卖红包爆火各种推广外卖红包的公众号层出不穷。于是我就在想外卖红包究竟是怎么一回事。就这样我带着问题开始了关于外卖红包的研究。
在研究的过程中我开始了解隐藏优惠券、cps等一系列相关的术语。最后我明白外卖红包其实就是推广分成外卖平台会对某些店铺设置隐藏奖励用户通过分享的链接领取红包进行下单后分享者会获得一定的收入。了解这些后我便着手如何将这些隐藏的分成让利给下单的用户因此也就有了下面的小程序。
“天省宝”小程序提供了一键解决今天吃什么难题外卖红包领取以及领取红包下单后可获得分成奖励。 代码技术
服务端使用PHPMySQL编写服务端接口
前端使用UniApp开发并封装成微信小程序
界面截图介绍
一、外卖红包
提供美团和饿了么外卖红包领取下单可获得分成平台只抽取极少一部分分成作为开发和日常维护费用
领取饿了么红包 领取美团外卖红包 二、今天吃什么
提供一键解决今天吃什么难题可随机抽取不同时间段的菜品 随机抽取菜品我使用的是定时器setInterval进行多次获取菜品
template
view classfood-topview classfood-title flex-center今天{{row.time_text row.time_text ! 不限 ? row.time_text: }}吃textclassml5{{formData.name}}/text{{startLoading ? : }}/viewview classfood-startview classstart-text clickchooseMenu(){{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 classuni-ec-canvas idyear-canvas refyearCanvas canvas-idyear-canvas :ecec/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
