当前位置:   article > 正文

日入近1000外卖返利小程序前端+后端源码,别再问能不能玩_小程序前端外快

小程序前端外快

       

      怎么赚钱

        美团外卖饿了么外卖赚钱小程序还能赚钱吗,老有人问能不能赚钱,那么今天就说一下逻辑

首先,分为cps悬赏和,赏金两种方式赏金属于打赏比较高的。cps的模式主要靠用户下单的结算金额,用户买的多你就赚的多,通常是在3~6%,美团是3,美团被制裁之后就降价了(可能是这个原因,据说预算不够了)。

     

      当然了,依赖外卖cps赚钱是不行的,当然要加点东西了。比如涵盖话费、视频会员、加油卡、礼品卡等多种品类折扣权益,吃、喝、玩、乐、购五大消费场景覆盖的综合权益卡券小程序,用户折扣购、平台赚佣金,个人、企业流量变现平台。

       这些都可以加。三个月外卖收入订单。仁者见仁智者见智,都有自己的推广方式,但是,最好是用免费的流量,比如贴吧,什么的。

     外卖分销代码

  1. <template>
  2. <view class="page-main">
  3. <view class="head-picture-area">
  4. <uni-nav-bar
  5. :fixed="false"
  6. :status-bar="true"
  7. :border="false"
  8. backgroundColor="transparent"
  9. >
  10. <!-- <view class="choose-address" slot="left" @click="openPopup">
  11. <view class="icon" />
  12. <view class="city">广州市</view>
  13. </view> -->
  14. </uni-nav-bar>
  15. <image src="/static/index/banner.png" class="header-content" />
  16. </view>
  17. <loginWrap>
  18. <view class="coupon-top" v-if="productActivityList.length">
  19. <view
  20. class="coupon-top-item"
  21. v-for="(item, index) in productActivityList"
  22. :key="index"
  23. @click="jumpTo(`/pages/product/list?pcode=${item.code}`)"
  24. >
  25. <image class="pic" :src="item.logo" />
  26. <view class="text">{{ item.name }}</view>
  27. </view>
  28. <view
  29. class="coupon-top-item"
  30. @click="
  31. handleProductClick({
  32. type: 'page',
  33. path: '/pages/product/classify',
  34. })
  35. "
  36. >
  37. <image class="pic" src="/static/index/fenlei.png" />
  38. <view class="text">分类查找</view>
  39. </view>
  40. </view>
  41. <brandLoading v-else />
  42. </loginWrap>
  43. <view
  44. class="hot-activity"
  45. :class="{ layout2: layout == 2 }"
  46. v-if="banner.length || coupon.length"
  47. >
  48. <view class="activity-left" v-if="banner.length">
  49. <!-- <view class="title">1元拉新拼</view> -->
  50. <swiper
  51. :autoplay="true"
  52. :circular="true"
  53. class="swiper"
  54. indicatorActiveColor="#fff"
  55. indicatorColor="#ccc"
  56. :indicatorDots="true"
  57. v-if="banner.length > 1"
  58. >
  59. <swiper-item
  60. class="swiper-item"
  61. v-for="(banner, i) in banner"
  62. :key="i"
  63. @click="handleProductClick(banner)"
  64. >
  65. <image class="img" mode="aspectFill" :src="banner.pic.url"></image>
  66. </swiper-item>
  67. </swiper>
  68. <view class="swiper" v-else>
  69. <image class="img" mode="aspectFill" :src="banner[0].pic.url" @click="handleProductClick(banner[0])"></image>
  70. </view>
  71. </view>
  72. <view class="activity-right" v-if="coupon.length">
  73. <view class="activity-item" v-for="(coupon, i) in coupon" :key="i">
  74. <image
  75. :mode="layout == 2 ? 'aspectFill' : 'widthFix'"
  76. :src="coupon.pic.url"
  77. @click="handleProductClick(coupon)"
  78. />
  79. </view>
  80. </view>
  81. </view>
  82. <view class="coupon-card">
  83. <view class="nav-bar">
  84. <view class="nav-item active">精选优惠</view>
  85. <!-- <view class="nav-item">周边好店</view> -->
  86. </view>
  87. <loginWrap>
  88. <view class="coupon-card-list" v-if="productHotList.length">
  89. <view
  90. class="item"
  91. @click="jumpTo(`/pages/product/detail?gcode=${item.code}`)"
  92. v-for="(item, index) in productHotList"
  93. :key="index"
  94. >
  95. <view
  96. class="pic"
  97. :style="{
  98. background: `url(${item.bg_card}) no-repeat center/contain`,
  99. }"
  100. ></view>
  101. <view class="card-content">
  102. <view class="title"> {{ item.name }} </view>
  103. <view class="control">
  104. <view class="btn">{{ item.discountStr }}领取</view>
  105. <view class="earn" v-if="item.commission"
  106. >赚¥{{ item.commission_str }}</view
  107. >
  108. <!-- <view class="like"></view> -->
  109. </view>
  110. </view>
  111. </view>
  112. </view>
  113. <cardLoading v-else />
  114. </loginWrap>
  115. </view>
  116. <customTabBar tab="index"></customTabBar>
  117. </view>
  118. </template>
  119. <script>
  120. import { mapState, mapActions } from "vuex";
  121. import getShareMessage from "@/utils/getShareMessage";
  122. import brandLoading from "./components/brandLoading";
  123. import cardLoading from "./components/cardLoading";
  124. export default {
  125. components: { brandLoading, cardLoading },
  126. data() {
  127. return {};
  128. },
  129. computed: {
  130. ...mapState({
  131. productActivityList: (state) => state.index.productActivityList,
  132. productHotList: (state) => state.index.productHotList,
  133. banner: (state) => state.index.banner,
  134. coupon: (state) => state.index.coupon,
  135. layout: (state) => state.index.layout,
  136. }),
  137. },
  138. onLoad(option) {
  139. // this.initLocation();
  140. this.fetchProductActivity();
  141. this.fetchProductHot();
  142. this.fetchCardProductRecommand();
  143. if (option.path) {
  144. this.jumpTo(option.path);
  145. }
  146. },
  147. methods: {
  148. ...mapActions([
  149. "getAuthorize",
  150. "fetchProductActivity",
  151. "fetchProductHot",
  152. "fetchCardProductRecommand",
  153. ]),
  154. async initLocation() {
  155. const authorize = await this.getAuthorize();
  156. if (!authorize) return;
  157. uni.showLoading({ title: "加载优惠中" });
  158. const [locationErr, locationRes] = await uni.getLocation();
  159. const { latitude, longitude } = locationRes;
  160. // await this.fetchShopRecommand({
  161. // lat: latitude,
  162. // lng: longitude,
  163. // });
  164. uni.hideLoading();
  165. },
  166. jumpTo(payload) {
  167. try {
  168. const path = decodeURIComponent(payload);
  169. uni.navigateTo({
  170. url: path,
  171. });
  172. } catch (e) {}
  173. },
  174. handleProductClick(data) {
  175. const { type, appId, path, url } = data;
  176. if (type == "page") {
  177. uni.navigateTo({
  178. url: path,
  179. });
  180. }
  181. if (type == "tab") {
  182. uni.switchTab({
  183. url: path,
  184. });
  185. }
  186. if (type == "miniapp") {
  187. uni.navigateToMiniProgram({
  188. appId,
  189. path,
  190. });
  191. }
  192. if (url) {
  193. uni.navigateTo({
  194. url: `/pages/webview/webview?url=${encodeURIComponent(url)}`,
  195. });
  196. }
  197. },
  198. onShareAppMessage(res) {
  199. return getShareMessage();
  200. },
  201. onShareTimeline() {
  202. return getShareMessage();
  203. },
  204. },
  205. };
  206. </script>
  207. <style lang="scss">
  208. page {
  209. background: #f2f2f2;
  210. }
  211. .head-picture-area {
  212. position: relative;
  213. background: #ffffff;
  214. &::before {
  215. position: absolute;
  216. top: 0;
  217. left: 0;
  218. content: "";
  219. display: block;
  220. height: 248rpx;
  221. width: 100%;
  222. background: linear-gradient(180deg, #ffa1a1 0%, #fad2d6 47%, #ffffff 100%);
  223. }
  224. }
  225. .choose-address {
  226. display: flex;
  227. align-items: center;
  228. padding-left: 26rpx;
  229. font-size: 30rpx;
  230. line-height: 42rpx;
  231. color: #333333;
  232. white-space: nowrap;
  233. .icon {
  234. margin-right: 12rpx;
  235. width: 32rpx;
  236. height: 36rpx;
  237. background: url(/static/index/icon.png) no-repeat center/contain;
  238. }
  239. }
  240. .header-content {
  241. position: relative;
  242. display: block;
  243. margin: 0 auto;
  244. width: 686rpx;
  245. height: 182rpx;
  246. }
  247. .coupon-top {
  248. position: relative;
  249. z-index: 1;
  250. display: flex;
  251. flex-wrap: wrap;
  252. padding: 0 24rpx;
  253. padding-top: 44rpx;
  254. background: #ffffff;
  255. &-item {
  256. padding-bottom: 40rpx;
  257. width: 20%;
  258. text-align: center;
  259. display: flex;
  260. align-items: center;
  261. flex-direction: column;
  262. .pic {
  263. display: block;
  264. width: 80rpx;
  265. height: 80rpx;
  266. border-radius: 50%;
  267. }
  268. .text {
  269. margin-top: 18rpx;
  270. font-size: 24rpx;
  271. line-height: 34rpx;
  272. color: #333333;
  273. }
  274. }
  275. }
  276. .hot-activity {
  277. background: #f2f2f2;
  278. display: flex;
  279. flex-direction: column;
  280. padding: 20rpx 32rpx;
  281. justify-content: space-between;
  282. box-shadow: 0 -2rpx 120rpx rgba(236, 89, 89, 0.1);
  283. &.layout2 {
  284. flex-direction: row;
  285. justify-content: space-between;
  286. .activity-left {
  287. margin-bottom: 0;
  288. height: 428rpx;
  289. width: 334rpx;
  290. .swiper {
  291. height: 100%;
  292. width: 100%;
  293. }
  294. image {
  295. height: 100%;
  296. width: 100%;
  297. }
  298. }
  299. .activity-right {
  300. justify-content: space-between;
  301. margin-right: 0;
  302. flex-direction: column;
  303. .activity-item {
  304. flex: initial;
  305. margin-right: 0;
  306. height: 204rpx;
  307. width: 332rpx;
  308. }
  309. image {
  310. width: 100;
  311. height: 100%;
  312. }
  313. }
  314. }
  315. .swiper {
  316. height: 160rpx;
  317. }
  318. .title {
  319. font-size: 32rpx;
  320. font-weight: 800;
  321. line-height: 44rpx;
  322. color: #333333;
  323. }
  324. .activity-left {
  325. margin-bottom: 20rpx;
  326. text-align: center;
  327. image {
  328. // margin-top: 18rpx;
  329. display: block;
  330. width: 100%;
  331. height: 160rpx;
  332. }
  333. }
  334. .activity-right {
  335. display: flex;
  336. margin-right: -20rpx;
  337. flex-wrap: wrap;
  338. .activity-item {
  339. flex: 1;
  340. margin-right: 20rpx;
  341. }
  342. image {
  343. // margin-top: 18rpx;
  344. display: block;
  345. width: 100%;
  346. height: 152rpx;
  347. }
  348. }
  349. }
  350. .coupon-card {
  351. background: #fbf6f2;
  352. border-radius: 40rpx 40rpx 0 0;
  353. padding-top: 40rpx;
  354. padding-bottom: 160rpx;
  355. .nav-bar {
  356. display: flex;
  357. padding: 0 32rpx;
  358. color: #333333;
  359. align-items: center;
  360. .nav-item {
  361. margin-right: 40rpx;
  362. font-size: 30rpx;
  363. font-weight: 700;
  364. line-height: 42rpx;
  365. color: #999999;
  366. &::after {
  367. content: "";
  368. // display: block;
  369. margin: 14rpx auto 0;
  370. width: 46rpx;
  371. height: 6rpx;
  372. background: transparent;
  373. }
  374. &.active {
  375. font-size: 36rpx;
  376. font-weight: 800;
  377. line-height: 50rpx;
  378. color: #333333;
  379. &::after {
  380. background: #ec5959;
  381. }
  382. }
  383. }
  384. }
  385. &-list {
  386. display: flex;
  387. flex-wrap: wrap;
  388. padding: 26rpx 25rpx;
  389. .item {
  390. box-sizing: border-box;
  391. margin-bottom: 4rpx;
  392. width: 350rpx;
  393. height: 456rpx;
  394. background: url(https://vkceyugu.cdn.bspapp.com/VKCEYUGU-cf26384b-87c0-45b4-a7e2-8a03c1243555/0ba920fc-465a-4a39-9c16-e6dbd436ea79.png)
  395. no-repeat center/contain;
  396. .pic {
  397. display: block;
  398. height: 218rpx;
  399. margin: 0 20rpx;
  400. }
  401. .card-content {
  402. padding: 0 42rpx;
  403. }
  404. .title {
  405. padding-top: 34rpx;
  406. font-size: 28rpx;
  407. font-weight: 700;
  408. line-height: 40rpx;
  409. color: #333333;
  410. overflow: hidden;
  411. text-overflow: ellipsis;
  412. white-space: nowrap;
  413. }
  414. .control {
  415. display: flex;
  416. justify-content: space-between;
  417. align-items: center;
  418. padding-top: 58rpx;
  419. .btn {
  420. padding: 0 22rpx;
  421. height: 58rpx;
  422. line-height: 58rpx;
  423. background: #fbeae5;
  424. border-radius: 30px;
  425. text-align: center;
  426. font-weight: 700;
  427. color: #ec5959;
  428. font-size: 26rpx;
  429. }
  430. .like {
  431. width: 32rpx;
  432. height: 30rpx;
  433. background: url(/static/index/collect.png) no-repeat center/contain;
  434. }
  435. .earn {
  436. // padding: 6rpx 6rpx;
  437. color: #fa6400;
  438. font-size: 24rpx;
  439. // background: #fbeae5;
  440. }
  441. }
  442. }
  443. }
  444. }
  445. </style>

         

外卖卡券返利分销小程序源码图

           演示地址

         源码获取请前往:外卖小程序源码

          体验:

         

 

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/秋刀鱼在做梦/article/detail/833069?site
推荐阅读
相关标签
  

闽ICP备14008679号