devbox
很楠不爱3
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

快速搭建美团外卖（第三方）微信小程序（附精选源码32套，涵盖商城团购等）_利用微信开发者工具仿美团

作者：很楠不爱3 | 2024-02-18 09:13:54

赞

踩

利用微信开发者工具仿美团

​

项目使用的技术栈

1、数据请求: [flyio.js]同时支持浏览器、小程序、Node、Weex的基于Promise的跨平台http请求库。可以让您在多个端上尽可能大限度的实现代码复用
2、css预编译器: [stylus]-基于Node.js的CSS的预处理框架
3、数据来源:[EasyMock]-为测试提供模拟数据
4、整体框架: mpvue
5、地图:腾讯地图api

主体页面主要由首页，订单，我的页面组成

tabBar: {
      color: "#272636",
      selectedColor: "#FFD161",
      backgroundColor: "#fff",
      borderStyle: "#a8a8a8",
      list: [
        {
          pagePath: "pages/home/main",
          iconPath: "static/images/home.png",
          selectedIconPath: "static/images/home-selected.png",
          color:"white",
          text: "首页"
        },
        {
          pagePath: "pages/order/main",
          iconPath: "static/images/order.png",
          selectedIconPath: "static/images/order-selected.png",
          text: "订单"
        },
        {
          pagePath: "pages/my/main",
          iconPath: "static/images/my.png",
          selectedIconPath: "static/images/my-selected.png",
          text: "我的"
        }
      ]
    }

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27

首页预览：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

首页主要代码：

<template>
   <div class="home">
    <div class="mask" v-show="isHidden" @click="mask1Cancel">
        <sortList></sortList>
        <div class="overall-sort-list">
            <div v-for="(item,index) in sortList" :key="index">
                <div class="overall-sort" @click="sortSelected">{{item.sort}}</div>
            </div> 
        </div>
    </div>
     <sprinner v-if="isShow"></sprinner>
    <search></search>
    <h-swiper></h-swiper>
        <div class="title">
            <div class="line"></div>
            <div class="text">附近商家</div>
            <div class="line"></div>
        </div>
        <div class="select">
            <div class="sort-list">
                <div class="sort" @click="onOverallTag">综合排序{{sortSelected}}
                <image src="/static/images/down.png" style="width:20rpx;height:20rpx;"/></div>
                <div :data-index="0" @click="onTapTag" class="sort " :class="{'sort-active': selected == 0}">销量最高</div>
                <div :data-index="1" @click="onTapTag" class="sort" :class="{'sort-active': selected == 1}">距离最近</div>
                <div class="sort" @click="onFilter">筛选
                    <image src="/static/images/screen.png" style="width:22rpx;height:22rpx;"/>
                </div>
            </div>
        </div>
        <scroll-view>
            <div class="restaurantsList">
                    <div class="restaurants-list" v-for="(item,index) in restaurant" :key="index" @click="toIndex">
                        <div class="restaurants-info-image"><image :src="item.src" class="restaurants-image"/></div>
                        <div class="restaurants-info">
                        <div class="restaurants-info-name">{{item.name}}</div>
                        <div class="restaurants-info-rating">
                             <star :size="24" :score="item.score"></star>
                            <div 
                            class="restaurants-info-rating-sales">月售 {{item.sales}}</div>
                        </div>
                        <div class="restaurants-info-price">
                            起送 {{item.initial_price}}￥ | 配送 {{item.distribution_price}}
                        </div>
                    </div>
                    <div class="restaurants-distribution">
                        <span class="restaurants-distribution-time">{{item.time}} 分钟</span>
                        <span class="restaurants-distribution-distance"> {{item.distance}}</span> 
                      
                    </div>
                    </div>
            </div>
        </scroll-view>
   
   </div>
    
</template>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56

定位预览效果：

在这里插入图片描述

使用微信接口进行定位

 getWXLocation(success, fail, complete) {
        wx.getLocation({
            type: 'gcj02',
            success: success,
            fail: fail,
            complete: complete
        });
    },

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

