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

最新推荐文章于 2024-07-17 15:37:25 发布

羲云网络

最新推荐文章于 2024-07-17 15:37:25 发布

阅读量584

点赞数

分类专栏：社区团购文章标签：微信小程序小程序 php

本文链接：https://blog.csdn.net/jakeycis123/article/details/124343761

版权

社区团购专栏收录该内容

3 篇文章 0 订阅

订阅专栏

羲云社区团购微信小程序

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

特色

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

团购功能

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

###首页代码

<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';}//来源id
        if (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_id
            if (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();},
})