羲云社區團購微信小程序

這款社區團購小程序，可以滿足大部分中小門店的使用，可以多門店，或者城市多商戶的使用。
我將用一系列的介紹該小程序的各個頁面開發設計。
小程序測試地址： 羲云科技
免費使用：羲云科技
手機驗證碼登錄即可測試和使用多款小程序。

特色

首頁產用橫軸設計，大圖模式，可以有非常大的沖擊力。
多門店顯示，滑動活動，可以展示不同門店，以及顯示到門店距離。

團購功能

每一個團購活動，可以使用優惠券，秒殺，滿贈，整體折扣，包郵，階梯價，團長傭金等多種促銷方式，可以非常有效的引流并提高訂單單量。

###首頁代碼

<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();}, })

部分字體，及代碼片段，可以自行創建。

總結

以上是生活随笔為你收集整理的羲云社区团购微信小程序多门店版，首页开发的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。