获取location参数

getLocationParam(location) {
        if (typeof location == 'string') {
            var locationArr = location.split(',');
            if (locationArr.length === 2) {
                location = {
                    latitude: location.split(',')[0],
                    longitude: location.split(',')[1]
                };
            } else {
                location = {};
            }
        }
        return location;
    },

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

处理用户参数是否传入坐标进行不同的处理

locationProcess(param, locationsuccess, locationfail, locationcomplete) {
        var that = this;
        locationfail = locationfail || function (res) {
            res.statusCode = ERROR_CONF.WX_ERR_CODE;
            param.fail(that.buildErrorConfig(ERROR_CONF.WX_ERR_CODE, res.errMsg));
        };
        locationcomplete = locationcomplete || function (res) {
            if (res.statusCode == ERROR_CONF.WX_ERR_CODE) {
                param.complete(that.buildErrorConfig(ERROR_CONF.WX_ERR_CODE, res.errMsg));
            }
        };
        if (!param.location) {
            that.getWXLocation(locationsuccess, locationfail, locationcomplete);
        } else if (that.checkLocation(param)) {
            var location = Utils.getLocationParam(param.location);
            locationsuccess(location);
        }
    }

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

POI周边检索

 search(options) {
        var that = this;
        options = options || {};

        Utils.polyfillParam(options);

        if (!Utils.checkKeyword(options)) {
            return;
        }

        var requestParam = {
            keyword: options.keyword,
            orderby: options.orderby || '_distance',
            page_size: options.page_size || 10,
            page_index: options.page_index || 1,
            output: 'json',
            key: that.key
        };

        if (options.address_format) {
            requestParam.address_format = options.address_format;
        }

        if (options.filter) {
            requestParam.filter = options.filter;
        }

        var distance = options.distance || "1000";
        var auto_extend = options.auto_extend || 1;

        var locationsuccess = function (result) {
            requestParam.boundary = "nearby(" + result.latitude + "," + result.longitude + "," + distance + "," + auto_extend +")";
            wx.request(Utils.buildWxRequestConfig(options, {
                url: URL_SEARCH,
                data: requestParam
            }));
        }
        Utils.locationProcess(options, locationsuccess);
    }

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39

sug模糊检索

getSuggestion(options) {
        var that = this;
        options = options || {};
        Utils.polyfillParam(options);

        if (!Utils.checkKeyword(options)) {
            return;
        }

        var requestParam = {
            keyword: options.keyword,
            region: options.region || '全国',
            region_fix: options.region_fix || 0,
            policy: options.policy || 0,
            output: 'json',
            key: that.key
        };
        wx.request(Utils.buildWxRequestConfig(options, {
            url: URL_SUGGESTION,
            data: requestParam
        }));
    }

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22

逆地址解析

reverseGeocoder(options) {
        var that = this;
        options = options || {};
        Utils.polyfillParam(options);
        var requestParam = {
            coord_type: options.coord_type || 5,
            get_poi: options.get_poi || 0,
            output: 'json',
            key: that.key
        };
        if (options.poi_options) {
            requestParam.poi_options = options.poi_options
        }

        var locationsuccess = function (result) {
            requestParam.location = result.latitude + ',' + result.longitude;
            wx.request(Utils.buildWxRequestConfig(options, {
                url: URL_GET_GEOCODER,
                data: requestParam
            }));
        };
        Utils.locationProcess(options, locationsuccess);
    }

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23

地址解析

geocoder(options) {
        var that = this;
        options = options || {};
        Utils.polyfillParam(options);

        if (Utils.checkParamKeyEmpty(options, 'address')) {
            return;
        }

        var requestParam = {
            address: options.address,
            output: 'json',
            key: that.key
        };

        wx.request(Utils.buildWxRequestConfig(options, {
            url: URL_GET_GEOCODER,
            data: requestParam
        }));
    }

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

