羲云社区团购微信小程序

这款社区团购小程序，可以满足大部分中小门店的使用，可以多门店，或者城市多商户的使用。
我将用一系列的介绍该小程序的各个页面开发设计。
小程序测试地址：羲云科技
免费使用：羲云科技
手机验证码登录即可测试和使用多款小程序。

特色

首页产用横轴设计，大图模式，可以有非常大的冲击力。
多门店显示，滑动活动，可以展示不同门店，以及显示到门店距离。

团购功能

每一个团购活动，可以使用优惠券，秒杀，满赠，整体折扣，包邮，阶梯价，团长佣金等多种促销方式，可以非常有效的引流并提高订单单量。

###首页代码

<import src="../temp.wxml"/>
<view class="shop_info" style="top:{{nav.safe_top}}px" bindtap="go" data-url="/pages/map/index?latitude={{select_hd.latitude}}&longitude={{select_hd.longitude}}">
<view class="shop_name">{{select_hd.shop_name}}</view>
<view class="shop_addr"><text wx:if="{{select_hd.dis}}">距离您{{select_hd.dis}}</text><text wx:else>{{select_hd.addr}}</text></view>
</view><view class="main" style="padding-top:{{nav.safe_top+60}}px;">
<swiper  next-margin="30px"  easing-function="easeInOutCubic" previous-margin="30px" bindchange="scroll" >
<swiper-item wx:for="{{list}}" wx:key="i" wx:index="index" class="{{is_load==1?'':'m'}} {{index==select_index?'':'not_select'}}">
<view class="swiper_item " bindtap="go" data-url="/pages/index/detail?id={{item.id}}">
<view class="img_box" style="background:url({{item.img}}) no-repeat center;background-size: cover;">
<view class="logo" style="background:url({{item.logo}}) no-repeat center;background-size: cover;"></view>
</view>
<view class="title">{{item.title}}</view>
<view class="is_hot">
<text wx:if="{{item.miao_pro}}">秒</text>
<text class="is_mz" wx:if="{{item.mz_pro}}">赠</text>
<text class="is_quan" wx:if="{{item.quan_num>0}}">券</text>
<text class="is_zhe" wx:if="{{item.zk!=100}}">折</text>
</view>
<view class="info">{{item.info}}</view>
<view class="price"><text>￥</text>{{item.min}}{{item.max>item.min?'-'+item.max:''}}</view>
<text class="hd_end">{{item.time}}</text>
<view class="icon buy_bt icon-plus m"></view>
</view>
</swiper-item></swiper>
</view><view class="x_bt" wx:if="{{show_list}}">
<view class="item"><view class="bt left" bindtap="go" data-url="/pages/map/index">
<view class="b">门店列表</view>
<text>查找门店位置</text>
<icon class="icon icon-shangcheng1"></icon>
</view></view>
<view class="item">
<view class="bt right" bindtap="emp_set" data-url="/pages/shop/creat">
<view class="b">门店加盟</view>
<text>免费发布活动</text>
<icon class="icon icon-gouwudai"></icon>
</view></view>
</view><view class="bottom_box">
<view class="icon1" bindtap="go" data-url="/pages/hd/index"><icon class="icon icon-list"></icon><text>活动列表</text></view>
<view class="icon0">
<view class="icon icon-QRCode-1" bindtap="go" data-url="/pages/index/order"></view>
</view>
<view class="icon1" bindtap="go" data-url="/pages/my/index"><icon class="icon icon-wode2"></icon><text>个人中心</text></view>
</view><view wx:if="{{can_edit==1}}" class="edit_bt icon-bianji icon" bindtap="go" data-url="/pages/index/editor"></view>

CSS