获取城市列表

 getCityList(options) {
        var that = this;
        options = options || {};
        Utils.polyfillParam(options);
        var requestParam = {
            output: 'json',
            key: that.key
        };

        wx.request(Utils.buildWxRequestConfig(options, {
            url: URL_CITY_LIST,
            data: requestParam
        }));
    }

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

获取对应城市ID的区县列表

getDistrictByCityId(options) {
        var that = this;
        options = options || {};
        Utils.polyfillParam(options);

        if (Utils.checkParamKeyEmpty(options, 'id')) {
            return;
        }

        var requestParam = {
            id: options.id || '',
            output: 'json',
            key: that.key
        };

        wx.request(Utils.buildWxRequestConfig(options, {
            url: URL_AREA_LIST,
            data: requestParam
        }));
    }

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

用于单起点到多终点的路线距离(非直线距离)计算：
* 支持两种距离计算方式：步行和驾车。
* 起点到终点最大限制直线距离10公里。

calculateDistance(options) {
        var that = this;
        options = options || {};
        Utils.polyfillParam(options);

        if (Utils.checkParamKeyEmpty(options, 'to')) {
            return;
        }

        var requestParam = {
            mode: options.mode || 'walking',
            to: Utils.location2query(options.to),
            output: 'json',
            key: that.key
        };

        var locationsuccess = function (result) {
            requestParam.from = result.latitude + ',' + result.longitude;
            wx.request(Utils.buildWxRequestConfig(options, {
                url: URL_DISTANCE,
                data: requestParam
            }));
        }
        if (options.from) {
            options.location = options.from;
        }
        
        Utils.locationProcess(options, locationsuccess);
    }

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29

订单页预览

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

订单页主要代码

<template>
    <div class="order">
        <div class="empty" v-if="isShow">
          <div class="image">
            <image src="/static/images/orderImg.png"/>
          </div>
          <div class="order" @click="toIndex">
             <span class="text">立即下单</span>
          </div>
         
        </div>
      <scroll-view class="container" :scroll-y="true">
        <div class="orderList" v-for="(item,index) in orderList" :key="index">
          <div class="order-title">
            <div class="order-title-restaurantName">
              <span class="name">{{item.name}}</span>
             <span class="iconfont icon-icon icon"></span>
            </div>
            <div class="order-title-state">商家已接单</div>
          </div>
          <div class="order-content">
            <image class="order-content-restaurantImg" :src="item.icon"/>
            <div class="order-content-info">
              <div class="order-content-info-price">￥ {{item.price}}</div>
              <div class="order-content-info-howToDistribute">美团小助手提供服务</div>
            </div>
          </div>
            <div class="order-desc">共{{item.count}}件商品，实付<span style="font-weight:700;">￥ {{item.count*item.price}}</span></div>
          <div class="order-footer">
            <div class="order-footer-orderAgain">再来一单</div>
            <div class="order-footer-goToComment">去评论</div>
          </div>
        </div>
      </scroll-view>
    </div>
</template>

<script>
   import util from '@/utils/util'
export default {
    data() {
        return {
             orderList:[],
             isShow: true
        }
    },
    onShow(){
       
         try {
            var value = wx.getStorageSync('selectFoods')
            if (value) {
              this.isShow = false;
              this.orderList=value;
            }
          } catch (e) {
            console.log(e)
          };

         
    },
    methods: {
      toIndex() {
          wx.switchTab({
            url: '/pages/home/main',
          })
        
      }

    }
}
</script>