page{background: #efefef;}
.main{width: 100%;padding-left:0px;padding-right:0px;position: fixed;height: 100vh;left: 0;top: 0;padding-bottom:180px;}
swiper{float: left;width: 100%;height:100%;}
swiper-item{float: left;width: 100%;height:100%;padding-left:10px;padding-right:10px;box-sizing: border-box;padding-bottom:25px;}
.swiper_item{float: left;width: 100%;height: 100%;box-shadow:0px 20px 20px -15px rgba(0,0,0,0.2),1px -1px 0px 0 rgba(0,0,0,0.05);background:#fff;border-radius:30px;align-items: center;padding:20px;overflow: hidden;padding-bottom:200px;}
.not_select{padding-top: 20px;padding-bottom: 40px;}
.buy_bt{position: absolute;width:70px;height:70px;border-radius: 50%;line-height: 70px;background: #00a47c;color: #fff;bottom:25px;right:25px;text-align: center;font-size:40px;z-index: 100;text-shadow: 1px 1px #666;box-shadow: 1px 1px 2px 0 #9cf5df;}
.not_select .buy_bt{width: 60px;height:60px;line-height: 60px;}.shop_info{position: absolute;width: 100%;padding-left:40px;z-index: 100;}
.shop_info .shop_name{float: left;width: 100%;height:28px;line-height: 28px;font-weight: bold;font-size:20px;color: #00a47c;overflow: hidden;padding-right: 100px;}
.shop_info .shop_addr{float: left;width: 100%;height: 16px;line-height: 16px;color: #666;font-size: 13px;}.img_box{float: left;width: 100%;height:100%;border-radius:20px;border-bottom-left-radius: 0;border-bottom-right-radius: 0;}
.img_box::after{background:linear-gradient(0deg, #fff,rgba(0,0,0,0));height:80px;position: absolute;left: 0;bottom: 0;width: 100%;content: '';}
.swiper_item .title{float: left;width: 100%;margin-top:10px;font-size: 20px;font-weight: bold;line-height: 24px;max-height: 48px;overflow: hidden;}
.swiper_item .info{float: left;width: 100%;line-height: 18px;margin-top:5px;color: #666;max-height: 36px;overflow: hidden;padding-right: 60px;}
.swiper_item .price{position: absolute;bottom:36px;color: crimson;font-size: 26px;font-weight: bold;}
.swiper_item .price text{font-size: 13px;}
.hd_end{position: absolute;width: 100%;bottom:18px;height: 16px;line-height: 16px;color: #999;font-size: 14px;left: 0;padding-left: 20px;}.swiper_item .is_hot{float: left;width: 100%;margin-top: 5px;}
.swiper_item .is_hot text{float: left;width:22px;height: 22px;border-radius: 5px;margin-right: 5px;background: crimson;color: #fff;text-align: center;font-size: 13px;line-height: 22px;}
.swiper_item .is_quan{background: sandybrown !important;}
.swiper_item .is_mz{background: #00a47c !important;}
.swiper_item .is_zhe{background: rgb(70, 198, 236) !important;}.swiper_item .logo{position: absolute;width:50px;height: 50px;top: 10px;left: 10px;border-radius: 50%;}.x_bt{width: 100%;padding-left: 15px;position: absolute;bottom:110px;padding-right: 15px;}
.x_bt .item{float: left;width: 50%;padding-left: 5px;padding-right: 5px;}
.x_bt .bt{float: left;width: 100%;height:60px;background: #eee;box-shadow: 1px 1px 3px 0 #ddd;border-radius: 10px;}
.x_bt .right{padding: 10px;padding-right:60px;}
.x_bt .right .icon{position: absolute;width: 40px;height: 40px;line-height: 40px;font-size:32px;color: #00a47c;right: 0;top:10px;}
.x_bt .right .b{float: left;width: 100%;height: 20px;line-height: 20px;font-weight: bold;font-size: 17px;text-align: right;}
.x_bt .right text{float: left;width: 100%;height: 18px;line-height: 18px;text-align: right;color: #999;font-size: 14px;}.x_bt .left{padding: 10px;padding-left:60px;}
.x_bt .left .icon{position: absolute;width: 40px;height: 40px;line-height: 40px;font-size:32px;color: #00a47c;left:10px;top:10px;}
.x_bt .left .b{float: left;width: 100%;height: 20px;line-height: 20px;font-weight: bold;font-size: 17px;text-align: left;}
.x_bt .left text{float: left;width: 100%;height: 18px;line-height: 18px;text-align: left;color: #999;font-size: 14px;}.bottom_box{position: fixed;width: 100%;bottom: 0;left: 0;z-index: 1000;height: 80px;background: #fff;padding-left: 30px;padding-right: 30px;text-align: center;}
.bottom_box .icon1{float: left;width:25%;}
.bottom_box .icon0{float: left;width: 50%;display: flex;justify-items: center;align-items: center;flex-direction: row;justify-content: center;}
.bottom_box .icon1 icon{float: left;width: 100%;font-size:32px;color: #00a47c;height: 30px;line-height: 30px;margin-top: 15px;}
.bottom_box .icon1 text{float: left;width: 100%;height: 20px;line-height: 20px;font-size: 14px;color: #999;margin-top: 0px;}
.bottom_box .icon0 view{float: left;width:80px;height: 80px;border-radius: 50%;border-radius: 50%;background: #00a47c;color: #fff;line-height: 80px;font-size:40px;margin-top: -10px;text-shadow: 1px 1px #00a47c;}.edit_bt{position: fixed;width: 70px;height: 70px;background: crimson;color: #fff;line-height: 70px;border-radius: 50%;right: 20px;bottom: 100px;z-index: 10000;text-align: center;font-size: 30px;}

JS

var app = getApp()
var fun = require('../fun.js');
Page({data: {nav:{top:app.globalData.nav_top,title:'首页',home:'show',back:'show',safe_top:app.globalData.safe_top,bottom:app.globalData.safe_bottom,page:'home'},page:1,share_bt:'1',select_index:0,show_list:0},onLoad: function (op) {var from='direct';//从哪里来var from_id=op.f;if(!from_id){from_id=0;from='link';}//来源idif (op.scene) {//扫描var scene = decodeURIComponent(op.scene);var arrPara = scene.split("&");var arr = [];for (var i in arrPara) {arr = arrPara[i].split("=");if (arr[0] == 'f') { from_id = arr[1]; }//from_idif (arr[0] == 'id') { id=arr[1];}//门店id}from='scan';}app.globalData.from=from;app.globalData.from_id=from_id;
if(wx.getSystemInfoSync().windowHeight>680){this.setData({show_list:1})
}},onReady: function () {this.load();
fun.get_pos().then(res=>{if(res.err=='ok'){//用户的经纬度app.globalData.latitude=res.latitude; app.globalData.longitude=res.longitude;var list=this.data.list;if(list && app.globalData.latitude){//如果有列表，则对列表进行距离计算var select_hd=this.data.select_hd;
for(var i in list){if(list[i].latitude){var dis=fun.get_dis(app.globalData.latitude,app.globalData.longitude,list[i].latitude,list[i].longitude);
list[i].dis=dis;
if(select_hd && select_hd.id==list[i].id){select_hd.dis=dis;this.setData({select_hd:select_hd})
}
}
}this.setData({list:list});}}})},onShow: function () {},load: function () {fun.get({ac:'get_hd_list',path:'hd'}).then(res=>{var select_hd;var list;if(res.list){list=res.list;
if(app.globalData.latitude){//距离计算for(var i in list){if(list[i].latitude){var dis=fun.get_dis(app.globalData.latitude,app.globalData.longitude,list[i].latitude,list[i].longitude);list[i].dis=dis;}}
}
select_hd=list[0];}this.setData({list:list,user:res.user,//app:res.app,can_edit:res.can_edit,select_hd:select_hd,hd_num:res.num});
})},scroll(e){console.log(e.detail)
var list=this.data.list;var select_index=e.detail.current
this.setData({select_index:select_index,select_hd:list[select_index]});
var num=this.data.hd_num;if(!num || num<10){return;}
var sy=num-select_index-1;//距离
if(sy<5){this.load_more();}},load_more(e){//获取更多数据var page=this.data.page;if(!page){page=1;}page++;var is_load=this.data.is_load;if(is_load==1){return;}var that=this;
this.setData({is_load:1});
fun.get({ac:'get_hd_list',path:'hd',c:'load_more',page:page}).then(res=>{if(res.list){var list=this.data.list;if(!list){list=[]}
for(var i in res.list){if(app.globalData.latitude && res.list[i].latitude){//计算距离var dis=fun.get_dis(app.globalData.latitude,app.globalData.longitude,res.list[i].latitude,res.list[i].longitude);res.list[i].dis=dis;
}list.push(res.list[i])
}
var num=this.data.hd_num;if(!num){num=0}
num+=res.num;
this.setData({hd_num:num,list:list});
setTimeout(function(){that.setData({is_load:0})},200);
}})},emp_set(e){//将用户设置为门店雇员fun.get({ac:'emp_set',path:'hd'}).then(res=>{this.load();})},scroll_change(e){//滑动// console.log(e.detail)},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {},go(e){ var url=e.currentTarget.dataset.url;if(!url){app.msg('没有设置链接，请到后台设置或者联系我们');return;}wx.navigateTo({url: e.currentTarget.dataset.url})},back(e){wx.navigateBack({delta:0})},home(e){ wx.reLaunch({url: '/pages/index/index'})},rgo(e){wx.redirectTo({url: e.currentTarget.dataset.url})},login: function (e) { wx.navigateTo({url: '/pages/login/index'})},win_open(e){var c=e.currentTarget.dataset.c;this.setData({[c]:'show'})},//打开窗口win_close(e){var c=e.currentTarget.dataset.c;this.setData({[c]:''})},//关闭窗口
open_min(e){wx.navigateToMiniProgram({appId: e.currentTarget.dataset.url,path: '/pages/index/index',})},
scan(e){fun.scan();},
})

部分字体，及代码片段，可以自行创建。

羲云社区团购微信小程序多门店版，首页开发相关推荐

羲云社区团购微信小程序活动详细页（界面及功能设计）
羲云社区团购小程序详细页设计功能介绍详细页主要是展示活动内容,以及特定的营销功能,我在设计的时候,将各种营销功能进行统一整合,以达到增加订单金额的效果. 1,优惠券,优惠券在很多应用中有会有,但 ...
社区团购微信小程序的设计与实现
目录 1 系统简介 2 系统相关技术 2.1微信开发者工具 2.2前端开发技术 2.3后端开发技术 2.4数据库技术 3 需求分析 3.1 功能模块 3.1.1 系统功能模块模型 3.2 系统核心业务 ...
基于java springboot 社区团购微信小程序源码
去年火了一整年的社区团购,一直将战火烧到了2021年春节.春节期间,一些菜市场和小店暂停营业,居民置办年货和买菜的需求剧增,各大以买菜为主要卖点的社区团购平台,盯上了这个难得的冲单时机. 后台主要用到 ...
为什么社区团购需要小程序？
很多人将社区团购的火爆归因于团长模式的创新,却忽视了小程序的主推作用. 可以说没有小程序就没有社区团购的火爆,那么社区团购为何需要小程序,社区拼团小程序又需要哪些功能,下面一一为你解答: 一.为什么社 ...
多模板DIY代付社区团购商城小程序开发
多模板DIY代付社区团购商城小程序开发后台功能商家端强大基础功能.店铺管理.商品管理.订单管理.会员管理.营销管理.财务管理.分销配置.商城设置.系统配置.模板市场.实体商品.订单列表.会员信息. ...
独立版狮子鱼15.0.1社区团购直播小程序商城源码
之前公司做社区团购项目买的源码.现在还在一直更新中,以后有新的版本出来,我尽量也发上来. 本人不懂技术,是否有后门请自行检查. 官方文档: 数据库对比独立版安装教程: 升级日志: V15.0.1 [ ...
python开发小程序拼团_微信小程序新功能，正合适开发拼团类小程序|明智科技...
1.分享微信小程序的任何一个页面都可以增加分享功能,用户可以把小程序便捷的分享给通讯录的好友和微信群.但不能分享到朋友圈. 也可以进一步理解为小程序开发者可以创造一种诱导用户分享给好友和微信群的应用 ...
独立版狮子鱼16.0.2社区团购直播小程序商城+团长功能+接龙分销+拼团秒杀
介绍: [优化] 非预售vip会员商品价格 [优化] 非预售vip会员满减活动重要提醒:(升级前请务必做好代码.数据库备份) 本次更新需要重新上传小程序,小程序在Data/V16.0.2/wepro ...
做一个社区配送的小程序利用小程序搭建自己的社区配送营销商城，小程序社区O2O，社区网络超市微信小程序开发
小程序线上入口开放越来越多,进入小程序的行业也逐渐增多,尤其是这几个月,线下实体行业纷纷转向小程序,其中尤其以零售店,便利店为主,所以今天和大家一起来聊聊社区网络超市微信小程,便利店小程序. 一般的社 ...
华为云物联网平台的微信小程序开发
第0章简介上上期出了一个华为云物联网平台的Android APP应用开发教程, 根据后台的私信,包括华为云物联网IOT论坛里和公众号里,发现大家对物联网平台的移动端的开发需求还是很大的,接下来,带 ...

羲云社区团购微信小程序多门店版，首页开发

羲云社区团购微信小程序

特色

团购功能

CSS

JS

羲云社区团购微信小程序多门店版，首页开发相关推荐

最新文章

热门文章