<style lang="stylus" scoped>
  .empty
    display flex
    flex-direction column
    justify-content center
    align-items center
    margin-top 25%
    .order
      height 68rpx
      width 240rpx
      background-color #ffd300
      text-align center
      margin-top 40rpx
      line-height 68rpx
      border-radius 5rpx

  .container
    height: 100%
    .orderList
      width 100%
      padding 15rpx
      border 100rpx 0
      border-style solid
      border-color #ECECEC
      .order-title
        width 100%
        height 70rpx
        line-height 70rpx
        border-bottom 1rpx solid #ECECEC
        .order-title-restaurantName
          width 200rpx
          float left
          height 100%
          font-size 30rpx
          .name 
            padding-right 10rpx
          .icon
            color #b4b4b4
        .order-title-state
          width 200rpx
          float right
          color #ffc648
          margin-right -15rpx
          font-size 28rpx
      .order-content
        height 250rpx
        display flex
        align-items center
        .order-content-restaurantImg
          width 125rpx
          height 125rpx
        .order-content-info
          font-size 25rpx
          flex 1
          display flex
          flex-direction column
          .order-content-info-price,.order-content-info-howToDistribute
            height 42rpx
            line-height 42rpx
            margin-left 30rpx
          .order-content-info-price
            color: red
            font-size: 30rpx
      .order-desc
        float right 
        font-size 30rpx
        width 335rpx
        margin-bottom 40rpx
        line-height 30rpx
        margin-right 10rpx
      .order-footer
        width 100%
        height 90rpx
        display flex
        justify-content flex-end
        font-size 28rpx
        .order-footer-goToComment,.order-footer-orderAgain
          margin-top 15rpx
          margin-right: 40rpx
          height 70rpx
          line-height 70rpx
          width 200rpx
          text-align center
          border 1rpx solid #ECECEC
        .order-footer-orderAgain
          margin-right 20rpx
        .order-footer-goToComment
          background #FFD161
        
</style>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162

精选32套源码目录：

IT之家小程序版客户端(使用 Mpvue 开发，兼容 Web)ithome-lite-master.zip

mpvue 仿网易严选mpvue-shop-master.zip

mpvue-音乐播放器mpvue-music-master.zip

mpvue性能测试与体验miniweibo-master.zip

mpvue改造的日历.zip

mpvue框架仿滴滴出行didi-master.zip

mpVue高仿美团小程序教程mpvue-meituan-master.zip

uni APP自动更新并安装.vue

uni-app nvue沉浸式状态栏(线性渐变色).vue

uni-app 二维码生成器分享wxqrcode.zip

uni-app 侧边导航分类,适合商品分类页面uni-app-left-navigation-master.zip

uni-app 自定义底部导航栏uni-app-bottom-navigation-master.zip

uni-app全局变量的几种实现方式.zip

uni-app的markdown富文本编辑器插件uniapp-markdown-master.zip

uni-app自定义导航栏title-custom.zip

uniapp聊天实例，支持图片，语音，表情.zip

uniapp选择器,包含一级,二级级联,三级级联uniapp-picker-master.zip

vue-mpvue-ChatRobot聊天机器人vue-mpvue-ChatRobot-master.zip

【小程序】CNode社区mpvue-cnode-master.zip

【插件、图表】7种图表漂亮丰富uniCharts.zip

一款播课类小程序, 基于 mpvue 构建mp-podcast-mpvue-master.zip

云档新版小程序端，基于mpvue开发cloud-doc-v2-master.zip

仿uc浏览器列表.vue

仿扎克新闻mpZAKER-master.zip

仿网易云UImusic播放器mpvue-music-master.zip

仿追书神器的小说阅读器小程序wx-book-master.zip

参照米家APP布局和样式,编写的一款智能家居小程序smart-home-master.zip

商城实例mpvue-xbyjShop-master.zip

基于 mpvue 实现豆瓣电影微信小程序mpvue-douban-master.zip

基于mpvue的优酷mpvue-youku-master.zip

校园助手示例SHUhelper-master.zip

类似mui中的chat(聊天窗口)实现uniapp-chat-master.zip

美团外卖(第三方)开源程序mpvue-master.zip

美食搜索mpvue-FG-master.zip

豆瓣平分mpvue-douban-pingfen-master.zip

顶部tabbar.vue

源码截图：
在这里插入图片描述

说明

如果本项目对您有帮助，欢迎 “点赞，关注” 支持一下 谢谢~

源码获取关注公众号「码农园区」，回复 【uniapp源码】
在这里插入图片描述

​

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

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号